@likec4/diagram 1.44.0 → 1.45.0

package/dist/likec4diagram/state/utils.js

@@ -1,6 +1,7 @@
 import { BBox } from '@likec4/core/types';
-import { nonNullable } from '@likec4/core/utils';
-import { getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
+import { nonNullable, nonexhaustive } from '@likec4/core/utils';
+import { getViewportForBounds, getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
+import { MinZoom } from '../../base/const.js';
 
 function typedSystem(system) {
   return {
@@ -124,5 +125,44 @@ function getEdgeBounds(edge, store) {
     [edgePosition.targetX, edgePosition.targetY]
   ]);
 }
+function nodeRef(node) {
+  switch (node.type) {
+    case "element":
+    case "compound-element":
+    case "seq-actor":
+      return node.data.modelFqn;
+    case "deployment":
+    case "compound-deployment":
+      return node.data.modelFqn ?? node.data.deploymentFqn;
+    case "seq-parallel":
+    case "view-group":
+      return null;
+    default:
+      nonexhaustive(node);
+  }
+}
+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);
+  return { fromNode, toNode };
+}
+function calcViewportForBounds(context, bounds) {
+  let currentZoom = context.xyflow.getZoom();
+  let {
+    width,
+    height
+  } = context.xystore.getState();
+  const maxZoom = Math.max(currentZoom, 1);
+  return getViewportForBounds(
+    bounds,
+    width,
+    height,
+    MinZoom,
+    maxZoom,
+    context.fitViewPadding
+  );
+}
 
-export { activeSequenceBounds, findDiagramEdge, findDiagramNode, focusedBounds, typedSystem };
+export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, focusedBounds, nodeRef, typedSystem };

package/dist/likec4diagram/types.d.ts

