@likec4/diagram 1.59.3 → 1.60.0

package/dist/overlays/element-details/TabPanelStructure.css.mjs

@@ -0,0 +1,30 @@
+import { css } from "@likec4/styles/css";
+
+//#region src/overlays/element-details/TabPanelStructure.css.ts
+const treeNodeLabel = css({
+	marginTop: "sm",
+	marginBottom: "sm"
+});
+const elementLabel = css({
+	display: "inline-flex",
+	transition: "fast",
+	border: "default",
+	borderStyle: "dashed",
+	borderRadius: "sm",
+	px: "md",
+	py: "xs",
+	alignItems: "center",
+	cursor: "pointer",
+	color: "mantine.gray[7]",
+	_dark: { color: "mantine.dark[1]" },
+	"& > *": { transition: "fast" },
+	_hover: {
+		transitionTimingFunction: "out",
+		borderStyle: "solid",
+		color: "text.default",
+		background: "surface.hover"
+	}
+});
+
+//#endregion
+export { elementLabel, treeNodeLabel };

package/dist/overlays/element-details/TabPanelStructure.mjs

@@ -0,0 +1,96 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
+import { elementLabel, treeNodeLabel } from "./TabPanelStructure.css.mjs";
+import { useEffect, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Anchor, Box, Pill, Text, Tree, useTree } from "@mantine/core";
+
+//#region src/overlays/element-details/TabPanelStructure.tsx
+const ElementLabel = ({ element }) => /* @__PURE__ */ jsx(Box, {
+	className: elementLabel,
+	children: /* @__PURE__ */ jsx(Text, {
+		component: "div",
+		fz: "sm",
+		fw: "500",
+		children: element.title
+	})
+});
+const infoIcon = /* @__PURE__ */ jsx(IconInfoCircle, {});
+function TabPanelStructure({ element }) {
+	const tree = useTree({ multiple: false });
+	const data = useMemo(() => {
+		let seq = 1;
+		const messageNode = (label) => ({
+			label,
+			value: `msg${seq++}`,
+			type: "message",
+			children: []
+		});
+		const current = {
+			label: /* @__PURE__ */ jsx(ElementLabel, {
+				type: "current",
+				element
+			}),
+			value: element.id,
+			element,
+			type: "current",
+			children: [...element.children()].map((child) => ({
+				label: /* @__PURE__ */ jsx(ElementLabel, {
+					type: "descedant",
+					element: child
+				}),
+				value: child.id,
+				element: child,
+				type: "descedant",
+				children: []
+			}))
+		};
+		if (current.children.length === 0) current.children.push(messageNode(/* @__PURE__ */ jsx(Pill, {
+			radius: "sm",
+			children: "no nested"
+		})));
+		return [[...element.ancestors()].reduce((acc, parent) => ({
+			label: /* @__PURE__ */ jsx(ElementLabel, {
+				type: "ancestor",
+				element: parent
+			}),
+			value: parent.id,
+			element: parent,
+			type: "ancestor",
+			children: [acc]
+		}), current)];
+	}, [element]);
+	useEffect(() => {
+		tree.expandAllNodes();
+	}, [data]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Alert, {
+		variant: "light",
+		color: "orange",
+		title: "In development",
+		icon: infoIcon,
+		children: [
+			"We need your feedback. Share your thoughts and ideas -",
+			" ",
+			/* @__PURE__ */ jsx(Anchor, {
+				fz: "sm",
+				fw: 500,
+				underline: "hover",
+				c: "orange",
+				href: "https://github.com/likec4/likec4/discussions/",
+				target: "_blank",
+				children: "GitHub discussions"
+			})
+		]
+	}), /* @__PURE__ */ jsx(Tree, {
+		levelOffset: "xl",
+		allowRangeSelection: false,
+		expandOnClick: false,
+		expandOnSpace: false,
+		classNames: { label: treeNodeLabel },
+		data,
+		tree
+	})] });
+}
+
+//#endregion
+export { ElementLabel, TabPanelStructure };

package/dist/overlays/element-details/actor.d.mts

