@likec4/diagram 1.60.0 → 1.61.0

package/dist/likec4diagram/state/machine.actions.mjs

@@ -1,33 +1,62 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { Base } from "../../base/Base.mjs";
+import { detailsSubject } from "../../overlays/element-details/subject.mjs";
 import { viewRouting } from "../../utils/view-routing.mjs";
 import { convertToXYFlow } from "../convert-to-xyflow.mjs";
-import { findDiagramEdge, findDiagramNode, typedSystem, viewBounds } from "./utils.mjs";
-import { machine } from "./machine.setup.mjs";
 import { createLayoutConstraints } from "../useLayoutConstraints.mjs";
-import { focusNodesEdges, mergeXYNodesEdges, resetEdgeControlPoints } from "./assign.mjs";
 import { getAligner, toNodeRect } from "./aligners.mjs";
+import { focusNodesEdges, mergeXYNodesEdges, resetEdgeControlPoints } from "./assign.mjs";
 import { assignViewportBefore, cancelFitDiagram, centerOnNodeOrEdge, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport, setViewportCenter } from "./machine.actions.layout.mjs";
+import { machine } from "./machine.setup.mjs";
+import { findDiagramEdge, findDiagramNode, typedSystem, viewBounds } from "./utils.mjs";
 import { hasAtLeast, isTruthy, mapToObj, omit } from "remeda";
 import { dynamicViewFlow, exact, invariant, isDynamicView, nonNullable, nonexhaustive } from "@likec4/core";
+import { nodeToRect } from "@xyflow/system";
 import { BBox as BBox$1 } from "@likec4/core/geometry";
 import { difference as difference$1, isString as isString$1 } from "@likec4/core/utils";
-import { nodeToRect } from "@xyflow/system";
 import { getViewFolderPath } from "@likec4/core/model";
 import { assertEvent } from "xstate";
 import { produce } from "immer";
 
-//#region src/likec4diagram/state/machine.actions.ts
+// src/likec4diagram/state/machine.actions.ts
 const resetSelection = () => machine.raise({ type: "xyflow.resetSelection" });
