@likec4/diagram 1.20.3 → 1.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.20.3",
+  "version": "1.21.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -39,10 +39,11 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@likec4/core": "1.20.3",
-    "@mantine/vanilla-extract": "7.15.2",
+    "@likec4/core": "1.21.1",
+    "@mantine/vanilla-extract": "7.16.2",
     "@react-hookz/web": "^25.0.1",
     "@tabler/icons-react": "3.29.0",
+    "@vanilla-extract/dynamic": "^2.1.2",
     "@xstate/react": "^5.0.2",
     "@xstate/store": "^2.6.2",
     "@xyflow/react": "12.4.2",
@@ -54,23 +55,23 @@
     "fast-equals": "^5.2.2",
     "framer-motion": "^11.18.2",
     "khroma": "^2.1.0",
-    "react-error-boundary": "^4.1.2",
-    "remeda": "^2.19.0",
+    "react-error-boundary": "^5.0.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.3",
-    "@mantine/core": "7.15.2",
-    "@mantine/hooks": "7.15.2",
-    "@mantine/spotlight": "7.15.2",
+    "@likec4/tsconfig": "1.21.1",
+    "@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",
@@ -78,12 +79,11 @@
     "@types/react-dom": "~19.0.3",
     "@vanilla-extract/css": "^1.17.1",
     "@vanilla-extract/css-utils": "^0.1.4",
-    "@vanilla-extract/dynamic": "^2.1.2",
     "react": "~19.0.0",
     "react-dom": "~19.0.0",
     "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/BaseXYFlow.tsx

