@miragon/team-topologies-renderer 0.13.2 → 0.14.0

package/dist/index.js

@@ -7,25 +7,75 @@ import { append as x, attr as S, create as C } from "tiny-svg";
 import ie from "diagram-js/lib/features/selection";
 import ae from "diagram-js/lib/navigation/zoomscroll";
 import oe from "diagram-js/lib/navigation/movecanvas";
-import w from "diagram-js/lib/features/lasso-tool";
-import se from "diagram-js/lib/features/modeling";
-import ce from "diagram-js/lib/features/move";
-import le from "diagram-js/lib/features/outline";
-import ue from "diagram-js/lib/features/resize";
-import de from "diagram-js/lib/layout/BaseLayouter";
-import fe from "diagram-js/lib/features/rules";
-import pe from "diagram-js/lib/features/rules/RuleProvider";
-import me from "diagram-js/lib/command/CommandInterceptor";
-import he from "diagram-js/lib/features/palette";
-import ge from "diagram-js/lib/features/create";
-import _e from "diagram-js/lib/features/connect";
-import ve from "diagram-js/lib/features/connection-preview";
-import ye from "diagram-js/lib/features/context-pad";
-import be from "diagram-js/lib/features/copy-paste";
-import xe from "diagram-js/lib/features/copy-paste/CopyPaste.js";
-import { MODELER_API_VERSION as Se } from "@miragon/modeler-api";
-//#region src/model/di-types.ts
-var Ce = /* @__PURE__ */ new Set([
+import se from "diagram-js/lib/features/lasso-tool";
+import ce from "diagram-js/lib/features/modeling";
+import le from "diagram-js/lib/features/move";
+import ue from "diagram-js/lib/features/outline";
+import de from "diagram-js/lib/features/resize";
+import fe from "diagram-js/lib/layout/BaseLayouter";
+import pe from "diagram-js/lib/features/rules";
+import me from "diagram-js/lib/features/rules/RuleProvider";
+import he from "diagram-js/lib/command/CommandInterceptor";
+import ge from "diagram-js/lib/features/palette";
+import _e from "diagram-js/lib/features/create";
+import ve from "diagram-js/lib/features/palette/PaletteTooltipComponent";
+import { html as ye } from "diagram-js/lib/ui";
+import be from "diagram-js/lib/features/connect";
+import xe from "diagram-js/lib/features/connection-preview";
+import Se from "diagram-js/lib/features/context-pad";
+import Ce from "diagram-js/lib/features/copy-paste";
+import we from "diagram-js/lib/features/copy-paste/CopyPaste.js";
+import { MODELER_API_VERSION as Te } from "@miragon/modeler-api";
+// src/theme/palette.ts
+var w = {
+	blau: "#335DE5",
+	blauLink: "#2B50D4",
+	blauHell: "#6B8AFF",
+	gruen: "#00E676",
+	grau: "#F9F7F7",
+	schwarz: "#1D1D1D",
+	weiss: "#FFFFFF",
+	linie: "#E6E2E2",
+	kontur: "#8F8A8A",
+	textLeise: "#6B6666",
+	success: "#00E676",
+	successSoft: "#DAFBEB",
+	warning: "#FFB000",
+	warningSoft: "#FFF1D2",
+	danger: "#CD1839",
+	dangerSoft: "#FBEEF0",
+	info: "#335DE5",
+	infoSoft: "#EEF1FD",
+	successHell: "#00E676",
+	warningHell: "#FFB000",
+	dangerHell: "#FB6D73",
+	infoHell: "#6B8AFF",
+	gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
+}, Ee = {
+	"--cd-blau": w.blau,
+	"--cd-gruen": w.gruen,
+	"--cd-grau": w.grau,
+	"--cd-schwarz": w.schwarz,
+	"--cd-weiss": w.weiss,
+	"--cd-blau-link": w.blauLink,
+	"--cd-blau-hell": w.blauHell,
+	"--cd-linie": w.linie,
+	"--cd-kontur": w.kontur,
+	"--cd-text-leise": w.textLeise,
+	"--cd-success": w.success,
+	"--cd-success-soft": w.successSoft,
+	"--cd-warning": w.warning,
+	"--cd-warning-soft": w.warningSoft,
+	"--cd-danger": w.danger,
+	"--cd-danger-soft": w.dangerSoft,
+	"--cd-info": w.info,
+	"--cd-info-soft": w.infoSoft,
+	"--cd-success-hell": w.successHell,
+	"--cd-warning-hell": w.warningHell,
+	"--cd-danger-hell": w.dangerHell,
+	"--cd-info-hell": w.infoHell,
+	"--cd-gradient-brand": w.gradientBrand
+}, De = /* @__PURE__ */ new Set([
 	"team",
 	"interaction",
 	"flow",
@@ -36,7 +86,7 @@ function T(e) {
 }
 function E(e) {
 	let t = T(e);
-	return t !== void 0 && Ce.has(t);
+	return t !== void 0 && De.has(t);
 }
 function D(e) {
 	return T(e) === "team";
@@ -53,98 +103,241 @@ function A(e) {
 function j(e) {
 	return T(e) === "association";
 }
-//#endregion
-//#region src/theme/palette.ts
-var M = {
-	blau: "#335DE5",
-	blauLink: "#2B50D4",
-	blauHell: "#6B8AFF",
-	gruen: "#00E676",
-	grau: "#F9F7F7",
-	schwarz: "#1D1D1D",
-	weiss: "#FFFFFF",
-	linie: "#E6E2E2",
-	kontur: "#8F8A8A",
-	textLeise: "#6B6666",
-	success: "#00E676",
-	successSoft: "#DAFBEB",
-	warning: "#FFB000",
-	warningSoft: "#FFF1D2",
-	danger: "#CD1839",
-	dangerSoft: "#FBEEF0",
-	info: "#335DE5",
-	infoSoft: "#EEF1FD",
-	successHell: "#00E676",
-	warningHell: "#FFB000",
-	dangerHell: "#FB6D73",
-	infoHell: "#6B8AFF",
-	gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
-}, we = {
-	"--cd-blau": M.blau,
-	"--cd-gruen": M.gruen,
-	"--cd-grau": M.grau,
-	"--cd-schwarz": M.schwarz,
-	"--cd-weiss": M.weiss,
-	"--cd-blau-link": M.blauLink,
-	"--cd-blau-hell": M.blauHell,
-	"--cd-linie": M.linie,
-	"--cd-kontur": M.kontur,
-	"--cd-text-leise": M.textLeise,
-	"--cd-success": M.success,
-	"--cd-success-soft": M.successSoft,
-	"--cd-warning": M.warning,
-	"--cd-warning-soft": M.warningSoft,
-	"--cd-danger": M.danger,
-	"--cd-danger-soft": M.dangerSoft,
-	"--cd-info": M.info,
-	"--cd-info-soft": M.infoSoft,
-	"--cd-success-hell": M.successHell,
-	"--cd-warning-hell": M.warningHell,
-	"--cd-danger-hell": M.dangerHell,
-	"--cd-info-hell": M.infoHell,
-	"--cd-gradient-brand": M.gradientBrand
-}, N = 40, P = "http://www.w3.org/2000/svg", Te = [
-	".djs-outline",
-	".djs-resizer",
-	".djs-selection-outline",
-	".djs-lasso-overlay",
-	".djs-dragger",
-	".djs-bendpoint",
-	".djs-segment-dragger"
-].join(", "), Ee = ["selected", "hover"], De = [
+// src/theme/notation-fills.ts
+var Oe = {
+	collaboration: "#E3DFEF",
+	"x-as-a-service": "#DADADA",
+	facilitating: "#E4EFDF"
+};
+// src/draw/colour.ts
+function M(e) {
+	if (typeof e != "string") return;
+	let t = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
+	if (!t) return;
+	let n = t[1].length === 3 ? [...t[1]].map((e) => e + e).join("") : t[1], r = (e) => parseInt(n.slice(e, e + 2), 16);
+	return [
+		r(0),
+		r(2),
+		r(4)
+	];
+}
+function ke(e) {
+	return `#${e.map((e) => e.toString(16).padStart(2, "0")).join("")}`.toUpperCase();
+}
+function Ae(e, t, n) {
+	let r = (r) => Math.round(e[r] * n + t[r] * (1 - n));
+	return [
+		r(0),
+		r(1),
+		r(2)
+	];
+}
+function je([e, t, n]) {
+	let r = (e) => {
+		let t = e / 255;
+		return t <= .04045 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * r(e) + .7152 * r(t) + .0722 * r(n);
+}
+function Me(e, t) {
+	let [n, r] = [je(e), je(t)].sort((e, t) => t - e);
+	return (n + .05) / (r + .05);
+}
+function Ne(e, t) {
+	let n = M(e), r = M(w.weiss);
+	if (n && r) return ke(Ae(n, r, t));
+}
+function Pe(e) {
+	let t = d[e.mode] ?? d.collaboration;
+	if (e.fill === void 0) return {
+		fill: Oe[t.mode],
+		fillOpacity: 1
+	};
+	let n = Ne(e.fill, t.opacity);
+	return n ? {
+		fill: n,
+		fillOpacity: 1
+	} : {
+		fill: e.fill,
+		fillOpacity: t.opacity
+	};
+}
+// src/draw/styles.ts
+var Fe = 1500, N = w.schwarz, Ie = w.textLeise, Le = w.kontur, P = {
+	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
+	label: 13.5,
+	small: 11,
+	annotation: 12
+}, Re = 10, F = {
+	left: 10,
+	right: 6,
+	top: 6,
+	bottom: 6
+}, I = 1.2, ze = .58, Be = 4.5;
+function Ve(e) {
+	let t = M(e), n = M(N), r = M(w.weiss);
+	if (!t || !n || !r) return N;
+	let i = Me(n, t);
+	return i >= Be ? N : Me(r, t) > i ? w.weiss : N;
+}
+function He(e) {
+	if (O(e)) return Ve(Pe(e).fill);
+	let t = p[e.teamType] ?? p["stream-aligned"];
+	return Ve(e.fill ?? t.fill);
+}
+function Ue(e, t) {
+	return Math.min(e * .16, t * 1.1);
+}
+function L(e) {
+	let t = Math.max(e.width, 1), n = Math.max(e.height, 1);
+	return A(e) ? {
+		box: {
+			x: F.left,
+			y: F.top,
+			width: Math.max(t - F.left - F.right, 1),
+			height: Math.max(n - F.top - F.bottom, 1)
+		},
+		align: "left-top",
+		fontSize: P.annotation,
+		fontWeight: "400",
+		fill: N
+	} : k(e) ? {
+		box: {
+			x: Re,
+			y: 0,
+			width: t - Ue(t, n) - 20,
+			height: n
+		},
+		align: "center",
+		fontSize: P.small,
+		fontWeight: "600",
+		letterSpacing: "0.06em",
+		fill: Ie
+	} : {
+		box: {
+			x: Re,
+			y: 0,
+			width: t - 20,
+			height: n
+		},
+		align: "center",
+		fontSize: O(e) ? P.small : P.label,
+		fontWeight: "600",
+		fill: He(e)
+	};
+}
+function We(e, t, n) {
+	let r = Math.max(4, Math.floor(t / (n * ze))), i = e.split(/\r?\n/), a = [];
+	for (let e of i) {
+		let t = e.split(/\s+/).filter(Boolean), n = "";
+		for (let e of t) {
+			let t = n ? `${n} ${e}` : e;
+			t.length > r && n ? (a.push(n), n = e) : n = t;
+		}
+		a.push(n);
+	}
+	for (; a.length > 0 && a[a.length - 1] === "";) a.pop();
+	for (; a.length > 0 && a[0] === "";) a.shift();
+	return a;
+}
+function Ge(e) {
+	let t = L(e), { box: n, fontSize: r } = t, i = We(e.ttLabel ?? "", n.width, r);
+	if (i.length === 0) return;
+	let a = Math.max(...i.map((e) => e.length)) * r * ze, o = i.length * r * I;
+	return t.align === "left-top" ? {
+		x: n.x,
+		y: n.y,
+		width: a,
+		height: o
+	} : {
+		x: n.x + (n.width - a) / 2,
+		y: n.y + (n.height - o) / 2,
+		width: a,
+		height: o
+	};
+}
+// src/io/TtViewport.ts
+var Ke = 760, qe = 88, Je = 120, R = 56, Ye = 24, Xe = 1;
+function Ze(e) {
+	let t = Infinity, n = Infinity, r = -Infinity, i = -Infinity, a = (e, a, o, s) => {
+		t = Math.min(t, e), n = Math.min(n, a), r = Math.max(r, e + o), i = Math.max(i, a + s);
+	};
+	for (let t of e.getAll()) {
+		let e = t;
+		if (typeof e.x != "number" || typeof e.y != "number" || typeof e.width != "number" || typeof e.height != "number") continue;
+		a(e.x, e.y, e.width, e.height);
+		let n = E(t) ? Ge(t) : void 0;
+		n && a(e.x + n.x, e.y + n.y, n.width, n.height);
+	}
+	return Number.isFinite(t) ? {
+		minX: t,
+		minY: n,
+		maxX: r,
+		maxY: i
+	} : void 0;
+}
+var Qe = class {
+	canvas;
+	elementRegistry;
+	static $inject = ["canvas", "elementRegistry"];
+	constructor(e, t) {
+		this.canvas = e, this.elementRegistry = t;
+	}
+	fit() {
+		let e = this.contentBounds();
+		if (!e) return;
+		let t = this.canvas.getContainer().getBoundingClientRect(), n = t.width, r = t.height;
+		if (!n || !r) {
+			this.canvas.zoom("fit-viewport");
+			return;
+		}
+		let i = n <= Ke, a = i ? Je : qe, o = i ? Ye : R, s = Math.max(e.maxX - e.minX, 1), c = Math.max(e.maxY - e.minY, 1), l = Math.min((n - 2 * o) / s, (r - a - R) / c, Xe);
+		l > 0 ? this.canvas.viewbox({
+			x: e.minX + s / 2 - n / 2 / l,
+			y: this.viewboxTop(e, c, l, r, a, i),
+			width: n / l,
+			height: r / l
+		}) : this.canvas.zoom("fit-viewport");
+	}
+	viewboxTop(e, t, n, r, i, a) {
+		if (!a) return e.minY - i / n;
+		let o = r - i - R, s = Math.max(0, o - t * n);
+		return e.minY - (i + s / 2) / n;
+	}
+	contentBounds() {
+		return Ze(this.elementRegistry);
+	}
+}, z = 40, $e = {
+	minX: 0,
+	minY: 0,
+	maxX: 100,
+	maxY: 100
+}, et = "http://www.w3.org/2000/svg", tt = ".djs-outline, .djs-resizer, .djs-selection-outline, .djs-lasso-overlay, .djs-dragger, .djs-bendpoint, .djs-segment-dragger", nt = ["selected", "hover"], rt = [
 	"class",
 	"tabindex",
 	"role",
 	"aria-roledescription",
 	"aria-label"
 ];
-function Oe(e, t) {
+function it(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 (!E(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 - N, c = i - N, l = a - r + 80, u = o - i + 80, d = n.cloneNode(!0);
-	for (let e of De) d.removeAttribute(e);
-	for (let e of d.querySelectorAll(Te)) e.remove();
-	for (let e of d.querySelectorAll(Ee.map((e) => `.${e}`).join())) e.classList.remove(...Ee);
-	d.setAttribute("xmlns", P), 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");
-	f && f.removeAttribute("transform");
-	let p = d.ownerDocument.createElementNS(P, "rect");
-	return p.setAttribute("class", "tt-export-paper"), p.setAttribute("x", String(s)), p.setAttribute("y", String(c)), p.setAttribute("width", String(l)), p.setAttribute("height", String(u)), p.setAttribute("fill", M.weiss), d.insertBefore(p, d.firstChild), { svg: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + new XMLSerializer().serializeToString(d) };
-}
-//#endregion
-//#region src/io/types.ts
-var F = a, I = "tt-canvas-keyboard-focus";
-function ke(e) {
+	let r = Ze(t) ?? $e, i = Math.floor(r.minX - z), a = Math.floor(r.minY - z), o = Math.ceil(r.maxX + z) - i, s = Math.ceil(r.maxY + z) - a, c = n.cloneNode(!0);
+	for (let e of rt) c.removeAttribute(e);
+	for (let e of c.querySelectorAll(tt)) e.remove();
+	for (let e of c.querySelectorAll(nt.map((e) => `.${e}`).join())) e.classList.remove(...nt);
+	c.setAttribute("xmlns", et), c.setAttribute("viewBox", `${i} ${a} ${o} ${s}`), c.setAttribute("width", String(o)), c.setAttribute("height", String(s));
+	let l = c.querySelector(".viewport");
+	l && l.removeAttribute("transform");
+	let u = c.ownerDocument.createElementNS(et, "rect");
+	return u.setAttribute("class", "tt-export-paper"), u.setAttribute("x", String(i)), u.setAttribute("y", String(a)), u.setAttribute("width", String(o)), u.setAttribute("height", String(s)), u.setAttribute("fill", w.weiss), c.insertBefore(u, c.firstChild), { svg: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + new XMLSerializer().serializeToString(c) };
+}
+// src/io/types.ts
+var B = a, V = "tt-canvas-keyboard-focus";
+function at(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var Ae = class {
+var ot = class {
 	_diagram;
 	_container;
 	_options;
@@ -153,7 +346,7 @@ var Ae = class {
 	}
 	_createContainer(e) {
 		let t = e.container ?? document.createElement("div");
-		return t.classList.add("tt-djs-container"), t.style.width = ke(e.width ?? "100%"), t.style.height = ke(e.height ?? (e.container ? "100%" : "600px")), t;
+		return t.classList.add("tt-djs-container"), t.style.width = at(e.width ?? "100%"), t.style.height = at(e.height ?? (e.container ? "100%" : "600px")), t;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
@@ -165,7 +358,8 @@ var Ae = class {
 				ttPalette: {
 					freeArea: this._options.freeArea,
 					freeRectCenter: this._options.freeRectCenter
-				}
+				},
+				ttContextPad: { freeArea: this._options.freeArea }
 			}), this._describeCanvas(this._diagram);
 		}
 		return this._diagram;
@@ -177,9 +371,9 @@ var Ae = class {
 		let r = t.ownerDocument, i = !1, a = (e) => {
 			i = e.key === "Tab";
 		}, o = () => {
-			i = !1, n.classList.remove(I);
+			i = !1, n.classList.remove(V);
 		};
-		r.addEventListener("keydown", a, !0), r.addEventListener("pointerdown", o, !0), n.addEventListener("focusin", () => n.classList.toggle(I, i)), n.addEventListener("focusout", () => n.classList.remove(I)), e.get("eventBus").on("diagram.destroy", () => {
+		r.addEventListener("keydown", a, !0), r.addEventListener("pointerdown", o, !0), n.addEventListener("focusin", () => n.classList.toggle(V, i)), n.addEventListener("focusout", () => n.classList.remove(V)), e.get("eventBus").on("diagram.destroy", () => {
 			r.removeEventListener("keydown", a, !0), r.removeEventListener("pointerdown", o, !0);
 		});
 	}
@@ -226,7 +420,7 @@ var Ae = class {
 		} catch {
 			return;
 		}
-		if (!n || n.id !== F) return;
+		if (!n || n.id !== B) return;
 		let r = n.businessObject ?? { title: "Untitled team topology" };
 		n.businessObject = {
 			...r,
@@ -241,7 +435,7 @@ var Ae = class {
 		}
 	}
 	saveSVG() {
-		return Oe(this.get("canvas"), this.get("elementRegistry"));
+		return it(this.get("canvas"), this.get("elementRegistry"));
 	}
 	attachTo(e) {
 		e.appendChild(this._container), this.get("canvas").resized();
@@ -258,7 +452,7 @@ var Ae = class {
 	get container() {
 		return this._container;
 	}
-}, je = class {
+}, st = class {
 	elementFactory;
 	static $inject = ["elementFactory"];
 	constructor(e) {
@@ -377,138 +571,10 @@ var Ae = class {
 			ttKind: "association"
 		});
 	}
-}, Me = { ttElementFactory: ["type", je] }, Ne = 1500, L = M.schwarz, Pe = M.textLeise, Fe = M.kontur, R = {
-	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
-	label: 13.5,
-	small: 11,
-	annotation: 12
-}, Ie = 10, z = {
-	left: 10,
-	right: 6,
-	top: 6,
-	bottom: 6
-}, B = 1.2, Le = .58, Re = 4.5;
-function V(e) {
-	if (typeof e != "string") return;
-	let t = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
-	if (!t) return;
-	let n = t[1].length === 3 ? [...t[1]].map((e) => e + e).join("") : t[1], r = (e) => parseInt(n.slice(e, e + 2), 16);
-	return [
-		r(0),
-		r(2),
-		r(4)
-	];
-}
-function ze(e, t, n) {
-	let r = (r) => Math.round(e[r] * n + t[r] * (1 - n));
-	return [
-		r(0),
-		r(1),
-		r(2)
-	];
-}
-function Be([e, t, n]) {
-	let r = (e) => {
-		let t = e / 255;
-		return t <= .04045 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
-	};
-	return .2126 * r(e) + .7152 * r(t) + .0722 * r(n);
-}
-function Ve(e, t) {
-	let [n, r] = [Be(e), Be(t)].sort((e, t) => t - e);
-	return (n + .05) / (r + .05);
-}
-function He(e, t = 1) {
-	let n = V(e), r = V(L), i = V(M.weiss);
-	if (!n || !r || !i) return L;
-	let a = ze(n, i, t), o = Ve(r, a);
-	return o >= Re ? L : Ve(i, a) > o ? M.weiss : L;
-}
-function Ue(e) {
-	if (O(e)) {
-		let t = d[e.mode] ?? d.collaboration;
-		return He(e.fill ?? t.fill, t.opacity);
-	}
-	let t = p[e.teamType] ?? p["stream-aligned"];
-	return He(e.fill ?? t.fill);
-}
-function We(e, t) {
-	return Math.min(e * .16, t * 1.1);
-}
-function H(e) {
-	let t = Math.max(e.width, 1), n = Math.max(e.height, 1);
-	return A(e) ? {
-		box: {
-			x: z.left,
-			y: z.top,
-			width: Math.max(t - z.left - z.right, 1),
-			height: Math.max(n - z.top - z.bottom, 1)
-		},
-		align: "left-top",
-		fontSize: R.annotation,
-		fontWeight: "400",
-		fill: L
-	} : k(e) ? {
-		box: {
-			x: Ie,
-			y: 0,
-			width: t - We(t, n) - 20,
-			height: n
-		},
-		align: "center",
-		fontSize: R.small,
-		fontWeight: "600",
-		letterSpacing: "0.06em",
-		fill: Pe
-	} : {
-		box: {
-			x: Ie,
-			y: 0,
-			width: t - 20,
-			height: n
-		},
-		align: "center",
-		fontSize: O(e) ? R.small : R.label,
-		fontWeight: "600",
-		fill: Ue(e)
-	};
-}
-function Ge(e, t, n) {
-	let r = Math.max(4, Math.floor(t / (n * Le))), i = e.split(/\r?\n/), a = [];
-	for (let e of i) {
-		let t = e.split(/\s+/).filter(Boolean), n = "";
-		for (let e of t) {
-			let t = n ? `${n} ${e}` : e;
-			t.length > r && n ? (a.push(n), n = e) : n = t;
-		}
-		a.push(n);
-	}
-	for (; a.length > 0 && a[a.length - 1] === "";) a.pop();
-	for (; a.length > 0 && a[0] === "";) a.shift();
-	return a;
-}
-function Ke(e) {
-	let t = H(e), { box: n, fontSize: r } = t, i = Ge(e.ttLabel ?? "", n.width, r);
-	if (i.length === 0) return;
-	let a = Math.max(...i.map((e) => e.length)) * r * Le, o = i.length * r * B;
-	return t.align === "left-top" ? {
-		x: n.x,
-		y: n.y,
-		width: a,
-		height: o
-	} : {
-		x: n.x + (n.width - a) / 2,
-		y: n.y + (n.height - o) / 2,
-		width: a,
-		height: o
-	};
-}
-//#endregion
-//#region src/draw/TeamTopologiesRenderer.ts
-var qe = class extends re {
+}, ct = { ttElementFactory: ["type", st] }, lt = class extends re {
 	static $inject = ["eventBus"];
 	constructor(e) {
-		super(e, Ne);
+		super(e, Fe);
 	}
 	canRender(e) {
 		return E(e) || j(e);
@@ -521,15 +587,15 @@ var qe = class extends re {
 		let n = S(C("rect"), {
 			width: t.width,
 			height: t.height,
-			fill: M.linie
+			fill: w.linie
 		});
 		return x(e, n), n;
 	}
 	drawConnection(e, t) {
 		let n = S(C("path"), {
-			d: Ye(t.waypoints),
+			d: dt(t.waypoints),
 			fill: "none",
-			stroke: Fe,
+			stroke: Le,
 			"stroke-width": 1.5,
 			"stroke-dasharray": "4 4",
 			"stroke-linecap": "round"
@@ -541,7 +607,7 @@ var qe = class extends re {
 		return `M${t},${n}l${r},0l0,${i}l${-r},0z`;
 	}
 	getConnectionPath(e) {
-		return Ye(e.waypoints);
+		return dt(e.waypoints);
 	}
 	drawTeam(e, t) {
 		let n = p[t.teamType] ?? p["stream-aligned"], r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = n.strokeWidth, o = h(n.strokeStyle, a), s = this.teamOutline(n.shape, r, i, a, {
@@ -551,14 +617,14 @@ var qe = class extends re {
 			...o ? { "stroke-dasharray": o } : {},
 			"stroke-linejoin": "round"
 		});
-		return x(e, s), this.appendLabel(e, t.ttLabel ?? "", H(t)), s;
+		return x(e, s), this.appendLabel(e, t.ttLabel ?? "", L(t)), s;
 	}
 	teamOutline(e, t, n, r, i) {
 		let a = r / 2, o = t - r, s = n - r;
 		if (e === "octagon") {
 			let e = Math.min(o, s) * .29;
 			return S(C("polygon"), {
-				points: Je(a, o, s, e),
+				points: ut(a, o, s, e),
 				...i
 			});
 		}
@@ -574,38 +640,38 @@ var qe = class extends re {
 		});
 	}
 	drawInteraction(e, t) {
-		let n = d[t.mode] ?? d.collaboration, r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = {
-			fill: t.fill ?? n.fill,
-			"fill-opacity": n.opacity,
+		let n = d[t.mode] ?? d.collaboration, r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = Pe(t), o = {
+			fill: a.fill,
+			...a.fillOpacity < 1 ? { "fill-opacity": a.fillOpacity } : {},
 			stroke: t.stroke ?? n.stroke,
 			"stroke-width": 2,
 			"stroke-dasharray": h(n.strokeStyle, 2) || "6 4",
 			"stroke-linejoin": "round"
-		}, o;
-		if (n.shape === "circle") o = S(C("ellipse"), {
+		}, s;
+		if (n.shape === "circle") s = S(C("ellipse"), {
 			cx: r / 2,
 			cy: i / 2,
 			rx: (r - 2) / 2,
 			ry: (i - 2) / 2,
-			...a
+			...o
 		});
 		else if (n.shape === "triangle") {
 			let e = `${r / 2},1 ${r - 1},${i - 1} 1,${i - 1}`;
-			o = S(C("polygon"), {
+			s = S(C("polygon"), {
 				points: e,
-				...a
+				...o
 			});
 		} else {
 			let e = Math.min(r * .26, i * .85), t = `${1 + e},1 ${r - 1},1 ${r - 1 - e},${i - 1} 1,${i - 1}`;
-			o = S(C("polygon"), {
+			s = S(C("polygon"), {
 				points: t,
-				...a
+				...o
 			});
 		}
-		return x(e, o), this.appendLabel(e, t.ttLabel ?? "", H(t)), o;
+		return x(e, s), this.appendLabel(e, t.ttLabel ?? "", L(t)), s;
 	}
 	drawFlow(e, t) {
-		let n = Math.max(t.width, 1), r = Math.max(t.height, 1), i = l.strokeWidth, a = i / 2, o = We(n, r), s = r * .5, c = (r - s) / 2, u = c + s, d = [
+		let n = Math.max(t.width, 1), r = Math.max(t.height, 1), i = l.strokeWidth, a = i / 2, o = Ue(n, r), s = r * .5, c = (r - s) / 2, u = c + s, d = [
 			[a, c],
 			[n - o, c],
 			[n - o, a],
@@ -621,26 +687,26 @@ var qe = class extends re {
 			"stroke-dasharray": h(l.strokeStyle, i) || "6 4",
 			"stroke-linejoin": "round"
 		});
-		return x(e, f), this.appendLabel(e, t.ttLabel ?? "", H(t)), f;
+		return x(e, f), this.appendLabel(e, t.ttLabel ?? "", L(t)), f;
 	}
 	drawAnnotation(e, t) {
 		let n = Math.max(t.width, 1), r = Math.max(t.height, 1), i = 1.5, a = i / 2, o = Math.min(14, n / 2), s = S(C("path"), {
 			d: `M${o},${a} L${a},${a} L${a},${r - a} L${o},${r - a}`,
 			fill: "none",
-			stroke: Fe,
+			stroke: Le,
 			"stroke-width": i,
 			"stroke-linejoin": "round"
 		});
-		return x(e, s), this.appendLabel(e, t.ttLabel ?? "", H(t)), s;
+		return x(e, s), this.appendLabel(e, t.ttLabel ?? "", L(t)), s;
 	}
 	appendLabel(e, t, n) {
-		let { box: r, fontSize: i } = n, a = Ge(t, r.width, i), o = i * B, s = n.align === "center", c = s ? r.x + r.width / 2 : r.x, l = s ? r.y + r.height / 2 - (a.length - 1) * o / 2 : r.y + o / 2;
+		let { box: r, fontSize: i } = n, a = We(t, r.width, i), o = i * I, s = n.align === "center", c = s ? r.x + r.width / 2 : r.x, l = s ? r.y + r.height / 2 - (a.length - 1) * o / 2 : r.y + o / 2;
 		a.forEach((t, r) => {
 			if (!t) return;
 			let a = S(C("text"), {
 				x: c,
 				y: l + r * o,
-				"font-family": R.family,
+				"font-family": P.family,
 				"font-size": i,
 				fill: n.fill,
 				"text-anchor": s ? "middle" : "start",
@@ -652,7 +718,7 @@ var qe = class extends re {
 		});
 	}
 };
-function Je(e, t, n, r) {
+function ut(e, t, n, r) {
 	return [
 		[e + r, e],
 		[e + t - r, e],
@@ -664,16 +730,15 @@ function Je(e, t, n, r) {
 		[e, e + r]
 	].map((e) => e.join(",")).join(" ");
 }
-function Ye(e) {
+function dt(e) {
 	return e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x},${e.y}`).join(" ");
 }
-//#endregion
-//#region src/draw/index.ts
-var Xe = {
+// src/draw/index.ts
+var ft = {
 	__init__: ["ttRenderer"],
-	ttRenderer: ["type", qe],
+	ttRenderer: ["type", lt],
 	connectionDocking: ["type", ne]
-}, Ze = class {
+}, pt = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -701,7 +766,7 @@ var Xe = {
 			n = void 0;
 		}
 		let r;
-		n && n.id === F ? r = n : (r = this.elementFactory.createRoot({ id: F }), this.canvas.setRootElement(r));
+		n && n.id === B ? r = n : (r = this.elementFactory.createRoot({ id: B }), this.canvas.setRootElement(r));
 		let i = _(e, o);
 		r.businessObject = {
 			title: e.title,
@@ -733,7 +798,7 @@ var Xe = {
 			this.canvas.removeShape(e.id);
 		} catch {}
 	}
-}, Qe = class {
+}, mt = class {
 	elementRegistry;
 	canvas;
 	static $inject = ["elementRegistry", "canvas"];
@@ -749,7 +814,7 @@ var Xe = {
 		}
 		let t = [], n = [], i = [], a = [];
 		for (let e of this.elementRegistry.getAll()) {
-			if (e.id === F) continue;
+			if (e.id === B) continue;
 			let o = e, s = {
 				x: o.x,
 				y: o.y
@@ -783,7 +848,7 @@ var Xe = {
 				...e.ttLabel ? { label: e.ttLabel } : {}
 			}, e.ttForeign, c));
 			else if (A(e)) {
-				let t = $e(e);
+				let t = ht(e);
 				a.push(y({
 					id: e.id,
 					text: e.ttLabel ?? "",
@@ -803,86 +868,38 @@ var Xe = {
 		}, e?.foreign, o);
 	}
 };
-function $e(e) {
+function ht(e) {
 	let t = [...e.outgoing, ...e.incoming].find(j);
 	if (t) return (t.source === e ? t.target : t.source)?.id;
 }
-//#endregion
-//#region src/io/TtViewport.ts
-var et = 760, tt = 88, nt = 120, U = 56, rt = 24, it = 1, at = class {
-	canvas;
-	elementRegistry;
-	static $inject = ["canvas", "elementRegistry"];
-	constructor(e, t) {
-		this.canvas = e, this.elementRegistry = t;
-	}
-	fit() {
-		let e = this.contentBounds();
-		if (!e) return;
-		let t = this.canvas.getContainer().getBoundingClientRect(), n = t.width, r = t.height;
-		if (!n || !r) {
-			this.canvas.zoom("fit-viewport");
-			return;
-		}
-		let i = n <= et, a = i ? nt : tt, o = i ? rt : U, s = Math.max(e.maxX - e.minX, 1), c = Math.max(e.maxY - e.minY, 1), l = Math.min((n - 2 * o) / s, (r - a - U) / c, it);
-		l > 0 ? this.canvas.viewbox({
-			x: e.minX + s / 2 - n / 2 / l,
-			y: this.viewboxTop(e, c, l, r, a, i),
-			width: n / l,
-			height: r / l
-		}) : this.canvas.zoom("fit-viewport");
-	}
-	viewboxTop(e, t, n, r, i, a) {
-		if (!a) return e.minY - i / n;
-		let o = r - i - U, s = Math.max(0, o - t * n);
-		return e.minY - (i + s / 2) / n;
-	}
-	contentBounds() {
-		let e = Infinity, t = Infinity, n = -Infinity, r = -Infinity, i = (i, a, o, s) => {
-			e = Math.min(e, i), t = Math.min(t, a), n = Math.max(n, i + o), r = Math.max(r, a + s);
-		};
-		for (let e of this.elementRegistry.getAll()) {
-			let t = e;
-			if (typeof t.x != "number" || typeof t.y != "number" || typeof t.width != "number" || typeof t.height != "number") continue;
-			i(t.x, t.y, t.width, t.height);
-			let n = E(e) ? Ke(e) : void 0;
-			n && i(t.x + n.x, t.y + n.y, n.width, n.height);
-		}
-		return Number.isFinite(e) ? {
-			minX: e,
-			minY: t,
-			maxX: n,
-			maxY: r
-		} : void 0;
-	}
-}, W = "http://www.w3.org/2000/svg", G = {
+// src/io/fontEmbedding.ts
+var H = "http://www.w3.org/2000/svg", U = {
 	latin: "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD",
 	latinExt: "U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF"
 };
-function ot(e) {
-	return Object.keys(G).map((t) => `@font-face{font-family:'Geist Variable';font-style:normal;font-weight:100 900;font-display:block;src:url(${e[t].replace(/^data:[^;,]*/, "data:font/woff2")}) format('woff2');unicode-range:${G[t]};}`).join("");
+function gt(e) {
+	return Object.keys(U).map((t) => `@font-face{font-family:'Geist Variable';font-style:normal;font-weight:100 900;font-display:block;src:url(${e[t].replace(/^data:[^;,]*/, "data:font/woff2")}) format('woff2');unicode-range:${U[t]};}`).join("");
 }
-function st(e, t) {
+function _t(e, t) {
 	let n = new DOMParser().parseFromString(e, "image/svg+xml"), r = n.documentElement;
-	if (r.namespaceURI !== W || n.querySelector("parsererror")) return e;
-	let i = n.createElementNS(W, "defs"), a = n.createElementNS(W, "style");
+	if (r.namespaceURI !== H || n.querySelector("parsererror")) return e;
+	let i = n.createElementNS(H, "defs"), a = n.createElementNS(H, "style");
 	return a.textContent = t, i.appendChild(a), r.insertBefore(i, r.firstChild), new XMLSerializer().serializeToString(n);
 }
-//#endregion
-//#region src/io/index.ts
-var ct = {
-	ttImporter: ["type", Ze],
-	ttExporter: ["type", Qe],
-	ttViewport: ["type", at]
-}, lt = class extends Ae {
+// src/io/index.ts
+var vt = {
+	ttImporter: ["type", pt],
+	ttExporter: ["type", mt],
+	ttViewport: ["type", Qe]
+}, yt = class extends ot {
 	_getModules() {
 		return [
-			Me,
-			Xe,
-			ct
+			ct,
+			ft,
+			vt
 		];
 	}
-}, K = class extends lt {
+}, W = class extends yt {
 	_getModules() {
 		return [
 			...super._getModules(),
@@ -892,30 +909,29 @@ var ct = {
 		];
 	}
 };
-//#endregion
-//#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function ut(e, t, n) {
+// src/modeling/cmd/UpdatePropertiesHandler.ts
+function bt(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var dt = class {
+var xt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], ut(r, e, n[e]);
+		for (let e of Object.keys(n)) i[e] = r[e], bt(r, e, n[e]);
 		return e.oldProperties = i, [t];
 	}
 	revert(e) {
 		let { element: t, oldProperties: n } = e, r = t;
-		if (n) for (let e of Object.keys(n)) ut(r, e, n[e]);
+		if (n) for (let e of Object.keys(n)) bt(r, e, n[e]);
 		return [t];
 	}
-}, q = "Untitled team topology", ft = class {
+}, G = "Untitled team topology", St = class {
 	canvas;
 	static $inject = ["canvas"];
 	constructor(e) {
 		this.canvas = e;
 	}
 	execute(e) {
-		let t = this.canvas.getRootElement(), n = t.businessObject ?? { title: q };
+		let t = this.canvas.getRootElement(), n = t.businessObject ?? { title: G };
 		return e.oldTitle = n.title, t.businessObject = {
 			...n,
 			title: e.title
@@ -924,11 +940,11 @@ var dt = class {
 	revert(e) {
 		let t = this.canvas.getRootElement();
 		return t.businessObject = {
-			...t.businessObject ?? { title: q },
-			title: e.oldTitle ?? q
+			...t.businessObject ?? { title: G },
+			title: e.oldTitle ?? G
 		}, [t];
 	}
-}, pt = "element.updateProperties", mt = "tt.title.update", ht = 40, gt = class {
+}, Ct = "element.updateProperties", wt = "tt.title.update", Tt = 40, Et = class {
 	commandStack;
 	modeling;
 	factory;
@@ -940,13 +956,13 @@ var dt = class {
 		"canvas"
 	];
 	constructor(e, t, n, r) {
-		this.commandStack = e, this.modeling = t, this.factory = n, this.canvas = r, e.registerHandler(pt, dt), e.registerHandler(mt, ft);
+		this.commandStack = e, this.modeling = t, this.factory = n, this.canvas = r, e.registerHandler(Ct, xt), e.registerHandler(wt, St);
 	}
 	setTitle(e) {
-		this.commandStack.execute(mt, { title: e });
+		this.commandStack.execute(wt, { title: e });
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(pt, {
+		this.commandStack.execute(Ct, {
 			element: e,
 			properties: t
 		});
@@ -971,8 +987,8 @@ var dt = class {
 	}
 	appendAnnotation(e) {
 		let t = this.factory.createNewAnnotation(), n = {
-			x: e.x + e.width + ht + t.width / 2,
-			y: e.y - ht / 4
+			x: e.x + e.width + Tt + t.width / 2,
+			y: e.y - Tt / 4
 		};
 		return this.modeling.appendShape(e, t, n, this.canvas.getRootElement(), {
 			connection: this.factory.createNewAssociation(),
@@ -983,42 +999,41 @@ var dt = class {
 		let t = [...e.incoming, ...e.outgoing].filter(j);
 		t.length > 0 && this.modeling.removeElements(t);
 	}
-}, _t = class extends de {
+}, Dt = class extends fe {
 	layoutConnection(e, t = {}) {
 		let n = t.source ?? e.source, r = t.target ?? e.target;
 		return !n || !r ? super.layoutConnection(e, t) : [b(n), b(r)];
 	}
-}, vt = {
-	__depends__: [se],
+}, Ot = {
+	__depends__: [ce],
 	__init__: ["ttModeling"],
-	ttModeling: ["type", gt],
-	layouter: ["type", _t]
+	ttModeling: ["type", Et],
+	layouter: ["type", Dt]
 };
-//#endregion
-//#region src/rules/TtRules.ts
-function yt(e) {
+// src/rules/TtRules.ts
+function kt(e) {
 	return E(e) && !A(e);
 }
-var bt = class extends pe {
+var At = class extends me {
 	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("element.copy", () => !0), this.addRule("connection.create", ({ source: e, target: t }) => A(e) && yt(t) || A(t) && yt(e) ? { ttKind: "association" } : !1);
+		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("element.copy", () => !0), this.addRule("connection.create", ({ source: e, target: t }) => A(e) && kt(t) || A(t) && kt(e) ? { ttKind: "association" } : !1);
 	}
-}, xt = {
-	__depends__: [fe],
+}, jt = {
+	__depends__: [pe],
 	__init__: ["ttRules"],
-	ttRules: ["type", bt]
-}, St = class extends me {
+	ttRules: ["type", At]
+}, Mt = class extends he {
 	static $inject = ["eventBus", "canvas"];
 	constructor(e, t) {
 		super(e), this.preExecute(["shape.create", "elements.create"], (e) => {
 			e.parent = t.getRootElement();
 		}, !0);
 	}
-}, Ct = class extends me {
+}, Nt = class extends he {
 	static $inject = [
 		"eventBus",
 		"connectionDocking",
@@ -1038,21 +1053,21 @@ var bt = class extends pe {
 			i.length > 0 && n.removeElements(i);
 		}, !0);
 	}
-}, wt = {
+}, Pt = {
 	__init__: ["ttFlatModelBehavior", "ttAssociationBehavior"],
-	ttFlatModelBehavior: ["type", St],
-	ttAssociationBehavior: ["type", Ct]
-}, Tt = [["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" }]], Et = [
+	ttFlatModelBehavior: ["type", Mt],
+	ttAssociationBehavior: ["type", Nt]
+}, Ft = [["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" }]], It = [
 	["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" }]
-], Dt = [["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }], ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" }]], Ot = [
+], Lt = [["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }], ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" }]], Rt = [
 	["path", { d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }],
 	["path", { d: "M12 8v6" }],
 	["path", { d: "M9 11h6" }]
-], kt = [
+], zt = [
 	["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" }],
@@ -1063,20 +1078,20 @@ var bt = class extends pe {
 	["path", { d: "M3 9v1" }],
 	["path", { d: "M21 9v2" }],
 	["path", { d: "M3 14v1" }]
-], At = [
+], Bt = [
 	["path", { d: "M4 5h16" }],
 	["path", { d: "M4 12h16" }],
 	["path", { d: "M4 19h16" }]
-], jt = [["path", { d: "M5 12h14" }]], Mt = [["path", { d: "M5 12h14" }], ["path", { d: "M12 5v14" }]], Nt = [
+], Vt = [["path", { d: "M5 12h14" }]], Ht = [["path", { d: "M5 12h14" }], ["path", { d: "M12 5v14" }]], Ut = [
 	["path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }],
 	["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }],
 	["path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }],
 	["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" }]
-], Pt = [
+], Wt = [
 	["path", { d: "M12 15V3" }],
 	["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }],
 	["path", { d: "m7 10 5 5 5-5" }]
-], Ft = [["path", { d: "M18 6 6 18" }], ["path", { d: "m6 6 12 12" }]], It = 2.5, Lt = 16, Rt = [
+], Gt = [["path", { d: "M18 6 6 18" }], ["path", { d: "m6 6 12 12" }]], Kt = 2.5, qt = 16, Jt = [
 	"path",
 	"circle",
 	"ellipse",
@@ -1084,7 +1099,7 @@ var bt = class extends pe {
 	"polyline",
 	"polygon",
 	"rect"
-], zt = [
+], Yt = [
 	"d",
 	"cx",
 	"cy",
@@ -1101,85 +1116,107 @@ var bt = class extends pe {
 	"height",
 	"points"
 ];
-function Bt(e) {
+function Xt(e) {
 	return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function Vt(e, t) {
+function Zt(e, t) {
 	let n = Number(e);
 	return Number.isFinite(n) && n > 0 ? n : t;
 }
-function J(e, t = {}) {
-	let n = Vt(t.size, Lt), r = Vt(t.strokeWidth, It);
-	return `<svg${t.className ? ` class="${Bt(t.className)}"` : ""} xmlns="http://www.w3.org/2000/svg" width="${n}" height="${n}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${r}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${e.map(([e, t]) => {
-		let n = Rt.find((t) => t === e);
+function K(e, t = {}) {
+	let n = Zt(t.size, qt), r = Zt(t.strokeWidth, Kt);
+	return `<svg${t.className ? ` class="${Xt(t.className)}"` : ""} xmlns="http://www.w3.org/2000/svg" width="${n}" height="${n}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${r}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${e.map(([e, t]) => {
+		let n = Jt.find((t) => t === e);
 		return n ? `<${n} ${Object.entries(t).flatMap(([e, t]) => {
-			let n = zt.find((t) => t === e);
-			return n ? [`${n}="${Bt(String(t))}"`] : [];
+			let n = Yt.find((t) => t === e);
+			return n ? [`${n}="${Xt(String(t))}"`] : [];
 		}).join(" ")}/>` : "";
 	}).join("")}</svg>`;
 }
-//#endregion
-//#region src/draw/palette-icons.ts
-var Ht = {
+// src/draw/palette-icons.ts
+var Qt = {
 	size: 20,
 	strokeWidth: 2
 };
-function Y(e) {
+function q(e) {
 	return `<svg class="tt-palette-svg" width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
 }
-function Ut(e) {
+function $t(e) {
 	let t = p[e], n = h(t.strokeStyle, 1.5), r = `fill="${t.fill}" stroke="${t.stroke}" stroke-width="1.5"` + (n ? ` stroke-dasharray="${n}"` : "");
 	switch (t.shape) {
-		case "octagon": return Y(`<polygon points="8,3 18,3 23,8 23,18 18,23 8,23 3,18 3,8" ${r}/>`);
-		case "rounded-rect-vertical": return Y(`<rect x="8" y="3" width="10" height="20" rx="4" ${r}/>`);
-		case "rect": return Y(`<rect x="3" y="7" width="20" height="12" rx="1.5" ${r}/>`);
-		default: return Y(`<rect x="3" y="8" width="20" height="10" rx="5" ${r}/>`);
+		case "octagon": return q(`<polygon points="8,3 18,3 23,8 23,18 18,23 8,23 3,18 3,8" ${r}/>`);
+		case "rounded-rect-vertical": return q(`<rect x="8" y="3" width="10" height="20" rx="4" ${r}/>`);
+		case "rect": return q(`<rect x="3" y="7" width="20" height="12" rx="1.5" ${r}/>`);
+		default: return q(`<rect x="3" y="8" width="20" height="10" rx="5" ${r}/>`);
 	}
 }
-function Wt() {
+function en() {
 	let e = h(l.strokeStyle, 1.5);
-	return Y(`<g fill="none" stroke="${l.stroke}" stroke-width="1.5" stroke-linejoin="round"` + (e ? ` stroke-dasharray="${e}"` : "") + "><polygon points=\"3,9 16,9 16,5 23,13 16,21 16,17 3,17\"/></g>");
+	return q(`<g fill="none" stroke="${l.stroke}" stroke-width="1.5" stroke-linejoin="round"` + (e ? ` stroke-dasharray="${e}"` : "") + "><polygon points=\"3,9 16,9 16,5 23,13 16,21 16,17 3,17\"/></g>");
 }
-function Gt() {
-	return Y("<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M10 4H5v18h5\"/><path d=\"M13 9h9M13 13h9M13 17h6\"/></g>");
+function tn() {
+	return q("<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M10 4H5v18h5\"/><path d=\"M13 9h9M13 13h9M13 17h6\"/></g>");
 }
-function Kt() {
-	return J(kt, {
-		...Ht,
+function nn() {
+	return K(zt, {
+		...Qt,
 		className: "tt-palette-svg"
 	});
 }
-function qt(e) {
-	let t = d[e], n = h(t.strokeStyle, 1.5), r = `fill="${t.fill}" fill-opacity="${t.opacity}" stroke="${t.stroke}" stroke-width="1.5"` + (n ? ` stroke-dasharray="${n}"` : "");
+function rn(e) {
+	let t = d[e], n = h(t.strokeStyle, 1.5), r = `fill="${Oe[e]}" stroke="${t.stroke}" stroke-width="1.5"` + (n ? ` stroke-dasharray="${n}"` : "");
 	switch (t.shape) {
-		case "circle": return Y(`<circle cx="13" cy="13" r="9" ${r}/>`);
-		case "triangle": return Y(`<polygon points="5,6 22,13 5,20" ${r}/>`);
-		default: return Y(`<polygon points="9,6 23,6 17,20 3,20" ${r}/>`);
+		case "circle": return q(`<circle cx="13" cy="13" r="9" ${r}/>`);
+		case "triangle": return q(`<polygon points="5,6 22,13 5,20" ${r}/>`);
+		default: return q(`<polygon points="9,6 23,6 17,20 3,20" ${r}/>`);
 	}
 }
-//#endregion
-//#region src/palette/TtPaletteProvider.ts
-var Jt = "tools", Yt = "tt-1-teams", Xt = "tt-2-modes", Zt = "tt-3-guides", Qt = 24;
-function $t(e, t = !0) {
-	return `<div class="entry tt-palette-entry" draggable="${t}">${e}</div>`;
-}
-function en(e) {
+// src/keyboard/canvasFocus.ts
+function an(e) {
 	return e.type === "click" && e.detail === 0;
 }
-function tn(e) {
+function on(e, t) {
+	let n = e.getContainer().ownerDocument, r = n.activeElement;
+	an(t) && r !== null && r !== n.body || e.focus();
+}
+function sn(e, t) {
+	let n = e.ownerDocument, r = null, i = (e) => {
+		r = e.target;
+	}, a = (e) => {
+		let t = e.target;
+		queueMicrotask(() => {
+			r === t && r?.isConnected && (r = null);
+		});
+	}, o = new MutationObserver(() => {
+		let e = r;
+		e && !e.isConnected && (r = null, n.activeElement === n.body && n.hasFocus() && t(e));
+	});
+	return e.addEventListener("focusin", i), e.addEventListener("focusout", a), o.observe(e, {
+		childList: !0,
+		subtree: !0
+	}), () => {
+		o.disconnect(), e.removeEventListener("focusin", i), e.removeEventListener("focusout", a);
+	};
+}
+// src/palette/TtPaletteProvider.ts
+var cn = "tools", ln = "tt-1-teams", un = "tt-2-modes", dn = "tt-3-guides", fn = 24;
+function pn(e, t = !0) {
+	return `<div class="entry tt-palette-entry" draggable="${t}">${e}</div>`;
+}
+function mn(e) {
 	return {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
-function nn(e, t) {
+function hn(e, t) {
 	let { x: n, y: r, scale: i, outer: a } = e.viewbox(), o = a.width - t.left - t.right, s = a.height - t.top - t.bottom;
 	if (i > 0 && o > 0 && s > 0) return {
 		x: n + (t.left + o / 2) / i,
 		y: r + (t.top + s / 2) / i
 	};
 }
-var rn = class {
+var gn = class {
 	config;
 	create;
 	factory;
@@ -1208,23 +1245,25 @@ var rn = class {
 	getPaletteEntries() {
 		let e = {};
 		e["lasso-tool"] = {
-			group: Jt,
+			group: cn,
 			title: "Select several elements",
-			html: $t(Kt(), !1),
-			action: { click: (e) => this.lassoTool.activateSelection(e) }
+			html: pn(nn(), !1),
+			action: { click: (e) => {
+				this.lassoTool.activateSelection(e), on(this.canvas, e);
+			} }
 		};
-		for (let t of n) e[`team.${t.type}`] = this.createEntry(Yt, `${t.label} team`, Ut(t.type), () => this.factory.createNewTeam(t.type, t.label));
-		for (let n of t) e[`mode.${n.mode}`] = this.createEntry(Xt, `${n.label} interaction`, qt(n.mode), () => this.factory.createNewInteraction(n.mode));
-		return e.flow = this.createEntry(Zt, l.label, Wt(), () => this.factory.createNewFlow()), e.annotation = this.createEntry(Zt, i.label, Gt(), () => this.factory.createNewAnnotation()), e;
+		for (let t of n) e[`team.${t.type}`] = this.createEntry(ln, `${t.label} team`, $t(t.type), () => this.factory.createNewTeam(t.type, t.label));
+		for (let n of t) e[`mode.${n.mode}`] = this.createEntry(un, `${n.label} interaction`, rn(n.mode), () => this.factory.createNewInteraction(n.mode));
+		return e.flow = this.createEntry(dn, l.label, en(), () => this.factory.createNewFlow()), e.annotation = this.createEntry(dn, i.label, tn(), () => this.factory.createNewAnnotation()), e;
 	}
 	createEntry(e, t, n, r) {
 		let i = (e) => {
-			en(e) ? this.placeInFreeRect(r()) : this.create.start(e, r());
+			an(e) ? this.placeInFreeRect(r()) : (this.create.start(e, r()), this.canvas.focus());
 		};
 		return {
 			group: e,
 			title: t,
-			html: $t(n),
+			html: pn(n),
 			action: {
 				dragstart: i,
 				click: i
@@ -1239,30 +1278,177 @@ var rn = class {
 			x: Math.round(t.x),
 			y: Math.round(t.y)
 		}, r = () => this.elementRegistry.filter(E).some((e) => {
-			let t = tn(e);
+			let t = mn(e);
 			return Math.abs(t.x - n.x) < 1 && Math.abs(t.y - n.y) < 1;
 		});
-		for (; r();) n.x += Qt, n.y += Qt;
+		for (; r();) n.x += fn, n.y += fn;
 		return n;
 	}
 	freeAreaCentre() {
 		let e = this.config?.freeArea;
-		return e?.center ? e.center() : e?.insets ? nn(this.canvas, e.insets()) : this.config?.freeRectCenter?.();
+		return e?.center ? e.center() : e?.insets ? hn(this.canvas, e.insets()) : this.config?.freeRectCenter?.();
 	}
 	placeInFreeRect(e) {
 		if (this.readOnly?.isReadOnly()) return;
 		let t = this.modeling.createShape(e, this.freePlace(), this.canvas.getRootElement());
 		this.selection.select(t), this.canvas.focus(), E(t) && this.labelEditing?.activate(t);
 	}
-}, an = {
+}, _n = ".djs-palette-entries .entry", vn = ".djs-hover-tooltip", yn = 8, bn = 12, xn = {
 	__depends__: [
-		he,
 		ge,
-		w
+		_e,
+		se
 	],
-	__init__: ["ttPaletteProvider"],
-	ttPaletteProvider: ["type", rn]
-}, X = "tt.readOnly.changed", on = 5e3, sn = [
+	__init__: ["ttPaletteProvider", "paletteTooltip"],
+	ttPaletteProvider: ["type", gn],
+	paletteTooltip: ["type", class {
+		palette;
+		hoverTooltip;
+		canvas;
+		static $inject = [
+			"eventBus",
+			"palette",
+			"hoverTooltip",
+			"canvas"
+		];
+		entries = {};
+		constructor(e, t, n, r) {
+			this.palette = t, this.hoverTooltip = n, this.canvas = r, e.on("palette.create", (e) => this.attachTo(e.container)), e.on("palette.changed", () => this.refreshEntries());
+		}
+		attachTo(e) {
+			this.refreshEntries(), this.hoverTooltip.add({
+				container: e,
+				selector: _n,
+				getContent: (e) => this.contentFor(e),
+				getPosition: (e) => this.positionBelowPalette(e)
+			});
+		}
+		refreshEntries() {
+			this.entries = this.palette.getEntries();
+		}
+		contentFor(e) {
+			let t = this.entries[e.getAttribute("data-action") ?? ""];
+			return t?.title ? ye`<${ve}
+      title=${t.title}
+      shortcut=${t.shortcut}
+    />` : null;
+		}
+		positionBelowPalette(e) {
+			let t = this.canvas.getContainer().getBoundingClientRect(), n = e.getBoundingClientRect(), r = (e.closest(".djs-palette") ?? e).getBoundingClientRect();
+			return queueMicrotask(() => this.keepInsideContainer()), {
+				x: n.left + n.width / 2 - t.left,
+				y: r.bottom + yn - t.top,
+				placement: "bottom"
+			};
+		}
+		keepInsideContainer() {
+			let e = this.canvas.getContainer(), t = e.querySelector(vn);
+			if (!t) return;
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = n.left + bn - r.left, a = r.right - (n.right - bn), o = Math.max(i, Math.min(0, -a));
+			o !== 0 && (t.style.left = `${parseFloat(t.style.left) + o}px`);
+		}
+	}]
+}, Sn = 8, Cn = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+}, wn = "ttContextPad#keepInsideFreeArea", Tn = 250;
+function En(e) {
+	return !Array.isArray(e) && "waypoints" in e;
+}
+function Dn(e) {
+	let t = parseFloat(e.style.left), n = parseFloat(e.style.top);
+	return Number.isFinite(t) && Number.isFinite(n) ? {
+		left: t,
+		top: n
+	} : void 0;
+}
+var On = class {
+	config;
+	canvas;
+	scheduler;
+	static $inject = [
+		"config.ttContextPad",
+		"eventBus",
+		"canvas",
+		"scheduler"
+	];
+	openPad;
+	diagramJsPosition;
+	positionWrites;
+	constructor(e, t, n, r) {
+		this.config = e, this.canvas = n, this.scheduler = r, t.on("contextPad.open", (e) => this.follow(e.current)), t.on([
+			"contextPad.show",
+			"canvas.viewbox.changed",
+			"canvas.resized"
+		], Tn, () => this.schedulePlacement()), t.on(["contextPad.close", "diagram.destroy"], () => this.stopFollowing());
+	}
+	follow(e) {
+		this.stopFollowing(), this.openPad = e;
+		let t = new MutationObserver(() => {
+			this.diagramJsPosition = Dn(e.html), this.keepInsideFreeArea();
+		});
+		t.observe(e.html, {
+			attributes: !0,
+			attributeFilter: ["style"]
+		}), this.positionWrites = t;
+	}
+	stopFollowing() {
+		this.positionWrites?.disconnect(), this.positionWrites = void 0, this.openPad = void 0, this.diagramJsPosition = void 0, this.scheduler.cancel(wn);
+	}
+	schedulePlacement() {
+		this.scheduler.schedule(() => this.keepInsideFreeArea(), wn);
+	}
+	keepInsideFreeArea() {
+		let e = this.openPad, t = this.diagramJsPosition;
+		if (!e || !t || !e.html.classList.contains("open")) return;
+		let n = this.canvas.getContainer().getBoundingClientRect();
+		n.width > 0 && n.height > 0 && this.moveTo(e.html, this.placementFor(e, t, n));
+	}
+	placementFor(e, t, n) {
+		let r = this.targetBox(e.target, n);
+		if (!r || r.right < 0 || r.bottom < 0 || r.left > n.width || r.top > n.height) return t;
+		let i = this.config?.freeArea?.insets?.() ?? Cn, a = {
+			left: i.left,
+			top: i.top,
+			right: n.width - i.right,
+			bottom: n.height - i.bottom
+		}, o = e.html.offsetWidth, s = e.html.offsetHeight, c = Sn * this.canvas.zoom(), l = t.left;
+		if (l + o > a.right) {
+			let t = (En(e.target) ? l - c : r.left) - c - o;
+			l = t >= a.left && t + o <= a.right ? t : a.right - o;
+		}
+		return {
+			left: Math.max(a.left, l),
+			top: Math.max(a.top, Math.min(t.top, a.bottom - s))
+		};
+	}
+	moveTo(e, t) {
+		let n = Dn(e);
+		(n?.left !== t.left || n.top !== t.top) && (e.style.left = `${t.left}px`, e.style.top = `${t.top}px`, this.positionWrites?.takeRecords());
+	}
+	targetBox(e, t) {
+		let n = Array.isArray(e) ? e : [e], r;
+		for (let e of n) {
+			let n = this.canvas.getGraphics(e.id);
+			if (!n) continue;
+			let i = n.getBoundingClientRect(), a = {
+				left: i.left - t.left,
+				top: i.top - t.top,
+				right: i.right - t.left,
+				bottom: i.bottom - t.top
+			};
+			r = r ? {
+				left: Math.min(r.left, a.left),
+				top: Math.min(r.top, a.top),
+				right: Math.max(r.right, a.right),
+				bottom: Math.max(r.bottom, a.bottom)
+			} : a;
+		}
+		return r;
+	}
+}, J = "tt.readOnly.changed", kn = 5e3, An = [
 	"elements.move",
 	"shape.move",
 	"shape.resize",
@@ -1274,7 +1460,7 @@ var rn = class {
 	"connection.reconnect",
 	"connection.updateWaypoints",
 	"elements.delete"
-], cn = class extends pe {
+], jn = class extends me {
 	bus;
 	static $inject = ["eventBus"];
 	readOnly = !1;
@@ -1282,26 +1468,26 @@ var rn = class {
 		super(e), this.bus = e;
 	}
 	init() {
-		this.addRule(sn, on, () => !this.readOnly && void 0);
+		this.addRule(An, kn, () => !this.readOnly && void 0);
 	}
 	isReadOnly() {
 		return this.readOnly;
 	}
 	setReadOnly(e) {
-		this.readOnly !== e && (this.readOnly = e, this.bus.fire(X, { readOnly: e }));
+		this.readOnly !== e && (this.readOnly = e, this.bus.fire(J, { readOnly: e }));
 	}
-}, ln = {
-	__depends__: [fe],
+}, Mn = {
+	__depends__: [pe],
 	__init__: ["ttReadOnly"],
-	ttReadOnly: ["type", cn]
-}, un = ".djs-context-pad .entry[data-action]";
-function Z(e, t, n = !0) {
-	return `<div class="entry tt-cp-entry" role="button" tabindex="${n ? 0 : -1}" aria-label="${t}">${J(e)}</div>`;
+	ttReadOnly: ["type", jn]
+}, Nn = ".djs-context-pad .entry[data-action]", Pn = ":scope > .djs-context-pad-parent";
+function Y(e, t, n = !0) {
+	return `<div class="entry tt-cp-entry" role="button" tabindex="${n ? 0 : -1}" aria-label="${t}">${K(e)}</div>`;
 }
-function dn(e) {
+function Fn(e) {
 	return A(e) ? "Edit text" : O(e) || k(e) ? "Edit label" : "Rename";
 }
-var fn = class {
+var In = class {
 	contextPad;
 	modeling;
 	ttModeling;
@@ -1322,30 +1508,33 @@ var fn = class {
 	];
 	readOnly;
 	constructor(e, t, n, r, i, a, o, s, c) {
-		this.contextPad = e, this.modeling = t, this.ttModeling = n, this.labelEditing = r, this.connect = i, this.selection = a, this.canvas = o, this.readOnly = c.get("ttReadOnly", !1), e.registerProvider(this), s.on("contextPad.open.allowed", () => !this.readOnly?.isReadOnly() && void 0), s.on(X, (t) => {
+		this.contextPad = e, this.modeling = t, this.ttModeling = n, this.labelEditing = r, this.connect = i, this.selection = a, this.canvas = o, this.readOnly = c.get("ttReadOnly", !1), e.registerProvider(this), s.on("contextPad.open.allowed", () => !this.readOnly?.isReadOnly() && void 0), s.on(J, (t) => {
 			t.readOnly && e.close();
-		}), o.getContainer().addEventListener("keydown", (e) => this.onEntryKeyDown(e));
+		});
+		let l = o.getContainer();
+		l.addEventListener("keydown", (e) => this.onEntryKeyDown(e));
+		let u = l.querySelector(Pn);
+		if (u) {
+			let e = sn(u, (e) => this.focusSameEntryOrCanvas(e.closest(Nn)?.getAttribute("data-action")));
+			s.on("diagram.destroy", e);
+		}
 	}
 	getContextPadEntries(e) {
 		if (this.readOnly?.isReadOnly()) return {};
 		if (j(e)) return { delete: this.deleteEntry([e], "Delete connector") };
 		if (!E(e)) return {};
-		if (A(e)) {
-			let t = (t) => this.connect.start(t, e);
-			return {
-				"edit-label": this.editEntry(e),
-				connect: {
-					group: "edit",
-					title: "Attach to element",
-					html: Z(Dt, "Attach to element", !1),
-					action: {
-						click: t,
-						dragstart: t
-					}
-				},
-				delete: this.deleteEntry([e], "Delete")
-			};
-		}
+		if (A(e)) return {
+			"edit-label": this.editEntry(e),
+			connect: {
+				group: "edit",
+				title: "Attach to element",
+				html: Y(Lt, "Attach to element", !1),
+				action: { click: (t) => {
+					this.connect.start(t, e), on(this.canvas, t);
+				} }
+			},
+			delete: this.deleteEntry([e], "Delete")
+		};
 		let t = () => {
 			let t = this.ttModeling.appendAnnotation(e);
 			this.selection.select(t), this.labelEditing.activate(t);
@@ -1355,7 +1544,7 @@ var fn = class {
 			"append-annotation": {
 				group: "edit",
 				title: "Add annotation",
-				html: Z(Ot, "Add annotation"),
+				html: Y(Rt, "Add annotation"),
 				action: {
 					click: t,
 					keyboard: t
@@ -1369,15 +1558,19 @@ var fn = class {
 	}
 	onEntryKeyDown(e) {
 		if (e.key !== "Enter" && e.key !== " " || e.repeat) return;
-		let t = (e.target?.closest?.(un))?.getAttribute("data-action");
+		let t = (e.target?.closest?.(Nn))?.getAttribute("data-action");
 		t && (e.preventDefault(), e.stopPropagation(), this.contextPad.triggerEntry(t, "keyboard", e));
 	}
+	focusSameEntryOrCanvas(e) {
+		let t = this.canvas.getContainer(), n = e ? t.querySelector(`.djs-context-pad.open .entry[data-action="${CSS.escape(e)}"]`) : null;
+		n?.focus({ preventScroll: !0 }), t.ownerDocument.activeElement !== n && this.canvas.focus();
+	}
 	editEntry(e) {
-		let t = dn(e), n = () => this.labelEditing.activate(e);
+		let t = Fn(e), n = () => this.labelEditing.activate(e);
 		return {
 			group: "edit",
 			title: t,
-			html: Z(Tt, t),
+			html: Y(Ft, t),
 			action: {
 				click: n,
 				keyboard: n
@@ -1385,31 +1578,36 @@ var fn = class {
 		};
 	}
 	deleteEntry(e, t) {
+		let n = () => {
+			this.modeling.removeElements([...e]), this.canvas.focus();
+		};
 		return {
 			group: "edit",
 			title: t,
-			html: Z(Et, t),
+			html: Y(It, t),
 			action: {
-				click: () => this.modeling.removeElements([...e]),
-				keyboard: () => {
-					this.modeling.removeElements([...e]), this.canvas.focus();
-				}
+				click: n,
+				keyboard: n
 			}
 		};
 	}
-}, pn = {
+}, Ln = {
 	__depends__: [
-		ye,
-		_e,
-		ve
+		Se,
+		be,
+		xe
 	],
-	__init__: ["ttContextPadProvider"],
-	ttContextPadProvider: ["type", fn]
-}, mn = "tt-label-editing", hn = 96;
-function gn(e) {
+	__init__: ["ttContextPadProvider", "ttContextPadPlacement"],
+	ttContextPadProvider: ["type", In],
+	ttContextPadPlacement: ["type", On]
+}, Rn = "tt-label-editing", zn = 96;
+function Bn(e) {
+	return e.isComposing || e.keyCode === 229;
+}
+function Vn(e) {
 	return A(e) ? "Annotation text" : O(e) ? "Interaction label" : k(e) ? "Flow label" : "Team name";
 }
-var _n = class {
+var Hn = class {
 	canvas;
 	modeling;
 	elementRegistry;
@@ -1427,7 +1625,7 @@ var _n = class {
 	constructor(e, t, n, r, i) {
 		this.canvas = t, this.modeling = n, this.elementRegistry = r, this.readOnly = i.get("ttReadOnly", !1), e.on("element.dblclick", (e) => {
 			E(e.element) && this.activate(e.element);
-		}), e.on(["element.mousedown", "drag.init"], () => this.active?.commit()), e.on("canvas.viewbox.changed", () => this.active?.place()), e.on("import.render.start", () => this.cancel()), e.on(X, (e) => {
+		}), e.on(["element.mousedown", "drag.init"], () => this.active?.commit()), e.on("canvas.viewbox.changed", () => this.active?.place()), e.on("import.render.start", () => this.cancel()), e.on(J, (e) => {
 			e.readOnly && this.cancel();
 		}), e.on("diagram.destroy", () => {
 			clearTimeout(this.resumeTimer), this.suspended = null, this.cancel();
@@ -1454,12 +1652,12 @@ var _n = class {
 	}
 	activate(e, t) {
 		if (this.active?.commit(), this.readOnly?.isReadOnly()) return;
-		let n = H(e), r = n.align === "center", i = r ? Math.max(n.box.width, hn) : n.box.width, a = e.x + n.box.x + (n.box.width - i) / 2, o = document.createElement("textarea");
-		o.className = "tt-label-editor", o.value = t ? t.value : e.ttLabel ?? "", o.rows = 1, o.setAttribute("aria-label", gn(e)), Object.assign(o.style, {
-			fontFamily: R.family,
+		let n = L(e), r = n.align === "center", i = r ? Math.max(n.box.width, zn) : n.box.width, a = e.x + n.box.x + (n.box.width - i) / 2, o = document.createElement("textarea");
+		o.className = "tt-label-editor", o.value = t ? t.value : e.ttLabel ?? "", o.rows = 1, o.setAttribute("aria-label", Vn(e)), Object.assign(o.style, {
+			fontFamily: P.family,
 			fontWeight: n.fontWeight,
 			letterSpacing: n.letterSpacing ?? "normal",
-			lineHeight: String(B),
+			lineHeight: String(I),
 			color: n.fill,
 			textAlign: r ? "center" : "left"
 		});
@@ -1475,15 +1673,15 @@ var _n = class {
 				fontSize: `${n.fontSize * t}px`
 			}), l();
 		};
-		this.canvas.getContainer().appendChild(o), this.canvas.addMarker(e, mn), u(), o.focus(), t ? o.setSelectionRange(t.selectionStart, t.selectionEnd) : o.select();
+		this.canvas.getContainer().appendChild(o), this.canvas.addMarker(e, Rn), u(), o.focus(), t ? o.setSelectionRange(t.selectionStart, t.selectionEnd) : o.select();
 		let d = !1, f = () => {
-			d || (d = !0, o.removeEventListener("keydown", m), o.removeEventListener("input", l), o.removeEventListener("blur", h), o.remove(), this.elementRegistry.get(e.id) === e && this.canvas.removeMarker(e, mn), this.active = null, this.canvas.restoreFocus());
+			d || (d = !0, o.removeEventListener("keydown", m), o.removeEventListener("input", l), o.removeEventListener("blur", h), o.remove(), this.elementRegistry.get(e.id) === e && this.canvas.removeMarker(e, Rn), this.active = null, this.canvas.restoreFocus());
 		}, p = () => {
 			if (d) return;
 			let t = o.value.trim(), n = t !== (e.ttLabel ?? "");
 			f(), n && this.modeling.updateLabel(e, t);
 		}, m = (e) => {
-			e.key === "Enter" && !e.shiftKey && !e.isComposing ? (e.preventDefault(), p(), this.canvas.focus()) : e.key === "Escape" && (e.preventDefault(), f(), this.canvas.focus());
+			Bn(e) || (e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), p(), this.canvas.focus()) : e.key === "Escape" && (e.preventDefault(), f(), this.canvas.focus()));
 		}, h = () => p();
 		o.addEventListener("keydown", m), o.addEventListener("input", l), o.addEventListener("blur", h);
 		let g = () => ({
@@ -1502,10 +1700,10 @@ var _n = class {
 	cancel() {
 		this.active?.cleanup();
 	}
-}, vn = {
+}, Un = {
 	__init__: ["ttLabelEditing"],
-	ttLabelEditing: ["type", _n]
-}, yn = 1, bn = 10, xn = {
+	ttLabelEditing: ["type", Hn]
+}, Wn = 1, Gn = 10, Kn = {
 	ArrowLeft: {
 		x: -1,
 		y: 0
@@ -1522,24 +1720,17 @@ var _n = class {
 		x: 0,
 		y: 1
 	}
-}, Sn = "[aria-modal=\"true\"], dialog[open]";
-function Cn(e) {
-	let t = e;
-	return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
-}
-function wn(e) {
+}, qn = "[aria-modal=\"true\"], dialog[open]";
+function Jn(e) {
 	return typeof e?.nodeType == "number";
 }
-function Tn(e, t) {
-	if (t.closest("[inert]")) return !1;
-	if (!wn(e) || e.nodeType === Node.DOCUMENT_NODE) return !0;
-	let n = e.ownerDocument;
-	return e === n?.body || e === n?.documentElement || t.contains(e);
+function Yn(e, t) {
+	return !t.closest("[inert]") && Jn(e) && t.contains(e);
 }
-function En(e) {
+function Xn(e) {
 	return !("waypoints" in e);
 }
-var Dn = class {
+var Zn = class {
 	static $inject = [
 		"config.ttKeyboard",
 		"eventBus",
@@ -1553,50 +1744,49 @@ var Dn = class {
 		"injector"
 	];
 	constructor(e, t, n, r, i, a, o, s, c, l) {
-		let u = n.getContainer(), d = u.ownerDocument ?? document, f = e?.undoRedoKeys ?? !0, p = l.get("dragging", !1), m = l.get("ttReadOnly", !1), h = (e, t, n) => {
+		let u = n.getContainer(), d = u.querySelector(":scope > svg"), f = u.ownerDocument ?? document, p = e?.undoRedoKeys ?? !0, m = l.get("dragging", !1), h = l.get("ttReadOnly", !1), g = (e, t, n) => {
 			if (t && n === "a" && !e.shiftKey) e.preventDefault(), a.select(r.filter((e) => !!e.parent));
 			else if (t && n === "c" && !e.shiftKey) {
 				let t = a.get();
 				if (!t.length) return !0;
 				e.preventDefault(), s.copy(t);
 			} else if (!t && n === "escape") {
-				if (p?.context() || !a.get().length) return !0;
+				if (m?.context() || !a.get().length) return !0;
 				e.preventDefault(), a.select(null);
 			} else return !1;
 			return !0;
-		}, g = (e, t, n) => {
+		}, _ = (e, t, n) => {
 			let r = t && n === "z" && !e.shiftKey, l = t && n === "z" && e.shiftKey || t && n === "y" && !e.shiftKey;
 			if (r || l) {
-				if (!f) return;
+				if (!p) return;
 				e.preventDefault(), r && i.canUndo() && i.undo(), l && i.canRedo() && i.redo();
 			} else if (n === "delete" || n === "backspace") {
 				let t = a.get();
 				t.length && (e.preventDefault(), o.removeElements([...t]));
 			} else if (t && n === "v" && !e.shiftKey) e.preventDefault(), s.paste();
-			else if (!t && Object.hasOwn(xn, e.key)) {
-				let t = a.get().filter(En);
+			else if (!t && Object.hasOwn(Kn, e.key)) {
+				let t = a.get().filter(Xn);
 				if (!t.length || !c.allowed("elements.move", { shapes: t })) return;
 				e.preventDefault();
-				let n = xn[e.key], r = e.shiftKey ? bn : yn;
+				let n = Kn[e.key], r = e.shiftKey ? Gn : Wn;
 				o.moveElements(t, {
 					x: n.x * r,
 					y: n.y * r
 				});
 			}
-		}, _ = (e) => {
-			if (e.defaultPrevented || e.altKey || e.isComposing || Cn(e.target) || !Tn(e.target, u) || d.querySelector(Sn)) return;
+		}, v = (e) => {
+			if (typeof e.key != "string" || e.defaultPrevented || e.altKey || e.isComposing || !Yn(e.target, d) || f.querySelector(qn)) return;
 			let t = e.ctrlKey || e.metaKey, n = e.key.toLowerCase();
-			h(e, t, n) || m?.isReadOnly() || g(e, t, n);
+			g(e, t, n) || h?.isReadOnly() || _(e, t, n);
 		};
-		d.addEventListener("keydown", _), t.on("diagram.destroy", () => d.removeEventListener("keydown", _));
+		f.addEventListener("keydown", v), t.on("diagram.destroy", () => f.removeEventListener("keydown", v));
 	}
-}, Q = {
+}, Qn = {
 	__init__: ["ttKeyboard"],
-	ttKeyboard: ["type", Dn]
+	ttKeyboard: ["type", Zn]
 };
-//#endregion
-//#region src/copy-paste/TtCopyPaste.ts
-function On(e) {
+// src/copy-paste/TtCopyPaste.ts
+function $n(e) {
 	switch (e) {
 		case "team": return "team";
 		case "interaction": return "int";
@@ -1606,7 +1796,7 @@ function On(e) {
 		default: return;
 	}
 }
-var kn = class extends xe {
+var er = class extends we {
 	elementFactory;
 	static $inject = [
 		"canvas",
@@ -1622,20 +1812,20 @@ var kn = class extends xe {
 		super(e, t, n, r, i, a, o, s), this.elementFactory = r;
 	}
 	createConnection(e) {
-		let t = On(e.ttKind);
+		let t = $n(e.ttKind);
 		return t ? this.elementFactory.createConnection({
 			...e,
 			id: v(t)
 		}) : super.createConnection(e);
 	}
 	createShape(e) {
-		let t = On(e.ttKind);
+		let t = $n(e.ttKind);
 		return t ? this.elementFactory.createShape({
 			...e,
 			id: v(t)
 		}) : super.createShape(e);
 	}
-}, An = [
+}, tr = [
 	"ttKind",
 	"teamType",
 	"mode",
@@ -1644,10 +1834,10 @@ var kn = class extends xe {
 	"fill",
 	"stroke",
 	"ttForeign"
-], jn = {
-	__depends__: [be],
+], nr = {
+	__depends__: [Ce],
 	__init__: ["ttCopyPasteProps"],
-	copyPaste: ["type", kn],
+	copyPaste: ["type", er],
 	ttCopyPasteProps: ["type", class {
 		static $inject = ["eventBus"];
 		constructor(e) {
@@ -1655,20 +1845,19 @@ var kn = class extends xe {
 				let { descriptor: t, element: n } = e;
 				if (!E(n) && !j(n)) return;
 				let r = n;
-				for (let e of An) r[e] !== void 0 && (t[e] = structuredClone(r[e]));
+				for (let e of tr) r[e] !== void 0 && (t[e] = structuredClone(r[e]));
 			});
 		}
 	}]
 };
-//#endregion
-//#region src/zorder/TtZOrder.ts
-function Mn(e) {
+// src/zorder/TtZOrder.ts
+function rr(e) {
 	return k(e) ? 0 : D(e) ? e.teamType === "enabling" ? 3 : e.teamType === "complicated-subsystem" ? 2 : 1 : O(e) ? 4 : A(e) ? 5 : j(e) ? 6 : 1;
 }
-function Nn(e) {
+function ir(e) {
 	return E(e) || j(e);
 }
-var Pn = class {
+var ar = class {
 	canvas;
 	elementRegistry;
 	static $inject = [
@@ -1687,34 +1876,34 @@ var Pn = class {
 		});
 	}
 	reorder() {
-		let e = this.elementRegistry.getAll().filter(Nn).sort((e, t) => Mn(e) - Mn(t));
+		let e = this.elementRegistry.getAll().filter(ir).sort((e, t) => rr(e) - rr(t));
 		for (let t of e) {
 			let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
 			e && n && n.appendChild(e);
 		}
 	}
-}, Fn = {
+}, or = {
 	__init__: ["ttZOrder"],
-	ttZOrder: ["type", Pn]
-}, In = class extends K {
+	ttZOrder: ["type", ar]
+}, sr = class extends W {
 	_getModules() {
 		return [
 			...super._getModules(),
-			se,
-			w,
 			ce,
+			se,
 			le,
 			ue,
-			ln,
-			vt,
-			xt,
-			wt,
-			an,
-			pn,
-			vn,
-			Q,
-			jn,
-			Fn
+			de,
+			Mn,
+			Ot,
+			jt,
+			Pt,
+			xn,
+			Ln,
+			Un,
+			Qn,
+			nr,
+			or
 		];
 	}
 	undo() {
@@ -1729,34 +1918,34 @@ var Pn = class {
 	canRedo() {
 		return this.get("commandStack").canRedo();
 	}
-}, Ln = "team-topologies";
-function Rn(e = {}) {
-	return Hn(new In({
-		...Bn(e),
+}, cr = "team-topologies";
+function lr(e = {}) {
+	return pr(new sr({
+		...dr(e),
 		undoRedoKeys: e.undoRedoKeys ?? !0,
 		freeArea: e.freeArea,
 		freeRectCenter: e.freeRectCenter
 	}), !0, e.fitOnImport ?? !0);
 }
-function zn(e = {}) {
-	return Hn(new K(Bn(e)), !1, e.fitOnImport ?? !0);
+function ur(e = {}) {
+	return pr(new W(dr(e)), !1, e.fitOnImport ?? !0);
 }
-function Bn(e) {
+function dr(e) {
 	return {
 		width: "100%",
 		height: "100%",
 		additionalModules: e.additionalModules ?? []
 	};
 }
-function Vn(e) {
+function fr(e) {
 	let t = ee(e.trim() === "" ? {} : JSON.parse(e));
 	if (!t.ok) throw Error(t.error);
 	return t.document;
 }
-function Hn(e, t, n) {
+function pr(e, t, n) {
 	let r = e.get("eventBus"), i = e.get("canvas"), a = e.get("elementRegistry"), o = e.get("selection"), s = /* @__PURE__ */ new Set(), c = 0, l = !1, u = "", d = {
-		notation: Ln,
-		apiVersion: Se,
+		notation: cr,
+		apiVersion: Te,
 		editable: t
 	};
 	t && r.on("commandStack.changed", () => {
@@ -1766,15 +1955,15 @@ function Hn(e, t, n) {
 	return {
 		meta: d,
 		elements: {
-			list: () => l ? [] : a.getAll().filter(E).map(Wn),
+			list: () => l ? [] : a.getAll().filter(E).map(hr),
 			reveal(e) {
 				if (l) return !1;
 				let t = a.get(e);
 				return E(t) ? (o.select(t), i.scrollToElement(t), !0) : !1;
 			},
-			selection: () => l ? [] : Un(o.get()),
+			selection: () => l ? [] : mr(o.get()),
 			onSelection(e) {
-				let t = (t) => e(Un(t.newSelection ?? []));
+				let t = (t) => e(mr(t.newSelection ?? []));
 				return r.on("selection.changed", t), () => r.off("selection.changed", t);
 			},
 			bounds(e) {
@@ -1796,7 +1985,7 @@ function Hn(e, t, n) {
 		},
 		async importText(t) {
 			if (l) throw Error("The modeler was destroyed.");
-			let r = Vn(t);
+			let r = fr(t);
 			c += 1;
 			try {
 				let { warnings: t } = e.importDocument(r, { fit: n });
@@ -1819,13 +2008,13 @@ function Hn(e, t, n) {
 					width: n,
 					height: r
 				};
-				return Gn(a) ? a : void 0;
+				return gr(a) ? a : void 0;
 			} catch {
 				return;
 			}
 		},
 		setViewState(e) {
-			!l && Gn(e) && i.viewbox({
+			!l && gr(e) && i.viewbox({
 				x: e.x,
 				y: e.y,
 				width: e.width,
@@ -1847,25 +2036,420 @@ function Hn(e, t, n) {
 		}
 	};
 }
-function Un(e) {
+function mr(e) {
 	return e.filter(E).map((e) => e.id);
 }
-function Wn(e) {
+function hr(e) {
 	let t = e.ttLabel;
 	return t ? {
 		id: e.id,
 		name: t
 	} : { id: e.id };
 }
-function Gn(e) {
+function gr(e) {
 	if (typeof e != "object" || !e) return !1;
 	let { x: t, y: n, width: r, height: i } = e;
-	return $(t) && $(n) && $(r) && $(i) && r > 0 && i > 0;
+	return X(t) && X(n) && X(r) && X(i) && r > 0 && i > 0;
 }
-function $(e) {
+function X(e) {
 	return typeof e == "number" && Number.isFinite(e);
 }
-//#endregion
-export { we as CD_TOKENS, G as GEIST_UNICODE_RANGES, Pt as ICON_DOWNLOAD, Dt as ICON_LINK, Nt as ICON_MAXIMIZE, At as ICON_MENU, Ot as ICON_MESSAGE_SQUARE_PLUS, jt as ICON_MINUS, Tt as ICON_PENCIL, Mt as ICON_PLUS, kt as ICON_SQUARE_DASHED_MOUSE_POINTER, Et as ICON_TRASH, Ft as ICON_X, M as MIRAGON, In as Modeler, K as NavigatedViewer, X as READ_ONLY_CHANGED_EVENT, F as ROOT_ID, Ln as TEAM_TOPOLOGIES_NOTATION, qe as TeamTopologiesRenderer, Ct as TtAssociationBehavior, Ae as TtBaseViewer, fn as TtContextPadProvider, je as TtElementFactory, Qe as TtExporter, St as TtFlatModelBehavior, Ze as TtImporter, Dn as TtKeyboard, _n as TtLabelEditing, _t as TtLayouter, gt as TtModeling, rn as TtPaletteProvider, cn as TtReadOnly, bt as TtRules, at as TtViewport, Pn as TtZOrder, lt as Viewer, Gt as annotationIconSvg, Rn as createCollaborativeModeler, zn as createCollaborativeViewer, st as embedSvgStyles, Wt as flowIconSvg, ot as geistFontFaceCss, J as iconMarkup, qt as interactionIconSvg, ct as ioModule, A as isTtAnnotation, j as isTtAssociation, E as isTtElement, k as isTtFlow, O as isTtInteraction, D as isTtTeam, Vn as parseDocumentText, Oe as saveSVG, Ut as teamIconSvg, wt as ttBehaviorsModule, pn as ttContextPadModule, Xe as ttDrawModule, Q as ttKeyboardModule, vn as ttLabelEditingModule, Me as ttModelModule, vt as ttModelingModule, an as ttPaletteModule, ln as ttReadOnlyModule, xt as ttRulesModule, Fn as ttZOrderModule };
+// src/chrome/menu.ts
+var Z = "Export as JSON", _r = "?";
+function vr(e, t, n, r) {
+	return {
+		kind: "action",
+		id: e,
+		label: t,
+		...r ? { icon: r } : {},
+		...n.shortcut ? { shortcut: n.shortcut } : {},
+		onSelect: () => n.onSelect()
+	};
+}
+function yr(e) {
+	let { editTitle: t, exports: n, shortcutsKey: r } = e;
+	return {
+		model: t ? [{
+			kind: "dialog",
+			id: "diagram-title",
+			label: "Diagram title…",
+			onSelect: () => t()
+		}] : [],
+		export: [
+			vr("export-png", "Export as PNG", n.png, "file-image"),
+			vr("export-svg", "Export as SVG", n.svg, "file-code-corner"),
+			...n.json ? [vr("export-json", Z, n.json)] : []
+		],
+		help: [{
+			kind: "dialog",
+			id: "keyboard-shortcuts",
+			label: "Keyboard shortcuts…",
+			icon: "keyboard",
+			...r ? { shortcut: r } : {},
+			onSelect: () => e.showKeyboardShortcuts()
+		}]
+	};
+}
+// src/chrome/shortcuts.ts
+var br = [
+	"←",
+	"↑",
+	"→",
+	"↓"
+];
+function xr(e) {
+	let t = {
+		style: "percent",
+		maximumFractionDigits: 0
+	};
+	try {
+		return new Intl.NumberFormat(e, t).format(1);
+	} catch {
+		return new Intl.NumberFormat("en", t).format(1);
+	}
+}
+function Sr(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 Cr(e, t) {
+	if (e === "mac") return {
+		undo: ["⌘Z"],
+		redo: ["⌘⇧Z"],
+		selectAll: ["⌘A"],
+		copy: ["⌘C"],
+		paste: ["⌘V"],
+		remove: ["⌫"],
+		coarseMove: br.map((e) => `⇧${e}`),
+		shiftDrag: ["⇧ Drag"],
+		shiftClick: ["⇧ Click"],
+		newLine: ["⇧Enter"],
+		open: ["⌘O"],
+		save: ["⌘S"]
+	};
+	let { ctrl: n, shift: r } = t;
+	return {
+		undo: [`${n}+Z`],
+		redo: [`${n}+${r}+Z`, `${n}+Y`],
+		selectAll: [`${n}+A`],
+		copy: [`${n}+C`],
+		paste: [`${n}+V`],
+		remove: ["Del", "Backspace"],
+		coarseMove: br.map((e) => `${r}+${e}`),
+		shiftDrag: [`${r}+Drag`],
+		shiftClick: [`${r}+Click`],
+		newLine: [`${r}+Enter`],
+		open: [`${n}+O`],
+		save: [`${n}+S`]
+	};
+}
+function wr(e, t = {}) {
+	let { platform: n, messages: r } = e, i = Sr(n, r.keyNames), a = Cr(n, r.keyNames), o = [
+		{
+			title: "View",
+			rows: [
+				{
+					action: r.zoomIn,
+					keys: [i.zoomIn]
+				},
+				{
+					action: r.zoomOut,
+					keys: [i.zoomOut]
+				},
+				{
+					action: r.zoomToActual(xr(e.lang)),
+					keys: [i.zoomToActual]
+				},
+				{
+					action: r.fit,
+					keys: [i.fit]
+				},
+				...t.fileKeys ? [{
+					action: "Keyboard shortcuts",
+					keys: ["?"]
+				}] : []
+			]
+		},
+		{
+			title: "Edit",
+			rows: [
+				{
+					action: "Undo",
+					keys: a.undo
+				},
+				{
+					action: "Redo",
+					keys: a.redo
+				},
+				{
+					action: "Select all",
+					keys: a.selectAll
+				},
+				{
+					action: "Copy",
+					keys: a.copy
+				},
+				{
+					action: "Paste",
+					keys: a.paste
+				},
+				{
+					action: "Delete",
+					keys: a.remove
+				},
+				{
+					action: "Move selection",
+					keys: br
+				},
+				{
+					action: "Move selection in large steps",
+					keys: a.coarseMove
+				},
+				{
+					action: "Clear the selection",
+					keys: ["Esc"]
+				}
+			]
+		},
+		{
+			title: "Tools",
+			rows: [
+				{
+					action: "Select several elements",
+					keys: a.shiftDrag
+				},
+				{
+					action: "Add to or remove from the selection",
+					keys: a.shiftClick
+				},
+				{
+					action: "Add the palette element in the middle",
+					keys: ["Enter", "Space"]
+				},
+				{
+					action: "Edit a name or text",
+					keys: ["Double-click"]
+				},
+				{
+					action: "Save the text",
+					keys: ["Enter"]
+				},
+				{
+					action: "Start a new line",
+					keys: a.newLine
+				},
+				{
+					action: "Discard the change",
+					keys: ["Esc"]
+				}
+			]
+		}
+	];
+	return t.fileKeys && o.unshift({
+		title: "File",
+		rows: [{
+			action: r.openFile ?? "Open…",
+			keys: a.open
+		}, {
+			action: Z,
+			keys: a.save
+		}]
+	}), o;
+}
+// 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 Tr(e, t, n) {
+	let r = Q("header", "tt-dialog__header"), i = Q("h2", "tt-dialog__title", t.title);
+	i.id = t.titleId;
+	let a = Q("button", "tt-dialog__close");
+	return a.type = "button", a.setAttribute("aria-label", e.messages.close), a.innerHTML = K(Gt), a.addEventListener("click", n), r.append(i, a), r;
+}
+function Er(e) {
+	return e instanceof HTMLElement || e instanceof SVGElement ? e.isConnected && e !== e.ownerDocument.body : !1;
+}
+function Dr(e, t) {
+	let n, r = null;
+	function i() {
+		let t = r;
+		r = null, Er(t) && (t.focus({ preventScroll: !0 }), t.ownerDocument.activeElement === t) || e.menu.trigger.hidden || e.menu.trigger.focus({ preventScroll: !0 });
+	}
+	function a() {
+		let n = Q("dialog", `tt-dialog ${t.className}`);
+		n.setAttribute("aria-labelledby", t.titleId);
+		let r = () => n.close(), a = Q("div", "tt-dialog__panel");
+		a.append(Tr(e, t, r), ...t.content(r)), n.append(a);
+		let o = !1;
+		return n.addEventListener("pointerdown", (e) => {
+			o = e.target === n;
+		}), n.addEventListener("click", (e) => {
+			e.target === n && o && n.close(), o = !1;
+		}), n.addEventListener("close", i), e.root.append(n), n;
+	}
+	return {
+		open() {
+			n ??= a(), !n.open && (r = n.ownerDocument.activeElement, t.beforeOpen?.(), n.showModal(), t.afterOpen?.());
+		},
+		close() {
+			n?.close();
+		},
+		isOpen: () => n?.open === !0,
+		destroy() {
+			n?.remove(), n = void 0, r = null;
+		}
+	};
+}
+// src/chrome/ShortcutsDialog.ts
+var $ = "tt-shortcuts", Or = "tt-shortcuts-title";
+function kr(e, t) {
+	let n = Q("section", `${$}__group`), r = `${Or}-group-${t}`, i = Q("h3", `${$}__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 Ar(e, t = {}) {
+	return Dr(e, {
+		className: $,
+		titleId: Or,
+		title: "Keyboard shortcuts",
+		content() {
+			let n = Q("div", `tt-dialog__body ${$}__body`);
+			return n.append(...wr(e, t).map(kr)), [n];
+		}
+	});
+}
+// src/chrome/TitleDialog.ts
+var jr = "tt-title-dialog", Mr = "tt-title-dialog-title", Nr = "tt-title-dialog-field";
+function Pr(e, t) {
+	let n = Q("button", t ? "tt-dialog__button tt-dialog__button--primary" : "tt-dialog__button", e);
+	return n.type = t ? "submit" : "button", n;
+}
+function Fr(e, t) {
+	let n = Q("input", "tt-dialog__input");
+	n.id = Nr, n.type = "text", n.autocomplete = "off", n.spellcheck = !1, n.enterKeyHint = "done", n.autofocus = !0;
+	let r = Pr("Apply", !0), i = () => {
+		r.disabled = n.value.trim() === "";
+	};
+	return n.addEventListener("input", i), Dr(e, {
+		className: jr,
+		titleId: Mr,
+		title: "Diagram title",
+		beforeOpen() {
+			n.value = t.title(), i();
+		},
+		afterOpen() {
+			n.select();
+		},
+		content(e) {
+			let i = Q("form", "tt-dialog__form");
+			i.noValidate = !0;
+			let a = Q("div", "tt-dialog__body"), o = Q("label", "tt-dialog__field"), s = Q("span", "tt-dialog__label", "Title");
+			o.htmlFor = Nr, o.append(s, n), a.append(o);
+			let c = Q("div", "tt-dialog__footer"), l = Pr("Cancel", !1);
+			return l.addEventListener("click", e), c.append(l, r), i.append(a, c), i.addEventListener("submit", (r) => {
+				r.preventDefault();
+				let i = n.value.trim();
+				i !== "" && (e(), i !== t.title() && t.setTitle(i));
+			}), [i];
+		}
+	});
+}
+// src/legend/legendContent.ts
+var Ir = {
+	"stream-aligned": "Delivers one stream of work",
+	enabling: "Coaches teams in new skills",
+	"complicated-subsystem": "Owns a specialist subsystem",
+	platform: "Self-service for other teams"
+}, Lr = {
+	collaboration: "Teams work closely for a time",
+	"x-as-a-service": "One provides, one consumes",
+	facilitating: "One team helps another learn"
+};
+function Rr() {
+	return [
+		{
+			label: "Team types",
+			heading: "Teams: solid, long-lived",
+			rows: n.map((e) => ({
+				preview: $t(e.type),
+				label: e.label,
+				explanation: Ir[e.type]
+			}))
+		},
+		{
+			label: "Interaction modes",
+			heading: "Interactions: dashed, short-lived",
+			rows: t.map((e) => ({
+				preview: rn(e.mode),
+				label: e.label,
+				explanation: Lr[e.mode]
+			}))
+		},
+		{
+			label: "Other elements",
+			heading: "Other elements",
+			rows: [{
+				preview: en(),
+				label: l.label,
+				explanation: "Change flows left to right"
+			}, {
+				preview: tn(),
+				label: i.label,
+				explanation: "Rationale, questions, plans"
+			}]
+		}
+	];
+}
+function zr(e) {
+	let t = e.ownerDocument, n = [];
+	return Rr().forEach((e, r) => {
+		if (r > 0) {
+			let e = t.createElement("div");
+			e.className = "cd-shell-legend-separator tt-legend__separator", e.setAttribute("role", "separator"), n.push(e);
+		}
+		let i = t.createElement("p");
+		i.className = "tt-legend__heading", i.textContent = e.heading;
+		let a = t.createElement("ul");
+		a.className = "tt-legend__group", a.setAttribute("aria-label", e.label);
+		for (let n of e.rows) {
+			let e = t.createElement("li");
+			e.className = "cd-shell-legend-row tt-legend__row";
+			let r = t.createElement("span");
+			r.className = "cd-shell-legend-preview tt-legend__preview", r.setAttribute("aria-hidden", "true"), r.innerHTML = n.preview;
+			let i = t.createElement("span");
+			i.className = "tt-legend__text";
+			let o = t.createElement("span");
+			o.className = "tt-legend__label", o.textContent = n.label;
+			let s = t.createElement("span");
+			s.className = "tt-legend__explanation", s.textContent = n.explanation, i.append(o, " ", s), e.append(r, i), a.append(e);
+		}
+		n.push(i, a);
+	}), e.append(...n), () => {
+		for (let e of n.splice(0)) e.remove();
+	};
+}
+export { Ee as CD_TOKENS, U as GEIST_UNICODE_RANGES, Wt as ICON_DOWNLOAD, Lt as ICON_LINK, Ut as ICON_MAXIMIZE, Bt as ICON_MENU, Rt as ICON_MESSAGE_SQUARE_PLUS, Vt as ICON_MINUS, Ft as ICON_PENCIL, Ht as ICON_PLUS, zt as ICON_SQUARE_DASHED_MOUSE_POINTER, It as ICON_TRASH, Gt as ICON_X, Z as JSON_EXPORT_LABEL, w as MIRAGON, sr as Modeler, W as NavigatedViewer, J as READ_ONLY_CHANGED_EVENT, B as ROOT_ID, _r as SHORTCUTS_DIALOG_KEY, cr as TEAM_TOPOLOGIES_NOTATION, lt as TeamTopologiesRenderer, Nt as TtAssociationBehavior, ot as TtBaseViewer, In as TtContextPadProvider, st as TtElementFactory, mt as TtExporter, Mt as TtFlatModelBehavior, pt as TtImporter, Zn as TtKeyboard, Hn as TtLabelEditing, Dt as TtLayouter, Et as TtModeling, gn as TtPaletteProvider, jn as TtReadOnly, At as TtRules, Qe as TtViewport, ar as TtZOrder, yt as Viewer, tn as annotationIconSvg, lr as createCollaborativeModeler, ur as createCollaborativeViewer, Ar as createShortcutsDialog, Fr as createTitleDialog, yr as diagramMenu, wr as diagramShortcuts, _t as embedSvgStyles, en as flowIconSvg, gt as geistFontFaceCss, K as iconMarkup, rn as interactionIconSvg, vt as ioModule, A as isTtAnnotation, j as isTtAssociation, E as isTtElement, k as isTtFlow, O as isTtInteraction, D as isTtTeam, Rr as legendGroups, fr as parseDocumentText, zr as renderLegend, it as saveSVG, $t as teamIconSvg, Pt as ttBehaviorsModule, Ln as ttContextPadModule, ft as ttDrawModule, Qn as ttKeyboardModule, Un as ttLabelEditingModule, ct as ttModelModule, Ot as ttModelingModule, xn as ttPaletteModule, Mn as ttReadOnlyModule, jt as ttRulesModule, or as ttZOrderModule };
 
 //# sourceMappingURL=index.js.map