@@ -1,18 +1,17 @@
-import { BBox, DeploymentFqn, DiagramEdge, DiagramEdgeDriftReason, DiagramNode, DiagramNodeDriftReason, ExclusiveUnion, Fqn, IconUrl, NonEmptyReadonlyArray, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { 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' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
-        technology: string | null;
-        description: RichTextOrEmpty;
+    type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
         /**
          * View this node belongs to
          */
         viewId: ViewId;
         isMultiple?: boolean | undefined;
         icon: string | null;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     /**
      * Represents element from logical model
@@ -24,7 +23,6 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
-        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     /**
      * Represents element from deployment model
@@ -33,7 +31,6 @@ export declare namespace Types {
         navigateTo: ViewId | null;
         deploymentFqn: DeploymentFqn;
         modelFqn: Fqn | null;
-        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type SequenceActorNodePort = {
         id: string;
@@ -59,6 +56,7 @@ export declare namespace Types {
         viewId: ViewId;
         depth: number;
         icon?: IconUrl;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type CompoundElementNodeData = Simplify<CompoundNodeData & {
         modelFqn: Fqn;
@@ -67,7 +65,6 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
-        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type CompoundDeploymentNodeData = Simplify<CompoundNodeData & {
         deploymentFqn: DeploymentFqn;
@@ -79,7 +76,6 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
-        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type ViewGroupNodeData = Simplify<CompoundNodeData & {
         isViewGroup: true;
@@ -106,14 +102,13 @@ export declare namespace Types {
         type: Type;
     }>;
     type NodeProps<Type extends NodeType = NodeType> = BaseNodeProps<Node<Type>>;
-    type RelationshipEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath'>> & {
-        notes: RichTextOrEmpty;
+    type RelationshipEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+        notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
-        drifts: NonEmptyReadonlyArray<DiagramEdgeDriftReason> | null;
     }>;
-    type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath'>> & {
-        notes: RichTextOrEmpty;
+    type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+        notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
         labelBBox: BBox;
         controlPoints: XYPosition[] | undefined | null;

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

@@ -7,7 +7,10 @@ const container = css({
   padding: "2",
   margin: "0",
   width: "min-content",
-  height: "min-content"
+  height: "min-content",
+  _print: {
+    display: "none"
+  }
 });
 const icon = css({
   ["--ai-radius"]: "0px",
@@ -43,7 +46,7 @@ const elementNotation = css({
   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // vars: {
-  //   // [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  //   // [stokeFillMix]: `color-mix(in oklab, ${vars.element.stroke} 90%, ${vars.element.fill})`
   // },
   _hover: {
     transition: "all 120ms ease-out",

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,13 +1,13 @@
-import { DefaultMap, nonNullable } from '@likec4/core';
-import { isome } from '@likec4/core/utils';
+import { DefaultMap, nonNullable, BBox } from '@likec4/core';
+import { isome, invariant } from '@likec4/core/utils';
 import { getNodeDimensions } from '@xyflow/system';
 import { produce } from 'immer';
 import { useRef, useMemo } from 'react';
-import { pipe, filter, hasAtLeast, map, forEach } from 'remeda';
+import { pipe, filter, map, hasAtLeast, flatMap, unique, difference, clamp } from 'remeda';
 import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../hooks/safeContext.js';
-import { bezierControlPoints, getNodeIntersection } from '../utils/xyflow.js';
+import { nodeToRect, bezierControlPoints } from '../utils/xyflow.js';
 import { useXYStoreApi } from '../hooks/useXYFlow.js';
 import { vector } from '../utils/vector.js';
 
@@ -45,14 +45,14 @@ class Rect {
   }
   get dimensions() {
     return {
-      width: this.maxX - this.minX,
-      height: this.maxY - this.minY
+      width: Math.round(this.maxX - this.minX),
+      height: Math.round(this.maxY - this.minY)
     };
   }
   get diff() {
     return {
-      x: this.positionAbsolute.x - this.initialX,
-      y: this.positionAbsolute.y - this.initialY
+      x: Math.round(this.positionAbsolute.x - this.initialX),
+      y: Math.round(this.positionAbsolute.y - this.initialY)
     };
   }
   get isMoved() {
@@ -100,6 +100,7 @@ class Leaf extends Rect {
   }
 }
 function makeEdgeModifier(edge, anchor) {
+  const controlPoints = edge.data.controlPoints ?? null;
   return (edgeLookup) => {
     const current = nonNullable(edgeLookup.get(edge.id), `Edge ${edge.id} not found`);
     const { x: dx, y: dy } = anchor.diff;
@@ -109,8 +110,7 @@ function makeEdgeModifier(edge, anchor) {
         type: "replace",
         item: produce(current, (draft) => {
           draft.data.points = edge.data.points;
-          draft.data.controlPoints = edge.data.controlPoints;
-          draft.data.labelXY = edge.data.labelXY;
+          draft.data.controlPoints = controlPoints;
           draft.data.labelBBox = edge.data.labelBBox;
         })
       };
@@ -120,18 +120,12 @@ function makeEdgeModifier(edge, anchor) {
       type: "replace",
       item: produce(current, (draft) => {
         draft.data.points = map(edge.data.points, (pt) => [pt[0] + dx, pt[1] + dy]);
-        if (edge.data.controlPoints) {
-          draft.data.controlPoints = (edge.data.controlPoints ?? []).map((pt) => ({
+        if (controlPoints) {
+          draft.data.controlPoints = controlPoints.map((pt) => ({
             x: pt.x + dx,
             y: pt.y + dy
           }));
         }
-        if (edge.data.labelXY) {
-          draft.data.labelXY = {
-            x: edge.data.labelXY.x + dx,
-            y: edge.data.labelXY.y + dy
-          };
-        }
         if (edge.data.labelBBox) {
           draft.data.labelBBox = {
             x: edge.data.labelBBox.x + dx,
@@ -144,6 +138,56 @@ function makeEdgeModifier(edge, anchor) {
     };
   };
 }
+function makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode) {
+  const controlPoints = edge.data.controlPoints ?? bezierControlPoints(edge.data.points);
+  const anchorV = vector(BBox.center(anchorNode));
+  const staticV = vector(BBox.center(staticNode));
+  const staticToAnchor = anchorV.subtract(staticV);
+  const staticToAnchorLength = staticToAnchor.length();
+  return (edgeLookup) => {
+    const current = nonNullable(edgeLookup.get(edge.id), `Edge ${edge.id} not found`);
+    const { x: dx, y: dy } = movingRect.diff;
+    if (dx === 0 && dy === 0) {
+      return {
+        id: edge.id,
+        type: "replace",
+        item: produce(current, (draft) => {
+          draft.data.points = edge.data.points;
+          draft.data.controlPoints = edge.data.controlPoints;
+          draft.data.labelBBox = edge.data.labelBBox;
+        })
+      };
+    }
+    const d = vector(dx, dy);
+    const relativePoint = (pt) => {
+      const p = vector(pt);
+      const staticToP = p.subtract(staticV);
+      const projLength = staticToP.dot(staticToAnchor);
+      const coeff = clamp(projLength / staticToAnchorLength ** 2, {
+        min: -1,
+        max: 1
+      });
+      const newP = p.add(d.multiply(coeff)).round();
+      return {
+        x: newP.x,
+        y: newP.y
+      };
+    };
+    return {
+      id: edge.id,
+      type: "replace",
+      item: produce(current, (draft) => {
+        draft.data.controlPoints = controlPoints.map(relativePoint);
+        if (edge.data.labelBBox) {
+          draft.data.labelBBox ??= edge.data.labelBBox;
+          const { x, y } = relativePoint(edge.data.labelBBox);
+          draft.data.labelBBox.x = x;
+          draft.data.labelBBox.y = y;
+        }
+      })
+    };
+  };
+}
 function createLayoutConstraints(xyflowApi, editingNodeIds) {
   const { parentLookup, nodeLookup, edges, edgeLookup } = xyflowApi.getState();
   const rects = /* @__PURE__ */ new Map();
@@ -169,6 +213,16 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     }
     return nested;
   });
