@likec4/diagram 1.42.1 → 1.44.0

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,26 +1,40 @@
-import { nonNullable } from '@likec4/core';
+import { DefaultMap, nonNullable } from '@likec4/core';
+import { isome } from '@likec4/core/utils';
 import { getNodeDimensions } from '@xyflow/system';
+import { produce } from 'immer';
 import { useRef, useMemo } from 'react';
-import { pipe, filter, hasAtLeast, map } from 'remeda';
-import { useDiagram } from '../hooks/useDiagram.js';
+import { pipe, filter, hasAtLeast, map, forEach } from 'remeda';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../hooks/safeContext.js';
+import { bezierControlPoints, getNodeIntersection } from '../utils/xyflow.js';
 import { useXYStoreApi } from '../hooks/useXYFlow.js';
+import { vector } from '../utils/vector.js';
 
 class Rect {
-  static LeftPadding = 40;
-  static RightPadding = 40;
-  static TopPadding = 55;
-  static BottomPadding = 40;
+  static LeftPadding = 42;
+  static RightPadding = 42;
+  static TopPadding = 60;
+  static BottomPadding = 42;
   id;
   minX = Infinity;
   minY = Infinity;
   maxX = -Infinity;
   maxY = -Infinity;
+  initialX;
+  initialY;
   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);
@@ -35,6 +49,15 @@ class Rect {
       height: this.maxY - this.minY
     };
   }
+  get diff() {
+    return {
+      x: this.positionAbsolute.x - this.initialX,
+      y: this.positionAbsolute.y - this.initialY
+    };
+  }
+  get isMoved() {
+    return this.diff.x !== 0 || this.diff.y !== 0;
+  }
   // Position relative to parent
   get position() {
     const positionAbsolute = this.positionAbsolute;
@@ -56,6 +79,8 @@ 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;
     if (parent) {
       parent.children.push(this);
     }
@@ -74,22 +99,78 @@ class Leaf extends Rect {
     this.parent = parent;
   }
 }
