@likec4/diagram 1.59.4 → 1.61.0

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

@@ -0,0 +1,197 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { MaxZoom, MinZoom } from "../../base/const.mjs";
+import { DefaultFeatures } from "../../context/DiagramFeatures.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";
+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";
+
+// src/likec4diagram/state/machine.setup.ts
+function Context({ input }) {
+	return {
+		...input,
+		fitView: input.fitView ?? true,
+		relationshipBrowserScope: input.relationshipBrowserScope ?? "view",
+		xynodes: [],
+		xyedges: [],
+		features: {
+			...DefaultFeatures,
+			...input.features
+		},
+		toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? { enableReadOnly: true },
+		initialized: {
+			xydata: false,
+			xyflow: false
+		},
+		viewportChangedManually: false,
+		lastOnNavigate: null,
+		lastClickedNode: null,
+		focusedNode: null,
+		autoUnfocusTimer: false,
+		activeElementDetails: null,
+		viewportBefore: null,
+		viewportOnManualLayout: null,
+		viewportOnAutoLayout: null,
+		navigationHistory: {
+			currentIndex: 0,
+			history: []
+		},
+		viewport: {
+			x: 0,
+			y: 0,
+			zoom: 1
+		},
+		xyflow: null,
+		dynamicViewVariant: input.dynamicViewVariant ?? (input.view._type === "dynamic" ? input.view.variant : "diagram") ?? "diagram",
+		elementViewVariant: "diagram",
+		activeWalkthrough: null,
+		collapsedSequenceFlows: {},
+		minZoom: input.minZoom ?? .05,
+		maxZoom: input.maxZoom ?? 3
+	};
+}
+/**
+* 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,
+	search: searchActorLogic,
+	mediaPrint: mediaPrintActorLogic,
+	editor: editorActorLogic,
+	navigationPanel: navigationPanelActorLogic
+});
+const machine = setup({
+	types: {
+		context: {},
+		input: {},
+		children: {},
+		events: {},
+		emitted: {}
+	},
+	actors,
+	guards: {
+		"isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
+		"enabled: Editor": ({ context }) => context.features.enableEditor,
+		"enabled: FitView": ({ context }) => context.features.enableFitView,
+		"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,
+		"enabled: OpenSource": ({ context }) => context.features.enableVscode,
+		"enabled: DynamicViewWalkthrough": ({ context }) => context.features.enableDynamicViewWalkthrough,
+		"enabled: NavigationPanel": ({ context }) => context.features.enableControls,
+		"focus.node: autoUnfocus": ({ event }) => {
+			assertEvent(event, "focus.node");
+			return event.autoUnfocus === true;
+		},
+		"enabled: Overlays": ({ context }) => context.features.enableElementDetails || context.features.enableRelationshipBrowser || context.features.enableRelationshipDetails,
+		"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 }) => {
+			assertEvent(event, ["update.view", "navigate.to"]);
+			if (event.type === "update.view") return context.view.id === event.view.id;
+			if (event.type === "navigate.to") return context.view.id === event.viewId;
+			nonexhaustive(event);
+		},
+		"is another view": ({ context, event }) => {
+			assertEvent(event, ["update.view", "navigate.to"]);
+			if (event.type === "update.view") return context.view.id !== event.view.id;
+			if (event.type === "navigate.to") return context.view.id !== event.viewId;
+			nonexhaustive(event);
+		},
+		"click: node has modelFqn": ({ event }) => {
+			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;
+		},
+		"click: same node": ({ context, event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return context.lastClickedNode?.id === event.node.id;
+		},
+		"click: focused node": ({ context, event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return context.focusedNode === event.node.id;
+		},
+		"click: node.type = seq-subflow": ({ event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return event.node.type === "seq-subflow";
+		},
+		"click: node has connections": ({ context, event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return context.xyedges.some((e) => e.source === event.node.id || e.target === event.node.id);
+		},
+		"click: selected edge": ({ event }) => {
+			assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
+			return event.edge.selected === true || event.edge.data.active === true;
+		},
+		"click: active walkthrough step": ({ context, event }) => {
+			assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
+			return event.edge.data.id === context.activeWalkthrough?.stepId;
+		}
+	}
+});
+const to = mapValues(targetState, (id) => ({ target: id }));
+
+export { ComparingTag, Context, canCompareLayouts, deriveToggledFeatures, isActiveSequenceWalkthrough, isComparingLayouts, machine, targetState, to };

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

@@ -0,0 +1,59 @@
+import { __name } from "../../_virtual/_rolldown/runtime.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";
+
+// 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
+* - `update.view` - provides the initial diagram data (nodes and edges)
+*
+* Once both events have been received, the diagram transitions to `isReady` state.
+*/
+const initializing = machine.createStateConfig({ on: {
+	"xyflow.init": {
+		actions: assign(({ context, event }) => ({
+			initialized: {
+				...context.initialized,
+				xyflow: true
+			},
+			xyflow: event.instance
+		})),
+		target: "isReady"
+	},
+	"update.view": {
+		actions: [assignXYDataFromView(), assign(({ context }) => ({ initialized: {
+			...context.initialized,
+			xydata: true
+		} }))],
+		target: "isReady"
+	}
+} });
+/**
+* State that checks whether the diagram is ready to be used.
+* Transitions to `ready` state if both `xyflow` and `xydata` are initialized,
+* otherwise goes back to `initializing` state.`
+*/
+const isReady = machine.createStateConfig({ always: [{
+	guard: "isReady",
+	actions: machine.enqueueActions(({ context, enqueue }) => {
+		enqueue(fitDiagram({
+			duration: 0,
+			zoom: context.initialZoom ?? (context.fitView ? void 0 : 1)
+		}));
+		enqueue(assign(({ context }) => ({ navigationHistory: {
+			currentIndex: 0,
+			history: [{
+				viewId: context.view.id,
+				viewport: { ...context.xyflow.getViewport() },
+				viewportChangedManually: false
+			}]
+		} })));
+		enqueue(emitInitialized());
+	}),
+	target: "ready"
+}, { target: "initializing" }] });
+
+export { initializing, isReady };

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

