@miragon/context-maps-renderer 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 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, isReservedId as ee, isSymmetricPattern as te, newId as ne, parseDocumentText as re, serializeDocumentText as ie, validateDocument as ae } from "@miragon/context-maps-schema-model";
+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";
@@ -27,27 +27,28 @@ import Ee from "diagram-js/lib/features/auto-place";
 import { DEFAULT_DISTANCE as De, findFreePosition as Oe, generateGetNextPosition as ke } from "diagram-js/lib/features/auto-place/AutoPlaceUtil";
 import Ae from "diagram-js/lib/features/overlays";
 import { MODELER_API_VERSION as je } from "@miragon/modeler-api";
+import { getBBox as Me } from "diagram-js/lib/util/Elements";
 //#region src/model/di-types.ts
-function Me(e) {
+function Ne(e) {
 	return typeof e == "object" && e ? e.cmKind : void 0;
 }
 function w(e) {
-	return typeof Me(e) == "string";
+	return typeof Ne(e) == "string";
 }
 function T(e) {
-	return Me(e) === "context";
+	return Ne(e) === "context";
 }
 function E(e) {
-	return Me(e) === "relationship";
+	return Ne(e) === "relationship";
 }
 //#endregion
 //#region src/io/saveSvg.ts
-var Ne = 40, Pe = [
+var Pe = 40, Fe = [
 	"tabindex",
 	"role",
 	"aria-label"
 ];
-function Fe(e, t) {
+function Ie(e, t) {
 	let n = e.getContainer().querySelector(":scope > svg");
 	if (!n) throw Error("No SVG found in the canvas container.");
 	let r = Infinity, i = Infinity, a = -Infinity, o = -Infinity;
@@ -57,24 +58,24 @@ function Fe(e, t) {
 		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);
 	}
 	Number.isFinite(r) || (r = 0, i = 0, a = 100, o = 100);
-	let s = r - Ne, c = i - Ne, l = a - r + 80, u = o - i + 80, d = n.cloneNode(!0);
-	for (let e of Pe) d.removeAttribute(e);
+	let s = r - Pe, c = i - Pe, l = a - r + 80, u = o - i + 80, d = n.cloneNode(!0);
+	for (let e of Fe) d.removeAttribute(e);
 	d.setAttribute("xmlns", "http://www.w3.org/2000/svg"), d.setAttribute("viewBox", `${s} ${c} ${l} ${u}`), d.setAttribute("width", String(Math.round(l))), d.setAttribute("height", String(Math.round(u)));
 	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/io/types.ts
-var D = i, Ie = {
+var D = i, Le = {
 	top: 84,
 	right: 56,
 	bottom: 56,
 	left: 56
-}, Le = .001;
-function Re(e) {
+}, Re = .001;
+function ze(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var ze = class {
+var Be = class {
 	_diagram;
 	_container;
 	_options;
@@ -83,7 +84,7 @@ var ze = class {
 	}
 	_createContainer(e) {
 		let t = e.container ?? document.createElement("div");
-		return t.classList.add("cm-djs-container"), t.style.width = Re(e.width ?? "100%"), t.style.height = Re(e.height ?? (e.container ? "100%" : "600px")), t;
+		return t.classList.add("cm-djs-container"), t.style.width = ze(e.width ?? "100%"), t.style.height = ze(e.height ?? (e.container ? "100%" : "600px")), t;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
@@ -92,7 +93,10 @@ var ze = class {
 				canvas: { container: this._container },
 				modules: t,
 				cmKeyboard: { undoRedoKeys: this._options.undoRedoKeys ?? !0 },
-				cmPalette: { freeRectInsets: this.freeRectInsets }
+				cmPalette: {
+					freeRectInsets: this.freeRectInsets,
+					freeRectCenter: this.freeRectCenter
+				}
 			});
 		}
 		return this._diagram;
@@ -100,7 +104,11 @@ var ze = class {
 	get(e) {
 		return this._ensureDiagram().get(e);
 	}
-	freeRectInsets = () => this._options.freeRectInsets?.() ?? Ie;
+	freeRectInsets = () => {
+		let { freeArea: e, freeRectInsets: t } = this._options;
+		return (e ? e.insets?.() : t?.()) ?? Le;
+	};
+	freeRectCenter = () => this._options.freeArea?.center?.();
 	_optional(e) {
 		return this._ensureDiagram().get(e, !1);
 	}
@@ -116,10 +124,10 @@ var ze = class {
 		let i = this._optional("cmLabelEditing");
 		i?.suspend(), this._optional("cmContextPadProvider")?.cancelPrompt(), this._optional("popupMenu")?.close(), r.clear();
 		let a = r.import(e);
-		return this._optional("commandStack")?.clear(!1), this._fit(), n.fire("import.done", { warnings: a }), i?.resumeAfterImport(), { warnings: a };
+		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 = re(e);
+		let t = ne(e);
 		if (!t.ok) throw Error(t.error);
 		return this.importDocument(t.document);
 	}
@@ -146,7 +154,7 @@ var ze = class {
 		return this.get("elementRegistry").get(D);
 	}
 	saveSVG() {
-		return Fe(this.get("canvas"), this.get("elementRegistry"));
+		return Ie(this.get("canvas"), this.get("elementRegistry"));
 	}
 	_fit() {
 		let e = this.get("canvas"), t = this.get("elementRegistry"), n = Infinity, r = Infinity, i = -Infinity, a = -Infinity;
@@ -165,7 +173,7 @@ var ze = class {
 			});
 			return;
 		}
-		let c = this.freeRectInsets(), l = Math.max(o - c.left - c.right, 1), u = Math.max(s - c.top - c.bottom, 1), d = Math.max(i - n, 1), f = Math.max(a - r, 1), p = Math.max(Math.min(l / d, u / f, 1), Le);
+		let c = this.freeRectInsets(), l = Math.max(o - c.left - c.right, 1), u = Math.max(s - c.top - c.bottom, 1), d = Math.max(i - n, 1), f = Math.max(a - r, 1), p = Math.max(Math.min(l / d, u / f, 1), Re);
 		e.viewbox({
 			x: n + d / 2 - (c.left + l / 2) / p,
 			y: r + f / 2 - (c.top + u / 2) / p,
@@ -191,11 +199,11 @@ var ze = class {
 };
 //#endregion
 //#region src/model/CmElementFactory.ts
-function Be(e, t) {
+function Ve(e, t) {
 	let n = g(e, t);
 	return Object.keys(n).length > 0 ? { cmForeign: n } : {};
 }
-var Ve = class {
+var He = class {
 	elementFactory;
 	static $inject = ["elementFactory"];
 	constructor(e) {
@@ -219,7 +227,7 @@ var Ve = class {
 			...e.description ? { description: e.description } : {},
 			...e.fill ? { fill: e.fill } : {},
 			...e.stroke ? { stroke: e.stroke } : {},
-			...Be(e, r)
+			...Ve(e, r)
 		});
 	}
 	createRelationship(e, t, n, r) {
@@ -235,7 +243,7 @@ var Ve = class {
 			...e.label ? { cmLabel: e.label } : {},
 			...e.description ? { description: e.description } : {},
 			...e.implementationTechnology ? { implementationTechnology: e.implementationTechnology } : {},
-			...Be(e, d)
+			...Ve(e, d)
 		});
 	}
 	createNewContext(e, t) {
@@ -248,14 +256,14 @@ var Ve = class {
 			cmLabel: t ?? "New Context"
 		});
 	}
-}, He = class extends se {
+}, Ue = class extends se {
 	create(e, t) {
 		return !t?.id && (e === "shape" || e === "connection") && (t = {
 			...t,
-			id: ne(e === "shape" ? "ctx" : "rel")
+			id: te(e === "shape" ? "ctx" : "rel")
 		}), super.create(e, t);
 	}
-}, Ue = class {
+}, We = class {
 	docking;
 	static $inject = ["connectionDocking"];
 	constructor(e) {
@@ -265,9 +273,9 @@ var Ve = 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;
 	}
-}, We = {
-	elementFactory: ["type", He],
-	cmElementFactory: ["type", Ve],
+}, Ge = {
+	elementFactory: ["type", Ue],
+	cmElementFactory: ["type", He],
 	connectionDocking: ["type", oe]
 }, O = {
 	blau: "#335DE5",
@@ -283,7 +291,7 @@ var Ve = class {
 	danger: "#CD1839",
 	info: "#335DE5",
 	gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
-}, Ge = {
+}, Ke = {
 	"--cd-blau": O.blau,
 	"--cd-gruen": O.gruen,
 	"--cd-grau": O.grau,
@@ -297,13 +305,13 @@ var Ve = class {
 	"--cd-danger": O.danger,
 	"--cd-info": O.info,
 	"--cd-gradient-brand": O.gradientBrand
-}, Ke = 1500;
+}, qe = 1500;
 O.blau;
-var k = O.schwarz, qe = "#5B5B5B", A = {
+var k = O.schwarz, Je = "#5B5B5B", A = {
 	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13.5,
 	small: 11
-}, j = O.weiss, Je = "#F1F1EE", Ye = "#8A8577";
+}, j = O.weiss, Ye = "#F1F1EE", Xe = "#8A8577";
 //#endregion
 //#region src/draw/endRoleChips.ts
 function M(e, t, n, r) {
@@ -328,10 +336,10 @@ function M(e, t, n, r) {
 }
 //#endregion
 //#region src/draw/ContextMapsRenderer.ts
-var Xe = class extends le {
+var Ze = class extends le {
 	static $inject = ["eventBus"];
 	constructor(e) {
-		super(e, Ke);
+		super(e, qe);
 	}
 	canRender(e) {
 		return w(e);
@@ -376,7 +384,7 @@ var Xe = class extends le {
 			"stroke-linejoin": "round"
 		});
 		if (v(e, a), this.appendLabel(e, t.cmLabel ?? "", r, i, !!t.team, { "font-weight": "650" }), t.subdomainType && n) {
-			v(e, et(t.subdomainType, 15, 15, 18, n.stroke));
+			v(e, tt(t.subdomainType, 15, 15, 18, n.stroke));
 			let r = y(b("text"), {
 				x: 28,
 				y: 15,
@@ -391,7 +399,7 @@ var Xe = class extends le {
 			r.textContent = n.label, v(e, r);
 		}
 		if (t.team) {
-			let n = 19 + t.team.length * A.small * .55, a = r / 2 - n / 2, o = i - 12, s = nt(a + 7, o, 14, qe);
+			let n = 19 + t.team.length * A.small * .55, a = r / 2 - n / 2, o = i - 12, s = rt(a + 7, o, 14, Je);
 			y(s, { class: "cm-team" }), v(e, s);
 			let c = y(b("text"), {
 				class: "cm-team",
@@ -399,7 +407,7 @@ var Xe = class extends le {
 				y: o,
 				"font-family": A.family,
 				"font-size": A.small,
-				fill: qe,
+				fill: Je,
 				"text-anchor": "start",
 				"dominant-baseline": "central"
 			});
@@ -474,7 +482,7 @@ var Xe = class extends le {
 			rx: 3,
 			ry: 3,
 			fill: o,
-			stroke: Ze(o),
+			stroke: Qe(o),
 			"stroke-width": 1
 		});
 		v(e, s);
@@ -518,8 +526,8 @@ var Xe = 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"] : A.label, s = String(a["font-weight"] ?? "400"), c = n - 20, l = at(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] = it(l[f - 1], c, o, s));
+		let o = typeof a["font-size"] == "number" ? a["font-size"] : A.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] = at(l[f - 1], c, o, s));
 		let p = 36 + u / 2;
 		l.forEach((t, r) => {
 			let i = y(b("text"), {
@@ -537,14 +545,14 @@ var Xe = class extends le {
 		});
 	}
 };
-function Ze(e, t = .7) {
+function Qe(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 Qe = "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", $e = "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 et(e, t, n, r, i) {
+var $e = "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", et = "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 tt(e, t, n, r, i) {
 	if (e === "generic") {
 		let e = b("g"), a = y(b("circle"), {
 			cx: t,
@@ -560,41 +568,41 @@ function et(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" ? Qe : $e,
+		d: e === "core" ? $e : et,
 		fill: i
 	});
 	return v(s, c), s;
 }
-var tt = "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 nt(e, t, n, r) {
+var nt = "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 rt(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: tt,
+		d: nt,
 		fill: r
 	});
 	return v(a, o), a;
 }
 var N;
-function rt(e, t, n) {
+function it(e, t, n) {
 	return N === void 0 && (N = typeof document > "u" ? null : document.createElement("canvas").getContext("2d")), N ? (N.font = `${n} ${t}px ${A.family}`, N.measureText(e).width) : e.length * t * .58;
 }
-function it(e, t, n, r) {
+function at(e, t, n, r) {
 	let i = e;
-	for (; i && rt(`${i}…`, n, r) > t;) i = i.slice(0, -1).trimEnd();
+	for (; i && it(`${i}…`, n, r) > t;) i = i.slice(0, -1).trimEnd();
 	return `${i}…`;
 }
-function at(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 = ot(e, t, n, r);
+		let i = st(e, t, n, r);
 		return i.length ? i : [""];
 	});
 }
-function ot(e, t, n, r) {
+function st(e, t, n, r) {
 	let i = e.split(/\s+/).filter(Boolean);
 	if (i.length === 0) return [];
-	let a = (e) => rt(e, n, r) <= t, o = [], s = "";
+	let a = (e) => it(e, n, r) <= t, o = [], s = "";
 	for (let e of i) {
 		let t = s ? `${s} ${e}` : e;
 		if (a(t)) {
@@ -617,13 +625,13 @@ function ot(e, t, n, r) {
 }
 //#endregion
 //#region src/draw/index.ts
-var st = {
+var ct = {
 	__init__: ["cmRenderer"],
-	cmRenderer: ["type", Xe]
+	cmRenderer: ["type", Ze]
 };
 //#endregion
 //#region src/io/CmImporter.ts
-function ct(e, t) {
+function lt(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,
@@ -635,13 +643,13 @@ function ct(e, t) {
 		y: r + a * c
 	};
 }
-function lt(e) {
+function ut(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
-var ut = class {
+var dt = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -660,7 +668,8 @@ var ut = class {
 	assertImportable(e) {
 		let t = /* @__PURE__ */ new Set();
 		for (let { id: n } of [...e.contexts, ...e.relationships]) {
-			if (ee(n)) throw Error(`The id "${n}" is reserved for the diagram itself.`);
+			let e = re(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);
 		}
@@ -687,7 +696,7 @@ var ut = class {
 				});
 				continue;
 			}
-			let s = [ct(e, lt(a)), ct(a, lt(e))], c = this.factory.createRelationship(r, e, a, s);
+			let s = [lt(e, ut(a)), lt(a, ut(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);
@@ -705,7 +714,7 @@ var ut = class {
 			"waypoints" in t ? this.canvas.removeConnection(t.id) : this.canvas.removeShape(t.id);
 		} catch {}
 	}
-}, dt = class {
+}, ft = class {
 	elementRegistry;
 	static $inject = ["elementRegistry"];
 	constructor(e) {
@@ -759,22 +768,22 @@ var ut = class {
 			...e?.foreign
 		};
 	}
-}, ft = {
-	cmImporter: ["type", ut],
-	cmExporter: ["type", dt]
-}, pt = class extends ze {
+}, pt = {
+	cmImporter: ["type", dt],
+	cmExporter: ["type", ft]
+}, mt = class extends Be {
 	_getModules() {
 		return [
-			We,
-			st,
-			ft
+			Ge,
+			ct,
+			pt
 		];
 	}
-}, mt = {
+}, ht = {
 	x: 14,
 	y: 18
-}, ht = 12;
-function gt(e) {
+}, gt = 12;
+function _t(e) {
 	if (T(e)) {
 		let t = [];
 		return e.description && t.push(e.description), e.team && t.push(`Team: ${e.team}`), t.length === 0 ? null : {
@@ -791,7 +800,7 @@ function gt(e) {
 	}
 	return null;
 }
-var _t = class {
+var vt = class {
 	static $inject = ["eventBus", "canvas"];
 	tooltip;
 	title;
@@ -800,13 +809,13 @@ var _t = 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 + mt.x, t.width - r - ht);
-			this.tooltip.style.left = `${Math.max(ht, i)}px`, this.tooltip.style.top = `${e.clientY - t.top + mt.y}px`;
+			let t = n.getBoundingClientRect(), r = this.tooltip.offsetWidth, i = Math.min(e.clientX - t.left + ht.x, t.width - r - gt);
+			this.tooltip.style.left = `${Math.max(gt, i)}px`, this.tooltip.style.top = `${e.clientY - t.top + ht.y}px`;
 		}, i = () => {
 			this.tooltip.hidden = !0, n.removeEventListener("mousemove", r);
 		};
 		e.on("element.hover", (e) => {
-			let t = gt(e.element);
+			let t = _t(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",
@@ -817,51 +826,51 @@ var _t = class {
 			i(), this.tooltip.remove();
 		});
 	}
-}, vt = {
+}, yt = {
 	__init__: ["cmHoverTooltip"],
-	cmHoverTooltip: ["type", _t]
-}, P = class extends pt {
+	cmHoverTooltip: ["type", vt]
+}, P = class extends mt {
 	_getModules() {
 		return [
 			...super._getModules(),
 			x,
 			de,
 			fe,
-			vt
+			yt
 		];
 	}
 };
 //#endregion
 //#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function yt(e, t, n) {
+function bt(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var bt = class {
+var xt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], yt(r, e, n[e]);
+		for (let e of Object.keys(n)) i[e] = r[e], bt(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)) yt(r, e, n[e]);
+		if (n) for (let e of Object.keys(n)) bt(r, e, n[e]);
 		return [t];
 	}
 };
 //#endregion
 //#region src/modeling/cmd/SwapEndsHandler.ts
-function xt(e) {
+function St(e) {
 	let t = e.source;
 	return e.source = e.target, e.target = t, Array.isArray(e.waypoints) && (e.waypoints = [...e.waypoints].reverse()), [e];
 }
-var St = class {
+var Ct = class {
 	execute(e) {
-		return xt(e.connection);
+		return St(e.connection);
 	}
 	revert(e) {
-		return xt(e.connection);
+		return St(e.connection);
 	}
-}, Ct = class {
+}, wt = class {
 	elementRegistry;
 	static $inject = ["elementRegistry"];
 	constructor(e) {
@@ -886,7 +895,7 @@ var St = class {
 			title: e.oldTitle ?? ""
 		}, [];
 	}
-}, wt = "element.updateProperties", Tt = "relationship.swapEnds", Et = "map.updateTitle", Dt = class {
+}, Tt = "element.updateProperties", Et = "relationship.swapEnds", Dt = "map.updateTitle", Ot = class {
 	commandStack;
 	elementRegistry;
 	graphicsFactory;
@@ -896,20 +905,20 @@ var St = class {
 		"graphicsFactory"
 	];
 	constructor(e, t, n) {
-		this.commandStack = e, this.elementRegistry = t, this.graphicsFactory = n, e.registerHandler(wt, bt), e.registerHandler(Tt, St), e.registerHandler(Et, Ct);
+		this.commandStack = e, this.elementRegistry = t, this.graphicsFactory = n, e.registerHandler(Tt, xt), e.registerHandler(Et, Ct), e.registerHandler(Dt, wt);
 	}
 	setTitle(e) {
-		this.commandStack.execute(Et, { title: e });
+		this.commandStack.execute(Dt, { title: e });
 	}
 	redraw(e) {
 		let t = this.elementRegistry.getGraphics(e);
 		t && this.graphicsFactory.update(E(e) ? "connection" : "shape", e, t);
 	}
 	swapEnds(e) {
-		this.commandStack.execute(Tt, { connection: e }), this.redraw(e);
+		this.commandStack.execute(Et, { connection: e }), this.redraw(e);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(wt, {
+		this.commandStack.execute(Tt, {
 			element: e,
 			properties: t
 		}), this.redraw(e);
@@ -934,7 +943,7 @@ var St = class {
 	}
 	setPattern(e, t) {
 		let n = { pattern: t };
-		if (te(t)) n.upstreamRoles = void 0, n.downstreamRoles = void 0;
+		if (ee(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;
@@ -952,23 +961,23 @@ var St = class {
 	}
 }, F = {
 	__init__: ["cmModeling"],
-	cmModeling: ["type", Dt],
-	layouter: ["type", Ue]
-}, Ot = class extends _e {
+	cmModeling: ["type", Ot],
+	layouter: ["type", We]
+}, kt = 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) => At(e.source, e.target)), this.addRule("connection.reconnect", (e) => !!At(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) => jt(e.source, e.target)), this.addRule("connection.reconnect", (e) => !!jt(e.source, e.target, e.connection)), this.addRule("connection.updateWaypoints", () => !0);
 	}
 };
-function kt(e, t, n) {
+function At(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 At(e, t, n) {
-	return !T(e) || !T(t) || e === t || kt(e, t, n) ? !1 : {
+function jt(e, t, n) {
+	return !T(e) || !T(t) || e === t || At(e, t, n) ? !1 : {
 		cmKind: "relationship",
 		pattern: "upstream-downstream"
 	};
@@ -978,8 +987,8 @@ function At(e, t, n) {
 var I = {
 	__depends__: [ge],
 	__init__: ["cmRules"],
-	cmRules: ["type", Ot]
-}, jt = class extends ve {
+	cmRules: ["type", kt]
+}, Mt = class extends ve {
 	static $inject = [
 		"eventBus",
 		"canvas",
@@ -1007,33 +1016,33 @@ var I = {
 			}
 		}, !0);
 	}
-}, Mt = "cm-dragging", Nt = class {
+}, Nt = "cm-dragging", Pt = class {
 	static $inject = ["eventBus", "canvas"];
 	constructor(e, t) {
 		e.on("drag.init", () => {
-			t.getContainer().classList.add(Mt);
+			t.getContainer().classList.add(Nt);
 		}), e.on("drag.cleanup", () => {
-			t.getContainer().classList.remove(Mt);
+			t.getContainer().classList.remove(Nt);
 		});
 	}
-}, Pt = 2e3, Ft = {
+}, Ft = 2e3, It = {
 	__init__: [
 		"cmFlatModelBehavior",
 		"cmDragBehavior",
 		"cmClickSelectionBehavior"
 	],
-	cmFlatModelBehavior: ["type", jt],
-	cmDragBehavior: ["type", Nt],
+	cmFlatModelBehavior: ["type", Mt],
+	cmDragBehavior: ["type", Pt],
 	cmClickSelectionBehavior: ["type", class {
 		static $inject = ["eventBus", "selection"];
 		constructor(e, t) {
-			e.on("element.click", Pt, (e) => {
+			e.on("element.click", Ft, (e) => {
 				let n = e.element;
 				if (w(n) && !ye(e) && t.isSelected(n)) return !1;
 			});
 		}
 	}]
-}, L = "cm.readOnly.changed", It = 5e3, Lt = [
+}, L = "cm.readOnly.changed", Lt = 5e3, Rt = [
 	"elements.move",
 	"shape.move",
 	"shape.resize",
@@ -1045,7 +1054,7 @@ var I = {
 	"connection.reconnect",
 	"connection.updateWaypoints",
 	"elements.delete"
-], Rt = class extends _e {
+], zt = class extends _e {
 	bus;
 	static $inject = ["eventBus"];
 	readOnly = !1;
@@ -1053,7 +1062,7 @@ var I = {
 		super(e), this.bus = e;
 	}
 	init() {
-		this.addRule(Lt, It, () => !this.readOnly && void 0);
+		this.addRule(Rt, Lt, () => !this.readOnly && void 0);
 	}
 	isReadOnly() {
 		return this.readOnly;
@@ -1064,11 +1073,11 @@ var I = {
 }, R = {
 	__depends__: [ge],
 	__init__: ["cmReadOnly"],
-	cmReadOnly: ["type", Rt]
-}, zt = {
+	cmReadOnly: ["type", zt]
+}, Bt = {
 	name: "cm-direct-editing",
 	team: "cm-direct-editing-team"
-}, Bt = 10, Vt = 20, Ht = class {
+}, Vt = 10, Ht = 20, Ut = class {
 	canvas;
 	directEditing;
 	modeling;
@@ -1093,10 +1102,10 @@ var I = {
 		}), e.on("element.dblclick", (e) => {
 			let t = e.element;
 			w(t) && (this.mode = T(t) && t.team && this.isInTeamBand(t, e.originalEvent) ? "team" : "name", n.activate(t));
-		}), e.on(["canvas.viewbox.changing", "drag.init"], () => n.complete()), e.on("directEditing.activate", (e) => {
+		}), 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 = zt[this.mode];
+			let r = Bt[this.mode];
 			t.addMarker(n, r), this.activeMarker = {
 				element: n,
 				marker: r
@@ -1132,11 +1141,26 @@ var I = {
 			text: this.directEditing.getValue()
 		};
 	}
+	placeOpenEdit() {
+		let e = this.activeMarker?.element, t = this.directEditing.$textbox;
+		if (!this.directEditing.isActive() || !e || !t) return;
+		let n = this.activationContext(e);
+		if (!n) return;
+		let { x: r, y: i, width: a, height: o } = n.bounds;
+		Object.assign(t.style, {
+			left: `${r}px`,
+			top: `${i}px`,
+			width: `${a}px`,
+			height: `${o}px`
+		});
+		let s = t.querySelector("[contenteditable]"), c = n.style?.fontSize;
+		s && c !== void 0 && (s.style.fontSize = String(c));
+	}
 	resume(e) {
 		let t = this.elementRegistry.get(e.elementId);
 		if (!w(t) || e.mode === "team" && !T(t) || (this.mode = e.mode, !this.directEditing.activate(t))) return;
 		let n = this.directEditing.$textbox?.querySelector("[contenteditable]");
-		n && (n.innerText = e.text, Ut(n));
+		n && (n.innerText = e.text, Wt(n));
 	}
 	activate(e) {
 		this.mode = "name", this.directEditing.activate(e);
@@ -1160,10 +1184,10 @@ var I = {
 			let r = e;
 			return {
 				bounds: {
-					x: n.x + Bt * t,
+					x: n.x + Vt * t,
 					y: n.y + n.height - 22 * t,
 					width: n.width - 20 * t,
-					height: Vt * t
+					height: Ht * t
 				},
 				text: r.team ?? "",
 				style: {
@@ -1191,7 +1215,7 @@ var I = {
 			let i = e.team ? 18 * t : 0;
 			return {
 				bounds: {
-					x: n.x + Bt * t,
+					x: n.x + Vt * t,
 					y: n.y + 36 * t - 1,
 					width: n.width - 20 * t,
 					height: n.height - 36 * t - i
@@ -1225,7 +1249,7 @@ var I = {
 		} else n !== (e.cmLabel ?? "") && this.modeling.updateLabel(e, n);
 	}
 };
-function Ut(e) {
+function Wt(e) {
 	let t = document.createRange();
 	t.selectNodeContents(e), t.collapse(!1);
 	let n = window.getSelection();
@@ -1240,11 +1264,11 @@ var z = {
 		R
 	],
 	__init__: ["cmLabelEditing"],
-	cmLabelEditing: ["type", Ht]
+	cmLabelEditing: ["type", Ut]
 };
 //#endregion
 //#region src/draw/palette-icons.ts
-function Wt(e, t = 24) {
+function B(e, t = 24) {
 	return `<svg class="cm-palette-svg" width="${t}" height="${t}" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
 }
 var Gt = "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", Kt = "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";
@@ -1253,20 +1277,20 @@ function qt(e, t, n, r, i) {
 	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" ? Gt : Kt}" fill="${i}" transform="${s}"/>`;
 }
-function B(e) {
+function V(e) {
 	let t = e ? p[e] : void 0;
-	return Wt(!e || !t ? `<rect x="2" y="4" width="22" height="18" rx="3.5" fill="${Je}" stroke="${Ye}" 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"/>` + qt(e, 13, 13, 12, t.stroke));
+	return B(!e || !t ? `<rect x="2" y="4" width="22" height="18" rx="3.5" fill="${Ye}" stroke="${Xe}" 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"/>` + qt(e, 13, 13, 12, t.stroke));
 }
 function Jt(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" ? Gt : Kt}" fill="${r}"/>`}</svg>`;
 }
-function V(e) {
-	return Wt(`<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="${A.family}">${e}</text>`);
+function H(e) {
+	return B(`<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="${A.family}">${e}</text>`);
 }
-function H(e = "upstream-downstream", t = 24) {
+function U(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 Wt(`<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);
+	return B(`<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
@@ -1287,7 +1311,7 @@ var Yt = {
 function Xt(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">${Yt[e]}</svg>`;
 }
-function U(e) {
+function W(e) {
 	return Xt(e, 16, 2.5);
 }
 function Zt(e) {
@@ -1348,7 +1372,7 @@ var an = class {
 			e[`context.${t.type}`] = {
 				group: $t,
 				title: nn(t.label),
-				html: tn(B(t.type), !0),
+				html: tn(V(t.type), !0),
 				action: {
 					dragstart: n,
 					click: n
@@ -1359,13 +1383,16 @@ var an = class {
 	}
 	placeInFreeRect(e) {
 		if (this.readOnly.isReadOnly()) return;
-		let t = this.freeRectCentre(), n = (e) => this.elementRegistry.filter((e) => T(e)).some((t) => {
+		let t = this.config?.freeRectCenter?.(), n = t ? {
+			x: t.x,
+			y: t.y
+		} : this.freeRectCentre(), r = (e) => this.elementRegistry.filter((e) => T(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 (; n(t);) t.x += en, t.y += en;
-		let r = this.modeling.createShape(e, t, this.canvas.getRootElement());
-		this.selection.select(r), this.canvas.focus(), this.labelEditing.activate(r);
+		for (; r(n);) n.x += en, n.y += en;
+		let i = this.modeling.createShape(e, n, this.canvas.getRootElement());
+		this.selection.select(i), this.canvas.focus(), this.labelEditing.activate(i);
 	}
 	freeRectCentre() {
 		let e = this.canvas.viewbox(), t = this.config?.freeRectInsets?.() ?? {
@@ -1392,18 +1419,24 @@ var an = class {
 	],
 	__init__: ["cmPaletteProvider"],
 	cmPaletteProvider: ["type", an]
-}, sn = "cm-subdomain-menu", cn = "cm-pattern-menu", W = "cm-roles-menu", G = "cm-popup-active", K = 8, ln = {
+}, sn = "cm-subdomain-menu", cn = "cm-pattern-menu", G = "cm-roles-menu", K = "cm-popup-active", q = 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."
 };
 function un(e) {
 	return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function q(e, t, n = {}) {
+function J(e, t, n = {}) {
 	let r = n.draggable ? " draggable=\"true\"" : "", i = n.danger ? " cm-pad-entry--danger" : "", a = un(t);
 	return `<div class="entry cm-pad-entry${i}"${r} title="${a}" aria-label="${a}">${e}</div>`;
 }
-var dn = class {
+function dn(e, t) {
+	let n = t.getBoundingClientRect();
+	e.style.left = `${n.right + q}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`);
+}
+var fn = class {
 	contextPad;
 	popupMenu;
 	eventBus;
@@ -1446,7 +1479,7 @@ var dn = class {
 			}
 			let r = f.get();
 			r.length === 1 ? e.open(r[0], !0) : r.length > 1 && e.open(r, !0);
-		}), t.registerProvider(sn, { getPopupMenuEntries: (e) => this.subdomainMenuEntries(e) }), t.registerProvider(cn, { getPopupMenuEntries: (e) => this.patternMenuEntries(e) }), t.registerProvider(W, { getPopupMenuEntries: (e) => this.rolesMenuEntries(e) }), n.on("autoPlace", (e) => {
+		}), t.registerProvider(sn, { getPopupMenuEntries: (e) => this.subdomainMenuEntries(e) }), t.registerProvider(cn, { getPopupMenuEntries: (e) => this.patternMenuEntries(e) }), t.registerProvider(G, { getPopupMenuEntries: (e) => this.rolesMenuEntries(e) }), n.on("autoPlace", (e) => {
 			let { source: t, shape: n } = e, r = {
 				x: ce(t).right + De + n.width / 2,
 				y: _(t).y
@@ -1500,7 +1533,7 @@ var dn = class {
 		return {
 			"append-context": {
 				group: "edit",
-				html: q(U("square-plus"), "Append a connected context — click to place automatically, drag to position", { draggable: !0 }),
+				html: J(W("square-plus"), "Append a connected context — click to place automatically, drag to position", { draggable: !0 }),
 				action: {
 					click: () => this.appendContext(e),
 					dragstart: (t) => this.startAppend(t, e)
@@ -1508,7 +1541,7 @@ var dn = class {
 			},
 			connect: {
 				group: "edit",
-				html: q(U("arrow-right"), "Connect to another context", { draggable: !0 }),
+				html: J(W("arrow-right"), "Connect to another context", { draggable: !0 }),
 				action: {
 					click: (t) => this.startConnect(t, e, !0),
 					dragstart: (t) => this.startConnect(t, e, !1)
@@ -1516,12 +1549,12 @@ var dn = class {
 			},
 			"subdomain-type": {
 				group: "edit",
-				html: q(B(e.subdomainType), `Change subdomain type — currently ${t?.label ?? "unclassified"}`),
+				html: J(V(e.subdomainType), `Change subdomain type — currently ${t?.label ?? "unclassified"}`),
 				action: { click: (t) => this.openMenu(t, e, sn, "Subdomain type") }
 			},
 			team: {
 				group: "edit",
-				html: q(U("users"), `Set owning team — currently ${e.team ?? "none"}`),
+				html: J(W("users"), `Set owning team — currently ${e.team ?? "none"}`),
 				action: { click: () => this.labelEditing.activateTeam(e) }
 			},
 			"edit-label": this.editLabelEntry(e, "Rename context"),
@@ -1576,30 +1609,30 @@ var dn = class {
 	relationshipEntries(e) {
 		let t = f[e.pattern], n = { pattern: {
 			group: "edit",
-			html: q(H(t?.pattern), `Change pattern — currently ${t?.label ?? e.pattern}`),
+			html: J(U(t?.pattern), `Change pattern — currently ${t?.label ?? e.pattern}`),
 			action: { click: (t) => this.openMenu(t, e, cn, "Relationship pattern") }
 		} };
 		return t && !t.symmetric && (n.roles = {
 			group: "edit",
-			html: q(U("sliders-horizontal"), "Edit integration roles — OHS/PL upstream, ACL/CF downstream"),
-			action: { click: (t) => this.openMenu(t, e, W, "Integration roles") }
+			html: J(W("sliders-horizontal"), "Edit integration roles — OHS/PL upstream, ACL/CF downstream"),
+			action: { click: (t) => this.openMenu(t, e, G, "Integration roles") }
 		}, n["swap-ends"] = {
 			group: "edit",
-			html: q(U("arrow-left-right"), "Swap ends — reverse upstream/downstream"),
+			html: J(W("arrow-left-right"), "Swap ends — reverse upstream/downstream"),
 			action: { click: () => this.cmModeling.swapEnds(e) }
 		}), 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: q(U("pencil"), `${t} — edit the name in place`),
+			html: J(W("pencil"), `${t} — edit the name in place`),
 			action: { click: () => this.labelEditing.activate(e) }
 		};
 	}
 	descriptionEntry(e, t) {
 		return {
 			group: "edit",
-			html: q(U("text-align-start"), "Edit description"),
+			html: J(W("text-align-start"), "Edit description"),
 			action: { click: (n) => this.openPrompt(n, {
 				value: e.description ?? "",
 				placeholder: t,
@@ -1615,34 +1648,36 @@ var dn = class {
 	}
 	openPrompt(e, t) {
 		this.activePrompt?.cancel();
-		let n = (e.delegateTarget ?? e.target).getBoundingClientRect(), r = document.createElement("div");
-		r.className = "cm-pad-prompt", r.style.left = `${n.right + K}px`, r.style.top = `${n.top}px`;
+		let n = e.delegateTarget ?? e.target, r = document.createElement("div");
+		r.className = "cm-pad-prompt";
 		let i = document.createElement(t.multiline ? "textarea" : "input");
 		if (i.className = "cm-pad-prompt__field", i.value = t.value, i.placeholder = t.placeholder, i.setAttribute("aria-label", t.label), i instanceof HTMLTextAreaElement && (i.rows = 4), r.appendChild(i), t.multiline) {
 			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);
-		let a = r.getBoundingClientRect();
-		a.right > window.innerWidth - 8 && (r.style.left = `${Math.max(8, n.left - a.width - K)}px`), a.bottom > window.innerHeight - 8 && (r.style.top = `${Math.max(8, window.innerHeight - 8 - a.height)}px`), i.focus(), i instanceof HTMLTextAreaElement ? i.setSelectionRange(i.value.length, i.value.length) : i.select();
-		let o = () => l();
-		this.eventBus.on("canvas.viewbox.changing", o);
-		let s = !1, c = () => {
-			s || (s = !0, this.eventBus.off("canvas.viewbox.changing", o), r.remove(), this.activePrompt = void 0, this.canvas.restoreFocus?.());
-		}, l = () => {
-			if (s) return;
+		this.canvas.getContainer().appendChild(r), dn(r, n), i.focus(), i instanceof HTMLTextAreaElement ? i.setSelectionRange(i.value.length, i.value.length) : i.select();
+		let a = () => {
+			this.scheduler.schedule(() => {
+				n.isConnected && dn(r, n);
+			}, "cmContextPad#placePrompt");
+		};
+		this.eventBus.on("canvas.viewbox.changed", 200, a);
+		let o = !1, s = () => {
+			o || (o = !0, this.eventBus.off("canvas.viewbox.changed", a), this.scheduler.cancel("cmContextPad#placePrompt"), r.remove(), this.activePrompt = void 0, this.canvas.restoreFocus?.());
+		}, c = () => {
+			if (o) return;
 			let e = i.value.trim(), n = e !== t.value.trim();
-			c(), n && t.onCommit(e);
+			s(), n && t.onCommit(e);
 		};
 		i.addEventListener("keydown", (e) => {
 			let n = e;
-			n.key === "Escape" ? (n.preventDefault(), n.stopPropagation(), c()) : n.key === "Enter" && (!t.multiline || n.ctrlKey || n.metaKey) && (n.preventDefault(), l());
-		}), i.addEventListener("blur", l), this.activePrompt = { cancel: c };
+			n.key === "Escape" ? (n.preventDefault(), n.stopPropagation(), s()) : n.key === "Enter" && (!t.multiline || n.ctrlKey || n.metaKey) && (n.preventDefault(), c());
+		}), i.addEventListener("blur", c), this.activePrompt = { cancel: s };
 	}
 	deleteEntry(e, t) {
 		return {
 			group: "delete",
-			html: q(U("trash"), t, { danger: !0 }),
+			html: J(W("trash"), t, { danger: !0 }),
 			action: { click: () => this.modeling.removeElements(e) }
 		};
 	}
@@ -1652,12 +1687,12 @@ var dn = class {
 	}
 	openMenuBeside(e, t, n, r) {
 		let i = {
-			x: e.right + K,
+			x: e.right + q,
 			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(K, e.left - K - o.width), a.style.left = `${i.x}px`), this.currentMenu = {
+		a && o && o.left < e.right && (i.x = Math.max(q, e.left - q - o.width), a.style.left = `${i.x}px`), this.currentMenu = {
 			element: t,
 			menuId: n,
 			title: r,
@@ -1674,8 +1709,8 @@ var dn = class {
 		for (let i of n) r[`type-${i.type}`] = {
 			label: i.label,
 			description: i.description,
-			imageHtml: B(i.type),
-			...i.type === t ? { className: G } : {},
+			imageHtml: V(i.type),
+			...i.type === t ? { className: K } : {},
 			action: () => {
 				i.type !== t && this.cmModeling.setSubdomainType(e, i.type);
 			}
@@ -1683,8 +1718,8 @@ var dn = class {
 		return r["type-none"] = {
 			label: "Unclassified",
 			description: "No subdomain classification.",
-			imageHtml: B(),
-			...t === void 0 ? { className: G } : {},
+			imageHtml: V(),
+			...t === void 0 ? { className: K } : {},
 			action: () => {
 				t !== void 0 && this.cmModeling.setSubdomainType(e, void 0);
 			}
@@ -1696,8 +1731,8 @@ var dn = class {
 		for (let i of t) r[`pattern-${i.pattern}`] = {
 			label: i.label,
 			description: i.description,
-			imageHtml: H(i.pattern),
-			...i.pattern === n ? { className: G } : {},
+			imageHtml: U(i.pattern),
+			...i.pattern === n ? { className: K } : {},
 			action: () => {
 				i.pattern !== n && this.cmModeling.setPattern(e, i.pattern);
 			}
@@ -1714,15 +1749,15 @@ var dn = class {
 			a[`upstream-${t}`] = {
 				label: h[t].label,
 				description: o ? i ? `${o} Click to remove it.` : o : h[t].description,
-				imageHtml: V(t),
+				imageHtml: H(t),
 				group: {
 					id: "upstream",
 					name: "Upstream (from) — OHS and/or PL"
 				},
 				...s ? { disabled: !0 } : {},
-				...i ? { className: G } : {},
+				...i ? { className: K } : {},
 				action: () => {
-					s || (this.cmModeling.setUpstreamRoles(e, i ? r.filter((e) => e !== t) : [...r, t]), this.reopenMenu(e, W));
+					s || (this.cmModeling.setUpstreamRoles(e, i ? r.filter((e) => e !== t) : [...r, t]), this.reopenMenu(e, G));
 				}
 			};
 		}
@@ -1731,21 +1766,21 @@ var dn = class {
 			a[`downstream-${t}`] = {
 				label: c[t].label,
 				description: o ? r ? `${o} Click to remove it.` : o : c[t].description,
-				imageHtml: V(t),
+				imageHtml: H(t),
 				group: {
 					id: "downstream",
 					name: "Downstream (to) — ACL or CF, not both"
 				},
 				...s ? { disabled: !0 } : {},
-				...r ? { className: G } : {},
+				...r ? { className: K } : {},
 				action: () => {
-					s || (this.cmModeling.setDownstreamRoles(e, r ? [] : [t]), this.reopenMenu(e, W));
+					s || (this.cmModeling.setDownstreamRoles(e, r ? [] : [t]), this.reopenMenu(e, G));
 				}
 			};
 		}
 		return a;
 	}
-}, fn = {
+}, pn = {
 	__depends__: [
 		we,
 		Te,
@@ -1760,20 +1795,20 @@ var dn = class {
 		R
 	],
 	__init__: ["cmContextPadProvider"],
-	cmContextPadProvider: ["type", dn]
+	cmContextPadProvider: ["type", fn]
 };
 //#endregion
 //#region src/keyboard/CmKeyboard.ts
-function pn(e) {
+function mn(e) {
 	let t = e;
 	return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
 }
-function mn(e, t) {
+function hn(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 hn = class {
+var gn = class {
 	static $inject = [
 		"config.cmKeyboard",
 		"canvas",
@@ -1786,7 +1821,7 @@ var hn = class {
 	];
 	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 || !mn(e.target, c) || pn(e.target)) return;
+			if (e.defaultPrevented || !hn(e.target, c) || mn(e.target)) 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) => w(e)));
@@ -1804,14 +1839,14 @@ var hn = class {
 		};
 		l.addEventListener("keydown", d), o.on("diagram.destroy", () => l.removeEventListener("keydown", d));
 	}
-}, gn = {
+}, _n = {
 	__depends__: [R],
 	__init__: ["cmKeyboard"],
-	cmKeyboard: ["type", hn]
-}, _n = "cm-validation", vn = 22, J = 16, yn = 44;
-function bn(e) {
+	cmKeyboard: ["type", gn]
+}, vn = "cm-validation", yn = 22, Y = 16, bn = 44;
+function xn(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 = W(t ? "circle-x" : "triangle-alert");
 	let r = document.createElement("div");
 	r.className = "cm-validation-tooltip";
 	for (let t of e) {
@@ -1820,11 +1855,11 @@ function bn(e) {
 	}
 	return n.appendChild(r), n;
 }
-function xn(e, t, n) {
+function Sn(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 * J,
-		y: (r.y + i.y) / 2 + c * J
+		x: (r.x + i.x) / 2 + -l * Y,
+		y: (r.y + i.y) / 2 + c * Y
 	};
 	let u = e.pattern === "customer-supplier", d = n === "upstream" ? M(r, i, u ? "S" : "U", e.upstreamRoles ?? []) : M(i, r, u ? "C" : "D", e.downstreamRoles ?? []);
 	if (d) {
@@ -1837,15 +1872,15 @@ function xn(e, t, n) {
 			y: e.y + 1
 		};
 	}
-	let f = Math.min(yn, 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(bn, 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 * J,
-		y: m + c * J
+		x: p + -l * Y,
+		y: m + c * Y
 	};
 }
 //#endregion
 //#region src/validation/index.ts
-var Sn = {
+var Cn = {
 	__depends__: [Ae],
 	__init__: ["cmValidationMarkers"],
 	cmValidationMarkers: ["type", class {
@@ -1864,7 +1899,7 @@ var Sn = {
 			e.on("import.render.done", i), e.on("commandStack.changed", i);
 		}
 		refresh() {
-			this.overlays.remove({ type: _n });
+			this.overlays.remove({ type: vn });
 			let e = ae(this.exporter.export()), t = /* @__PURE__ */ new Map(), n = (e, n) => {
 				for (let r of e) {
 					if (!r.relationshipId) continue;
@@ -1884,13 +1919,13 @@ var Sn = {
 				if (!E(t)) continue;
 				let r = t.waypoints ?? [];
 				if (r.length < 2) continue;
-				let i = e.split(" ")[1], { x: a, y: o } = xn(t, r, i), s = Math.min(...r.map((e) => e.x)), c = Math.min(...r.map((e) => e.y));
-				this.overlays.add(t, _n, {
+				let i = e.split(" ")[1], { x: a, y: o } = Sn(t, r, i), s = Math.min(...r.map((e) => e.x)), c = Math.min(...r.map((e) => e.y));
+				this.overlays.add(t, vn, {
 					position: {
-						left: a - s - vn / 2,
-						top: o - c - vn / 2
+						left: a - s - yn / 2,
+						top: o - c - yn / 2
 					},
-					html: bn(n.findings)
+					html: xn(n.findings)
 				});
 			}
 		}
@@ -1898,10 +1933,10 @@ var Sn = {
 };
 //#endregion
 //#region src/zorder/CmZOrder.ts
-function Cn(e) {
+function wn(e) {
 	return +!E(e);
 }
-var wn = class {
+var Tn = class {
 	canvas;
 	elementRegistry;
 	static $inject = [
@@ -1920,16 +1955,16 @@ var wn = class {
 		});
 	}
 	reorder() {
-		let e = this.elementRegistry.getAll().filter(w).sort((e, t) => Cn(e) - Cn(t));
+		let e = this.elementRegistry.getAll().filter(w).sort((e, t) => wn(e) - wn(t));
 		for (let t of e) {
 			let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
 			e && n && n.appendChild(e);
 		}
 	}
-}, Tn = {
+}, En = {
 	__init__: ["cmZOrder"],
-	cmZOrder: ["type", wn]
-}, En = class extends P {
+	cmZOrder: ["type", Tn]
+}, Dn = class extends P {
 	_getModules() {
 		return [
 			...super._getModules(),
@@ -1940,13 +1975,13 @@ var wn = class {
 			R,
 			F,
 			I,
-			Ft,
+			It,
 			on,
-			fn,
+			pn,
 			z,
-			gn,
-			Sn,
-			Tn
+			_n,
+			Cn,
+			En
 		];
 	}
 	undo() {
@@ -1961,30 +1996,29 @@ var wn = class {
 	canRedo() {
 		return this.get("commandStack").canRedo();
 	}
-}, Dn = "context-maps";
-function On(e = {}) {
-	return jn(new En({
-		...An(e),
-		undoRedoKeys: e.undoRedoKeys ?? !0,
-		freeRectInsets: e.freeRectInsets
+}, On = "context-maps";
+function kn(e = {}) {
+	return Mn(new Dn({
+		...jn(e),
+		undoRedoKeys: e.undoRedoKeys ?? !0
 	}), !0);
 }
-function kn(e = {}) {
-	return jn(new P({
-		...An(e),
-		freeRectInsets: e.freeRectInsets
-	}), !1);
+function An(e = {}) {
+	return Mn(new P(jn(e)), !1);
 }
-function An(e) {
+function jn(e) {
 	return {
 		width: "100%",
 		height: "100%",
-		additionalModules: e.additionalModules ?? []
+		additionalModules: e.additionalModules ?? [],
+		freeArea: e.freeArea,
+		freeRectInsets: e.freeRectInsets,
+		fitOnImport: e.fitOnImport
 	};
 }
-function jn(e, t) {
+function Mn(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: Dn,
+		notation: On,
 		apiVersion: je,
 		editable: t
 	};
@@ -1993,15 +2027,20 @@ function jn(e, t) {
 	}), {
 		meta: l,
 		elements: {
-			list: () => s ? [] : i.getAll().filter(w).map(Nn),
+			list: () => s ? [] : i.getAll().filter(w).map(Fn),
+			bounds(e) {
+				if (s) return;
+				let t = i.get(e);
+				return w(t) ? Pn(t) : void 0;
+			},
 			reveal(e) {
 				if (s) return !1;
 				let t = i.get(e);
 				return w(t) ? (a.select(t), r.scrollToElement(t), !0) : !1;
 			},
-			selection: () => s ? [] : Mn(a.get()),
+			selection: () => s ? [] : Nn(a.get()),
 			onSelection(e) {
-				let t = (t) => e(Mn(t.newSelection ?? []));
+				let t = (t) => e(Nn(t.newSelection ?? []));
 				return n.on("selection.changed", t), () => n.off("selection.changed", t);
 			}
 		},
@@ -2028,13 +2067,13 @@ function jn(e, t) {
 					width: n,
 					height: i
 				};
-				return Pn(a) ? a : void 0;
+				return In(a) ? a : void 0;
 			} catch {
 				return;
 			}
 		},
 		setViewState(e) {
-			!s && Pn(e) && r.viewbox({
+			!s && In(e) && r.viewbox({
 				x: e.x,
 				y: e.y,
 				width: e.width,
@@ -2053,26 +2092,35 @@ function jn(e, t) {
 		}
 	};
 }
-function Mn(e) {
+function Nn(e) {
 	return e.filter(w).map((e) => e.id);
 }
-function Nn(e) {
+function Pn(e) {
+	let { x: t, y: n, width: r, height: i } = Me(e);
+	return {
+		x: t,
+		y: n,
+		width: r,
+		height: i
+	};
+}
+function Fn(e) {
 	return e.cmLabel ? {
 		id: e.id,
 		name: e.cmLabel
 	} : { id: e.id };
 }
-function Pn(e) {
+function In(e) {
 	if (typeof e != "object" || !e) return !1;
 	let { x: t, y: n, width: r, height: i } = e;
-	return Y(t) && Y(n) && Y(r) && Y(i) && r > 0 && i > 0;
+	return X(t) && X(n) && X(r) && X(i) && r > 0 && i > 0;
 }
-function Y(e) {
+function X(e) {
 	return typeof e == "number" && Number.isFinite(e);
 }
 //#endregion
 //#region src/connect-handles/CmConnectHandles.ts
-var Fn = "cm-connect-handle", In = 28, Ln = 12, Rn = [
+var Ln = "cm-connect-handle", Rn = 28, zn = 12, Bn = [
 	{
 		side: "top",
 		rotationDeg: -90
@@ -2090,15 +2138,15 @@ var Fn = "cm-connect-handle", In = 28, Ln = 12, Rn = [
 		rotationDeg: 180
 	}
 ];
-function zn(e, t) {
-	let n = t.width / 2 - In / 2, r = t.height / 2 - In / 2;
+function Vn(e, t) {
+	let n = t.width / 2 - Rn / 2, r = t.height / 2 - Rn / 2;
 	switch (e) {
 		case "top": return {
 			top: -40,
 			left: n
 		};
 		case "bottom": return {
-			top: t.height + Ln,
+			top: t.height + zn,
 			left: n
 		};
 		case "left": return {
@@ -2107,11 +2155,11 @@ function zn(e, t) {
 		};
 		case "right": return {
 			top: r,
-			left: t.width + Ln
+			left: t.width + zn
 		};
 	}
 }
-var Bn = class {
+var Hn = class {
 	eventBus;
 	selection;
 	overlays;
@@ -2131,17 +2179,17 @@ var Bn = class {
 		e.on("selection.changed", o), e.on("commandStack.changed", o), e.on(L, o);
 	}
 	refresh() {
-		if (this.overlays.remove({ type: Fn }), this.readOnly.isReadOnly()) return;
+		if (this.overlays.remove({ type: Ln }), this.readOnly.isReadOnly()) return;
 		let e = this.selection.get();
 		if (e.length !== 1) return;
 		let t = e[0];
 		if (!T(t)) return;
 		let n = t;
-		for (let { side: e, rotationDeg: r } of Rn) {
+		for (let { side: e, rotationDeg: r } of Bn) {
 			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 = W("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,
@@ -2155,13 +2203,13 @@ var Bn = class {
 				}), this.eventBus.once("connect.cleanup", 250, () => {
 					this.selection.get().length === 0 && this.selection.select(t);
 				}));
-			}), this.overlays.add(t, Fn, {
-				position: zn(e, n),
+			}), this.overlays.add(t, Ln, {
+				position: Vn(e, n),
 				html: i
 			});
 		}
 	}
-}, Vn = {
+}, Un = {
 	__depends__: [
 		C,
 		Ae,
@@ -2169,8 +2217,8 @@ var Bn = class {
 		R
 	],
 	__init__: ["cmConnectHandles"],
-	cmConnectHandles: ["type", Bn]
-}, Hn = [
+	cmConnectHandles: ["type", Hn]
+}, Wn = [
 	{
 		token: "OHS",
 		...h.OHS
@@ -2188,20 +2236,20 @@ var Bn = class {
 		...c.CF
 	}
 ];
-function X() {
+function Gn() {
 	return [
 		{
 			label: "Subdomain types",
 			rows: n.map((e) => ({
-				preview: B(e.type),
+				preview: V(e.type),
 				label: e.label,
 				explanation: e.description
 			}))
 		},
 		{
 			label: "Integration roles",
-			rows: Hn.map((e) => ({
-				preview: V(e.token),
+			rows: Wn.map((e) => ({
+				preview: H(e.token),
 				label: `${e.token} · ${e.label}`,
 				explanation: e.description
 			}))
@@ -2209,16 +2257,16 @@ function X() {
 		{
 			label: "Relationship patterns",
 			rows: t.map((e) => ({
-				preview: H(e.pattern),
+				preview: U(e.pattern),
 				label: `${e.abbreviation} · ${e.label}`,
 				explanation: e.description
 			}))
 		}
 	];
 }
-function Un(e, t = {}) {
+function Kn(e, t = {}) {
 	let n = [];
-	return X().forEach((r, i) => {
+	return Gn().forEach((r, i) => {
 		if (i > 0) {
 			let t = document.createElement("div");
 			t.className = "cd-shell-legend-separator", t.setAttribute("role", "separator"), e.append(t);
@@ -2245,7 +2293,7 @@ function Un(e, t = {}) {
 }
 //#endregion
 //#region src/legend/CmLegend.ts
-function Wn(e) {
+function qn(e) {
 	let t = document.createElement("div");
 	t.className = "cm-legend__row cm-legend-item";
 	let n = document.createElement("span");
@@ -2258,15 +2306,15 @@ function Wn(e) {
 		i.style.left = `${e.right + 10}px`, i.style.top = `${e.top + e.height / 2}px`;
 	}), t.append(n, r, i), t;
 }
-function Gn(e, t) {
+function Jn(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 Kn() {
+function Yn() {
 	let e = document.createElement("div");
 	return e.className = "cm-legend__divider", e;
 }
-var qn = class {
+var Xn = class {
 	static $inject = ["canvas", "eventBus"];
 	openState = !0;
 	host;
@@ -2294,18 +2342,18 @@ var qn = 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 = X().map((e) => Gn(e.label, e.rows.map(Wn))), a = document.createElement("div");
-		return a.className = "cm-legend__body", i.forEach((e, t) => a.append(...t > 0 ? [Kn()] : [], 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 = W("x"), r.addEventListener("click", () => this.toggle()), t.append(n, r);
+		let i = Gn().map((e) => Jn(e.label, e.rows.map(qn))), a = document.createElement("div");
+		return a.className = "cm-legend__body", i.forEach((e, t) => a.append(...t > 0 ? [Yn()] : [], 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;
 	}
-}, Jn = {
+}, Zn = {
 	__init__: ["cmLegend"],
-	cmLegend: ["type", qn]
-}, Yn = "Export as JSON";
+	cmLegend: ["type", Xn]
+}, Qn = "Export as JSON";
 function Z(e, t, n, r) {
 	return {
 		kind: "action",
@@ -2316,7 +2364,7 @@ function Z(e, t, n, r) {
 		onSelect: () => n.onSelect()
 	};
 }
-function Xn(e) {
+function $n(e) {
 	let { editTitle: t } = e;
 	return {
 		model: t ? [{
@@ -2328,7 +2376,7 @@ function Xn(e) {
 		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", Yn, e.exports.json),
+			Z("export-json", Qn, e.exports.json),
 			Z("export-cml", "Export as CML", e.exports.cml)
 		],
 		help: [{
@@ -2342,17 +2390,17 @@ function Xn(e) {
 }
 //#endregion
 //#region src/chrome/shortcuts.ts
-function Zn(e, t, n) {
+function er(e, t, n) {
 	return t === "mac" ? `⌘${e}` : `${n.ctrl}+${e}`;
 }
-function Qn(e) {
+function tr(e) {
 	try {
 		return new Intl.NumberFormat(e, { style: "percent" }).format(1);
 	} catch {
 		return new Intl.NumberFormat("en", { style: "percent" }).format(1);
 	}
 }
-function $n(e, t) {
+function nr(e, t) {
 	if (e === "mac") return {
 		zoomIn: "⌘+",
 		zoomOut: "⌘−",
@@ -2367,7 +2415,7 @@ function $n(e, t) {
 		fit: `${r}+1`
 	};
 }
-function er(e, t) {
+function rr(e, t) {
 	if (e === "mac") return {
 		undo: ["⌘Z"],
 		redo: ["⌘⇧Z"],
@@ -2386,23 +2434,23 @@ function er(e, t) {
 		lassoDrag: [`${r}+Drag`]
 	};
 }
-function tr(e) {
+function ir(e) {
 	let { platform: t, messages: n } = e;
 	return {
 		title: "File",
 		rows: [{
 			action: n.openFile ?? "Open…",
-			keys: [Zn("O", t, n.keyNames)]
+			keys: [er("O", t, n.keyNames)]
 		}, {
-			action: Yn,
-			keys: [Zn("S", t, n.keyNames)]
+			action: Qn,
+			keys: [er("S", t, n.keyNames)]
 		}]
 	};
 }
-function nr(e, t = {}) {
-	let { platform: n, messages: r } = e, i = $n(n, r.keyNames), a = er(n, r.keyNames);
+function ar(e, t = {}) {
+	let { platform: n, messages: r } = e, i = nr(n, r.keyNames), a = rr(n, r.keyNames);
 	return [
-		...t.fileKeys ? [tr(e)] : [],
+		...t.fileKeys ? [ir(e)] : [],
 		{
 			title: "View",
 			rows: [
@@ -2415,7 +2463,7 @@ function nr(e, t = {}) {
 					keys: [i.zoomOut]
 				},
 				{
-					action: r.zoomToActual(Qn(e.lang)),
+					action: r.zoomToActual(tr(e.lang)),
 					keys: [i.zoomToActual]
 				},
 				{
@@ -2479,19 +2527,19 @@ function Q(e, t, n) {
 	let r = document.createElement(e);
 	return r.className = t, n !== void 0 && (r.textContent = n), r;
 }
-function rr(e, t, n) {
+function or(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 = W("x"), a.addEventListener("click", n), r.append(i, a), r;
 }
-function ir(e, t) {
+function sr(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(rr(e, t, r), ...t.content(r)), n.append(i), n.addEventListener("click", (e) => {
+		return i.append(or(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 });
@@ -2512,9 +2560,9 @@ function ir(e, t) {
 }
 //#endregion
 //#region src/chrome/ShortcutsDialog.ts
-var $ = "cm-shortcuts", ar = "cm-shortcuts-title";
-function or(e, t) {
-	let n = Q("section", `${$}-group`), r = `${ar}-group-${t}`, i = Q("h4", `${$}-group-title`, e.title);
+var $ = "cm-shortcuts", cr = "cm-shortcuts-title";
+function lr(e, t) {
+	let n = Q("section", `${$}-group`), r = `${cr}-group-${t}`, i = Q("h4", `${$}-group-title`, e.title);
 	i.id = r;
 	let a = Q("table", `${$}-table`);
 	a.setAttribute("aria-labelledby", r);
@@ -2528,29 +2576,29 @@ function or(e, t) {
 	}
 	return n.append(i, a), n;
 }
-function sr(e, t = {}) {
-	return ir(e, {
+function ur(e, t = {}) {
+	return sr(e, {
 		className: $,
-		titleId: ar,
+		titleId: cr,
 		title: "Keyboard shortcuts",
 		content() {
 			let n = Q("div", "cm-dialog-body cm-shortcuts-body");
-			return n.append(...nr(e, t).map(or)), [n];
+			return n.append(...ar(e, t).map(lr)), [n];
 		}
 	});
 }
 //#endregion
 //#region src/chrome/TitleDialog.ts
-var cr = "cm-title-dialog", lr = "cm-title-dialog-title", ur = "cm-title-dialog-field";
-function dr(e, t) {
+var dr = "cm-title-dialog", fr = "cm-title-dialog-title", pr = "cm-title-dialog-field";
+function mr(e, t) {
 	let n = Q("button", "cm-dialog-button", e);
 	return n.type = t === "primary" ? "submit" : "button", n.dataset.variant = t, n;
 }
-function fr(e, t) {
+function hr(e, t) {
 	let n = Q("input", "cm-dialog-input");
-	return n.id = ur, n.type = "text", n.autocomplete = "off", n.spellcheck = !1, n.autofocus = !0, ir(e, {
-		className: cr,
-		titleId: lr,
+	return n.id = pr, n.type = "text", n.autocomplete = "off", n.spellcheck = !1, n.autofocus = !0, sr(e, {
+		className: dr,
+		titleId: fr,
 		title: "Map title",
 		beforeOpen() {
 			n.value = t.title();
@@ -2562,9 +2610,9 @@ function fr(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 = ur, i.append(a, n);
-			let o = Q("div", "cm-dialog-footer"), s = dr("Cancel", "secondary");
-			return s.addEventListener("click", e), o.append(s, dr("Apply", "primary")), r.append(i, o), r.addEventListener("submit", (r) => {
+			a.htmlFor = pr, i.append(a, n);
+			let o = Q("div", "cm-dialog-footer"), s = mr("Cancel", "secondary");
+			return s.addEventListener("click", e), o.append(s, mr("Apply", "primary")), r.append(i, o), r.addEventListener("submit", (r) => {
 				r.preventDefault();
 				let i = n.value.trim();
 				e(), i !== t.title() && t.setTitle(i);
@@ -2573,6 +2621,6 @@ function fr(e, t) {
 	});
 }
 //#endregion
-export { Ge as CD_TOKENS, Dn as CONTEXT_MAPS_NOTATION, ze as CmBaseViewer, Bn as CmConnectHandles, dn as CmContextPadProvider, Ve as CmElementFactory, dt as CmExporter, jt as CmFlatModelBehavior, _t as CmHoverTooltip, ut as CmImporter, hn as CmKeyboard, Ht as CmLabelEditing, qn as CmLegend, Dt as CmModeling, an as CmPaletteProvider, Rt as CmReadOnly, Ot as CmRules, wn as CmZOrder, Xe as ContextMapsRenderer, Yn as JSON_EXPORT_LABEL, O as MIRAGON, En as Modeler, P as NavigatedViewer, L as READ_ONLY_CHANGED_EVENT, D as ROOT_ID, pt as Viewer, Ft as cmBehaviorsModule, Vn as cmConnectHandlesModule, fn as cmContextPadModule, st as cmDrawModule, vt as cmHoverTooltipModule, gn as cmKeyboardModule, z as cmLabelEditingModule, Jn as cmLegendModule, We as cmModelModule, F as cmModelingModule, on as cmPaletteModule, R as cmReadOnlyModule, I as cmRulesModule, Tn as cmZOrderModule, B as contextIconSvg, Xn as contextMapMenu, nr as contextMapShortcuts, On as createCollaborativeModeler, kn as createCollaborativeViewer, sr as createShortcutsDialog, fr as createTitleDialog, gt as hoverTipFor, ft as ioModule, T as isCmContext, w as isCmElement, E as isCmRelationship, X as legendGroups, H as relationshipIconSvg, Un as renderLegend, V as roleChipSvg, Fe as saveSVG, Jt as subdomainIconSvg };
+export { Ke as CD_TOKENS, On as CONTEXT_MAPS_NOTATION, Be as CmBaseViewer, Hn as CmConnectHandles, fn as CmContextPadProvider, He as CmElementFactory, ft as CmExporter, Mt as CmFlatModelBehavior, vt as CmHoverTooltip, dt as CmImporter, gn as CmKeyboard, Ut as CmLabelEditing, Xn as CmLegend, Ot as CmModeling, an as CmPaletteProvider, zt as CmReadOnly, kt as CmRules, Tn as CmZOrder, Ze as ContextMapsRenderer, Qn as JSON_EXPORT_LABEL, O as MIRAGON, Dn as Modeler, P as NavigatedViewer, L as READ_ONLY_CHANGED_EVENT, D as ROOT_ID, mt as Viewer, It as cmBehaviorsModule, Un as cmConnectHandlesModule, pn as cmContextPadModule, ct as cmDrawModule, yt as cmHoverTooltipModule, _n as cmKeyboardModule, z as cmLabelEditingModule, Zn as cmLegendModule, Ge as cmModelModule, F as cmModelingModule, on as cmPaletteModule, R as cmReadOnlyModule, I as cmRulesModule, En as cmZOrderModule, V as contextIconSvg, $n as contextMapMenu, ar as contextMapShortcuts, kn as createCollaborativeModeler, An as createCollaborativeViewer, ur as createShortcutsDialog, hr as createTitleDialog, _t as hoverTipFor, pt as ioModule, T as isCmContext, w as isCmElement, E as isCmRelationship, Gn as legendGroups, U as relationshipIconSvg, Kn as renderLegend, H as roleChipSvg, Ie as saveSVG, Jt as subdomainIconSvg };
 
 //# sourceMappingURL=index.js.map