@likec4/diagram 1.59.2 → 1.59.4

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -1,21 +1,25 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useOnDiagramEvent } from "../hooks/useDiagram.js";
+import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.js";
 import { useLikeC4Model } from "../hooks/useLikeC4Model.js";
 import { Tooltip as Tooltip$1 } from "./_common.js";
 import { selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector } from "./hooks.js";
+import { EmptyBox } from "../components/EmptyBox.js";
+import { viewIcon } from "../components/ViewIcon.js";
 import { breadcrumbTitle } from "./styles.css.js";
 import { NavigationLink } from "../components/NavigationLink.js";
 import { ProjectsMenu } from "./dropdown/ProjectsMenu.js";
 import { css, cx } from "@likec4/styles/css";
-import { IconChevronRight, IconDirectionSignFilled, IconFolderFilled, IconSearch, IconStack2, IconStarFilled, IconZoomScan } from "@tabler/icons-react";
+import { IconChevronRight, IconFolderFilled, IconSearch } from "@tabler/icons-react";
 import { memo, useDeferredValue, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMountEffect } from "@react-hookz/web";
-import { deepEqual, shallowEqual } from "fast-equals";
+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 { useSelector } from "@xstate/react";
+import "motion/react";
+import "@xstate/react";
 import { useThrottledCallback, useUncontrolled } from "@mantine/hooks";
 import { Box as Box$1, HStack, VStack } from "@likec4/styles/jsx";
 import { hstack, vstack } from "@likec4/styles/patterns";
@@ -28,10 +32,11 @@ var scopedKeydownHandler = createScopedKeydownHandler({
 	loop: true,
 	orientation: "vertical"
 });
