@likec4/diagram 1.43.0 → 1.45.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

@@ -1,11 +1,10 @@
-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';
 
 function diagramToXY(opts) {
   const {
-    view,
-    nodesSelectable: selectable
+    view
   } = opts;
   const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
   const queue = Queue.from(view.nodes.reduce(
@@ -53,8 +52,6 @@ function diagramToXY(opts) {
     const id = ns + node.id;
     const base = {
       id,
-      selectable: selectable && node.kind !== GroupElementKind,
-      focusable: selectable && node.kind !== GroupElementKind,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -80,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,
@@ -98,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({
@@ -108,7 +107,7 @@ function diagramToXY(opts) {
           isViewGroup: true,
           ...compoundData
         },
-        dragHandle: ".likec4-compound-title"
+        dragHandle: ".likec4-compound-title-container"
       });
       continue;
     }
@@ -130,8 +129,7 @@ function diagramToXY(opts) {
               ...navigateTo,
               deploymentFqn,
               modelFqn
-            },
-            dragHandle: ".likec4-compound-title"
+            }
           }
         );
         break;
@@ -146,8 +144,7 @@ function diagramToXY(opts) {
               ...compoundData,
               ...navigateTo,
               modelFqn
-            },
-            dragHandle: ".likec4-compound-title"
+            }
           }
         );
         break;
@@ -197,25 +194,25 @@ function diagramToXY(opts) {
       source: ns + source,
       target: ns + target,
       zIndex: ZIndexes.Edge,
-      selectable,
       hidden: !visiblePredicate(edge),
       deletable: false,
       data: {
         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",
         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/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

@@ -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,
     {
@@ -65,12 +69,16 @@ const NavigationPanel = memo(() => {
             "calc(100vw - 2 * {spacing.md})",
             "calc(100cqw - 2 * {spacing.md})"
           ]
+        },
+        _print: {
+          display: "none"
         }
       },
       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, {})
       ] })
     }
   );
@@ -104,17 +112,17 @@ const NavigationPanelPopoverTarget = ({ actor }) => {
     m.div,
     {
       layout: true,
+      layoutDependency: isActiveWalkthrough,
       className: hstack({
         layerStyle: "likec4.panel",
         position: "relative",
         gap: "xs",
         cursor: "pointer",
-        paddingRight: "md",
         pointerEvents: "all",
         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/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>;

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
   }