+function makeEdgeModifier(edge, anchor) {
+  return (edgeLookup) => {
+    const current = nonNullable(edgeLookup.get(edge.id), `Edge ${edge.id} not found`);
+    const { x: dx, y: dy } = anchor.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;
+        })
+      };
+    }
+    return {
+      id: edge.id,
+      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) => ({
+            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,
+            y: edge.data.labelBBox.y + dy,
+            width: edge.data.labelBBox.width,
+            height: edge.data.labelBBox.height
+          };
+        }
+      })
+    };
+  };
+}
 function createLayoutConstraints(xyflowApi, editingNodeIds) {
-  const { parentLookup, nodeLookup } = xyflowApi.getState();
+  const { parentLookup, nodeLookup, edges, edgeLookup } = xyflowApi.getState();
   const rects = /* @__PURE__ */ new Map();
-  const ancestorsOf = (nodeId) => {
-    const ancestors = [];
+  const ancestorsOf = new DefaultMap((nodeId) => {
     const xynode = nodeLookup.get(nodeId);
     let parent = xynode?.parentId;
-    let parentNode;
-    while (parent && (parentNode = nodeLookup.get(parent))) {
-      ancestors.push(parentNode.id);
-      parent = parentNode.parentId;
+    if (!parent) {
+      return [];
     }
-    return ancestors;
-  };
+    return [parent, ...ancestorsOf.get(parent)];
+  });
+  const nestedOf = new DefaultMap((nodeId) => {
+    const children = parentLookup.get(nodeId);
+    if (!children || children.size === 0) {
+      return /* @__PURE__ */ new Set();
+    }
+    const nested = /* @__PURE__ */ new Set();
+    for (const child of children.values()) {
+      nested.add(child.id);
+      for (const desc of nestedOf.get(child.id)) {
+        nested.add(desc);
+      }
+    }
+    return nested;
+  });
   const ancestorsOfDraggingNodes = new Set(
-    editingNodeIds.flatMap(ancestorsOf)
+    editingNodeIds.flatMap((i) => ancestorsOf.get(i))
   );
   const traverse = [...nodeLookup.values()].flatMap(
     (x) => !x.parentId ? { xynode: x, parent: null } : []
@@ -97,7 +178,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift();
     const isEditing = editingNodeIds.includes(xynode.id);
-    const shouldTraverse = !isEditing && xynode.type !== "element" && xynode.type !== "deployment" && ancestorsOfDraggingNodes.has(xynode.id);
+    const shouldTraverse = !isEditing && ancestorsOfDraggingNodes.has(xynode.id);
     if (shouldTraverse) {
       const rect = new CompoundRect(xynode, parent);
       rects.set(xynode.id, rect);
@@ -112,7 +193,103 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     }
   }
   const rectsToUpdate = [...rects.values()];
-  applyConstraints(rectsToUpdate);
+  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);
+      if (r) {
+        edgeModifiers.set(edge, makeEdgeModifier(edge, r));
+      }
+      continue;
+    }
+    if (isSourceMoving !== isTargetMoving) {
+      const movingRect = isSourceMoving ? findMovingAncestor(edge.source) : findMovingAncestor(edge.target);
+      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);
+            }
+          })
+        };
+      });
+      continue;
+    }
+  }
   function applyConstraints(targets) {
     for (const r of targets) {
       if (!(r instanceof CompoundRect)) {
@@ -137,28 +314,32 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
       r.maxY = childrenBB.maxY + Rect.BottomPadding;
     }
   }
-  function updateXYFlowNodes() {
+  const _edgeModifiers = [...edgeModifiers.values()];
+  function updateXYFlow() {
     applyConstraints(rectsToUpdate);
-    xyflowApi.getState().triggerNodeChanges(
-      rectsToUpdate.reduce((acc, r) => {
+    const nodeUpdates = rectsToUpdate.reduce((acc, r) => {
+      acc.push({
+        id: r.id,
+        type: "position",
+        dragging: false,
+        position: r.position,
+        positionAbsolute: r.positionAbsolute
+      });
+      if (r instanceof CompoundRect) {
         acc.push({
           id: r.id,
-          type: "position",
-          dragging: false,
-          position: r.position,
-          positionAbsolute: r.positionAbsolute
+          type: "dimensions",
+          setAttributes: true,
+          dimensions: r.dimensions
         });
-        if (r instanceof CompoundRect) {
-          acc.push({
-            id: r.id,
-            type: "dimensions",
-            setAttributes: true,
-            dimensions: r.dimensions
-          });
-        }
-        return acc;
-      }, [])
-    );
+      }
+      return acc;
+    }, []);
+    xyflowApi.getState().triggerNodeChanges(nodeUpdates);
+    const changes = _edgeModifiers.map((fm) => fm(edgeLookup));
+    if (changes.length > 0) {
+      xyflowApi.getState().triggerEdgeChanges(changes);
+    }
   }
   let animationFrameId = null;
   function onMove() {
@@ -167,19 +348,18 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     }
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
-      const { nodeLookup: nodeLookup2 } = xyflowApi.getState();
       for (const id of editingNodeIds) {
         const rect = nonNullable(rects.get(id));
-        const node = nonNullable(nodeLookup2.get(id));
+        const node = nonNullable(nodeLookup.get(id));
         rect.positionAbsolute = node.internals.positionAbsolute;
       }
-      updateXYFlowNodes();
+      updateXYFlow();
     });
   }
   return {
     rects,
-    updateXYFlowNodes,
-    onMove
+    onMove,
+    updateXYFlow
   };
 }
 function useLayoutConstraints() {
@@ -187,12 +367,9 @@ function useLayoutConstraints() {
   const diagram = useDiagram();
   const solverRef = useRef(void 0);
   return useMemo(() => {
-    let wasPending = false;
-    const initial = { x: 0, y: 0 };
-    let moved = false;
     return {
       onNodeDragStart: (_event, xynode) => {
-        wasPending = diagram.cancelSaveManualLayout();
+        diagram.startEditing("node");
         const { nodeLookup } = xystore.getState();
         const draggingNodes = pipe(
           Array.from(nodeLookup.values()),
@@ -201,19 +378,13 @@ function useLayoutConstraints() {
         if (hasAtLeast(draggingNodes, 1)) {
           solverRef.current = createLayoutConstraints(xystore, map(draggingNodes, (x) => x.id));
         }
-        initial.x = _event.clientX;
-        initial.y = _event.clientY;
-        moved = false;
       },
       onNodeDrag: (_event) => {
-        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
         solverRef.current?.onMove();
       },
       onNodeDragStop: (_event) => {
-        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
-        if (wasPending || moved) {
-          diagram.scheduleSaveManualLayout();
-        }
+        const moved = solverRef.current ? isome(solverRef.current.rects.values(), (r) => r.isMoved) : false;
+        diagram.stopEditing(moved);
         solverRef.current = void 0;
       }
     };

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

@@ -3,7 +3,6 @@ import { Types } from '../types';
 export declare function diagramToXY(opts: {
     view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | 'bounds' | '_type'>;
     where: WhereOperator | null;
-    nodesSelectable: boolean;
 }): {
     bounds: BBox;
     xynodes: Types.Node[];

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

@@ -4,8 +4,7 @@ import { ZIndexes } from '../../base/const.js';
 
 function diagramToXY(opts) {
   const {
-    view,
-    nodesSelectable: selectable
+    view
   } = opts;
   const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
   const queue = Queue.from(view.nodes.reduce(
@@ -51,10 +50,9 @@ function diagramToXY(opts) {
       position.y -= parent.y;
     }
     const id = ns + node.id;
+    const drifts = node.drifts ?? null;
     const base = {
       id,
-      selectable: selectable && node.kind !== GroupElementKind,
-      focusable: selectable && node.kind !== GroupElementKind,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -108,7 +106,7 @@ function diagramToXY(opts) {
           isViewGroup: true,
           ...compoundData
         },
-        dragHandle: ".likec4-compound-title"
+        dragHandle: ".likec4-compound-title-container"
       });
       continue;
     }
@@ -129,9 +127,9 @@ function diagramToXY(opts) {
               ...compoundData,
               ...navigateTo,
               deploymentFqn,
-              modelFqn
-            },
-            dragHandle: ".likec4-compound-title"
+              modelFqn,
+              drifts
+            }
           }
         );
         break;
@@ -145,9 +143,9 @@ function diagramToXY(opts) {
             data: {
               ...compoundData,
               ...navigateTo,
-              modelFqn
-            },
-            dragHandle: ".likec4-compound-title"
+              modelFqn,
+              drifts
+            }
           }
         );
         break;
@@ -161,7 +159,8 @@ function diagramToXY(opts) {
               ...leafNodeData,
               ...navigateTo,
               deploymentFqn,
-              modelFqn
+              modelFqn,
+              drifts
             }
           }
         );
@@ -176,7 +175,8 @@ function diagramToXY(opts) {
             data: {
               ...leafNodeData,
               ...navigateTo,
-              modelFqn
+              modelFqn,
+              drifts
             }
           }
         );