@@ -0,0 +1,34 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { RelationshipsBrowserActorRef } from "../relationships-browser/actor.mjs";
+import { Rect } from "@xyflow/system";
+import { DiagramView, Fqn, NodeId } from "@likec4/core/types";
+import { ActorRef, SnapshotFrom, StateMachine } from "xstate";
+//#region src/overlays/element-details/actor.d.ts
+export type ElementDetailsInput = {
+  subject: Fqn;
+  currentView: DiagramView;
+  initiatedFrom?: {
+    node?: NodeId;
+    clientRect?: Rect;
+  };
+};
+export type Context = {
+  subject: Fqn;
+  currentView: DiagramView;
+  initiatedFrom: {
+    node: NodeId | null;
+    clientRect: Rect | null;
+  };
+};
+export type Events = {
+  type: 'change.subject';
+  subject: Fqn;
+} | {
+  type: 'close';
+};
+export interface ElementDetailsLogic extends StateMachine<Context, Events, {
+  [key: `${string}-relationships`]: RelationshipsBrowserActorRef | undefined;
+}, any, any, any, any, any, never, ElementDetailsInput, any, any, any, any> {}
+export type ElementDetailsSnapshot = SnapshotFrom<ElementDetailsLogic>;
+export interface ElementDetailsActorRef extends ActorRef<ElementDetailsSnapshot, Events> {}
+//#endregion

package/dist/overlays/element-details/actor.mjs

@@ -0,0 +1,52 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { relationshipsBrowserLogic } from "../relationships-browser/actor.mjs";
+import { assign, sendTo, setup, spawnChild, stopChild } from "xstate";
+
+//#region src/overlays/element-details/actor.ts
+const _elementDetailsLogic = setup({
+	types: {
+		context: {},
+		input: {},
+		events: {},
+		children: {}
+	},
+	actors: { relationshipsBrowserLogic }
+}).createMachine({
+	id: "element-details",
+	context: ({ input }) => ({
+		...input,
+		initiatedFrom: {
+			node: input.initiatedFrom?.node ?? null,
+			clientRect: input.initiatedFrom?.clientRect ?? null
+		}
+	}),
+	initial: "active",
+	states: {
+		"active": {
+			entry: spawnChild("relationshipsBrowserLogic", {
+				id: ({ self }) => `${self.id}-relationships`,
+				input: ({ context }) => ({
+					subject: context.subject,
+					viewId: context.currentView.id,
+					scope: "view",
+					enableSelectSubject: false,
+					enableChangeScope: true,
+					closeable: false
+				})
+			}),
+			exit: [sendTo(({ self }) => `${self.id}-relationships`, { type: "close" }), stopChild(({ self }) => `${self.id}-relationships`)],
+			on: {
+				"change.subject": { actions: assign({ subject: ({ event }) => event.subject }) },
+				"close": "closed"
+			}
+		},
+		closed: {
+			id: "closed",
+			type: "final"
+		}
+	}
+});
+const elementDetailsLogic = _elementDetailsLogic;
+
+//#endregion
+export { elementDetailsLogic };

package/dist/overlays/element-details/actorContext.mjs

@@ -0,0 +1,17 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+
+//#region src/overlays/element-details/actorContext.tsx
+/**
+* To improve experience with HMR, we use `createSafeContext` as a boundary for hooks
+*/
+const ElementDetailsActorContext = createContext(null);
+ElementDetailsActorContext.displayName = "ElementDetailsActorContext";
+const useElementDetailsActorRef = () => {
+	const ctx = useContext(ElementDetailsActorContext);
+	if (ctx === null) throw new Error("ElementDetailsActorRef is not provided");
+	return ctx;
+};
+
+//#endregion
+export { ElementDetailsActorContext, useElementDetailsActorRef };

package/dist/overlays/hooks.mjs

@@ -0,0 +1,7 @@
+import { createSafeContextForActor } from "../hooks/safeContext.mjs";
+
+//#region src/overlays/hooks.ts
+const { ContextProvider: OverlaysActorContext, selectSnapshot: selectOverlaysSnapshot, useActorSelector: useSelectOverlaysActor } = createSafeContextForActor("Overlays");
+
+//#endregion
+export { OverlaysActorContext, selectOverlaysSnapshot, useSelectOverlaysActor };

