@likec4/diagram 1.60.0 → 1.61.0

package/dist/likec4diagram/ui/sequence-outline/StepBadge.mjs

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { m } from "motion/react";
 import { Box } from "@likec4/styles/jsx";
 
-//#region src/likec4diagram/ui/sequence-outline/StepBadge.tsx
+// src/likec4diagram/ui/sequence-outline/StepBadge.tsx
 const stepBadgeBase = css.raw({
 	flex: "none",
 	display: "flex",
@@ -50,5 +50,4 @@ const NotesDot = () => /* @__PURE__ */ jsx(Box, { css: {
 	bg: "text.dimmed"
 } });
 
-//#endregion
 export { NotesDot, StepBadge };

package/dist/likec4diagram/ui/sequence-outline/StepRow.mjs

@@ -1,19 +1,19 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.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 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 { MarkdownWithRefs } from "../../../components/markdown/MarkdownWithRefs.mjs";
 import { useDiagram } from "../../../hooks/safeContext.mjs";
-import { Markdown } from "../../../base-primitives/Markdown.mjs";
-import { SEQ_CARD_LAYOUT_ID, SEQ_TRANSITION } from "./motion.mjs";
 import { recessed } from "./depth-of-field.mjs";
+import { SEQ_CARD_LAYOUT_ID, SEQ_TRANSITION } from "./motion.mjs";
 import { NotesDot, StepBadge } from "./StepBadge.mjs";
 import { css } from "@likec4/styles/css";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RichText } from "@likec4/core";
 import { m } from "motion/react";
-import { HStack, styled } from "@likec4/styles/jsx";
+import { styled } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 
-//#region src/likec4diagram/ui/sequence-outline/StepRow.tsx
+// src/likec4diagram/ui/sequence-outline/StepRow.tsx
 /** A step the walkthrough is not on: one line, clickable, recessed with its level. */
 function StepRow({ node, recession, active }) {
 	const diagram = useDiagram();
@@ -167,7 +167,7 @@ const ActiveStepCard = ({ node }) => {
 					height: 10
 				},
 				transition: SEQ_TRANSITION,
-				children: /* @__PURE__ */ jsx(Markdown, {
+				children: /* @__PURE__ */ jsx(MarkdownWithRefs, {
 					value: RichText.from(notes),
 					fontSize: "md",
 					textScale: .95,
@@ -188,5 +188,4 @@ const ActiveStepCard = ({ node }) => {
 	});
 };
 
-//#endregion
 export { StepRow };

package/dist/likec4diagram/ui/sequence-outline/StoreProvider.mjs

@@ -1,15 +1,15 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import { roundDpr } from "../../../utils/roundDpr.mjs";
 import { selectDiagramContext, useDiagramSelector } from "../../../hooks/safeContext.mjs";
+import { roundDpr } from "../../../utils/roundDpr.mjs";
 import { buildTree } from "./tree.mjs";
-import { createContext, use, useEffect, useState } from "react";
+import { createContext, use, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import { shallowEqual } from "fast-equals";
 import { dynamicViewFlow, flowAncestors, invariant, isDynamicViewWithFlow } from "@likec4/core";
 import { extractViewTitleFromPath } from "@likec4/core/model";
 import { createStoreLogic, useSelector, useStore } from "@xstate/store-react";
 
-//#region src/likec4diagram/ui/sequence-outline/StoreProvider.tsx
+// src/likec4diagram/ui/sequence-outline/StoreProvider.tsx
 const selectFlow = selectDiagramContext((s) => {
 	const title = extractViewTitleFromPath(s.view.title ?? "Untitled");
 	const description = s.view.description;
@@ -69,11 +69,6 @@ function StoreGuard({ children, input }) {
 	useEffect(() => {
 		store.trigger.updateInput({ input });
 	}, [input]);
-	useEffect(() => {
-		return store.inspect((event) => {
-			console.log("event", event);
-		}).unsubscribe;
-	}, [store]);
 	return /* @__PURE__ */ jsx(Context, {
 		value: store,
 		children
@@ -92,5 +87,4 @@ function useOutlinePanelWidth() {
 	return useSelector(store.selectors.outlinePanelWidth);
 }
 
-//#endregion
 export { StoreProvider, useIsCollapsed, useOutlinePanelWidth, useSelectContext };

package/dist/likec4diagram/ui/sequence-outline/depth-of-field.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
 import { css } from "@likec4/styles/css";
 
-//#region src/likec4diagram/ui/sequence-outline/depth-of-field.ts
+// src/likec4diagram/ui/sequence-outline/depth-of-field.ts
 /**
 * The outline reads as a stack of planes: the nesting level the walkthrough is standing on
 * renders at full strength, and every level *above* it steps back in contrast, saturation
@@ -75,5 +75,4 @@ const activeFrameBorder = css({
 	pointerEvents: "none"
 });
 
-//#endregion
 export { activeFrame, activeFrameBorder, levelBand, nestedBand, recessed, recessionOf, shadedPanelBg };

package/dist/likec4diagram/ui/sequence-outline/motion.mjs

@@ -1,4 +1,4 @@
-//#region src/likec4diagram/ui/sequence-outline/motion.ts
+// src/likec4diagram/ui/sequence-outline/motion.ts
 /**
 * Shared-layout transitions. The frame, the card and the badge each carry a `layoutId`, so
 * walking a step moves one element rather than swapping two — the frame travels to the branch
@@ -18,5 +18,4 @@ const SEQ_FRAME_LAYOUT_ID = "likec4-seq-active-frame";
 const SEQ_CARD_LAYOUT_ID = "likec4-seq-active-card";
 const SEQ_BADGE_LAYOUT_ID = "likec4-seq-active-badge";
 
-//#endregion
 export { SEQ_BADGE_LAYOUT_ID, SEQ_CARD_LAYOUT_ID, SEQ_FRAME_LAYOUT_ID, SEQ_TRANSITION };

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

@@ -1,12 +1,12 @@
-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 IconArrowFork from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowFork.mjs";
-import IconArrowGuide from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowGuide.mjs";
-import IconCornerDownRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCornerDownRight.mjs";
-import IconPlayerStop from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStop.mjs";
-import IconRepeat from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRepeat.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 IconArrowFork from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowFork.mjs";
+import IconArrowGuide from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowGuide.mjs";
+import IconCornerDownRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCornerDownRight.mjs";
+import IconPlayerStop from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStop.mjs";
+import IconRepeat from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRepeat.mjs";
 import { css } from "@likec4/styles/css";
 
-//#region src/likec4diagram/ui/sequence-outline/presentation.ts
+// 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.
@@ -83,5 +83,4 @@ const flowPresentation = {
 	}
 };
 
-//#endregion
 export { flowPresentation };

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

@@ -2,7 +2,7 @@ import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
 import { isOutlineFlowNode } from "./types.mjs";
 import { useMemo } from "react";
 
-//#region src/likec4diagram/ui/sequence-outline/tree.ts
+// 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 = [];
@@ -65,5 +65,4 @@ function collectTrail(nodes, ancestors) {
 	return trail;
 }
 
-//#endregion
 export { buildTree, collectTrail, firstStepOf };

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

@@ -1,6 +1,6 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
 
-//#region src/likec4diagram/ui/sequence-outline/types.ts
+// 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
@@ -10,5 +10,4 @@ function isOutlineFlowNode(node) {
 	return node.nodeProps.type !== "step";
 }
 
-//#endregion
 export { isOutlineFlowNode };

package/dist/likec4diagram/useLayoutConstraints.mjs

@@ -1,20 +1,18 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useXYStoreApi } from "../hooks/useXYFlow.mjs";
-import { leafNodeRects, nodeToRect as nodeToRect$1 } from "../utils/xyflow.mjs";
-import { useDiagram } from "../hooks/safeContext.mjs";
-import { useCurrentViewRouting } from "../hooks/useCurrentView.mjs";
-import { vector as vector$1 } from "../utils/index.mjs";
 import { selectLabelRoutes } from "../hooks/useEdgeTracks.mjs";
+import { vector as vector$1 } from "../utils/index.mjs";
 import { initialControlPoints } from "../utils/edge-corners.mjs";
+import { leafNodeRects, nodeToRect as nodeToRect$1 } from "../utils/xyflow.mjs";
 import { useMemo, useRef } from "react";
 import { clamp, difference, filter, flatMap, hasAtLeast, map, pipe, unique } from "remeda";
 import { DefaultMap, nonNullable } from "@likec4/core";
+import { getNodeDimensions } from "@xyflow/system";
 import { BBox as BBox$1, placeLabelsAlongRoutes } from "@likec4/core/geometry";
 import { invariant as invariant$1, isome } from "@likec4/core/utils";
-import { getNodeDimensions } from "@xyflow/system";
 import { produce } from "immer";
 
-//#region src/likec4diagram/useLayoutConstraints.ts
+// src/likec4diagram/useLayoutConstraints.ts
 var Rect$1 = class {
 	static {
 		__name(this, "Rect");
@@ -444,10 +442,8 @@ function createLayoutConstraints(xyflowApi, editingNodeIds, routing) {
 /**
 * Keeps the layout constraints (parent nodes and children) when dragging a node
 */
-function useLayoutConstraints() {
+function useLayoutConstraints({ routing, diagram }) {
 	const xystore = useXYStoreApi();
-	const diagram = useDiagram();
-	const routing = useCurrentViewRouting();
 	const solverRef = useRef(void 0);
 	return useMemo(() => {
 		return {
@@ -478,5 +474,4 @@ function useLayoutConstraints() {
 	]);
 }
 
-//#endregion
 export { createLayoutConstraints, useLayoutConstraints };

package/dist/likec4diagram/useNodeDragHandlers.mjs

@@ -0,0 +1,28 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useLayoutConstraints } from "./useLayoutConstraints.mjs";
+import { useGraphForceSimulation } from "./xyflow-graph/useGraphForceSimulation.mjs";
+
+// src/likec4diagram/useNodeDragHandlers.ts
+/**
+* Keeps the layout constraints (parent nodes and children) when dragging a node
+*/
+function useNodeDragHandlers({ nodesDraggable, viewRouting, isGraphVariant, graphTopology, diagram }) {
+	const graphForceHandlers = useGraphForceSimulation({
+		enabled: isGraphVariant,
+		topology: graphTopology ?? {
+			graphNodes: [],
+			graphEdges: [],
+			topologyKey: "-none-"
+		},
+		diagram
+	});
+	const layoutConstraints = useLayoutConstraints({
+		routing: viewRouting,
+		diagram
+	});
+	if (!nodesDraggable) return;
+	if (isGraphVariant && graphTopology && graphTopology.graphNodes.length > 0) return graphForceHandlers;
+	return layoutConstraints;
+}
+
+export { useNodeDragHandlers };

package/dist/likec4diagram/xyflow-diagram/diagram-view.mjs

@@ -4,7 +4,13 @@ import { readableText } from "../../utils/readableText.mjs";
 import { hasAtLeast, pick } from "remeda";
 import { GroupElementKind, Queue, invariant, isStepPath, nonNullable, whereOperatorAsPredicate } from "@likec4/core";
 
-//#region src/likec4diagram/xyflow-diagram/diagram-view.ts
+// src/likec4diagram/xyflow-diagram/diagram-view.ts
+/**
+* Always defined: node updates keep the previous class name when the new one is undefined
+*/
+function diffClassName(diffStatus) {
+	return diffStatus ? `likec4-diff likec4-diff-${diffStatus}` : "";
+}
 function sentence(parts) {
 	return parts.filter((part) => !!part).map((part) => part.endsWith(".") ? part : `${part}.`).join(" ");
 }
@@ -108,6 +114,7 @@ function diagramToXY(opts) {
 				height: node.height
 			},
 			ariaLabel: nodeAriaLabel(node),
+			className: diffClassName(node.diffStatus),
 			initialWidth: node.width,
 			initialHeight: node.height,
 			hidden: node.kind !== GroupElementKind && !visiblePredicate(node),
@@ -239,6 +246,7 @@ function diagramToXY(opts) {
 			source: ns + source,
 			target: ns + target,
 			ariaLabel: edgeAriaLabel(edge, nodeById(source), nodeById(target)),
+			className: diffClassName(edge.diffStatus),
 			zIndex: ZIndexes.Edge,
 			hidden: !visiblePredicate(edge),
 			deletable,
@@ -271,5 +279,4 @@ function diagramToXY(opts) {
 	};
 }
 
-//#endregion
 export { diagramToXY };

package/dist/likec4diagram/xyflow-graph/graph-view-to-xy.mjs

@@ -4,7 +4,7 @@ import { readableText } from "../../utils/readableText.mjs";
 import { pick } from "remeda";
 import { nonNullable, whereOperatorAsPredicate } from "@likec4/core";
 
-//#region src/likec4diagram/xyflow-graph/graph-view-to-xy.ts
+// src/likec4diagram/xyflow-graph/graph-view-to-xy.ts
 /**
 * Diameter (in px) of the circle used to represent an element in "graph" display variant.
 */
@@ -172,5 +172,4 @@ function graphViewToXY(opts) {
 	};
 }
 
-//#endregion
 export { graphViewToXY };

package/dist/likec4diagram/xyflow-graph/useGraphForceSimulation.mjs

@@ -1,9 +1,8 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { useDiagram } from "../../hooks/safeContext.mjs";
 import { useEffect, useMemo, useRef } from "react";
 import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY } from "d3-force";
 
-//#region src/likec4diagram/xyflow-graph/useGraphForceSimulation.ts
+// src/likec4diagram/xyflow-graph/useGraphForceSimulation.ts
 const radius = 20 / 2;
 /**
 * Picks the visible graph-element nodes and visible relationship edges out of a diagram's
@@ -62,10 +61,9 @@ function buildSimGraph(graphNodes, graphEdges) {
 * Positions are pushed through the same `xyflow.applyChanges` channel as a regular node drag,
 * so they stay in sync with the rest of the diagram state instead of drifting out of it.
 */
-function useGraphForceSimulation({ enabled, nodes: xynodes, edges: xyedges }) {
-	const diagram = useDiagram();
+function useGraphForceSimulation({ enabled, topology, diagram }) {
 	const simulationRef = useRef(void 0);
-	const { graphNodes, graphEdges, topologyKey } = useMemo(() => selectGraphTopology(xynodes, xyedges), [xynodes, xyedges]);
+	const { graphNodes, graphEdges, topologyKey } = topology;
 	useEffect(() => {
 		if (!enabled || graphNodes.length === 0) {
 			simulationRef.current?.stop();
@@ -124,5 +122,4 @@ function useGraphForceSimulation({ enabled, nodes: xynodes, edges: xyedges }) {
 	}), []);
 }
 
-//#endregion
 export { buildSimGraph, selectGraphTopology, useGraphForceSimulation };

package/dist/likec4diagram/xyflow-props.mjs

@@ -0,0 +1,25 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+
+// src/likec4diagram/xyflow-props.ts
+/**
+* Viewport controlled by the diagram, when neither fit view nor initial zoom is set:
+* top-left corner of the view bounds at zoom 1.
+* Returns `undefined` when the viewport is left to the diagram actor.
+*/
+function resolveControlledViewport(enableFitView, initialZoom, bounds) {
+	if (enableFitView || initialZoom !== void 0) return;
+	return {
+		x: -bounds.x,
+		y: -bounds.y,
+		zoom: 1
+	};
+}
+/**
+* Resolves whether an interaction (dragging, selection) is enabled:
+* the override wins over the default, and a busy editor disables it.
+*/
+function resolveInteractionEnabled(enabled, override, isEditorBusy) {
+	return (override ?? enabled) && !isEditorBusy;
+}
+
+export { resolveControlledViewport, resolveInteractionEnabled };

package/dist/likec4diagram/xyflow-sequence/const.mjs

@@ -1,4 +1,4 @@
-//#region src/likec4diagram/xyflow-sequence/const.ts
+// src/likec4diagram/xyflow-sequence/const.ts
 const SeqZIndex = {
 	compound: 1,
 	subflows: 10,
@@ -10,5 +10,4 @@ const SeqParallelAreaColor = {
 	active: "amber"
 };
 
-//#endregion
 export { SeqParallelAreaColor, SeqZIndex };

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

@@ -2,11 +2,11 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { normalizeSpacing, rectFromSteps } from "./utils.mjs";
 import { filter, first, flatMap, hasAtLeast, last, map, only, pipe } from "remeda";
 import { invariant, nonNullable, nonexhaustive } from "@likec4/core/utils";
-import { StepPath, flowAncestors, flowGuards, hasProp } from "@likec4/core/types";
+import { StepPath, flowGuards } from "@likec4/core/types";
 import * as kiwi from "@lume/kiwi";
 import defu from "defu";
 
-//#region src/likec4diagram/xyflow-sequence/layouter.ts
+// src/likec4diagram/xyflow-sequence/layouter.ts
 const Strength = {
 	required: kiwi.Strength.required,
 	strong: kiwi.Strength.strong,
@@ -562,5 +562,4 @@ var SequenceViewLayouter = class {
 	}
 };
 
-//#endregion
 export { SequenceViewLayouter, Strength };

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

@@ -5,7 +5,7 @@ import { entries, filter, first, identity, isArray, isEmptyish, isTruthy, map, p
 import { nonNullable } from "@likec4/core";
 import { DynamicViewFlow, NodeId as NodeId$1, dynamicViewFlow as dynamicViewFlow$1, hasProp as hasProp$1 } from "@likec4/core/types";
 
-//#region src/likec4diagram/xyflow-sequence/sequence-view-to-xy.ts
+// src/likec4diagram/xyflow-sequence/sequence-view-to-xy.ts
 const calcCollapsedFlows = piped(identity(), entries(), filter(([_, collapsed]) => collapsed), map(([flowId]) => flowId));
 /**
 * Converts a sequence layout to XY flow nodes and edges.
@@ -39,7 +39,7 @@ function sequenceLayoutToXY({ view, currentViewId, collapsedFlows }) {
 			console.error(`Step Edge "${step.id}" not found`);
 			continue;
 		}
-		xyedges.push(toSeqStepEdge(step, edge, currentViewId ?? view.id, stepnum++, ctx));
+		xyedges.push(toSeqStepEdge(step, edge, view.id, stepnum++, ctx));
 	}
 	return {
 		xynodes,
@@ -285,5 +285,4 @@ function composeAltTryData(parent, subflow, { flow, subflowArea }) {
 	};
 }
 
-//#endregion
 export { sequenceLayoutToXY };

package/dist/likec4diagram/xyflow-sequence/sequence-view.mjs

@@ -1,11 +1,11 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { buildCompounds } from "./utils.mjs";
 import { SequenceViewLayouter } from "./layouter.mjs";
+import { buildCompounds } from "./utils.mjs";
 import { flat, groupByProp, hasAtLeast, map, mapValues, pipe, values } from "remeda";
 import { DefaultMap, invariant, nonNullable } from "@likec4/core/utils";
 import { parentFlow } from "@likec4/core/types";
 
-//#region src/likec4diagram/xyflow-sequence/sequence-view.ts
+// src/likec4diagram/xyflow-sequence/sequence-view.ts
 function calcSequenceLayout(view, flow, collapsedFlows = []) {
 	const actorNodes = /* @__PURE__ */ new Set();
 	const getNode = (id) => nonNullable(view.nodes.find((n) => n.id === id));
@@ -142,5 +142,4 @@ function toSeqActor({ actor, ports, layout }) {
 	};
 }
 
-//#endregion
 export { calcSequenceLayout };

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

@@ -2,7 +2,7 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { groupBy, mapValues, pipe, values } from "remeda";
 import { Stack, invariant, isAncestor } from "@likec4/core/utils";
 
-//#region src/likec4diagram/xyflow-sequence/utils.ts
+// src/likec4diagram/xyflow-sequence/utils.ts
 const paddingFromNumber = (spacing) => ({
 	left: spacing,
 	right: spacing,
@@ -93,5 +93,4 @@ function buildCompounds(actors, nodes) {
 	return result;
 }
 
-//#endregion
 export { buildCompounds, normalizeSpacing, rectFromSteps };

package/dist/navigationpanel/ElementViewControls.mjs

@@ -1,5 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../hooks/safeContext.mjs";
+import { useDiagram } from "../hooks/safeContext.mjs";
 import { css } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -7,16 +7,17 @@ import { invariant } from "@likec4/core";
 import { SegmentedControl } from "@mantine/core";
 import * as m from "motion/react-m";
 
-//#region src/navigationpanel/ElementViewControls.tsx
+// src/navigationpanel/ElementViewControls.tsx
 /**
 * Diagram/Graph segmented control for element views.
 */
-const ElementViewModeSwitcher = forwardRef(({ value, onChange }, ref) => /* @__PURE__ */ jsx(m.div, {
+const ElementViewModeSwitcher = forwardRef(({ value, disabled, onChange }, ref) => /* @__PURE__ */ jsx(m.div, {
 	ref,
 	layout: "position",
 	children: /* @__PURE__ */ jsx(SegmentedControl, {
 		size: "xs",
 		value,
+		disabled,
 		onChange: (variant) => {
 			invariant(variant === "diagram" || variant === "graph", "Invalid element view variant");
 			onChange(variant);
@@ -31,15 +32,14 @@ const ElementViewModeSwitcher = forwardRef(({ value, onChange }, ref) => /* @__P
 		}]
 	})
 }));
-const selectElementViewVariant = selectDiagramContext((c) => c.elementViewVariant);
 /**
 * Renders the Diagram/Graph toggle for the current element view and switches the diagram's
 * display variant when the user picks a different mode.
 */
-function ElementViewControls() {
-	const elementViewVariant = useDiagramSelector(selectElementViewVariant);
+function ElementViewControls({ elementViewVariant, disabled = false }) {
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsx(ElementViewModeSwitcher, {
+		disabled,
 		value: elementViewVariant,
 		onChange: (mode) => {
 			diagram.switchElementViewVariant(mode);
@@ -47,5 +47,4 @@ function ElementViewControls() {
 	});
 }
 
-//#endregion
 export { ElementViewControls };

package/dist/navigationpanel/NavigationPanel.mjs

@@ -1,12 +1,13 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { NavigationPanel as NavigationPanel$1 } from "../components/NavigationPanel.mjs";
 import { selectDiagramContext, useDiagramSelector } from "../hooks/safeContext.mjs";
 import { useMantinePortalProps } from "../hooks/useMantinePortalProps.mjs";
 import { ComparePanel } from "./comparepanel/ComparePanel.mjs";
 import { EditorPanel } from "./editorpanel/EditorPanel.mjs";
 import { NavigationPanelActorContextProvider } from "./hooks.mjs";
-import { ActiveWalkthroughControls } from "./walkthrough/ActiveWalkthroughControls.mjs";
 import { NavigationPanelControls } from "./NavigationPanelControls.mjs";
 import { NavigationPanelDropdown } from "./NavigationPanelDropdown.mjs";
+import { ActiveWalkthroughControls } from "./walkthrough/ActiveWalkthroughControls.mjs";
 import { WalkthroughPanel } from "./walkthrough/WalkthroughPanel.mjs";
 import { memo, useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -17,9 +18,9 @@ import { hasProp, isDynamicView } from "@likec4/core/types";
 import { VStack } from "@likec4/styles/jsx";
 import { getViewFolderPath } from "@likec4/core/model";
 import { hstack } from "@likec4/styles/patterns";
-import * as m$1 from "motion/react-m";
+import "motion/react-m";
 
-//#region src/navigationpanel/NavigationPanel.tsx
+// src/navigationpanel/NavigationPanel.tsx
 const select = selectDiagramContext((s) => {
 	const isActiveWalkthrough = !!s.activeWalkthrough;
 	const viewFolder = getViewFolderPath(s.view.title ?? "") ?? "";
@@ -38,7 +39,7 @@ const select = selectDiagramContext((s) => {
 	};
 });
 const stateHasActiveTag = (state) => state.hasTag("active");
-const NavigationPanel = memo(({ actorRef }) => {
+const NavigationPanel = memo(({ actorRef, isComparing }) => {
 	const opened = useSelector(actorRef, stateHasActiveTag);
 	const portalProps = useMantinePortalProps();
 	const { viewId, mode, viewFolder } = useDiagramSelector(select);
@@ -55,70 +56,40 @@ const NavigationPanel = memo(({ actorRef }) => {
 		viewId,
 		viewFolder
 	]);
-	return /* @__PURE__ */ jsx(VStack, {
-		css: {
-			zIndex: "panel",
-			alignItems: "flex-start",
-			pointerEvents: "none",
-			position: "absolute",
-			top: "0",
-			left: "0",
-			margin: "0",
-			width: "100%",
-			gap: "xxs",
-			maxWidth: ["100vw", "100cqw"],
-			"@/sm": {
-				margin: "xs",
-				gap: "xs",
-				width: "max-content",
-				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__ */ 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-${mode}-viewId-${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, {})
-						}) }), /* @__PURE__ */ jsx(NavigationPanelDropdown, {})]
-					})
-				}) }),
-				/* @__PURE__ */ jsx(ComparePanel, {}),
-				mode === "walkthrough" && /* @__PURE__ */ jsx(WalkthroughPanel, {}),
-				/* @__PURE__ */ jsx(EditorPanel, {})
-			] })
-		})
-	});
+	return /* @__PURE__ */ jsx(NavigationPanel$1.Root, { children: /* @__PURE__ */ jsx(NavigationPanelActorContextProvider, {
+		value: actorRef,
+		children: mode !== "walkthrough-flow" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__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(NavigationPanel$1.Body, {
+						layout: "size",
+						layoutDependency: `mode-${mode}-viewId-${viewId}`,
+						"data-panel": "navigation",
+						onMouseLeave: () => actorRef.send({ type: "breadcrumbs.mouseLeave" }),
+						children: mode === "walkthrough" ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {})
+					}) }), /* @__PURE__ */ jsx(NavigationPanelDropdown, {})]
+				})
+			}) }),
+			mode === "walkthrough" && /* @__PURE__ */ jsx(WalkthroughPanel, {}),
+			isComparing && /* @__PURE__ */ jsx(ComparePanel, {}),
+			/* @__PURE__ */ jsx(EditorPanel, {})
+		] })
+	}) });
 });
 NavigationPanel.displayName = "NavigationPanel";
 
-//#endregion
 export { NavigationPanel };