-var hasSearchQuerySelector = selectNavigationContext((s) => s.searchQuery.trim().length >= 2);
+var hasSearchQuerySelector = selectNavigationContext((s) => s.searchQuery);
 var NavigationPanelDropdown = memo(() => {
 	const actor = useNavigationActor();
-	const hasSearchQuery = useNavigationActorSelector(hasSearchQuerySelector);
+	const searchQuery = useNavigationActorSelector(hasSearchQuerySelector);
+	const hasSearchQuery = searchQuery.trim().length >= 2;
 	useOnDiagramEvent("paneClick", () => {
 		actor.closeDropdown();
 	});
@@ -61,7 +66,7 @@ var NavigationPanelDropdown = memo(() => {
 			/* @__PURE__ */ jsx(HStack, {
 				gap: "xs",
 				children: /* @__PURE__ */ jsx(SearchInput, {
-					defaultValue: actor.actorRef.getSnapshot().context.searchQuery,
+					defaultValue: searchQuery,
 					onChange: setSearchQuery
 				})
 			}),
@@ -77,14 +82,13 @@ var NavigationPanelDropdown = memo(() => {
 	});
 });
 NavigationPanelDropdown.displayName = "NavigationPanelDropdown";
-function selectSearchQuery(s) {
-	return normalizeViewPath(s.context.searchQuery);
-}
+var selectSearchQuery = selectNavigationContext((s) => normalizeViewPath(s.searchQuery));
 var compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
 var SearchResults = memo(() => {
 	const likec4model = useLikeC4Model();
 	const actor = useNavigationActor();
-	const deferredSearchQuery = useDeferredValue(useSelector(actor.actorRef, selectSearchQuery));
+	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([]);
@@ -101,7 +105,10 @@ var SearchResults = memo(() => {
 		deferredSearchQuery,
 		isSearchByPath
 	]);
-	if (found.length === 0) return /* @__PURE__ */ jsx("div", { children: "no results" });
+	if (found.length === 0) return /* @__PURE__ */ jsx(EmptyBox, {
+		style: { minWidth: 200 },
+		children: "no results"
+	});
 	return /* @__PURE__ */ jsx(ScrollAreaAutosize, {
 		scrollbars: "xy",
 		offsetScrollbars: false,
@@ -136,8 +143,8 @@ var foundedViewClass = hstack({
 	} },
 	_focus: {
 		outline: "none",
-		color: "mantine.primary.lightColor!",
-		backgroundColor: "mantine.primary.lightHover!"
+		color: "primary.text.light!",
+		backgroundColor: "primary.body.lightHover!"
 	}
 });
 var inheritColor = css({ _groupFocus: {
@@ -146,16 +153,15 @@ var inheritColor = css({ _groupFocus: {
 } });
 function FoundedView({ view, highlight, ...props }) {
 	const folder = view.folder;
-	const viewIcon = ViewTypeIcon[view.id === "index" ? "index" : view._type];
+	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: "mantine.yellow[2]/90",
-				_dark: "mantine.yellow[5]/80",
-				_groupFocus: "[transparent]"
+				base: "highlight.body/80",
+				_groupFocus: "transparent"
 			},
-			color: { _groupFocus: "[inherit!]" }
+			color: { _groupFocus: "inherit!" }
 		} })),
 		maw: 350,
 		highlight,
@@ -165,7 +171,7 @@ function FoundedView({ view, highlight, ...props }) {
 	if (folder.isRoot) return /* @__PURE__ */ jsxs(UnstyledButton, {
 		...props,
 		className,
-		children: [viewIcon, viewLabel]
+		children: [icon, viewLabel]
 	});
 	const breadcrumbs = folder.breadcrumbs.map((b) => /* @__PURE__ */ jsx(Highlight, {
 		component: "div",
@@ -179,7 +185,7 @@ function FoundedView({ view, highlight, ...props }) {
 	}, b.path));
 	breadcrumbs.push(/* @__PURE__ */ jsxs(HStack, {
 		gap: "[4px]",
-		children: [viewIcon, viewLabel]
+		children: [icon, viewLabel]
 	}));
 	return /* @__PURE__ */ jsxs(UnstyledButton, {
 		...props,
@@ -199,39 +205,12 @@ var btnRightSection = /* @__PURE__ */ jsx(IconChevronRight, {
 var folderIcon = /* @__PURE__ */ jsx(IconFolderFilled, {
 	size: 16,
 	className: css({ opacity: {
-		base: .3,
-		_groupHover: .5,
-		_groupActive: .5,
-		_groupFocus: .5
+		base: "0.3",
+		_groupHover: "0.5",
+		_groupActive: "0.5",
+		_groupFocus: "0.5"
 	} })
 });
-var viewTypeIconCss = css({ opacity: {
-	base: .3,
-	_dark: .5,
-	_groupHover: .8,
-	_groupActive: .8,
-	_groupFocus: .8
-} });
-var ViewTypeIcon = {
-	index: /* @__PURE__ */ jsx(IconStarFilled, {
-		size: 16,
-		className: viewTypeIconCss
-	}),
-	element: /* @__PURE__ */ jsx(IconZoomScan, {
-		size: 18,
-		stroke: 2,
-		className: viewTypeIconCss
-	}),
-	deployment: /* @__PURE__ */ jsx(IconStack2, {
-		size: 16,
-		stroke: 1.5,
-		className: viewTypeIconCss
-	}),
-	dynamic: /* @__PURE__ */ jsx(IconDirectionSignFilled, {
-		size: 18,
-		className: viewTypeIconCss
-	})
-};
 var ColumnScrollArea = ScrollAreaAutosize.withProps({
 	scrollbars: "y",
 	className: css({ maxHeight: ["[calc(100vh - 160px)]", "[calc(100cqh - 160px)]"] })
@@ -248,23 +227,28 @@ function folderColumn(folder, context) {
 			type: "view",
 			viewType: s.id === "index" ? "index" : s._type,
 			viewId: s.id,
-			title: s.title ?? s.id,
+			title: s.titleOrId,
 			description: s.description.nonEmpty && s.description.text || null,
-			selected: s.id === context.viewModel?.id
+			selected: s.id === context.viewModel.id
 		}))]
 	};
 }
-var selectColumns = selectNavigationContext((ctx) => {
-	const viewModel = ctx.viewModel;
+var selectColumns = (viewModel, selectedFolder) => {
 	if (!viewModel) return [];
+	const ctx = {
+		selectedFolder,
+		viewModel
+	};
 	const likec4model = viewModel.$model;
 	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 selectState = selectNavigationContext((c) => c.selectedFolder);
 var FolderColumns = memo(() => {
-	const columns = useNavigationActorSelector(selectColumns);
+	const selectedFolder = useNavigationActorSelector(selectState);
+	const columns = selectColumns(useOptionalCurrentViewModel(), selectedFolder);
 	return /* @__PURE__ */ jsx(HStack, {
 		gap: "xs",
 		alignItems: "stretch",
@@ -285,7 +269,8 @@ function FolderColumn({ data, isLast }) {
 		});
 		else actor.send({
 			type: "select.view",
-			viewId: item.viewId
+			viewId: item.viewId,
+			viewFolder: data.folderPath
 		});
 	};
 	useMountEffect(() => {
@@ -302,7 +287,9 @@ function FolderColumn({ data, isLast }) {
 			gap: "0.5",
 			children: data.items.map((item, i) => /* @__PURE__ */ jsx(FolderColumnItem, {
 				columnItem: item,
-				onClick: onItemClicked(item)
+				onClick: onItemClicked(item),
+				miw: "250px",
+				maw: "clamp(300px, 30cqw, 400px)"
 			}, `${data.folderPath}/${item.type}/${i}`))
 		}) })
 	});
@@ -315,8 +302,6 @@ function FolderColumnItem({ columnItem, ...props }) {
 			label: columnItem.title,
 			leftSection: folderIcon,
 			rightSection: btnRightSection,
-			maw: "300px",
-			miw: "200px",
 			...props
 		}, columnItem.folderPath);
 		case "view": return /* @__PURE__ */ jsx(Tooltip$1, {
@@ -331,9 +316,7 @@ function FolderColumnItem({ columnItem, ...props }) {
 				active: columnItem.selected,
 				label: columnItem.title,
 				description: columnItem.description,
-				leftSection: ViewTypeIcon[columnItem.viewType],
-				maw: "300px",
-				miw: "200px",
+				leftSection: viewIcon(columnItem.viewType),
 				...props
 			}, columnItem.viewId)
 		});
@@ -345,6 +328,9 @@ function SearchInput(props) {
 		...props,
 		finalValue: ""
 	});
+	useEffect(() => {
+		handleChange(props.defaultValue);
+	}, [props.defaultValue]);
 	return /* @__PURE__ */ jsx(Input, {
 		size: "xs",
 		placeholder: "Search by title or id",
@@ -357,18 +343,7 @@ function SearchInput(props) {
 		classNames: {
 			wrapper: css({
 				flexGrow: 1,
-				backgroundColor: {
-					base: "mantine.gray[1]",
-					_dark: "mantine.dark[5]/80",
-					_hover: {
-						base: "mantine.gray[2]",
-						_dark: "mantine.dark[4]"
-					},
-					_focus: {
-						base: "mantine.gray[2]",
-						_dark: "mantine.dark[4]"
-					}
-				},
+				layerStyle: "surface.field",
 				rounded: "sm"
 			}),
 			input: css({
@@ -380,7 +355,7 @@ function SearchInput(props) {
 		leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 14 }),
 		rightSectionPointerEvents: "all",
 		rightSectionWidth: "min-content",
-		rightSection: !props.value || isEmpty(props.value) ? null : /* @__PURE__ */ jsx(Button, {
+		rightSection: isEmpty(_value) ? null : /* @__PURE__ */ jsx(Button, {
 			variant: "subtle",
 			h: "100%",
 			size: "compact-xs",

package/dist/navigationpanel/_common.d.ts

@@ -1,9 +1,9 @@
-import { NavigationPanelActionIconVariant } from '../../styled-system/recipes';
-import { ActionIconProps, TooltipProps, PlaceholderPolymorphicProps, BreadcrumbsProps } from '@mantine/core';
+import { NavigationPanelActionIconVariant } from '@likec4/styles/recipes';
+import { ActionIconProps, TooltipProps, PlaceholderPolymorphicProps } from '@mantine/core';
 import { HTMLMotionProps } from 'motion/react';
-import { NamedExoticComponent, RefAttributes, ForwardRefExoticComponent } from 'react';
+import { ReactNode, NamedExoticComponent, RefAttributes, ForwardRefExoticComponent } from 'react';
 export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
-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 type PanelActionIconProps = Partial<NavigationPanelActionIconVariant> & Omit<ActionIconProps, keyof NavigationPanelActionIconVariant> & Omit<HTMLMotionProps<'button'>, keyof NavigationPanelActionIconVariant> & {
+    tooltip?: ReactNode;
+};
 export declare const PanelActionIcon: ForwardRefExoticComponent<Omit<PanelActionIconProps, "ref"> & RefAttributes<HTMLButtonElement>>;

package/dist/navigationpanel/_common.js

@@ -1,9 +1,9 @@
 import "../_virtual/_rolldown/runtime.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconChevronRight } from "@tabler/icons-react";
+import { cx } from "@likec4/styles/css";
+import "@tabler/icons-react";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ActionIcon, Breadcrumbs, ThemeIcon, Tooltip } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
 import * as m from "motion/react-m";
 import { navigationPanelActionIcon } from "@likec4/styles/recipes";
 //#region src/navigationpanel/_common.tsx
@@ -17,44 +17,33 @@ var Tooltip$1 = Tooltip.withProps({
 	offset: 8,
 	withinPortal: false
 });
-var BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(ThemeIcon, {
-	variant: "transparent",
-	size: 16,
-	className: css({
-		display: {
-			base: "none",
-			"@/md": "flex"
-		},
-		color: {
-			base: "mantine.gray[5]",
-			_dark: "mantine.dark[3]"
-		}
-	}),
-	children: /* @__PURE__ */ jsx(IconChevronRight, {})
+var panelActionIconAnimation = {
+	whileHover: { scale: 1.085 },
+	whileTap: {
+		scale: 1,
+		translateY: 1
+	}
+};
+var 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;
 });
-Breadcrumbs.withProps({
-	separator: /* @__PURE__ */ jsx(BreadcrumbsSeparator, {}),
-	separatorMargin: 4
-});
-var PanelActionIcon = forwardRef(({ variant = "default", className, disabled = false, type, ...others }, ref) => /* @__PURE__ */ jsx(ActionIcon, {
-	size: "md",
-	variant: "transparent",
-	radius: "sm",
-	component: m.button,
-	...!disabled && {
-		whileHover: { scale: 1.085 },
-		whileTap: {
-			scale: 1,
-			translateY: 1
-		}
-	},
-	disabled,
-	...others,
-	className: cx(className, navigationPanelActionIcon({
-		variant,
-		type
-	})),
-	ref
-}));
 //#endregion
-export { BreadcrumbsSeparator, PanelActionIcon, Tooltip$1 as Tooltip };
+export { PanelActionIcon, Tooltip$1 as Tooltip };

package/dist/navigationpanel/actor.actions.js

@@ -13,18 +13,19 @@ var updateActivatedBy = () => actor.assign({ activatedBy: ({ context, event }) =
 var keepDropdownOpen = () => actor.assign({ activatedBy: "click" });
 var 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 };
 });
-var resetSelectedFolder = () => actor.assign({ selectedFolder: ({ context }) => context.viewModel?.folder.path ?? "" });
+var resetSelectedFolder = () => actor.assign({ selectedFolder: ({ context }) => context.viewFolder });
 var updateInputs = () => actor.assign(({ context, event }) => {
 	assertEvent(event, "update.inputs");
-	const viewChanged = event.inputs.viewModel?.id !== context.viewModel?.id;
+	const viewChanged = event.inputs.viewId !== context.viewId;
 	let selectedFolder = context.selectedFolder;
-	if (!event.inputs.viewModel?.folder.path.startsWith(selectedFolder)) selectedFolder = event.inputs.viewModel?.folder.path ?? "";
+	if (event.inputs.viewFolder && !event.inputs.viewFolder.startsWith(selectedFolder)) selectedFolder = event.inputs.viewFolder;
 	return {
-		view: event.inputs.view,
-		viewModel: event.inputs.viewModel,
+		viewId: event.inputs.viewId,
+		viewFolder: event.inputs.viewFolder ?? context.viewFolder,
 		selectedFolder,
 		activatedBy: viewChanged ? "hover" : context.activatedBy
 	};

package/dist/navigationpanel/actor.js

@@ -65,7 +65,7 @@ var navigationPanelActorLogic = actor.createMachine({
 					"breadcrumbs.click.viewtitle": { actions: resetSelectedFolder() },
 					"breadcrumbs.click.*": { actions: updateSelectedFolder() },
 					"select.folder": { actions: [keepDropdownOpen(), updateSelectedFolder()] },
-					"select.view": { actions: emitNavigateTo() }
+					"select.view": { actions: [emitNavigateTo(), updateSelectedFolder()] }
 				} },
 				search: { on: {
 					"breadcrumbs.click.viewtitle": {
@@ -76,7 +76,7 @@ var navigationPanelActorLogic = actor.createMachine({
 						actions: [resetSearchQuery(), updateSelectedFolder()],
 						target: "opened"
 					},
-					"select.view": { actions: emitNavigateTo() }
+					"select.view": { actions: [emitNavigateTo(), updateSelectedFolder()] }
 				} },
 				closing: {
 					on: {

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

@@ -1,9 +1,8 @@
-import { LayoutedView, ViewId } from '@likec4/core/types';
-import { CurrentViewModel } from '../hooks/useCurrentViewModel';
+import { ViewId } from '@likec4/core/types';
 import { SetupReturn, NonReducibleUnknown, EventObject, MetaObject } from 'xstate';
 export interface Input {
-    view: LayoutedView;
-    viewModel: CurrentViewModel | null;
+    viewId: ViewId;
+    viewFolder?: string | undefined;
 }
 export type Events = {
     type: 'update.inputs';
@@ -19,6 +18,7 @@ export type Events = {
 } | {
     type: 'select.view';
     viewId: ViewId;
+    viewFolder?: string | undefined;
 } | {
     type: 'breadcrumbs.mouseLeave';
 } | {
@@ -72,8 +72,8 @@ export type DropdownColumnItem = {
     selected: boolean;
 };
 export interface Context {
-    view: LayoutedView;
-    viewModel: CurrentViewModel | null;
+    viewId: ViewId;
+    viewFolder: string;
     /**
      * Who activated the dropdown
      * (if `click` then the dropdown is always open until dismissed)

package/dist/navigationpanel/actor.setup.js

@@ -4,7 +4,8 @@ import { setup } from "xstate";
 //#region src/navigationpanel/actor.setup.ts
 function Context({ input }) {
 	return {
-		...input,
+		viewId: input.viewId,
+		viewFolder: input.viewFolder ?? "",
 		activatedBy: "hover",
 		selectedFolder: "",
 		searchQuery: ""

package/dist/navigationpanel/comparepanel/CompareActionsMenu.js

@@ -14,9 +14,7 @@ function CompareActionsMenu({ disabled = false, onApplyLatestToManual, onResetMa
 		shadow: "lg",
 		position: "bottom-start",
 		offset: { mainAxis: 4 },
-		disabled,
 		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, {
-			disabled,
 			className: cx("mantine-active", hstack({
 				gap: "2",
 				py: "1.5",
@@ -33,7 +31,7 @@ function CompareActionsMenu({ disabled = false, onApplyLatestToManual, onResetMa
 				opacity: .7
 			})]
 		}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [/* @__PURE__ */ jsxs(Menu.Item, {
-			disabled: !onApplyLatestToManual,
+			disabled,
 			onClick: onApplyLatestToManual,
 			rightSection: onApplyLatestToManual && /* @__PURE__ */ jsx(Tooltip, {
 				onClick: stopPropagation,
@@ -60,7 +58,7 @@ function CompareActionsMenu({ disabled = false, onApplyLatestToManual, onResetMa
 			})]
 		}), /* @__PURE__ */ jsx(Menu.Item, {
 			onClick: onResetManualLayout,
-			children: "Remove manual layout"
+			children: "Reset layout"
 		})] })]
 	});
 }

package/dist/navigationpanel/comparepanel/ComparePanel.js

@@ -1,6 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useCallbackRef } from "../../hooks/useCallbackRef.js";
-import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
 import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
 import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
 import { Tooltip as Tooltip$1 } from "../_common.js";
@@ -33,7 +32,6 @@ var variants = {
 var ComparePanel = memo(() => {
 	const portalProps = useMantinePortalProps();
 	const isMounted = useIsMounted();
-	const { enableCompareWithLatest } = useEnabledFeatures();
 	const [ctx, ops] = useDiagramCompareLayout();
 	const [isProcessing, setIsProcessing] = useState(false);
 	const resetProcessing = () => {
@@ -61,9 +59,9 @@ var ComparePanel = memo(() => {
 			resetProcessing();
 		}, 200);
 	});
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: enableCompareWithLatest && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(m$1.div, {
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: ctx.state === "comparing" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(m$1.div, {
 		layout: "size",
-		layoutDependency: ctx.drifts || ctx.layout,
+		layoutDependency: ctx.layout,
 		className: hstack({
 			gap: "2",
 			layerStyle: "likec4.panel",
@@ -80,7 +78,7 @@ var ComparePanel = memo(() => {
 		children: /* @__PURE__ */ jsx(ComparePanelControls, {})
 	}, "ComparePanel"), /* @__PURE__ */ jsxs(m$1.div, {
 		layout: "size",
-		layoutDependency: ctx.drifts || ctx.layout,
+		layoutDependency: ctx.layout,
 		variants,
 		initial: "initial",
 		animate: "animate",
@@ -93,12 +91,12 @@ var ComparePanel = memo(() => {
 			pointerEvents: "all",
 			height: "auto",
 			overflow: "hidden",
-			maxHeight: "calc(100cqh - 180px)",
-			"@/md": { minWidth: "200px" }
+			maxHeight: "[calc(100cqh - 180px)]",
+			"@/md": { minWidth: "[200px]" }
 		}),
 		children: [/* @__PURE__ */ jsx(DriftsSummary, {}), ctx.canApplyLatest && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(m$1.div, {
 			layout: "position",
-			className: css({ flex: "0" }),
+			className: css({ flex: "[0]" }),
 			children: [/* @__PURE__ */ jsx(Divider, {
 				orientation: "horizontal",
 				size: "xs",
@@ -117,13 +115,13 @@ var ComparePanel = memo(() => {
 					disabled: ctx.layout === "auto",
 					children: "Apply changes"
 				})
-			}), !isProcessing && /* @__PURE__ */ jsx(Tooltip$1, {
+			}), /* @__PURE__ */ jsx(Tooltip$1, {
 				openDelay: 100,
 				disabled: ctx.layout !== "manual",
 				label: "Reset manual layout",
 				...portalProps,
 				children: /* @__PURE__ */ jsx(Button, {
-					hidden: isProcessing,
+					disabled: isProcessing,
 					size: "xs",
 					color: "orange",
 					variant: "subtle",

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

@@ -1 +1 @@
-export declare function DriftsSummary(): import("react").JSX.Element | null;
+export declare function DriftsSummary(): import("react").JSX.Element;

package/dist/navigationpanel/comparepanel/DriftsSummary.js

@@ -84,8 +84,8 @@ function DriftsSummary() {
 		})
 	};
 	const { view, nodes, edges } = selected;
-	if (view.length === 0 && nodes.length === 0 && edges.length === 0) return null;
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(m.div, {
+	const hasDrifts = view.length > 0 || nodes.length > 0 || edges.length > 0;
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: hasDrifts && /* @__PURE__ */ jsxs(m.div, {
 		layout: "size",
 		variants,
 		initial: "initial",
@@ -146,15 +146,15 @@ function NodeDrifts({ id, name, drifts, ...handlers }) {
 		...handlers,
 		children: [/* @__PURE__ */ jsx(Txt, {
 			truncate: true,
+			medium: true,
 			css: { maxWidth: {
-				base: 160,
-				"@/sm": 180,
-				"@/md": 250
+				base: "[160px]",
+				"@/sm": "[180px]",
+				"@/md": "[250px]"
 			} },
-			color: "likec4.compare.manual.outline",
+			color: "likec4.compare.outline",
 			fontSize: "xs",
 			lineHeight: "sm",
-			fontWeight: "medium",
 			children: name
 		}), map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))]
 	}, key);
@@ -175,10 +175,12 @@ var DriftsGroup = styled(m.div, { base: vstack.raw({
 	cursor: "default",
 	rounded: "sm",
 	backgroundColor: "likec4.compare.manual/10",
-	border: "1px solid {colors.likec4.compare.manual.outline/20}",
+	borderWidth: "default",
+	borderStyle: "solid",
+	borderColor: "likec4.compare.outline/20",
 	_hover: {
 		backgroundColor: "likec4.compare.manual/20",
-		borderColor: "likec4.compare.manual.outline/25"
+		borderColor: "likec4.compare.outline/25"
 	}
 }) }, { defaultProps: {
 	className: "group",