@@ -0,0 +1,202 @@
+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 { mergeXYNodesEdges } from "./assign.mjs";
+import { cancelFitDiagram, raiseSetViewport } from "./machine.actions.layout.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";
+
+// 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.
+*/
+const handleBrowserForwardBackward = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "update.view");
+	let { lastOnNavigate, navigationHistory: { currentIndex, history } } = context;
+	const stepCurrent = history[currentIndex];
+	if (!stepCurrent || stepCurrent.viewId === event.view.id || !!lastOnNavigate) return {};
+	const stepBack = currentIndex > 0 ? history.at(currentIndex - 1) : null;
+	if (stepBack && stepBack.viewId === event.view.id) return {
+		navigationHistory: {
+			currentIndex: currentIndex - 1,
+			history
+		},
+		lastOnNavigate: null
+	};
+	const stepForward = currentIndex < history.length - 1 ? history.at(currentIndex + 1) : null;
+	if (stepForward && stepForward.viewId === event.view.id) return {
+		navigationHistory: {
+			currentIndex: currentIndex + 1,
+			history
+		},
+		lastOnNavigate: null
+	};
+	if (event.view._type === "element" && event.view.viewOf) {
+		const toRef = event.view.viewOf;
+		const existingNode = context.xynodes.find((n) => nodeRef(n) === toRef);
+		if (existingNode) return { lastOnNavigate: {
+			fromView: context.view.id,
+			toView: event.view.id,
+			fromNode: existingNode.id
+		} };
+	}
+	return {};
+});
+/**
+* State for handling navigation to a different view.
+* Closes overlays and search, stops sync layout and fit diagram actions,
+* then processes the view update and transitions back to idle state.
+*/
+const navigating = machine.createStateConfig({
+	id: targetState.navigating.slice(1),
+	always: {
+		...to.idle,
+		actions: [
+			cancelFitDiagram(),
+			handleBrowserForwardBackward(),
+			enqueueActions$1(({ enqueue, context, event }) => {
+				assertEvent(event, "update.view");
+				const { xyflow, xystore, navigationHistory: { currentIndex, history } } = context;
+				const collapsedSequenceFlows = {};
+				const eventWithXYData = "xynodes" in event ? event : {
+					...event,
+					...convertToXYFlow({
+						currentViewId: context.view.id,
+						dynamicViewVariant: context.dynamicViewVariant,
+						elementViewVariant: "diagram",
+						view: event.view,
+						where: context.where,
+						collapsedSequenceFlows
+					})
+				};
+				invariant(xyflow, "xyflow is not initialized");
+				const currentViewport = xyflow.getViewport();
+				const calcZoomTowardsNextViewport = (nextViewport) => {
+					const zoom = currentViewport.zoom;
+					const diff = nextViewport.zoom - zoom;
+					if (Math.abs(diff) < .01) return nextViewport.zoom;
+					return Math.trunc(1e4 * (zoom + diff * (diff < 0 ? .6 : .3))) / 1e4;
+				};
+				const moveTowardsNextViewport = (nextViewport) => {
+					const zoom = calcZoomTowardsNextViewport(nextViewport);
+					if (zoom !== nextViewport.zoom) {
+						xyflow.setViewport({
+							x: roundDpr(nextViewport.x * (1 + currentViewport.zoom - zoom)),
+							y: roundDpr(nextViewport.y * (1 + currentViewport.zoom - zoom)),
+							zoom
+						});
+						enqueue(raiseSetViewport({
+							delay: 100,
+							viewport: nextViewport
+						}));
+					} else xyflow.setViewport(nextViewport, { duration: 0 });
+				};
+				const fromHistory = history[currentIndex];
+				if (fromHistory && fromHistory.viewId === eventWithXYData.view.id) {
+					const { focusedNode: wasFocused, activeWalkthrough: wasActiveWalkthrough, viewportBefore } = fromHistory;
+					const nextCtx = {
+						...mergeXYNodesEdges(context, eventWithXYData),
+						dynamicViewVariant: fromHistory.dynamicViewVariant ?? (eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : void 0) ?? context.dynamicViewVariant,
+						elementViewVariant: "diagram",
+						viewportChangedManually: viewportBefore?.wasChangedManually ?? fromHistory.viewportChangedManually,
+						viewport: viewportBefore?.value ?? fromHistory.viewport,
+						viewportBefore: null,
+						collapsedSequenceFlows
+					};
+					moveTowardsNextViewport(nextCtx.viewport);
+					enqueue.assign(nextCtx);
+					if (wasFocused) {
+						enqueue.raise({
+							type: "focus.node",
+							nodeId: wasFocused
+						}, { delay: 150 });
+						return;
+					}
+					if (wasActiveWalkthrough) {
+						enqueue.raise({
+							type: "walkthrough.start",
+							stepId: wasActiveWalkthrough
+						}, { delay: 150 });
+						return;
+					}
+					return;
+				}
+				const nextBounds = viewBounds(context, eventWithXYData.view);
+				const nextViewport = calcViewportForBounds(context, nextBounds);
+				const { fromNode, toNode } = findCorrespondingNode(context, eventWithXYData);
+				if (fromNode && toNode) {
+					const elFrom = xyflow.getInternalNode(fromNode.id);
+					const fromPoint = xyflow.flowToScreenPosition({
+						x: elFrom.internals.positionAbsolute.x,
+						y: elFrom.internals.positionAbsolute.y
+					});
+					const toPoint = xyflow.flowToScreenPosition({
+						x: toNode.data.x,
+						y: toNode.data.y
+					});
+					xystore.getState().panBy({
+						x: Math.round(fromPoint.x - toPoint.x),
+						y: Math.round(fromPoint.y - toPoint.y)
+					}).catch((err) => {
+						console.error("Error during xyflow.panBy", { err });
+					});
+					enqueue(raiseSetViewport({
+						delay: 100,
+						viewport: nextViewport
+					}));
+				} else {
+					const zoom = calcZoomTowardsNextViewport(nextViewport);
+					if (zoom !== nextViewport.zoom) {
+						const { width, height } = context.xystore.getState();
+						const nextCenter = BBox.center(nextBounds);
+						const paddings = parsePaddings(context.fitViewPadding, width, height);
+						xyflow.setViewport({
+							x: roundDpr((width - paddings.x) / 2 - nextCenter.x * zoom + paddings.left),
+							y: roundDpr((height - paddings.y) / 2 - nextCenter.y * zoom + paddings.top),
+							zoom
+						});
+						enqueue(raiseSetViewport({
+							delay: 100,
+							viewport: nextViewport
+						}));
+					} else xyflow.setViewport(nextViewport, { duration: 0 });
+				}
+				const updatedHistory = currentIndex < history.length - 1 ? history.slice(0, currentIndex + 1) : [...history];
+				if (updatedHistory.length > 20) updatedHistory.shift();
+				updatedHistory.push({
+					viewId: event.view.id,
+					viewport: { ...nextViewport },
+					viewportChangedManually: false
+				});
+				const focusOnElement = context.lastOnNavigate?.focusOnElement;
+				const nodeToFocus = isTruthy(focusOnElement) ? findNodeByModelFqn(eventWithXYData.xynodes, focusOnElement) : null;
+				enqueue.assign({
+					...mergeXYNodesEdges(context, eventWithXYData),
+					viewportChangedManually: false,
+					lastOnNavigate: null,
+					dynamicViewVariant: eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : context.dynamicViewVariant,
+					elementViewVariant: "diagram",
+					navigationHistory: {
+						currentIndex: updatedHistory.length - 1,
+						history: updatedHistory
+					},
+					collapsedSequenceFlows
+				});
+				if (nodeToFocus) enqueue.raise({
+					type: "focus.node",
+					nodeId: nodeToFocus.id,
+					autoUnfocus: true
+				}, { delay: 250 });
+			})
+		]
+	}
+});
+
+export { navigating };

