@likec4/diagram 1.28.1 → 1.29.0

package/dist/state/diagram-machine.js

@@ -1,4 +1,4 @@
-import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, getParallelStepsPrefix } from '@likec4/core';
+import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, isStepEdgeId, getParallelStepsPrefix } from '@likec4/core';
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { nodeToRect } from '@xyflow/system';
 import { hasAtLeast, prop, clamp, first } from 'remeda';
@@ -32,6 +32,7 @@ const diagramMachine = setup({
     "enabled: FitView": ({ context }) => context.features.enableFitView,
     "enabled: FocusMode": ({ context }) => context.features.enableFocusMode,
     "enabled: Readonly": ({ context }) => context.features.enableReadOnly,
+    "enabled: RelationshipDetails": ({ context }) => context.features.enableRelationshipDetails,
     "not readonly": ({ context }) => !context.features.enableReadOnly,
     "is dynamic view": ({ context }) => context.view.__ === "dynamic",
     "is another view": ({ context, event }) => {
@@ -59,6 +60,10 @@ const diagramMachine = setup({
     "click: node has connections": ({ context, event }) => {
       assertEvent(event, "xyflow.nodeClick");
       return context.xyedges.some((e) => e.source === event.node.id || e.target === event.node.id);
+    },
+    "click: selected edge": ({ event }) => {
+      assertEvent(event, "xyflow.edgeClick");
+      return event.edge.selected === true || event.edge.data.active === true;
     }
   },
   actions: {
@@ -562,7 +567,27 @@ const diagramMachine = setup({
                 focusedNode: ({ event }) => event.nodeId
               }),
               target: "focused"
-            }
+            },
+            "xyflow.edgeClick": [{
+              guard: and([
+                "is dynamic view",
+                "click: selected edge"
+              ]),
+              actions: raise(({ event }) => ({
+                type: "walkthrough.start",
+                stepId: event.edge.id
+              }))
+            }, {
+              guard: and([
+                "enabled: RelationshipDetails",
+                "click: selected edge"
+              ]),
+              actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
+                type: "open.relationshipDetails",
+                viewId: context.view.id,
+                edgeId: event.edge.id
+              }))
+            }]
           }
         },
         focused: {
@@ -575,18 +600,18 @@ const diagramMachine = setup({
             spawnChild("hotkeyActorLogic", { id: "hotkey" }),
             "xyflow:fitFocusedBounds"
           ],
-          exit: enqueueActions(({ enqueue, context }) => {
+          exit: enqueueActions(({ enqueue, context, event }) => {
             enqueue.stopChild("hotkey");
             if (context.viewportBeforeFocus) {
               enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
             } else {
               enqueue({ type: "xyflow:fitDiagram" });
             }
-            enqueue.assign((s) => ({
-              ...unfocusNodesEdges(s),
+            enqueue.assign({
+              ...unfocusNodesEdges({ context}),
               viewportBeforeFocus: null,
               focusedNode: null
-            }));
+            });
           }),
           on: {
             "xyflow.nodeClick": [
@@ -681,6 +706,23 @@ const diagramMachine = setup({
                 enqueue("xyflow:fitFocusedBounds");
               })
             },
+            "xyflow.edgeClick": {
+              actions: [
+                assign(({ event, context }) => {
+                  if (!isStepEdgeId(event.edge.id) || event.edge.id === context.activeWalkthrough?.stepId) {
+                    return {};
+                  }
+                  return {
+                    activeWalkthrough: {
+                      stepId: event.edge.id,
+                      parallelPrefix: getParallelStepsPrefix(event.edge.id)
+                    }
+                  };
+                }),
+                assign(updateActiveWalkthrough),
+                "xyflow:fitFocusedBounds"
+              ]
+            },
             "notations.unhighlight": {
               actions: assign((s) => ({
                 ...updateActiveWalkthrough(s)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.28.1",
+  "version": "1.29.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -44,7 +44,7 @@
     "@dagrejs/dagre": "1.1.4",
     "@mantine/core": "7.17.4",
     "@mantine/hooks": "7.17.4",
-    "@nanostores/react": "0.8.4",
+    "@nanostores/react": "1.0.0",
     "@react-hookz/web": "^25.1.1",
     "@tabler/icons-react": "3.31.0",
     "@xstate/react": "^5.0.3",
@@ -54,15 +54,15 @@
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "fast-equals": "^5.2.2",
-    "motion": "^12.6.3",
-    "nanostores": "0.11.4",
+    "motion": "^12.7.3",
+    "nanostores": "1.0.1",
     "react-error-boundary": "^5.0.0",
     "react-shadow": "^20.6.0",
     "remeda": "^2.21.2",
     "type-fest": "^4.39.1",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.28.1",
-    "@likec4/styles": "1.28.1"
+    "@likec4/core": "1.29.0",
+    "@likec4/styles": "1.29.0"
   },
   "peerDependencies": {
     "react": "^18.x || ^19.x",
@@ -84,8 +84,8 @@
     "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.1.1",
-    "wireit": "^0.14.11",
-    "@likec4/tsconfig": "1.28.1"
+    "wireit": "^0.14.12",
+    "@likec4/tsconfig": "1.29.0"
   },
   "scripts": {
     "generate": "panda codegen",

package/src/LikeC4Diagram.tsx

@@ -15,7 +15,6 @@ import { LikeC4CustomColors } from './LikeC4CustomColors'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow'
 import type { Types } from './likec4diagram/types'
-import { useViewToNodesEdges } from './likec4diagram/useViewToNodesEdges'
 import { useLikeC4Model } from './likec4model'
 import { DiagramActorProvider } from './state/DiagramActorProvider'
 

package/src/base/primitives/customEdge.ts

@@ -13,6 +13,7 @@ export const edgePropsEqual = <P extends Record<string, unknown> = Base.EdgeData
 ) => (
   prev.id === next.id
   && eq(prev.selected ?? false, next.selected ?? false)
+  && eq(prev.animated ?? false, next.animated ?? false)
   && eq(prev.source, next.source)
   && eq(prev.sourceHandleId ?? null, next.sourceHandleId ?? null)
   && eq(prev.sourcePosition, next.sourcePosition)

package/src/base/primitives/edge/EdgeLabel.css.ts

@@ -125,6 +125,9 @@ export const labelsva = sva({
           padding: '0px',
         },
         labelContents: {
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
           padding: '2px 5px 4px 0px',
         },
         labelText: {

package/src/base/primitives/edge/EdgeLabel.tsx

@@ -1,6 +1,7 @@
 import { type DiagramEdge, extractStep, isStepEdgeId } from '@likec4/core'
 import { cx } from '@likec4/styles/css'
-import { type BoxProps, Box, Text } from '@mantine/core'
+import { type BoxProps, Box } from '@likec4/styles/jsx'
+import { Text } from '@mantine/core'
 import { type PropsWithChildren } from 'react'
 import { isTruthy } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'

package/src/hooks/safeContext.tsx

@@ -4,9 +4,11 @@ import type { DiagramActorRef } from '../state/types'
 /**
  * To improve experience with HMR, we use `createSafeContext` as a boundary for hoooks
  */
-export const DiagramActorSafeContext = createContext<DiagramActorRef>(null as any)
+const DiagramActorSafeContext = createContext<DiagramActorRef>(null as any)
 DiagramActorSafeContext.displayName = 'DiagramActorSafeContext'
 
+export const DiagramActorContextProvider = DiagramActorSafeContext.Provider
+
 export const useDiagramActorRef = () => {
   const ctx = useContext(DiagramActorSafeContext)
   if (ctx === null) {

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -1,6 +1,6 @@
+import { cx } from '@likec4/styles/css'
 import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core'
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
-import { clsx } from 'clsx'
 import { LayoutGroup, m } from 'motion/react'
 import { memo } from 'react'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
@@ -42,7 +42,7 @@ const ControlsDefaultLayout: ControlsCustomLayout = ({
       translateY: -10,
     }}
     align="flex-start"
-    className={clsx(
+    className={cx(
       'react-flow__panel',
       css.panel,
       'likec4-top-left-panel',
@@ -53,7 +53,7 @@ const ControlsDefaultLayout: ControlsCustomLayout = ({
     <Stack align="flex-start" gap="xs">
       <LayoutGroup>
         <Group
-          className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
+          className={cx(css.navigationButtons, 'likec4-navigation-webview')}
           gap={'xs'}>
           {burgerMenu}
           {navigationButtons}

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

@@ -24,10 +24,10 @@ export function ElementDetails({
     shallowEqual,
   )
   return (
-    <ElementDetailsActorContext value={actorRef}>
+    <ElementDetailsActorContext.Provider value={actorRef}>
       <ElementDetailsCard
         onClose={onClose}
         {...props} />
-    </ElementDetailsActorContext>
+    </ElementDetailsActorContext.Provider>
   )
 }

package/src/state/DiagramActorProvider.tsx

@@ -6,7 +6,7 @@ import { shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, useEffect } from 'react'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
-import { DiagramActorSafeContext } from '../hooks/safeContext'
+import { DiagramActorContextProvider } from '../hooks/safeContext'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import type { Types } from '../likec4diagram/types'
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
@@ -92,10 +92,10 @@ export function DiagramActorProvider({
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual)
 
   return (
-    <DiagramActorSafeContext value={actorRef}>
+    <DiagramActorContextProvider value={actorRef}>
       <DiagramFeatures overrides={toggledFeatures}>
         {children}
       </DiagramFeatures>
-    </DiagramActorSafeContext>
+    </DiagramActorContextProvider>
   )
 }

package/src/state/diagram-machine.ts

@@ -13,6 +13,7 @@ import {
   getBBoxCenter,
   getParallelStepsPrefix,
   invariant,
+  isStepEdgeId,
   nonexhaustive,
   nonNullable,
 } from '@likec4/core'
@@ -24,7 +25,7 @@ import {
   useStoreApi,
 } from '@xyflow/react'
 import { type EdgeChange, type NodeChange, type Rect, type Viewport, nodeToRect } from '@xyflow/system'
-import { clamp, first, hasAtLeast, prop, reduce } from 'remeda'
+import { clamp, first, hasAtLeast, prop } from 'remeda'
 import {
   type ActorLogicFrom,
   type ActorRef,
@@ -199,6 +200,7 @@ export const diagramMachine = setup({
     'enabled: FitView': ({ context }) => context.features.enableFitView,
     'enabled: FocusMode': ({ context }) => context.features.enableFocusMode,
     'enabled: Readonly': ({ context }) => context.features.enableReadOnly,
+    'enabled: RelationshipDetails': ({ context }) => context.features.enableRelationshipDetails,
     'not readonly': ({ context }) => !context.features.enableReadOnly,
     'is dynamic view': ({ context }) => context.view.__ === 'dynamic',
     'is another view': ({ context, event }) => {
@@ -227,6 +229,10 @@ export const diagramMachine = setup({
       assertEvent(event, 'xyflow.nodeClick')
       return context.xyedges.some(e => e.source === event.node.id || e.target === event.node.id)
     },
+    'click: selected edge': ({ event }) => {
+      assertEvent(event, 'xyflow.edgeClick')
+      return event.edge.selected === true || event.edge.data.active === true
+    },
   },
   actions: {
     'trigger:NavigateTo': (_, _params: { viewId: ViewId }) => {
@@ -767,6 +773,26 @@ export const diagramMachine = setup({
               }),
               target: 'focused',
             },
+            'xyflow.edgeClick': [{
+              guard: and([
+                'is dynamic view',
+                'click: selected edge',
+              ]) as any,
+              actions: raise(({ event }) => ({
+                type: 'walkthrough.start',
+                stepId: event.edge.id as StepEdgeId,
+              })),
+            }, {
+              guard: and([
+                'enabled: RelationshipDetails',
+                'click: selected edge',
+              ]) as any,
+              actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
+                type: 'open.relationshipDetails',
+                viewId: context.view.id,
+                edgeId: event.edge.id as EdgeId,
+              })),
+            }],
           },
         },
         focused: {
@@ -779,18 +805,18 @@ export const diagramMachine = setup({
             spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
             'xyflow:fitFocusedBounds',
           ],
-          exit: enqueueActions(({ enqueue, context }) => {
+          exit: enqueueActions(({ enqueue, context, event }) => {
             enqueue.stopChild('hotkey')
             if (context.viewportBeforeFocus) {
               enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
             } else {
               enqueue({ type: 'xyflow:fitDiagram' })
             }
-            enqueue.assign((s) => ({
-              ...unfocusNodesEdges(s),
+            enqueue.assign({
+              ...unfocusNodesEdges({ context, event }),
               viewportBeforeFocus: null,
               focusedNode: null,
-            }))
+            })
           }),
           on: {
             'xyflow.nodeClick': [
@@ -885,6 +911,23 @@ export const diagramMachine = setup({
                 enqueue('xyflow:fitFocusedBounds')
               }),
             },
+            'xyflow.edgeClick': {
+              actions: [
+                assign(({ event, context }) => {
+                  if (!isStepEdgeId(event.edge.id) || event.edge.id === context.activeWalkthrough?.stepId) {
+                    return {}
+                  }
+                  return {
+                    activeWalkthrough: {
+                      stepId: event.edge.id,
+                      parallelPrefix: getParallelStepsPrefix(event.edge.id),
+                    },
+                  }
+                }),
+                assign(updateActiveWalkthrough),
+                'xyflow:fitFocusedBounds',
+              ],
+            },
             'notations.unhighlight': {
               actions: assign(s => ({
                 ...updateActiveWalkthrough(s),