@likec4/diagram 1.46.4 → 1.48.0

package/dist/likec4diagram/state/machine.state.ready.printing.d.ts

@@ -128,6 +128,10 @@ export declare const printing: {
             type: "click: selected edge";
             params: unknown;
         };
+        "click: active walkthrough step": {
+            type: "click: active walkthrough step";
+            params: unknown;
+        };
     }>, never, EmittedEvents>[];
     on: {
         'media.print.off': {

package/dist/likec4diagram/state/machine.state.ready.printing.js

@@ -1,5 +1,6 @@
 import { log, enqueueActions } from 'xstate';
-import { machine, targetState } from './machine.setup.js';
+import { machine, to, targetState } from './machine.setup.js';
+import { viewBounds } from './utils.js';
 import { returnViewportBefore, cancelFitDiagram, assignViewportBefore, setViewport } from './machine.actions.layout.js';
 
 const printing = machine.createStateConfig({
@@ -8,7 +9,7 @@ const printing = machine.createStateConfig({
     cancelFitDiagram(),
     assignViewportBefore(),
     enqueueActions(({ enqueue, context }) => {
-      const bounds = context.view.bounds;
+      const bounds = viewBounds(context);
       const OFFSET = 16;
       enqueue(
         setViewport({
@@ -27,7 +28,7 @@ const printing = machine.createStateConfig({
   ],
   on: {
     "media.print.off": {
-      target: targetState.idle
+      ...to.idle
     },
     "*": {
       actions: [

package/dist/likec4diagram/state/machine.state.ready.walkthrough.d.ts

@@ -141,6 +141,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents> | ActionFunction<Context, {
                 type: "walkthrough.step";
                 direction: "next" | "previous";
@@ -172,7 +176,129 @@ export declare const walkthrough: {
                 };
             }>, never, never, never, never>)[];
         };
-        'xyflow.edgeClick': {
+        'xyflow.edgeClick': ({
+            guard: "click: active walkthrough step";
+            actions: ( ActionFunction<Context, Events, Events, unknown, Values<{
+                hotkeyActorLogic: {
+                    src: "hotkeyActorLogic";
+                    logic: HotkeyActorLogic;
+                    id: "hotkey";
+                };
+                overlaysActorLogic: {
+                    src: "overlaysActorLogic";
+                    logic: OverlaysActorLogic;
+                    id: "overlays";
+                };
+                searchActorLogic: {
+                    src: "searchActorLogic";
+                    logic: SearchActorLogic;
+                    id: "search";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+                editorActor: {
+                    src: "editorActor";
+                    logic: EditorActorLogic;
+                    id: "editor";
+                };
+            }>, never, Values<{
+                isReady: {
+                    type: "isReady";
+                    params: unknown;
+                };
+                "enabled: Editor": {
+                    type: "enabled: Editor";
+                    params: unknown;
+                };
+                "enabled: FitView": {
+                    type: "enabled: FitView";
+                    params: unknown;
+                };
+                "enabled: FocusMode": {
+                    type: "enabled: FocusMode";
+                    params: unknown;
+                };
+                "enabled: Readonly": {
+                    type: "enabled: Readonly";
+                    params: unknown;
+                };
+                "enabled: RelationshipDetails": {
+                    type: "enabled: RelationshipDetails";
+                    params: unknown;
+                };
+                "enabled: Search": {
+                    type: "enabled: Search";
+                    params: unknown;
+                };
+                "enabled: ElementDetails": {
+                    type: "enabled: ElementDetails";
+                    params: unknown;
+                };
+                "enabled: OpenSource": {
+                    type: "enabled: OpenSource";
+                    params: unknown;
+                };
+                "enabled: DynamicViewWalkthrough": {
+                    type: "enabled: DynamicViewWalkthrough";
+                    params: unknown;
+                };
+                "focus.node: autoUnfocus": {
+                    type: "focus.node: autoUnfocus";
+                    params: unknown;
+                };
+                "enabled: Overlays": {
+                    type: "enabled: Overlays";
+                    params: unknown;
+                };
+                "not readonly": {
+                    type: "not readonly";
+                    params: unknown;
+                };
+                "is dynamic view": {
+                    type: "is dynamic view";
+                    params: unknown;
+                };
+                "is same view": {
+                    type: "is same view";
+                    params: unknown;
+                };
+                "is another view": {
+                    type: "is another view";
+                    params: unknown;
+                };
+                "click: node has modelFqn": {
+                    type: "click: node has modelFqn";
+                    params: unknown;
+                };
+                "click: selected node": {
+                    type: "click: selected node";
+                    params: unknown;
+                };
+                "click: same node": {
+                    type: "click: same node";
+                    params: unknown;
+                };
+                "click: focused node": {
+                    type: "click: focused node";
+                    params: unknown;
+                };
+                "click: node has connections": {
+                    type: "click: node has connections";
+                    params: unknown;
+                };
+                "click: selected edge": {
+                    type: "click: selected edge";
+                    params: unknown;
+                };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
+            }>, never, EmittedEvents> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
+        } | {
             actions: ( ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
                     src: "hotkeyActorLogic";
@@ -288,6 +414,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents> | ActionFunction<Context, {
                 type: "xyflow.edgeClick";
                 edge: import("../types").Types.Edge;
@@ -318,7 +448,8 @@ export declare const walkthrough: {
                     id: "editor";
                 };
             }>, never, never, never, never>)[];
-        };
+            guard?: never;
+        })[];
         'notations.unhighlight': {
             actions: ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
@@ -435,6 +566,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>;
         };
         'tag.unhighlight': {
@@ -553,6 +688,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>;
         };
         'update.view': {
@@ -672,6 +811,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>[];
         };
         'walkthrough.end': {

package/dist/likec4diagram/state/machine.state.ready.walkthrough.js

@@ -1,4 +1,4 @@
-import { isStepEdgeId, getParallelStepsPrefix, invariant } from '@likec4/core';
+import { invariant, isStepEdgeId, getParallelStepsPrefix, nonNullable } from '@likec4/core';
 import { clamp, first } from 'remeda';
 import { assertEvent } from 'xstate';
 import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
@@ -133,7 +133,7 @@ const walkthrough = machine.createStateConfig({
           if (nextStepIndex === stepIndex) {
             return {};
           }
-          const nextStepId = context.xyedges[nextStepIndex].id;
+          const nextStepId = nonNullable(context.xyedges[nextStepIndex]).id;
           return {
             activeWalkthrough: {
               stepId: nextStepId,
@@ -146,25 +146,33 @@ const walkthrough = machine.createStateConfig({
         emitWalkthroughStep()
       ]
     },
-    "xyflow.edgeClick": {
-      actions: [
-        xstateActions_cjsExports.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)
-            }
-          };
-        }),
-        updateActiveWalkthroughState(),
-        fitFocusedBounds(),
-        emitEdgeClick(),
-        emitWalkthroughStep()
-      ]
-    },
+    "xyflow.edgeClick": [
+      {
+        guard: "click: active walkthrough step",
+        actions: [
+          fitFocusedBounds(),
+          emitEdgeClick()
+        ]
+      },
+      {
+        actions: [
+          xstateActions_cjsExports.assign(({ event }) => {
+            const stepId = event.edge.id;
+            invariant(isStepEdgeId(stepId));
+            return {
+              activeWalkthrough: {
+                stepId,
+                parallelPrefix: getParallelStepsPrefix(stepId)
+              }
+            };
+          }),
+          updateActiveWalkthroughState(),
+          fitFocusedBounds(),
+          emitEdgeClick(),
+          emitWalkthroughStep()
+        ]
+      }
+    ],
     "notations.unhighlight": {
       actions: updateActiveWalkthroughState()
     },

package/dist/likec4diagram/state/types.d.ts

@@ -1,5 +1,5 @@
 import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor';
+import { EditorActorRef } from '../../editor/editorActor.states';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { DiagramMachineRef } from './machine';

package/dist/likec4diagram/state/utils.d.ts

@@ -1,14 +1,12 @@
-import { DiagramEdge, DiagramNode, DiagramView, Fqn, BBox } from '@likec4/core/types';
+import { DeploymentFqn, DiagramEdge, DiagramNode, DiagramView, Fqn, BBox } from '@likec4/core/types';
 import { Viewport } from '@xyflow/system';
 import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor';
-import { ViewPaddings } from '../../LikeC4Diagram.props';
+import { EditorActorRef } from '../../editor/editorActor.states';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { Types } from '../types';
 import { Context } from './machine.setup';
 import { DiagramActorRef, NodeWithData } from './types';
-import { DeploymentFqn } from '@likec4/core';
 export declare const findNodeByModelFqn: <T extends NodeWithData>(xynodes: T[], elementFqn: Fqn) => (T & {
     data: {
         modelFqn: Fqn;
@@ -36,6 +34,11 @@ export declare namespace typedSystem {
 }
 export declare function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null;
 export declare function findDiagramEdge(ctx: Context, xyedgeId: string): DiagramEdge | null;
+/**
+ * Returns the bounds of the current view from the context.
+ * If {@link nextView} is provided, returns the bounds of the next view.
+ */
+export declare function viewBounds(ctx: Pick<Context, 'view' | 'dynamicViewVariant'>, nextView?: DiagramView): BBox;
 export declare function focusedBounds(params: {
     context: Context;
 }): {
@@ -48,19 +51,15 @@ export declare function activeSequenceBounds(params: {
     bounds: BBox;
     duration: number;
 };
-export declare function nodeRef(node: Types.Node): DeploymentFqn | Fqn | null;
+export declare function nodeRef(node: Types.Node): Fqn | DeploymentFqn | null;
 export declare function findCorrespondingNode(context: Pick<Context, 'lastOnNavigate' | 'xynodes'>, event: {
     view: DiagramView;
     xynodes: Types.Node[];
 }): {
-    fromNode: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel"> | null | undefined;
-    toNode: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel"> | null | undefined;
+    fromNode: null;
+    toNode: null;
+} | {
+    fromNode: Types.Node;
+    toNode: Types.Node | null;
 };
 export declare function calcViewportForBounds(context: Pick<Context, 'xystore' | 'fitViewPadding'>, bounds: BBox): Viewport;
-export declare function parseAsNumber(value: string | number | undefined): number;
-export declare function parseViewPaddings(paddings: ViewPaddings): {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-};

package/dist/likec4diagram/state/utils.js

@@ -2,6 +2,7 @@ import { BBox } from '@likec4/core/types';
 import { nonNullable, nonexhaustive } from '@likec4/core/utils';
 import { getViewportForBounds, getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
 import { MinZoom } from '../../base/const.js';
+import { pickViewBounds } from '../../utils/view-bounds.js';
 
 const findNodeByModelFqn = (xynodes, elementFqn) => {
   const node = xynodes.find((n) => "modelFqn" in n.data && n.data["modelFqn"] === elementFqn);
@@ -41,6 +42,10 @@ function findDiagramNode(ctx, xynodeId) {
 function findDiagramEdge(ctx, xyedgeId) {
   return ctx.view.edges.find((e) => e.id === xyedgeId) ?? null;
 }
+function viewBounds(ctx, nextView) {
+  const view = nextView ?? ctx.view;
+  return pickViewBounds(view, ctx.dynamicViewVariant);
+}
 function focusedBounds(params) {
   const knownAbsolutes = /* @__PURE__ */ new Map();
   const b = params.context.xynodes.reduce((acc, node) => {
@@ -71,7 +76,7 @@ function focusedBounds(params) {
   });
   if (b.minX === Infinity) {
     return {
-      bounds: params.context.view.bounds
+      bounds: viewBounds(params.context)
     };
   }
   return {
@@ -161,7 +166,10 @@ function findCorrespondingNode(context, event) {
   const fromNodeId = context.lastOnNavigate?.fromNode;
   const fromNode = fromNodeId && context.xynodes.find((n) => n.id === fromNodeId);
   const fromRef = fromNode && nodeRef(fromNode);
-  const toNode = fromRef && event.xynodes.find((n) => nodeRef(n) === fromRef);
+  if (!fromNode || !fromRef) {
+    return { fromNode: null, toNode: null };
+  }
+  const toNode = event.xynodes.find((n) => nodeRef(n) === fromRef) ?? null;
   return { fromNode, toNode };
 }
 function calcViewportForBounds(context, bounds) {
@@ -181,4 +189,4 @@ function calcViewportForBounds(context, bounds) {
   );
 }
 
-export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, nodeRef, typedSystem };
+export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, nodeRef, typedSystem, viewBounds };

package/dist/likec4diagram/types.d.ts

@@ -1,10 +1,14 @@
-import { BBox, DeploymentFqn, DiagramEdge, DiagramNode, DiagramNodeDriftReason, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, NonEmptyReadonlyArray, ViewId } from '@likec4/core/types';
+import { AutoLayoutDirection, BBox, DeploymentFqn, DiagramEdge, DiagramNode, DiagramNodeDriftReason, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, NonEmptyReadonlyArray, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
 import { FunctionComponent } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../base/types';
 export declare namespace Types {
     type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
+        /**
+         * View layout direction, used by DefaultHandles to position node handles
+         */
+        viewLayoutDir?: AutoLayoutDirection | undefined;
         /**
          * View this node belongs to
          */
@@ -50,6 +54,10 @@ export declare namespace Types {
         parallelPrefix: string;
     }>;
     type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'tags' | 'x' | 'y'>> & {
+        /**
+         * View layout direction, used by DefaultHandles to position node handles
+         */
+        viewLayoutDir?: AutoLayoutDirection | undefined;
         /**
          * View this node belongs to
          */

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -72,7 +72,7 @@ css({
   `
 });
 const shapeBadge = css({
-  fontWeight: 500,
+  fontWeight: "medium",
   letterSpacing: "0.2px",
   paddingTop: "0",
   paddingBottom: "0",

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -9,9 +9,9 @@ import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
 import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
-import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
+import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 

package/dist/likec4diagram/useLayoutConstraints.js

@@ -338,7 +338,10 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     if (rectsToUpdate.length === 0) {
       return;
     }
-    animationFrameId ??= requestAnimationFrame(() => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+    }
+    animationFrameId = requestAnimationFrame(() => {
       animationFrameId = null;
       for (const id of editingNodeIds) {
         const rect = rects.get(id);

package/dist/likec4diagram/xyflow-diagram/diagram-view.d.ts

@@ -1,10 +1,18 @@
-import { DiagramView, WhereOperator, BBox } from '@likec4/core';
+import { DiagramView, ViewId, WhereOperator } from '@likec4/core';
 import { Types } from '../types';
+/**
+ * Convert a diagram view to XY flow nodes and edges.
+ * @param opts
+ * @param opts.view - The diagram view to convert.
+ * @param opts.currentViewId - The ID of the current view.
+ * @param opts.where - Optional filter for nodes and edges.
+ * @returns An object containing an array of XY flow nodes and an array of XY flow edges.
+ */
 export declare function diagramToXY(opts: {
-    view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | 'bounds' | '_type'>;
+    view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '_type' | 'autoLayout'>;
+    currentViewId: ViewId | undefined;
     where: WhereOperator | null;
 }): {
-    bounds: BBox;
     xynodes: Types.Node[];
     xyedges: Types.Edge[];
 };

package/dist/likec4diagram/xyflow-diagram/diagram-view.js

@@ -7,6 +7,7 @@ function diagramToXY(opts) {
     view
   } = opts;
   const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  const viewLayoutDir = view.autoLayout?.direction ?? "TB";
   const queue = Queue.from(view.nodes.reduce(
     (acc, node) => {
       nodeLookup.set(node.id, node);
@@ -78,7 +79,8 @@ function diagramToXY(opts) {
       tags: node.tags ?? null,
       x: node.x,
       y: node.y,
-      drifts: node.drifts ?? null
+      drifts: node.drifts ?? null,
+      viewLayoutDir
     };
     const leafNodeData = {
       viewId: view.id,
@@ -97,7 +99,8 @@ function diagramToXY(opts) {
       x: node.x,
       y: node.y,
       isMultiple: node.style?.multiple ?? false,
-      drifts: node.drifts ?? null
+      drifts: node.drifts ?? null,
+      viewLayoutDir
     };
     if (node.kind === GroupElementKind) {
       xynodes.push({
@@ -218,7 +221,6 @@ function diagramToXY(opts) {
     });
   }
   return {
-    bounds: view.bounds,
     xynodes,
     xyedges
   };

package/dist/likec4diagram/xyflow-sequence/sequence-layout.d.ts

@@ -1,7 +1,11 @@
-import { BBox, LayoutedDynamicView } from '@likec4/core/types';
+import { LayoutedDynamicView, ViewId } from '@likec4/core/types';
 import { Types } from '../types';
-export declare function sequenceLayoutToXY(view: LayoutedDynamicView): {
-    bounds: BBox;
+/**
+ * Converts a sequence layout to XY flow nodes and edges.
+ * @param view The next dynamic view which contains the sequence layout.
+ * @param currentViewId The ID of the current view (optional, used to exclude navigation to the current view)
+ */
+export declare function sequenceLayoutToXY(view: LayoutedDynamicView, currentViewId: ViewId | undefined): {
     xynodes: Array<Types.SequenceActorNode | Types.SequenceParallelArea | Types.ViewGroupNode>;
     xyedges: Array<Types.SequenceStepEdge>;
 };

package/dist/likec4diagram/xyflow-sequence/sequence-layout.js

@@ -1,7 +1,7 @@
 import { nonNullable } from '@likec4/core';
 import { SeqZIndex, SeqParallelAreaColor } from './const.js';
 
-function sequenceLayoutToXY(view) {
+function sequenceLayoutToXY(view, currentViewId) {
   const { actors, steps, compounds, parallelAreas, bounds } = view.sequenceLayout;
   const xynodes = [];
   const xyedges = [];
@@ -22,10 +22,9 @@ function sequenceLayoutToXY(view) {
     if (!edge) {
       throw new Error(`Edge ${step.id} not found`);
     }
-    xyedges.push(toSeqStepEdge(step, edge));
+    xyedges.push(toSeqStepEdge(step, edge, currentViewId ?? view.id));
   }
   return {
-    bounds,
     xynodes,
     xyedges
   };
@@ -46,7 +45,8 @@ function toCompoundArea({ id, x, y, width, height, depth }, node, view) {
       viewId: view.id,
       depth,
       isViewGroup: true,
-      drifts: node.drifts ?? null
+      drifts: node.drifts ?? null,
+      viewLayoutDir: "LR"
     },
     // zIndex: SeqZIndex.compound,
     position: {
@@ -86,7 +86,8 @@ function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
       description: null,
       viewId: view.id,
       parallelPrefix,
-      drifts: null
+      drifts: null,
+      viewLayoutDir: "LR"
     },
     zIndex: SeqZIndex.parallel,
     position: {
@@ -131,7 +132,8 @@ function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view)
       viewHeight: bounds.height,
       viewId: view.id,
       ports,
-      drifts: actor.drifts ?? null
+      drifts: actor.drifts ?? null,
+      viewLayoutDir: "LR"
     },
     deletable: false,
     selectable: true,
@@ -143,7 +145,7 @@ function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view)
     initialHeight: height
   };
 }
-function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge) {
+function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge, currentViewId) {
   return {
     id,
     type: "seq-step",
@@ -152,7 +154,7 @@ function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge) {
       label: edge.label,
       technology: edge.technology,
       notes: edge.notes ?? null,
-      navigateTo: edge.navigateTo,
+      navigateTo: edge.navigateTo !== currentViewId ? edge.navigateTo : null,
       controlPoints: null,
       labelBBox: {
         x: 0,

package/dist/likec4diagram/xyflow-sequence/utils.d.ts

@@ -11,4 +11,4 @@ export declare function findParallelRects(steps: Array<Step>): Array<ParallelRec
  * @returns an array of compounds where each compound is a node in the sequence view
  * that is an ancestor of one of the actors
  */
-export declare function buildCompounds(actors: Array<DiagramNode>, nodes: Array<DiagramNode>): Array<Compound>;
+export declare function buildCompounds(actors: ReadonlyArray<DiagramNode>, nodes: ReadonlyArray<DiagramNode>): Array<Compound>;

package/dist/navigationpanel/NavigationPanel.js

@@ -81,8 +81,9 @@ const NavigationPanel = memo(() => {
   );
 });
 NavigationPanel.displayName = "NavigationPanel";
+const stateHasActiveTag = (state) => state.hasTag("active");
 const NavigationPanelImpl = ({ actor }) => {
-  const opened = useSelector(actor, (s) => s.hasTag("active"));
+  const opened = useSelector(actor, stateHasActiveTag);
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
     Popover,