@likec4/diagram 1.19.2 → 1.20.0

package/src/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.tsx

@@ -1,5 +1,13 @@
-import { type DiagramNode, invariant, LikeC4Model, nameFromFqn } from '@likec4/core'
 import {
+  type DiagramEdge,
+  type EdgeId,
+  type NodeId,
+  DiagramNode,
+  LikeC4Model,
+  nameFromFqn,
+} from '@likec4/core'
+import {
+  type StackProps,
   ActionIcon,
   Box,
   Group,
@@ -11,19 +19,21 @@ import {
   MenuTarget,
   Space,
   Stack,
-  type StackProps,
   Text,
   Tooltip as MantineTooltip,
-  TooltipGroup
+  TooltipGroup,
 } from '@mantine/core'
 import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { forwardRef, Fragment, type MouseEventHandler, type PropsWithChildren, useCallback } from 'react'
-import { filter, isTruthy, map, partition, pick, pipe } from 'remeda'
-import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useXYNodesData } from '../../hooks'
-import { Link } from '../../ui/Link'
+import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
+import { filter, isTruthy, map, partition, pipe } from 'remeda'
+import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
+import { useMantinePortalProps } from '../../../hooks'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { DiagramContext, useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useLikeC4Model } from '../../../likec4model'
+import { Link } from '../../ui/diagram-title/Link'
 import * as css from './RelationshipsDropdownMenu.css'
-import type { DiagramFlowTypes } from '../types'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
 
@@ -35,56 +45,62 @@ export const Tooltip = MantineTooltip.withProps({
   label: '',
   children: null,
   offset: 8,
-  withinPortal: false
+  withinPortal: false,
 })
 
 export function RelationshipsDropdownMenu({
-  edge,
+  edgeId,
+  source,
+  target,
   disabled = false,
-  likec4model,
-  children
+  children,
 }: PropsWithChildren<{
-  edge: DiagramFlowTypes.DiagramEdgeData['edge']
+  edgeId: EdgeId
+  source: string
+  target: string
   disabled?: boolean | undefined
-  likec4model: LikeC4Model
 }>) {
-  const {
-    openOverlay,
-    enableRelationshipBrowser
-  } = useDiagramState(pick(['openOverlay', 'enableRelationshipBrowser']))
+  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(ctx => ({
+    diagramEdge: DiagramContext.findDiagramEdge(ctx, edgeId),
+    sourceNode: DiagramContext.findDiagramNode(ctx, source),
+    targetNode: DiagramContext.findDiagramNode(ctx, target),
+  }))
+  const likec4model = useLikeC4Model(true)
+  const diagram = useDiagram()
+
   const portalProps = useMantinePortalProps()
-  const [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target])
+  const onClickOpenOverlay = useCallback((e: React.MouseEvent): void => {
+    e.stopPropagation()
+    diagram.openRelationshipDetails(edgeId)
+  }, [edgeId])
+
+  if (!diagramEdge || !sourceNode || !targetNode) {
+    return <>{children}</>
+  }
 
-  invariant(sourceXYNode, `Source XYNode ${edge.source} not found for edge ${edge.id}`)
-  invariant(targetXYNode, `Target XYNode ${edge.target} not found for edge ${edge.id}`)
+  // const { source, target } = diagramEdge
+
+  // invariant(sourceNode.type !== 'view-group', 'View group node cannot have relationships')
+  // invariant(targetNode.type !== 'view-group', 'View group node cannot have relationships')
 
   const [direct, nested] = pipe(
-    edge.relations,
+    diagramEdge.relations,
     map(id => {
       try {
         return likec4model.relationship(id)
       } catch (e) {
         // View was cached, but likec4model based on new data
         console.error(
-          `View is cached and likec4model missing relationship ${id} from ${edge.source} -> ${edge.target}`,
-          e
+          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
+          e,
         )
         return null
       }
     }),
     filter(isTruthy),
-    partition(r => r.source.id === edge.source && r.target.id === edge.target)
+    partition(r => r.source.id === sourceNode.id && r.target.id === targetNode.id),
   )
 
