@likec4/diagram 1.39.5 → 1.41.0

package/src/base/types.ts

@@ -15,11 +15,11 @@ type RFEdge<
 type ReactFlowNodeProps<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
   NodeType extends string | undefined = string | undefined,
-> = RF.NodeProps<RFNode<NodeData, NodeType>>
+> = RF.NodeProps<RF.Node<NodeData, NodeType>>
 type ReactFlowEdgeProps<
   EdgeData extends Record<string, unknown> = Record<string, unknown>,
   EdgeType extends string | undefined = string | undefined,
-> = RF.EdgeProps<RFEdge<EdgeData, EdgeType>>
+> = RF.EdgeProps<RF.Edge<EdgeData, EdgeType>>
 
 export namespace Base {
   // 'immediate' means that the node is dimmed without delay
@@ -156,9 +156,11 @@ export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends s
 /**
  * ReactFlow Custom Edge properties with BaseEdgeData at least
  */
-export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = SetRequired<
-  Simplify<ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>>,
-  'data'
+export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = Simplify<
+  SetRequired<
+    ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>,
+    'data'
+  >
 >
 
 export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<

package/src/bundle/LikeC4View.props.ts

@@ -1,5 +1,4 @@
 import type * as t from '@likec4/core/types'
-import type { WhereOperator } from '@likec4/core/types'
 import type { CSSProperties } from 'react'
 import type {
   CustomNodes,
@@ -109,10 +108,16 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
 
   /**
    * If Walkthrough for dynamic views should be enabled
-   * @default enableFocusMode
+   * @default false
    */
   enableDynamicViewWalkthrough?: boolean | undefined
 
+  /**
+   * Default dynamic view display variant
+   * @default 'diagram'
+   */
+  dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined
+
   /**
    * Enable popup with element details
    * @default false
@@ -145,7 +150,7 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
    */
   reduceGraphics?: 'auto' | boolean | undefined
 
-  where?: WhereOperator<A> | undefined
+  where?: t.WhereOperator<A> | undefined
 
   /**
    * Override some react flow props
@@ -228,6 +233,12 @@ export interface LikeC4BrowserProps {
    */
   enableDynamicViewWalkthrough?: boolean | undefined
 
+  /**
+   * Default dynamic view display variant
+   * @default 'diagram'
+   */
+  dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined
+
   /**
    * Enable popup with element details
    * @default true

package/src/bundle/LikeC4View.tsx

@@ -5,9 +5,9 @@ import { shallowEqual, useCallbackRef } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
 import { memo, useState } from 'react'
 import { isBoolean } from 'remeda'
+import { FitViewPaddings } from '../base/const'
 import { FramerMotionConfig } from '../context/FramerMotionConfig'
 import { LikeC4Diagram } from '../LikeC4Diagram'
-import type { ViewPadding } from '../LikeC4Diagram.props'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { Overlay } from '../overlays/overlay/Overlay'
 import type { LikeC4ViewProps } from './LikeC4View.props'
@@ -37,13 +37,6 @@ export function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({
   return <LikeC4ViewInner view={view.$view} {...props} />
 }
 
-const DEFAULT_BROWSER_PADDING: ViewPadding = {
-  top: '50px',
-  bottom: '16px',
-  left: '16px',
-  right: '16px',
-}
-
 type LikeC4ViewInnerProps<A extends t.aux.Any> = Omit<LikeC4ViewProps<A>, 'viewId'> & {
   view: t.DiagramView<A>
 }
@@ -56,8 +49,6 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<t.aux.UnknownLayouted>>(({
   colorScheme: explicitColorScheme,
   injectFontCss = true,
   controls = false,
-  fitView = true,
-  fitViewPadding = '16px',
   background = 'transparent',
   browser = true,
   showDiagramTitle = false,
@@ -129,8 +120,8 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<t.aux.UnknownLayouted>>(({
             pannable={pannable}
             zoomable={zoomable}
             background={background}
-            fitView={fitView}
-            fitViewPadding={fitViewPadding}
+            fitView={true}
+            fitViewPadding={FitViewPaddings.default}
             showDiagramTitle={showDiagramTitle}
             showNotations={showNotations && hasNotations}
             enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
@@ -152,7 +143,6 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<t.aux.UnknownLayouted>>(({
             // so we don't want enable search and hotkeys
             enableSearch={false}
             {...isBrowserEnabled && {
-              onNavigateTo: onNavigateTo,
               onCanvasClick: onNavigateToThisView,
               onNodeClick: onNavigateToThisView,
             }}
@@ -176,8 +166,8 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<t.aux.UnknownLayouted>>(({
                 controls="next"
                 readonly
                 fitView
-                fitViewPadding={DEFAULT_BROWSER_PADDING}
                 {...props}
+                fitViewPadding={FitViewPaddings.withControls}
                 {...browserProps}
                 showNotations={(browserProps.showNotations ?? true) &&
                   (browserView.notation?.nodes.length ?? 0) > 0}

package/src/bundle/ReactLikeC4.tsx

@@ -1,5 +1,4 @@
 import type * as t from '@likec4/core/types'
-import type { DiagramView } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { type CSSProperties } from 'react'
 import { isFunction, isString } from 'remeda'
@@ -65,7 +64,7 @@ export function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({
 }
 
 type ReactLikeC4InnerProps<A extends t.aux.Any> = Omit<ReactLikeC4Props<A>, 'viewId'> & {
-  view: DiagramView<A>
+  view: t.DiagramView<A>
 }
 function ReactLikeC4Inner<A extends t.aux.Any>({
   className,

package/src/components/Link.tsx

@@ -1,5 +1,6 @@
 import type { Link as LinkData } from '@likec4/core'
 import { css, cx } from '@likec4/styles/css'
+import { styled } from '@likec4/styles/jsx'
 import { type BadgeProps, ActionIcon, Badge, CopyButton } from '@mantine/core'
 import { IconCheck, IconCopy } from '@tabler/icons-react'
 import { forwardRef } from 'react'
@@ -72,29 +73,31 @@ export const Link = forwardRef<HTMLDivElement, Omit<BadgeProps, 'children' | 'cl
               userSelect: 'none',
               pointerEvents: 'none',
               _groupHover: {
-                color: '[inherit]',
+                color: '[var(--badge-color)]',
                 opacity: .7,
               },
             },
           }),
-          label: css({
-            '& > a': {
-              color: '[inherit]',
-              cursor: 'pointer',
-              transition: 'fast',
-              opacity: {
-                base: 0.7,
-                _hover: 1,
-              },
-              textDecoration: {
-                base: 'none',
-                _hover: 'underline',
-              },
-            },
-          }),
         }}
       >
-        <a href={url} target="_blank">
+        <styled.a
+          href={url}
+          target="_blank"
+          style={{
+            color: 'var(--badge-color)',
+            cursor: 'pointer',
+          }}
+          css={{
+            transition: 'fast',
+            opacity: {
+              base: 0.7,
+              _hover: 1,
+            },
+            textDecoration: {
+              base: 'none',
+              _hover: 'underline',
+            },
+          }}>
           {isGithub && (
             <GithubIcon
               height="12"
@@ -102,7 +105,7 @@ export const Link = forwardRef<HTMLDivElement, Omit<BadgeProps, 'children' | 'cl
               style={{ verticalAlign: 'middle', marginRight: '4px' }} />
           )}
           {isGithub ? url.replace(GITHUB_PREFIX, '') : url}
-        </a>
+        </styled.a>
       </Badge>
     )
   },

package/src/custom/customNodes.ts

@@ -266,10 +266,17 @@ export type CustomViewGroupNodeProps = {
   nodeModel: NodeModel.IsGroup<Any>
 }
 
+export const sequenceActorNode: CustomNodeComponent<CustomSequenceActorNodeProps> = customDiagramNode as any
+export type CustomSequenceActorNodeProps = {
+  nodeProps: NodeProps<Types.SequenceActorNodeData, 'seq-actor'>
+  nodeModel: NodeModel.WithElement<Any>
+}
+
 export interface CustomNodes {
   element?: FunctionComponent<NodeProps<Types.ElementNodeData, 'element'>>
   deployment?: FunctionComponent<NodeProps<Types.DeploymentElementNodeData, 'deployment'>>
   compoundElement?: FunctionComponent<NodeProps<Types.CompoundElementNodeData, 'compound-element'>>
   compoundDeployment?: FunctionComponent<NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>>
   viewGroup?: FunctionComponent<NodeProps<Types.ViewGroupNodeData, 'view-group'>>
+  sequenceActor?: FunctionComponent<NodeProps<Types.SequenceActorNodeData, 'seq-actor'>>
 }

package/src/hooks/useDiagram.ts

@@ -3,6 +3,7 @@ import {
   type DiagramEdge,
   type DiagramNode,
   type DiagramView,
+  type DynamicViewDisplayVariant,
   type NodeId,
   type NodeNotation as ElementNotation,
   type scalar,
@@ -115,6 +116,11 @@ export interface DiagramApi {
   highlightNotation(notation: ElementNotation, kind?: string): void
   unhighlightNotation(): void
   openSearch(searchValue?: string): void
+
+  /**
+   * Switch dynamic view display variant
+   */
+  switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void
 }
 
 /**
@@ -246,6 +252,10 @@ export function useDiagram(): DiagramApi {
     openSearch: (searchValue?: string) => {
       actor.send({ type: 'open.search', ...(searchValue && { search: searchValue }) })
     },
+
+    switchDynamicViewVariant: (variant: DynamicViewDisplayVariant) => {
+      actor.send({ type: 'switch.dynamicViewVariant', variant })
+    },
   }), [actor])
 }
 

package/src/likec4diagram/DiagramUI.tsx

@@ -32,7 +32,7 @@ export const DiagramUI = memo(() => {
         : <Controls />}
       {overlaysActorRef && <Overlays overlaysActorRef={overlaysActorRef} />}
       {enableNotations && <NotationPanel />}
-      {enableControls !== 'next' && (
+      {enableControls === true && (
         <>
           {enableViewTitle && <DiagramTitlePanel />}
           {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css'
 import { useCallbackRef, useDebouncedCallback, useTimeout } from '@mantine/hooks'
 import { useCustomCompareMemo } from '@react-hookz/web'
 import type { OnMove, OnMoveEnd } from '@xyflow/system'
-import { shallowEqual } from 'fast-equals'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import { type PropsWithChildren } from 'react'
 import type { Simplify } from 'type-fest'
 import { BaseXYFlow } from '../base/BaseXYFlow'
@@ -13,7 +13,7 @@ import { useUpdateEffect } from '../hooks'
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import type { DiagramContext } from '../state/types'
-import { BuiltinNodes as defaultNodeTypes, edgeTypes } from './custom'
+import { BuiltinNodes as defaultNodeTypes, edgeTypes, SequenceParallelArea } from './custom'
 import { DiagramUI } from './DiagramUI'
 import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
@@ -26,7 +26,9 @@ const selectXYProps = (ctx: DiagramContext) => ({
   zoomable: ctx.zoomable,
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly,
+  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly
+    // if dynamic view display mode is sequence, enable readonly
+    || (ctx.dynamicViewVariant === 'sequence' && ctx.view._type === 'dynamic'),
   ...(!ctx.features.enableFitView && {
     viewport: {
       x: -Math.min(ctx.view.bounds.x, 0),
@@ -41,7 +43,7 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   a.zoomable === b.zoomable &&
   a.enableFitView === b.enableFitView &&
   a.enableReadOnly === b.enableReadOnly &&
-  shallowEqual(a.fitViewPadding, b.fitViewPadding) &&
+  deepEqual(a.fitViewPadding, b.fitViewPadding) &&
   shallowEqual(a.nodes, b.nodes) &&
   shallowEqual(a.edges, b.edges) &&
   shallowEqual(a.viewport ?? null, b.viewport ?? null)
@@ -123,7 +125,9 @@ export function LikeC4DiagramXYFlow({
           'compound-element': renderNodes?.compoundElement ?? defaultNodeTypes.compoundElement,
           'compound-deployment': renderNodes?.compoundDeployment ?? defaultNodeTypes.compoundDeployment,
           'view-group': renderNodes?.viewGroup ?? defaultNodeTypes.viewGroup,
-        }
+          'seq-actor': renderNodes?.sequenceActor ?? defaultNodeTypes.sequenceActor,
+          'seq-parallel': SequenceParallelArea,
+        } satisfies Record<Types.Node['type'], any>
       },
       [renderNodes],
       shallowEqual,
@@ -224,6 +228,7 @@ export function LikeC4DiagramXYFlow({
         }}
         nodesDraggable={notReadOnly && nodesDraggable}
         nodesSelectable={nodesSelectable}
+        edgesFocusable={false}
         {...(notReadOnly && nodesDraggable && layoutConstraints)}
         {...props}
         {...reactFlowProps}>

package/src/likec4diagram/convert-to-xyflow.ts

@@ -0,0 +1,45 @@
+import type { DynamicViewDisplayVariant, LayoutedView, WhereOperator } from '@likec4/core/types'
+import type { Types } from './types'
+import { diagramToXY } from './xyflow-diagram/diagram-view'
+import { sequenceViewToXY } from './xyflow-sequence/sequence-view'
+
+type ConvertToXYFlowInput = {
+  view: LayoutedView
+  where: WhereOperator | null
+  nodesSelectable: boolean
+  dynamicViewVariant: DynamicViewDisplayVariant
+}
+
+export function convertToXYFlow({ dynamicViewVariant, ...params }: ConvertToXYFlowInput): {
+  view: LayoutedView
+  xynodes: Types.Node[]
+  xyedges: Types.Edge[]
+} {
+  const view = params.view
+  const isDynamic = view._type === 'dynamic'
+
+  const { bounds, xynodes, xyedges } = isDynamic && dynamicViewVariant === 'sequence'
+    ? sequenceViewToXY(view)
+    : diagramToXY(params)
+
+  if (isDynamic && view.variant !== dynamicViewVariant) {
+    return {
+      view: {
+        ...view,
+        bounds,
+        variant: dynamicViewVariant,
+      },
+      xynodes,
+      xyedges,
+    }
+  }
+
+  return {
+    view: bounds === view.bounds ? view : {
+      ...view,
+      bounds,
+    },
+    xynodes,
+    xyedges,
+  }
+}

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

@@ -329,7 +329,6 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
           <EdgeLabel edgeProps={props}>
             {navigateTo && (
               <EdgeActionButton
-                {...props}
                 onClick={e => {
                   e.stopPropagation()
                   diagram.navigateTo(navigateTo)

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

@@ -0,0 +1,65 @@
+import { getSmoothStepPath } from '@xyflow/system'
+import type { EdgeProps } from '../../../base'
+import { EdgeActionButton, EdgeContainer, EdgeLabel, EdgeLabelContainer, EdgePath } from '../../../base/primitives'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { Types } from '../../types'
+
+const LABEL_OFFSET = 16
+export function SequenceStepEdge(props: EdgeProps<Types.SequenceStepEdgeData>) {
+  const diagram = useDiagram()
+  const { navigateTo } = props.data
+  const isSelfLoop = props.source === props.target
+  const isBack = props.sourceX > props.targetX
+  const [path] = getSmoothStepPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+    ...(isSelfLoop && {
+      offset: 30,
+      borderRadius: 16,
+    }),
+  })
+
+  let labelX = props.sourceX
+  switch (true) {
+    case isSelfLoop:
+      labelX = props.sourceX + 24 + LABEL_OFFSET
+      break
+    case isBack:
+      labelX = props.sourceX - LABEL_OFFSET
+      break
+    default:
+      labelX = props.sourceX + LABEL_OFFSET
+      break
+  }
+
+  return (
+    <EdgeContainer {...props}>
+      <EdgePath
+        edgeProps={props}
+        svgPath={path}
+      />
+      <EdgeLabelContainer
+        edgeProps={props}
+        labelPosition={{
+          x: labelX,
+          y: props.sourceY + (!isSelfLoop ? LABEL_OFFSET : 0),
+          translate: isBack ? 'translate(-100%, 0)' : undefined,
+        }}
+      >
+        <EdgeLabel edgeProps={props}>
+          {navigateTo && (
+            <EdgeActionButton
+              onClick={e => {
+                e.stopPropagation()
+                diagram.navigateTo(navigateTo)
+              }} />
+          )}
+        </EdgeLabel>
+      </EdgeLabelContainer>
+    </EdgeContainer>
+  )
+}

package/src/likec4diagram/custom/index.ts

@@ -1,13 +1,15 @@
 import type { CustomNodes } from '../../custom/customNodes'
 import type { Types } from '../types'
 import { RelationshipEdge } from './edges/RelationshipEdge'
+import { SequenceStepEdge } from './edges/SequenceStepEdge'
 import {
   CompoundDeploymentNode,
   CompoundElementNode,
   DeploymentNode,
   ElementNode,
+  SequenceActorNode,
   ViewGroupNode,
-} from './nodes/nodes'
+} from './nodes'
 
 export const BuiltinNodes = {
   element: ElementNode,
@@ -15,8 +17,12 @@ export const BuiltinNodes = {
   compoundElement: CompoundElementNode,
   compoundDeployment: CompoundDeploymentNode,
   viewGroup: ViewGroupNode,
+  sequenceActor: SequenceActorNode,
 } satisfies Required<CustomNodes>
 
+export { SequenceParallelArea } from './nodes/SequenceActorNode'
+
 export const edgeTypes = {
   relationship: RelationshipEdge,
+  'seq-step': SequenceStepEdge,
 } satisfies { [key in Types.Edge['type']]: any }

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

@@ -1,4 +1,4 @@
-import type { NodeId } from '@likec4/core'
+import type { NodeId } from '@likec4/core/types'
 import { IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { useMemo } from 'react'
 import { hasAtLeast } from 'remeda'
@@ -8,6 +8,8 @@ import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { Types } from '../../types'
 
+type RequiredData = Pick<Types.ElementNodeData, 'modelFqn' | 'navigateTo'>
+
 type WithExtraButtons = {
   /**
    * Add extra action buttons
@@ -31,7 +33,7 @@ type WithExtraButtons = {
   extraButtons?: ElementActionButtons.Item[]
 }
 
-export type ElementActionsProps = NodeProps<Types.ElementNodeData> & WithExtraButtons
+export type ElementActionsProps = NodeProps<RequiredData> & WithExtraButtons
 
 export const ElementActions = ({
   extraButtons,

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

@@ -0,0 +1,175 @@
+import { defaultTheme } from '@likec4/core'
+import { css } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
+import type { NodeProps } from '@xyflow/react'
+import { Handle } from '@xyflow/react'
+import { Position } from '@xyflow/system'
+import { ElementNodeContainer, ElementShape, ElementTitle } from '../../../custom'
+import { type Types } from '../../types'
+import { ElementActions } from './ElementActions'
+import { ElementDetailsButtonWithHandler } from './nodes'
+
+const positionMap: Record<Types.SequenceActorNodePort['position'], Position> = {
+  left: Position.Left,
+  right: Position.Right,
+  top: Position.Top,
+  bottom: Position.Bottom,
+}
+
+const ActorStepPort = ({
+  data,
+  port: p,
+}: {
+  data: Types.SequenceActorNodeData
+  port: Types.SequenceActorNodePort
+}) => {
+  return (
+    <>
+      <Box
+        data-likec4-color={data.color}
+        className={css({
+          position: 'absolute',
+          backgroundColor: 'var(--likec4-palette-fill)',
+          rounded: 'xs',
+          width: {
+            base: '5px',
+            _whenHovered: '7px',
+            _whenSelected: '7px',
+          },
+          // pointerEvents: 'none',
+          transition: 'fast',
+          translateX: '-1/2',
+          translateY: '-1/2',
+          translate: 'auto',
+          // transform: 'translate',
+        })}
+        style={{
+          top: p.cy,
+          left: p.cx,
+          height: p.height,
+          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
+          // transform: 'translate(-50%, -50%)',
+          // zIndex: p.type === 'source' ? 1 : 0,
+        }}
+      />
+      <Handle
+        id={p.id}
+        type={p.type}
+        position={positionMap[p.position]}
+        style={{
+          top: p.cy - 3,
+          left: p.cx - 3,
+          width: 6,
+          height: 6,
+          right: 'unset',
+          bottom: 'unset',
+          visibility: 'hidden',
+          transform: p.position === 'left' ? 'translate(-150%, 0)' : 'translate(100%, 0)',
+        }} />
+    </>
+  )
+}
+
+export function SequenceActorNode(props: NodeProps<Types.SequenceActorNode>) {
+  const data = props.data
+  const {
+    positionAbsoluteY,
+    data: {
+      viewHeight,
+      hovered: isHovered = false,
+      ports,
+    },
+  } = props
+
+  return (
+    <>
+      <Box
+        className={css({
+          position: 'absolute',
+          rounded: 'xs',
+          top: '1',
+          pointerEvents: 'none',
+          transition: 'fast',
+          translateX: '-1/2',
+          translate: 'auto',
+          // transform: 'translate',
+        })}
+        style={{
+          // position: 'absolute',
+          backgroundColor: defaultTheme.elements.gray.fill,
+          opacity: isHovered ? 0.5 : 0.4,
+          left: '50%',
+          width: isHovered ? 3 : 2,
+          height: viewHeight - positionAbsoluteY,
+          zIndex: -1,
+          pointerEvents: 'none',
+          // top: p.y,
+          // left: p.width / 2,
+          // height: p.type === 'source' ? 48 : 32,
+          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
+          // transform: 'translate(-50%, -50%)',
+          // zIndex: p.type === 'source' ? 1 : 0,
+        }}
+      />
+      {
+        /* <div
+        // css={{
+        //   backgroundColor: 'var(--likec4-palette-fill)',
+        // }}
+        style={{
+          position: 'absolute',
+          backgroundColor: defaultTheme.elements.gray.fill,
+          opacity: 0.5,
+          top: 8,
+          left: 'calc(50% - 1px)',
+          width: 2,
+          height: viewHeight - positionAbsoluteY,
+          zIndex: -1,
+          pointerEvents: 'none',
+        }}>
+      </div> */
+      }
+      <ElementNodeContainer nodeProps={props}>
+        <ElementShape {...props} />
+        <ElementTitle {...props} />
+        {data.modelFqn && (
+          <>
+            <ElementActions {...props} data={data as Types.ElementNodeData} />
+            <ElementDetailsButtonWithHandler {...props} data={data as Types.ElementNodeData} />
+          </>
+        )}
+      </ElementNodeContainer>
+      {ports.map(p => <ActorStepPort key={p.id} port={p} data={props.data} />)}
+    </>
+  )
+}
+
+export function SequenceParallelArea(props: NodeProps<Types.SequenceActorNode>) {
+  return (
+    <Box
+      data-likec4-color={props.data.color}
+      css={{
+        width: '100%',
+        height: '100%',
+        border: 'default',
+        rounded: 'sm',
+        borderWidth: 1,
+        '--_color': {
+          base: 'var(--likec4-palette-stroke)',
+          _dark: '[color-mix(in srgb, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]',
+        },
+        borderColor: '[var(--_color)/30]',
+        backgroundColor: 'var(--likec4-palette-fill)/15',
+        pointerEvents: 'none',
+        paddingLeft: '2',
+        paddingTop: '0.5',
+        fontSize: 'xs',
+        fontWeight: 'bold',
+        letterSpacing: '.75px',
+        color: '[var(--_color)/75]',
+      }}
+    >
+      PARALLEL
+    </Box>
+  )
+}