@likec4/diagram 1.59.4 → 1.60.0

package/dist/navigationpanel/NavigationPanelControls.mjs

@@ -0,0 +1,172 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import IconChevronRight from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import { useEnabledFeatures } from "../context/DiagramFeatures.mjs";
+import { selectDiagramContext, useDiagramSelector } from "../hooks/safeContext.mjs";
+import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.mjs";
+import { deriveToggledFeatures } from "../likec4diagram/state/machine.setup.mjs";
+import { useNavigationActor } from "./hooks.mjs";
+import { LayoutWarning } from "./controls/LayoutWarning.mjs";
+import { LogoButton } from "./controls/LogoButton.mjs";
+import { NavigationButtons } from "./controls/NavigationButtons.mjs";
+import { OpenSource } from "./controls/OpenSource.mjs";
+import { SearchControl } from "./controls/SearchControl.mjs";
+import { ToggleReadonly } from "./controls/ToggleReadonly.mjs";
+import { ViewDetailsButton } from "./controls/ViewDetailsButton.mjs";
+import { ElementViewControls } from "./ElementViewControls.mjs";
+import { breadcrumbTitle } from "./styles.css.mjs";
+import { DynamicViewControls } from "./walkthrough/DynamicViewControls.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { isTruthy } from "remeda";
+import { UnstyledButton } from "@mantine/core";
+import { LayoutGroup } from "motion/react";
+import { extractViewTitleFromPath } from "@likec4/core/model";
+import { hstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+
+//#region src/navigationpanel/NavigationPanelControls.tsx
+const selectViewData = selectDiagramContext((s) => {
+	const comparingLatest = deriveToggledFeatures(s).enableCompareWithLatest && !!s.view.drifts && s.view._layout === "auto";
+	const noActiveWalkthrough = !isTruthy(s.activeWalkthrough);
+	const hasEditor = s.features.enableEditor;
+	const isReadOnly = s.toggledFeatures.enableReadOnly ?? false;
+	return {
+		viewId: s.view.id,
+		viewTitle: (s.view.title && extractViewTitleFromPath(s.view.title)) ?? "Untitled View",
+		isDynamicView: s.view._type === "dynamic",
+		isElementView: s.view._type === "element",
+		editBtnVisible: hasEditor && noActiveWalkthrough,
+		editBtnDisabled: comparingLatest,
+		isReadOnly
+	};
+});
+const breadcrumbAnimation = {
+	initial: {
+		opacity: .5,
+		translateX: -10,
+		translateY: 0
+	},
+	animate: {
+		opacity: 1,
+		translateX: 0,
+		translateY: 0
+	},
+	exit: {
+		opacity: 0,
+		translateX: -10,
+		translateY: 0
+	},
+	whileTap: { translateY: 1 }
+};
+const NavigationPanelControls = memo(() => {
+	const actor = useNavigationActor();
+	const { enableNavigationButtons, enableDynamicViewWalkthrough, enableCompareWithLatest, enableSearch, enableVscode } = useEnabledFeatures();
+	const viewModel = useOptionalCurrentViewModel();
+	const { editBtnDisabled, editBtnVisible, isReadOnly, viewTitle, isDynamicView, isElementView } = useDiagramSelector(selectViewData);
+	const folder = viewModel?.folder;
+	const folderBreadcrumbs = (!folder || folder.isRoot ? [] : folder.breadcrumbs.map((s) => ({
+		folderPath: s.path,
+		title: s.title
+	}))).flatMap(({ folderPath, title }, index, all) => [/* @__PURE__ */ jsx(UnstyledButton, {
+		component: m$1.button,
+		layout: "position",
+		className: cx(breadcrumbTitle({
+			dimmed: true,
+			truncate: true
+		}), css({
+			userSelect: "none",
+			maxWidth: "[150px]",
+			display: {
+				base: "none",
+				"@/md": "block"
+			}
+		})),
+		...breadcrumbAnimation,
+		title,
+		onMouseEnter: () => actor.send({
+			type: "breadcrumbs.mouseEnter.folder",
+			folderPath
+		}),
+		onMouseLeave: () => actor.send({
+			type: "breadcrumbs.mouseLeave.folder",
+			folderPath
+		}),
+		onClick: (e) => {
+			e.stopPropagation();
+			actor.send({
+				type: "breadcrumbs.click.folder",
+				folderPath
+			});
+		},
+		children: title
+	}, folderPath), /* @__PURE__ */ jsx(m$1.div, {
+		layout: true,
+		className: css({
+			display: {
+				base: "none",
+				"@/md": "block"
+			},
+			color: "text.non-essential"
+		}),
+		children: /* @__PURE__ */ jsx(IconChevronRight, { size: 16 })
+	}, folderPath + "-separator")]);
+	const viewBreadcrumb = /* @__PURE__ */ jsx(UnstyledButton, {
+		layoutId: "view-title",
+		component: m$1.button,
+		layout: "position",
+		...breadcrumbAnimation,
+		className: cx(breadcrumbTitle({ truncate: true }), css({ userSelect: "none" })),
+		title: viewTitle,
+		onMouseEnter: () => actor.send({ type: "breadcrumbs.mouseEnter.viewtitle" }),
+		onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave.viewtitle" }),
+		onClick: (e) => {
+			e.stopPropagation();
+			actor.send({ type: "breadcrumbs.click.viewtitle" });
+		},
+		children: viewTitle
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(LogoButton, {}, "logo-button"),
+		enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
+		/* @__PURE__ */ jsx(m$1.div, {
+			layout: "size",
+			className: hstack({
+				gap: "1",
+				flexShrink: 1,
+				flexGrow: 1,
+				flexWrap: "nowrap",
+				overflow: "hidden"
+			}),
+			children: /* @__PURE__ */ jsxs(LayoutGroup, {
+				id: "navigation-panel-breadcrumbs",
+				children: [folderBreadcrumbs, viewBreadcrumb]
+			})
+		}, "breadcrumbs"),
+		/* @__PURE__ */ jsxs(m$1.div, {
+			layout: "size",
+			className: hstack({
+				gap: "1.5",
+				flexShrink: 0,
+				flexWrap: "nowrap",
+				flexGrow: 0
+			}),
+			children: [
+				/* @__PURE__ */ jsx(ViewDetailsButton, { onOpen: () => actor.closeDropdown() }, "details"),
+				enableVscode && /* @__PURE__ */ jsx(OpenSource, {}, "open-source"),
+				editBtnVisible && /* @__PURE__ */ jsx(ToggleReadonly, {
+					disabled: editBtnDisabled,
+					isReadOnly
+				}, "toggle-readonly"),
+				enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
+				isElementView && /* @__PURE__ */ jsx(ElementViewControls, {}, "element-view-controls"),
+				enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
+				/* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
+			]
+		}, "actions")
+	] });
+});
+NavigationPanelControls.displayName = "NavigationPanelControls";
+
+//#endregion
+export { NavigationPanelControls };

package/dist/navigationpanel/NavigationPanelDropdown.mjs

@@ -0,0 +1,375 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import IconChevronRight from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import IconSearch from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
+import IconFolderFilled from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.mjs";
+import { useOnDiagramEvent } from "../hooks/useDiagram.mjs";
+import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.mjs";
+import { useLikeC4Model } from "../hooks/useLikeC4Model.mjs";
+import { Tooltip as Tooltip$1 } from "./_common.mjs";
+import { selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector } from "./hooks.mjs";
+import { EmptyBox } from "../components/EmptyBox.mjs";
+import { viewIcon } from "../components/ViewIcon.mjs";
+import { breadcrumbTitle } from "./styles.css.mjs";
+import { NavigationLink } from "../components/NavigationLink.mjs";
+import { ProjectsMenu } from "./dropdown/ProjectsMenu.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { memo, useDeferredValue, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMountEffect } from "@react-hookz/web";
+import { shallowEqual } from "fast-equals";
+import { isArray, isEmpty, pipe, sort } from "remeda";
+import { Breadcrumbs, Button, Divider, Highlight, Input, PopoverDropdown, ScrollAreaAutosize, UnstyledButton, createScopedKeydownHandler } from "@mantine/core";
+import { compareNaturalHierarchically, ifilter, ifirst, nonexhaustive, toArray } from "@likec4/core/utils";
+import { useThrottledCallback, useUncontrolled } from "@mantine/hooks";
+import { Box as Box$1, HStack, VStack } from "@likec4/styles/jsx";
+import { VIEW_FOLDERS_SEPARATOR, normalizeViewPath } from "@likec4/core/model";
+import { hstack, vstack } from "@likec4/styles/patterns";
+
+//#region src/navigationpanel/NavigationPanelDropdown.tsx
+const scopedKeydownHandler = createScopedKeydownHandler({
+	siblingSelector: "[data-likec4-focusable]",
+	parentSelector: "[data-likec4-breadcrumbs-dropdown]",
+	activateOnFocus: false,
+	loop: true,
+	orientation: "vertical"
+});
+const hasSearchQuerySelector = selectNavigationContext((s) => s.searchQuery);
+const NavigationPanelDropdown = memo(() => {
+	const actor = useNavigationActor();
+	const searchQuery = useNavigationActorSelector(hasSearchQuerySelector);
+	const hasSearchQuery = searchQuery.trim().length >= 2;
+	useOnDiagramEvent("paneClick", () => {
+		actor.closeDropdown();
+	});
+	useOnDiagramEvent("nodeClick", () => {
+		actor.closeDropdown();
+	});
+	useOnDiagramEvent("edgeClick", () => {
+		actor.closeDropdown();
+	});
+	const setSearchQuery = useThrottledCallback((value) => {
+		actor.send({
+			type: "searchQuery.change",
+			value
+		});
+	}, 250);
+	return /* @__PURE__ */ jsxs(PopoverDropdown, {
+		className: cx("nowheel", vstack({
+			layerStyle: "likec4.dropdown",
+			gap: "xs",
+			pointerEvents: "all"
+		})),
+		"data-likec4-breadcrumbs-dropdown": true,
+		onMouseLeave: () => actor.send({ type: "dropdown.mouseLeave" }),
+		onMouseEnter: () => actor.send({ type: "dropdown.mouseEnter" }),
+		children: [
+			/* @__PURE__ */ jsx(ProjectsMenu, {}),
+			/* @__PURE__ */ jsx(HStack, {
+				gap: "xs",
+				children: /* @__PURE__ */ jsx(SearchInput, {
+					defaultValue: searchQuery,
+					onChange: setSearchQuery
+				})
+			}),
+			/* @__PURE__ */ jsx(ScrollAreaAutosize, {
+				scrollbars: "x",
+				type: "auto",
+				offsetScrollbars: "present",
+				classNames: { root: css({ maxWidth: ["[calc(100vw - 50px)]", "[calc(100cqw - 50px)]"] }) },
+				styles: { viewport: { overscrollBehavior: "none" } },
+				children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, {}) : /* @__PURE__ */ jsx(FolderColumns, {})
+			})
+		]
+	});
+});
+NavigationPanelDropdown.displayName = "NavigationPanelDropdown";
+const selectSearchQuery = selectNavigationContext((s) => normalizeViewPath(s.searchQuery));
+const compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
+const SearchResults = memo(() => {
+	const likec4model = useLikeC4Model();
+	const actor = useNavigationActor();
+	const searchQuery = useNavigationActorSelector(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(EmptyBox, {
+		style: { minWidth: 200 },
+		children: "no results"
+	});
+	return /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+		scrollbars: "xy",
+		offsetScrollbars: false,
+		className: css({
+			width: "100%",
+			maxWidth: ["[calc(100vw - 250px)]", "[calc(100cqw - 250px)]"],
+			maxHeight: ["[calc(100vh - 200px)]", "[calc(100cqh - 200px)]"]
+		}),
+		children: /* @__PURE__ */ jsx(VStack, {
+			gap: "0.5",
+			children: found.map((v) => /* @__PURE__ */ jsx(FoundedView, {
+				view: v,
+				highlight,
+				onClick: (e) => {
+					e.stopPropagation();
+					actor.selectView(v.id);
+				},
+				"data-likec4-focusable": true,
+				onKeyDown: scopedKeydownHandler
+			}, v.id))
+		})
+	});
+});
+const foundedViewClass = hstack({
+	gap: "xxs",
+	rounded: "sm",
+	px: "xs",
+	py: "xxs",
+	_hover: { backgroundColor: {
+		base: "mantine.gray[1]",
+		_dark: "mantine.dark[5]"
+	} },
+	_focus: {
+		outline: "none",
+		color: "primary.text.light!",
+		backgroundColor: "primary.body.lightHover!"
+	}
+});
+const inheritColor = css({ _groupFocus: {
+	color: "[inherit!]",
+	transition: "none"
+} });
+function FoundedView({ view, highlight, ...props }) {
+	const folder = view.folder;
+	const icon = viewIcon(view.id === "index" ? "index" : view._type);
+	const viewLabel = /* @__PURE__ */ jsx(Highlight, {
+		component: "div",
+		className: cx(inheritColor, breadcrumbTitle({ truncate: true }), css({ "& > mark": {
+			backgroundColor: {
+				base: "highlight.body/80",
+				_groupFocus: "transparent"
+			},
+			color: { _groupFocus: "inherit!" }
+		} })),
+		maw: 350,
+		highlight,
+		children: view.title ?? view.id
+	}, view.id);
+	const className = cx(props.className, "group", foundedViewClass);
+	if (folder.isRoot) return /* @__PURE__ */ jsxs(UnstyledButton, {
+		...props,
+		className,
+		children: [icon, viewLabel]
+	});
+	const breadcrumbs = folder.breadcrumbs.map((b) => /* @__PURE__ */ jsx(Highlight, {
+		component: "div",
+		className: cx(css({ _groupHover: { color: "text.dimmed" } }), inheritColor, breadcrumbTitle({
+			dimmed: true,
+			truncate: true
+		})),
+		maw: 170,
+		highlight: isArray(highlight) ? highlight : [],
+		children: b.title
+	}, b.path));
+	breadcrumbs.push(/* @__PURE__ */ jsxs(HStack, {
+		gap: "[4px]",
+		children: [icon, viewLabel]
+	}));
+	return /* @__PURE__ */ jsxs(UnstyledButton, {
+		...props,
+		className,
+		children: [folderIcon, /* @__PURE__ */ jsx(Breadcrumbs, {
+			separator: btnRightSection,
+			separatorMargin: 3,
+			children: breadcrumbs
+		})]
+	});
+}
+const btnRightSection = /* @__PURE__ */ jsx(IconChevronRight, {
+	size: 12,
+	stroke: 1.5,
+	className: "mantine-rotate-rtl"
+});
+const folderIcon = /* @__PURE__ */ jsx(IconFolderFilled, {
+	size: 16,
+	className: css({ opacity: {
+		base: "0.3",
+		_groupHover: "0.5",
+		_groupActive: "0.5",
+		_groupFocus: "0.5"
+	} })
+});
+const ColumnScrollArea = ScrollAreaAutosize.withProps({
+	scrollbars: "y",
+	className: css({ maxHeight: ["[calc(100vh - 160px)]", "[calc(100cqh - 160px)]"] })
+});
+function folderColumn(folder, context) {
+	return {
+		folderPath: folder.path,
+		items: [...folder.folders.map((s) => ({
+			type: "folder",
+			folderPath: s.path,
+			title: s.title,
+			selected: context.selectedFolder.startsWith(s.path)
+		})), ...folder.views.map((s) => ({
+			type: "view",
+			viewType: s.id === "index" ? "index" : s._type,
+			viewId: s.id,
+			title: s.titleOrId,
+			description: s.description.nonEmpty && s.description.text || null,
+			selected: s.id === context.viewModel.id
+		}))]
+	};
+}
+const selectColumns = (viewModel, selectedFolder) => {
+	if (!viewModel) return [];
+	const ctx = {
+		selectedFolder,
+		viewModel
+	};
+	const likec4model = viewModel.$model;
+	const columns = [folderColumn(likec4model.rootViewFolder, ctx)];
+	const folder = likec4model.findViewFolder(ctx.selectedFolder);
+	if (folder && !folder.isRoot) for (const b of folder.breadcrumbs) columns.push(folderColumn(b, ctx));
+	return columns;
+};
+const selectState = selectNavigationContext((c) => c.selectedFolder);
+const FolderColumns = memo(() => {
+	const selectedFolder = useNavigationActorSelector(selectState);
+	const viewModel = useOptionalCurrentViewModel();
+	const columns = selectColumns(viewModel, selectedFolder);
+	return /* @__PURE__ */ jsx(HStack, {
+		gap: "xs",
+		alignItems: "stretch",
+		children: columns.flatMap((column, i) => [i > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, "divider" + i), /* @__PURE__ */ jsx(FolderColumn, {
+			data: column,
+			isLast: i > 0 && i == columns.length - 1
+		}, column.folderPath)])
+	});
+});
+function FolderColumn({ data, isLast }) {
+	const ref = useRef(null);
+	const actor = useNavigationActorRef();
+	const onItemClicked = (item) => (e) => {
+		e.stopPropagation();
+		if (item.type === "folder") actor.send({
+			type: "select.folder",
+			folderPath: item.folderPath
+		});
+		else actor.send({
+			type: "select.view",
+			viewId: item.viewId,
+			viewFolder: data.folderPath
+		});
+	};
+	useMountEffect(() => {
+		if (isLast && ref.current) ref.current.scrollIntoView({
+			block: "nearest",
+			inline: "end",
+			behavior: "smooth"
+		});
+	});
+	return /* @__PURE__ */ jsx(Box$1, {
+		mb: "1",
+		ref,
+		children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, {
+			gap: "0.5",
+			children: data.items.map((item, i) => /* @__PURE__ */ jsx(FolderColumnItem, {
+				columnItem: item,
+				onClick: onItemClicked(item),
+				miw: "250px",
+				maw: "clamp(300px, 30cqw, 400px)"
+			}, `${data.folderPath}/${item.type}/${i}`))
+		}) })
+	});
+}
+function FolderColumnItem({ columnItem, ...props }) {
+	switch (columnItem.type) {
+		case "folder": return /* @__PURE__ */ jsx(NavigationLink, {
+			variant: "light",
+			active: columnItem.selected,
+			label: columnItem.title,
+			leftSection: folderIcon,
+			rightSection: btnRightSection,
+			...props
+		}, columnItem.folderPath);
+		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: viewIcon(columnItem.viewType),
+				...props
+			}, columnItem.viewId)
+		});
+		default: nonexhaustive(columnItem);
+	}
+}
+function SearchInput(props) {
+	const [_value, handleChange] = useUncontrolled({
+		...props,
+		finalValue: ""
+	});
+	useEffect(() => {
+		handleChange(props.defaultValue);
+	}, [props.defaultValue]);
+	return /* @__PURE__ */ jsx(Input, {
+		size: "xs",
+		placeholder: "Search by title or id",
+		variant: "unstyled",
+		height: 26,
+		value: _value,
+		onKeyDown: scopedKeydownHandler,
+		onChange: (e) => handleChange(e.currentTarget.value),
+		"data-likec4-focusable": true,
+		classNames: {
+			wrapper: css({
+				flexGrow: 1,
+				layerStyle: "surface.field",
+				rounded: "sm"
+			}),
+			input: css({
+				_placeholder: { color: "text.dimmed" },
+				_focus: { outline: "none" }
+			})
+		},
+		style: { ["--input-fz"]: "var(--mantine-font-size-sm)" },
+		leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 14 }),
+		rightSectionPointerEvents: "all",
+		rightSectionWidth: "min-content",
+		rightSection: isEmpty(_value) ? null : /* @__PURE__ */ jsx(Button, {
+			variant: "subtle",
+			h: "100%",
+			size: "compact-xs",
+			color: "gray",
+			onClick: (e) => {
+				e.stopPropagation();
+				handleChange("");
+			},
+			children: "clear"
+		})
+	});
+}
+
+//#endregion
+export { NavigationPanelDropdown };

