@miragon/context-maps-renderer 0.5.0 → 0.6.1

package/dist/index.js

@@ -1,15 +1,15 @@
 import e from "diagram-js/lib/Diagram";
-import { ALL_PATTERN_SPECS as t, ALL_SUBDOMAIN_SPECS as n, CONTEXT_KEYS as r, DIAGRAM_ROOT_ID as i, DOCUMENT_KEYS as a, DOCUMENT_VERSION as o, DOWNSTREAM_ROLES as s, DOWNSTREAM_ROLE_SPECS as c, MARK_COLORS as l, MARK_TEXT_COLOR as u, RELATIONSHIP_KEYS as d, RELATIONSHIP_PATTERN_SPECS as f, SUBDOMAIN_TYPE_SPECS as p, UPSTREAM_ROLES as m, UPSTREAM_ROLE_SPECS as h, foreignFields as g, isSymmetricPattern as ee, newId as te, parseDocumentText as ne, reservedIdProblem as re, serializeDocumentText as ie, validateDocument as ae } from "@miragon/context-maps-schema-model";
-import oe from "diagram-js/lib/layout/CroppingConnectionDocking";
-import se from "diagram-js/lib/core/ElementFactory";
-import { asTRBL as ce, getMid as _ } from "diagram-js/lib/layout/LayoutUtil";
-import le from "diagram-js/lib/draw/BaseRenderer";
-import { append as v, attr as y, clear as ue, create as b } from "tiny-svg";
+import { ALL_PATTERN_SPECS as t, ALL_SUBDOMAIN_SPECS as n, CONTEXT_KEYS as r, DIAGRAM_ROOT_ID as i, DOCUMENT_KEYS as a, DOCUMENT_VERSION as o, DOWNSTREAM_ROLES as s, DOWNSTREAM_ROLE_SPECS as c, MARK_COLORS as l, RELATIONSHIP_KEYS as u, RELATIONSHIP_PATTERN_SPECS as d, SUBDOMAIN_TYPE_SPECS as f, UPSTREAM_ROLES as p, UPSTREAM_ROLE_SPECS as m, foreignFields as h, isSymmetricPattern as g, newId as ee, parseDocumentText as te, reservedIdProblem as ne, serializeDocumentText as re, validateDocument as ie } from "@miragon/context-maps-schema-model";
+import ae from "diagram-js/lib/layout/CroppingConnectionDocking";
+import oe from "diagram-js/lib/core/ElementFactory";
+import { asTRBL as se, getMid as _ } from "diagram-js/lib/layout/LayoutUtil";
+import ce from "diagram-js/lib/draw/BaseRenderer";
+import { append as v, attr as y, clear as le, create as b } from "tiny-svg";
 import x from "diagram-js/lib/features/selection";
-import de from "diagram-js/lib/navigation/zoomscroll";
-import fe from "diagram-js/lib/navigation/movecanvas";
-import pe from "diagram-js/lib/features/connection-preview";
-import S from "diagram-js/lib/features/modeling";
+import ue from "diagram-js/lib/navigation/zoomscroll";
+import de from "diagram-js/lib/navigation/movecanvas";
+import fe from "diagram-js/lib/features/connection-preview";
+import pe from "diagram-js/lib/features/modeling";
 import me from "diagram-js/lib/features/move";
 import he from "diagram-js/lib/features/outline";
 import ge from "diagram-js/lib/features/rules";