package/dist/likec4diagram/state/machine.state.ready.comparing.mjs

@@ -0,0 +1,63 @@
+import { assignLastClickedNode, beforeLayoutTypeChangeWhileComparing, cancelEditing, emitNodeClick, emitOnLayoutTypeChange, exitComparingLayouts, openNodeDetails, openSourceOfFocusedOrLastClickedNode, triggerChange, updateView } from "./machine.actions.mjs";
+import { ComparingTag, machine, targetState, to } from "./machine.setup.mjs";
+import { and, not, or } from "xstate/guards";
+import { assign } from "xstate/actions";
+
+// src/likec4diagram/state/machine.state.ready.comparing.ts
+/**
+* State when comparing manual layout with the latest auto layout.
+*
+* - Entered on `compare.start` (from `idle` or `focused`), if the view has layout drifts
+* - Left on `compare.end`, manual layout reset, printing or navigation,
+*   or automatically when drifts are gone or the feature is disabled
+* - On exit switches back to manual layout (if auto is active)
+* - Focus mode and walkthrough are not available
+* - Diagram is readonly while auto layout is active (see `isReadOnly` guard)
+*/
+const comparing = machine.createStateConfig({
+	id: targetState.comparing.slice(1),
+	tags: [ComparingTag],
+	always: {
+		guard: not("can compare layouts"),
+		...to.idle
+	},
+	exit: [exitComparingLayouts()],
+	on: {
+		"compare.end": { ...to.idle },
+		"emit.onLayoutTypeChange": { actions: [beforeLayoutTypeChangeWhileComparing(), emitOnLayoutTypeChange()] },
+		"update.view": [{
+			guard: "is another view",
+			...to.navigating
+		}, { actions: updateView({ restoreLayoutViewport: true }) }],
+		"layout.resetManualLayout": {
+			guard: "enabled: Editor",
+			...to.idle,
+			actions: [
+				cancelEditing(),
+				assign({ viewportChangedManually: false }),
+				triggerChange({ op: "reset-manual-layout" })
+			]
+		},
+		"walkthrough.start": {},
+		"xyflow.nodeClick": [{
+			guard: and([
+				"enabled: Readonly",
+				"enabled: ElementDetails",
+				"click: node has details",
+				or(["click: same node", "click: selected node"])
+			]),
+			actions: [
+				assignLastClickedNode(),
+				openSourceOfFocusedOrLastClickedNode(),
+				openNodeDetails(),
+				emitNodeClick()
+			]
+		}, { actions: [
+			assignLastClickedNode(),
+			openSourceOfFocusedOrLastClickedNode(),
+			emitNodeClick()
+		] }]
+	}
+});
+
+export { comparing };

