@likec4/diagram 1.59.2 → 1.59.4

package/dist/likec4diagram/ui/sequence-outline/presentation.js

@@ -0,0 +1,80 @@
+import { css } from "@likec4/styles/css";
+import { IconAlertTriangle, IconArrowFork, IconArrowGuide, IconCornerDownRight, IconPlayerStop, IconRepeat } from "@tabler/icons-react";
+//#region src/likec4diagram/ui/sequence-outline/presentation.ts
+/**
+* PandaCSS `colorPalette` classes for each sub-flow palette.
+* Declared as literals so the static analyzer can extract them.
+*/
+var palette = {
+	loop: css({ colorPalette: "subflow.loop" }),
+	opt: css({ colorPalette: "subflow.opt" }),
+	par: css({ colorPalette: "subflow.par" }),
+	break: css({ colorPalette: "subflow.break" }),
+	alt: css({ colorPalette: "subflow.alt" }),
+	try: css({ colorPalette: "subflow.try" })
+};
+/** How each sub-flow operator is labelled and coloured in the outline. */
+var flowPresentation = {
+	loop: {
+		paletteClass: palette.loop,
+		tag: "loop",
+		Icon: IconRepeat
+	},
+	opt: {
+		paletteClass: palette.opt,
+		tag: "opt",
+		Icon: IconArrowGuide
+	},
+	par: {
+		paletteClass: palette.par,
+		tag: "par",
+		Icon: IconArrowFork
+	},
+	break: {
+		paletteClass: palette.break,
+		tag: "break",
+		Icon: IconPlayerStop
+	},
+	alt: {
+		paletteClass: palette.alt,
+		tag: "alt",
+		Icon: IconArrowFork
+	},
+	"alt-when": {
+		paletteClass: palette.alt,
+		tag: "when",
+		Icon: IconCornerDownRight
+	},
+	"alt-else": {
+		paletteClass: palette.alt,
+		tag: "else",
+		Icon: IconCornerDownRight
+	},
+	"alt-if": {
+		paletteClass: palette.alt,
+		tag: "if",
+		Icon: IconCornerDownRight
+	},
+	try: {
+		paletteClass: palette.try,
+		tag: "try",
+		Icon: IconAlertTriangle
+	},
+	"try-block": {
+		paletteClass: palette.try,
+		tag: "block",
+		Icon: IconCornerDownRight
+	},
+	"try-catch": {
+		paletteClass: palette.break,
+		tag: "catch",
+		Icon: IconCornerDownRight
+	},
+	"try-finally": {
+		paletteClass: palette.break,
+		tag: "finally",
+		Icon: IconCornerDownRight
+	}
+};
+//#endregion
+export { flowPresentation };

package/dist/likec4diagram/ui/sequence-outline/tree.d.ts

@@ -0,0 +1,9 @@
+import { DynamicViewFlow, StepPath } from '@likec4/core/types';
+import { OutlineTreeNodeFlow, OutlineTreeNodes } from './types';
+/** Flattens the walkthrough flow into the nested step/sub-flow tree the outline renders. */
+export declare function buildTree(flow: DynamicViewFlow): OutlineTreeNodes;
+export declare function useTreeData(flow: DynamicViewFlow): OutlineTreeNodes;
+/** The first step inside a fragment — where the breadcrumb jumps to. */
+export declare function firstStepOf(nodes: OutlineTreeNodes): StepPath | null;
+/** The chain of sub-flows the active step is nested inside, outermost first. */
+export declare function collectTrail(nodes: OutlineTreeNodes, ancestors: readonly string[]): OutlineTreeNodeFlow[];

package/dist/likec4diagram/ui/sequence-outline/tree.js

