@likec4/diagram 1.20.2 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.20.2",
+  "version": "1.21.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -39,8 +39,8 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@likec4/core": "1.20.2",
-    "@mantine/vanilla-extract": "7.15.2",
+    "@likec4/core": "1.21.0",
+    "@mantine/vanilla-extract": "7.16.2",
     "@react-hookz/web": "^25.0.1",
     "@tabler/icons-react": "3.29.0",
     "@xstate/react": "^5.0.2",
@@ -52,31 +52,31 @@
     "d3-shape": "^3.2.0",
     "esm-env": "^1.2.2",
     "fast-equals": "^5.2.2",
-    "framer-motion": "^11.16.0",
+    "framer-motion": "^11.18.2",
     "khroma": "^2.1.0",
     "react-error-boundary": "^4.1.2",
-    "remeda": "^2.19.0",
+    "remeda": "^2.20.1",
     "type-fest": "4.28.1",
     "xstate": "^5.19.2"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.15.2",
-    "@mantine/hooks": "^7.15.2",
-    "@mantine/spotlight": "^7.15.2",
+    "@mantine/core": "^7.16.2",
+    "@mantine/hooks": "^7.16.2",
+    "@mantine/spotlight": "^7.16.2",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.20.2",
-    "@mantine/core": "7.15.2",
-    "@mantine/hooks": "7.15.2",
-    "@mantine/spotlight": "7.15.2",
+    "@likec4/tsconfig": "1.21.0",
+    "@mantine/core": "7.16.2",
+    "@mantine/hooks": "7.16.2",
+    "@mantine/spotlight": "7.16.2",
     "@statelyai/inspect": "^0.4.0",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
     "@types/react": "~19.0.8",
     "@types/react-dom": "~19.0.3",
-    "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/css": "^1.17.1",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
     "react": "~19.0.0",
@@ -84,6 +84,6 @@
     "typescript": "^5.7.3",
     "vite": "5.4.14",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^2.1.8"
+    "vitest": "^3.0.4"
   }
 }

package/src/base/example/_types.ts

