@miragon/event-storming-renderer 0.4.1 → 0.5.1

package/dist/index.js

@@ -1,11 +1,11 @@
 import e from "diagram-js/lib/Diagram";
 import { ATTACHABLE_STICKY_KINDS as t, CURRENT_SCHEMA_VERSION as n, DEFAULT_BOARD_LEVEL as r, DEFAULT_BOARD_SIZE as i, HOST_STICKY_KINDS as a, LEVEL_STICKY_KINDS as o, assertDrawable as s, validateBoard as c } from "@miragon/event-storming-schema-model";
 import { parseDSLWithDiagnostics as l, serializeDSL as u } from "@miragon/event-storming-dsl";
-import d from "diagram-js/lib/features/change-support";
-import f from "diagram-js/lib/draw/BaseRenderer";
-import { append as p, attr as m, create as h, remove as g } from "tiny-svg";
-import _ from "diagram-js/lib/features/selection";
-import ee from "diagram-js/lib/navigation/zoomscroll";
+import d from "diagram-js/lib/draw/BaseRenderer";
+import { append as f, attr as p, create as m, remove as h } from "tiny-svg";
+import g from "diagram-js/lib/features/change-support";
+import ee from "diagram-js/lib/features/selection";
+import _ from "diagram-js/lib/navigation/zoomscroll";
 import te from "diagram-js/lib/navigation/movecanvas";
 import ne from "diagram-js/lib/features/keyboard";
 import re from "diagram-js/lib/features/modeling";
@@ -28,7 +28,7 @@ import ye from "diagram-js/lib/features/connection-preview";
 import be from "diagram-js/lib/features/ordering/OrderingProvider";
 import xe from "diagram-js/lib/features/resize";
 import { MODELER_API_VERSION as Se } from "@miragon/modeler-api";