package/dist/overlays/overlay/Overlay.d.mts

@@ -0,0 +1,54 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+//#region src/overlays/overlay/Overlay.d.ts
+export type OverlayProps = PropsWithChildren<{
+  fullscreen?: boolean | undefined;
+  withBackdrop?: boolean | undefined;
+  overlayLevel?: number;
+  className?: string;
+  classes?: {
+    dialog?: string;
+    body?: string;
+  };
+  backdrop?: {
+    opacity?: number;
+  };
+  /**
+   * Delay before showing the overlay content (in milliseconds) - helps to avoid flickering
+   * Default: `130ms`
+   * If set to `0`, the content will be shown immediately
+   */
+  openDelay?: number;
+  /**
+   * Called when the overlay is closed by outside click or escape key
+   */
+  onClose: () => void;
+  onClick?: never;
+}>;
+export declare const Overlay: import("react").ForwardRefExoticComponent<{
+  fullscreen?: boolean | undefined;
+  withBackdrop?: boolean | undefined;
+  overlayLevel?: number;
+  className?: string;
+  classes?: {
+    dialog?: string;
+    body?: string;
+  };
+  backdrop?: {
+    opacity?: number;
+  };
+  /**
+   * Delay before showing the overlay content (in milliseconds) - helps to avoid flickering
+   * Default: `130ms`
+   * If set to `0`, the content will be shown immediately
+   */
+  openDelay?: number;
+  /**
+   * Called when the overlay is closed by outside click or escape key
+   */
+  onClose: () => void;
+  onClick?: never;
+} & {
+  children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDialogElement>>;
+//#endregion

package/dist/overlays/overlay/Overlay.mjs

@@ -0,0 +1,117 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { cx } from "@likec4/styles/css";
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { useTimeoutEffect } from "@react-hookz/web";
+import { FocusTrap, RemoveScroll } from "@mantine/core";
+import { m, useIsPresent, useReducedMotionConfig } from "motion/react";
+import { useFocusTrap, useMergedRef } from "@mantine/hooks";
+import { overlay } from "@likec4/styles/recipes";
+
+//#region src/overlays/overlay/Overlay.tsx
+const backdropBlur = "--_blur";
+const backdropOpacity = "--_opacity";
+const cssVarLevel = "--_level";
+const Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, children, fullscreen = false, withBackdrop = true, backdrop, openDelay = 120, ...rest }, ref) => {
+	const [opened, setOpened] = useState(false);
+	const focusTrapRef = useFocusTrap(opened);
+	const dialogRef = useRef(null);
+	const onCloseCalledRef = useRef(false);
+	const motionNotReduced = useReducedMotionConfig() !== true;
+	/**
+	* This function is called when the overlay is closed by outside click or escape key.
+	* It ensures that the onClose callback is only called once.
+	*/
+	const closeMe = () => {
+		if (!onCloseCalledRef.current) {
+			onCloseCalledRef.current = true;
+			onClose();
+		}
+	};
+	const isPresent = useIsPresent();
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (dialog && !dialog.open) dialog.showModal();
+		if (openDelay === 0) setOpened(true);
+	}, []);
+	useEffect(() => {
+		if (isPresent) return;
+		const dialog = dialogRef.current;
+		return () => {
+			onCloseCalledRef.current = true;
+			if (dialog?.open) dialog.close();
+		};
+	}, [isPresent]);
+	useTimeoutEffect(() => setOpened(true), openDelay > 0 ? openDelay : void 0);
+	const overlayRecipe = overlay({
+		fullscreen,
+		withBackdrop
+	});
+	let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
+	if (backdrop?.opacity !== void 0) targetBackdropOpacity = `${backdrop.opacity * 100}%`;
+	const motionProps = useMemo(() => ({
+		initial: {
+			[backdropBlur]: "2px",
+			[backdropOpacity]: "20%",
+			scaleX: .95,
+			scaleY: .85,
+			originY: 0,
+			translateY: -8,
+			opacity: 0
+		},
+		animate: {
+			[backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+			[backdropOpacity]: targetBackdropOpacity,
+			scaleX: 1,
+			scaleY: 1,
+			originY: 0,
+			translateY: 0,
+			opacity: 1
+		},
+		exit: {
+			scaleX: .9,
+			scaleY: .8,
+			originY: 0,
+			translateY: -10,
+			opacity: 0,
+			[backdropBlur]: "2px",
+			[backdropOpacity]: "20%"
+		}
+	}), [overlayLevel, targetBackdropOpacity]);
+	return /* @__PURE__ */ jsx(m.dialog, {
+		ref: useMergedRef(dialogRef, ref),
+		className: cx(classes?.dialog, className, overlayRecipe, fullscreen && RemoveScroll.classNames.fullWidth),
+		layout: true,
+		style: { [cssVarLevel]: overlayLevel },
+		...motionNotReduced ? motionProps : { initial: {
+			[backdropBlur]: "8px",
+			[backdropOpacity]: targetBackdropOpacity
+		} },
+		onDoubleClick: stopPropagation,
+		onPointerDown: stopPropagation,
+		...rest,
+		onClick: (e) => {
+			e.stopPropagation();
+			if (e.target === e.currentTarget) closeMe();
+		},
+		onCancel: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			closeMe();
+		},
+		onClose: closeMe,
+		children: /* @__PURE__ */ jsx(RemoveScroll, {
+			forwardProps: true,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: focusTrapRef,
+				className: cx(classes?.body, "likec4-overlay-body"),
+				children: opened && /* @__PURE__ */ jsx(Fragment$1, { children })
+			})
+		})
+	});
+});
+Overlay.displayName = "Overlay";
+
+//#endregion
+export { Overlay };