@@ -85,7 +85,6 @@ export const BaseXYFlow = <
       nodes={nodes}
       edges={edges}
       className={clsx(
-        'likec4-diagram',
         css.cssReactFlow,
         pannable !== true && css.cssDisablePan,
         background === 'transparent' && css.cssTransparentBg,

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.css.ts

@@ -1,12 +1,9 @@
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { vars } from '../../../theme-vars'
+import { easings, vars } from '../../../theme-vars'
 
 export const stokeFillMix = createVar('stroke-fill-mix')
 
 export const container = style({
-  // position: 'absolute',
-  // top: 0,
-  // left: 0,
   position: 'relative',
   width: '100%',
   height: '100%',
@@ -30,7 +27,7 @@ export const container = style({
     top: '100%',
     left: 0,
     right: 0,
-    height: 20,
+    height: 24,
     background: 'transparent',
     pointerEvents: 'all',
   },
@@ -38,7 +35,7 @@ export const container = style({
 
 globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="true"])`, {
   opacity: 0.25,
-  transition: 'opacity 400ms ease-in-out, filter 500ms ease-in-out',
+  transition: `opacity 400ms ${easings.inOut}, filter 500ms ${easings.inOut}`,
   transitionDelay: '50ms',
   filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
   willChange: 'opacity, filter',
@@ -46,7 +43,7 @@ globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="true"])`, {
 
 globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="immediate"])`, {
   opacity: 0.25,
-  transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
+  transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
   filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
   willChange: 'opacity, filter',
 })

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

@@ -1,4 +1,10 @@
-import type { DiagramNode } from '@likec4/core'
+import {
+  type DiagramNode,
+  type ElementStyle,
+  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 +16,7 @@ type RequiredData = Pick<
   DiagramNode,
   | 'color'
   | 'shape'
+  | 'style'
 >
 
 type ElementNodeContainerProps =
@@ -18,6 +25,30 @@ type ElementNodeContainerProps =
     nodeProps: NodeProps<RequiredData>
   }>
 
+export function nodeSizes({
+  size,
+  padding,
+  textSize,
+}: ElementStyle) {
+  if (!size && !!textSize) {
+    size = textSize
+  }
+  if (!textSize && !!size) {
+    textSize = size
+  }
+  if (!padding && !!size) {
+    padding = size
+  }
+  size ??= DefaultShapeSize
+  textSize ??= DefaultTextSize
+  padding ??= DefaultPaddingSize
+  return {
+    size,
+    padding,
+    textSize,
+  }
+}
+
 export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNodeContainerProps>(
   forwardRef<HTMLDivElement, ElementNodeContainerProps>(({
     nodeProps: {
@@ -42,6 +73,12 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
         break
     }
 
+    const {
+      size,
+      padding,
+      textSize,
+    } = nodeSizes(data.style)
+
     return (
       <Box
         component={m.div}
@@ -60,6 +97,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}
+        data-likec4-padding={padding}
+        data-likec4-text-size={textSize}
         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',
@@ -36,8 +37,8 @@ export const description = style({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   selectors: {
-    [`:where(${hasIcon}) &`]: {
-      textWrap: 'wrap',
+    [`:where([data-likec4-shape-size="xs"]) &`]: {
+      display: 'none',
     },
   },
 })
@@ -48,7 +49,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,26 +59,31 @@ export const technology = style({
     [`:where([data-hovered='true']) &`]: {
       opacity: 1,
     },
+    [`:where([data-likec4-shape-size="xs"], [data-likec4-shape-size="sm"]) &`]: {
+      display: 'none',
+    },
   },
 })
 
 export const elementDataContainer = style({
   flex: '1',
   height: 'fit-content',
+  width: 'fit-content',
+  margin: '0 auto',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   flexDirection: 'row',
-  padding: rem(24),
+  paddingTop: paddingSize,
+  paddingBottom: paddingSize,
+  paddingLeft: calc(paddingSize).add('8px').toString(),
+  paddingRight: calc(paddingSize).add('8px').toString(),
   overflow: 'hidden',
-  gap: rem(10),
-  vars: {
-    [iconSize]: '48px',
-  },
+  gap: rem(12),
   selectors: {
     ':where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) &': {
-      paddingLeft: 40,
-      paddingRight: 20,
+      paddingLeft: 46,
+      paddingRight: 16,
     },
     ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
       paddingTop: 30,
@@ -86,26 +92,16 @@ 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',
-  width: 'max-content',
+  width: 'fit-content',
+  flex: '0 1 auto',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'stretch',
@@ -121,7 +117,7 @@ export const elementTextData = style({
       gap: rem(6),
     },
     [`:where(${hasIcon}) &`]: {
-      minWidth: 'calc(100% - 160px)',
+      minWidth: `calc(50% + ${iconSize})`,
       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'
@@ -6,7 +6,9 @@ import { isNumber, isTruthy } from 'remeda'
 import { IconRenderer } from '../../../context/IconRenderer'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import type { NodeProps } from '../../types'
+import { nodeSizes } from './ElementNodeContainer'
 import * as css from './ElementTitle.css'
+import { iconSize as varIconSize } from './styles.css'
 
 type Data =
   & Pick<
@@ -15,6 +17,7 @@ type Data =
     | 'technology'
     | 'description'
     | 'color'
+    | 'style'
   >
   & {
     icon?: string | null
@@ -33,6 +36,9 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
     },
     className: css.elementIcon,
   })
+  const size = nodeSizes(data.style).size
+  const isSm = size === 'sm'
+  const isSmOrXs = isSm || size === 'xs'
   return (
     <Box
       className={clsx(
@@ -42,7 +48,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
       )}
       style={{
         ...isNumber(iconSize) && assignInlineVars({
-          [css.iconSize]: `${iconSize}px`,
+          [varIconSize]: `${iconSize}px`,
         }),
       }}
     >
@@ -51,7 +57,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         <Text
           component="h3"
           className={clsx(css.title, 'likec4-element-title')}
-          lineClamp={3}>
+          lineClamp={isSmOrXs ? 2 : 3}>
           {data.title}
         </Text>
 
@@ -67,7 +73,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
           <Text
             component="div"
             className={clsx(css.description, 'likec4-element-description')}
-            lineClamp={5}>
+            lineClamp={isSmOrXs ? 3 : 5}>
             {data.description}
           </Text>
         )}

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

@@ -0,0 +1,52 @@
+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"]`, {
+  vars: {
+    [iconSize]: '82px',
+  },
+})
+globalStyle(`${container}[data-likec4-shape-size="xl"]`, {
+  vars: {
+    [iconSize]: '90px',
+  },
+})
+
+const sizes = ['xs', 'sm', 'lg', 'xl'] as const
+sizes.forEach((size) => {
+  globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
+    vars: {
+      [textSize]: rem(defaultTheme.textSizes[size]),
+    },
+  })
+
+  globalStyle(`${container}[data-likec4-padding="${size}"]`, {
+    vars: {
+      [paddingSize]: rem(defaultTheme.spacing[size]),
+    },
+  })
+})

package/src/globals.css.ts

@@ -7,6 +7,8 @@ import { mantine, vars, whereDark } from './theme-vars'
 export const rootClassName = 'likec4-diagram-root'
 
 globalStyle(`.${rootClassName}`, {
+  containerName: 'likec4-diagram-root',
+  containerType: 'size',
   overflow: 'hidden',
   position: 'relative',
   width: '100%',

package/src/hooks/index.ts

@@ -1,5 +1,4 @@
 export { useCurrentViewId } from './useCurrentViewId'
-export type { DiagramContext } from './useDiagramContext'
 export { useMantinePortalProps } from './useMantinePortalProps'
 export { useSetState } from './useSetState'
 export { useUpdateEffect } from './useUpdateEffect'

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/index.ts

@@ -16,7 +16,21 @@ export { useSetState } from './hooks/useSetState'
 export { useUpdateEffect } from './hooks/useUpdateEffect'
 export { vars, xyvars } from './theme-vars'
 
-export type * from './LikeC4Diagram.props'
+export type {
+  ChangeEvent,
+  DiagramNodeWithNavigate,
+  ElementIconRenderer,
+  LikeC4ColorScheme,
+  LikeC4DiagramEventHandlers,
+  LikeC4DiagramProperties,
+  OnCanvasClick,
+  OnChange,
+  OnEdgeClick,
+  OnNavigateTo,
+  OnNodeClick,
+  OpenSourceParams,
+  WhereOperator,
+} from './LikeC4Diagram.props'
 
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram'

package/src/likec4diagram/DiagramUI.tsx

@@ -1,12 +1,9 @@
-import { memo } from 'react'
 import { IfEnabled } from '../context'
 import { LikeC4Search } from '../LikeC4Search'
 import { Overlays } from '../overlays/Overlays'
-import { Controls, DiagramTitlePanel } from './ui'
-import NotationPanel from './ui/notation'
-import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough'
+import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
-export const DiagramUI = memo(() => {
+export function DiagramUI() {
   return (
     <>
       <Controls />
@@ -25,4 +22,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/RelationshipEdge.tsx

@@ -1,6 +1,5 @@
 import {
   type EdgeId,
-  type NodeId,
   isStepEdgeId,
   nonNullable,
 } from '@likec4/core'

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.ts

@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css'
 import { mantine, vars } from '../../../theme-vars'
 
 export const menuDropdown = style({
+  overflowY: 'scroll',
   minWidth: 250,
   maxWidth: 'min(90vw, 500px)',
 })