@@ -0,0 +1,67 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { isOutlineFlowNode } from "./types.js";
+import "react";
+//#region src/likec4diagram/ui/sequence-outline/tree.ts
+/** Flattens the walkthrough flow into the nested step/sub-flow tree the outline renders. */
+function buildTree(flow) {
+	const tree = [];
+	let currentFlow = tree;
+	flow.walk({
+		step: ({ step, stepnum, source, target, edge }) => {
+			currentFlow.push({
+				label: edge.label ?? `${source.title} → ${target.title}`,
+				value: step,
+				nodeProps: {
+					type: "step",
+					stepnum: stepnum.global,
+					source: source.title,
+					target: target.title,
+					label: edge.label,
+					notes: edge.notes ?? null,
+					edge
+				}
+			});
+		},
+		subflow: ({ subflow }) => {
+			const node = {
+				label: subflow.title ?? subflow._type,
+				value: subflow.id,
+				nodeProps: {
+					type: subflow._type,
+					title: subflow.title
+				},
+				children: []
+			};
+			const parent = currentFlow;
+			parent.push(node);
+			currentFlow = node.children;
+			return () => {
+				currentFlow = parent;
+			};
+		}
+	});
+	return tree;
+}
+/** The first step inside a fragment — where the breadcrumb jumps to. */
+function firstStepOf(nodes) {
+	for (const node of nodes) if (isOutlineFlowNode(node)) {
+		const found = firstStepOf(node.children);
+		if (found) return found;
+	} else return node.value;
+	return null;
+}
+/** The chain of sub-flows the active step is nested inside, outermost first. */
+function collectTrail(nodes, ancestors) {
+	const trail = [];
+	const walk = (list) => {
+		for (const node of list) if (isOutlineFlowNode(node) && ancestors.includes(node.value)) {
+			trail.push(node);
+			walk(node.children);
+			return;
+		}
+	};
+	walk(nodes);
+	return trail;
+}
+//#endregion
+export { buildTree, collectTrail, firstStepOf };

package/dist/likec4diagram/ui/sequence-outline/{state.d.ts → types.d.ts}

@@ -1,6 +1,8 @@
-import { DynamicViewFlow, scalar, StepPath } from '@likec4/core';
+import { DiagramEdge, DynamicViewFlow, scalar, StepPath } from '@likec4/core/types';
 import { TreeNodeData } from '@mantine/core';
 import { DiagramContext } from '../../state/types';