@@ -1,4 +1,4 @@
-import type { Color, DiagramNode, Fqn } from '@likec4/core'
+import type { Color, DiagramNode, Fqn, IconUrl } from '@likec4/core'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../types'
 
 export namespace ExampleTypes {
@@ -13,6 +13,7 @@ export namespace ExampleTypes {
         | 'description'
         | 'color'
         | 'shape'
+        | 'style'
         | 'width'
         | 'height'
         | 'navigateTo'
@@ -39,7 +40,7 @@ export namespace ExampleTypes {
       // column: Column
       fqn: Fqn
       depth: number
-      icon: string | null
+      icon: IconUrl
     }
   >
 

package/src/base/example/useViewToNodesEdges.ts

@@ -104,7 +104,7 @@ function viewToNodesEdge(
               shape: node.shape,
               style: node.style,
               depth: node.depth ?? 0,
-              icon: node.icon ?? null,
+              icon: node.icon ?? 'none',
               fqn,
               ...navigateTo,
             },
@@ -126,6 +126,7 @@ function viewToNodesEdge(
               width: node.width,
               color: node.color,
               shape: node.shape,
+              style: node.style,
               icon: node.icon ?? null,
               ...navigateTo,
             },

package/src/base/primitives/compound/CompoundTitle.css.ts

@@ -1,5 +1,5 @@
 import { rem } from '@mantine/core'
-import { style } from '@vanilla-extract/css'
+import { globalStyle, style } from '@vanilla-extract/css'
 import { vars, whereLight } from '../../../theme-vars'
 
 export const compoundTitle = style({
@@ -41,3 +41,29 @@ export const title = style({
     },
   },
 })
+
+const iconSize = '20px'
+export const icon = style({
+  flex: `0 0 ${iconSize}`,
+  height: `${iconSize}`,
+  width: `${iconSize}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  mixBlendMode: 'hard-light',
+})
+
+globalStyle(`${icon} svg, ${icon} img`, {
+  width: '100%',
+  height: 'auto',
+  maxHeight: '100%',
+  pointerEvents: 'none',
+  filter: `
+    drop-shadow(0 0 3px rgb(0 0 0 / 12%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
+    drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
+  `,
+})
+globalStyle(`${icon} img`, {
+  objectFit: 'contain',
+})

package/src/base/primitives/compound/CompoundTitle.tsx

@@ -3,17 +3,26 @@ import { Box, Text } from '@mantine/core'
 import clsx from 'clsx'
 import type { NodeProps } from '../../types'
 import * as css from './CompoundTitle.css'
+import { IconRenderer } from '../../../context'
 
 type Data = Pick<
   DiagramNode,
   | 'color'
   | 'title'
+  | 'icon'
 >
 
 type CompoundTitleProps = NodeProps<Data>
 
-export function CompoundTitle({ data }: CompoundTitleProps) {
-  const isHovered = data.hovered ?? false
+export function CompoundTitle({ id, data }: CompoundTitleProps) {
+  const elementIcon = IconRenderer({
+    element: {
+      id,
+      title: data.title,
+      icon: data.icon,
+    },
+    className: css.icon,
+  })
 
   return (
     <Box
@@ -21,6 +30,7 @@ export function CompoundTitle({ data }: CompoundTitleProps) {
         css.compoundTitle,
         'likec4-compound-title',
       )}>
+      {elementIcon}
       <Text className={css.title} truncate="end">
         {data.title}
       </Text>

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

@@ -1,4 +1,4 @@
-import type { DiagramNode } from '@likec4/core'
+import { type DiagramNode, DefaultPaddingSize, DefaultShapeSize, DefaultTextSize } from '@likec4/core'
 import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
@@ -10,6 +10,7 @@ type RequiredData = Pick<
   DiagramNode,
   | 'color'
   | 'shape'
+  | 'style'
 >
 
 type ElementNodeContainerProps =
@@ -42,6 +43,22 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
         break
     }
 
+    let {
+      size,
+      padding,
+      textSize,
+    } = data.style
+
+    // if (size === DefaultShapeSize && textSize !== DefaultTextSize) {
+    //   size = textSize
+    // }
+    if (!size && !!textSize) {
+      size = textSize
+    }
+    if (!textSize && !!size) {
+      textSize = size
+    }
+
     return (
       <Box
         component={m.div}
@@ -60,6 +77,9 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
         data-hovered={isHovered}
         data-likec4-color={data.color}
         data-likec4-shape={data.shape}
+        data-likec4-shape-size={size ?? DefaultShapeSize}
+        data-likec4-padding={padding ?? DefaultPaddingSize}
+        data-likec4-text-size={textSize ?? DefaultTextSize}
         data-likec4-dimmed={isDimmed}
         {...rest}
       >

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

@@ -130,5 +130,10 @@ export const shapeSvg = style([shapeBase, {
         [filterShadow]: `none`,
       },
     },
+    [`:where([data-likec4-zoom-small="true"]) &`]: {
+      vars: {
+        [filterShadow]: `none`,
+      },
+    },
   },
 }])

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

@@ -1,11 +1,12 @@
 import { rem } from '@mantine/core'
 import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { calc } from '@vanilla-extract/css-utils'
 import { vars } from '../../../theme-vars'
+import { iconSize, paddingSize, textSize } from './styles.css'
 
 export const hasIcon = style({})
 
 const textAlign = createVar('text-align')
-export const iconSize = createVar('icon-size')
 
 export const title = style({
   flex: '0 0 auto',
@@ -14,7 +15,7 @@ export const title = style({
   fontStyle: 'normal',
   textAlign: textAlign,
   fontWeight: 500,
-  fontSize: 19,
+  fontSize: textSize,
   lineHeight: 1.15,
   textWrap: 'balance',
   color: vars.element.hiContrast,
@@ -27,7 +28,7 @@ export const description = style({
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
   fontWeight: 400,
-  fontSize: 14,
+  fontSize: calc(textSize).multiply(0.74).toString(),
   lineHeight: 1.2,
   textAlign: textAlign,
   textWrap: 'pretty',
@@ -39,6 +40,9 @@ export const description = style({
     [`:where(${hasIcon}) &`]: {
       textWrap: 'wrap',
     },
+    [`:where([data-likec4-shape-size="xs"], [data-likec4-shape-size="sm"]) &`]: {
+      display: 'none',
+    },
   },
 })
 
@@ -48,7 +52,7 @@ export const technology = style({
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
   fontWeight: 400,
-  fontSize: 12,
+  fontSize: calc(textSize).multiply(0.635).toString(),
   lineHeight: 1.125,
   textAlign: textAlign,
   textWrap: 'balance',
@@ -58,6 +62,9 @@ export const technology = style({
     [`:where([data-hovered='true']) &`]: {
       opacity: 1,
     },
+    [`:where([data-likec4-shape-size="xs"], [data-likec4-shape-size="sm"]) &`]: {
+      display: 'none',
+    },
   },
 })
 
@@ -68,12 +75,9 @@ export const elementDataContainer = style({
   alignItems: 'center',
   justifyContent: 'center',
   flexDirection: 'row',
-  padding: rem(24),
+  padding: paddingSize,
   overflow: 'hidden',
-  gap: rem(10),
-  vars: {
-    [iconSize]: '48px',
-  },
+  gap: rem(12),
   selectors: {
     ':where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) &': {
       paddingLeft: 40,
@@ -86,22 +90,11 @@ export const elementDataContainer = style({
       paddingTop: 32,
       paddingBottom: 28,
     },
-    // [`&:is(${hasIcon})`]: {
-    //   paddingLeft: 40,
-    //   paddingRight: 20
-    // },
-    [`.likec4-element-node:not(:is([data-likec4-shape="queue"],[data-likec4-shape="mobile"])) &:is(${hasIcon})`]: {
-      paddingLeft: 24,
-      paddingRight: 18,
-    },
-    [`&:has(${description}, ${technology})`]: {
-      gap: rem(16),
-      vars: {
-        [iconSize]: '60px',
-      },
-    },
   },
 })
+globalStyle(`:where([data-likec4-shape-size="lg"], [data-likec4-shape-size="xl"]) ${elementDataContainer}`, {
+  gap: rem(16),
+})
 
 export const elementTextData = style({
   height: 'fit-content',
@@ -121,7 +114,7 @@ export const elementTextData = style({
       gap: rem(6),
     },
     [`:where(${hasIcon}) &`]: {
-      minWidth: 'calc(100% - 160px)',
+      minWidth: `calc(100% - ${iconSize} - ${calc(paddingSize).multiply(2).toString()})`,
       alignItems: 'flex-start',
       'vars': {
         [textAlign]: 'left',

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

@@ -1,4 +1,4 @@
-import type { DiagramNode } from '@likec4/core'
+import { type DiagramNode } from '@likec4/core'
 import { Box, Text } from '@mantine/core'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import clsx from 'clsx'
@@ -7,6 +7,7 @@ import { IconRenderer } from '../../../context/IconRenderer'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import type { NodeProps } from '../../types'
 import * as css from './ElementTitle.css'
+import { iconSize as varIconSize } from './styles.css'
 
 type Data =
   & Pick<
@@ -15,6 +16,7 @@ type Data =
     | 'technology'
     | 'description'
     | 'color'
+    | 'style'
   >
   & {
     icon?: string | null
@@ -42,7 +44,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
       )}
       style={{
         ...isNumber(iconSize) && assignInlineVars({
-          [css.iconSize]: `${iconSize}px`,
+          [varIconSize]: `${iconSize}px`,
         }),
       }}
     >

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

@@ -0,0 +1,74 @@
+import { defaultTheme } from '@likec4/core'
+import { rem } from '@mantine/core'
+import { createVar, globalStyle } from '@vanilla-extract/css'
+import { container } from './ElementNodeContainer.css'
+
+export const textSize = createVar('text-size')
+export const paddingSize = createVar('padding-size')
+export const iconSize = createVar('icon-size')
+
+globalStyle(`${container}`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.md),
+    [paddingSize]: rem(defaultTheme.spacing.md),
+    [iconSize]: '60px',
+  },
+})
+
+globalStyle(`${container}[data-likec4-shape-size="xs"]`, {
+  vars: {
+    [iconSize]: '24px',
+  },
+})
+globalStyle(`${container}[data-likec4-shape-size="sm"]`, {
+  vars: {
+    [iconSize]: '36px',
+  },
+})
+globalStyle(`${container}[data-likec4-shape-size="lg"], ${container}[data-likec4-shape-size="xl"]`, {
+  vars: {
+    [iconSize]: '82px',
+  },
+})
+
+globalStyle(`${container}[data-likec4-text-size="xs"]`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.xs),
+  },
+})
+globalStyle(`${container}[data-likec4-text-size="sm"]`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.sm),
+  },
+})
+globalStyle(`${container}[data-likec4-text-size="lg"]`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.lg),
+  },
+})
+globalStyle(`${container}[data-likec4-text-size="xl"]`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.xl),
+  },
+})
+
+globalStyle(`${container}[data-likec4-padding="xs"]`, {
+  vars: {
+    [paddingSize]: rem(defaultTheme.spacing.xs),
+  },
+})
+globalStyle(`${container}[data-likec4-padding="sm"]`, {
+  vars: {
+    [paddingSize]: rem(defaultTheme.spacing.sm),
+  },
+})
+globalStyle(`${container}[data-likec4-padding="lg"]`, {
+  vars: {
+    [paddingSize]: rem(defaultTheme.spacing.lg),
+  },
+})
+globalStyle(`${container}[data-likec4-padding="xl"]`, {
+  vars: {
+    [paddingSize]: rem(defaultTheme.spacing.xl),
+  },
+})

package/src/hooks/useDiagram.ts

@@ -4,8 +4,8 @@ import type { PartialDeep } from 'type-fest'
 import { useDiagramActor } from '../hooks/useDiagramActor'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
 import type { AlignmentMode } from '../likec4diagram/state/aligners'
+import { DiagramContext } from '../likec4diagram/state/machine'
 import type { Types } from '../likec4diagram/types'
-import { DiagramContext } from './useDiagramContext'
 
 export function useDiagram() {
   const actor = useDiagramActor()

package/src/likec4diagram/DiagramUI.tsx

@@ -6,7 +6,7 @@ import { Controls, DiagramTitlePanel } from './ui'
 import NotationPanel from './ui/notation'
 import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough'
 
-export const DiagramUI = memo(() => {
+export function DiagramUI() {
   return (
     <>
       <Controls />
@@ -25,4 +25,4 @@ export const DiagramUI = memo(() => {
       </IfEnabled>
     </>
   )
-})
+}

package/src/likec4diagram/XYFlow.tsx

@@ -3,8 +3,8 @@ import { useCallbackRef } from '@mantine/hooks'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
-import { BaseXYFlow } from '../base'
-import { useDiagramEventHandlers, useEnabledFeature } from '../context'
+import { BaseXYFlow } from '../base/BaseXYFlow'
+import { useDiagramEventHandlers } from '../context'
 import { useDiagram } from '../hooks/useDiagram'
 import { useDiagramContext } from '../hooks/useDiagramContext'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'

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

@@ -27,12 +27,13 @@ import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@
 import clsx from 'clsx'
 import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
-import { Link } from '../../../base'
+import { Link } from '../../../base/Link'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
-import { DiagramContext, useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import { useLikeC4Model } from '../../../likec4model'
+import { DiagramContext } from '../../state/machine'
 import * as css from './RelationshipsDropdownMenu.css'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()

package/src/likec4diagram/types.ts

@@ -1,4 +1,4 @@
-import type { DiagramEdge, DiagramNode, Fqn, ViewId } from '@likec4/core'
+import type { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core'
 import type { XYPosition } from '@xyflow/system'
 import type { OptionalKeysOf, Simplify } from 'type-fest'
 import type { Base } from '../base'
@@ -75,7 +75,7 @@ export namespace Types {
     >
     & {
       depth: number
-      icon: string | null
+      icon?: IconUrl
     }
   >
 

package/src/likec4diagram/useLayoutConstraints.ts

@@ -60,42 +60,46 @@ abstract class Rect {
     }
   }
   protected abstract parent: Compound | null
-}
-
-class Compound extends Rect {
-  public readonly children = [] as Rect[]
 
   constructor(
     xynode: InternalNode,
-    protected readonly parent: Compound | null = null,
+    parent: Compound | null = null,
   ) {
-    super()
     this.id = xynode.id
 
+    this.positionAbsolute = !parent ? xynode.position : {
+      x: xynode.position.x + parent.minX,
+      y: xynode.position.y + parent.minY,
+    }
+
+    const { width, height } = getNodeDimensions(xynode)
+
+    this.maxX = this.minX + Math.ceil(width)
+    this.maxY = this.minY + Math.ceil(height)
+
     if (parent) {
       parent.children.push(this)
     }
   }
 }
 
-class Leaf extends Rect {
+class Compound extends Rect {
+  public readonly children = [] as Rect[]
+
   constructor(
     xynode: InternalNode,
     public readonly parent: Compound | null = null,
   ) {
-    super()
-    this.id = xynode.id
-
-    this.positionAbsolute = xynode.internals.positionAbsolute
-
-    const { width, height } = getNodeDimensions(xynode)
-
-    this.maxX = this.minX + Math.ceil(width)
-    this.maxY = this.minY + Math.ceil(height)
+    super(xynode, parent)
+  }
+}
 
-    if (parent) {
-      parent.children.push(this)
-    }
+class Leaf extends Rect {
+  constructor(
+    xynode: InternalNode,
+    public readonly parent: Compound | null = null,
+  ) {
+    super(xynode, parent)
   }
 }
 

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -120,7 +120,7 @@ function viewToNodesEdge(opts: {
       shape: node.shape,
       style: node.style,
       depth: node.depth ?? 0,
-      icon: node.icon ?? null,
+      icon: node.icon ?? 'none',
       position: node.position,
     } satisfies Types.CompoundNodeData