@likec4/diagram 1.60.0 → 1.61.0

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconLayoutDashboard from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.mjs";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import IconLayoutDashboard from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.mjs";
 import { useCurrentViewRouting } from "../../hooks/useCurrentView.mjs";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
 import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
 import { PanelActionIcon } from "../_common.mjs";
 import { Tooltip as Tooltip$1 } from "./_common.mjs";
@@ -13,7 +13,7 @@ import { deepEqual } from "fast-equals";
 import { Box, Flex, FloatingIndicator, Popover, PopoverDropdown, PopoverTarget, Text, UnstyledButton } from "@mantine/core";
 import { clampUseMovePosition, useHover, useMergedRef, useMove, useUncontrolled } from "@mantine/hooks";
 
-//#region src/navigationpanel/editorpanel/ChangeAutoLayoutButton.tsx
+// src/navigationpanel/editorpanel/ChangeAutoLayoutButton.tsx
 const selector = selectDiagramContext((state) => ({
 	viewId: state.view.id,
 	isManualLayout: state.view._layout === "manual",
@@ -245,5 +245,4 @@ const SpacingSliders = forwardRef(({ isVertical, nodeSep, rankSep, onChange }, _
 	});
 });
 
-//#endregion
 export { ChangeAutoLayoutButton };

package/dist/navigationpanel/editorpanel/EditorPanel.mjs

@@ -1,5 +1,6 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import { useIsComparingLayouts } from "../../context/ComparingLayoutsContext.mjs";
 import { ApplySemanticLayout } from "./ApplySemanticLayout.mjs";
 import { CenterCamera } from "./CenterCamera.mjs";
 import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.mjs";
@@ -11,7 +12,7 @@ import { AnimatePresence } from "motion/react";
 import { vstack } from "@likec4/styles/patterns";
 import * as m$1 from "motion/react-m";
 
-//#region src/navigationpanel/editorpanel/EditorPanel.tsx
+// src/navigationpanel/editorpanel/EditorPanel.tsx
 const variants = {
 	hidden: {
 		opacity: 0,
@@ -27,8 +28,8 @@ const variants = {
 	}
 };
 function EditorPanel() {
-	const { enableReadOnly, enableCompareWithLatest, enableAISemanticLayout } = useEnabledFeatures();
-	const showAiSemanticLayoutButton = !enableCompareWithLatest && !enableReadOnly && enableAISemanticLayout;
+	const { enableReadOnly, enableAISemanticLayout } = useEnabledFeatures();
+	const showAiSemanticLayoutButton = !useIsComparingLayouts() && !enableReadOnly && enableAISemanticLayout;
 	return /* @__PURE__ */ jsx(AnimatePresence, {
 		propagate: true,
 		children: !enableReadOnly && /* @__PURE__ */ jsx(m$1.div, {
@@ -60,5 +61,4 @@ function EditorPanel() {
 	});
 }
 
-//#endregion
 export { EditorPanel };

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.mjs

@@ -1,13 +1,13 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconLayoutAlignBottom from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.mjs";
-import IconLayoutAlignCenter from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.mjs";
-import IconLayoutAlignLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.mjs";
-import IconLayoutAlignMiddle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.mjs";
-import IconLayoutAlignRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.mjs";
-import IconLayoutAlignTop from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.mjs";
-import IconLayoutBoardSplit from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.mjs";
-import IconLayoutCollage from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.mjs";
-import IconRouteOff from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.mjs";
+import IconLayoutAlignBottom from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.mjs";
+import IconLayoutAlignCenter from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.mjs";
+import IconLayoutAlignLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.mjs";
+import IconLayoutAlignMiddle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.mjs";
+import IconLayoutAlignRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.mjs";
+import IconLayoutAlignTop from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.mjs";
+import IconLayoutBoardSplit from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.mjs";
+import IconLayoutCollage from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.mjs";
+import IconRouteOff from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.mjs";
 import { useDiagram } from "../../hooks/safeContext.mjs";
 import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
 import { PanelActionIcon } from "../_common.mjs";
@@ -15,12 +15,11 @@ import { Tooltip as Tooltip$1 } from "./_common.mjs";
 import { css } from "@likec4/styles/css";
 import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Popover, PopoverDropdown, PopoverTarget, TooltipGroup } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { Popover, PopoverDropdown, PopoverTarget } from "@mantine/core";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 
-//#region src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx
+// src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx
 const Action = ({ label, icon, onClick }) => /* @__PURE__ */ jsx(Tooltip$1, {
 	label,
 	withinPortal: false,
@@ -140,5 +139,4 @@ const ManualLayoutToolsButton = memo(() => {
 });
 ManualLayoutToolsButton.displayName = "ManualLayoutToolsButton";
 
-//#endregion
 export { ManualLayoutToolsButton, manualLayoutTooltipProps };

package/dist/navigationpanel/editorpanel/ToggleReadonly.mjs

@@ -1,11 +1,11 @@
 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 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 { PanelActionIcon } from "../_common.mjs";
 import { Tooltip } from "./_common.mjs";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/navigationpanel/editorpanel/ToggleReadonly.tsx
+// src/navigationpanel/editorpanel/ToggleReadonly.tsx
 const ToggleReadonly = () => {
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsx(Tooltip, {
@@ -20,5 +20,4 @@ const ToggleReadonly = () => {
 	});
 };
 
-//#endregion
 export { ToggleReadonly };

package/dist/navigationpanel/editorpanel/_common.mjs

@@ -1,6 +1,6 @@
 import { Tooltip } from "@mantine/core";
 
-//#region src/navigationpanel/editorpanel/_common.tsx
+// src/navigationpanel/editorpanel/_common.tsx
 const Tooltip$1 = Tooltip.withProps({
 	color: "dark",
 	fz: "xs",
@@ -12,5 +12,4 @@ const Tooltip$1 = Tooltip.withProps({
 	position: "right"
 });
 
-//#endregion
 export { Tooltip$1 as Tooltip };

package/dist/navigationpanel/editorpanel/styles.mjs

@@ -1,6 +1,6 @@
 import { css } from "@likec4/styles/css";
 
-//#region src/navigationpanel/editorpanel/styles.ts
+// src/navigationpanel/editorpanel/styles.ts
 const navigationButtons = css({
 	gap: "xxs",
 	_empty: { display: "none" }
@@ -54,5 +54,4 @@ const spacingSliderThumb = css({
 	transform: "translate(-50%, -50%)"
 });
 
-//#endregion
 export { autolayoutButton, autolayoutIndicator, spacingSliderBody, spacingSliderThumb };

package/dist/navigationpanel/hooks.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { createSafeContextForActor } from "../hooks/safeContext.mjs";
 import { useMemo } from "react";
 
-//#region src/navigationpanel/hooks.tsx
+// src/navigationpanel/hooks.tsx
 const { ContextProvider: NavigationPanelActorContextProvider, selectContext: selectNavigationContext, selectSnapshot: selectNavigationSnapshot, useActorRef: useNavigationActorRef, useActorSelector: useNavigationActorSelector } = createSafeContextForActor("NavigationPanel");
 function useNavigationActor() {
 	const actorRef = useNavigationActorRef();
@@ -28,5 +28,4 @@ function useNavigationActor() {
 	}), [actorRef]);
 }
 
-//#endregion
 export { NavigationPanelActorContextProvider, selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector };

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.mjs

@@ -1,10 +1,10 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconPlayerSkipBackFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.mjs";
-import IconPlayerSkipForwardFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.mjs";
-import IconPlayerStopFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.mjs";
+import IconPlayerSkipBackFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.mjs";
+import IconPlayerSkipForwardFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.mjs";
+import IconPlayerStopFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.mjs";
 import { useDiagram } from "../../hooks/safeContext.mjs";
-import { useDiagramContext } from "../../hooks/useDiagram.mjs";
 import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
+import { useDiagramContext } from "../../hooks/useDiagram.mjs";
 import { TriggerWalkthroughButton } from "./DynamicViewControls.mjs";
 import { css } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,7 +14,7 @@ import { AnimatePresence } from "motion/react";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 import * as m$1 from "motion/react-m";
 
-//#region src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx
+// src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx
 const PrevNextButton = Button.withProps({
 	component: m$1.button,
 	layout: "position",
@@ -113,5 +113,4 @@ function ActiveWalkthroughControls() {
 	});
 }
 
-//#endregion
 export { ActiveWalkthroughControls };

package/dist/navigationpanel/walkthrough/DynamicViewControls.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconPlayerPlayFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.mjs";
-import { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import IconPlayerPlayFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.mjs";
+import { useIsComparingLayouts } from "../../context/ComparingLayoutsContext.mjs";
 import { useDiagram } from "../../hooks/safeContext.mjs";
 import { Tooltip as Tooltip$1 } from "../_common.mjs";
 import { useNavigationActor } from "../hooks.mjs";
@@ -8,12 +8,11 @@ import { DynamicViewModeSwitcher } from "./DynamicViewModeSwitcher.mjs";
 import { css } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
 import { Button } from "@mantine/core";
-import { AnimatePresence } from "motion/react";
+import "motion/react";
 import * as m$1 from "motion/react-m";
 
-//#region src/navigationpanel/walkthrough/DynamicViewControls.tsx
+// src/navigationpanel/walkthrough/DynamicViewControls.tsx
 const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(Button, {
 	variant: "filled",
 	size: "xs",
@@ -27,12 +26,12 @@ const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
 	className: css({ flexShrink: 0 })
 }));
 function StartWalkthroughButton() {
-	const { enableCompareWithLatest } = useEnabledFeatures();
+	const isComparing = useIsComparingLayouts();
 	const diagram = useDiagram();
 	const actor = useNavigationActor();
 	let tooltipLabel = "Start Dynamic View Walkthrough";
 	switch (true) {
-		case enableCompareWithLatest: tooltipLabel = "Walkthrough not available when Compare is active";
+		case isComparing: tooltipLabel = "Walkthrough not available when Compare is active";
 	}
 	return /* @__PURE__ */ jsx(Tooltip$1, {
 		label: tooltipLabel,
@@ -58,7 +57,7 @@ function StartWalkthroughButton() {
 			},
 			size: "compact-xs",
 			h: 26,
-			disabled: enableCompareWithLatest,
+			disabled: isComparing,
 			classNames: {
 				label: css({ display: {
 					base: "none",
@@ -78,5 +77,4 @@ function DynamicViewControls() {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DynamicViewModeSwitcher, {}), /* @__PURE__ */ jsx(StartWalkthroughButton, {})] });
 }
 
-//#endregion
 export { DynamicViewControls, StartWalkthroughButton, TriggerWalkthroughButton };

package/dist/navigationpanel/walkthrough/DynamicViewModeSwitcher.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { SegmentedControl } from "@mantine/core";
 import { m } from "motion/react";
 
-//#region src/navigationpanel/walkthrough/DynamicViewModeSwitcher.tsx
+// src/navigationpanel/walkthrough/DynamicViewModeSwitcher.tsx
 const dynamicViewModes = [{
 	value: "diagram",
 	label: "Diagram"
@@ -47,5 +47,4 @@ function DynamicViewModeSwitcher() {
 	});
 }
 
-//#endregion
 export { DynamicViewModeSwitcher };

package/dist/navigationpanel/walkthrough/WalkthroughPanel.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { MarkdownWithRefs } from "../../components/markdown/MarkdownWithRefs.mjs";
 import { selectDiagramContext, useDiagramSelector } from "../../hooks/safeContext.mjs";
-import { Markdown } from "../../base-primitives/Markdown.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isNonNull, isTruthy } from "remeda";
@@ -10,7 +10,7 @@ import { AnimatePresence, m } from "motion/react";
 import { styled } from "@likec4/styles/jsx";
 import { vstack } from "@likec4/styles/patterns";
 
-//#region src/navigationpanel/walkthrough/WalkthroughPanel.tsx
+// src/navigationpanel/walkthrough/WalkthroughPanel.tsx
 const SectionHeader = styled("div", { base: {
 	fontSize: "xs",
 	color: "text.dimmed",
@@ -68,7 +68,7 @@ const WalkthroughPanel = memo(() => {
 		children: /* @__PURE__ */ jsxs(ScrollAreaAutosize, {
 			type: "scroll",
 			overscrollBehavior: "contain",
-			children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }), /* @__PURE__ */ jsx(Markdown, {
+			children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }), /* @__PURE__ */ jsx(MarkdownWithRefs, {
 				value: notes,
 				fontSize: "sm",
 				emptyText: "No description"
@@ -77,5 +77,4 @@ const WalkthroughPanel = memo(() => {
 	}) });
 });
 
-//#endregion
 export { WalkthroughPanel };

package/dist/navigationpanel/windows/ViewDetailsWindow.mjs

@@ -1,19 +1,18 @@
 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 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 IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
-import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
-import { useUpdateEffect as useUpdateEffect$1 } from "../../hooks/useUpdateEffect.mjs";
-import { stopPropagation } from "../../utils/xyflow.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 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 IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
+import { Link } from "../../components/Link.mjs";
+import { MarkdownWithRefs } from "../../components/markdown/MarkdownWithRefs.mjs";
+import { ViewIcon } from "../../components/ViewIcon.mjs";
 import { IfEnabled, useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
-import { useDiagram } from "../../hooks/safeContext.mjs";
 import { useCurrentViewModel } from "../../hooks/useCurrentViewModel.mjs";
+import { useUpdateEffect as useUpdateEffect$1 } from "../../hooks/useUpdateEffect.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
 import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
 import { PanelActionIcon } from "../_common.mjs";
-import { Markdown } from "../../base-primitives/Markdown.mjs";
-import { EmptyBox } from "../../components/EmptyBox.mjs";
-import { Link } from "../../components/Link.mjs";
-import { ViewIcon } from "../../components/ViewIcon.mjs";
 import { css, cx } from "@likec4/styles/css";
 import { useEffect, useEffectEvent, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -23,14 +22,18 @@ import { useToggle, useUncontrolled } from "@mantine/hooks";
 import "@likec4/core/types";
 import { Box as Box$1, HStack, Txt, VStack, styled } from "@likec4/styles/jsx";
 
-//#region src/navigationpanel/windows/ViewDetailsWindow.tsx
+// src/navigationpanel/windows/ViewDetailsWindow.tsx
 const SectionHeader = styled("div", { base: {
-	fontSize: "xs",
-	color: "text.non-essential",
-	fontWeight: "medium",
-	userSelect: "none",
-	lineHeight: "snug"
+	textStyle: "fieldLabel",
+	userSelect: "none"
 } });
+const dataListClassNames = {
+	item: css({ alignItems: "center" }),
+	itemLabel: css({
+		textStyle: "fieldLabel",
+		userSelect: "none"
+	})
+};
 function ViewDetailsWindow() {
 	const viewModel = useCurrentViewModel();
 	const diagram = useDiagram();
@@ -115,29 +118,22 @@ function ViewDetailsWindow() {
 					size: "xs",
 					gap: "sm",
 					orientation: "horizontal",
-					labelWidth: 50,
+					labelWidth: 56,
+					classNames: dataListClassNames,
 					children: [
 						viewModel.hasManualLayout && /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: "Layout" }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: /* @__PURE__ */ jsx(ManualLayoutState, {}) })] }),
-						alltags.length > 0 && /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: "Tags" }), /* @__PURE__ */ jsxs(DataList.ItemValue, { children: [(tags.length > 0 || !enableReadOnly) && /* @__PURE__ */ jsx(EditableTags, {
+						alltags.length > 0 && (tags.length > 0 || !enableReadOnly) && /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: "Tags" }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: /* @__PURE__ */ jsx(EditableTags, {
 							alltags,
 							tags,
 							readOnly: enableReadOnly,
 							onChange: changeTags
-						}), tags.length === 0 && enableReadOnly && /* @__PURE__ */ jsx(Txt, {
-							size: "xs",
-							color: "text.non-essential",
-							children: "No tags"
-						})] })] }),
-						/* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: "Links" }), /* @__PURE__ */ jsx(DataList.ItemValue, {
+						}) })] }),
+						links.length > 0 && /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: "Links" }), /* @__PURE__ */ jsx(DataList.ItemValue, {
 							className: "nodrag",
-							children: /* @__PURE__ */ jsxs(HStack, {
+							children: /* @__PURE__ */ jsx(HStack, {
 								gap: "xxs",
 								flexWrap: "wrap",
-								children: [links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)), links.length === 0 && /* @__PURE__ */ jsx(Txt, {
-									size: "xs",
-									color: "text.non-essential",
-									children: "No links"
-								})]
+								children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`))
 							})
 						})] })
 					]
@@ -150,9 +146,10 @@ function ViewDetailsWindow() {
 				})
 			]
 		}),
-		description.isEmpty && /* @__PURE__ */ jsx(EmptyBox, {
-			flex: "1",
-			m: "1",
+		description.isEmpty && /* @__PURE__ */ jsx(Txt, {
+			px: "1",
+			size: "sm",
+			color: "text.non-essential",
 			children: "No description"
 		}),
 		description.nonEmpty && /* @__PURE__ */ jsx(ScrollArea, {
@@ -161,7 +158,7 @@ function ViewDetailsWindow() {
 			overscrollBehavior: "contain",
 			children: /* @__PURE__ */ jsx(Box$1, {
 				px: "1",
-				children: /* @__PURE__ */ jsx(Markdown, { value: description })
+				children: /* @__PURE__ */ jsx(MarkdownWithRefs, { value: description })
 			})
 		})
 	] });
@@ -330,7 +327,7 @@ function ManualLayoutState() {
 			resetProcessing();
 		}, 100);
 	});
-	return /* @__PURE__ */ jsxs(Menu, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Menu, {
 		withinPortal: false,
 		floatingStrategy: "absolute",
 		position: "bottom-start",
@@ -376,8 +373,17 @@ function ManualLayoutState() {
 			}),
 			children: "Reset layout"
 		}) })]
-	});
+	}), ctx.isEnabled && ctx.state !== "comparing" && /* @__PURE__ */ jsx(Button, {
+		size: "compact-xs",
+		variant: "default",
+		ml: "sm",
+		fz: "xxs",
+		onClick: (e) => {
+			e.stopPropagation();
+			ops.toggleCompare("on");
+		},
+		children: "Compare"
+	})] });
 }
 
-//#endregion
 export { ViewDetailsWindow };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs

@@ -2,7 +2,7 @@ import { __name } from "../../../../../../../../_virtual/_rolldown/runtime.mjs";
 import defaultAttributes from "./defaultAttributes.mjs";
 import { createElement, forwardRef } from "react";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -34,5 +34,4 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
 	return Component;
 };
 
-//#endregion
 export { createReactComponent as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs

@@ -1,4 +1,4 @@
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -27,5 +27,4 @@ var defaultAttributes = {
 	}
 };
 
-//#endregion
 export { defaultAttributes as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -23,5 +23,4 @@ const __iconNode = [
 ];
 const IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode);
 
-//#endregion
 export { __iconNode, IconAlertTriangle as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -16,5 +16,4 @@ const __iconNode = [["path", {
 }]];
 const IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "ArrowDownRight", __iconNode);
 
-//#endregion
 export { __iconNode, IconArrowDownRight as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowFork.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowFork.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowFork.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -27,5 +27,4 @@ const __iconNode = [
 ];
 const IconArrowFork = createReactComponent("outline", "arrow-fork", "ArrowFork", __iconNode);
 
-//#endregion
 export { __iconNode, IconArrowFork as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowGuide.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowGuide.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowGuide.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -23,5 +23,4 @@ const __iconNode = [
 ];
 const IconArrowGuide = createReactComponent("outline", "arrow-guide", "ArrowGuide", __iconNode);
 
-//#endregion
 export { __iconNode, IconArrowGuide as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -23,5 +23,4 @@ const __iconNode = [
 ];
 const IconArrowLeft = createReactComponent("outline", "arrow-left", "ArrowLeft", __iconNode);
 
-//#endregion
 export { __iconNode, IconArrowLeft as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -23,5 +23,4 @@ const __iconNode = [
 ];
 const IconArrowRight = createReactComponent("outline", "arrow-right", "ArrowRight", __iconNode);
 
-//#endregion
 export { __iconNode, IconArrowRight as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -13,5 +13,4 @@ const __iconNode = [["path", {
 }]];
 const IconBolt = createReactComponent("outline", "bolt", "Bolt", __iconNode);
 
-//#endregion
 export { __iconNode, IconBolt as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -23,5 +23,4 @@ const __iconNode = [
 ];
 const IconBrowser = createReactComponent("outline", "browser", "Browser", __iconNode);
 
-//#endregion
 export { __iconNode, IconBrowser as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCaretRightFilled.mjs

@@ -0,0 +1,16 @@
+import createReactComponent from "../createReactComponent.mjs";
+
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCaretRightFilled.mjs
+/**
+* @license @tabler/icons-react v3.49.0 - MIT
+*
+* This source code is licensed under the MIT license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconNode = [["path", {
+	"d": "M9 6c0 -.852 .986 -1.297 1.623 -.783l.084 .076l6 6a1 1 0 0 1 .083 1.32l-.083 .094l-6 6l-.094 .083l-.077 .054l-.096 .054l-.036 .017l-.067 .027l-.108 .032l-.053 .01l-.06 .01l-.057 .004l-.059 .002l-.059 -.002l-.058 -.005l-.06 -.009l-.052 -.01l-.108 -.032l-.067 -.027l-.132 -.07l-.09 -.065l-.081 -.073l-.083 -.094l-.054 -.077l-.054 -.096l-.017 -.036l-.027 -.067l-.032 -.108l-.01 -.053l-.01 -.06l-.004 -.057l-.002 -12.059z",
+	"key": "svg-0"
+}]];
+const IconCaretRightFilled = createReactComponent("filled", "caret-right-filled", "CaretRightFilled", __iconNode);
+
+export { __iconNode, IconCaretRightFilled as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -13,5 +13,4 @@ const __iconNode = [["path", {
 }]];
 const IconCheck = createReactComponent("outline", "check", "Check", __iconNode);
 
-//#endregion
 export { __iconNode, IconCheck as default };