package/dist/likec4diagram/state/machine.state.ready.focused.mjs

@@ -0,0 +1,79 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { assignFocusedNode, assignLastClickedNode, cancelAutoUnfocusTimer, emitNodeClick, emitPaneClick, focusOnNodesAndEdges, openNodeDetails, openSourceOfFocusedOrLastClickedNode, resetLastClickedNode, startAutoUnfocusTimer, startHotKeyActor, stopHotKeyActor, undimEverything } from "./machine.actions.mjs";
+import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.mjs";
+import { machine, targetState, to } from "./machine.setup.mjs";
+import { and } from "xstate/guards";
+import { assign, raise } from "xstate/actions";
+
+// src/likec4diagram/state/machine.state.ready.focused.ts
+const focused = machine.createStateConfig({
+	id: targetState.focused.slice(1),
+	entry: [
+		cancelFitDiagram(),
+		focusOnNodesAndEdges(),
+		assignViewportBefore(),
+		openSourceOfFocusedOrLastClickedNode(),
+		startHotKeyActor(),
+		fitFocusedBounds(),
+		startAutoUnfocusTimer()
+	],
+	exit: [
+		stopHotKeyActor(),
+		undimEverything(),
+		returnViewportBefore(),
+		cancelAutoUnfocusTimer(),
+		assign({
+			focusedNode: null,
+			autoUnfocusTimer: false
+		})
+	],
+	on: {
+		"compare.start": {
+			guard: "can compare layouts",
+			...to.comparing
+		},
+		"focus.autoUnfocus": { ...to.idle },
+		"xyflow.nodeClick": [
+			{
+				guard: and([
+					"enabled: ElementDetails",
+					"click: focused node",
+					"click: node has details"
+				]),
+				actions: [
+					assignLastClickedNode(),
+					openNodeDetails(),
+					emitNodeClick()
+				]
+			},
+			{
+				guard: "click: focused node",
+				actions: [assignLastClickedNode(), emitNodeClick()],
+				...to.idle
+			},
+			{ actions: [
+				assignLastClickedNode(),
+				raise(({ event }) => ({
+					type: "focus.node",
+					nodeId: event.node.id
+				})),
+				emitNodeClick()
+			] }
+		],
+		"focus.node": { actions: [
+			assignFocusedNode(),
+			focusOnNodesAndEdges(),
+			openSourceOfFocusedOrLastClickedNode(),
+			fitFocusedBounds()
+		] },
+		"key.esc": { ...to.idle },
+		"xyflow.paneClick": {
+			actions: [resetLastClickedNode(), emitPaneClick()],
+			...to.idle
+		},
+		"notations.unhighlight": { actions: focusOnNodesAndEdges() },
+		"tag.unhighlight": { actions: focusOnNodesAndEdges() }
+	}
+});
+
+export { focused };