@miragon/event-storming-renderer 0.2.0 → 0.2.2

package/dist/index.js

@@ -22,11 +22,13 @@ import ce from "diagram-js/lib/command/CommandInterceptor";
 import le from "diagram-js/lib/features/mouse";
 import ue from "diagram-js/lib/features/lasso-tool";
 import de from "diagram-js/lib/features/rules/RuleProvider";
-import fe from "diagram-js/lib/features/connection-preview";
-import pe from "diagram-js/lib/features/ordering/OrderingProvider";
-import me from "diagram-js/lib/features/resize";
+import fe from "diagram-js/lib/features/palette/PaletteTooltipComponent";
+import { html as pe } from "diagram-js/lib/ui";
+import me from "diagram-js/lib/features/connection-preview";
+import he from "diagram-js/lib/features/ordering/OrderingProvider";
+import ge from "diagram-js/lib/features/resize";
 //#region src/io/saveSvg.ts
-function he(e, t) {
+function _e(e, t) {
 	let n = e.getContainer().querySelector("svg");
 	if (!n) throw Error("No SVG found in the canvas container.");
 	let r = n.cloneNode(!0), i = t ?? {
@@ -40,10 +42,10 @@ function he(e, t) {
 }
 //#endregion
 //#region src/EventStormingBaseViewer.ts
-function ge(e) {
+function ve(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var _e = class {
+var ye = class {
 	_diagram;
 	_container;
 	_options;
@@ -52,7 +54,7 @@ var _e = class {
 	}
 	_createContainer(e) {
 		let t = e.container ?? document.createElement("div");
-		return t.classList.add("event-storming-container"), t.style.width = ge(e.width ?? "100%"), t.style.height = ge(e.height ?? (e.container ? "100%" : "600px")), t;
+		return t.classList.add("event-storming-container"), t.style.width = ve(e.width ?? "100%"), t.style.height = ve(e.height ?? (e.container ? "100%" : "600px")), t;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
@@ -102,7 +104,7 @@ var _e = class {
 		return n(this.exportMap());
 	}
 	async saveSVG() {
-		return he(this.get("canvas"), this.get("boardBounds").contentBounds());
+		return _e(this.get("canvas"), this.get("boardBounds").contentBounds());
 	}
 	attachTo(e) {
 		e.appendChild(this._container), this.get("canvas").resized();
@@ -137,7 +139,7 @@ var _e = class {
 S.grau, S.schwarz, S.weiss, S.blau, S.gruen, S.danger, S.schwarz, S.navy, S.grau;
 //#endregion
 //#region src/draw/note-markdown.ts
-var ve = [
+var be = [
 	{
 		marker: "***",
 		bold: !0,
@@ -159,23 +161,23 @@ function C(e) {
 		let t = e.startsWith("- ");
 		return {
 			bullet: t,
-			runs: xe(t ? e.slice(2) : e)
+			runs: Ce(t ? e.slice(2) : e)
 		};
 	});
 }
-function ye(e) {
+function xe(e) {
 	return e.map((e) => {
-		let t = Ce(e.runs).map((e) => {
+		let t = Te(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 be(e) {
+function Se(e) {
 	return C(e).map((e) => (e.bullet ? "• " : "") + e.runs.map((e) => e.text).join("")).join("\n");
 }
-function xe(e) {
+function Ce(e) {
 	let t = [], n = "", r = () => {
 		n && t.push({
 			text: n,
@@ -184,7 +186,7 @@ function xe(e) {
 		}), n = "";
 	}, i = 0;
 	for (; i < e.length;) {
-		let a = e[i] === "*" ? Se(e, i) : void 0;
+		let a = e[i] === "*" ? we(e, i) : void 0;
 		if (!a) {
 			n += e[i], i++;
 			continue;
@@ -195,10 +197,10 @@ function xe(e) {
 			italic: a.italic
 		}), i = a.end;
 	}
-	return r(), Ce(t);
+	return r(), Te(t);
 }
-function Se(e, t) {
-	for (let { marker: n, bold: r, italic: i } of ve) {
+function we(e, t) {
+	for (let { marker: n, bold: r, italic: i } of be) {
 		if (!e.startsWith(n, t)) continue;
 		let a = e.indexOf(n, t + n.length);
 		if (!(a <= t + n.length)) return {
@@ -209,7 +211,7 @@ function Se(e, t) {
 		};
 	}
 }
-function Ce(e) {
+function Te(e) {
 	let t = [];
 	for (let n of e) {
 		if (!n.text) continue;
@@ -288,23 +290,23 @@ var w = {
 }, E = {
 	width: 60,
 	height: 40
-}, D = 7.5, we = {
+}, D = 7.5, Ee = {
 	width: w.aggregate.width,
 	height: w.aggregate.height
 };
 function O(e) {
-	let t = be(e), n = (t && t.length ? t : "note").split("\n"), r = Math.max(1, ...n.map((e) => e.length));
+	let t = Se(e), n = (t && t.length ? t : "note").split("\n"), r = Math.max(1, ...n.map((e) => e.length));
 	return {
 		lines: n,
-		width: Math.max(we.width, Math.round(r * D) + 16),
-		height: Math.max(we.height, n.length * 17 + 16)
+		width: Math.max(Ee.width, Math.round(r * D) + 16),
+		height: Math.max(Ee.height, n.length * 17 + 16)
 	};
 }
-function Te(e, t) {
+function k(e, t) {
 	let n = O(e);
 	return t.width !== n.width || t.height !== n.height;
 }
-var k = {
+var A = {
 	paper: S.grau,
 	ink: S.schwarz,
 	inkSoft: "#5B5B5B",
@@ -314,20 +316,20 @@ var k = {
 	accent: S.blau,
 	accentSoft: "rgba(51,93,229,0.12)",
 	stickyText: "#333333"
-}, A = `var(--event-storming-drawing-ink, ${S.schwarz})`, j = {
+}, j = `var(--event-storming-drawing-ink, ${S.schwarz})`, M = {
 	family: "'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13
-}, Ee = "event-storming-root";
-function De(e) {
+}, De = "event-storming-root";
+function Oe(e) {
 	return typeof e == "object" && !!e;
 }
-function M(e) {
-	return De(e) && typeof e.eventStormingType == "string" && !("waypoints" in e);
-}
 function N(e) {
-	return De(e) && typeof e.eventStormingType == "string" && "waypoints" in e;
+	return Oe(e) && typeof e.eventStormingType == "string" && !("waypoints" in e);
+}
+function P(e) {
+	return Oe(e) && typeof e.eventStormingType == "string" && "waypoints" in e;
 }
-var P = [
+var F = [
 	"event",
 	"command",
 	"actor",
@@ -337,33 +339,33 @@ var P = [
 	"external",
 	"hotspot"
 ];
-function F(e) {
-	return P.includes(e);
-}
 function I(e) {
-	return M(e) && F(e.eventStormingType);
+	return F.includes(e);
 }
 function L(e) {
+	return N(e) && I(e.eventStormingType);
+}
+function ke(e) {
 	return r.includes(e);
 }
 function R(e) {
 	return s.includes(e);
 }
-function Oe(e) {
-	return M(e) && L(e.eventStormingType);
+function Ae(e) {
+	return N(e) && ke(e.eventStormingType);
 }
 function z(e) {
-	return M(e) && R(e.eventStormingType);
+	return N(e) && R(e.eventStormingType);
 }
 function B(e) {
-	return M(e) && e.eventStormingType === "drawing";
+	return N(e) && e.eventStormingType === "drawing";
 }
-function ke(e) {
-	return M(e) && e.eventStormingType === "note";
+function je(e) {
+	return N(e) && e.eventStormingType === "note";
 }
 //#endregion
 //#region src/model/EventStormingElementFactory.ts
-var Ae = {
+var Me = {
 	event: "event",
 	command: "cmd",
 	actor: "actor",
@@ -374,7 +376,7 @@ var Ae = {
 	hotspot: "hot",
 	note: "note",
 	drawing: "draw"
-}, je = class {
+}, Ne = class {
 	elementFactory;
 	elementRegistry;
 	static $inject = ["elementFactory", "elementRegistry"];
@@ -393,14 +395,14 @@ var Ae = {
 		return `${e} ${n}`;
 	}
 	allocateId(e, t) {
-		let n = Ae[e];
+		let n = Me[e];
 		for (let e = 1;; e++) {
 			let r = `${n}_${e}`;
 			if (!this.elementRegistry.get(r) && !t?.has(r)) return r;
 		}
 	}
 	createSticky(e) {
-		if (!F(e.elementType)) throw Error(`not a sticky kind: ${e.elementType}`);
+		if (!I(e.elementType)) throw Error(`not a sticky kind: ${e.elementType}`);
 		let { width: t, height: n } = w[e.elementType];
 		return this.elementFactory.createShape({
 			id: e.id,
@@ -460,7 +462,7 @@ var Ae = {
 		});
 	}
 	createNew(e, t) {
-		let n = this.uniqueLabel(t), { width: r, height: i } = F(e) ? w[e] : O(n);
+		let n = this.uniqueLabel(t), { width: r, height: i } = I(e) ? w[e] : O(n);
 		return this.elementFactory.createShape({
 			id: this.allocateId(e),
 			width: r,
@@ -485,14 +487,14 @@ var Ae = {
 			id: e.id,
 			source: t,
 			target: n,
-			waypoints: [Me(t), Me(n)],
+			waypoints: [Pe(t), Pe(n)],
 			eventStormingType: "arrow",
 			...e.label ? { linkLabel: e.label } : {},
 			businessObject: e
 		});
 	}
 };
-function Me(e) {
+function Pe(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
@@ -500,20 +502,20 @@ function Me(e) {
 }
 //#endregion
 //#region src/model/index.ts
-var Ne = { eventStormingElementFactory: ["type", je] };
+var Fe = { eventStormingElementFactory: ["type", Ne] };
 //#endregion
 //#region src/board-bounds/BoardBounds.ts
-function Pe(e) {
+function Ie(e) {
 	return e.id !== "event-storming-root" && !e.waypoints && typeof e.x == "number" && typeof e.y == "number" && typeof e.width == "number" && typeof e.height == "number";
 }
-var Fe = class {
+var Le = class {
 	elementRegistry;
 	static $inject = ["elementRegistry"];
 	constructor(e) {
 		this.elementRegistry = e;
 	}
 	contentBounds(e = 120) {
-		let t = this.elementRegistry.getAll().filter(Pe);
+		let t = this.elementRegistry.getAll().filter(Ie);
 		if (!t.length) return {
 			x: 0,
 			y: 0,
@@ -527,7 +529,7 @@ var Fe = class {
 			height: a - r + 2 * e
 		};
 	}
-}, Ie = { boardBounds: ["type", Fe] }, Le = "eventStorming.viewOptions.changed", Re = class {
+}, Re = { boardBounds: ["type", Le] }, ze = "eventStorming.viewOptions.changed", Be = class {
 	eventBus;
 	elementRegistry;
 	static $inject = ["eventBus", "elementRegistry"];
@@ -540,15 +542,15 @@ var Fe = class {
 	}
 	setTypeCaptionsVisible(e) {
 		if (e === this._typeCaptionsVisible) return;
-		this._typeCaptionsVisible = e, this.eventBus.fire(Le, { typeCaptionsVisible: e });
-		let t = this.elementRegistry.filter(I);
+		this._typeCaptionsVisible = e, this.eventBus.fire(ze, { typeCaptionsVisible: e });
+		let t = this.elementRegistry.filter(L);
 		t.length && this.eventBus.fire("elements.changed", { elements: t });
 	}
 }, V = {
 	__depends__: [u],
-	eventStormingViewOptions: ["type", Re]
-}, ze = 1500, Be = -3, Ve = "event-storming-kind-caption", He = 9, Ue = 300, We = "#606060", Ge = 7, Ke = "#FBFBFB", qe = "#B9B9B9", Je = "6 4", Ye = "event-storming-sticky-shadow";
-function Xe(e) {
+	eventStormingViewOptions: ["type", Be]
+}, Ve = 1500, He = -3, Ue = "event-storming-kind-caption", We = 9, Ge = 300, Ke = "#606060", qe = 7, Je = "#FBFBFB", Ye = "#B9B9B9", Xe = "6 4", Ze = "event-storming-sticky-shadow";
+function Qe(e) {
 	let t = e.closest("svg");
 	if (!t) return !1;
 	if (t.querySelector("#event-storming-sticky-shadow")) return !0;
@@ -559,7 +561,7 @@ function Xe(e) {
 		"flood-color": "#000000",
 		"flood-opacity": .2
 	}), r = p(m("filter"), {
-		id: Ye,
+		id: Ze,
 		x: "-40%",
 		y: "-40%",
 		width: "180%",
@@ -569,14 +571,14 @@ function Xe(e) {
 	let i = m("defs");
 	return f(i, r), t.insertBefore(i, t.firstChild), !0;
 }
-var Ze = class extends d {
+var $e = class extends d {
 	viewOptions;
 	static $inject = ["eventBus", "eventStormingViewOptions"];
 	constructor(e, t) {
-		super(e, ze), this.viewOptions = t;
+		super(e, Ve), this.viewOptions = t;
 	}
 	canRender(e) {
-		return M(e) || N(e);
+		return N(e) || P(e);
 	}
 	drawShape(e, t) {
 		let n = t;
@@ -586,7 +588,7 @@ var Ze = class extends d {
 		let n = t.drawingPoints ?? [], r = t.strokeStyle === "dashed" ? "8 5" : t.strokeStyle === "dotted" ? "2 4" : void 0, i = p(m(t.closed ? "polygon" : "polyline"), {
 			points: n.map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
-			stroke: t.color ?? A,
+			stroke: t.color ?? j,
 			"stroke-width": 2,
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
@@ -595,9 +597,9 @@ var Ze = class extends d {
 		return f(e, i), i;
 	}
 	drawSticky(e, t) {
-		let n = t.eventStormingType, r = F(n) ? w[n] : T, i = t.provisional === !0, a = e;
+		let n = t.eventStormingType, r = I(n) ? w[n] : T, i = t.provisional === !0, a = e;
 		if (n === "hotspot") {
-			let n = p(m("g"), { transform: `rotate(${Be} ${t.width / 2} ${t.height / 2})` });
+			let n = p(m("g"), { transform: `rotate(${He} ${t.width / 2} ${t.height / 2})` });
 			f(e, n), a = n;
 		}
 		let o = p(m("rect"), {
@@ -606,37 +608,37 @@ var Ze = class extends d {
 			width: Math.max(t.width, 1),
 			height: Math.max(t.height, 1),
 			rx: 0,
-			fill: i ? Ke : t.color ?? r.fill,
-			stroke: i ? qe : r.stroke,
+			fill: i ? Je : t.color ?? r.fill,
+			stroke: i ? Ye : r.stroke,
 			"stroke-width": 1.5,
-			...i ? { "stroke-dasharray": Je } : {}
+			...i ? { "stroke-dasharray": Xe } : {}
 		});
-		if (Xe(e) && o.setAttribute("filter", `url(#${Ye})`), f(a, o), i) return o;
-		if (n === "note" ? nt(a, t) : $e(a, t), F(n) && this.viewOptions.typeCaptionsVisible()) {
-			let e = H(w[n].label, t.width / 2, t.height - Ge, {
+		if (Qe(e) && o.setAttribute("filter", `url(#${Ze})`), f(a, o), i) return o;
+		if (n === "note" ? it(a, t) : tt(a, t), I(n) && this.viewOptions.typeCaptionsVisible()) {
+			let e = H(w[n].label, t.width / 2, t.height - qe, {
 				"text-anchor": "middle",
-				"font-size": He,
-				fill: We
+				"font-size": We,
+				fill: Ke
 			});
-			e.setAttribute("class", Ve), e.setAttribute("font-weight", String(Ue)), f(a, e);
+			e.setAttribute("class", Ue), e.setAttribute("font-weight", String(Ge)), f(a, e);
 		}
 		return o;
 	}
 	drawConnection(e, t) {
-		let n = t, [r, i] = lt(n), a = p(m("polyline"), {
+		let n = t, [r, i] = dt(n), a = p(m("polyline"), {
 			points: `${r.x},${r.y} ${i.x},${i.y}`,
 			fill: "none",
-			stroke: k.arrow,
+			stroke: A.arrow,
 			"stroke-width": 1.5,
 			"stroke-linecap": "round"
 		});
-		if (f(e, a), f(e, st(r, i, k.arrow, 11, 5)), n.linkLabel) {
+		if (f(e, a), f(e, lt(r, i, A.arrow, 11, 5)), n.linkLabel) {
 			let t = (r.x + i.x) / 2, a = (r.y + i.y) / 2;
 			f(e, H(n.linkLabel, t, a - 5, {
 				"text-anchor": "middle",
 				"font-size": 11,
 				"font-style": "italic",
-				fill: k.inkSoft
+				fill: A.inkSoft
 			}));
 		}
 		return a;
@@ -650,7 +652,7 @@ var Ze = class extends d {
 		return t ? `M${t.x},${t.y}` + n.map((e) => `L${e.x},${e.y}`).join("") : "";
 	}
 };
-function Qe(e, t) {
+function et(e, t) {
 	let n = e.split(/\s+/).filter((e) => e.length);
 	if (!n.length) return [""];
 	let r = [], i = "";
@@ -667,25 +669,25 @@ function Qe(e, t) {
 	}
 	return r.push(i), r;
 }
-function $e(e, t) {
-	let n = t.width - 16, r = Math.max(1, Math.floor(n / D)), i = Math.max(1, Math.floor((t.height - 16) / 17)), a = (t.eventStormingLabel ?? "").split("\n").flatMap((e) => Qe(e, r)).slice(0, i), o = t.width / 2, s = t.height / 2 - (a.length - 1) * 17 / 2 + 4;
+function tt(e, t) {
+	let n = t.width - 16, r = Math.max(1, Math.floor(n / D)), i = Math.max(1, Math.floor((t.height - 16) / 17)), a = (t.eventStormingLabel ?? "").split("\n").flatMap((e) => et(e, r)).slice(0, i), o = t.width / 2, s = t.height / 2 - (a.length - 1) * 17 / 2 + 4;
 	a.forEach((t, n) => {
 		f(e, H(t, o, s + n * 17, {
 			"text-anchor": "middle",
-			fill: k.stickyText
+			fill: A.stickyText
 		}));
 	});
 }
-var et = 2, tt = 12.5;
-function nt(e, t) {
-	let n = t.width - 16, r = Math.max(1, Math.floor(n / D)), i = Math.max(1, Math.floor((t.height - 16) / 17)), a = C(t.eventStormingLabel ?? "").flatMap((e) => rt(e, r)).slice(0, i), o = t.alignHorizontal ?? "left", s = t.alignVertical ?? "top", c = o === "left" ? "start" : o === "center" ? "middle" : "end", l = a.length * 17, u = s === "top" ? 8 : s === "middle" ? (t.height - l) / 2 : t.height - 8 - l;
+var nt = 2, rt = 12.5;
+function it(e, t) {
+	let n = t.width - 16, r = Math.max(1, Math.floor(n / D)), i = Math.max(1, Math.floor((t.height - 16) / 17)), a = C(t.eventStormingLabel ?? "").flatMap((e) => at(e, r)).slice(0, i), o = t.alignHorizontal ?? "left", s = t.alignVertical ?? "top", c = o === "left" ? "start" : o === "center" ? "middle" : "end", l = a.length * 17, u = s === "top" ? 8 : s === "middle" ? (t.height - l) / 2 : t.height - 8 - l;
 	a.forEach((n, r) => {
 		let i = o === "left" ? 8 + (n.indent ? 12 : 0) : o === "center" ? t.width / 2 : t.width - 8, a = p(m("text"), {
 			x: i,
-			y: u + r * 17 + tt,
-			"font-family": j.family,
-			"font-size": j.label,
-			fill: k.stickyText,
+			y: u + r * 17 + rt,
+			"font-family": M.family,
+			"font-size": M.label,
+			fill: A.stickyText,
 			"text-anchor": c
 		}), s = n.marker ? [{
 			text: "• ",
@@ -699,19 +701,19 @@ function nt(e, t) {
 		f(e, a);
 	});
 }
-function rt(e, t) {
-	let n = Math.max(1, t - (e.bullet ? et : 0));
-	return it(e.runs, n).map((t, n) => ({
+function at(e, t) {
+	let n = Math.max(1, t - (e.bullet ? nt : 0));
+	return ot(e.runs, n).map((t, n) => ({
 		runs: t,
 		marker: e.bullet && n === 0,
 		indent: e.bullet && n > 0
 	}));
 }
-function it(e, t) {
+function ot(e, t) {
 	let n = e.map((e) => e.text).join("");
-	return n.length <= t ? [e] : at(n, t).map(([t, n]) => ot(e, t, n));
+	return n.length <= t ? [e] : st(n, t).map(([t, n]) => ct(e, t, n));
 }
-function at(e, t) {
+function st(e, t) {
 	let n = [...e.matchAll(/\S+/g)];
 	if (!n.length) return [[0, 0]];
 	let r = [], i = -1, a = -1, o = () => {
@@ -732,7 +734,7 @@ function at(e, t) {
 	}
 	return o(), r;
 }
-function ot(e, t, n) {
+function ct(e, t, n) {
 	let r = [], i = 0;
 	for (let a of e) {
 		let e = i;
@@ -750,14 +752,14 @@ function H(e, t, n, r = {}) {
 	let i = p(m("text"), {
 		x: t,
 		y: n,
-		"font-family": j.family,
-		"font-size": j.label,
-		fill: k.ink,
+		"font-family": M.family,
+		"font-size": M.label,
+		fill: A.ink,
 		...r
 	});
 	return i.textContent = e, i;
 }
-function st(e, t, n, r = 10, i = 5) {
+function lt(e, t, n, r = 10, i = 5) {
 	let a = Math.atan2(t.y - e.y, t.x - e.x), o = t.x - r * Math.cos(a), s = t.y - r * Math.sin(a), c = `${t.x},${t.y} ${o - i * Math.sin(a)},${s + i * Math.cos(a)} ${o + i * Math.sin(a)},${s - i * Math.cos(a)}`;
 	return p(m("polygon"), {
 		points: c,
@@ -770,7 +772,7 @@ function U(e) {
 		y: e.y + e.height / 2
 	};
 }
-function ct(e, t) {
+function ut(e, t) {
 	let n = U(e), r = t.x - n.x, i = t.y - n.y;
 	if (r === 0 && i === 0) return n;
 	let a = e.width / 2 + 2, o = e.height / 2 + 2, s = Math.min(r === 0 ? Infinity : a / Math.abs(r), i === 0 ? Infinity : o / Math.abs(i));
@@ -779,7 +781,7 @@ function ct(e, t) {
 		y: n.y + i * s
 	};
 }
-function lt(e) {
+function dt(e) {
 	let t = e.source, n = e.target, r = e.waypoints;
 	if (!t || !n) {
 		let e = r[0] ?? {
@@ -788,16 +790,16 @@ function lt(e) {
 		};
 		return [e, r[r.length - 1] ?? e];
 	}
-	let i = U(t), a = U(n), o = ct(t, a), s = ct(n, i);
+	let i = U(t), a = U(n), o = ut(t, a), s = ut(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 ut = {
+var ft = {
 	__depends__: [V],
 	__init__: ["eventStormingRenderer"],
-	eventStormingRenderer: ["type", Ze]
-}, dt = { drawing: 0 }, ft = class {
+	eventStormingRenderer: ["type", $e]
+}, pt = { drawing: 0 }, mt = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -828,8 +830,8 @@ var ut = {
 			r = void 0;
 		}
 		let i;
-		r && r.id === "event-storming-root" ? i = r : (i = this.elementFactory.createRoot({ id: Ee }), this.canvas.setRootElement(i)), i.businessObject = n;
-		let a = /* @__PURE__ */ new Map(), o = [...e.elements].sort((e, t) => (dt[e.elementType] ?? 9) - (dt[t.elementType] ?? 9)), s = o.filter((e) => e.elementType === "drawing"), c = o.filter((e) => e.elementType !== "drawing");
+		r && r.id === "event-storming-root" ? i = r : (i = this.elementFactory.createRoot({ id: De }), this.canvas.setRootElement(i)), i.businessObject = n;
+		let a = /* @__PURE__ */ new Map(), o = [...e.elements].sort((e, t) => (pt[e.elementType] ?? 9) - (pt[t.elementType] ?? 9)), s = o.filter((e) => e.elementType === "drawing"), c = o.filter((e) => e.elementType !== "drawing");
 		for (let e of s) {
 			let t = this.createShape(e);
 			this.canvas.addShape(t, i), a.set(e.id, t);
@@ -880,7 +882,7 @@ var ut = {
 			} catch {}
 		}
 	}
-}, pt = class {
+}, ht = class {
 	elementRegistry;
 	canvas;
 	static $inject = ["elementRegistry", "canvas"];
@@ -890,14 +892,14 @@ var ut = {
 	export() {
 		let e = this.canvas.getRootElement().businessObject, t = e?.config ?? { title: "Untitled Board" }, n = [], r = [];
 		for (let e of this.elementRegistry.getAll()) if (e.id !== "event-storming-root") {
-			if (N(e)) r.push({
+			if (P(e)) r.push({
 				id: e.id,
 				edgeType: "arrow",
 				from: e.source?.id ?? "",
 				to: e.target?.id ?? "",
 				...e.linkLabel ? { label: e.linkLabel } : {}
 			});
-			else if (M(e)) {
+			else if (N(e)) {
 				let t = this.buildElement(e);
 				t && n.push(t);
 			}
@@ -928,10 +930,10 @@ var ut = {
 				...e.color ? { color: e.color } : {}
 			};
 		}
-		let t = e.eventStormingType === "note" && Te(e.eventStormingLabel, e) ? {
+		let t = e.eventStormingType === "note" && k(e.eventStormingLabel, e) ? {
 			width: e.width,
 			height: e.height
-		} : void 0, n = e.eventStormingType === "note" ? mt(e) : void 0;
+		} : void 0, n = e.eventStormingType === "note" ? gt(e) : void 0;
 		return {
 			id: e.id,
 			elementType: e.eventStormingType,
@@ -947,29 +949,29 @@ var ut = {
 		};
 	}
 };
-function mt(e) {
+function gt(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 {
+	if (t || n) return {
 		...t ? { horizontal: t } : {},
 		...n ? { vertical: n } : {}
 	};
 }
 //#endregion
 //#region src/io/index.ts
-var ht = {
-	eventStormingImporter: ["type", ft],
-	eventStormingExporter: ["type", pt]
-}, gt = class extends _e {
+var _t = {
+	eventStormingImporter: ["type", mt],
+	eventStormingExporter: ["type", ht]
+}, vt = class extends ye {
 	_getModules() {
 		return [
-			Ne,
-			Ie,
+			Fe,
+			Re,
 			V,
-			ut,
-			ht
+			ft,
+			_t
 		];
 	}
-}, _t = class extends gt {
+}, yt = class extends vt {
 	_getModules() {
 		return [
 			...super._getModules(),
@@ -979,34 +981,34 @@ var ht = {
 			y
 		];
 	}
-}, vt = class extends ce {
+}, bt = class extends ce {
 	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 && !L(i) && t.updateAttachment(a, void 0), a.attachers?.length && !R(i)) for (let e of [...a.attachers]) t.updateAttachment(e, void 0);
+			if (a.host && !ke(i) && t.updateAttachment(a, void 0), a.attachers?.length && !R(i)) for (let e of [...a.attachers]) t.updateAttachment(e, void 0);
 		});
 	}
-}, yt = {
+}, xt = {
 	__depends__: [se],
 	__init__: ["eventStormingAttachBehavior"],
-	eventStormingAttachBehavior: ["type", vt]
+	eventStormingAttachBehavior: ["type", bt]
 };
 //#endregion
 //#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function bt(e, t, n) {
+function St(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var xt = [
+var Ct = [
 	"x",
 	"y",
 	"width",
 	"height"
 ];
-function St(e, t) {
-	if (!t.some((e) => xt.includes(e))) return [e];
+function wt(e, t) {
+	if (!t.some((e) => Ct.includes(e))) return [e];
 	let n = e;
 	return [
 		e,
@@ -1014,18 +1016,18 @@ function St(e, t) {
 		...n.outgoing ?? []
 	];
 }
-var Ct = class {
+var Tt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], bt(r, e, n[e]);
-		return e.oldProperties = i, St(t, Object.keys(n));
+		for (let e of Object.keys(n)) i[e] = r[e], St(r, e, n[e]);
+		return e.oldProperties = i, wt(t, Object.keys(n));
 	}
 	revert(e) {
 		let { element: t, oldProperties: n } = e, r = t;
-		if (n) for (let e of Object.keys(n)) bt(r, e, n[e]);
-		return St(t, Object.keys(n ?? {}));
+		if (n) for (let e of Object.keys(n)) St(r, e, n[e]);
+		return wt(t, Object.keys(n ?? {}));
 	}
-}, W = "element.updateProperties", wt = class {
+}, W = "element.updateProperties", Et = class {
 	commandStack;
 	canvas;
 	elementRegistry;
@@ -1035,7 +1037,7 @@ var Ct = class {
 		"elementRegistry"
 	];
 	constructor(e, t, n) {
-		this.commandStack = e, this.canvas = t, this.elementRegistry = n, e.registerHandler(W, Ct);
+		this.commandStack = e, this.canvas = t, this.elementRegistry = n, e.registerHandler(W, Tt);
 	}
 	updateProperties(e, t) {
 		this.commandStack.execute(W, {
@@ -1044,7 +1046,7 @@ var Ct = class {
 		});
 	}
 	updateLabel(e, t) {
-		if (e.eventStormingType === "note" && !Te(e.eventStormingLabel, e)) {
+		if (e.eventStormingType === "note" && !k(e.eventStormingLabel, e)) {
 			let { width: n, height: r } = O(t), i = e.x + e.width / 2, a = e.y + e.height / 2;
 			this.updateProperties(e, {
 				eventStormingLabel: t,
@@ -1058,7 +1060,7 @@ var Ct = class {
 		this.updateProperties(e, { eventStormingLabel: t });
 	}
 	setStickyKind(e, t) {
-		if (!F(e.eventStormingType) || !F(t)) throw Error("setStickyKind: only sticky kinds can be retyped");
+		if (!I(e.eventStormingType) || !I(t)) throw Error("setStickyKind: only sticky kinds can be retyped");
 		if (e.eventStormingType === t && !e.provisional) return;
 		let { width: n, height: r } = w[t], i = e.x + e.width / 2, a = e.y + e.height / 2;
 		this.updateProperties(e, {
@@ -1096,7 +1098,7 @@ var Ct = class {
 	root() {
 		return this.elementRegistry.get("event-storming-root") ?? this.canvas.getRootElement();
 	}
-}, Tt = 24, Et = [
+}, Dt = 24, Ot = [
 	"eventStormingType",
 	"color",
 	"drawingPoints",
@@ -1104,8 +1106,8 @@ var Ct = class {
 	"strokeStyle",
 	"alignHorizontal",
 	"alignVertical"
-], Dt = ["eventStormingType", "linkLabel"];
-function Ot(e, t) {
+], kt = ["eventStormingType", "linkLabel"];
+function At(e, t) {
 	let n = {};
 	for (let r of t) {
 		let t = e[r];
@@ -1113,7 +1115,7 @@ function Ot(e, t) {
 	}
 	return n;
 }
-var kt = class {
+var jt = class {
 	selection;
 	modeling;
 	elementFactory;
@@ -1136,23 +1138,23 @@ var kt = class {
 		this.selection = e, this.modeling = t, this.elementFactory = n, this.esFactory = r, this.canvas = i, this.create = a, this.mouse = o;
 	}
 	copy() {
-		let e = this.selection.get().filter((e) => M(e));
+		let e = this.selection.get().filter((e) => N(e));
 		if (!e.length) return !1;
 		let t = new Map(e.map((e, t) => [e, t])), n = [], r = /* @__PURE__ */ new Set();
 		for (let i of e) for (let e of [...i.incoming ?? [], ...i.outgoing ?? []]) {
-			if (!N(e) || r.has(e)) continue;
+			if (!P(e) || r.has(e)) continue;
 			let i = t.get(e.source), a = t.get(e.target);
 			i !== void 0 && a !== void 0 && (r.add(e), n.push({
 				sourceIdx: i,
 				targetIdx: a,
-				props: Ot(e, Dt)
+				props: At(e, kt)
 			}));
 		}
 		return this.clipboard = {
 			shapes: e.map((e) => {
 				let n = e.host ? t.get(e.host) : void 0;
 				return {
-					props: Ot(e, Et),
+					props: At(e, Ot),
 					x: e.x,
 					y: e.y,
 					width: e.width,
@@ -1193,26 +1195,26 @@ var kt = class {
 				...structuredClone(e.props),
 				source: n[e.sourceIdx],
 				target: n[e.targetIdx],
-				waypoints: [At(n[e.sourceIdx]), At(n[e.targetIdx])]
+				waypoints: [Mt(n[e.sourceIdx]), Mt(n[e.targetIdx])]
 			}))
 		};
 	}
 	insertWithOffset(e) {
 		this.pasteCount++;
-		let t = Tt * this.pasteCount, n = jt(e.shapes), r = this.modeling.createElements([...e.shapes, ...e.connections], {
+		let t = Dt * this.pasteCount, n = Nt(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 At(e) {
+function Mt(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
-function jt(e) {
+function Nt(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,
@@ -1221,12 +1223,12 @@ function jt(e) {
 }
 //#endregion
 //#region src/modeling/index.ts
-var Mt = {
+var Pt = {
 	__depends__: [le, ee],
 	__init__: ["eventStormingModeling"],
-	eventStormingModeling: ["type", wt],
-	eventStormingCopyPaste: ["type", kt]
-}, Nt = {
+	eventStormingModeling: ["type", Et],
+	eventStormingCopyPaste: ["type", jt]
+}, Ft = {
 	__depends__: [ue],
 	__init__: ["eventStormingLassoBehavior"],
 	eventStormingLassoBehavior: ["type", class {
@@ -1252,43 +1254,43 @@ var Mt = {
 };
 //#endregion
 //#region src/rules/EventStormingRules.ts
-function Pt(e, t) {
+function It(e, t) {
 	return (e.outgoing ?? []).some((e) => e.target === t);
 }
-function Ft(e, t) {
-	return e.length !== 1 || !Oe(e[0]) || !z(t) ? !1 : "attach";
+function Lt(e, t) {
+	return e.length !== 1 || !Ae(e[0]) || !z(t) ? !1 : "attach";
 }
-var It = class extends de {
+var Rt = class extends de {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		super(e);
 	}
 	init() {
-		this.addRule("connection.start", (e) => I(e.source)), this.addRule("connection.create", (e) => {
+		this.addRule("connection.start", (e) => L(e.source)), this.addRule("connection.create", (e) => {
 			let { source: t, target: n } = e;
-			return !I(t) || !I(n) || t === n || Pt(t, n) ? !1 : { eventStormingType: "arrow" };
-		}), this.addRule(["shape.move", "elements.move"], (e) => Ft(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 (!ke(e.shape)) return !1;
+			return !L(t) || !L(n) || t === n || It(t, n) ? !1 : { eventStormingType: "arrow" };
+		}), this.addRule(["shape.move", "elements.move"], (e) => Lt(e.shapes ?? (e.shape ? [e.shape] : []), e.target) || !0), this.addRule("shape.create", () => !0), this.addRule("elements.create", () => !0), this.addRule("shape.resize", (e) => {
+			if (!je(e.shape)) return !1;
 			let { newBounds: t } = e;
 			return !t || t.width >= E.width && t.height >= E.height;
 		});
 	}
-}, Lt = {
+}, zt = {
 	__init__: ["eventStormingRules"],
-	eventStormingRules: ["type", It]
-}, Rt = 8, zt = {
+	eventStormingRules: ["type", Rt]
+}, Bt = 8, Vt = {
 	__init__: ["elementSnapping"],
 	elementSnapping: ["type", class {
 		static $inject = ["eventBus", "elementRegistry"];
 		constructor(e, t) {
-			let n = (e) => t.getAll().filter((t) => M(t) && t.eventStormingType !== "drawing" && !e.has(t.id)).map((e) => ({
+			let n = (e) => t.getAll().filter((t) => N(t) && t.eventStormingType !== "drawing" && !e.has(t.id)).map((e) => ({
 				x: e.x + e.width / 2,
 				y: e.y + e.height / 2
 			})), r = (e, t) => {
 				let n, r = 9;
 				for (let i of t) {
 					let t = Math.abs(i - e);
-					t <= Rt && t < r && (n = i, r = t);
+					t <= Bt && t < r && (n = i, r = t);
 				}
 				return n;
 			};
@@ -1320,21 +1322,21 @@ var It = class extends de {
 			});
 		}
 	}]
-}, G = (e) => `<svg width="24" height="24" viewBox="0 0 24 24" class="event-storming-palette-svg">${e}</svg>`, Bt = (e, t, n = 0) => G(`<rect x="4" y="5" width="16" height="14" fill="${e}" stroke="${t}" stroke-width="1.5"${n ? ` transform="rotate(${n} 12 12)"` : ""}/>`), K = {
-	draw: G(`<polyline points="3,18 8.5,7 14,14 21,4" fill="none" stroke="${k.ink}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="3" cy="18" r="2.2" fill="${k.surface}" stroke="${k.ink}" stroke-width="1.4"/>`),
-	lasso: G(`<rect x="3" y="3" width="13" height="13" rx="2" fill="none" stroke="${k.ink}" stroke-width="1.5" stroke-dasharray="3 2.5"/><path d="M13.5 13.5l7 2.7-3 1.3-1.3 3z" fill="${k.ink}"/>`),
-	note: Bt(T.fill, T.stroke)
+}, G = (e) => `<svg width="24" height="24" viewBox="0 0 24 24" class="event-storming-palette-svg">${e}</svg>`, Ht = (e, t, n = 0) => G(`<rect x="4" y="5" width="16" height="14" fill="${e}" stroke="${t}" stroke-width="1.5"${n ? ` transform="rotate(${n} 12 12)"` : ""}/>`), K = {
+	draw: G(`<polyline points="3,18 8.5,7 14,14 21,4" fill="none" stroke="${A.ink}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="3" cy="18" r="2.2" fill="${A.surface}" stroke="${A.ink}" stroke-width="1.4"/>`),
+	lasso: G(`<rect x="3" y="3" width="13" height="13" rx="2" fill="none" stroke="${A.ink}" stroke-width="1.5" stroke-dasharray="3 2.5"/><path d="M13.5 13.5l7 2.7-3 1.3-1.3 3z" fill="${A.ink}"/>`),
+	note: Ht(T.fill, T.stroke)
 };
-for (let e of P) {
+for (let e of F) {
 	let t = w[e];
-	K[e] = Bt(t.fill, t.stroke, e === "hotspot" ? -6 : 0);
+	K[e] = Ht(t.fill, t.stroke, e === "hotspot" ? -6 : 0);
 }
-function Vt(e, t) {
+function Ut(e, t) {
 	return `<svg width="14" height="14" viewBox="0 0 14 14" class="event-storming-palette-svg"><rect x="1" y="1" width="12" height="12" fill="${e}" stroke="${t}" stroke-width="1"/></svg>`;
 }
 //#endregion
 //#region src/palette/EventStormingPaletteProvider.ts
-var q = "stickies-1", J = "stickies-2", Ht = "stickies-3", Ut = [
+var q = "stickies-1", J = "stickies-2", Wt = "stickies-3", Gt = [
 	{
 		key: "event",
 		type: "event",
@@ -1389,80 +1391,119 @@ var q = "stickies-1", J = "stickies-2", Ht = "stickies-3", Ut = [
 		type: "hotspot",
 		label: w.hotspot.label,
 		title: "Hotspot",
-		group: Ht
+		group: Wt
 	},
 	{
 		key: "note",
 		type: "note",
 		label: T.label,
 		title: "Note",
-		group: Ht
+		group: Wt
 	}
-], Wt = {
-	__init__: ["eventStormingPaletteProvider"],
-	eventStormingPaletteProvider: ["type", class {
-		create;
-		factory;
-		lassoTool;
-		drawTool;
-		eventStormingModeling;
-		static $inject = [
-			"palette",
-			"create",
-			"eventStormingElementFactory",
-			"lassoTool",
-			"eventStormingDrawTool",
-			"eventStormingModeling",
-			"eventBus"
-		];
-		constructor(e, t, n, r, i, a, o) {
-			this.create = t, this.factory = n, this.lassoTool = r, this.drawTool = i, this.eventStormingModeling = a, e.registerProvider(this);
-			let s = () => e._rebuild();
-			o.on("import.done", s), o.on(["commandStack.element.updateProperties.postExecuted", "commandStack.element.updateProperties.reverted"], (e) => {
-				e.context.element.id === "event-storming-root" && s();
-			});
-		}
-		getPaletteEntries() {
-			let e = {};
-			e["lasso-tool"] = {
-				group: "tools",
-				title: "Selection tool — L (or Shift+drag)",
-				html: `<div class="entry event-storming-palette-entry" title="Selection tool — L (or Shift+drag)">${K.lasso}</div>`,
-				action: { click: (e) => this.lassoTool.activateSelection(e) }
-			}, e["draw-tool"] = {
-				group: "tools",
-				title: "Draw — click point by point, double-click/Enter finishes, click the start point to close",
-				html: `<div class="entry event-storming-palette-entry" title="Draw — click point by point, double-click/Enter finishes, click the start point to close">${K.draw}</div>`,
-				action: { click: () => this.drawTool.toggle() }
+], Kt = class {
+	create;
+	factory;
+	lassoTool;
+	drawTool;
+	eventStormingModeling;
+	static $inject = [
+		"palette",
+		"create",
+		"eventStormingElementFactory",
+		"lassoTool",
+		"eventStormingDrawTool",
+		"eventStormingModeling",
+		"eventBus"
+	];
+	constructor(e, t, n, r, i, a, o) {
+		this.create = t, this.factory = n, this.lassoTool = r, this.drawTool = i, this.eventStormingModeling = a, e.registerProvider(this);
+		let s = () => e._rebuild();
+		o.on("import.done", s), o.on(["commandStack.element.updateProperties.postExecuted", "commandStack.element.updateProperties.reverted"], (e) => {
+			e.context.element.id === "event-storming-root" && s();
+		});
+	}
+	getPaletteEntries() {
+		let e = {};
+		e["lasso-tool"] = {
+			group: "tools",
+			title: "Selection tool — L (or Shift+drag)",
+			html: `<div class="entry event-storming-palette-entry">${K.lasso}</div>`,
+			action: { click: (e) => this.lassoTool.activateSelection(e) }
+		}, e["draw-tool"] = {
+			group: "tools",
+			title: "Draw — click point by point, double-click/Enter finishes, click the start point to close",
+			html: `<div class="entry event-storming-palette-entry">${K.draw}</div>`,
+			action: { click: () => this.drawTool.toggle() }
+		};
+		let t = c[this.eventStormingModeling.getLevel()];
+		for (let n of Gt) {
+			if (n.type !== "note" && !t.includes(n.type)) continue;
+			let r = (e) => {
+				let t = this.factory.createNew(n.type, n.label);
+				this.create.start(e, t);
+			};
+			e[`create.${n.key}`] = {
+				group: n.group,
+				title: n.title,
+				html: `<div class="entry event-storming-palette-entry" draggable="true">${K[n.key]}</div>`,
+				action: {
+					dragstart: r,
+					click: r
+				}
 			};
-			let t = c[this.eventStormingModeling.getLevel()];
-			for (let n of Ut) {
-				if (n.type !== "note" && !t.includes(n.type)) continue;
-				let r = (e) => {
-					let t = this.factory.createNew(n.type, n.label);
-					this.create.start(e, t);
-				};
-				e[`create.${n.key}`] = {
-					group: n.group,
-					title: n.title,
-					html: `<div class="entry event-storming-palette-entry" draggable="true" title="${n.title}">${K[n.key]}</div>`,
-					action: {
-						dragstart: r,
-						click: r
-					}
-				};
-			}
-			return e;
 		}
-	}]
-}, Y = "event-storming-element-settings", Gt = {
+		return e;
+	}
+}, qt = ".djs-palette-entries .entry", Jt = "bottom", Yt = class {
+	palette;
+	hoverTooltip;
+	static $inject = [
+		"eventBus",
+		"palette",
+		"hoverTooltip"
+	];
+	entries = {};
+	constructor(e, t, n) {
+		this.palette = t, this.hoverTooltip = n, e.on("palette.create", (e) => this.attachTo(e.container)), e.on("palette.changed", () => this.refreshEntries());
+	}
+	attachTo(e) {
+		this.refreshEntries(), this.hoverTooltip.add({
+			container: e,
+			selector: qt,
+			getContent: (e) => this.contentFor(e),
+			getPosition: (e) => Xt(e)
+		});
+	}
+	refreshEntries() {
+		this.entries = this.palette.getEntries();
+	}
+	contentFor(e) {
+		let t = this.entries[e.getAttribute("data-action") ?? ""];
+		return t?.title ? pe`<${fe} title=${t.title} shortcut=${t.shortcut} />` : null;
+	}
+};
+function Xt(e) {
+	let t = e.getBoundingClientRect();
+	return {
+		x: t.left + t.width / 2,
+		y: t.bottom + 8,
+		placement: Jt
+	};
+}
+//#endregion
+//#region src/palette/index.ts
+var Zt = {
+	__init__: ["eventStormingPaletteProvider", "paletteTooltip"],
+	eventStormingPaletteProvider: ["type", Kt],
+	paletteTooltip: ["type", Yt]
+}, Y = "event-storming-element-settings", Qt = {
 	id: "kind",
 	name: "Change type"
 };
-function Kt(e, t) {
+function $t(e, t) {
 	return e ? `✓ ${t}` : t;
 }
-var qt = class {
+var en = class {
 	modeling;
 	static $inject = ["popupMenu", "eventStormingModeling"];
 	constructor(e, t) {
@@ -1470,38 +1511,38 @@ var qt = class {
 	}
 	getPopupMenuEntries(e) {
 		let t = Array.isArray(e) ? e[0] : e;
-		return I(t) ? this.kindEntries(t) : {};
+		return L(t) ? this.kindEntries(t) : {};
 	}
 	kindEntries(e) {
 		let t = {}, n = e.provisional === !0, r = c[this.modeling.getLevel()];
-		for (let i of P) {
+		for (let i of F) {
 			if (!r.includes(i) && (n || i !== e.eventStormingType)) continue;
 			let a = w[i];
 			t[`kind-${i}`] = {
-				label: n ? a.label : Kt(e.eventStormingType === i, a.label),
-				imageHtml: Vt(a.fill, a.stroke),
-				group: Gt,
+				label: n ? a.label : $t(e.eventStormingType === i, a.label),
+				imageHtml: Ut(a.fill, a.stroke),
+				group: Qt,
 				action: () => this.modeling.setStickyKind(e, i)
 			};
 		}
 		return t;
 	}
-}, Jt = {
+}, tn = {
 	__init__: ["eventStormingElementSettings"],
-	eventStormingElementSettings: ["type", qt]
-}, Yt = "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", Xt = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z", X = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z", Z = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", Zt = "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", Qt = "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", $t = "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", en = "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", tn = "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z", nn = "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", rn = "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", an = "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", on = "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", sn = "M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.61-.23-1.2-.64-1.67-.08-.1-.13-.21-.13-.33 0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 8 6.5 8 8 8.67 8 9.5 7.33 11 6.5 11zm3-4C8.67 7 8 6.33 8 5.5S8.67 4 9.5 4s1.5.67 1.5 1.5S10.33 7 9.5 7zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 4 14.5 4s1.5.67 1.5 1.5S15.33 7 14.5 7zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 8 17.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z", cn = "M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z", ln = "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z", un = "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", dn = "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", fn = "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", pn = "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";
+	eventStormingElementSettings: ["type", en]
+}, nn = "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z", rn = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z", X = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z", Z = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", an = "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z", on = "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z", sn = "M4 7v2c0 .55-.45 1-1 1H2v2h1c.55 0 1 .45 1 1v2c0 1.65 1.35 3 3 3h1v-2H7c-.55 0-1-.45-1-1v-2c0-.84-.35-1.61-.92-2.18L4.85 12l.23-.82C5.65 10.61 6 9.84 6 9V7c0-.55.45-1 1-1h1V4H7C5.35 4 4 5.35 4 7zm16 3c-.55 0-1-.45-1-1V7c0-1.65-1.35-3-3-3h-1v2h1c.55 0 1 .45 1 1v2c0 .84.35 1.61.92 2.18l.23.82-.23.82c-.57.57-.92 1.34-.92 2.18v2c0 .55-.45 1-1 1h-1v2h1c1.65 0 3-1.35 3-3v-2c0-.55.45-1 1-1h1v-2h-1z", cn = "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z", ln = "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z", un = "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z", dn = "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z", fn = "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z", pn = "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z", mn = "M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.61-.23-1.2-.64-1.67-.08-.1-.13-.21-.13-.33 0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 8 6.5 8 8 8.67 8 9.5 7.33 11 6.5 11zm3-4C8.67 7 8 6.33 8 5.5S8.67 4 9.5 4s1.5.67 1.5 1.5S10.33 7 9.5 7zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 4 14.5 4s1.5.67 1.5 1.5S15.33 7 14.5 7zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 8 17.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z", hn = "M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z", gn = "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z", _n = "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", vn = "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", yn = "M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z", bn = "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z";
 function Q(e, t = 18) {
 	return `<svg viewBox="0 0 24 24" width="${t}" height="${t}" fill="currentColor" aria-hidden="true"><path d="${e}"/></svg>`;
 }
 //#endregion
 //#region src/context-pad/EventStormingContextPadProvider.ts
-var mn = "Append sticky (auto-connect, choose the type after placing)";
+var xn = "Append sticky (auto-connect, choose the type after placing)";
 function $(e, t, n = !1) {
 	return `<div class="entry event-storming-cp-entry"${n ? " draggable=\"true\"" : ""} title="${t}">${Q(e)}</div>`;
 }
 //#endregion
 //#region src/context-pad/index.ts
-var hn = {
+var Sn = {
 	__init__: ["eventStormingContextPadProvider"],
 	eventStormingContextPadProvider: ["type", class {
 		modeling;
@@ -1527,7 +1568,7 @@ var hn = {
 			this.modeling = t, this.connect = n, this.create = r, this.popupMenu = i, this.eventStormingModeling = a, this.labelEditing = o, this.factory = s, this.colorPicker = c, e.registerProvider(this);
 		}
 		getContextPadEntries(e) {
-			if (N(e)) {
+			if (P(e)) {
 				let t = e;
 				return {
 					"edit-label": {
@@ -1544,17 +1585,17 @@ var hn = {
 					}
 				};
 			}
-			if (!M(e)) return {};
+			if (!N(e)) return {};
 			let t = e, n = {}, r = t.eventStormingType;
-			if (F(r)) {
+			if (I(r)) {
 				let e = (e) => {
 					let n = this.factory.createProvisional();
 					this.create.start(e, n, { source: t });
 				};
 				n.append = {
 					group: "append",
-					title: mn,
-					html: $(dn, mn, !0),
+					title: xn,
+					html: $(vn, xn, !0),
 					action: {
 						click: e,
 						dragstart: e
@@ -1566,7 +1607,7 @@ var hn = {
 				n.connect = {
 					group: "edit",
 					title: "Connect to existing sticky",
-					html: $(Xt, "Connect to existing sticky", !0),
+					html: $(rn, "Connect to existing sticky", !0),
 					action: {
 						click: r,
 						dragstart: r
@@ -1574,7 +1615,7 @@ var hn = {
 				}, n["change-kind"] = {
 					group: "sticky",
 					title: "Change type",
-					html: $(ln, "Change type"),
+					html: $(gn, "Change type"),
 					action: { click: (e) => {
 						let n = e;
 						this.popupMenu.open(t, Y, {
@@ -1589,14 +1630,14 @@ var hn = {
 				n["stroke-style"] = {
 					group: "sticky",
 					title: r,
-					html: $(cn, r),
+					html: $(hn, r),
 					action: { click: () => this.eventStormingModeling.setStrokeStyle(t, e) }
 				};
 			}
 			return r === "drawing" && (n.color = {
 				group: "sticky",
 				title: "Color",
-				html: $(sn, "Color"),
+				html: $(mn, "Color"),
 				action: { click: (e) => {
 					let n = e;
 					this.colorPicker.open(t, n.clientX, n.clientY);
@@ -1614,36 +1655,36 @@ var hn = {
 			}, n;
 		}
 	}]
-}, gn = "bullet", _n = [
+}, Cn = "bullet", wn = [
 	"left",
 	"center",
 	"right"
-], vn = [
+], Tn = [
 	"top",
 	"middle",
 	"bottom"
 ];
-function yn(e, t) {
+function En(e, t) {
 	return e[(e.indexOf(t) + 1) % e.length];
 }
-function bn(e, t) {
+function Dn(e, t) {
 	let n = e.ownerDocument;
 	e.textContent = "";
 	for (let r of C(t)) {
 		let t = n.createElement("div");
-		r.bullet && (t.className = gn);
+		r.bullet && (t.className = Cn);
 		for (let e of r.runs) {
 			let r = n.createTextNode(e.text);
-			e.italic && (r = xn(n, "i", r)), e.bold && (r = xn(n, "b", r)), t.appendChild(r);
+			e.italic && (r = On(n, "i", r)), e.bold && (r = On(n, "b", r)), t.appendChild(r);
 		}
 		r.runs.length === 0 && t.appendChild(n.createElement("br")), e.appendChild(t);
 	}
 }
-function xn(e, t, n) {
+function On(e, t, n) {
 	let r = e.createElement(t);
 	return r.appendChild(n), r;
 }
-function Sn(e) {
+function kn(e) {
 	let t = [], n = null, r = (e) => (n = {
 		bullet: e,
 		runs: []
@@ -1664,11 +1705,11 @@ function Sn(e) {
 			s.nextSibling && r(!1);
 			return;
 		}
-		if (Cn(s.tagName)) {
+		if (An(s.tagName)) {
 			a(s);
 			return;
 		}
-		let c = wn(s, t, o);
+		let c = jn(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");
@@ -1676,12 +1717,12 @@ function Sn(e) {
 		n = null;
 	};
 	for (let t of e.childNodes) i(t, !1, !1);
-	return ye(t);
+	return xe(t);
 }
-function Cn(e) {
+function An(e) {
 	return e === "DIV" || e === "P" || e === "LI";
 }
-function wn(e, t, n) {
+function jn(e, t, n) {
 	let r = e.tagName;
 	(r === "B" || r === "STRONG") && (t = !0), (r === "I" || r === "EM") && (n = !0);
 	let i = e.style.fontWeight;
@@ -1692,13 +1733,13 @@ function wn(e, t, n) {
 		italic: n
 	};
 }
-function Tn(e) {
+function Mn(e) {
 	let t = e.ownerDocument, n = t.getSelection();
 	if (!n) return;
 	let r = t.createRange();
 	r.selectNodeContents(e), n.removeAllRanges(), n.addRange(r);
 }
-function En(e, t) {
+function Nn(e, t) {
 	let n = e.ownerDocument;
 	if (typeof n.execCommand == "function" && n.execCommand("insertText", !1, t)) return;
 	let r = n.getSelection();
@@ -1709,30 +1750,30 @@ function En(e, t) {
 	let a = n.createTextNode(t);
 	i.insertNode(a), i.setStartAfter(a), i.collapse(!0), r.removeAllRanges(), r.addRange(i);
 }
-function Dn(e) {
+function Pn(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 On(e) {
-	kn(e);
-	let t = Dn(e);
+function Fn(e) {
+	In(e);
+	let t = Pn(e);
 	if (t.length === 0) return;
-	let n = t.every((e) => e.classList.contains(gn));
-	for (let e of t) e.classList.toggle(gn, !n);
+	let n = t.every((e) => e.classList.contains(Cn));
+	for (let e of t) e.classList.toggle(Cn, !n);
 }
-function kn(e) {
+function In(e) {
 	let t = e.ownerDocument, n = null;
 	for (let r of Array.from(e.childNodes)) {
-		if (r.nodeType === Node.ELEMENT_NODE && Cn(r.tagName)) {
+		if (r.nodeType === Node.ELEMENT_NODE && An(r.tagName)) {
 			n = null;
 			continue;
 		}
 		n || (n = t.createElement("div"), e.insertBefore(n, r)), n.appendChild(r);
 	}
 }
-var An = {
+var Ln = {
 	horizontal: {
 		left: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z",
 		center: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z",
@@ -1744,7 +1785,7 @@ var An = {
 		bottom: "M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"
 	}
 };
-function jn(e, t) {
+function Rn(e, t) {
 	let n = e.createElement("div");
 	n.className = "event-storming-note-toolbar";
 	let r = (r, i, a) => {
@@ -1755,18 +1796,18 @@ function jn(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 Mn(e, t, n) {
-	e.innerHTML = Q(An[t][n] ?? "", 16), e.title = t === "horizontal" ? `Horizontal alignment: ${n} (click to cycle)` : `Vertical alignment: ${n} (click to cycle)`;
+function zn(e, t, n) {
+	e.innerHTML = Q(Ln[t][n] ?? "", 16), e.title = t === "horizontal" ? `Horizontal alignment: ${n} (click to cycle)` : `Vertical alignment: ${n} (click to cycle)`;
 }
-function Nn(e, t) {
+function Bn(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 Pn(e) {
+function Vn(e) {
 	return e.replace(/(?<!:)\/\//g, "∕∕").replace(/\/\*/g, "∕*").replace(/->/g, "→").replace(/;/g, ",").replace(/\[/g, "(").replace(/\]/g, ")").trim();
 }
-var Fn = class {
+var Hn = class {
 	canvas;
 	modeling;
 	static $inject = [
@@ -1777,7 +1818,7 @@ var Fn = class {
 	active = null;
 	constructor(e, t, n) {
 		this.canvas = t, this.modeling = n, e.on("element.dblclick", (e) => {
-			M(e.element) ? this.activate(e.element) : N(e.element) && this.activateConnection(e.element);
+			N(e.element) ? this.activate(e.element) : P(e.element) && this.activateConnection(e.element);
 		}), e.on([
 			"element.mousedown",
 			"drag.init",
@@ -1796,7 +1837,7 @@ var Fn = class {
 			s || (s = !0, o.removeEventListener("keydown", u), o.removeEventListener("blur", d), o.remove(), this.active = null);
 		}, l = () => {
 			if (s) return;
-			let t = Pn(o.value), n = t && t !== e.eventStormingLabel;
+			let t = Vn(o.value), n = t && t !== e.eventStormingLabel;
 			c(), n && this.modeling.updateLabel(e, t);
 		}, u = (e) => {
 			if (e.key === "Escape") {
@@ -1816,38 +1857,38 @@ var Fn = class {
 	}
 	activateNote(e) {
 		let t = this.canvas.getContainer(), n = this.canvas.zoom(), r = this.canvas.viewbox(), i = (e.x + e.width / 2 - r.x) * n, a = (e.y + e.height / 2 - r.y) * n, o = document.createElement("div");
-		o.className = "event-storming-label-input event-storming-note-editor", o.contentEditable = "true", o.style.position = "absolute", o.style.left = `${i}px`, o.style.top = `${a}px`, o.style.transform = "translate(-50%, -50%)", o.style.minWidth = `${e.width * n}px`, o.style.minHeight = `${e.height * n}px`, bn(o, e.eventStormingLabel ?? "");
+		o.className = "event-storming-label-input event-storming-note-editor", o.contentEditable = "true", o.style.position = "absolute", o.style.left = `${i}px`, o.style.top = `${a}px`, o.style.transform = "translate(-50%, -50%)", o.style.minWidth = `${e.width * n}px`, o.style.minHeight = `${e.height * n}px`, Dn(o, e.eventStormingLabel ?? "");
 		let s = {
 			horizontal: e.alignHorizontal ?? "left",
 			vertical: e.alignVertical ?? "top"
 		};
-		Nn(o, s);
-		let c = jn(document, (e) => m(e));
-		c.style.left = `${i}px`, c.style.top = `${(e.y - r.y) * n - 8}px`, c.style.transform = "translate(-50%, -100%)", t.appendChild(o), t.appendChild(c), o.focus(), Tn(o);
+		Bn(o, s);
+		let c = Rn(document, (e) => m(e));
+		c.style.left = `${i}px`, c.style.top = `${(e.y - r.y) * n - 8}px`, c.style.transform = "translate(-50%, -100%)", t.appendChild(o), t.appendChild(c), o.focus(), Mn(o);
 		let l = (e) => c.querySelector(`[data-action="${e}"]`), u = (e, t) => {
 			let n = l(e);
 			n?.classList.toggle("active", t), n?.setAttribute("aria-pressed", String(t));
 		}, d = () => {
-			u("note-bold", Ln("bold")), u("note-italic", Ln("italic"));
-			let e = Dn(o);
+			u("note-bold", Wn("bold")), u("note-italic", Wn("italic"));
+			let e = Pn(o);
 			u("note-bullet", e.length > 0 && e.every((e) => e.classList.contains("bullet")));
 			let t = l("note-align-horizontal");
-			t && Mn(t, "horizontal", s.horizontal);
+			t && zn(t, "horizontal", s.horizontal);
 			let n = l("note-align-vertical");
-			n && Mn(n, "vertical", s.vertical);
+			n && zn(n, "vertical", s.vertical);
 		}, f = (e) => {
 			typeof document.execCommand == "function" && document.execCommand(e, !1), d();
 		}, p = (e) => {
-			e === "horizontal" ? s.horizontal = yn(_n, s.horizontal) : s.vertical = yn(vn, s.vertical), Nn(o, s), d();
+			e === "horizontal" ? s.horizontal = En(wn, s.horizontal) : s.vertical = En(Tn, s.vertical), Bn(o, s), d();
 		}, m = (e) => {
-			e === "note-bold" ? f("bold") : e === "note-italic" ? f("italic") : e === "note-bullet" ? (On(o), d()) : p(e === "note-align-horizontal" ? "horizontal" : "vertical");
+			e === "note-bold" ? f("bold") : e === "note-italic" ? f("italic") : e === "note-bullet" ? (Fn(o), d()) : p(e === "note-align-horizontal" ? "horizontal" : "vertical");
 		}, h = () => d();
 		document.addEventListener("selectionchange", h);
 		let g = !1, _ = () => {
 			g || (g = !0, document.removeEventListener("selectionchange", h), o.removeEventListener("keydown", y), o.removeEventListener("blur", b), o.removeEventListener("paste", x), o.remove(), c.remove(), this.active = null);
 		}, v = () => {
 			if (g) return;
-			let t = In(e, Pn(Sn(o)), s);
+			let t = Un(e, Vn(kn(o)), s);
 			_(), t && this.modeling.updateProperties(e, t);
 		}, y = (e) => {
 			if (e.key === "Escape") {
@@ -1866,7 +1907,7 @@ var Fn = class {
 		}, x = (e) => {
 			e.preventDefault();
 			let t = e.clipboardData?.getData("text/plain") ?? "";
-			t && En(o, t);
+			t && Nn(o, t);
 		};
 		o.addEventListener("keydown", y), o.addEventListener("blur", b), o.addEventListener("paste", x), d(), this.active = {
 			field: o,
@@ -1884,7 +1925,7 @@ var Fn = class {
 			s || (s = !0, o.removeEventListener("keydown", u), o.removeEventListener("blur", d), o.remove(), this.active = null);
 		}, l = () => {
 			if (s) return;
-			let t = Pn(o.value), n = e.linkLabel ?? "";
+			let t = Vn(o.value), n = e.linkLabel ?? "";
 			c(), t !== n && this.modeling.updateProperties(e, { linkLabel: t || void 0 });
 		}, u = (e) => {
 			e.key === "Escape" ? (e.preventDefault(), c()) : e.key === "Enter" && (e.preventDefault(), l());
@@ -1899,17 +1940,17 @@ var Fn = class {
 		this.active?.cleanup();
 	}
 };
-function In(e, t, n) {
+function Un(e, t, n) {
 	let r = !!t && t !== e.eventStormingLabel, i = n.horizontal !== (e.alignHorizontal ?? "left") || n.vertical !== (e.alignVertical ?? "top");
 	if (!r && !i) return null;
 	let a = {};
-	if (r && (a.eventStormingLabel = t, !Te(e.eventStormingLabel, e))) {
+	if (r && (a.eventStormingLabel = t, !k(e.eventStormingLabel, e))) {
 		let { width: n, height: r } = O(t);
 		a.width = n, a.height = r, a.x = e.x + e.width / 2 - n / 2, a.y = e.y + e.height / 2 - r / 2;
 	}
 	return i && (a.alignHorizontal = n.horizontal === "left" ? void 0 : n.horizontal, a.alignVertical = n.vertical === "top" ? void 0 : n.vertical), a;
 }
-function Ln(e) {
+function Wn(e) {
 	if (typeof document.queryCommandState != "function") return !1;
 	try {
 		return document.queryCommandState(e);
@@ -1919,10 +1960,10 @@ function Ln(e) {
 }
 //#endregion
 //#region src/label-editing/index.ts
-var Rn = {
+var Gn = {
 	__init__: ["eventStormingLabelEditing"],
-	eventStormingLabelEditing: ["type", Fn]
-}, zn = 2, Bn = 10, Vn = {
+	eventStormingLabelEditing: ["type", Hn]
+}, Kn = 2, qn = 10, Jn = {
 	arrowleft: {
 		x: -1,
 		y: 0
@@ -1939,7 +1980,7 @@ var Rn = {
 		x: 0,
 		y: 1
 	}
-}, Hn = class {
+}, Yn = class {
 	static $inject = [
 		"canvas",
 		"commandStack",
@@ -1956,7 +1997,7 @@ var Rn = {
 		let u = e.getContainer();
 		u.hasAttribute("tabindex") || u.setAttribute("tabindex", "0");
 		let d = (e) => {
-			if (Un(e.target)) return;
+			if (Xn(e.target)) return;
 			let l = e.ctrlKey || e.metaKey, u = e.key.toLowerCase();
 			if (l && u === "z" && !e.shiftKey) e.preventDefault(), t.undo();
 			else if (l && u === "z" && e.shiftKey || l && u === "y") e.preventDefault(), t.redo();
@@ -1977,11 +2018,11 @@ var Rn = {
 				e.preventDefault();
 				let t = s.getLastMoveEvent();
 				c.activateSelection(t ?? e, !!t);
-			} else if (u in Vn && !l) {
+			} else if (u in Jn && !l) {
 				let t = n.get();
 				if (t.length) {
 					e.preventDefault();
-					let n = e.shiftKey ? Bn : zn, i = Vn[u];
+					let n = e.shiftKey ? qn : Kn, i = Jn[u];
 					r.moveElements(t, {
 						x: i.x * n,
 						y: i.y * n
@@ -1992,17 +2033,17 @@ var Rn = {
 		document.addEventListener("keydown", d), l.on("diagram.destroy", () => document.removeEventListener("keydown", d));
 	}
 };
-function Un(e) {
+function Xn(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 Wn = {
+var Zn = {
 	__init__: ["eventStormingKeyboard"],
-	eventStormingKeyboard: ["type", Hn]
-}, Gn = 500, Kn = 6, qn = class {
+	eventStormingKeyboard: ["type", Yn]
+}, Qn = 500, $n = 6, er = 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;
@@ -2035,7 +2076,7 @@ var Wn = {
 			let n = o.getAbsoluteBBox(e), c = o.getContainer().getBoundingClientRect();
 			if (i.open(e, Y, {
 				x: c.left + n.x,
-				y: c.top + n.y + n.height + Kn
+				y: c.top + n.y + n.height + $n
 			}), !i.isOpen()) {
 				a.removeElements([e]);
 				return;
@@ -2052,7 +2093,7 @@ var Wn = {
 				}, 0);
 			});
 		};
-		t.on("create.end", Gn, (e) => {
+		t.on("create.end", Qn, (e) => {
 			let { context: t } = e;
 			if (!t.source || !t.canExecute || !t.shape) return;
 			let n = t.shape;
@@ -2071,14 +2112,14 @@ var Wn = {
 			r && setTimeout(() => r.activate(n), 0);
 		});
 	}
-}, Jn = {
-	__depends__: [fe],
+}, tr = {
+	__depends__: [me],
 	__init__: ["eventStormingAppendBehavior"],
-	eventStormingAppendBehavior: ["type", qn]
-}, Yn = P.map((e) => ({
+	eventStormingAppendBehavior: ["type", er]
+}, nr = F.map((e) => ({
 	value: w[e].fill,
 	title: w[e].label
-})), Xn = class {
+})), rr = class {
 	canvas;
 	modeling;
 	static $inject = [
@@ -2108,7 +2149,7 @@ var Wn = {
 			value: void 0,
 			title: "No color",
 			cls: "event-storming-cp-none"
-		}, ...Yn.map((e) => ({
+		}, ...nr.map((e) => ({
 			value: e.value,
 			title: e.title,
 			cls: ""
@@ -2128,12 +2169,12 @@ var Wn = {
 	close() {
 		this.popover && (this.popover.remove(), this.popover = void 0, document.removeEventListener("click", this.onDocPointer, !0), document.removeEventListener("keydown", this.onKey, !0));
 	}
-}, Zn = {
+}, ir = {
 	__init__: ["eventStormingColorPicker"],
-	eventStormingColorPicker: ["type", Xn]
-}, Qn = {
+	eventStormingColorPicker: ["type", rr]
+}, ar = {
 	__init__: ["eventStormingOrderingProvider"],
-	eventStormingOrderingProvider: ["type", class extends pe {
+	eventStormingOrderingProvider: ["type", class extends he {
 		static $inject = ["eventBus"];
 		constructor(e) {
 			super(e);
@@ -2141,8 +2182,8 @@ var Wn = {
 		getOrdering(e, t) {
 			for (; t.parent;) t = t.parent;
 			let n = t.children ?? [];
-			if (N(e)) {
-				let r = n.filter((t) => t !== e && (B(t) || N(t))).length;
+			if (P(e)) {
+				let r = n.filter((t) => t !== e && (B(t) || P(t))).length;
 				return {
 					parent: t,
 					index: r
@@ -2158,7 +2199,7 @@ var Wn = {
 			return { parent: t };
 		}
 	}]
-}, $n = 12, er = class {
+}, or = 12, sr = class {
 	canvas;
 	eventBus;
 	modeling;
@@ -2235,12 +2276,12 @@ var Wn = {
 		if (e.button !== 0 || this.isChromeTarget(e)) return;
 		e.preventDefault(), e.stopPropagation();
 		let t = this.toCanvasPoint(e), n = this.points[0];
-		if (n && this.points.length >= 3 && tr(t, n) <= $n) {
+		if (n && this.points.length >= 3 && cr(t, n) <= or) {
 			this.finishClosed();
 			return;
 		}
 		let r = this.points[this.points.length - 1];
-		if (r && tr(t, r) <= $n) {
+		if (r && cr(t, r) <= or) {
 			this.points.length >= 2 && this.finish();
 			return;
 		}
@@ -2261,7 +2302,7 @@ var Wn = {
 		f(t, p(m("polyline"), {
 			points: n.map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
-			stroke: A,
+			stroke: j,
 			"stroke-width": 2,
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
@@ -2272,8 +2313,8 @@ var Wn = {
 			cx: r.x,
 			cy: r.y,
 			r: this.points.length >= 3 ? 5 : 3,
-			fill: k.paper,
-			stroke: A,
+			fill: A.paper,
+			stroke: j,
 			"stroke-width": 1.5
 		})), this.points.length >= 2) {
 			let e = this.points[this.points.length - 1];
@@ -2281,8 +2322,8 @@ var Wn = {
 				cx: e.x,
 				cy: e.y,
 				r: 5,
-				fill: k.paper,
-				stroke: A,
+				fill: A.paper,
+				stroke: j,
 				"stroke-width": 1.5
 			}));
 		}
@@ -2292,12 +2333,12 @@ var Wn = {
 		this.layer &&= (h(this.layer), null);
 	}
 };
-function tr(e, t) {
+function cr(e, t) {
 	return Math.hypot(e.x - t.x, e.y - t.y);
 }
 //#endregion
 //#region src/draw-tool/EventStormingDrawingHandles.ts
-var nr = class {
+var lr = class {
 	eventBus;
 	canvas;
 	modeling;
@@ -2335,8 +2376,8 @@ var nr = class {
 				cx: e.x,
 				cy: e.y,
 				r: 5,
-				fill: k.paper,
-				stroke: k.ink,
+				fill: A.paper,
+				stroke: A.ink,
 				"stroke-width": 1.5,
 				class: "event-storming-drawing-handle"
 			});
@@ -2371,7 +2412,7 @@ var nr = class {
 		let n = this.canvas.getLayer("event-storming-drawing-handles", 1100), r = p(m(t ? "polygon" : "polyline"), {
 			points: e.map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
-			stroke: k.ink,
+			stroke: A.ink,
 			"stroke-width": 1.5,
 			"stroke-dasharray": "5 4",
 			"pointer-events": "none"
@@ -2391,17 +2432,17 @@ var nr = class {
 			y: (e.clientY - t.top) / r + n.y
 		};
 	}
-}, rr = class {
+}, ur = class {
 	static $inject = ["eventBus", "interactionEvents"];
 	constructor(e, t) {
 		e.on("interactionEvents.createHit", (e) => {
-			if (!(!B(e.element) || !e.gfx)) return ir(e.element, e.gfx), !1;
+			if (B(e.element) && e.gfx) return dr(e.element, e.gfx), !1;
 		}), e.on("interactionEvents.updateHit", (e) => {
-			if (!(!B(e.element) || !e.gfx)) return t.removeHits(e.gfx), ir(e.element, e.gfx), !1;
+			if (B(e.element) && e.gfx) return t.removeHits(e.gfx), dr(e.element, e.gfx), !1;
 		});
 	}
 };
-function ir(e, t) {
+function dr(e, t) {
 	let n = e.drawingPoints ?? [], r = m(e.closed ? "polygon" : "polyline");
 	p(r, {
 		points: n.map((e) => `${e.x},${e.y}`).join(" "),
@@ -2414,28 +2455,28 @@ function ir(e, t) {
 }
 //#endregion
 //#region src/draw-tool/index.ts
-var ar = {
+var fr = {
 	__init__: [
 		"eventStormingDrawTool",
 		"eventStormingDrawingHandles",
 		"eventStormingDrawingHitProvider"
 	],
-	eventStormingDrawTool: ["type", er],
-	eventStormingDrawingHandles: ["type", nr],
-	eventStormingDrawingHitProvider: ["type", rr]
-}, or = class {
+	eventStormingDrawTool: ["type", sr],
+	eventStormingDrawingHandles: ["type", lr],
+	eventStormingDrawingHitProvider: ["type", ur]
+}, pr = class {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		e.on("resize.start", 1500, (e) => {
 			let t = e.context;
-			ke(t.shape) && (t.minDimensions = E);
+			je(t.shape) && (t.minDimensions = E);
 		});
 	}
-}, sr = {
-	__depends__: [me],
+}, mr = {
+	__depends__: [ge],
 	__init__: ["eventStormingResizeBehavior"],
-	eventStormingResizeBehavior: ["type", or]
-}, cr = class extends _t {
+	eventStormingResizeBehavior: ["type", pr]
+}, hr = class extends yt {
 	_getModules() {
 		return [
 			...super._getModules(),
@@ -2448,21 +2489,21 @@ var ar = {
 			re,
 			ae,
 			oe,
-			Mt,
-			yt,
-			Lt,
+			Pt,
+			xt,
 			zt,
-			Wt,
-			hn,
-			Rn,
-			Wn,
-			Jt,
-			Jn,
+			Vt,
+			Zt,
+			Sn,
+			Gn,
 			Zn,
-			Nt,
-			Qn,
+			tn,
+			tr,
+			ir,
+			Ft,
 			ar,
-			sr
+			fr,
+			mr
 		];
 	}
 	undo() {
@@ -2479,6 +2520,6 @@ var ar = {
 	}
 };
 //#endregion
-export { Fe as BoardBounds, k as COLORS, qn as EventStormingAppendBehavior, vt as EventStormingAttachBehavior, _e as EventStormingBaseViewer, Xn as EventStormingColorPicker, je as EventStormingElementFactory, qt as EventStormingElementSettingsProvider, pt as EventStormingExporter, ft as EventStormingImporter, Fn as EventStormingLabelEditing, wt as EventStormingModeling, Ze as EventStormingRenderer, or as EventStormingResizeBehavior, It as EventStormingRules, Re as EventStormingViewOptions, dn as ICON_ADD, en as ICON_CODE, $t as ICON_DATA_OBJECT, Z as ICON_DELETE, tn as ICON_DOWNLOAD, X as ICON_EDIT, pn as ICON_EYE, fn as ICON_FIT, rn as ICON_FOLDER_OPEN, an as ICON_IMAGE, un as ICON_MENU, on as ICON_NEW, Yt as ICON_PERSON, Qt as ICON_REDO, nn as ICON_SHARE, Zt as ICON_UNDO, S as MIRAGON, cr as Modeler, T as NOTE_STYLE, _t as NavigatedViewer, Y as POPUP_PROVIDER_ID, Ee as ROOT_ID, P as STICKY_KINDS, w as STICKY_STYLES, Le as VIEW_OPTIONS_CHANGED_EVENT, gt as Viewer, Ie as boardBoundsModule, zt as elementSnappingModule, Jn as eventStormingAppendModule, yt as eventStormingAttachModule, Zn as eventStormingColorPickerModule, hn as eventStormingContextPadModule, ut as eventStormingDrawModule, Wn as eventStormingKeyboardModule, Ne as eventStormingModelModule, Mt as eventStormingModelingModule, Wt as eventStormingPaletteModule, Jt as eventStormingPopupModule, sr as eventStormingResizeModule, Lt as eventStormingRulesModule, V as eventStormingViewOptionsModule, Q as iconMarkup, ht as ioModule, L as isAttachableKind, Oe as isAttachableSticky, N as isEventStormingConnection, M as isEventStormingShape, R as isHostKind, z as isHostSticky, I as isSticky, F as isStickyKind, Rn as labelEditingModule, C as parseNoteMarkdown, be as plainNoteText, he as saveSVG, ye as serializeNoteMarkdown };
+export { Le as BoardBounds, A as COLORS, er as EventStormingAppendBehavior, bt as EventStormingAttachBehavior, ye as EventStormingBaseViewer, rr as EventStormingColorPicker, Ne as EventStormingElementFactory, en as EventStormingElementSettingsProvider, ht as EventStormingExporter, mt as EventStormingImporter, Hn as EventStormingLabelEditing, Et as EventStormingModeling, $e as EventStormingRenderer, pr as EventStormingResizeBehavior, Rt as EventStormingRules, Be as EventStormingViewOptions, vn as ICON_ADD, cn as ICON_CODE, sn as ICON_DATA_OBJECT, Z as ICON_DELETE, ln as ICON_DOWNLOAD, X as ICON_EDIT, bn as ICON_EYE, yn as ICON_FIT, dn as ICON_FOLDER_OPEN, fn as ICON_IMAGE, _n as ICON_MENU, pn as ICON_NEW, nn as ICON_PERSON, on as ICON_REDO, un as ICON_SHARE, an as ICON_UNDO, S as MIRAGON, hr as Modeler, T as NOTE_STYLE, yt as NavigatedViewer, Y as POPUP_PROVIDER_ID, De as ROOT_ID, F as STICKY_KINDS, w as STICKY_STYLES, ze as VIEW_OPTIONS_CHANGED_EVENT, vt as Viewer, Re as boardBoundsModule, Vt as elementSnappingModule, tr as eventStormingAppendModule, xt as eventStormingAttachModule, ir as eventStormingColorPickerModule, Sn as eventStormingContextPadModule, ft as eventStormingDrawModule, Zn as eventStormingKeyboardModule, Fe as eventStormingModelModule, Pt as eventStormingModelingModule, Zt as eventStormingPaletteModule, tn as eventStormingPopupModule, mr as eventStormingResizeModule, zt as eventStormingRulesModule, V as eventStormingViewOptionsModule, Q as iconMarkup, _t as ioModule, ke as isAttachableKind, Ae as isAttachableSticky, P as isEventStormingConnection, N as isEventStormingShape, R as isHostKind, z as isHostSticky, L as isSticky, I as isStickyKind, Gn as labelEditingModule, C as parseNoteMarkdown, Se as plainNoteText, _e as saveSVG, xe as serializeNoteMarkdown };
 
 //# sourceMappingURL=index.js.map