@miragon/context-maps-renderer 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,26 +1,31 @@
 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 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 { ALL_PATTERN_SPECS as n, ALL_SUBDOMAIN_SPECS as r, DOCUMENT_VERSION as i, DOWNSTREAM_ROLES as a, DOWNSTREAM_ROLE_SPECS as o, MARK_COLORS as s, MARK_TEXT_COLOR as c, RELATIONSHIP_PATTERN_SPECS as l, SUBDOMAIN_TYPE_SPECS as u, UPSTREAM_ROLES as d, UPSTREAM_ROLE_SPECS as f, isSymmetricPattern as p, newId as m, validateDocument as h } from "@miragon/context-maps-schema-model";
+import g from "diagram-js/lib/core/ElementFactory";
+import { asTRBL as ee, getMid as _ } from "diagram-js/lib/layout/LayoutUtil";
+import te from "diagram-js/lib/draw/BaseRenderer";
+import { append as v, attr as y, clear as b, create as x } from "tiny-svg";
+import S from "diagram-js/lib/features/selection";
+import C from "diagram-js/lib/navigation/zoomscroll";
+import ne from "diagram-js/lib/navigation/movecanvas";
+import re from "diagram-js/lib/features/connection-preview";
+import ie from "diagram-js/lib/features/modeling";
+import ae from "diagram-js/lib/features/move";
+import oe from "diagram-js/lib/features/outline";
+import se from "diagram-js/lib/features/rules";
+import ce from "diagram-js/lib/features/rules/RuleProvider";
+import le from "diagram-js/lib/command/CommandInterceptor";
+import { hasPrimaryModifier as ue } from "diagram-js/lib/util/Mouse";
+import de from "diagram-js/lib/features/palette";
+import fe from "diagram-js/lib/features/create";
+import w from "diagram-js/lib/features/connect";
+import pe from "diagram-js/lib/features/lasso-tool";
+import me from "diagram-js/lib/features/context-pad";
+import he from "diagram-js/lib/features/popup-menu";
+import ge from "diagram-js/lib/features/auto-place";
+import _e from "diagram-js-direct-editing";
+import { DEFAULT_DISTANCE as ve, findFreePosition as ye, generateGetNextPosition as be } from "diagram-js/lib/features/auto-place/AutoPlaceUtil";
+import xe from "diagram-js/lib/features/overlays";
 //#region src/model/di-types.ts
 function T(e) {
 	return typeof e == "object" && e ? e.cmKind : void 0;
@@ -36,8 +41,8 @@ function O(e) {
 }
 //#endregion
 //#region src/io/saveSvg.ts
-var k = 40;
-function A(e, t) {
+var Se = 40;
+function Ce(e, t) {
 	let n = e.getContainer().querySelector("svg");
 	if (!n) throw Error("No SVG found in the canvas container.");
 	let r = Infinity, i = Infinity, a = -Infinity, o = -Infinity;
@@ -47,20 +52,20 @@ function A(e, t) {
 		r = Math.min(r, t.x), i = Math.min(i, t.y), a = Math.max(a, t.x + t.width), o = Math.max(o, t.y + t.height);
 	}
 	Number.isFinite(r) || (r = 0, i = 0, a = 100, o = 100);
-	let s = r - k, c = i - k, l = a - r + k * 2, u = o - i + k * 2, d = n.cloneNode(!0);
+	let s = r - Se, c = i - Se, l = a - r + 80, u = o - i + 80, d = n.cloneNode(!0);
 	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";
+var we = "cm-root";
 //#endregion
 //#region src/CmBaseViewer.ts
-function M(e) {
+function Te(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var N = class {
+var k = class {
 	_diagram;
 	_container;
 	_options;
@@ -69,7 +74,7 @@ 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 = Te(e.width ?? "100%"), t.style.height = Te(e.height ?? (e.container ? "100%" : "600px")), t;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
@@ -121,26 +126,26 @@ var N = class {
 		}
 	}
 	saveSVG() {
-		return A(this.get("canvas"), this.get("elementRegistry"));
+		return Ce(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(e = 84, t = 56, n = t) {
+		let r = this.get("canvas"), i = this.get("elementRegistry"), a = Infinity, o = Infinity, s = -Infinity, c = -Infinity;
+		for (let e of i.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" && (a = Math.min(a, t.x), o = Math.min(o, t.y), s = Math.max(s, t.x + t.width), c = Math.max(c, 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");
+		if (!Number.isFinite(a)) return;
+		let l = this._container.getBoundingClientRect(), u = l.width, d = l.height, f = Math.max(s - a, 1), p = Math.max(c - o, 1);
+		if (!u || !d) {
+			r.zoom("fit-viewport");
 			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 m = Math.min((u - n - t) / f, (d - e - t) / p, 1.25), h = n + (u - n - t - m * f) / 2;
+		r.viewbox({
+			x: a - h / m,
+			y: o - e / m,
+			width: u / m,
+			height: d / m
 		});
 	}
 	attachTo(e) {
@@ -158,19 +163,23 @@ var N = class {
 	get container() {
 		return this._container;
 	}
-}, P = class {
+}, Ee = class {
 	elementFactory;
 	static $inject = ["elementFactory"];
 	constructor(e) {
 		this.elementFactory = e;
 	}
 	createContext(e) {
+		let t = (e.subdomainType ? u[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 } : {},
@@ -196,37 +205,37 @@ var N = class {
 		});
 	}
 	createNewContext(e, t) {
-		let n = s[e];
+		let n = (e ? u[e] : void 0)?.defaultSize ?? u.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 {
+}, De = class extends g {
 	create(e, t) {
 		return !t?.id && (e === "shape" || e === "connection") && (t = {
 			...t,
-			id: l(e === "shape" ? "ctx" : "rel")
+			id: m(e === "shape" ? "ctx" : "rel")
 		}), super.create(e, t);
 	}
-}, ue = class {
+}, Oe = 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],
+}, ke = {
+	elementFactory: ["type", De],
+	cmElementFactory: ["type", Ee],
 	connectionDocking: ["type", t]
-}, I = {
+}, A = {
 	blau: "#335DE5",
 	blauLink: "#2B50D4",
 	blauHell: "#6B8AFF",
@@ -239,35 +248,35 @@ var N = class {
 	danger: "#C92A2A",
 	info: "#2B50D4",
 	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,
+}, Ae = {
+	"--cd-blau": A.blau,
+	"--cd-gruen": A.gruen,
+	"--cd-grau": A.grau,
+	"--cd-schwarz": A.schwarz,
+	"--cd-weiss": A.weiss,
+	"--cd-blau-link": A.blauLink,
+	"--cd-blau-hell": A.blauHell,
+	"--cd-success": A.success,
 	"--cd-success-soft": "rgba(11, 122, 85, 0.12)",
-	"--cd-warning": I.warning,
+	"--cd-warning": A.warning,
 	"--cd-warning-soft": "rgba(146, 97, 10, 0.12)",
-	"--cd-danger": I.danger,
+	"--cd-danger": A.danger,
 	"--cd-danger-soft": "rgba(201, 42, 42, 0.12)",
-	"--cd-info": I.info,
+	"--cd-info": A.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 = {
+	"--cd-gradient-brand": A.gradientBrand
+}, je = 1500;
+A.blau;
+var j = A.schwarz, Me = "#5B5B5B", M = {
 	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13.5,
 	small: 11
-}, B = I.weiss;
+}, N = A.weiss, Ne = "#F1F1EE", Pe = "#8A8577";
 //#endregion
 //#region src/draw/endRoleChips.ts
-function V(e, t, n, r) {
+function P(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 = M.small * .64, u = M.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 +296,31 @@ function V(e, t, n, r) {
 }
 //#endregion
 //#region src/draw/ContextMapsRenderer.ts
-var pe = "#F1F1EE", H = "#8A8577", U = class extends p {
+var Fe = class extends te {
 	static $inject = ["eventBus"];
 	constructor(e) {
-		super(e, fe);
+		super(e, je);
 	}
 	canRender(e) {
 		return E(e);
 	}
 	drawShape(e, t) {
-		if (g(e), D(t)) return this.drawContext(e, t);
-		let n = h(_("rect"), {
+		if (b(e), D(t)) return this.drawContext(e, t);
+		let n = y(x("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 (b(e), O(t)) return this.drawRelationship(e, t);
+		let n = y(x("polyline"), {
 			points: (t.waypoints ?? []).map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
-			stroke: L
+			stroke: j
 		});
-		return m(e, n), n;
+		return v(e, n), n;
 	}
 	getShapePath(e) {
 		let { x: t, y: n, width: r, height: i } = e;
@@ -322,53 +331,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 ? u[t.subdomainType] : void 0, r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = y(x("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, ze(t.subdomainType, 15, 15, 18, n.stroke));
+			let r = y(x("text"), {
 				x: 28,
 				y: 15,
-				"font-family": z.family,
-				"font-size": z.small,
+				"font-family": M.family,
+				"font-size": M.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 * M.small * .55, a = r / 2 - n / 2, o = i - 12, s = Ve(a + 7, o, 14, Me);
+			y(s, { class: "cm-team" }), v(e, s);
+			let c = y(x("text"), {
+				class: "cm-team",
 				x: a + 14 + 5,
 				y: o,
-				"font-family": z.family,
-				"font-size": z.small,
-				fill: R,
+				"font-family": M.family,
+				"font-size": M.small,
+				fill: Me,
 				"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 = l[t.pattern] ?? l["upstream-downstream"], r = t.waypoints ?? [], i = n.dash, a = y(x("polyline"), {
 			points: r.map((e) => `${e.x},${e.y}`).join(" "),
 			fill: "none",
 			stroke: n.stroke,
@@ -377,11 +385,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, N, 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 +397,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"), {
+	endMarkers(e, t, n, r, i) {
+		let a = n.x - t.x, o = n.y - t.y, c = Math.hypot(a, o) || 1, l = a / c, u = o / c, d = s[r] ?? j, f = y(x("text"), {
 			x: t.x + l * 11,
 			y: t.y + u * 11,
-			"font-family": z.family,
-			"font-size": z.small + 1,
+			"font-family": M.family,
+			"font-size": M.small + 1,
 			"font-weight": "800",
 			fill: d,
-			stroke: B,
+			stroke: N,
 			"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 = P(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: _, gap: te } = p, b = h.y, S = y(x("rect"), {
+			x: m.x,
+			y: m.y,
+			width: m.width,
+			height: m.height,
 			rx: 6,
 			ry: 6,
-			fill: B,
+			fill: N,
 			"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, S);
+		let C = h.x - _ / 2;
+		i.forEach((t, n) => {
+			let r = g[n], i = s[t] ?? "#8A8577";
+			this.miniChip(e, C + r / 2, b, r, ee, t, i), C += r + te;
 		});
 	}
-	miniChip(e, t, n, r, i, o, s) {
-		m(e, h(_("rect"), {
+	miniChip(e, t, n, r, i, a, o) {
+		let s = y(x("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: Ie(o),
 			"stroke-width": 1
-		}));
-		let c = h(_("text"), {
+		});
+		v(e, s);
+		let l = y(x("text"), {
 			x: t,
 			y: n,
-			"font-family": z.family,
-			"font-size": z.small,
+			"font-family": M.family,
+			"font-size": M.small,
 			"font-weight": "700",
-			fill: a,
+			fill: c,
 			"text-anchor": "middle",
 			"dominant-baseline": "central"
 		});
-		c.textContent = o, m(e, c);
+		l.textContent = a, v(e, l);
 	}
 	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 = M.small * .64, c = r.length * s + 12, l = M.small + 8, u = y(x("rect"), {
 			x: t - c / 2,
 			y: n - l / 2,
 			width: c,
@@ -462,48 +470,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 === N ? { "fill-opacity": .95 } : {}
+		});
+		v(e, u);
+		let d = y(x("text"), {
 			x: t,
 			y: n,
-			"font-family": z.family,
-			"font-size": z.small,
+			"font-family": M.family,
+			"font-size": M.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"] : M.label, s = String(a["font-weight"] ?? "400"), c = n - 20, l = We(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] = Ue(l[f - 1], c, o, s));
+		let p = 36 + u / 2;
+		l.forEach((t, r) => {
+			let i = y(x("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": M.family,
+				"font-size": o,
+				fill: j,
 				"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 Ie(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 Le = "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", Re = "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 ze(e, t, n, r, i) {
 	if (e === "generic") {
-		let e = _("g");
-		return m(e, h(_("circle"), {
+		let e = x("g"), a = y(x("circle"), {
 			cx: t,
 			cy: n,
 			r: r / 2 - 1,
@@ -511,41 +522,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 = x("g");
+	y(s, { transform: `translate(${t - 12 * a} ${n - 12 * a}) scale(${a})${o}` });
+	let c = y(x("path"), {
+		d: e === "core" ? Le : Re,
 		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 Be = "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 Ve(e, t, n, r) {
+	let i = n / 24, a = x("g");
+	y(a, { transform: `translate(${e - 12 * i} ${t - 12 * i}) scale(${i})` });
+	let o = y(x("path"), {
+		d: Be,
 		fill: r
-	})), a;
+	});
+	return v(a, o), a;
+}
+var F;
+function He(e, t, n) {
+	return F === void 0 && (F = typeof document > "u" ? null : document.createElement("canvas").getContext("2d")), F ? (F.font = `${n} ${t}px ${M.family}`, F.measureText(e).width) : e.length * t * .58;
+}
+function Ue(e, t, n, r) {
+	let i = e;
+	for (; i && He(`${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 We(e, t, n, r) {
+	let i = e.split("\n");
+	return i.every((e) => e.trim() === "") ? [] : i.flatMap((e) => {
+		let i = Ge(e, t, n, r);
+		return i.length ? i : [""];
+	});
+}
+function Ge(e, t, n, r) {
+	let i = e.split(/\s+/).filter(Boolean);
 	if (i.length === 0) return [];
-	let a = [], o = "";
+	let a = (e) => He(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 Ke = {
 	__init__: ["cmRenderer"],
-	cmRenderer: ["type", U]
+	cmRenderer: ["type", Fe]
 };
 //#endregion
 //#region src/io/CmImporter.ts
-function G(e, t) {
+function qe(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 +603,13 @@ function G(e, t) {
 		y: r + a * c
 	};
 }
-function K(e) {
+function Je(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
-var q = class {
+var Ye = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -589,7 +635,7 @@ var q = class {
 			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 };
+		n && n.id === "cm-root" ? r = n : (r = this.elementFactory.createRoot({ id: we }), this.canvas.setRootElement(r)), r.businessObject = { title: e.title };
 		let i = /* @__PURE__ */ new Map();
 		for (let t of e.contexts) {
 			let e = this.factory.createContext(t);
@@ -604,7 +650,7 @@ var q = class {
 				});
 				continue;
 			}
-			let o = [G(e, K(a)), G(a, K(e))], s = this.factory.createRelationship(n, e, a, o);
+			let o = [qe(e, Je(a)), qe(a, Je(e))], s = this.factory.createRelationship(n, e, a, o);
 			this.canvas.addConnection(s, r);
 		}
 		for (let e of i.values()) this.canvas.addShape(e, r);
@@ -615,7 +661,7 @@ var q = class {
 			"waypoints" in e ? this.canvas.removeConnection(e.id) : this.canvas.removeShape(e.id);
 		} catch {}
 	}
-}, J = class {
+}, Xe = class {
 	elementRegistry;
 	canvas;
 	static $inject = ["elementRegistry", "canvas"];
@@ -667,64 +713,64 @@ var q = class {
 			}
 		}
 		return {
-			version: r,
+			version: i,
 			title: e?.title ?? "Untitled context map",
 			contexts: t,
 			relationships: n
 		};
 	}
-}, Y = {
-	cmImporter: ["type", q],
-	cmExporter: ["type", J]
-}, X = class extends N {
+}, Ze = {
+	cmImporter: ["type", Ye],
+	cmExporter: ["type", Xe]
+}, Qe = class extends k {
 	_getModules() {
 		return [
-			F,
-			W,
-			Y
+			ke,
+			Ke,
+			Ze
 		];
 	}
-}, Z = class extends X {
+}, $e = class extends Qe {
 	_getModules() {
 		return [
 			...super._getModules(),
-			v,
-			y,
-			b
+			S,
+			C,
+			ne
 		];
 	}
 };
 //#endregion
 //#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function xe(e, t, n) {
+function et(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var Se = class {
+var tt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], xe(r, e, n[e]);
+		for (let e of Object.keys(n)) i[e] = r[e], et(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)) et(r, e, n[e]);
 		return [t];
 	}
 };
 //#endregion
 //#region src/modeling/cmd/SwapEndsHandler.ts
-function Ce(e) {
+function I(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 nt = class {
 	execute(e) {
-		return Ce(e.connection);
+		return I(e.connection);
 	}
 	revert(e) {
-		return Ce(e.connection);
+		return I(e.connection);
 	}
-}, Te = "element.updateProperties", Ee = "relationship.swapEnds", De = class {
+}, rt = "element.updateProperties", it = "relationship.swapEnds", at = class {
 	commandStack;
 	elementRegistry;
 	graphicsFactory;
@@ -734,17 +780,17 @@ 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(rt, tt), e.registerHandler(it, nt);
 	}
 	redraw(e) {
 		let t = this.elementRegistry.getGraphics(e);
 		t && this.graphicsFactory.update(O(e) ? "connection" : "shape", e, t);
 	}
 	swapEnds(e) {
-		this.commandStack.execute(Ee, { connection: e }), this.redraw(e);
+		this.commandStack.execute(it, { connection: e }), this.redraw(e);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(Te, {
+		this.commandStack.execute(rt, {
 			element: e,
 			properties: t
 		}), this.redraw(e);
@@ -769,7 +815,7 @@ var we = class {
 	}
 	setPattern(e, t) {
 		let n = { pattern: t };
-		if (c(t)) n.upstreamRoles = void 0, n.downstreamRoles = void 0;
+		if (p(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 +831,36 @@ var we = class {
 	setImplementationTechnology(e, t) {
 		this.updateProperties(e, { implementationTechnology: t || void 0 });
 	}
-}, Oe = {
+}, L = {
 	__init__: ["cmModeling"],
-	cmModeling: ["type", De],
-	layouter: ["type", ue]
-}, ke = class extends ne {
+	cmModeling: ["type", at],
+	layouter: ["type", Oe]
+}, ot = class extends ce {
 	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) => ct(e.source, e.target)), this.addRule("connection.reconnect", (e) => !!ct(e.source, e.target, e.connection)), this.addRule("connection.updateWaypoints", () => !0);
 	}
 };
-function Ae(e, t, n) {
+function st(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 ct(e, t, n) {
+	return !D(e) || !D(t) || e === t || st(e, t, n) ? !1 : {
 		cmKind: "relationship",
 		pattern: "upstream-downstream"
 	};
 }
 //#endregion
 //#region src/rules/index.ts
-var Me = {
-	__depends__: [te],
+var R = {
+	__depends__: [se],
 	__init__: ["cmRules"],
-	cmRules: ["type", ke]
-}, Ne = class extends re {
+	cmRules: ["type", ot]
+}, lt = class extends le {
 	static $inject = [
 		"eventBus",
 		"canvas",
@@ -823,89 +869,120 @@ 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 {
+}, ut = "cm-dragging", dt = class {
 	static $inject = ["eventBus", "canvas"];
 	constructor(e, t) {
 		e.on("drag.init", () => {
-			t.getContainer().classList.add(Pe);
+			t.getContainer().classList.add(ut);
 		}), e.on("drag.cleanup", () => {
-			t.getContainer().classList.remove(Pe);
+			t.getContainer().classList.remove(ut);
 		});
 	}
-}, Ie = 2e3, Le = {
+}, ft = 2e3, pt = {
 	__init__: [
 		"cmFlatModelBehavior",
 		"cmDragBehavior",
 		"cmClickSelectionBehavior"
 	],
-	cmFlatModelBehavior: ["type", Ne],
-	cmDragBehavior: ["type", Fe],
+	cmFlatModelBehavior: ["type", lt],
+	cmDragBehavior: ["type", dt],
 	cmClickSelectionBehavior: ["type", class {
 		static $inject = ["eventBus", "selection"];
 		constructor(e, t) {
-			e.on("element.click", Ie, (e) => {
+			e.on("element.click", ft, (e) => {
 				let n = e.element;
-				if (E(n) && !ie(e) && t.isSelected(n)) return !1;
+				if (E(n) && !ue(e) && t.isSelected(n)) return !1;
 			});
 		}
 	}]
 };
 //#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 z(e, t = 24) {
+	return `<svg class="cm-palette-svg" width="${t}" height="${t}" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
 }
-var 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 mt = "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", ht = "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 gt(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" ? mt : ht}" fill="${i}" transform="${s}"/>`;
+}
+function B(e) {
+	let t = e ? u[e] : void 0;
+	return z(!e || !t ? `<rect x="2" y="4" width="22" height="18" rx="3.5" fill="${Ne}" stroke="${Pe}" 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"/>` + gt(e, 13, 13, 12, t.stroke));
+}
+function _t(e, t = 18) {
+	let n = u[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" ? mt : ht}" fill="${r}"/>`}</svg>`;
 }
-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 V(e) {
+	return z(`<rect x="1" y="6.5" width="24" height="13" rx="3" fill="${s[e] ?? "#8A8577"}"/><text x="13" y="16.4" text-anchor="middle" font-size="9.5" font-weight="700" fill="${c}" font-family="${M.family}">${e}</text>`);
 }
-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 H(e = "upstream-downstream", t = 24) {
+	let n = l[e] ?? l["upstream-downstream"], r = n.dash ? ` stroke-dasharray="${n.dash}"` : "", i = Math.min(n.strokeWidth, 2.6);
+	return z(`<g stroke="${n.stroke}" stroke-width="${i}" stroke-linecap="round"><circle cx="5" cy="13" r="2.5" fill="${n.stroke}" stroke="none"/><line x1="7" y1="13" x2="19" y2="13"${r}/><circle cx="21" cy="13" r="2.5" fill="${n.stroke}" stroke="none"/></g>`, t);
+}
+//#endregion
+//#region src/draw/icons.ts
+var vt = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z", yt = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z", bt = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", xt = "M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z", St = "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z", Ct = "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z", wt = "M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z", 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 5C6.34 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 U(e, t = 18) {
+	return `<svg width="${t}" height="${t}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${e}"/></svg>`;
+}
+function Et(e = 18) {
+	return `<svg width="${e}" height="${e}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2" stroke-dasharray="3.2 2.6"/></svg>`;
 }
 //#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 Dt = "tools", Ot = "cm-1-contexts";
+function kt(e, t, n = !0) {
+	return `<div class="entry cm-palette-entry"${n ? " draggable=\"true\"" : ""} title="${t}">${e}</div>`;
 }
-var Ke = class {
+var At = class {
 	create;
+	lassoTool;
 	factory;
 	static $inject = [
 		"palette",
 		"create",
+		"lassoTool",
 		"cmElementFactory"
 	];
-	constructor(e, t, n) {
-		this.create = t, this.factory = n, e.registerProvider(this);
+	constructor(e, t, n, r) {
+		this.create = t, this.lassoTool = n, this.factory = r, e.registerProvider(this);
 	}
 	getPaletteEntries() {
-		let e = {};
-		for (let t of n) {
+		let e = {}, t = "Lasso tool — drag a box to select multiple elements";
+		e["lasso-tool"] = {
+			group: Dt,
+			title: t,
+			html: kt(Et(), t, !1),
+			action: { click: (e) => this.lassoTool.activateSelection(e) }
+		};
+		for (let t of r) {
 			let n = (e) => this.create.start(e, this.factory.createNewContext(t.type, t.label));
 			e[`context.${t.type}`] = {
-				group: We,
+				group: Ot,
 				title: `${t.label} — ${t.description}`,
-				html: Ge(He(t.type), `${t.label} — ${t.description}`),
+				html: kt(B(t.type), `${t.label} — ${t.description}`),
 				action: {
 					dragstart: n,
 					click: n
@@ -914,190 +991,590 @@ var Ke = class {
 		}
 		return e;
 	}
-}, qe = {
+}, jt = {
 	__depends__: [
-		ae,
-		oe,
-		se
+		de,
+		fe,
+		w,
+		pe
 	],
 	__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>`;
-}
-//#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
+	cmPaletteProvider: ["type", At]
+}, Mt = {
+	name: "cm-direct-editing",
+	team: "cm-direct-editing-team"
+}, Nt = 10, Pt = 20, Ft = class {
+	canvas;
+	directEditing;
+	modeling;
+	static $inject = [
+		"eventBus",
+		"canvas",
+		"directEditing",
+		"cmModeling"
+	];
+	mode = "name";
+	activeMarker;
+	constructor(e, t, n, r) {
+		this.canvas = t, this.directEditing = n, this.modeling = r, n.registerProvider({
+			activate: (e) => this.activationContext(e),
+			update: (e, t) => this.commit(e, t)
+		}), e.on("element.dblclick", (e) => {
+			let t = e.element;
+			E(t) && (this.mode = D(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 = Mt[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;
+		});
 	}
-];
-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
+	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 (!E(e)) return;
+		this.mode === "team" && !D(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 + Nt * t,
+					y: n.y + n.height - 22 * t,
+					width: n.width - 20 * t,
+					height: Pt * t
+				},
+				text: r.team ?? "",
+				style: {
+					fontFamily: M.family,
+					fontSize: `${M.small * t}px`,
+					fontWeight: 400,
+					lineHeight: 1.2,
+					backgroundColor: "transparent",
+					border: "1px dashed rgba(51, 93, 229, 0.65)",
+					textAlign: "center"
+				},
+				options: { centerVertically: !0 }
+			};
+		}
+		let r = {
+			fontFamily: M.family,
+			fontSize: `${M.label * t}px`,
+			fontWeight: 650,
+			lineHeight: 1.2,
+			backgroundColor: "transparent",
+			border: "1px dashed rgba(51, 93, 229, 0.65)",
+			textAlign: "center"
 		};
-		case "right": return {
-			top: r,
-			left: t.width + Qe
+		if (D(e)) {
+			let i = e.team ? 18 * t : 0;
+			return {
+				bounds: {
+					x: n.x + Nt * 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: "rgba(255, 255, 255, 0.95)"
+			},
+			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);
+			return;
+		}
+		n !== (e.cmLabel ?? "") && this.modeling.updateLabel(e, n);
+	}
+}, W = {
+	__depends__: [_e, L],
+	__init__: ["cmLabelEditing"],
+	cmLabelEditing: ["type", Ft]
+}, G = "cm-subdomain-menu", It = "cm-pattern-menu", K = "cm-roles-menu", q = "cm-popup-active", J = 8, Lt = {
+	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 Y(e, t, n = {}) {
+	let r = n.draggable ? " draggable=\"true\"" : "";
+	return `<div class="entry cm-pad-entry${n.danger ? " cm-pad-entry--danger" : ""}"${r} title="${t}">${e}</div>`;
 }
-var tt = class {
+var Rt = class {
+	contextPad;
+	popupMenu;
 	eventBus;
-	selection;
-	overlays;
+	create;
+	autoPlace;
+	rules;
 	dragging;
+	modeling;
+	cmModeling;
+	labelEditing;
+	elementFactory;
+	selection;
+	canvas;
+	scheduler;
 	static $inject = [
+		"contextPad",
+		"popupMenu",
 		"eventBus",
-		"selection",
-		"overlays",
 		"connect",
-		"dragging"
+		"create",
+		"autoPlace",
+		"rules",
+		"dragging",
+		"modeling",
+		"cmModeling",
+		"cmLabelEditing",
+		"cmElementFactory",
+		"selection",
+		"canvas",
+		"scheduler"
 	];
-	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) {
+		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, e.registerProvider(this), t.registerProvider(G, { getPopupMenuEntries: (e) => this.subdomainMenuEntries(e) }), t.registerProvider(It, { getPopupMenuEntries: (e) => this.patternMenuEntries(e) }), t.registerProvider(K, { getPopupMenuEntries: (e) => this.rolesMenuEntries(e) }), n.on("autoPlace", (e) => {
+			let { source: t, shape: n } = e, r = {
+				x: ee(t).right + ve + n.width / 2,
+				y: _(t).y
+			};
+			return ye(t, n, r, be({ 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 (O(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 D(e) ? this.contextEntries(e) : O(e) ? this.relationshipEntries(e) : {};
+	}
+	getMultiElementContextPadEntries(e) {
+		let t = e.filter(E);
+		return t.length === e.length ? { delete: this.deleteEntry(t, "Delete selection") } : {};
+	}
+	contextEntries(e) {
+		let t = e.subdomainType ? u[e.subdomainType] : void 0;
+		return {
+			"append-context": {
+				group: "edit",
+				html: Y(U(Ct), "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: Y(U(vt), "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: Y(B(e.subdomainType), `Change subdomain type — currently ${t?.label ?? "unclassified"}`),
+				action: { click: (t) => this.openMenu(t, e, G, "Subdomain type") }
+			},
+			team: {
+				group: "edit",
+				html: Y(U(Tt), `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, G, "Subdomain type");
+		}, "cmContextPad#openTypeMenu");
+	}
+	relationshipEntries(e) {
+		let t = l[e.pattern], n = { pattern: {
+			group: "edit",
+			html: Y(H(t?.pattern), `Change pattern — currently ${t?.label ?? e.pattern}`),
+			action: { click: (t) => this.openMenu(t, e, It, "Relationship pattern") }
+		} };
+		return t && !t.symmetric && (n.roles = {
+			group: "edit",
+			html: Y(U(St), "Edit integration roles — OHS/PL upstream, ACL/CF downstream"),
+			action: { click: (t) => this.openMenu(t, e, K, "Integration roles") }
+		}, n["swap-ends"] = {
+			group: "edit",
+			html: Y(U(xt), "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: Y(U(yt), `${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: Y(U(wt), "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;
+	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 + J}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 - J)}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: Y(U(bt), 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 + J,
+			y: e.top
+		};
+		this.popupMenu.open(t, n, i, { title: r });
+		let a = document.querySelector(".djs-popup"), o = a?.getBoundingClientRect();
+		a && o && o.left < e.right && (i.x = Math.max(J, e.left - J - 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 (!D(e)) return {};
+		let t = e.subdomainType, n = {};
+		for (let i of r) n[`type-${i.type}`] = {
+			label: i.label,
+			description: i.description,
+			imageHtml: B(i.type),
+			...i.type === t ? { className: q } : {},
+			action: () => {
+				i.type !== t && this.cmModeling.setSubdomainType(e, i.type);
+			}
+		};
+		return n["type-none"] = {
+			label: "Unclassified",
+			description: "No subdomain classification.",
+			imageHtml: B(),
+			...t === void 0 ? { className: q } : {},
+			action: () => {
+				t !== void 0 && this.cmModeling.setSubdomainType(e, void 0);
+			}
+		}, n;
+	}
+	patternMenuEntries(e) {
+		if (!O(e)) return {};
+		let t = e.pattern, r = {};
+		for (let i of n) r[`pattern-${i.pattern}`] = {
+			label: i.label,
+			description: i.description,
+			imageHtml: H(i.pattern),
+			...i.pattern === t ? { className: q } : {},
+			action: () => {
+				i.pattern !== t && this.cmModeling.setPattern(e, i.pattern);
+			}
+		};
+		return r;
+	}
+	rolesMenuEntries(e) {
+		if (!O(e)) return {};
+		let t = l[e.pattern];
+		if (!t || t.symmetric) return {};
+		let n = e.pattern === "customer-supplier", r = e.upstreamRoles ?? [], i = e.downstreamRoles ?? [], s = {};
+		for (let t of d) {
+			let i = r.includes(t), a = n ? Lt[t] : void 0, o = a !== void 0 && !i;
+			s[`upstream-${t}`] = {
+				label: f[t].label,
+				description: a ? i ? `${a} Click to remove it.` : a : f[t].description,
+				imageHtml: V(t),
+				group: {
+					id: "upstream",
+					name: "Upstream (from) — OHS and/or PL"
+				},
+				...o ? { disabled: !0 } : {},
+				...i ? { className: q } : {},
+				action: () => {
+					o || (this.cmModeling.setUpstreamRoles(e, i ? r.filter((e) => e !== t) : [...r, t]), this.reopenMenu(e, K));
+				}
 			};
 		}
-		return t.length === 1 ? {
-			x: t[0].x,
-			y: t[0].y
-		} : {
-			x: 0,
-			y: 0
-		};
+		for (let t of a) {
+			let r = i.includes(t), a = n ? Lt[t] : void 0, c = a !== void 0 && !r;
+			s[`downstream-${t}`] = {
+				label: o[t].label,
+				description: a ? r ? `${a} Click to remove it.` : a : o[t].description,
+				imageHtml: V(t),
+				group: {
+					id: "downstream",
+					name: "Downstream (to) — ACL or CF, not both"
+				},
+				...c ? { disabled: !0 } : {},
+				...r ? { className: q } : {},
+				action: () => {
+					c || (this.cmModeling.setDownstreamRoles(e, r ? [] : [t]), this.reopenMenu(e, K));
+				}
+			};
+		}
+		return s;
 	}
-	let t = e;
-	return {
-		x: t.x + t.width / 2,
-		y: t.y + t.height / 2
-	};
+}, zt = {
+	__depends__: [
+		me,
+		he,
+		w,
+		fe,
+		ge,
+		S,
+		ie,
+		L,
+		R,
+		W
+	],
+	__init__: ["cmContextPadProvider"],
+	cmContextPadProvider: ["type", Rt]
+}, Bt = [
+	{
+		token: "OHS",
+		...f.OHS
+	},
+	{
+		token: "PL",
+		...f.PL
+	},
+	{
+		token: "ACL",
+		...o.ACL
+	},
+	{
+		token: "CF",
+		...o.CF
+	}
+];
+function X(e, t, n) {
+	let r = document.createElement("div");
+	r.className = "cm-legend__row cm-legend-item";
+	let i = document.createElement("span");
+	i.textContent = t;
+	let a = document.createElement("span");
+	return a.className = "cm-legend-tip", a.textContent = n, r.addEventListener("mouseenter", () => {
+		let e = r.getBoundingClientRect();
+		a.style.left = `${e.right + 10}px`, a.style.top = `${e.top + e.height / 2}px`;
+	}), r.append(e, i, a), r;
 }
-//#endregion
-//#region src/label-editing/index.ts
-var at = {
-	__init__: ["cmLabelEditing"],
-	cmLabelEditing: ["type", rt]
+function Vt(e) {
+	let t = document.createElement("span");
+	return t.className = "cm-legend__icon", t.innerHTML = e, t;
+}
+function Ht(e) {
+	let t = document.createElement("span");
+	return t.className = "cm-legend__mark", t.style.background = s[e], t.textContent = e, t;
+}
+function Z(e, t) {
+	let n = document.createElement("div");
+	return n.className = "cm-legend__group", n.setAttribute("aria-label", e), n.append(...t), n;
+}
+function Ut() {
+	let e = document.createElement("div");
+	return e.className = "cm-legend__divider", e;
+}
+var Wt = 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 i = document.createElement("strong");
+		i.textContent = "Legend";
+		let a = document.createElement("button");
+		a.type = "button", a.className = "cm-legend__close", a.setAttribute("aria-expanded", "true"), a.setAttribute("aria-label", "Collapse legend"), a.textContent = "–", a.addEventListener("click", () => this.toggle()), t.append(i, a);
+		let o = Z("Subdomain types", r.map((e) => X(Vt(_t(e.type)), e.label, e.description))), s = Z("Integration roles", Bt.map((e) => X(Ht(e.token), e.label, `${e.label} — ${e.description}`))), c = Z("Relationship patterns", n.map((e) => X(Vt(H(e.pattern, 18)), `${e.abbreviation} · ${e.label}`, e.description))), l = document.createElement("div");
+		return l.className = "cm-legend__body", l.append(o, Ut(), s, Ut(), c), e.append(t, l), e;
+	}
+	collapsedButton() {
+		let e = document.createElement("button");
+		e.type = "button", e.className = "cm-legend-toggle", e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-label", "Show legend");
+		let t = document.createElement("span");
+		t.setAttribute("aria-hidden", "true"), t.textContent = "▤";
+		let n = document.createElement("span");
+		return n.textContent = "Legend", e.append(t, n), e.addEventListener("click", () => this.toggle()), e;
+	}
+}, Gt = {
+	__init__: ["cmLegend"],
+	cmLegend: ["type", Wt]
 };
 //#endregion
 //#region src/keyboard/CmKeyboard.ts
-function ot(e) {
+function Kt(e) {
 	let t = e;
 	return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
 }
-var st = class {
+var qt = class {
 	static $inject = [
 		"canvas",
 		"commandStack",
@@ -1106,7 +1583,7 @@ var st = class {
 	];
 	constructor(e, t, n, r) {
 		(e.getContainer().ownerDocument ?? document).addEventListener("keydown", (e) => {
-			if (ot(e.target)) return;
+			if (Kt(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();
@@ -1116,12 +1593,12 @@ var st = class {
 			}
 		});
 	}
-}, ct = {
+}, Jt = {
 	__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");
+	cmKeyboard: ["type", qt]
+}, Yt = "cm-validation", Q = 20, $ = 16, Xt = 44, Zt = "#d97706", Qt = "#dc2626";
+function $t(e) {
+	let t = e.some((e) => e.kind === "error") ? Qt : Zt, 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>`;
 	let r = document.createElement("div");
 	r.className = "cm-validation-tooltip";
@@ -1131,13 +1608,13 @@ function pt(e) {
 	}
 	return n.appendChild(r), n;
 }
-function mt(e, t, n) {
+function en(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 * $
 	};
-	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" ? P(r, i, u ? "S" : "U", e.upstreamRoles ?? []) : P(i, r, u ? "C" : "D", e.downstreamRoles ?? []);
 	if (d) {
 		let e = {
 			x: d.box.x + d.box.width,
@@ -1148,7 +1625,7 @@ 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(Xt, 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 * $
@@ -1156,8 +1633,8 @@ function mt(e, t, n) {
 }
 //#endregion
 //#region src/validation/index.ts
-var ht = {
-	__depends__: [ce],
+var tn = {
+	__depends__: [xe],
 	__init__: ["cmValidationMarkers"],
 	cmValidationMarkers: ["type", class {
 		elementRegistry;
@@ -1175,8 +1652,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: Yt });
+			let e = h(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) ?? {
@@ -1195,13 +1672,13 @@ var ht = {
 				if (!O(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 } = en(t, r, i), s = Math.min(...r.map((e) => e.x)), c = Math.min(...r.map((e) => e.y));
+				this.overlays.add(t, Yt, {
 					position: {
 						left: a - s - Q / 2,
 						top: o - c - Q / 2
 					},
-					html: pt(n.findings)
+					html: $t(n.findings)
 				});
 			}
 		}
@@ -1209,10 +1686,10 @@ var ht = {
 };
 //#endregion
 //#region src/zorder/CmZOrder.ts
-function gt(e) {
+function nn(e) {
 	return +!O(e);
 }
-var _t = class {
+var rn = class {
 	canvas;
 	elementRegistry;
 	static $inject = [
@@ -1231,33 +1708,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(E).sort((e, t) => nn(e) - nn(t));
 		for (let t of e) {
 			let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
 			e && n && n.appendChild(e);
 		}
 	}
-}, vt = {
+}, an = {
 	__init__: ["cmZOrder"],
-	cmZOrder: ["type", _t]
-}, yt = class extends Z {
+	cmZOrder: ["type", rn]
+}, on = class extends $e {
 	_getModules() {
 		return [
 			...super._getModules(),
-			x,
-			S,
-			C,
-			w,
-			ee,
-			Oe,
-			Me,
-			Le,
-			qe,
-			nt,
-			at,
-			ct,
-			ht,
-			vt
+			re,
+			ie,
+			ae,
+			oe,
+			L,
+			R,
+			pt,
+			jt,
+			zt,
+			Gt,
+			W,
+			Jt,
+			tn,
+			an
 		];
 	}
 	undo() {
@@ -1272,8 +1749,101 @@ var _t = class {
 	canRedo() {
 		return this.get("commandStack").canRedo();
 	}
+}, sn = "cm-connect-handle", cn = 28, ln = 12, un = [
+	{
+		side: "top",
+		rotationDeg: -90
+	},
+	{
+		side: "right",
+		rotationDeg: 0
+	},
+	{
+		side: "bottom",
+		rotationDeg: 90
+	},
+	{
+		side: "left",
+		rotationDeg: 180
+	}
+];
+function dn(e, t) {
+	let n = t.width / 2 - cn / 2, r = t.height / 2 - cn / 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 fn = class {
+	eventBus;
+	selection;
+	overlays;
+	dragging;
+	static $inject = [
+		"eventBus",
+		"selection",
+		"overlays",
+		"connect",
+		"dragging"
+	];
+	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);
+	}
+	refresh() {
+		this.overlays.remove({ type: sn });
+		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 un) {
+			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)">${U(vt)}</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: _(t)
+						}
+					}
+				}), this.eventBus.once("connect.cleanup", 250, () => {
+					this.selection.get().length === 0 && this.selection.select(t);
+				}));
+			}), this.overlays.add(t, sn, {
+				position: dn(e, n),
+				html: i
+			});
+		}
+	}
+}, pn = {
+	__depends__: [
+		w,
+		xe,
+		S
+	],
+	__init__: ["cmConnectHandles"],
+	cmConnectHandles: ["type", fn]
 };
 //#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 { Ae as CD_TOKENS, k as CmBaseViewer, fn as CmConnectHandles, Rt as CmContextPadProvider, Ee as CmElementFactory, Xe as CmExporter, lt as CmFlatModelBehavior, Ye as CmImporter, qt as CmKeyboard, Ft as CmLabelEditing, Wt as CmLegend, at as CmModeling, At as CmPaletteProvider, ot as CmRules, rn as CmZOrder, Fe as ContextMapsRenderer, A as MIRAGON, on as Modeler, $e as NavigatedViewer, we as ROOT_ID, Qe as Viewer, pt as cmBehaviorsModule, pn as cmConnectHandlesModule, zt as cmContextPadModule, Ke as cmDrawModule, Jt as cmKeyboardModule, W as cmLabelEditingModule, Gt as cmLegendModule, ke as cmModelModule, L as cmModelingModule, jt as cmPaletteModule, R as cmRulesModule, an as cmZOrderModule, B as contextIconSvg, Ze as ioModule, D as isCmContext, E as isCmElement, O as isCmRelationship, H as relationshipIconSvg, V as roleChipSvg, Ce as saveSVG, _t as subdomainIconSvg };
 
 //# sourceMappingURL=index.js.map