@@ -197,7 +197,6 @@ function diagramToXY(opts) {
       source: ns + source,
       target: ns + target,
       zIndex: ZIndexes.Edge,
-      selectable,
       hidden: !visiblePredicate(edge),
       deletable: false,
       data: {
@@ -215,7 +214,8 @@ function diagramToXY(opts) {
         dir: edge.dir ?? "forward",
         head: edge.head ?? "normal",
         tail: edge.tail ?? "none",
-        astPath: edge.astPath
+        astPath: edge.astPath,
+        drifts: edge.drifts ?? null
       },
       interactionWidth: 20
     });

package/dist/navigationpanel/NavigationPanel.js

@@ -8,7 +8,8 @@ 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 { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
+import { useCurrentView } from '../hooks/useCurrentView.js';
+import { useOptionalCurrentViewModel } from '../hooks/useCurrentViewModel.js';
 import { useDiagramContext } from '../hooks/useDiagram.js';
 import { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 import { navigationPanelActorLogic } from './actor.js';
@@ -16,16 +17,19 @@ import { NavigationPanelActorContextProvider } from './hooks.js';
 import { NavigationPanelControls } from './NavigationPanelControls.js';
 import { NavigationPanelDropdown } from './NavigationPanelDropdown.js';
 import { WalkthroughPanel } from './walkthrough/WalkthroughPanel.js';
+import { ComparePanel } from './comparepanel/ComparePanel.js';
 import { EditorPanel } from './editorpanel/EditorPanel.js';
 import { ActiveWalkthroughControls } from './walkthrough/ActiveWalkthroughControls.js';
 
 const NavigationPanel = memo(() => {
   const diagramActor = useDiagramActorRef();
-  const viewModel = useCurrentViewModel();
+  const view = useCurrentView();
+  const viewModel = useOptionalCurrentViewModel();
   const actorRef = useActorRef(
     navigationPanelActorLogic,
     {
       input: {
+        view,
         viewModel
       }
     }
@@ -39,8 +43,8 @@ const NavigationPanel = memo(() => {
     return () => subscription.unsubscribe();
   }, [actorRef, diagramActor]);
   useUpdateEffect(() => {
-    actorRef.send({ type: "update.inputs", inputs: { viewModel } });
-  }, [viewModel]);
+    actorRef.send({ type: "update.inputs", inputs: { viewModel, view } });
+  }, [viewModel, view]);
   return /* @__PURE__ */ jsx(
     VStack,
     {
@@ -69,8 +73,9 @@ const NavigationPanel = memo(() => {
       },
       children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, { value: actorRef, children: [
         /* @__PURE__ */ jsx(NavigationPanelImpl, { actor: actorRef }),
-        /* @__PURE__ */ jsx(EditorPanel, {}),
-        /* @__PURE__ */ jsx(WalkthroughPanel, {})
+        /* @__PURE__ */ jsx(ComparePanel, {}),
+        /* @__PURE__ */ jsx(WalkthroughPanel, {}),
+        /* @__PURE__ */ jsx(EditorPanel, {})
       ] })
     }
   );
@@ -109,7 +114,6 @@ const NavigationPanelPopoverTarget = ({ actor }) => {
         position: "relative",
         gap: "xs",
         cursor: "pointer",
-        paddingRight: "md",
         pointerEvents: "all",
         width: "100%"
       }),

package/dist/navigationpanel/NavigationPanelControls.d.ts

@@ -1 +1,2 @@
-export declare const NavigationPanelControls: () => import("react/jsx-runtime").JSX.Element;
+import { MemoExoticComponent } from 'react';
+export declare const NavigationPanelControls: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/navigationpanel/NavigationPanelControls.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { extractViewTitleFromPath } from '@likec4/core/model';
 import { cx, css } from '@likec4/styles/css';
 import { hstack } from '@likec4/styles/patterns';
 import { UnstyledButton } from '@mantine/core';
@@ -6,34 +7,36 @@ import { useSelector } from '@xstate/react';
 import { deepEqual } from 'fast-equals';
 import { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
+import { memo } from 'react';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { BreadcrumbsSeparator } from './_common.js';
 import { useNavigationActor } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
 import { BurgerButton } from './controls/BurgerButton.js';
 import { NavigationButtons } from './controls/NavigationButtons.js';
-import { ViewDetailsCard } from './controls/ViewDetailsCard.js';
+import { DetailsControls } from './controls/DetailsControls.js';
 import { OpenSource } from './controls/OpenSource.js';
 import { ToggleReadonly } from './controls/ToggleReadonly.js';
 import { DynamicViewControls } from './walkthrough/DynamicViewControls.js';
 import { SearchControl } from './controls/SearchControl.js';
+import { LayoutWarning } from './controls/LayoutWarning.js';
 
 const selectBreadcrumbs = ({ context }) => {
-  const folder = context.viewModel.folder;
+  const view = context.view;
+  const folder = context.viewModel?.folder;
   return {
-    folders: folder.isRoot ? [] : folder.breadcrumbs.map((s) => ({
+    folders: !folder || folder.isRoot ? [] : folder.breadcrumbs.map((s) => ({
       folderPath: s.path,
       title: s.title
     })),
-    viewId: context.viewModel.id,
-    viewTitle: context.viewModel.titleOrUntitled,
-    isDynamicView: context.viewModel.isDynamicView()
+    viewId: view.id,
+    viewTitle: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
+    isDynamicView: (context.viewModel?._type ?? view._type) === "dynamic"
   };
 };
-const NavigationPanelControls = () => {
+const NavigationPanelControls = memo(() => {
   const actor = useNavigationActor();
   const {
-    enableSearch,
     enableNavigationButtons,
     enableDynamicViewWalkthrough
   } = useEnabledFeatures();
@@ -59,6 +62,9 @@ const NavigationPanelControls = () => {
             }
           })
         ),
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
         title,
         onMouseEnter: () => actor.send({ type: "breadcrumbs.mouseEnter.folder", folderPath }),
         onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave.folder", folderPath }),
@@ -76,6 +82,9 @@ const NavigationPanelControls = () => {
     UnstyledButton,
     {
       component: m.button,
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
       className: cx(
         "mantine-active",
         breadcrumbTitle({ truncate: true }),
@@ -94,7 +103,7 @@ const NavigationPanelControls = () => {
     },
     "view-title"
   );
-  return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, children: [
+  return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, mode: "popLayout", children: [
     /* @__PURE__ */ jsx(BurgerButton, {}, "burger-button"),
     enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
     /* @__PURE__ */ jsxs(
@@ -126,12 +135,7 @@ const NavigationPanelControls = () => {
           }
         }),
         children: [
-          /* @__PURE__ */ jsx(
-            ViewDetailsCard,
-            {
-              onOpen: () => actor.closeDropdown()
-            }
-          ),
+          /* @__PURE__ */ jsx(DetailsControls, { onOpen: () => actor.closeDropdown() }),
           /* @__PURE__ */ jsx(OpenSource, {}),
           /* @__PURE__ */ jsx(ToggleReadonly, {})
         ]
@@ -139,8 +143,10 @@ const NavigationPanelControls = () => {
       "actions"
     ),
     enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
-    enableSearch && /* @__PURE__ */ jsx(SearchControl, {}, "search-control")
+    /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
+    /* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
   ] });
-};
+});
+NavigationPanelControls.displayName = "NavigationPanelControls";
 
 export { NavigationPanelControls };

package/dist/navigationpanel/NavigationPanelDropdown.d.ts

@@ -1 +1,2 @@
-export declare function NavigationPanelDropdown(): import("react/jsx-runtime").JSX.Element;
+import { MemoExoticComponent } from 'react';
+export declare const NavigationPanelDropdown: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;