@miragon/team-topologies-renderer 0.10.1 → 0.11.0

package/dist/index.js

@@ -1,84 +1,150 @@
 import e from "diagram-js/lib/Diagram";
-import { getMid as t } from "diagram-js/lib/layout/LayoutUtil";
-import { ALL_INTERACTION_SPECS as n, ALL_TEAM_SPECS as r, ANNOTATION_SPEC as i, DOCUMENT_VERSION as a, FLOW_SPEC as o, INTERACTION_MODE_SPECS as s, TEAM_TYPE_SPECS as c, dashArray as l, newId as u } from "@miragon/team-topologies-schema-model";
-import d from "diagram-js/lib/layout/CroppingConnectionDocking";
-import f from "diagram-js/lib/draw/BaseRenderer";
-import { append as p, attr as m, create as h } from "tiny-svg";
-import g from "diagram-js/lib/features/selection";
-import ee from "diagram-js/lib/navigation/zoomscroll";
-import te from "diagram-js/lib/navigation/movecanvas";
-import _ from "diagram-js/lib/features/lasso-tool";
-import v from "diagram-js/lib/features/modeling";
-import ne from "diagram-js/lib/features/move";
-import re from "diagram-js/lib/features/outline";
-import ie from "diagram-js/lib/features/resize";
-import ae from "diagram-js/lib/layout/BaseLayouter";
-import oe from "diagram-js/lib/features/rules";
-import se from "diagram-js/lib/features/rules/RuleProvider";
-import ce from "diagram-js/lib/command/CommandInterceptor";
-import le from "diagram-js/lib/features/palette";
-import ue from "diagram-js/lib/features/create";
-import de from "diagram-js/lib/features/connect";
-import fe from "diagram-js/lib/features/connection-preview";
-import pe from "diagram-js/lib/features/context-pad";
-import me from "diagram-js/lib/features/copy-paste";
-import he from "diagram-js/lib/features/copy-paste/CopyPaste.js";
+import { ALL_INTERACTION_SPECS as t, ALL_TEAM_SPECS as n, ANNOTATION_FIELDS as r, ANNOTATION_SPEC as i, DIAGRAM_ROOT_ID as a, DOCUMENT_FIELDS as o, DOCUMENT_VERSION as s, FLOW_FIELDS as c, FLOW_SPEC as l, INTERACTION_FIELDS as u, INTERACTION_MODE_SPECS as d, TEAM_NODE_FIELDS as f, TEAM_TYPE_SPECS as p, associationId as m, dashArray as h, documentIdProblems as g, foreignFields as _, newId as v, parseDocument as ee, serializeDocument as te, withForeignFields as y } from "@miragon/team-topologies-schema-model";
+import { getMid as b } from "diagram-js/lib/layout/LayoutUtil";
+import ne from "diagram-js/lib/layout/CroppingConnectionDocking";
+import re from "diagram-js/lib/draw/BaseRenderer";
+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 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/connect";
+import ye from "diagram-js/lib/features/connection-preview";
+import be from "diagram-js/lib/features/context-pad";
+import xe from "diagram-js/lib/features/copy-paste";
+import Se from "diagram-js/lib/features/copy-paste/CopyPaste.js";
+import { MODELER_API_VERSION as Ce } from "@miragon/modeler-api";
 //#region src/model/di-types.ts
