@likec4/diagram 1.44.0 → 1.46.0

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,15 +1,15 @@
-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';
+import { vector } from '@likec4/core/geometry';
 
 class Rect {
   static LeftPadding = 42;
@@ -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,8 +138,54 @@ 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
+      });
+      return p.add(d.multiply(coeff)).round().toObject();
+    };
+    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 { parentLookup, nodeLookup, edges } = xyflowApi.getState();
   const rects = /* @__PURE__ */ new Map();
   const ancestorsOf = new DefaultMap((nodeId) => {
     const xynode = nodeLookup.get(nodeId);
@@ -169,6 +209,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 +238,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 +263,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 +326,11 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
       }
       return acc;
     }, []);
-    xyflowApi.getState().triggerNodeChanges(nodeUpdates);
+    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
+    triggerNodeChanges(nodeUpdates);
     const changes = _edgeModifiers.map((fm) => fm(edgeLookup));
     if (changes.length > 0) {
-      xyflowApi.getState().triggerEdgeChanges(changes);
+      triggerEdgeChanges(changes);
     }
   }
   let animationFrameId = null;
@@ -349,8 +341,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 +373,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

@@ -2,12 +2,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { VStack } from '@likec4/styles/jsx';
 import { hstack } from '@likec4/styles/patterns';
 import { Popover, PopoverTarget } from '@mantine/core';
-import { useUpdateEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { LayoutGroup, AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
 import { memo, useEffect } from 'react';
-import { useDiagramActorRef } from '../hooks/safeContext.js';
+import { useDiagram } from '../hooks/safeContext.js';
 import { useCurrentView } from '../hooks/useCurrentView.js';
 import { useOptionalCurrentViewModel } from '../hooks/useCurrentViewModel.js';
 import { useDiagramContext } from '../hooks/useDiagram.js';
@@ -22,7 +21,7 @@ import { EditorPanel } from './editorpanel/EditorPanel.js';
 import { ActiveWalkthroughControls } from './walkthrough/ActiveWalkthroughControls.js';
 
 const NavigationPanel = memo(() => {
-  const diagramActor = useDiagramActorRef();
+  const diagram = useDiagram();
   const view = useCurrentView();
   const viewModel = useOptionalCurrentViewModel();
   const actorRef = useActorRef(
@@ -36,13 +35,11 @@ const NavigationPanel = memo(() => {
   );
   useEffect(() => {
     const subscription = actorRef.on("navigateTo", (event) => {
-      if (diagramActor.getSnapshot().context.view.id !== event.viewId) {
-        diagramActor.send({ type: "navigate.to", viewId: event.viewId });
-      }
+      diagram.navigateTo(event.viewId);
     });
     return () => subscription.unsubscribe();
-  }, [actorRef, diagramActor]);
-  useUpdateEffect(() => {
+  }, [actorRef, diagram]);
+  useEffect(() => {
     actorRef.send({ type: "update.inputs", inputs: { viewModel, view } });
   }, [viewModel, view]);
   return /* @__PURE__ */ jsx(
@@ -69,6 +66,9 @@ const NavigationPanel = memo(() => {
             "calc(100vw - 2 * {spacing.md})",
             "calc(100cqw - 2 * {spacing.md})"
           ]
+        },
+        _print: {
+          display: "none"
         }
       },
       children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, { value: actorRef, children: [
@@ -92,7 +92,7 @@ const NavigationPanelImpl = ({ actor }) => {
       },
       opened,
       position: "bottom-start",
-      trapFocus: true,
+      trapFocus: opened,
       ...portalProps,
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
       onDismiss: () => actor.send({ type: "dropdown.dismiss" }),
@@ -109,6 +109,7 @@ const NavigationPanelPopoverTarget = ({ actor }) => {
     m.div,
     {
       layout: true,
+      layoutDependency: isActiveWalkthrough,
       className: hstack({
         layerStyle: "likec4.panel",
         position: "relative",
@@ -118,7 +119,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, {}) })
     }
   ) }) });
 };

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -17,13 +17,13 @@ import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
 import { useNavigationActor, useNavigationActorSnapshot, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
 import { useOnDiagramEvent } from '../hooks/useDiagram.js';
-import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
-import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
-import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
+import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
+import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
 
 const scopedKeydownHandler = createScopedKeydownHandler({
   siblingSelector: "[data-likec4-focusable]",

package/dist/navigationpanel/_common.js

@@ -4,7 +4,7 @@ import { navigationPanelActionIcon } from '@likec4/styles/recipes';
 import { ActionIcon, ThemeIcon, Tooltip as Tooltip$1, Breadcrumbs } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",