+/** Sub-flows the user has folded away, keyed by {@link StepPath}. */
+export type CollapsedFlows = DiagramContext['collapsedSequenceFlows'];
 export interface OutlineTreeNodeStep extends TreeNodeData {
     readonly value: StepPath;
     readonly nodeProps: Readonly<{
@@ -14,6 +16,7 @@ export interface OutlineTreeNodeStep extends TreeNodeData {
         /** Relationship label, if any */
         readonly label: string | null;
         readonly notes: scalar.MarkdownOrString | null;
+        readonly edge: DiagramEdge;
     }>;
 }
 export interface OutlineTreeNodeFlow extends TreeNodeData {
@@ -33,4 +36,3 @@ export type OutlineTreeNodes = OutlineTreeNodeData[];
  * is needed for reliable narrowing.)
  */
 export declare function isOutlineFlowNode(node: OutlineTreeNodeData): node is OutlineTreeNodeFlow;
-export declare function useTreeData(flow: DynamicViewFlow, collapsed: DiagramContext['collapsedSequenceFlows']): OutlineTreeNodes;

package/dist/likec4diagram/ui/sequence-outline/types.js

@@ -0,0 +1,12 @@
+import "../../../_virtual/_rolldown/runtime.js";
+//#region src/likec4diagram/ui/sequence-outline/types.ts
+/**
+* Type guard narrowing a tree node to a sub-flow node.
+* (The discriminant lives on the nested `nodeProps.type`, so an explicit guard
+* is needed for reliable narrowing.)
+*/
+function isOutlineFlowNode(node) {
+	return node.nodeProps.type !== "step";
+}
+//#endregion
+export { isOutlineFlowNode };

package/dist/likec4diagram/useLayoutConstraints.js

@@ -158,8 +158,13 @@ function makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode) {
 		};
 		const d = vector$1(dx, dy);
 		const relativePoint = (pt) => {
+			if (staticToAnchorLength === 0) return {
+				x: pt.x,
+				y: pt.y
+			};
 			const point = vector$1(pt);
-			const coeff = clamp(point.subtract(staticV).dot(staticToAnchor) / staticToAnchorLength ** 2, {
+			const projLength = point.subtract(staticV).dot(staticToAnchor);
+			const coeff = clamp(projLength / staticToAnchorLength ** 2, {
 				min: -1,
 				max: 1
 			});
@@ -174,6 +179,13 @@ function makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode) {
 			type: "replace",
 			item: produce(current, (draft) => {
 				draft.data.controlPoints = controlPoints.map(relativePoint);
+				draft.data.points = map(edge.data.points, ([x, y]) => {
+					const point = relativePoint({
+						x,
+						y
+					});
+					return [point.x, point.y];
+				});
 				if (edge.data.labelBBox) {
 					draft.data.labelBBox ??= edge.data.labelBBox;
 					const { x, y } = relativePoint(edge.data.labelBBox);

package/dist/likec4diagram/xyflow-sequence/layouter.js

@@ -198,8 +198,10 @@ var SequenceViewLayouter = class {
 		target.maxRow = Math.max(target.maxRow, step.to.row);
 		const [left, right] = source.column <= target.column ? [source, target] : [target, source];
 		const width = (step.label?.width ?? 100) + 50;
-		if (Math.abs(target.column - source.column) <= 1) if (left !== right) this.constraint(left.centerX.plus(width), "<=", right.centerX);
-		else this.constraint(left.centerX.plus(width), "<=", left.offset.right);
+		if (Math.abs(target.column - source.column) <= 1) {
+			if (left !== right) this.constraint(left.centerX.plus(width), "<=", right.centerX);
+			else this.constraint(left.centerX.plus(width), "<=", left.offset.right);
+		}
 		let height = step.label?.height ? step.label.height + 50 + 24 : 100;
 		height = Math.max(height, 100) + step.offset;
 		this.ensureRow(step.from.row, height);
@@ -262,7 +264,6 @@ var SequenceViewLayouter = class {
 					this.put(offset.bottom).before(y2, PADDING);
 				}
 				this.put(y2).before(bottom);
-				break;
 		}
 		for (var col = from.column; col <= to.column; col++) {
 			const offset = this.actorBox(col).offset;
@@ -400,7 +401,8 @@ var SequenceViewLayouter = class {
 			}
 		};
 		const createSubflowArea = (subflow) => {
-			const rect = rectFromSteps(selectSteps(subflow.id));
+			const steps = selectSteps(subflow.id);
+			const rect = rectFromSteps(steps);
 			let space;
 			switch (true) {
 				case flowGuards.isAltOrTry(subflow):
@@ -420,9 +422,7 @@ var SequenceViewLayouter = class {
 						bottom: 0
 					};
 					break;
-				default:
-					space = spacing;
-					break;
+				default: space = spacing;
 			}
 			const area = {
 				...this.wrapAroundRect(rect, space),
@@ -507,9 +507,7 @@ var SequenceViewLayouter = class {
 				this.constraint(left, "==", right, Strength.weak);
 				break;
 			case "<= 0":
-			case ">= 0":
-				this.constraint(left, "== 0", void 0, Strength.weak);
-				break;
+			case ">= 0": this.constraint(left, "== 0", void 0, Strength.weak);
 		}
 		return constraint;
 	}

package/dist/likec4diagram/xyflow-sequence/sequence-view-to-xy.js

@@ -76,6 +76,7 @@ function toCompoundArea({ id, x, y, width, height, depth }, node, view) {
 		},
 		draggable: false,
 		selectable: false,
+		deletable: false,
 		focusable: false,
 		style: { pointerEvents: "none" },
 		width,

package/dist/likec4diagram/xyflow-sequence/utils.js

@@ -1,7 +1,6 @@
 import "../../_virtual/_rolldown/runtime.js";
 import "remeda";
 import { Stack, invariant, isAncestor } from "@likec4/core/utils";
-import "@likec4/core/types";
 //#region src/likec4diagram/xyflow-sequence/utils.ts
 var paddingFromNumber = (spacing) => ({
 	left: spacing,

package/dist/navigationpanel/NavigationPanel.js

@@ -14,8 +14,8 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Popover, PopoverTarget } from "@mantine/core";
 import { AnimatePresence, LayoutGroup } from "motion/react";
 import { useSelector } from "@xstate/react";
-import { VStack } from "@likec4/styles/jsx";
 import { hasProp, isDynamicView } from "@likec4/core/types";
+import { VStack } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 import * as m$1 from "motion/react-m";
 //#region src/navigationpanel/NavigationPanel.tsx
@@ -24,36 +24,38 @@ var select = selectDiagramContext((s) => {
 	if (isDynamicView(s.view) && isActiveWalkthrough) {
 		const isSequenceView = s.dynamicViewVariant === "sequence";
 		return {
-			view: s.view,
+			viewId: s.view.id,
 			mode: isSequenceView && hasProp(s.view, "flow") ? "walkthrough-flow" : "walkthrough"
 		};
 	}
 	return {
-		view: s.view,
+		viewId: s.view.id,
 		mode: "default"
 	};
 });
 var stateHasActiveTag = (state) => state.hasTag("active");
 var NavigationPanel = memo(({ actorRef }) => {
-	const { view, mode } = useDiagramSelector(select);
-	const viewModel = useOptionalCurrentViewModel();
 	const opened = useSelector(actorRef, stateHasActiveTag);
 	const portalProps = useMantinePortalProps();
+	const { viewId, mode } = useDiagramSelector(select);
+	const viewModel = useOptionalCurrentViewModel();
+	const viewFolder = !!viewModel && viewModel.id === viewId ? viewModel.folder.path : void 0;
 	useEffect(() => {
 		actorRef.send({
 			type: "update.inputs",
 			inputs: {
-				viewModel,
-				view
+				viewId,
+				viewFolder
 			}
 		});
 	}, [
 		actorRef,
-		viewModel,
-		view
+		viewId,
+		viewFolder
 	]);
 	return /* @__PURE__ */ jsx(VStack, {
 		css: {
+			zIndex: "panel",
 			alignItems: "flex-start",
 			pointerEvents: "none",
 			position: "absolute",
@@ -62,49 +64,51 @@ var NavigationPanel = memo(({ actorRef }) => {
 			margin: "0",
 			width: "100%",
 			gap: "xxs",
-			maxWidth: ["calc(100vw)", "calc(100cqw)"],
+			maxWidth: ["100vw", "100cqw"],
 			"@/sm": {
 				margin: "xs",
 				gap: "xs",
 				width: "max-content",
-				maxWidth: ["calc(100vw - 2 * {spacing.md})", "calc(100cqw - 2 * {spacing.md})"]
+				maxWidth: ["[calc(100vw - 2 * {spacing.md})]", "[calc(100cqw - 2 * {spacing.md})]"]
 			},
 			_print: { display: "none" }
 		},
 		children: /* @__PURE__ */ jsx(NavigationPanelActorContextProvider, {
 			value: actorRef,
 			children: mode !== "walkthrough-flow" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsxs(Popover, {
-					offset: { mainAxis: 4 },
-					opened,
-					position: "bottom-start",
-					trapFocus: opened,
-					...portalProps,
-					clickOutsideEvents: [
-						"pointerdown",
-						"mousedown",
-						"click"
-					],
-					onDismiss: () => actorRef.send({ type: "dropdown.dismiss" }),
-					children: [/* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(m$1.div, {
-						layout: true,
-						layoutDependency: mode,
-						className: hstack({
-							layerStyle: "likec4.panel",
-							position: "relative",
-							gap: "xs",
-							cursor: "pointer",
-							pointerEvents: "all",
-							width: "100%"
-						}),
-						onMouseLeave: () => actorRef.send({ type: "breadcrumbs.mouseLeave" }),
-						children: /* @__PURE__ */ jsx(AnimatePresence, {
-							propagate: true,
-							initial: false,
+				/* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+					propagate: true,
+					initial: false,
+					children: /* @__PURE__ */ jsxs(Popover, {
+						offset: { mainAxis: 4 },
+						opened,
+						position: "bottom-start",
+						trapFocus: opened,
+						keepMounted: false,
+						...portalProps,
+						clickOutsideEvents: [
+							"pointerdown",
+							"mousedown",
+							"click"
+						],
+						onDismiss: () => actorRef.send({ type: "dropdown.dismiss" }),
+						children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(m$1.div, {
+							layout: "size",
+							layoutDependency: [mode, viewId],
+							className: hstack({
+								layerStyle: "likec4.panel",
+								position: "relative",
+								gap: "xs",
+								cursor: "pointer",
+								pointerEvents: "all",
+								width: "100%"
+							}),
+							"data-panel": "navigation",
+							onMouseLeave: () => actorRef.send({ type: "breadcrumbs.mouseLeave" }),
 							children: mode === "walkthrough" ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {})
-						})
-					}) }) }), opened && /* @__PURE__ */ jsx(NavigationPanelDropdown, {})]
-				}),
+						}) }), /* @__PURE__ */ jsx(NavigationPanelDropdown, {})]
+					})
+				}) }),
 				/* @__PURE__ */ jsx(ComparePanel, {}),
 				mode === "walkthrough" && /* @__PURE__ */ jsx(WalkthroughPanel, {}),
 				/* @__PURE__ */ jsx(EditorPanel, {})

package/dist/navigationpanel/NavigationPanelControls.js

@@ -1,60 +1,85 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../context/DiagramFeatures.js";
-import { BreadcrumbsSeparator } from "./_common.js";
+import { selectDiagramContext, useDiagramSelector } from "../hooks/safeContext.js";
+import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.js";
+import { deriveToggledFeatures } from "../likec4diagram/state/machine.setup.js";
 import { useNavigationActor } from "./hooks.js";
-import { DetailsControls } from "./controls/DetailsControls.js";
 import { LayoutWarning } from "./controls/LayoutWarning.js";
 import { LogoButton } from "./controls/LogoButton.js";
 import { NavigationButtons } from "./controls/NavigationButtons.js";
 import { OpenSource } from "./controls/OpenSource.js";
 import { SearchControl } from "./controls/SearchControl.js";
 import { ToggleReadonly } from "./controls/ToggleReadonly.js";
+import { ViewDetailsButton } from "./controls/ViewDetailsButton.js";
 import { breadcrumbTitle } from "./styles.css.js";
 import { DynamicViewControls } from "./walkthrough/DynamicViewControls.js";
 import { css, cx } from "@likec4/styles/css";
+import { IconChevronRight } from "@tabler/icons-react";
 import { memo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { deepEqual } from "fast-equals";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { isTruthy } from "remeda";
 import { UnstyledButton } from "@mantine/core";
-import { AnimatePresence } from "motion/react";
-import { useSelector } from "@xstate/react";
+import { LayoutGroup } from "motion/react";
 import { hstack } from "@likec4/styles/patterns";
 import * as m$1 from "motion/react-m";
 import { extractViewTitleFromPath } from "@likec4/core/model";
 //#region src/navigationpanel/NavigationPanelControls.tsx
-var selectBreadcrumbs = ({ context }) => {
-	const view = context.view;
-	const folder = context.viewModel?.folder;
+var 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 {
-		folders: !folder || folder.isRoot ? [] : folder.breadcrumbs.map((s) => ({
-			folderPath: s.path,
-			title: s.title
-		})),
-		viewId: view.id,
-		viewTitle: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
-		isDynamicView: (context.viewModel?._type ?? view._type) === "dynamic"
+		viewId: s.view.id,
+		viewTitle: (s.view.title && extractViewTitleFromPath(s.view.title)) ?? "Untitled View",
+		isDynamicView: s.view._type === "dynamic",
+		editBtnVisible: hasEditor && noActiveWalkthrough,
+		editBtnDisabled: comparingLatest,
+		isReadOnly
 	};
+});
+var 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 }
 };
 var NavigationPanelControls = memo(() => {
 	const actor = useNavigationActor();
-	const { enableNavigationButtons, enableDynamicViewWalkthrough, enableCompareWithLatest, enableSearch } = useEnabledFeatures();
-	const { folders, viewTitle, isDynamicView } = useSelector(actor.actorRef, selectBreadcrumbs, deepEqual);
-	const folderBreadcrumbs = folders.flatMap(({ folderPath, title }, i) => [/* @__PURE__ */ jsx(UnstyledButton, {
+	const { enableNavigationButtons, enableDynamicViewWalkthrough, enableCompareWithLatest, enableSearch, enableVscode } = useEnabledFeatures();
+	const viewModel = useOptionalCurrentViewModel();
+	const { editBtnDisabled, editBtnVisible, isReadOnly, viewTitle, isDynamicView } = 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
-		}), "mantine-active", css({
+		}), css({
 			userSelect: "none",
-			maxWidth: "200px",
+			maxWidth: "[150px]",
 			display: {
 				base: "none",
 				"@/md": "block"
 			}
 		})),
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
+		...breadcrumbAnimation,
 		title,
 		onMouseEnter: () => actor.send({
 			type: "breadcrumbs.mouseEnter.folder",
@@ -72,13 +97,23 @@ var NavigationPanelControls = memo(() => {
 			});
 		},
 		children: title
-	}, folderPath), /* @__PURE__ */ jsx(BreadcrumbsSeparator, {}, `separator-${i}`)]);
+	}, 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,
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		className: cx("mantine-active", breadcrumbTitle({ truncate: true }), css({ userSelect: "none" })),
+		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" }),
@@ -87,41 +122,45 @@ var NavigationPanelControls = memo(() => {
 			actor.send({ type: "breadcrumbs.click.viewtitle" });
 		},
 		children: viewTitle
-	}, "view-title");
-	return /* @__PURE__ */ jsxs(AnimatePresence, {
-		propagate: true,
-		mode: "popLayout",
-		children: [
-			/* @__PURE__ */ jsx(LogoButton, {}, "logo-button"),
-			enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
-			/* @__PURE__ */ jsxs(m$1.div, {
-				layout: "position",
-				className: hstack({
-					gap: "1",
-					flexShrink: 1,
-					flexGrow: 1,
-					overflow: "hidden"
-				}),
-				children: [folderBreadcrumbs, viewBreadcrumb]
-			}, "breadcrumbs"),
-			/* @__PURE__ */ jsxs(m$1.div, {
-				layout: "position",
-				className: hstack({
-					gap: "0.5",
-					flexGrow: 0,
-					_empty: { display: "none" }
-				}),
-				children: [
-					/* @__PURE__ */ jsx(DetailsControls, { onOpen: () => actor.closeDropdown() }),
-					/* @__PURE__ */ jsx(OpenSource, {}),
-					/* @__PURE__ */ jsx(ToggleReadonly, {})
-				]
-			}, "actions"),
-			enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
-			enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
-			/* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
-		]
 	});
+	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"),
+				enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
+				/* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
+			]
+		}, "actions")
+	] });
 });
 NavigationPanelControls.displayName = "NavigationPanelControls";
 //#endregion