@likec4/diagram 1.60.0 → 1.61.0

package/dist/likec4diagram/relationship-popover/actor.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { assertEvent, assign, setup } from "xstate";
 
-//#region src/likec4diagram/relationship-popover/actor.ts
+// src/likec4diagram/relationship-popover/actor.ts
 const _actorLogic = setup({
 	types: {
 		context: {},
@@ -116,5 +116,4 @@ const _actorLogic = setup({
 });
 const RelationshipPopoverActorLogic = _actorLogic;
 
-//#endregion
 export { RelationshipPopoverActorLogic };

package/dist/likec4diagram/relationship-popover/components.mjs

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { styled } from "@likec4/styles/jsx";
 import { txt } from "@likec4/styles/patterns";
 
-//#region src/likec4diagram/relationship-popover/components.tsx
+// src/likec4diagram/relationship-popover/components.tsx
 const Endpoint = ({ children, likec4color }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"data-likec4-color": likec4color,
@@ -43,5 +43,4 @@ const RelationshipTitle = styled("div", { base: {
 	minWidth: "0"
 } });
 
-//#endregion
 export { Endpoint, RelationshipTitle };

package/dist/likec4diagram/state/DiagramActorProvider.mjs

@@ -1,21 +1,23 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { MaxZoom, MinZoom } from "../../base/const.mjs";
-import { useUpdateEffect } from "../../hooks/useUpdateEffect.mjs";
+import { ComparingLayoutsProvider } from "../../context/ComparingLayoutsContext.mjs";
 import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.mjs";
 import { DiagramFeatures, useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
-import { DiagramActorContextProvider, DiagramApiContextProvider, selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
-import { useOnDiagramEvent } from "../../hooks/useDiagram.mjs";
-import { DiagramToggledFeaturesPersistence } from "./persistence.mjs";
 import { useEditorActorLogic } from "../../editor/useEditorActorLogic.mjs";
+import { DiagramActorContextProvider, DiagramApiContextProvider, selectDiagramSnapshot, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import { useOnDiagramEvent } from "../../hooks/useDiagram.mjs";
+import { useUpdateEffect } from "../../hooks/useUpdateEffect.mjs";
 import { DiagramApi } from "./diagram-api.mjs";
 import { diagramMachine } from "./machine.mjs";
-import { useEffect, useRef } from "react";
+import { deriveToggledFeatures, isComparingLayouts } from "./machine.setup.mjs";
+import { DiagramToggledFeaturesPersistence } from "./persistence.mjs";
+import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useStoreApi } from "@xyflow/react";
-import { isNullish } from "remeda";
+import { shallowEqual } from "fast-equals";
 import { useActorRef } from "@xstate/react";
 
-//#region src/likec4diagram/state/DiagramActorProvider.tsx
+// src/likec4diagram/state/DiagramActorProvider.tsx
 function DiagramActorProvider({ id, view, zoomable, pannable, fitView, initialZoom, nodesDraggable, nodesSelectable, fitViewPadding, where = null, minZoom = MinZoom, maxZoom = 3, children, dynamicViewVariant: _defaultVariant, relationshipBrowserScope }) {
 	const xystore = useStoreApi();
 	const editor = useEditorActorLogic();
@@ -41,20 +43,12 @@ function DiagramActorProvider({ id, view, zoomable, pannable, fitView, initialZo
 			relationshipBrowserScope
 		}
 	});
-	const actorRef = useRef(actor);
-	if (actorRef.current !== actor) {
-		console.warn("DiagramMachine actor instance changed", {
-			previous: actorRef.current.getSnapshot().context,
-			current: actor.getSnapshot().context
-		});
-		actorRef.current = actor;
-	}
 	useEffect(() => {
 		actor.send({
 			type: "update.features",
 			features
 		});
-	}, [actor, features]);
+	}, [features]);
 	useUpdateEffect(() => actor.send({
 		type: "update.inputs",
 		inputs: {
@@ -71,7 +65,6 @@ function DiagramActorProvider({ id, view, zoomable, pannable, fitView, initialZo
 			relationshipBrowserScope
 		}
 	}), [
-		actor,
 		zoomable,
 		where,
 		pannable,
@@ -90,39 +83,35 @@ function DiagramActorProvider({ id, view, zoomable, pannable, fitView, initialZo
 			type: "switch.dynamicViewVariant",
 			variant: _defaultVariant
 		});
-	}, [actor, _defaultVariant]);
+	}, [_defaultVariant]);
 	useEffect(() => actor.send({
 		type: "update.view",
 		view,
 		source: "external"
-	}), [actor, view]);
+	}), [view]);
 	return /* @__PURE__ */ jsx(DiagramActorContextProvider, {
 		value: actor,
 		children: /* @__PURE__ */ jsxs(DiagramApiContextProvider, {
-			value: DiagramApi.withActor(actorRef),
+			value: DiagramApi.withActor(actor),
 			children: [/* @__PURE__ */ jsx(ToggledFeatures, { children }), /* @__PURE__ */ jsx(PropagateDiagramActorEvents, {})]
 		})
 	});
 }
