@likec4/diagram 1.57.0 → 1.59.0

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -1,7 +1,8 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useOnDiagramEvent } from "../hooks/useDiagram.js";
 import { useLikeC4Model } from "../hooks/useLikeC4Model.js";
-import { useNavigationActor, useNavigationActorContext, useNavigationActorRef, useNavigationActorSnapshot } from "./hooks.js";
+import { Tooltip as Tooltip$1 } from "./_common.js";
+import { selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector } from "./hooks.js";
 import { breadcrumbTitle } from "./styles.css.js";
 import { NavigationLink } from "../components/NavigationLink.js";
 import { ProjectsMenu } from "./dropdown/ProjectsMenu.js";
@@ -12,7 +13,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMountEffect } from "@react-hookz/web";
 import { deepEqual, shallowEqual } from "fast-equals";
 import { isArray, isEmpty, pipe, sort } from "remeda";
-import { Breadcrumbs, Button, Divider, Highlight, Input, PopoverDropdown, ScrollAreaAutosize, UnstyledButton, createScopedKeydownHandler, rem } from "@mantine/core";
+import { Breadcrumbs, Button, Divider, Highlight, Input, PopoverDropdown, ScrollAreaAutosize, UnstyledButton, createScopedKeydownHandler } from "@mantine/core";
 import { compareNaturalHierarchically, ifilter, ifirst, nonexhaustive, toArray } from "@likec4/core/utils";
 import { useSelector } from "@xstate/react";
 import { useThrottledCallback, useUncontrolled } from "@mantine/hooks";
@@ -27,12 +28,10 @@ var scopedKeydownHandler = createScopedKeydownHandler({
 	loop: true,
 	orientation: "vertical"
 });