-  const onClickOpenOverlay = useCallback((e: React.MouseEvent): void => {
-    e.stopPropagation()
-    if (enableRelationshipBrowser) {
-      openOverlay({
-        edgeDetails: edge.id
-      })
-    }
-  }, [edge.id, openOverlay, enableRelationshipBrowser])
-
   const renderRelationship = (relationship: LikeC4Model.AnyRelation, index: number) => (
     <Fragment key={relationship.id}>
       {index > 0 && <MenuDivider opacity={0.65} />}
@@ -92,9 +108,9 @@ export function RelationshipsDropdownMenu({
         onClick={onClickOpenOverlay}
         component={Relationship}
         relationship={relationship}
-        sourceNode={sourceXYNode.data.element}
-        targetNode={targetXYNode.data.element}
-        edge={edge} />
+        sourceNode={sourceNode}
+        targetNode={targetNode}
+        edge={diagramEdge} />
     </Fragment>
   )
 
@@ -107,12 +123,12 @@ export function RelationshipsDropdownMenu({
       trigger={'click-hover'}
       openDelay={300}
       closeDelay={450}
-      floatingStrategy={'fixed'}
       closeOnClickOutside
       clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
       closeOnEscape
       closeOnItemClick={false}
       disabled={disabled}
+      position="bottom-start"
       {...portalProps}
     >
       <MenuTarget>
@@ -137,17 +153,15 @@ export function RelationshipsDropdownMenu({
             {nested.map(renderRelationship)}
           </>
         )}
-        {enableRelationshipBrowser && (
-          <Box pos={'absolute'} top={5} right={6}>
-            <ActionIcon
-              size={24}
-              variant="subtle"
-              onClick={onClickOpenOverlay}
-            >
-              <IconInfoCircle style={{ width: '70%' }} />
-            </ActionIcon>
-          </Box>
-        )}
+        <Box pos={'absolute'} top={5} right={6}>
+          <ActionIcon
+            size={24}
+            variant="subtle"
+            onClick={onClickOpenOverlay}
+          >
+            <IconInfoCircle style={{ width: '70%' }} />
+          </ActionIcon>
+        </Box>
       </MenuDropdown>
     </Menu>
   )
@@ -157,7 +171,7 @@ const Relationship = forwardRef<
   HTMLDivElement,
   StackProps & {
     relationship: LikeC4Model.AnyRelation
-    edge: DiagramFlowTypes.DiagramEdgeData['edge']
+    edge: DiagramEdge
     sourceNode: DiagramNode
     targetNode: DiagramNode
   }
@@ -169,19 +183,14 @@ const Relationship = forwardRef<
   targetNode,
   ...props
 }, ref) => {
-  const diagramApi = useDiagramStoreApi()
-  const {
-    viewId,
-    hasOnOpenSourceRelation,
-    hasOnNavigateTo
-  } = useDiagramState(s => ({
-    viewId: s.view.id,
-    hasOnOpenSourceRelation: !!s.onOpenSource,
-    hasOnNavigateTo: !!s.onNavigateTo
-  }))
-  const sourceId = nameFromFqn(edge.source) + r.source.id.slice(edge.source.length)
-  const targetId = nameFromFqn(edge.target) + r.target.id.slice(edge.target.length)
-  const navigateTo = hasOnNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : undefined
+  const diagram = useDiagram()
+  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { onOpenSource } = useDiagramEventHandlers()
+  const viewId = diagram.currentView().id
+
+  const sourceId = getShortId(r, r.source.id, sourceNode)
+  const targetId = getShortId(r, r.target.id, targetNode)
+  const navigateTo = enableNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : undefined
   const links = r.links
 
   return (
@@ -194,7 +203,7 @@ const Relationship = forwardRef<
         <Text component="div" className={css.endpoint} data-likec4-color={targetNode.color}>
           {targetId}
         </Text>
-        {(navigateTo || hasOnOpenSourceRelation) && (
+        {(navigateTo || !!onOpenSource) && (
           <TooltipGroup openDelay={100}>
             <Space w={'xs'} />
             {navigateTo && (
@@ -207,7 +216,7 @@ const Relationship = forwardRef<
                   onPointerDownCapture={stopPropagation}
                   onClick={event => {
                     event.stopPropagation()
-                    diagramApi.getState().onNavigateTo?.(navigateTo, event)
+                    diagram.navigateTo(navigateTo)
                   }}
                   role="button"
                 >
@@ -215,7 +224,7 @@ const Relationship = forwardRef<
                 </ActionIcon>
               </Tooltip>
             )}
-            {hasOnOpenSourceRelation && (
+            <IfEnabled feature="Vscode">
               <Tooltip label={'Open source'}>
                 <ActionIcon
                   className={clsx('nodrag nopan')}
@@ -225,16 +234,14 @@ const Relationship = forwardRef<
                   onPointerDownCapture={stopPropagation}
                   onClick={event => {
                     event.stopPropagation()
-                    diagramApi.getState().onOpenSource?.({
-                      relation: r.id
-                    })
+                    diagram.openSource({ relation: r.id })
                   }}
                   role="button"
                 >
                   <IconFileSymlink size="80%" stroke={2} />
                 </ActionIcon>
               </Tooltip>
-            )}
+            </IfEnabled>
           </TooltipGroup>
         )}
       </Group>
@@ -251,3 +258,17 @@ const Relationship = forwardRef<
     </Stack>
   )
 })
+
+function getShortId(
+  r: LikeC4Model.AnyRelation<LikeC4Model.Any>,
+  actualEndpointId: NodeId<string>,
+  diagramNode: DiagramNode,
+) {
+  const diagramNodeId = r.isDeploymentRelation()
+    // Relation defined in deployment model. Use id of the deployment node as is.
+    ? diagramNode.id
+    // Relation defined in model. Get id of the model element
+    : DiagramNode.modelRef(diagramNode) || ''
+
+  return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length)
+}

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

@@ -0,0 +1,39 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { mantine, xyvars } from '../../../theme-vars'
+
+const isSelected = '.react-flow__edge.selected'
+
+export const controlPoint = style({
+  fill: xyvars.edge.stroke,
+  stroke: xyvars.edge.stroke,
+  fillOpacity: 0.75,
+  strokeWidth: 1,
+  cursor: 'grab',
+  pointerEvents: 'auto',
+  visibility: 'hidden',
+  ':hover': {
+    stroke: mantine.colors.primaryColors.filledHover,
+    strokeWidth: 9,
+    transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out',
+  },
+  selectors: {
+    [`:where(${isSelected}, [data-edge-hovered='true']) &`]: {
+      visibility: 'visible',
+      transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
+      transitionDelay: '50ms',
+      fillOpacity: 1,
+      strokeWidth: 5,
+    },
+  },
+})
+
+export const controlDragging = style({
+  cursor: 'grabbing',
+})
+
+globalStyle(`${controlDragging} *`, {
+  cursor: 'grabbing !important',
+})
+globalStyle(`${controlDragging} .react-flow__edge-interaction`, {
+  cursor: 'grabbing !important',
+})

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

@@ -0,0 +1,126 @@
+import { type InternalNode, type XYPosition, Position } from '@xyflow/react'
+import { getNodeDimensions } from '@xyflow/system'
+import { vector, VectorImpl } from '../../../utils'
+
+export function getNodeCenter(node: InternalNode): XYPosition {
+  const { width, height } = getNodeDimensions(node)
+  const { x, y } = node.internals.positionAbsolute
+
+  return {
+    x: x + width / 2,
+    y: y + height / 2,
+  }
+}
+
+/**
+ * Helper function returns the intersection point
+ * of the line between the center of the intersectionNode and the target
+ *
+ * @param intersectionNode the node that is the center of the line
+ * @param target position of the target
+ * @param nodeMargin the margin of the intersectionNode. The point will be placed at nodeMargin distance from the border of the node
+ * @returns coordinates of the intersection point
+ */
+export function getNodeIntersectionFromCenterToPoint(
+  intersectionNode: InternalNode,
+  target: XYPosition,
+  nodeMargin: number = 0,
+) {
+  const nodeCenter = getNodeCenter(intersectionNode)
+  const { width, height } = getNodeDimensions(intersectionNode)
+  const v = new VectorImpl(target.x, target.y).sub(nodeCenter)
+  console.log(intersectionNode)
+  const xScale = (nodeMargin + (width || 0) / 2) / v.x
+  const yScale = (nodeMargin + (height || 0) / 2) / v.y
+
+  const scale = Math.min(Math.abs(xScale), Math.abs(yScale))
+
+  return vector(v).mul(scale).add(nodeCenter)
+}
+
+/**
+ * Helper function returns the intersection point
+ * of the line between the center of the intersectionNode and the target
+ *
+ * @param intersectionNode the node that is the center of the line
+ * @param targetNode the target node
+ * @returns coordinates of the intersection point
+ */
+function getNodeIntersection(
+  intersectionNode: InternalNode,
+  targetNode: InternalNode,
+): XYPosition {
+  return getNodeIntersectionFromCenterToPoint(intersectionNode, getNodeCenter(targetNode))
+}
+
+// returns the position (top,right,bottom or right) passed node compared to the intersection point
+export function getPointPosition(node: InternalNode, intersectionPoint: XYPosition) {
+  const n = {
+    // x: node.data.element.position[0],
+    // y: node.data.element.position[1],
+    ...node.internals.positionAbsolute,
+    ...getNodeDimensions(node),
+  }
+  const nx = Math.round(n.x)
+  const ny = Math.round(n.y)
+  const px = Math.round(intersectionPoint.x)
+  const py = Math.round(intersectionPoint.y)
+
+  let handlePosition = Position.Top
+  if (px <= nx + 1) {
+    handlePosition = Position.Left
+  } else if (px >= nx + n.width - 1) {
+    handlePosition = Position.Right
+  } else if (py <= ny + 1) {
+    handlePosition = Position.Top
+  } else if (py >= n.y + n.height - 1) {
+    handlePosition = Position.Bottom
+  }
+
+  let handleWidth = 8, handleHeight = 8
+
+  let offsetX = 0
+  let offsetY = 0
+
+  // this is a tiny detail to make the markerEnd of an edge visible.
+  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
+  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
+  switch (handlePosition) {
+    case Position.Left:
+      offsetX = -handleWidth
+      break
+    case Position.Right:
+      offsetX = handleWidth
+      break
+    case Position.Top:
+      offsetY = -handleHeight
+      break
+    case Position.Bottom:
+      offsetY = handleHeight
+      break
+  }
+
+  return [
+    intersectionPoint.x + offsetX,
+    intersectionPoint.y + offsetY,
+    handlePosition,
+  ] as const
+}
+
+// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
+export function getEdgeParams(source: InternalNode, target: InternalNode) {
+  const sourceIntersectionPoint = getNodeIntersection(source, target)
+  const targetIntersectionPoint = getNodeIntersection(target, source)
+
+  const [sx, sy, sourcePos] = getPointPosition(source, sourceIntersectionPoint)
+  const [tx, ty, targetPos] = getPointPosition(target, targetIntersectionPoint)
+
+  return {
+    sx,
+    sy,
+    tx,
+    ty,
+    sourcePos,
+    targetPos,
+  }
+}

package/src/likec4diagram/custom/index.tsx

@@ -0,0 +1,8 @@
+import type { Types } from '../types'
+import { RelationshipEdge } from './edges/RelationshipEdge'
+
+export { nodeTypes } from './nodes/nodeTypes'
+
+export const edgeTypes = {
+  relationship: RelationshipEdge,
+} satisfies { [key in Types.Edge['type']]: any }

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

@@ -0,0 +1,27 @@
+import type { NodeId } from '@likec4/core'
+import { CompoundActionButton } from '../../../base/primitives'
+import type { NodeProps } from '../../../base/types'
+import { useEnabledFeature } from '../../../context'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { Types } from '../../types'
+
+type CompoundActionsProps = NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>
+
+export const CompoundActions = (props: CompoundActionsProps) => {
+  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const diagram = useDiagram()
+
+  const { navigateTo } = props.data
+  if (navigateTo && enableNavigateTo) {
+    return (
+      <CompoundActionButton
+        onClick={(e) => {
+          e.stopPropagation()
+          diagram.navigateTo(navigateTo, props.id as NodeId)
+        }}
+        {...props}
+      />
+    )
+  }
+  return null
+}

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

@@ -0,0 +1,74 @@
+import type { NodeId } from '@likec4/core'
+import { IconTransform, IconZoomScan } from '@tabler/icons-react'
+import { ElementActionButtons } from '../../../base/primitives'
+import type { NodeProps } from '../../../base/types'
+import { useEnabledFeature } from '../../../context'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { Types } from '../../types'
+
+type ElementActionsProps = NodeProps<Types.ElementNodeData>
+export const ElementActions = (props: ElementActionsProps) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'NavigateTo')
+  const diagram = useDiagram()
+
+  const buttons = [] as ElementActionButtons.Item[]
+
+  const { navigateTo, modelFqn } = props.data
+  if (navigateTo && enableNavigateTo) {
+    buttons.push({
+      key: 'navigate',
+      icon: <IconZoomScan />,
+      onClick: (e) => {
+        e.stopPropagation()
+        diagram.navigateTo(navigateTo, props.id as NodeId)
+      },
+    })
+  }
+  if (enableRelationshipBrowser) {
+    buttons.push({
+      key: 'relationships',
+      icon: <IconTransform />,
+      onClick: (e) => {
+        e.stopPropagation()
+        diagram.openRelationshipsBrowser(modelFqn)
+      },
+    })
+  }
+  return (
+    <ElementActionButtons
+      buttons={buttons}
+      {...props}
+    />
+  )
+}
+
+type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData>
+export const DeploymentElementActions = (props: DeploymentElementActionsProps) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature('NavigateTo', 'RelationshipBrowser')
+  const diagram = useDiagram()
+
+  const buttons = [] as ElementActionButtons.Item[]
+
+  const { navigateTo, modelFqn } = props.data
+  if (navigateTo && enableNavigateTo) {
+    buttons.push({
+      key: 'navigate',
+      icon: <IconZoomScan />,
+      onClick: (e) => {
+        e.stopPropagation()
+        diagram.navigateTo(navigateTo, props.id as NodeId)
+      },
+    })
+  }
+  if (enableRelationshipBrowser && !!modelFqn) {
+    buttons.push({
+      key: 'relationships',
+      icon: <IconTransform />,
+      onClick: (e) => {
+        e.stopPropagation()
+        diagram.openRelationshipsBrowser(modelFqn)
+      },
+    })
+  }
+  return <ElementActionButtons buttons={buttons} {...props} />
+}

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