-const selectToggledFeatures = selectDiagramContext((context) => {
-	let toggledFeatures = context.toggledFeatures;
-	const enableCompareWithLatest = context.view.drifts != null && context.view.drifts.length > 0 && context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough);
-	const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || enableCompareWithLatest && context.view._layout === "auto";
-	if (toggledFeatures.enableReadOnly !== enableReadOnly || toggledFeatures.enableCompareWithLatest !== enableCompareWithLatest) toggledFeatures = {
-		...toggledFeatures,
-		enableCompareWithLatest,
-		enableReadOnly
-	};
-	return toggledFeatures;
-});
+const selectToggledFeatures = selectDiagramSnapshot((snapshot) => ({
+	toggledFeatures: deriveToggledFeatures(snapshot),
+	isComparing: isComparingLayouts(snapshot)
+}), (a, b) => a.isComparing === b.isComparing && shallowEqual(a.toggledFeatures, b.toggledFeatures));
 function ToggledFeatures({ children }) {
-	const toggledFeatures = useDiagramSelector(selectToggledFeatures);
+	const { toggledFeatures, isComparing } = useDiagramSelector(selectToggledFeatures);
 	useUpdateEffect(() => {
 		DiagramToggledFeaturesPersistence.write(toggledFeatures);
 	}, [toggledFeatures]);
 	return /* @__PURE__ */ jsx(DiagramFeatures, {
 		overrides: toggledFeatures,
-		children
+		children: /* @__PURE__ */ jsx(ComparingLayoutsProvider, {
+			value: isComparing,
+			children
+		})
 	});
 }
 function PropagateDiagramActorEvents() {
@@ -148,5 +137,4 @@ function PropagateDiagramActorEvents() {
 	return null;
 }
 
-//#endregion
 export { DiagramActorProvider };

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

@@ -1,7 +1,5 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import "@xyflow/react";
-//#region src/likec4diagram/state/aligners.d.ts
 export type GridAlignmentMode = 'Column' | 'Row';
 export type LinearAlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom';
-export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode;
-//#endregion
+export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode;

package/dist/likec4diagram/state/aligners.mjs

@@ -3,7 +3,7 @@ import { map, pick, pipe, reduce, sortBy } from "remeda";
 import { invariant, nonexhaustive } from "@likec4/core";
 import { getNodeDimensions } from "@xyflow/system";
 
-//#region src/likec4diagram/state/aligners.ts
+// src/likec4diagram/state/aligners.ts
 var Aligner = class {};
 var LinearAligner = class extends Aligner {
 	getEdgePosition;
@@ -290,5 +290,4 @@ function getAligner(mode) {
 	}
 }
 
-//#endregion
 export { Aligner, GridAligner, LinearAligner, getAligner, getLinearAligner, toNodeRect };

package/dist/likec4diagram/state/assign.mjs

@@ -1,16 +1,16 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { getNodeCenter } from "../../utils/xyflow.mjs";
 import { Base } from "../../base/Base.mjs";
 import { updateEdges } from "../../base/updateEdges.mjs";
 import { updateNodes } from "../../base/updateNodes.mjs";
+import { getNodeCenter } from "../../utils/xyflow.mjs";
 import { deepEqual } from "fast-equals";
 import { mergeDeep } from "remeda";
 import { nonNullable } from "@likec4/core";
-import { vector } from "@likec4/core/geometry";
 import { getNodeDimensions } from "@xyflow/system";
+import { vector } from "@likec4/core/geometry";
 import { assertEvent } from "xstate";
 
-//#region src/likec4diagram/state/assign.ts
+// src/likec4diagram/state/assign.ts
 function mergeXYNodesEdges(context, event) {
 	const nextView = event.view;
 	const isSameView = context.view.id === nextView.id;
@@ -95,5 +95,4 @@ function resetEdgeControlPoints(nodeLookup, edge) {
 	return [sourceBorderPoint.add(sourceToTarget.multiply(.4)).round().toObject(), sourceBorderPoint.add(sourceToTarget.multiply(.6)).round().toObject()];
 }
 
-//#endregion
 export { focusNodesEdges, mergeXYNodesEdges, resetEdgeControlPoints, updateEdgeData, updateNodeData };

package/dist/likec4diagram/state/createViewChange.mjs

@@ -3,7 +3,7 @@ import { calcViewBounds } from "../../utils/view-bounds.mjs";
 import { hasAtLeast, map } from "remeda";
 import { getNodeDimensions } from "@xyflow/system";
 
-//#region src/likec4diagram/state/createViewChange.ts
+// src/likec4diagram/state/createViewChange.ts
 function createViewChange(parentContext) {
 	const { view: { drifts: _1, _layout: _2, ...view }, xynodes, xystore } = parentContext;
 	const { nodeLookup, edgeLookup } = xystore.getState();
@@ -69,5 +69,4 @@ function createViewChange(parentContext) {
 	};
 }
 
-//#endregion
 export { createViewChange };

package/dist/likec4diagram/state/diagram-api.d.mts

@@ -1,19 +1,17 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { Types } from "../types.mjs";
+import { TogglableFeature } from "../../context/DiagramFeatures.mjs";
+import { EditorActorRef } from "../../editor/actor/machine.mjs";
+import { OpenSourceParams, RelationshipBrowserScope } from "../../LikeC4Diagram.props.mjs";
 import { OverlaysActorRef } from "../../overlays/overlaysActor.mjs";
 import { SearchActorRef } from "../../search/searchActor.mjs";
-import { EditorActorRef } from "../../editor/actor/machine.mjs";
-import { TogglableFeature } from "../../context/DiagramFeatures.mjs";
+import { Types } from "../types.mjs";
 import { AlignmentMode } from "./aligners.mjs";
-import { OpenSourceParams, RelationshipBrowserScope } from "../../LikeC4Diagram.props.mjs";
 import { Context, ElementViewDisplayVariant, Events } from "./machine.setup.mjs";
 import { DiagramActorRef } from "./types.mjs";
-import { RefObject } from "react";
 import * as t from "@likec4/core/types";
 import { DynamicViewDisplayVariant, NodeNotation, ViewChange } from "@likec4/core/types";
 import { PartialDeep } from "type-fest";
-//#region src/likec4diagram/state/diagram-api.d.ts
-type Any$1 = t.aux.Any;
+type Any$1 = t.aux.AnyLayouted;
 type Unknown = t.aux.UnknownLayouted;
 type ViewId$1<A> = t.aux.ViewId<A>;
 type Fqn$1<A> = t.aux.Fqn<A>;
@@ -21,16 +19,12 @@ type NodeId$1 = t.aux.NodeId;
 type EdgeId$1 = t.aux.EdgeId;
 export declare class DiagramApi<A extends Any$1 = Unknown> {
   private static cache;
-  static withActor(actorRef: RefObject<DiagramActorRef>): DiagramApi;
-  /**
-   * React ref to the diagram actor
-   */
-  readonly ref: RefObject<DiagramActorRef>;
-  private constructor();
+  static withActor(actorRef: DiagramActorRef): DiagramApi<Unknown>;
   /**
    * @warning Do not use in render phase
    */
-  get actor(): DiagramActorRef;
+  readonly actor: DiagramActorRef;
+  private constructor();
   /**
    * @warning Do not use in render phase
    */
@@ -78,7 +72,17 @@ export declare class DiagramApi<A extends Any$1 = Unknown> {
    */
   openSource(params: OpenSourceParams<Unknown>): void;
   /**
-   * Open element details card
+   * Open details for a diagram node, or an explicit element/deployment subject outside the current view.
+   */
+  openNodeDetails(target: NodeId$1 | {
+    type: 'element';
+    element: Fqn$1<A>;
+  } | {
+    type: 'deployment';
+    deployment: t.aux.DeploymentFqn<A>;
+  }, fromNode?: NodeId$1): void;
+  /**
+   * @deprecated Use `openNodeDetails({ type: 'element', element: fqn }, fromNode)`.
    */
   openElementDetails(fqn: Fqn$1<A>, fromNode?: NodeId$1): void;
   openRelationshipDetails(...params: [edgeId: EdgeId$1] | [source: Fqn$1<A>, target: Fqn$1<A>]): void;
@@ -87,6 +91,10 @@ export declare class DiagramApi<A extends Any$1 = Unknown> {
   highlightNode(nodeId: NodeId$1): void;
   highlightEdge(edgeId: EdgeId$1): void;
   unhighlightAll(): void;
+  /**
+   * Select nodes and edges in the diagram
+   * @param target - Optional selection target. If not provided, resets selection
+   */
   select(target?: {
     nodes?: NodeId$1[];
     edges?: (EdgeId$1 | t.StepPath)[];
@@ -152,6 +160,15 @@ export declare class DiagramApi<A extends Any$1 = Unknown> {
     step: t.StepPath;
   }): void;
   stopWalkthrough(): void;
+  /**
+   * Starts comparing manual layout with the latest auto layout.
+   * Ignored if the view has no layout drifts, or the feature is disabled.
+   */
+  startCompare(): void;
+  /**
+   * Stops comparing layouts, switches back to manual layout (if auto is active)
+   */
+  endCompare(): void;
   toggleFeature(feature: TogglableFeature, forceValue?: boolean): void;
   highlightNotation(notation: NodeNotation, kind?: string): void;
   unhighlightNotation(): void;
@@ -170,4 +187,4 @@ export declare class DiagramApi<A extends Any$1 = Unknown> {
    */
   toggleSequenceFlow(flowId: t.StepPath): void;
 }
-//#endregion
+export {};

package/dist/likec4diagram/state/diagram-api.mjs

@@ -1,38 +1,37 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { findDiagramEdge, findDiagramNode, findNodeByModelFqn, typedSystem } from "./utils.mjs";
-import { DefaultWeakMap, invariant, nonNullable } from "@likec4/core/utils";
+import { invariant, nonNullable } from "@likec4/core/utils";
 
-//#region src/likec4diagram/state/diagram-api.ts
+// src/likec4diagram/state/diagram-api.ts
 var DiagramApi = class DiagramApi {
-	static cache = new DefaultWeakMap((ref) => new DiagramApi(ref));
+	static cache = /* @__PURE__ */ new WeakMap();
 	static withActor(actorRef) {
-		return this.cache.get(actorRef);
-	}
-	/**
-	* React ref to the diagram actor
-	*/
-	ref;
-	constructor(actorRef) {
-		this.ref = actorRef;
+		let api = this.cache.get(actorRef);
+		if (!api) {
+			api = new DiagramApi(actorRef);
+			this.cache.set(actorRef, api);
+		}
+		return api;
 	}
 	/**
 	* @warning Do not use in render phase
 	*/
-	get actor() {
-		return this.ref.current;
+	actor;
+	constructor(actor) {
+		this.actor = actor;
 	}
 	/**
 	* @warning Do not use in render phase
 	*/
 	get currentView() {
-		return this.ref.current.getSnapshot().context.view;
+		return this.actor.getSnapshot().context.view;
 	}
 	/**
 	* Editor actor reference
 	* @warning Do not use in render phase
 	*/
 	editorActor() {
-		const editorActor = typedSystem(this.ref.current.system).editorActorRef;
+		const editorActor = typedSystem(this.actor.system).editorActorRef;
 		return nonNullable(editorActor, "Editor actor not found in actor system");
 	}
 	/**
@@ -40,7 +39,7 @@ var DiagramApi = class DiagramApi {
 	* @warning Do not use in render phase
 	*/
 	overlays() {
-		const overlaysActor = typedSystem(this.ref.current.system).overlaysActorRef;
+		const overlaysActor = typedSystem(this.actor.system).overlaysActorRef;
 		return nonNullable(overlaysActor, "Overlays actor not found in actor system");
 	}
 	/**
@@ -48,14 +47,14 @@ var DiagramApi = class DiagramApi {
 	* @warning Do not use in render phase
 	*/
 	searchActor() {
-		const searchActor = typedSystem(this.ref.current.system).searchActorRef;
+		const searchActor = typedSystem(this.actor.system).searchActorRef;
 		return nonNullable(searchActor, "Search actor not found in actor system");
 	}
 	/**
 	* Send event to diagram actor
 	*/
 	send(event) {
-		this.ref.current.send(event);
+		this.actor.send(event);
 	}
 	/**
 	* Navigate to view
@@ -106,15 +105,24 @@ var DiagramApi = class DiagramApi {
 		});
 	}
 	/**
-	* Open element details card
+	* Open details for a diagram node, or an explicit element/deployment subject outside the current view.
 	*/
-	openElementDetails(fqn, fromNode) {
+	openNodeDetails(target, fromNode) {
 		this.send({
-			type: "open.elementDetails",
-			fqn,
+			type: "open.nodeDetails",
+			target,
 			fromNode
 		});
 	}
+	/**
+	* @deprecated Use `openNodeDetails({ type: 'element', element: fqn }, fromNode)`.
+	*/
+	openElementDetails(fqn, fromNode) {
+		this.openNodeDetails({
+			type: "element",
+			element: fqn
+		}, fromNode);
+	}
 	openRelationshipDetails(...params) {
 		if (params.length === 1) this.send({
 			type: "open.relationshipDetails",
@@ -157,6 +165,10 @@ var DiagramApi = class DiagramApi {
 	unhighlightAll() {
 		this.send({ type: "unhighlight.all" });
 	}
+	/**
+	* Select nodes and edges in the diagram
+	* @param target - Optional selection target. If not provided, resets selection
+	*/
 	select(target) {
 		const nodes = target?.nodes ?? [];
 		const edges = target?.edges ?? [];
@@ -192,7 +204,7 @@ var DiagramApi = class DiagramApi {
 	* Start editing, either node or edge
 	*/
 	startEditing(subject) {
-		const editorActor = typedSystem(this.ref.current.system).editorActorRef;
+		const editorActor = typedSystem(this.actor.system).editorActorRef;
 		invariant(editorActor, "No editor actor found in diagram actor system");
 		editorActor.send({
 			type: "edit.move.start",
@@ -205,7 +217,7 @@ var DiagramApi = class DiagramApi {
 	* @default false
 	*/
 	stopEditing(wasChanged = false) {
-		const editorActor = typedSystem(this.ref.current.system).editorActorRef;
+		const editorActor = typedSystem(this.actor.system).editorActorRef;
 		invariant(editorActor, "No editor actor found in diagram actor system");
 		editorActor.send({ type: wasChanged ? "edit.move.end" : "edit.move.cancel" });
 	}
@@ -214,7 +226,7 @@ var DiagramApi = class DiagramApi {
 	* @returns true if there was something to undo
 	*/
 	undoEditing() {
-		const editorActor = typedSystem(this.ref.current.system).editorActorRef;
+		const editorActor = typedSystem(this.actor.system).editorActorRef;
 		invariant(editorActor, "No editor actor found in diagram actor system");
 		const hasUndo = editorActor.getSnapshot().context.history !== null;
 		if (hasUndo) editorActor.send({ type: "undo" });
@@ -249,7 +261,7 @@ var DiagramApi = class DiagramApi {
 	* Used by search to highlight an element on the current view.
 	*/
 	focusOnElement(elementFqn) {
-		const context = this.ref.current.getSnapshot().context;
+		const context = this.actor.getSnapshot().context;
 		const node = findNodeByModelFqn(context.xynodes, elementFqn);
 		if (node) this.send({
 			type: "focus.node",
@@ -261,25 +273,25 @@ var DiagramApi = class DiagramApi {
 	* @warning Do not use in render phase
 	*/
 	getContext() {
-		return this.ref.current.getSnapshot().context;
+		return this.actor.getSnapshot().context;
 	}
 	/**
 	* @warning Do not use in render phase
 	*/
 	findDiagramNode(xynodeId) {
-		return findDiagramNode(this.ref.current.getSnapshot().context, xynodeId);
+		return findDiagramNode(this.actor.getSnapshot().context, xynodeId);
 	}
 	/**
 	* @warning Do not use in render phase
 	*/
 	findEdge(xyedgeId) {
-		return this.ref.current.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
+		return this.actor.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
 	}
 	/**
 	* @warning Do not use in render phase
 	*/
 	findDiagramEdge(xyedgeId) {
-		return findDiagramEdge(this.ref.current.getSnapshot().context, xyedgeId);
+		return findDiagramEdge(this.actor.getSnapshot().context, xyedgeId);
 	}
 	startWalkthrough(stepId) {
 		this.send({
@@ -300,6 +312,19 @@ var DiagramApi = class DiagramApi {
 	stopWalkthrough() {
 		this.send({ type: "walkthrough.end" });
 	}
+	/**
+	* Starts comparing manual layout with the latest auto layout.
+	* Ignored if the view has no layout drifts, or the feature is disabled.
+	*/
+	startCompare() {
+		this.send({ type: "compare.start" });
+	}
+	/**
+	* Stops comparing layouts, switches back to manual layout (if auto is active)
+	*/
+	endCompare() {
+		this.send({ type: "compare.end" });
+	}
 	toggleFeature(feature, forceValue) {
 		this.send({
 			type: "toggle.feature",
@@ -358,5 +383,4 @@ var DiagramApi = class DiagramApi {
 	}
 };
 
-//#endregion
 export { DiagramApi };

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

@@ -1,8 +1,6 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from "xstate";
-//#region src/likec4diagram/state/hotkeyActor.d.ts
 export type HotKeyEvent = {
   type: 'key.esc' | `key.arrow.${'left' | 'right' | 'up' | 'down'}`;
 };
-export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {}
-//#endregion
+export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {}

package/dist/likec4diagram/state/hotkeyActor.mjs

@@ -1,8 +1,9 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { isEventFromSearch } from "../../utils/search-event.mjs";
 import { getHotkeyHandler } from "@mantine/hooks";
 import { fromCallback } from "xstate";
 
-//#region src/likec4diagram/state/hotkeyActor.ts
+// src/likec4diagram/state/hotkeyActor.ts
 const hotkeyActorLogic = fromCallback(({ sendBack }) => {
 	const escHandler = getHotkeyHandler([[
 		"Escape",
@@ -46,13 +47,18 @@ const hotkeyActorLogic = fromCallback(({ sendBack }) => {
 			{ preventDefault: true }
 		]
 	]);
-	document.body.addEventListener("keydown", escHandler);
-	document.body.addEventListener("keydown", arrowshandler, { capture: true });
+	const onEsc = (event) => {
+		if (!isEventFromSearch(event)) escHandler(event);
+	};
+	const onArrows = (event) => {
+		if (!isEventFromSearch(event)) arrowshandler(event);
+	};
+	document.body.addEventListener("keydown", onEsc);
+	document.body.addEventListener("keydown", onArrows, { capture: true });
 	return () => {
-		document.body.removeEventListener("keydown", escHandler);
-		document.body.removeEventListener("keydown", arrowshandler, { capture: true });
+		document.body.removeEventListener("keydown", onEsc);
+		document.body.removeEventListener("keydown", onArrows, { capture: true });
 	};
 });
 
-//#endregion
 export { hotkeyActorLogic };

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

@@ -1,12 +1,12 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { calcEdgeBounds } from "../../utils/view-bounds.mjs";
-import { activeSequenceBounds, focusedBounds, getEdgeBounds, viewBounds } from "./utils.mjs";
 import { isActiveSequenceWalkthrough, machine } from "./machine.setup.mjs";
+import { activeSequenceBounds, focusedBounds, getEdgeBounds, viewBounds } from "./utils.mjs";
 import { getNodesBounds, getViewportForBounds } from "@xyflow/react";
 import { BBox, invariant, isNonEmptyArray, nonNullable } from "@likec4/core";
 import { assertEvent } from "xstate";
 
-//#region src/likec4diagram/state/machine.actions.layout.ts
+// src/likec4diagram/state/machine.actions.layout.ts
 const calcMaxZoom = (context, transform = [
 	0,
 	0,
@@ -172,5 +172,4 @@ const returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, cont
 	else enqueue(raiseFitDiagram({ ...params }));
 });
 
-//#endregion
 export { assignViewportBefore, cancelFitDiagram, centerOnNodeOrEdge, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport, setViewportCenter };