package/dist/overlays/overlaysActor.d.mts

@@ -0,0 +1,49 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Overlays } from "./types.mjs";
+import { Fqn } from "@likec4/core/types";
+import { ActorRef, SnapshotFrom, StateMachine } from "xstate";
+//#region src/overlays/overlaysActor.d.ts
+export type OverlayActorEvent = {
+  type: 'open.elementDetails';
+} & Overlays.ElementDetails.Input | {
+  type: 'open.relationshipDetails';
+} & Overlays.RelationshipDetails.Input | {
+  type: 'open.relationshipsBrowser';
+} & Overlays.RelationshipsBrowser.Input | {
+  type: 'close';
+  actorId?: string | undefined;
+} | {
+  type: 'close.all';
+};
+export interface OverlaysContext {
+  seq: number;
+  overlays: Array<{
+    type: 'elementDetails';
+    id: `elementDetails-${number}`;
+    subject: Fqn;
+  } | {
+    type: 'relationshipDetails';
+    id: `relationshipDetails-${number}`;
+  } | {
+    type: 'relationshipsBrowser';
+    id: `relationshipsBrowser-${number}`;
+    subject: Fqn;
+  }>;
+}
+export type OverlayActorEmitedEvent = {
+  type: 'opened';
+  overlay: 'elementDetails' | 'relationshipsBrowser' | 'relationshipDetails';
+} | {
+  type: 'closed';
+  overlay: 'elementDetails' | 'relationshipsBrowser' | 'relationshipDetails';
+} | {
+  type: 'idle';
+};
+export interface OverlaysActorLogic extends StateMachine<OverlaysContext, OverlayActorEvent, {
+  [key: `elementDetails-${number}`]: Overlays.ElementDetails.ActorRef | undefined;
+  [key: `relationshipDetails-${number}`]: Overlays.RelationshipDetails.ActorRef | undefined;
+  [key: `relationshipsBrowser-${number}`]: Overlays.RelationshipsBrowser.ActorRef | undefined;
+}, any, any, any, any, any, never, never, any, OverlayActorEmitedEvent, any, any> {}
+export type OverlaysActorSnapshot = SnapshotFrom<OverlaysActorLogic>;
+export interface OverlaysActorRef extends ActorRef<OverlaysActorSnapshot, OverlayActorEvent, OverlayActorEmitedEvent> {}
+//#endregion