-const disableCompareWithLatest = () => machine.assign(({ context }) => {
-	return {
-		toggledFeatures: {
-			...context.toggledFeatures,
-			enableCompareWithLatest: false
-		},
+/**
+* Resolves the layout type requested by `emit.onLayoutTypeChange`,
+* or toggles the current one, if the action is triggered by another event.
+*/
+const resolveNextLayoutType = (context, event) => {
+	if (event.type === "emit.onLayoutTypeChange") return event.layoutType;
+	return context.view._layout === "auto" ? "manual" : "auto";
+};
+/**
+* Comparing layouts: before switching the layout type,
+* remembers the viewport of the current layout (to restore it when switching back)
+* and cancels pending editor changes when switching from manual to auto.
+*/
+const beforeLayoutTypeChangeWhileComparing = () => machine.enqueueActions(({ context, event, enqueue }) => {
+	const currentLayoutType = context.view._layout;
+	const nextLayoutType = resolveNextLayoutType(context, event);
+	if (!currentLayoutType || currentLayoutType === nextLayoutType) return;
+	if (currentLayoutType === "manual") {
+		enqueue.sendTo(typedSystem.editorActor, { type: "cancel" });
+		enqueue.assign({ viewportOnManualLayout: context.viewport });
+		return;
+	}
+	enqueue.assign({ viewportOnAutoLayout: context.viewport });
+});
+/**
+* Comparing layouts: on exit, switches back to manual layout (if auto is active)
+* and forgets the remembered viewports.
+*/
+const exitComparingLayouts = () => machine.enqueueActions(({ context, enqueue }) => {
+	if (context.view._layout === "auto") enqueue.emit({
+		type: "onLayoutTypeChange",
+		layoutType: "manual"
+	});
+	enqueue.assign({
 		viewportOnAutoLayout: null,
 		viewportOnManualLayout: null
-	};
+	});
 });
 const onEdgeDoubleClick = () => machine.assign(({ context, event }) => {
 	assertEvent(event, "xyflow.edgeDoubleClick");
@@ -233,18 +262,11 @@ const emitOnLayoutTypeChange = () => machine.enqueueActions(({ event, context, e
 		return;
 	}
 	const currentLayoutType = context.view._layout;
-	let nextLayoutType = currentLayoutType === "auto" ? "manual" : "auto";
-	if (event.type === "emit.onLayoutTypeChange") nextLayoutType = event.layoutType;
+	const nextLayoutType = resolveNextLayoutType(context, event);
 	if (currentLayoutType === nextLayoutType) {
 		console.warn("Ignoring layout type change event, layout type is already", currentLayoutType);
 		return;
 	}
-	if (context.toggledFeatures.enableCompareWithLatest === true) {
-		if (currentLayoutType === "manual" && nextLayoutType === "auto") enqueue.sendTo(typedSystem.editorActor, { type: "cancel" });
-		const currentViewport = context.viewport;
-		if (currentLayoutType === "auto") enqueue.assign({ viewportOnAutoLayout: currentViewport });
-		if (currentLayoutType === "manual") enqueue.assign({ viewportOnManualLayout: currentViewport });
-	}
 	enqueue.emit({
 		type: "onLayoutTypeChange",
 		layoutType: nextLayoutType
@@ -407,27 +429,35 @@ const sendSynced = () => {
 };
 const stopEditing = (wasChanged = false) => machine.sendTo(typedSystem.editorActor, { type: wasChanged ? "edit.move.end" : "edit.move.cancel" });
 const cancelEditing = () => machine.sendTo(typedSystem.editorActor, { type: "cancel" });
-const hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
-const openElementDetails = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
+const openNodeDetails = () => machine.enqueueActions(({ context, event, enqueue }) => {
 	let initiatedFrom = null;
 	let fromNodeId;
 	let subject;
 	switch (true) {
-		case !!params:
-			subject = params.fqn;
-			fromNodeId = params.fromNode ?? context.view.nodes.find((n) => n.modelRef === params.fqn)?.id;
-			break;
-		case event.type === "xyflow.nodeClick":
-			if (!hasModelFqn(event.node)) {
-				console.warn("No modelFqn in clicked node data");
+		case event.type === "xyflow.nodeClick": {
+			const clickedSubject = detailsSubject(event.node.data);
+			if (!clickedSubject) {
+				console.warn("No model or deployment reference in clicked node data");
 				return;
 			}
-			subject = event.node.data.modelFqn;
+			subject = clickedSubject;
 			fromNodeId = event.node.data.id;
 			break;
-		case event.type === "open.elementDetails":
-			subject = event.fqn;
-			fromNodeId = event.fromNode;
+		}
+		case event.type === "open.nodeDetails":
+			if (isString$1(event.target)) {
+				const node = context.xynodes.find((n) => n.id === event.target);
+				const nodeSubject = node ? detailsSubject(node.data) : null;
+				if (!nodeSubject) {
+					console.warn("No model or deployment reference for node", event.target);
+					return;
+				}
+				subject = nodeSubject;
+				fromNodeId = event.fromNode ?? event.target;
+			} else {
+				subject = event.target;
+				fromNodeId = event.fromNode ?? (subject.type === "deployment" ? context.view.nodes.find((n) => n.deploymentRef === subject.deployment)?.id : void 0);
+			}
 			break;
 		default: {
 			if (!context.lastClickedNode) {
@@ -436,11 +466,12 @@ const openElementDetails = (params) => machine.enqueueActions(({ context, event,
 			}
 			fromNodeId = context.lastClickedNode.id;
 			const node = context.xynodes.find((n) => n.id === fromNodeId);
-			if (!node || !hasModelFqn(node)) {
-				console.warn("No modelFqn in last clicked node");
+			const clickedSubject = node ? detailsSubject(node.data) : null;
+			if (!clickedSubject) {
+				console.warn("No model or deployment reference in last clicked node");
 				return;
 			}
-			subject = node.data.modelFqn;
+			subject = clickedSubject;
 			break;
 		}
 	}
@@ -469,15 +500,15 @@ const openOverlay = () => machine.enqueueActions(({ context, event, enqueue, che
 	assertEvent(event, [
 		"open.relationshipsBrowser",
 		"open.relationshipDetails",
-		"open.elementDetails"
+		"open.nodeDetails"
 	]);
 	if (!check("enabled: Overlays")) {
 		console.warn("Overlays feature is disabled");
 		return;
 	}
 	switch (event.type) {
-		case "open.elementDetails":
-			check("enabled: ElementDetails") ? enqueue(openElementDetails()) : console.warn("ElementDetails feature is disabled");
+		case "open.nodeDetails":
+			check("enabled: ElementDetails") ? enqueue(openNodeDetails()) : console.warn("ElementDetails feature is disabled");
 			break;
 		case "open.relationshipsBrowser":
 			if (!context.features.enableRelationshipBrowser) {
@@ -718,7 +749,13 @@ const handleNavigate = () => machine.enqueueActions(({ enqueue, context, event }
 		default: nonexhaustive(event);
 	}
 });
-const updateView = () => machine.enqueueActions(({ enqueue, event, context }) => {
+/**
+* Updates the current view in place.
+*
+* @param params.restoreLayoutViewport - when layout type changes (comparing layouts),
+* restore the viewport remembered for the next layout type, or recenter
+*/
+const updateView = (params) => machine.enqueueActions(({ enqueue, event, context }) => {
 	if (event.type !== "update.view") {
 		console.warn(`Ignoring unexpected event type: ${event.type} in action 'update.view'`);
 		return;
@@ -731,7 +768,8 @@ const updateView = () => machine.enqueueActions(({ enqueue, event, context }) =>
 	enqueue(assignXYDataFromView());
 	if (event.source === "editor") return;
 	enqueue(sendSynced());
-	if (context.toggledFeatures.enableCompareWithLatest === true && context.view._layout !== nextView._layout) {
+	const restoreLayoutViewport = params?.restoreLayoutViewport === true;
+	if (restoreLayoutViewport && context.view._layout !== nextView._layout) {
 		if (nextView._layout === "auto" && context.viewportOnAutoLayout) {
 			enqueue(setViewport({
 				viewport: context.viewportOnAutoLayout,
@@ -748,7 +786,7 @@ const updateView = () => machine.enqueueActions(({ enqueue, event, context }) =>
 		}
 	}
 	let recenter = !context.viewportChangedManually && !context.focusedNode && !context.activeWalkthrough;
-	recenter = recenter || context.toggledFeatures.enableCompareWithLatest === true && !!nextView._layout && context.view._layout !== nextView._layout;
+	recenter = recenter || restoreLayoutViewport && !!nextView._layout && context.view._layout !== nextView._layout;
 	if (nextView._type === "dynamic" && context.view._type === "dynamic") {
 		if (nextView.variant === context.view.variant && nextView.variant !== context.dynamicViewVariant) {
 			const nextCenter = BBox$1.center(viewBounds(context, nextView));
@@ -796,5 +834,4 @@ const collapseOrExpandSequenceFlow = () => machine.enqueueActions(({ enqueue, ev
 	}
 });
 
-//#endregion
-export { assignDynamicViewVariant, assignElementViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, assignViewportBefore, assignXYDataFromView, cancelAutoUnfocusTimer, cancelEditing, cancelFitDiagram, centerOnNodeOrEdge, closeAllOverlays, collapseOrExpandSequenceFlow, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnLayoutTypeChange, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureAllActors, ensureEditorActor, ensureNavigationPanelActor, ensureOverlaysActor, ensureSearchActor, fitDiagram, fitFocusedBounds, focusOnNodesAndEdges, handleNavigate, highlightNodeOrEdge, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openOverlay, openSourceOfFocusedOrLastClickedNode, raiseFitDiagram, raiseSetViewport, raiseUpdateView, resetEdgesControlPoints, resetLastClickedNode, resetSelection, returnViewportBefore, sendSynced, setViewport, setViewportCenter, startAutoUnfocusTimer, startEditing, startHotKeyActor, stopEditing, stopEditorActor, stopHotKeyActor, tagHighlight, triggerChange, undimEverything, updateFeatures, updateInputs, updateView };
+export { assignDynamicViewVariant, assignElementViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, assignViewportBefore, assignXYDataFromView, beforeLayoutTypeChangeWhileComparing, cancelAutoUnfocusTimer, cancelEditing, cancelFitDiagram, centerOnNodeOrEdge, closeAllOverlays, collapseOrExpandSequenceFlow, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnLayoutTypeChange, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureAllActors, ensureEditorActor, ensureNavigationPanelActor, ensureOverlaysActor, ensureSearchActor, exitComparingLayouts, fitDiagram, fitFocusedBounds, focusOnNodesAndEdges, handleNavigate, highlightNodeOrEdge, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openNodeDetails, openOverlay, openSourceOfFocusedOrLastClickedNode, raiseFitDiagram, raiseSetViewport, raiseUpdateView, resetEdgesControlPoints, resetLastClickedNode, resetSelection, returnViewportBefore, sendSynced, setViewport, setViewportCenter, startAutoUnfocusTimer, startEditing, startHotKeyActor, stopEditing, stopEditorActor, stopHotKeyActor, tagHighlight, triggerChange, undimEverything, updateFeatures, updateInputs, updateView };

package/dist/likec4diagram/state/machine.d.mts

@@ -1,15 +1,14 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { BaseEditorActorRef } from "../../editor/actor/setup.mjs";
-import { NavigationPanelActorLogic, NavigationPanelActorRef } from "../../navigationpanel/actor.mjs";
-import { OverlaysActorLogic, OverlaysActorRef } from "../../overlays/overlaysActor.mjs";
 import { SearchActorLogic, SearchActorRef } from "../../search/searchActor.mjs";
+import { EditorActorLogic } from "../../editor/actor/machine.mjs";
 import { HotkeyActorLogic } from "./hotkeyActor.mjs";
+import { OverlaysActorLogic, OverlaysActorRef } from "../../overlays/overlaysActor.mjs";
 import { MediaPrintActorLogic } from "./mediaPrintActor.mjs";
-import { EditorActorLogic } from "../../editor/actor/machine.mjs";
 import "../../editor/index.mjs";
+import { NavigationPanelActorLogic, NavigationPanelActorRef } from "../../navigationpanel/actor.mjs";
 import { BaseDiagramMachineLogic, Context, EmittedEvents, Events, Input } from "./machine.setup.mjs";
+import { BaseEditorActorRef } from "../../editor/actor/setup.mjs";
 import { ActorRef, SnapshotFrom, StateValueFrom } from "xstate";
-//#region src/likec4diagram/state/machine.d.ts
 declare const _diagramMachine: import("xstate").StateMachine<Context, Events, {
   search?: import("xstate").ActorRefFromLogic<SearchActorLogic>;
   hotkey?: import("xstate").ActorRefFromLogic<HotkeyActorLogic>;
@@ -41,20 +40,114 @@ declare const _diagramMachine: import("xstate").StateMachine<Context, Events, {
   src: "navigationPanel";
   logic: NavigationPanelActorLogic;
   id: "navigationPanel";
-}, never, never, never, "final" | "initializing" | "navigating" | {
-  isReady: {};
+}, never, {
+  type: "isReady";
+  params: unknown;
+} | {
+  type: "enabled: Editor";
+  params: unknown;
+} | {
+  type: "enabled: FitView";
+  params: unknown;
+} | {
+  type: "enabled: FocusMode";
+  params: unknown;
+} | {
+  type: "enabled: Readonly";
+  params: unknown;
+} | {
+  type: "enabled: RelationshipDetails";
+  params: unknown;
+} | {
+  type: "enabled: Search";
+  params: unknown;
+} | {
+  type: "enabled: ElementDetails";
+  params: unknown;
+} | {
+  type: "enabled: OpenSource";
+  params: unknown;
+} | {
+  type: "enabled: DynamicViewWalkthrough";
+  params: unknown;
+} | {
+  type: "enabled: NavigationPanel";
+  params: unknown;
 } | {
-  ready: {};
+  type: "focus.node: autoUnfocus";
+  params: unknown;
+} | {
+  type: "enabled: Overlays";
+  params: unknown;
+} | {
+  type: "not readonly";
+  params: unknown;
+} | {
+  type: "can compare layouts";
+  params: unknown;
+} | {
+  type: "is dynamic view";
+  params: unknown;
+} | {
+  type: "is dynamic view in sequence variant";
+  params: unknown;
+} | {
+  type: "is same view";
+  params: unknown;
+} | {
+  type: "is another view";
+  params: unknown;
+} | {
+  type: "click: node has modelFqn";
+  params: unknown;
+} | {
+  type: "click: node has details";
+  params: unknown;
+} | {
+  type: "click: selected node";
+  params: unknown;
+} | {
+  type: "click: same node";
+  params: unknown;
+} | {
+  type: "click: focused node";
+  params: unknown;
+} | {
+  type: "click: node.type = seq-subflow";
+  params: unknown;
+} | {
+  type: "click: node has connections";
+  params: unknown;
+} | {
+  type: "click: selected edge";
+  params: unknown;
+} | {
+  type: "click: active walkthrough step";
+  params: unknown;
+}, never, "final" | "isReady" | "initializing" | "navigating" | {
+  ready: "idle" | "walkthrough" | "focused" | "printing" | "comparing";
 }, string, Input, import("xstate").NonReducibleUnknown, EmittedEvents, import("xstate").MetaObject, {
   states: {
     readonly initializing: {};
-    readonly isReady: {
-      states?: {};
-      id?: string | undefined | undefined;
-    };
+    readonly isReady: {};
     readonly ready: {
-      states?: {};
-      id?: string | undefined | undefined;
+      states: {
+        idle: {
+          id: string;
+        };
+        focused: {
+          id: string;
+        };
+        walkthrough: {
+          id: string;
+        };
+        printing: {
+          id: string;
+        };
+        comparing: {
+          id: string;
+        };
+      };
     };
     readonly navigating: {
       id: string;
@@ -70,5 +163,4 @@ export interface DiagramMachineLogic extends BaseDiagramMachineLogic<{
 }, StateValueFrom<typeof _diagramMachine>> {}
 export type DiagramMachineSnapshot = SnapshotFrom<DiagramMachineLogic>;
 export interface DiagramMachineRef extends ActorRef<DiagramMachineSnapshot, Events, EmittedEvents> {}
-//#endregion
 export type { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents };

package/dist/likec4diagram/state/machine.mjs

@@ -1,15 +1,15 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { Context, machine } from "./machine.setup.mjs";
 import { updateEdgeData, updateNodeData } from "./assign.mjs";
-import { cancelFitDiagram, raiseUpdateView } from "./machine.actions.layout.mjs";
 import { assignDynamicViewVariant, assignElementViewVariant, emitOnLayoutTypeChange, stopEditorActor, triggerChange, updateFeatures, updateInputs } from "./machine.actions.mjs";
+import { cancelFitDiagram, raiseUpdateView } from "./machine.actions.layout.mjs";
+import { Context, machine } from "./machine.setup.mjs";
 import { initializing, isReady } from "./machine.state.initializing.mjs";
 import { navigating } from "./machine.state.navigating.mjs";
 import { ready } from "./machine.state.ready.mjs";
 import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { assign, stopChild } from "xstate/actions";
 
-//#region src/likec4diagram/state/machine.ts
+// src/likec4diagram/state/machine.ts
 const _diagramMachine = machine.createMachine({
 	initial: "initializing",
 	context: Context,
@@ -87,5 +87,4 @@ const _diagramMachine = machine.createMachine({
 */
 const diagramMachine = _diagramMachine;
 
-//#endregion
 export { diagramMachine };

package/dist/likec4diagram/state/machine.setup.d.mts

@@ -1,23 +1,23 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { Types } from "../types.mjs";
-import { NavigationPanelActorLogic } from "../../navigationpanel/actor.mjs";
+import { HotKeyEvent, HotkeyActorLogic } from "./hotkeyActor.mjs";
 import { OverlaysActorLogic } from "../../overlays/overlaysActor.mjs";
+import { EditorActorLogic } from "../../editor/actor/machine.mjs";
 import { SearchActorLogic } from "../../search/searchActor.mjs";
-import { HotKeyEvent, HotkeyActorLogic } from "./hotkeyActor.mjs";
 import { MediaPrintActorLogic, MediaPrintEvent } from "./mediaPrintActor.mjs";
-import { EditorActorLogic } from "../../editor/actor/machine.mjs";
 import "../../editor/index.mjs";
+import { NavigationPanelActorLogic } from "../../navigationpanel/actor.mjs";
 import { EnabledFeatures, TogglableFeature } from "../../context/DiagramFeatures.mjs";
 import { XYFlowInstance, XYStoreApi } from "../../hooks/useXYFlow.mjs";
-import { AlignmentMode } from "./aligners.mjs";
 import { OpenSourceParams, RelationshipBrowserScope, ViewPaddings } from "../../LikeC4Diagram.props.mjs";
+import { DetailsSubject } from "../../overlays/element-details/subject.mjs";
+import { Types } from "../types.mjs";
+import { AlignmentMode } from "./aligners.mjs";
 import { MouseEvent } from "react";
-import { BBox } from "@likec4/core/geometry";
 import { EdgeChange, NodeChange, Rect, Viewport } from "@xyflow/system";
+import { BBox } from "@likec4/core/geometry";
 import { DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, EdgeId, Fqn, LayoutType, NodeId, NodeNotation, StepPath, ViewChange, ViewId, WhereOperator } from "@likec4/core/types";
 import { ActorRefFromLogic, StateMachine, StateValue } from "xstate";
 import { PartialDeep } from "type-fest";
-//#region src/likec4diagram/state/machine.setup.d.ts
 /**
  * Display variant for element views: plain boxes-and-lines diagram, or a compact graph
  * of circles (topology-focused, akin to Structurizr's "Explore" graph view).
@@ -212,8 +212,8 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
 } | ({
   type: 'open.source';
 } & OpenSourceParams) | {
-  type: 'open.elementDetails';
-  fqn: Fqn;
+  type: 'open.nodeDetails';
+  target: NodeId | DetailsSubject;
   fromNode?: NodeId | undefined;
 } | {
   type: 'open.relationshipDetails';
@@ -271,6 +271,10 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
   direction?: never;
 } | {
   type: 'walkthrough.end';
+} | {
+  type: 'compare.start';
+} | {
+  type: 'compare.end';
 } | {
   type: 'sequence.flow.collapse';
   flowId: StepPath;
@@ -373,4 +377,4 @@ type ChildrenActor = { [K in keyof ChildrenActors]: {
  * Here is a trick to reduce inference types
  */
 export interface BaseDiagramMachineLogic<Actors extends Partial<ActorLogicMap> = ActorLogicMap, State extends StateValue = never> extends StateMachine<Context, Events, Actors & Omit<ActorLogicMap, keyof Actors>, ChildrenActor, never, never, never, State, never, Input, never, EmittedEvents, never, never> {}
-//#endregion
+export {};

package/dist/likec4diagram/state/machine.setup.mjs

@@ -1,11 +1,11 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { MaxZoom, MinZoom } from "../../base/const.mjs";
 import { DefaultFeatures } from "../../context/DiagramFeatures.mjs";
-import { defineActors } from "../../utils/defineActors.mjs";
 import { editorActorLogic } from "../../editor/actor/machine.mjs";
 import { navigationPanelActorLogic } from "../../navigationpanel/actor.mjs";
 import { overlaysActorLogic } from "../../overlays/overlaysActor.mjs";
 import { searchActorLogic } from "../../search/searchActor.mjs";
+import { defineActors } from "../../utils/defineActors.mjs";
 import { hotkeyActorLogic } from "./hotkeyActor.mjs";
 import { mediaPrintActorLogic } from "./mediaPrintActor.mjs";
 import { DiagramToggledFeaturesPersistence } from "./persistence.mjs";
@@ -13,8 +13,9 @@ import { isTruthy, mapValues } from "remeda";
 import { hasProp, isDynamicView, nonexhaustive } from "@likec4/core";
 import { BBox as BBox$1 } from "@likec4/core/geometry";
 import { assertEvent, setup } from "xstate";
+import { and, not, or, stateIn } from "xstate/guards";
 
-//#region src/likec4diagram/state/machine.setup.ts
+// src/likec4diagram/state/machine.setup.ts
 function Context({ input }) {
 	return {
 		...input,
@@ -26,10 +27,7 @@ function Context({ input }) {
 			...DefaultFeatures,
 			...input.features
 		},
-		toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
-			enableReadOnly: true,
-			enableCompareWithLatest: false
-		},
+		toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? { enableReadOnly: true },
 		initialized: {
 			xydata: false,
 			xyflow: false
@@ -61,19 +59,50 @@ function Context({ input }) {
 		maxZoom: input.maxZoom ?? 3
 	};
 }
-const deriveToggledFeatures = (context) => {
-	let toggledFeatures = context.toggledFeatures;
-	const hasActiveWalkthrough = isTruthy(context.activeWalkthrough);
-	const enableCompareWithLatest = context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isTruthy(context.view._layout) && !hasActiveWalkthrough;
-	return {
-		enableCompareWithLatest,
-		enableReadOnly: context.features.enableReadOnly || (toggledFeatures.enableReadOnly ?? false) || hasActiveWalkthrough || enableCompareWithLatest && context.view._layout === "auto"
-	};
-};
-const isReadOnly = (context) => deriveToggledFeatures(context).enableReadOnly;
+/**
+* Tag of the `ready.comparing` state (comparing manual layout with the latest auto layout)
+*/
+const ComparingTag = "comparing";
+/**
+* Returns true if the diagram is in `ready.comparing` state
+*/
+const isComparingLayouts = (snapshot) => snapshot.hasTag(ComparingTag);
+/**
+* Readonly mode is enabled when:
+* - Global `features.enableReadOnly` is true (even if toggled off at runtime)
+* OR
+* - Runtime feature `ReadOnly` is toggled on
+* OR
+* - There is an active walkthrough
+* OR
+* - Comparing layouts, and auto layout is active
+*/
+const isReadOnlyContext = (context, isComparing) => context.features.enableReadOnly || (context.toggledFeatures.enableReadOnly ?? false) || isTruthy(context.activeWalkthrough) || isComparing && context.view._layout === "auto";
+/**
+* Derives runtime features (toggled features combined with the state of the diagram)
+*/
+const deriveToggledFeatures = (snapshot) => ({ enableReadOnly: isReadOnlyContext(snapshot.context, isComparingLayouts(snapshot)) });
+/**
+* Returns true if comparing layouts is possible:
+* feature is enabled, view is layouted and has drifts
+*/
+const canCompareLayouts = (context) => context.features.enableCompareWithLatest && isTruthy(context.view._layout) && !!context.view.drifts && context.view.drifts.length > 0;
 function isActiveSequenceWalkthrough(context) {
 	return isDynamicView(context.view) && context.dynamicViewVariant === "sequence" && !!context.activeWalkthrough && hasProp(context.view, "flow");
 }
+const targetState = {
+	idle: "#idle",
+	focused: "#focused",
+	walkthrough: "#walkthrough",
+	printing: "#printing",
+	comparing: "#comparing",
+	navigating: "#navigating"
+};
+/**
+* Guard: diagram is readonly (see {@link isReadOnlyContext}).
+* Uses `stateIn` to check if comparing layouts, as guards don't have access to the state value.
+*/
+const isReadOnly = or([({ context }) => isReadOnlyContext(context, false), and([stateIn(targetState.comparing), ({ context }) => context.view._layout === "auto"])]);
 const actors = defineActors({
 	hotkey: hotkeyActorLogic,
 	overlays: overlaysActorLogic,
@@ -95,8 +124,8 @@ const machine = setup({
 		"isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
 		"enabled: Editor": ({ context }) => context.features.enableEditor,
 		"enabled: FitView": ({ context }) => context.features.enableFitView,
-		"enabled: FocusMode": ({ context }) => context.features.enableFocusMode && isReadOnly(context),
-		"enabled: Readonly": ({ context }) => isReadOnly(context),
+		"enabled: FocusMode": and([({ context }) => context.features.enableFocusMode, isReadOnly]),
+		"enabled: Readonly": isReadOnly,
 		"enabled: RelationshipDetails": ({ context }) => context.features.enableRelationshipDetails,
 		"enabled: Search": ({ context }) => context.features.enableSearch,
 		"enabled: ElementDetails": ({ context }) => context.features.enableElementDetails,
@@ -108,7 +137,8 @@ const machine = setup({
 			return event.autoUnfocus === true;
 		},
 		"enabled: Overlays": ({ context }) => context.features.enableElementDetails || context.features.enableRelationshipBrowser || context.features.enableRelationshipDetails,
-		"not readonly": ({ context }) => !isReadOnly(context),
+		"not readonly": not(isReadOnly),
+		"can compare layouts": ({ context }) => canCompareLayouts(context),
 		"is dynamic view": ({ context }) => context.view._type === "dynamic",
 		"is dynamic view in sequence variant": ({ context }) => context.view._type === "dynamic" && context.dynamicViewVariant === "sequence",
 		"is same view": ({ context, event }) => {
@@ -127,6 +157,11 @@ const machine = setup({
 			assertEvent(event, "xyflow.nodeClick");
 			return "modelFqn" in event.node.data;
 		},
+		"click: node has details": ({ event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			const data = event.node.data;
+			return "deploymentFqn" in data && !!data.deploymentFqn || "modelFqn" in data && !!data.modelFqn;
+		},
 		"click: selected node": ({ event }) => {
 			assertEvent(event, "xyflow.nodeClick");
 			return event.node.selected === true;
@@ -157,14 +192,6 @@ const machine = setup({
 		}
 	}
 });
-const targetState = {
-	idle: "#idle",
-	focused: "#focused",
-	walkthrough: "#walkthrough",
-	printing: "#printing",
-	navigating: "#navigating"
-};
 const to = mapValues(targetState, (id) => ({ target: id }));
 
-//#endregion
-export { Context, deriveToggledFeatures, isActiveSequenceWalkthrough, machine, targetState, to };
+export { ComparingTag, Context, canCompareLayouts, deriveToggledFeatures, isActiveSequenceWalkthrough, isComparingLayouts, machine, targetState, to };

package/dist/likec4diagram/state/machine.state.initializing.mjs

@@ -1,10 +1,10 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { machine } from "./machine.setup.mjs";
-import { fitDiagram } from "./machine.actions.layout.mjs";
 import { assignXYDataFromView, emitInitialized } from "./machine.actions.mjs";
+import { fitDiagram } from "./machine.actions.layout.mjs";
+import { machine } from "./machine.setup.mjs";
 import { assign } from "xstate/actions";
 
-//#region src/likec4diagram/state/machine.state.initializing.ts
+// src/likec4diagram/state/machine.state.initializing.ts
 /**
 * To be in `initializing` state, the diagram must wait for two events:
 * - `xyflow.init` - indicates that the `xyflow` instance is ready
@@ -56,5 +56,4 @@ const isReady = machine.createStateConfig({ always: [{
 	target: "ready"
 }, { target: "initializing" }] });
 
-//#endregion
 export { initializing, isReady };

package/dist/likec4diagram/state/machine.state.navigating.mjs

@@ -2,18 +2,17 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { roundDpr } from "../../utils/roundDpr.mjs";
 import { parsePaddings } from "../../utils/xyflow.mjs";
 import { convertToXYFlow } from "../convert-to-xyflow.mjs";
-import { calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef, viewBounds } from "./utils.mjs";
-import { machine, targetState, to } from "./machine.setup.mjs";
 import { mergeXYNodesEdges } from "./assign.mjs";
 import { cancelFitDiagram, raiseSetViewport } from "./machine.actions.layout.mjs";
-import { disableCompareWithLatest } from "./machine.actions.mjs";
+import { machine, targetState, to } from "./machine.setup.mjs";
+import { calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef, viewBounds } from "./utils.mjs";
 import { isTruthy } from "remeda";
 import { BBox } from "@likec4/core/geometry";
 import { invariant } from "@likec4/core/utils";
 import { assertEvent } from "xstate";
 import { enqueueActions as enqueueActions$1 } from "xstate/actions";
 
-//#region src/likec4diagram/state/machine.state.navigating.ts
+// src/likec4diagram/state/machine.state.navigating.ts
 /**
 * If the user navigates back or forward using the browser's back/forward buttons,
 * update the navigation history and return to the previous or next view.
@@ -62,7 +61,6 @@ const navigating = machine.createStateConfig({
 		actions: [
 			cancelFitDiagram(),
 			handleBrowserForwardBackward(),
-			disableCompareWithLatest(),
 			enqueueActions$1(({ enqueue, context, event }) => {
 				assertEvent(event, "update.view");
 				const { xyflow, xystore, navigationHistory: { currentIndex, history } } = context;
@@ -201,5 +199,4 @@ const navigating = machine.createStateConfig({
 	}
 });
 
-//#endregion
 export { navigating };