@miragon/context-maps-renderer 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,66 +1,80 @@
 import e from "diagram-js/lib/Diagram";
-import t from "diagram-js/lib/layout/CroppingConnectionDocking";
-import { ALL_SUBDOMAIN_SPECS as n, DOCUMENT_VERSION as r, MARK_COLORS as i, MARK_TEXT_COLOR as a, RELATIONSHIP_PATTERN_SPECS as o, SUBDOMAIN_TYPE_SPECS as s, isSymmetricPattern as c, newId as l, validateDocument as u } from "@miragon/context-maps-schema-model";
-import d from "diagram-js/lib/core/ElementFactory";
-import { getMid as f } from "diagram-js/lib/layout/LayoutUtil";
-import p from "diagram-js/lib/draw/BaseRenderer";
-import { append as m, attr as h, clear as g, create as _ } from "tiny-svg";
-import v from "diagram-js/lib/features/selection";
-import y from "diagram-js/lib/navigation/zoomscroll";
-import b from "diagram-js/lib/navigation/movecanvas";
-import x from "diagram-js/lib/features/connection-preview";
+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 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 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 C from "diagram-js/lib/features/move";
-import w from "diagram-js/lib/features/outline";
-import ee from "diagram-js/lib/features/resize";
-import te from "diagram-js/lib/features/rules";
-import ne from "diagram-js/lib/features/rules/RuleProvider";
-import re from "diagram-js/lib/command/CommandInterceptor";
-import { hasPrimaryModifier as ie } from "diagram-js/lib/util/Mouse";
-import ae from "diagram-js/lib/features/palette";
-import oe from "diagram-js/lib/features/create";
-import se from "diagram-js/lib/features/connect";
-import ce from "diagram-js/lib/features/overlays";
+import me from "diagram-js/lib/features/move";
+import he from "diagram-js/lib/features/outline";
+import ge from "diagram-js/lib/features/rules";
+import _e from "diagram-js/lib/features/rules/RuleProvider";
+import ve from "diagram-js/lib/command/CommandInterceptor";
+import { hasPrimaryModifier as ye } from "diagram-js/lib/util/Mouse";
+import be from "diagram-js/lib/features/palette";
+import xe from "diagram-js/lib/features/create";
+import C from "diagram-js/lib/features/connect";
+import Se from "diagram-js/lib/features/lasso-tool";
+import Ce from "diagram-js-direct-editing";
+import we from "diagram-js/lib/features/context-pad";
+import Te from "diagram-js/lib/features/popup-menu";
+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";
 //#region src/model/di-types.ts