package/dist/overlays/overlaysActor.mjs

@@ -0,0 +1,232 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { relationshipsBrowserLogic } from "./relationships-browser/actor.mjs";
+import { elementDetailsLogic } from "./element-details/actor.mjs";
+import { relationshipDetailsLogic } from "./relationship-details/actor.mjs";
+import { isString, last, reverse } from "remeda";
+import { getHotkeyHandler } from "@mantine/hooks";
+import { assertEvent, fromCallback, setup } from "xstate";
+
+//#region src/overlays/overlaysActor.ts
+const hotkeyLogic = fromCallback(({ sendBack }) => {
+	const handler = getHotkeyHandler([[
+		"Escape",
+		(event) => {
+			event.stopPropagation();
+			sendBack({ type: "close" });
+		},
+		{ preventDefault: true }
+	]]);
+	document.body.addEventListener("keydown", handler, { capture: true });
+	return () => {
+		document.body.removeEventListener("keydown", handler, { capture: true });
+	};
+});
+const machine = setup({
+	types: {
+		context: {},
+		events: {},
+		emitted: {},
+		children: {}
+	},
+	actors: {
+		relationshipDetails: relationshipDetailsLogic,
+		elementDetails: elementDetailsLogic,
+		relationshipsBrowser: relationshipsBrowserLogic,
+		hotkey: hotkeyLogic
+	},
+	guards: {
+		"has overlays?": ({ context }) => context.overlays.length > 0,
+		"close specific overlay?": ({ event }) => {
+			return event.type === "close" && isString(event.actorId);
+		},
+		"last: is relationshipDetails?": ({ context }) => {
+			return last(context.overlays)?.type === "relationshipDetails";
+		},
+		"last: is relationshipsBrowser?": ({ context }) => {
+			return last(context.overlays)?.type === "relationshipsBrowser";
+		}
+	}
+});
+const emitOpened = (overlay) => machine.emit({
+	type: "opened",
+	overlay: overlay.split("-")[0]
+});
+const emitClosed = (overlay) => machine.emit({
+	type: "closed",
+	overlay: overlay.split("-")[0]
+});
+const emitIdle = () => machine.emit({ type: "idle" });
+const closeLastOverlay = () => machine.enqueueActions(({ context, enqueue }) => {
+	if (context.overlays.length === 0) return;
+	const lastOverlay = last(context.overlays)?.id;
+	if (!lastOverlay) return;
+	enqueue.sendTo(lastOverlay, { type: "close" });
+	enqueue.stopChild(lastOverlay);
+	enqueue.assign({ overlays: context.overlays.filter((o) => o.id !== lastOverlay) });
+	enqueue(emitClosed(lastOverlay));
+});
+const closeSpecificOverlay = () => machine.enqueueActions(({ context, enqueue, event }) => {
+	assertEvent(event, "close");
+	const actorId = event.actorId;
+	if (!isString(actorId)) return;
+	const toClose = context.overlays.find((o) => o.id === actorId)?.id;
+	if (toClose) {
+		enqueue.sendTo(toClose, { type: "close" });
+		enqueue.stopChild(toClose);
+		enqueue.assign({ overlays: context.overlays.filter((o) => o.id !== toClose) });
+		enqueue(emitClosed(toClose));
+	}
+});
+const closeAllOverlays = () => machine.enqueueActions(({ context, enqueue }) => {
+	for (const { id } of reverse(context.overlays)) {
+		enqueue.sendTo(id, { type: "close" });
+		enqueue.stopChild(id);
+		enqueue(emitClosed(id));
+	}
+	enqueue.assign({ overlays: [] });
+});
+const openElementDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
+	assertEvent(event, "open.elementDetails");
+	if (context.overlays.some((o) => o.type === "elementDetails" && o.subject === event.subject)) return;
+	const id = `elementDetails-${context.seq}`;
+	enqueue.spawnChild("elementDetails", {
+		id,
+		input: event,
+		syncSnapshot: true
+	});
+	enqueue.assign({
+		seq: context.seq + 1,
+		overlays: [...context.overlays, {
+			id,
+			type: "elementDetails",
+			subject: event.subject
+		}]
+	});
+	enqueue(emitOpened(id));
+});
+const openRelationshipDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
+	assertEvent(event, "open.relationshipDetails");
+	const currentOverlay = last(context.overlays);
+	if (currentOverlay?.type === "relationshipDetails") {
+		enqueue.sendTo(currentOverlay.id, {
+			...event,
+			type: "navigate.to"
+		});
+		return;
+	}
+	const id = `relationshipDetails-${context.seq}`;
+	enqueue.spawnChild("relationshipDetails", {
+		id,
+		input: event,
+		syncSnapshot: true
+	});
+	enqueue.assign({
+		seq: context.seq + 1,
+		overlays: [...context.overlays, {
+			id,
+			type: "relationshipDetails"
+		}]
+	});
+	enqueue(emitOpened(id));
+});
+const openRelationshipsBrowser = () => machine.enqueueActions(({ context, enqueue, event }) => {
+	assertEvent(event, "open.relationshipsBrowser");
+	const currentOverlay = last(context.overlays);
+	if (currentOverlay?.type === "relationshipsBrowser") {
+		enqueue.sendTo(currentOverlay.id, {
+			type: "navigate.to",
+			subject: event.subject,
+			viewId: event.viewId
+		});
+		enqueue.sendTo(currentOverlay.id, {
+			type: "change.scope",
+			scope: event.viewId ? event.scope : "global"
+		});
+		return;
+	}
+	const id = `relationshipsBrowser-${context.seq}`;
+	enqueue.spawnChild("relationshipsBrowser", {
+		id,
+		input: event,
+		syncSnapshot: true
+	});
+	enqueue.assign({
+		seq: context.seq + 1,
+		overlays: [...context.overlays, {
+			id,
+			type: "relationshipsBrowser",
+			subject: event.subject
+		}]
+	});
+	enqueue(emitOpened(id));
+});
+const openOverlay = () => machine.enqueueActions(({ enqueue, event }) => {
+	assertEvent(event, [
+		"open.elementDetails",
+		"open.relationshipDetails",
+		"open.relationshipsBrowser"
+	]);
+	switch (event.type) {
+		case "open.elementDetails":
+			enqueue(openElementDetails());
+			break;
+		case "open.relationshipDetails":
+			enqueue(openRelationshipDetails());
+			break;
+		case "open.relationshipsBrowser": enqueue(openRelationshipsBrowser());
+	}
+});
+const listenToEsc = () => machine.spawnChild("hotkey", { id: "hotkey" });
+const stopListeningToEsc = () => machine.stopChild("hotkey");
+const _overlaysActorLogic = machine.createMachine({
+	id: "overlays",
+	context: () => ({
+		seq: 1,
+		overlays: []
+	}),
+	initial: "idle",
+	on: { "close.all": {
+		actions: closeAllOverlays(),
+		target: "#idle"
+	} },
+	states: {
+		idle: {
+			id: "idle",
+			entry: [emitIdle()],
+			on: { "open.*": {
+				actions: openOverlay(),
+				target: "opened"
+			} }
+		},
+		opened: {
+			entry: listenToEsc(),
+			exit: stopListeningToEsc(),
+			initial: "hasOverlays",
+			states: {
+				hasOverlays: { on: {
+					"open.*": { actions: openOverlay() },
+					"close": [{
+						guard: "close specific overlay?",
+						actions: closeSpecificOverlay(),
+						target: "decide"
+					}, {
+						actions: closeLastOverlay(),
+						target: "decide"
+					}]
+				} },
+				decide: { always: [{
+					guard: "has overlays?",
+					target: "hasOverlays"
+				}, { target: "#idle" }] }
+			}
+		},
+		final: {
+			entry: [closeAllOverlays(), stopListeningToEsc()],
+			type: "final"
+		}
+	}
+});
+const overlaysActorLogic = _overlaysActorLogic;
+
+//#endregion
+export { overlaysActorLogic };