@@ -28,21 +28,20 @@ import { DEFAULT_DISTANCE as Oe, findFreePosition as ke, generateGetNextPosition
 import je from "diagram-js/lib/features/overlays";
 import { MODELER_API_VERSION as Me } from "@miragon/modeler-api";
 import { getBBox as Ne } from "diagram-js/lib/util/Elements";
-//#region src/model/di-types.ts
+// src/model/di-types.ts
 function Pe(e) {
 	return typeof e == "object" && e ? e.cmKind : void 0;
 }
-function C(e) {
+function S(e) {
 	return typeof Pe(e) == "string";
 }
-function w(e) {
+function C(e) {
 	return Pe(e) === "context";
 }
-function T(e) {
+function w(e) {
 	return Pe(e) === "relationship";
 }
-//#endregion
-//#region src/io/saveSvg.ts
+// src/io/saveSvg.ts
 var Fe = 40, Ie = [
 	"tabindex",
 	"role",
@@ -53,7 +52,7 @@ function Le(e, t) {
 	if (!n) throw Error("No SVG found in the canvas container.");
 	let r = Infinity, i = Infinity, a = -Infinity, o = -Infinity;
 	for (let e of t.getAll()) {
-		if (!w(e)) continue;
+		if (!C(e)) continue;
 		let t = e;
 		r = Math.min(r, t.x), i = Math.min(i, t.y), a = Math.max(a, t.x + t.width), o = Math.max(o, t.y + t.height);
 	}
@@ -64,9 +63,8 @@ function Le(e, t) {
 	let f = d.querySelector(".viewport");
 	return f && f.removeAttribute("transform"), { svg: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + new XMLSerializer().serializeToString(d) };
 }
-//#endregion
-//#region src/theme/palette.ts
-var E = {
+// src/theme/palette.ts
+var T = {
 	blau: "#335DE5",
 	blauLink: "#2B50D4",
 	blauHell: "#6B8AFF",
@@ -75,64 +73,64 @@ var E = {
 	schwarz: "#1D1D1D",
 	weiss: "#FFFFFF",
 	linie: "#E6E2E2",
+	kontur: "#8F8A8A",
+	textLeise: "#6B6666",
 	success: "#00E676",
 	warning: "#FFB000",
 	danger: "#CD1839",
 	info: "#335DE5",
 	gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
 }, Re = {
-	"--cd-blau": E.blau,
-	"--cd-gruen": E.gruen,
-	"--cd-grau": E.grau,
-	"--cd-schwarz": E.schwarz,
-	"--cd-weiss": E.weiss,
-	"--cd-blau-link": E.blauLink,
-	"--cd-blau-hell": E.blauHell,
-	"--cd-linie": E.linie,
-	"--cd-success": E.success,
-	"--cd-warning": E.warning,
-	"--cd-danger": E.danger,
-	"--cd-info": E.info,
-	"--cd-gradient-brand": E.gradientBrand
-}, ze = {
-	width: 440,
-	height: 820
-}, Be = 1500;
-E.blau;
-var D = E.schwarz, Ve = "#5B5B5B", O = {
+	"--cd-blau": T.blau,
+	"--cd-gruen": T.gruen,
+	"--cd-grau": T.grau,
+	"--cd-schwarz": T.schwarz,
+	"--cd-weiss": T.weiss,
+	"--cd-blau-link": T.blauLink,
+	"--cd-blau-hell": T.blauHell,
+	"--cd-linie": T.linie,
+	"--cd-kontur": T.kontur,
+	"--cd-text-leise": T.textLeise,
+	"--cd-success": T.success,
+	"--cd-warning": T.warning,
+	"--cd-danger": T.danger,
+	"--cd-info": T.info,
+	"--cd-gradient-brand": T.gradientBrand
+}, ze = 1500;
+T.blau;
+var E = T.schwarz, Be = T.textLeise, D = {
 	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13.5,
 	small: 11
-}, k = E.weiss, He = "#F1F1EE", Ue = "#8A8577", A;
+}, O = T.weiss, Ve = T.weiss, k = T.kontur, A;
 function j(e, t, n) {
-	return A === void 0 && (A = typeof document > "u" ? null : document.createElement("canvas").getContext("2d")), A ? (A.font = `${n} ${t}px ${O.family}`, A.measureText(e).width) : e.length * t * .58;
+	return A === void 0 && (A = typeof document > "u" ? null : document.createElement("canvas").getContext("2d")), A ? (A.font = `${n} ${t}px ${D.family}`, A.measureText(e).width) : e.length * t * .58;
 }
-//#endregion
-//#region src/draw/contextLayout.ts
+// src/draw/contextLayout.ts
 var M = {
 	x: 28,
 	y: 15,
 	fontWeight: "700",
 	letterSpacingEm: .03
-}, We = 5, Ge = 12;
-function Ke(e, t, n) {
-	let r = n.length * O.small * .55, i = e / 2 - (19 + r) / 2, a = i + 14 + We;
+}, He = 5, Ue = 12;
+function We(e, t, n) {
+	let r = n.length * D.small * .55, i = e / 2 - (19 + r) / 2, a = i + 14 + He;
 	return {
 		left: i,
 		iconCenterX: i + 7,
 		textX: a,
-		centerY: t - Ge,
-		right: a + j(n, O.small, "400")
+		centerY: t - Ue,
+		right: a + j(n, D.small, "400")
 	};
 }
-function qe(e) {
-	let { label: t } = p[e], n = M.letterSpacingEm * O.small;
-	return M.x + j(t, O.small, M.fontWeight) + t.length * n;
+function Ge(e) {
+	let { label: t } = f[e], n = M.letterSpacingEm * D.small;
+	return M.x + j(t, D.small, M.fontWeight) + t.length * n;
 }
-function Je(e) {
+function Ke(e) {
 	let t = 0, n = e.width;
-	if (e.subdomainType && p[e.subdomainType] && (n = Math.max(n, qe(e.subdomainType))), e.team) {
-		let r = Ke(e.width, 0, e.team);
+	if (e.subdomainType && f[e.subdomainType] && (n = Math.max(n, Ge(e.subdomainType))), e.team) {
+		let r = We(e.width, 0, e.team);
 		t = Math.min(t, r.left), n = Math.max(n, r.right);
 	}
 	return {
@@ -140,9 +138,8 @@ function Je(e) {
 		right: e.x + n
 	};
 }
-//#endregion
-//#region src/model/contentBounds.ts
-function Ye(e) {
+// src/model/contentBounds.ts
+function qe(e) {
 	let t = Infinity, n = Infinity, r = -Infinity, i = -Infinity, a = (e, a, o, s) => {
 		[
 			e,
@@ -151,10 +148,10 @@ function Ye(e) {
 			s
 		].every(Number.isFinite) && (t = Math.min(t, e), n = Math.min(n, a), r = Math.max(r, e + o), i = Math.max(i, a + s));
 	};
-	for (let t of e) if (w(t)) {
-		let e = Je(t);
+	for (let t of e) if (C(t)) {
+		let e = Ke(t);
 		a(e.left, t.y, e.right - e.left, t.height);
-	} else if (T(t)) for (let e of t.waypoints ?? []) a(e.x, e.y, 0, 0);
+	} else if (w(t)) for (let e of t.waypoints ?? []) a(e.x, e.y, 0, 0);
 	if (!(t > r || n > i)) return {
 		x: t,
 		y: n,
@@ -162,18 +159,17 @@ function Ye(e) {
 		height: i - n
 	};
 }
-//#endregion
-//#region src/io/types.ts
-var N = i, Xe = {
+// src/io/types.ts
+var N = i, Je = {
 	top: 84,
 	right: 56,
 	bottom: 56,
 	left: 56
-}, Ze = .001;
-function Qe(e) {
+}, Ye = .001;
+function Xe(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var $e = class {
+var Ze = class {
 	_diagram;
 	_container;
 	_options;
@@ -182,7 +178,7 @@ var $e = class {
 	}
 	_createContainer(e) {
 		let t = e.container ?? document.createElement("div");
-		return t.classList.add("cm-djs-container"), t.style.width = Qe(e.width ?? "100%"), t.style.height = Qe(e.height ?? (e.container ? "100%" : "600px")), t;
+		return t.classList.add("cm-djs-container"), t.style.width = Xe(e.width ?? "100%"), t.style.height = Xe(e.height ?? (e.container ? "100%" : "600px")), t;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
@@ -204,7 +200,7 @@ var $e = class {
 	}
 	freeRectInsets = () => {
 		let { freeArea: e, freeRectInsets: t } = this._options;
-		return (e ? e.insets?.() : t?.()) ?? Xe;
+		return (e ? e.insets?.() : t?.()) ?? Je;
 	};
 	freeRectCenter = () => this._options.freeArea?.center?.();
 	_optional(e) {
@@ -225,7 +221,7 @@ var $e = class {
 		return this._optional("commandStack")?.clear(!1), (this._options.fitOnImport ?? !0) && this._fit(), n.fire("import.done", { warnings: a }), i?.resumeAfterImport(), { warnings: a };
 	}
 	importText(e) {
-		let t = ne(e);
+		let t = te(e);
 		if (!t.ok) throw Error(t.error);
 		return this.importDocument(t.document);
 	}
@@ -233,7 +229,7 @@ var $e = class {
 		return this.get("cmExporter").export();
 	}
 	exportText() {
-		return ie(this.exportDocument());
+		return re(this.exportDocument());
 	}
 	setMeta(e) {
 		if (e.title === void 0 || this._optional("cmReadOnly")?.isReadOnly()) return;
@@ -255,7 +251,7 @@ var $e = class {
 		return Le(this.get("canvas"), this.get("elementRegistry"));
 	}
 	contentBounds() {
-		if (this._diagram) return Ye(this._diagram.get("elementRegistry").getAll());
+		if (this._diagram) return qe(this._diagram.get("elementRegistry").getAll());
 	}
 	_fit() {
 		let e = this.get("canvas"), { width: t, height: n } = e.getSize();
@@ -270,7 +266,7 @@ var $e = class {
 			});
 			return;
 		}
-		let i = this.freeRectInsets(), a = Math.max(t - i.left - i.right, 1), o = Math.max(n - i.top - i.bottom, 1), s = Math.max(r.width, 1), c = Math.max(r.height, 1), l = Math.max(Math.min(a / s, o / c, 1), Ze);
+		let i = this.freeRectInsets(), a = Math.max(t - i.left - i.right, 1), o = Math.max(n - i.top - i.bottom, 1), s = Math.max(r.width, 1), c = Math.max(r.height, 1), l = Math.max(Math.min(a / s, o / c, 1), Ye);
 		e.viewbox({
 			x: r.x + s / 2 - (i.left + a / 2) / l,
 			y: r.y + c / 2 - (i.top + o / 2) / l,
@@ -294,20 +290,19 @@ var $e = class {
 		return this._container;
 	}
 };
-//#endregion
-//#region src/model/CmElementFactory.ts
-function et(e, t) {
-	let n = g(e, t);
+// src/model/CmElementFactory.ts
+function Qe(e, t) {
+	let n = h(e, t);
 	return Object.keys(n).length > 0 ? { cmForeign: n } : {};
 }
-var tt = class {
+var $e = class {
 	elementFactory;
 	static $inject = ["elementFactory"];
 	constructor(e) {
 		this.elementFactory = e;
 	}
 	createContext(e) {
-		let t = (e.subdomainType ? p[e.subdomainType] : void 0)?.minSize ?? {
+		let t = (e.subdomainType ? f[e.subdomainType] : void 0)?.minSize ?? {
 			width: 120,
 			height: 72
 		};
@@ -324,7 +319,7 @@ var tt = class {
 			...e.description ? { description: e.description } : {},
 			...e.fill ? { fill: e.fill } : {},
 			...e.stroke ? { stroke: e.stroke } : {},
-			...et(e, r)
+			...Qe(e, r)
 		});
 	}
 	createRelationship(e, t, n, r) {
@@ -340,11 +335,11 @@ var tt = class {
 			...e.label ? { cmLabel: e.label } : {},
 			...e.description ? { description: e.description } : {},
 			...e.implementationTechnology ? { implementationTechnology: e.implementationTechnology } : {},
-			...et(e, d)
+			...Qe(e, u)
 		});
 	}
 	createNewContext(e, t) {
-		let n = (e ? p[e] : void 0)?.defaultSize ?? p.generic.defaultSize;
+		let n = (e ? f[e] : void 0)?.defaultSize ?? f.generic.defaultSize;
 		return this.elementFactory.createShape({
 			width: n.width,
 			height: n.height,
@@ -353,14 +348,14 @@ var tt = class {
 			cmLabel: t ?? "New Context"
 		});
 	}
-}, nt = class extends se {
+}, et = class extends oe {
 	create(e, t) {
-		return !t?.id && (e === "shape" || e === "connection") && (t = {
+		return t?.id || e !== "shape" && e !== "connection" || (t = {
 			...t,
-			id: te(e === "shape" ? "ctx" : "rel")
+			id: ee(e === "shape" ? "ctx" : "rel")
 		}), super.create(e, t);
 	}
-}, rt = class {
+}, tt = class {
 	docking;
 	static $inject = ["connectionDocking"];
 	constructor(e) {
@@ -370,16 +365,80 @@ var tt = class {
 		let n = t.source ?? e.source, r = t.target ?? e.target, i = [n ? _(n) : t.connectionStart || void 0, r ? _(r) : t.connectionEnd || void 0].filter(Boolean);
 		return e.waypoints = i, n && r && i.length === 2 ? this.docking.getCroppedWaypoints(e, n, r) : i;
 	}
-}, it = {
-	elementFactory: ["type", nt],
-	cmElementFactory: ["type", tt],
-	connectionDocking: ["type", oe]
+}, nt = {
+	elementFactory: ["type", et],
+	cmElementFactory: ["type", $e],
+	connectionDocking: ["type", ae]
 };
-//#endregion
-//#region src/draw/endRoleChips.ts
-function at(e, t, n, r) {
+// src/draw/contextColours.ts
+function rt(e) {
+	let t = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
+	if (!t) return;
+	let n = t[1].length === 3 ? [...t[1]].map((e) => e + e).join("") : t[1], r = (e) => parseInt(n.slice(e, e + 2), 16);
+	return [
+		r(0),
+		r(2),
+		r(4)
+	];
+}
+function it([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 at(e, t) {
+	let n = rt(e), r = rt(t);
+	if (!n || !r) return;
+	let [i, a] = [it(n), it(r)].sort((e, t) => t - e);
+	return (i + .05) / (a + .05);
+}
+function ot(e) {
+	let t = at(E, e), n = at(T.weiss, e);
+	return t === void 0 || n === void 0 ? E : n > t ? T.weiss : E;
+}
+function st(e) {
+	let t = e.subdomainType ? f[e.subdomainType] : void 0;
+	return e.fill ?? t?.fill ?? Ve;
+}
+function ct(e) {
+	let t = e.subdomainType ? f[e.subdomainType] : void 0;
+	return e.stroke ?? t?.stroke ?? k;
+}
+function lt(e) {
+	return ot(st(e));
+}
+function ut(e) {
+	return e.fill ? ot(e.fill) : Be;
+}
+function dt(e) {
+	return ut(e);
+}
+// src/draw/relationshipColours.ts
+function ft(e) {
+	return Object.hasOwn(l, e) ? l[e] : void 0;
+}
+function pt(e) {
+	return ft(e) ?? k;
+}
+function mt(e) {
+	return ot(pt(e));
+}
+function ht(e) {
+	return ft(e) ?? E;
+}
+function gt(e) {
+	return {
+		fill: O,
+		text: E,
+		border: e.stroke
+	};
+}
+// src/draw/endRoleChips.ts
+function _t(e, t, n, r) {
 	if (r.length === 0) return null;
-	let i = t.x - e.x, a = t.y - e.y, o = Math.hypot(i, a) || 1, s = i / o, c = a / o, l = O.small * .64, u = O.small + 6, d = r.map((e) => e.length * l + 12), f = d.reduce((e, t) => e + t, 0) + 3 * (r.length - 1), p = f + 8, m = u + 8, h = 11 + n.length * l / 2 + 8 + p / 2, g = {
+	let i = t.x - e.x, a = t.y - e.y, o = Math.hypot(i, a) || 1, s = i / o, c = a / o, l = D.small * .64, u = D.small + 6, d = r.map((e) => e.length * l + 12), f = d.reduce((e, t) => e + t, 0) + 3 * (r.length - 1), p = f + 8, m = u + 8, h = 11 + n.length * l / 2 + 8 + p / 2, g = {
 		x: e.x + s * h,
 		y: e.y + c * h
 	};
@@ -397,31 +456,54 @@ function at(e, t, n, r) {
 		gap: 3
 	};
 }
-//#endregion
-//#region src/draw/ContextMapsRenderer.ts
-var ot = class extends le {
+// src/draw/lucide.ts
+var vt = {
+	"arrow-left-right": "<path d=\"M8 3 4 7l4 4\"/><path d=\"M4 7h16\"/><path d=\"m16 21 4-4-4-4\"/><path d=\"M20 17H4\"/>",
+	"arrow-right": "<path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/>",
+	"circle-x": "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/>",
+	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\"/>",
+	"sliders-horizontal": "<path d=\"M10 5H3\"/><path d=\"M12 19H3\"/><path d=\"M14 3v4\"/><path d=\"M16 17v4\"/><path d=\"M21 12h-9\"/><path d=\"M21 19h-5\"/><path d=\"M21 5h-7\"/><path d=\"M8 10v4\"/><path d=\"M8 12H3\"/>",
+	"square-dashed-mouse-pointer": "<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\"/>",
+	"square-plus": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M8 12h8\"/><path d=\"M12 8v8\"/>",
+	"text-align-start": "<path d=\"M21 5H3\"/><path d=\"M15 12H3\"/><path d=\"M17 19H3\"/>",
+	"triangle-alert": "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/>",
+	trash: "<path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M3 6h18\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>",
+	users: "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><path d=\"M16 3.128a4 4 0 0 1 0 7.744\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/>",
+	x: "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>"
+}, yt = 2.5;
+function bt(e, t, n) {
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${n}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${vt[e]}</svg>`;
+}
+function P(e) {
+	return bt(e, 16, yt);
+}
+function xt(e) {
+	return bt(e, 20, 2);
+}
+// src/draw/subdomainGlyphs.ts
+var St = "M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 7.1-1.01z", Ct = "M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z", wt = class extends ce {
 	static $inject = ["eventBus"];
 	constructor(e) {
-		super(e, Be);
+		super(e, ze);
 	}
 	canRender(e) {
-		return C(e);
+		return S(e);
 	}
 	drawShape(e, t) {
-		if (ue(e), w(t)) return this.drawContext(e, t);
+		if (le(e), C(t)) return this.drawContext(e, t);
 		let n = y(b("rect"), {
 			width: t.width,
 			height: t.height,
-			fill: "#eee"
+			fill: T.grau
 		});
 		return v(e, n), n;
 	}
 	drawConnection(e, t) {
-		if (ue(e), T(t)) return this.drawRelationship(e, t);
+		if (le(e), w(t)) return this.drawRelationship(e, t);
 		let n = y(b("polyline"), {
 			points: (t.waypoints ?? []).map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
-			stroke: D
+			stroke: E
 		});
 		return v(e, n), n;
 	}
@@ -434,52 +516,56 @@ var ot = class extends le {
 		return t.length === 0 ? "" : t.map((e, t) => `${t === 0 ? "M" : "L"}${e.x},${e.y}`).join("");
 	}
 	drawContext(e, t) {
-		let n = t.subdomainType ? p[t.subdomainType] : void 0, r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = y(b("rect"), {
+		let n = t.subdomainType ? f[t.subdomainType] : void 0, r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = y(b("rect"), {
 			x: 1,
 			y: 1,
 			width: r - 2,
 			height: i - 2,
 			rx: 8,
 			ry: 8,
-			fill: t.fill ?? n?.fill ?? "#F1F1EE",
-			stroke: t.stroke ?? n?.stroke ?? "#8A8577",
+			fill: st(t),
+			stroke: ct(t),
 			"stroke-width": 2,
 			"stroke-linejoin": "round"
 		});
-		if (v(e, a), this.appendLabel(e, t.cmLabel ?? "", r, i, !!t.team, { "font-weight": "650" }), t.subdomainType && n) {
-			v(e, ut(t.subdomainType, 15, 15, 18, n.stroke));
-			let r = y(b("text"), {
+		if (v(e, a), this.appendLabel(e, t.cmLabel ?? "", r, i, !!t.team, {
+			"font-weight": "650",
+			fill: lt(t)
+		}), t.subdomainType && n) {
+			let r = dt(t);
+			v(e, Tt(t.subdomainType, 15, 15, 18, r));
+			let i = y(b("text"), {
 				x: M.x,
 				y: M.y,
-				"font-family": O.family,
-				"font-size": O.small,
+				"font-family": D.family,
+				"font-size": D.small,
 				"font-weight": M.fontWeight,
-				fill: n.stroke,
+				fill: r,
 				"text-anchor": "start",
 				"dominant-baseline": "central",
 				"letter-spacing": `${M.letterSpacingEm}em`
 			});
-			r.textContent = n.label, v(e, r);
+			i.textContent = n.label, v(e, i);
 		}
 		if (t.team) {
-			let n = Ke(r, i, t.team), a = ft(n.iconCenterX, n.centerY, 14, Ve);
-			y(a, { class: "cm-team" }), v(e, a);
-			let o = y(b("text"), {
+			let n = We(r, i, t.team), a = ut(t), o = Et(n.iconCenterX, n.centerY, 14, a);
+			y(o, { class: "cm-team" }), v(e, o);
+			let s = y(b("text"), {
 				class: "cm-team",
 				x: n.textX,
 				y: n.centerY,
-				"font-family": O.family,
-				"font-size": O.small,
-				fill: Ve,
+				"font-family": D.family,
+				"font-size": D.small,
+				fill: a,
 				"text-anchor": "start",
 				"dominant-baseline": "central"
 			});
-			o.textContent = t.team, v(e, o);
+			s.textContent = t.team, v(e, s);
 		}
 		return a;
 	}
 	drawRelationship(e, t) {
-		let n = f[t.pattern] ?? f["upstream-downstream"], r = t.waypoints ?? [], i = n.dash, a = y(b("polyline"), {
+		let n = d[t.pattern] ?? d["upstream-downstream"], r = t.waypoints ?? [], i = n.dash, a = y(b("polyline"), {
 			points: r.map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
 			stroke: n.stroke,
@@ -491,8 +577,8 @@ var ot = class extends le {
 		if (v(e, a), r.length >= 2) {
 			let i = r[0], a = r[r.length - 1], o = t.upstreamRoles ?? [], s = t.downstreamRoles ?? [];
 			if (n.symmetric) {
-				let t = (i.x + a.x) / 2, r = (i.y + a.y) / 2;
-				this.chip(e, t, r, n.abbreviation, k, n.stroke, n.stroke);
+				let t = (i.x + a.x) / 2, r = (i.y + a.y) / 2, o = gt(n);
+				this.chip(e, t, r, n.abbreviation, o.fill, o.text, o.border);
 			} else {
 				let n = t.pattern === "customer-supplier";
 				this.endMarkers(e, i, a, n ? "S" : "U", o), this.endMarkers(e, a, i, n ? "C" : "D", s);
@@ -501,43 +587,45 @@ var ot = class extends le {
 		return a;
 	}
 	endMarkers(e, t, n, r, i) {
-		let a = n.x - t.x, o = n.y - t.y, s = Math.hypot(a, o) || 1, c = a / s, u = o / s, d = l[r] ?? D, f = y(b("text"), {
+		let a = n.x - t.x, o = n.y - t.y, s = Math.hypot(a, o) || 1, c = a / s, l = o / s, u = ht(r), d = y(b("text"), {
 			x: t.x + c * 11,
-			y: t.y + u * 11,
-			"font-family": O.family,
-			"font-size": O.small + 1,
+			y: t.y + l * 11,
+			"font-family": D.family,
+			"font-size": D.small + 1,
 			"font-weight": "800",
-			fill: d,
-			stroke: k,
+			fill: u,
+			stroke: O,
 			"stroke-width": 3,
 			"paint-order": "stroke",
 			"text-anchor": "middle",
 			"dominant-baseline": "central"
 		});
-		f.textContent = r, v(e, f);
-		let p = at(t, n, r, i);
-		if (!p) return;
-		let { box: m, center: h, chipWidths: g, chipHeight: ee, innerWidth: te, gap: ne } = p, re = h.y, ie = y(b("rect"), {
-			x: m.x,
-			y: m.y,
-			width: m.width,
-			height: m.height,
+		d.textContent = r, v(e, d);
+		let f = _t(t, n, r, i);
+		if (!f) return;
+		let { box: p, center: m, chipWidths: h, chipHeight: g, innerWidth: ee, gap: te } = f, ne = m.y, re = y(b("rect"), {
+			class: "cm-role-frame",
+			x: p.x,
+			y: p.y,
+			width: p.width,
+			height: p.height,
 			rx: 6,
 			ry: 6,
-			fill: k,
+			fill: O,
 			"fill-opacity": .96,
-			stroke: "#d9d5cc",
+			stroke: T.linie,
 			"stroke-width": 1
 		});
-		v(e, ie);
-		let ae = h.x - te / 2;
+		v(e, re);
+		let ie = m.x - ee / 2;
 		i.forEach((t, n) => {
-			let r = g[n], i = l[t] ?? "#8A8577";
-			this.miniChip(e, ae + r / 2, re, r, ee, t, i), ae += r + ne;
+			let r = h[n];
+			this.miniChip(e, ie + r / 2, ne, r, g, t), ie += r + te;
 		});
 	}
-	miniChip(e, t, n, r, i, a, o) {
-		let s = y(b("rect"), {
+	miniChip(e, t, n, r, i, a) {
+		let o = pt(a), s = y(b("rect"), {
+			class: "cm-role-chip",
 			x: t - r / 2,
 			y: n - i / 2,
 			width: r,
@@ -545,17 +633,17 @@ var ot = class extends le {
 			rx: 3,
 			ry: 3,
 			fill: o,
-			stroke: st(o),
+			stroke: o,
 			"stroke-width": 1
 		});
 		v(e, s);
 		let c = y(b("text"), {
 			x: t,
 			y: n,
-			"font-family": O.family,
-			"font-size": O.small,
+			"font-family": D.family,
+			"font-size": D.small,
 			"font-weight": "700",
-			fill: u,
+			fill: mt(a),
 			"text-anchor": "middle",
 			"dominant-baseline": "central"
 		});
@@ -563,7 +651,8 @@ var ot = class extends le {
 	}
 	chip(e, t, n, r, i, a, o) {
 		if (!r) return;
-		let s = O.small * .64, c = r.length * s + 12, l = O.small + 8, u = y(b("rect"), {
+		let s = D.small * .64, c = r.length * s + 12, l = D.small + 8, u = y(b("rect"), {
+			class: "cm-pattern-chip",
 			x: t - c / 2,
 			y: n - l / 2,
 			width: c,
@@ -573,14 +662,14 @@ var ot = class extends le {
 			fill: i,
 			stroke: o,
 			"stroke-width": 1,
-			...i === k ? { "fill-opacity": .95 } : {}
+			...i === O ? { "fill-opacity": .95 } : {}
 		});
 		v(e, u);
 		let d = y(b("text"), {
 			x: t,
 			y: n,
-			"font-family": O.family,
-			"font-size": O.small,
+			"font-family": D.family,
+			"font-size": D.small,
 			"font-weight": "700",
 			fill: a,
 			"text-anchor": "middle",
@@ -589,17 +678,17 @@ var ot = class extends le {
 		d.textContent = r, v(e, d);
 	}
 	appendLabel(e, t, n, r, i, a) {
-		let o = typeof a["font-size"] == "number" ? a["font-size"] : O.label, s = String(a["font-weight"] ?? "400"), c = n - 20, l = mt(t, c, o, s), u = o * 1.2, d = r - 36 - (i ? 18 : 8), f = Math.max(1, Math.floor(d / u));
-		l.length > f && (l = l.slice(0, f), l[f - 1] = pt(l[f - 1], c, o, s));
+		let o = typeof a["font-size"] == "number" ? a["font-size"] : D.label, s = String(a["font-weight"] ?? "400"), c = n - 20, l = Ot(t, c, o, s), u = o * 1.2, d = r - 36 - (i ? 18 : 8), f = Math.max(1, Math.floor(d / u));
+		l.length > f && (l = l.slice(0, f), l[f - 1] = Dt(l[f - 1], c, o, s));
 		let p = 36 + u / 2;
 		l.forEach((t, r) => {
 			let i = y(b("text"), {
 				class: "cm-name",
 				x: n / 2,
 				y: p + r * u,
-				"font-family": O.family,
+				"font-family": D.family,
 				"font-size": o,
-				fill: D,
+				fill: E,
 				"text-anchor": "middle",
 				"dominant-baseline": "central",
 				...a
@@ -608,14 +697,7 @@ var ot = class extends le {
 		});
 	}
 };
-function st(e, t = .7) {
-	let n = /^#([0-9a-f]{6})$/i.exec(e);
-	if (!n) return e;
-	let r = parseInt(n[1], 16);
-	return `rgb(${Math.round((r >> 16 & 255) * t)},${Math.round((r >> 8 & 255) * t)},${Math.round((r & 255) * t)})`;
-}
-var ct = "M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 7.1-1.01z", lt = "M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z";
-function ut(e, t, n, r, i) {
+function Tt(e, t, n, r, i) {
 	if (e === "generic") {
 		let e = b("g"), a = y(b("circle"), {
 			cx: t,
@@ -631,34 +713,35 @@ function ut(e, t, n, r, i) {
 	let a = r / 24, o = e === "supporting" ? " rotate(90 12 12)" : "", s = b("g");
 	y(s, { transform: `translate(${t - 12 * a} ${n - 12 * a}) scale(${a})${o}` });
 	let c = y(b("path"), {
-		d: e === "core" ? ct : lt,
+		d: e === "core" ? St : Ct,
 		fill: i
 	});
 	return v(s, c), s;
 }
-var dt = "M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z";
-function ft(e, t, n, r) {
-	let i = n / 24, a = b("g");
-	y(a, { transform: `translate(${e - 12 * i} ${t - 12 * i}) scale(${i})` });
-	let o = y(b("path"), {
-		d: dt,
-		fill: r
+function Et(e, t, n, r) {
+	let i = n / 24;
+	return y(b(`<g>${vt.users}</g>`), {
+		transform: `translate(${e - 12 * i} ${t - 12 * i}) scale(${i})`,
+		fill: "none",
+		stroke: r,
+		"stroke-width": yt,
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
 	});
-	return v(a, o), a;
 }
-function pt(e, t, n, r) {
+function Dt(e, t, n, r) {
 	let i = e;
 	for (; i && j(`${i}…`, n, r) > t;) i = i.slice(0, -1).trimEnd();
 	return `${i}…`;
 }
-function mt(e, t, n, r) {
+function Ot(e, t, n, r) {
 	let i = e.split("\n");
 	return i.every((e) => e.trim() === "") ? [] : i.flatMap((e) => {
-		let i = ht(e, t, n, r);
+		let i = kt(e, t, n, r);
 		return i.length ? i : [""];
 	});
 }
-function ht(e, t, n, r) {
+function kt(e, t, n, r) {
 	let i = e.split(/\s+/).filter(Boolean);
 	if (i.length === 0) return [];
 	let a = (e) => j(e, n, r) <= t, o = [], s = "";
@@ -682,15 +765,13 @@ function ht(e, t, n, r) {
 	}
 	return s && o.push(s), o;
 }
-//#endregion
-//#region src/draw/index.ts
-var gt = {
+// src/draw/index.ts
+var At = {
 	__init__: ["cmRenderer"],
-	cmRenderer: ["type", ot]
+	cmRenderer: ["type", wt]
 };
-//#endregion
-//#region src/io/CmImporter.ts
-function _t(e, t) {
+// src/io/CmImporter.ts
+function jt(e, t) {
 	let n = e.x + e.width / 2, r = e.y + e.height / 2, i = t.x - n, a = t.y - r;
 	if (i === 0 && a === 0) return {
 		x: n,
@@ -702,13 +783,13 @@ function _t(e, t) {
 		y: r + a * c
 	};
 }
-function vt(e) {
+function Mt(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
-var yt = class {
+var Nt = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -727,7 +808,7 @@ var yt = class {
 	assertImportable(e) {
 		let t = /* @__PURE__ */ new Set();
 		for (let { id: n } of [...e.contexts, ...e.relationships]) {
-			let e = re(n);
+			let e = ne(n);
 			if (e) throw Error(`Cannot draw the map: ${e}.`);
 			if (t.has(n)) throw Error(`The id "${n}" is used more than once.`);
 			t.add(n);
@@ -736,7 +817,7 @@ var yt = class {
 	import(e) {
 		let t = [];
 		this.eventBus.fire("import.render.start", { document: e });
-		let n = this.documentRoot(), r = g(e, a), i = [];
+		let n = this.documentRoot(), r = h(e, a), i = [];
 		n.businessObject = {
 			title: e.title,
 			...Object.keys(r).length > 0 ? { foreign: r } : {}
@@ -755,7 +836,7 @@ var yt = class {
 				});
 				continue;
 			}
-			let s = [_t(e, vt(a)), _t(a, vt(e))], c = this.factory.createRelationship(r, e, a, s);
+			let s = [jt(e, Mt(a)), jt(a, Mt(e))], c = this.factory.createRelationship(r, e, a, s);
 			this.canvas.addConnection(c, n);
 		}
 		for (let e of o.values()) this.canvas.addShape(e, n);
@@ -773,7 +854,7 @@ var yt = class {
 			"waypoints" in t ? this.canvas.removeConnection(t.id) : this.canvas.removeShape(t.id);
 		} catch {}
 	}
-}, bt = class {
+}, Pt = class {
 	elementRegistry;
 	static $inject = ["elementRegistry"];
 	constructor(e) {
@@ -782,7 +863,7 @@ var yt = class {
 	export() {
 		let e = this.elementRegistry.get(N)?.businessObject, t = [], n = [];
 		for (let e of this.elementRegistry.getAll()) if (e.id !== N) {
-			if (w(e)) {
+			if (C(e)) {
 				let n = e;
 				t.push({
 					id: e.id,
@@ -802,7 +883,7 @@ var yt = class {
 					...e.stroke ? { stroke: e.stroke } : {},
 					...e.cmForeign
 				});
-			} else if (T(e)) {
+			} else if (w(e)) {
 				let t = e.source, r = e.target;
 				if (!t?.id || !r?.id) continue;
 				n.push({
@@ -827,31 +908,31 @@ var yt = class {
 			...e?.foreign
 		};
 	}
-}, xt = {
-	cmImporter: ["type", yt],
-	cmExporter: ["type", bt]
-}, St = class extends $e {
+}, Ft = {
+	cmImporter: ["type", Nt],
+	cmExporter: ["type", Pt]
+}, It = class extends Ze {
 	_getModules() {
 		return [
-			it,
-			gt,
-			xt
+			nt,
+			At,
+			Ft
 		];
 	}
-}, Ct = {
+}, Lt = {
 	x: 14,
 	y: 18
-}, wt = 12;
-function Tt(e) {
-	if (w(e)) {
+}, Rt = 12;
+function zt(e) {
+	if (C(e)) {
 		let t = [];
 		return e.description && t.push(e.description), e.team && t.push(`Team: ${e.team}`), t.length === 0 ? null : {
 			title: e.cmLabel ?? "Bounded context",
 			body: t.join(" · ")
 		};
 	}
-	if (T(e)) {
-		let t = f[e.pattern]?.label ?? e.pattern, n = [];
+	if (w(e)) {
+		let t = d[e.pattern]?.label ?? e.pattern, n = [];
 		return e.description && n.push(e.description), e.implementationTechnology && n.push(e.implementationTechnology), {
 			title: e.cmLabel ? `${t} · ${e.cmLabel}` : t,
 			body: n.join(" · ")
@@ -859,7 +940,7 @@ function Tt(e) {
 	}
 	return null;
 }
-var Et = class {
+var Bt = class {
 	static $inject = ["eventBus", "canvas"];
 	tooltip;
 	title;
@@ -868,13 +949,13 @@ var Et = class {
 		let n = t.getContainer();
 		this.tooltip = document.createElement("div"), this.tooltip.className = "cm-hover-tooltip", this.tooltip.setAttribute("role", "tooltip"), this.tooltip.hidden = !0, this.title = document.createElement("strong"), this.body = document.createElement("span"), this.tooltip.append(this.title, this.body), n.append(this.tooltip);
 		let r = (e) => {
-			let t = n.getBoundingClientRect(), r = this.tooltip.offsetWidth, i = Math.min(e.clientX - t.left + Ct.x, t.width - r - wt);
-			this.tooltip.style.left = `${Math.max(wt, i)}px`, this.tooltip.style.top = `${e.clientY - t.top + Ct.y}px`;
+			let t = n.getBoundingClientRect(), r = this.tooltip.offsetWidth, i = Math.min(e.clientX - t.left + Lt.x, t.width - r - Rt);
+			this.tooltip.style.left = `${Math.max(Rt, i)}px`, this.tooltip.style.top = `${e.clientY - t.top + Lt.y}px`;
 		}, i = () => {
 			this.tooltip.hidden = !0, n.removeEventListener("mousemove", r);
 		};
 		e.on("element.hover", (e) => {
-			let t = Tt(e.element);
+			let t = zt(e.element);
 			t ? (this.title.textContent = t.title, this.body.textContent = t.body, this.body.hidden = t.body === "", this.tooltip.hidden = !1, e.originalEvent && r(e.originalEvent), n.addEventListener("mousemove", r)) : i();
 		}), e.on([
 			"element.out",
@@ -885,51 +966,49 @@ var Et = class {
 			i(), this.tooltip.remove();
 		});
 	}
-}, Dt = {
+}, Vt = {
 	__init__: ["cmHoverTooltip"],
-	cmHoverTooltip: ["type", Et]
-}, Ot = class extends St {
+	cmHoverTooltip: ["type", Bt]
+}, Ht = class extends It {
 	_getModules() {
 		return [
 			...super._getModules(),
 			x,
+			ue,
 			de,
-			fe,
-			Dt
+			Vt
 		];
 	}
 };
-//#endregion
-//#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function kt(e, t, n) {
+// src/modeling/cmd/UpdatePropertiesHandler.ts
+function Ut(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var At = class {
+var Wt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], kt(r, e, n[e]);
+		for (let e of Object.keys(n)) i[e] = r[e], Ut(r, e, n[e]);
 		return e.oldProperties = i, [t];
 	}
 	revert(e) {
 		let { element: t, oldProperties: n } = e, r = t;
-		if (n) for (let e of Object.keys(n)) kt(r, e, n[e]);
+		if (n) for (let e of Object.keys(n)) Ut(r, e, n[e]);
 		return [t];
 	}
 };
-//#endregion
-//#region src/modeling/cmd/SwapEndsHandler.ts
-function jt(e) {
+// src/modeling/cmd/SwapEndsHandler.ts
+function Gt(e) {
 	let t = e.source;
 	return e.source = e.target, e.target = t, Array.isArray(e.waypoints) && (e.waypoints = [...e.waypoints].reverse()), [e];
 }
-var Mt = class {
+var Kt = class {
 	execute(e) {
-		return jt(e.connection);
+		return Gt(e.connection);
 	}
 	revert(e) {
-		return jt(e.connection);
+		return Gt(e.connection);
 	}
-}, Nt = class {
+}, qt = class {
 	elementRegistry;
 	static $inject = ["elementRegistry"];
 	constructor(e) {
@@ -954,7 +1033,7 @@ var Mt = class {
 			title: e.oldTitle ?? ""
 		}, [];
 	}
-}, Pt = "element.updateProperties", Ft = "relationship.swapEnds", It = "map.updateTitle", Lt = class {
+}, Jt = "element.updateProperties", Yt = "relationship.swapEnds", Xt = "map.updateTitle", Zt = class {
 	commandStack;
 	elementRegistry;
 	graphicsFactory;
@@ -964,20 +1043,20 @@ var Mt = class {
 		"graphicsFactory"
 	];
 	constructor(e, t, n) {
-		this.commandStack = e, this.elementRegistry = t, this.graphicsFactory = n, e.registerHandler(Pt, At), e.registerHandler(Ft, Mt), e.registerHandler(It, Nt);
+		this.commandStack = e, this.elementRegistry = t, this.graphicsFactory = n, e.registerHandler(Jt, Wt), e.registerHandler(Yt, Kt), e.registerHandler(Xt, qt);
 	}
 	setTitle(e) {
-		this.commandStack.execute(It, { title: e });
+		this.commandStack.execute(Xt, { title: e });
 	}
 	redraw(e) {
 		let t = this.elementRegistry.getGraphics(e);
-		t && this.graphicsFactory.update(T(e) ? "connection" : "shape", e, t);
+		t && this.graphicsFactory.update(w(e) ? "connection" : "shape", e, t);
 	}
 	swapEnds(e) {
-		this.commandStack.execute(Ft, { connection: e }), this.redraw(e);
+		this.commandStack.execute(Yt, { connection: e }), this.redraw(e);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(Pt, {
+		this.commandStack.execute(Jt, {
 			element: e,
 			properties: t
 		}), this.redraw(e);
@@ -1002,7 +1081,7 @@ var Mt = class {
 	}
 	setPattern(e, t) {
 		let n = { pattern: t };
-		if (ee(t)) n.upstreamRoles = void 0, n.downstreamRoles = void 0;
+		if (g(t)) n.upstreamRoles = void 0, n.downstreamRoles = void 0;
 		else if (t === "customer-supplier") {
 			let t = (e.upstreamRoles ?? []).filter((e) => e !== "OHS"), r = (e.downstreamRoles ?? []).filter((e) => e !== "CF");
 			n.upstreamRoles = t.length ? t : void 0, n.downstreamRoles = r.length ? r : void 0;
@@ -1018,36 +1097,35 @@ var Mt = class {
 	setImplementationTechnology(e, t) {
 		this.updateProperties(e, { implementationTechnology: t || void 0 });
 	}
-}, P = {
+}, F = {
 	__init__: ["cmModeling"],
-	cmModeling: ["type", Lt],
-	layouter: ["type", rt]
-}, Rt = class extends _e {
+	cmModeling: ["type", Zt],
+	layouter: ["type", tt]
+}, Qt = class extends _e {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		super(e);
 	}
 	init() {
-		this.addRule(["shape.move", "elements.move"], (e) => e.target && e.target.parent ? null : !0), this.addRule("shape.create", () => !0), this.addRule("shape.resize", () => !1), this.addRule("connection.create", (e) => Bt(e.source, e.target)), this.addRule("connection.reconnect", (e) => !!Bt(e.source, e.target, e.connection)), this.addRule("connection.updateWaypoints", () => !0);
+		this.addRule(["shape.move", "elements.move"], (e) => e.target && e.target.parent ? null : !0), this.addRule("shape.create", () => !0), this.addRule("shape.resize", () => !1), this.addRule("connection.create", (e) => en(e.source, e.target)), this.addRule("connection.reconnect", (e) => !!en(e.source, e.target, e.connection)), this.addRule("connection.updateWaypoints", () => !0);
 	}
 };
-function zt(e, t, n) {
+function $t(e, t, n) {
 	let { incoming: r = [], outgoing: i = [] } = e;
 	return [...r, ...i].some((r) => r !== n && (r.source === e && r.target === t || r.source === t && r.target === e));
 }
-function Bt(e, t, n) {
-	return !w(e) || !w(t) || e === t || zt(e, t, n) ? !1 : {
+function en(e, t, n) {
+	return !C(e) || !C(t) || e === t || $t(e, t, n) ? !1 : {
 		cmKind: "relationship",
 		pattern: "upstream-downstream"
 	};
 }
-//#endregion
-//#region src/rules/index.ts
-var F = {
+// src/rules/index.ts
+var tn = {
 	__depends__: [ge],
 	__init__: ["cmRules"],
-	cmRules: ["type", Rt]
-}, Vt = class extends ve {
+	cmRules: ["type", Qt]
+}, nn = class extends ve {
 	static $inject = [
 		"eventBus",
 		"canvas",
@@ -1075,33 +1153,33 @@ var F = {
 			}
 		}, !0);
 	}
-}, Ht = "cm-dragging", Ut = class {
+}, rn = "cm-dragging", an = class {
 	static $inject = ["eventBus", "canvas"];
 	constructor(e, t) {
 		e.on("drag.init", () => {
-			t.getContainer().classList.add(Ht);
+			t.getContainer().classList.add(rn);
 		}), e.on("drag.cleanup", () => {
-			t.getContainer().classList.remove(Ht);
+			t.getContainer().classList.remove(rn);
 		});
 	}
-}, Wt = 2e3, Gt = {
+}, on = 2e3, sn = {
 	__init__: [
 		"cmFlatModelBehavior",
 		"cmDragBehavior",
 		"cmClickSelectionBehavior"
 	],
-	cmFlatModelBehavior: ["type", Vt],
-	cmDragBehavior: ["type", Ut],
+	cmFlatModelBehavior: ["type", nn],
+	cmDragBehavior: ["type", an],
 	cmClickSelectionBehavior: ["type", class {
 		static $inject = ["eventBus", "selection"];
 		constructor(e, t) {
-			e.on("element.click", Wt, (e) => {
+			e.on("element.click", on, (e) => {
 				let n = e.element;
-				if (C(n) && !ye(e) && t.isSelected(n)) return !1;
+				if (S(n) && !ye(e) && t.isSelected(n)) return !1;
 			});
 		}
 	}]
-}, I = "cm.readOnly.changed", Kt = 5e3, qt = [
+}, I = "cm.readOnly.changed", cn = 5e3, ln = [
 	"elements.move",
 	"shape.move",
 	"shape.resize",
@@ -1113,7 +1191,7 @@ var F = {
 	"connection.reconnect",
 	"connection.updateWaypoints",
 	"elements.delete"
-], Jt = class extends _e {
+], un = class extends _e {
 	bus;
 	static $inject = ["eventBus"];
 	readOnly = !1;
@@ -1121,7 +1199,7 @@ var F = {
 		super(e), this.bus = e;
 	}
 	init() {
-		this.addRule(qt, Kt, () => !this.readOnly && void 0);
+		this.addRule(ln, cn, () => !this.readOnly && void 0);
 	}
 	isReadOnly() {
 		return this.readOnly;
@@ -1132,11 +1210,11 @@ var F = {
 }, L = {
 	__depends__: [ge],
 	__init__: ["cmReadOnly"],
-	cmReadOnly: ["type", Jt]
-}, Yt = {
+	cmReadOnly: ["type", un]
+}, dn = {
 	name: "cm-direct-editing",
 	team: "cm-direct-editing-team"
-}, Xt = 10, Zt = 20, Qt = class {
+}, fn = 10, pn = 20, mn = class {
 	canvas;
 	directEditing;
 	modeling;
@@ -1160,15 +1238,17 @@ var F = {
 			update: (e, t) => this.commit(e, t)
 		}), e.on("element.dblclick", (e) => {
 			let t = e.element;
-			C(t) && (this.mode = w(t) && t.team && this.isInTeamBand(t, e.originalEvent) ? "team" : "name", n.activate(t));
+			S(t) && (this.mode = C(t) && t.team && this.isInTeamBand(t, e.originalEvent) ? "team" : "name", n.activate(t));
 		}), e.on("drag.init", () => n.complete()), e.on("canvas.viewbox.changed", () => this.placeOpenEdit()), e.on("directEditing.activate", (e) => {
-			let n = e.active?.element;
-			if (!n) return;
-			let r = Yt[this.mode];
-			t.addMarker(n, r), this.activeMarker = {
-				element: n,
-				marker: r
+			let r = e.active?.element;
+			if (!r) return;
+			let i = dn[this.mode];
+			t.addMarker(r, i), this.activeMarker = {
+				element: r,
+				marker: i
 			};
+			let a = n.$textbox;
+			C(r) && a && (a.style.color = this.mode === "team" ? ut(r) : lt(r));
 		}), e.on(["directEditing.complete", "directEditing.cancel"], () => {
 			let e = this.activeMarker;
 			e && t.removeMarker(e.element, e.marker), this.activeMarker = void 0;
@@ -1217,9 +1297,9 @@ var F = {
 	}
 	resume(e) {
 		let t = this.elementRegistry.get(e.elementId);
-		if (!C(t) || e.mode === "team" && !w(t) || (this.mode = e.mode, !this.directEditing.activate(t))) return;
+		if (!S(t) || e.mode === "team" && !C(t) || (this.mode = e.mode, !this.directEditing.activate(t))) return;
 		let n = this.directEditing.$textbox?.querySelector("[contenteditable]");
-		n && (n.innerText = e.text, $t(n));
+		n && (n.innerText = e.text, hn(n));
 	}
 	activate(e) {
 		this.mode = "name", this.directEditing.activate(e);
@@ -1236,22 +1316,22 @@ var F = {
 		return t.clientY - i >= r.y + r.height - 22 * n;
 	}
 	activationContext(e) {
-		if (!C(e)) return;
-		this.mode === "team" && !w(e) && (this.mode = "name");
+		if (!S(e)) return;
+		this.mode === "team" && !C(e) && (this.mode = "name");
 		let t = this.canvas.zoom(), n = this.canvas.getAbsoluteBBox(e);
 		if (this.mode === "team") {
 			let r = e;
 			return {
 				bounds: {
-					x: n.x + Xt * t,
+					x: n.x + fn * t,
 					y: n.y + n.height - 22 * t,
 					width: n.width - 20 * t,
-					height: Zt * t
+					height: pn * t
 				},
 				text: r.team ?? "",
 				style: {
-					fontFamily: O.family,
-					fontSize: `${O.small * t}px`,
+					fontFamily: D.family,
+					fontSize: `${D.small * t}px`,
 					fontWeight: 400,
 					lineHeight: 1.2,
 					backgroundColor: "transparent",
@@ -1262,19 +1342,19 @@ var F = {
 			};
 		}
 		let r = {
-			fontFamily: O.family,
-			fontSize: `${O.label * t}px`,
+			fontFamily: D.family,
+			fontSize: `${D.label * t}px`,
 			fontWeight: 650,
 			lineHeight: 1.2,
 			backgroundColor: "transparent",
 			border: "1px dashed var(--cd-ui-interaktion)",
 			textAlign: "center"
 		};
-		if (w(e)) {
+		if (C(e)) {
 			let i = e.team ? 18 * t : 0;
 			return {
 				bounds: {
-					x: n.x + Xt * t,
+					x: n.x + fn * t,
 					y: n.y + 36 * t - 1,
 					width: n.width - 20 * t,
 					height: n.height - 36 * t - i
@@ -1308,87 +1388,161 @@ var F = {
 		} else n !== (e.cmLabel ?? "") && this.modeling.updateLabel(e, n);
 	}
 };
-function $t(e) {
+function hn(e) {
 	let t = document.createRange();
 	t.selectNodeContents(e), t.collapse(!1);
 	let n = window.getSelection();
 	n?.removeAllRanges(), n?.addRange(t);
 }
-//#endregion
-//#region src/label-editing/index.ts
+// src/label-editing/index.ts
 var R = {
 	__depends__: [
 		we,
-		P,
+		F,
 		L
 	],
 	__init__: ["cmLabelEditing"],
-	cmLabelEditing: ["type", Qt]
+	cmLabelEditing: ["type", mn]
+}, gn = {
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
 };
-//#endregion
-//#region src/draw/palette-icons.ts
-function z(e, t = 24) {
-	return `<svg class="cm-palette-svg" width="${t}" height="${t}" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
-}
-var en = "M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 7.1-1.01z", tn = "M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z";
-function nn(e, t, n, r, i) {
-	if (e === "generic") return `<circle cx="${t}" cy="${n}" r="${r / 2 - .5}" fill="none" stroke="${i}" stroke-width="1.4" stroke-dasharray="1.8 1.8"/>`;
-	let a = r / 24, o = e === "supporting" ? " rotate(90 12 12)" : "", s = `translate(${t - 12 * a} ${n - 12 * a}) scale(${a})${o}`;
-	return `<path d="${e === "core" ? en : tn}" fill="${i}" transform="${s}"/>`;
-}
-function B(e) {
-	let t = e ? p[e] : void 0;
-	return z(!e || !t ? `<rect x="2" y="4" width="22" height="18" rx="3.5" fill="${He}" stroke="${Ue}" stroke-width="1.5"/>` : `<rect x="2" y="4" width="22" height="18" rx="3.5" fill="${t.fill}" stroke="${t.stroke}" stroke-width="1.5"/>` + nn(e, 13, 13, 12, t.stroke));
-}
-function rn(e, t = 18) {
-	let n = p[e], r = n?.stroke ?? "#8A8577";
-	return `<svg class="cm-palette-svg" width="${t}" height="${t}" viewBox="0 0 24 24" aria-hidden="true">${!n || e === "generic" ? `<circle cx="12" cy="12" r="9" fill="none" stroke="${r}" stroke-width="1.8" stroke-dasharray="2.4 2.4"/>` : `<path d="${e === "core" ? en : tn}" fill="${r}"/>`}</svg>`;
-}
-function V(e) {
-	return z(`<rect x="1" y="6.5" width="24" height="13" rx="3" fill="${l[e] ?? "#8A8577"}"/><text x="13" y="16.4" text-anchor="middle" font-size="9.5" font-weight="700" fill="${u}" font-family="${O.family}">${e}</text>`);
-}
-function H(e = "upstream-downstream", t = 24) {
-	let n = f[e] ?? f["upstream-downstream"], r = n.dash ? ` stroke-dasharray="${n.dash}"` : "", i = Math.min(n.strokeWidth, 2.6);
-	return z(`<g stroke="${n.stroke}" stroke-width="${i}" stroke-linecap="round"><circle cx="5" cy="13" r="2.5" fill="${n.stroke}" stroke="none"/><line x1="7" y1="13" x2="19" y2="13"${r}/><circle cx="21" cy="13" r="2.5" fill="${n.stroke}" stroke="none"/></g>`, t);
-}
-//#endregion
-//#region src/draw/lucide.ts
-var an = {
-	"arrow-left-right": "<path d=\"M8 3 4 7l4 4\"/><path d=\"M4 7h16\"/><path d=\"m16 21 4-4-4-4\"/><path d=\"M20 17H4\"/>",
-	"arrow-right": "<path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/>",
-	"circle-x": "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/>",
-	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\"/>",
-	"sliders-horizontal": "<path d=\"M10 5H3\"/><path d=\"M12 19H3\"/><path d=\"M14 3v4\"/><path d=\"M16 17v4\"/><path d=\"M21 12h-9\"/><path d=\"M21 19h-5\"/><path d=\"M21 5h-7\"/><path d=\"M8 10v4\"/><path d=\"M8 12H3\"/>",
-	"square-dashed-mouse-pointer": "<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\"/>",
-	"square-plus": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M8 12h8\"/><path d=\"M12 8v8\"/>",
-	"text-align-start": "<path d=\"M21 5H3\"/><path d=\"M15 12H3\"/><path d=\"M17 19H3\"/>",
-	"triangle-alert": "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/>",
-	trash: "<path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M3 6h18\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>",
-	users: "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><path d=\"M16 3.128a4 4 0 0 1 0 7.744\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/>",
-	x: "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>"
-};
-function on(e, t, n) {
-	return `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${n}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${an[e]}</svg>`;
+function _n(e) {
+	return e.replace(/[&<>"']/g, (e) => gn[e] ?? e);
+}
+function vn(e) {
+	return _n(String(e));
+}
+function z(e, t, ...n) {
+	let r = Object.entries(t).filter((e) => e[1] !== void 0).map(([e, t]) => ` ${e}="${_n(String(t))}"`).join("");
+	return n.length > 0 ? `<${e}${r}>${n.join("")}</${e}>` : `<${e}${r}/>`;
+}
+// src/draw/palette-icons.ts
+var B = 24, yn = 18, bn = "upstream-downstream";
+function xn(e) {
+	return e !== void 0 && Object.hasOwn(f, e) ? f[e] : void 0;
+}
+function Sn(e) {
+	return d[Object.hasOwn(d, e) ? e : bn];
+}
+function Cn(e, t) {
+	return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : t;
+}
+function V(e, t, ...n) {
+	return z("svg", {
+		class: "cm-palette-svg",
+		width: e,
+		height: e,
+		viewBox: t,
+		"aria-hidden": "true"
+	}, ...n);
+}
+function wn(e, t) {
+	return z("rect", {
+		x: 2,
+		y: 4,
+		width: 22,
+		height: 18,
+		rx: 3.5,
+		fill: e,
+		stroke: t,
+		"stroke-width": 1.5
+	});
+}
+function Tn(e, t, n, r, i) {
+	if (e === "generic") return z("circle", {
+		cx: t,
+		cy: n,
+		r: r / 2 - .5,
+		fill: "none",
+		stroke: i,
+		"stroke-width": 1.4,
+		"stroke-dasharray": "1.8 1.8"
+	});
+	let a = r / 24, o = e === "supporting" ? " rotate(90 12 12)" : "";
+	return z("path", {
+		d: e === "core" ? St : Ct,
+		fill: i,
+		transform: `translate(${t - 12 * a} ${n - 12 * a}) scale(${a})${o}`
+	});
+}
+function H(e) {
+	let t = xn(e);
+	return t ? V(B, "0 0 26 26", wn(t.fill, t.stroke), Tn(t.type, 13, 13, 12, dt({ subdomainType: t.type }))) : V(B, "0 0 26 26", wn(Ve, k));
+}
+function En(e, t = yn) {
+	let n = xn(e), r = !n || n.type === "generic" ? z("circle", {
+		cx: 12,
+		cy: 12,
+		r: 9,
+		fill: "none",
+		stroke: n?.stroke ?? k,
+		"stroke-width": 1.8,
+		"stroke-dasharray": "2.4 2.4"
+	}) : z("path", {
+		d: n.type === "core" ? St : Ct,
+		fill: n.stroke
+	});
+	return V(Cn(t, yn), "0 0 24 24", r);
 }
 function U(e) {
-	return on(e, 16, 2.5);
+	return V(B, "0 0 26 26", z("rect", {
+		x: 1,
+		y: 6.5,
+		width: 24,
+		height: 13,
+		rx: 3,
+		fill: pt(e)
+	}), z("text", {
+		x: 13,
+		y: 16.4,
+		"text-anchor": "middle",
+		"font-size": 9.5,
+		"font-weight": 700,
+		fill: mt(e),
+		"font-family": D.family
+	}, vn(e)));
+}
+function W(e = bn, t = B) {
+	let n = Sn(e), r = (e) => z("circle", {
+		cx: e,
+		cy: 13,
+		r: 2.5,
+		fill: n.stroke,
+		stroke: "none"
+	});
+	return V(Cn(t, B), "0 0 26 26", z("g", {
+		stroke: n.stroke,
+		"stroke-width": Math.min(n.strokeWidth, 2.6),
+		"stroke-linecap": "round"
+	}, r(5), z("line", {
+		x1: 7,
+		y1: 13,
+		x2: 19,
+		y2: 13,
+		"stroke-dasharray": n.dash || void 0
+	}), r(21)));
+}
+// src/keyboard/canvasFocus.ts
+function Dn(e) {
+	return e.type === "click" && e.detail === 0;
 }
-function sn(e) {
-	return on(e, 20, 2);
+function G(e, t) {
+	let n = e.getContainer().ownerDocument, r = n.activeElement;
+	Dn(t) && r !== null && r !== n.body || e.focus();
 }
-//#endregion
-//#region src/palette/CmPaletteProvider.ts
-var cn = "tools", ln = "cm-1-contexts", un = 24;
-function dn(e, t) {
+// src/palette/CmPaletteProvider.ts
+var On = "tools", kn = "cm-1-contexts", An = 24;
+function jn(e, t) {
 	return `<div class="entry cm-palette-entry"${t ? " draggable=\"true\"" : ""}>${e}</div>`;
 }
-function fn(e) {
+function Mn(e) {
 	return e.charAt(0) + e.slice(1).toLowerCase();
 }
-function pn(e) {
-	return e.type === "click" && e.detail === 0;
-}
-var mn = class {
+var Nn = class {
 	create;
 	lassoTool;
 	factory;
@@ -1418,20 +1572,22 @@ var mn = class {
 	getPaletteEntries() {
 		let e = {};
 		e["lasso-tool"] = {
-			group: cn,
+			group: On,
 			title: "Lasso",
-			html: dn(sn("square-dashed-mouse-pointer"), !1),
-			action: { click: (e) => this.lassoTool.activateSelection(e) }
+			html: jn(xt("square-dashed-mouse-pointer"), !1),
+			action: { click: (e) => {
+				this.lassoTool.activateSelection(e), G(this.canvas, e);
+			} }
 		};
 		for (let t of n) {
 			let n = (e) => {
 				let n = this.factory.createNewContext(t.type, t.label);
-				pn(e) ? this.placeInFreeRect(n) : this.create.start(e, n);
+				Dn(e) ? this.placeInFreeRect(n) : (this.create.start(e, n), G(this.canvas, e));
 			};
 			e[`context.${t.type}`] = {
-				group: ln,
-				title: fn(t.label),
-				html: dn(B(t.type), !0),
+				group: kn,
+				title: Mn(t.label),
+				html: jn(H(t.type), !0),
 				action: {
 					dragstart: n,
 					click: n
@@ -1445,11 +1601,11 @@ var mn = class {
 		let t = this.config?.freeRectCenter?.(), n = t ? {
 			x: t.x,
 			y: t.y
-		} : this.freeRectCentre(), r = (e) => this.elementRegistry.filter((e) => w(e)).some((t) => {
+		} : this.freeRectCentre(), r = (e) => this.elementRegistry.filter((e) => C(e)).some((t) => {
 			let n = t;
 			return Math.abs(n.x + n.width / 2 - e.x) < 1 && Math.abs(n.y + n.height / 2 - e.y) < 1;
 		});
-		for (; r(n);) n.x += un, n.y += un;
+		for (; r(n);) n.x += An, n.y += An;
 		let i = this.modeling.createShape(e, n, this.canvas.getRootElement());
 		this.selection.select(i), this.canvas.focus(), this.labelEditing.activate(i);
 	}
@@ -1465,37 +1621,34 @@ var mn = class {
 			y: e.y + (t.top + r / 2) / e.scale
 		};
 	}
-}, hn = {
+}, Pn = {
 	__depends__: [
 		be,
 		xe,
 		Se,
 		Ce,
-		S,
+		pe,
 		x,
 		R,
 		L
 	],
 	__init__: ["cmPaletteProvider"],
-	cmPaletteProvider: ["type", mn]
-}, W = "cm-subdomain-menu", gn = "cm-pattern-menu", G = "cm-roles-menu", K = "cm-popup-active", q = 8, _n = {
+	cmPaletteProvider: ["type", Nn]
+}, Fn = "cm-subdomain-menu", In = "cm-pattern-menu", K = "cm-roles-menu", q = "cm-popup-active", J = 8, Ln = {
 	OHS: "Open Host Service is one-size-fits-all and not applicable in a customer-supplier relationship.",
-	CF: "Conformist is not applicable in a customer-supplier relationship — a customer can negotiate."
+	CF: "Conformist is not applicable in a customer-supplier relationship; a customer can negotiate."
 };
-function vn(e) {
-	return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function J(e, t, n = {}) {
-	let r = n.draggable ? " draggable=\"true\"" : "", i = n.danger ? " cm-pad-entry--danger" : "", a = vn(t);
+function Y(e, t, n = {}) {
+	let r = n.draggable ? " draggable=\"true\"" : "", i = n.danger ? " cm-pad-entry--danger" : "", a = _n(t);
 	return `<div class="entry cm-pad-entry${i}"${r} title="${a}" aria-label="${a}">${e}</div>`;
 }
-function yn(e, t) {
+function Rn(e, t) {
 	let n = t.getBoundingClientRect();
-	e.style.left = `${n.right + q}px`, e.style.top = `${n.top}px`;
+	e.style.left = `${n.right + J}px`, e.style.top = `${n.top}px`;
 	let r = e.getBoundingClientRect();
-	r.right > window.innerWidth - 8 && (e.style.left = `${Math.max(8, n.left - r.width - q)}px`), r.bottom > window.innerHeight - 8 && (e.style.top = `${Math.max(8, window.innerHeight - 8 - r.height)}px`);
+	r.right > window.innerWidth - 8 && (e.style.left = `${Math.max(8, n.left - r.width - J)}px`), r.bottom > window.innerHeight - 8 && (e.style.top = `${Math.max(8, window.innerHeight - 8 - r.height)}px`);
 }
-var bn = class {
+var zn = class {
 	contextPad;
 	popupMenu;
 	eventBus;
@@ -1538,9 +1691,9 @@ var bn = class {
 			}
 			let r = f.get();
 			r.length === 1 ? e.open(r[0], !0) : r.length > 1 && e.open(r, !0);
-		}), t.registerProvider(W, { getPopupMenuEntries: (e) => this.subdomainMenuEntries(e) }), t.registerProvider(gn, { getPopupMenuEntries: (e) => this.patternMenuEntries(e) }), t.registerProvider(G, { getPopupMenuEntries: (e) => this.rolesMenuEntries(e) }), n.on("autoPlace", (e) => {
+		}), t.registerProvider(Fn, { getPopupMenuEntries: (e) => this.subdomainMenuEntries(e) }), t.registerProvider(In, { getPopupMenuEntries: (e) => this.patternMenuEntries(e) }), t.registerProvider(K, { getPopupMenuEntries: (e) => this.rolesMenuEntries(e) }), n.on("autoPlace", (e) => {
 			let { source: t, shape: n } = e, r = {
-				x: ce(t).right + Oe + n.width / 2,
+				x: se(t).right + Oe + n.width / 2,
 				y: _(t).y
 			};
 			return ke(t, n, r, Ae({ y: {
@@ -1551,7 +1704,7 @@ var bn = class {
 			let { pad: t, target: n } = e;
 			if (!t) return;
 			let r = !1, i = !1;
-			if (T(n)) {
+			if (w(n)) {
 				let e = n.waypoints ?? [], t = e[e.length - 1], a = e[e.length - 2];
 				if (t && a) {
 					let e = t.x - a.x, n = t.y - a.y;
@@ -1580,27 +1733,27 @@ var bn = class {
 		}, "cmContextPad#clampIntoView");
 	}
 	getContextPadEntries(e) {
-		return this.readOnly.isReadOnly() ? {} : w(e) ? this.contextEntries(e) : T(e) ? this.relationshipEntries(e) : {};
+		return this.readOnly.isReadOnly() ? {} : C(e) ? this.contextEntries(e) : w(e) ? this.relationshipEntries(e) : {};
 	}
 	getMultiElementContextPadEntries(e) {
 		if (this.readOnly.isReadOnly()) return {};
-		let t = e.filter(C);
+		let t = e.filter(S);
 		return t.length === e.length ? { delete: this.deleteEntry(t, "Delete selection") } : {};
 	}
 	contextEntries(e) {
-		let t = e.subdomainType ? p[e.subdomainType] : void 0;
+		let t = e.subdomainType ? f[e.subdomainType] : void 0;
 		return {
 			"append-context": {
 				group: "edit",
-				html: J(U("square-plus"), "Append a connected context — click to place automatically, drag to position", { draggable: !0 }),
+				html: Y(P("square-plus"), "Append a connected context: click to place automatically, drag to position", { draggable: !0 }),
 				action: {
-					click: () => this.appendContext(e),
+					click: (t) => this.appendContext(t, e),
 					dragstart: (t) => this.startAppend(t, e)
 				}
 			},
 			connect: {
 				group: "edit",
-				html: J(U("arrow-right"), "Connect to another context", { draggable: !0 }),
+				html: Y(P("arrow-right"), "Connect to another context", { draggable: !0 }),
 				action: {
 					click: (t) => this.startConnect(t, e, !0),
 					dragstart: (t) => this.startConnect(t, e, !1)
@@ -1608,12 +1761,12 @@ var bn = class {
 			},
 			"subdomain-type": {
 				group: "edit",
-				html: J(B(e.subdomainType), `Change subdomain type — currently ${t?.label ?? "unclassified"}`),
-				action: { click: (t) => this.openMenu(t, e, W, "Subdomain type") }
+				html: Y(H(e.subdomainType), `Change subdomain type (currently ${t?.label ?? "unclassified"})`),
+				action: { click: (t) => this.openMenu(t, e, Fn, "Subdomain type") }
 			},
 			team: {
 				group: "edit",
-				html: J(U("users"), `Set owning team — currently ${e.team ?? "none"}`),
+				html: Y(P("users"), `Set owning team (currently ${e.team ?? "none"})`),
 				action: { click: () => this.labelEditing.activateTeam(e) }
 			},
 			"edit-label": this.editLabelEntry(e, "Rename context"),
@@ -1632,7 +1785,7 @@ var bn = class {
 					connectionStart: _(t)
 				}
 			}
-		}), n) {
+		}), G(this.canvas, e), n) {
 			let e = () => !1;
 			this.eventBus.once("connect.cleanup", 250, () => {
 				this.eventBus.once("element.click", 1e4, e);
@@ -1647,51 +1800,53 @@ var bn = class {
 			this.selection.get().length === 0 && this.selection.select(t);
 		});
 	}
-	appendContext(e) {
-		let t = this.elementFactory.createNewContext(), n = this.rules.allowed("connection.create", {
-			source: e,
-			target: t
-		}), r = this.autoPlace.append(e, t, n && typeof n == "object" ? { connection: n } : {});
-		this.openTypeMenu(r);
+	appendContext(e, t) {
+		let n = this.elementFactory.createNewContext(), r = this.rules.allowed("connection.create", {
+			source: t,
+			target: n
+		}), i = this.autoPlace.append(t, n, r && typeof r == "object" ? { connection: r } : {});
+		G(this.canvas, e), this.openTypeMenu(i);
 	}
 	startAppend(e, t) {
 		let n = this.elementFactory.createNewContext(), r = () => this.openTypeMenu(n);
-		this.eventBus.once("create.end", 250, r), this.eventBus.once("create.cleanup", () => this.eventBus.off("create.end", r)), this.create.start(e, n, { source: t });
+		this.eventBus.once("create.end", 250, r), this.eventBus.once("create.cleanup", () => this.eventBus.off("create.end", r)), this.create.start(e, n, { source: t }), G(this.canvas, e);
 	}
 	openTypeMenu(e) {
 		this.scheduler.schedule(() => {
 			if (!this.contextPad.isOpen(e)) return;
 			let t = this.canvas.getContainer().querySelector(".djs-context-pad.open [data-action=\"subdomain-type\"]");
-			t && this.openMenuBeside(t.getBoundingClientRect(), e, W, "Subdomain type");
+			t && this.openMenuBeside(t.getBoundingClientRect(), e, Fn, "Subdomain type");
 		}, "cmContextPad#openTypeMenu");
 	}
 	relationshipEntries(e) {
-		let t = f[e.pattern], n = { pattern: {
+		let t = d[e.pattern], n = { pattern: {
 			group: "edit",
-			html: J(H(t?.pattern), `Change pattern — currently ${t?.label ?? e.pattern}`),
-			action: { click: (t) => this.openMenu(t, e, gn, "Relationship pattern") }
+			html: Y(W(t?.pattern), `Change pattern (currently ${t?.label ?? e.pattern})`),
+			action: { click: (t) => this.openMenu(t, e, In, "Relationship pattern") }
 		} };
 		return t && !t.symmetric && (n.roles = {
 			group: "edit",
-			html: J(U("sliders-horizontal"), "Edit integration roles — OHS/PL upstream, ACL/CF downstream"),
-			action: { click: (t) => this.openMenu(t, e, G, "Integration roles") }
+			html: Y(P("sliders-horizontal"), "Edit integration roles: OHS/PL upstream, ACL/CF downstream"),
+			action: { click: (t) => this.openMenu(t, e, K, "Integration roles") }
 		}, n["swap-ends"] = {
 			group: "edit",
-			html: J(U("arrow-left-right"), "Swap ends — reverse upstream/downstream"),
-			action: { click: () => this.cmModeling.swapEnds(e) }
+			html: Y(P("arrow-left-right"), "Swap ends: reverse upstream/downstream"),
+			action: { click: (t) => {
+				this.cmModeling.swapEnds(e), G(this.canvas, t);
+			} }
 		}), n["edit-label"] = this.editLabelEntry(e, "Edit label"), n.description = this.descriptionEntry(e, "What flows here, contracts, notes…"), n.delete = this.deleteEntry([e], "Delete relationship"), n;
 	}
 	editLabelEntry(e, t) {
 		return {
 			group: "edit",
-			html: J(U("pencil"), `${t} — edit the name in place`),
+			html: Y(P("pencil"), `${t}: edit the name in place`),
 			action: { click: () => this.labelEditing.activate(e) }
 		};
 	}
 	descriptionEntry(e, t) {
 		return {
 			group: "edit",
-			html: J(U("text-align-start"), "Edit description"),
+			html: Y(P("text-align-start"), "Edit description"),
 			action: { click: (n) => this.openPrompt(n, {
 				value: e.description ?? "",
 				placeholder: t,
@@ -1714,10 +1869,10 @@ var bn = class {
 			let e = document.createElement("div");
 			e.className = "cm-pad-prompt__hint", e.textContent = "Esc to cancel · ⌘/Ctrl+Enter to save", r.appendChild(e);
 		}
-		this.canvas.getContainer().appendChild(r), yn(r, n), i.focus(), i instanceof HTMLTextAreaElement ? i.setSelectionRange(i.value.length, i.value.length) : i.select();
+		this.canvas.getContainer().appendChild(r), Rn(r, n), i.focus(), i instanceof HTMLTextAreaElement ? i.setSelectionRange(i.value.length, i.value.length) : i.select();
 		let a = () => {
 			this.scheduler.schedule(() => {
-				n.isConnected && yn(r, n);
+				n.isConnected && Rn(r, n);
 			}, "cmContextPad#placePrompt");
 		};
 		this.eventBus.on("canvas.viewbox.changed", 200, a);
@@ -1736,8 +1891,10 @@ var bn = class {
 	deleteEntry(e, t) {
 		return {
 			group: "delete",
-			html: J(U("trash"), t, { danger: !0 }),
-			action: { click: () => this.modeling.removeElements(e) }
+			html: Y(P("trash"), t, { danger: !0 }),
+			action: { click: (t) => {
+				this.modeling.removeElements(e), G(this.canvas, t);
+			} }
 		};
 	}
 	openMenu(e, t, n, r) {
@@ -1746,12 +1903,12 @@ var bn = class {
 	}
 	openMenuBeside(e, t, n, r) {
 		let i = {
-			x: e.right + q,
+			x: e.right + J,
 			y: e.top
 		};
 		this.popupMenu.open(t, n, i, { title: r });
 		let a = document.querySelector(".djs-popup"), o = a?.getBoundingClientRect();
-		a && o && o.left < e.right && (i.x = Math.max(q, e.left - q - o.width), a.style.left = `${i.x}px`), this.currentMenu = {
+		a && o && o.left < e.right && (i.x = Math.max(J, e.left - J - o.width), a.style.left = `${i.x}px`), this.currentMenu = {
 			element: t,
 			menuId: n,
 			title: r,
@@ -1763,13 +1920,13 @@ var bn = class {
 		n && n.menuId === t && n.element === e && this.popupMenu.open(e, t, n.position, { title: n.title });
 	}
 	subdomainMenuEntries(e) {
-		if (!w(e)) return {};
+		if (!C(e)) return {};
 		let t = e.subdomainType, r = {};
 		for (let i of n) r[`type-${i.type}`] = {
 			label: i.label,
 			description: i.description,
-			imageHtml: B(i.type),
-			...i.type === t ? { className: K } : {},
+			imageHtml: H(i.type),
+			...i.type === t ? { className: q } : {},
 			action: () => {
 				i.type !== t && this.cmModeling.setSubdomainType(e, i.type);
 			}
@@ -1777,21 +1934,21 @@ var bn = class {
 		return r["type-none"] = {
 			label: "Unclassified",
 			description: "No subdomain classification.",
-			imageHtml: B(),
-			...t === void 0 ? { className: K } : {},
+			imageHtml: H(),
+			...t === void 0 ? { className: q } : {},
 			action: () => {
 				t !== void 0 && this.cmModeling.setSubdomainType(e, void 0);
 			}
 		}, r;
 	}
 	patternMenuEntries(e) {
-		if (!T(e)) return {};
+		if (!w(e)) return {};
 		let n = e.pattern, r = {};
 		for (let i of t) r[`pattern-${i.pattern}`] = {
 			label: i.label,
 			description: i.description,
-			imageHtml: H(i.pattern),
-			...i.pattern === n ? { className: K } : {},
+			imageHtml: W(i.pattern),
+			...i.pattern === n ? { className: q } : {},
 			action: () => {
 				i.pattern !== n && this.cmModeling.setPattern(e, i.pattern);
 			}
@@ -1799,47 +1956,47 @@ var bn = class {
 		return r;
 	}
 	rolesMenuEntries(e) {
-		if (!T(e)) return {};
-		let t = f[e.pattern];
+		if (!w(e)) return {};
+		let t = d[e.pattern];
 		if (!t || t.symmetric) return {};
 		let n = e.pattern === "customer-supplier", r = e.upstreamRoles ?? [], i = e.downstreamRoles ?? [], a = {};
-		for (let t of m) {
-			let i = r.includes(t), o = n ? _n[t] : void 0, s = o !== void 0 && !i;
+		for (let t of p) {
+			let i = r.includes(t), o = n ? Ln[t] : void 0, s = o !== void 0 && !i;
 			a[`upstream-${t}`] = {
-				label: h[t].label,
-				description: o ? i ? `${o} Click to remove it.` : o : h[t].description,
-				imageHtml: V(t),
+				label: m[t].label,
+				description: o ? i ? `${o} Click to remove it.` : o : m[t].description,
+				imageHtml: U(t),
 				group: {
 					id: "upstream",
-					name: "Upstream (from) — OHS and/or PL"
+					name: "Upstream (from): OHS and/or PL"
 				},
 				...s ? { disabled: !0 } : {},
-				...i ? { className: K } : {},
+				...i ? { className: q } : {},
 				action: () => {
-					s || (this.cmModeling.setUpstreamRoles(e, i ? r.filter((e) => e !== t) : [...r, t]), this.reopenMenu(e, G));
+					s || (this.cmModeling.setUpstreamRoles(e, i ? r.filter((e) => e !== t) : [...r, t]), this.reopenMenu(e, K));
 				}
 			};
 		}
 		for (let t of s) {
-			let r = i.includes(t), o = n ? _n[t] : void 0, s = o !== void 0 && !r;
+			let r = i.includes(t), o = n ? Ln[t] : void 0, s = o !== void 0 && !r;
 			a[`downstream-${t}`] = {
 				label: c[t].label,
 				description: o ? r ? `${o} Click to remove it.` : o : c[t].description,
-				imageHtml: V(t),
+				imageHtml: U(t),
 				group: {
 					id: "downstream",
-					name: "Downstream (to) — ACL or CF, not both"
+					name: "Downstream (to): ACL or CF, not both"
 				},
 				...s ? { disabled: !0 } : {},
-				...r ? { className: K } : {},
+				...r ? { className: q } : {},
 				action: () => {
-					s || (this.cmModeling.setDownstreamRoles(e, r ? [] : [t]), this.reopenMenu(e, G));
+					s || (this.cmModeling.setDownstreamRoles(e, r ? [] : [t]), this.reopenMenu(e, K));
 				}
 			};
 		}
 		return a;
 	}
-}, xn = {
+}, Bn = {
 	__depends__: [
 		Te,
 		Ee,
@@ -1847,27 +2004,20 @@ var bn = class {
 		xe,
 		De,
 		x,
-		S,
-		P,
+		pe,
 		F,
+		tn,
 		R,
 		L
 	],
 	__init__: ["cmContextPadProvider"],
-	cmContextPadProvider: ["type", bn]
+	cmContextPadProvider: ["type", zn]
 };
-//#endregion
-//#region src/keyboard/CmKeyboard.ts
-function Sn(e) {
-	let t = e;
-	return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
+// src/keyboard/CmKeyboard.ts
+function Vn(e, t) {
+	return typeof e.key == "string" && !e.defaultPrevented && !e.isComposing && e.target instanceof Node && t?.contains(e.target) === !0;
 }
-function Cn(e, t) {
-	if (!(e instanceof Node) || e instanceof Element && e.closest(".djs-palette")) return !1;
-	let n = t.ownerDocument;
-	return t.contains(e) || e === n.body || e === n.documentElement;
-}
-var wn = class {
+var Hn = class {
 	static $inject = [
 		"config.cmKeyboard",
 		"canvas",
@@ -1879,33 +2029,33 @@ var wn = class {
 		"cmReadOnly"
 	];
 	constructor(e, t, n, r, i, a, o, s) {
-		let c = t.getContainer(), l = c.ownerDocument ?? document, u = e?.undoRedoKeys ?? !0, d = (e) => {
-			if (e.defaultPrevented || !Cn(e.target, c) || Sn(e.target)) return;
+		let c = t.getContainer(), l = c.ownerDocument ?? document, u = c.querySelector(":scope > svg"), d = e?.undoRedoKeys ?? !0, f = (e) => {
+			if (!Vn(e, u)) return;
 			let t = e.ctrlKey || e.metaKey, o = e.key.toLowerCase();
 			if (t && o === "a" && !e.shiftKey && !e.altKey) {
-				e.preventDefault(), r.select(a.filter((e) => C(e)));
+				e.preventDefault(), r.select(a.filter((e) => S(e)));
 				return;
 			}
 			if (s.isReadOnly()) return;
-			let l = t && o === "z" && !e.shiftKey, d = t && o === "z" && e.shiftKey || t && o === "y" && !e.shiftKey;
-			if (l || d) {
-				if (!u) return;
-				e.preventDefault(), l && n.canUndo() && n.undo(), d && n.canRedo() && n.redo();
+			let c = t && o === "z" && !e.shiftKey, l = t && o === "z" && e.shiftKey || t && o === "y" && !e.shiftKey;
+			if (c || l) {
+				if (!d) return;
+				e.preventDefault(), c && n.canUndo() && n.undo(), l && n.canRedo() && n.redo();
 			} else if (o === "delete" || o === "backspace") {
 				let t = r.get();
 				t.length && (e.preventDefault(), i.removeElements([...t]));
 			}
 		};
-		l.addEventListener("keydown", d), o.on("diagram.destroy", () => l.removeEventListener("keydown", d));
+		l.addEventListener("keydown", f), o.on("diagram.destroy", () => l.removeEventListener("keydown", f));
 	}
-}, Tn = {
+}, Un = {
 	__depends__: [L],
 	__init__: ["cmKeyboard"],
-	cmKeyboard: ["type", wn]
-}, En = "cm-validation", Dn = 22, Y = 16, On = 44;
-function kn(e) {
+	cmKeyboard: ["type", Hn]
+}, Wn = "cm-validation", Gn = 22, X = 16, Kn = 44;
+function qn(e) {
 	let t = e.some((e) => e.kind === "error"), n = document.createElement("div");
-	n.className = "cm-validation-marker", n.dataset.severity = t ? "error" : "warning", n.innerHTML = U(t ? "circle-x" : "triangle-alert");
+	n.className = "cm-validation-marker", n.dataset.severity = t ? "error" : "warning", n.innerHTML = P(t ? "circle-x" : "triangle-alert");
 	let r = document.createElement("div");
 	r.className = "cm-validation-tooltip";
 	for (let t of e) {
@@ -1914,13 +2064,13 @@ function kn(e) {
 	}
 	return n.appendChild(r), n;
 }
-function An(e, t, n) {
+function Jn(e, t, n) {
 	let r = t[0], i = t[t.length - 1], a = i.x - r.x, o = i.y - r.y, s = Math.hypot(a, o) || 1, c = a / s, l = o / s;
 	if (n === "middle") return {
-		x: (r.x + i.x) / 2 + -l * Y,
-		y: (r.y + i.y) / 2 + c * Y
+		x: (r.x + i.x) / 2 + -l * X,
+		y: (r.y + i.y) / 2 + c * X
 	};
-	let u = e.pattern === "customer-supplier", d = n === "upstream" ? at(r, i, u ? "S" : "U", e.upstreamRoles ?? []) : at(i, r, u ? "C" : "D", e.downstreamRoles ?? []);
+	let u = e.pattern === "customer-supplier", d = n === "upstream" ? _t(r, i, u ? "S" : "U", e.upstreamRoles ?? []) : _t(i, r, u ? "C" : "D", e.downstreamRoles ?? []);
 	if (d) {
 		let e = {
 			x: d.box.x + d.box.width,
@@ -1931,15 +2081,14 @@ function An(e, t, n) {
 			y: e.y + 1
 		};
 	}
-	let f = Math.min(On, s * .35), p = n === "upstream" ? r.x + c * f : i.x - c * f, m = n === "upstream" ? r.y + l * f : i.y - l * f;
+	let f = Math.min(Kn, s * .35), p = n === "upstream" ? r.x + c * f : i.x - c * f, m = n === "upstream" ? r.y + l * f : i.y - l * f;
 	return {
-		x: p + -l * Y,
-		y: m + c * Y
+		x: p + -l * X,
+		y: m + c * X
 	};
 }
-//#endregion
-//#region src/validation/index.ts
-var jn = {
+// src/validation/index.ts
+var Yn = {
 	__depends__: [je],
 	__init__: ["cmValidationMarkers"],
 	cmValidationMarkers: ["type", class {
@@ -1958,8 +2107,8 @@ var jn = {
 			e.on("import.render.done", i), e.on("commandStack.changed", i);
 		}
 		refresh() {
-			this.overlays.remove({ type: En });
-			let e = ae(this.exporter.export()), t = /* @__PURE__ */ new Map(), n = (e, n) => {
+			this.overlays.remove({ type: Wn });
+			let e = ie(this.exporter.export()), t = /* @__PURE__ */ new Map(), n = (e, n) => {
 				for (let r of e) {
 					if (!r.relationshipId) continue;
 					let e = `${r.relationshipId} ${r.side ?? "middle"}`, i = t.get(e) ?? {
@@ -1975,27 +2124,26 @@ var jn = {
 			n(e.errors, "error"), n(e.warnings, "warning");
 			for (let [e, n] of t) {
 				let t = this.elementRegistry.get(n.relationshipId);
-				if (!T(t)) continue;
+				if (!w(t)) continue;
 				let r = t.waypoints ?? [];
 				if (r.length < 2) continue;
-				let i = e.split(" ")[1], { x: a, y: o } = An(t, r, i), s = Math.min(...r.map((e) => e.x)), c = Math.min(...r.map((e) => e.y));
-				this.overlays.add(t, En, {
+				let i = e.split(" ")[1], { x: a, y: o } = Jn(t, r, i), s = Math.min(...r.map((e) => e.x)), c = Math.min(...r.map((e) => e.y));
+				this.overlays.add(t, Wn, {
 					position: {
-						left: a - s - Dn / 2,
-						top: o - c - Dn / 2
+						left: a - s - Gn / 2,
+						top: o - c - Gn / 2
 					},
-					html: kn(n.findings)
+					html: qn(n.findings)
 				});
 			}
 		}
 	}]
 };
-//#endregion
-//#region src/zorder/CmZOrder.ts
-function Mn(e) {
-	return +!T(e);
+// src/zorder/CmZOrder.ts
+function Xn(e) {
+	return +!w(e);
 }
-var Nn = class {
+var Zn = class {
 	canvas;
 	elementRegistry;
 	static $inject = [
@@ -2014,33 +2162,33 @@ var Nn = class {
 		});
 	}
 	reorder() {
-		let e = this.elementRegistry.getAll().filter(C).sort((e, t) => Mn(e) - Mn(t));
+		let e = this.elementRegistry.getAll().filter(S).sort((e, t) => Xn(e) - Xn(t));
 		for (let t of e) {
 			let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
 			e && n && n.appendChild(e);
 		}
 	}
-}, Pn = {
+}, Qn = {
 	__init__: ["cmZOrder"],
-	cmZOrder: ["type", Nn]
-}, Fn = class extends Ot {
+	cmZOrder: ["type", Zn]
+}, $n = class extends Ht {
 	_getModules() {
 		return [
 			...super._getModules(),
+			fe,
 			pe,
-			S,
 			me,
 			he,
 			L,
-			P,
 			F,
-			Gt,
-			hn,
-			xn,
+			tn,
+			sn,
+			Pn,
+			Bn,
 			R,
-			Tn,
-			jn,
-			Pn
+			Un,
+			Yn,
+			Qn
 		];
 	}
 	undo() {
@@ -2055,17 +2203,17 @@ var Nn = class {
 	canRedo() {
 		return this.get("commandStack").canRedo();
 	}
-}, In = "context-maps";
-function Ln(e = {}) {
-	return Bn(new Fn({
-		...zn(e),
+}, er = "context-maps";
+function tr(e = {}) {
+	return ir(new $n({
+		...rr(e),
 		undoRedoKeys: e.undoRedoKeys ?? !0
 	}), !0);
 }
-function Rn(e = {}) {
-	return Bn(new Ot(zn(e)), !1);
+function nr(e = {}) {
+	return ir(new Ht(rr(e)), !1);
 }
-function zn(e) {
+function rr(e) {
 	return {
 		width: "100%",
 		height: "100%",
@@ -2075,9 +2223,9 @@ function zn(e) {
 		fitOnImport: e.fitOnImport
 	};
 }
-function Bn(e, t) {
+function ir(e, t) {
 	let n = e.get("eventBus"), r = e.get("canvas"), i = e.get("elementRegistry"), a = e.get("selection"), o = /* @__PURE__ */ new Set(), s = !1, c = "", l = {
-		notation: In,
+		notation: er,
 		apiVersion: Me,
 		editable: t
 	};
@@ -2086,20 +2234,20 @@ function Bn(e, t) {
 	}), {
 		meta: l,
 		elements: {
-			list: () => s ? [] : i.getAll().filter(C).map(Un),
+			list: () => s ? [] : i.getAll().filter(S).map(sr),
 			bounds(e) {
 				if (s) return;
 				let t = i.get(e);
-				return C(t) ? Hn(t) : void 0;
+				return S(t) ? or(t) : void 0;
 			},
 			reveal(e) {
 				if (s) return !1;
 				let t = i.get(e);
-				return C(t) ? (a.select(t), r.scrollToElement(t), !0) : !1;
+				return S(t) ? (a.select(t), r.scrollToElement(t), !0) : !1;
 			},
-			selection: () => s ? [] : Vn(a.get()),
+			selection: () => s ? [] : ar(a.get()),
 			onSelection(e) {
-				let t = (t) => e(Vn(t.newSelection ?? []));
+				let t = (t) => e(ar(t.newSelection ?? []));
 				return n.on("selection.changed", t), () => n.off("selection.changed", t);
 			}
 		},
@@ -2126,13 +2274,13 @@ function Bn(e, t) {
 					width: n,
 					height: i
 				};
-				return Wn(a) ? a : void 0;
+				return cr(a) ? a : void 0;
 			} catch {
 				return;
 			}
 		},
 		setViewState(e) {
-			!s && Wn(e) && r.viewbox({
+			!s && cr(e) && r.viewbox({
 				x: e.x,
 				y: e.y,
 				width: e.width,
@@ -2152,10 +2300,10 @@ function Bn(e, t) {
 		}
 	};
 }
-function Vn(e) {
-	return e.filter(C).map((e) => e.id);
+function ar(e) {
+	return e.filter(S).map((e) => e.id);
 }
-function Hn(e) {
+function or(e) {
 	let { x: t, y: n, width: r, height: i } = Ne(e);
 	return {
 		x: t,
@@ -2164,23 +2312,22 @@ function Hn(e) {
 		height: i
 	};
 }
-function Un(e) {
+function sr(e) {
 	return e.cmLabel ? {
 		id: e.id,
 		name: e.cmLabel
 	} : { id: e.id };
 }
-function Wn(e) {
+function cr(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;
+	return Z(t) && Z(n) && Z(r) && Z(i) && r > 0 && i > 0;
 }
-function X(e) {
+function Z(e) {
 	return typeof e == "number" && Number.isFinite(e);
 }
-//#endregion
-//#region src/connect-handles/CmConnectHandles.ts
-var Gn = "cm-connect-handle", Kn = 28, qn = 12, Jn = [
+// src/connect-handles/CmConnectHandles.ts
+var lr = "cm-connect-handle", ur = 28, dr = 12, fr = [
 	{
 		side: "top",
 		rotationDeg: -90
@@ -2198,15 +2345,15 @@ var Gn = "cm-connect-handle", Kn = 28, qn = 12, Jn = [
 		rotationDeg: 180
 	}
 ];
-function Yn(e, t) {
-	let n = t.width / 2 - Kn / 2, r = t.height / 2 - Kn / 2;
+function pr(e, t) {
+	let n = t.width / 2 - ur / 2, r = t.height / 2 - ur / 2;
 	switch (e) {
 		case "top": return {
 			top: -40,
 			left: n
 		};
 		case "bottom": return {
-			top: t.height + qn,
+			top: t.height + dr,
 			left: n
 		};
 		case "left": return {
@@ -2215,41 +2362,43 @@ function Yn(e, t) {
 		};
 		case "right": return {
 			top: r,
-			left: t.width + qn
+			left: t.width + dr
 		};
 	}
 }
-var Xn = class {
+var mr = class {
 	eventBus;
 	selection;
 	overlays;
 	dragging;
 	readOnly;
+	canvas;
 	static $inject = [
 		"eventBus",
 		"selection",
 		"overlays",
 		"connect",
 		"dragging",
-		"cmReadOnly"
+		"cmReadOnly",
+		"canvas"
 	];
-	constructor(e, t, n, r, i, a) {
-		this.eventBus = e, this.selection = t, this.overlays = n, this.dragging = i, this.readOnly = a;
-		let o = () => this.refresh();
-		e.on("selection.changed", o), e.on("commandStack.changed", o), e.on(I, o);
+	constructor(e, t, n, r, i, a, o) {
+		this.eventBus = e, this.selection = t, this.overlays = n, this.dragging = i, this.readOnly = a, this.canvas = o;
+		let s = () => this.refresh();
+		e.on("selection.changed", s), e.on("commandStack.changed", s), e.on(I, s);
 	}
 	refresh() {
-		if (this.overlays.remove({ type: Gn }), this.readOnly.isReadOnly()) return;
+		if (this.overlays.remove({ type: lr }), this.readOnly.isReadOnly()) return;
 		let e = this.selection.get();
 		if (e.length !== 1) return;
 		let t = e[0];
-		if (!w(t)) return;
+		if (!C(t)) return;
 		let n = t;
-		for (let { side: e, rotationDeg: r } of Jn) {
+		for (let { side: e, rotationDeg: r } of fr) {
 			let i = document.createElement("div");
 			i.className = "cm-connect-handle", i.dataset.side = e, i.title = "Connect to another context", i.setAttribute("aria-label", "Connect to another context");
 			let a = document.createElement("span");
-			a.className = "cm-connect-handle__arrow", a.style.transform = `rotate(${r}deg)`, a.innerHTML = U("arrow-right"), i.append(a), i.addEventListener("mousedown", (e) => {
+			a.className = "cm-connect-handle__arrow", a.style.transform = `rotate(${r}deg)`, a.innerHTML = P("arrow-right"), i.append(a), i.addEventListener("mousedown", (e) => {
 				e.button === 0 && (e.preventDefault(), e.stopPropagation(), this.dragging.init(e, "connect", {
 					autoActivate: !1,
 					trapClick: !1,
@@ -2260,16 +2409,16 @@ var Xn = class {
 							connectionStart: _(t)
 						}
 					}
-				}), this.eventBus.once("connect.cleanup", 250, () => {
+				}), this.canvas.focus(), this.eventBus.once("connect.cleanup", 250, () => {
 					this.selection.get().length === 0 && this.selection.select(t);
 				}));
-			}), this.overlays.add(t, Gn, {
-				position: Yn(e, n),
+			}), this.overlays.add(t, lr, {
+				position: pr(e, n),
 				html: i
 			});
 		}
 	}
-}, Zn = {
+}, hr = {
 	__depends__: [
 		Se,
 		je,
@@ -2277,15 +2426,15 @@ var Xn = class {
 		L
 	],
 	__init__: ["cmConnectHandles"],
-	cmConnectHandles: ["type", Xn]
-}, Qn = [
+	cmConnectHandles: ["type", mr]
+}, gr = [
 	{
 		token: "OHS",
-		...h.OHS
+		...m.OHS
 	},
 	{
 		token: "PL",
-		...h.PL
+		...m.PL
 	},
 	{
 		token: "ACL",
@@ -2296,20 +2445,20 @@ var Xn = class {
 		...c.CF
 	}
 ];
-function $n() {
+function _r() {
 	return [
 		{
 			label: "Subdomain types",
 			rows: n.map((e) => ({
-				preview: B(e.type),
+				preview: H(e.type),
 				label: e.label,
 				explanation: e.description
 			}))
 		},
 		{
 			label: "Integration roles",
-			rows: Qn.map((e) => ({
-				preview: V(e.token),
+			rows: gr.map((e) => ({
+				preview: U(e.token),
 				label: `${e.token} · ${e.label}`,
 				explanation: e.description
 			}))
@@ -2317,16 +2466,16 @@ function $n() {
 		{
 			label: "Relationship patterns",
 			rows: t.map((e) => ({
-				preview: H(e.pattern),
+				preview: W(e.pattern),
 				label: `${e.abbreviation} · ${e.label}`,
 				explanation: e.description
 			}))
 		}
 	];
 }
-function er(e, t = {}) {
+function vr(e, t = {}) {
 	let n = [];
-	return $n().forEach((r, i) => {
+	return _r().forEach((r, i) => {
 		if (i > 0) {
 			let t = document.createElement("div");
 			t.className = "cd-shell-legend-separator", t.setAttribute("role", "separator"), e.append(t);
@@ -2351,9 +2500,8 @@ function er(e, t = {}) {
 		for (let e of n.splice(0)) e();
 	};
 }
-//#endregion
-//#region src/legend/CmLegend.ts
-function tr(e) {
+// src/legend/CmLegend.ts
+function yr(e) {
 	let t = document.createElement("div");
 	t.className = "cm-legend__row cm-legend-item";
 	let n = document.createElement("span");
@@ -2366,41 +2514,26 @@ function tr(e) {
 		i.style.left = `${e.right + 10}px`, i.style.top = `${e.top + e.height / 2}px`;
 	}), t.append(n, r, i), t;
 }
-function nr(e, t) {
+function br(e, t) {
 	let n = document.createElement("div");
 	return n.className = "cm-legend__group", n.setAttribute("role", "group"), n.setAttribute("aria-label", e), n.append(...t), n;
 }
-function rr() {
+function xr() {
 	let e = document.createElement("div");
 	return e.className = "cm-legend__divider", e;
 }
-function ir(e, t) {
-	return e > ze.width && t > ze.height;
-}
-var ar = class {
-	canvas;
+var Sr = class {
 	static $inject = ["canvas", "eventBus"];
 	openState = !1;
-	started = !1;
 	host;
 	constructor(e, t) {
-		this.canvas = e, this.host = document.createElement("div"), e.getContainer().appendChild(this.host), this.startFromContainerSize(), this.render(), t.on(["canvas.resized", "import.done"], () => {
-			this.startFromContainerSize() && this.render();
-		}), t.on("diagram.destroy", () => this.host.remove());
+		this.host = document.createElement("div"), e.getContainer().appendChild(this.host), this.render(), t.on("diagram.destroy", () => this.host.remove());
 	}
 	isOpen() {
 		return this.openState;
 	}
 	setOpen(e) {
-		this.started = !0, this.openState !== e && (this.openState = e, this.render());
-	}
-	startFromContainerSize() {
-		if (this.started) return !1;
-		let { width: e, height: t } = this.canvas.getSize();
-		if (!(e > 0 && t > 0)) return !1;
-		this.started = !0;
-		let n = ir(e, t);
-		return n !== this.openState && (this.openState = n, !0);
+		this.openState !== e && (this.openState = e, this.render());
 	}
 	toggle() {
 		this.setOpen(!this.openState);
@@ -2417,19 +2550,19 @@ var ar = class {
 		let n = document.createElement("strong");
 		n.textContent = "Legend";
 		let r = document.createElement("button");
-		r.type = "button", r.className = "cm-legend__close", r.setAttribute("aria-expanded", "true"), r.setAttribute("aria-label", "Close legend"), r.innerHTML = U("x"), r.addEventListener("click", () => this.toggle()), t.append(n, r);
-		let i = $n().map((e) => nr(e.label, e.rows.map(tr))), a = document.createElement("div");
-		return a.className = "cm-legend__body", i.forEach((e, t) => a.append(...t > 0 ? [rr()] : [], e)), e.append(t, a), e;
+		r.type = "button", r.className = "cm-legend__close", r.setAttribute("aria-expanded", "true"), r.setAttribute("aria-label", "Close legend"), r.innerHTML = P("x"), r.addEventListener("click", () => this.toggle()), t.append(n, r);
+		let i = _r().map((e) => br(e.label, e.rows.map(yr))), a = document.createElement("div");
+		return a.className = "cm-legend__body", i.forEach((e, t) => a.append(...t > 0 ? [xr()] : [], e)), e.append(t, a), e;
 	}
 	collapsedButton() {
 		let e = document.createElement("button");
 		return e.type = "button", e.className = "cm-legend-toggle", e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-label", "Show legend"), e.textContent = "Legend", e.addEventListener("click", () => this.toggle()), e;
 	}
-}, or = {
+}, Cr = {
 	__init__: ["cmLegend"],
-	cmLegend: ["type", ar]
-}, sr = "Export as JSON";
-function Z(e, t, n, r) {
+	cmLegend: ["type", Sr]
+}, wr = "Export as JSON";
+function Tr(e, t, n, r) {
 	return {
 		kind: "action",
 		id: e,
@@ -2439,7 +2572,7 @@ function Z(e, t, n, r) {
 		onSelect: () => n.onSelect()
 	};
 }
-function cr(e) {
+function Er(e) {
 	let { editTitle: t } = e;
 	return {
 		model: t ? [{
@@ -2449,10 +2582,10 @@ function cr(e) {
 			onSelect: () => t()
 		}] : [],
 		export: [
-			Z("export-png", "Export as PNG", e.exports.png, "file-image"),
-			Z("export-svg", "Export as SVG", e.exports.svg, "file-code-corner"),
-			Z("export-json", sr, e.exports.json),
-			Z("export-cml", "Export as CML", e.exports.cml)
+			Tr("export-png", "Export as PNG", e.exports.png, "file-image"),
+			Tr("export-svg", "Export as SVG", e.exports.svg, "file-code-corner"),
+			Tr("export-json", wr, e.exports.json),
+			Tr("export-cml", "Export as CML", e.exports.cml)
 		],
 		help: [{
 			kind: "dialog",
@@ -2463,19 +2596,18 @@ function cr(e) {
 		}]
 	};
 }
-//#endregion
-//#region src/chrome/shortcuts.ts
-function lr(e, t, n) {
+// src/chrome/shortcuts.ts
+function Dr(e, t, n) {
 	return t === "mac" ? `⌘${e}` : `${n.ctrl}+${e}`;
 }
-function ur(e) {
+function Or(e) {
 	try {
 		return new Intl.NumberFormat(e, { style: "percent" }).format(1);
 	} catch {
 		return new Intl.NumberFormat("en", { style: "percent" }).format(1);
 	}
 }
-function dr(e, t) {
+function kr(e, t) {
 	if (e === "mac") return {
 		zoomIn: "⌘+",
 		zoomOut: "⌘−",
@@ -2490,7 +2622,7 @@ function dr(e, t) {
 		fit: `${r}+1`
 	};
 }
-function fr(e, t) {
+function Ar(e, t) {
 	if (e === "mac") return {
 		undo: ["⌘Z"],
 		redo: ["⌘⇧Z"],
@@ -2509,23 +2641,23 @@ function fr(e, t) {
 		lassoDrag: [`${r}+Drag`]
 	};
 }
-function pr(e) {
+function jr(e) {
 	let { platform: t, messages: n } = e;
 	return {
 		title: "File",
 		rows: [{
 			action: n.openFile ?? "Open…",
-			keys: [lr("O", t, n.keyNames)]
+			keys: [Dr("O", t, n.keyNames)]
 		}, {
-			action: sr,
-			keys: [lr("S", t, n.keyNames)]
+			action: wr,
+			keys: [Dr("S", t, n.keyNames)]
 		}]
 	};
 }
-function mr(e, t = {}) {
-	let { platform: n, messages: r } = e, i = dr(n, r.keyNames), a = fr(n, r.keyNames);
+function Mr(e, t = {}) {
+	let { platform: n, messages: r } = e, i = kr(n, r.keyNames), a = Ar(n, r.keyNames);
 	return [
-		...t.fileKeys ? [pr(e)] : [],
+		...t.fileKeys ? [jr(e)] : [],
 		{
 			title: "View",
 			rows: [
@@ -2538,7 +2670,7 @@ function mr(e, t = {}) {
 					keys: [i.zoomOut]
 				},
 				{
-					action: r.zoomToActual(ur(e.lang)),
+					action: r.zoomToActual(Or(e.lang)),
 					keys: [i.zoomToActual]
 				},
 				{
@@ -2596,25 +2728,24 @@ function mr(e, t = {}) {
 		}
 	];
 }
-//#endregion
-//#region src/chrome/dialog.ts
+// src/chrome/dialog.ts
 function Q(e, t, n) {
 	let r = document.createElement(e);
 	return r.className = t, n !== void 0 && (r.textContent = n), r;
 }
-function hr(e, t, n) {
+function Nr(e, t, n) {
 	let r = Q("header", "cm-dialog-header"), i = Q("h3", "cm-dialog-title", t.title);
 	i.id = t.titleId;
 	let a = Q("button", "cm-dialog-close");
-	return a.type = "button", a.setAttribute("aria-label", e.messages.close), a.innerHTML = U("x"), a.addEventListener("click", n), r.append(i, a), r;
+	return a.type = "button", a.setAttribute("aria-label", e.messages.close), a.innerHTML = P("x"), a.addEventListener("click", n), r.append(i, a), r;
 }
-function gr(e, t) {
+function Pr(e, t) {
 	let n;
 	function r() {
 		let n = Q("dialog", `cm-dialog ${t.className}`);
 		n.setAttribute("aria-labelledby", t.titleId);
 		let r = () => n.close(), i = Q("div", "cm-dialog-panel");
-		return i.append(hr(e, t, r), ...t.content(r)), n.append(i), n.addEventListener("click", (e) => {
+		return i.append(Nr(e, t, r), ...t.content(r)), n.append(i), n.addEventListener("click", (e) => {
 			e.target === n && n.close();
 		}), n.addEventListener("close", () => {
 			e.menu.trigger.hidden || e.menu.trigger.focus({ preventScroll: !0 });
@@ -2633,11 +2764,10 @@ function gr(e, t) {
 		}
 	};
 }
-//#endregion
-//#region src/chrome/ShortcutsDialog.ts
-var $ = "cm-shortcuts", _r = "cm-shortcuts-title";
-function vr(e, t) {
-	let n = Q("section", `${$}-group`), r = `${_r}-group-${t}`, i = Q("h4", `${$}-group-title`, e.title);
+// src/chrome/ShortcutsDialog.ts
+var $ = "cm-shortcuts", Fr = "cm-shortcuts-title";
+function Ir(e, t) {
+	let n = Q("section", `${$}-group`), r = `${Fr}-group-${t}`, i = Q("h4", `${$}-group-title`, e.title);
 	i.id = r;
 	let a = Q("table", `${$}-table`);
 	a.setAttribute("aria-labelledby", r);
@@ -2651,29 +2781,28 @@ function vr(e, t) {
 	}
 	return n.append(i, a), n;
 }
-function yr(e, t = {}) {
-	return gr(e, {
+function Lr(e, t = {}) {
+	return Pr(e, {
 		className: $,
-		titleId: _r,
+		titleId: Fr,
 		title: "Keyboard shortcuts",
 		content() {
 			let n = Q("div", "cm-dialog-body cm-shortcuts-body");
-			return n.append(...mr(e, t).map(vr)), [n];
+			return n.append(...Mr(e, t).map(Ir)), [n];
 		}
 	});
 }
-//#endregion
-//#region src/chrome/TitleDialog.ts
-var br = "cm-title-dialog", xr = "cm-title-dialog-title", Sr = "cm-title-dialog-field";
-function Cr(e, t) {
+// src/chrome/TitleDialog.ts
+var Rr = "cm-title-dialog", zr = "cm-title-dialog-title", Br = "cm-title-dialog-field";
+function Vr(e, t) {
 	let n = Q("button", "cm-dialog-button", e);
 	return n.type = t === "primary" ? "submit" : "button", n.dataset.variant = t, n;
 }
-function wr(e, t) {
+function Hr(e, t) {
 	let n = Q("input", "cm-dialog-input");
-	return n.id = Sr, n.type = "text", n.autocomplete = "off", n.spellcheck = !1, n.autofocus = !0, gr(e, {
-		className: br,
-		titleId: xr,
+	return n.id = Br, n.type = "text", n.autocomplete = "off", n.spellcheck = !1, n.autofocus = !0, Pr(e, {
+		className: Rr,
+		titleId: zr,
 		title: "Map title",
 		beforeOpen() {
 			n.value = t.title();
@@ -2685,9 +2814,9 @@ function wr(e, t) {
 			let r = Q("form", "cm-dialog-form");
 			r.noValidate = !0;
 			let i = Q("div", "cm-dialog-body"), a = Q("label", "cm-dialog-label", "Title");
-			a.htmlFor = Sr, i.append(a, n);
-			let o = Q("div", "cm-dialog-footer"), s = Cr("Cancel", "secondary");
-			return s.addEventListener("click", e), o.append(s, Cr("Apply", "primary")), r.append(i, o), r.addEventListener("submit", (r) => {
+			a.htmlFor = Br, i.append(a, n);
+			let o = Q("div", "cm-dialog-footer"), s = Vr("Cancel", "secondary");
+			return s.addEventListener("click", e), o.append(s, Vr("Apply", "primary")), r.append(i, o), r.addEventListener("submit", (r) => {
 				r.preventDefault();
 				let i = n.value.trim();
 				e(), i !== t.title() && t.setTitle(i);
@@ -2695,7 +2824,6 @@ function wr(e, t) {
 		}
 	});
 }
-//#endregion
-export { Re as CD_TOKENS, In as CONTEXT_MAPS_NOTATION, $e as CmBaseViewer, Xn as CmConnectHandles, bn as CmContextPadProvider, tt as CmElementFactory, bt as CmExporter, Vt as CmFlatModelBehavior, Et as CmHoverTooltip, yt as CmImporter, wn as CmKeyboard, Qt as CmLabelEditing, ar as CmLegend, Lt as CmModeling, mn as CmPaletteProvider, Jt as CmReadOnly, Rt as CmRules, Nn as CmZOrder, ot as ContextMapsRenderer, sr as JSON_EXPORT_LABEL, E as MIRAGON, Fn as Modeler, Ot as NavigatedViewer, I as READ_ONLY_CHANGED_EVENT, N as ROOT_ID, St as Viewer, Gt as cmBehaviorsModule, Zn as cmConnectHandlesModule, xn as cmContextPadModule, gt as cmDrawModule, Dt as cmHoverTooltipModule, Tn as cmKeyboardModule, R as cmLabelEditingModule, or as cmLegendModule, it as cmModelModule, P as cmModelingModule, hn as cmPaletteModule, L as cmReadOnlyModule, F as cmRulesModule, Pn as cmZOrderModule, B as contextIconSvg, cr as contextMapMenu, mr as contextMapShortcuts, Ln as createCollaborativeModeler, Rn as createCollaborativeViewer, yr as createShortcutsDialog, wr as createTitleDialog, Tt as hoverTipFor, xt as ioModule, w as isCmContext, C as isCmElement, T as isCmRelationship, $n as legendGroups, H as relationshipIconSvg, er as renderLegend, V as roleChipSvg, Le as saveSVG, rn as subdomainIconSvg };
+export { Re as CD_TOKENS, er as CONTEXT_MAPS_NOTATION, Ze as CmBaseViewer, mr as CmConnectHandles, zn as CmContextPadProvider, $e as CmElementFactory, Pt as CmExporter, nn as CmFlatModelBehavior, Bt as CmHoverTooltip, Nt as CmImporter, Hn as CmKeyboard, mn as CmLabelEditing, Sr as CmLegend, Zt as CmModeling, Nn as CmPaletteProvider, un as CmReadOnly, Qt as CmRules, Zn as CmZOrder, wt as ContextMapsRenderer, wr as JSON_EXPORT_LABEL, T as MIRAGON, $n as Modeler, Ht as NavigatedViewer, I as READ_ONLY_CHANGED_EVENT, N as ROOT_ID, It as Viewer, sn as cmBehaviorsModule, hr as cmConnectHandlesModule, Bn as cmContextPadModule, At as cmDrawModule, Vt as cmHoverTooltipModule, Un as cmKeyboardModule, R as cmLabelEditingModule, Cr as cmLegendModule, nt as cmModelModule, F as cmModelingModule, Pn as cmPaletteModule, L as cmReadOnlyModule, tn as cmRulesModule, Qn as cmZOrderModule, H as contextIconSvg, Er as contextMapMenu, Mr as contextMapShortcuts, tr as createCollaborativeModeler, nr as createCollaborativeViewer, Lr as createShortcutsDialog, Hr as createTitleDialog, zt as hoverTipFor, Ft as ioModule, C as isCmContext, S as isCmElement, w as isCmRelationship, _r as legendGroups, W as relationshipIconSvg, vr as renderLegend, U as roleChipSvg, Le as saveSVG, En as subdomainIconSvg };
 
 //# sourceMappingURL=index.js.map