-function T(e) {
+function Me(e) {
 	return typeof e == "object" && e ? e.cmKind : void 0;
 }
-function E(e) {
-	return typeof T(e) == "string";
+function w(e) {
+	return typeof Me(e) == "string";
 }
-function D(e) {
-	return T(e) === "context";
+function T(e) {
+	return Me(e) === "context";
 }
-function O(e) {
-	return T(e) === "relationship";
+function E(e) {
+	return Me(e) === "relationship";
 }
 //#endregion
 //#region src/io/saveSvg.ts
-var k = 40;
-function A(e, t) {
-	let n = e.getContainer().querySelector("svg");
+var Ne = 40, Pe = [
+	"tabindex",
+	"role",
+	"aria-label"
+];
+function Fe(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;
 	for (let e of t.getAll()) {
-		if (!D(e)) continue;
+		if (!T(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);
 	}
 	Number.isFinite(r) || (r = 0, i = 0, a = 100, o = 100);
-	let s = r - k, c = i - k, l = a - r + k * 2, u = o - i + k * 2, d = n.cloneNode(!0);
+	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);
 	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 j = "cm-root";
-//#endregion
-//#region src/CmBaseViewer.ts
-function M(e) {
+var D = i, Ie = {
+	top: 84,
+	right: 56,
+	bottom: 56,
+	left: 56
+}, Le = .001;
+function Re(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var N = class {
+var ze = class {
 	_diagram;
 	_container;
 	_options;
@@ -69,14 +83,16 @@ var N = class {
 	}
 	_createContainer(e) {
 		let t = e.container ?? document.createElement("div");
-		return t.classList.add("cm-djs-container"), t.style.width = M(e.width ?? "100%"), t.style.height = M(e.height ?? (e.container ? "100%" : "600px")), t;
+		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;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
 			let t = [...this._getModules(), ...this._options.additionalModules ?? []];
 			this._diagram = new e({
 				canvas: { container: this._container },
-				modules: t
+				modules: t,
+				cmKeyboard: { undoRedoKeys: this._options.undoRedoKeys ?? !0 },
+				cmPalette: { freeRectInsets: this.freeRectInsets }
 			});
 		}
 		return this._diagram;
@@ -84,6 +100,10 @@ var N = class {
 	get(e) {
 		return this._ensureDiagram().get(e);
 	}
+	freeRectInsets = () => this._options.freeRectInsets?.() ?? Ie;
+	_optional(e) {
+		return this._ensureDiagram().get(e, !1);
+	}
 	on(e, t, n = 1e3) {
 		this.get("eventBus").on(e, n, t);
 	}
@@ -92,55 +112,65 @@ var N = class {
 	}
 	importDocument(e) {
 		let t = this._ensureDiagram(), n = t.get("eventBus"), r = t.get("cmImporter");
-		r.clear();
-		let i = r.import(e);
-		return this._fit(), n.fire("import.done", { warnings: i }), { warnings: i };
+		r.assertImportable(e);
+		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 };
+	}
+	importText(e) {
+		let t = re(e);
+		if (!t.ok) throw Error(t.error);
+		return this.importDocument(t.document);
 	}
 	exportDocument() {
 		return this.get("cmExporter").export();
 	}
+	exportText() {
+		return ie(this.exportDocument());
+	}
 	setMeta(e) {
-		let t = this.get("canvas"), n;
-		try {
-			n = t.getRootElement();
-		} catch {
-			return;
-		}
-		if (!n || n.id !== "cm-root") return;
-		let r = n.businessObject ?? { title: "Untitled context map" };
-		n.businessObject = {
-			...r,
-			...e
+		if (e.title === void 0 || this._optional("cmReadOnly")?.isReadOnly()) return;
+		let t = this._documentRoot();
+		if (!t?.businessObject || t.businessObject.title === e.title) return;
+		let n = this._optional("cmModeling");
+		n ? n.setTitle(e.title) : t.businessObject = {
+			...t.businessObject,
+			title: e.title
 		};
 	}
 	getMeta() {
-		try {
-			return this.get("canvas").getRootElement().businessObject;
-		} catch {
-			return;
-		}
+		return this._documentRoot()?.businessObject;
+	}
+	_documentRoot() {
+		return this.get("elementRegistry").get(D);
 	}
 	saveSVG() {
-		return A(this.get("canvas"), this.get("elementRegistry"));
+		return Fe(this.get("canvas"), this.get("elementRegistry"));
 	}
-	_fit(e = 84, t = 56) {
-		let n = this.get("canvas"), r = this.get("elementRegistry"), i = Infinity, a = Infinity, o = -Infinity, s = -Infinity;
-		for (let e of r.getAll()) {
+	_fit() {
+		let e = this.get("canvas"), t = this.get("elementRegistry"), n = Infinity, r = Infinity, i = -Infinity, a = -Infinity;
+		for (let e of t.getAll()) {
 			let t = e;
-			typeof t.x != "number" || typeof t.y != "number" || typeof t.width != "number" || typeof t.height != "number" || (i = Math.min(i, t.x), a = Math.min(a, t.y), o = Math.max(o, t.x + t.width), s = Math.max(s, t.y + t.height));
+			typeof t.x == "number" && typeof t.y == "number" && typeof t.width == "number" && typeof t.height == "number" && (n = Math.min(n, t.x), r = Math.min(r, t.y), i = Math.max(i, t.x + t.width), a = Math.max(a, t.y + t.height));
 		}
-		if (!Number.isFinite(i)) return;
-		let c = this._container.getBoundingClientRect(), l = c.width, u = c.height, d = Math.max(o - i, 1), f = Math.max(s - a, 1);
-		if (!l || !u) {
-			n.zoom("fit-viewport");
+		let { width: o, height: s } = e.getSize();
+		if (!(o > 0 && s > 0)) return;
+		if (!Number.isFinite(n)) {
+			e.viewbox({
+				x: 0,
+				y: 0,
+				width: o,
+				height: s
+			});
 			return;
 		}
-		let p = Math.min((l - 2 * t) / d, (u - e - t) / f, 1.25);
-		n.viewbox({
-			x: i + d / 2 - l / 2 / p,
-			y: a - e / p,
-			width: l / p,
-			height: u / p
+		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);
+		e.viewbox({
+			x: n + d / 2 - (c.left + l / 2) / p,
+			y: r + f / 2 - (c.top + u / 2) / p,
+			width: o / p,
+			height: s / p
 		});
 	}
 	attachTo(e) {
@@ -158,26 +188,38 @@ var N = class {
 	get container() {
 		return this._container;
 	}
-}, P = class {
+};
+//#endregion
+//#region src/model/CmElementFactory.ts
+function Be(e, t) {
+	let n = g(e, t);
+	return Object.keys(n).length > 0 ? { cmForeign: n } : {};
+}
+var Ve = class {
 	elementFactory;
 	static $inject = ["elementFactory"];
 	constructor(e) {
 		this.elementFactory = e;
 	}
 	createContext(e) {
+		let t = (e.subdomainType ? p[e.subdomainType] : void 0)?.minSize ?? {
+			width: 120,
+			height: 72
+		};
 		return this.elementFactory.createShape({
 			id: e.id,
 			x: e.position.x,
 			y: e.position.y,
-			width: e.size.width,
-			height: e.size.height,
+			width: Math.max(e.size.width, t.width),
+			height: Math.max(e.size.height, t.height),
 			cmKind: "context",
 			cmLabel: e.label,
 			...e.subdomainType ? { subdomainType: e.subdomainType } : {},
 			...e.team ? { team: e.team } : {},
 			...e.description ? { description: e.description } : {},
 			...e.fill ? { fill: e.fill } : {},
-			...e.stroke ? { stroke: e.stroke } : {}
+			...e.stroke ? { stroke: e.stroke } : {},
+			...Be(e, r)
 		});
 	}
 	createRelationship(e, t, n, r) {
@@ -192,41 +234,42 @@ var N = class {
 			...e.downstreamRoles?.length ? { downstreamRoles: [...e.downstreamRoles] } : {},
 			...e.label ? { cmLabel: e.label } : {},
 			...e.description ? { description: e.description } : {},
-			...e.implementationTechnology ? { implementationTechnology: e.implementationTechnology } : {}
+			...e.implementationTechnology ? { implementationTechnology: e.implementationTechnology } : {},
+			...Be(e, d)
 		});
 	}
 	createNewContext(e, t) {
-		let n = s[e];
+		let n = (e ? p[e] : void 0)?.defaultSize ?? p.generic.defaultSize;
 		return this.elementFactory.createShape({
-			width: n.defaultSize.width,
-			height: n.defaultSize.height,
+			width: n.width,
+			height: n.height,
 			cmKind: "context",
-			subdomainType: e,
+			...e ? { subdomainType: e } : {},
 			cmLabel: t ?? "New Context"
 		});
 	}
-}, le = class extends d {
+}, He = class extends se {
 	create(e, t) {
 		return !t?.id && (e === "shape" || e === "connection") && (t = {
 			...t,
-			id: l(e === "shape" ? "ctx" : "rel")
+			id: ne(e === "shape" ? "ctx" : "rel")
 		}), super.create(e, t);
 	}
-}, ue = class {
+}, Ue = class {
 	docking;
 	static $inject = ["connectionDocking"];
 	constructor(e) {
 		this.docking = e;
 	}
 	layoutConnection(e, t = {}) {
-		let n = t.source ?? e.source, r = t.target ?? e.target, i = [n ? f(n) : t.connectionStart || void 0, r ? f(r) : t.connectionEnd || void 0].filter(Boolean);
+		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;
 	}
-}, F = {
-	elementFactory: ["type", le],
-	cmElementFactory: ["type", P],
-	connectionDocking: ["type", t]
-}, I = {
+}, We = {
+	elementFactory: ["type", He],
+	cmElementFactory: ["type", Ve],
+	connectionDocking: ["type", oe]
+}, O = {
 	blau: "#335DE5",
 	blauLink: "#2B50D4",
 	blauHell: "#6B8AFF",
@@ -234,40 +277,38 @@ var N = class {
 	grau: "#F9F7F7",
 	schwarz: "#1D1D1D",
 	weiss: "#FFFFFF",
-	success: "#0B7A55",
-	warning: "#92610A",
-	danger: "#C92A2A",
-	info: "#2B50D4",
+	linie: "#E6E2E2",
+	success: "#00E676",
+	warning: "#FFB000",
+	danger: "#CD1839",
+	info: "#335DE5",
 	gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
-}, de = {
-	"--cd-blau": I.blau,
-	"--cd-gruen": I.gruen,
-	"--cd-grau": I.grau,
-	"--cd-schwarz": I.schwarz,
-	"--cd-weiss": I.weiss,
-	"--cd-blau-link": I.blauLink,
-	"--cd-blau-hell": I.blauHell,
-	"--cd-success": I.success,
-	"--cd-success-soft": "rgba(11, 122, 85, 0.12)",
-	"--cd-warning": I.warning,
-	"--cd-warning-soft": "rgba(146, 97, 10, 0.12)",
-	"--cd-danger": I.danger,
-	"--cd-danger-soft": "rgba(201, 42, 42, 0.12)",
-	"--cd-info": I.info,
-	"--cd-info-soft": "rgba(43, 80, 212, 0.12)",
-	"--cd-gradient-brand": I.gradientBrand
-}, fe = 1500;
-I.blau;
-var L = I.schwarz, R = "#5B5B5B", z = {
+}, Ge = {
+	"--cd-blau": O.blau,
+	"--cd-gruen": O.gruen,
+	"--cd-grau": O.grau,
+	"--cd-schwarz": O.schwarz,
+	"--cd-weiss": O.weiss,
+	"--cd-blau-link": O.blauLink,
+	"--cd-blau-hell": O.blauHell,
+	"--cd-linie": O.linie,
+	"--cd-success": O.success,
+	"--cd-warning": O.warning,
+	"--cd-danger": O.danger,
+	"--cd-info": O.info,
+	"--cd-gradient-brand": O.gradientBrand
+}, Ke = 1500;
+O.blau;
+var k = O.schwarz, qe = "#5B5B5B", A = {
 	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13.5,
 	small: 11
-}, B = I.weiss;
+}, j = O.weiss, Je = "#F1F1EE", Ye = "#8A8577";
 //#endregion
 //#region src/draw/endRoleChips.ts
-function V(e, t, n, r) {
+function M(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 = z.small * .64, u = z.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 = A.small * .64, u = A.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
 	};
@@ -287,31 +328,31 @@ function V(e, t, n, r) {
 }
 //#endregion
 //#region src/draw/ContextMapsRenderer.ts
-var pe = "#F1F1EE", H = "#8A8577", U = class extends p {
+var Xe = class extends le {
 	static $inject = ["eventBus"];
 	constructor(e) {
-		super(e, fe);
+		super(e, Ke);
 	}
 	canRender(e) {
-		return E(e);
+		return w(e);
 	}
 	drawShape(e, t) {
-		if (g(e), D(t)) return this.drawContext(e, t);
-		let n = h(_("rect"), {
+		if (ue(e), T(t)) return this.drawContext(e, t);
+		let n = y(b("rect"), {
 			width: t.width,
 			height: t.height,
 			fill: "#eee"
 		});
-		return m(e, n), n;
+		return v(e, n), n;
 	}
 	drawConnection(e, t) {
-		if (g(e), O(t)) return this.drawRelationship(e, t);
-		let n = h(_("polyline"), {
+		if (ue(e), E(t)) return this.drawRelationship(e, t);
+		let n = y(b("polyline"), {
 			points: (t.waypoints ?? []).map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
-			stroke: L
+			stroke: k
 		});
-		return m(e, n), n;
+		return v(e, n), n;
 	}
 	getShapePath(e) {
 		let { x: t, y: n, width: r, height: i } = e;
@@ -322,53 +363,52 @@ var pe = "#F1F1EE", H = "#8A8577", U = class extends p {
 		return t.length === 0 ? "" : t.map((e, t) => `${t === 0 ? "M" : "L"}${e.x},${e.y}`).join("");
 	}
 	drawContext(e, t) {
-		let n = t.subdomainType ? s[t.subdomainType] : void 0, r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = h(_("rect"), {
+		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"), {
 			x: 1,
 			y: 1,
 			width: r - 2,
 			height: i - 2,
 			rx: 8,
 			ry: 8,
-			fill: t.fill ?? n?.fill ?? pe,
-			stroke: t.stroke ?? n?.stroke ?? H,
+			fill: t.fill ?? n?.fill ?? "#F1F1EE",
+			stroke: t.stroke ?? n?.stroke ?? "#8A8577",
 			"stroke-width": 2,
 			"stroke-linejoin": "round"
 		});
-		m(e, a);
-		let o = !!t.team;
-		if (this.appendLabel(e, t.cmLabel ?? "", r, o ? i - 18 : i, { "font-weight": "650" }), t.subdomainType && n) {
-			m(e, _e(t.subdomainType, 15, 15, 18, n.stroke));
-			let r = h(_("text"), {
+		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));
+			let r = y(b("text"), {
 				x: 28,
 				y: 15,
-				"font-family": z.family,
-				"font-size": z.small,
+				"font-family": A.family,
+				"font-size": A.small,
 				"font-weight": "700",
 				fill: n.stroke,
 				"text-anchor": "start",
 				"dominant-baseline": "central",
 				"letter-spacing": "0.03em"
 			});
-			r.textContent = n.label, m(e, r);
+			r.textContent = n.label, v(e, r);
 		}
 		if (t.team) {
-			let n = 19 + t.team.length * z.small * .55, a = r / 2 - n / 2, o = i - 12;
-			m(e, ye(a + 14 / 2, o, 14, R));
-			let s = h(_("text"), {
+			let n = 19 + t.team.length * A.small * .55, a = r / 2 - n / 2, o = i - 12, s = nt(a + 7, o, 14, qe);
+			y(s, { class: "cm-team" }), v(e, s);
+			let c = y(b("text"), {
+				class: "cm-team",
 				x: a + 14 + 5,
 				y: o,
-				"font-family": z.family,
-				"font-size": z.small,
-				fill: R,
+				"font-family": A.family,
+				"font-size": A.small,
+				fill: qe,
 				"text-anchor": "start",
 				"dominant-baseline": "central"
 			});
-			s.textContent = t.team, m(e, s);
+			c.textContent = t.team, v(e, c);
 		}
 		return a;
 	}
 	drawRelationship(e, t) {
-		let n = o[t.pattern] ?? o["upstream-downstream"], r = t.waypoints ?? [], i = n.dash, a = h(_("polyline"), {
+		let n = f[t.pattern] ?? f["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,
@@ -377,11 +417,11 @@ var pe = "#F1F1EE", H = "#8A8577", U = class extends p {
 			"stroke-linecap": "round",
 			...i ? { "stroke-dasharray": i } : {}
 		});
-		if (m(e, a), r.length >= 2) {
+		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, B, n.stroke, n.stroke);
+				this.chip(e, t, r, n.abbreviation, j, n.stroke, n.stroke);
 			} 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);
@@ -389,70 +429,70 @@ var pe = "#F1F1EE", H = "#8A8577", U = class extends p {
 		}
 		return a;
 	}
-	endMarkers(e, t, n, r, a) {
-		let o = n.x - t.x, s = n.y - t.y, c = Math.hypot(o, s) || 1, l = o / c, u = s / c, d = i[r] ?? L, f = h(_("text"), {
-			x: t.x + l * 11,
+	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] ?? k, f = y(b("text"), {
+			x: t.x + c * 11,
 			y: t.y + u * 11,
-			"font-family": z.family,
-			"font-size": z.small + 1,
+			"font-family": A.family,
+			"font-size": A.small + 1,
 			"font-weight": "800",
 			fill: d,
-			stroke: B,
+			stroke: j,
 			"stroke-width": 3,
 			"paint-order": "stroke",
 			"text-anchor": "middle",
 			"dominant-baseline": "central"
 		});
-		f.textContent = r, m(e, f);
-		let p = V(t, n, r, a);
+		f.textContent = r, v(e, f);
+		let p = M(t, n, r, i);
 		if (!p) return;
-		let { box: g, center: v, chipWidths: y, chipHeight: b, innerWidth: x, gap: S } = p, C = v.y;
-		m(e, h(_("rect"), {
-			x: g.x,
-			y: g.y,
-			width: g.width,
-			height: g.height,
+		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,
 			rx: 6,
 			ry: 6,
-			fill: B,
+			fill: j,
 			"fill-opacity": .96,
 			stroke: "#d9d5cc",
 			"stroke-width": 1
-		}));
-		let w = v.x - x / 2;
-		a.forEach((t, n) => {
-			let r = y[n], a = i[t] ?? H;
-			this.miniChip(e, w + r / 2, C, r, b, t, a), w += r + S;
+		});
+		v(e, ie);
+		let ae = h.x - te / 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;
 		});
 	}
-	miniChip(e, t, n, r, i, o, s) {
-		m(e, h(_("rect"), {
+	miniChip(e, t, n, r, i, a, o) {
+		let s = y(b("rect"), {
 			x: t - r / 2,
 			y: n - i / 2,
 			width: r,
 			height: i,
 			rx: 3,
 			ry: 3,
-			fill: s,
-			stroke: me(s),
+			fill: o,
+			stroke: Ze(o),
 			"stroke-width": 1
-		}));
-		let c = h(_("text"), {
+		});
+		v(e, s);
+		let c = y(b("text"), {
 			x: t,
 			y: n,
-			"font-family": z.family,
-			"font-size": z.small,
+			"font-family": A.family,
+			"font-size": A.small,
 			"font-weight": "700",
-			fill: a,
+			fill: u,
 			"text-anchor": "middle",
 			"dominant-baseline": "central"
 		});
-		c.textContent = o, m(e, c);
+		c.textContent = a, v(e, c);
 	}
 	chip(e, t, n, r, i, a, o) {
 		if (!r) return;
-		let s = z.small * .64, c = r.length * s + 12, l = z.small + 8;
-		m(e, h(_("rect"), {
+		let s = A.small * .64, c = r.length * s + 12, l = A.small + 8, u = y(b("rect"), {
 			x: t - c / 2,
 			y: n - l / 2,
 			width: c,
@@ -462,48 +502,51 @@ var pe = "#F1F1EE", H = "#8A8577", U = class extends p {
 			fill: i,
 			stroke: o,
 			"stroke-width": 1,
-			...i === B ? { "fill-opacity": .95 } : {}
-		}));
-		let u = h(_("text"), {
+			...i === j ? { "fill-opacity": .95 } : {}
+		});
+		v(e, u);
+		let d = y(b("text"), {
 			x: t,
 			y: n,
-			"font-family": z.family,
-			"font-size": z.small,
+			"font-family": A.family,
+			"font-size": A.small,
 			"font-weight": "700",
 			fill: a,
 			"text-anchor": "middle",
 			"dominant-baseline": "central"
 		});
-		u.textContent = r, m(e, u);
-	}
-	appendLabel(e, t, n, r, i) {
-		let a = typeof i["font-size"] == "number" ? i["font-size"] : z.label, o = be(t, n - 20, a), s = a * 1.2, c = r / 2 - (o.length - 1) * s / 2;
-		o.forEach((t, r) => {
-			let o = h(_("text"), {
+		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 p = 36 + u / 2;
+		l.forEach((t, r) => {
+			let i = y(b("text"), {
+				class: "cm-name",
 				x: n / 2,
-				y: c + r * s,
-				"font-family": z.family,
-				"font-size": a,
-				fill: L,
+				y: p + r * u,
+				"font-family": A.family,
+				"font-size": o,
+				fill: k,
 				"text-anchor": "middle",
 				"dominant-baseline": "central",
-				...i
+				...a
 			});
-			o.textContent = t, m(e, o);
+			i.textContent = t, v(e, i);
 		});
 	}
 };
-function me(e, t = .7) {
+function Ze(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 he = "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", ge = "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 _e(e, t, n, r, i) {
+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) {
 	if (e === "generic") {
-		let e = _("g");
-		return m(e, h(_("circle"), {
+		let e = b("g"), a = y(b("circle"), {
 			cx: t,
 			cy: n,
 			r: r / 2 - 1,
@@ -511,41 +554,76 @@ function _e(e, t, n, r, i) {
 			stroke: i,
 			"stroke-width": 1.6,
 			"stroke-dasharray": "2.2 2.2"
-		})), e;
+		});
+		return v(e, a), e;
 	}
-	let a = r / 24, o = e === "supporting" ? " rotate(90 12 12)" : "", s = _("g");
-	return h(s, { transform: `translate(${t - 12 * a} ${n - 12 * a}) scale(${a})${o}` }), m(s, h(_("path"), {
-		d: e === "core" ? he : ge,
+	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,
 		fill: i
-	})), s;
+	});
+	return v(s, c), s;
 }
-var ve = "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 ye(e, t, n, r) {
-	let i = n / 24, a = _("g");
-	return h(a, { transform: `translate(${e - 12 * i} ${t - 12 * i}) scale(${i})` }), m(a, h(_("path"), {
-		d: ve,
+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) {
+	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,
 		fill: r
-	})), a;
+	});
+	return v(a, o), a;
+}
+var N;
+function rt(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) {
+	let i = e;
+	for (; i && rt(`${i}…`, n, r) > t;) i = i.slice(0, -1).trimEnd();
+	return `${i}…`;
 }
-function be(e, t, n) {
-	let r = Math.max(4, Math.floor(t / (n * .58))), i = e.split(/\s+/).filter(Boolean);
+function at(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);
+		return i.length ? i : [""];
+	});
+}
+function ot(e, t, n, r) {
+	let i = e.split(/\s+/).filter(Boolean);
 	if (i.length === 0) return [];
-	let a = [], o = "";
+	let a = (e) => rt(e, n, r) <= t, o = [], s = "";
 	for (let e of i) {
-		let t = o ? `${o} ${e}` : e;
-		t.length > r && o ? (a.push(o), o = e) : o = t;
+		let t = s ? `${s} ${e}` : e;
+		if (a(t)) {
+			s = t;
+			continue;
+		}
+		s && o.push(s);
+		let n = e;
+		for (; n && !a(n);) {
+			let e = 1, t = n.length - 1;
+			for (; e < t;) {
+				let r = Math.ceil((e + t) / 2);
+				a(n.slice(0, r)) ? e = r : t = r - 1;
+			}
+			o.push(n.slice(0, e)), n = n.slice(e);
+		}
+		s = n;
 	}
-	return o && a.push(o), a;
+	return s && o.push(s), o;
 }
 //#endregion
 //#region src/draw/index.ts
-var W = {
+var st = {
 	__init__: ["cmRenderer"],
-	cmRenderer: ["type", U]
+	cmRenderer: ["type", Xe]
 };
 //#endregion
 //#region src/io/CmImporter.ts
-function G(e, t) {
+function ct(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,
@@ -557,13 +635,13 @@ function G(e, t) {
 		y: r + a * c
 	};
 }
-function K(e) {
+function lt(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
-var q = class {
+var ut = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -579,59 +657,64 @@ var q = class {
 	constructor(e, t, n, r, i) {
 		this.canvas = e, this.elementFactory = t, this.factory = n, this.eventBus = r, this.elementRegistry = i;
 	}
+	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.`);
+			if (t.has(n)) throw Error(`The id "${n}" is used more than once.`);
+			t.add(n);
+		}
+	}
 	import(e) {
 		let t = [];
 		this.eventBus.fire("import.render.start", { document: e });
-		let n;
-		try {
-			n = this.canvas.getRootElement();
-		} catch {
-			n = void 0;
-		}
-		let r;
-		n && n.id === "cm-root" ? r = n : (r = this.elementFactory.createRoot({ id: j }), this.canvas.setRootElement(r)), r.businessObject = { title: e.title };
-		let i = /* @__PURE__ */ new Map();
+		let n = this.documentRoot(), r = g(e, a), i = [];
+		n.businessObject = {
+			title: e.title,
+			...Object.keys(r).length > 0 ? { foreign: r } : {}
+		};
+		let o = /* @__PURE__ */ new Map();
 		for (let t of e.contexts) {
 			let e = this.factory.createContext(t);
-			i.set(t.id, e);
+			o.set(t.id, e);
 		}
-		for (let n of e.relationships) {
-			let e = i.get(n.from), a = i.get(n.to);
+		for (let r of e.relationships) {
+			let e = o.get(r.from), a = o.get(r.to);
 			if (!e || !a) {
-				t.push({
-					message: `Relationship "${n.id}" references a missing context; skipped.`,
-					elementId: n.id
+				i.push(r), t.push({
+					message: `Relationship "${r.id}" references a missing context; it stays in the file but is not drawn.`,
+					elementId: r.id
 				});
 				continue;
 			}
-			let o = [G(e, K(a)), G(a, K(e))], s = this.factory.createRelationship(n, e, a, o);
-			this.canvas.addConnection(s, r);
+			let s = [ct(e, lt(a)), ct(a, lt(e))], c = this.factory.createRelationship(r, e, a, s);
+			this.canvas.addConnection(c, n);
 		}
-		for (let e of i.values()) this.canvas.addShape(e, r);
-		return this.eventBus.fire("import.render.done", { warnings: t }), t;
+		for (let e of o.values()) this.canvas.addShape(e, n);
+		return i.length > 0 && (n.businessObject.unplacedRelationships = i), this.eventBus.fire("import.render.done", { warnings: t }), t;
+	}
+	documentRoot() {
+		let e = this.elementRegistry.get(D);
+		e || (e = this.elementFactory.createRoot({ id: D }), this.canvas.setRootElement(e));
+		for (let t of this.canvas.getRootElements()) t !== e && this.canvas.removeRootElement(t);
+		return e;
 	}
 	clear() {
-		for (let e of [...this.elementRegistry.getAll()]) if (e.id !== "cm-root") try {
-			"waypoints" in e ? this.canvas.removeConnection(e.id) : this.canvas.removeShape(e.id);
+		let e = new Set(this.canvas.getRootElements());
+		for (let t of [...this.elementRegistry.getAll()]) if (!e.has(t)) try {
+			"waypoints" in t ? this.canvas.removeConnection(t.id) : this.canvas.removeShape(t.id);
 		} catch {}
 	}
-}, J = class {
+}, dt = class {
 	elementRegistry;
-	canvas;
-	static $inject = ["elementRegistry", "canvas"];
-	constructor(e, t) {
-		this.elementRegistry = e, this.canvas = t;
+	static $inject = ["elementRegistry"];
+	constructor(e) {
+		this.elementRegistry = e;
 	}
 	export() {
-		let e;
-		try {
-			e = this.canvas.getRootElement().businessObject;
-		} catch {
-			e = void 0;
-		}
-		let t = [], n = [];
-		for (let e of this.elementRegistry.getAll()) if (e.id !== "cm-root") {
-			if (D(e)) {
+		let e = this.elementRegistry.get(D)?.businessObject, t = [], n = [];
+		for (let e of this.elementRegistry.getAll()) if (e.id !== D) {
+			if (T(e)) {
 				let n = e;
 				t.push({
 					id: e.id,
@@ -648,9 +731,10 @@ var q = class {
 					...e.team ? { team: e.team } : {},
 					...e.description ? { description: e.description } : {},
 					...e.fill ? { fill: e.fill } : {},
-					...e.stroke ? { stroke: e.stroke } : {}
+					...e.stroke ? { stroke: e.stroke } : {},
+					...e.cmForeign
 				});
-			} else if (O(e)) {
+			} else if (E(e)) {
 				let t = e.source, r = e.target;
 				if (!t?.id || !r?.id) continue;
 				n.push({
@@ -662,69 +746,147 @@ var q = class {
 					...e.downstreamRoles?.length ? { downstreamRoles: [...e.downstreamRoles] } : {},
 					...e.cmLabel ? { label: e.cmLabel } : {},
 					...e.description ? { description: e.description } : {},
-					...e.implementationTechnology ? { implementationTechnology: e.implementationTechnology } : {}
+					...e.implementationTechnology ? { implementationTechnology: e.implementationTechnology } : {},
+					...e.cmForeign
 				});
 			}
 		}
-		return {
-			version: r,
+		return n.push(...e?.unplacedRelationships ?? []), {
+			version: o,
 			title: e?.title ?? "Untitled context map",
 			contexts: t,
-			relationships: n
+			relationships: n,
+			...e?.foreign
 		};
 	}
-}, Y = {
-	cmImporter: ["type", q],
-	cmExporter: ["type", J]
-}, X = class extends N {
+}, ft = {
+	cmImporter: ["type", ut],
+	cmExporter: ["type", dt]
+}, pt = class extends ze {
 	_getModules() {
 		return [
-			F,
-			W,
-			Y
+			We,
+			st,
+			ft
 		];
 	}
-}, Z = class extends X {
+}, mt = {
+	x: 14,
+	y: 18
+}, ht = 12;
+function gt(e) {
+	if (T(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 (E(e)) {
+		let t = f[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(" · ")
+		};
+	}
+	return null;
+}
+var _t = class {
+	static $inject = ["eventBus", "canvas"];
+	tooltip;
+	title;
+	body;
+	constructor(e, t) {
+		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`;
+		}, i = () => {
+			this.tooltip.hidden = !0, n.removeEventListener("mousemove", r);
+		};
+		e.on("element.hover", (e) => {
+			let t = gt(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",
+			"drag.init",
+			"canvas.viewbox.changing",
+			"diagram.clear"
+		], i), e.on("diagram.destroy", () => {
+			i(), this.tooltip.remove();
+		});
+	}
+}, vt = {
+	__init__: ["cmHoverTooltip"],
+	cmHoverTooltip: ["type", _t]
+}, P = class extends pt {
 	_getModules() {
 		return [
 			...super._getModules(),
-			v,
-			y,
-			b
+			x,
+			de,
+			fe,
+			vt
 		];
 	}
 };
 //#endregion
 //#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function xe(e, t, n) {
+function yt(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var Se = class {
+var bt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], xe(r, e, n[e]);
+		for (let e of Object.keys(n)) i[e] = r[e], yt(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)) xe(r, e, n[e]);
+		if (n) for (let e of Object.keys(n)) yt(r, e, n[e]);
 		return [t];
 	}
 };
 //#endregion
 //#region src/modeling/cmd/SwapEndsHandler.ts
-function Ce(e) {
+function xt(e) {
 	let t = e.source;
 	return e.source = e.target, e.target = t, Array.isArray(e.waypoints) && (e.waypoints = [...e.waypoints].reverse()), [e];
 }
-var we = class {
+var St = class {
 	execute(e) {
-		return Ce(e.connection);
+		return xt(e.connection);
 	}
 	revert(e) {
-		return Ce(e.connection);
+		return xt(e.connection);
 	}
-}, Te = "element.updateProperties", Ee = "relationship.swapEnds", De = class {
+}, Ct = class {
+	elementRegistry;
+	static $inject = ["elementRegistry"];
+	constructor(e) {
+		this.elementRegistry = e;
+	}
+	root() {
+		let e = this.elementRegistry.get(D);
+		if (!e?.businessObject) throw Error("No context map is loaded to rename.");
+		return e;
+	}
+	execute(e) {
+		let t = this.root(), n = t.businessObject;
+		return e.oldTitle = n.title, t.businessObject = {
+			...n,
+			title: e.title
+		}, [];
+	}
+	revert(e) {
+		let t = this.root();
+		return t.businessObject = {
+			...t.businessObject,
+			title: e.oldTitle ?? ""
+		}, [];
+	}
+}, wt = "element.updateProperties", Tt = "relationship.swapEnds", Et = "map.updateTitle", Dt = class {
 	commandStack;
 	elementRegistry;
 	graphicsFactory;
@@ -734,17 +896,20 @@ var we = class {
 		"graphicsFactory"
 	];
 	constructor(e, t, n) {
-		this.commandStack = e, this.elementRegistry = t, this.graphicsFactory = n, e.registerHandler(Te, Se), e.registerHandler(Ee, we);
+		this.commandStack = e, this.elementRegistry = t, this.graphicsFactory = n, e.registerHandler(wt, bt), e.registerHandler(Tt, St), e.registerHandler(Et, Ct);
+	}
+	setTitle(e) {
+		this.commandStack.execute(Et, { title: e });
 	}
 	redraw(e) {
 		let t = this.elementRegistry.getGraphics(e);
-		t && this.graphicsFactory.update(O(e) ? "connection" : "shape", e, t);
+		t && this.graphicsFactory.update(E(e) ? "connection" : "shape", e, t);
 	}
 	swapEnds(e) {
-		this.commandStack.execute(Ee, { connection: e }), this.redraw(e);
+		this.commandStack.execute(Tt, { connection: e }), this.redraw(e);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(Te, {
+		this.commandStack.execute(wt, {
 			element: e,
 			properties: t
 		}), this.redraw(e);
@@ -769,7 +934,7 @@ var we = class {
 	}
 	setPattern(e, t) {
 		let n = { pattern: t };
-		if (c(t)) n.upstreamRoles = void 0, n.downstreamRoles = void 0;
+		if (te(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;
@@ -785,36 +950,36 @@ var we = class {
 	setImplementationTechnology(e, t) {
 		this.updateProperties(e, { implementationTechnology: t || void 0 });
 	}
-}, Oe = {
+}, F = {
 	__init__: ["cmModeling"],
-	cmModeling: ["type", De],
-	layouter: ["type", ue]
-}, ke = class extends ne {
+	cmModeling: ["type", Dt],
+	layouter: ["type", Ue]
+}, Ot = 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", () => !0), this.addRule("connection.create", (e) => je(e.source, e.target)), this.addRule("connection.reconnect", (e) => !!je(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) => At(e.source, e.target)), this.addRule("connection.reconnect", (e) => !!At(e.source, e.target, e.connection)), this.addRule("connection.updateWaypoints", () => !0);
 	}
 };
-function Ae(e, t, n) {
+function kt(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 je(e, t, n) {
-	return !D(e) || !D(t) || e === t || Ae(e, t, n) ? !1 : {
+function At(e, t, n) {
+	return !T(e) || !T(t) || e === t || kt(e, t, n) ? !1 : {
 		cmKind: "relationship",
 		pattern: "upstream-downstream"
 	};
 }
 //#endregion
 //#region src/rules/index.ts
-var Me = {
-	__depends__: [te],
+var I = {
+	__depends__: [ge],
 	__init__: ["cmRules"],
-	cmRules: ["type", ke]
-}, Ne = class extends re {
+	cmRules: ["type", Ot]
+}, jt = class extends ve {
 	static $inject = [
 		"eventBus",
 		"canvas",
@@ -823,89 +988,367 @@ var Me = {
 	constructor(e, t, n) {
 		super(e), this.preExecute(["shape.create", "elements.create"], (e) => {
 			e.parent = t.getRootElement();
-		}, !0), this.postExecute([
-			"shape.move",
-			"elements.move",
-			"shape.resize"
-		], (e) => {
-			let t = e.shapes ?? (e.shape ? [e.shape] : []), r = /* @__PURE__ */ new Set();
+		}, !0);
+		let r = null;
+		this.preExecute("elements.move", (e) => {
+			r = new Set((e.shapes ?? []).map((e) => e.id));
+		}, !0), this.postExecuted("elements.move", () => {
+			r = null;
+		}, !0), this.postExecute(["shape.move", "shape.resize"], (e) => {
+			let t = e.shapes ?? (e.shape ? [e.shape] : []), i = /* @__PURE__ */ new Set();
 			for (let e of t) {
 				let t = [...e.incoming ?? [], ...e.outgoing ?? []];
-				for (let e of t) r.has(e.id) || (r.add(e.id), n.layoutConnection(e));
+				for (let e of t) {
+					if (i.has(e.id)) continue;
+					i.add(e.id);
+					let t = e.source?.id, a = e.target?.id;
+					t && a && r?.has(t) && r.has(a) || n.layoutConnection(e);
+				}
 			}
 		}, !0);
 	}
-}, Pe = "cm-dragging", Fe = class {
+}, Mt = "cm-dragging", Nt = class {
 	static $inject = ["eventBus", "canvas"];
 	constructor(e, t) {
 		e.on("drag.init", () => {
-			t.getContainer().classList.add(Pe);
+			t.getContainer().classList.add(Mt);
 		}), e.on("drag.cleanup", () => {
-			t.getContainer().classList.remove(Pe);
+			t.getContainer().classList.remove(Mt);
 		});
 	}
-}, Ie = 2e3, Le = {
+}, Pt = 2e3, Ft = {
 	__init__: [
 		"cmFlatModelBehavior",
 		"cmDragBehavior",
 		"cmClickSelectionBehavior"
 	],
-	cmFlatModelBehavior: ["type", Ne],
-	cmDragBehavior: ["type", Fe],
+	cmFlatModelBehavior: ["type", jt],
+	cmDragBehavior: ["type", Nt],
 	cmClickSelectionBehavior: ["type", class {
 		static $inject = ["eventBus", "selection"];
 		constructor(e, t) {
-			e.on("element.click", Ie, (e) => {
+			e.on("element.click", Pt, (e) => {
 				let n = e.element;
-				if (E(n) && !ie(e) && t.isSelected(n)) return !1;
+				if (w(n) && !ye(e) && t.isSelected(n)) return !1;
 			});
 		}
 	}]
+}, L = "cm.readOnly.changed", It = 5e3, Lt = [
+	"elements.move",
+	"shape.move",
+	"shape.resize",
+	"shape.create",
+	"elements.create",
+	"shape.append",
+	"connection.start",
+	"connection.create",
+	"connection.reconnect",
+	"connection.updateWaypoints",
+	"elements.delete"
+], Rt = class extends _e {
+	bus;
+	static $inject = ["eventBus"];
+	readOnly = !1;
+	constructor(e) {
+		super(e), this.bus = e;
+	}
+	init() {
+		this.addRule(Lt, It, () => !this.readOnly && void 0);
+	}
+	isReadOnly() {
+		return this.readOnly;
+	}
+	setReadOnly(e) {
+		this.readOnly !== e && (this.readOnly = e, this.bus.fire(L, { readOnly: e }));
+	}
+}, R = {
+	__depends__: [ge],
+	__init__: ["cmReadOnly"],
+	cmReadOnly: ["type", Rt]
+}, zt = {
+	name: "cm-direct-editing",
+	team: "cm-direct-editing-team"
+}, Bt = 10, Vt = 20, Ht = class {
+	canvas;
+	directEditing;
+	modeling;
+	elementRegistry;
+	readOnly;
+	static $inject = [
+		"eventBus",
+		"canvas",
+		"directEditing",
+		"cmModeling",
+		"elementRegistry",
+		"cmReadOnly"
+	];
+	mode = "name";
+	activeMarker;
+	suspended;
+	resumeTimer;
+	constructor(e, t, n, r, i, a) {
+		this.canvas = t, this.directEditing = n, this.modeling = r, this.elementRegistry = i, this.readOnly = a, n.registerProvider({
+			activate: (e) => this.activationContext(e),
+			update: (e, t) => this.commit(e, t)
+		}), 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) => {
+			let n = e.active?.element;
+			if (!n) return;
+			let r = zt[this.mode];
+			t.addMarker(n, r), this.activeMarker = {
+				element: n,
+				marker: r
+			};
+		}), e.on(["directEditing.complete", "directEditing.cancel"], () => {
+			let e = this.activeMarker;
+			e && t.removeMarker(e.element, e.marker), this.activeMarker = void 0;
+		}), e.on("diagram.destroy", () => {
+			clearTimeout(this.resumeTimer), this.suspended = void 0;
+		}), e.on("directEditing.activate.allowed", 2e3, () => !this.readOnly.isReadOnly() && void 0), e.on(L, (e) => {
+			e.readOnly && n.cancel();
+		});
+	}
+	suspend() {
+		clearTimeout(this.resumeTimer);
+		let e = this.activeMarker?.element;
+		this.directEditing.isActive() && e && (this.suspended = {
+			elementId: e.id,
+			mode: this.mode,
+			text: this.directEditing.getValue()
+		}, this.directEditing.cancel());
+	}
+	resumeAfterImport() {
+		clearTimeout(this.resumeTimer), this.suspended && (this.resumeTimer = setTimeout(() => {
+			let e = this.suspended;
+			this.suspended = void 0, e && !this.directEditing.isActive() && this.resume(e);
+		}, 0));
+	}
+	openEdit() {
+		let e = this.activeMarker?.element;
+		if (this.directEditing.isActive() && e) return {
+			elementId: e.id,
+			text: this.directEditing.getValue()
+		};
+	}
+	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));
+	}
+	activate(e) {
+		this.mode = "name", this.directEditing.activate(e);
+	}
+	activateTeam(e) {
+		this.mode = "team", this.directEditing.activate(e);
+	}
+	cancel() {
+		this.directEditing.cancel();
+	}
+	isInTeamBand(e, t) {
+		if (typeof t?.clientY != "number") return !1;
+		let n = this.canvas.zoom(), r = this.canvas.getAbsoluteBBox(e), i = this.canvas.getContainer().getBoundingClientRect().top;
+		return t.clientY - i >= r.y + r.height - 22 * n;
+	}
+	activationContext(e) {
+		if (!w(e)) return;
+		this.mode === "team" && !T(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 + Bt * t,
+					y: n.y + n.height - 22 * t,
+					width: n.width - 20 * t,
+					height: Vt * t
+				},
+				text: r.team ?? "",
+				style: {
+					fontFamily: A.family,
+					fontSize: `${A.small * t}px`,
+					fontWeight: 400,
+					lineHeight: 1.2,
+					backgroundColor: "transparent",
+					border: "1px dashed var(--cd-ui-interaktion)",
+					textAlign: "center"
+				},
+				options: { centerVertically: !0 }
+			};
+		}
+		let r = {
+			fontFamily: A.family,
+			fontSize: `${A.label * t}px`,
+			fontWeight: 650,
+			lineHeight: 1.2,
+			backgroundColor: "transparent",
+			border: "1px dashed var(--cd-ui-interaktion)",
+			textAlign: "center"
+		};
+		if (T(e)) {
+			let i = e.team ? 18 * t : 0;
+			return {
+				bounds: {
+					x: n.x + Bt * t,
+					y: n.y + 36 * t - 1,
+					width: n.width - 20 * t,
+					height: n.height - 36 * t - i
+				},
+				text: e.cmLabel ?? "",
+				style: r
+			};
+		}
+		let i = 160 * t, a = 44 * t;
+		return {
+			bounds: {
+				x: n.x + n.width / 2 - i / 2,
+				y: n.y + n.height / 2 - a / 2,
+				width: i,
+				height: a
+			},
+			text: e.cmLabel ?? "",
+			style: {
+				...r,
+				backgroundColor: "var(--cd-ui-flaeche-hoch)"
+			},
+			options: { centerVertically: !0 }
+		};
+	}
+	commit(e, t) {
+		let n = t.trim();
+		if (this.mode === "team") {
+			let t = e;
+			if (n === (t.team ?? "")) return;
+			this.modeling.setTeam(t, n || void 0);
+		} else n !== (e.cmLabel ?? "") && this.modeling.updateLabel(e, n);
+	}
+};
+function Ut(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
+var z = {
+	__depends__: [
+		Ce,
+		F,
+		R
+	],
+	__init__: ["cmLabelEditing"],
+	cmLabelEditing: ["type", Ht]
 };
 //#endregion
 //#region src/draw/palette-icons.ts
-function Re(e) {
-	return `<svg class="cm-palette-svg" width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
+function Wt(e, t = 24) {
+	return `<svg class="cm-palette-svg" width="${t}" height="${t}" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
 }
-var ze = "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", Be = "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 Ve(e, t, n, r, i) {
+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";
+function qt(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" ? ze : Be}" fill="${i}" transform="${s}"/>`;
+	return `<path d="${e === "core" ? Gt : Kt}" fill="${i}" transform="${s}"/>`;
 }
-function He(e) {
-	let t = s[e];
-	return Re(`<rect x="2" y="4" width="22" height="18" rx="3.5" fill="${t.fill}" stroke="${t.stroke}" stroke-width="1.5"/>` + Ve(e, 13, 13, 12, t.stroke));
+function B(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));
 }
-function Ue(e = "upstream-downstream") {
-	let t = o[e], n = t.dash ? ` stroke-dasharray="${t.dash}"` : "", r = Math.min(t.strokeWidth, 2.6);
-	return Re(`<g stroke="${t.stroke}" stroke-width="${r}" stroke-linecap="round"><circle cx="5" cy="13" r="2.5" fill="${t.stroke}" stroke="none"/><line x1="7" y1="13" x2="19" y2="13"${n}/><circle cx="21" cy="13" r="2.5" fill="${t.stroke}" stroke="none"/></g>`);
+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 = "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);
+}
+//#endregion
+//#region src/draw/lucide.ts
+var Yt = {
+	"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 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) {
+	return Xt(e, 16, 2.5);
+}
+function Zt(e) {
+	return Xt(e, 20, 2);
 }
 //#endregion
 //#region src/palette/CmPaletteProvider.ts
-var We = "cm-1-contexts";
-function Ge(e, t) {
-	return `<div class="entry cm-palette-entry" draggable="true" title="${t}">${e}</div>`;
+var Qt = "tools", $t = "cm-1-contexts", en = 24;
+function tn(e, t) {
+	return `<div class="entry cm-palette-entry"${t ? " draggable=\"true\"" : ""}>${e}</div>`;
+}
+function nn(e) {
+	return e.charAt(0) + e.slice(1).toLowerCase();
 }
-var Ke = class {
+function rn(e) {
+	return e.type === "click" && e.detail === 0;
+}
+var an = class {
 	create;
+	lassoTool;
 	factory;
+	canvas;
+	modeling;
+	selection;
+	elementRegistry;
+	labelEditing;
+	readOnly;
+	config;
 	static $inject = [
 		"palette",
 		"create",
-		"cmElementFactory"
+		"lassoTool",
+		"cmElementFactory",
+		"canvas",
+		"modeling",
+		"selection",
+		"elementRegistry",
+		"cmLabelEditing",
+		"cmReadOnly",
+		"config.cmPalette"
 	];
-	constructor(e, t, n) {
-		this.create = t, this.factory = n, e.registerProvider(this);
+	constructor(e, t, n, r, i, a, o, s, c, l, u) {
+		this.create = t, this.lassoTool = n, this.factory = r, this.canvas = i, this.modeling = a, this.selection = o, this.elementRegistry = s, this.labelEditing = c, this.readOnly = l, this.config = u, e.registerProvider(this);
 	}
 	getPaletteEntries() {
 		let e = {};
+		e["lasso-tool"] = {
+			group: Qt,
+			title: "Lasso",
+			html: tn(Zt("square-dashed-mouse-pointer"), !1),
+			action: { click: (e) => this.lassoTool.activateSelection(e) }
+		};
 		for (let t of n) {
-			let n = (e) => this.create.start(e, this.factory.createNewContext(t.type, t.label));
+			let n = (e) => {
+				let n = this.factory.createNewContext(t.type, t.label);
+				rn(e) ? this.placeInFreeRect(n) : this.create.start(e, n);
+			};
 			e[`context.${t.type}`] = {
-				group: We,
-				title: `${t.label} — ${t.description}`,
-				html: Ge(He(t.type), `${t.label} — ${t.description}`),
+				group: $t,
+				title: nn(t.label),
+				html: tn(B(t.type), !0),
 				action: {
 					dragstart: n,
 					click: n
@@ -914,215 +1357,461 @@ var Ke = class {
 		}
 		return e;
 	}
-}, qe = {
+	placeInFreeRect(e) {
+		if (this.readOnly.isReadOnly()) return;
+		let t = this.freeRectCentre(), n = (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);
+	}
+	freeRectCentre() {
+		let e = this.canvas.viewbox(), t = this.config?.freeRectInsets?.() ?? {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		}, n = Math.max(0, e.outer.width - t.left - t.right), r = Math.max(0, e.outer.height - t.top - t.bottom);
+		return {
+			x: e.x + (t.left + n / 2) / e.scale,
+			y: e.y + (t.top + r / 2) / e.scale
+		};
+	}
+}, on = {
 	__depends__: [
-		ae,
-		oe,
-		se
+		be,
+		xe,
+		C,
+		Se,
+		S,
+		x,
+		z,
+		R
 	],
 	__init__: ["cmPaletteProvider"],
-	cmPaletteProvider: ["type", Ke]
-}, Je = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z";
-function Ye(e, t = 18) {
-	return `<svg width="${t}" height="${t}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${e}"/></svg>`;
+	cmPaletteProvider: ["type", an]
+}, sn = "cm-subdomain-menu", cn = "cm-pattern-menu", W = "cm-roles-menu", G = "cm-popup-active", K = 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;");
 }
-//#endregion
-//#region src/connect-handles/CmConnectHandles.ts
-var Xe = "cm-connect-handle", Ze = 28, Qe = 12, $e = [
-	{
-		side: "top",
-		rotationDeg: -90
-	},
-	{
-		side: "right",
-		rotationDeg: 0
-	},
-	{
-		side: "bottom",
-		rotationDeg: 90
-	},
-	{
-		side: "left",
-		rotationDeg: 180
-	}
-];
-function et(e, t) {
-	let n = t.width / 2 - Ze / 2, r = t.height / 2 - Ze / 2;
-	switch (e) {
-		case "top": return {
-			top: -40,
-			left: n
-		};
-		case "bottom": return {
-			top: t.height + Qe,
-			left: n
-		};
-		case "left": return {
-			top: r,
-			left: -40
-		};
-		case "right": return {
-			top: r,
-			left: t.width + Qe
-		};
-	}
+function q(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 tt = class {
+var dn = class {
+	contextPad;
+	popupMenu;
 	eventBus;
-	selection;
-	overlays;
+	create;
+	autoPlace;
+	rules;
 	dragging;
+	modeling;
+	cmModeling;
+	labelEditing;
+	elementFactory;
+	selection;
+	canvas;
+	scheduler;
+	readOnly;
 	static $inject = [
+		"contextPad",
+		"popupMenu",
 		"eventBus",
-		"selection",
-		"overlays",
 		"connect",
-		"dragging"
+		"create",
+		"autoPlace",
+		"rules",
+		"dragging",
+		"modeling",
+		"cmModeling",
+		"cmLabelEditing",
+		"cmElementFactory",
+		"selection",
+		"canvas",
+		"scheduler",
+		"cmReadOnly"
 	];
-	constructor(e, t, n, r, i) {
-		this.eventBus = e, this.selection = t, this.overlays = n, this.dragging = i;
-		let a = () => this.refresh();
-		e.on("selection.changed", a), e.on("commandStack.changed", a);
+	currentMenu;
+	constructor(e, t, n, r, i, a, o, s, c, l, u, d, f, p, m, h) {
+		this.contextPad = e, this.popupMenu = t, this.eventBus = n, this.create = i, this.autoPlace = a, this.rules = o, this.dragging = s, this.modeling = c, this.cmModeling = l, this.labelEditing = u, this.elementFactory = d, this.selection = f, this.canvas = p, this.scheduler = m, this.readOnly = h, e.registerProvider(this), n.on("contextPad.open.allowed", 2e3, () => !this.readOnly.isReadOnly() && void 0), n.on(L, (n) => {
+			if (n.readOnly) {
+				this.cancelPrompt(), t.close(), e.close();
+				return;
+			}
+			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) => {
+			let { source: t, shape: n } = e, r = {
+				x: ce(t).right + De + n.width / 2,
+				y: _(t).y
+			};
+			return Oe(t, n, r, ke({ y: {
+				margin: 30,
+				minDistance: 30
+			} }));
+		}), n.on("contextPad.create", (e) => {
+			let { pad: t, target: n } = e;
+			if (!t) return;
+			let r = !1, i = !1;
+			if (E(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;
+					r = Math.abs(e) >= Math.abs(n) && e > 0, i = Math.abs(n) > Math.abs(e) && n > 0;
+				}
+			}
+			t.classList.toggle("cm-pad-flip-x", r), t.classList.toggle("cm-pad-flip-y", i);
+		}), n.on([
+			"contextPad.open",
+			"contextPad.show",
+			"canvas.viewbox.changed"
+		], 250, () => this.clampPadIntoView());
+	}
+	clampPadIntoView() {
+		this.scheduler.schedule(() => {
+			let e = this.canvas.getContainer(), t = e.querySelector(".djs-context-pad.open");
+			if (!t) return;
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = r.right - (n.right - 4);
+			i > 0 && (t.style.left = `${parseFloat(t.style.left || "0") - i}px`);
+			let a = n.left + 4 - r.left;
+			a > 0 && (t.style.left = `${parseFloat(t.style.left || "0") + a}px`);
+			let o = 0, s = r.bottom - (n.bottom - 4);
+			s > 0 && (o = -s);
+			let c = n.top + 4 - (r.top + o);
+			c > 0 && (o += c), o !== 0 && (t.style.top = `${parseFloat(t.style.top || "0") + o}px`);
+		}, "cmContextPad#clampIntoView");
+	}
+	getContextPadEntries(e) {
+		return this.readOnly.isReadOnly() ? {} : T(e) ? this.contextEntries(e) : E(e) ? this.relationshipEntries(e) : {};
+	}
+	getMultiElementContextPadEntries(e) {
+		if (this.readOnly.isReadOnly()) return {};
+		let t = e.filter(w);
+		return t.length === e.length ? { delete: this.deleteEntry(t, "Delete selection") } : {};
+	}
+	contextEntries(e) {
+		let t = e.subdomainType ? p[e.subdomainType] : void 0;
+		return {
+			"append-context": {
+				group: "edit",
+				html: q(U("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)
+				}
+			},
+			connect: {
+				group: "edit",
+				html: q(U("arrow-right"), "Connect to another context", { draggable: !0 }),
+				action: {
+					click: (t) => this.startConnect(t, e, !0),
+					dragstart: (t) => this.startConnect(t, e, !1)
+				}
+			},
+			"subdomain-type": {
+				group: "edit",
+				html: q(B(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"}`),
+				action: { click: () => this.labelEditing.activateTeam(e) }
+			},
+			"edit-label": this.editLabelEntry(e, "Rename context"),
+			description: this.descriptionEntry(e, "Purpose, ubiquitous language, notes…"),
+			delete: this.deleteEntry([e], "Delete context")
+		};
 	}
-	refresh() {
-		this.overlays.remove({ type: Xe });
-		let e = this.selection.get();
-		if (e.length !== 1) return;
-		let t = e[0];
-		if (!D(t)) return;
-		let n = t;
-		for (let { side: e, rotationDeg: r } of $e) {
-			let i = document.createElement("div");
-			i.className = "cm-connect-handle", i.dataset.side = e, i.title = "Connect to another context", i.innerHTML = `<span style="display:flex;transform:rotate(${r}deg)">${Ye(Je)}</span>`, i.addEventListener("mousedown", (e) => {
-				e.button === 0 && (e.preventDefault(), e.stopPropagation(), this.dragging.init(e, "connect", {
-					autoActivate: !1,
-					trapClick: !1,
-					data: {
-						shape: t,
-						context: {
-							start: t,
-							connectionStart: f(t)
-						}
-					}
-				}), this.eventBus.once("connect.cleanup", 250, () => {
-					this.selection.get().length === 0 && this.selection.select(t);
-				}));
-			}), this.overlays.add(t, Xe, {
-				position: et(e, n),
-				html: i
+	startConnect(e, t, n) {
+		if (this.dragging.init(e, "connect", {
+			autoActivate: n,
+			trapClick: !1,
+			data: {
+				shape: t,
+				context: {
+					start: t,
+					connectionStart: _(t)
+				}
+			}
+		}), n) {
+			let e = () => !1;
+			this.eventBus.once("connect.cleanup", 250, () => {
+				this.eventBus.once("element.click", 1e4, e);
+				let t = () => this.eventBus.off("element.click", e);
+				document.addEventListener("mouseup", () => setTimeout(t, 0), {
+					capture: !0,
+					once: !0
+				}), setTimeout(t, 400);
 			});
 		}
+		this.eventBus.once("connect.cleanup", 250, () => {
+			this.selection.get().length === 0 && this.selection.select(t);
+		});
 	}
-}, nt = {
-	__depends__: [
-		se,
-		ce,
-		v
-	],
-	__init__: ["cmConnectHandles"],
-	cmConnectHandles: ["type", tt]
-}, rt = class {
-	canvas;
-	modeling;
-	static $inject = [
-		"eventBus",
-		"canvas",
-		"cmModeling"
-	];
-	active = null;
-	constructor(e, t, n) {
-		this.canvas = t, this.modeling = n, e.on("element.dblclick", (e) => {
-			E(e.element) && this.activate(e.element);
-		}), e.on([
-			"element.mousedown",
-			"drag.init",
-			"canvas.viewbox.changing"
-		], () => this.active?.commit());
+	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);
+	}
+	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 });
+	}
+	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, sn, "Subdomain type");
+		}, "cmContextPad#openTypeMenu");
+	}
+	relationshipEntries(e) {
+		let t = f[e.pattern], n = { pattern: {
+			group: "edit",
+			html: q(H(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") }
+		}, n["swap-ends"] = {
+			group: "edit",
+			html: q(U("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`),
+			action: { click: () => this.labelEditing.activate(e) }
+		};
 	}
-	activate(e) {
-		this.active?.commit();
-		let t = this.canvas.getContainer(), n = this.canvas.zoom(), r = this.canvas.viewbox(), { x: i, y: a } = it(e), o = (i - r.x) * n - 170 / 2, s = (a - r.y) * n - 14, c = document.createElement("input");
-		c.type = "text", c.className = "cm-label-input", c.value = e.cmLabel ?? "", c.style.position = "absolute", c.style.left = `${o}px`, c.style.top = `${s}px`, c.style.width = "170px", t.appendChild(c), c.focus(), c.select();
-		let l = !1, u = () => {
-			l || (l = !0, c.removeEventListener("keydown", f), c.removeEventListener("blur", p), c.remove(), this.active = null);
-		}, d = () => {
-			if (l) return;
-			let t = c.value.trim(), n = t !== (e.cmLabel ?? "");
-			u(), n && this.modeling.updateLabel(e, t);
-		}, f = (e) => {
-			e.key === "Enter" ? (e.preventDefault(), d()) : e.key === "Escape" && (e.preventDefault(), u());
-		}, p = () => d();
-		c.addEventListener("keydown", f), c.addEventListener("blur", p), this.active = {
-			commit: d,
-			cleanup: u
+	descriptionEntry(e, t) {
+		return {
+			group: "edit",
+			html: q(U("text-align-start"), "Edit description"),
+			action: { click: (n) => this.openPrompt(n, {
+				value: e.description ?? "",
+				placeholder: t,
+				label: "Description",
+				multiline: !0,
+				onCommit: (t) => this.cmModeling.setDescription(e, t || void 0)
+			}) }
 		};
 	}
-	cancel() {
-		this.active?.cleanup();
+	activePrompt;
+	cancelPrompt() {
+		this.activePrompt?.cancel();
+	}
+	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 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;
+			let e = i.value.trim(), n = e !== t.value.trim();
+			c(), 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 };
 	}
-};
-function it(e) {
-	if (O(e)) {
-		let t = e.waypoints ?? [];
-		if (t.length >= 2) {
-			let e = t[0], n = t[t.length - 1];
-			return {
-				x: (e.x + n.x) / 2,
-				y: (e.y + n.y) / 2
+	deleteEntry(e, t) {
+		return {
+			group: "delete",
+			html: q(U("trash"), t, { danger: !0 }),
+			action: { click: () => this.modeling.removeElements(e) }
+		};
+	}
+	openMenu(e, t, n, r) {
+		let i = e.delegateTarget ?? e.target;
+		this.openMenuBeside(i.getBoundingClientRect(), t, n, r);
+	}
+	openMenuBeside(e, t, n, r) {
+		let i = {
+			x: e.right + K,
+			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 = {
+			element: t,
+			menuId: n,
+			title: r,
+			position: i
+		};
+	}
+	reopenMenu(e, t) {
+		let n = this.currentMenu;
+		n && n.menuId === t && n.element === e && this.popupMenu.open(e, t, n.position, { title: n.title });
+	}
+	subdomainMenuEntries(e) {
+		if (!T(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: G } : {},
+			action: () => {
+				i.type !== t && this.cmModeling.setSubdomainType(e, i.type);
+			}
+		};
+		return r["type-none"] = {
+			label: "Unclassified",
+			description: "No subdomain classification.",
+			imageHtml: B(),
+			...t === void 0 ? { className: G } : {},
+			action: () => {
+				t !== void 0 && this.cmModeling.setSubdomainType(e, void 0);
+			}
+		}, r;
+	}
+	patternMenuEntries(e) {
+		if (!E(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: G } : {},
+			action: () => {
+				i.pattern !== n && this.cmModeling.setPattern(e, i.pattern);
+			}
+		};
+		return r;
+	}
+	rolesMenuEntries(e) {
+		if (!E(e)) return {};
+		let t = f[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 ? 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),
+				group: {
+					id: "upstream",
+					name: "Upstream (from) — OHS and/or PL"
+				},
+				...s ? { disabled: !0 } : {},
+				...i ? { className: G } : {},
+				action: () => {
+					s || (this.cmModeling.setUpstreamRoles(e, i ? r.filter((e) => e !== t) : [...r, t]), this.reopenMenu(e, W));
+				}
 			};
 		}
-		return t.length === 1 ? {
-			x: t[0].x,
-			y: t[0].y
-		} : {
-			x: 0,
-			y: 0
-		};
+		for (let t of s) {
+			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),
+				group: {
+					id: "downstream",
+					name: "Downstream (to) — ACL or CF, not both"
+				},
+				...s ? { disabled: !0 } : {},
+				...r ? { className: G } : {},
+				action: () => {
+					s || (this.cmModeling.setDownstreamRoles(e, r ? [] : [t]), this.reopenMenu(e, W));
+				}
+			};
+		}
+		return a;
 	}
-	let t = e;
-	return {
-		x: t.x + t.width / 2,
-		y: t.y + t.height / 2
-	};
-}
-//#endregion
-//#region src/label-editing/index.ts
-var at = {
-	__init__: ["cmLabelEditing"],
-	cmLabelEditing: ["type", rt]
+}, fn = {
+	__depends__: [
+		we,
+		Te,
+		C,
+		xe,
+		Ee,
+		x,
+		S,
+		F,
+		I,
+		z,
+		R
+	],
+	__init__: ["cmContextPadProvider"],
+	cmContextPadProvider: ["type", dn]
 };
 //#endregion
 //#region src/keyboard/CmKeyboard.ts
-function ot(e) {
+function pn(e) {
 	let t = e;
 	return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
 }
-var st = class {
+function mn(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 {
 	static $inject = [
+		"config.cmKeyboard",
 		"canvas",
 		"commandStack",
 		"selection",
-		"modeling"
+		"modeling",
+		"elementRegistry",
+		"eventBus",
+		"cmReadOnly"
 	];
-	constructor(e, t, n, r) {
-		(e.getContainer().ownerDocument ?? document).addEventListener("keydown", (e) => {
-			if (ot(e.target)) return;
-			let i = e.ctrlKey || e.metaKey, a = e.key.toLowerCase();
-			if (i && a === "z" && !e.shiftKey) e.preventDefault(), t.canUndo() && t.undo();
-			else if (i && a === "z" && e.shiftKey || i && a === "y") e.preventDefault(), t.canRedo() && t.redo();
-			else if (a === "delete" || a === "backspace") {
-				let t = n.get();
-				t.length && (e.preventDefault(), r.removeElements([...t]));
+	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;
+			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)));
+				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();
+			} 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));
 	}
-}, ct = {
+}, gn = {
+	__depends__: [R],
 	__init__: ["cmKeyboard"],
-	cmKeyboard: ["type", st]
-}, lt = "cm-validation", Q = 20, $ = 16, ut = 44, dt = "#d97706", ft = "#dc2626";
-function pt(e) {
-	let t = e.some((e) => e.kind === "error") ? ft : dt, n = document.createElement("div");
-	n.className = "cm-validation-marker", n.innerHTML = `<svg width="${Q}" height="${Q}" viewBox="0 0 24 24"><path d="M12 2.5 23 21.5H1Z" fill="${t}" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/><text x="12" y="18.5" text-anchor="middle" font-size="12" font-weight="800" fill="#fff" font-family="system-ui, sans-serif">!</text></svg>`;
+	cmKeyboard: ["type", hn]
+}, _n = "cm-validation", vn = 22, J = 16, yn = 44;
+function bn(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");
 	let r = document.createElement("div");
 	r.className = "cm-validation-tooltip";
 	for (let t of e) {
@@ -1131,13 +1820,13 @@ function pt(e) {
 	}
 	return n.appendChild(r), n;
 }
-function mt(e, t, n) {
+function xn(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: (r.y + i.y) / 2 + c * $
+		x: (r.x + i.x) / 2 + -l * J,
+		y: (r.y + i.y) / 2 + c * J
 	};
-	let u = e.pattern === "customer-supplier", d = n === "upstream" ? V(r, i, u ? "S" : "U", e.upstreamRoles ?? []) : V(i, r, u ? "C" : "D", e.downstreamRoles ?? []);
+	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) {
 		let e = {
 			x: d.box.x + d.box.width,
@@ -1148,16 +1837,16 @@ function mt(e, t, n) {
 			y: e.y + 1
 		};
 	}
-	let f = Math.min(ut, 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(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;
 	return {
-		x: p + -l * $,
-		y: m + c * $
+		x: p + -l * J,
+		y: m + c * J
 	};
 }
 //#endregion
 //#region src/validation/index.ts
-var ht = {
-	__depends__: [ce],
+var Sn = {
+	__depends__: [Ae],
 	__init__: ["cmValidationMarkers"],
 	cmValidationMarkers: ["type", class {
 		elementRegistry;
@@ -1175,8 +1864,8 @@ var ht = {
 			e.on("import.render.done", i), e.on("commandStack.changed", i);
 		}
 		refresh() {
-			this.overlays.remove({ type: lt });
-			let e = u(this.exporter.export()), t = /* @__PURE__ */ new Map(), n = (e, n) => {
+			this.overlays.remove({ type: _n });
+			let e = ae(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) ?? {
@@ -1192,16 +1881,16 @@ var ht = {
 			n(e.errors, "error"), n(e.warnings, "warning");
 			for (let [e, n] of t) {
 				let t = this.elementRegistry.get(n.relationshipId);
-				if (!O(t)) continue;
+				if (!E(t)) continue;
 				let r = t.waypoints ?? [];
 				if (r.length < 2) continue;
-				let i = e.split(" ")[1], { x: a, y: o } = mt(t, r, i), s = Math.min(...r.map((e) => e.x)), c = Math.min(...r.map((e) => e.y));
-				this.overlays.add(t, lt, {
+				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, {
 					position: {
-						left: a - s - Q / 2,
-						top: o - c - Q / 2
+						left: a - s - vn / 2,
+						top: o - c - vn / 2
 					},
-					html: pt(n.findings)
+					html: bn(n.findings)
 				});
 			}
 		}
@@ -1209,10 +1898,10 @@ var ht = {
 };
 //#endregion
 //#region src/zorder/CmZOrder.ts
-function gt(e) {
-	return +!O(e);
+function Cn(e) {
+	return +!E(e);
 }
-var _t = class {
+var wn = class {
 	canvas;
 	elementRegistry;
 	static $inject = [
@@ -1231,33 +1920,33 @@ var _t = class {
 		});
 	}
 	reorder() {
-		let e = this.elementRegistry.getAll().filter(E).sort((e, t) => gt(e) - gt(t));
+		let e = this.elementRegistry.getAll().filter(w).sort((e, t) => Cn(e) - Cn(t));
 		for (let t of e) {
 			let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
 			e && n && n.appendChild(e);
 		}
 	}
-}, vt = {
+}, Tn = {
 	__init__: ["cmZOrder"],
-	cmZOrder: ["type", _t]
-}, yt = class extends Z {
+	cmZOrder: ["type", wn]
+}, En = class extends P {
 	_getModules() {
 		return [
 			...super._getModules(),
-			x,
+			pe,
 			S,
-			C,
-			w,
-			ee,
-			Oe,
-			Me,
-			Le,
-			qe,
-			nt,
-			at,
-			ct,
-			ht,
-			vt
+			me,
+			he,
+			R,
+			F,
+			I,
+			Ft,
+			on,
+			fn,
+			z,
+			gn,
+			Sn,
+			Tn
 		];
 	}
 	undo() {
@@ -1272,8 +1961,618 @@ var _t = 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
+	}), !0);
+}
+function kn(e = {}) {
+	return jn(new P({
+		...An(e),
+		freeRectInsets: e.freeRectInsets
+	}), !1);
+}
+function An(e) {
+	return {
+		width: "100%",
+		height: "100%",
+		additionalModules: e.additionalModules ?? []
+	};
+}
+function jn(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,
+		apiVersion: je,
+		editable: t
+	};
+	return t && n.on("commandStack.changed", () => {
+		for (let e of [...o]) e();
+	}), {
+		meta: l,
+		elements: {
+			list: () => s ? [] : i.getAll().filter(w).map(Nn),
+			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()),
+			onSelection(e) {
+				let t = (t) => e(Mn(t.newSelection ?? []));
+				return n.on("selection.changed", t), () => n.off("selection.changed", t);
+			}
+		},
+		diagram: e,
+		attachTo(t) {
+			e.attachTo(t);
+		},
+		async importText(t) {
+			if (s) throw Error("The modeler was destroyed.");
+			let { warnings: n } = e.importText(t);
+			return { warnings: n.map((e) => e.message) };
+		},
+		exportText() {
+			return s ? c : e.exportText();
+		},
+		onContentChanged(e) {
+			return t ? (o.add(e), () => o.delete(e)) : () => void 0;
+		},
+		getViewState() {
+			if (!s) try {
+				let { x: e, y: t, width: n, height: i } = r.viewbox(), a = {
+					x: e,
+					y: t,
+					width: n,
+					height: i
+				};
+				return Pn(a) ? a : void 0;
+			} catch {
+				return;
+			}
+		},
+		setViewState(e) {
+			!s && Pn(e) && r.viewbox({
+				x: e.x,
+				y: e.y,
+				width: e.width,
+				height: e.height
+			});
+		},
+		destroy() {
+			if (!s) {
+				try {
+					c = e.exportText();
+				} catch {
+					c = "";
+				}
+				s = !0, o.clear(), e.destroy();
+			}
+		}
+	};
+}
+function Mn(e) {
+	return e.filter(w).map((e) => e.id);
+}
+function Nn(e) {
+	return e.cmLabel ? {
+		id: e.id,
+		name: e.cmLabel
+	} : { id: e.id };
+}
+function Pn(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;
+}
+function Y(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 = [
+	{
+		side: "top",
+		rotationDeg: -90
+	},
+	{
+		side: "right",
+		rotationDeg: 0
+	},
+	{
+		side: "bottom",
+		rotationDeg: 90
+	},
+	{
+		side: "left",
+		rotationDeg: 180
+	}
+];
+function zn(e, t) {
+	let n = t.width / 2 - In / 2, r = t.height / 2 - In / 2;
+	switch (e) {
+		case "top": return {
+			top: -40,
+			left: n
+		};
+		case "bottom": return {
+			top: t.height + Ln,
+			left: n
+		};
+		case "left": return {
+			top: r,
+			left: -40
+		};
+		case "right": return {
+			top: r,
+			left: t.width + Ln
+		};
+	}
+}
+var Bn = class {
+	eventBus;
+	selection;
+	overlays;
+	dragging;
+	readOnly;
+	static $inject = [
+		"eventBus",
+		"selection",
+		"overlays",
+		"connect",
+		"dragging",
+		"cmReadOnly"
+	];
+	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(L, o);
+	}
+	refresh() {
+		if (this.overlays.remove({ type: Fn }), 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) {
+			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) => {
+				e.button === 0 && (e.preventDefault(), e.stopPropagation(), this.dragging.init(e, "connect", {
+					autoActivate: !1,
+					trapClick: !1,
+					data: {
+						shape: t,
+						context: {
+							start: t,
+							connectionStart: _(t)
+						}
+					}
+				}), this.eventBus.once("connect.cleanup", 250, () => {
+					this.selection.get().length === 0 && this.selection.select(t);
+				}));
+			}), this.overlays.add(t, Fn, {
+				position: zn(e, n),
+				html: i
+			});
+		}
+	}
+}, Vn = {
+	__depends__: [
+		C,
+		Ae,
+		x,
+		R
+	],
+	__init__: ["cmConnectHandles"],
+	cmConnectHandles: ["type", Bn]
+}, Hn = [
+	{
+		token: "OHS",
+		...h.OHS
+	},
+	{
+		token: "PL",
+		...h.PL
+	},
+	{
+		token: "ACL",
+		...c.ACL
+	},
+	{
+		token: "CF",
+		...c.CF
+	}
+];
+function X() {
+	return [
+		{
+			label: "Subdomain types",
+			rows: n.map((e) => ({
+				preview: B(e.type),
+				label: e.label,
+				explanation: e.description
+			}))
+		},
+		{
+			label: "Integration roles",
+			rows: Hn.map((e) => ({
+				preview: V(e.token),
+				label: `${e.token} · ${e.label}`,
+				explanation: e.description
+			}))
+		},
+		{
+			label: "Relationship patterns",
+			rows: t.map((e) => ({
+				preview: H(e.pattern),
+				label: `${e.abbreviation} · ${e.label}`,
+				explanation: e.description
+			}))
+		}
+	];
+}
+function Un(e, t = {}) {
+	let n = [];
+	return X().forEach((r, i) => {
+		if (i > 0) {
+			let t = document.createElement("div");
+			t.className = "cd-shell-legend-separator", t.setAttribute("role", "separator"), e.append(t);
+		}
+		let a = document.createElement("div");
+		a.className = "cm-legend-group", a.setAttribute("role", "group"), a.setAttribute("aria-label", r.label);
+		for (let e of r.rows) {
+			let r = document.createElement("div");
+			r.className = "cd-shell-legend-row cm-legend-row";
+			let i = document.createElement("span");
+			i.className = "cd-shell-legend-preview", i.innerHTML = e.preview;
+			let o = document.createElement("span");
+			if (o.textContent = e.label, r.append(i, o), t.tooltip) n.push(t.tooltip.attach(r, { label: e.explanation }));
+			else {
+				let t = document.createElement("span");
+				t.className = "cm-visually-hidden", t.textContent = `: ${e.explanation}`, r.append(t);
+			}
+			a.append(r);
+		}
+		e.append(a);
+	}), () => {
+		for (let e of n.splice(0)) e();
+	};
+}
+//#endregion
+//#region src/legend/CmLegend.ts
+function Wn(e) {
+	let t = document.createElement("div");
+	t.className = "cm-legend__row cm-legend-item";
+	let n = document.createElement("span");
+	n.className = "cm-legend__icon", n.innerHTML = e.preview;
+	let r = document.createElement("span");
+	r.textContent = e.label;
+	let i = document.createElement("span");
+	return i.className = "cm-legend-tip", i.textContent = e.explanation, t.addEventListener("mouseenter", () => {
+		let e = t.getBoundingClientRect();
+		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) {
+	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() {
+	let e = document.createElement("div");
+	return e.className = "cm-legend__divider", e;
+}
+var qn = class {
+	static $inject = ["canvas", "eventBus"];
+	openState = !0;
+	host;
+	constructor(e, t) {
+		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.openState !== e && (this.openState = e, this.render());
+	}
+	toggle() {
+		this.setOpen(!this.openState);
+	}
+	render() {
+		let e = this.host.contains(this.host.ownerDocument.activeElement);
+		this.host.replaceChildren(this.openState ? this.panel() : this.collapsedButton()), e && this.host.querySelector(".cm-legend__close, .cm-legend-toggle")?.focus();
+	}
+	panel() {
+		let e = document.createElement("div");
+		e.className = "cm-legend", e.setAttribute("aria-label", "Legend");
+		let t = document.createElement("div");
+		t.className = "cm-legend__head";
+		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;
+	}
+	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 = {
+	__init__: ["cmLegend"],
+	cmLegend: ["type", qn]
+}, Yn = "Export as JSON";
+function Z(e, t, n, r) {
+	return {
+		kind: "action",
+		id: e,
+		label: t,
+		...r ? { icon: r } : {},
+		...n.shortcut ? { shortcut: n.shortcut } : {},
+		onSelect: () => n.onSelect()
+	};
+}
+function Xn(e) {
+	let { editTitle: t } = e;
+	return {
+		model: t ? [{
+			kind: "dialog",
+			id: "map-title",
+			label: "Map title…",
+			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", Yn, e.exports.json),
+			Z("export-cml", "Export as CML", e.exports.cml)
+		],
+		help: [{
+			kind: "dialog",
+			id: "keyboard-shortcuts",
+			label: "Keyboard shortcuts…",
+			icon: "keyboard",
+			onSelect: () => e.showKeyboardShortcuts()
+		}]
+	};
+}
+//#endregion
+//#region src/chrome/shortcuts.ts
+function Zn(e, t, n) {
+	return t === "mac" ? `⌘${e}` : `${n.ctrl}+${e}`;
+}
+function Qn(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) {
+	if (e === "mac") return {
+		zoomIn: "⌘+",
+		zoomOut: "⌘−",
+		zoomToActual: "⌘0",
+		fit: "⇧1"
+	};
+	let { ctrl: n, shift: r, plus: i, minus: a } = t;
+	return {
+		zoomIn: `${n}+${i}`,
+		zoomOut: `${n}+${a}`,
+		zoomToActual: `${n}+0`,
+		fit: `${r}+1`
+	};
+}
+function er(e, t) {
+	if (e === "mac") return {
+		undo: ["⌘Z"],
+		redo: ["⌘⇧Z"],
+		selectAll: ["⌘A"],
+		remove: ["⌫"],
+		lineBreak: ["⇧Enter"],
+		lassoDrag: ["⇧ Drag"]
+	};
+	let { ctrl: n, shift: r } = t;
+	return {
+		undo: [`${n}+Z`],
+		redo: [`${n}+${r}+Z`, `${n}+Y`],
+		selectAll: [`${n}+A`],
+		remove: ["Del", "Backspace"],
+		lineBreak: [`${r}+Enter`],
+		lassoDrag: [`${r}+Drag`]
+	};
+}
+function tr(e) {
+	let { platform: t, messages: n } = e;
+	return {
+		title: "File",
+		rows: [{
+			action: n.openFile ?? "Open…",
+			keys: [Zn("O", t, n.keyNames)]
+		}, {
+			action: Yn,
+			keys: [Zn("S", t, n.keyNames)]
+		}]
+	};
+}
+function nr(e, t = {}) {
+	let { platform: n, messages: r } = e, i = $n(n, r.keyNames), a = er(n, r.keyNames);
+	return [
+		...t.fileKeys ? [tr(e)] : [],
+		{
+			title: "View",
+			rows: [
+				{
+					action: r.zoomIn,
+					keys: [i.zoomIn]
+				},
+				{
+					action: r.zoomOut,
+					keys: [i.zoomOut]
+				},
+				{
+					action: r.zoomToActual(Qn(e.lang)),
+					keys: [i.zoomToActual]
+				},
+				{
+					action: r.fit,
+					keys: [i.fit]
+				}
+			]
+		},
+		{
+			title: "Edit",
+			rows: [
+				{
+					action: "Undo",
+					keys: a.undo
+				},
+				{
+					action: "Redo",
+					keys: a.redo
+				},
+				{
+					action: "Select all",
+					keys: a.selectAll
+				},
+				{
+					action: "Delete",
+					keys: a.remove
+				},
+				{
+					action: "Rename",
+					keys: ["Double-click"]
+				},
+				{
+					action: "Save a name",
+					keys: ["Enter"]
+				},
+				{
+					action: "Line break in a name",
+					keys: a.lineBreak
+				},
+				{
+					action: "Discard a name",
+					keys: ["Esc"]
+				}
+			]
+		},
+		{
+			title: "Tools",
+			rows: [{
+				action: "Create a context from the palette",
+				keys: ["Enter", "Space"]
+			}, {
+				action: "Lasso by dragging",
+				keys: a.lassoDrag
+			}]
+		}
+	];
+}
+//#endregion
+//#region 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 rr(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;
+}
+function ir(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) => {
+			e.target === n && n.close();
+		}), n.addEventListener("close", () => {
+			e.menu.trigger.hidden || e.menu.trigger.focus({ preventScroll: !0 });
+		}), e.root.append(n), n;
+	}
+	return {
+		open() {
+			n ??= r(), !n.open && (t.beforeOpen?.(), n.showModal(), t.afterOpen?.());
+		},
+		close() {
+			n?.close();
+		},
+		isOpen: () => n?.open === !0,
+		destroy() {
+			n?.remove(), n = void 0;
+		}
+	};
+}
+//#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);
+	i.id = r;
+	let a = Q("table", `${$}-table`);
+	a.setAttribute("aria-labelledby", r);
+	let o = a.createTBody();
+	for (let t of e.rows) {
+		let e = o.insertRow(), n = Q("th", `${$}-action`, t.action);
+		n.scope = "row";
+		let r = Q("td", `${$}-keys`);
+		for (let e of t.keys) r.append(Q("kbd", `${$}-key`, e));
+		e.append(n, r);
+	}
+	return n.append(i, a), n;
+}
+function sr(e, t = {}) {
+	return ir(e, {
+		className: $,
+		titleId: ar,
+		title: "Keyboard shortcuts",
+		content() {
+			let n = Q("div", "cm-dialog-body cm-shortcuts-body");
+			return n.append(...nr(e, t).map(or)), [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) {
+	let n = Q("button", "cm-dialog-button", e);
+	return n.type = t === "primary" ? "submit" : "button", n.dataset.variant = t, n;
+}
+function fr(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,
+		title: "Map title",
+		beforeOpen() {
+			n.value = t.title();
+		},
+		afterOpen() {
+			n.select();
+		},
+		content(e) {
+			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) => {
+				r.preventDefault();
+				let i = n.value.trim();
+				e(), i !== t.title() && t.setTitle(i);
+			}), [r];
+		}
+	});
+}
 //#endregion
-export { de as CD_TOKENS, N as CmBaseViewer, tt as CmConnectHandles, P as CmElementFactory, J as CmExporter, Ne as CmFlatModelBehavior, q as CmImporter, st as CmKeyboard, rt as CmLabelEditing, De as CmModeling, Ke as CmPaletteProvider, ke as CmRules, _t as CmZOrder, U as ContextMapsRenderer, I as MIRAGON, yt as Modeler, Z as NavigatedViewer, j as ROOT_ID, X as Viewer, Le as cmBehaviorsModule, nt as cmConnectHandlesModule, W as cmDrawModule, ct as cmKeyboardModule, at as cmLabelEditingModule, F as cmModelModule, Oe as cmModelingModule, qe as cmPaletteModule, Me as cmRulesModule, vt as cmZOrderModule, He as contextIconSvg, Y as ioModule, D as isCmContext, E as isCmElement, O as isCmRelationship, Ue as relationshipIconSvg, A as saveSVG };
+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 };
 
 //# sourceMappingURL=index.js.map