@miragon/event-storming-renderer 0.2.2 → 0.4.0

package/dist/index.js

@@ -7,31 +7,40 @@ import { append as f, attr as p, create as m, remove as h } from "tiny-svg";
 import g from "diagram-js/lib/features/selection";
 import _ from "diagram-js/lib/navigation/zoomscroll";
 import v from "diagram-js/lib/navigation/movecanvas";
-import y from "diagram-js/lib/features/keyboard";
-import b from "diagram-js/lib/features/modeling";
-import x from "diagram-js/lib/features/move";
-import ee from "diagram-js/lib/features/create";
-import te from "diagram-js/lib/features/connect";
-import ne from "diagram-js/lib/features/context-pad";
-import re from "diagram-js/lib/features/palette";
-import ie from "diagram-js/lib/features/rules";
-import ae from "diagram-js/lib/features/outline";
-import oe from "diagram-js/lib/features/popup-menu";
-import se from "diagram-js/lib/features/attach-support";
-import ce from "diagram-js/lib/command/CommandInterceptor";
-import le from "diagram-js/lib/features/mouse";
-import ue from "diagram-js/lib/features/lasso-tool";
-import de from "diagram-js/lib/features/rules/RuleProvider";
-import fe from "diagram-js/lib/features/palette/PaletteTooltipComponent";
-import { html as pe } from "diagram-js/lib/ui";
-import me from "diagram-js/lib/features/connection-preview";
-import he from "diagram-js/lib/features/ordering/OrderingProvider";
-import ge from "diagram-js/lib/features/resize";
+import ee from "diagram-js/lib/features/keyboard";
+import te from "diagram-js/lib/features/modeling";
+import ne from "diagram-js/lib/features/move";
+import re from "diagram-js/lib/features/create";
+import ie from "diagram-js/lib/features/connect";
+import ae from "diagram-js/lib/features/context-pad";
+import oe from "diagram-js/lib/features/palette";
+import se from "diagram-js/lib/features/rules";
+import ce from "diagram-js/lib/features/outline";
+import le from "diagram-js/lib/features/popup-menu";
+import ue from "diagram-js/lib/features/attach-support";
+import de from "diagram-js/lib/command/CommandInterceptor";
+import fe from "diagram-js/lib/features/mouse";
+import pe from "diagram-js/lib/features/lasso-tool";
+import me from "diagram-js/lib/features/rules/RuleProvider";
+import he from "diagram-js/lib/features/palette/PaletteTooltipComponent";
+import { html as ge } from "diagram-js/lib/ui";
+import _e from "diagram-js/lib/features/connection-preview";
+import ve from "diagram-js/lib/features/ordering/OrderingProvider";
+import ye from "diagram-js/lib/features/resize";
+import { MODELER_API_VERSION as be } from "@miragon/modeler-api";
 //#region src/io/saveSvg.ts