@@ -0,0 +1,107 @@
+import { type Fqn, type NodeId } from '@likec4/core'
+import type { NodeProps } from '../../../base'
+import {
+  CompoundDetailsButton,
+  CompoundNodeContainer,
+  CompoundTitle,
+  customNode,
+  DefaultHandles,
+  ElementDetailsButton,
+  ElementNodeContainer,
+  ElementShape,
+  ElementTitle,
+} from '../../../base/primitives'
+import { IfEnabled, IfNotEnabled, useEnabledFeature } from '../../../context'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { Types } from '../../types'
+import { CompoundActions } from './CompoundActions'
+import { DeploymentElementActions, ElementActions } from './ElementActions'
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar'
+import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar'
+
+const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.NodeData> & { fqn: Fqn }) => {
+  const { enableElementDetails } = useEnabledFeature('ElementDetails')
+  const diagram = useDiagram()
+
+  if (!enableElementDetails) return null
+
+  return (
+    <ElementDetailsButton
+      {...props}
+      onClick={e => {
+        e.stopPropagation()
+        diagram.openElementDetails(fqn, props.id as NodeId)
+      }}
+    />
+  )
+}
+
+export const nodeTypes = {
+  element: customNode<Types.ElementNodeData>((props) => (
+    <ElementNodeContainer nodeProps={props}>
+      <ElementShape {...props} />
+      <ElementTitle {...props} />
+      <ElementActions {...props} />
+      <ElementDetailsButtonWithHandler
+        fqn={props.data.modelFqn}
+        {...props} />
+      <IfNotEnabled feature="ReadOnly">
+        <ElementToolbar {...props} />
+      </IfNotEnabled>
+      <DefaultHandles />
+    </ElementNodeContainer>
+  )),
+  deployment: customNode<Types.DeploymentElementNodeData>((props) => (
+    <ElementNodeContainer nodeProps={props}>
+      <ElementShape {...props} />
+      <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) => (
+    <CompoundNodeContainer nodeProps={props}>
+      <CompoundTitle {...props} />
+      <CompoundActions {...props} />
+      <IfNotEnabled feature="ReadOnly">
+        <CompoundDeploymentToolbar {...props} />
+      </IfNotEnabled>
+      <DefaultHandles />
+    </CompoundNodeContainer>
+  )),
+  'view-group': customNode<Types.ViewGroupNodeData>((props) => (
+    <CompoundNodeContainer nodeProps={props}>
+      <CompoundTitle {...props} />
+      <DefaultHandles />
+    </CompoundNodeContainer>
+  )),
+} satisfies { [key in Types.Node['type']]: any }