+  if (hasAtLeast(editingNodeIds, 2)) {
+    const leafsOnly = pipe(
+      editingNodeIds,
+      flatMap((id) => [...nestedOf.get(id)]),
+      unique(),
+      (exclude) => difference(editingNodeIds, exclude)
+    );
+    invariant(hasAtLeast(leafsOnly, 1), "All editing nodes are nested within each other");
+    editingNodeIds = leafsOnly;
+  }
   const ancestorsOfDraggingNodes = new Set(
     editingNodeIds.flatMap((i) => ancestorsOf.get(i))
   );
@@ -188,40 +242,21 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
           parent: rect
         });
       });
-    } else {
-      rects.set(xynode.id, new Leaf(xynode, parent));
+      continue;
     }
+    rects.set(xynode.id, new Leaf(xynode, parent));
   }
   const rectsToUpdate = [...rects.values()];
   const edgeModifiers = /* @__PURE__ */ new Map();
-  for (const r of rectsToUpdate) {
-    if (r instanceof CompoundRect) {
-      continue;
-    }
-    const nested = nestedOf.get(r.id);
-    if (nested.size === 0) {
-      continue;
-    }
-    pipe(
-      edges,
-      filter((e) => !edgeModifiers.has(e) && nested.has(e.source) && nested.has(e.target)),
-      forEach((e) => {
-        edgeModifiers.set(e, makeEdgeModifier(e, r));
-      })
-    );
-  }
   const findMovingAncestor = (nodeId) => {
     return rects.get(nodeId) ?? ancestorsOf.get(nodeId).map((id) => rects.get(id)).find((s) => !!s) ?? null;
   };
   const movingNodes = new Set(editingNodeIds.flatMap((id) => [id, ...nestedOf.get(id)]));
   for (const edge of edges) {
-    if (edgeModifiers.has(edge)) {
-      continue;
-    }
     const isSourceMoving = movingNodes.has(edge.source);
     const isTargetMoving = movingNodes.has(edge.target);
     if (isSourceMoving && isTargetMoving) {
-      let r = rects.get(edge.source) ?? rects.get(edge.target) ?? ancestorsOf.get(edge.source).map((id) => rects.get(id)).find((s) => !!s) ?? ancestorsOf.get(edge.target).map((id) => rects.get(id)).find((s) => !!s);
+      let r = rects.get(edge.source) ?? rects.get(edge.target) ?? findMovingAncestor(edge.source) ?? findMovingAncestor(edge.target);
       if (r) {
         edgeModifiers.set(edge, makeEdgeModifier(edge, r));
       }
@@ -232,61 +267,21 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
       if (!movingRect) {
         continue;
       }
-      const controlPoints = edge.data.controlPoints ?? bezierControlPoints(edge.data.points);
-      const sourceNode = nonNullable(nodeLookup.get(edge.source), `Source node ${edge.source} not found`);
-      const targetNode = nonNullable(nodeLookup.get(edge.target), `Target node ${edge.target} not found`);
-      const sourceIntersectionPoint = vector(getNodeIntersection(sourceNode, targetNode));
-      const targetIntersectionPoint = vector(getNodeIntersection(targetNode, sourceNode));
-      const [anchorV, staticV] = isSourceMoving ? [sourceIntersectionPoint, targetIntersectionPoint] : [targetIntersectionPoint, sourceIntersectionPoint];
-      const staticToAnchor = anchorV.subtract(staticV);
-      const staticToAnchorLength = staticToAnchor.length();
-      edgeModifiers.set(edge, (edgeLookup2) => {
-        const current = nonNullable(edgeLookup2.get(edge.id), `Edge ${edge.id} not found`);
-        const { x: dx, y: dy } = movingRect.diff;
-        if (dx === 0 && dy === 0) {
-          return {
-            id: edge.id,
-            type: "replace",
-            item: produce(current, (draft) => {
-              draft.data.points = edge.data.points;
-              draft.data.controlPoints = edge.data.controlPoints;
-              draft.data.labelXY = edge.data.labelXY;
-              draft.data.labelBBox = edge.data.labelBBox;
-            })
-          };
-        }
-        const d = vector(dx, dy);
-        const relativePoint = (pt) => {
-          const p = vector(pt);
-          const staticToP = p.subtract(staticV);
-          const projLength = staticToP.dot(staticToAnchor);
-          const coeff = Math.min(projLength / staticToAnchorLength ** 2, 1);
-          const newP = p.add(d.multiply(coeff));
-          return {
-            x: Math.round(newP.x),
-            y: Math.round(newP.y)
-          };
-        };
-        return {
-          id: edge.id,
-          type: "replace",
-          item: produce(current, (draft) => {
-            draft.data.controlPoints = controlPoints.map(relativePoint);
-            if (edge.data.labelBBox) {
-              const { x, y } = relativePoint(edge.data.labelBBox);
-              draft.data.labelBBox = {
-                x,
-                y,
-                width: edge.data.labelBBox.width,
-                height: edge.data.labelBBox.height
-              };
-            }
-            if (edge.data.labelXY) {
-              draft.data.labelXY = relativePoint(edge.data.labelXY);
-            }
-          })
-        };
-      });
+      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,
+          movingRect,
+          anchorNode,
+          staticNode
+        )
+      );
       continue;
     }
   }
