@likec4/diagram 1.29.1 → 1.31.0

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx

@@ -1,3 +1,4 @@
+import { cx as clsx } from '@likec4/styles/css'
 import { Badge, Box, Button, ButtonGroup } from '@mantine/core'
 import {
   IconPlayerPlayFilled,
@@ -5,7 +6,6 @@ import {
   IconPlayerSkipForwardFilled,
   IconPlayerStopFilled,
 } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { AnimatePresence, m } from 'motion/react'
 import { isNonNull, isTruthy } from 'remeda'
 import { useXYStore } from '../../../hooks'

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -111,6 +111,7 @@ function viewToNodesEdge(opts: {
     } satisfies Omit<Types.Node, 'data' | 'type'>
 
     const compoundData = {
+      viewId: view.id,
       id: node.id,
       title: node.title,
       color: node.color,
@@ -122,6 +123,7 @@ function viewToNodesEdge(opts: {
     } satisfies Types.CompoundNodeData
 
     const leafNodeData = {
+      viewId: view.id,
       id: node.id,
       title: node.title,
       technology: node.technology,

package/src/likec4model/LikeC4ModelContext.ts

@@ -1,4 +1,4 @@
-import type { LikeC4Model } from '@likec4/core'
+import type { AnyAux, LikeC4Model } from '@likec4/core/model'
 import { createContext } from 'react'
 
-export const LikeC4ModelContext = createContext<LikeC4Model | null>(null)
+export const LikeC4ModelContext = createContext<LikeC4Model<AnyAux> | null>(null)

package/src/likec4model/useLikeC4ElementsTree.ts

@@ -1,4 +1,6 @@
-import { type Fqn, type LikeC4Model, type ViewId, compareNatural } from '@likec4/core'
+import { type LikeC4Model } from '@likec4/core/model'
+import { type Fqn, type ViewId } from '@likec4/core/types'
+import { compareNatural } from '@likec4/core/utils'
 import { useMemo } from 'react'
 import { useLikeC4Model } from './useLikeC4Model'
 

package/src/likec4model/useLikeC4Model.ts

@@ -1,4 +1,4 @@
-import type { LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { useContext } from 'react'
 import { isDefined, isNonNullish, isString } from 'remeda'
 import { LikeC4ModelContext } from './LikeC4ModelContext'

package/src/overlays/Overlays.tsx

@@ -77,7 +77,7 @@ const compareSelectOverlays = <T extends ReturnType<typeof selectOverlays>>(a: T
   })
 }
 
-export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: OverlaysActorRef }) => {
+export function Overlays({ overlaysActorRef }: { overlaysActorRef: OverlaysActorRef }) {
   const xyflowDomNode = useXYStore(s => s.domNode)
   const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector('.react-flow__renderer') ?? null, [
     xyflowDomNode,
@@ -145,5 +145,4 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
       </ErrorBoundary>
     </DiagramFeatures.Overlays>
   )
-})
-Overlays.displayName = 'Overlays'
+}

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -27,17 +27,20 @@ export const card = css({
   pointerEvents: 'all',
   gap: 'lg',
   justifyContent: 'stretch',
-  backgroundColor: 'mantine.colors.body',
-  backgroundImage:
-    `linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)`,
-  borderTopColor: 'likec4.palette.fill',
-  _dark: {
-    backgroundColor: `mantine.colors.dark[6]`,
-    backgroundImage: `
-          linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 15%, transparent), transparent 80px),
-          linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
-        `,
-  },
+  backgroundColor: {
+    base: 'mantine.colors.body',
+    _dark: 'mantine.colors.dark[6]',
+  },
+  border: `none`,
+  backgroundImage: `
+    linear-gradient(180deg,
+      color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent),
+      color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px,
+      color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px,
+      transparent 80px
+    ),
+    linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+  `,
   '& .react-flow__attribution': {
     display: 'none',
   },
@@ -145,17 +148,6 @@ export const viewButtonTitle = css({
   fontWeight: 500,
   lineHeight: '1.4',
 })
-// globalStyle(`${viewButton} .tabler-icon`, {
-//   width: '85%',
-// })
-// globalStyle(`${viewButton} .tabler-icon`, {
-//   width: '85%',
-//   opacity: 0.75
-// })
-
-// globalStyle(`${whereLight} ${viewButton} .mantine-Button-label`, {
-//   color: mantine.colors.dark[3]
-// })
 
 export const tabsRoot = css({
   flex: 1,

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -215,16 +215,19 @@ export function ElementDetailsCard({
     }
   }, 20)
 
+  /**
+   * This delay improves "enter" animations,
+   * if  current tab is "Relationships"
+   */
   useTimeoutEffect(() => {
     setOpened(true)
-  }, 150)
+  }, 200)
 
   return (
     <m.dialog
       ref={ref}
       className={cx(styles.dialog, RemoveScroll.classNames.fullWidth)}
       layout
-      layoutRoot
       initial={{
         [styles.backdropBlur]: '0px',
         [styles.backdropOpacity]: '5%',
@@ -255,14 +258,15 @@ export function ElementDetailsCard({
     >
       <RemoveScroll forwardProps removeScrollBar={false}>
         <Card
+          shadow="md"
+          component={m.div}
+          layout
+          layoutRoot
           drag
+          dragControls={controls}
           dragElastic={0}
           dragMomentum={false}
           dragListener={false}
-          dragControls={controls}
-          withBorder
-          shadow="md"
-          component={m.div}
           className={cx(
             css({
               likec4Palette: nodeModel?.color ?? elementModel.color,
@@ -296,13 +300,11 @@ export function ElementDetailsCard({
             width: width as any,
             height: height as any,
           }}>
-          <Box
-            className={styles.cardHeader}
-            onPointerDown={e => controls.start(e)}>
+          <div className={styles.cardHeader} onPointerDown={e => controls.start(e)}>
             <Group align="start" justify="space-between" gap={'sm'} mb={'sm'} wrap="nowrap">
               <Group align="start" gap={'sm'} style={{ cursor: 'default' }} wrap="nowrap">
                 {elementIcon}
-                <Box>
+                <div>
                   <Text
                     component={'div'}
                     className={styles.title}>
@@ -313,7 +315,7 @@ export function ElementDetailsCard({
                       {notation}
                     </Text>
                   )}
-                </Box>
+                </div>
               </Group>
               <CloseButton
                 size={'lg'}
@@ -323,11 +325,11 @@ export function ElementDetailsCard({
                 }} />
             </Group>
             <Group align="baseline" gap={'sm'} wrap="nowrap">
-              <Box>
+              <div>
                 <SmallLabel>kind</SmallLabel>
                 <Badge radius={'sm'} size="sm" fw={600} color="gray">{elementModel.kind}</Badge>
-              </Box>
-              <Box flex={1}>
+              </div>
+              <div style={{ flex: 1 }}>
                 <SmallLabel>tags</SmallLabel>
                 <Flex gap={4} flex={1} mt={6}>
                   {elementModel.tags.map((tag) => (
@@ -335,7 +337,7 @@ export function ElementDetailsCard({
                   ))}
                   {elementModel.tags.length === 0 && <Badge radius={'sm'} size="sm" fw={600} color="gray">—</Badge>}
                 </Flex>
-              </Box>
+              </div>
               <ActionIconGroup
                 style={{
                   alignSelf: 'flex-end',
@@ -384,7 +386,7 @@ export function ElementDetailsCard({
                 )}
               </ActionIconGroup>
             </Group>
-          </Box>
+          </div>
           <Tabs
             value={activeTab}
             onChange={v => setActiveTab(v as any)}

package/src/overlays/overlay/Overlay.tsx

@@ -1,6 +1,5 @@
 import { cx } from '@likec4/styles/css'
 import {
-  Box,
   RemoveScroll,
 } from '@mantine/core'
 import { useMergedRef } from '@mantine/hooks'
@@ -10,7 +9,7 @@ import { type PropsWithChildren, forwardRef, useEffect, useRef, useState } from
 import { stopPropagation } from '../../utils'
 import { backdropBlur, backdropOpacity, level as cssVarLevel, overlay as overlayCVA } from './Overlay.css'
 
-type OverlayProps = PropsWithChildren<{
+export type OverlayProps = PropsWithChildren<{
   overlayLevel?: number
   className?: string
   classes?: {
@@ -128,9 +127,9 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
       {...rest}
     >
       <RemoveScroll forwardProps removeScrollBar={false}>
-        <Box className={cx(styles.body, 'overlay-body', classes?.body)}>
+        <div className={cx(styles.body, 'overlay-body', classes?.body)}>
           {opened && <>{children}</>}
-        </Box>
+        </div>
       </RemoveScroll>
     </m.dialog>
   )

package/src/overlays/overlaysActor.ts

@@ -7,7 +7,6 @@ import {
   type ActorRefFrom,
   type SnapshotFrom,
   assertEvent,
-  assign,
   enqueueActions,
   fromCallback,
   setup,
@@ -59,7 +58,7 @@ const hotkeyLogic = fromCallback(({ sendBack }: {
   }
 })
 
-export const overlaysActorLogic = setup({
+const _overlaysActorLogic = setup({
   types: {
     context: {} as OverlaysContext,
     events: {} as OverlayActorEvent,
@@ -278,6 +277,8 @@ export const overlaysActorLogic = setup({
   ],
 })
 
-export interface OverlaysActorLogic extends ActorLogicFrom<typeof overlaysActorLogic> {}
+export interface OverlaysActorLogic extends ActorLogicFrom<typeof _overlaysActorLogic> {}
+export const overlaysActorLogic: OverlaysActorLogic = _overlaysActorLogic
+
 export type OverlaysActorSnapshot = SnapshotFrom<OverlaysActorLogic>
 export interface OverlaysActorRef extends ActorRefFrom<OverlaysActorLogic> {}

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -1,10 +1,10 @@
 import { type DiagramEdge, type DiagramView, invariant, isAncestor, nonNullable } from '@likec4/core'
+import { cx as clsx } from '@likec4/styles/css'
 import { ActionIcon, Group } from '@mantine/core'
 import { useCallbackRef, useStateHistory } from '@mantine/hooks'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'
 import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
-import clsx from 'clsx'
 import { deepEqual } from 'fast-equals'
 import { AnimatePresence, LayoutGroup, m } from 'motion/react'
 import { memo, useEffect, useMemo, useRef } from 'react'

package/src/overlays/relationship-details/SelectEdge.tsx

@@ -8,11 +8,9 @@ import {
   ScrollAreaAutosize,
   Text,
   ThemeIcon,
-  useComputedColorScheme,
 } from '@mantine/core'
 import { IconArrowRight, IconSelector } from '@tabler/icons-react'
 import { useRef } from 'react'
-import { useMantinePortalProps } from '../../hooks'
 import { useRelationshipDetails } from './hooks'
 import * as css from './SelectEdge.css'
 

package/src/overlays/relationship-details/_types.ts

@@ -1,4 +1,5 @@
 import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core'
+import type { Simplify } from 'type-fest'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
 export namespace RelationshipDetailsTypes {
@@ -11,7 +12,8 @@ export namespace RelationshipDetailsTypes {
     out: string[]
   }
 
-  export type ElementNodeData = Base.NodeData<
+  export type ElementNodeData =
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -32,9 +34,9 @@ export namespace RelationshipDetailsTypes {
       icon: IconUrl
       ports: Ports
     }
-  >
 
-  export type CompoundNodeData = Base.NodeData<
+  export type CompoundNodeData =
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -50,7 +52,6 @@ export namespace RelationshipDetailsTypes {
       icon?: IconUrl
       ports: Ports
     }
-  >
 
   export type ElementNode = ReactFlowNode<ElementNodeData, 'element'>
 
@@ -61,15 +62,17 @@ export namespace RelationshipDetailsTypes {
 
   // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
 
-  export type EdgeData = Base.EdgeData<{
-    relationId: RelationId
-    color: Color | undefined
-    label: string | null
-    technology?: string | undefined
-    description?: string | undefined
-    navigateTo: ViewId | null
-    line: RelationshipLineType
-  }>
+  export type EdgeData = Simplify<
+    Base.EdgeData & {
+      relationId: RelationId
+      color: Color | undefined
+      label: string | null
+      technology?: string | undefined
+      description?: string | undefined
+      navigateTo: ViewId | null
+      line: RelationshipLineType
+    }
+  >
 
   export type Edge = ReactFlowEdge<EdgeData, 'relationship'>
 }

package/src/overlays/relationship-details/custom/edgeTypes.tsx

@@ -7,12 +7,12 @@ import {
   EdgeLabelContainer,
   EdgePath,
 } from '../../../base/primitives'
-import { useEnabledFeature } from '../../../context'
+import { useEnabledFeatures } from '../../../context'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipDetailsTypes } from '../_types'
 
 export const RelationshipEdge = customEdge<RelationshipDetailsTypes.EdgeData>((props) => {
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo } = useEnabledFeatures()
   const {
     sourceX,
     targetY,

package/src/overlays/relationships-browser/_types.ts

@@ -8,6 +8,7 @@ import type {
   RelationshipLineType,
   ViewId,
 } from '@likec4/core'
+import type { Simplify } from 'type-fest'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
 export namespace RelationshipsBrowserTypes {
@@ -21,7 +22,8 @@ export namespace RelationshipsBrowserTypes {
     out: string[]
   }
 
-  export type ElementNodeData = Base.NodeData<
+  export type ElementNodeData = Simplify<
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -45,7 +47,8 @@ export namespace RelationshipsBrowserTypes {
     }
   >
 
-  export type CompoundNodeData = Base.NodeData<
+  export type CompoundNodeData = Simplify<
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -71,9 +74,7 @@ export namespace RelationshipsBrowserTypes {
 
   // export type NonEmptyNode = ElementNode | CompoundNode
 
-  export type EmptyNodeData = Base.NodeData<{
-    column: Column
-  }>
+  export type EmptyNodeData = Base.NodeData & { column: Column }
 
   export type EmptyNode = ReactFlowNode<EmptyNodeData, 'empty'>
 
@@ -82,16 +83,18 @@ export namespace RelationshipsBrowserTypes {
 
   // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
 
-  export type EdgeData = Base.EdgeData<{
-    sourceFqn: Fqn
-    targetFqn: Fqn
-    relations: NonEmptyArray<RelationId>
-    color: Color | undefined
-    label: string | null
-    navigateTo: ViewId | null
-    line: RelationshipLineType
-    existsInCurrentView: boolean
-  }>
+  export type EdgeData = Simplify<
+    Base.EdgeData & {
+      sourceFqn: Fqn
+      targetFqn: Fqn
+      relations: NonEmptyArray<RelationId>
+      color: Color | undefined
+      label: string | null
+      navigateTo: ViewId | null
+      line: RelationshipLineType
+      existsInCurrentView: boolean
+    }
+  >
 
   export type Edge = ReactFlowEdge<EdgeData, 'relationship'>
 }

package/src/overlays/relationships-browser/actor.ts

@@ -186,7 +186,7 @@ export type Input = {
   // parentRef?: AnyActorRef| null
 }
 
-export type Context = Readonly<{
+export interface Context {
   subject: Fqn
   viewId: ViewId | null
   scope: 'global' | 'view'
@@ -200,7 +200,7 @@ export type Context = Readonly<{
   navigateFromNode: string | null
   xynodes: RelationshipsBrowserTypes.Node[]
   xyedges: RelationshipsBrowserTypes.Edge[]
-}>
+}
 
 export type Events =
   | { type: 'xyflow.init'; instance: XYFLowInstance; store: XYStoreApi }

package/src/overlays/relationships-browser/custom/edgeTypes.tsx

@@ -9,14 +9,14 @@ import {
   EdgeLabelContainer,
   EdgePath,
 } from '../../../base/primitives'
-import { useEnabledFeature } from '../../../context'
+import { useEnabledFeatures } from '../../../context'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes } from '../_types'
 import { useRelationshipsBrowser } from '../hooks'
 
 export const RelationshipEdge = customEdge<RelationshipsBrowserTypes.EdgeData>((props) => {
   const browser = useRelationshipsBrowser()
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo } = useEnabledFeatures()
   const {
     id,
     data: {

package/src/overlays/relationships-browser/custom/nodeTypes.tsx

@@ -1,6 +1,5 @@
 import { Handle } from '@xyflow/react'
 import { Position } from '@xyflow/system'
-import * as m from 'motion/react-m'
 import type { NodeProps } from '../../../base'
 import {
   CompoundNodeContainer,
@@ -34,7 +33,7 @@ const ElementDetailsButtonWithHandler = (
 
 export const ElementNode = customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
   return (
-    <ElementNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
+    <ElementNodeContainer key={props.id} layoutId={props.id} nodeProps={props}>
       <ElementShape {...props} />
       <ElementTitle {...props} />
       <ElementDetailsButtonWithHandler {...props} />

package/src/state/DiagramActorProvider.tsx

@@ -34,10 +34,10 @@ export function DiagramActorProvider({
     diagramMachine.provide({
       actions: {
         'trigger:NavigateTo': ((_, { viewId }) => {
-          // this delay allows tap animations to finish
+          // Slightly defer callback for better responsiveness
           setTimeout(() => {
             handlersRef.current.onNavigateTo?.(viewId as ViewId)
-          }, 30)
+          }, 50)
         }),
 
         'trigger:OnChange': ((_, params) => {

package/src/state/diagram-machine.ts

@@ -26,6 +26,7 @@ import {
 } from '@xyflow/react'
 import { type EdgeChange, type NodeChange, type Rect, type Viewport, nodeToRect } from '@xyflow/system'
 import { clamp, first, hasAtLeast, prop } from 'remeda'
+import type { PartialDeep } from 'type-fest'
 import {
   type ActorLogicFrom,
   type ActorRef,
@@ -69,7 +70,7 @@ import { DiagramToggledFeaturesPersistence } from './persistence'
 import { type Events as SyncLayoutEvents, syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import { findDiagramNode, focusedBounds, typedSystem } from './utils'
 
-type XYStoreApi = ReturnType<typeof useStoreApi<Types.Node, Types.Edge>>
+export type XYStoreApi = ReturnType<typeof useStoreApi<Types.Node, Types.Edge>>
 
 export interface NavigationHistory {
   history: ReadonlyArray<{
@@ -89,7 +90,7 @@ export interface Input {
   nodesSelectable: boolean
 }
 
-type ToggledFeatures = Partial<EnabledFeatures>
+export type ToggledFeatures = Partial<EnabledFeatures>
 
 export interface Context extends Input {
   xynodes: Types.Node[]
@@ -150,8 +151,8 @@ export type Events =
   | { type: 'xyflow.nodeMouseLeave'; node: Types.Node }
   | { type: 'xyflow.edgeMouseEnter'; edge: Types.Edge }
   | { type: 'xyflow.edgeMouseLeave'; edge: Types.Edge }
-  | { type: 'update.nodeData'; nodeId: NodeId; data: Partial<Types.NodeData> }
-  | { type: 'update.edgeData'; edgeId: EdgeId; data: Partial<Types.Edge['data']> }
+  | { type: 'update.nodeData'; nodeId: NodeId; data: PartialDeep<Types.NodeData> }
+  | { type: 'update.edgeData'; edgeId: EdgeId; data: PartialDeep<Types.EdgeData> }
   | { type: 'update.view'; view: DiagramView; xynodes: Types.Node[]; xyedges: Types.Edge[] }
   | { type: 'update.inputs'; inputs: Partial<Omit<Input, 'view' | 'xystore'>> }
   | { type: 'update.features'; features: EnabledFeatures }
@@ -179,7 +180,7 @@ export type Events =
 export type ActionArg = { context: Context; event: Events }
 
 // TODO: naming convention for actors
-export const diagramMachine = setup({
+const _diagramMachine = setup({
   types: {
     context: {} as Context,
     input: {} as Input,
@@ -1120,6 +1121,10 @@ function findCorrespondingNode(context: Context, event: { view: DiagramView }) {
   return { fromNode, toNode }
 }
 
-export type DiagramMachineLogic = ActorLogicFrom<typeof diagramMachine>
-// export type MachineSnapshot = SnapshotFrom<Machine>
-// export type LikeC4ViewActorRef = ActorRefFromLogic<Machine>
+/**
+ * Here is a trick to reduce inference types
+ */
+type InferredDiagramMachine = typeof _diagramMachine
+export interface DiagramMachine extends InferredDiagramMachine {}
+export const diagramMachine: DiagramMachine = _diagramMachine
+export interface DiagramMachineLogic extends ActorLogicFrom<DiagramMachine> {}

package/src/state/hotkeyActor.ts

@@ -1,10 +1,12 @@
 import { getHotkeyHandler } from '@mantine/hooks'
 import type { KeyboardEvent } from 'react'
-import { type AnyEventObject, type NonReducibleUnknown, fromCallback } from 'xstate'
+import { type AnyEventObject, type CallbackActorLogic, type NonReducibleUnknown, fromCallback } from 'xstate'
 
 export type HotKeyEvent = { type: 'key.esc' | `key.arrow.${'left' | 'right'}` }
 
-export const hotkeyActorLogic = fromCallback<AnyEventObject, NonReducibleUnknown, HotKeyEvent>(({ sendBack }: {
+export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {}
+
+export const hotkeyActorLogic: HotkeyActorLogic = fromCallback(({ sendBack }: {
   sendBack: (event: HotKeyEvent) => void
 }) => {
   const escHandler = getHotkeyHandler([

package/src/state/syncManualLayoutActor.ts

@@ -12,6 +12,10 @@ import { bezierControlPoints, isSamePoint } from '../utils'
 import type { Context as DiagramContext, Events as DiagramEvents } from './diagram-machine'
 
 export type Input = {
+  /**
+   * Actually this is DiagramActorRef
+   * But we can't use it here due to circular type inference
+   */
   parent: ActorRef<
     MachineSnapshot<DiagramContext, DiagramEvents, any, any, any, any, any, any>,
     DiagramEvents,
@@ -29,8 +33,8 @@ export type Events =
   | { type: 'synced' }
   | { type: 'cancel' }
   | { type: 'stop' }
-// TODO: naming convention for actors
-export const syncManualLayoutActorLogic = setup({
+
+const _syncManualLayoutActorLogic = setup({
   types: {
     context: {} as Context,
     input: {} as Input,
@@ -121,7 +125,9 @@ export const syncManualLayoutActorLogic = setup({
   },
 })
 
-export type SyncLayoutActorLogic = ActorLogicFrom<typeof syncManualLayoutActorLogic>
+export interface SyncLayoutActorLogic extends ActorLogicFrom<typeof _syncManualLayoutActorLogic> {}
+
+export const syncManualLayoutActorLogic: SyncLayoutActorLogic = _syncManualLayoutActorLogic
 
 function createViewChange(parentContext: DiagramContext): ViewChange.SaveManualLayout {
   const { view, xystore, xyflow } = parentContext

package/src/state/types.ts

@@ -1,20 +1,26 @@
-import type { ActorRefFromLogic, ActorSystem, SnapshotFrom } from 'xstate'
+import type { ActorRefFromLogic, ActorSystem, EventFromLogic, SnapshotFrom } from 'xstate'
 import type { OverlaysActorRef } from '../overlays/overlaysActor'
 import type { DiagramMachineLogic } from './diagram-machine'
 import type { SyncLayoutActorLogic } from './syncManualLayoutActor'
 
 export type System = ActorSystem<{
   actors: {
-    diagram: DiagramActorRef
+    diagram: ActorRefFromLogic<DiagramMachineLogic>
     overlays: OverlaysActorRef
   }
 }>
 
-export type DiagramActorRef = Omit<ActorRefFromLogic<DiagramMachineLogic>, 'system'> & {
+export interface DiagramActorRef extends ActorRefFromLogic<DiagramMachineLogic> {
   system: System
 }
+
+// export type DiagramActorRef = Omit<ActorRefFromLogic<DiagramMachineLogic>, 'system'> & {
+//   system: System
+// }
 export type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>
 
+export type DiagramActorEvent = EventFromLogic<DiagramMachineLogic>
+
 export type { Context as DiagramContext } from './diagram-machine'
 
 export type SyncLayoutActorRef = Omit<ActorRefFromLogic<SyncLayoutActorLogic>, 'system'> & {