package/dist/navigationpanel/_common.mjs

@@ -0,0 +1,50 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon, Breadcrumbs, ThemeIcon, Tooltip } from "@mantine/core";
+import * as m from "motion/react-m";
+import { navigationPanelActionIcon } from "@likec4/styles/recipes";
+
+//#region src/navigationpanel/_common.tsx
+const Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 600,
+	closeDelay: 120,
+	label: "",
+	children: null,
+	offset: 8,
+	withinPortal: false
+});
+const panelActionIconAnimation = {
+	whileHover: { scale: 1.085 },
+	whileTap: {
+		scale: 1,
+		translateY: 1
+	}
+};
+const PanelActionIcon = forwardRef(({ variant = "default", className, disabled = false, type, tooltip, ...others }, ref) => {
+	const content = /* @__PURE__ */ jsx(ActionIcon, {
+		size: "md",
+		variant: "transparent",
+		radius: "sm",
+		component: m.button,
+		...!disabled ? panelActionIconAnimation : void 0,
+		disabled,
+		...others,
+		className: cx(className, navigationPanelActionIcon({
+			variant,
+			type
+		})),
+		ref
+	});
+	if (tooltip) return /* @__PURE__ */ jsx(Tooltip$1, {
+		label: tooltip,
+		children: content
+	});
+	return content;
+});
+
+//#endregion
+export { PanelActionIcon, Tooltip$1 as Tooltip };

