@likec4/diagram 1.43.0 → 1.44.0

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -1,29 +1,29 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { normalizeViewPath, VIEW_FOLDERS_SEPARATOR } from '@likec4/core/model';
+import { VIEW_FOLDERS_SEPARATOR, normalizeViewPath } from '@likec4/core/model';
 import { ifilter, ifirst, toArray, compareNaturalHierarchically, nonexhaustive } from '@likec4/core/utils';
 import { cx, css } from '@likec4/styles/css';
 import { HStack, VStack, Box } from '@likec4/styles/jsx';
 import { vstack, hstack } from '@likec4/styles/patterns';
-import { PopoverDropdown, createScopedKeydownHandler, ScrollAreaAutosize, Input, rem, Button, Divider, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
+import { PopoverDropdown, ScrollAreaAutosize, Input, createScopedKeydownHandler, rem, Button, Divider, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
 import { useThrottledCallback, useUncontrolled } from '@mantine/hooks';
 import { useMountEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
-import { deepEqual } from 'fast-equals';
-import { useRef } from 'react';
+import { shallowEqual, deepEqual } from 'fast-equals';
+import { memo, useDeferredValue, useState, useEffect, useRef } from 'react';
 import { isEmpty, pipe, sort, isArray } from 'remeda';
 import { NavigationLink } from '../components/NavigationLink.js';
 import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
 import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
-import { useNavigationActor, useNavigationActorContext, useNavigationActorRef } from './hooks.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.1.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.1.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.1.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.1.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.1.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.1.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.1.1/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.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';
 
 const scopedKeydownHandler = createScopedKeydownHandler({
   siblingSelector: "[data-likec4-focusable]",
@@ -32,19 +32,24 @@ const scopedKeydownHandler = createScopedKeydownHandler({
   loop: true,
   orientation: "vertical"
 });
-function NavigationPanelDropdown() {
+function hasSearchQuerySelector(s) {
+  return s.context.searchQuery.trim().length >= 2;
+}
+const NavigationPanelDropdown = memo(() => {
   const actor = useNavigationActor();
-  const searchQuery = useSelector(actor.actorRef, (s) => s.context.searchQuery);
+  const hasSearchQuery = useNavigationActorSnapshot(hasSearchQuerySelector);
   useOnDiagramEvent("paneClick", () => {
     actor.closeDropdown();
   });
   useOnDiagramEvent("nodeClick", () => {
     actor.closeDropdown();
   });
+  useOnDiagramEvent("edgeClick", () => {
+    actor.closeDropdown();
+  });
   const setSearchQuery = useThrottledCallback((value) => {
     actor.send({ type: "searchQuery.change", value });
   }, 250);
-  const hasSearchQuery = searchQuery.trim().length >= 2;
   return /* @__PURE__ */ jsxs(
     PopoverDropdown,
     {
@@ -64,10 +69,8 @@ function NavigationPanelDropdown() {
         /* @__PURE__ */ jsx(HStack, { gap: "xs", children: /* @__PURE__ */ jsx(
           SearchInput,
           {
-            value: searchQuery,
-            onChange: setSearchQuery,
-            "data-likec4-focusable": true,
-            onKeyDown: scopedKeydownHandler
+            defaultValue: actor.actorRef.getSnapshot().context.searchQuery,
+            onChange: setSearchQuery
           }
         ) }),
         /* @__PURE__ */ jsx(
@@ -89,32 +92,44 @@ function NavigationPanelDropdown() {
                 overscrollBehavior: "none"
               }
             },
-            children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, { searchQuery: normalizeViewPath(searchQuery).toLowerCase() }) : /* @__PURE__ */ jsx(FolderColumns, {})
+            children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, {}) : /* @__PURE__ */ jsx(FolderColumns, {})
           }
         )
       ]
     }
   );
+});
+NavigationPanelDropdown.displayName = "NavigationPanelDropdown";
+function selectSearchQuery(s) {
+  return normalizeViewPath(s.context.searchQuery);
 }
 const compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
-function SearchResults({ searchQuery }) {
+const SearchResults = memo(() => {
   const likec4model = useLikeC4Model();
   const actor = useNavigationActor();
-  const isSearchByPath = searchQuery.includes(VIEW_FOLDERS_SEPARATOR);
-  const found = pipe(
-    likec4model.views(),
-    ifilter((v) => {
-      if (isSearchByPath && v.$view.title) {
-        return normalizeViewPath(v.$view.title).toLowerCase().includes(searchQuery);
-      }
-      return v.id.toLowerCase().includes(searchQuery) || !!v.title?.toLowerCase().includes(searchQuery);
-    }),
-    ifirst(20),
-    toArray(),
-    sort((a, b) => compare(a.folder.path, b.folder.path))
-  );
+  const searchQuery = useSelector(actor.actorRef, selectSearchQuery);
+  const deferredSearchQuery = useDeferredValue(searchQuery);
+  const isSearchByPath = deferredSearchQuery.includes(VIEW_FOLDERS_SEPARATOR);
+  const highlight = isSearchByPath ? deferredSearchQuery.split(VIEW_FOLDERS_SEPARATOR) : deferredSearchQuery;
+  const [found, setFound] = useState([]);
+  useEffect(() => {
+    setFound((current) => {
+      const results = pipe(
+        likec4model.views(),
+        ifilter((v) => {
+          if (isSearchByPath && v.$view.title) {
+            return normalizeViewPath(v.$view.title).toLowerCase().includes(deferredSearchQuery);
+          }
+          return v.id.toLowerCase().includes(deferredSearchQuery) || !!v.title?.toLowerCase().includes(deferredSearchQuery);
+        }),
+        ifirst(20),
+        toArray(),
+        sort((a, b) => compare(a.folder.path, b.folder.path))
+      );
+      return shallowEqual(results, current) ? current : results;
+    });
+  }, [likec4model, deferredSearchQuery, isSearchByPath]);
   if (found.length === 0) return /* @__PURE__ */ jsx("div", { children: "no results" });
-  const highlight = isSearchByPath ? searchQuery.split(VIEW_FOLDERS_SEPARATOR) : searchQuery;
   return /* @__PURE__ */ jsx(
     ScrollAreaAutosize,
     {
@@ -147,7 +162,7 @@ function SearchResults({ searchQuery }) {
       )) })
     }
   );
-}
+});
 const foundedViewClass = hstack({
   gap: "xxs",
   rounded: "sm",
@@ -317,13 +332,16 @@ function folderColumn(folder, context) {
         viewId: s.id,
         title: s.title ?? s.id,
         description: s.description.nonEmpty && s.description.text || null,
-        selected: s.id === context.viewModel.id
+        selected: s.id === context.viewModel?.id
       }))
     ]
   };
 }
 const selectColumns = (context) => {
   const viewModel = context.viewModel;
+  if (!viewModel) {
+    return [];
+  }
   const likec4model = viewModel.$model;
   const columns = [
     folderColumn(likec4model.rootViewFolder, context)
@@ -336,7 +354,7 @@ const selectColumns = (context) => {
   }
   return columns;
 };
-function FolderColumns() {
+const FolderColumns = memo(() => {
   const columns = useNavigationActorContext(selectColumns, deepEqual);
   return /* @__PURE__ */ jsx(HStack, { gap: "xs", alignItems: "stretch", children: columns.flatMap((column, i) => [
     i > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, "divider" + i),
@@ -344,12 +362,12 @@ function FolderColumns() {
       FolderColumn,
       {
         data: column,
-        isLast: i == columns.length - 1
+        isLast: i > 0 && i == columns.length - 1
       },
       column.folderPath
     )
   ]) });
-}
+});
 function FolderColumn({ data, isLast }) {
   const ref = useRef(null);
   const actor = useNavigationActorRef();
@@ -364,6 +382,7 @@ function FolderColumn({ data, isLast }) {
   useMountEffect(() => {
     if (isLast && ref.current) {
       ref.current.scrollIntoView({
+        block: "nearest",
         inline: "nearest",
         behavior: "smooth"
       });
@@ -414,7 +433,7 @@ function FolderColumnItem({ columnItem, ...props }) {
       nonexhaustive(columnItem);
   }
 }
-function SearchInput({ onKeyDown, ...props }) {
+function SearchInput(props) {
   const [_value, handleChange] = useUncontrolled({
     ...props,
     finalValue: ""
@@ -427,8 +446,9 @@ function SearchInput({ onKeyDown, ...props }) {
       variant: "unstyled",
       height: rem(26),
       value: _value,
-      onKeyDown,
+      onKeyDown: scopedKeydownHandler,
       onChange: (e) => handleChange(e.currentTarget.value),
+      "data-likec4-focusable": true,
       classNames: {
         wrapper: css({
           flexGrow: 1,

package/dist/navigationpanel/_common.d.ts

@@ -11,5 +11,5 @@ export declare const Breadcrumbs: ForwardRefExoticComponent< BreadcrumbsProps &
     component?: any;
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }>;
-export type PanelActionIconProps = Partial<NavigationPanelActionIconVariant> & Omit<ActionIconProps, keyof NavigationPanelActionIconVariant> & HTMLMotionProps<'button'>;
+export type PanelActionIconProps = Partial<NavigationPanelActionIconVariant> & Omit<ActionIconProps, keyof NavigationPanelActionIconVariant> & Omit<HTMLMotionProps<'button'>, keyof NavigationPanelActionIconVariant>;
 export declare const PanelActionIcon: ForwardRefExoticComponent<Omit<PanelActionIconProps, "ref"> & RefAttributes<HTMLButtonElement>>;

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.1.1/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.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
@@ -19,6 +19,7 @@ const Tooltip = Tooltip$1.withProps({
 const BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(
   ThemeIcon,
   {
+    component: m.div,
     variant: "transparent",
     size: 16,
     className: css({
@@ -42,6 +43,7 @@ const PanelActionIcon = forwardRef(({
   variant = "default",
   className,
   disabled = false,
+  type,
   ...others
 }, ref) => /* @__PURE__ */ jsx(
   ActionIcon,
@@ -63,7 +65,7 @@ const PanelActionIcon = forwardRef(({
     ...others,
     className: cx(
       className,
-      navigationPanelActionIcon({ variant })
+      navigationPanelActionIcon({ variant, type })
     ),
     ref
   }

package/dist/navigationpanel/actor.d.ts

@@ -1,8 +1,9 @@
-import { ViewId } from '@likec4/core/types';
-import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, MetaObject, ActorRefFromLogic, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
+import { LayoutedView, ViewId } from '@likec4/core/types';
+import { ActorRefFromLogic, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
 import { CurrentViewModel } from '../hooks/useCurrentViewModel';
 export interface NavigationPanelActorInput {
-    viewModel: CurrentViewModel;
+    view: LayoutedView;
+    viewModel: CurrentViewModel | null;
 }
 export type NavigationPanelActorEvent = {
     type: 'update.inputs';
@@ -74,7 +75,8 @@ export type DropdownColumnItem = {
     selected: boolean;
 };
 export interface NavigationPanelActorContext {
-    viewModel: CurrentViewModel;
+    view: LayoutedView;
+    viewModel: CurrentViewModel | null;
     /**
      * Who activated the dropdown
      * (if `click` then the dropdown is always open until dismissed)
@@ -156,7 +158,8 @@ declare const _actorLogic: StateMachine<NavigationPanelActorContext, NavigationP
         selectedFolder: string;
         searchQuery: string;
         folderColumns: never[];
-        viewModel: CurrentViewModel;
+        view: LayoutedView;
+        viewModel: CurrentViewModel | null;
     };
     readonly initial: "idle";
     readonly entry: readonly ["update activatedBy", "reset selected folder"];
@@ -287,10 +290,11 @@ declare const _actorLogic: StateMachine<NavigationPanelActorContext, NavigationP
         };
     };
 }>;
-export interface NavigationPanelActorLogic extends ActorLogicFrom<typeof _actorLogic> {
+type InferredMachine = typeof _actorLogic;
+export interface NavigationPanelActorLogic extends InferredMachine {
 }
 export declare const navigationPanelActorLogic: NavigationPanelActorLogic;
 export type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>;
-export interface NavigationPanelActorRef extends ActorRefFrom<NavigationPanelActorLogic> {
+export interface NavigationPanelActorRef extends ActorRefFromLogic<NavigationPanelActorLogic> {
 }
 export {};

package/dist/navigationpanel/actor.js

@@ -37,16 +37,17 @@ const _actorLogic = setup({
       return { selectedFolder: event.folderPath };
     }),
     "reset selected folder": assign({
-      selectedFolder: ({ context }) => context.viewModel.folder.path
+      selectedFolder: ({ context }) => context.viewModel?.folder.path ?? ""
     }),
     "update inputs": assign(({ context, event }) => {
       assertEvent(event, "update.inputs");
-      const viewChanged = event.inputs.viewModel.id !== context.viewModel.id;
+      const viewChanged = event.inputs.viewModel?.id !== context.viewModel?.id;
       let selectedFolder = context.selectedFolder;
-      if (!event.inputs.viewModel.folder.path.startsWith(selectedFolder)) {
-        selectedFolder = event.inputs.viewModel.folder.path;
+      if (!event.inputs.viewModel?.folder.path.startsWith(selectedFolder)) {
+        selectedFolder = event.inputs.viewModel?.folder.path ?? "";
       }
       return {
+        view: event.inputs.view,
         viewModel: event.inputs.viewModel,
         selectedFolder,
         // allow dropdown to close on mouse leave if view changed

package/dist/navigationpanel/comparepanel/CompareActionsMenu.d.ts

@@ -0,0 +1,3 @@
+export declare function CompareActionsMenu({ onResetManualLayout, }: {
+    onResetManualLayout: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/comparepanel/CompareActionsMenu.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { hstack } from '@likec4/styles/patterns';
+import { navigationPanelActionIcon } from '@likec4/styles/recipes';
+import { Menu, UnstyledButton, Badge } from '@mantine/core';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+
+function CompareActionsMenu({
+  onResetManualLayout
+}) {
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      withinPortal: false,
+      floatingStrategy: "absolute",
+      shadow: "lg",
+      position: "bottom-start",
+      offset: { mainAxis: 4 },
+      children: [
+        /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(
+          UnstyledButton,
+          {
+            className: cx(
+              "mantine-active",
+              navigationPanelActionIcon({
+                variant: "default"
+              }),
+              hstack({
+                gap: "2",
+                py: "1.5",
+                px: "2",
+                lineHeight: "1",
+                rounded: "sm",
+                textStyle: "xs",
+                fontWeight: "medium",
+                color: {
+                  base: "likec4.panel.action",
+                  _hover: "likec4.panel.action.hover"
+                },
+                userSelect: "none"
+              })
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Box, { children: "Actions" }),
+              /* @__PURE__ */ jsx(IconChevronDown, { size: 12, stroke: 2, opacity: 0.7 })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+          /* @__PURE__ */ jsx(Menu.Item, { disabled: true, rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", radius: "sm", children: "Soon" }), children: "Apply changes" }),
+          /* @__PURE__ */ jsx(Menu.Item, { fz: "sm", onClick: onResetManualLayout, children: "Reset manual layout" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { CompareActionsMenu };

package/dist/navigationpanel/comparepanel/ComparePanel.d.ts

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

package/dist/navigationpanel/comparepanel/ComparePanel.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { hstack } from '@likec4/styles/patterns';
+import { AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+import { memo } from 'react';
+import { ComparePanelControls } from './ComparePanelControls.js';
+import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
+
+const ComparePanel = memo(() => {
+  const { enableCompareWithLatest } = useEnabledFeatures();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: enableCompareWithLatest && /* @__PURE__ */ jsx(
+    m.div,
+    {
+      layout: "position",
+      className: hstack({
+        gap: "2",
+        layerStyle: "likec4.panel",
+        position: "relative",
+        px: "2",
+        py: "1",
+        pl: "3",
+        pointerEvents: "all"
+      }),
+      initial: {
+        opacity: 0,
+        translateX: -20
+      },
+      animate: {
+        opacity: 1,
+        translateX: 0
+      },
+      exit: {
+        opacity: 0,
+        translateX: -20
+      },
+      children: /* @__PURE__ */ jsx(ComparePanelControls, {})
+    }
+  ) });
+});
+ComparePanel.displayName = "ComparePanel";
+
+export { ComparePanel };

package/dist/navigationpanel/comparepanel/ComparePanelControls.d.ts

@@ -0,0 +1 @@
+export declare function ComparePanelControls(): import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/comparepanel/ComparePanelControls.js

@@ -0,0 +1,60 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, HStack } from '@likec4/styles/jsx';
+import { Divider as Divider$1 } from '@mantine/core';
+import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
+import { PanelActionIcon } from '../_common.js';
+import { CompareActionsMenu } from './CompareActionsMenu.js';
+import { LayoutTypeSwitcher } from './LayoutTypeSwitcher.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+
+const Divider = Divider$1.withProps({
+  mx: 2,
+  size: "xs",
+  orientation: "vertical"
+});
+function ComparePanelControls() {
+  const [ctx, { toggleCompare, switchLayout, resetManualLayout }] = useDiagramCompareLayout();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        css: {
+          textStyle: "xs",
+          color: "likec4.panel.text",
+          userSelect: "none"
+        },
+        children: "Compare"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LayoutTypeSwitcher,
+      {
+        value: ctx.layout,
+        onChange: switchLayout
+      }
+    ),
+    ctx.isEditable && /* @__PURE__ */ jsxs(HStack, { gap: "1", children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(
+        CompareActionsMenu,
+        {
+          onResetManualLayout: resetManualLayout
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      PanelActionIcon,
+      {
+        size: "sm",
+        onClick: (e) => {
+          e.stopPropagation();
+          toggleCompare();
+        },
+        children: /* @__PURE__ */ jsx(IconX, {})
+      }
+    )
+  ] });
+}
+
+export { ComparePanelControls };

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.d.ts

@@ -0,0 +1,5 @@
+import { LayoutType } from '@likec4/core';
+export declare function LayoutTypeSwitcher({ value, onChange, }: {
+    value: LayoutType;
+    onChange: (layout: LayoutType) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { invariant } from '@likec4/core';
+import { css } from '@likec4/styles/css';
+import { SegmentedControl } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { useMemo } from 'react';
+
+function LayoutTypeSwitcher({
+  value,
+  onChange
+}) {
+  const data = useMemo(() => [
+    { value: "manual", label: "Saved" },
+    { value: "auto", label: "Latest" }
+  ], []);
+  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      color: value === "manual" ? "orange" : "green",
+      value,
+      component: m.div,
+      onChange: (layout) => {
+        invariant(layout === "manual" || layout === "auto", "Invalid layout type");
+        onChange(layout);
+      },
+      classNames: {
+        label: css({
+          fontSize: "xxs",
+          fontWeight: "medium"
+        })
+      },
+      data
+    }
+  ) });
+}
+
+export { LayoutTypeSwitcher };

package/dist/navigationpanel/comparepanel/index.d.ts

@@ -0,0 +1 @@
+export { ComparePanel } from './ComparePanel';

package/dist/navigationpanel/controls/{ViewDetailsCard.d.ts → DetailsControls.d.ts}

@@ -1,2 +1,2 @@
 import { PopoverProps } from '@mantine/core';
-export declare const ViewDetailsCard: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DetailsControls: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/controls/{ViewDetailsCard.js → DetailsControls.js}

@@ -1,32 +1,36 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { extractViewTitleFromPath } from '@likec4/core/model';
+import { RichText } from '@likec4/core/types';
 import { cx, css } from '@likec4/styles/css';
 import { HStack, Box, styled } from '@likec4/styles/jsx';
 import { hstack, vstack } from '@likec4/styles/patterns';
 import { Popover, UnstyledButton, Text, Badge } from '@mantine/core';
+import { deepEqual } from 'fast-equals';
 import * as m from 'motion/react-m';
 import { useState } from 'react';
 import { Link } from '../../components/Link.js';
-import { useDiagram, useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { useOnDiagramEvent } from '../../hooks/useDiagram.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 import { useNavigationActorSnapshot } from '../hooks.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import { useDiagram } from '../../hooks/safeContext.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
 
 const selector = ({ context }) => {
-  const view = context.viewModel;
+  const view = context.view;
   return {
     id: view.id,
-    title: view.titleOrUntitled,
-    description: view.description,
-    tags: view.tags,
-    links: view.links
+    title: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
+    description: context.viewModel?.description ?? RichText.from(view.description),
+    tags: view.tags ?? [],
+    links: view.links ?? []
   };
 };
-const ViewDetailsCard = (props) => {
+const DetailsControls = (props) => {
   const [opened, setOpened] = useState(false);
-  const data = useNavigationActorSnapshot(selector);
+  const data = useNavigationActorSnapshot(selector, deepEqual);
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
     Popover,
@@ -71,11 +75,11 @@ const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(P
         userSelect: "none",
         cursor: "pointer",
         color: {
-          base: "likec4.panel.action-icon.text",
-          _hover: "likec4.panel.action-icon.text.hover"
+          base: "likec4.panel.action",
+          _hover: "likec4.panel.action.hover"
         },
         backgroundColor: {
-          _hover: "likec4.panel.action-icon.bg.hover"
+          _hover: "likec4.panel.action.bg.hover"
         },
         display: {
           base: "none",
@@ -244,4 +248,4 @@ const ViewBadgeLabel = styled("div", {
   }
 });
 
-export { ViewDetailsCard };
+export { DetailsControls };

package/dist/navigationpanel/controls/LayoutWarning.d.ts

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