@likec4/diagram 1.60.0 → 1.61.0

package/dist/{likec4diagram/ui → navigationpanel/comparepanel}/LayoutDriftFrame.mjs

@@ -1,13 +1,11 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.mjs";
 import { css, cx } from "@likec4/styles/css";
-import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { UnstyledButton } from "@mantine/core";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 
-//#region src/likec4diagram/ui/LayoutDriftFrame.tsx
+// src/navigationpanel/comparepanel/LayoutDriftFrame.tsx
 const borderColors = {
 	manual: css({ borderColor: "likec4.compare.manual" }),
 	auto: css({ borderColor: "likec4.compare.latest" })
@@ -16,8 +14,7 @@ const bgColors = {
 	manual: css({ backgroundColor: "likec4.compare.manual" }),
 	auto: css({ backgroundColor: "likec4.compare.latest" })
 };
-const LayoutDriftFrame = memo(() => {
-	const [{ layout, state }, { toggleCompare }] = useDiagramCompareLayout();
+const LayoutDriftFrame = ({ layout, onClose }) => {
 	return /* @__PURE__ */ jsx(Box$1, {
 		className: cx(hstack({
 			position: "absolute",
@@ -31,20 +28,17 @@ const LayoutDriftFrame = memo(() => {
 			alignItems: "flex-start",
 			justifyContent: "center"
 		}), borderColors[layout]),
-		style: {
-			zIndex: "9999",
-			display: state == "inactive" ? "none" : void 0
-		},
+		style: { zIndex: "9999" },
 		children: /* @__PURE__ */ jsx(Btn, {
 			className: bgColors[layout],
 			onClick: (e) => {
 				e.stopPropagation();
-				toggleCompare();
+				onClose();
 			},
 			children: "Close compare"
 		})
 	});
-});
+};
 const Btn = UnstyledButton.withProps({ classNames: { root: css({
 	fontSize: "xs",
 	fontWeight: "medium",
@@ -56,8 +50,8 @@ const Btn = UnstyledButton.withProps({ classNames: { root: css({
 	px: "4",
 	color: "mantine.gray[9]",
 	pointerEvents: "all",
+	transition: "[transform 100ms ease-out]",
 	_active: { transform: "translateY(-3px)" }
 }) } });
 
-//#endregion
 export { LayoutDriftFrame };

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.mjs

@@ -3,9 +3,8 @@ import { css } from "@likec4/styles/css";
 import { jsx } from "react/jsx-runtime";
 import { invariant } from "@likec4/core";
 import { SegmentedControl } from "@mantine/core";
-import * as m from "motion/react-m";
 
-//#region src/navigationpanel/comparepanel/LayoutTypeSwitcher.tsx
+// src/navigationpanel/comparepanel/LayoutTypeSwitcher.tsx
 const data = [{
 	value: "manual",
 	label: "Saved manual"
@@ -14,24 +13,20 @@ const data = [{
 	label: "Latest auto"
 }];
 function LayoutTypeSwitcher({ value, onChange }) {
-	return /* @__PURE__ */ jsx(m.div, {
-		layout: "position",
-		children: /* @__PURE__ */ jsx(SegmentedControl, {
-			size: "xs",
-			color: value === "manual" ? "orange" : "green",
-			value,
-			onChange: (layout) => {
-				invariant(layout === "manual" || layout === "auto", "Invalid layout type");
-				onChange(layout);
-			},
-			classNames: { label: css({
-				fontSize: "xxs",
-				fontWeight: "medium"
-			}) },
-			data
-		})
+	return /* @__PURE__ */ jsx(SegmentedControl, {
+		size: "xs",
+		color: value === "manual" ? "orange" : "green",
+		value,
+		onChange: (layout) => {
+			invariant(layout === "manual" || layout === "auto", "Invalid layout type");
+			onChange(layout);
+		},
+		classNames: { label: css({
+			fontSize: "xxs",
+			fontWeight: "medium"
+		}) },
+		data
 	});
 }
 
-//#endregion
 export { LayoutTypeSwitcher };

package/dist/navigationpanel/controls/LayoutWarning.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconAlertTriangle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.mjs";
-import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
+import IconAlertTriangle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.mjs";
 import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.mjs";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
 import { cx } from "@likec4/styles/css";
 import { Fragment, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +11,7 @@ import { hstack } from "@likec4/styles/patterns";
 import * as m$1 from "motion/react-m";
 import { navigationPanelActionIcon } from "@likec4/styles/recipes";
 
-//#region src/navigationpanel/controls/LayoutWarning.tsx
+// src/navigationpanel/controls/LayoutWarning.tsx
 const LayoutWarning = memo(() => {
 	const [ctx, { toggleCompare }] = useDiagramCompareLayout();
 	const portalProps = useMantinePortalProps();
@@ -87,5 +87,4 @@ const LayoutWarning = memo(() => {
 });
 LayoutWarning.displayName = "ManualLayoutWarning";
 
-//#endregion
 export { LayoutWarning };

package/dist/navigationpanel/controls/LogoButton.mjs

@@ -1,20 +1,17 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { NavigationPanel } from "../../components/NavigationPanel.mjs";
 import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.mjs";
 import { useNavigationActor } from "../hooks.mjs";
-import { Logo, LogoIcon } from "../../components/Logo.mjs";
-import { css, cx } from "@likec4/styles/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { UnstyledButton } from "@mantine/core";
-import { hstack } from "@likec4/styles/patterns";
+import { jsx } from "react/jsx-runtime";
 import * as m from "motion/react-m";
 
-//#region src/navigationpanel/controls/LogoButton.tsx
+// src/navigationpanel/controls/LogoButton.tsx
 const LogoButton = () => {
 	const actor = useNavigationActor();
 	const { onLogoClick } = useDiagramEventHandlers();
 	return /* @__PURE__ */ jsx(m.div, {
 		layout: "position",
-		children: /* @__PURE__ */ jsxs(UnstyledButton, {
+		children: /* @__PURE__ */ jsx(NavigationPanel.Logo, {
 			onMouseEnter: () => {
 				actor.send({ type: "breadcrumbs.mouseEnter.root" });
 			},
@@ -27,24 +24,9 @@ const LogoButton = () => {
 					onLogoClick();
 				}, 100);
 				actor.send({ type: "breadcrumbs.click.root" });
-			},
-			className: cx("mantine-active", hstack({
-				padding: "0.5",
-				width: {
-					base: "[20px]",
-					"@/md": "[64px]"
-				}
-			})),
-			children: [/* @__PURE__ */ jsx(Logo, { className: css({ display: {
-				base: "none",
-				"@/md": "block"
-			} }) }), /* @__PURE__ */ jsx(LogoIcon, { className: css({ display: {
-				base: "block",
-				"@/md": "none"
-			} }) })]
+			}
 		})
 	});
 };
 
-//#endregion
 export { LogoButton };

package/dist/navigationpanel/controls/NavigationBreadcrumbs.mjs

@@ -0,0 +1,110 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import { NavigationPanel } from "../../components/NavigationPanel.mjs";
+import { useNavigationActorRef } from "../hooks.mjs";
+import { css } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, LayoutGroup } from "motion/react";
+import { hstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+
+// src/navigationpanel/controls/NavigationBreadcrumbs.tsx
+const breadcrumbAnimation = {
+	initial: {
+		opacity: 0,
+		translateX: -5,
+		translateY: 0
+	},
+	animate: {
+		opacity: 1,
+		translateX: 0,
+		translateY: 0,
+		transition: { duration: .17 }
+	},
+	exit: {
+		opacity: 0,
+		translateX: -5,
+		translateY: 0,
+		transition: { duration: .09 }
+	},
+	whileTap: { translateY: 1 }
+};
+function NavigationBreadcrumbs({ viewTitle, viewModel }) {
+	const actor = useNavigationActorRef();
+	const folder = viewModel?.folder;
+	const folderBreadcrumbs = (!folder || folder.isRoot ? [] : folder.breadcrumbs.map((s) => ({
+		folderPath: s.path,
+		title: s.title
+	}))).reduceRight((prev, { folderPath, title }, index, all) => [/* @__PURE__ */ jsxs(NavigationPanel.Breadcrumb, {
+		layoutId: `folder-${index}`,
+		layoutAnchor: false,
+		layout: "position",
+		"data-dimmed": "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, /* @__PURE__ */ jsx(IconChevronRight, {
+			className: css({ color: "text.non-essential" }),
+			style: {
+				verticalAlign: "text-bottom",
+				height: "16px"
+			},
+			size: 16
+		})]
+	}, folderPath), ...prev], []);
+	return /* @__PURE__ */ jsx(m$1.div, {
+		layout: "size",
+		className: hstack({
+			position: "relative",
+			gap: "1",
+			flexShrink: 1,
+			flexGrow: 1,
+			flexWrap: "nowrap",
+			overflow: "hidden"
+		}),
+		children: /* @__PURE__ */ jsx(LayoutGroup, {
+			id: "navigation-panel-breadcrumbs",
+			children: /* @__PURE__ */ jsxs(AnimatePresence, {
+				mode: "popLayout",
+				anchorX: "left",
+				children: [folderBreadcrumbs, /* @__PURE__ */ jsx(NavigationPanel.Breadcrumb, {
+					layout: "position",
+					...breadcrumbAnimation,
+					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
+				}, "view-title")]
+			})
+		})
+	});
+}
+
+export { NavigationBreadcrumbs };

package/dist/navigationpanel/controls/NavigationButtons.mjs

@@ -1,13 +1,13 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconArrowLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.mjs";
-import IconArrowRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs";
+import IconArrowLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.mjs";
+import IconArrowRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs";
 import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
 import { PanelActionIcon } from "../_common.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { hstack } from "@likec4/styles/patterns";
 import * as m from "motion/react-m";
 
-//#region src/navigationpanel/controls/NavigationButtons.tsx
+// src/navigationpanel/controls/NavigationButtons.tsx
 const selectNavigationState = selectDiagramContext((s) => ({
 	hasStepBack: s.navigationHistory.currentIndex > 0,
 	hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
@@ -36,5 +36,4 @@ function NavigationButtons() {
 	});
 }
 
-//#endregion
 export { NavigationButtons };

package/dist/navigationpanel/controls/OpenSource.mjs

@@ -1,10 +1,10 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconFileSymlink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.mjs";
+import IconFileSymlink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.mjs";
 import { useDiagram } from "../../hooks/safeContext.mjs";
 import { PanelActionIcon, Tooltip } from "../_common.mjs";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/navigationpanel/controls/OpenSource.tsx
+// src/navigationpanel/controls/OpenSource.tsx
 const OpenSource = () => {
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsx(Tooltip, {
@@ -24,5 +24,4 @@ const OpenSource = () => {
 	});
 };
 
-//#endregion
 export { OpenSource };

package/dist/navigationpanel/controls/SearchControl.mjs

@@ -1,5 +1,5 @@
 import { __name } from "../../_virtual/_rolldown/runtime.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 IconSearch from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
 import { useDiagram } from "../../hooks/safeContext.mjs";
 import { cx } from "@likec4/styles/css";
 import { useRef } from "react";
@@ -10,7 +10,7 @@ import { m } from "motion/react";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 
-//#region src/navigationpanel/controls/SearchControl.tsx
+// src/navigationpanel/controls/SearchControl.tsx
 function SearchControl() {
 	const diagram = useDiagram();
 	const isMac = isMacOs();
@@ -66,5 +66,4 @@ function SearchControl() {
 	});
 }
 
-//#endregion
 export { SearchControl };

package/dist/navigationpanel/controls/ToggleReadonly.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconLockOpen2 from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.mjs";
-import IconLock from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.mjs";
+import IconLock from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.mjs";
+import IconLockOpen2 from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.mjs";
 import { useDiagram } from "../../hooks/safeContext.mjs";
 import { css, cx } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,7 +8,38 @@ import { UnstyledButton } from "@mantine/core";
 import { m } from "motion/react";
 import { hstack } from "@likec4/styles/patterns";
 
-//#region src/navigationpanel/controls/ToggleReadonly.tsx
+// src/navigationpanel/controls/ToggleReadonly.tsx
+const motionProps = {
+	initial: {
+		opacity: 0,
+		scale: .9,
+		translateX: -10
+	},
+	animate: {
+		opacity: [
+			.8,
+			.9,
+			1
+		],
+		scale: 1,
+		translateX: 0
+	},
+	whileTap: { translateY: 1 },
+	exit: {
+		opacity: 0,
+		scale: .9,
+		translateX: -10,
+		transition: {
+			duration: .2,
+			ease: [
+				.23,
+				1,
+				.32,
+				1
+			]
+		}
+	}
+};
 function ToggleReadonly({ disabled, isReadOnly }) {
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsxs(UnstyledButton, {
@@ -20,22 +51,7 @@ function ToggleReadonly({ disabled, isReadOnly }) {
 			e.stopPropagation();
 			!disabled && diagram.toggleFeature("ReadOnly");
 		},
-		initial: {
-			opacity: 0,
-			scale: .9,
-			translateX: -10
-		},
-		animate: {
-			opacity: 1,
-			scale: disabled ? .95 : 1,
-			translateX: 0
-		},
-		exit: {
-			opacity: 0,
-			scale: .9,
-			translateX: -10
-		},
-		whileTap: { translateY: 1 },
+		...motionProps,
 		className: cx("group", hstack({
 			gap: "0.5",
 			paddingInline: "xxs",
@@ -55,7 +71,7 @@ function ToggleReadonly({ disabled, isReadOnly }) {
 				style: { display: !isReadOnly ? "none" : void 0 }
 			}),
 			isReadOnly && /* @__PURE__ */ jsx(m.div, {
-				layout: true,
+				layout: "position",
 				className: css({
 					fontSize: "xxs",
 					fontWeight: "bold",
@@ -68,5 +84,4 @@ function ToggleReadonly({ disabled, isReadOnly }) {
 	});
 }
 
-//#endregion
 export { ToggleReadonly };

package/dist/navigationpanel/controls/ViewDetailsButton.mjs

@@ -1,9 +1,9 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconId from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.mjs";
-import IconLink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.mjs";
-import { useRootContainer } from "../../context/RootContainerContext.mjs";
-import { selectDiagramContext, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import IconId from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.mjs";
+import IconLink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.mjs";
 import { FloatingWindow as FloatingWindow$1 } from "../../components/FloatingWindow.mjs";
+import { useRootContainer } from "../../context/RootContainerContext.mjs";
+import { useIsComparingLayouts } from "../../context/ComparingLayoutsContext.mjs";
 import { ViewDetailsWindow } from "../windows/ViewDetailsWindow.mjs";
 import { cx } from "@likec4/styles/css";
 import { useRef } from "react";
@@ -15,17 +15,11 @@ import { Box as Box$1, HStack } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 import * as m from "motion/react-m";
 
-//#region src/navigationpanel/controls/ViewDetailsButton.tsx
-const selector = selectDiagramContext(({ view }) => {
-	return {
-		id: view.id,
-		links: view.links?.length ?? 0
-	};
-});
-function ViewDetailsButton({ onOpen }) {
+// src/navigationpanel/controls/ViewDetailsButton.tsx
+function ViewDetailsButton({ linksCount, onOpen }) {
 	const { ref: rootRef } = useRootContainer();
 	const [opened, handlers] = useDisclosure(false);
-	const data = useDiagramSelector(selector);
+	const isComparing = useIsComparingLayouts();
 	const initialsRef = useRef({
 		dimensions: {
 			initialWidth: 200,
@@ -60,12 +54,16 @@ function ViewDetailsButton({ onOpen }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ViewDetailsCardTrigger, {
-		linksCount: data.links,
+		linksCount,
 		onClick: toggle,
 		opened
 	}), opened && /* @__PURE__ */ jsx(FloatingWindow$1, {
 		windowId: "view-details",
 		...initialsRef.current,
+		style: isComparing ? {
+			opacity: .35,
+			pointerEvents: "none"
+		} : void 0,
 		onClose: handlers.close,
 		children: /* @__PURE__ */ jsx(ViewDetailsWindow, {})
 	})] });
@@ -120,5 +118,4 @@ const ViewDetailsCardTrigger = ({ linksCount, onClick, opened }) => /* @__PURE__
 	})]
 });
 
-//#endregion
 export { ViewDetailsButton };

package/dist/navigationpanel/dropdown/ProjectsMenu.mjs

@@ -1,13 +1,15 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconChevronDown from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.mjs";
+import IconChevronDown from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.mjs";
+import IconSearch from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
 import { useLikeC4ProjectId, useLikeC4ProjectsContext } from "../../hooks/useLikeC4Project.mjs";
+import { filterProjects, projectSearchHighlights } from "../../utils/filterProjects.mjs";
 import { css } from "@likec4/styles/css";
-import { memo } from "react";
+import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, Menu, MenuDropdown, MenuItem, MenuTarget, ScrollArea } from "@mantine/core";
+import { Button, Highlight, Menu, MenuDropdown, MenuItem, MenuSearch, MenuTarget, ScrollArea } from "@mantine/core";
 import { Box as Box$1, HStack } from "@likec4/styles/jsx";
 
-//#region src/navigationpanel/dropdown/ProjectsMenu.tsx
+// src/navigationpanel/dropdown/ProjectsMenu.tsx
 const ProjectsMenu = memo((_) => {
 	const { projects, onProjectChange } = useLikeC4ProjectsContext();
 	if (projects.length <= 1) return null;
@@ -18,6 +20,9 @@ const ProjectsMenu = memo((_) => {
 });
 function WithProjectsMenu({ projects, onProjectChange }) {
 	const projectId = useLikeC4ProjectId();
+	const [search, setSearch] = useState("");
+	const found = filterProjects(projects, search);
+	const highlight = projectSearchHighlights(search);
 	return /* @__PURE__ */ jsxs(HStack, {
 		gap: "1",
 		alignItems: "baseline",
@@ -33,10 +38,10 @@ function WithProjectsMenu({ projects, onProjectChange }) {
 			withinPortal: false,
 			shadow: "md",
 			position: "bottom-start",
+			width: 300,
 			classNames: { itemLabel: css({
 				fontSize: "xs",
-				truncate: true,
-				maxWidth: "[250px]"
+				truncate: true
 			}) },
 			offset: { mainAxis: 3 },
 			children: [/* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(Button, {
@@ -64,9 +69,33 @@ function WithProjectsMenu({ projects, onProjectChange }) {
 					stroke: 1.5
 				}),
 				children: projectId
-			}) }), /* @__PURE__ */ jsx(MenuDropdown, { children: /* @__PURE__ */ jsx(ScrollArea.Autosize, {
-				mah: "calc(100cqh - 200px)",
-				children: projects.map(({ id, title }) => /* @__PURE__ */ jsx(MenuItem, {
+			}) }), /* @__PURE__ */ jsxs(MenuDropdown, { children: [/* @__PURE__ */ jsx(MenuSearch, {
+				size: "xs",
+				mb: 4,
+				placeholder: `Search ${projects.length} projects (* wildcard)`,
+				leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 12 }),
+				value: search,
+				onChange: (e) => setSearch(e.currentTarget.value)
+			}), /* @__PURE__ */ jsxs(ScrollArea.Autosize, {
+				mah: "min(60vh, 420px)",
+				type: "auto",
+				children: [found.length === 0 && /* @__PURE__ */ jsx(Box$1, {
+					css: {
+						fontSize: "xs",
+						color: "text.dimmed",
+						px: "2",
+						py: "1"
+					},
+					children: "No matching project"
+				}), found.map(({ id, title }) => /* @__PURE__ */ jsx(MenuItem, {
+					fw: projectId === id ? 600 : void 0,
+					rightSection: title && title !== id && /* @__PURE__ */ jsx(Highlight, {
+						component: "span",
+						highlight,
+						fz: "10px",
+						c: "dimmed",
+						children: id
+					}),
 					onClick: (e) => {
 						if (projectId === id) {
 							e.stopPropagation();
@@ -74,12 +103,16 @@ function WithProjectsMenu({ projects, onProjectChange }) {
 						}
 						onProjectChange(id);
 					},
-					children: title ?? id
-				}, id))
-			}) })]
+					children: /* @__PURE__ */ jsx(Highlight, {
+						component: "span",
+						highlight,
+						inherit: true,
+						children: title ?? id
+					})
+				}, id))]
+			})] })]
 		})]
 	});
 }
 
-//#endregion
 export { ProjectsMenu };

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.mjs

@@ -1,13 +1,13 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconSparkles from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSparkles.mjs";
+import IconSparkles from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSparkles.mjs";
 import { useDiagram } from "../../hooks/safeContext.mjs";
-import { PanelActionIcon } from "../_common.mjs";
 import { useEditorActorStateHasTag } from "../../hooks/useEditorActor.mjs";
+import { PanelActionIcon } from "../_common.mjs";
 import { Tooltip } from "./_common.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/navigationpanel/editorpanel/ApplySemanticLayout.tsx
+// src/navigationpanel/editorpanel/ApplySemanticLayout.tsx
 const ApplySemanticLayout = memo(({ visible = true }) => {
 	const diagram = useDiagram();
 	const isBusy = useEditorActorStateHasTag("ai-semantic-layout");
@@ -35,5 +35,4 @@ const ApplySemanticLayout = memo(({ visible = true }) => {
 });
 ApplySemanticLayout.displayName = "ApplySemanticLayout";
 
-//#endregion
 export { ApplySemanticLayout };

package/dist/navigationpanel/editorpanel/CenterCamera.mjs

@@ -1,11 +1,11 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconFocusCentered from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.mjs";
+import IconFocusCentered from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.mjs";
 import { useDiagram } from "../../hooks/safeContext.mjs";
 import { PanelActionIcon } from "../_common.mjs";
 import { Tooltip } from "./_common.mjs";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/navigationpanel/editorpanel/CenterCamera.tsx
+// src/navigationpanel/editorpanel/CenterCamera.tsx
 const CenterCamera = () => {
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsx(Tooltip, {
@@ -17,5 +17,4 @@ const CenterCamera = () => {
 	});
 };
 
-//#endregion
 export { CenterCamera };