-//#region src/io/saveSvg.ts
+// src/io/saveSvg.ts
 var Ce = [
 	"tabindex",
 	"role",
@@ -49,8 +49,7 @@ function we(e, t) {
 	let o = r.querySelector(".viewport");
 	return o && o.removeAttribute("transform"), { svg: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + new XMLSerializer().serializeToString(r) };
 }
-//#endregion
-//#region src/model/di-types.ts
+// src/model/di-types.ts
 var v = "event-storming-root";
 function Te(e) {
 	return typeof e == "object" && !!e;
@@ -77,27 +76,26 @@ function S(e) {
 function C(e) {
 	return y(e) && S(e.eventStormingType);
 }
-function w(e) {
+function Ee(e) {
 	return t.includes(e);
 }
-function T(e) {
+function De(e) {
 	return a.includes(e);
 }
-function Ee(e) {
-	return y(e) && w(e.eventStormingType);
+function Oe(e) {
+	return y(e) && Ee(e.eventStormingType);
 }
-function E(e) {
-	return y(e) && T(e.eventStormingType);
+function ke(e) {
+	return y(e) && De(e.eventStormingType);
 }
-function D(e) {
+function w(e) {
 	return y(e) && e.eventStormingType === "drawing";
 }
-function De(e) {
+function Ae(e) {
 	return y(e) && e.eventStormingType === "note";
 }
-//#endregion
-//#region src/theme/palette.ts
-var O = {
+// src/theme/palette.ts
+var T = {
 	blau: "#335DE5",
 	blauLink: "#2B50D4",
 	blauHell: "#6B8AFF",
@@ -106,13 +104,15 @@ var O = {
 	schwarz: "#1D1D1D",
 	weiss: "#FFFFFF",
 	linie: "#E6E2E2",
+	kontur: "#8F8A8A",
+	textLeise: "#6B6666",
 	success: "#00E676",
 	warning: "#FFB000",
 	danger: "#CD1839",
 	info: "#335DE5",
 	navy: "#080A20",
 	gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
-}, Oe = [
+}, je = [
 	{
 		marker: "***",
 		bold: !0,
@@ -129,28 +129,28 @@ var O = {
 		italic: !0
 	}
 ];
-function k(e) {
+function E(e) {
 	return e.split("\n").map((e) => {
 		let t = e.startsWith("- ");
 		return {
 			bullet: t,
-			runs: je(t ? e.slice(2) : e)
+			runs: Pe(t ? e.slice(2) : e)
 		};
 	});
 }
-function ke(e) {
+function Me(e) {
 	return e.map((e) => {
-		let t = Ne(e.runs).map((e) => {
+		let t = Ie(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 Ae(e) {
-	return k(e).map((e) => (e.bullet ? "• " : "") + e.runs.map((e) => e.text).join("")).join("\n");
+function Ne(e) {
+	return E(e).map((e) => (e.bullet ? "• " : "") + e.runs.map((e) => e.text).join("")).join("\n");
 }
-function je(e) {
+function Pe(e) {
 	let t = [], n = "", r = () => {
 		n && t.push({
 			text: n,
@@ -159,17 +159,17 @@ function je(e) {
 		}), n = "";
 	}, i = 0;
 	for (; i < e.length;) {
-		let a = e[i] === "*" ? Me(e, i) : void 0;
+		let a = e[i] === "*" ? Fe(e, i) : void 0;
 		a ? (r(), t.push({
 			text: a.content,
 			bold: a.bold,
 			italic: a.italic
 		}), i = a.end) : (n += e[i], i++);
 	}
-	return r(), Ne(t);
+	return r(), Ie(t);
 }
-function Me(e, t) {
-	for (let { marker: n, bold: r, italic: i } of Oe) {
+function Fe(e, t) {
+	for (let { marker: n, bold: r, italic: i } of je) {
 		if (!e.startsWith(n, t)) continue;
 		let a = e.indexOf(n, t + n.length);
 		if (!(a <= t + n.length)) return {
@@ -180,7 +180,7 @@ function Me(e, t) {
 		};
 	}
 }
-function Ne(e) {
+function Ie(e) {
 	let t = [];
 	for (let n of e) {
 		if (!n.text) continue;
@@ -193,36 +193,35 @@ function Ne(e) {
 	}
 	return t;
 }
-//#endregion
-//#region src/draw/styles.ts
-var A = {
+// src/draw/styles.ts
+var D = {
 	event: {
 		label: "Domain Event",
 		width: 130,
 		height: 90,
 		fill: "#FFB84D",
-		stroke: "#E89A2E"
+		stroke: "#CA7E16"
 	},
 	command: {
 		label: "Command",
 		width: 130,
 		height: 90,
 		fill: "#7EC8F0",
-		stroke: "#4FA8D8"
+		stroke: "#2F98D1"
 	},
 	actor: {
 		label: "Actor",
 		width: 100,
 		height: 65,
 		fill: "#FFF9B1",
-		stroke: "#E6DB7A"
+		stroke: "#9E911E"
 	},
 	aggregate: {
 		label: "Aggregate",
 		width: 180,
 		height: 110,
 		fill: "#FFE066",
-		stroke: "#E0BE3F"
+		stroke: "#AB8C1C"
 	},
 	policy: {
 		label: "Policy",
@@ -236,14 +235,14 @@ var A = {
 		width: 130,
 		height: 90,
 		fill: "#A8D08D",
-		stroke: "#7FB35D"
+		stroke: "#6A9D4A"
 	},
 	external: {
 		label: "External System",
 		width: 180,
 		height: 110,
 		fill: "#F4A6C0",
-		stroke: "#DE7EA2"
+		stroke: "#D96C95"
 	},
 	hotspot: {
 		label: "Hotspot",
@@ -252,23 +251,32 @@ var A = {
 		fill: "#E85D75",
 		stroke: "#C43B55"
 	}
-}, j = {
+}, O = {
 	label: "Note",
 	fill: "#ECECEC",
-	stroke: "#C4C4C4"
-}, Pe = {
+	stroke: T.kontur
+}, k = {
+	fill: T.weiss,
+	stroke: T.kontur,
+	dash: "6 4"
+}, A = {
+	color: T.schwarz,
+	opacity: .2,
+	dy: 5,
+	blur: 5
+}, j = {
 	width: 60,
 	height: 40
-}, M = 7.5, Fe = {
-	width: A.aggregate.width,
-	height: A.aggregate.height
+}, M = 7.5, Le = {
+	width: D.aggregate.width,
+	height: D.aggregate.height
 };
 function N(e) {
-	let t = Ae(e), n = (t && t.length ? t : "note").split("\n"), r = Math.max(1, ...n.map((e) => e.length));
+	let t = Ne(e), n = (t && t.length ? t : "note").split("\n"), r = Math.max(1, ...n.map((e) => e.length));
 	return {
 		lines: n,
-		width: Math.max(Fe.width, Math.round(r * M) + 16),
-		height: Math.max(Fe.height, n.length * 17 + 16)
+		width: Math.max(Le.width, Math.round(r * M) + 16),
+		height: Math.max(Le.height, n.length * 17 + 16)
 	};
 }
 function P(e, t) {
@@ -276,104 +284,306 @@ function P(e, t) {
 	return t.width !== n.width || t.height !== n.height;
 }
 var F = {
-	paper: O.grau,
-	ink: O.schwarz,
-	inkSoft: "#5B5B5B",
-	surface: O.weiss,
-	stroke: O.schwarz,
-	arrow: "#9E9E9E",
-	accent: O.blau,
+	paper: T.grau,
+	ink: T.schwarz,
+	inkSoft: T.textLeise,
+	surface: T.weiss,
+	stroke: T.schwarz,
+	arrow: T.kontur,
+	accent: T.blau,
 	accentSoft: "rgba(51,93,229,0.12)",
-	stickyText: O.schwarz
-}, I = O.schwarz, L = {
+	stickyText: T.schwarz
+}, I = T.schwarz, L = {
 	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13
-}, 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>`, R = {
-	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(j.fill, j.stroke)
+}, Re = "geometricPrecision", ze = `italic 11px ${L.family}`;
+function R(e) {
+	return {
+		x: e.x + e.width / 2,
+		y: e.y + e.height / 2
+	};
+}
+function Be(e, t) {
+	let n = R(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));
+	return {
+		x: n.x + r * s,
+		y: n.y + i * s
+	};
+}
+function Ve(e) {
+	let t = e.source, n = e.target, r = e.waypoints;
+	if (!t || !n) {
+		let e = r[0] ?? {
+			x: 0,
+			y: 0
+		};
+		return [e, r[r.length - 1] ?? e];
+	}
+	let i = R(t), a = R(n), o = Be(t, a), s = Be(n, i);
+	return (a.x - i.x) * (s.x - o.x) + (a.y - i.y) * (s.y - o.y) <= 0 ? [i, a] : [o, s];
+}
+function He(e) {
+	let [t, n] = Ve(e);
+	return {
+		x: (t.x + n.x) / 2,
+		y: (t.y + n.y) / 2 - 5
+	};
+}
+function Ue(e) {
+	if (e.eventStormingType !== "hotspot") return {
+		x: e.x,
+		y: e.y,
+		width: e.width,
+		height: e.height
+	};
+	let t = Math.abs(-3 * Math.PI / 180), n = e.width * Math.cos(t) + e.height * Math.sin(t), r = e.width * Math.sin(t) + e.height * Math.cos(t), i = R(e);
+	return {
+		x: i.x - n / 2,
+		y: i.y - r / 2,
+		width: n,
+		height: r
+	};
+}
+function We(e) {
+	if (!e.linkLabel) return;
+	let t = He(e), { advance: n, left: r, right: i, ascent: a, descent: o } = Ye(e.linkLabel);
+	return {
+		x: t.x - n / 2 + r,
+		y: t.y - a,
+		width: i - r,
+		height: a + o
+	};
+}
+var Ge;
+function Ke() {
+	return Ge ??= typeof document < "u" && typeof CanvasRenderingContext2D < "u" ? document.createElement("canvas").getContext("2d") : null, Ge;
+}
+function qe(e) {
+	if (e.length === 0 || typeof document > "u" || !("fonts" in document)) return;
+	let t = e.join(" ");
+	if (!document.fonts.check(ze, t)) return document.fonts.load(ze, t).then(() => void 0, () => void 0);
+}
+function Je(e) {
+	return e.replace(/[ \t\n\r]+/g, " ").replace(/^ | $/g, "");
+}
+function Ye(e) {
+	let t = Je(e), n = Ke();
+	if (!n) {
+		let e = t.length * 11 * (M / L.label);
+		return {
+			advance: e,
+			left: 0,
+			right: e,
+			ascent: 11,
+			descent: 11 / 4
+		};
+	}
+	n.font = ze, n.textRendering = Re;
+	let r = n.measureText(t);
+	return {
+		advance: r.width,
+		left: Math.min(0, -r.actualBoundingBoxLeft),
+		right: Math.max(r.width, r.actualBoundingBoxRight),
+		ascent: r.fontBoundingBoxAscent,
+		descent: r.fontBoundingBoxDescent
+	};
+}
+// src/draw/palette-icons.ts
+var Xe = (e) => `<svg width="24" height="24" viewBox="0 0 24 24" class="event-storming-palette-svg">${e}</svg>`, Ze = (e, t, n = 0) => Xe(`<rect x="4" y="5" width="16" height="14" fill="${e}" stroke="${t}" stroke-width="1.5"${n ? ` transform="rotate(${n} 12 12)"` : ""}/>`), Qe = (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>`, z = {
+	draw: Qe("<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: Qe("<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: Ze(O.fill, O.stroke)
 };
 for (let e of x) {
-	let t = A[e];
-	R[e] = Le(t.fill, t.stroke, e === "hotspot" ? -6 : 0);
+	let t = D[e];
+	z[e] = Ze(t.fill, t.stroke, e === "hotspot" ? -6 : 0);
 }
-function ze(e, t) {
+function $e(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 z(e) {
+// src/keyboard/canvas-focus.ts
+function et(e) {
+	return e.getContainer().querySelector(":scope > svg");
+}
+function B(e) {
+	let t = et(e);
+	t ? t.focus({
+		preventScroll: !0,
+		focusVisible: !1
+	}) : e.focus();
+}
+// src/keyboard/key-scope.ts
+var tt = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
+function nt(e) {
+	return typeof e.key == "string" && !e.defaultPrevented && !e.isComposing;
+}
+function rt(e, t) {
+	let n = et(t);
+	return n !== null && e.target instanceof Node && n.contains(e.target);
+}
+function it(e) {
+	return e instanceof Element ? e.isContentEditable || e.editContext ? !0 : e.closest(tt) !== null : !1;
+}
+// src/keyboard/EventStormingKeyboard.ts
+var at = 2, ot = 10, st = {
+	arrowleft: {
+		x: -1,
+		y: 0
+	},
+	arrowright: {
+		x: 1,
+		y: 0
+	},
+	arrowup: {
+		x: 0,
+		y: -1
+	},
+	arrowdown: {
+		x: 0,
+		y: 1
+	}
+}, ct = {
+	__init__: ["eventStormingKeyboard"],
+	eventStormingKeyboard: ["type", class {
+		static $inject = [
+			"config.eventStormingKeyboard",
+			"canvas",
+			"commandStack",
+			"selection",
+			"modeling",
+			"eventStormingCopyPaste",
+			"eventStormingElementFactory",
+			"create",
+			"mouse",
+			"lassoTool",
+			"eventBus",
+			"elementRegistry",
+			"eventStormingReadOnly"
+		];
+		constructor(e, t, n, r, i, a, o, s, c, l, u, d, f) {
+			let p = e?.undoRedoKeys ?? !0, m = (e) => {
+				nt(e) && rt(e, t) && (h(e) || f?.isReadOnly() || g(e));
+			}, h = (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) => y(e) || b(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;
+			}, g = (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 (!p) 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 = l === "e" ? o.createNew("event", D.event.label) : o.createNew("command", D.command.label);
+						s.start(t, n);
+					}
+				} else if (l in st && !t) {
+					let t = r.get();
+					if (t.length) {
+						e.preventDefault();
+						let n = e.shiftKey ? ot : at, r = st[l];
+						i.moveElements(t, {
+							x: r.x * n,
+							y: r.y * n
+						});
+					}
+				}
+			};
+			document.addEventListener("keydown", m), u.on("diagram.destroy", () => document.removeEventListener("keydown", m));
+		}
+	}]
+};
+// src/palette/EventStormingPaletteProvider.ts
+function V(e) {
 	if (e.freeArea) return e.freeArea;
 	let t = e.freeRectInsets;
 	return t ? { insets: t } : void 0;
 }
-var Be = 24, B = "stickies-1", V = "stickies-2", Ve = "stickies-3", He = [
+var lt = 24, H = "stickies-1", U = "stickies-2", ut = "stickies-3", dt = [
 	{
 		key: "event",
 		type: "event",
-		label: A.event.label,
+		label: D.event.label,
 		title: "Domain event",
 		shortcut: "E",
-		group: B
+		group: H
 	},
 	{
 		key: "command",
 		type: "command",
-		label: A.command.label,
+		label: D.command.label,
 		title: "Command",
 		shortcut: "C",
-		group: B
+		group: H
 	},
 	{
 		key: "actor",
 		type: "actor",
-		label: A.actor.label,
+		label: D.actor.label,
 		title: "Actor",
-		group: B
+		group: H
 	},
 	{
 		key: "aggregate",
 		type: "aggregate",
-		label: A.aggregate.label,
+		label: D.aggregate.label,
 		title: "Aggregate",
-		group: B
+		group: H
 	},
 	{
 		key: "policy",
 		type: "policy",
-		label: A.policy.label,
+		label: D.policy.label,
 		title: "Policy",
-		group: V
+		group: U
 	},
 	{
 		key: "readmodel",
 		type: "readmodel",
-		label: A.readmodel.label,
+		label: D.readmodel.label,
 		title: "Read model",
-		group: V
+		group: U
 	},
 	{
 		key: "external",
 		type: "external",
-		label: A.external.label,
+		label: D.external.label,
 		title: "External system",
-		group: V
+		group: U
 	},
 	{
 		key: "hotspot",
 		type: "hotspot",
-		label: A.hotspot.label,
+		label: D.hotspot.label,
 		title: "Hotspot",
-		group: Ve
+		group: ut
 	},
 	{
 		key: "note",
 		type: "note",
-		label: j.label,
+		label: O.label,
 		title: "Note",
-		group: Ve
+		group: ut
 	}
-], Ue = class {
+], ft = class {
 	create;
 	factory;
 	lassoTool;
@@ -413,26 +623,26 @@ var Be = 24, B = "stickies-1", V = "stickies-2", Ve = "stickies-3", He = [
 			group: "tools",
 			title: "Lasso",
 			shortcut: "L",
-			html: `<div class="entry event-storming-palette-entry">${R.lasso}</div>`,
-			action: { click: (e) => this.lassoTool.activateSelection(e) }
+			html: `<div class="entry event-storming-palette-entry">${z.lasso}</div>`,
+			action: { click: this.focusingCanvas((e) => this.lassoTool.activateSelection(e)) }
 		}, e["draw-tool"] = {
 			group: "tools",
 			title: "Draw",
-			html: `<div class="entry event-storming-palette-entry">${R.draw}</div>`,
-			action: { click: () => this.drawTool.toggle() }
+			html: `<div class="entry event-storming-palette-entry">${z.draw}</div>`,
+			action: { click: this.focusingCanvas(() => this.drawTool.toggle()) }
 		};
 		let t = o[this.eventStormingModeling.getLevel()];
-		for (let n of He) {
+		for (let n of dt) {
 			if (n.type !== "note" && !t.includes(n.type)) continue;
-			let r = (e) => {
+			let r = this.focusingCanvas((e) => {
 				let t = this.factory.createNew(n.type, n.label);
-				We(e) && this.placeInFreeRect(t) || this.create.start(e, t);
-			};
+				pt(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">${R[n.key]}</div>`,
+				html: `<div class="entry event-storming-palette-entry" draggable="true">${z[n.key]}</div>`,
 				action: {
 					dragstart: r,
 					click: r
@@ -441,16 +651,21 @@ var Be = 24, B = "stickies-1", V = "stickies-2", Ve = "stickies-3", He = [
 		}
 		return e;
 	}
+	focusingCanvas(e) {
+		return (t) => {
+			e(t), this.canvas && !pt(t) && B(this.canvas);
+		};
+	}
 	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(y).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;
+		for (; o(a);) a.x += lt, a.y += lt;
 		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 && z(this.config), n = t?.center?.();
+		let t = this.config && V(this.config), n = t?.center?.();
 		if (n) return {
 			x: n.x,
 			y: n.y
@@ -467,27 +682,30 @@ var Be = 24, B = "stickies-1", V = "stickies-2", Ve = "stickies-3", He = [
 		};
 	}
 };
-function We(e) {
+function pt(e) {
 	return e.type === "click" && e.detail === 0;
 }
-//#endregion
-//#region src/EventStormingBaseViewer.ts
-function Ge(e) {
+// src/EventStormingBaseViewer.ts
+function mt(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 Ke(e) {
+function ht(e) {
+	return e.edges.flatMap((e) => e.label ? [e.label] : []);
+}
+function gt(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var qe = class {
+var _t = class {
 	_diagram;
 	_container;
 	_options;
+	_waitingImport;
 	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;
+		return t.classList.add("event-storming-container"), t.style.width = gt(e.width ?? "100%"), t.style.height = gt(e.height ?? (e.container ? "100%" : "600px")), t;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
@@ -496,7 +714,7 @@ var qe = class {
 				canvas: { container: this._container },
 				modules: t,
 				eventStormingKeyboard: { undoRedoKeys: this._options.undoRedoKeys ?? !0 },
-				eventStormingPalette: { freeArea: z(this._options) },
+				eventStormingPalette: { freeArea: V(this._options) },
 				eventStormingImporter: { fitOnImport: this._options.fitOnImport ?? !0 }
 			});
 		}
@@ -513,11 +731,19 @@ var qe = class {
 	}
 	async importMap(e) {
 		let t = this._ensureDiagram(), n = t.get("eventBus"), r = t.get("eventStormingImporter");
-		Ge(e), s(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 };
+		mt(e), s(e);
+		let i = this._importTurn(e);
+		if (i && (await i, this._waitingImport === i && (this._waitingImport = void 0), this._diagram !== t)) throw Error("The viewer was destroyed during the import.");
+		let a = t.get("eventStormingLabelEditing", !1);
+		a?.suspend(), t.get("popupMenu", !1)?.close(), r.clear();
+		let o = r.import(e);
+		return t.get("commandStack", !1)?.clear(!1), n.fire("import.done", { warnings: o }), a?.resumeAfterImport(), { warnings: o };
+	}
+	_importTurn(e) {
+		let t = [this._waitingImport, qe(ht(e))].filter((e) => e !== void 0);
+		if (t.length === 0) return;
+		let n = Promise.all(t);
+		return this._waitingImport = n, n;
 	}
 	async importDSL(e) {
 		let t = this._ensureDiagram().get("eventBus");
@@ -540,6 +766,11 @@ var qe = class {
 	exportDSL() {
 		return u(this.exportMap());
 	}
+	contentBounds() {
+		if (!this._diagram) return;
+		let e = this._diagram.get("boardBounds");
+		return e.isEmpty() ? void 0 : e.contentBounds(0);
+	}
 	async saveSVG() {
 		return we(this.get("canvas"), this.get("boardBounds").contentBounds());
 	}
@@ -558,15 +789,14 @@ var qe = class {
 	get container() {
 		return this._container;
 	}
-}, Je = "0123456789abcdefghijklmnopqrstuvwxyz", Ye = 252;
-function Xe() {
+}, vt = "0123456789abcdefghijklmnopqrstuvwxyz", yt = 252;
+function bt() {
 	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]);
+	for (; e.length < 8;) for (let t of globalThis.crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(8))) t >= yt || e.length === 8 || (e += vt[t % 36]);
 	return e;
 }
-//#endregion
-//#region src/model/EventStormingElementFactory.ts
-var Ze = {
+// src/model/EventStormingElementFactory.ts
+var xt = {
 	event: "event",
 	command: "cmd",
 	actor: "actor",
@@ -577,7 +807,7 @@ var Ze = {
 	hotspot: "hot",
 	note: "note",
 	drawing: "draw"
-}, Qe = class {
+}, St = class {
 	elementFactory;
 	elementRegistry;
 	static $inject = ["elementFactory", "elementRegistry"];
@@ -596,15 +826,15 @@ var Ze = {
 		return `${e} ${n}`;
 	}
 	allocateId(e, t) {
-		let n = Ze[e];
+		let n = xt[e];
 		for (;;) {
-			let e = `${n}_${Xe()}`;
+			let e = `${n}_${bt()}`;
 			if (!this.elementRegistry.get(e) && !t?.has(e)) return e;
 		}
 	}
 	createSticky(e) {
 		if (!S(e.elementType)) throw Error(`not a sticky kind: ${e.elementType}`);
-		let { width: t, height: n } = A[e.elementType];
+		let { width: t, height: n } = D[e.elementType];
 		return this.elementFactory.createShape({
 			id: e.id,
 			x: e.position.x - t / 2,
@@ -663,7 +893,7 @@ var Ze = {
 		});
 	}
 	createNew(e, t) {
-		let n = this.uniqueLabel(t), { width: r, height: i } = S(e) ? A[e] : N(n);
+		let n = this.uniqueLabel(t), { width: r, height: i } = S(e) ? D[e] : N(n);
 		return this.elementFactory.createShape({
 			id: this.allocateId(e),
 			width: r,
@@ -673,7 +903,7 @@ var Ze = {
 		});
 	}
 	createProvisional() {
-		let { width: e, height: t } = A.event;
+		let { width: e, height: t } = D.event;
 		return this.elementFactory.createShape({
 			id: this.allocateId("event"),
 			width: e,
@@ -688,101 +918,125 @@ var Ze = {
 			id: e.id,
 			source: t,
 			target: n,
-			waypoints: [$e(t), $e(n)],
+			waypoints: [Ct(t), Ct(n)],
 			eventStormingType: "arrow",
 			...e.label ? { linkLabel: e.label } : {},
 			businessObject: e
 		});
 	}
 };
-function $e(e) {
+function Ct(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
-//#endregion
-//#region src/model/index.ts
-var et = { eventStormingElementFactory: ["type", Qe] };
-//#endregion
-//#region src/board-bounds/BoardBounds.ts
-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";
+// src/model/index.ts
+var wt = { eventStormingElementFactory: ["type", St] }, Tt = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i, Et = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/;
+function W(e) {
+	if (!Tt.test(e)) return;
+	let t = e.length <= 5 ? [...e.slice(1)].map((e) => e + e).join("") : e.slice(1), n = (e) => parseInt(t.slice(e * 2, e * 2 + 2), 16);
+	return [
+		n(0),
+		n(1),
+		n(2),
+		t.length === 8 ? n(3) / 255 : 1
+	];
 }
-var nt = class {
-	elementRegistry;
-	static $inject = ["elementRegistry"];
-	constructor(e) {
-		this.elementRegistry = e;
-	}
-	contentBounds(e = 120) {
-		let t = this.positionedShapes();
-		if (!t.length) return {
-			x: 0,
-			y: 0,
-			...i
-		};
-		let n = Math.min(...t.map((e) => e.x)), r = Math.min(...t.map((e) => e.y)), a = Math.max(...t.map((e) => e.x + e.width)), o = Math.max(...t.map((e) => e.y + e.height));
-		return {
-			x: n - e,
-			y: r - e,
-			width: a - n + 2 * e,
-			height: o - r + 2 * e
-		};
-	}
-	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"];
-	_typeCaptionsVisible = !0;
-	constructor(e, t) {
-		this.eventBus = e, this.elementRegistry = t;
-	}
-	typeCaptionsVisible() {
-		return this._typeCaptionsVisible;
-	}
-	setTypeCaptionsVisible(e) {
-		if (e === this._typeCaptionsVisible) return;
-		this._typeCaptionsVisible = e, this.eventBus.fire(it, { typeCaptionsVisible: e });
-		let t = this.elementRegistry.filter(C);
-		t.length && this.eventBus.fire("elements.changed", { elements: t });
+var Dt;
+function Ot() {
+	return Dt ??= typeof document < "u" && typeof CanvasRenderingContext2D < "u" ? Object.assign(document.createElement("canvas"), {
+		width: 1,
+		height: 1
+	}).getContext("2d", { willReadFrequently: !0 }) : null, Dt;
+}
+function kt(e, t) {
+	e.fillStyle = T.grau, e.fillRect(0, 0, 1, 1), e.fillStyle = t, e.fillRect(0, 0, 1, 1);
+	let { data: n } = e.getImageData(0, 0, 1, 1);
+	return [
+		n[0],
+		n[1],
+		n[2],
+		1
+	];
+}
+function At(e) {
+	let t = Ot();
+	if (!t) return;
+	t.fillStyle = T.schwarz, t.fillStyle = e;
+	let n = String(t.fillStyle);
+	if (t.fillStyle = T.weiss, t.fillStyle = e, String(t.fillStyle) !== n) return;
+	let r = Et.exec(n);
+	if (r) {
+		let [, e, t, n, i] = r;
+		return [
+			Number(e),
+			Number(t),
+			Number(n),
+			i === void 0 ? 1 : Number(i)
+		];
 	}
-}, H = {
-	__depends__: [d],
-	eventStormingViewOptions: ["type", at]
-}, ot = 1500, st = -3, ct = "event-storming-kind-caption", lt = 9, ut = 300, dt = F.stickyText, ft = 7, pt = "#FBFBFB", mt = "#B9B9B9", ht = "6 4", gt = "event-storming-sticky-shadow";
-function _t(e) {
+	return W(n) ?? kt(t, e);
+}
+function jt(e) {
+	let t = e.trim();
+	return W(t) ?? At(t);
+}
+function Mt([e, t, n, r], i) {
+	let a = (e, t) => e * r + t * (1 - r);
+	return [
+		a(e, i[0]),
+		a(t, i[1]),
+		a(n, i[2]),
+		1
+	];
+}
+function Nt([e, t, n]) {
+	let r = (e) => {
+		let t = e / 255;
+		return t <= .04045 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * r(e) + .7152 * r(t) + .0722 * r(n);
+}
+function Pt(e, t) {
+	let [n, r] = [Nt(e), Nt(t)].sort((e, t) => t - e);
+	return (n + .05) / (r + .05);
+}
+var Ft = W(T.grau), It = W(T.schwarz), Lt = W(T.weiss);
+function Rt(e) {
+	let t = jt(e);
+	if (!t) return T.schwarz;
+	let n = Mt(t, Ft);
+	return Pt(n, Lt) > Pt(n, It) ? T.weiss : T.schwarz;
+}
+// src/draw/EventStormingRenderer.ts
+var zt = 1500, Bt = "event-storming-kind-caption", Vt = 9, Ht = 300, Ut = 7, Wt = "event-storming-sticky-shadow";
+function Gt(e) {
 	let t = e.closest("svg");
 	if (!t) return !1;
 	if (t.querySelector("#event-storming-sticky-shadow")) return !0;
-	let n = m(h("feDropShadow"), {
+	let n = p(m("feDropShadow"), {
 		dx: 0,
-		dy: 5,
-		stdDeviation: 5,
-		"flood-color": "#000000",
-		"flood-opacity": .2
-	}), r = m(h("filter"), {
-		id: gt,
+		dy: A.dy,
+		stdDeviation: A.blur,
+		"flood-color": A.color,
+		"flood-opacity": A.opacity
+	}), r = p(m("filter"), {
+		id: Wt,
 		x: "-40%",
 		y: "-40%",
 		width: "180%",
 		height: "180%"
 	});
-	p(r, n);
-	let i = h("defs");
-	return p(i, r), t.insertBefore(i, t.firstChild), !0;
+	f(r, n);
+	let i = m("defs");
+	return f(i, r), t.insertBefore(i, t.firstChild), !0;
 }
-var vt = class extends f {
+var Kt = class extends d {
 	viewOptions;
 	static $inject = ["eventBus", "eventStormingViewOptions"];
 	constructor(e, t) {
-		super(e, ot), this.viewOptions = t;
+		super(e, zt), this.viewOptions = t;
 	}
 	canRender(e) {
 		return y(e) || b(e);
@@ -792,7 +1046,7 @@ var vt = class extends f {
 		return n.eventStormingType === "drawing" ? this.drawDrawing(e, n) : this.drawSticky(e, n);
 	}
 	drawDrawing(e, t) {
-		let n = t.drawingPoints ?? [], r = t.strokeStyle === "dashed" ? "8 5" : t.strokeStyle === "dotted" ? "2 4" : void 0, i = m(h(t.closed ? "polygon" : "polyline"), {
+		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 ?? I,
@@ -801,50 +1055,52 @@ var vt = class extends f {
 			"stroke-linejoin": "round",
 			...r ? { "stroke-dasharray": r } : {}
 		});
-		return p(e, i), i;
+		return f(e, i), i;
 	}
 	drawSticky(e, t) {
-		let n = t.eventStormingType, r = S(n) ? A[n] : j, i = t.provisional === !0, a = e;
+		let n = t.eventStormingType, r = S(n) ? D[n] : O, i = t.provisional === !0, a = e;
 		if (n === "hotspot") {
-			let n = m(h("g"), { transform: `rotate(${st} ${t.width / 2} ${t.height / 2})` });
-			p(e, n), a = n;
+			let n = p(m("g"), { transform: `rotate(-3 ${t.width / 2} ${t.height / 2})` });
+			f(e, n), a = n;
 		}
-		let o = m(h("rect"), {
+		let o = t.color ?? r.fill, s = p(m("rect"), {
 			x: 0,
 			y: 0,
 			width: Math.max(t.width, 1),
 			height: Math.max(t.height, 1),
 			rx: 0,
-			fill: i ? pt : t.color ?? r.fill,
-			stroke: i ? mt : r.stroke,
+			fill: i ? k.fill : o,
+			stroke: i ? k.stroke : r.stroke,
 			"stroke-width": 1.5,
-			...i ? { "stroke-dasharray": ht } : {}
+			...i ? { "stroke-dasharray": k.dash } : {}
 		});
-		if (_t(e) && o.setAttribute("filter", `url(#${gt})`), p(a, o), i) return o;
-		if (n === "note" ? Ct(a, t) : bt(a, t), S(n) && this.viewOptions.typeCaptionsVisible()) {
-			let e = U(A[n].label, t.width / 2, t.height - ft, {
+		if (Gt(e) && s.setAttribute("filter", `url(#${Wt})`), f(a, s), i) return s;
+		let c = Rt(o);
+		if (n === "note" ? Zt(a, t, c) : Jt(a, t, c), S(n) && this.viewOptions.typeCaptionsVisible()) {
+			let e = nn(D[n].label, t.width / 2, t.height - Ut, {
 				"text-anchor": "middle",
-				"font-size": lt,
-				fill: dt
+				"font-size": Vt,
+				fill: c
 			});
-			e.setAttribute("class", ct), e.setAttribute("font-weight", String(ut)), p(a, e);
+			e.setAttribute("class", Bt), e.setAttribute("font-weight", String(Ht)), f(a, e);
 		}
-		return o;
+		return s;
 	}
 	drawConnection(e, t) {
-		let n = t, [r, i] = At(n), a = m(h("polyline"), {
+		let n = t, [r, i] = Ve(n), a = p(m("polyline"), {
 			points: `${r.x},${r.y} ${i.x},${i.y}`,
 			fill: "none",
 			stroke: F.arrow,
 			"stroke-width": 1.5,
 			"stroke-linecap": "round"
 		});
-		if (p(e, a), p(e, Ot(r, i, F.arrow, 11, 5)), n.linkLabel) {
-			let t = (r.x + i.x) / 2, a = (r.y + i.y) / 2;
-			p(e, U(n.linkLabel, t, a - 5, {
+		if (f(e, a), f(e, rn(r, i, F.arrow, 11, 5)), n.linkLabel) {
+			let t = He(n);
+			f(e, nn(n.linkLabel, t.x, t.y, {
 				"text-anchor": "middle",
 				"font-size": 11,
 				"font-style": "italic",
+				"text-rendering": Re,
 				fill: F.inkSoft
 			}));
 		}
@@ -859,7 +1115,7 @@ var vt = class extends f {
 		return t ? `M${t.x},${t.y}` + n.map((e) => `L${e.x},${e.y}`).join("") : "";
 	}
 };
-function yt(e, t) {
+function qt(e, t) {
 	let n = e.split(/\s+/).filter((e) => e.length);
 	if (!n.length) return [""];
 	let r = [], i = "";
@@ -876,51 +1132,51 @@ function yt(e, t) {
 	}
 	return r.push(i), r;
 }
-function bt(e, t) {
-	let n = t.width - 16, r = Math.max(1, Math.floor(n / M)), 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) => {
-		p(e, U(t, o, s + n * 17, {
+function Jt(e, t, n) {
+	let r = t.width - 16, i = Math.max(1, Math.floor(r / M)), a = Math.max(1, Math.floor((t.height - 16) / 17)), o = (t.eventStormingLabel ?? "").split("\n").flatMap((e) => qt(e, i)).slice(0, a), s = t.width / 2, c = t.height / 2 - (o.length - 1) * 17 / 2 + 4;
+	o.forEach((t, r) => {
+		f(e, nn(t, s, c + r * 17, {
 			"text-anchor": "middle",
-			fill: F.stickyText
+			fill: n
 		}));
 	});
 }
-var xt = 2, St = 12.5;
-function Ct(e, t) {
-	let n = t.width - 16, r = Math.max(1, Math.floor(n / M)), i = Math.max(1, Math.floor((t.height - 16) / 17)), a = k(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 = m(h("text"), {
-			x: i,
-			y: u + r * 17 + St,
+var Yt = 2, Xt = 12.5;
+function Zt(e, t, n) {
+	let r = t.width - 16, i = Math.max(1, Math.floor(r / M)), a = Math.max(1, Math.floor((t.height - 16) / 17)), o = E(t.eventStormingLabel ?? "").flatMap((e) => Qt(e, i)).slice(0, a), s = t.alignHorizontal ?? "left", c = t.alignVertical ?? "top", l = s === "left" ? "start" : s === "center" ? "middle" : "end", u = o.length * 17, d = c === "top" ? 8 : c === "middle" ? (t.height - u) / 2 : t.height - 8 - u;
+	o.forEach((r, i) => {
+		let a = s === "left" ? 8 + (r.indent ? 12 : 0) : s === "center" ? t.width / 2 : t.width - 8, o = p(m("text"), {
+			x: a,
+			y: d + i * 17 + Xt,
 			"font-family": L.family,
 			"font-size": L.label,
-			fill: F.stickyText,
-			"text-anchor": c
-		}), s = n.marker ? [{
+			fill: n,
+			"text-anchor": l
+		}), c = r.marker ? [{
 			text: "• ",
 			bold: !1,
 			italic: !1
-		}, ...n.runs] : n.runs;
-		for (let e of s) {
-			let t = h("tspan");
-			t.textContent = e.text, e.bold && t.setAttribute("font-weight", "600"), e.italic && t.setAttribute("font-style", "italic"), p(a, t);
+		}, ...r.runs] : r.runs;
+		for (let e of c) {
+			let t = m("tspan");
+			t.textContent = e.text, e.bold && t.setAttribute("font-weight", "600"), e.italic && t.setAttribute("font-style", "italic"), f(o, t);
 		}
-		p(e, a);
+		f(e, o);
 	});
 }
-function wt(e, t) {
-	let n = Math.max(1, t - (e.bullet ? xt : 0));
-	return Tt(e.runs, n).map((t, n) => ({
+function Qt(e, t) {
+	let n = Math.max(1, t - (e.bullet ? Yt : 0));
+	return $t(e.runs, n).map((t, n) => ({
 		runs: t,
 		marker: e.bullet && n === 0,
 		indent: e.bullet && n > 0
 	}));
 }
-function Tt(e, t) {
+function $t(e, t) {
 	let n = e.map((e) => e.text).join("");
-	return n.length <= t ? [e] : Et(n, t).map(([t, n]) => Dt(e, t, n));
+	return n.length <= t ? [e] : en(n, t).map(([t, n]) => tn(e, t, n));
 }
-function Et(e, t) {
+function en(e, t) {
 	let n = [...e.matchAll(/\S+/g)];
 	if (!n.length) return [[0, 0]];
 	let r = [], i = -1, a = -1, o = () => {
@@ -935,7 +1191,7 @@ function Et(e, t) {
 	}
 	return o(), r;
 }
-function Dt(e, t, n) {
+function tn(e, t, n) {
 	let r = [], i = 0;
 	for (let a of e) {
 		let e = i;
@@ -949,8 +1205,8 @@ function Dt(e, t, n) {
 	}
 	return r;
 }
-function U(e, t, n, r = {}) {
-	let i = m(h("text"), {
+function nn(e, t, n, r = {}) {
+	let i = p(m("text"), {
 		x: t,
 		y: n,
 		"font-family": L.family,
@@ -960,47 +1216,80 @@ function U(e, t, n, r = {}) {
 	});
 	return i.textContent = e, i;
 }
-function Ot(e, t, n, r = 10, i = 5) {
+function rn(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 m(h("polygon"), {
+	return p(m("polygon"), {
 		points: c,
 		fill: n
 	});
 }
-function W(e) {
-	return {
-		x: e.x + e.width / 2,
-		y: e.y + e.height / 2
-	};
-}
-function kt(e, t) {
-	let n = W(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));
-	return {
-		x: n.x + r * s,
-		y: n.y + i * s
-	};
+// src/view-options/EventStormingViewOptions.ts
+var an = "eventStorming.viewOptions.changed", on = class {
+	eventBus;
+	elementRegistry;
+	static $inject = ["eventBus", "elementRegistry"];
+	_typeCaptionsVisible = !0;
+	constructor(e, t) {
+		this.eventBus = e, this.elementRegistry = t;
+	}
+	typeCaptionsVisible() {
+		return this._typeCaptionsVisible;
+	}
+	setTypeCaptionsVisible(e) {
+		if (e === this._typeCaptionsVisible) return;
+		this._typeCaptionsVisible = e, this.eventBus.fire(an, { typeCaptionsVisible: e });
+		let t = this.elementRegistry.filter(C);
+		t.length && this.eventBus.fire("elements.changed", { elements: t });
+	}
+}, sn = {
+	__depends__: [g],
+	eventStormingViewOptions: ["type", on]
+}, cn = {
+	__depends__: [sn],
+	__init__: ["eventStormingRenderer"],
+	eventStormingRenderer: ["type", Kt]
+};
+// src/board-bounds/BoardBounds.ts
+function ln(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";
 }
-function At(e) {
-	let t = e.source, n = e.target, r = e.waypoints;
-	if (!t || !n) {
-		let e = r[0] ?? {
+var un = class {
+	elementRegistry;
+	static $inject = ["elementRegistry"];
+	constructor(e) {
+		this.elementRegistry = e;
+	}
+	contentBounds(e = 120) {
+		let t = this.drawnBoxes();
+		if (!t.length) return {
 			x: 0,
-			y: 0
+			y: 0,
+			...i
+		};
+		let n = Math.min(...t.map((e) => e.x)), r = Math.min(...t.map((e) => e.y)), a = Math.max(...t.map((e) => e.x + e.width)), o = Math.max(...t.map((e) => e.y + e.height));
+		return {
+			x: n - e,
+			y: r - e,
+			width: a - n + 2 * e,
+			height: o - r + 2 * e
 		};
-		return [e, r[r.length - 1] ?? e];
 	}
-	let i = W(t), a = W(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 jt = {
-	__depends__: [H],
-	__init__: ["eventStormingRenderer"],
-	eventStormingRenderer: ["type", vt]
-}, Mt = { drawing: 0 }, Nt = .001, Pt = class {
+	isEmpty() {
+		return this.positionedShapes().length === 0;
+	}
+	drawnBoxes() {
+		let e = this.positionedShapes().map(Ue);
+		for (let t of this.elementRegistry.getAll()) {
+			if (!b(t)) continue;
+			let n = We(t);
+			n && e.push(n);
+		}
+		return e;
+	}
+	positionedShapes() {
+		return this.elementRegistry.getAll().filter(ln);
+	}
+}, dn = { boardBounds: ["type", un] }, fn = { drawing: 0 }, pn = .001, mn = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -1028,7 +1317,7 @@ var jt = {
 			...e.rawPassthrough ? { rawPassthrough: e.rawPassthrough } : {}
 		}, 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");
+		let i = /* @__PURE__ */ new Map(), a = [...e.elements].sort((e, t) => (fn[e.elementType] ?? 9) - (fn[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, r), i.set(e.id, t);
@@ -1041,7 +1330,7 @@ var jt = {
 			let n = "attachedTo" in e ? e.attachedTo : void 0;
 			if (!n) continue;
 			let r = i.get(n);
-			!r || !E(r) ? t.push({
+			!r || !ke(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;
@@ -1072,7 +1361,7 @@ var jt = {
 			this.canvas.viewbox(e);
 			return;
 		}
-		let r = this.boardBounds.isEmpty() ? 1 : Math.max(Math.min(t / e.width, n / e.height, 1), Nt);
+		let r = this.boardBounds.isEmpty() ? 1 : Math.max(Math.min(t / e.width, n / e.height, 1), pn);
 		this.canvas.viewbox({
 			x: e.x + e.width / 2 - t / 2 / r,
 			y: e.y + e.height / 2 - n / 2 / r,
@@ -1097,7 +1386,7 @@ var jt = {
 			} catch {}
 		}
 	}
-}, Ft = class {
+}, hn = class {
 	elementRegistry;
 	static $inject = ["elementRegistry"];
 	constructor(e) {
@@ -1147,7 +1436,7 @@ var jt = {
 		let t = e.eventStormingType === "note" && P(e.eventStormingLabel, e) ? {
 			width: e.width,
 			height: e.height
-		} : void 0, n = e.eventStormingType === "note" ? It(e) : void 0;
+		} : void 0, n = e.eventStormingType === "note" ? gn(e) : void 0;
 		return {
 			id: e.id,
 			elementType: e.eventStormingType,
@@ -1163,71 +1452,68 @@ var jt = {
 		};
 	}
 };
-function It(e) {
+function gn(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 } : {},
 		...n ? { vertical: n } : {}
 	};
 }
-//#endregion
-//#region src/io/warnings.ts
-function Lt(e) {
+// src/io/warnings.ts
+function _n(e) {
 	return e.source === void 0 ? e.message : `${e.message} (“${e.source}”)`;
 }
-//#endregion
-//#region src/io/index.ts
-var Rt = {
-	eventStormingImporter: ["type", Pt],
-	eventStormingExporter: ["type", Ft]
-}, zt = class extends qe {
+// src/io/index.ts
+var vn = {
+	eventStormingImporter: ["type", mn],
+	eventStormingExporter: ["type", hn]
+}, yn = class extends _t {
 	_getModules() {
 		return [
-			et,
-			rt,
-			H,
-			jt,
-			Rt
+			wt,
+			dn,
+			sn,
+			cn,
+			vn
 		];
 	}
-}, Bt = class extends zt {
+}, bn = class extends yn {
 	_getModules() {
 		return [
 			...super._getModules(),
-			_,
 			ee,
+			_,
 			te,
 			ne
 		];
 	}
-}, Vt = class extends pe {
+}, xn = class extends pe {
 	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 && !w(i) && t.updateAttachment(a, void 0), a.attachers?.length && !T(i)) for (let e of [...a.attachers]) t.updateAttachment(e, void 0);
+			if (a.host && !Ee(i) && t.updateAttachment(a, void 0), a.attachers?.length && !De(i)) for (let e of [...a.attachers]) t.updateAttachment(e, void 0);
 		});
 	}
-}, Ht = {
+}, Sn = {
 	__depends__: [fe],
 	__init__: ["eventStormingAttachBehavior"],
-	eventStormingAttachBehavior: ["type", Vt]
+	eventStormingAttachBehavior: ["type", xn]
 };
-//#endregion
-//#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function Ut(e, t, n) {
+// src/modeling/cmd/UpdatePropertiesHandler.ts
+function Cn(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var Wt = [
+var wn = [
 	"x",
 	"y",
 	"width",
 	"height"
 ];
-function Gt(e, t) {
-	if (!t.some((e) => Wt.includes(e))) return [e];
+function Tn(e, t) {
+	if (!t.some((e) => wn.includes(e))) return [e];
 	let n = e;
 	return [
 		e,
@@ -1235,18 +1521,18 @@ function Gt(e, t) {
 		...n.outgoing ?? []
 	];
 }
-var Kt = class {
+var En = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], Ut(r, e, n[e]);
-		return e.oldProperties = i, Gt(t, Object.keys(n));
+		for (let e of Object.keys(n)) i[e] = r[e], Cn(r, e, n[e]);
+		return e.oldProperties = i, Tn(t, Object.keys(n));
 	}
 	revert(e) {
 		let { element: t, oldProperties: n } = e, r = t;
-		if (n) for (let e of Object.keys(n)) Ut(r, e, n[e]);
-		return Gt(t, Object.keys(n ?? {}));
+		if (n) for (let e of Object.keys(n)) Cn(r, e, n[e]);
+		return Tn(t, Object.keys(n ?? {}));
 	}
-}, qt = "element.updateProperties", Jt = class {
+}, Dn = "element.updateProperties", On = class {
 	commandStack;
 	canvas;
 	elementRegistry;
@@ -1256,10 +1542,10 @@ var Kt = class {
 		"elementRegistry"
 	];
 	constructor(e, t, n) {
-		this.commandStack = e, this.canvas = t, this.elementRegistry = n, e.registerHandler(qt, Kt);
+		this.commandStack = e, this.canvas = t, this.elementRegistry = n, e.registerHandler(Dn, En);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(qt, {
+		this.commandStack.execute(Dn, {
 			element: e,
 			properties: t
 		});
@@ -1279,7 +1565,7 @@ var Kt = class {
 	setStickyKind(e, t) {
 		if (!S(e.eventStormingType) || !S(t)) throw Error("setStickyKind: only sticky kinds can be retyped");
 		if (e.eventStormingType === t && !e.provisional) return;
-		let { width: n, height: r } = A[t], i = e.x + e.width / 2, a = e.y + e.height / 2;
+		let { width: n, height: r } = D[t], i = e.x + e.width / 2, a = e.y + e.height / 2;
 		this.updateProperties(e, {
 			eventStormingType: t,
 			...e.provisional ? { provisional: void 0 } : {},
@@ -1301,7 +1587,7 @@ var Kt = class {
 	setLevel(e) {
 		if (this.getLevel() === e) return;
 		let t = this.root(), n = t.businessObject ?? { config: { title: "Untitled Board" } };
-		this.commandStack.execute(qt, {
+		this.commandStack.execute(Dn, {
 			element: t,
 			properties: { businessObject: {
 				...n,
@@ -1315,7 +1601,7 @@ var Kt = class {
 	root() {
 		return this.elementRegistry.get("event-storming-root") ?? this.canvas.getRootElement();
 	}
-}, Yt = 24, Xt = [
+}, kn = 24, An = [
 	"eventStormingType",
 	"color",
 	"drawingPoints",
@@ -1323,8 +1609,8 @@ var Kt = class {
 	"strokeStyle",
 	"alignHorizontal",
 	"alignVertical"
-], Zt = ["eventStormingType", "linkLabel"];
-function Qt(e, t) {
+], jn = ["eventStormingType", "linkLabel"];
+function Mn(e, t) {
 	let n = {};
 	for (let r of t) {
 		let t = e[r];
@@ -1332,7 +1618,7 @@ function Qt(e, t) {
 	}
 	return n;
 }
-var $t = class {
+var Nn = class {
 	selection;
 	modeling;
 	elementFactory;
@@ -1364,14 +1650,14 @@ var $t = class {
 			i !== void 0 && a !== void 0 && (r.add(e), n.push({
 				sourceIdx: i,
 				targetIdx: a,
-				props: Qt(e, Zt)
+				props: Mn(e, jn)
 			}));
 		}
 		return this.clipboard = {
 			shapes: e.map((e) => {
 				let n = e.host ? t.get(e.host) : void 0;
 				return {
-					props: Qt(e, Xt),
+					props: Mn(e, An),
 					x: e.x,
 					y: e.y,
 					width: e.width,
@@ -1412,40 +1698,39 @@ var $t = class {
 				...structuredClone(e.props),
 				source: n[e.sourceIdx],
 				target: n[e.targetIdx],
-				waypoints: [en(n[e.sourceIdx]), en(n[e.targetIdx])]
+				waypoints: [Pn(n[e.sourceIdx]), Pn(n[e.targetIdx])]
 			}))
 		};
 	}
 	insertWithOffset(e) {
 		this.pasteCount++;
-		let t = Yt * this.pasteCount, n = tn(e.shapes), r = this.modeling.createElements([...e.shapes, ...e.connections], {
+		let t = kn * this.pasteCount, n = Fn(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 en(e) {
+function Pn(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
-function tn(e) {
+function Fn(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,
 		cy: (n + i) / 2
 	};
 }
-//#endregion
-//#region src/modeling/index.ts
-var nn = {
+// src/modeling/index.ts
+var In = {
 	__depends__: [me, ae],
 	__init__: ["eventStormingModeling"],
-	eventStormingModeling: ["type", Jt],
-	eventStormingCopyPaste: ["type", $t]
-}, rn = {
+	eventStormingModeling: ["type", On],
+	eventStormingCopyPaste: ["type", Nn]
+}, Ln = {
 	__depends__: [he],
 	__init__: ["eventStormingLassoBehavior"],
 	eventStormingLassoBehavior: ["type", class {
@@ -1469,15 +1754,14 @@ var nn = {
 		}
 	}]
 };
-//#endregion
-//#region src/rules/EventStormingRules.ts
-function an(e, t) {
+// src/rules/EventStormingRules.ts
+function Rn(e, t) {
 	return (e.outgoing ?? []).some((e) => e.target === t);
 }
-function on(e, t) {
-	return e.length !== 1 || !Ee(e[0]) || !E(t) ? !1 : "attach";
+function zn(e, t) {
+	return e.length !== 1 || !Oe(e[0]) || !ke(t) ? !1 : "attach";
 }
-var sn = class extends ge {
+var Bn = class extends ge {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		super(e);
@@ -1485,17 +1769,17 @@ var sn = class extends ge {
 	init() {
 		this.addRule("connection.start", (e) => C(e.source)), this.addRule("connection.create", (e) => {
 			let { source: t, target: n } = e;
-			return !C(t) || !C(n) || t === n || an(t, n) ? !1 : { eventStormingType: "arrow" };
-		}), this.addRule(["shape.move", "elements.move"], (e) => on(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 (!De(e.shape)) return !1;
+			return !C(t) || !C(n) || t === n || Rn(t, n) ? !1 : { eventStormingType: "arrow" };
+		}), this.addRule(["shape.move", "elements.move"], (e) => zn(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 (!Ae(e.shape)) return !1;
 			let { newBounds: t } = e;
-			return !t || t.width >= Pe.width && t.height >= Pe.height;
+			return !t || t.width >= j.width && t.height >= j.height;
 		});
 	}
-}, cn = {
+}, Vn = {
 	__init__: ["eventStormingRules"],
-	eventStormingRules: ["type", sn]
-}, ln = 8, un = {
+	eventStormingRules: ["type", Bn]
+}, Hn = 8, Un = {
 	__init__: ["elementSnapping"],
 	elementSnapping: ["type", class {
 		static $inject = ["eventBus", "elementRegistry"];
@@ -1507,7 +1791,7 @@ var sn = class extends ge {
 				let n, r = 9;
 				for (let i of t) {
 					let t = Math.abs(i - e);
-					t <= ln && t < r && (n = i, r = t);
+					t <= Hn && t < r && (n = i, r = t);
 				}
 				return n;
 			};
@@ -1539,7 +1823,7 @@ var sn = class extends ge {
 			});
 		}
 	}]
-}, dn = ".djs-palette-entries .entry", fn = "bottom", pn = class {
+}, Wn = ".djs-palette-entries .entry", Gn = "bottom", Kn = class {
 	palette;
 	hoverTooltip;
 	static $inject = [
@@ -1554,9 +1838,9 @@ var sn = class extends ge {
 	attachTo(e) {
 		this.refreshEntries(), this.hoverTooltip.add({
 			container: e,
-			selector: dn,
+			selector: Wn,
 			getContent: (e) => this.contentFor(e),
-			getPosition: (e) => mn(e)
+			getPosition: (e) => qn(e)
 		});
 	}
 	refreshEntries() {
@@ -1567,28 +1851,27 @@ var sn = class extends ge {
 		return t?.title ? ve`<${_e} title=${t.title} shortcut=${t.shortcut} />` : null;
 	}
 };
-function mn(e) {
+function qn(e) {
 	let t = e.getBoundingClientRect();
 	return {
 		x: t.left + t.width / 2,
 		y: t.bottom + 8,
-		placement: fn
+		placement: Gn
 	};
 }
-//#endregion
-//#region src/palette/index.ts
-var hn = {
+// src/palette/index.ts
+var Jn = {
 	__init__: ["eventStormingPaletteProvider", "paletteTooltip"],
-	eventStormingPaletteProvider: ["type", Ue],
-	paletteTooltip: ["type", pn]
-}, G = "event-storming-element-settings", gn = {
+	eventStormingPaletteProvider: ["type", ft],
+	paletteTooltip: ["type", Kn]
+}, G = "event-storming-element-settings", Yn = {
 	id: "kind",
 	name: "Change type"
 };
-function _n(e, t) {
+function Xn(e, t) {
 	return e ? `✓ ${t}` : t;
 }
-var vn = class {
+var Zn = class {
 	modeling;
 	static $inject = ["popupMenu", "eventStormingModeling"];
 	constructor(e, t) {
@@ -1602,20 +1885,20 @@ var vn = class {
 		let t = {}, n = e.provisional === !0, r = o[this.modeling.getLevel()];
 		for (let i of x) {
 			if (!r.includes(i) && (n || i !== e.eventStormingType)) continue;
-			let a = A[i];
+			let a = D[i];
 			t[`kind-${i}`] = {
-				label: n ? a.label : _n(e.eventStormingType === i, a.label),
-				imageHtml: ze(a.fill, a.stroke),
-				group: gn,
+				label: n ? a.label : Xn(e.eventStormingType === i, a.label),
+				imageHtml: $e(a.fill, a.stroke),
+				group: Yn,
 				action: () => this.modeling.setStickyKind(e, i)
 			};
 		}
 		return t;
 	}
-}, yn = {
+}, Qn = {
 	__init__: ["eventStormingElementSettings"],
-	eventStormingElementSettings: ["type", vn]
-}, K = "eventStorming.readOnly.changed", bn = 5e3, xn = [
+	eventStormingElementSettings: ["type", Zn]
+}, K = "eventStorming.readOnly.changed", $n = 5e3, er = [
 	"elements.move",
 	"shape.move",
 	"shape.resize",
@@ -1628,7 +1911,7 @@ var vn = class {
 	"connection.reconnect",
 	"connection.updateWaypoints",
 	"elements.delete"
-], Sn = class extends ge {
+], tr = class extends ge {
 	bus;
 	static $inject = ["eventBus"];
 	readOnly = !1;
@@ -1636,7 +1919,7 @@ var vn = class {
 		super(e), this.bus = e;
 	}
 	init() {
-		this.addRule(xn, bn, () => !this.readOnly && void 0);
+		this.addRule(er, $n, () => !this.readOnly && void 0);
 	}
 	isReadOnly() {
 		return this.readOnly;
@@ -1644,11 +1927,11 @@ var vn = class {
 	setReadOnly(e) {
 		this.readOnly !== e && (this.readOnly = e, this.bus.fire(K, { readOnly: e }));
 	}
-}, Cn = {
+}, nr = {
 	__depends__: [le],
 	__init__: ["eventStormingReadOnly"],
-	eventStormingReadOnly: ["type", Sn]
-}, wn = {
+	eventStormingReadOnly: ["type", tr]
+}, rr = {
 	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\"/>",
@@ -1668,17 +1951,15 @@ var vn = class {
 	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">${wn[e]}</svg>`;
+	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">${rr[e]}</svg>`;
 }
-//#endregion
-//#region src/context-pad/EventStormingContextPadProvider.ts
-var Tn = "Append sticky (auto-connect, choose the type after placing)";
+// src/context-pad/EventStormingContextPadProvider.ts
+var ir = "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 En = {
+// src/context-pad/index.ts
+var ar = {
 	__init__: ["eventStormingContextPadProvider"],
 	eventStormingContextPadProvider: ["type", class {
 		modeling;
@@ -1690,6 +1971,7 @@ var En = {
 		factory;
 		colorPicker;
 		readOnly;
+		canvas;
 		static $inject = [
 			"contextPad",
 			"modeling",
@@ -1701,10 +1983,11 @@ var En = {
 			"eventStormingElementFactory",
 			"eventStormingColorPicker",
 			"eventBus",
-			"eventStormingReadOnly"
+			"eventStormingReadOnly",
+			"canvas"
 		];
-		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) => {
+		constructor(e, t, n, r, i, a, o, s, c, l, u, d) {
+			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, this.canvas = d, e.registerProvider(this), l?.on(K, (t) => {
 				t.readOnly && e.close();
 			});
 		}
@@ -1723,29 +2006,29 @@ var En = {
 						group: "delete",
 						title: "Delete connection",
 						html: J("trash", "Delete connection"),
-						action: { click: () => this.modeling.removeElements([e]) }
+						action: { click: this.focusingCanvas(() => this.modeling.removeElements([e])) }
 					}
 				};
 			}
 			if (!y(e)) return {};
 			let t = e, n = {}, r = t.eventStormingType;
 			if (S(r)) {
-				let e = (e) => {
+				let e = this.focusingCanvas((e) => {
 					let n = this.factory.createProvisional();
 					this.create.start(e, n, { source: t });
-				};
+				});
 				n.append = {
 					group: "append",
-					title: Tn,
-					html: J("plus", Tn, !0),
+					title: ir,
+					html: J("plus", ir, !0),
 					action: {
 						click: e,
 						dragstart: e
 					}
 				};
-				let r = (e) => {
+				let r = this.focusingCanvas((e) => {
 					this.connect.start(e, t);
-				};
+				});
 				n.connect = {
 					group: "edit",
 					title: "Connect to existing sticky",
@@ -1773,7 +2056,7 @@ var En = {
 					group: "edit",
 					title: r,
 					html: J("line-style", r),
-					action: { click: () => this.eventStormingModeling.setStrokeStyle(t, e) }
+					action: { click: this.focusingCanvas(() => this.eventStormingModeling.setStrokeStyle(t, e)) }
 				};
 			}
 			return r === "drawing" && (n.color = {
@@ -1793,40 +2076,45 @@ var En = {
 				group: "delete",
 				title: "Delete",
 				html: J("trash", "Delete"),
-				action: { click: () => this.modeling.removeElements([t]) }
+				action: { click: this.focusingCanvas(() => this.modeling.removeElements([t])) }
 			}, n;
 		}
+		focusingCanvas(e) {
+			return (t) => {
+				e(t), this.canvas && B(this.canvas);
+			};
+		}
 	}]
-}, Dn = "bullet", On = [
+}, or = "bullet", sr = [
 	"left",
 	"center",
 	"right"
-], kn = [
+], cr = [
 	"top",
 	"middle",
 	"bottom"
 ];
-function An(e, t) {
+function lr(e, t) {
 	return e[(e.indexOf(t) + 1) % e.length];
 }
-function jn(e, t) {
+function ur(e, t) {
 	let n = e.ownerDocument;
 	e.textContent = "";
-	for (let r of k(t)) {
+	for (let r of E(t)) {
 		let t = n.createElement("div");
-		r.bullet && (t.className = Dn);
+		r.bullet && (t.className = or);
 		for (let e of r.runs) {
 			let r = n.createTextNode(e.text);
-			e.italic && (r = Mn(n, "i", r)), e.bold && (r = Mn(n, "b", r)), t.appendChild(r);
+			e.italic && (r = dr(n, "i", r)), e.bold && (r = dr(n, "b", r)), t.appendChild(r);
 		}
 		r.runs.length === 0 && t.appendChild(n.createElement("br")), e.appendChild(t);
 	}
 }
-function Mn(e, t, n) {
+function dr(e, t, n) {
 	let r = e.createElement(t);
 	return r.appendChild(n), r;
 }
-function Nn(e) {
+function fr(e) {
 	let t = [], n = null, r = (e) => (n = {
 		bullet: e,
 		runs: []
@@ -1847,11 +2135,11 @@ function Nn(e) {
 			s.nextSibling && r(!1);
 			return;
 		}
-		if (Pn(s.tagName)) {
+		if (pr(s.tagName)) {
 			a(s);
 			return;
 		}
-		let c = Fn(s, t, o);
+		let c = mr(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");
@@ -1859,12 +2147,12 @@ function Nn(e) {
 		n = null;
 	};
 	for (let t of e.childNodes) i(t, !1, !1);
-	return ke(t);
+	return Me(t);
 }
-function Pn(e) {
+function pr(e) {
 	return e === "DIV" || e === "P" || e === "LI";
 }
-function Fn(e, t, n) {
+function mr(e, t, n) {
 	let r = e.tagName;
 	(r === "B" || r === "STRONG") && (t = !0), (r === "I" || r === "EM") && (n = !0);
 	let i = e.style.fontWeight;
@@ -1875,13 +2163,13 @@ function Fn(e, t, n) {
 		italic: n
 	};
 }
-function In(e) {
+function hr(e) {
 	let t = e.ownerDocument, n = t.getSelection();
 	if (!n) return;
 	let r = t.createRange();
 	r.selectNodeContents(e), n.removeAllRanges(), n.addRange(r);
 }
-function Ln(e, t) {
+function gr(e, t) {
 	let n = e.ownerDocument;
 	if (typeof n.execCommand == "function" && n.execCommand("insertText", !1, t)) return;
 	let r = n.getSelection();
@@ -1892,24 +2180,24 @@ function Ln(e, t) {
 	let a = n.createTextNode(t);
 	i.insertNode(a), i.setStartAfter(a), i.collapse(!0), r.removeAllRanges(), r.addRange(i);
 }
-function Rn(e) {
+function _r(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 zn(e) {
-	Bn(e);
-	let t = Rn(e);
+function vr(e) {
+	yr(e);
+	let t = _r(e);
 	if (t.length === 0) return;
-	let n = t.every((e) => e.classList.contains(Dn));
-	for (let e of t) e.classList.toggle(Dn, !n);
+	let n = t.every((e) => e.classList.contains(or));
+	for (let e of t) e.classList.toggle(or, !n);
 }
-function Bn(e) {
+function yr(e) {
 	let t = e.ownerDocument, n = null;
-	for (let r of Array.from(e.childNodes)) r.nodeType === Node.ELEMENT_NODE && Pn(r.tagName) ? n = null : (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 && pr(r.tagName) ? n = null : (n || (n = t.createElement("div"), e.insertBefore(n, r)), n.appendChild(r));
 }
-var Vn = {
+var br = {
 	horizontal: {
 		left: "text-align-start",
 		center: "text-align-center",
@@ -1921,7 +2209,7 @@ var Vn = {
 		bottom: "align-vertical-justify-end"
 	}
 };
-function Hn(e, t) {
+function xr(e, t) {
 	let n = e.createElement("div");
 	n.className = "event-storming-note-toolbar";
 	let r = (r, i, a) => {
@@ -1932,19 +2220,18 @@ function Hn(e, t) {
 	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 Un(e, t, n) {
-	let r = Vn[t][n];
+function Sr(e, t, n) {
+	let r = br[t][n];
 	e.innerHTML = r ? q(r) : "", e.title = t === "horizontal" ? `Horizontal alignment: ${n} (click to cycle)` : `Vertical alignment: ${n} (click to cycle)`;
 }
-function Wn(e, t) {
+function Cr(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 Gn(e) {
+// src/label-editing/EventStormingLabelEditing.ts
+function wr(e) {
 	return e.replace(/(?<!:)\/\//g, "∕∕").replace(/\/\*/g, "∕*").replace(/->/g, "→").replace(/;/g, ",").replace(/\[/g, "(").replace(/\]/g, ")").trim();
 }
-var Kn = class {
+var Tr = class {
 	canvas;
 	modeling;
 	elementRegistry;
@@ -1987,7 +2274,7 @@ var Kn = class {
 			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)) : (jn(n, e.value), e.align && this.restoreNoteAlign?.(e.align), Jn(n)));
+		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)) : (ur(n, e.value), e.align && this.restoreNoteAlign?.(e.align), Dr(n)));
 	}
 	restoreNoteAlign;
 	activate(e) {
@@ -2007,7 +2294,7 @@ var Kn = class {
 			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 = Gn(n.value), r = t && t !== e.eventStormingLabel;
+			let t = wr(n.value), r = t && t !== e.eventStormingLabel;
 			a(), r && this.modeling.updateLabel(e, t);
 		}, s = (e) => {
 			if (e.key === "Escape") e.preventDefault(), a();
@@ -2034,43 +2321,43 @@ var Kn = class {
 	}
 	activateNote(e) {
 		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%)", jn(n, e.eventStormingLabel ?? "");
+		n.className = "event-storming-label-input event-storming-note-editor", n.contentEditable = "true", n.style.position = "absolute", n.style.transform = "translate(-50%, -50%)", ur(n, e.eventStormingLabel ?? "");
 		let r = {
 			horizontal: e.alignHorizontal ?? "left",
 			vertical: e.alignVertical ?? "top"
 		};
-		Wn(n, r);
-		let i = Hn(document, (e) => d(e));
+		Cr(n, r);
+		let i = xr(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(), In(n);
+		a(), t.appendChild(n), t.appendChild(i), n.focus(), hr(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));
 		}, c = () => {
-			s("note-bold", Yn("bold")), s("note-italic", Yn("italic"));
-			let e = Rn(n);
+			s("note-bold", Or("bold")), s("note-italic", Or("italic"));
+			let e = _r(n);
 			s("note-bullet", e.length > 0 && e.every((e) => e.classList.contains("bullet")));
 			let t = o("note-align-horizontal");
-			t && Un(t, "horizontal", r.horizontal);
+			t && Sr(t, "horizontal", r.horizontal);
 			let i = o("note-align-vertical");
-			i && Un(i, "vertical", r.vertical);
+			i && Sr(i, "vertical", r.vertical);
 		}, l = (e) => {
 			typeof document.execCommand == "function" && document.execCommand(e, !1), c();
 		}, u = (e) => {
-			e === "horizontal" ? r.horizontal = An(On, r.horizontal) : r.vertical = An(kn, r.vertical), Wn(n, r), c();
+			e === "horizontal" ? r.horizontal = lr(sr, r.horizontal) : r.vertical = lr(cr, r.vertical), Cr(n, r), c();
 		}, d = (e) => {
-			e === "note-bold" ? l("bold") : e === "note-italic" ? l("italic") : e === "note-bullet" ? (zn(n), c()) : u(e === "note-align-horizontal" ? "horizontal" : "vertical");
+			e === "note-bold" ? l("bold") : e === "note-italic" ? l("italic") : e === "note-bullet" ? (vr(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", ee), n.remove(), i.remove(), this.active = null, this.restoreNoteAlign = void 0, this.canvas.restoreFocus?.());
+			p || (p = !0, document.removeEventListener("selectionchange", f), n.removeEventListener("keydown", g), n.removeEventListener("blur", ee), n.removeEventListener("paste", _), n.remove(), i.remove(), this.active = null, this.restoreNoteAlign = void 0, this.canvas.restoreFocus?.());
 		}, h = () => {
 			if (p) return;
-			let t = qn(e, Gn(Nn(n)), r);
+			let t = Er(e, wr(fr(n)), r);
 			m(), t && this.modeling.updateProperties(e, t);
 		}, g = (e) => {
 			if (e.key === "Escape") {
@@ -2084,20 +2371,20 @@ var Kn = class {
 			}
 			let t = e.key.toLowerCase();
 			(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();
 		}, ee = (e) => {
+			e.relatedTarget instanceof Node && i.contains(e.relatedTarget) || h();
+		}, _ = (e) => {
 			e.preventDefault();
 			let t = e.clipboardData?.getData("text/plain") ?? "";
-			t && Ln(n, t);
+			t && gr(n, t);
 		};
-		n.addEventListener("keydown", g), n.addEventListener("blur", _), n.addEventListener("paste", ee), c(), this.restoreNoteAlign = (e) => {
-			r.horizontal = e.horizontal, r.vertical = e.vertical, Wn(n, r), c();
+		n.addEventListener("keydown", g), n.addEventListener("blur", ee), n.addEventListener("paste", _), c(), this.restoreNoteAlign = (e) => {
+			r.horizontal = e.horizontal, r.vertical = e.vertical, Cr(n, r), c();
 		};
 		let te = () => ({
 			elementId: e.id,
 			connection: !1,
-			value: Nn(n),
+			value: fr(n),
 			align: { ...r }
 		});
 		this.active = {
@@ -2123,7 +2410,7 @@ var Kn = class {
 			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 = Gn(i.value), n = e.linkLabel ?? "";
+			let t = wr(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());
@@ -2156,7 +2443,7 @@ var Kn = class {
 		};
 	}
 };
-function qn(e, t, n) {
+function Er(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 = {};
@@ -2166,13 +2453,13 @@ function qn(e, t, n) {
 	}
 	return i && (a.alignHorizontal = n.horizontal === "left" ? void 0 : n.horizontal, a.alignVertical = n.vertical === "top" ? void 0 : n.vertical), a;
 }
-function Jn(e) {
+function Dr(e) {
 	let t = document.createRange();
 	t.selectNodeContents(e), t.collapse(!1);
 	let n = window.getSelection();
 	n?.removeAllRanges(), n?.addRange(t);
 }
-function Yn(e) {
+function Or(e) {
 	if (typeof document.queryCommandState != "function") return !1;
 	try {
 		return document.queryCommandState(e);
@@ -2180,106 +2467,11 @@ function Yn(e) {
 		return !1;
 	}
 }
-//#endregion
-//#region src/label-editing/index.ts
-var Xn = {
+// src/label-editing/index.ts
+var kr = {
 	__init__: ["eventStormingLabelEditing"],
-	eventStormingLabelEditing: ["type", Kn]
-}, Zn = 2, Qn = 10, $n = {
-	arrowleft: {
-		x: -1,
-		y: 0
-	},
-	arrowright: {
-		x: 1,
-		y: 0
-	},
-	arrowup: {
-		x: 0,
-		y: -1
-	},
-	arrowdown: {
-		x: 0,
-		y: 1
-	}
-}, er = class {
-	static $inject = [
-		"config.eventStormingKeyboard",
-		"canvas",
-		"commandStack",
-		"selection",
-		"modeling",
-		"eventStormingCopyPaste",
-		"eventStormingElementFactory",
-		"create",
-		"mouse",
-		"lassoTool",
-		"eventBus",
-		"elementRegistry",
-		"eventStormingReadOnly"
-	];
-	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 || tr(e.target, p) && (nr(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) => y(e) || b(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 = l === "e" ? o.createNew("event", A.event.label) : o.createNew("command", A.command.label);
-					s.start(t, n);
-				}
-			} else if (l in $n && !t) {
-				let t = r.get();
-				if (t.length) {
-					e.preventDefault();
-					let n = e.shiftKey ? Qn : Zn, r = $n[l];
-					i.moveElements(t, {
-						x: r.x * n,
-						y: r.y * n
-					});
-				}
-			}
-		};
-		document.addEventListener("keydown", h), u.on("diagram.destroy", () => document.removeEventListener("keydown", h));
-	}
-};
-function tr(e, t) {
-	return e instanceof Node ? t.contains(e) || e === document.body || e === document.documentElement : !1;
-}
-function nr(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 rr = {
-	__init__: ["eventStormingKeyboard"],
-	eventStormingKeyboard: ["type", er]
-}, ir = 500, ar = 6, or = class {
+	eventStormingLabelEditing: ["type", Tr]
+}, Ar = 500, jr = 6, Mr = 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;
@@ -2312,14 +2504,14 @@ var rr = {
 			let n = o.getAbsoluteBBox(e), c = o.getContainer().getBoundingClientRect();
 			i.open(e, G, {
 				x: c.left + n.x,
-				y: c.top + n.y + n.height + ar
+				y: c.top + n.y + n.height + jr
 			}), i.isOpen() ? t.once("popupMenu.close", () => {
 				setTimeout(() => {
 					s || (e.provisional ? e.parent && a.removeElements([e]) : r?.activate(e));
 				}, 0);
 			}) : a.removeElements([e]);
 		};
-		t.on("create.end", ir, (e) => {
+		t.on("create.end", Ar, (e) => {
 			let { context: t } = e;
 			if (!t.source || !t.canExecute || !t.shape) return;
 			let n = t.shape;
@@ -2336,14 +2528,14 @@ var rr = {
 			} else r && setTimeout(() => r.activate(n), 0);
 		});
 	}
-}, sr = {
+}, Nr = {
 	__depends__: [ye],
 	__init__: ["eventStormingAppendBehavior"],
-	eventStormingAppendBehavior: ["type", or]
-}, cr = x.map((e) => ({
-	value: A[e].fill,
-	title: A[e].label
-})), lr = class {
+	eventStormingAppendBehavior: ["type", Mr]
+}, Pr = x.map((e) => ({
+	value: D[e].fill,
+	title: D[e].label
+})), Fr = class {
 	canvas;
 	modeling;
 	static $inject = [
@@ -2373,7 +2565,7 @@ var rr = {
 			value: void 0,
 			title: "No color",
 			cls: "event-storming-cp-none"
-		}, ...cr.map((e) => ({
+		}, ...Pr.map((e) => ({
 			value: e.value,
 			title: e.title,
 			cls: ""
@@ -2391,12 +2583,12 @@ var rr = {
 		}, 0);
 	}
 	close() {
-		this.popover && (this.popover.remove(), this.popover = void 0, document.removeEventListener("click", this.onDocPointer, !0), document.removeEventListener("keydown", this.onKey, !0));
+		this.popover && (this.popover.remove(), this.popover = void 0, document.removeEventListener("click", this.onDocPointer, !0), document.removeEventListener("keydown", this.onKey, !0), this.canvas.restoreFocus());
 	}
-}, ur = {
+}, Ir = {
 	__init__: ["eventStormingColorPicker"],
-	eventStormingColorPicker: ["type", lr]
-}, dr = {
+	eventStormingColorPicker: ["type", Fr]
+}, Lr = {
 	__init__: ["eventStormingOrderingProvider"],
 	eventStormingOrderingProvider: ["type", class extends be {
 		static $inject = ["eventBus"];
@@ -2407,14 +2599,14 @@ var rr = {
 			for (; t.parent;) t = t.parent;
 			let n = t.children ?? [];
 			if (b(e)) {
-				let r = n.filter((t) => t !== e && (D(t) || b(t))).length;
+				let r = n.filter((t) => t !== e && (w(t) || b(t))).length;
 				return {
 					parent: t,
 					index: r
 				};
 			}
-			if (D(e)) {
-				let r = n.filter((t) => t !== e && D(t)).length;
+			if (w(e)) {
+				let r = n.filter((t) => t !== e && w(t)).length;
 				return {
 					parent: t,
 					index: r
@@ -2423,7 +2615,7 @@ var rr = {
 			return { parent: t };
 		}
 	}]
-}, fr = 12, pr = class {
+}, Rr = 12, zr = class {
 	canvas;
 	eventBus;
 	modeling;
@@ -2498,16 +2690,20 @@ var rr = {
 	isChromeTarget(e) {
 		return !!e.target?.closest(".djs-palette, .djs-context-pad, .event-storming-color-picker");
 	}
+	ownsKey(e) {
+		let t = e.target;
+		return nt(e) && t instanceof Node && this.outerContainer().contains(t) && !it(t);
+	}
 	onMouseDown = (e) => {
 		if (e.button !== 0 || this.isChromeTarget(e)) return;
-		e.preventDefault(), e.stopPropagation();
+		e.preventDefault(), e.stopPropagation(), B(this.canvas);
 		let t = this.toCanvasPoint(e), n = this.points[0];
-		if (n && this.points.length >= 3 && mr(t, n) <= fr) {
+		if (n && this.points.length >= 3 && Br(t, n) <= Rr) {
 			this.finishClosed();
 			return;
 		}
 		let r = this.points[this.points.length - 1];
-		r && mr(t, r) <= fr ? this.points.length >= 2 && this.finish() : (this.points.push(t), this.renderPreview());
+		r && Br(t, r) <= Rr ? this.points.length >= 2 && this.finish() : (this.points.push(t), this.renderPreview());
 	};
 	onDblClick = (e) => {
 		this.isChromeTarget(e) || (e.preventDefault(), e.stopPropagation(), this.finish());
@@ -2516,12 +2712,12 @@ var rr = {
 		this.points.length && (this.cursor = this.toCanvasPoint(e), this.renderPreview());
 	};
 	onKeyDown = (e) => {
-		e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), this.points.length >= 2 ? this.finish() : this.cancel()) : e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), this.finish());
+		this.ownsKey(e) && (e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), this.points.length >= 2 ? this.finish() : this.cancel()) : e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), this.finish()));
 	};
 	renderPreview() {
 		if (this.clearPreview(), !this.points.length) return;
-		let e = this.canvas.getLayer("event-storming-draw-preview", 1e3), t = h("g"), n = this.cursor ? [...this.points, this.cursor] : this.points;
-		p(t, m(h("polyline"), {
+		let e = this.canvas.getLayer("event-storming-draw-preview", 1e3), t = m("g"), n = this.cursor ? [...this.points, this.cursor] : this.points;
+		f(t, p(m("polyline"), {
 			points: n.map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
 			stroke: I,
@@ -2531,7 +2727,7 @@ var rr = {
 			"stroke-dasharray": "5 4"
 		}));
 		let r = this.points[0];
-		if (p(t, m(h("circle"), {
+		if (f(t, p(m("circle"), {
 			cx: r.x,
 			cy: r.y,
 			r: this.points.length >= 3 ? 5 : 3,
@@ -2540,7 +2736,7 @@ var rr = {
 			"stroke-width": 1.5
 		})), this.points.length >= 2) {
 			let e = this.points[this.points.length - 1];
-			p(t, m(h("circle"), {
+			f(t, p(m("circle"), {
 				cx: e.x,
 				cy: e.y,
 				r: 5,
@@ -2549,18 +2745,17 @@ var rr = {
 				"stroke-width": 1.5
 			}));
 		}
-		p(e, t), this.layer = t;
+		f(e, t), this.layer = t;
 	}
 	clearPreview() {
-		this.layer &&= (g(this.layer), null);
+		this.layer &&= (h(this.layer), null);
 	}
 };
-function mr(e, t) {
+function Br(e, t) {
 	return Math.hypot(e.x - t.x, e.y - t.y);
 }
-//#endregion
-//#region src/draw-tool/EventStormingDrawingHandles.ts
-var hr = class {
+// src/draw-tool/EventStormingDrawingHandles.ts
+var Vr = class {
 	eventBus;
 	canvas;
 	modeling;
@@ -2577,7 +2772,7 @@ var hr = class {
 	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(D(n) ? n : null);
+			this.attach(w(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));
@@ -2594,9 +2789,9 @@ var hr = class {
 	}
 	render() {
 		if (this.clear(), !this.shape || this.readOnly?.isReadOnly()) return;
-		let e = this.canvas.getLayer("event-storming-drawing-handles", 1100), t = h("g");
+		let e = this.canvas.getLayer("event-storming-drawing-handles", 1100), t = m("g");
 		this.absolutePoints().forEach((e, n) => {
-			let r = m(h("circle"), {
+			let r = p(m("circle"), {
 				cx: e.x,
 				cy: e.y,
 				r: 5,
@@ -2605,8 +2800,8 @@ var hr = class {
 				"stroke-width": 1.5,
 				class: "event-storming-drawing-handle"
 			});
-			r.addEventListener("mousedown", (e) => this.startDrag(e, n)), p(t, r);
-		}), p(e, t), this.group = t;
+			r.addEventListener("mousedown", (e) => this.startDrag(e, n)), f(t, r);
+		}), f(e, t), this.group = t;
 	}
 	startDrag(e, t) {
 		if (e.button !== 0 || !this.shape) return;
@@ -2633,7 +2828,7 @@ var hr = class {
 	}
 	renderDragPreview(e, t) {
 		this.clearDragPreview();
-		let n = this.canvas.getLayer("event-storming-drawing-handles", 1100), r = m(h(t ? "polygon" : "polyline"), {
+		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: F.ink,
@@ -2641,13 +2836,13 @@ var hr = class {
 			"stroke-dasharray": "5 4",
 			"pointer-events": "none"
 		});
-		p(n, r), this.dragPreview = r;
+		f(n, r), this.dragPreview = r;
 	}
 	clearDragPreview() {
-		this.dragPreview &&= (g(this.dragPreview), null);
+		this.dragPreview &&= (h(this.dragPreview), null);
 	}
 	clear() {
-		this.clearDragPreview(), this.group &&= (g(this.group), null);
+		this.clearDragPreview(), this.group &&= (h(this.group), null);
 	}
 	toCanvasPoint(e) {
 		let t = this.canvas.getContainer().getBoundingClientRect(), n = this.canvas.viewbox(), r = this.canvas.zoom();
@@ -2656,51 +2851,50 @@ var hr = class {
 			y: (e.clientY - t.top) / r + n.y
 		};
 	}
-}, gr = class {
+}, Hr = class {
 	static $inject = ["eventBus", "interactionEvents"];
 	constructor(e, t) {
 		e.on("interactionEvents.createHit", (e) => {
-			if (D(e.element) && e.gfx) return _r(e.element, e.gfx), !1;
+			if (w(e.element) && e.gfx) return Ur(e.element, e.gfx), !1;
 		}), e.on("interactionEvents.updateHit", (e) => {
-			if (D(e.element) && e.gfx) return t.removeHits(e.gfx), _r(e.element, e.gfx), !1;
+			if (w(e.element) && e.gfx) return t.removeHits(e.gfx), Ur(e.element, e.gfx), !1;
 		});
 	}
 };
-function _r(e, t) {
-	let n = e.drawingPoints ?? [], r = h(e.closed ? "polygon" : "polyline");
-	m(r, {
+function Ur(e, t) {
+	let n = e.drawingPoints ?? [], r = m(e.closed ? "polygon" : "polyline");
+	p(r, {
 		points: n.map((e) => `${e.x},${e.y}`).join(" "),
 		class: "djs-hit djs-hit-stroke",
 		fill: "none",
 		stroke: "white",
 		"stroke-width": 15,
 		"stroke-opacity": 0
-	}), p(t, r);
+	}), f(t, r);
 }
-//#endregion
-//#region src/draw-tool/index.ts
-var vr = {
+// src/draw-tool/index.ts
+var Wr = {
 	__init__: [
 		"eventStormingDrawTool",
 		"eventStormingDrawingHandles",
 		"eventStormingDrawingHitProvider"
 	],
-	eventStormingDrawTool: ["type", pr],
-	eventStormingDrawingHandles: ["type", hr],
-	eventStormingDrawingHitProvider: ["type", gr]
-}, yr = class {
+	eventStormingDrawTool: ["type", zr],
+	eventStormingDrawingHandles: ["type", Vr],
+	eventStormingDrawingHitProvider: ["type", Hr]
+}, Gr = class {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		e.on("resize.start", 1500, (e) => {
 			let t = e.context;
-			De(t.shape) && (t.minDimensions = Pe);
+			Ae(t.shape) && (t.minDimensions = j);
 		});
 	}
-}, br = {
+}, Kr = {
 	__depends__: [xe],
 	__init__: ["eventStormingResizeBehavior"],
-	eventStormingResizeBehavior: ["type", yr]
-}, xr = class extends Bt {
+	eventStormingResizeBehavior: ["type", Gr]
+}, qr = class extends bn {
 	_getModules() {
 		return [
 			...super._getModules(),
@@ -2713,22 +2907,22 @@ var vr = {
 			ce,
 			ue,
 			de,
-			Cn,
-			nn,
-			Ht,
-			cn,
-			un,
-			hn,
-			En,
-			Xn,
-			rr,
-			yn,
-			sr,
-			ur,
-			rn,
-			dr,
-			vr,
-			br
+			nr,
+			In,
+			Sn,
+			Vn,
+			Un,
+			Jn,
+			ar,
+			kr,
+			ct,
+			Qn,
+			Nr,
+			Ir,
+			Ln,
+			Lr,
+			Wr,
+			Kr
 		];
 	}
 	undo() {
@@ -2743,18 +2937,18 @@ var vr = {
 	canRedo() {
 		return this.get("commandStack").canRedo();
 	}
-}, Sr = "event-storming";
-function Cr(e = {}) {
-	return Er(new xr({
-		...Tr(e),
+}, Jr = "event-storming";
+function Yr(e = {}) {
+	return Qr(new qr({
+		...Zr(e),
 		undoRedoKeys: e.undoRedoKeys ?? !0,
-		freeArea: z(e)
+		freeArea: V(e)
 	}), !0);
 }
-function wr(e = {}) {
-	return Er(new Bt(Tr(e)), !1);
+function Xr(e = {}) {
+	return Qr(new bn(Zr(e)), !1);
 }
-function Tr(e) {
+function Zr(e) {
 	return {
 		width: "100%",
 		height: "100%",
@@ -2762,9 +2956,9 @@ function Tr(e) {
 		fitOnImport: e.fitOnImport ?? !0
 	};
 }
-function Er(e, t) {
+function Qr(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: Sr,
+		notation: Jr,
 		apiVersion: Se,
 		editable: t
 	};
@@ -2773,21 +2967,21 @@ function Er(e, t) {
 	}), {
 		meta: u,
 		elements: {
-			list: () => c ? [] : i.getAll().filter(Y).map((e) => kr(e)),
+			list: () => c ? [] : i.getAll().filter(Y).map((e) => ti(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 ? [] : Dr(a.get()),
+			selection: () => c ? [] : $r(a.get()),
 			onSelection(e) {
-				let t = (t) => e(Dr(t.newSelection ?? []));
+				let t = (t) => e($r(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) ? Or(t) : void 0;
+				return Y(t) ? ei(t) : void 0;
 			}
 		},
 		diagram: e,
@@ -2799,7 +2993,7 @@ function Er(e, t) {
 			s += 1;
 			try {
 				let { warnings: n } = await e.importDSL(t);
-				return { warnings: n.map(Lt) };
+				return { warnings: n.map(_n) };
 			} finally {
 				--s;
 			}
@@ -2818,19 +3012,22 @@ function Er(e, t) {
 					width: n,
 					height: i
 				};
-				return Ar(a) ? a : void 0;
+				return ni(a) ? a : void 0;
 			} catch {
 				return;
 			}
 		},
 		setViewState(e) {
-			!c && Ar(e) && r.viewbox({
+			!c && ni(e) && r.viewbox({
 				x: e.x,
 				y: e.y,
 				width: e.width,
 				height: e.height
 			});
 		},
+		contentBounds() {
+			return e.contentBounds();
+		},
 		destroy() {
 			if (!c) {
 				try {
@@ -2846,10 +3043,10 @@ function Er(e, t) {
 function Y(e) {
 	return C(e);
 }
-function Dr(e) {
+function $r(e) {
 	return e.filter(Y).map((e) => e.id);
 }
-function Or(e) {
+function ei(e) {
 	return {
 		x: e.x,
 		y: e.y,
@@ -2857,14 +3054,14 @@ function Or(e) {
 		height: e.height
 	};
 }
-function kr(e) {
+function ti(e) {
 	let t = e.eventStormingLabel;
 	return t ? {
 		id: e.id,
 		name: t
 	} : { id: e.id };
 }
-function Ar(e) {
+function ni(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;
@@ -2872,9 +3069,8 @@ function Ar(e) {
 function X(e) {
 	return typeof e == "number" && Number.isFinite(e);
 }
-//#endregion
-//#region src/board-menu/menu.ts
-var jr = "Export as .storm", Mr = [
+// src/board-menu/menu.ts
+var ri = "Export as .storm", ii = [
 	{
 		value: "big-picture",
 		label: "Big picture"
@@ -2888,8 +3084,8 @@ var jr = "Export as .storm", Mr = [
 		label: "Software design"
 	}
 ];
-function Nr(e) {
-	return Mr.some((t) => t.value === e);
+function ai(e) {
+	return ii.some((t) => t.value === e);
 }
 function Z(e, t, n, r) {
 	return {
@@ -2901,20 +3097,20 @@ function Z(e, t, n, r) {
 		onSelect: () => n.onSelect()
 	};
 }
-function Pr(e) {
+function oi(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", jr, e.storm)), t;
+	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", ri, e.storm)), t;
 }
-function Fr(e) {
+function si(e) {
 	return {
 		model: [{
 			kind: "radio",
 			id: "level",
 			label: "Level",
-			options: Mr,
+			options: ii,
 			value: () => e.levels.getLevel(),
 			onSelect: (t) => {
-				Nr(t) && e.levels.setLevel(t);
+				ai(t) && e.levels.setLevel(t);
 			}
 		}, {
 			kind: "checkbox",
@@ -2926,7 +3122,7 @@ function Fr(e) {
 				e.typeCaptions.setTypeCaptionsVisible(t), e.onTypeCaptionsToggled?.(t);
 			}
 		}],
-		export: Pr(e.exports),
+		export: oi(e.exports),
 		help: [{
 			kind: "dialog",
 			id: "keyboard-shortcuts",
@@ -2936,25 +3132,24 @@ function Fr(e) {
 		}]
 	};
 }
-//#endregion
-//#region src/board-menu/shortcuts.ts
-var Ir = [
+// src/board-menu/shortcuts.ts
+var ci = [
 	"←",
 	"↑",
 	"→",
 	"↓"
 ];
-function Lr(e, t, n) {
+function li(e, t, n) {
 	return t === "mac" ? `⌘${e}` : `${n.ctrl}+${e}`;
 }
-function Rr(e) {
+function ui(e) {
 	try {
 		return new Intl.NumberFormat(e, { style: "percent" }).format(1);
 	} catch {
 		return new Intl.NumberFormat("en", { style: "percent" }).format(1);
 	}
 }
-function zr(e, t) {
+function di(e, t) {
 	if (e === "mac") return {
 		zoomIn: "⌘+",
 		zoomOut: "⌘−",
@@ -2969,7 +3164,7 @@ function zr(e, t) {
 		fit: `${r}+1`
 	};
 }
-function Br(e, t) {
+function fi(e, t) {
 	if (e === "mac") return {
 		undo: ["⌘Z"],
 		redo: ["⌘⇧Z"],
@@ -2978,7 +3173,7 @@ function Br(e, t) {
 		paste: ["⌘V"],
 		duplicate: ["⌘D"],
 		remove: ["⌫"],
-		coarseMove: Ir.map((e) => `⇧${e}`),
+		coarseMove: ci.map((e) => `⇧${e}`),
 		lassoDrag: ["⇧ Drag"]
 	};
 	let { ctrl: n, shift: r } = t;
@@ -2990,27 +3185,27 @@ function Br(e, t) {
 		paste: [`${n}+V`],
 		duplicate: [`${n}+D`],
 		remove: ["Del", "Backspace"],
-		coarseMove: Ir.map((e) => `${r}+${e}`),
+		coarseMove: ci.map((e) => `${r}+${e}`),
 		lassoDrag: [`${r}+Drag`]
 	};
 }
-function Vr(e) {
+function pi(e) {
 	let { platform: t, messages: n } = e;
 	return {
 		title: "File",
 		rows: [{
 			action: n.openFile ?? "Open…",
-			keys: [Lr("O", t, n.keyNames)]
+			keys: [li("O", t, n.keyNames)]
 		}, {
-			action: jr,
-			keys: [Lr("S", t, n.keyNames)]
+			action: ri,
+			keys: [li("S", t, n.keyNames)]
 		}]
 	};
 }
-function Hr(e, t = {}) {
-	let { platform: n, messages: r } = e, i = zr(n, r.keyNames), a = Br(n, r.keyNames);
+function mi(e, t = {}) {
+	let { platform: n, messages: r } = e, i = di(n, r.keyNames), a = fi(n, r.keyNames);
 	return [
-		...t.fileKeys ? [Vr(e)] : [],
+		...t.fileKeys ? [pi(e)] : [],
 		{
 			title: "View",
 			rows: [
@@ -3023,7 +3218,7 @@ function Hr(e, t = {}) {
 					keys: [i.zoomOut]
 				},
 				{
-					action: r.zoomToActual(Rr(e.lang)),
+					action: r.zoomToActual(ui(e.lang)),
 					keys: [i.zoomToActual]
 				},
 				{
@@ -3065,7 +3260,7 @@ function Hr(e, t = {}) {
 				},
 				{
 					action: "Move selection",
-					keys: Ir
+					keys: ci
 				},
 				{
 					action: "Move selection in large steps",
@@ -3104,15 +3299,14 @@ function Hr(e, t = {}) {
 		}
 	];
 }
-//#endregion
-//#region src/board-menu/ShortcutsDialog.ts
-var Q = "event-storming-shortcuts", Ur = "event-storming-shortcuts-title";
+// src/board-menu/ShortcutsDialog.ts
+var Q = "event-storming-shortcuts", hi = "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 Wr(e, t) {
-	let n = $("section", `${Q}-group`), r = `${Ur}-group-${t}`, i = $("h4", `${Q}-group-title`, e.title);
+function gi(e, t) {
+	let n = $("section", `${Q}-group`), r = `${hi}-group-${t}`, i = $("h4", `${Q}-group-title`, e.title);
 	i.id = r;
 	let a = $("table", `${Q}-table`);
 	a.setAttribute("aria-labelledby", r);
@@ -3126,19 +3320,19 @@ function Wr(e, t) {
 	}
 	return n.append(i, a), n;
 }
-function Gr(e, t, n) {
+function _i(e, t, n) {
 	let r = $("div", `${Q}-panel`), i = $("header", `${Q}-header`), a = $("h3", `${Q}-title`, "Keyboard shortcuts");
-	a.id = Ur;
+	a.id = hi;
 	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(...Hr(e, t).map(Wr)), r.append(i, s), r;
+	return s.append(...mi(e, t).map(gi)), r.append(i, s), r;
 }
-function Kr(e, t = {}) {
+function vi(e, t = {}) {
 	let n;
 	function r() {
 		let n = $("dialog", Q);
-		return n.setAttribute("aria-labelledby", Ur), n.append(Gr(e, t, () => n.close())), n.addEventListener("click", (e) => {
+		return n.setAttribute("aria-labelledby", hi), n.append(_i(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 });
@@ -3157,13 +3351,11 @@ function Kr(e, t = {}) {
 		}
 	};
 }
-//#endregion
-//#region src/draw/icons.ts
-var qr = "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", Jr = "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", Yr = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", Xr = "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", Zr = "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", Qr = "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", $r = "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", ei = "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z", ti = "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", ni = "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", ri = "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", ii = "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", ai = "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", oi = "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", si = "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", ci = "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 li(e, t = 18) {
+// src/draw/icons.ts
+var yi = "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", bi = "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", xi = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", Si = "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", Ci = "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", wi = "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", Ti = "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", Ei = "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z", Di = "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", Oi = "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", ki = "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", Ai = "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", ji = "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", Mi = "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", Ni = "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", Pi = "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 Fi(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 { Mr as BOARD_LEVELS, nt as BoardBounds, F as COLORS, Sr as EVENT_STORMING_NOTATION, or as EventStormingAppendBehavior, Vt as EventStormingAttachBehavior, qe as EventStormingBaseViewer, lr as EventStormingColorPicker, Qe as EventStormingElementFactory, vn as EventStormingElementSettingsProvider, Ft as EventStormingExporter, Pt as EventStormingImporter, Kn as EventStormingLabelEditing, Jt as EventStormingModeling, Sn as EventStormingReadOnly, vt as EventStormingRenderer, yr as EventStormingResizeBehavior, sn as EventStormingRules, at as EventStormingViewOptions, oi as ICON_ADD, $r as ICON_CODE, Qr as ICON_DATA_OBJECT, Yr as ICON_DELETE, ei as ICON_DOWNLOAD, Jr as ICON_EDIT, ci as ICON_EYE, si as ICON_FIT, ni as ICON_FOLDER_OPEN, ri as ICON_IMAGE, ai as ICON_MENU, ii as ICON_NEW, qr as ICON_PERSON, Zr as ICON_REDO, ti as ICON_SHARE, Xr as ICON_UNDO, O as MIRAGON, xr as Modeler, j as NOTE_STYLE, Bt as NavigatedViewer, G as POPUP_PROVIDER_ID, K as READ_ONLY_CHANGED_EVENT, v as ROOT_ID, x as STICKY_KINDS, A as STICKY_STYLES, jr as STORM_EXPORT_LABEL, it as VIEW_OPTIONS_CHANGED_EVENT, zt as Viewer, rt as boardBoundsModule, Fr as boardMenu, Hr as boardShortcuts, Lr as commandKeyLabel, Cr as createCollaborativeModeler, wr as createCollaborativeViewer, Kr as createShortcutsDialog, un as elementSnappingModule, sr as eventStormingAppendModule, Ht as eventStormingAttachModule, ur as eventStormingColorPickerModule, En as eventStormingContextPadModule, jt as eventStormingDrawModule, rr as eventStormingKeyboardModule, et as eventStormingModelModule, nn as eventStormingModelingModule, hn as eventStormingPaletteModule, yn as eventStormingPopupModule, Cn as eventStormingReadOnlyModule, br as eventStormingResizeModule, cn as eventStormingRulesModule, H as eventStormingViewOptionsModule, li as iconMarkup, Lt as importWarningText, Rt as ioModule, w as isAttachableKind, Ee as isAttachableSticky, b as isEventStormingConnection, y as isEventStormingShape, T as isHostKind, E as isHostSticky, C as isSticky, S as isStickyKind, Xn as labelEditingModule, k as parseNoteMarkdown, Ae as plainNoteText, we as saveSVG, ke as serializeNoteMarkdown };
+export { ii as BOARD_LEVELS, un as BoardBounds, F as COLORS, Jr as EVENT_STORMING_NOTATION, Mr as EventStormingAppendBehavior, xn as EventStormingAttachBehavior, _t as EventStormingBaseViewer, Fr as EventStormingColorPicker, St as EventStormingElementFactory, Zn as EventStormingElementSettingsProvider, hn as EventStormingExporter, mn as EventStormingImporter, Tr as EventStormingLabelEditing, On as EventStormingModeling, tr as EventStormingReadOnly, Kt as EventStormingRenderer, Gr as EventStormingResizeBehavior, Bn as EventStormingRules, on as EventStormingViewOptions, Mi as ICON_ADD, Ti as ICON_CODE, wi as ICON_DATA_OBJECT, xi as ICON_DELETE, Ei as ICON_DOWNLOAD, bi as ICON_EDIT, Pi as ICON_EYE, Ni as ICON_FIT, Oi as ICON_FOLDER_OPEN, ki as ICON_IMAGE, ji as ICON_MENU, Ai as ICON_NEW, yi as ICON_PERSON, Ci as ICON_REDO, Di as ICON_SHARE, Si as ICON_UNDO, T as MIRAGON, qr as Modeler, O as NOTE_STYLE, bn as NavigatedViewer, G as POPUP_PROVIDER_ID, K as READ_ONLY_CHANGED_EVENT, v as ROOT_ID, x as STICKY_KINDS, D as STICKY_STYLES, ri as STORM_EXPORT_LABEL, an as VIEW_OPTIONS_CHANGED_EVENT, yn as Viewer, dn as boardBoundsModule, si as boardMenu, mi as boardShortcuts, li as commandKeyLabel, Yr as createCollaborativeModeler, Xr as createCollaborativeViewer, vi as createShortcutsDialog, Un as elementSnappingModule, Nr as eventStormingAppendModule, Sn as eventStormingAttachModule, Ir as eventStormingColorPickerModule, ar as eventStormingContextPadModule, cn as eventStormingDrawModule, ct as eventStormingKeyboardModule, wt as eventStormingModelModule, In as eventStormingModelingModule, Jn as eventStormingPaletteModule, Qn as eventStormingPopupModule, nr as eventStormingReadOnlyModule, Kr as eventStormingResizeModule, Vn as eventStormingRulesModule, sn as eventStormingViewOptionsModule, Fi as iconMarkup, _n as importWarningText, vn as ioModule, Ee as isAttachableKind, Oe as isAttachableSticky, b as isEventStormingConnection, y as isEventStormingShape, De as isHostKind, ke as isHostSticky, C as isSticky, S as isStickyKind, kr as labelEditingModule, E as parseNoteMarkdown, Ne as plainNoteText, we as saveSVG, Me as serializeNoteMarkdown };
 
 //# sourceMappingURL=index.js.map