-function hasSearchQuerySelector(s) {
-	return s.context.searchQuery.trim().length >= 2;
-}
+var hasSearchQuerySelector = selectNavigationContext((s) => s.searchQuery.trim().length >= 2);
 var NavigationPanelDropdown = memo(() => {
 	const actor = useNavigationActor();
-	const hasSearchQuery = useNavigationActorSnapshot(hasSearchQuerySelector);
+	const hasSearchQuery = useNavigationActorSelector(hasSearchQuerySelector);
 	useOnDiagramEvent("paneClick", () => {
 		actor.closeDropdown();
 	});
@@ -70,7 +69,7 @@ var NavigationPanelDropdown = memo(() => {
 				scrollbars: "x",
 				type: "auto",
 				offsetScrollbars: "present",
-				classNames: { root: css({ maxWidth: ["calc(100vw - 50px)", "calc(100cqw - 50px)"] }) },
+				classNames: { root: css({ maxWidth: ["[calc(100vw - 50px)]", "[calc(100cqw - 50px)]"] }) },
 				styles: { viewport: { overscrollBehavior: "none" } },
 				children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, {}) : /* @__PURE__ */ jsx(FolderColumns, {})
 			})
@@ -108,8 +107,8 @@ var SearchResults = memo(() => {
 		offsetScrollbars: false,
 		className: css({
 			width: "100%",
-			maxWidth: ["calc(100vw - 250px)", "calc(100cqw - 250px)"],
-			maxHeight: ["calc(100vh - 200px)", "calc(100cqh - 200px)"]
+			maxWidth: ["[calc(100vw - 250px)]", "[calc(100cqw - 250px)]"],
+			maxHeight: ["[calc(100vh - 200px)]", "[calc(100cqh - 200px)]"]
 		}),
 		children: /* @__PURE__ */ jsx(VStack, {
 			gap: "0.5",
@@ -132,13 +131,13 @@ var foundedViewClass = hstack({
 	px: "xs",
 	py: "xxs",
 	_hover: { backgroundColor: {
-		base: "mantine.colors.gray[1]",
-		_dark: "mantine.colors.dark[5]"
+		base: "mantine.gray[1]",
+		_dark: "mantine.dark[5]"
 	} },
 	_focus: {
 		outline: "none",
-		color: "mantine.colors.primary.lightColor!",
-		backgroundColor: "mantine.colors.primary.lightHover!"
+		color: "mantine.primary.lightColor!",
+		backgroundColor: "mantine.primary.lightHover!"
 	}
 });
 var inheritColor = css({ _groupFocus: {
@@ -152,8 +151,8 @@ function FoundedView({ view, highlight, ...props }) {
 		component: "div",
 		className: cx(inheritColor, breadcrumbTitle({ truncate: true }), css({ "& > mark": {
 			backgroundColor: {
-				base: "mantine.colors.yellow[2]/90",
-				_dark: "mantine.colors.yellow[5]/80",
+				base: "mantine.yellow[2]/90",
+				_dark: "mantine.yellow[5]/80",
 				_groupFocus: "[transparent]"
 			},
 			color: { _groupFocus: "[inherit!]" }
@@ -235,7 +234,7 @@ var ViewTypeIcon = {
 };
 var ColumnScrollArea = ScrollAreaAutosize.withProps({
 	scrollbars: "y",
-	className: css({ maxHeight: ["calc(100vh - 160px)", "calc(100cqh - 160px)"] })
+	className: css({ maxHeight: ["[calc(100vh - 160px)]", "[calc(100cqh - 160px)]"] })
 });
 function folderColumn(folder, context) {
 	return {
@@ -255,17 +254,17 @@ function folderColumn(folder, context) {
 		}))]
 	};
 }
-var selectColumns = (context) => {
-	const viewModel = context.viewModel;
+var selectColumns = selectNavigationContext((ctx) => {
+	const viewModel = ctx.viewModel;
 	if (!viewModel) return [];
 	const likec4model = viewModel.$model;
-	const columns = [folderColumn(likec4model.rootViewFolder, context)];
-	const folder = likec4model.viewFolder(context.selectedFolder);
-	if (!folder.isRoot) for (const b of folder.breadcrumbs) columns.push(folderColumn(b, context));
+	const columns = [folderColumn(likec4model.rootViewFolder, ctx)];
+	const folder = likec4model.viewFolder(ctx.selectedFolder);
+	if (!folder.isRoot) for (const b of folder.breadcrumbs) columns.push(folderColumn(b, ctx));
 	return columns;
-};
+}, deepEqual);
 var FolderColumns = memo(() => {
-	const columns = useNavigationActorContext(selectColumns, deepEqual);
+	const columns = useNavigationActorSelector(selectColumns);
 	return /* @__PURE__ */ jsx(HStack, {
 		gap: "xs",
 		alignItems: "stretch",
@@ -320,16 +319,24 @@ function FolderColumnItem({ columnItem, ...props }) {
 			miw: "200px",
 			...props
 		}, columnItem.folderPath);
-		case "view": return /* @__PURE__ */ jsx(NavigationLink, {
-			variant: "filled",
-			active: columnItem.selected,
-			label: columnItem.title,
-			description: columnItem.description,
-			leftSection: ViewTypeIcon[columnItem.viewType],
-			maw: "300px",
-			miw: "200px",
-			...props
-		}, columnItem.viewId);
+		case "view": return /* @__PURE__ */ jsx(Tooltip$1, {
+			label: columnItem.description,
+			disabled: !columnItem.description,
+			multiline: true,
+			w: 260,
+			withinPortal: true,
+			position: "left",
+			children: /* @__PURE__ */ jsx(NavigationLink, {
+				variant: "filled",
+				active: columnItem.selected,
+				label: columnItem.title,
+				description: columnItem.description,
+				leftSection: ViewTypeIcon[columnItem.viewType],
+				maw: "300px",
+				miw: "200px",
+				...props
+			}, columnItem.viewId)
+		});
 		default: nonexhaustive(columnItem);
 	}
 }
@@ -342,7 +349,7 @@ function SearchInput(props) {
 		size: "xs",
 		placeholder: "Search by title or id",
 		variant: "unstyled",
-		height: rem(26),
+		height: 26,
 		value: _value,
 		onKeyDown: scopedKeydownHandler,
 		onChange: (e) => handleChange(e.currentTarget.value),
@@ -351,15 +358,15 @@ function SearchInput(props) {
 			wrapper: css({
 				flexGrow: 1,
 				backgroundColor: {
-					base: "mantine.colors.gray[1]",
-					_dark: "mantine.colors.dark[5]/80",
+					base: "mantine.gray[1]",
+					_dark: "mantine.dark[5]/80",
 					_hover: {
-						base: "mantine.colors.gray[2]",
-						_dark: "mantine.colors.dark[4]"
+						base: "mantine.gray[2]",
+						_dark: "mantine.dark[4]"
 					},
 					_focus: {
-						base: "mantine.colors.gray[2]",
-						_dark: "mantine.colors.dark[4]"
+						base: "mantine.gray[2]",
+						_dark: "mantine.dark[4]"
 					}
 				},
 				rounded: "sm"

package/dist/navigationpanel/_common.d.ts

@@ -1,9 +1,9 @@
-import { NavigationPanelActionIconVariant } from '@likec4/styles/recipes';
+import { NavigationPanelActionIconVariant } from '../../styled-system/recipes';
 import { ActionIconProps, TooltipProps, PlaceholderPolymorphicProps, BreadcrumbsProps } from '@mantine/core';
 import { HTMLMotionProps } from 'motion/react';
 import { NamedExoticComponent, RefAttributes, ForwardRefExoticComponent } from 'react';
 export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
-export declare const BreadcrumbsSeparator: () => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbsSeparator: () => import("react").JSX.Element;
 export declare const Breadcrumbs: NamedExoticComponent< BreadcrumbsProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
 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

@@ -26,8 +26,8 @@ var BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(ThemeIcon, {
 			"@/md": "flex"
 		},
 		color: {
-			base: "mantine.colors.gray[5]",
-			_dark: "mantine.colors.dark[3]"
+			base: "mantine.gray[5]",
+			_dark: "mantine.dark[3]"
 		}
 	}),
 	children: /* @__PURE__ */ jsx(IconChevronRight, {})

package/dist/navigationpanel/actor.actions.d.ts

@@ -0,0 +1,19 @@
+import { ActionFunction, EventObject } from 'xstate';
+import { Context, Events } from './actor.setup';
+export declare const updateActivatedBy: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const keepDropdownOpen: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const updateSelectedFolder: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const resetSelectedFolder: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const updateInputs: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const resetSearchQuery: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const updateSearchQuery: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const emitNavigateTo: () => ActionFunction<Context, Events, Events, undefined, never, never, {
+    type: "was opened on hover";
+    params: unknown;
+} | {
+    type: "has search query";
+    params: unknown;
+} | {
+    type: "search query is empty";
+    params: unknown;
+}, "open timeout" | "close timeout", EventObject>;

package/dist/navigationpanel/actor.actions.js

@@ -0,0 +1,45 @@
+import "../_virtual/_rolldown/runtime.js";
+import { typedSystem } from "../likec4diagram/state/utils.js";
+import { actor } from "./actor.setup.js";
+import { assertEvent } from "xstate";
+//#region src/navigationpanel/actor.actions.ts
+var updateActivatedBy = () => actor.assign({ activatedBy: ({ context, event }) => {
+	switch (true) {
+		case event.type.includes("click"): return "click";
+		case event.type.includes("mouseEnter"): return "hover";
+		default: return context.activatedBy;
+	}
+} });
+var keepDropdownOpen = () => actor.assign({ activatedBy: "click" });
+var updateSelectedFolder = () => actor.assign(({ event }) => {
+	if (event.type === "breadcrumbs.click.root") return { selectedFolder: "" };
+	assertEvent(event, ["breadcrumbs.click.folder", "select.folder"]);
+	return { selectedFolder: event.folderPath };
+});
+var resetSelectedFolder = () => actor.assign({ selectedFolder: ({ context }) => context.viewModel?.folder.path ?? "" });
+var updateInputs = () => actor.assign(({ context, event }) => {
+	assertEvent(event, "update.inputs");
+	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 ?? "";
+	return {
+		view: event.inputs.view,
+		viewModel: event.inputs.viewModel,
+		selectedFolder,
+		activatedBy: viewChanged ? "hover" : context.activatedBy
+	};
+});
+var resetSearchQuery = () => actor.assign({ searchQuery: "" });
+var updateSearchQuery = () => actor.assign(({ event }) => {
+	assertEvent(event, "searchQuery.change");
+	return { searchQuery: event.value ?? "" };
+});
+var emitNavigateTo = () => actor.enqueueActions(({ event, enqueue }) => {
+	assertEvent(event, "select.view");
+	enqueue.sendTo(typedSystem.diagramActor, {
+		type: "navigate.to",
+		viewId: event.viewId
+	});
+});
+//#endregion
+export { emitNavigateTo, keepDropdownOpen, resetSearchQuery, resetSelectedFolder, updateActivatedBy, updateInputs, updateSearchQuery, updateSelectedFolder };

package/dist/navigationpanel/actor.d.ts

@@ -1,100 +1,38 @@
-import { LayoutedView, ViewId } from '@likec4/core/types';
-import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
-import { CurrentViewModel } from '../hooks/useCurrentViewModel';
-export interface NavigationPanelActorInput {
-    view: LayoutedView;
-    viewModel: CurrentViewModel | null;
-}
-export type NavigationPanelActorEvent = {
-    type: 'update.inputs';
-    inputs: NavigationPanelActorInput;
-} | {
-    type: 'searchQuery.change';
-    value: string;
-} | {
-    type: 'searchQuery.changed';
-} | {
-    type: 'select.folder';
-    folderPath: string;
-} | {
-    type: 'select.view';
-    viewId: ViewId;
-} | {
-    type: 'breadcrumbs.mouseLeave';
-} | {
-    type: 'breadcrumbs.mouseEnter.root';
-} | {
-    type: 'breadcrumbs.mouseLeave.root';
-} | {
-    type: 'breadcrumbs.mouseEnter.folder';
-    folderPath: string;
-} | {
-    type: 'breadcrumbs.mouseLeave.folder';
-    folderPath: string;
-} | {
-    type: 'breadcrumbs.mouseEnter.viewtitle';
-} | {
-    type: 'breadcrumbs.mouseLeave.viewtitle';
-} | {
-    type: 'breadcrumbs.click.root';
-} | {
-    type: 'breadcrumbs.click.folder';
-    folderPath: string;
-} | {
-    type: 'breadcrumbs.click.viewtitle';
-} | {
-    type: 'dropdown.mouseEnter';
-} | {
-    type: 'dropdown.mouseLeave';
-} | {
-    type: 'dropdown.dismiss';
-};
-export type NavigationPanelActorEmitted = {
-    type: 'navigateTo';
-    viewId: ViewId;
-};
-export type BreadcrumbItem = {
-    type: 'folder';
-    folderPath: string;
-    title: string;
-} | {
-    type: 'viewtitle';
-    title: string;
-};
-export type DropdownColumnItem = {
-    type: 'folder';
-    folderPath: string;
-    title: string;
-    selected: boolean;
-} | {
-    type: 'view';
-    viewType: 'element' | 'deployment' | 'dynamic' | 'index';
-    viewId: string;
-    title: string;
-    description: string | null;
-    selected: boolean;
-};
-export interface NavigationPanelActorContext {
-    view: LayoutedView;
-    viewModel: CurrentViewModel | null;
-    /**
-     * Who activated the dropdown
-     * (if `click` then the dropdown is always open until dismissed)
-     * @default 'hover'
-     */
-    activatedBy: 'hover' | 'click';
-    /**
-     * The folder that is currently selected in the dropdown
-     * By default it is the root
-     */
-    selectedFolder: string;
-    searchQuery: string;
-}
-type Tags = 'active';
-export interface NavigationPanelActorLogic extends StateMachine<NavigationPanelActorContext, NavigationPanelActorEvent, {}, any, any, any, any, any, Tags, NavigationPanelActorInput, any, NavigationPanelActorEmitted, any, any> {
+import { ActorRef, SnapshotFrom, StateMachine, StateValueFrom, NonReducibleUnknown, EventObject, MetaObject } from 'xstate';
+import { Context as NavigationPanelActorContextFactory, Context as NavigationPanelActorContext, Events as NavigationPanelActorEvent, Input as NavigationPanelActorInput, Tags } from './actor.setup';
+export type { NavigationPanelActorContext, NavigationPanelActorEvent, NavigationPanelActorInput, };
+export type { BreadcrumbItem, DropdownColumnItem } from './actor.setup';
+declare const _actorLogic: StateMachine<NavigationPanelActorContextFactory, NavigationPanelActorEvent, {}, never, never, {
+    type: "was opened on hover";
+    params: unknown;
+} | {
+    type: "has search query";
+    params: unknown;
+} | {
+    type: "search query is empty";
+    params: unknown;
+}, "open timeout" | "close timeout", "pending" | "idle" | {
+    active: "search" | "opened" | "decide" | "closing";
+}, "active", NavigationPanelActorInput, NonReducibleUnknown, EventObject, MetaObject, {
+    id: "navigationPanel";
+    states: {
+        readonly idle: {
+            id: "idle";
+        };
+        readonly pending: {};
+        readonly active: {
+            states: {
+                readonly decide: {};
+                readonly opened: {};
+                readonly search: {};
+                readonly closing: {};
+            };
+        };
+    };
+}>;
+export interface NavigationPanelActorLogic extends StateMachine<NavigationPanelActorContext, NavigationPanelActorEvent, any, any, any, any, any, StateValueFrom<typeof _actorLogic>, Tags, NavigationPanelActorInput, any, any, any, any> {
 }
 export declare const navigationPanelActorLogic: NavigationPanelActorLogic;
 export type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>;
-export interface NavigationPanelActorRef extends ActorRef<NavigationPanelActorSnapshot, NavigationPanelActorEvent, NavigationPanelActorEmitted> {
+export interface NavigationPanelActorRef extends ActorRef<NavigationPanelActorSnapshot, NavigationPanelActorEvent, never> {
 }
-export {};

package/dist/navigationpanel/actor.js

@@ -1,78 +1,15 @@
 import "../_virtual/_rolldown/runtime.js";
-import { isEmpty } from "remeda";
-import { assertEvent, assign, emit, raise, setup } from "xstate";
-var navigationPanelActorLogic = setup({
-	types: {
-		context: {},
-		events: {},
-		tags: "",
-		input: {},
-		emitted: {}
-	},
-	delays: {
-		"open timeout": 500,
-		"close timeout": 350
-	},
-	actions: {
-		"update activatedBy": assign({ activatedBy: ({ context, event }) => {
-			switch (true) {
-				case event.type.includes("click"): return "click";
-				case event.type.includes("mouseEnter"): return "hover";
-				default: return context.activatedBy;
-			}
-		} }),
-		"keep dropdown open": assign({ activatedBy: "click" }),
-		"update selected folder": assign(({ event }) => {
-			if (event.type === "breadcrumbs.click.root") return { selectedFolder: "" };
-			assertEvent(event, ["breadcrumbs.click.folder", "select.folder"]);
-			return { selectedFolder: event.folderPath };
-		}),
-		"reset selected folder": assign({ selectedFolder: ({ context }) => context.viewModel?.folder.path ?? "" }),
-		"update inputs": assign(({ context, event }) => {
-			assertEvent(event, "update.inputs");
-			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 ?? "";
-			return {
-				view: event.inputs.view,
-				viewModel: event.inputs.viewModel,
-				selectedFolder,
-				activatedBy: viewChanged ? "hover" : context.activatedBy
-			};
-		}),
-		"reset search query": assign({ searchQuery: "" }),
-		"update search query": assign(({ event }) => {
-			assertEvent(event, "searchQuery.change");
-			return { searchQuery: event.value ?? "" };
-		}),
-		"emit navigateTo": emit(({ event }) => {
-			assertEvent(event, "select.view");
-			return {
-				type: "navigateTo",
-				viewId: event.viewId
-			};
-		})
-	},
-	guards: {
-		"was opened on hover": ({ context }) => context.activatedBy === "hover",
-		"has search query": ({ context }) => !isEmpty(context.searchQuery),
-		"search query is empty": ({ context }) => isEmpty(context.searchQuery)
-	}
-}).createMachine({
-	id: "breadcrumbs",
-	context: ({ input }) => ({
-		...input,
-		breadcrumbs: [],
-		activatedBy: "hover",
-		selectedFolder: "",
-		searchQuery: "",
-		folderColumns: []
-	}),
+import { Context, actor } from "./actor.setup.js";
+import { emitNavigateTo, keepDropdownOpen, resetSearchQuery, resetSelectedFolder, updateActivatedBy, updateInputs, updateSearchQuery, updateSelectedFolder } from "./actor.actions.js";
+import { raise } from "xstate";
+var navigationPanelActorLogic = actor.createMachine({
+	id: "navigationPanel",
+	context: ({ input }) => Context({ input }),
 	initial: "idle",
-	entry: ["update activatedBy", "reset selected folder"],
+	entry: [updateActivatedBy(), resetSelectedFolder()],
 	on: {
-		"update.inputs": { actions: "update inputs" },
-		"searchQuery.change": { actions: ["update search query", raise({ type: "searchQuery.changed" })] }
+		"update.inputs": { actions: updateInputs() },
+		"searchQuery.change": { actions: [updateSearchQuery(), raise({ type: "searchQuery.changed" })] }
 	},
 	states: {
 		idle: {
@@ -80,21 +17,21 @@ var navigationPanelActorLogic = setup({
 			on: {
 				"breadcrumbs.mouseEnter.*": {
 					target: "pending",
-					actions: "update activatedBy"
+					actions: updateActivatedBy()
 				},
 				"breadcrumbs.click.*": {
 					target: "active",
-					actions: "update activatedBy"
+					actions: updateActivatedBy()
 				}
 			}
 		},
 		pending: {
 			on: {
-				"breadcrumbs.mouseEnter.*": { actions: "update activatedBy" },
+				"breadcrumbs.mouseEnter.*": { actions: updateActivatedBy() },
 				"breadcrumbs.mouseLeave.*": { target: "idle" },
 				"breadcrumbs.click.*": {
 					target: "active",
-					actions: "update activatedBy"
+					actions: updateActivatedBy()
 				}
 			},
 			after: { "open timeout": { target: "active" } }
@@ -122,24 +59,24 @@ var navigationPanelActorLogic = setup({
 				opened: { on: {
 					"searchQuery.changed": {
 						guard: "has search query",
-						actions: "keep dropdown open",
+						actions: keepDropdownOpen(),
 						target: "search"
 					},
-					"breadcrumbs.click.viewtitle": { actions: "reset selected folder" },
-					"breadcrumbs.click.*": { actions: "update selected folder" },
-					"select.folder": { actions: ["keep dropdown open", "update selected folder"] },
-					"select.view": { actions: ["emit navigateTo"] }
+					"breadcrumbs.click.viewtitle": { actions: resetSelectedFolder() },
+					"breadcrumbs.click.*": { actions: updateSelectedFolder() },
+					"select.folder": { actions: [keepDropdownOpen(), updateSelectedFolder()] },
+					"select.view": { actions: emitNavigateTo() }
 				} },
 				search: { on: {
 					"breadcrumbs.click.viewtitle": {
-						actions: ["reset search query", "reset selected folder"],
+						actions: [resetSearchQuery(), resetSelectedFolder()],
 						target: "opened"
 					},
 					"breadcrumbs.click.*": {
-						actions: ["reset search query", "update selected folder"],
+						actions: [resetSearchQuery(), updateSelectedFolder()],
 						target: "opened"
 					},
-					"select.view": { actions: ["emit navigateTo"] }
+					"select.view": { actions: emitNavigateTo() }
 				} },
 				closing: {
 					on: {

package/dist/navigationpanel/actor.setup.d.ts

@@ -0,0 +1,98 @@
+import { LayoutedView, ViewId } from '@likec4/core/types';
+import { CurrentViewModel } from '../hooks/useCurrentViewModel';
+import { SetupReturn, NonReducibleUnknown, EventObject, MetaObject } from 'xstate';
+export interface Input {
+    view: LayoutedView;
+    viewModel: CurrentViewModel | null;
+}
+export type Events = {
+    type: 'update.inputs';
+    inputs: Input;
+} | {
+    type: 'searchQuery.change';
+    value: string;
+} | {
+    type: 'searchQuery.changed';
+} | {
+    type: 'select.folder';
+    folderPath: string;
+} | {
+    type: 'select.view';
+    viewId: ViewId;
+} | {
+    type: 'breadcrumbs.mouseLeave';
+} | {
+    type: 'breadcrumbs.mouseEnter.root';
+} | {
+    type: 'breadcrumbs.mouseLeave.root';
+} | {
+    type: 'breadcrumbs.mouseEnter.folder';
+    folderPath: string;
+} | {
+    type: 'breadcrumbs.mouseLeave.folder';
+    folderPath: string;
+} | {
+    type: 'breadcrumbs.mouseEnter.viewtitle';
+} | {
+    type: 'breadcrumbs.mouseLeave.viewtitle';
+} | {
+    type: 'breadcrumbs.click.root';
+} | {
+    type: 'breadcrumbs.click.folder';
+    folderPath: string;
+} | {
+    type: 'breadcrumbs.click.viewtitle';
+} | {
+    type: 'dropdown.mouseEnter';
+} | {
+    type: 'dropdown.mouseLeave';
+} | {
+    type: 'dropdown.dismiss';
+};
+export type Emitted = unknown;
+export type BreadcrumbItem = {
+    type: 'folder';
+    folderPath: string;
+    title: string;
+} | {
+    type: 'viewtitle';
+    title: string;
+};
+export type DropdownColumnItem = {
+    type: 'folder';
+    folderPath: string;
+    title: string;
+    selected: boolean;
+} | {
+    type: 'view';
+    viewType: 'element' | 'deployment' | 'dynamic' | 'index';
+    viewId: string;
+    title: string;
+    description: string | null;
+    selected: boolean;
+};
+export interface Context {
+    view: LayoutedView;
+    viewModel: CurrentViewModel | null;
+    /**
+     * Who activated the dropdown
+     * (if `click` then the dropdown is always open until dismissed)
+     * @default 'hover'
+     */
+    activatedBy: 'hover' | 'click';
+    /**
+     * The folder that is currently selected in the dropdown
+     * By default it is the root
+     */
+    selectedFolder: string;
+    searchQuery: string;
+}
+export type Tags = 'active';
+export declare function Context({ input }: {
+    input: Input;
+}): Context;
+export declare const actor: SetupReturn<Context, Events, {}, {}, {}, {
+    'was opened on hover': unknown;
+    'has search query': unknown;
+    'search query is empty': unknown;
+}, "open timeout" | "close timeout", "active", Input, NonReducibleUnknown, EventObject, MetaObject>;