package/dist/navigationpanel/actor.actions.mjs

@@ -0,0 +1,51 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { typedSystem } from "../likec4diagram/state/utils.mjs";
+import { actor } from "./actor.setup.mjs";
+import { isNonNullish } from "remeda";
+import { assertEvent } from "xstate";
+
+//#region src/navigationpanel/actor.actions.ts
+const 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;
+	}
+} });
+const keepDropdownOpen = () => actor.assign({ activatedBy: "click" });
+const updateSelectedFolder = () => actor.assign(({ event }) => {
+	if (event.type === "breadcrumbs.click.root") return { selectedFolder: "" };
+	if (event.type === "select.view") return { selectedFolder: event.viewFolder ?? "" };
+	assertEvent(event, ["breadcrumbs.click.folder", "select.folder"]);
+	return { selectedFolder: event.folderPath };
+});
+const resetSelectedFolder = () => actor.assign({ selectedFolder: ({ context }) => context.viewFolder });
+const updateInputs = () => actor.enqueueActions(({ context, event, enqueue }) => {
+	assertEvent(event, "update.inputs");
+	const viewChanged = event.inputs.viewId !== context.viewId;
+	const viewFolder = event.inputs.viewFolder;
+	let selectedFolder = context.selectedFolder;
+	if (isNonNullish(viewFolder) && !viewFolder.startsWith(selectedFolder)) selectedFolder = viewFolder;
+	if (!viewChanged && viewFolder === context.viewFolder && selectedFolder === context.selectedFolder) return;
+	enqueue.assign({
+		viewId: event.inputs.viewId,
+		viewFolder: viewFolder ?? context.viewFolder,
+		selectedFolder,
+		activatedBy: viewChanged ? "hover" : context.activatedBy
+	});
+});
+const resetSearchQuery = () => actor.assign({ searchQuery: "" });
+const updateSearchQuery = () => actor.assign(({ event }) => {
+	assertEvent(event, "searchQuery.change");
+	return { searchQuery: event.value ?? "" };
+});
+const 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.mts

@@ -0,0 +1,37 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Context, Events, Input, Tags } from "./actor.setup.mjs";
+import { ActorRef, SnapshotFrom, StateMachine, StateValueFrom } from "xstate";
+//#region src/navigationpanel/actor.d.ts
+declare const _actorLogic: StateMachine<Context, Events, {}, 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", Input, import("xstate").NonReducibleUnknown, import("xstate").EventObject, import("xstate").MetaObject, {
+  id: "navigationPanel";
+  states: {
+    readonly idle: {
+      id: "idle";
+    };
+    readonly pending: {};
+    readonly active: {
+      states: {
+        readonly decide: {};
+        readonly opened: {};
+        readonly search: {};
+        readonly closing: {};
+      };
+    };
+  };
+}, import("xstate").MetaObject>;
+export interface NavigationPanelActorLogic extends StateMachine<Context, Events, any, any, any, any, any, StateValueFrom<typeof _actorLogic>, Tags, Input, any, any, any, any> {}
+export type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>;
+export interface NavigationPanelActorRef extends ActorRef<NavigationPanelActorSnapshot, Events, never> {}
+//#endregion
+export type { Context as NavigationPanelActorContext, Events as NavigationPanelActorEvent, Input as NavigationPanelActorInput };