-var ge = /* @__PURE__ */ new Set([
+var we = /* @__PURE__ */ new Set([
 	"team",
 	"interaction",
 	"flow",
 	"annotation"
 ]);
-function y(e) {
+function w(e) {
 	return typeof e == "object" && e ? e.ttKind : void 0;
 }
-function b(e) {
-	let t = y(e);
-	return t !== void 0 && ge.has(t);
+function T(e) {
+	let t = w(e);
+	return t !== void 0 && we.has(t);
 }
-function x(e) {
-	return y(e) === "team";
+function E(e) {
+	return w(e) === "team";
 }
-function S(e) {
-	return y(e) === "interaction";
+function D(e) {
+	return w(e) === "interaction";
 }
-function C(e) {
-	return y(e) === "flow";
+function O(e) {
+	return w(e) === "flow";
 }
-function w(e) {
-	return y(e) === "annotation";
+function k(e) {
+	return w(e) === "annotation";
 }
-function T(e) {
-	return y(e) === "association";
+function A(e) {
+	return w(e) === "association";
 }
 //#endregion
-//#region src/io/saveSvg.ts
-var E = 40;
-function D(e, t) {
-	let n = e.getContainer().querySelector("svg");
+//#region src/theme/palette.ts
+var j = {
+	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)"
+}, Te = {
+	"--cd-blau": j.blau,
+	"--cd-gruen": j.gruen,
+	"--cd-grau": j.grau,
+	"--cd-schwarz": j.schwarz,
+	"--cd-weiss": j.weiss,
+	"--cd-blau-link": j.blauLink,
+	"--cd-blau-hell": j.blauHell,
+	"--cd-linie": j.linie,
+	"--cd-kontur": j.kontur,
+	"--cd-text-leise": j.textLeise,
+	"--cd-success": j.success,
+	"--cd-success-soft": j.successSoft,
+	"--cd-warning": j.warning,
+	"--cd-warning-soft": j.warningSoft,
+	"--cd-danger": j.danger,
+	"--cd-danger-soft": j.dangerSoft,
+	"--cd-info": j.info,
+	"--cd-info-soft": j.infoSoft,
+	"--cd-success-hell": j.successHell,
+	"--cd-warning-hell": j.warningHell,
+	"--cd-danger-hell": j.dangerHell,
+	"--cd-info-hell": j.infoHell,
+	"--cd-gradient-brand": j.gradientBrand
+}, M = 40, Ee = "http://www.w3.org/2000/svg", De = [
+	".djs-outline",
+	".djs-resizer",
+	".djs-selection-outline",
+	".djs-lasso-overlay",
+	".djs-dragger",
+	".djs-bendpoint",
+	".djs-segment-dragger"
+].join(", "), Oe = ["selected", "hover"], ke = [
+	"class",
+	"tabindex",
+	"role",
+	"aria-roledescription",
+	"aria-label"
+];
+function Ae(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 (!b(e)) continue;
+		if (!T(e)) continue;
 		let t = e;
 		r = Math.min(r, t.x), i = Math.min(i, t.y), a = Math.max(a, t.x + t.width), o = Math.max(o, t.y + t.height);
 	}
 	Number.isFinite(r) || (r = 0, i = 0, a = 100, o = 100);
-	let s = r - E, c = i - E, 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 s = r - M, c = i - M, l = a - r + 80, u = o - i + 80, d = n.cloneNode(!0);
+	for (let e of ke) d.removeAttribute(e);
+	for (let e of d.querySelectorAll(De)) e.remove();
+	for (let e of d.querySelectorAll(Oe.map((e) => `.${e}`).join())) e.classList.remove(...Oe);
+	d.setAttribute("xmlns", Ee), 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) };
+	f && f.removeAttribute("transform");
+	let p = d.ownerDocument.createElementNS(Ee, "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", j.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 O = "tt-root";
-//#endregion
-//#region src/TtBaseViewer.ts
-function _e(e) {
+var N = a, P = "tt-canvas-keyboard-focus";
+function je(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var ve = class {
+var Me = class {
 	_diagram;
 	_container;
 	_options;
@@ -87,18 +153,33 @@ var ve = class {
 	}
 	_createContainer(e) {
 		let t = e.container ?? document.createElement("div");
-		return t.classList.add("tt-djs-container"), t.style.width = _e(e.width ?? "100%"), t.style.height = _e(e.height ?? (e.container ? "100%" : "600px")), t;
+		return t.classList.add("tt-djs-container"), t.style.width = je(e.width ?? "100%"), t.style.height = je(e.height ?? (e.container ? "100%" : "600px")), t;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
 			let t = [...this._getModules(), ...this._options.additionalModules ?? []];
 			this._diagram = new e({
 				canvas: { container: this._container },
-				modules: t
-			});
+				modules: t,
+				ttKeyboard: { undoRedoKeys: this._options.undoRedoKeys ?? !0 },
+				ttPalette: { freeRectCenter: this._options.freeRectCenter }
+			}), this._describeCanvas(this._diagram);
 		}
 		return this._diagram;
 	}
+	_describeCanvas(e) {
+		let t = e.get("canvas").getContainer(), n = t.querySelector(":scope > svg");
+		if (!n) return;
+		n.setAttribute("aria-label", "Team Topologies diagram");
+		let r = t.ownerDocument, i = !1, a = (e) => {
+			i = e.key === "Tab";
+		}, o = () => {
+			i = !1, n.classList.remove(P);
+		};
+		r.addEventListener("keydown", a, !0), r.addEventListener("pointerdown", o, !0), n.addEventListener("focusin", () => n.classList.toggle(P, i)), n.addEventListener("focusout", () => n.classList.remove(P)), e.get("eventBus").on("diagram.destroy", () => {
+			r.removeEventListener("keydown", a, !0), r.removeEventListener("pointerdown", o, !0);
+		});
+	}
 	get(e) {
 		return this._ensureDiagram().get(e);
 	}
@@ -108,11 +189,20 @@ var ve = class {
 	off(e, t) {
 		this.get("eventBus").off(e, t);
 	}
-	importDocument(e) {
-		let t = this._ensureDiagram(), n = t.get("eventBus"), r = t.get("ttImporter");
-		r.clear();
-		let i = r.import(e);
-		return this._fit(), n.fire("import.done", { warnings: i }), { warnings: i };
+	importDocument(e, t = {}) {
+		let n = g(e);
+		if (n.length > 0) throw Error(n.map(({ path: e, message: t }) => `${e.join(".")}: ${t}`).join("; "));
+		let r = this._ensureDiagram(), i = r.get("eventBus"), a = r.get("ttImporter"), o = r.get("ttLabelEditing", !1);
+		i.fire("import.parse.start", { document: e }), o?.suspend(), r.get("commandStack", !1)?.clear(!1), a.clear();
+		let s = a.import(e);
+		return t.fit !== !1 && this._fit(), i.fire("import.done", { warnings: s }), o?.resumeAfterImport(), { warnings: s };
+	}
+	fitToView() {
+		this._fit();
+	}
+	_fit() {
+		let e = this._ensureDiagram().get("ttViewport", !1);
+		e ? e.fit() : this.get("canvas").zoom("fit-viewport");
 	}
 	exportDocument() {
 		return this.get("ttExporter").export();
@@ -124,7 +214,7 @@ var ve = class {
 		} catch {
 			return;
 		}
-		if (!n || n.id !== "tt-root") return;
+		if (!n || n.id !== N) return;
 		let r = n.businessObject ?? { title: "Untitled team topology" };
 		n.businessObject = {
 			...r,
@@ -139,27 +229,7 @@ var ve = class {
 		}
 	}
 	saveSVG() {
-		return D(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()) {
-			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));
-		}
-		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");
-			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
-		});
+		return Ae(this.get("canvas"), this.get("elementRegistry"));
 	}
 	attachTo(e) {
 		e.appendChild(this._container), this.get("canvas").resized();
@@ -176,12 +246,16 @@ var ve = class {
 	get container() {
 		return this._container;
 	}
-}, ye = class {
+}, Ne = class {
 	elementFactory;
 	static $inject = ["elementFactory"];
 	constructor(e) {
 		this.elementFactory = e;
 	}
+	foreign(e, t) {
+		let n = _(e, t);
+		return n ? { ttForeign: n } : {};
+	}
 	createTeam(e) {
 		return this.elementFactory.createShape({
 			id: e.id,
@@ -194,7 +268,8 @@ var ve = class {
 			ttLabel: e.label,
 			...e.description ? { description: e.description } : {},
 			...e.fill ? { fill: e.fill } : {},
-			...e.stroke ? { stroke: e.stroke } : {}
+			...e.stroke ? { stroke: e.stroke } : {},
+			...this.foreign(e, f)
 		});
 	}
 	createInteraction(e) {
@@ -208,7 +283,8 @@ var ve = class {
 			mode: e.mode,
 			...e.label ? { ttLabel: e.label } : {},
 			...e.fill ? { fill: e.fill } : {},
-			...e.stroke ? { stroke: e.stroke } : {}
+			...e.stroke ? { stroke: e.stroke } : {},
+			...this.foreign(e, u)
 		});
 	}
 	createFlow(e) {
@@ -219,7 +295,8 @@ var ve = class {
 			width: e.size.width,
 			height: e.size.height,
 			ttKind: "flow",
-			...e.label ? { ttLabel: e.label } : {}
+			...e.label ? { ttLabel: e.label } : {},
+			...this.foreign(e, c)
 		});
 	}
 	createAnnotation(e) {
@@ -230,22 +307,23 @@ var ve = class {
 			width: e.size.width,
 			height: e.size.height,
 			ttKind: "annotation",
-			...e.text ? { ttLabel: e.text } : {}
+			...e.text ? { ttLabel: e.text } : {},
+			...this.foreign(e, r)
 		});
 	}
-	createAssociation(e, n) {
+	createAssociation(e, t) {
 		return this.elementFactory.createConnection({
-			id: `assoc_${e.id}`,
+			id: m(e.id),
 			ttKind: "association",
 			source: e,
-			target: n,
-			waypoints: [t(e), t(n)]
+			target: t,
+			waypoints: [b(e), b(t)]
 		});
 	}
 	createNewTeam(e, t) {
-		let n = c[e];
+		let n = p[e];
 		return this.elementFactory.createShape({
-			id: u("team"),
+			id: v("team"),
 			width: n.defaultSize.width,
 			height: n.defaultSize.height,
 			ttKind: "team",
@@ -254,9 +332,9 @@ var ve = class {
 		});
 	}
 	createNewInteraction(e) {
-		let t = s[e];
+		let t = d[e];
 		return this.elementFactory.createShape({
-			id: u("int"),
+			id: v("int"),
 			width: t.defaultSize.width,
 			height: t.defaultSize.height,
 			ttKind: "interaction",
@@ -265,16 +343,16 @@ var ve = class {
 	}
 	createNewFlow() {
 		return this.elementFactory.createShape({
-			id: u("flow"),
-			width: o.defaultSize.width,
-			height: o.defaultSize.height,
+			id: v("flow"),
+			width: l.defaultSize.width,
+			height: l.defaultSize.height,
 			ttKind: "flow",
-			ttLabel: o.label
+			ttLabel: l.label
 		});
 	}
 	createNewAnnotation(e) {
 		return this.elementFactory.createShape({
-			id: u("ann"),
+			id: v("ann"),
 			width: i.defaultSize.width,
 			height: i.defaultSize.height,
 			ttKind: "annotation",
@@ -283,86 +361,107 @@ var ve = class {
 	}
 	createNewAssociation() {
 		return this.elementFactory.createConnection({
-			id: u("assoc"),
+			id: v("assoc"),
 			ttKind: "association"
 		});
 	}
-}, be = { ttElementFactory: ["type", ye] }, k = {
-	blau: "#335DE5",
-	blauLink: "#2B50D4",
-	blauHell: "#6B8AFF",
-	gruen: "#00E676",
-	grau: "#F9F7F7",
-	schwarz: "#1D1D1D",
-	weiss: "#FFFFFF",
-	success: "#0B7A55",
-	warning: "#92610A",
-	danger: "#C92A2A",
-	info: "#2B50D4",
-	gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
-};
-k.blau, k.gruen, k.grau, k.schwarz, k.weiss, k.blauLink, k.blauHell, k.success, k.warning, k.danger, k.info, k.gradientBrand;
-//#endregion
-//#region src/draw/styles.ts
-var xe = 1500;
-k.blau;
-var Se = k.schwarz, A = "#5B5B5B", j = {
+}, Pe = { ttElementFactory: ["type", Ne] }, Fe = 1500, F = j.schwarz, Ie = j.textLeise, Le = j.kontur, I = {
 	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13.5,
 	small: 11,
 	annotation: 12
-};
-k.weiss;
-//#endregion
-//#region src/draw/label-layout.ts
-var M = 10, N = {
+}, Re = 10, L = {
 	left: 10,
 	right: 6,
 	top: 6,
 	bottom: 6
-}, P = 1.2;
-function F(e, t) {
+}, R = 1.2, ze = 4.5;
+function z(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 Be(e, t, n) {
+	let r = (r) => Math.round(e[r] * n + t[r] * (1 - n));
+	return [
+		r(0),
+		r(1),
+		r(2)
+	];
+}
+function B([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 V(e, t) {
+	let [n, r] = [B(e), B(t)].sort((e, t) => t - e);
+	return (n + .05) / (r + .05);
+}
+function Ve(e, t = 1) {
+	let n = z(e), r = z(F), i = z(j.weiss);
+	if (!n || !r || !i) return F;
+	let a = Be(n, i, t), o = V(r, a);
+	return o >= ze ? F : V(i, a) > o ? j.weiss : F;
+}
+function He(e) {
+	if (D(e)) {
+		let t = d[e.mode] ?? d.collaboration;
+		return Ve(e.fill ?? t.fill, t.opacity);
+	}
+	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 I(e) {
+function H(e) {
 	let t = Math.max(e.width, 1), n = Math.max(e.height, 1);
-	return w(e) ? {
+	return k(e) ? {
 		box: {
-			x: N.left,
-			y: N.top,
-			width: Math.max(t - N.left - N.right, 1),
-			height: Math.max(n - N.top - N.bottom, 1)
+			x: L.left,
+			y: L.top,
+			width: Math.max(t - L.left - L.right, 1),
+			height: Math.max(n - L.top - L.bottom, 1)
 		},
 		align: "left-top",
-		fontSize: j.annotation,
-		fontWeight: "450",
-		fill: Se
-	} : C(e) ? {
+		fontSize: I.annotation,
+		fontWeight: "400",
+		fill: F
+	} : O(e) ? {
 		box: {
-			x: M,
+			x: Re,
 			y: 0,
-			width: t - F(t, n) - 20,
+			width: t - Ue(t, n) - 20,
 			height: n
 		},
 		align: "center",
-		fontSize: j.small,
-		fontWeight: "650",
+		fontSize: I.small,
+		fontWeight: "600",
 		letterSpacing: "0.06em",
-		fill: A
+		fill: Ie
 	} : {
 		box: {
-			x: M,
+			x: Re,
 			y: 0,
 			width: t - 20,
 			height: n
 		},
 		align: "center",
-		fontSize: S(e) ? j.small : j.label,
-		fontWeight: S(e) ? "600" : "640",
-		fill: Se
+		fontSize: D(e) ? I.small : I.label,
+		fontWeight: "600",
+		fill: He(e)
 	};
 }
-function Ce(e, t, n) {
+function We(e, t, n) {
 	let r = Math.max(4, Math.floor(t / (n * .58))), i = e.split(/\r?\n/), a = [];
 	for (let e of i) {
 		let t = e.split(/\s+/).filter(Boolean), n = "";
@@ -378,65 +477,65 @@ function Ce(e, t, n) {
 }
 //#endregion
 //#region src/draw/TeamTopologiesRenderer.ts
-var L = class extends f {
+var Ge = class extends re {
 	static $inject = ["eventBus"];
 	constructor(e) {
-		super(e, xe);
+		super(e, Fe);
 	}
 	canRender(e) {
-		return b(e) || T(e);
+		return T(e) || A(e);
 	}
 	drawShape(e, t) {
-		if (x(t)) return this.drawTeam(e, t);
-		if (S(t)) return this.drawInteraction(e, t);
-		if (C(t)) return this.drawFlow(e, t);
-		if (w(t)) return this.drawAnnotation(e, t);
-		let n = m(h("rect"), {
+		if (E(t)) return this.drawTeam(e, t);
+		if (D(t)) return this.drawInteraction(e, t);
+		if (O(t)) return this.drawFlow(e, t);
+		if (k(t)) return this.drawAnnotation(e, t);
+		let n = S(C("rect"), {
 			width: t.width,
 			height: t.height,
-			fill: "#eee"
+			fill: j.linie
 		});
-		return p(e, n), n;
+		return x(e, n), n;
 	}
 	drawConnection(e, t) {
-		let n = m(h("path"), {
-			d: R(t.waypoints),
+		let n = S(C("path"), {
+			d: qe(t.waypoints),
 			fill: "none",
-			stroke: A,
+			stroke: Le,
 			"stroke-width": 1.5,
 			"stroke-dasharray": "4 4",
 			"stroke-linecap": "round"
 		});
-		return p(e, n), n;
+		return x(e, n), n;
 	}
 	getShapePath(e) {
 		let { x: t, y: n, width: r, height: i } = e;
 		return `M${t},${n}l${r},0l0,${i}l${-r},0z`;
 	}
 	getConnectionPath(e) {
-		return R(e.waypoints);
+		return qe(e.waypoints);
 	}
 	drawTeam(e, t) {
-		let n = c[t.teamType] ?? c["stream-aligned"], r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = n.strokeWidth, o = l(n.strokeStyle, a), s = this.teamOutline(n.shape, r, i, a, {
+		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, {
 			fill: t.fill ?? n.fill,
 			stroke: t.stroke ?? n.stroke,
 			"stroke-width": a,
 			...o ? { "stroke-dasharray": o } : {},
 			"stroke-linejoin": "round"
 		});
-		return p(e, s), this.appendLabel(e, t.ttLabel ?? "", I(t)), s;
+		return x(e, s), this.appendLabel(e, t.ttLabel ?? "", H(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 m(h("polygon"), {
-				points: we(a, o, s, e),
+			return S(C("polygon"), {
+				points: Ke(a, o, s, e),
 				...i
 			});
 		}
 		let c = e === "rect" ? 4 : Math.min(20, s / 2, o / 2);
-		return m(h("rect"), {
+		return S(C("rect"), {
 			x: a,
 			y: a,
 			width: o,
@@ -447,15 +546,15 @@ var L = class extends f {
 		});
 	}
 	drawInteraction(e, t) {
-		let n = s[t.mode] ?? s.collaboration, r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = {
+		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,
 			stroke: t.stroke ?? n.stroke,
 			"stroke-width": 2,
-			"stroke-dasharray": l(n.strokeStyle, 2) || "6 4",
+			"stroke-dasharray": h(n.strokeStyle, 2) || "6 4",
 			"stroke-linejoin": "round"
 		}, o;
-		if (n.shape === "circle") o = m(h("ellipse"), {
+		if (n.shape === "circle") o = S(C("ellipse"), {
 			cx: r / 2,
 			cy: i / 2,
 			rx: (r - 2) / 2,
@@ -464,56 +563,56 @@ var L = class extends f {
 		});
 		else if (n.shape === "triangle") {
 			let e = `${r / 2},1 ${r - 1},${i - 1} 1,${i - 1}`;
-			o = m(h("polygon"), {
+			o = S(C("polygon"), {
 				points: e,
 				...a
 			});
 		} 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 = m(h("polygon"), {
+			o = S(C("polygon"), {
 				points: t,
 				...a
 			});
 		}
-		return p(e, o), this.appendLabel(e, t.ttLabel ?? "", I(t)), o;
+		return x(e, o), this.appendLabel(e, t.ttLabel ?? "", H(t)), o;
 	}
 	drawFlow(e, t) {
-		let n = Math.max(t.width, 1), r = Math.max(t.height, 1), i = o.strokeWidth, a = i / 2, s = F(n, r), c = r * .5, u = (r - c) / 2, d = u + c, f = [
-			[a, u],
-			[n - s, u],
-			[n - s, a],
+		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],
 			[n - a, r / 2],
-			[n - s, r - a],
-			[n - s, d],
-			[a, d]
-		].map((e) => e.join(",")).join(" "), g = m(h("polygon"), {
-			points: f,
+			[n - o, r - a],
+			[n - o, u],
+			[a, u]
+		].map((e) => e.join(",")).join(" "), f = S(C("polygon"), {
+			points: d,
 			fill: "none",
-			stroke: o.stroke,
+			stroke: l.stroke,
 			"stroke-width": i,
-			"stroke-dasharray": l(o.strokeStyle, i) || "6 4",
+			"stroke-dasharray": h(l.strokeStyle, i) || "6 4",
 			"stroke-linejoin": "round"
 		});
-		return p(e, g), this.appendLabel(e, t.ttLabel ?? "", I(t)), g;
+		return x(e, f), this.appendLabel(e, t.ttLabel ?? "", H(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 = m(h("path"), {
+		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: A,
+			stroke: Le,
 			"stroke-width": i,
 			"stroke-linejoin": "round"
 		});
-		return p(e, s), this.appendLabel(e, t.ttLabel ?? "", I(t)), s;
+		return x(e, s), this.appendLabel(e, t.ttLabel ?? "", H(t)), s;
 	}
 	appendLabel(e, t, n) {
-		let { box: r, fontSize: i } = n, a = Ce(t, r.width, i), o = i * P, 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 * R, 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 = m(h("text"), {
+			let a = S(C("text"), {
 				x: c,
 				y: l + r * o,
-				"font-family": j.family,
+				"font-family": I.family,
 				"font-size": i,
 				fill: n.fill,
 				"text-anchor": s ? "middle" : "start",
@@ -521,11 +620,11 @@ var L = class extends f {
 				"font-weight": n.fontWeight,
 				...n.letterSpacing ? { "letter-spacing": n.letterSpacing } : {}
 			});
-			a.textContent = t, p(e, a);
+			a.textContent = t, x(e, a);
 		});
 	}
 };
-function we(e, t, n, r) {
+function Ke(e, t, n, r) {
 	return [
 		[e + r, e],
 		[e + t - r, e],
@@ -537,16 +636,16 @@ function we(e, t, n, r) {
 		[e, e + r]
 	].map((e) => e.join(",")).join(" ");
 }
-function R(e) {
+function qe(e) {
 	return e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x},${e.y}`).join(" ");
 }
 //#endregion
 //#region src/draw/index.ts
-var z = {
+var Je = {
 	__init__: ["ttRenderer"],
-	ttRenderer: ["type", L],
-	connectionDocking: ["type", d]
-}, B = class {
+	ttRenderer: ["type", Ge],
+	connectionDocking: ["type", ne]
+}, Ye = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -574,7 +673,12 @@ var z = {
 			n = void 0;
 		}
 		let r;
-		n && n.id === "tt-root" ? r = n : (r = this.elementFactory.createRoot({ id: O }), this.canvas.setRootElement(r)), r.businessObject = { title: e.title };
+		n && n.id === N ? r = n : (r = this.elementFactory.createRoot({ id: N }), this.canvas.setRootElement(r));
+		let i = _(e, o);
+		r.businessObject = {
+			title: e.title,
+			...i ? { foreign: i } : {}
+		};
 		for (let t of e.flows) this.canvas.addShape(this.factory.createFlow(t), r);
 		for (let t of e.nodes) this.canvas.addShape(this.factory.createTeam(t), r);
 		for (let t of e.interactions) this.canvas.addShape(this.factory.createInteraction(t), r);
@@ -582,7 +686,7 @@ var z = {
 		for (let n of e.annotations) {
 			if (!n.attachedTo) continue;
 			let e = this.elementRegistry.get(n.id), i = this.elementRegistry.get(n.attachedTo);
-			if (!b(i) || w(i)) {
+			if (!T(i) || k(i)) {
 				t.push({
 					message: `Annotation "${n.id}" is attached to unknown element "${n.attachedTo}"; its connector was dropped.`,
 					elementId: n.id
@@ -595,13 +699,13 @@ var z = {
 		return this.eventBus.fire("import.render.done", { warnings: t }), t;
 	}
 	clear() {
-		let e = this.elementRegistry.getAll().filter((e) => e.id !== O), t = e.filter((e) => "waypoints" in e), n = e.filter((e) => !("waypoints" in e));
+		let e = this.elementRegistry.getAll().filter((e) => !!e.parent), t = e.filter((e) => "waypoints" in e), n = e.filter((e) => !("waypoints" in e));
 		for (let e of t) this.canvas.removeConnection(e.id);
 		for (let e of n) try {
 			this.canvas.removeShape(e.id);
 		} catch {}
 	}
-}, V = class {
+}, Xe = class {
 	elementRegistry;
 	canvas;
 	static $inject = ["elementRegistry", "canvas"];
@@ -615,106 +719,183 @@ var z = {
 		} catch {
 			e = void 0;
 		}
-		let t = [], n = [], r = [], i = [];
+		let t = [], n = [], i = [], a = [];
 		for (let e of this.elementRegistry.getAll()) {
-			if (e.id === "tt-root") continue;
-			let a = e, o = {
-				x: a.x,
-				y: a.y
-			}, s = {
-				width: a.width,
-				height: a.height
+			if (e.id === N) continue;
+			let o = e, s = {
+				x: o.x,
+				y: o.y
+			}, l = {
+				width: o.width,
+				height: o.height
 			};
-			if (x(e)) t.push({
+			if (E(e)) t.push(y({
 				id: e.id,
 				type: e.teamType,
 				label: e.ttLabel ?? "",
-				position: o,
-				size: s,
+				position: s,
+				size: l,
 				...e.description ? { description: e.description } : {},
 				...e.fill ? { fill: e.fill } : {},
 				...e.stroke ? { stroke: e.stroke } : {}
-			});
-			else if (S(e)) n.push({
+			}, e.ttForeign, f));
+			else if (D(e)) n.push(y({
 				id: e.id,
 				mode: e.mode,
-				position: o,
-				size: s,
+				position: s,
+				size: l,
 				...e.ttLabel ? { label: e.ttLabel } : {},
 				...e.fill ? { fill: e.fill } : {},
 				...e.stroke ? { stroke: e.stroke } : {}
-			});
-			else if (C(e)) r.push({
+			}, e.ttForeign, u));
+			else if (O(e)) i.push(y({
 				id: e.id,
-				position: o,
-				size: s,
+				position: s,
+				size: l,
 				...e.ttLabel ? { label: e.ttLabel } : {}
-			});
-			else if (w(e)) {
-				let t = Te(e);
-				i.push({
+			}, e.ttForeign, c));
+			else if (k(e)) {
+				let t = Ze(e);
+				a.push(y({
 					id: e.id,
 					text: e.ttLabel ?? "",
-					position: o,
-					size: s,
+					position: s,
+					size: l,
 					...t ? { attachedTo: t } : {}
-				});
+				}, e.ttForeign, r));
 			}
 		}
-		return {
-			version: a,
+		return y({
+			version: s,
 			title: e?.title ?? "Untitled team topology",
 			nodes: t,
 			interactions: n,
-			flows: r,
-			annotations: i
-		};
+			flows: i,
+			annotations: a
+		}, e?.foreign, o);
 	}
 };
-function Te(e) {
-	let t = [...e.outgoing, ...e.incoming].find(T);
+function Ze(e) {
+	let t = [...e.outgoing, ...e.incoming].find(A);
 	if (t) return (t.source === e ? t.target : t.source)?.id;
 }
 //#endregion
+//#region src/io/TtViewport.ts
+var Qe = 760, $e = 88, et = 120, U = 56, tt = 24, nt = 1, rt = 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 <= Qe, a = i ? et : $e, o = i ? tt : 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, nt);
+		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;
+		for (let i of this.elementRegistry.getAll()) {
+			let a = i;
+			typeof a.x == "number" && typeof a.y == "number" && typeof a.width == "number" && typeof a.height == "number" && (e = Math.min(e, a.x), t = Math.min(t, a.y), n = Math.max(n, a.x + a.width), r = Math.max(r, a.y + a.height));
+		}
+		return Number.isFinite(e) ? {
+			minX: e,
+			minY: t,
+			maxX: n,
+			maxY: r
+		} : void 0;
+	}
+}, W = "http://www.w3.org/2000/svg", G = {
+	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 it(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 at(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");
+	return a.textContent = t, i.appendChild(a), r.insertBefore(i, r.firstChild), new XMLSerializer().serializeToString(n);
+}
+//#endregion
 //#region src/io/index.ts
-var H = {
-	ttImporter: ["type", B],
-	ttExporter: ["type", V]
-}, U = class extends ve {
+var ot = {
+	ttImporter: ["type", Ye],
+	ttExporter: ["type", Xe],
+	ttViewport: ["type", rt]
+}, st = class extends Me {
 	_getModules() {
 		return [
-			be,
-			z,
-			H
+			Pe,
+			Je,
+			ot
 		];
 	}
-}, W = class extends U {
+}, K = class extends st {
 	_getModules() {
 		return [
 			...super._getModules(),
-			g,
-			ee,
-			te
+			ie,
+			ae,
+			oe
 		];
 	}
 };
 //#endregion
 //#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function G(e, t, n) {
+function ct(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var Ee = class {
+var lt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], G(r, e, n[e]);
+		for (let e of Object.keys(n)) i[e] = r[e], ct(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)) G(r, e, n[e]);
+		if (n) for (let e of Object.keys(n)) ct(r, e, n[e]);
 		return [t];
 	}
-}, K = "element.updateProperties", q = 40, J = class {
+}, q = "Untitled team topology", ut = class {
+	canvas;
+	static $inject = ["canvas"];
+	constructor(e) {
+		this.canvas = e;
+	}
+	execute(e) {
+		let t = this.canvas.getRootElement(), n = t.businessObject ?? { title: q };
+		return e.oldTitle = n.title, t.businessObject = {
+			...n,
+			title: e.title
+		}, [t];
+	}
+	revert(e) {
+		let t = this.canvas.getRootElement();
+		return t.businessObject = {
+			...t.businessObject ?? { title: q },
+			title: e.oldTitle ?? q
+		}, [t];
+	}
+}, dt = "element.updateProperties", ft = "tt.title.update", pt = 40, mt = class {
 	commandStack;
 	modeling;
 	factory;
@@ -726,10 +907,13 @@ var Ee = class {
 		"canvas"
 	];
 	constructor(e, t, n, r) {
-		this.commandStack = e, this.modeling = t, this.factory = n, this.canvas = r, e.registerHandler(K, Ee);
+		this.commandStack = e, this.modeling = t, this.factory = n, this.canvas = r, e.registerHandler(dt, lt), e.registerHandler(ft, ut);
+	}
+	setTitle(e) {
+		this.commandStack.execute(ft, { title: e });
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(K, {
+		this.commandStack.execute(dt, {
 			element: e,
 			properties: t
 		});
@@ -754,8 +938,8 @@ var Ee = class {
 	}
 	appendAnnotation(e) {
 		let t = this.factory.createNewAnnotation(), n = {
-			x: e.x + e.width + q + t.width / 2,
-			y: e.y - q / 4
+			x: e.x + e.width + pt + t.width / 2,
+			y: e.y - pt / 4
 		};
 		return this.modeling.appendShape(e, t, n, this.canvas.getRootElement(), {
 			connection: this.factory.createNewAssociation(),
@@ -763,45 +947,45 @@ var Ee = class {
 		});
 	}
 	detachAnnotation(e) {
-		let t = [...e.incoming, ...e.outgoing].filter(T);
+		let t = [...e.incoming, ...e.outgoing].filter(A);
 		t.length > 0 && this.modeling.removeElements(t);
 	}
-}, Y = class extends ae {
-	layoutConnection(e, n = {}) {
-		let r = n.source ?? e.source, i = n.target ?? e.target;
-		return !r || !i ? super.layoutConnection(e, n) : [t(r), t(i)];
+}, ht = 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)];
 	}
-}, De = {
-	__depends__: [v],
+}, gt = {
+	__depends__: [ce],
 	__init__: ["ttModeling"],
-	ttModeling: ["type", J],
-	layouter: ["type", Y]
+	ttModeling: ["type", mt],
+	layouter: ["type", ht]
 };
 //#endregion
 //#region src/rules/TtRules.ts
-function Oe(e) {
-	return b(e) && !w(e);
+function _t(e) {
+	return T(e) && !k(e);
 }
-var ke = class extends se {
+var vt = 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 }) => w(e) && Oe(t) || w(t) && Oe(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 }) => k(e) && _t(t) || k(t) && _t(e) ? { ttKind: "association" } : !1);
 	}
-}, Ae = {
-	__depends__: [oe],
+}, yt = {
+	__depends__: [pe],
 	__init__: ["ttRules"],
-	ttRules: ["type", ke]
-}, je = class extends ce {
+	ttRules: ["type", vt]
+}, bt = class extends he {
 	static $inject = ["eventBus", "canvas"];
 	constructor(e, t) {
 		super(e), this.preExecute(["shape.create", "elements.create"], (e) => {
 			e.parent = t.getRootElement();
 		}, !0);
 	}
-}, Me = class extends ce {
+}, xt = class extends he {
 	static $inject = [
 		"eventBus",
 		"connectionDocking",
@@ -809,171 +993,307 @@ var ke = class extends se {
 	];
 	constructor(e, t, n) {
 		super(e), this.executed(["connection.layout", "connection.create"], (e) => {
-			!e.cropped && T(e.connection) && (e.connection.waypoints = t.getCroppedWaypoints(e.connection), e.cropped = !0);
+			!e.cropped && A(e.connection) && (e.connection.waypoints = t.getCroppedWaypoints(e.connection), e.cropped = !0);
 		}, !0), this.reverted("connection.layout", (e) => {
 			delete e.cropped;
 		}, !0), this.postExecuted("connection.create", (e) => {
 			let t = e.connection;
-			if (!T(t)) return;
-			let r = w(t.source) ? t.source : t.target;
-			if (!w(r)) return;
-			let i = [...r.incoming, ...r.outgoing].filter((e) => e !== t && T(e));
+			if (!A(t)) return;
+			let r = k(t.source) ? t.source : t.target;
+			if (!k(r)) return;
+			let i = [...r.incoming, ...r.outgoing].filter((e) => e !== t && A(e));
 			i.length > 0 && n.removeElements(i);
 		}, !0);
 	}
-}, Ne = {
+}, St = {
 	__init__: ["ttFlatModelBehavior", "ttAssociationBehavior"],
-	ttFlatModelBehavior: ["type", je],
-	ttAssociationBehavior: ["type", Me]
-};
+	ttFlatModelBehavior: ["type", bt],
+	ttAssociationBehavior: ["type", xt]
+}, Ct = [["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" }]], wt = [
+	["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" }]
+], Tt = [["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" }]], Et = [
+	["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" }]
+], Dt = [
+	["path", { d: "M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z" }],
+	["path", { d: "M5 3a2 2 0 0 0-2 2" }],
+	["path", { d: "M19 3a2 2 0 0 1 2 2" }],
+	["path", { d: "M5 21a2 2 0 0 1-2-2" }],
+	["path", { d: "M9 3h1" }],
+	["path", { d: "M9 21h2" }],
+	["path", { d: "M14 3h1" }],
+	["path", { d: "M3 9v1" }],
+	["path", { d: "M21 9v2" }],
+	["path", { d: "M3 14v1" }]
+], Ot = [
+	["path", { d: "M4 5h16" }],
+	["path", { d: "M4 12h16" }],
+	["path", { d: "M4 19h16" }]
+], kt = [["path", { d: "M5 12h14" }]], At = [["path", { d: "M5 12h14" }], ["path", { d: "M12 5v14" }]], jt = [
+	["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" }]
+], Mt = [
+	["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" }]
+], Nt = [["path", { d: "M18 6 6 18" }], ["path", { d: "m6 6 12 12" }]], Pt = 2.5, Ft = 16, It = [
+	"path",
+	"circle",
+	"ellipse",
+	"line",
+	"polyline",
+	"polygon",
+	"rect"
+], Lt = [
+	"d",
+	"cx",
+	"cy",
+	"r",
+	"rx",
+	"ry",
+	"x",
+	"y",
+	"x1",
+	"y1",
+	"x2",
+	"y2",
+	"width",
+	"height",
+	"points"
+];
+function Rt(e) {
+	return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function zt(e, t) {
+	let n = Number(e);
+	return Number.isFinite(n) && n > 0 ? n : t;
+}
+function J(e, t = {}) {
+	let n = zt(t.size, Ft), r = zt(t.strokeWidth, Pt);
+	return `<svg${t.className ? ` class="${Rt(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 = It.find((t) => t === e);
+		return n ? `<${n} ${Object.entries(t).flatMap(([e, t]) => {
+			let n = Lt.find((t) => t === e);
+			return n ? [`${n}="${Rt(String(t))}"`] : [];
+		}).join(" ")}/>` : "";
+	}).join("")}</svg>`;
+}
 //#endregion
 //#region src/draw/palette-icons.ts
-function X(e) {
+var Bt = {
+	size: 20,
+	strokeWidth: 2
+};
+function Y(e) {
 	return `<svg class="tt-palette-svg" width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
 }
-function Pe(e) {
-	let t = c[e], n = l(t.strokeStyle, 1.5), r = `fill="${t.fill}" stroke="${t.stroke}" stroke-width="1.5"` + (n ? ` stroke-dasharray="${n}"` : "");
+function Vt(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 X(`<polygon points="8,3 18,3 23,8 23,18 18,23 8,23 3,18 3,8" ${r}/>`);
-		case "rounded-rect-vertical": return X(`<rect x="8" y="3" width="10" height="20" rx="4" ${r}/>`);
-		case "rect": return X(`<rect x="3" y="7" width="20" height="12" rx="1.5" ${r}/>`);
-		default: return X(`<rect x="3" y="8" width="20" height="10" rx="5" ${r}/>`);
+		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}/>`);
 	}
 }
-function Fe() {
-	return X("<g fill=\"none\" stroke=\"#6b6459\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-dasharray=\"3 2\"><polygon points=\"3,9 16,9 16,5 23,13 16,21 16,17 3,17\"/></g>");
+function Ht() {
+	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>");
 }
-function Ie() {
-	return X(`<g fill="none" stroke="${A}" stroke-width="1.5" stroke-linecap="round"><path d="M10 4H5v18h5"/><path d="M13 9h9M13 13h9M13 17h6"/></g>`);
+function Ut() {
+	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 Le() {
-	return X("<rect x=\"3\" y=\"3\" width=\"16\" height=\"13\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-dasharray=\"3 2\"/><path d=\"M14 12l9 3.6-3.8 1.4-1.4 3.8z\" fill=\"currentColor\"/>");
+function Wt() {
+	return J(Dt, {
+		...Bt,
+		className: "tt-palette-svg"
+	});
 }
-function Re(e) {
-	let t = s[e], n = l(t.strokeStyle, 1.5), r = `fill="${t.fill}" fill-opacity="${t.opacity}" stroke="${t.stroke}" stroke-width="1.5"` + (n ? ` stroke-dasharray="${n}"` : "");
+function Gt(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}"` : "");
 	switch (t.shape) {
-		case "circle": return X(`<circle cx="13" cy="13" r="9" ${r}/>`);
-		case "triangle": return X(`<polygon points="5,6 22,13 5,20" ${r}/>`);
-		default: return X(`<polygon points="9,6 23,6 17,20 3,20" ${r}/>`);
+		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}/>`);
 	}
 }
 //#endregion
 //#region src/palette/TtPaletteProvider.ts
-var ze = "tools", Be = "tt-1-teams", Ve = "tt-2-modes", He = "tt-3-guides";
-function Z(e, t, n = !0) {
-	return `<div class="entry tt-palette-entry" draggable="${n}" title="${t}">${e}</div>`;
+var Kt = "tools", qt = "tt-1-teams", Jt = "tt-2-modes", Yt = "tt-3-guides", Xt = 24;
+function Zt(e, t = !0) {
+	return `<div class="entry tt-palette-entry" draggable="${t}">${e}</div>`;
+}
+function Qt(e) {
+	return e.type === "click" && e.detail === 0;
+}
+function $t(e) {
+	return {
+		x: e.x + e.width / 2,
+		y: e.y + e.height / 2
+	};
 }
-var Ue = class {
+var en = class {
+	config;
 	create;
 	factory;
 	lassoTool;
+	canvas;
+	modeling;
+	selection;
+	elementRegistry;
 	static $inject = [
+		"config.ttPalette",
 		"palette",
 		"create",
 		"ttElementFactory",
-		"lassoTool"
+		"lassoTool",
+		"canvas",
+		"modeling",
+		"selection",
+		"elementRegistry",
+		"injector"
 	];
-	constructor(e, t, n, r) {
-		this.create = t, this.factory = n, this.lassoTool = r, e.registerProvider(this);
+	readOnly;
+	labelEditing;
+	constructor(e, t, n, r, i, a, o, s, c, l) {
+		this.config = e, this.create = n, this.factory = r, this.lassoTool = i, this.canvas = a, this.modeling = o, this.selection = s, this.elementRegistry = c, this.readOnly = l.get("ttReadOnly", !1), this.labelEditing = l.get("ttLabelEditing", !1), t.registerProvider(this);
 	}
 	getPaletteEntries() {
-		let e = {}, t = "Select several elements (or Shift + drag on the canvas)";
+		let e = {};
 		e["lasso-tool"] = {
-			group: ze,
-			title: t,
-			html: Z(Le(), t, !1),
+			group: Kt,
+			title: "Select several elements",
+			html: Zt(Wt(), !1),
 			action: { click: (e) => this.lassoTool.activateSelection(e) }
 		};
-		for (let t of r) {
-			let n = (e) => this.create.start(e, this.factory.createNewTeam(t.type, t.label));
-			e[`team.${t.type}`] = {
-				group: Be,
-				title: `${t.label} team — ${t.description}`,
-				html: Z(Pe(t.type), `${t.label} team — ${t.description}`),
-				action: {
-					dragstart: n,
-					click: n
-				}
-			};
-		}
-		for (let t of n) {
-			let n = (e) => this.create.start(e, this.factory.createNewInteraction(t.mode));
-			e[`mode.${t.mode}`] = {
-				group: Ve,
-				title: `${t.label} — ${t.description} (place over the teams it relates to)`,
-				html: Z(Re(t.mode), `${t.label} — ${t.description}`),
-				action: {
-					dragstart: n,
-					click: n
-				}
-			};
-		}
-		let a = (e) => this.create.start(e, this.factory.createNewFlow());
-		e.flow = {
-			group: He,
-			title: `${o.label} — the implied left-to-right flow`,
-			html: Z(Fe(), o.label),
-			action: {
-				dragstart: a,
-				click: a
-			}
+		for (let t of n) e[`team.${t.type}`] = this.createEntry(qt, `${t.label} team`, Vt(t.type), () => this.factory.createNewTeam(t.type, t.label));
+		for (let n of t) e[`mode.${n.mode}`] = this.createEntry(Jt, `${n.label} interaction`, Gt(n.mode), () => this.factory.createNewInteraction(n.mode));
+		return e.flow = this.createEntry(Yt, l.label, Ht(), () => this.factory.createNewFlow()), e.annotation = this.createEntry(Yt, i.label, Ut(), () => this.factory.createNewAnnotation()), e;
+	}
+	createEntry(e, t, n, r) {
+		let i = (e) => {
+			Qt(e) ? this.placeInFreeRect(r()) : this.create.start(e, r());
 		};
-		let s = (e) => this.create.start(e, this.factory.createNewAnnotation()), c = `${i.label} — a free-text note beside the diagram`;
-		return e.annotation = {
-			group: He,
-			title: c,
-			html: Z(Ie(), c),
+		return {
+			group: e,
+			title: t,
+			html: Zt(n),
 			action: {
-				dragstart: s,
-				click: s
+				dragstart: i,
+				click: i
 			}
-		}, e;
+		};
 	}
-}, We = {
+	freePlace() {
+		let e = this.canvas.viewbox(), t = this.config?.freeRectCenter?.() ?? {
+			x: e.x + e.width / 2,
+			y: e.y + e.height / 2
+		}, n = {
+			x: Math.round(t.x),
+			y: Math.round(t.y)
+		}, r = () => this.elementRegistry.filter(T).some((e) => {
+			let t = $t(e);
+			return Math.abs(t.x - n.x) < 1 && Math.abs(t.y - n.y) < 1;
+		});
+		for (; r();) n.x += Xt, n.y += Xt;
+		return n;
+	}
+	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(), T(t) && this.labelEditing?.activate(t);
+	}
+}, tn = {
 	__depends__: [
-		le,
-		ue,
-		_
+		ge,
+		_e,
+		se
 	],
 	__init__: ["ttPaletteProvider"],
-	ttPaletteProvider: ["type", Ue]
-}, Ge = "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", Ke = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", qe = "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z", Je = "M4 3h5v2H6v14h3v2H4V3zm7 4h9v2h-9V7zm0 4h9v2h-9v-2zm0 4h6v2h-6v-2z";
-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>`;
+	ttPaletteProvider: ["type", en]
+}, X = "tt.readOnly.changed", nn = 5e3, rn = [
+	"elements.move",
+	"shape.move",
+	"shape.resize",
+	"shape.create",
+	"elements.create",
+	"shape.append",
+	"connection.start",
+	"connection.create",
+	"connection.reconnect",
+	"connection.updateWaypoints",
+	"elements.delete"
+], an = class extends me {
+	bus;
+	static $inject = ["eventBus"];
+	readOnly = !1;
+	constructor(e) {
+		super(e), this.bus = e;
+	}
+	init() {
+		this.addRule(rn, nn, () => !this.readOnly && void 0);
+	}
+	isReadOnly() {
+		return this.readOnly;
+	}
+	setReadOnly(e) {
+		this.readOnly !== e && (this.readOnly = e, this.bus.fire(X, { readOnly: e }));
+	}
+}, on = {
+	__depends__: [pe],
+	__init__: ["ttReadOnly"],
+	ttReadOnly: ["type", an]
+}, sn = ".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>`;
 }
-//#endregion
-//#region src/context-pad/TtContextPadProvider.ts
-function Q(e, t) {
-	return `<div class="entry tt-cp-entry" title="${t}">${Ye(e)}</div>`;
+function cn(e) {
+	return k(e) ? "Edit text" : D(e) || O(e) ? "Edit label" : "Rename";
 }
-var Xe = class {
+var ln = class {
+	contextPad;
 	modeling;
 	ttModeling;
 	labelEditing;
 	connect;
 	selection;
+	canvas;
 	static $inject = [
 		"contextPad",
 		"modeling",
 		"ttModeling",
 		"ttLabelEditing",
 		"connect",
-		"selection"
+		"selection",
+		"canvas",
+		"eventBus",
+		"injector"
 	];
-	constructor(e, t, n, r, i, a) {
-		this.modeling = t, this.ttModeling = n, this.labelEditing = r, this.connect = i, this.selection = a, e.registerProvider(this);
+	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) => {
+			t.readOnly && e.close();
+		}), o.getContainer().addEventListener("keydown", (e) => this.onEntryKeyDown(e));
 	}
 	getContextPadEntries(e) {
-		if (T(e)) return { delete: this.deleteEntry([e], "Remove connector") };
-		if (!b(e)) return {};
-		if (w(e)) {
+		if (this.readOnly?.isReadOnly()) return {};
+		if (A(e)) return { delete: this.deleteEntry([e], "Delete connector") };
+		if (!T(e)) return {};
+		if (k(e)) {
 			let t = (t) => this.connect.start(t, e);
 			return {
-				"edit-label": this.editEntry(e, "Edit text"),
+				"edit-label": this.editEntry(e),
 				connect: {
 					group: "edit",
-					title: "Attach to an element",
-					html: Q(qe, "Attach to an element"),
+					title: "Attach to element",
+					html: Z(Tt, "Attach to element", !1),
 					action: {
 						click: t,
 						dragstart: t
@@ -982,106 +1302,165 @@ var Xe = class {
 				delete: this.deleteEntry([e], "Delete")
 			};
 		}
+		let t = () => {
+			let t = this.ttModeling.appendAnnotation(e);
+			this.selection.select(t), this.labelEditing.activate(t);
+		};
 		return {
-			"edit-label": this.editEntry(e, "Rename"),
+			"edit-label": this.editEntry(e),
 			"append-annotation": {
 				group: "edit",
 				title: "Add annotation",
-				html: Q(Je, "Add annotation"),
-				action: { click: () => {
-					let t = this.ttModeling.appendAnnotation(e);
-					this.selection.select(t), this.labelEditing.activate(t);
-				} }
+				html: Z(Et, "Add annotation"),
+				action: {
+					click: t,
+					keyboard: t
+				}
 			},
 			delete: this.deleteEntry([e], "Delete")
 		};
 	}
 	getMultiElementContextPadEntries(e) {
-		return { delete: this.deleteEntry(e, `Delete ${e.length} elements`) };
+		return this.readOnly?.isReadOnly() ? {} : { delete: this.deleteEntry(e, `Delete ${e.length} elements`) };
 	}
-	editEntry(e, t) {
+	onEntryKeyDown(e) {
+		if (e.key !== "Enter" && e.key !== " " || e.repeat) return;
+		let t = (e.target?.closest?.(sn))?.getAttribute("data-action");
+		t && (e.preventDefault(), e.stopPropagation(), this.contextPad.triggerEntry(t, "keyboard", e));
+	}
+	editEntry(e) {
+		let t = cn(e), n = () => this.labelEditing.activate(e);
 		return {
 			group: "edit",
 			title: t,
-			html: Q(Ge, t),
-			action: { click: () => this.labelEditing.activate(e) }
+			html: Z(Ct, t),
+			action: {
+				click: n,
+				keyboard: n
+			}
 		};
 	}
 	deleteEntry(e, t) {
 		return {
 			group: "edit",
 			title: t,
-			html: Q(Ke, t),
-			action: { click: () => this.modeling.removeElements([...e]) }
+			html: Z(wt, t),
+			action: {
+				click: () => this.modeling.removeElements([...e]),
+				keyboard: () => {
+					this.modeling.removeElements([...e]), this.canvas.focus();
+				}
+			}
 		};
 	}
-}, Ze = {
+}, un = {
 	__depends__: [
-		pe,
-		de,
-		fe
+		be,
+		ve,
+		ye
 	],
 	__init__: ["ttContextPadProvider"],
-	ttContextPadProvider: ["type", Xe]
-}, $ = "tt-label-editing", Qe = 96, $e = class {
+	ttContextPadProvider: ["type", ln]
+}, dn = "tt-label-editing", fn = 96;
+function pn(e) {
+	return k(e) ? "Annotation text" : D(e) ? "Interaction label" : O(e) ? "Flow label" : "Team name";
+}
+var mn = class {
 	canvas;
 	modeling;
+	elementRegistry;
 	static $inject = [
 		"eventBus",
 		"canvas",
-		"ttModeling"
+		"ttModeling",
+		"elementRegistry",
+		"injector"
 	];
 	active = null;
-	constructor(e, t, n) {
-		this.canvas = t, this.modeling = n, e.on("element.dblclick", (e) => {
-			b(e.element) && this.activate(e.element);
+	suspended = null;
+	resumeTimer;
+	readOnly;
+	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) => {
+			T(e.element) && this.activate(e.element);
 		}), e.on([
 			"element.mousedown",
 			"drag.init",
 			"canvas.viewbox.changing"
-		], () => this.active?.commit()), e.on("import.render.start", () => this.cancel());
-	}
-	activate(e) {
-		this.active?.commit();
-		let t = I(e), n = t.align === "center", r = this.canvas.zoom(), i = this.canvas.viewbox(), a = n ? Math.max(t.box.width, Qe) : t.box.width, o = e.x + t.box.x + (t.box.width - a) / 2, s = (e.y + t.box.y - i.y) * r, c = t.box.height * r, l = document.createElement("textarea");
-		l.className = "tt-label-editor", l.value = e.ttLabel ?? "", l.rows = 1, l.setAttribute("aria-label", w(e) ? "Annotation text" : "Label"), Object.assign(l.style, {
-			left: `${(o - i.x) * r}px`,
-			width: `${a * r}px`,
-			fontFamily: j.family,
-			fontSize: `${t.fontSize * r}px`,
-			fontWeight: t.fontWeight,
-			letterSpacing: t.letterSpacing ?? "normal",
-			lineHeight: String(P),
-			color: t.fill,
-			textAlign: n ? "center" : "left"
+		], () => this.active?.commit()), e.on("import.render.start", () => this.cancel()), e.on(X, (e) => {
+			e.readOnly && this.cancel();
+		}), e.on("diagram.destroy", () => {
+			clearTimeout(this.resumeTimer), this.suspended = null, this.cancel();
+		});
+	}
+	suspend() {
+		clearTimeout(this.resumeTimer), this.active && (this.suspended = this.active.snapshot(), this.active.cleanup());
+	}
+	resumeAfterImport() {
+		clearTimeout(this.resumeTimer), this.suspended && (this.resumeTimer = setTimeout(() => {
+			let e = this.suspended;
+			if (this.suspended = null, !e || this.active) return;
+			let t = this.elementRegistry.get(e.elementId);
+			T(t) && this.activate(t, e);
+		}, 0));
+	}
+	openEdit() {
+		if (!this.active) return;
+		let { elementId: e, value: t } = this.active.snapshot();
+		return {
+			elementId: e,
+			value: t
+		};
+	}
+	activate(e, t) {
+		if (this.active?.commit(), this.readOnly?.isReadOnly()) return;
+		let n = H(e), r = n.align === "center", i = this.canvas.zoom(), a = this.canvas.viewbox(), o = r ? Math.max(n.box.width, fn) : n.box.width, s = e.x + n.box.x + (n.box.width - o) / 2, c = (e.y + n.box.y - a.y) * i, l = n.box.height * i, u = document.createElement("textarea");
+		u.className = "tt-label-editor", u.value = t ? t.value : e.ttLabel ?? "", u.rows = 1, u.setAttribute("aria-label", pn(e)), Object.assign(u.style, {
+			left: `${(s - a.x) * i}px`,
+			width: `${o * i}px`,
+			fontFamily: I.family,
+			fontSize: `${n.fontSize * i}px`,
+			fontWeight: n.fontWeight,
+			letterSpacing: n.letterSpacing ?? "normal",
+			lineHeight: String(R),
+			color: n.fill,
+			textAlign: r ? "center" : "left"
 		});
-		let u = () => {
-			l.style.height = "0px";
-			let e = l.scrollHeight;
-			l.style.height = `${n ? e : Math.max(e, c)}px`, l.style.top = `${n ? s + (c - e) / 2 : s}px`;
+		let d = () => {
+			u.style.height = "0px";
+			let e = u.scrollHeight;
+			u.style.height = `${r ? e : Math.max(e, l)}px`, u.style.top = `${r ? c + (l - e) / 2 : c}px`;
 		};
-		this.canvas.getContainer().appendChild(l), this.canvas.addMarker(e, $), u(), l.focus(), l.select();
-		let d = !1, f = () => {
-			d || (d = !0, l.removeEventListener("keydown", m), l.removeEventListener("input", u), l.removeEventListener("blur", h), l.remove(), this.canvas.removeMarker(e, $), this.active = null);
-		}, p = () => {
-			if (d) return;
-			let t = l.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()) : e.key === "Escape" && (e.preventDefault(), f());
-		}, h = () => p();
-		l.addEventListener("keydown", m), l.addEventListener("input", u), l.addEventListener("blur", h), this.active = {
-			commit: p,
-			cleanup: f
+		this.canvas.getContainer().appendChild(u), this.canvas.addMarker(e, dn), d(), u.focus(), t ? u.setSelectionRange(t.selectionStart, t.selectionEnd) : u.select();
+		let f = !1, p = () => {
+			f || (f = !0, u.removeEventListener("keydown", h), u.removeEventListener("input", d), u.removeEventListener("blur", g), u.remove(), this.elementRegistry.get(e.id) === e && this.canvas.removeMarker(e, dn), this.active = null, this.canvas.restoreFocus());
+		}, m = () => {
+			if (f) return;
+			let t = u.value.trim(), n = t !== (e.ttLabel ?? "");
+			p(), n && this.modeling.updateLabel(e, t);
+		}, h = (e) => {
+			e.key === "Enter" && !e.shiftKey && !e.isComposing ? (e.preventDefault(), m(), this.canvas.focus()) : e.key === "Escape" && (e.preventDefault(), p(), this.canvas.focus());
+		}, g = () => m();
+		u.addEventListener("keydown", h), u.addEventListener("input", d), u.addEventListener("blur", g);
+		let _ = () => ({
+			elementId: e.id,
+			value: u.value,
+			selectionStart: u.selectionStart,
+			selectionEnd: u.selectionEnd
+		});
+		this.active = {
+			commit: m,
+			cleanup: p,
+			snapshot: _
 		};
 	}
 	cancel() {
 		this.active?.cleanup();
 	}
-}, et = {
+}, hn = {
 	__init__: ["ttLabelEditing"],
-	ttLabelEditing: ["type", $e]
-}, tt = 1, nt = 10, rt = {
+	ttLabelEditing: ["type", mn]
+}, gn = 1, _n = 10, vn = {
 	ArrowLeft: {
 		x: -1,
 		y: 0
@@ -1098,16 +1477,26 @@ var Xe = class {
 		x: 0,
 		y: 1
 	}
-};
-function it(e) {
+}, yn = "[aria-modal=\"true\"], dialog[open]";
+function bn(e) {
 	let t = e;
 	return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
 }
-function at(e) {
+function xn(e) {
+	return typeof e?.nodeType == "number";
+}
+function Sn(e, t) {
+	if (t.closest("[inert]")) return !1;
+	if (!xn(e) || e.nodeType === Node.DOCUMENT_NODE) return !0;
+	let n = e.ownerDocument;
+	return e === n?.body || e === n?.documentElement || t.contains(e);
+}
+function Cn(e) {
 	return !("waypoints" in e);
 }
-var ot = class {
+var Q = class {
 	static $inject = [
+		"config.ttKeyboard",
 		"eventBus",
 		"canvas",
 		"elementRegistry",
@@ -1115,42 +1504,54 @@ var ot = class {
 		"selection",
 		"modeling",
 		"copyPaste",
-		"rules"
+		"rules",
+		"injector"
 	];
-	constructor(e, t, n, r, i, a, o, s) {
-		let c = t.getContainer().ownerDocument ?? document, l = (e) => {
-			if (it(e.target)) return;
-			let t = e.ctrlKey || e.metaKey, c = e.key.toLowerCase();
-			if (t && c === "z" && !e.shiftKey) e.preventDefault(), r.canUndo() && r.undo();
-			else if (t && c === "z" && e.shiftKey || t && c === "y") e.preventDefault(), r.canRedo() && r.redo();
-			else if (c === "delete" || c === "backspace") {
-				let t = i.get();
-				t.length && (e.preventDefault(), a.removeElements([...t]));
-			} else if (t && c === "c") {
-				let t = i.get();
-				t.length && (e.preventDefault(), o.copy(t));
-			} else if (t && c === "v") e.preventDefault(), o.paste();
-			else if (t && c === "a") e.preventDefault(), i.select(n.filter((e) => !!e.parent));
-			else if (!t && !e.altKey && Object.hasOwn(rt, e.key)) {
-				let t = i.get().filter(at);
-				if (!t.length || !s.allowed("elements.move", { shapes: t })) return;
+	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) => {
+			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;
+				e.preventDefault(), a.select(null);
+			} else return !1;
+			return !0;
+		}, g = (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;
+				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(vn, e.key)) {
+				let t = a.get().filter(Cn);
+				if (!t.length || !c.allowed("elements.move", { shapes: t })) return;
 				e.preventDefault();
-				let n = rt[e.key], r = e.shiftKey ? nt : tt;
-				a.moveElements(t, {
+				let n = vn[e.key], r = e.shiftKey ? _n : gn;
+				o.moveElements(t, {
 					x: n.x * r,
 					y: n.y * r
 				});
 			}
+		}, _ = (e) => {
+			if (e.defaultPrevented || e.altKey || e.isComposing || bn(e.target) || !Sn(e.target, u) || d.querySelector(yn)) return;
+			let t = e.ctrlKey || e.metaKey, n = e.key.toLowerCase();
+			h(e, t, n) || m?.isReadOnly() || g(e, t, n);
 		};
-		c.addEventListener("keydown", l), e.on("diagram.destroy", () => c.removeEventListener("keydown", l));
+		d.addEventListener("keydown", _), t.on("diagram.destroy", () => d.removeEventListener("keydown", _));
 	}
-}, st = {
+}, wn = {
 	__init__: ["ttKeyboard"],
-	ttKeyboard: ["type", ot]
+	ttKeyboard: ["type", Q]
 };
 //#endregion
 //#region src/copy-paste/TtCopyPaste.ts
-function ct(e) {
+function Tn(e) {
 	switch (e) {
 		case "team": return "team";
 		case "interaction": return "int";
@@ -1160,7 +1561,7 @@ function ct(e) {
 		default: return;
 	}
 }
-var lt = class extends he {
+var En = class extends Se {
 	elementFactory;
 	static $inject = [
 		"canvas",
@@ -1176,52 +1577,53 @@ var lt = class extends he {
 		super(e, t, n, r, i, a, o, s), this.elementFactory = r;
 	}
 	createConnection(e) {
-		let t = ct(e.ttKind);
+		let t = Tn(e.ttKind);
 		return t ? this.elementFactory.createConnection({
 			...e,
-			id: u(t)
+			id: v(t)
 		}) : super.createConnection(e);
 	}
 	createShape(e) {
-		let t = ct(e.ttKind);
+		let t = Tn(e.ttKind);
 		return t ? this.elementFactory.createShape({
 			...e,
-			id: u(t)
+			id: v(t)
 		}) : super.createShape(e);
 	}
-}, ut = [
+}, Dn = [
 	"ttKind",
 	"teamType",
 	"mode",
 	"ttLabel",
 	"description",
 	"fill",
-	"stroke"
-], dt = {
-	__depends__: [me],
+	"stroke",
+	"ttForeign"
+], On = {
+	__depends__: [xe],
 	__init__: ["ttCopyPasteProps"],
-	copyPaste: ["type", lt],
+	copyPaste: ["type", En],
 	ttCopyPasteProps: ["type", class {
 		static $inject = ["eventBus"];
 		constructor(e) {
 			e.on("copyPaste.copyElement", (e) => {
 				let { descriptor: t, element: n } = e;
-				if (!b(n) && !T(n)) return;
+				if (!T(n) && !A(n)) return;
 				let r = n;
-				for (let e of ut) r[e] !== void 0 && (t[e] = r[e]);
+				for (let e of Dn) r[e] !== void 0 && (t[e] = structuredClone(r[e]));
 			});
 		}
 	}]
 };
 //#endregion
 //#region src/zorder/TtZOrder.ts
-function ft(e) {
-	return C(e) ? 0 : x(e) ? e.teamType === "enabling" ? 3 : e.teamType === "complicated-subsystem" ? 2 : 1 : S(e) ? 4 : w(e) ? 5 : T(e) ? 6 : 1;
+function kn(e) {
+	return O(e) ? 0 : E(e) ? e.teamType === "enabling" ? 3 : e.teamType === "complicated-subsystem" ? 2 : 1 : D(e) ? 4 : k(e) ? 5 : A(e) ? 6 : 1;
 }
-function pt(e) {
-	return b(e) || T(e);
+function An(e) {
+	return T(e) || A(e);
 }
-var mt = class {
+var jn = class {
 	canvas;
 	elementRegistry;
 	static $inject = [
@@ -1240,33 +1642,34 @@ var mt = class {
 		});
 	}
 	reorder() {
-		let e = this.elementRegistry.getAll().filter(pt).sort((e, t) => ft(e) - ft(t));
+		let e = this.elementRegistry.getAll().filter(An).sort((e, t) => kn(e) - kn(t));
 		for (let t of e) {
 			let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
 			e && n && n.appendChild(e);
 		}
 	}
-}, ht = {
+}, Mn = {
 	__init__: ["ttZOrder"],
-	ttZOrder: ["type", mt]
-}, gt = class extends W {
+	ttZOrder: ["type", jn]
+}, Nn = class extends K {
 	_getModules() {
 		return [
 			...super._getModules(),
-			v,
-			_,
-			ne,
-			re,
-			ie,
-			De,
-			Ae,
-			Ne,
-			We,
-			Ze,
-			et,
-			st,
-			dt,
-			ht
+			ce,
+			se,
+			le,
+			ue,
+			de,
+			on,
+			gt,
+			yt,
+			St,
+			tn,
+			un,
+			hn,
+			wn,
+			On,
+			Mn
 		];
 	}
 	undo() {
@@ -1281,8 +1684,127 @@ var mt = class {
 	canRedo() {
 		return this.get("commandStack").canRedo();
 	}
-};
+}, Pn = "team-topologies";
+function Fn(e = {}) {
+	return zn(new Nn({
+		...Ln(e),
+		undoRedoKeys: e.undoRedoKeys ?? !0,
+		freeRectCenter: e.freeRectCenter
+	}), !0, e.fitOnImport ?? !0);
+}
+function In(e = {}) {
+	return zn(new K(Ln(e)), !1, e.fitOnImport ?? !0);
+}
+function Ln(e) {
+	return {
+		width: "100%",
+		height: "100%",
+		additionalModules: e.additionalModules ?? []
+	};
+}
+function Rn(e) {
+	let t = ee(e.trim() === "" ? {} : JSON.parse(e));
+	if (!t.ok) throw Error(t.error);
+	return t.document;
+}
+function zn(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: Pn,
+		apiVersion: Ce,
+		editable: t
+	};
+	t && r.on("commandStack.changed", () => {
+		if (!(c > 0)) for (let e of [...s]) e();
+	});
+	let f = () => te(e.exportDocument());
+	return {
+		meta: d,
+		elements: {
+			list: () => l ? [] : a.getAll().filter(T).map(Vn),
+			reveal(e) {
+				if (l) return !1;
+				let t = a.get(e);
+				return T(t) ? (o.select(t), i.scrollToElement(t), !0) : !1;
+			},
+			selection: () => l ? [] : Bn(o.get()),
+			onSelection(e) {
+				let t = (t) => e(Bn(t.newSelection ?? []));
+				return r.on("selection.changed", t), () => r.off("selection.changed", t);
+			}
+		},
+		diagram: e,
+		attachTo(t) {
+			e.attachTo(t);
+		},
+		async importText(t) {
+			if (l) throw Error("The modeler was destroyed.");
+			let r = Rn(t);
+			c += 1;
+			try {
+				let { warnings: t } = e.importDocument(r, { fit: n });
+				return { warnings: t.map((e) => e.message) };
+			} finally {
+				--c;
+			}
+		},
+		exportText() {
+			return l ? u : f();
+		},
+		onContentChanged(e) {
+			return t ? (s.add(e), () => s.delete(e)) : () => void 0;
+		},
+		getViewState() {
+			if (!l) try {
+				let { x: e, y: t, width: n, height: r } = i.viewbox(), a = {
+					x: e,
+					y: t,
+					width: n,
+					height: r
+				};
+				return Hn(a) ? a : void 0;
+			} catch {
+				return;
+			}
+		},
+		setViewState(e) {
+			!l && Hn(e) && i.viewbox({
+				x: e.x,
+				y: e.y,
+				width: e.width,
+				height: e.height
+			});
+		},
+		destroy() {
+			if (!l) {
+				try {
+					u = f();
+				} catch {
+					u = "";
+				}
+				l = !0, s.clear(), e.destroy();
+			}
+		}
+	};
+}
+function Bn(e) {
+	return e.filter(T).map((e) => e.id);
+}
+function Vn(e) {
+	let t = e.ttLabel;
+	return t ? {
+		id: e.id,
+		name: t
+	} : { id: e.id };
+}
+function Hn(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;
+}
+function $(e) {
+	return typeof e == "number" && Number.isFinite(e);
+}
 //#endregion
-export { gt as Modeler, W as NavigatedViewer, O as ROOT_ID, L as TeamTopologiesRenderer, Me as TtAssociationBehavior, ve as TtBaseViewer, Xe as TtContextPadProvider, ye as TtElementFactory, V as TtExporter, je as TtFlatModelBehavior, B as TtImporter, ot as TtKeyboard, $e as TtLabelEditing, Y as TtLayouter, J as TtModeling, Ue as TtPaletteProvider, ke as TtRules, mt as TtZOrder, U as Viewer, Ie as annotationIconSvg, Fe as flowIconSvg, Re as interactionIconSvg, H as ioModule, w as isTtAnnotation, T as isTtAssociation, b as isTtElement, C as isTtFlow, S as isTtInteraction, x as isTtTeam, D as saveSVG, Pe as teamIconSvg, Ne as ttBehaviorsModule, Ze as ttContextPadModule, z as ttDrawModule, st as ttKeyboardModule, et as ttLabelEditingModule, be as ttModelModule, De as ttModelingModule, We as ttPaletteModule, Ae as ttRulesModule, ht as ttZOrderModule };
+export { Te as CD_TOKENS, G as GEIST_UNICODE_RANGES, Mt as ICON_DOWNLOAD, Tt as ICON_LINK, jt as ICON_MAXIMIZE, Ot as ICON_MENU, Et as ICON_MESSAGE_SQUARE_PLUS, kt as ICON_MINUS, Ct as ICON_PENCIL, At as ICON_PLUS, Dt as ICON_SQUARE_DASHED_MOUSE_POINTER, wt as ICON_TRASH, Nt as ICON_X, j as MIRAGON, Nn as Modeler, K as NavigatedViewer, X as READ_ONLY_CHANGED_EVENT, N as ROOT_ID, Pn as TEAM_TOPOLOGIES_NOTATION, Ge as TeamTopologiesRenderer, xt as TtAssociationBehavior, Me as TtBaseViewer, ln as TtContextPadProvider, Ne as TtElementFactory, Xe as TtExporter, bt as TtFlatModelBehavior, Ye as TtImporter, Q as TtKeyboard, mn as TtLabelEditing, ht as TtLayouter, mt as TtModeling, en as TtPaletteProvider, an as TtReadOnly, vt as TtRules, rt as TtViewport, jn as TtZOrder, st as Viewer, Ut as annotationIconSvg, Fn as createCollaborativeModeler, In as createCollaborativeViewer, at as embedSvgStyles, Ht as flowIconSvg, it as geistFontFaceCss, J as iconMarkup, Gt as interactionIconSvg, ot as ioModule, k as isTtAnnotation, A as isTtAssociation, T as isTtElement, O as isTtFlow, D as isTtInteraction, E as isTtTeam, Rn as parseDocumentText, Ae as saveSVG, Vt as teamIconSvg, St as ttBehaviorsModule, un as ttContextPadModule, Je as ttDrawModule, wn as ttKeyboardModule, hn as ttLabelEditingModule, Pe as ttModelModule, gt as ttModelingModule, tn as ttPaletteModule, on as ttReadOnlyModule, yt as ttRulesModule, Mn as ttZOrderModule };
 
 //# sourceMappingURL=index.js.map