@@ -335,10 +330,11 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
       }
       return acc;
     }, []);
-    xyflowApi.getState().triggerNodeChanges(nodeUpdates);
-    const changes = _edgeModifiers.map((fm) => fm(edgeLookup));
+    const { edgeLookup: edgeLookup2, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
+    triggerNodeChanges(nodeUpdates);
+    const changes = _edgeModifiers.map((fm) => fm(edgeLookup2));
     if (changes.length > 0) {
-      xyflowApi.getState().triggerEdgeChanges(changes);
+      triggerEdgeChanges(changes);
     }
   }
   let animationFrameId = null;
@@ -349,8 +345,16 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
       for (const id of editingNodeIds) {
-        const rect = nonNullable(rects.get(id));
-        const node = nonNullable(nodeLookup.get(id));
+        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();
@@ -373,10 +377,11 @@ function useLayoutConstraints() {
         const { nodeLookup } = xystore.getState();
         const draggingNodes = pipe(
           Array.from(nodeLookup.values()),
-          filter((n) => n.draggable !== false && (n.dragging === true || n.id === xynode.id || n.selected === true))
+          filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true),
+          map((n) => n.id)
         );
         if (hasAtLeast(draggingNodes, 1)) {
-          solverRef.current = createLayoutConstraints(xystore, map(draggingNodes, (x) => x.id));
+          solverRef.current = createLayoutConstraints(xystore, draggingNodes);
         }
       },
       onNodeDrag: (_event) => {

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

@@ -1,4 +1,4 @@
-import { Queue, whereOperatorAsPredicate, nonNullable, GroupElementKind, RichText, invariant } from '@likec4/core';
+import { Queue, whereOperatorAsPredicate, nonNullable, GroupElementKind, invariant } from '@likec4/core';
 import { pick, hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';
 
@@ -50,7 +50,6 @@ function diagramToXY(opts) {
       position.y -= parent.y;
     }
     const id = ns + node.id;
-    const drifts = node.drifts ?? null;
     const base = {
       id,
       deletable: false,
@@ -78,14 +77,15 @@ function diagramToXY(opts) {
       icon: node.icon ?? "none",
       tags: node.tags ?? null,
       x: node.x,
-      y: node.y
+      y: node.y,
+      drifts: node.drifts ?? null
     };
     const leafNodeData = {
       viewId: view.id,
       id: node.id,
       title: node.title,
       technology: node.technology ?? null,
-      description: RichText.from(node.description),
+      description: node.description ?? null,
       height: node.height,
       width: node.width,
       level: node.level,
@@ -96,7 +96,8 @@ function diagramToXY(opts) {
       tags: node.tags,
       x: node.x,
       y: node.y,
-      isMultiple: node.style?.multiple ?? false
+      isMultiple: node.style?.multiple ?? false,
+      drifts: node.drifts ?? null
     };
     if (node.kind === GroupElementKind) {
       xynodes.push({
@@ -127,8 +128,7 @@ function diagramToXY(opts) {
               ...compoundData,
               ...navigateTo,
               deploymentFqn,
-              modelFqn,
-              drifts
+              modelFqn
             }
           }
         );
@@ -143,8 +143,7 @@ function diagramToXY(opts) {
             data: {
               ...compoundData,
               ...navigateTo,
-              modelFqn,
-              drifts
+              modelFqn
             }
           }
         );
@@ -159,8 +158,7 @@ function diagramToXY(opts) {
               ...leafNodeData,
               ...navigateTo,
               deploymentFqn,
-              modelFqn,
-              drifts
+              modelFqn
             }
           }
         );
@@ -175,8 +173,7 @@ function diagramToXY(opts) {
             data: {
               ...leafNodeData,
               ...navigateTo,
-              modelFqn,
-              drifts
+              modelFqn
             }
           }
         );
@@ -203,11 +200,11 @@ function diagramToXY(opts) {
         id: edge.id,
         label: edge.label,
         technology: edge.technology,
-        notes: RichText.from(edge.notes),
+        notes: edge.notes ?? null,
         navigateTo: edge.navigateTo,
         controlPoints: edge.controlPoints ?? null,
         labelBBox: edge.labelBBox ?? null,
-        labelXY: edge.labelBBox ? { x: edge.labelBBox.x, y: edge.labelBBox.y } : null,
+        labelXY: null,
         points: edge.points,
         color: edge.color ?? "gray",
         line: edge.line ?? "dashed",

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

@@ -1,5 +1,4 @@
 import { nonNullable } from '@likec4/core';
-import { RichText } from '@likec4/core/types';
 import { SeqZIndex, SeqParallelAreaColor } from './const.js';
 
 function sequenceLayoutToXY(view) {
@@ -46,7 +45,8 @@ function toCompoundArea({ id, x, y, width, height, depth }, node, view) {
       y,
       viewId: view.id,
       depth,
-      isViewGroup: true
+      isViewGroup: true,
+      drifts: node.drifts ?? null
     },
     // zIndex: SeqZIndex.compound,
     position: {
@@ -83,9 +83,10 @@ function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
       icon: null,
       width,
       height,
-      description: RichText.EMPTY,
+      description: null,
       viewId: view.id,
-      parallelPrefix
+      parallelPrefix,
+      drifts: null
     },
     zIndex: SeqZIndex.parallel,
     position: {
@@ -126,10 +127,11 @@ function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view)
       tags: actor.tags,
       modelFqn: actor.modelRef ?? null,
       technology: actor.technology ?? null,
-      description: RichText.from(actor.description),
+      description: actor.description ?? null,
       viewHeight: bounds.height,
       viewId: view.id,
-      ports
+      ports,
+      drifts: actor.drifts ?? null
     },
     deletable: false,
     selectable: true,
@@ -149,7 +151,7 @@ function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge) {
       id,
       label: edge.label,
       technology: edge.technology,
-      notes: RichText.from(edge.notes),
+      notes: edge.notes ?? null,
       navigateTo: edge.navigateTo,
       controlPoints: null,
       labelBBox: {
@@ -165,7 +167,8 @@ function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge) {
       dir: "forward",
       head: edge.head ?? "normal",
       tail: edge.tail ?? "none",
-      astPath: edge.astPath
+      astPath: edge.astPath,
+      drifts: edge.drifts ?? null
     },
     selectable: true,
     focusable: false,

package/dist/navigationpanel/NavigationPanel.js

@@ -69,6 +69,9 @@ const NavigationPanel = memo(() => {
             "calc(100vw - 2 * {spacing.md})",
             "calc(100cqw - 2 * {spacing.md})"
           ]
+        },
+        _print: {
+          display: "none"
         }
       },
       children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, { value: actorRef, children: [
@@ -109,6 +112,7 @@ const NavigationPanelPopoverTarget = ({ actor }) => {
     m.div,
     {
       layout: true,
+      layoutDependency: isActiveWalkthrough,
       className: hstack({
         layerStyle: "likec4.panel",
         position: "relative",
@@ -118,7 +122,7 @@ const NavigationPanelPopoverTarget = ({ actor }) => {
         width: "100%"
       }),
       onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave" }),
-      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: isActiveWalkthrough ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {}) })
+      children: /* @__PURE__ */ jsx(AnimatePresence, { children: isActiveWalkthrough ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {}) })
     }
   ) }) });
 };