@likec4/diagram 1.47.0 → 1.49.0

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'>> & {
+    type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'notes' | '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
          */
@@ -49,7 +53,11 @@ export declare namespace Types {
     type SequenceParallelAreaData = Simplify<LeafNodeData & {
         parallelPrefix: string;
     }>;
-    type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'tags' | 'x' | 'y'>> & {
+    type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'notes' | '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

@@ -23,7 +23,7 @@ const card = css({
   userSelect: "none",
   minWidth: 200,
   maxWidth: "calc(100vw - 20px)",
-  backgroundColor: `mantine.colors.body/80`,
+  backgroundColor: `body/80`,
   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   sm: {
@@ -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.1_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.1_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.1_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.d.ts

@@ -1,5 +1,6 @@
 import { NonEmptyArray } from '@likec4/core';
-import { InternalNode as RFInternalNode, OnNodeDrag, XYPosition } from '@xyflow/react';
+import { Dimensions, XYPoint, BBox } from '@likec4/core/geometry';
+import { InternalNode as RFInternalNode, OnNodeDrag } from '@xyflow/react';
 import { XYStoreApi } from '../hooks';
 import { Types } from './types';
 type InternalNode = RFInternalNode<Types.AnyNode>;
@@ -13,18 +14,14 @@ declare abstract class Rect {
     minY: number;
     maxX: number;
     maxY: number;
-    readonly initialX: number;
-    readonly initialY: number;
-    get positionAbsolute(): XYPosition;
-    get initialPositionAbsolute(): XYPosition;
-    set positionAbsolute(pos: XYPosition);
-    get dimensions(): {
-        width: number;
-        height: number;
-    };
-    get diff(): XYPosition;
+    readonly initial: BBox;
+    get positionAbsolute(): XYPoint;
+    set positionAbsolute(pos: XYPoint);
+    get dimensions(): Dimensions;
+    get diff(): XYPoint;
     get isMoved(): boolean;
-    get position(): XYPosition;
+    get isResized(): boolean;
+    get position(): XYPoint;
     protected abstract parent: CompoundRect | null;
     constructor(xynode: InternalNode, parent?: CompoundRect | null);
 }
@@ -41,6 +38,9 @@ export declare function createLayoutConstraints(xyflowApi: XYStoreApi, editingNo
     rects: ReadonlyMap<string, Leaf | CompoundRect>;
     onMove: () => void;
     updateXYFlow: () => void;
+    hasChanges: () => boolean;
+    cancelPending: () => void;
+    flushPending: () => void;
 };
 type LayoutConstraints = {
     onNodeDragStart: OnNodeDrag<Types.Node>;

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,5 +1,6 @@
-import { DefaultMap, nonNullable, BBox } from '@likec4/core';
-import { isome, invariant } from '@likec4/core/utils';
+import { DefaultMap, nonNullable } from '@likec4/core';
+import { vector, BBox } from '@likec4/core/geometry';
+import { invariant, isome } from '@likec4/core/utils';
 import { getNodeDimensions } from '@xyflow/system';
 import { produce } from 'immer';
 import { useRef, useMemo } from 'react';
@@ -9,7 +10,6 @@ import 'fast-equals';
 import { useDiagram } from '../hooks/safeContext.js';
 import { nodeToRect, bezierControlPoints } from '../utils/xyflow.js';
 import { useXYStoreApi } from '../hooks/useXYFlow.js';
-import { vector } from '@likec4/core/geometry';
 
 class Rect {
   static LeftPadding = 42;
@@ -21,23 +21,17 @@ class Rect {
   minY = Infinity;
   maxX = -Infinity;
   maxY = -Infinity;
-  initialX;
-  initialY;
+  // Initial position absolute and dimensions
+  initial;
   get positionAbsolute() {
     return {
       x: this.minX,
       y: this.minY
     };
   }
-  get initialPositionAbsolute() {
-    return {
-      x: this.initialX,
-      y: this.initialY
-    };
-  }
   set positionAbsolute(pos) {
-    const x = Math.round(pos.x);
-    const y = Math.round(pos.y);
+    const x = Math.trunc(pos.x);
+    const y = Math.trunc(pos.y);
     this.maxX += x - this.minX;
     this.maxY += y - this.minY;
     this.minX = x;
@@ -45,18 +39,24 @@ class Rect {
   }
   get dimensions() {
     return {
-      width: Math.round(this.maxX - this.minX),
-      height: Math.round(this.maxY - this.minY)
+      width: Math.ceil(this.maxX - this.minX),
+      height: Math.ceil(this.maxY - this.minY)
     };
   }
   get diff() {
+    const { x, y } = this.positionAbsolute;
     return {
-      x: Math.round(this.positionAbsolute.x - this.initialX),
-      y: Math.round(this.positionAbsolute.y - this.initialY)
+      x: Math.trunc(x - this.initial.x),
+      y: Math.trunc(y - this.initial.y)
     };
   }
   get isMoved() {
-    return this.diff.x !== 0 || this.diff.y !== 0;
+    const diff = this.diff;
+    return diff.x !== 0 || diff.y !== 0;
+  }
+  get isResized() {
+    const dim = this.dimensions;
+    return dim.width !== this.initial.width || dim.height !== this.initial.height;
   }
   // Position relative to parent
   get position() {
@@ -79,8 +79,12 @@ class Rect {
     const { width, height } = getNodeDimensions(xynode);
     this.maxX = this.minX + Math.ceil(width);
     this.maxY = this.minY + Math.ceil(height);
-    this.initialX = this.positionAbsolute.x;
-    this.initialY = this.positionAbsolute.y;
+    this.initial = {
+      x: this.minX,
+      y: this.minY,
+      width: Math.ceil(width),
+      height: Math.ceil(height)
+    };
     if (parent) {
       parent.children.push(this);
     }
@@ -125,14 +129,13 @@ function makeEdgeModifier(edge, anchor) {
             x: pt.x + dx,
             y: pt.y + dy
           }));
+        } else {
+          draft.data.controlPoints = null;
         }
         if (edge.data.labelBBox) {
-          draft.data.labelBBox = {
-            x: edge.data.labelBBox.x + dx,
-            y: edge.data.labelBBox.y + dy,
-            width: edge.data.labelBBox.width,
-            height: edge.data.labelBBox.height
-          };
+          draft.data.labelBBox ??= edge.data.labelBBox;
+          draft.data.labelBBox.x = edge.data.labelBBox.x + dx;
+          draft.data.labelBBox.y = edge.data.labelBBox.y + dy;
         }
       })
     };
@@ -160,14 +163,18 @@ function makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode) {
     }
     const d = vector(dx, dy);
     const relativePoint = (pt) => {
-      const p = vector(pt);
-      const staticToP = p.subtract(staticV);
+      const point = vector(pt);
+      const staticToP = point.subtract(staticV);
       const projLength = staticToP.dot(staticToAnchor);
       const coeff = clamp(projLength / staticToAnchorLength ** 2, {
         min: -1,
         max: 1
       });
-      return p.add(d.multiply(coeff)).round().toObject();
+      const newPoint = point.add(d.multiply(coeff)).trunc();
+      return {
+        x: newPoint.x,
+        y: newPoint.y
+      };
     };
     return {
       id: edge.id,
@@ -245,41 +252,49 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   const rectsToUpdate = [...rects.values()];
   const edgeModifiers = /* @__PURE__ */ new Map();
   const findMovingAncestor = (nodeId) => {
-    return rects.get(nodeId) ?? ancestorsOf.get(nodeId).map((id) => rects.get(id)).find((s) => !!s) ?? null;
+    const r = rects.get(nodeId);
+    if (r) {
+      return r;
+    }
+    for (const parent of ancestorsOf.get(nodeId)) {
+      const rect = rects.get(parent);
+      if (rect) {
+        return rect;
+      }
+    }
+    return null;
   };
   const movingNodes = new Set(editingNodeIds.flatMap((id) => [id, ...nestedOf.get(id)]));
   for (const edge of edges) {
     const isSourceMoving = movingNodes.has(edge.source);
     const isTargetMoving = movingNodes.has(edge.target);
+    if (!isSourceMoving && !isTargetMoving) {
+      continue;
+    }
     if (isSourceMoving && isTargetMoving) {
       let r = rects.get(edge.source) ?? rects.get(edge.target) ?? findMovingAncestor(edge.source) ?? findMovingAncestor(edge.target);
-      if (r) {
-        edgeModifiers.set(edge, makeEdgeModifier(edge, r));
-      }
+      invariant(!!r, "At least one of the edge nodes should have a moving ancestor");
+      edgeModifiers.set(edge, makeEdgeModifier(edge, r));
       continue;
     }
-    if (isSourceMoving !== isTargetMoving) {
-      const movingRect = isSourceMoving ? findMovingAncestor(edge.source) : findMovingAncestor(edge.target);
-      if (!movingRect) {
-        continue;
-      }
-      const [sourceNode, targetNode] = pipe(
-        [edge.source, edge.target],
-        map((id) => nonNullable(nodeLookup.get(id), `Node ${id} not found`)),
-        map(nodeToRect)
-      );
-      const [anchorNode, staticNode] = isSourceMoving ? [sourceNode, targetNode] : [targetNode, sourceNode];
-      edgeModifiers.set(
+    invariant(isSourceMoving !== isTargetMoving, "Logic error");
+    const movingRect = isSourceMoving ? findMovingAncestor(edge.source) : findMovingAncestor(edge.target);
+    invariant(!!movingRect, "Moving endpoint should be found");
+    const [sourceNode, targetNode] = pipe(
+      [edge.source, edge.target],
+      map((id) => nonNullable(nodeLookup.get(id), `Node ${id} not found`)),
+      map(nodeToRect)
+    );
+    const [anchorNode, staticNode] = isSourceMoving ? [sourceNode, targetNode] : [targetNode, sourceNode];
+    edgeModifiers.set(
+      edge,
+      makeRelativeEdgeModifier(
         edge,
-        makeRelativeEdgeModifier(
-          edge,
-          movingRect,
-          anchorNode,
-          staticNode
-        )
-      );
-      continue;
-    }
+        movingRect,
+        anchorNode,
+        staticNode
+      )
+    );
   }
   function applyConstraints(targets) {
     for (const r of targets) {
@@ -307,9 +322,25 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   }
   const _edgeModifiers = [...edgeModifiers.values()];
   function updateXYFlow() {
+    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges, nodeLookup: nodeLookup2 } = xyflowApi.getState();
+    for (const id of editingNodeIds) {
+      const rect = rects.get(id);
+      if (!rect) {
+        console.warn(`Rect not found for id ${id}`);
+        continue;
+      }
+      const node = nodeLookup2.get(id);
+      if (!node) {
+        console.warn(`Node not found for id ${id}`);
+        continue;
+      }
+      rect.positionAbsolute = node.internals.positionAbsolute;
+    }
     applyConstraints(rectsToUpdate);
-    const nodeUpdates = rectsToUpdate.reduce((acc, r) => {
-      acc.push({
+    const nodeUpdates = [];
+    const edgeUpdates = [];
+    for (const r of rectsToUpdate) {
+      nodeUpdates.push({
         id: r.id,
         type: "position",
         dragging: false,
@@ -317,49 +348,52 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
         positionAbsolute: r.positionAbsolute
       });
       if (r instanceof CompoundRect) {
-        acc.push({
+        nodeUpdates.push({
           id: r.id,
           type: "dimensions",
           setAttributes: true,
+          resizing: false,
           dimensions: r.dimensions
         });
       }
-      return acc;
-    }, []);
-    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
-    triggerNodeChanges(nodeUpdates);
-    const changes = _edgeModifiers.map((fm) => fm(edgeLookup));
-    if (changes.length > 0) {
-      triggerEdgeChanges(changes);
+    }
+    if (nodeUpdates.length > 0) {
+      triggerNodeChanges(nodeUpdates);
+    }
+    for (const fm of _edgeModifiers) {
+      edgeUpdates.push(fm(edgeLookup));
+    }
+    if (edgeUpdates.length > 0) {
+      triggerEdgeChanges(edgeUpdates);
     }
   }
   let animationFrameId = null;
-  function onMove() {
-    if (rectsToUpdate.length === 0) {
-      return;
+  function cancelPending() {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
     }
+  }
+  function flushPending() {
+    cancelPending();
+    updateXYFlow();
+  }
+  function onMove() {
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
-      for (const id of editingNodeIds) {
-        const rect = rects.get(id);
-        if (!rect) {
-          console.warn(`Rect not found for id ${id}`);
-          continue;
-        }
-        const node = nodeLookup.get(id);
-        if (!node) {
-          console.warn(`Node not found for id ${id}`);
-          continue;
-        }
-        rect.positionAbsolute = node.internals.positionAbsolute;
-      }
       updateXYFlow();
     });
   }
+  function hasChanges() {
+    return isome(rectsToUpdate, (r) => r.isMoved || r.isResized);
+  }
   return {
     rects,
     onMove,
-    updateXYFlow
+    updateXYFlow,
+    hasChanges,
+    cancelPending,
+    flushPending
   };
 }
 function useLayoutConstraints() {
@@ -369,7 +403,6 @@ function useLayoutConstraints() {
   return useMemo(() => {
     return {
       onNodeDragStart: (_event, xynode) => {
-        diagram.startEditing("node");
         const { nodeLookup } = xystore.getState();
         const draggingNodes = pipe(
           Array.from(nodeLookup.values()),
@@ -377,6 +410,7 @@ function useLayoutConstraints() {
           map((n) => n.id)
         );
         if (hasAtLeast(draggingNodes, 1)) {
+          diagram.startEditing("node");
           solverRef.current = createLayoutConstraints(xystore, draggingNodes);
         }
       },
@@ -384,8 +418,16 @@ function useLayoutConstraints() {
         solverRef.current?.onMove();
       },
       onNodeDragStop: (_event) => {
-        const moved = solverRef.current ? isome(solverRef.current.rects.values(), (r) => r.isMoved) : false;
-        diagram.stopEditing(moved);
+        if (!solverRef.current) {
+          return;
+        }
+        const hasChanges = solverRef.current.hasChanges();
+        if (hasChanges) {
+          solverRef.current.flushPending();
+        } else {
+          solverRef.current.cancelPending();
+        }
+        diagram.stopEditing(hasChanges);
         solverRef.current = void 0;
       }
     };

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,9 @@ function diagramToXY(opts) {
       tags: node.tags ?? null,
       x: node.x,
       y: node.y,
-      drifts: node.drifts ?? null
+      drifts: node.drifts ?? null,
+      notes: node.notes,
+      viewLayoutDir
     };
     const leafNodeData = {
       viewId: view.id,
@@ -94,10 +97,12 @@ function diagramToXY(opts) {
       style: node.style,
       icon: node.icon ?? null,
       tags: node.tags,
+      notes: node.notes,
       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 +223,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,10 @@ 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",
+      // Ignore notes for Compound nodes
+      notes: void 0
     },
     // zIndex: SeqZIndex.compound,
     position: {
@@ -86,7 +88,10 @@ function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
       description: null,
       viewId: view.id,
       parallelPrefix,
-      drifts: null
+      drifts: null,
+      viewLayoutDir: "LR",
+      // Ignore notes for Parallel Area nodes
+      notes: void 0
     },
     zIndex: SeqZIndex.parallel,
     position: {
@@ -130,8 +135,10 @@ function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view)
       description: actor.description ?? null,
       viewHeight: bounds.height,
       viewId: view.id,
+      notes: actor.notes,
       ports,
-      drifts: actor.drifts ?? null
+      drifts: actor.drifts ?? null,
+      viewLayoutDir: "LR"
     },
     deletable: false,
     selectable: true,
@@ -143,7 +150,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 +159,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/navigationpanel/NavigationPanel.js

@@ -8,7 +8,7 @@ import * as m from 'motion/react-m';
 import { memo, useEffect } from 'react';
 import { useDiagram } from '../hooks/safeContext.js';
 import { useCurrentView } from '../hooks/useCurrentView.js';
-import { useOptionalCurrentViewModel } from '../hooks/useCurrentViewModel.js';
+import { useOptionalCurrentViewModel } from '../context/LikeC4ModelContext.js';
 import { useDiagramContext } from '../hooks/useDiagram.js';
 import { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 import { navigationPanelActorLogic } from './actor.js';
@@ -41,7 +41,7 @@ const NavigationPanel = memo(() => {
   }, [actorRef, diagram]);
   useEffect(() => {
     actorRef.send({ type: "update.inputs", inputs: { viewModel, view } });
-  }, [viewModel, view]);
+  }, [actorRef, viewModel, view]);
   return /* @__PURE__ */ jsx(
     VStack,
     {
@@ -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,

package/dist/navigationpanel/NavigationPanelControls.js

@@ -38,7 +38,9 @@ const NavigationPanelControls = memo(() => {
   const actor = useNavigationActor();
   const {
     enableNavigationButtons,
-    enableDynamicViewWalkthrough
+    enableDynamicViewWalkthrough,
+    enableCompareWithLatest,
+    enableSearch
   } = useEnabledFeatures();
   const {
     folders,
@@ -143,7 +145,7 @@ const NavigationPanelControls = memo(() => {
       "actions"
     ),
     enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
-    /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
+    enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
     /* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
   ] });
 });