@likec4/diagram 1.24.1 → 1.25.0

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

@@ -1,6 +1,8 @@
-import { createVar, fallbackVar, style } from '@vanilla-extract/css'
-import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
-import { easings, vars } from '../../../theme-vars'
+import { defaultTheme } from '@likec4/core'
+import { rem } from '@mantine/core'
+import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { easings, vars, whereReducedGraphics } from '../../../theme-vars'
+import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const stokeFillMix = createVar('stroke-fill-mix')
 
@@ -39,8 +41,55 @@ export const container = style({
       transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
     },
-    [`${reactFlowReducedGraphics} &:after`]: {
+    [`${whereReducedGraphics}  &:after`]: {
       display: 'none',
     },
+    [`:where(.react-flow__node.selectable:not(.dragging)) &`]: {
+      cursor: 'pointer',
+    },
+  },
+})
+
+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/base/primitives/element/ElementNodeContainer.tsx

@@ -64,7 +64,6 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
     children,
     ...rest
   }, ref) => {
-    const nonReducedGraphics = !useIsReducedGraphics()
     let scale = 1
     switch (true) {
       case isHovered:
@@ -90,7 +89,7 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
           'likec4-element-node',
         ])}
         initial={false}
-        {...selectable && nonReducedGraphics && {
+        {...selectable && {
           animate: {
             scale,
           },

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

@@ -1,6 +1,6 @@
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { hiddenIfZoomTooSmall, reactFlowReducedGraphics, whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { easings, mantine, vars } from '../../../theme-vars'
+import { hiddenIfZoomTooSmall, reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
+import { easings, mantine, vars, whereNotReducedGraphics } from '../../../theme-vars'
 import { container, stokeFillMix } from './ElementNodeContainer.css'
 
 const indicatorKeyframes = keyframes({
@@ -81,7 +81,9 @@ const shapeBase = style({
   fill: vars.element.fill,
   stroke: vars.element.stroke,
   overflow: 'visible',
-  zIndex: -1,
+  // zIndex is removed to improve rendering performance
+  // this forces to keep shape in the same layer as the node
+  // zIndex: -1,
 })
 
 export const shapeSvgMultiple = style([shapeBase, hiddenIfZoomTooSmall, {
@@ -128,6 +130,16 @@ export const shapeSvg = style([shapeBase, {
         `,
       },
     },
+    [`:where([data-likec4-level='true']) &`]: {
+      vars: {
+        [filterShadow]: `
+        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
+        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
+        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
+
+        `,
+      },
+    },
     [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
       vars: {
         [filterShadow]: `none`,

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

@@ -2,12 +2,14 @@ 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'
+import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const hasIcon = style({})
 
 const textAlign = createVar('text-align')
 
+export { iconSize, paddingSize, textSize }
+
 export const title = style({
   flex: '0 0 auto',
   fontFamily: vars.element.font,
@@ -66,6 +68,7 @@ export const technology = style({
 })
 
 export const elementDataContainer = style({
+  position: 'relative',
   flex: '1',
   height: 'fit-content',
   width: 'fit-content',

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

@@ -1,14 +1,13 @@
 import { type DiagramNode } from '@likec4/core'
 import { Box, Text } from '@mantine/core'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
 import clsx from 'clsx'
 import { isNumber, isTruthy } from 'remeda'
 import { IconRenderer } from '../../../context/IconRenderer'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
+import { getVarName } from '../../../utils/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<
@@ -27,6 +26,8 @@ type ElementTitleProps = NodeProps<Data> & {
   iconSize?: number
 }
 
+const varIconSize = getVarName(css.iconSize)
+
 export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
   const elementIcon = IconRenderer({
     element: {
@@ -47,9 +48,9 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         'likec4-element',
       )}
       style={{
-        ...isNumber(iconSize) && assignInlineVars({
+        ...isNumber(iconSize) && {
           [varIconSize]: `${iconSize}px`,
-        }),
+        },
       }}
     >
       {elementIcon}

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

@@ -0,0 +1,5 @@
+import { createGlobalVar, createVar } from '@vanilla-extract/css'
+
+export const textSize = createVar('text-size')
+export const paddingSize = createVar('padding-size')
+export const iconSize = createGlobalVar('likec4-icon-size')

package/src/components/Link.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 import { mantine } from '../theme-vars'
-import { easings, transitions, whereDark } from '../theme-vars.css'
+import { easings, transitions, whereDark } from '../theme-vars'
 
 export const elementLink = style({
   display: 'flex',

package/src/components/SearchControl.css.ts

@@ -1,19 +1,18 @@
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { whereNotReducedGraphics } from '../LikeC4Diagram.css'
-import { mantine, transitions, vars, whereDark, whereLight } from '../theme-vars'
+import { mantine, transitions, vars, whereDark, whereLight, whereNotReducedGraphics } from '../theme-vars'
 
 const transparent = createVar('transparent')
 const bgColor = createVar('bgcolor')
 export const root = style({
-  height: '32px',
+  height: '30px',
   paddingLeft: mantine.spacing.sm,
   paddingRight: '4px',
-  borderRadius: mantine.radius.sm,
-  color: mantine.colors.placeholder,
+  borderRadius: '0px',
+  color: fallbackVar('var(--search-color)', mantine.colors.placeholder),
   border: '1px solid',
   cursor: 'pointer',
-  transition: transitions.fast,
   backgroundColor: bgColor,
+  width: '100%',
   vars: {
     [transparent]: '20%',
     [bgColor]: mantine.colors.default,
@@ -32,6 +31,8 @@ export const root = style({
       },
     },
     [`${whereNotReducedGraphics} &`]: {
+      transition: transitions.fast,
+      borderRadius: fallbackVar('var(--search-border-radius)', mantine.radius.sm),
       backgroundColor: `color-mix(in srgb, ${bgColor}, transparent ${transparent})`,
       boxShadow: mantine.shadows.xs,
       WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
@@ -51,13 +52,20 @@ globalStyle(`${root} .tabler-icon`, {
   color: mantine.colors.text,
 })
 
+export const placeholder = style({
+  fontSize: mantine.fontSizes.sm,
+  fontWeight: 500,
+  paddingRight: 50,
+  flex: 1,
+})
+
 export const shortcut = style({
   fontSize: '11px',
+  fontWeight: 600,
   lineHeight: 1,
   padding: '4px 7px',
   borderRadius: mantine.radius.sm,
   border: '1px solid',
-  fontWeight: 'bold',
   selectors: {
     [`${whereLight} &`]: {
       color: mantine.colors.gray[7],

package/src/components/SearchControl.tsx

@@ -21,10 +21,10 @@ export function SearchControl({ className, ...others }: SearchControlProps) {
     <UnstyledButton {...others} className={cx(classes.root, className)}>
       <Group gap="xs">
         <IconSearch style={{ width: rem(15), height: rem(15) }} stroke={2} />
-        <Text fz="sm" fw="500" pr={50}>
+        <Text component="div" className={classes.placeholder}>
           Search
         </Text>
-        <Text fw={700} className={classes.shortcut}>
+        <Text component="div" className={classes.shortcut}>
           {isMac ? '⌘ + K' : 'Ctrl + K'}
         </Text>
       </Group>

package/src/context/ControlsCustomLayout.ts

@@ -0,0 +1,16 @@
+import { createOptionalContext } from '@mantine/core'
+import { type ReactNode } from 'react'
+
+export type ControlsCustomLayoutProps = {
+  burgerMenu: ReactNode
+  navigationButtons: ReactNode
+  search: ReactNode
+  actionsGroup: ReactNode
+  syncInProgressBadge: ReactNode
+}
+export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode
+
+export const [
+  ControlsCustomLayoutProvider,
+  useControlsCustomLayout,
+] = createOptionalContext<ControlsCustomLayout | null>(null)

package/src/context/RootContainer.tsx

@@ -1,17 +1,19 @@
 import { Box } from '@mantine/core'
 import clsx from 'clsx'
 import { type PropsWithChildren, createContext, createRef, useContext, useRef } from 'react'
-import { rootClassName } from '../globals.css'
-import { useIsReducedGraphics } from '../hooks/useIsReducedGraphics'
+import { rootClassName } from '../theme-vars'
 
 const RootContainerContext = createContext(createRef<HTMLDivElement>())
 
 export function RootContainer({
   className,
+  reduceGraphics = false,
   children,
-}: PropsWithChildren<{ className?: string | undefined }>) {
+}: PropsWithChildren<{
+  className?: string | undefined
+  reduceGraphics?: boolean
+}>) {
   const ref = useRef<HTMLDivElement>(null)
-  const reduceGraphics = useIsReducedGraphics()
   return (
     <Box
       className={clsx(rootClassName, className)}

package/src/index.ts

@@ -1,5 +1,6 @@
 import '@xyflow/react/dist/style.css'
 
+export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout'
 export { FramerMotionConfig } from './context/FramerMotionConfig'
 export { LikeC4Diagram } from './LikeC4Diagram'
 export type { LikeC4DiagramProps } from './LikeC4Diagram'

package/src/likec4diagram/XYFlow.tsx

@@ -2,7 +2,7 @@ import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
-import { memo } from 'react'
+import { type PropsWithChildren, memo } from 'react'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
@@ -50,9 +50,14 @@ type Picked = EnforceOptional<
     | 'nodesSelectable'
   >
 >
-export type LikeC4DiagramXYFlowProps = Required<Picked>
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Required<Picked>>
 
-export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background, nodesDraggable, nodesSelectable }) => {
+export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
+  background,
+  nodesDraggable,
+  nodesSelectable,
+  children,
+}) => {
   const diagram = useDiagram()
   const {
     initialized,
@@ -150,6 +155,7 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background,
       {...(notReadOnly && nodesDraggable && layoutConstraints)}
       {...props}>
       <DiagramUI />
+      {children}
     </BaseXYFlow>
   )
 }, shallowEqual)

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

@@ -5,6 +5,7 @@ import {
 } from '@likec4/core'
 import { useDebouncedEffect } from '@react-hookz/web'
 import type { XYPosition } from '@xyflow/react'
+import { EdgeLabelRenderer } from '@xyflow/react'
 import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
@@ -13,6 +14,7 @@ import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from
 import { useEnabledFeature } from '../../../context'
 import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
+import { useIsReducedGraphics } from '../../../hooks/useIsReducedGraphics'
 import { vector, VectorImpl } from '../../../utils/vector'
 import { bezierControlPoints, bezierPath, isSamePoint } from '../../../utils/xyflow'
 import type { Types } from '../../types'
@@ -27,6 +29,7 @@ const curve = d3line<XYPosition>()
   .y(d => d.y)
 
 export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) => {
+  const isReducedGraphicsMode = useIsReducedGraphics()
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const xyflowStore = useXYStoreApi()
   const xyflow = useXYFlow()
@@ -44,10 +47,11 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     target,
     targetX,
     targetY,
+    selected = false,
     data: {
       id: edgeId,
-      navigateTo,
       points,
+      hovered = false,
       active = false,
       dimmed = false,
       labelBBox,
@@ -56,6 +60,8 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     },
   } = props
 
+  const navigateTo = enableNavigateTo ? data.navigateTo : undefined
+
   const sourceNode = nonNullable(useXYInternalNode(source)!, `source node ${source} not found`)
   const targetNode = nonNullable(useXYInternalNode(target)!, `target node ${target} not found`)
 
@@ -297,7 +303,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
           <div {...props} />
         </NotePopover>
       )
-    } else if (enableRelationshipDetails) {
+    } else if (enableRelationshipDetails && (!isReducedGraphicsMode || hovered || selected || active)) {
       renderLabel = (props: any) => (
         <RelationshipsDropdownMenu
           disabled={!!dimmed}
@@ -313,24 +319,6 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
   return (
     <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
       <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
-      {enableEdgeEditing && (
-        <g
-          onContextMenu={e => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}>
-          {controlPoints.map((p, i) => (
-            <circle
-              onPointerDown={e => onControlPointerDown(i, e)}
-              className={edgesCss.controlPoint}
-              key={i}
-              cx={p.x}
-              cy={p.y}
-              r={3}
-            />
-          ))}
-        </g>
-      )}
       <EdgeLabel
         edgeProps={props}
         labelPosition={{
@@ -340,7 +328,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
         }}
         {...renderLabel && { renderRoot: renderLabel }}
       >
-        {!isControlPointDragging && enableNavigateTo && navigateTo && (
+        {!isControlPointDragging && navigateTo && (
           <EdgeActionButton
             {...props}
             onClick={e => {
@@ -349,6 +337,29 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
             }} />
         )}
       </EdgeLabel>
+      {/* Render control points above edge label  */}
+      {enableEdgeEditing && controlPoints.length > 0 && (
+        <EdgeLabelRenderer>
+          <EdgeContainer component="svg" className={edgesCss.controlPointsContainer} {...props}>
+            <g
+              onContextMenu={e => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}>
+              {controlPoints.map((p, i) => (
+                <circle
+                  onPointerDown={e => onControlPointerDown(i, e)}
+                  className={clsx('nodrag nopan', edgesCss.controlPoint)}
+                  key={i}
+                  cx={Math.round(p.x)}
+                  cy={Math.round(p.y)}
+                  r={3}
+                />
+              ))}
+            </g>
+          </EdgeContainer>
+        </EdgeLabelRenderer>
+      )}
     </EdgeContainer>
   )
 })

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

@@ -1,9 +1,9 @@
 import {
   type DiagramEdge,
   type EdgeId,
+  type LikeC4Model,
   type NodeId,
   DiagramNode,
-  LikeC4Model,
   nameFromFqn,
 } from '@likec4/core'
 import {

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

@@ -1,8 +1,23 @@
 import { globalStyle, style } from '@vanilla-extract/css'
+import { ZIndexes } from '../../../base/const'
 import { mantine, xyvars } from '../../../theme-vars'
 
 const isSelected = '.react-flow__edge.selected'
 
+export const controlPointsContainer = style({
+  overflow: 'visible',
+  position: 'absolute',
+  pointerEvents: 'none',
+  top: 0,
+  left: 0,
+  zIndex: ZIndexes.Edge,
+  selectors: {
+    [`&:is([data-edge-hovered='true'])`]: {
+      zIndex: ZIndexes.Edge + 1,
+    },
+  },
+})
+
 export const controlPoint = style({
   fill: xyvars.edge.stroke,
   stroke: xyvars.edge.stroke,

package/src/likec4diagram/custom/index.tsx

@@ -1,7 +1,20 @@
 import type { Types } from '../types'
 import { RelationshipEdge } from './edges/RelationshipEdge'
+import {
+  CompoundDeploymentNode,
+  CompoundElementNode,
+  DeploymentNode,
+  ElementNode,
+  ViewGroupNode,
+} from './nodes/nodeTypes'
 
-export { nodeTypes } from './nodes/nodeTypes'
+export const nodeTypes = {
+  element: ElementNode,
+  deployment: DeploymentNode,
+  'compound-element': CompoundElementNode,
+  'compound-deployment': CompoundDeploymentNode,
+  'view-group': ViewGroupNode,
+} satisfies { [key in Types.Node['type']]: any }
 
 export const edgeTypes = {
   relationship: RelationshipEdge,

package/src/likec4diagram/custom/nodes/nodeTypes.tsx

@@ -36,72 +36,74 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.Node
   )
 }
 
-export const nodeTypes = {
-  element: customNode<Types.ElementNodeData>((props) => (
-    <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
-      <ElementTitle {...props} />
-      <ElementActions {...props} />
+export const ElementNode = customNode<Types.ElementNodeData>((props) => (
+  <ElementNodeContainer nodeProps={props}>
+    <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
+    <ElementTitle {...props} />
+    <ElementActions {...props} />
+    <ElementDetailsButtonWithHandler
+      fqn={props.data.modelFqn}
+      {...props} />
+    <IfNotEnabled feature="ReadOnly">
+      <ElementToolbar {...props} />
+    </IfNotEnabled>
+    <DefaultHandles />
+  </ElementNodeContainer>
+))
+
+export const DeploymentNode = customNode<Types.DeploymentElementNodeData>((props) => (
+  <ElementNodeContainer nodeProps={props}>
+    <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
+    <ElementTitle {...props} />
+    <DeploymentElementActions {...props} />
+    {!!props.data.modelFqn && (
       <ElementDetailsButtonWithHandler
         fqn={props.data.modelFqn}
         {...props} />
-      <IfNotEnabled feature="ReadOnly">
-        <ElementToolbar {...props} />
-      </IfNotEnabled>
-      <DefaultHandles />
-    </ElementNodeContainer>
-  )),
-  deployment: customNode<Types.DeploymentElementNodeData>((props) => (
-    <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
-      <ElementTitle {...props} />
-      <DeploymentElementActions {...props} />
-      {!!props.data.modelFqn && (
-        <ElementDetailsButtonWithHandler
-          fqn={props.data.modelFqn}
-          {...props} />
-      )}
-      <IfNotEnabled feature="ReadOnly">
-        <DeploymentElementToolbar {...props} />
-      </IfNotEnabled>
-      <DefaultHandles />
-    </ElementNodeContainer>
-  )),
-  'compound-element': customNode<Types.CompoundElementNodeData>((props) => {
-    const diagram = useDiagram()
-    return (
-      <CompoundNodeContainer nodeProps={props}>
-        <CompoundTitle {...props} />
-        <CompoundActions {...props} />
-        <IfEnabled feature="ElementDetails">
-          <CompoundDetailsButton
-            {...props}
-            onClick={e => {
-              e.stopPropagation()
-              diagram.openElementDetails(props.data.modelFqn, props.id as NodeId)
-            }} />
-        </IfEnabled>
-        <IfNotEnabled feature="ReadOnly">
-          <CompoundElementToolbar {...props} />
-        </IfNotEnabled>
-        <DefaultHandles />
-      </CompoundNodeContainer>
-    )
-  }),
-  'compound-deployment': customNode<Types.CompoundDeploymentNodeData>((props) => (
+    )}
+    <IfNotEnabled feature="ReadOnly">
+      <DeploymentElementToolbar {...props} />
+    </IfNotEnabled>
+    <DefaultHandles />
+  </ElementNodeContainer>
+))
+
+export const CompoundElementNode = customNode<Types.CompoundElementNodeData>((props) => {
+  const diagram = useDiagram()
+  return (
     <CompoundNodeContainer nodeProps={props}>
       <CompoundTitle {...props} />
       <CompoundActions {...props} />
+      <IfEnabled feature="ElementDetails">
+        <CompoundDetailsButton
+          {...props}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.openElementDetails(props.data.modelFqn, props.id as NodeId)
+          }} />
+      </IfEnabled>
       <IfNotEnabled feature="ReadOnly">
-        <CompoundDeploymentToolbar {...props} />
+        <CompoundElementToolbar {...props} />
       </IfNotEnabled>
       <DefaultHandles />
     </CompoundNodeContainer>
-  )),
-  'view-group': customNode<Types.ViewGroupNodeData>((props) => (
-    <CompoundNodeContainer nodeProps={props}>
-      <CompoundTitle {...props} />
-      <DefaultHandles />
-    </CompoundNodeContainer>
-  )),
-} satisfies { [key in Types.Node['type']]: any }
+  )
+})
+
+export const CompoundDeploymentNode = customNode<Types.CompoundDeploymentNodeData>((props) => (
+  <CompoundNodeContainer nodeProps={props}>
+    <CompoundTitle {...props} />
+    <CompoundActions {...props} />
+    <IfNotEnabled feature="ReadOnly">
+      <CompoundDeploymentToolbar {...props} />
+    </IfNotEnabled>
+    <DefaultHandles />
+  </CompoundNodeContainer>
+))
+
+export const ViewGroupNode = customNode<Types.ViewGroupNodeData>((props) => (
+  <CompoundNodeContainer nodeProps={props}>
+    <CompoundTitle {...props} />
+    <DefaultHandles />
+  </CompoundNodeContainer>
+))