-function _e(e, t) {
-	let n = e.getContainer().querySelector("svg");
+var xe = [
+	"tabindex",
+	"role",
+	"aria-label",
+	"aria-labelledby"
+];
+function Se(e, t) {
+	let n = e.getContainer().querySelector(":scope > svg");
 	if (!n) throw Error("No SVG found in the canvas container.");
-	let r = n.cloneNode(!0), i = t ?? {
+	let r = n.cloneNode(!0);
+	for (let e of xe) r.removeAttribute(e);
+	let i = t ?? {
 		x: 0,
 		y: 0,
 		...o
@@ -41,87 +50,54 @@ function _e(e, t) {
 	return a && a.removeAttribute("transform"), { svg: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + new XMLSerializer().serializeToString(r) };
 }
 //#endregion
-//#region src/EventStormingBaseViewer.ts
-function ve(e) {
-	return typeof e == "number" ? `${e}px` : e;
+//#region src/model/di-types.ts
+var y = "event-storming-root";
+function Ce(e) {
+	return typeof e == "object" && !!e;
 }
-var ye = class {
-	_diagram;
-	_container;
-	_options;
-	constructor(e = {}) {
-		this._options = e, this._container = this._createContainer(e);
-	}
-	_createContainer(e) {
-		let t = e.container ?? document.createElement("div");
-		return t.classList.add("event-storming-container"), t.style.width = ve(e.width ?? "100%"), t.style.height = ve(e.height ?? (e.container ? "100%" : "600px")), t;
-	}
-	_ensureDiagram() {
-		if (!this._diagram) {
-			let t = [...this._getModules(), ...this._options.additionalModules ?? []];
-			this._diagram = new e({
-				canvas: { container: this._container },
-				modules: t
-			});
-		}
-		return this._diagram;
-	}
-	get(e) {
-		return this._ensureDiagram().get(e);
-	}
-	on(e, t, n = 1e3) {
-		this.get("eventBus").on(e, n, t);
-	}
-	off(e, t) {
-		this.get("eventBus").off(e, t);
-	}
-	async importMap(e) {
-		let t = this._ensureDiagram(), n = t.get("eventBus"), r = t.get("eventStormingImporter");
-		r.clear();
-		let i = r.import(e);
-		return this._applyStyleClass(e.config.style), t.get("commandStack").clear(), n.fire("import.done", { warnings: i }), { warnings: i };
-	}
-	_applyStyleClass(e) {
-		let t = this._container.classList;
-		for (let e of ["classic", "dark"]) t.remove(`event-storming-${e}`);
-		e && e !== "classic" && t.add(`event-storming-${e}`);
-	}
-	async importDSL(e) {
-		let n = this._ensureDiagram().get("eventBus");
-		n.fire("import.parse.start", { text: e });
-		let { board: r, diagnostics: i } = t(e);
-		n.fire("import.parse.done", {
-			board: r,
-			diagnostics: i
-		});
-		let { warnings: a } = await this.importMap(r);
-		return { warnings: [...i.map((e) => ({ message: `Line ${e.line}: ${e.message} — "${e.text}"` })), ...a] };
-	}
-	exportMap() {
-		return this.get("eventStormingExporter").export();
-	}
-	exportDSL() {
-		return n(this.exportMap());
-	}
-	async saveSVG() {
-		return _e(this.get("canvas"), this.get("boardBounds").contentBounds());
-	}
-	attachTo(e) {
-		e.appendChild(this._container), this.get("canvas").resized();
-	}
-	detach() {
-		this._container.remove();
-	}
-	clear() {
-		this._ensureDiagram().clear();
-	}
-	destroy() {
-		this._diagram &&= (this._diagram.destroy(), void 0), this._container.remove();
-	}
-	get container() {
-		return this._container;
-	}
-}, S = {
+function b(e) {
+	return Ce(e) && typeof e.eventStormingType == "string" && !("waypoints" in e);
+}
+function x(e) {
+	return Ce(e) && typeof e.eventStormingType == "string" && "waypoints" in e;
+}
+var S = [
+	"event",
+	"command",
+	"actor",
+	"aggregate",
+	"policy",
+	"readmodel",
+	"external",
+	"hotspot"
+];
+function C(e) {
+	return S.includes(e);
+}
+function w(e) {
+	return b(e) && C(e.eventStormingType);
+}
+function we(e) {
+	return r.includes(e);
+}
+function Te(e) {
+	return s.includes(e);
+}
+function Ee(e) {
+	return b(e) && we(e.eventStormingType);
+}
+function De(e) {
+	return b(e) && Te(e.eventStormingType);
+}
+function T(e) {
+	return b(e) && e.eventStormingType === "drawing";
+}
+function Oe(e) {
+	return b(e) && e.eventStormingType === "note";
+}
+//#endregion
+//#region src/theme/palette.ts
+var E = {
 	blau: "#335DE5",
 	blauLink: "#2B50D4",
 	blauHell: "#6B8AFF",
@@ -129,17 +105,14 @@ var ye = class {
 	grau: "#F9F7F7",
 	schwarz: "#1D1D1D",
 	weiss: "#FFFFFF",
-	success: "#0B7A55",
-	warning: "#92610A",
-	danger: "#C92A2A",
-	info: "#2B50D4",
+	linie: "#E6E2E2",
+	success: "#00E676",
+	warning: "#FFB000",
+	danger: "#CD1839",
+	info: "#335DE5",
 	navy: "#080A20",
 	gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
-};
-S.grau, S.schwarz, S.weiss, S.blau, S.gruen, S.danger, S.schwarz, S.navy, S.grau;
-//#endregion
-//#region src/draw/note-markdown.ts
-var be = [
+}, ke = [
 	{
 		marker: "***",
 		bold: !0,
@@ -156,28 +129,28 @@ var be = [
 		italic: !0
 	}
 ];
-function C(e) {
+function D(e) {
 	return e.split("\n").map((e) => {
 		let t = e.startsWith("- ");
 		return {
 			bullet: t,
-			runs: Ce(t ? e.slice(2) : e)
+			runs: Me(t ? e.slice(2) : e)
 		};
 	});
 }
-function xe(e) {
+function Ae(e) {
 	return e.map((e) => {
-		let t = Te(e.runs).map((e) => {
+		let t = Pe(e.runs).map((e) => {
 			let t = e.bold && e.italic ? "***" : e.bold ? "**" : e.italic ? "*" : "";
 			return t + e.text + t;
 		}).join("");
 		return (e.bullet ? "- " : "") + t;
 	}).join("\n");
 }
-function Se(e) {
-	return C(e).map((e) => (e.bullet ? "• " : "") + e.runs.map((e) => e.text).join("")).join("\n");
+function je(e) {
+	return D(e).map((e) => (e.bullet ? "• " : "") + e.runs.map((e) => e.text).join("")).join("\n");
 }
-function Ce(e) {
+function Me(e) {
 	let t = [], n = "", r = () => {
 		n && t.push({
 			text: n,
@@ -186,21 +159,17 @@ function Ce(e) {
 		}), n = "";
 	}, i = 0;
 	for (; i < e.length;) {
-		let a = e[i] === "*" ? we(e, i) : void 0;
-		if (!a) {
-			n += e[i], i++;
-			continue;
-		}
-		r(), t.push({
+		let a = e[i] === "*" ? Ne(e, i) : void 0;
+		a ? (r(), t.push({
 			text: a.content,
 			bold: a.bold,
 			italic: a.italic
-		}), i = a.end;
+		}), i = a.end) : (n += e[i], i++);
 	}
-	return r(), Te(t);
+	return r(), Pe(t);
 }
-function we(e, t) {
-	for (let { marker: n, bold: r, italic: i } of be) {
+function Ne(e, t) {
+	for (let { marker: n, bold: r, italic: i } of ke) {
 		if (!e.startsWith(n, t)) continue;
 		let a = e.indexOf(n, t + n.length);
 		if (!(a <= t + n.length)) return {
@@ -211,7 +180,7 @@ function we(e, t) {
 		};
 	}
 }
-function Te(e) {
+function Pe(e) {
 	let t = [];
 	for (let n of e) {
 		if (!n.text) continue;
@@ -226,7 +195,7 @@ function Te(e) {
 }
 //#endregion
 //#region src/draw/styles.ts
-var w = {
+var O = {
 	event: {
 		label: "Domain Event",
 		width: 130,
@@ -283,89 +252,321 @@ var w = {
 		fill: "#E85D75",
 		stroke: "#C43B55"
 	}
-}, T = {
+}, k = {
 	label: "Note",
 	fill: "#ECECEC",
 	stroke: "#C4C4C4"
-}, E = {
+}, A = {
 	width: 60,
 	height: 40
-}, D = 7.5, Ee = {
-	width: w.aggregate.width,
-	height: w.aggregate.height
+}, j = 7.5, Fe = {
+	width: O.aggregate.width,
+	height: O.aggregate.height
 };
-function O(e) {
-	let t = Se(e), n = (t && t.length ? t : "note").split("\n"), r = Math.max(1, ...n.map((e) => e.length));
+function M(e) {
+	let t = je(e), n = (t && t.length ? t : "note").split("\n"), r = Math.max(1, ...n.map((e) => e.length));
 	return {
 		lines: n,
-		width: Math.max(Ee.width, Math.round(r * D) + 16),
-		height: Math.max(Ee.height, n.length * 17 + 16)
+		width: Math.max(Fe.width, Math.round(r * j) + 16),
+		height: Math.max(Fe.height, n.length * 17 + 16)
 	};
 }
-function k(e, t) {
-	let n = O(e);
+function N(e, t) {
+	let n = M(e);
 	return t.width !== n.width || t.height !== n.height;
 }
-var A = {
-	paper: S.grau,
-	ink: S.schwarz,
+var P = {
+	paper: E.grau,
+	ink: E.schwarz,
 	inkSoft: "#5B5B5B",
-	surface: S.weiss,
-	stroke: S.schwarz,
+	surface: E.weiss,
+	stroke: E.schwarz,
 	arrow: "#9E9E9E",
-	accent: S.blau,
+	accent: E.blau,
 	accentSoft: "rgba(51,93,229,0.12)",
-	stickyText: "#333333"
-}, j = `var(--event-storming-drawing-ink, ${S.schwarz})`, M = {
-	family: "'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
+	stickyText: E.schwarz
+}, F = E.schwarz, I = {
+	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13
-}, De = "event-storming-root";
-function Oe(e) {
-	return typeof e == "object" && !!e;
-}
-function N(e) {
-	return Oe(e) && typeof e.eventStormingType == "string" && !("waypoints" in e);
-}
-function P(e) {
-	return Oe(e) && typeof e.eventStormingType == "string" && "waypoints" in e;
-}
-var F = [
-	"event",
-	"command",
-	"actor",
-	"aggregate",
-	"policy",
-	"readmodel",
-	"external",
-	"hotspot"
-];
-function I(e) {
-	return F.includes(e);
-}
-function L(e) {
-	return N(e) && I(e.eventStormingType);
+}, Ie = (e) => `<svg width="24" height="24" viewBox="0 0 24 24" class="event-storming-palette-svg">${e}</svg>`, Le = (e, t, n = 0) => Ie(`<rect x="4" y="5" width="16" height="14" fill="${e}" stroke="${t}" stroke-width="1.5"${n ? ` transform="rotate(${n} 12 12)"` : ""}/>`), Re = (e) => `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="event-storming-palette-svg">${e}</svg>`, L = {
+	draw: Re("<circle cx=\"19\" cy=\"5\" r=\"2\"/><circle cx=\"5\" cy=\"19\" r=\"2\"/><path d=\"M6.5 17.5 17.5 6.5\"/>"),
+	lasso: Re("<path d=\"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z\"/><path d=\"M5 3a2 2 0 0 0-2 2\"/><path d=\"M19 3a2 2 0 0 1 2 2\"/><path d=\"M5 21a2 2 0 0 1-2-2\"/><path d=\"M9 3h1\"/><path d=\"M9 21h2\"/><path d=\"M14 3h1\"/><path d=\"M3 9v1\"/><path d=\"M21 9v2\"/><path d=\"M3 14v1\"/>"),
+	note: Le(k.fill, k.stroke)
+};
+for (let e of S) {
+	let t = O[e];
+	L[e] = Le(t.fill, t.stroke, e === "hotspot" ? -6 : 0);
 }
-function ke(e) {
-	return r.includes(e);
+function ze(e, t) {
+	return `<svg width="14" height="14" viewBox="0 0 14 14" class="event-storming-palette-svg"><rect x="1" y="1" width="12" height="12" fill="${e}" stroke="${t}" stroke-width="1"/></svg>`;
 }
+//#endregion
+//#region src/palette/EventStormingPaletteProvider.ts
 function R(e) {
-	return s.includes(e);
+	if (e.freeArea) return e.freeArea;
+	let t = e.freeRectInsets;
+	return t ? { insets: t } : void 0;
 }
-function Ae(e) {
-	return N(e) && ke(e.eventStormingType);
+var Be = 24, z = "stickies-1", B = "stickies-2", Ve = "stickies-3", He = [
+	{
+		key: "event",
+		type: "event",
+		label: O.event.label,
+		title: "Domain event",
+		shortcut: "E",
+		group: z
+	},
+	{
+		key: "command",
+		type: "command",
+		label: O.command.label,
+		title: "Command",
+		shortcut: "C",
+		group: z
+	},
+	{
+		key: "actor",
+		type: "actor",
+		label: O.actor.label,
+		title: "Actor",
+		group: z
+	},
+	{
+		key: "aggregate",
+		type: "aggregate",
+		label: O.aggregate.label,
+		title: "Aggregate",
+		group: z
+	},
+	{
+		key: "policy",
+		type: "policy",
+		label: O.policy.label,
+		title: "Policy",
+		group: B
+	},
+	{
+		key: "readmodel",
+		type: "readmodel",
+		label: O.readmodel.label,
+		title: "Read model",
+		group: B
+	},
+	{
+		key: "external",
+		type: "external",
+		label: O.external.label,
+		title: "External system",
+		group: B
+	},
+	{
+		key: "hotspot",
+		type: "hotspot",
+		label: O.hotspot.label,
+		title: "Hotspot",
+		group: Ve
+	},
+	{
+		key: "note",
+		type: "note",
+		label: k.label,
+		title: "Note",
+		group: Ve
+	}
+], Ue = class {
+	create;
+	factory;
+	lassoTool;
+	drawTool;
+	eventStormingModeling;
+	canvas;
+	modeling;
+	selection;
+	elementRegistry;
+	labelEditing;
+	config;
+	static $inject = [
+		"palette",
+		"create",
+		"eventStormingElementFactory",
+		"lassoTool",
+		"eventStormingDrawTool",
+		"eventStormingModeling",
+		"eventBus",
+		"canvas",
+		"modeling",
+		"selection",
+		"elementRegistry",
+		"eventStormingLabelEditing",
+		"config.eventStormingPalette"
+	];
+	constructor(e, t, n, r, i, a, o, s, c, l, u, d, f) {
+		this.create = t, this.factory = n, this.lassoTool = r, this.drawTool = i, this.eventStormingModeling = a, this.canvas = s, this.modeling = c, this.selection = l, this.elementRegistry = u, this.labelEditing = d, this.config = f, e.registerProvider(this);
+		let p = () => e._rebuild();
+		o.on("import.done", p), o.on(["commandStack.element.updateProperties.postExecuted", "commandStack.element.updateProperties.reverted"], (e) => {
+			e.context.element.id === "event-storming-root" && p();
+		});
+	}
+	getPaletteEntries() {
+		let e = {};
+		e["lasso-tool"] = {
+			group: "tools",
+			title: "Lasso",
+			shortcut: "L",
+			html: `<div class="entry event-storming-palette-entry">${L.lasso}</div>`,
+			action: { click: (e) => this.lassoTool.activateSelection(e) }
+		}, e["draw-tool"] = {
+			group: "tools",
+			title: "Draw",
+			html: `<div class="entry event-storming-palette-entry">${L.draw}</div>`,
+			action: { click: () => this.drawTool.toggle() }
+		};
+		let t = c[this.eventStormingModeling.getLevel()];
+		for (let n of He) {
+			if (n.type !== "note" && !t.includes(n.type)) continue;
+			let r = (e) => {
+				let t = this.factory.createNew(n.type, n.label);
+				We(e) && this.placeInFreeRect(t) || this.create.start(e, t);
+			};
+			e[`create.${n.key}`] = {
+				group: n.group,
+				title: n.title,
+				...n.shortcut ? { shortcut: n.shortcut } : {},
+				html: `<div class="entry event-storming-palette-entry" draggable="true">${L[n.key]}</div>`,
+				action: {
+					dragstart: r,
+					click: r
+				}
+			};
+		}
+		return e;
+	}
+	placeInFreeRect(e) {
+		let { canvas: t, modeling: n, selection: r, elementRegistry: i } = this;
+		if (!t || !n || !r || !i) return !1;
+		let a = this.freeAreaCentre(t), o = (e) => i.filter(b).some((t) => Math.abs(t.x + t.width / 2 - e.x) < 1 && Math.abs(t.y + t.height / 2 - e.y) < 1);
+		for (; o(a);) a.x += Be, a.y += Be;
+		let s = n.createShape(e, a, t.getRootElement());
+		return r.select(s), t.focus(), this.labelEditing?.activate(s), !0;
+	}
+	freeAreaCentre(e) {
+		let t = this.config && R(this.config), n = t?.center?.();
+		if (n) return {
+			x: n.x,
+			y: n.y
+		};
+		let r = e.viewbox(), i = t?.insets?.() ?? {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		}, a = Math.max(0, r.outer.width - i.left - i.right), o = Math.max(0, r.outer.height - i.top - i.bottom);
+		return {
+			x: r.x + (i.left + a / 2) / r.scale,
+			y: r.y + (i.top + o / 2) / r.scale
+		};
+	}
+};
+function We(e) {
+	return e.type === "click" && e.detail === 0;
 }
-function z(e) {
-	return N(e) && R(e.eventStormingType);
+//#endregion
+//#region src/EventStormingBaseViewer.ts
+function Ge(e) {
+	for (let { id: t } of [...e.elements, ...e.edges]) if (t === "event-storming-root" || t.startsWith("__implicitroot")) throw Error(`Element id "${t}" is reserved for the board itself.`);
 }
-function B(e) {
-	return N(e) && e.eventStormingType === "drawing";
+function Ke(e) {
+	return typeof e == "number" ? `${e}px` : e;
 }
-function je(e) {
-	return N(e) && e.eventStormingType === "note";
+var qe = class {
+	_diagram;
+	_container;
+	_options;
+	constructor(e = {}) {
+		this._options = e, this._container = this._createContainer(e);
+	}
+	_createContainer(e) {
+		let t = e.container ?? document.createElement("div");
+		return t.classList.add("event-storming-container"), t.style.width = Ke(e.width ?? "100%"), t.style.height = Ke(e.height ?? (e.container ? "100%" : "600px")), t;
+	}
+	_ensureDiagram() {
+		if (!this._diagram) {
+			let t = [...this._getModules(), ...this._options.additionalModules ?? []];
+			this._diagram = new e({
+				canvas: { container: this._container },
+				modules: t,
+				eventStormingKeyboard: { undoRedoKeys: this._options.undoRedoKeys ?? !0 },
+				eventStormingPalette: { freeArea: R(this._options) },
+				eventStormingImporter: { fitOnImport: this._options.fitOnImport ?? !0 }
+			});
+		}
+		return this._diagram;
+	}
+	get(e) {
+		return this._ensureDiagram().get(e);
+	}
+	on(e, t, n = 1e3) {
+		this.get("eventBus").on(e, n, t);
+	}
+	off(e, t) {
+		this.get("eventBus").off(e, t);
+	}
+	async importMap(e) {
+		let t = this._ensureDiagram(), n = t.get("eventBus"), r = t.get("eventStormingImporter");
+		Ge(e);
+		let i = t.get("eventStormingLabelEditing", !1);
+		i?.suspend(), t.get("popupMenu", !1)?.close(), r.clear();
+		let a = r.import(e);
+		return t.get("commandStack", !1)?.clear(!1), n.fire("import.done", { warnings: a }), i?.resumeAfterImport(), { warnings: a };
+	}
+	async importDSL(e) {
+		let n = this._ensureDiagram().get("eventBus");
+		n.fire("import.parse.start", { text: e });
+		let { board: r, diagnostics: i } = t(e);
+		n.fire("import.parse.done", {
+			board: r,
+			diagnostics: i
+		});
+		let { warnings: a } = await this.importMap(r);
+		return { warnings: [...i.map((e) => ({
+			message: `Line ${e.line}: ${e.message}`,
+			line: e.line,
+			source: e.text
+		})), ...a] };
+	}
+	exportMap() {
+		return this.get("eventStormingExporter").export();
+	}
+	exportDSL() {
+		return n(this.exportMap());
+	}
+	async saveSVG() {
+		return Se(this.get("canvas"), this.get("boardBounds").contentBounds());
+	}
+	attachTo(e) {
+		e.appendChild(this._container), this.get("canvas").resized();
+	}
+	detach() {
+		this._container.remove();
+	}
+	clear() {
+		this._ensureDiagram().clear();
+	}
+	destroy() {
+		this._diagram &&= (this._diagram.destroy(), void 0), this._container.remove();
+	}
+	get container() {
+		return this._container;
+	}
+}, Je = "0123456789abcdefghijklmnopqrstuvwxyz", Ye = 252;
+function Xe() {
+	let e = "";
+	for (; e.length < 8;) for (let t of globalThis.crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(8))) t >= Ye || e.length === 8 || (e += Je[t % 36]);
+	return e;
 }
 //#endregion
 //#region src/model/EventStormingElementFactory.ts
-var Me = {
+var Ze = {
 	event: "event",
 	command: "cmd",
 	actor: "actor",
@@ -376,7 +577,7 @@ var Me = {
 	hotspot: "hot",
 	note: "note",
 	drawing: "draw"
-}, Ne = class {
+}, Qe = class {
 	elementFactory;
 	elementRegistry;
 	static $inject = ["elementFactory", "elementRegistry"];
@@ -395,15 +596,15 @@ var Me = {
 		return `${e} ${n}`;
 	}
 	allocateId(e, t) {
-		let n = Me[e];
-		for (let e = 1;; e++) {
-			let r = `${n}_${e}`;
-			if (!this.elementRegistry.get(r) && !t?.has(r)) return r;
+		let n = Ze[e];
+		for (;;) {
+			let e = `${n}_${Xe()}`;
+			if (!this.elementRegistry.get(e) && !t?.has(e)) return e;
 		}
 	}
 	createSticky(e) {
-		if (!I(e.elementType)) throw Error(`not a sticky kind: ${e.elementType}`);
-		let { width: t, height: n } = w[e.elementType];
+		if (!C(e.elementType)) throw Error(`not a sticky kind: ${e.elementType}`);
+		let { width: t, height: n } = O[e.elementType];
 		return this.elementFactory.createShape({
 			id: e.id,
 			x: e.position.x - t / 2,
@@ -417,7 +618,7 @@ var Me = {
 		});
 	}
 	createNote(e) {
-		let { width: t, height: n } = e.size ?? O(e.label), r = e.align?.horizontal, i = e.align?.vertical;
+		let { width: t, height: n } = e.size ?? M(e.label), r = e.align?.horizontal, i = e.align?.vertical;
 		return this.elementFactory.createShape({
 			id: e.id,
 			x: e.position.x - t / 2,
@@ -462,7 +663,7 @@ var Me = {
 		});
 	}
 	createNew(e, t) {
-		let n = this.uniqueLabel(t), { width: r, height: i } = I(e) ? w[e] : O(n);
+		let n = this.uniqueLabel(t), { width: r, height: i } = C(e) ? O[e] : M(n);
 		return this.elementFactory.createShape({
 			id: this.allocateId(e),
 			width: r,
@@ -472,7 +673,7 @@ var Me = {
 		});
 	}
 	createProvisional() {
-		let { width: e, height: t } = w.event;
+		let { width: e, height: t } = O.event;
 		return this.elementFactory.createShape({
 			id: this.allocateId("event"),
 			width: e,
@@ -487,14 +688,14 @@ var Me = {
 			id: e.id,
 			source: t,
 			target: n,
-			waypoints: [Pe(t), Pe(n)],
+			waypoints: [$e(t), $e(n)],
 			eventStormingType: "arrow",
 			...e.label ? { linkLabel: e.label } : {},
 			businessObject: e
 		});
 	}
 };
-function Pe(e) {
+function $e(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
@@ -502,20 +703,20 @@ function Pe(e) {
 }
 //#endregion
 //#region src/model/index.ts
-var Fe = { eventStormingElementFactory: ["type", Ne] };
+var et = { eventStormingElementFactory: ["type", Qe] };
 //#endregion
 //#region src/board-bounds/BoardBounds.ts
-function Ie(e) {
+function tt(e) {
 	return e.id !== "event-storming-root" && !e.waypoints && typeof e.x == "number" && typeof e.y == "number" && typeof e.width == "number" && typeof e.height == "number";
 }
-var Le = class {
+var nt = class {
 	elementRegistry;
 	static $inject = ["elementRegistry"];
 	constructor(e) {
 		this.elementRegistry = e;
 	}
 	contentBounds(e = 120) {
-		let t = this.elementRegistry.getAll().filter(Ie);
+		let t = this.positionedShapes();
 		if (!t.length) return {
 			x: 0,
 			y: 0,
@@ -529,7 +730,13 @@ var Le = class {
 			height: a - r + 2 * e
 		};
 	}
-}, Re = { boardBounds: ["type", Le] }, ze = "eventStorming.viewOptions.changed", Be = class {
+	isEmpty() {
+		return this.positionedShapes().length === 0;
+	}
+	positionedShapes() {
+		return this.elementRegistry.getAll().filter(tt);
+	}
+}, rt = { boardBounds: ["type", nt] }, it = "eventStorming.viewOptions.changed", at = class {
 	eventBus;
 	elementRegistry;
 	static $inject = ["eventBus", "elementRegistry"];
@@ -542,15 +749,15 @@ var Le = class {
 	}
 	setTypeCaptionsVisible(e) {
 		if (e === this._typeCaptionsVisible) return;
-		this._typeCaptionsVisible = e, this.eventBus.fire(ze, { typeCaptionsVisible: e });
-		let t = this.elementRegistry.filter(L);
+		this._typeCaptionsVisible = e, this.eventBus.fire(it, { typeCaptionsVisible: e });
+		let t = this.elementRegistry.filter(w);
 		t.length && this.eventBus.fire("elements.changed", { elements: t });
 	}
 }, V = {
 	__depends__: [u],
-	eventStormingViewOptions: ["type", Be]
-}, Ve = 1500, He = -3, Ue = "event-storming-kind-caption", We = 9, Ge = 300, Ke = "#606060", qe = 7, Je = "#FBFBFB", Ye = "#B9B9B9", Xe = "6 4", Ze = "event-storming-sticky-shadow";
-function Qe(e) {
+	eventStormingViewOptions: ["type", at]
+}, ot = 1500, st = -3, ct = "event-storming-kind-caption", lt = 9, ut = 300, dt = P.stickyText, ft = 7, pt = "#FBFBFB", mt = "#B9B9B9", ht = "6 4", gt = "event-storming-sticky-shadow";
+function _t(e) {
 	let t = e.closest("svg");
 	if (!t) return !1;
 	if (t.querySelector("#event-storming-sticky-shadow")) return !0;
@@ -561,7 +768,7 @@ function Qe(e) {
 		"flood-color": "#000000",
 		"flood-opacity": .2
 	}), r = p(m("filter"), {
-		id: Ze,
+		id: gt,
 		x: "-40%",
 		y: "-40%",
 		width: "180%",
@@ -571,14 +778,14 @@ function Qe(e) {
 	let i = m("defs");
 	return f(i, r), t.insertBefore(i, t.firstChild), !0;
 }
-var $e = class extends d {
+var vt = class extends d {
 	viewOptions;
 	static $inject = ["eventBus", "eventStormingViewOptions"];
 	constructor(e, t) {
-		super(e, Ve), this.viewOptions = t;
+		super(e, ot), this.viewOptions = t;
 	}
 	canRender(e) {
-		return N(e) || P(e);
+		return b(e) || x(e);
 	}
 	drawShape(e, t) {
 		let n = t;
@@ -588,7 +795,7 @@ var $e = class extends d {
 		let n = t.drawingPoints ?? [], r = t.strokeStyle === "dashed" ? "8 5" : t.strokeStyle === "dotted" ? "2 4" : void 0, i = p(m(t.closed ? "polygon" : "polyline"), {
 			points: n.map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
-			stroke: t.color ?? j,
+			stroke: t.color ?? F,
 			"stroke-width": 2,
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
@@ -597,9 +804,9 @@ var $e = class extends d {
 		return f(e, i), i;
 	}
 	drawSticky(e, t) {
-		let n = t.eventStormingType, r = I(n) ? w[n] : T, i = t.provisional === !0, a = e;
+		let n = t.eventStormingType, r = C(n) ? O[n] : k, i = t.provisional === !0, a = e;
 		if (n === "hotspot") {
-			let n = p(m("g"), { transform: `rotate(${He} ${t.width / 2} ${t.height / 2})` });
+			let n = p(m("g"), { transform: `rotate(${st} ${t.width / 2} ${t.height / 2})` });
 			f(e, n), a = n;
 		}
 		let o = p(m("rect"), {
@@ -608,37 +815,37 @@ var $e = class extends d {
 			width: Math.max(t.width, 1),
 			height: Math.max(t.height, 1),
 			rx: 0,
-			fill: i ? Je : t.color ?? r.fill,
-			stroke: i ? Ye : r.stroke,
+			fill: i ? pt : t.color ?? r.fill,
+			stroke: i ? mt : r.stroke,
 			"stroke-width": 1.5,
-			...i ? { "stroke-dasharray": Xe } : {}
+			...i ? { "stroke-dasharray": ht } : {}
 		});
-		if (Qe(e) && o.setAttribute("filter", `url(#${Ze})`), f(a, o), i) return o;
-		if (n === "note" ? it(a, t) : tt(a, t), I(n) && this.viewOptions.typeCaptionsVisible()) {
-			let e = H(w[n].label, t.width / 2, t.height - qe, {
+		if (_t(e) && o.setAttribute("filter", `url(#${gt})`), f(a, o), i) return o;
+		if (n === "note" ? Ct(a, t) : bt(a, t), C(n) && this.viewOptions.typeCaptionsVisible()) {
+			let e = H(O[n].label, t.width / 2, t.height - ft, {
 				"text-anchor": "middle",
-				"font-size": We,
-				fill: Ke
+				"font-size": lt,
+				fill: dt
 			});
-			e.setAttribute("class", Ue), e.setAttribute("font-weight", String(Ge)), f(a, e);
+			e.setAttribute("class", ct), e.setAttribute("font-weight", String(ut)), f(a, e);
 		}
 		return o;
 	}
 	drawConnection(e, t) {
-		let n = t, [r, i] = dt(n), a = p(m("polyline"), {
+		let n = t, [r, i] = At(n), a = p(m("polyline"), {
 			points: `${r.x},${r.y} ${i.x},${i.y}`,
 			fill: "none",
-			stroke: A.arrow,
+			stroke: P.arrow,
 			"stroke-width": 1.5,
 			"stroke-linecap": "round"
 		});
-		if (f(e, a), f(e, lt(r, i, A.arrow, 11, 5)), n.linkLabel) {
+		if (f(e, a), f(e, Ot(r, i, P.arrow, 11, 5)), n.linkLabel) {
 			let t = (r.x + i.x) / 2, a = (r.y + i.y) / 2;
 			f(e, H(n.linkLabel, t, a - 5, {
 				"text-anchor": "middle",
 				"font-size": 11,
 				"font-style": "italic",
-				fill: A.inkSoft
+				fill: P.inkSoft
 			}));
 		}
 		return a;
@@ -652,7 +859,7 @@ var $e = class extends d {
 		return t ? `M${t.x},${t.y}` + n.map((e) => `L${e.x},${e.y}`).join("") : "";
 	}
 };
-function et(e, t) {
+function yt(e, t) {
 	let n = e.split(/\s+/).filter((e) => e.length);
 	if (!n.length) return [""];
 	let r = [], i = "";
@@ -669,25 +876,25 @@ function et(e, t) {
 	}
 	return r.push(i), r;
 }
-function tt(e, t) {
-	let n = t.width - 16, r = Math.max(1, Math.floor(n / D)), i = Math.max(1, Math.floor((t.height - 16) / 17)), a = (t.eventStormingLabel ?? "").split("\n").flatMap((e) => et(e, r)).slice(0, i), o = t.width / 2, s = t.height / 2 - (a.length - 1) * 17 / 2 + 4;
+function bt(e, t) {
+	let n = t.width - 16, r = Math.max(1, Math.floor(n / j)), i = Math.max(1, Math.floor((t.height - 16) / 17)), a = (t.eventStormingLabel ?? "").split("\n").flatMap((e) => yt(e, r)).slice(0, i), o = t.width / 2, s = t.height / 2 - (a.length - 1) * 17 / 2 + 4;
 	a.forEach((t, n) => {
 		f(e, H(t, o, s + n * 17, {
 			"text-anchor": "middle",
-			fill: A.stickyText
+			fill: P.stickyText
 		}));
 	});
 }
-var nt = 2, rt = 12.5;
-function it(e, t) {
-	let n = t.width - 16, r = Math.max(1, Math.floor(n / D)), i = Math.max(1, Math.floor((t.height - 16) / 17)), a = C(t.eventStormingLabel ?? "").flatMap((e) => at(e, r)).slice(0, i), o = t.alignHorizontal ?? "left", s = t.alignVertical ?? "top", c = o === "left" ? "start" : o === "center" ? "middle" : "end", l = a.length * 17, u = s === "top" ? 8 : s === "middle" ? (t.height - l) / 2 : t.height - 8 - l;
+var xt = 2, St = 12.5;
+function Ct(e, t) {
+	let n = t.width - 16, r = Math.max(1, Math.floor(n / j)), i = Math.max(1, Math.floor((t.height - 16) / 17)), a = D(t.eventStormingLabel ?? "").flatMap((e) => wt(e, r)).slice(0, i), o = t.alignHorizontal ?? "left", s = t.alignVertical ?? "top", c = o === "left" ? "start" : o === "center" ? "middle" : "end", l = a.length * 17, u = s === "top" ? 8 : s === "middle" ? (t.height - l) / 2 : t.height - 8 - l;
 	a.forEach((n, r) => {
 		let i = o === "left" ? 8 + (n.indent ? 12 : 0) : o === "center" ? t.width / 2 : t.width - 8, a = p(m("text"), {
 			x: i,
-			y: u + r * 17 + rt,
-			"font-family": M.family,
-			"font-size": M.label,
-			fill: A.stickyText,
+			y: u + r * 17 + St,
+			"font-family": I.family,
+			"font-size": I.label,
+			fill: P.stickyText,
 			"text-anchor": c
 		}), s = n.marker ? [{
 			text: "• ",
@@ -701,19 +908,19 @@ function it(e, t) {
 		f(e, a);
 	});
 }
-function at(e, t) {
-	let n = Math.max(1, t - (e.bullet ? nt : 0));
-	return ot(e.runs, n).map((t, n) => ({
+function wt(e, t) {
+	let n = Math.max(1, t - (e.bullet ? xt : 0));
+	return Tt(e.runs, n).map((t, n) => ({
 		runs: t,
 		marker: e.bullet && n === 0,
 		indent: e.bullet && n > 0
 	}));
 }
-function ot(e, t) {
+function Tt(e, t) {
 	let n = e.map((e) => e.text).join("");
-	return n.length <= t ? [e] : st(n, t).map(([t, n]) => ct(e, t, n));
+	return n.length <= t ? [e] : Et(n, t).map(([t, n]) => Dt(e, t, n));
 }
-function st(e, t) {
+function Et(e, t) {
 	let n = [...e.matchAll(/\S+/g)];
 	if (!n.length) return [[0, 0]];
 	let r = [], i = -1, a = -1, o = () => {
@@ -724,17 +931,11 @@ function st(e, t) {
 		if (e[0].length > t) {
 			for (o(); s - n > t;) r.push([n, n + t]), n += t;
 			i = n, a = s;
-			continue;
-		}
-		if (i < 0 || s - i <= t) {
-			i < 0 && (i = n), a = s;
-			continue;
-		}
-		o(), i = n, a = s;
+		} else i < 0 || s - i <= t ? (i < 0 && (i = n), a = s) : (o(), i = n, a = s);
 	}
 	return o(), r;
 }
-function ct(e, t, n) {
+function Dt(e, t, n) {
 	let r = [], i = 0;
 	for (let a of e) {
 		let e = i;
@@ -752,14 +953,14 @@ function H(e, t, n, r = {}) {
 	let i = p(m("text"), {
 		x: t,
 		y: n,
-		"font-family": M.family,
-		"font-size": M.label,
-		fill: A.ink,
+		"font-family": I.family,
+		"font-size": I.label,
+		fill: P.ink,
 		...r
 	});
 	return i.textContent = e, i;
 }
-function lt(e, t, n, r = 10, i = 5) {
+function Ot(e, t, n, r = 10, i = 5) {
 	let a = Math.atan2(t.y - e.y, t.x - e.x), o = t.x - r * Math.cos(a), s = t.y - r * Math.sin(a), c = `${t.x},${t.y} ${o - i * Math.sin(a)},${s + i * Math.cos(a)} ${o + i * Math.sin(a)},${s - i * Math.cos(a)}`;
 	return p(m("polygon"), {
 		points: c,
@@ -772,7 +973,7 @@ function U(e) {
 		y: e.y + e.height / 2
 	};
 }
-function ut(e, t) {
+function kt(e, t) {
 	let n = U(e), r = t.x - n.x, i = t.y - n.y;
 	if (r === 0 && i === 0) return n;
 	let a = e.width / 2 + 2, o = e.height / 2 + 2, s = Math.min(r === 0 ? Infinity : a / Math.abs(r), i === 0 ? Infinity : o / Math.abs(i));
@@ -781,7 +982,7 @@ function ut(e, t) {
 		y: n.y + i * s
 	};
 }
-function dt(e) {
+function At(e) {
 	let t = e.source, n = e.target, r = e.waypoints;
 	if (!t || !n) {
 		let e = r[0] ?? {
@@ -790,32 +991,34 @@ function dt(e) {
 		};
 		return [e, r[r.length - 1] ?? e];
 	}
-	let i = U(t), a = U(n), o = ut(t, a), s = ut(n, i);
+	let i = U(t), a = U(n), o = kt(t, a), s = kt(n, i);
 	return (a.x - i.x) * (s.x - o.x) + (a.y - i.y) * (s.y - o.y) <= 0 ? [i, a] : [o, s];
 }
 //#endregion
 //#region src/draw/index.ts
-var ft = {
+var jt = {
 	__depends__: [V],
 	__init__: ["eventStormingRenderer"],
-	eventStormingRenderer: ["type", $e]
-}, pt = { drawing: 0 }, mt = class {
+	eventStormingRenderer: ["type", vt]
+}, Mt = { drawing: 0 }, Nt = .001, Pt = class {
 	canvas;
 	elementFactory;
 	factory;
 	boardBounds;
 	eventBus;
 	elementRegistry;
+	config;
 	static $inject = [
 		"canvas",
 		"elementFactory",
 		"eventStormingElementFactory",
 		"boardBounds",
 		"eventBus",
-		"elementRegistry"
+		"elementRegistry",
+		"config.eventStormingImporter"
 	];
-	constructor(e, t, n, r, i, a) {
-		this.canvas = e, this.elementFactory = t, this.factory = n, this.boardBounds = r, this.eventBus = i, this.elementRegistry = a;
+	constructor(e, t, n, r, i, a, o) {
+		this.canvas = e, this.elementFactory = t, this.factory = n, this.boardBounds = r, this.eventBus = i, this.elementRegistry = a, this.config = o;
 	}
 	import(e) {
 		let t = [];
@@ -823,49 +1026,59 @@ var ft = {
 		let n = {
 			config: e.config,
 			...e.rawPassthrough ? { rawPassthrough: e.rawPassthrough } : {}
-		}, r;
-		try {
-			r = this.canvas.getRootElement();
-		} catch {
-			r = void 0;
-		}
-		let i;
-		r && r.id === "event-storming-root" ? i = r : (i = this.elementFactory.createRoot({ id: De }), this.canvas.setRootElement(i)), i.businessObject = n;
-		let a = /* @__PURE__ */ new Map(), o = [...e.elements].sort((e, t) => (pt[e.elementType] ?? 9) - (pt[t.elementType] ?? 9)), s = o.filter((e) => e.elementType === "drawing"), c = o.filter((e) => e.elementType !== "drawing");
-		for (let e of s) {
+		}, r = this.boardRoot();
+		r.businessObject = n;
+		let i = /* @__PURE__ */ new Map(), a = [...e.elements].sort((e, t) => (Mt[e.elementType] ?? 9) - (Mt[t.elementType] ?? 9)), o = a.filter((e) => e.elementType === "drawing"), s = a.filter((e) => e.elementType !== "drawing");
+		for (let e of o) {
 			let t = this.createShape(e);
-			this.canvas.addShape(t, i), a.set(e.id, t);
+			this.canvas.addShape(t, r), i.set(e.id, t);
 		}
-		for (let e of c) {
+		for (let e of s) {
 			let t = this.createShape(e);
-			this.canvas.addShape(t, i), a.set(e.id, t);
+			this.canvas.addShape(t, r), i.set(e.id, t);
 		}
-		for (let e of c) {
+		for (let e of s) {
 			let n = "attachedTo" in e ? e.attachedTo : void 0;
 			if (!n) continue;
-			let r = a.get(n);
-			if (!r || !z(r)) {
-				t.push({
-					message: `Element ${e.id}: attachedTo host "${n}" missing.`,
-					elementId: e.id
-				});
-				continue;
-			}
-			a.get(e.id).host = r;
+			let r = i.get(n);
+			!r || !De(r) ? t.push({
+				message: `“${e.id}” is pinned to “${n}”, which isn't on the board or can't hold a pin. It stays unpinned.`,
+				elementId: e.id
+			}) : i.get(e.id).host = r;
 		}
 		for (let n of e.edges) {
-			let e = a.get(n.from), r = a.get(n.to);
-			if (!e || !r) {
+			let e = i.get(n.from), a = i.get(n.to);
+			if (!e || !a) {
 				t.push({
-					message: `Edge ${n.id}: endpoint missing.`,
+					message: `The arrow “${n.id}” has an end that isn't on the board, so it was left out.`,
 					elementId: n.id
 				});
 				continue;
 			}
-			let o = this.factory.createArrow(n, e, r);
-			this.canvas.addConnection(o, i, s.length);
+			let s = this.factory.createArrow(n, e, a);
+			this.canvas.addConnection(s, r, o.length);
 		}
-		return this.canvas.viewbox(this.boardBounds.contentBounds()), this.eventBus.fire("import.render.done", { warnings: t }), t;
+		return this.config?.fitOnImport !== !1 && this.fitToContent(), this.eventBus.fire("import.render.done", { warnings: t }), t;
+	}
+	boardRoot() {
+		let e = this.elementRegistry.get(y);
+		e || (e = this.elementFactory.createRoot({ id: y }), this.canvas.setRootElement(e));
+		for (let t of this.canvas.getRootElements()) t !== e && this.canvas.removeRootElement(t);
+		return e;
+	}
+	fitToContent() {
+		let e = this.boardBounds.contentBounds(), { width: t, height: n } = this.canvas.getSize();
+		if (!(t > 0 && n > 0)) {
+			this.canvas.viewbox(e);
+			return;
+		}
+		let r = this.boardBounds.isEmpty() ? 1 : Math.max(Math.min(t / e.width, n / e.height, 1), Nt);
+		this.canvas.viewbox({
+			x: e.x + e.width / 2 - t / 2 / r,
+			y: e.y + e.height / 2 - n / 2 / r,
+			width: t / r,
+			height: n / r
+		});
 	}
 	createShape(e) {
 		switch (e.elementType) {
@@ -875,31 +1088,32 @@ var ft = {
 		}
 	}
 	clear() {
-		for (let e of [...this.elementRegistry.getAll()]) {
-			let t = e;
-			if (t.id !== "event-storming-root") try {
-				t.waypoints ? this.canvas.removeConnection(t.id) : this.canvas.removeShape(t.id);
+		let e = new Set(this.canvas.getRootElements());
+		for (let t of [...this.elementRegistry.getAll()]) {
+			if (e.has(t)) continue;
+			let n = t;
+			try {
+				n.waypoints ? this.canvas.removeConnection(n.id) : this.canvas.removeShape(n.id);
 			} catch {}
 		}
 	}
-}, ht = class {
+}, Ft = class {
 	elementRegistry;
-	canvas;
-	static $inject = ["elementRegistry", "canvas"];
-	constructor(e, t) {
-		this.elementRegistry = e, this.canvas = t;
+	static $inject = ["elementRegistry"];
+	constructor(e) {
+		this.elementRegistry = e;
 	}
 	export() {
-		let e = this.canvas.getRootElement().businessObject, t = e?.config ?? { title: "Untitled Board" }, n = [], r = [];
+		let e = this.elementRegistry.get(y)?.businessObject, t = e?.config ?? { title: "Untitled Board" }, n = [], r = [];
 		for (let e of this.elementRegistry.getAll()) if (e.id !== "event-storming-root") {
-			if (P(e)) r.push({
+			if (x(e)) r.push({
 				id: e.id,
 				edgeType: "arrow",
 				from: e.source?.id ?? "",
 				to: e.target?.id ?? "",
 				...e.linkLabel ? { label: e.linkLabel } : {}
 			});
-			else if (N(e)) {
+			else if (b(e)) {
 				let t = this.buildElement(e);
 				t && n.push(t);
 			}
@@ -930,10 +1144,10 @@ var ft = {
 				...e.color ? { color: e.color } : {}
 			};
 		}
-		let t = e.eventStormingType === "note" && k(e.eventStormingLabel, e) ? {
+		let t = e.eventStormingType === "note" && N(e.eventStormingLabel, e) ? {
 			width: e.width,
 			height: e.height
-		} : void 0, n = e.eventStormingType === "note" ? gt(e) : void 0;
+		} : void 0, n = e.eventStormingType === "note" ? It(e) : void 0;
 		return {
 			id: e.id,
 			elementType: e.eventStormingType,
@@ -949,7 +1163,7 @@ var ft = {
 		};
 	}
 };
-function gt(e) {
+function It(e) {
 	let t = e.alignHorizontal && e.alignHorizontal !== "left" ? e.alignHorizontal : void 0, n = e.alignVertical && e.alignVertical !== "top" ? e.alignVertical : void 0;
 	if (t || n) return {
 		...t ? { horizontal: t } : {},
@@ -957,58 +1171,63 @@ function gt(e) {
 	};
 }
 //#endregion
+//#region src/io/warnings.ts
+function Lt(e) {
+	return e.source === void 0 ? e.message : `${e.message} (“${e.source}”)`;
+}
+//#endregion
 //#region src/io/index.ts
-var _t = {
-	eventStormingImporter: ["type", mt],
-	eventStormingExporter: ["type", ht]
-}, vt = class extends ye {
+var Rt = {
+	eventStormingImporter: ["type", Pt],
+	eventStormingExporter: ["type", Ft]
+}, zt = class extends qe {
 	_getModules() {
 		return [
-			Fe,
-			Re,
+			et,
+			rt,
 			V,
-			ft,
-			_t
+			jt,
+			Rt
 		];
 	}
-}, yt = class extends vt {
+}, W = class extends zt {
 	_getModules() {
 		return [
 			...super._getModules(),
 			g,
 			_,
 			v,
-			y
+			ee
 		];
 	}
-}, bt = class extends ce {
+}, Bt = class extends de {
 	static $inject = ["eventBus", "modeling"];
 	constructor(e, t) {
 		super(e), this.preExecute("element.updateProperties", (e) => {
 			let { element: n, properties: r } = e.context, i = r.eventStormingType;
 			if (typeof i != "string") return;
 			let a = n;
-			if (a.host && !ke(i) && t.updateAttachment(a, void 0), a.attachers?.length && !R(i)) for (let e of [...a.attachers]) t.updateAttachment(e, void 0);
+			if (a.host && !we(i) && t.updateAttachment(a, void 0), a.attachers?.length && !Te(i)) for (let e of [...a.attachers]) t.updateAttachment(e, void 0);
 		});
 	}
-}, xt = {
-	__depends__: [se],
+}, Vt = {
+	__depends__: [ue],
 	__init__: ["eventStormingAttachBehavior"],
-	eventStormingAttachBehavior: ["type", bt]
+	eventStormingAttachBehavior: ["type", Bt]
 };
 //#endregion
 //#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function St(e, t, n) {
+function Ht(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var Ct = [
+var Ut = [
 	"x",
 	"y",
 	"width",
 	"height"
 ];
-function wt(e, t) {
-	if (!t.some((e) => Ct.includes(e))) return [e];
+function Wt(e, t) {
+	if (!t.some((e) => Ut.includes(e))) return [e];
 	let n = e;
 	return [
 		e,
@@ -1016,18 +1235,18 @@ function wt(e, t) {
 		...n.outgoing ?? []
 	];
 }
-var Tt = class {
+var Gt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], St(r, e, n[e]);
-		return e.oldProperties = i, wt(t, Object.keys(n));
+		for (let e of Object.keys(n)) i[e] = r[e], Ht(r, e, n[e]);
+		return e.oldProperties = i, Wt(t, Object.keys(n));
 	}
 	revert(e) {
 		let { element: t, oldProperties: n } = e, r = t;
-		if (n) for (let e of Object.keys(n)) St(r, e, n[e]);
-		return wt(t, Object.keys(n ?? {}));
+		if (n) for (let e of Object.keys(n)) Ht(r, e, n[e]);
+		return Wt(t, Object.keys(n ?? {}));
 	}
-}, W = "element.updateProperties", Et = class {
+}, Kt = "element.updateProperties", qt = class {
 	commandStack;
 	canvas;
 	elementRegistry;
@@ -1037,17 +1256,17 @@ var Tt = class {
 		"elementRegistry"
 	];
 	constructor(e, t, n) {
-		this.commandStack = e, this.canvas = t, this.elementRegistry = n, e.registerHandler(W, Tt);
+		this.commandStack = e, this.canvas = t, this.elementRegistry = n, e.registerHandler(Kt, Gt);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(W, {
+		this.commandStack.execute(Kt, {
 			element: e,
 			properties: t
 		});
 	}
 	updateLabel(e, t) {
-		if (e.eventStormingType === "note" && !k(e.eventStormingLabel, e)) {
-			let { width: n, height: r } = O(t), i = e.x + e.width / 2, a = e.y + e.height / 2;
+		if (e.eventStormingType === "note" && !N(e.eventStormingLabel, e)) {
+			let { width: n, height: r } = M(t), i = e.x + e.width / 2, a = e.y + e.height / 2;
 			this.updateProperties(e, {
 				eventStormingLabel: t,
 				width: n,
@@ -1055,14 +1274,12 @@ var Tt = class {
 				x: i - n / 2,
 				y: a - r / 2
 			});
-			return;
-		}
-		this.updateProperties(e, { eventStormingLabel: t });
+		} else this.updateProperties(e, { eventStormingLabel: t });
 	}
 	setStickyKind(e, t) {
-		if (!I(e.eventStormingType) || !I(t)) throw Error("setStickyKind: only sticky kinds can be retyped");
+		if (!C(e.eventStormingType) || !C(t)) throw Error("setStickyKind: only sticky kinds can be retyped");
 		if (e.eventStormingType === t && !e.provisional) return;
-		let { width: n, height: r } = w[t], i = e.x + e.width / 2, a = e.y + e.height / 2;
+		let { width: n, height: r } = O[t], i = e.x + e.width / 2, a = e.y + e.height / 2;
 		this.updateProperties(e, {
 			eventStormingType: t,
 			...e.provisional ? { provisional: void 0 } : {},
@@ -1084,7 +1301,7 @@ var Tt = class {
 	setLevel(e) {
 		if (this.getLevel() === e) return;
 		let t = this.root(), n = t.businessObject ?? { config: { title: "Untitled Board" } };
-		this.commandStack.execute(W, {
+		this.commandStack.execute(Kt, {
 			element: t,
 			properties: { businessObject: {
 				...n,
@@ -1098,7 +1315,7 @@ var Tt = class {
 	root() {
 		return this.elementRegistry.get("event-storming-root") ?? this.canvas.getRootElement();
 	}
-}, Dt = 24, Ot = [
+}, Jt = 24, Yt = [
 	"eventStormingType",
 	"color",
 	"drawingPoints",
@@ -1106,8 +1323,8 @@ var Tt = class {
 	"strokeStyle",
 	"alignHorizontal",
 	"alignVertical"
-], kt = ["eventStormingType", "linkLabel"];
-function At(e, t) {
+], Xt = ["eventStormingType", "linkLabel"];
+function Zt(e, t) {
 	let n = {};
 	for (let r of t) {
 		let t = e[r];
@@ -1115,7 +1332,7 @@ function At(e, t) {
 	}
 	return n;
 }
-var jt = class {
+var Qt = class {
 	selection;
 	modeling;
 	elementFactory;
@@ -1138,23 +1355,23 @@ var jt = class {
 		this.selection = e, this.modeling = t, this.elementFactory = n, this.esFactory = r, this.canvas = i, this.create = a, this.mouse = o;
 	}
 	copy() {
-		let e = this.selection.get().filter((e) => N(e));
+		let e = this.selection.get().filter((e) => b(e));
 		if (!e.length) return !1;
 		let t = new Map(e.map((e, t) => [e, t])), n = [], r = /* @__PURE__ */ new Set();
 		for (let i of e) for (let e of [...i.incoming ?? [], ...i.outgoing ?? []]) {
-			if (!P(e) || r.has(e)) continue;
+			if (!x(e) || r.has(e)) continue;
 			let i = t.get(e.source), a = t.get(e.target);
 			i !== void 0 && a !== void 0 && (r.add(e), n.push({
 				sourceIdx: i,
 				targetIdx: a,
-				props: At(e, kt)
+				props: Zt(e, Xt)
 			}));
 		}
 		return this.clipboard = {
 			shapes: e.map((e) => {
 				let n = e.host ? t.get(e.host) : void 0;
 				return {
-					props: At(e, Ot),
+					props: Zt(e, Yt),
 					x: e.x,
 					y: e.y,
 					width: e.width,
@@ -1195,26 +1412,26 @@ var jt = class {
 				...structuredClone(e.props),
 				source: n[e.sourceIdx],
 				target: n[e.targetIdx],
-				waypoints: [Mt(n[e.sourceIdx]), Mt(n[e.targetIdx])]
+				waypoints: [$t(n[e.sourceIdx]), $t(n[e.targetIdx])]
 			}))
 		};
 	}
 	insertWithOffset(e) {
 		this.pasteCount++;
-		let t = Dt * this.pasteCount, n = Nt(e.shapes), r = this.modeling.createElements([...e.shapes, ...e.connections], {
+		let t = Jt * this.pasteCount, n = en(e.shapes), r = this.modeling.createElements([...e.shapes, ...e.connections], {
 			x: n.cx + t,
 			y: n.cy + t
 		}, this.canvas.getRootElement());
 		return this.selection.select(r), !0;
 	}
 };
-function Mt(e) {
+function $t(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
-function Nt(e) {
+function en(e) {
 	let t = Math.min(...e.map((e) => e.x)), n = Math.min(...e.map((e) => e.y)), r = Math.max(...e.map((e) => e.x + e.width)), i = Math.max(...e.map((e) => e.y + e.height));
 	return {
 		cx: (t + r) / 2,
@@ -1223,13 +1440,13 @@ function Nt(e) {
 }
 //#endregion
 //#region src/modeling/index.ts
-var Pt = {
-	__depends__: [le, ee],
+var tn = {
+	__depends__: [fe, re],
 	__init__: ["eventStormingModeling"],
-	eventStormingModeling: ["type", Et],
-	eventStormingCopyPaste: ["type", jt]
-}, Ft = {
-	__depends__: [ue],
+	eventStormingModeling: ["type", qt],
+	eventStormingCopyPaste: ["type", Qt]
+}, nn = {
+	__depends__: [pe],
 	__init__: ["eventStormingLassoBehavior"],
 	eventStormingLassoBehavior: ["type", class {
 		static $inject = [
@@ -1254,207 +1471,75 @@ var Pt = {
 };
 //#endregion
 //#region src/rules/EventStormingRules.ts
-function It(e, t) {
+function rn(e, t) {
 	return (e.outgoing ?? []).some((e) => e.target === t);
 }
-function Lt(e, t) {
-	return e.length !== 1 || !Ae(e[0]) || !z(t) ? !1 : "attach";
+function an(e, t) {
+	return e.length !== 1 || !Ee(e[0]) || !De(t) ? !1 : "attach";
 }
-var Rt = class extends de {
-	static $inject = ["eventBus"];
-	constructor(e) {
-		super(e);
-	}
-	init() {
-		this.addRule("connection.start", (e) => L(e.source)), this.addRule("connection.create", (e) => {
-			let { source: t, target: n } = e;
-			return !L(t) || !L(n) || t === n || It(t, n) ? !1 : { eventStormingType: "arrow" };
-		}), this.addRule(["shape.move", "elements.move"], (e) => Lt(e.shapes ?? (e.shape ? [e.shape] : []), e.target) || !0), this.addRule("shape.create", () => !0), this.addRule("elements.create", () => !0), this.addRule("shape.resize", (e) => {
-			if (!je(e.shape)) return !1;
-			let { newBounds: t } = e;
-			return !t || t.width >= E.width && t.height >= E.height;
-		});
-	}
-}, zt = {
-	__init__: ["eventStormingRules"],
-	eventStormingRules: ["type", Rt]
-}, Bt = 8, Vt = {
-	__init__: ["elementSnapping"],
-	elementSnapping: ["type", class {
-		static $inject = ["eventBus", "elementRegistry"];
-		constructor(e, t) {
-			let n = (e) => t.getAll().filter((t) => N(t) && t.eventStormingType !== "drawing" && !e.has(t.id)).map((e) => ({
-				x: e.x + e.width / 2,
-				y: e.y + e.height / 2
-			})), r = (e, t) => {
-				let n, r = 9;
-				for (let i of t) {
-					let t = Math.abs(i - e);
-					t <= Bt && t < r && (n = i, r = t);
-				}
-				return n;
-			};
-			e.on(["shape.move.move", "shape.move.end"], 1500, (e) => {
-				if (e.originalEvent?.shiftKey || typeof e.x != "number" || typeof e.dx != "number" || typeof e.y != "number" || typeof e.dy != "number") return;
-				let t = e.context?.shape;
-				if (!t) return;
-				let i = new Set((e.context?.shapes ?? [t]).map((e) => e.id ?? "").filter(Boolean)), a = n(i), o = t.x + t.width / 2 + e.dx, s = t.y + t.height / 2 + e.dy, c = r(o, a.map((e) => e.x));
-				if (c !== void 0) {
-					let t = c - o;
-					e.dx += t, e.x += t;
-				}
-				let l = r(s, a.map((e) => e.y));
-				if (l !== void 0) {
-					let t = l - s;
-					e.dy += t, e.y += t;
-				}
-			}), e.on(["create.move", "create.end"], 1500, (e) => {
-				if (e.originalEvent?.shiftKey) return;
-				let t = n(/* @__PURE__ */ new Set());
-				if (typeof e.x == "number") {
-					let n = r(e.x, t.map((e) => e.x));
-					n !== void 0 && (typeof e.dx == "number" && (e.dx += n - e.x), e.x = n);
-				}
-				if (typeof e.y == "number") {
-					let n = r(e.y, t.map((e) => e.y));
-					n !== void 0 && (typeof e.dy == "number" && (e.dy += n - e.y), e.y = n);
-				}
-			});
-		}
-	}]
-}, G = (e) => `<svg width="24" height="24" viewBox="0 0 24 24" class="event-storming-palette-svg">${e}</svg>`, Ht = (e, t, n = 0) => G(`<rect x="4" y="5" width="16" height="14" fill="${e}" stroke="${t}" stroke-width="1.5"${n ? ` transform="rotate(${n} 12 12)"` : ""}/>`), K = {
-	draw: G(`<polyline points="3,18 8.5,7 14,14 21,4" fill="none" stroke="${A.ink}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="3" cy="18" r="2.2" fill="${A.surface}" stroke="${A.ink}" stroke-width="1.4"/>`),
-	lasso: G(`<rect x="3" y="3" width="13" height="13" rx="2" fill="none" stroke="${A.ink}" stroke-width="1.5" stroke-dasharray="3 2.5"/><path d="M13.5 13.5l7 2.7-3 1.3-1.3 3z" fill="${A.ink}"/>`),
-	note: Ht(T.fill, T.stroke)
-};
-for (let e of F) {
-	let t = w[e];
-	K[e] = Ht(t.fill, t.stroke, e === "hotspot" ? -6 : 0);
-}
-function Ut(e, t) {
-	return `<svg width="14" height="14" viewBox="0 0 14 14" class="event-storming-palette-svg"><rect x="1" y="1" width="12" height="12" fill="${e}" stroke="${t}" stroke-width="1"/></svg>`;
-}
-//#endregion
-//#region src/palette/EventStormingPaletteProvider.ts
-var q = "stickies-1", J = "stickies-2", Wt = "stickies-3", Gt = [
-	{
-		key: "event",
-		type: "event",
-		label: w.event.label,
-		title: "Domain Event — E",
-		group: q
-	},
-	{
-		key: "command",
-		type: "command",
-		label: w.command.label,
-		title: "Command — C",
-		group: q
-	},
-	{
-		key: "actor",
-		type: "actor",
-		label: w.actor.label,
-		title: "Actor",
-		group: q
-	},
-	{
-		key: "aggregate",
-		type: "aggregate",
-		label: w.aggregate.label,
-		title: "Aggregate",
-		group: q
-	},
-	{
-		key: "policy",
-		type: "policy",
-		label: w.policy.label,
-		title: "Policy",
-		group: J
-	},
-	{
-		key: "readmodel",
-		type: "readmodel",
-		label: w.readmodel.label,
-		title: "Read Model",
-		group: J
-	},
-	{
-		key: "external",
-		type: "external",
-		label: w.external.label,
-		title: "External System",
-		group: J
-	},
-	{
-		key: "hotspot",
-		type: "hotspot",
-		label: w.hotspot.label,
-		title: "Hotspot",
-		group: Wt
-	},
-	{
-		key: "note",
-		type: "note",
-		label: T.label,
-		title: "Note",
-		group: Wt
+var on = class extends me {
+	static $inject = ["eventBus"];
+	constructor(e) {
+		super(e);
 	}
-], Kt = class {
-	create;
-	factory;
-	lassoTool;
-	drawTool;
-	eventStormingModeling;
-	static $inject = [
-		"palette",
-		"create",
-		"eventStormingElementFactory",
-		"lassoTool",
-		"eventStormingDrawTool",
-		"eventStormingModeling",
-		"eventBus"
-	];
-	constructor(e, t, n, r, i, a, o) {
-		this.create = t, this.factory = n, this.lassoTool = r, this.drawTool = i, this.eventStormingModeling = a, e.registerProvider(this);
-		let s = () => e._rebuild();
-		o.on("import.done", s), o.on(["commandStack.element.updateProperties.postExecuted", "commandStack.element.updateProperties.reverted"], (e) => {
-			e.context.element.id === "event-storming-root" && s();
+	init() {
+		this.addRule("connection.start", (e) => w(e.source)), this.addRule("connection.create", (e) => {
+			let { source: t, target: n } = e;
+			return !w(t) || !w(n) || t === n || rn(t, n) ? !1 : { eventStormingType: "arrow" };
+		}), this.addRule(["shape.move", "elements.move"], (e) => an(e.shapes ?? (e.shape ? [e.shape] : []), e.target) || !0), this.addRule("shape.create", () => !0), this.addRule("elements.create", () => !0), this.addRule("shape.resize", (e) => {
+			if (!Oe(e.shape)) return !1;
+			let { newBounds: t } = e;
+			return !t || t.width >= A.width && t.height >= A.height;
 		});
 	}
-	getPaletteEntries() {
-		let e = {};
-		e["lasso-tool"] = {
-			group: "tools",
-			title: "Selection tool — L (or Shift+drag)",
-			html: `<div class="entry event-storming-palette-entry">${K.lasso}</div>`,
-			action: { click: (e) => this.lassoTool.activateSelection(e) }
-		}, e["draw-tool"] = {
-			group: "tools",
-			title: "Draw — click point by point, double-click/Enter finishes, click the start point to close",
-			html: `<div class="entry event-storming-palette-entry">${K.draw}</div>`,
-			action: { click: () => this.drawTool.toggle() }
-		};
-		let t = c[this.eventStormingModeling.getLevel()];
-		for (let n of Gt) {
-			if (n.type !== "note" && !t.includes(n.type)) continue;
-			let r = (e) => {
-				let t = this.factory.createNew(n.type, n.label);
-				this.create.start(e, t);
-			};
-			e[`create.${n.key}`] = {
-				group: n.group,
-				title: n.title,
-				html: `<div class="entry event-storming-palette-entry" draggable="true">${K[n.key]}</div>`,
-				action: {
-					dragstart: r,
-					click: r
+}, sn = {
+	__init__: ["eventStormingRules"],
+	eventStormingRules: ["type", on]
+}, cn = 8, ln = {
+	__init__: ["elementSnapping"],
+	elementSnapping: ["type", class {
+		static $inject = ["eventBus", "elementRegistry"];
+		constructor(e, t) {
+			let n = (e) => t.getAll().filter((t) => b(t) && t.eventStormingType !== "drawing" && !e.has(t.id)).map((e) => ({
+				x: e.x + e.width / 2,
+				y: e.y + e.height / 2
+			})), r = (e, t) => {
+				let n, r = 9;
+				for (let i of t) {
+					let t = Math.abs(i - e);
+					t <= cn && t < r && (n = i, r = t);
 				}
+				return n;
 			};
+			e.on(["shape.move.move", "shape.move.end"], 1500, (e) => {
+				if (e.originalEvent?.shiftKey || typeof e.x != "number" || typeof e.dx != "number" || typeof e.y != "number" || typeof e.dy != "number") return;
+				let t = e.context?.shape;
+				if (!t) return;
+				let i = new Set((e.context?.shapes ?? [t]).map((e) => e.id ?? "").filter(Boolean)), a = n(i), o = t.x + t.width / 2 + e.dx, s = t.y + t.height / 2 + e.dy, c = r(o, a.map((e) => e.x));
+				if (c !== void 0) {
+					let t = c - o;
+					e.dx += t, e.x += t;
+				}
+				let l = r(s, a.map((e) => e.y));
+				if (l !== void 0) {
+					let t = l - s;
+					e.dy += t, e.y += t;
+				}
+			}), e.on(["create.move", "create.end"], 1500, (e) => {
+				if (e.originalEvent?.shiftKey) return;
+				let t = n(/* @__PURE__ */ new Set());
+				if (typeof e.x == "number") {
+					let n = r(e.x, t.map((e) => e.x));
+					n !== void 0 && (typeof e.dx == "number" && (e.dx += n - e.x), e.x = n);
+				}
+				if (typeof e.y == "number") {
+					let n = r(e.y, t.map((e) => e.y));
+					n !== void 0 && (typeof e.dy == "number" && (e.dy += n - e.y), e.y = n);
+				}
+			});
 		}
-		return e;
-	}
-}, qt = ".djs-palette-entries .entry", Jt = "bottom", Yt = class {
+	}]
+}, un = ".djs-palette-entries .entry", dn = "bottom", fn = class {
 	palette;
 	hoverTooltip;
 	static $inject = [
@@ -1469,9 +1554,9 @@ var q = "stickies-1", J = "stickies-2", Wt = "stickies-3", Gt = [
 	attachTo(e) {
 		this.refreshEntries(), this.hoverTooltip.add({
 			container: e,
-			selector: qt,
+			selector: un,
 			getContent: (e) => this.contentFor(e),
-			getPosition: (e) => Xt(e)
+			getPosition: (e) => pn(e)
 		});
 	}
 	refreshEntries() {
@@ -1479,70 +1564,121 @@ var q = "stickies-1", J = "stickies-2", Wt = "stickies-3", Gt = [
 	}
 	contentFor(e) {
 		let t = this.entries[e.getAttribute("data-action") ?? ""];
-		return t?.title ? pe`<${fe} title=${t.title} shortcut=${t.shortcut} />` : null;
+		return t?.title ? ge`<${he} title=${t.title} shortcut=${t.shortcut} />` : null;
 	}
 };
-function Xt(e) {
+function pn(e) {
 	let t = e.getBoundingClientRect();
 	return {
 		x: t.left + t.width / 2,
 		y: t.bottom + 8,
-		placement: Jt
+		placement: dn
 	};
 }
 //#endregion
 //#region src/palette/index.ts
-var Zt = {
+var mn = {
 	__init__: ["eventStormingPaletteProvider", "paletteTooltip"],
-	eventStormingPaletteProvider: ["type", Kt],
-	paletteTooltip: ["type", Yt]
-}, Y = "event-storming-element-settings", Qt = {
+	eventStormingPaletteProvider: ["type", Ue],
+	paletteTooltip: ["type", fn]
+}, G = "event-storming-element-settings", hn = {
 	id: "kind",
 	name: "Change type"
 };
-function $t(e, t) {
+function gn(e, t) {
 	return e ? `✓ ${t}` : t;
 }
-var en = class {
+var _n = class {
 	modeling;
 	static $inject = ["popupMenu", "eventStormingModeling"];
 	constructor(e, t) {
-		this.modeling = t, e.registerProvider(Y, this);
+		this.modeling = t, e.registerProvider(G, this);
 	}
 	getPopupMenuEntries(e) {
 		let t = Array.isArray(e) ? e[0] : e;
-		return L(t) ? this.kindEntries(t) : {};
+		return w(t) ? this.kindEntries(t) : {};
 	}
 	kindEntries(e) {
 		let t = {}, n = e.provisional === !0, r = c[this.modeling.getLevel()];
-		for (let i of F) {
+		for (let i of S) {
 			if (!r.includes(i) && (n || i !== e.eventStormingType)) continue;
-			let a = w[i];
+			let a = O[i];
 			t[`kind-${i}`] = {
-				label: n ? a.label : $t(e.eventStormingType === i, a.label),
-				imageHtml: Ut(a.fill, a.stroke),
-				group: Qt,
+				label: n ? a.label : gn(e.eventStormingType === i, a.label),
+				imageHtml: ze(a.fill, a.stroke),
+				group: hn,
 				action: () => this.modeling.setStickyKind(e, i)
 			};
 		}
 		return t;
 	}
-}, tn = {
+}, vn = {
 	__init__: ["eventStormingElementSettings"],
-	eventStormingElementSettings: ["type", en]
-}, nn = "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z", rn = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z", X = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z", Z = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", an = "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z", on = "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z", sn = "M4 7v2c0 .55-.45 1-1 1H2v2h1c.55 0 1 .45 1 1v2c0 1.65 1.35 3 3 3h1v-2H7c-.55 0-1-.45-1-1v-2c0-.84-.35-1.61-.92-2.18L4.85 12l.23-.82C5.65 10.61 6 9.84 6 9V7c0-.55.45-1 1-1h1V4H7C5.35 4 4 5.35 4 7zm16 3c-.55 0-1-.45-1-1V7c0-1.65-1.35-3-3-3h-1v2h1c.55 0 1 .45 1 1v2c0 .84.35 1.61.92 2.18l.23.82-.23.82c-.57.57-.92 1.34-.92 2.18v2c0 .55-.45 1-1 1h-1v2h1c1.65 0 3-1.35 3-3v-2c0-.55.45-1 1-1h1v-2h-1z", cn = "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z", ln = "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z", un = "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z", dn = "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z", fn = "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z", pn = "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z", mn = "M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.61-.23-1.2-.64-1.67-.08-.1-.13-.21-.13-.33 0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 8 6.5 8 8 8.67 8 9.5 7.33 11 6.5 11zm3-4C8.67 7 8 6.33 8 5.5S8.67 4 9.5 4s1.5.67 1.5 1.5S10.33 7 9.5 7zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 4 14.5 4s1.5.67 1.5 1.5S15.33 7 14.5 7zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 8 17.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z", hn = "M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z", gn = "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z", _n = "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", vn = "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", yn = "M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z", bn = "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z";
-function Q(e, t = 18) {
-	return `<svg viewBox="0 0 24 24" width="${t}" height="${t}" fill="currentColor" aria-hidden="true"><path d="${e}"/></svg>`;
+	eventStormingElementSettings: ["type", _n]
+}, K = "eventStorming.readOnly.changed", yn = 5e3, bn = [
+	"elements.move",
+	"shape.move",
+	"shape.resize",
+	"shape.create",
+	"elements.create",
+	"shape.append",
+	"shape.attach",
+	"connection.start",
+	"connection.create",
+	"connection.reconnect",
+	"connection.updateWaypoints",
+	"elements.delete"
+], xn = class extends me {
+	bus;
+	static $inject = ["eventBus"];
+	readOnly = !1;
+	constructor(e) {
+		super(e), this.bus = e;
+	}
+	init() {
+		this.addRule(bn, yn, () => !this.readOnly && void 0);
+	}
+	isReadOnly() {
+		return this.readOnly;
+	}
+	setReadOnly(e) {
+		this.readOnly !== e && (this.readOnly = e, this.bus.fire(K, { readOnly: e }));
+	}
+}, Sn = {
+	__depends__: [se],
+	__init__: ["eventStormingReadOnly"],
+	eventStormingReadOnly: ["type", xn]
+}, Cn = {
+	plus: "<path d=\"M5 12h14\"/><path d=\"M12 5v14\"/>",
+	"arrow-right": "<path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/>",
+	pencil: "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/><path d=\"m15 5 4 4\"/>",
+	trash: "<path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M3 6h18\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>",
+	replace: "<path d=\"M14 4a1 1 0 0 1 1-1\"/><path d=\"M15 10a1 1 0 0 1-1-1\"/><path d=\"M21 4a1 1 0 0 0-1-1\"/><path d=\"M21 9a1 1 0 0 1-1 1\"/><path d=\"m3 7 3 3 3-3\"/><path d=\"M6 10V5a2 2 0 0 1 2-2h2\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>",
+	palette: "<path d=\"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\"/><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>",
+	"line-style": "<path d=\"M11 5h2\"/><path d=\"M15 12h6\"/><path d=\"M19 5h2\"/><path d=\"M3 12h6\"/><path d=\"M3 19h18\"/><path d=\"M3 5h2\"/>",
+	bold: "<path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\"/>",
+	italic: "<line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\"/><line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\"/><line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\"/>",
+	list: "<path d=\"M3 5h.01\"/><path d=\"M3 12h.01\"/><path d=\"M3 19h.01\"/><path d=\"M8 5h13\"/><path d=\"M8 12h13\"/><path d=\"M8 19h13\"/>",
+	"text-align-start": "<path d=\"M21 5H3\"/><path d=\"M15 12H3\"/><path d=\"M17 19H3\"/>",
+	"text-align-center": "<path d=\"M21 5H3\"/><path d=\"M17 12H7\"/><path d=\"M19 19H5\"/>",
+	"text-align-end": "<path d=\"M21 5H3\"/><path d=\"M21 12H9\"/><path d=\"M21 19H7\"/>",
+	"align-vertical-justify-start": "<rect width=\"14\" height=\"6\" x=\"5\" y=\"16\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"6\" rx=\"2\"/><path d=\"M2 2h20\"/>",
+	"align-vertical-justify-center": "<rect width=\"14\" height=\"6\" x=\"5\" y=\"16\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"2\" rx=\"2\"/><path d=\"M2 12h20\"/>",
+	"align-vertical-justify-end": "<rect width=\"14\" height=\"6\" x=\"5\" y=\"12\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"2\" rx=\"2\"/><path d=\"M2 22h20\"/>",
+	x: "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>"
+};
+function q(e) {
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${Cn[e]}</svg>`;
 }
 //#endregion
 //#region src/context-pad/EventStormingContextPadProvider.ts
-var xn = "Append sticky (auto-connect, choose the type after placing)";
-function $(e, t, n = !1) {
-	return `<div class="entry event-storming-cp-entry"${n ? " draggable=\"true\"" : ""} title="${t}">${Q(e)}</div>`;
+var wn = "Append sticky (auto-connect, choose the type after placing)";
+function J(e, t, n = !1) {
+	return `<div class="entry event-storming-cp-entry"${n ? " draggable=\"true\"" : ""} title="${t}">${q(e)}</div>`;
 }
 //#endregion
 //#region src/context-pad/index.ts
-var Sn = {
+var Tn = {
 	__init__: ["eventStormingContextPadProvider"],
 	eventStormingContextPadProvider: ["type", class {
 		modeling;
@@ -1553,6 +1689,7 @@ var Sn = {
 		labelEditing;
 		factory;
 		colorPicker;
+		readOnly;
 		static $inject = [
 			"contextPad",
 			"modeling",
@@ -1562,40 +1699,45 @@ var Sn = {
 			"eventStormingModeling",
 			"eventStormingLabelEditing",
 			"eventStormingElementFactory",
-			"eventStormingColorPicker"
+			"eventStormingColorPicker",
+			"eventBus",
+			"eventStormingReadOnly"
 		];
-		constructor(e, t, n, r, i, a, o, s, c) {
-			this.modeling = t, this.connect = n, this.create = r, this.popupMenu = i, this.eventStormingModeling = a, this.labelEditing = o, this.factory = s, this.colorPicker = c, e.registerProvider(this);
+		constructor(e, t, n, r, i, a, o, s, c, l, u) {
+			this.modeling = t, this.connect = n, this.create = r, this.popupMenu = i, this.eventStormingModeling = a, this.labelEditing = o, this.factory = s, this.colorPicker = c, this.readOnly = u, e.registerProvider(this), l?.on(K, (t) => {
+				t.readOnly && e.close();
+			});
 		}
 		getContextPadEntries(e) {
-			if (P(e)) {
+			if (this.readOnly?.isReadOnly()) return {};
+			if (x(e)) {
 				let t = e;
 				return {
 					"edit-label": {
 						group: "edit",
 						title: "Edit arrow label",
-						html: $(X, "Edit arrow label"),
+						html: J("pencil", "Edit arrow label"),
 						action: { click: () => this.labelEditing.activateConnection(t) }
 					},
 					delete: {
-						group: "edit",
+						group: "delete",
 						title: "Delete connection",
-						html: $(Z, "Delete connection"),
+						html: J("trash", "Delete connection"),
 						action: { click: () => this.modeling.removeElements([e]) }
 					}
 				};
 			}
-			if (!N(e)) return {};
+			if (!b(e)) return {};
 			let t = e, n = {}, r = t.eventStormingType;
-			if (I(r)) {
+			if (C(r)) {
 				let e = (e) => {
 					let n = this.factory.createProvisional();
 					this.create.start(e, n, { source: t });
 				};
 				n.append = {
 					group: "append",
-					title: xn,
-					html: $(vn, xn, !0),
+					title: wn,
+					html: J("plus", wn, !0),
 					action: {
 						click: e,
 						dragstart: e
@@ -1607,18 +1749,18 @@ var Sn = {
 				n.connect = {
 					group: "edit",
 					title: "Connect to existing sticky",
-					html: $(rn, "Connect to existing sticky", !0),
+					html: J("arrow-right", "Connect to existing sticky", !0),
 					action: {
 						click: r,
 						dragstart: r
 					}
 				}, n["change-kind"] = {
-					group: "sticky",
+					group: "edit",
 					title: "Change type",
-					html: $(gn, "Change type"),
+					html: J("replace", "Change type"),
 					action: { click: (e) => {
 						let n = e;
-						this.popupMenu.open(t, Y, {
+						this.popupMenu.open(t, G, {
 							x: n.clientX,
 							y: n.clientY
 						});
@@ -1628,16 +1770,16 @@ var Sn = {
 			if (r === "drawing") {
 				let e = t.strokeStyle === "dashed" ? "dotted" : t.strokeStyle === "dotted" ? void 0 : "dashed", r = `Line style: ${t.strokeStyle ?? "solid"} (click to change)`;
 				n["stroke-style"] = {
-					group: "sticky",
+					group: "edit",
 					title: r,
-					html: $(hn, r),
+					html: J("line-style", r),
 					action: { click: () => this.eventStormingModeling.setStrokeStyle(t, e) }
 				};
 			}
 			return r === "drawing" && (n.color = {
-				group: "sticky",
+				group: "edit",
 				title: "Color",
-				html: $(mn, "Color"),
+				html: J("palette", "Color"),
 				action: { click: (e) => {
 					let n = e;
 					this.colorPicker.open(t, n.clientX, n.clientY);
@@ -1645,46 +1787,46 @@ var Sn = {
 			}), r !== "drawing" && (n["edit-label"] = {
 				group: "edit",
 				title: "Edit label",
-				html: $(X, "Edit label"),
+				html: J("pencil", "Edit label"),
 				action: { click: () => this.labelEditing.activate(t) }
 			}), n.delete = {
-				group: "edit",
+				group: "delete",
 				title: "Delete",
-				html: $(Z, "Delete"),
+				html: J("trash", "Delete"),
 				action: { click: () => this.modeling.removeElements([t]) }
 			}, n;
 		}
 	}]
-}, Cn = "bullet", wn = [
+}, En = "bullet", Dn = [
 	"left",
 	"center",
 	"right"
-], Tn = [
+], On = [
 	"top",
 	"middle",
 	"bottom"
 ];
-function En(e, t) {
+function kn(e, t) {
 	return e[(e.indexOf(t) + 1) % e.length];
 }
-function Dn(e, t) {
+function An(e, t) {
 	let n = e.ownerDocument;
 	e.textContent = "";
-	for (let r of C(t)) {
+	for (let r of D(t)) {
 		let t = n.createElement("div");
-		r.bullet && (t.className = Cn);
+		r.bullet && (t.className = En);
 		for (let e of r.runs) {
 			let r = n.createTextNode(e.text);
-			e.italic && (r = On(n, "i", r)), e.bold && (r = On(n, "b", r)), t.appendChild(r);
+			e.italic && (r = jn(n, "i", r)), e.bold && (r = jn(n, "b", r)), t.appendChild(r);
 		}
 		r.runs.length === 0 && t.appendChild(n.createElement("br")), e.appendChild(t);
 	}
 }
-function On(e, t, n) {
+function jn(e, t, n) {
 	let r = e.createElement(t);
 	return r.appendChild(n), r;
 }
-function kn(e) {
+function Mn(e) {
 	let t = [], n = null, r = (e) => (n = {
 		bullet: e,
 		runs: []
@@ -1705,11 +1847,11 @@ function kn(e) {
 			s.nextSibling && r(!1);
 			return;
 		}
-		if (An(s.tagName)) {
+		if (Nn(s.tagName)) {
 			a(s);
 			return;
 		}
-		let c = jn(s, t, o);
+		let c = Pn(s, t, o);
 		for (let e of s.childNodes) i(e, c.bold, c.italic);
 	}, a = (e) => {
 		r(e.classList.contains("bullet") || e.tagName === "LI");
@@ -1717,12 +1859,12 @@ function kn(e) {
 		n = null;
 	};
 	for (let t of e.childNodes) i(t, !1, !1);
-	return xe(t);
+	return Ae(t);
 }
-function An(e) {
+function Nn(e) {
 	return e === "DIV" || e === "P" || e === "LI";
 }
-function jn(e, t, n) {
+function Pn(e, t, n) {
 	let r = e.tagName;
 	(r === "B" || r === "STRONG") && (t = !0), (r === "I" || r === "EM") && (n = !0);
 	let i = e.style.fontWeight;
@@ -1733,13 +1875,13 @@ function jn(e, t, n) {
 		italic: n
 	};
 }
-function Mn(e) {
+function Fn(e) {
 	let t = e.ownerDocument, n = t.getSelection();
 	if (!n) return;
 	let r = t.createRange();
 	r.selectNodeContents(e), n.removeAllRanges(), n.addRange(r);
 }
-function Nn(e, t) {
+function In(e, t) {
 	let n = e.ownerDocument;
 	if (typeof n.execCommand == "function" && n.execCommand("insertText", !1, t)) return;
 	let r = n.getSelection();
@@ -1750,207 +1892,287 @@ function Nn(e, t) {
 	let a = n.createTextNode(t);
 	i.insertNode(a), i.setStartAfter(a), i.collapse(!0), r.removeAllRanges(), r.addRange(i);
 }
-function Pn(e) {
+function Ln(e) {
 	let t = e.ownerDocument.getSelection();
 	if (!t || t.rangeCount === 0) return [];
 	let n = t.getRangeAt(0);
 	return e.contains(n.commonAncestorContainer) ? Array.from(e.children).filter((e) => n.intersectsNode(e)) : [];
 }
-function Fn(e) {
-	In(e);
-	let t = Pn(e);
+function Rn(e) {
+	zn(e);
+	let t = Ln(e);
 	if (t.length === 0) return;
-	let n = t.every((e) => e.classList.contains(Cn));
-	for (let e of t) e.classList.toggle(Cn, !n);
+	let n = t.every((e) => e.classList.contains(En));
+	for (let e of t) e.classList.toggle(En, !n);
 }
-function In(e) {
+function zn(e) {
 	let t = e.ownerDocument, n = null;
-	for (let r of Array.from(e.childNodes)) {
-		if (r.nodeType === Node.ELEMENT_NODE && An(r.tagName)) {
-			n = null;
-			continue;
-		}
-		n || (n = t.createElement("div"), e.insertBefore(n, r)), n.appendChild(r);
-	}
+	for (let r of Array.from(e.childNodes)) r.nodeType === Node.ELEMENT_NODE && Nn(r.tagName) ? n = null : (n || (n = t.createElement("div"), e.insertBefore(n, r)), n.appendChild(r));
 }
-var Ln = {
+var Bn = {
 	horizontal: {
-		left: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z",
-		center: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z",
-		right: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"
+		left: "text-align-start",
+		center: "text-align-center",
+		right: "text-align-end"
 	},
 	vertical: {
-		top: "M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z",
-		middle: "M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z",
-		bottom: "M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"
+		top: "align-vertical-justify-start",
+		middle: "align-vertical-justify-center",
+		bottom: "align-vertical-justify-end"
 	}
 };
-function Rn(e, t) {
+function Vn(e, t) {
 	let n = e.createElement("div");
 	n.className = "event-storming-note-toolbar";
 	let r = (r, i, a) => {
 		let o = e.createElement("button");
 		o.type = "button", o.setAttribute("data-action", r), o.title = i, o.innerHTML = a, o.addEventListener("mousedown", (e) => e.preventDefault()), o.addEventListener("click", () => t(r)), n.appendChild(o);
 	};
-	r("note-bold", "Bold (Cmd/Ctrl+B)", "<b>B</b>"), r("note-italic", "Italic (Cmd/Ctrl+I)", "<i>I</i>"), r("note-bullet", "Bullet list", "•");
+	r("note-bold", "Bold (Cmd/Ctrl+B)", q("bold")), r("note-italic", "Italic (Cmd/Ctrl+I)", q("italic")), r("note-bullet", "Bullet list", q("list"));
 	let i = e.createElement("span");
 	return i.className = "event-storming-note-toolbar-separator", n.appendChild(i), r("note-align-horizontal", "Horizontal alignment (click to cycle)", ""), r("note-align-vertical", "Vertical alignment (click to cycle)", ""), n;
 }
-function zn(e, t, n) {
-	e.innerHTML = Q(Ln[t][n] ?? "", 16), e.title = t === "horizontal" ? `Horizontal alignment: ${n} (click to cycle)` : `Vertical alignment: ${n} (click to cycle)`;
+function Hn(e, t, n) {
+	let r = Bn[t][n];
+	e.innerHTML = r ? q(r) : "", e.title = t === "horizontal" ? `Horizontal alignment: ${n} (click to cycle)` : `Vertical alignment: ${n} (click to cycle)`;
 }
-function Bn(e, t) {
+function Un(e, t) {
 	e.style.textAlign = t.horizontal, e.style.justifyContent = t.vertical === "top" ? "flex-start" : t.vertical === "middle" ? "center" : "flex-end";
 }
 //#endregion
 //#region src/label-editing/EventStormingLabelEditing.ts
-function Vn(e) {
+function Wn(e) {
 	return e.replace(/(?<!:)\/\//g, "∕∕").replace(/\/\*/g, "∕*").replace(/->/g, "→").replace(/;/g, ",").replace(/\[/g, "(").replace(/\]/g, ")").trim();
 }
-var Hn = class {
+var Gn = class {
 	canvas;
 	modeling;
+	elementRegistry;
+	readOnly;
 	static $inject = [
 		"eventBus",
 		"canvas",
-		"eventStormingModeling"
+		"eventStormingModeling",
+		"elementRegistry",
+		"eventStormingReadOnly"
 	];
 	active = null;
-	constructor(e, t, n) {
-		this.canvas = t, this.modeling = n, e.on("element.dblclick", (e) => {
-			N(e.element) ? this.activate(e.element) : P(e.element) && this.activateConnection(e.element);
-		}), e.on([
-			"element.mousedown",
-			"drag.init",
-			"canvas.viewbox.changing"
-		], () => this.active?.commit());
+	suspended = null;
+	resumeTimer;
+	constructor(e, t, n, r, i) {
+		this.canvas = t, this.modeling = n, this.elementRegistry = r, this.readOnly = i, e.on(K, (e) => {
+			e.readOnly && this.cancel();
+		}), e.on("diagram.destroy", () => {
+			clearTimeout(this.resumeTimer), this.suspended = null, this.cancel();
+		}), e.on("element.dblclick", (e) => {
+			b(e.element) ? this.activate(e.element) : x(e.element) && this.activateConnection(e.element);
+		}), e.on(["element.mousedown", "drag.init"], () => this.active?.commit()), e.on("canvas.viewbox.changed", () => this.active?.place());
+	}
+	suspend() {
+		clearTimeout(this.resumeTimer), this.active && (this.suspended = this.active.snapshot(), this.active.cleanup());
+	}
+	resumeAfterImport() {
+		clearTimeout(this.resumeTimer), this.suspended && (this.resumeTimer = setTimeout(() => {
+			let e = this.suspended;
+			this.suspended = null, e && !this.active && this.resume(e);
+		}, 0));
+	}
+	resume(e) {
+		let t = this.elementRegistry?.get(e.elementId);
+		if (e.connection) {
+			if (!x(t)) return;
+			this.activateConnection(t);
+		} else {
+			if (!b(t)) return;
+			this.activate(t);
+		}
+		let n = this.active?.field;
+		n && (n instanceof HTMLTextAreaElement || n instanceof HTMLInputElement ? (n.value = e.value, n instanceof HTMLTextAreaElement && (n.rows = Math.max(2, e.value.split("\n").length)), n.setSelectionRange(e.selectionStart ?? e.value.length, e.selectionEnd ?? e.value.length)) : (An(n, e.value), e.align && this.restoreNoteAlign?.(e.align), qn(n)));
 	}
+	restoreNoteAlign;
 	activate(e) {
-		if (this.active?.commit(), e.eventStormingType === "drawing") return;
+		if (this.active?.commit(), this.readOnly?.isReadOnly() || e.eventStormingType === "drawing") return;
 		if (e.eventStormingType === "note") {
 			this.activateNote(e);
 			return;
 		}
-		let t = this.canvas.getContainer(), n = this.canvas.zoom(), r = this.canvas.viewbox(), i = (e.x + e.width / 2 - r.x) * n, a = (e.y + e.height / 2 - r.y) * n, o = document.createElement("textarea");
-		o.className = "event-storming-label-input event-storming-label-textarea", o.value = e.eventStormingLabel ?? "", o.rows = Math.max(2, o.value.split("\n").length), o.wrap = "off", o.style.position = "absolute", o.style.left = `${i}px`, o.style.top = `${a}px`, o.style.transform = "translate(-50%, -50%)", o.style.width = `${e.width * n}px`, t.appendChild(o), o.focus(), o.select();
-		let s = !1, c = () => {
-			s || (s = !0, o.removeEventListener("keydown", u), o.removeEventListener("blur", d), o.remove(), this.active = null);
-		}, l = () => {
-			if (s) return;
-			let t = Vn(o.value), n = t && t !== e.eventStormingLabel;
-			c(), n && this.modeling.updateLabel(e, t);
-		}, u = (e) => {
-			if (e.key === "Escape") {
-				e.preventDefault(), c();
-				return;
-			}
-			if (e.key === "Enter") {
+		let t = this.canvas.getContainer(), n = document.createElement("textarea");
+		n.className = "event-storming-label-input event-storming-label-textarea", n.value = e.eventStormingLabel ?? "", n.rows = Math.max(2, n.value.split("\n").length), n.wrap = "off", n.style.position = "absolute", n.style.transform = "translate(-50%, -50%)";
+		let r = () => {
+			let t = this.canvas.zoom(), r = this.canvas.viewbox();
+			n.style.left = `${(e.x + e.width / 2 - r.x) * t}px`, n.style.top = `${(e.y + e.height / 2 - r.y) * t}px`, n.style.width = `${e.width * t}px`;
+		};
+		r(), t.appendChild(n), n.focus(), n.select();
+		let i = !1, a = () => {
+			i || (i = !0, n.removeEventListener("keydown", s), n.removeEventListener("blur", c), n.remove(), this.active = null, this.canvas.restoreFocus?.());
+		}, o = () => {
+			if (i) return;
+			let t = Wn(n.value), r = t && t !== e.eventStormingLabel;
+			a(), r && this.modeling.updateLabel(e, t);
+		}, s = (e) => {
+			if (e.key === "Escape") e.preventDefault(), a();
+			else if (e.key === "Enter") {
 				if (!(e.metaKey || e.ctrlKey)) return;
-				e.preventDefault(), l();
+				e.preventDefault(), o();
 			}
-		}, d = () => l();
-		o.addEventListener("keydown", u), o.addEventListener("blur", d), this.active = {
-			field: o,
-			commit: l,
-			cleanup: c
+		}, c = () => o();
+		n.addEventListener("keydown", s), n.addEventListener("blur", c);
+		let l = () => ({
+			elementId: e.id,
+			connection: !1,
+			value: n.value,
+			selectionStart: n.selectionStart ?? void 0,
+			selectionEnd: n.selectionEnd ?? void 0
+		});
+		this.active = {
+			field: n,
+			place: r,
+			commit: o,
+			cleanup: a,
+			snapshot: l
 		};
 	}
 	activateNote(e) {
-		let t = this.canvas.getContainer(), n = this.canvas.zoom(), r = this.canvas.viewbox(), i = (e.x + e.width / 2 - r.x) * n, a = (e.y + e.height / 2 - r.y) * n, o = document.createElement("div");
-		o.className = "event-storming-label-input event-storming-note-editor", o.contentEditable = "true", o.style.position = "absolute", o.style.left = `${i}px`, o.style.top = `${a}px`, o.style.transform = "translate(-50%, -50%)", o.style.minWidth = `${e.width * n}px`, o.style.minHeight = `${e.height * n}px`, Dn(o, e.eventStormingLabel ?? "");
-		let s = {
+		let t = this.canvas.getContainer(), n = document.createElement("div");
+		n.className = "event-storming-label-input event-storming-note-editor", n.contentEditable = "true", n.style.position = "absolute", n.style.transform = "translate(-50%, -50%)", An(n, e.eventStormingLabel ?? "");
+		let r = {
 			horizontal: e.alignHorizontal ?? "left",
 			vertical: e.alignVertical ?? "top"
 		};
-		Bn(o, s);
-		let c = Rn(document, (e) => m(e));
-		c.style.left = `${i}px`, c.style.top = `${(e.y - r.y) * n - 8}px`, c.style.transform = "translate(-50%, -100%)", t.appendChild(o), t.appendChild(c), o.focus(), Mn(o);
-		let l = (e) => c.querySelector(`[data-action="${e}"]`), u = (e, t) => {
-			let n = l(e);
+		Un(n, r);
+		let i = Vn(document, (e) => d(e));
+		i.style.transform = "translate(-50%, -100%)";
+		let a = () => {
+			let t = this.canvas.zoom(), r = this.canvas.viewbox(), a = (e.x + e.width / 2 - r.x) * t;
+			n.style.left = `${a}px`, n.style.top = `${(e.y + e.height / 2 - r.y) * t}px`, n.style.minWidth = `${e.width * t}px`, n.style.minHeight = `${e.height * t}px`, i.style.left = `${a}px`, i.style.top = `${(e.y - r.y) * t - 8}px`;
+		};
+		a(), t.appendChild(n), t.appendChild(i), n.focus(), Fn(n);
+		let o = (e) => i.querySelector(`[data-action="${e}"]`), s = (e, t) => {
+			let n = o(e);
 			n?.classList.toggle("active", t), n?.setAttribute("aria-pressed", String(t));
-		}, d = () => {
-			u("note-bold", Wn("bold")), u("note-italic", Wn("italic"));
-			let e = Pn(o);
-			u("note-bullet", e.length > 0 && e.every((e) => e.classList.contains("bullet")));
-			let t = l("note-align-horizontal");
-			t && zn(t, "horizontal", s.horizontal);
-			let n = l("note-align-vertical");
-			n && zn(n, "vertical", s.vertical);
-		}, f = (e) => {
-			typeof document.execCommand == "function" && document.execCommand(e, !1), d();
-		}, p = (e) => {
-			e === "horizontal" ? s.horizontal = En(wn, s.horizontal) : s.vertical = En(Tn, s.vertical), Bn(o, s), d();
-		}, m = (e) => {
-			e === "note-bold" ? f("bold") : e === "note-italic" ? f("italic") : e === "note-bullet" ? (Fn(o), d()) : p(e === "note-align-horizontal" ? "horizontal" : "vertical");
-		}, h = () => d();
-		document.addEventListener("selectionchange", h);
-		let g = !1, _ = () => {
-			g || (g = !0, document.removeEventListener("selectionchange", h), o.removeEventListener("keydown", y), o.removeEventListener("blur", b), o.removeEventListener("paste", x), o.remove(), c.remove(), this.active = null);
-		}, v = () => {
-			if (g) return;
-			let t = Un(e, Vn(kn(o)), s);
-			_(), t && this.modeling.updateProperties(e, t);
-		}, y = (e) => {
+		}, c = () => {
+			s("note-bold", Jn("bold")), s("note-italic", Jn("italic"));
+			let e = Ln(n);
+			s("note-bullet", e.length > 0 && e.every((e) => e.classList.contains("bullet")));
+			let t = o("note-align-horizontal");
+			t && Hn(t, "horizontal", r.horizontal);
+			let i = o("note-align-vertical");
+			i && Hn(i, "vertical", r.vertical);
+		}, l = (e) => {
+			typeof document.execCommand == "function" && document.execCommand(e, !1), c();
+		}, u = (e) => {
+			e === "horizontal" ? r.horizontal = kn(Dn, r.horizontal) : r.vertical = kn(On, r.vertical), Un(n, r), c();
+		}, d = (e) => {
+			e === "note-bold" ? l("bold") : e === "note-italic" ? l("italic") : e === "note-bullet" ? (Rn(n), c()) : u(e === "note-align-horizontal" ? "horizontal" : "vertical");
+		}, f = () => c();
+		document.addEventListener("selectionchange", f);
+		let p = !1, m = () => {
+			p || (p = !0, document.removeEventListener("selectionchange", f), n.removeEventListener("keydown", g), n.removeEventListener("blur", _), n.removeEventListener("paste", v), n.remove(), i.remove(), this.active = null, this.restoreNoteAlign = void 0, this.canvas.restoreFocus?.());
+		}, h = () => {
+			if (p) return;
+			let t = Kn(e, Wn(Mn(n)), r);
+			m(), t && this.modeling.updateProperties(e, t);
+		}, g = (e) => {
 			if (e.key === "Escape") {
-				e.preventDefault(), _();
+				e.preventDefault(), m();
 				return;
 			}
 			if (e.key === "Enter") {
 				if (!(e.metaKey || e.ctrlKey)) return;
-				e.preventDefault(), v();
+				e.preventDefault(), h();
 				return;
 			}
 			let t = e.key.toLowerCase();
-			(e.metaKey || e.ctrlKey) && (t === "b" || t === "i") && (e.preventDefault(), f(t === "b" ? "bold" : "italic"));
-		}, b = (e) => {
-			e.relatedTarget instanceof Node && c.contains(e.relatedTarget) || v();
-		}, x = (e) => {
+			(e.metaKey || e.ctrlKey) && (t === "b" || t === "i") && (e.preventDefault(), l(t === "b" ? "bold" : "italic"));
+		}, _ = (e) => {
+			e.relatedTarget instanceof Node && i.contains(e.relatedTarget) || h();
+		}, v = (e) => {
 			e.preventDefault();
 			let t = e.clipboardData?.getData("text/plain") ?? "";
-			t && Nn(o, t);
+			t && In(n, t);
 		};
-		o.addEventListener("keydown", y), o.addEventListener("blur", b), o.addEventListener("paste", x), d(), this.active = {
-			field: o,
-			commit: v,
-			cleanup: _
+		n.addEventListener("keydown", g), n.addEventListener("blur", _), n.addEventListener("paste", v), c(), this.restoreNoteAlign = (e) => {
+			r.horizontal = e.horizontal, r.vertical = e.vertical, Un(n, r), c();
+		};
+		let ee = () => ({
+			elementId: e.id,
+			connection: !1,
+			value: Mn(n),
+			align: { ...r }
+		});
+		this.active = {
+			field: n,
+			place: a,
+			commit: h,
+			cleanup: m,
+			snapshot: ee
 		};
 	}
 	activateConnection(e) {
-		this.active?.commit();
-		let t = this.canvas.getContainer(), n = this.canvas.zoom(), r = this.canvas.viewbox(), i = e.waypoints[0], a = e.waypoints[e.waypoints.length - 1];
-		if (!i || !a) return;
-		let o = document.createElement("input");
-		o.type = "text", o.className = "event-storming-label-input", o.placeholder = "arrow label", o.value = e.linkLabel ?? "", o.style.position = "absolute", o.style.left = `${((i.x + a.x) / 2 - 60 - r.x) * n}px`, o.style.top = `${((i.y + a.y) / 2 - 26 - r.y) * n}px`, t.appendChild(o), o.focus(), o.select();
-		let s = !1, c = () => {
-			s || (s = !0, o.removeEventListener("keydown", u), o.removeEventListener("blur", d), o.remove(), this.active = null);
-		}, l = () => {
-			if (s) return;
-			let t = Vn(o.value), n = e.linkLabel ?? "";
-			c(), t !== n && this.modeling.updateProperties(e, { linkLabel: t || void 0 });
-		}, u = (e) => {
-			e.key === "Escape" ? (e.preventDefault(), c()) : e.key === "Enter" && (e.preventDefault(), l());
-		}, d = () => l();
-		o.addEventListener("keydown", u), o.addEventListener("blur", d), this.active = {
-			field: o,
-			commit: l,
-			cleanup: c
+		if (this.active?.commit(), this.readOnly?.isReadOnly()) return;
+		let t = this.canvas.getContainer(), n = e.waypoints[0], r = e.waypoints[e.waypoints.length - 1];
+		if (!n || !r) return;
+		let i = document.createElement("input");
+		i.type = "text", i.className = "event-storming-label-input", i.placeholder = "arrow label", i.value = e.linkLabel ?? "", i.style.position = "absolute";
+		let a = () => {
+			let e = this.canvas.zoom(), t = this.canvas.viewbox();
+			i.style.left = `${((n.x + r.x) / 2 - 60 - t.x) * e}px`, i.style.top = `${((n.y + r.y) / 2 - 26 - t.y) * e}px`;
+		};
+		a(), t.appendChild(i), i.focus(), i.select();
+		let o = !1, s = () => {
+			o || (o = !0, i.removeEventListener("keydown", l), i.removeEventListener("blur", u), i.remove(), this.active = null, this.canvas.restoreFocus?.());
+		}, c = () => {
+			if (o) return;
+			let t = Wn(i.value), n = e.linkLabel ?? "";
+			s(), t !== n && this.modeling.updateProperties(e, { linkLabel: t || void 0 });
+		}, l = (e) => {
+			e.key === "Escape" ? (e.preventDefault(), s()) : e.key === "Enter" && (e.preventDefault(), c());
+		}, u = () => c();
+		i.addEventListener("keydown", l), i.addEventListener("blur", u);
+		let d = () => ({
+			elementId: e.id,
+			connection: !0,
+			value: i.value,
+			selectionStart: i.selectionStart ?? void 0,
+			selectionEnd: i.selectionEnd ?? void 0
+		});
+		this.active = {
+			field: i,
+			place: a,
+			commit: c,
+			cleanup: s,
+			snapshot: d
 		};
 	}
 	cancel() {
 		this.active?.cleanup();
 	}
+	openEdit() {
+		if (!this.active) return;
+		let { elementId: e, value: t } = this.active.snapshot();
+		return {
+			elementId: e,
+			value: t
+		};
+	}
 };
-function Un(e, t, n) {
+function Kn(e, t, n) {
 	let r = !!t && t !== e.eventStormingLabel, i = n.horizontal !== (e.alignHorizontal ?? "left") || n.vertical !== (e.alignVertical ?? "top");
 	if (!r && !i) return null;
 	let a = {};
-	if (r && (a.eventStormingLabel = t, !k(e.eventStormingLabel, e))) {
-		let { width: n, height: r } = O(t);
+	if (r && (a.eventStormingLabel = t, !N(e.eventStormingLabel, e))) {
+		let { width: n, height: r } = M(t);
 		a.width = n, a.height = r, a.x = e.x + e.width / 2 - n / 2, a.y = e.y + e.height / 2 - r / 2;
 	}
 	return i && (a.alignHorizontal = n.horizontal === "left" ? void 0 : n.horizontal, a.alignVertical = n.vertical === "top" ? void 0 : n.vertical), a;
 }
-function Wn(e) {
+function qn(e) {
+	let t = document.createRange();
+	t.selectNodeContents(e), t.collapse(!1);
+	let n = window.getSelection();
+	n?.removeAllRanges(), n?.addRange(t);
+}
+function Jn(e) {
 	if (typeof document.queryCommandState != "function") return !1;
 	try {
 		return document.queryCommandState(e);
@@ -1960,10 +2182,10 @@ function Wn(e) {
 }
 //#endregion
 //#region src/label-editing/index.ts
-var Gn = {
+var Yn = {
 	__init__: ["eventStormingLabelEditing"],
-	eventStormingLabelEditing: ["type", Hn]
-}, Kn = 2, qn = 10, Jn = {
+	eventStormingLabelEditing: ["type", Gn]
+}, Xn = 2, Zn = 10, Qn = {
 	arrowleft: {
 		x: -1,
 		y: 0
@@ -1980,8 +2202,9 @@ var Gn = {
 		x: 0,
 		y: 1
 	}
-}, Yn = class {
+}, $n = class {
 	static $inject = [
+		"config.eventStormingKeyboard",
 		"canvas",
 		"commandStack",
 		"selection",
@@ -1991,59 +2214,72 @@ var Gn = {
 		"create",
 		"mouse",
 		"lassoTool",
-		"eventBus"
+		"eventBus",
+		"elementRegistry",
+		"eventStormingReadOnly"
 	];
-	constructor(e, t, n, r, i, a, o, s, c, l) {
-		let u = e.getContainer();
-		u.hasAttribute("tabindex") || u.setAttribute("tabindex", "0");
-		let d = (e) => {
-			if (Xn(e.target)) return;
-			let l = e.ctrlKey || e.metaKey, u = e.key.toLowerCase();
-			if (l && u === "z" && !e.shiftKey) e.preventDefault(), t.undo();
-			else if (l && u === "z" && e.shiftKey || l && u === "y") e.preventDefault(), t.redo();
-			else if (l && u === "c") i.copy() && e.preventDefault();
-			else if (l && u === "v") i.paste() && e.preventDefault();
-			else if (l && u === "d") e.preventDefault(), i.duplicate();
-			else if (u === "delete" || u === "backspace") {
-				let t = n.get();
-				t.length && (e.preventDefault(), r.removeElements(t));
-			} else if (!l && !e.altKey && (u === "e" || u === "c")) {
-				let t = s.getLastMoveEvent();
+	constructor(e, t, n, r, i, a, o, s, c, l, u, d, f) {
+		let p = t.getContainer(), m = e?.undoRedoKeys ?? !0, h = (e) => {
+			e.defaultPrevented || er(e.target, p) && (tr(e.target) || g(e) || f?.isReadOnly() || _(e));
+		}, g = (e) => {
+			let t = e.ctrlKey || e.metaKey, n = e.key.toLowerCase();
+			if (t && n === "a" && !e.shiftKey && !e.altKey) {
+				e.preventDefault();
+				let t = (d?.getAll() ?? []).filter((e) => b(e) || x(e));
+				r.select(t);
+			} else if (t && n === "c") a.copy() && e.preventDefault();
+			else if (!t && !e.altKey && n === "l") {
+				e.preventDefault();
+				let t = c.getLastMoveEvent();
+				l.activateSelection(t ?? e, !!t);
+			} else return !1;
+			return !0;
+		}, _ = (e) => {
+			let t = e.ctrlKey || e.metaKey, l = e.key.toLowerCase(), u = t && l === "z" && !e.shiftKey, d = t && l === "z" && e.shiftKey || t && l === "y";
+			if (u || d) {
+				if (!m) return;
+				e.preventDefault(), u ? n.undo() : n.redo();
+			} else if (t && l === "v") a.paste() && e.preventDefault();
+			else if (t && l === "d") e.preventDefault(), a.duplicate();
+			else if (l === "delete" || l === "backspace") {
+				let t = r.get();
+				t.length && (e.preventDefault(), i.removeElements(t));
+			} else if (!t && !e.altKey && (l === "e" || l === "c")) {
+				let t = c.getLastMoveEvent();
 				if (t) {
 					e.preventDefault();
-					let n = u === "e" ? a.createNew("event", w.event.label) : a.createNew("command", w.command.label);
-					o.start(t, n);
+					let n = l === "e" ? o.createNew("event", O.event.label) : o.createNew("command", O.command.label);
+					s.start(t, n);
 				}
-			} else if (!l && !e.altKey && u === "l") {
-				e.preventDefault();
-				let t = s.getLastMoveEvent();
-				c.activateSelection(t ?? e, !!t);
-			} else if (u in Jn && !l) {
-				let t = n.get();
+			} else if (l in Qn && !t) {
+				let t = r.get();
 				if (t.length) {
 					e.preventDefault();
-					let n = e.shiftKey ? qn : Kn, i = Jn[u];
-					r.moveElements(t, {
-						x: i.x * n,
-						y: i.y * n
+					let n = e.shiftKey ? Zn : Xn, r = Qn[l];
+					i.moveElements(t, {
+						x: r.x * n,
+						y: r.y * n
 					});
 				}
 			}
 		};
-		document.addEventListener("keydown", d), l.on("diagram.destroy", () => document.removeEventListener("keydown", d));
+		document.addEventListener("keydown", h), u.on("diagram.destroy", () => document.removeEventListener("keydown", h));
 	}
 };
-function Xn(e) {
+function er(e, t) {
+	return e instanceof Node ? t.contains(e) || e === document.body || e === document.documentElement : !1;
+}
+function tr(e) {
 	if (!(e instanceof HTMLElement)) return !1;
 	let t = e.tagName;
 	return t === "INPUT" || t === "TEXTAREA" || e.isContentEditable;
 }
 //#endregion
 //#region src/keyboard/index.ts
-var Zn = {
+var nr = {
 	__init__: ["eventStormingKeyboard"],
-	eventStormingKeyboard: ["type", Yn]
-}, Qn = 500, $n = 6, er = class {
+	eventStormingKeyboard: ["type", $n]
+}, rr = 500, ir = 6, ar = class {
 	static $inject = ["injector", "eventBus"];
 	constructor(e, t) {
 		let n = e.get("connectionPreview", !1), r = e.get("eventStormingLabelEditing", !1), i = e.get("popupMenu", !1), a = e.get("modeling", !1), o = e.get("canvas", !1), s = !1;
@@ -2074,26 +2310,16 @@ var Zn = {
 		let c = (e) => {
 			if (s || !e.parent || !i || !a || !o) return;
 			let n = o.getAbsoluteBBox(e), c = o.getContainer().getBoundingClientRect();
-			if (i.open(e, Y, {
+			i.open(e, G, {
 				x: c.left + n.x,
-				y: c.top + n.y + n.height + $n
-			}), !i.isOpen()) {
-				a.removeElements([e]);
-				return;
-			}
-			t.once("popupMenu.close", () => {
+				y: c.top + n.y + n.height + ir
+			}), i.isOpen() ? t.once("popupMenu.close", () => {
 				setTimeout(() => {
-					if (!s) {
-						if (e.provisional) {
-							e.parent && a.removeElements([e]);
-							return;
-						}
-						r?.activate(e);
-					}
+					s || (e.provisional ? e.parent && a.removeElements([e]) : r?.activate(e));
 				}, 0);
-			});
+			}) : a.removeElements([e]);
 		};
-		t.on("create.end", Qn, (e) => {
+		t.on("create.end", rr, (e) => {
 			let { context: t } = e;
 			if (!t.source || !t.canExecute || !t.shape) return;
 			let n = t.shape;
@@ -2107,19 +2333,17 @@ var Zn = {
 					return;
 				}
 				setTimeout(() => c(n), 0);
-				return;
-			}
-			r && setTimeout(() => r.activate(n), 0);
+			} else r && setTimeout(() => r.activate(n), 0);
 		});
 	}
-}, tr = {
-	__depends__: [me],
+}, or = {
+	__depends__: [_e],
 	__init__: ["eventStormingAppendBehavior"],
-	eventStormingAppendBehavior: ["type", er]
-}, nr = F.map((e) => ({
-	value: w[e].fill,
-	title: w[e].label
-})), rr = class {
+	eventStormingAppendBehavior: ["type", ar]
+}, sr = S.map((e) => ({
+	value: O[e].fill,
+	title: O[e].label
+})), cr = class {
 	canvas;
 	modeling;
 	static $inject = [
@@ -2149,7 +2373,7 @@ var Zn = {
 			value: void 0,
 			title: "No color",
 			cls: "event-storming-cp-none"
-		}, ...nr.map((e) => ({
+		}, ...sr.map((e) => ({
 			value: e.value,
 			title: e.title,
 			cls: ""
@@ -2169,12 +2393,12 @@ var Zn = {
 	close() {
 		this.popover && (this.popover.remove(), this.popover = void 0, document.removeEventListener("click", this.onDocPointer, !0), document.removeEventListener("keydown", this.onKey, !0));
 	}
-}, ir = {
+}, lr = {
 	__init__: ["eventStormingColorPicker"],
-	eventStormingColorPicker: ["type", rr]
-}, ar = {
+	eventStormingColorPicker: ["type", cr]
+}, ur = {
 	__init__: ["eventStormingOrderingProvider"],
-	eventStormingOrderingProvider: ["type", class extends he {
+	eventStormingOrderingProvider: ["type", class extends ve {
 		static $inject = ["eventBus"];
 		constructor(e) {
 			super(e);
@@ -2182,15 +2406,15 @@ var Zn = {
 		getOrdering(e, t) {
 			for (; t.parent;) t = t.parent;
 			let n = t.children ?? [];
-			if (P(e)) {
-				let r = n.filter((t) => t !== e && (B(t) || P(t))).length;
+			if (x(e)) {
+				let r = n.filter((t) => t !== e && (T(t) || x(t))).length;
 				return {
 					parent: t,
 					index: r
 				};
 			}
-			if (B(e)) {
-				let r = n.filter((t) => t !== e && B(t)).length;
+			if (T(e)) {
+				let r = n.filter((t) => t !== e && T(t)).length;
 				return {
 					parent: t,
 					index: r
@@ -2199,7 +2423,7 @@ var Zn = {
 			return { parent: t };
 		}
 	}]
-}, or = 12, sr = class {
+}, dr = 12, fr = class {
 	canvas;
 	eventBus;
 	modeling;
@@ -2217,7 +2441,9 @@ var Zn = {
 	cursor = null;
 	layer = null;
 	constructor(e, t, n, r, i) {
-		this.canvas = e, this.eventBus = t, this.modeling = n, this.selection = r, this.factory = i, t.on("diagram.destroy", () => this.cancel());
+		this.canvas = e, this.eventBus = t, this.modeling = n, this.selection = r, this.factory = i, t.on("diagram.destroy", () => this.cancel()), t.on(K, (e) => {
+			e.readOnly && this.cancel();
+		});
 	}
 	isActive() {
 		return this.active;
@@ -2276,16 +2502,12 @@ var Zn = {
 		if (e.button !== 0 || this.isChromeTarget(e)) return;
 		e.preventDefault(), e.stopPropagation();
 		let t = this.toCanvasPoint(e), n = this.points[0];
-		if (n && this.points.length >= 3 && cr(t, n) <= or) {
+		if (n && this.points.length >= 3 && pr(t, n) <= dr) {
 			this.finishClosed();
 			return;
 		}
 		let r = this.points[this.points.length - 1];
-		if (r && cr(t, r) <= or) {
-			this.points.length >= 2 && this.finish();
-			return;
-		}
-		this.points.push(t), this.renderPreview();
+		r && pr(t, r) <= dr ? this.points.length >= 2 && this.finish() : (this.points.push(t), this.renderPreview());
 	};
 	onDblClick = (e) => {
 		this.isChromeTarget(e) || (e.preventDefault(), e.stopPropagation(), this.finish());
@@ -2302,7 +2524,7 @@ var Zn = {
 		f(t, p(m("polyline"), {
 			points: n.map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
-			stroke: j,
+			stroke: F,
 			"stroke-width": 2,
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
@@ -2313,8 +2535,8 @@ var Zn = {
 			cx: r.x,
 			cy: r.y,
 			r: this.points.length >= 3 ? 5 : 3,
-			fill: A.paper,
-			stroke: j,
+			fill: P.paper,
+			stroke: F,
 			"stroke-width": 1.5
 		})), this.points.length >= 2) {
 			let e = this.points[this.points.length - 1];
@@ -2322,8 +2544,8 @@ var Zn = {
 				cx: e.x,
 				cy: e.y,
 				r: 5,
-				fill: A.paper,
-				stroke: j,
+				fill: P.paper,
+				stroke: F,
 				"stroke-width": 1.5
 			}));
 		}
@@ -2333,27 +2555,29 @@ var Zn = {
 		this.layer &&= (h(this.layer), null);
 	}
 };
-function cr(e, t) {
+function pr(e, t) {
 	return Math.hypot(e.x - t.x, e.y - t.y);
 }
 //#endregion
 //#region src/draw-tool/EventStormingDrawingHandles.ts
-var lr = class {
+var mr = class {
 	eventBus;
 	canvas;
 	modeling;
+	readOnly;
 	static $inject = [
 		"eventBus",
 		"canvas",
-		"eventStormingModeling"
+		"eventStormingModeling",
+		"eventStormingReadOnly"
 	];
 	shape = null;
 	group = null;
 	dragPreview = null;
-	constructor(e, t, n) {
-		this.eventBus = e, this.canvas = t, this.modeling = n, e.on("selection.changed", (e) => {
+	constructor(e, t, n, r) {
+		this.eventBus = e, this.canvas = t, this.modeling = n, this.readOnly = r, e.on(K, () => this.render()), e.on("selection.changed", (e) => {
 			let t = e.newSelection ?? [], n = t.length === 1 ? t[0] : null;
-			this.attach(B(n) ? n : null);
+			this.attach(T(n) ? n : null);
 		}), e.on("element.changed", (e) => {
 			this.shape && e.element === this.shape && this.render();
 		}), e.on(["diagram.clear", "diagram.destroy"], () => this.attach(null));
@@ -2369,15 +2593,15 @@ var lr = class {
 		}));
 	}
 	render() {
-		if (this.clear(), !this.shape) return;
+		if (this.clear(), !this.shape || this.readOnly?.isReadOnly()) return;
 		let e = this.canvas.getLayer("event-storming-drawing-handles", 1100), t = m("g");
 		this.absolutePoints().forEach((e, n) => {
 			let r = p(m("circle"), {
 				cx: e.x,
 				cy: e.y,
 				r: 5,
-				fill: A.paper,
-				stroke: A.ink,
+				fill: P.paper,
+				stroke: P.ink,
 				"stroke-width": 1.5,
 				class: "event-storming-drawing-handle"
 			});
@@ -2412,7 +2636,7 @@ var lr = class {
 		let n = this.canvas.getLayer("event-storming-drawing-handles", 1100), r = p(m(t ? "polygon" : "polyline"), {
 			points: e.map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
-			stroke: A.ink,
+			stroke: P.ink,
 			"stroke-width": 1.5,
 			"stroke-dasharray": "5 4",
 			"pointer-events": "none"
@@ -2432,17 +2656,17 @@ var lr = class {
 			y: (e.clientY - t.top) / r + n.y
 		};
 	}
-}, ur = class {
+}, hr = class {
 	static $inject = ["eventBus", "interactionEvents"];
 	constructor(e, t) {
 		e.on("interactionEvents.createHit", (e) => {
-			if (B(e.element) && e.gfx) return dr(e.element, e.gfx), !1;
+			if (T(e.element) && e.gfx) return gr(e.element, e.gfx), !1;
 		}), e.on("interactionEvents.updateHit", (e) => {
-			if (B(e.element) && e.gfx) return t.removeHits(e.gfx), dr(e.element, e.gfx), !1;
+			if (T(e.element) && e.gfx) return t.removeHits(e.gfx), gr(e.element, e.gfx), !1;
 		});
 	}
 };
-function dr(e, t) {
+function gr(e, t) {
 	let n = e.drawingPoints ?? [], r = m(e.closed ? "polygon" : "polyline");
 	p(r, {
 		points: n.map((e) => `${e.x},${e.y}`).join(" "),
@@ -2455,55 +2679,56 @@ function dr(e, t) {
 }
 //#endregion
 //#region src/draw-tool/index.ts
-var fr = {
+var _r = {
 	__init__: [
 		"eventStormingDrawTool",
 		"eventStormingDrawingHandles",
 		"eventStormingDrawingHitProvider"
 	],
-	eventStormingDrawTool: ["type", sr],
-	eventStormingDrawingHandles: ["type", lr],
-	eventStormingDrawingHitProvider: ["type", ur]
-}, pr = class {
+	eventStormingDrawTool: ["type", fr],
+	eventStormingDrawingHandles: ["type", mr],
+	eventStormingDrawingHitProvider: ["type", hr]
+}, vr = class {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		e.on("resize.start", 1500, (e) => {
 			let t = e.context;
-			je(t.shape) && (t.minDimensions = E);
+			Oe(t.shape) && (t.minDimensions = A);
 		});
 	}
-}, mr = {
-	__depends__: [ge],
+}, yr = {
+	__depends__: [ye],
 	__init__: ["eventStormingResizeBehavior"],
-	eventStormingResizeBehavior: ["type", pr]
-}, hr = class extends yt {
+	eventStormingResizeBehavior: ["type", vr]
+}, br = class extends W {
 	_getModules() {
 		return [
 			...super._getModules(),
-			b,
-			ie,
-			x,
-			ee,
 			te,
+			se,
 			ne,
 			re,
+			ie,
 			ae,
 			oe,
-			Pt,
-			xt,
-			zt,
-			Vt,
-			Zt,
+			ce,
+			le,
 			Sn,
-			Gn,
-			Zn,
 			tn,
-			tr,
-			ir,
-			Ft,
-			ar,
-			fr,
-			mr
+			Vt,
+			sn,
+			ln,
+			mn,
+			Tn,
+			Yn,
+			nr,
+			vn,
+			or,
+			lr,
+			nn,
+			ur,
+			_r,
+			yr
 		];
 	}
 	undo() {
@@ -2518,8 +2743,427 @@ var fr = {
 	canRedo() {
 		return this.get("commandStack").canRedo();
 	}
-};
+}, xr = "event-storming";
+function Sr(e = {}) {
+	return Tr(new br({
+		...wr(e),
+		undoRedoKeys: e.undoRedoKeys ?? !0,
+		freeArea: R(e)
+	}), !0);
+}
+function Cr(e = {}) {
+	return Tr(new W(wr(e)), !1);
+}
+function wr(e) {
+	return {
+		width: "100%",
+		height: "100%",
+		additionalModules: e.additionalModules ?? [],
+		fitOnImport: e.fitOnImport ?? !0
+	};
+}
+function Tr(e, t) {
+	let n = e.get("eventBus"), r = e.get("canvas"), i = e.get("elementRegistry"), a = e.get("selection"), o = /* @__PURE__ */ new Set(), s = 0, c = !1, l = "", u = {
+		notation: xr,
+		apiVersion: be,
+		editable: t
+	};
+	return t && n.on("commandStack.changed", () => {
+		if (!(s > 0)) for (let e of [...o]) e();
+	}), {
+		meta: u,
+		elements: {
+			list: () => c ? [] : i.getAll().filter(Y).map((e) => Or(e)),
+			reveal(e) {
+				if (c) return !1;
+				let t = i.get(e);
+				return Y(t) ? (a.select(t), r.scrollToElement(t), !0) : !1;
+			},
+			selection: () => c ? [] : Er(a.get()),
+			onSelection(e) {
+				let t = (t) => e(Er(t.newSelection ?? []));
+				return n.on("selection.changed", t), () => n.off("selection.changed", t);
+			},
+			bounds(e) {
+				if (c) return;
+				let t = i.get(e);
+				return Y(t) ? Dr(t) : void 0;
+			}
+		},
+		diagram: e,
+		attachTo(t) {
+			e.attachTo(t);
+		},
+		async importText(t) {
+			if (c) throw Error("The modeler was destroyed.");
+			s += 1;
+			try {
+				let { warnings: n } = await e.importDSL(t);
+				return { warnings: n.map(Lt) };
+			} finally {
+				--s;
+			}
+		},
+		exportText() {
+			return c ? l : e.exportDSL();
+		},
+		onContentChanged(e) {
+			return t ? (o.add(e), () => o.delete(e)) : () => void 0;
+		},
+		getViewState() {
+			if (!c) try {
+				let { x: e, y: t, width: n, height: i } = r.viewbox(), a = {
+					x: e,
+					y: t,
+					width: n,
+					height: i
+				};
+				return kr(a) ? a : void 0;
+			} catch {
+				return;
+			}
+		},
+		setViewState(e) {
+			!c && kr(e) && r.viewbox({
+				x: e.x,
+				y: e.y,
+				width: e.width,
+				height: e.height
+			});
+		},
+		destroy() {
+			if (!c) {
+				try {
+					l = e.exportDSL();
+				} catch {
+					l = "";
+				}
+				c = !0, o.clear(), e.destroy();
+			}
+		}
+	};
+}
+function Y(e) {
+	return w(e);
+}
+function Er(e) {
+	return e.filter(Y).map((e) => e.id);
+}
+function Dr(e) {
+	return {
+		x: e.x,
+		y: e.y,
+		width: e.width,
+		height: e.height
+	};
+}
+function Or(e) {
+	let t = e.eventStormingLabel;
+	return t ? {
+		id: e.id,
+		name: t
+	} : { id: e.id };
+}
+function kr(e) {
+	if (typeof e != "object" || !e) return !1;
+	let { x: t, y: n, width: r, height: i } = e;
+	return X(t) && X(n) && X(r) && X(i) && r > 0 && i > 0;
+}
+function X(e) {
+	return typeof e == "number" && Number.isFinite(e);
+}
+//#endregion
+//#region src/board-menu/menu.ts
+var Ar = "Export as .storm", jr = [
+	{
+		value: "big-picture",
+		label: "Big picture"
+	},
+	{
+		value: "process",
+		label: "Process modeling"
+	},
+	{
+		value: "design",
+		label: "Software design"
+	}
+];
+function Mr(e) {
+	return jr.some((t) => t.value === e);
+}
+function Z(e, t, n, r) {
+	return {
+		kind: "action",
+		id: e,
+		label: t,
+		...r ? { icon: r } : {},
+		...n.shortcut ? { shortcut: n.shortcut } : {},
+		onSelect: () => n.onSelect()
+	};
+}
+function Nr(e) {
+	let t = [Z("export-png", "Export as PNG", e.png, "file-image"), Z("export-svg", "Export as SVG", e.svg, "file-code-corner")];
+	return e.transparentPng && t.push(Z("export-png-transparent", "Export as PNG (4×, transparent)", e.transparentPng)), e.json && t.push(Z("export-json", "Export as JSON", e.json)), e.storm && t.push(Z("export-storm", Ar, e.storm)), t;
+}
+function Pr(e) {
+	return {
+		model: [{
+			kind: "radio",
+			id: "level",
+			label: "Level",
+			options: jr,
+			value: () => e.levels.getLevel(),
+			onSelect: (t) => {
+				Mr(t) && e.levels.setLevel(t);
+			}
+		}, {
+			kind: "checkbox",
+			id: "type-captions",
+			label: "Type captions",
+			keepEnabledWhenReadOnly: !0,
+			checked: () => e.typeCaptions.typeCaptionsVisible(),
+			onToggle: (t) => {
+				e.typeCaptions.setTypeCaptionsVisible(t), e.onTypeCaptionsToggled?.(t);
+			}
+		}],
+		export: Nr(e.exports),
+		help: [{
+			kind: "dialog",
+			id: "keyboard-shortcuts",
+			label: "Keyboard shortcuts…",
+			icon: "keyboard",
+			onSelect: () => e.showKeyboardShortcuts()
+		}]
+	};
+}
+//#endregion
+//#region src/board-menu/shortcuts.ts
+var Fr = [
+	"←",
+	"↑",
+	"→",
+	"↓"
+];
+function Ir(e, t, n) {
+	return t === "mac" ? `⌘${e}` : `${n.ctrl}+${e}`;
+}
+function Lr(e) {
+	try {
+		return new Intl.NumberFormat(e, { style: "percent" }).format(1);
+	} catch {
+		return new Intl.NumberFormat("en", { style: "percent" }).format(1);
+	}
+}
+function Rr(e, t) {
+	if (e === "mac") return {
+		zoomIn: "⌘+",
+		zoomOut: "⌘−",
+		zoomToActual: "⌘0",
+		fit: "⇧1"
+	};
+	let { ctrl: n, shift: r, plus: i, minus: a } = t;
+	return {
+		zoomIn: `${n}+${i}`,
+		zoomOut: `${n}+${a}`,
+		zoomToActual: `${n}+0`,
+		fit: `${r}+1`
+	};
+}
+function zr(e, t) {
+	if (e === "mac") return {
+		undo: ["⌘Z"],
+		redo: ["⌘⇧Z"],
+		selectAll: ["⌘A"],
+		copy: ["⌘C"],
+		paste: ["⌘V"],
+		duplicate: ["⌘D"],
+		remove: ["⌫"],
+		coarseMove: Fr.map((e) => `⇧${e}`),
+		lassoDrag: ["⇧ Drag"]
+	};
+	let { ctrl: n, shift: r } = t;
+	return {
+		undo: [`${n}+Z`],
+		redo: [`${n}+${r}+Z`, `${n}+Y`],
+		selectAll: [`${n}+A`],
+		copy: [`${n}+C`],
+		paste: [`${n}+V`],
+		duplicate: [`${n}+D`],
+		remove: ["Del", "Backspace"],
+		coarseMove: Fr.map((e) => `${r}+${e}`),
+		lassoDrag: [`${r}+Drag`]
+	};
+}
+function Br(e) {
+	let { platform: t, messages: n } = e;
+	return {
+		title: "File",
+		rows: [{
+			action: n.openFile ?? "Open…",
+			keys: [Ir("O", t, n.keyNames)]
+		}, {
+			action: Ar,
+			keys: [Ir("S", t, n.keyNames)]
+		}]
+	};
+}
+function Vr(e, t = {}) {
+	let { platform: n, messages: r } = e, i = Rr(n, r.keyNames), a = zr(n, r.keyNames);
+	return [
+		...t.fileKeys ? [Br(e)] : [],
+		{
+			title: "View",
+			rows: [
+				{
+					action: r.zoomIn,
+					keys: [i.zoomIn]
+				},
+				{
+					action: r.zoomOut,
+					keys: [i.zoomOut]
+				},
+				{
+					action: r.zoomToActual(Lr(e.lang)),
+					keys: [i.zoomToActual]
+				},
+				{
+					action: r.fit,
+					keys: [i.fit]
+				}
+			]
+		},
+		{
+			title: "Edit",
+			rows: [
+				{
+					action: "Undo",
+					keys: a.undo
+				},
+				{
+					action: "Redo",
+					keys: a.redo
+				},
+				{
+					action: "Select all",
+					keys: a.selectAll
+				},
+				{
+					action: "Copy",
+					keys: a.copy
+				},
+				{
+					action: "Paste",
+					keys: a.paste
+				},
+				{
+					action: "Duplicate",
+					keys: a.duplicate
+				},
+				{
+					action: "Delete",
+					keys: a.remove
+				},
+				{
+					action: "Move selection",
+					keys: Fr
+				},
+				{
+					action: "Move selection in large steps",
+					keys: a.coarseMove
+				}
+			]
+		},
+		{
+			title: "Tools",
+			rows: [
+				{
+					action: "Lasso",
+					keys: ["L"]
+				},
+				{
+					action: "Lasso by dragging",
+					keys: a.lassoDrag
+				},
+				{
+					action: "Domain event at the pointer",
+					keys: ["E"]
+				},
+				{
+					action: "Command at the pointer",
+					keys: ["C"]
+				},
+				{
+					action: "Finish a drawing",
+					keys: [
+						"Enter",
+						"Esc",
+						"Double-click"
+					]
+				}
+			]
+		}
+	];
+}
+//#endregion
+//#region src/board-menu/ShortcutsDialog.ts
+var Q = "event-storming-shortcuts", Hr = "event-storming-shortcuts-title";
+function $(e, t, n) {
+	let r = document.createElement(e);
+	return r.className = t, n !== void 0 && (r.textContent = n), r;
+}
+function Ur(e, t) {
+	let n = $("section", `${Q}-group`), r = `${Hr}-group-${t}`, i = $("h4", `${Q}-group-title`, e.title);
+	i.id = r;
+	let a = $("table", `${Q}-table`);
+	a.setAttribute("aria-labelledby", r);
+	let o = a.createTBody();
+	for (let t of e.rows) {
+		let e = o.insertRow(), n = $("th", `${Q}-action`, t.action);
+		n.scope = "row";
+		let r = $("td", `${Q}-keys`);
+		for (let e of t.keys) r.append($("kbd", `${Q}-key`, e));
+		e.append(n, r);
+	}
+	return n.append(i, a), n;
+}
+function Wr(e, t, n) {
+	let r = $("div", `${Q}-panel`), i = $("header", `${Q}-header`), a = $("h3", `${Q}-title`, "Keyboard shortcuts");
+	a.id = Hr;
+	let o = $("button", `${Q}-close`);
+	o.type = "button", o.setAttribute("aria-label", e.messages.close), o.innerHTML = q("x"), o.addEventListener("click", n), i.append(a, o);
+	let s = $("div", `${Q}-body`);
+	return s.append(...Vr(e, t).map(Ur)), r.append(i, s), r;
+}
+function Gr(e, t = {}) {
+	let n;
+	function r() {
+		let n = $("dialog", Q);
+		return n.setAttribute("aria-labelledby", Hr), n.append(Wr(e, t, () => n.close())), n.addEventListener("click", (e) => {
+			e.target === n && n.close();
+		}), n.addEventListener("close", () => {
+			e.menu.trigger.hidden || e.menu.trigger.focus({ preventScroll: !0 });
+		}), e.root.append(n), n;
+	}
+	return {
+		open() {
+			n ??= r(), n.open || n.showModal();
+		},
+		close() {
+			n?.close();
+		},
+		isOpen: () => n?.open === !0,
+		destroy() {
+			n?.remove(), n = void 0;
+		}
+	};
+}
+//#endregion
+//#region src/draw/icons.ts
+var Kr = "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z", qr = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z", Jr = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", Yr = "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z", Xr = "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z", Zr = "M4 7v2c0 .55-.45 1-1 1H2v2h1c.55 0 1 .45 1 1v2c0 1.65 1.35 3 3 3h1v-2H7c-.55 0-1-.45-1-1v-2c0-.84-.35-1.61-.92-2.18L4.85 12l.23-.82C5.65 10.61 6 9.84 6 9V7c0-.55.45-1 1-1h1V4H7C5.35 4 4 5.35 4 7zm16 3c-.55 0-1-.45-1-1V7c0-1.65-1.35-3-3-3h-1v2h1c.55 0 1 .45 1 1v2c0 .84.35 1.61.92 2.18l.23.82-.23.82c-.57.57-.92 1.34-.92 2.18v2c0 .55-.45 1-1 1h-1v2h1c1.65 0 3-1.35 3-3v-2c0-.55.45-1 1-1h1v-2h-1z", Qr = "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z", $r = "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z", ei = "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z", ti = "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z", ni = "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z", ri = "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z", ii = "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", ai = "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", oi = "M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z", si = "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z";
+function ci(e, t = 18) {
+	return `<svg viewBox="0 0 24 24" width="${t}" height="${t}" fill="currentColor" aria-hidden="true"><path d="${e}"/></svg>`;
+}
 //#endregion
-export { Le as BoardBounds, A as COLORS, er as EventStormingAppendBehavior, bt as EventStormingAttachBehavior, ye as EventStormingBaseViewer, rr as EventStormingColorPicker, Ne as EventStormingElementFactory, en as EventStormingElementSettingsProvider, ht as EventStormingExporter, mt as EventStormingImporter, Hn as EventStormingLabelEditing, Et as EventStormingModeling, $e as EventStormingRenderer, pr as EventStormingResizeBehavior, Rt as EventStormingRules, Be as EventStormingViewOptions, vn as ICON_ADD, cn as ICON_CODE, sn as ICON_DATA_OBJECT, Z as ICON_DELETE, ln as ICON_DOWNLOAD, X as ICON_EDIT, bn as ICON_EYE, yn as ICON_FIT, dn as ICON_FOLDER_OPEN, fn as ICON_IMAGE, _n as ICON_MENU, pn as ICON_NEW, nn as ICON_PERSON, on as ICON_REDO, un as ICON_SHARE, an as ICON_UNDO, S as MIRAGON, hr as Modeler, T as NOTE_STYLE, yt as NavigatedViewer, Y as POPUP_PROVIDER_ID, De as ROOT_ID, F as STICKY_KINDS, w as STICKY_STYLES, ze as VIEW_OPTIONS_CHANGED_EVENT, vt as Viewer, Re as boardBoundsModule, Vt as elementSnappingModule, tr as eventStormingAppendModule, xt as eventStormingAttachModule, ir as eventStormingColorPickerModule, Sn as eventStormingContextPadModule, ft as eventStormingDrawModule, Zn as eventStormingKeyboardModule, Fe as eventStormingModelModule, Pt as eventStormingModelingModule, Zt as eventStormingPaletteModule, tn as eventStormingPopupModule, mr as eventStormingResizeModule, zt as eventStormingRulesModule, V as eventStormingViewOptionsModule, Q as iconMarkup, _t as ioModule, ke as isAttachableKind, Ae as isAttachableSticky, P as isEventStormingConnection, N as isEventStormingShape, R as isHostKind, z as isHostSticky, L as isSticky, I as isStickyKind, Gn as labelEditingModule, C as parseNoteMarkdown, Se as plainNoteText, _e as saveSVG, xe as serializeNoteMarkdown };
+export { jr as BOARD_LEVELS, nt as BoardBounds, P as COLORS, xr as EVENT_STORMING_NOTATION, ar as EventStormingAppendBehavior, Bt as EventStormingAttachBehavior, qe as EventStormingBaseViewer, cr as EventStormingColorPicker, Qe as EventStormingElementFactory, _n as EventStormingElementSettingsProvider, Ft as EventStormingExporter, Pt as EventStormingImporter, Gn as EventStormingLabelEditing, qt as EventStormingModeling, xn as EventStormingReadOnly, vt as EventStormingRenderer, vr as EventStormingResizeBehavior, on as EventStormingRules, at as EventStormingViewOptions, ai as ICON_ADD, Qr as ICON_CODE, Zr as ICON_DATA_OBJECT, Jr as ICON_DELETE, $r as ICON_DOWNLOAD, qr as ICON_EDIT, si as ICON_EYE, oi as ICON_FIT, ti as ICON_FOLDER_OPEN, ni as ICON_IMAGE, ii as ICON_MENU, ri as ICON_NEW, Kr as ICON_PERSON, Xr as ICON_REDO, ei as ICON_SHARE, Yr as ICON_UNDO, E as MIRAGON, br as Modeler, k as NOTE_STYLE, W as NavigatedViewer, G as POPUP_PROVIDER_ID, K as READ_ONLY_CHANGED_EVENT, y as ROOT_ID, S as STICKY_KINDS, O as STICKY_STYLES, Ar as STORM_EXPORT_LABEL, it as VIEW_OPTIONS_CHANGED_EVENT, zt as Viewer, rt as boardBoundsModule, Pr as boardMenu, Vr as boardShortcuts, Ir as commandKeyLabel, Sr as createCollaborativeModeler, Cr as createCollaborativeViewer, Gr as createShortcutsDialog, ln as elementSnappingModule, or as eventStormingAppendModule, Vt as eventStormingAttachModule, lr as eventStormingColorPickerModule, Tn as eventStormingContextPadModule, jt as eventStormingDrawModule, nr as eventStormingKeyboardModule, et as eventStormingModelModule, tn as eventStormingModelingModule, mn as eventStormingPaletteModule, vn as eventStormingPopupModule, Sn as eventStormingReadOnlyModule, yr as eventStormingResizeModule, sn as eventStormingRulesModule, V as eventStormingViewOptionsModule, ci as iconMarkup, Lt as importWarningText, Rt as ioModule, we as isAttachableKind, Ee as isAttachableSticky, x as isEventStormingConnection, b as isEventStormingShape, Te as isHostKind, De as isHostSticky, w as isSticky, C as isStickyKind, Yn as labelEditingModule, D as parseNoteMarkdown, je as plainNoteText, Se as saveSVG, Ae as serializeNoteMarkdown };
 
 //# sourceMappingURL=index.js.map