@miragon/team-topologies-renderer 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,65 +1,84 @@
 import e from "diagram-js/lib/Diagram";
-import { ALL_INTERACTION_SPECS as t, ALL_TEAM_SPECS as n, DOCUMENT_VERSION as r, FLOW_SPEC as i, INTERACTION_MODE_SPECS as a, TEAM_TYPE_SPECS as o, dashArray as s, newId as c } from "@miragon/team-topologies-schema-model";
-import l from "diagram-js/lib/draw/BaseRenderer";
-import { append as u, attr as d, create as f } from "tiny-svg";
-import p from "diagram-js/lib/features/selection";
-import m from "diagram-js/lib/navigation/zoomscroll";
-import h from "diagram-js/lib/navigation/movecanvas";
-import g from "diagram-js/lib/features/modeling";
-import ee from "diagram-js/lib/features/move";
-import te from "diagram-js/lib/features/outline";
-import ne from "diagram-js/lib/features/resize";
-import re from "diagram-js/lib/features/rules";
-import ie from "diagram-js/lib/features/rules/RuleProvider";
-import ae from "diagram-js/lib/command/CommandInterceptor";
-import oe from "diagram-js/lib/features/palette";
-import se from "diagram-js/lib/features/create";
-import ce from "diagram-js/lib/features/context-pad";
-import le from "diagram-js/lib/features/copy-paste";
-import ue from "diagram-js/lib/features/copy-paste/CopyPaste.js";
+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";
 //#region src/model/di-types.ts
-function _(e) {
-	return typeof e == "object" && e ? e.ttKind : void 0;
-}
-function v(e) {
-	return typeof _(e) == "string";
-}
+var ge = /* @__PURE__ */ new Set([
+	"team",
+	"interaction",
+	"flow",
+	"annotation"
+]);
 function y(e) {
-	return _(e) === "team";
+	return typeof e == "object" && e ? e.ttKind : void 0;
 }
 function b(e) {
-	return _(e) === "interaction";
+	let t = y(e);
+	return t !== void 0 && ge.has(t);
 }
 function x(e) {
-	return _(e) === "flow";
+	return y(e) === "team";
+}
+function S(e) {
+	return y(e) === "interaction";
+}
+function C(e) {
+	return y(e) === "flow";
+}
+function w(e) {
+	return y(e) === "annotation";
+}
+function T(e) {
+	return y(e) === "association";
 }
 //#endregion
 //#region src/io/saveSvg.ts
-var S = 40;
-function C(e, t) {
+var E = 40;
+function D(e, t) {
 	let n = e.getContainer().querySelector("svg");
 	if (!n) throw Error("No SVG found in the canvas container.");
 	let r = Infinity, i = Infinity, a = -Infinity, o = -Infinity;
 	for (let e of t.getAll()) {
-		if (!v(e)) continue;
+		if (!b(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 - S, c = i - S, l = a - r + 80, u = o - i + 80, d = n.cloneNode(!0);
+	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 f = d.querySelector(".viewport");
 	return f && f.removeAttribute("transform"), { svg: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + new XMLSerializer().serializeToString(d) };
 }
 //#endregion
 //#region src/io/types.ts
-var w = "tt-root";
+var O = "tt-root";
 //#endregion
 //#region src/TtBaseViewer.ts
-function T(e) {
+function _e(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var E = class {
+var ve = class {
 	_diagram;
 	_container;
 	_options;
@@ -68,7 +87,7 @@ var E = class {
 	}
 	_createContainer(e) {
 		let t = e.container ?? document.createElement("div");
-		return t.classList.add("tt-djs-container"), t.style.width = T(e.width ?? "100%"), t.style.height = T(e.height ?? (e.container ? "100%" : "600px")), t;
+		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;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
@@ -120,7 +139,7 @@ var E = class {
 		}
 	}
 	saveSVG() {
-		return C(this.get("canvas"), this.get("elementRegistry"));
+		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;
@@ -157,7 +176,7 @@ var E = class {
 	get container() {
 		return this._container;
 	}
-}, D = class {
+}, ye = class {
 	elementFactory;
 	static $inject = ["elementFactory"];
 	constructor(e) {
@@ -203,10 +222,30 @@ var E = class {
 			...e.label ? { ttLabel: e.label } : {}
 		});
 	}
+	createAnnotation(e) {
+		return this.elementFactory.createShape({
+			id: e.id,
+			x: e.position.x,
+			y: e.position.y,
+			width: e.size.width,
+			height: e.size.height,
+			ttKind: "annotation",
+			...e.text ? { ttLabel: e.text } : {}
+		});
+	}
+	createAssociation(e, n) {
+		return this.elementFactory.createConnection({
+			id: `assoc_${e.id}`,
+			ttKind: "association",
+			source: e,
+			target: n,
+			waypoints: [t(e), t(n)]
+		});
+	}
 	createNewTeam(e, t) {
-		let n = o[e];
+		let n = c[e];
 		return this.elementFactory.createShape({
-			id: c("team"),
+			id: u("team"),
 			width: n.defaultSize.width,
 			height: n.defaultSize.height,
 			ttKind: "team",
@@ -215,9 +254,9 @@ var E = class {
 		});
 	}
 	createNewInteraction(e) {
-		let t = a[e];
+		let t = s[e];
 		return this.elementFactory.createShape({
-			id: c("int"),
+			id: u("int"),
 			width: t.defaultSize.width,
 			height: t.defaultSize.height,
 			ttKind: "interaction",
@@ -226,14 +265,29 @@ var E = class {
 	}
 	createNewFlow() {
 		return this.elementFactory.createShape({
-			id: c("flow"),
+			id: u("flow"),
+			width: o.defaultSize.width,
+			height: o.defaultSize.height,
+			ttKind: "flow",
+			ttLabel: o.label
+		});
+	}
+	createNewAnnotation(e) {
+		return this.elementFactory.createShape({
+			id: u("ann"),
 			width: i.defaultSize.width,
 			height: i.defaultSize.height,
-			ttKind: "flow",
-			ttLabel: i.label
+			ttKind: "annotation",
+			...e ? { ttLabel: e } : {}
+		});
+	}
+	createNewAssociation() {
+		return this.elementFactory.createConnection({
+			id: u("assoc"),
+			ttKind: "association"
 		});
 	}
-}, O = { ttElementFactory: ["type", D] }, k = {
+}, be = { ttElementFactory: ["type", ye] }, k = {
 	blau: "#335DE5",
 	blauLink: "#2B50D4",
 	blauHell: "#6B8AFF",
@@ -250,60 +304,139 @@ var E = class {
 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 de = 1500;
+var xe = 1500;
 k.blau;
-var fe = k.schwarz, pe = "#5B5B5B", A = {
+var Se = k.schwarz, A = "#5B5B5B", j = {
 	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13.5,
-	small: 11
+	small: 11,
+	annotation: 12
 };
 k.weiss;
 //#endregion
+//#region src/draw/label-layout.ts
+var M = 10, N = {
+	left: 10,
+	right: 6,
+	top: 6,
+	bottom: 6
+}, P = 1.2;
+function F(e, t) {
+	return Math.min(e * .16, t * 1.1);
+}
+function I(e) {
+	let t = Math.max(e.width, 1), n = Math.max(e.height, 1);
+	return w(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)
+		},
+		align: "left-top",
+		fontSize: j.annotation,
+		fontWeight: "450",
+		fill: Se
+	} : C(e) ? {
+		box: {
+			x: M,
+			y: 0,
+			width: t - F(t, n) - 20,
+			height: n
+		},
+		align: "center",
+		fontSize: j.small,
+		fontWeight: "650",
+		letterSpacing: "0.06em",
+		fill: A
+	} : {
+		box: {
+			x: M,
+			y: 0,
+			width: t - 20,
+			height: n
+		},
+		align: "center",
+		fontSize: S(e) ? j.small : j.label,
+		fontWeight: S(e) ? "600" : "640",
+		fill: Se
+	};
+}
+function Ce(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 = "";
+		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;
+}
+//#endregion
 //#region src/draw/TeamTopologiesRenderer.ts
-var j = class extends l {
+var L = class extends f {
 	static $inject = ["eventBus"];
 	constructor(e) {
-		super(e, de);
+		super(e, xe);
 	}
 	canRender(e) {
-		return v(e);
+		return b(e) || T(e);
 	}
 	drawShape(e, t) {
-		if (y(t)) return this.drawTeam(e, t);
-		if (b(t)) return this.drawInteraction(e, t);
-		if (x(t)) return this.drawFlow(e, t);
-		let n = d(f("rect"), {
+		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"), {
 			width: t.width,
 			height: t.height,
 			fill: "#eee"
 		});
-		return u(e, n), n;
+		return p(e, n), n;
+	}
+	drawConnection(e, t) {
+		let n = m(h("path"), {
+			d: R(t.waypoints),
+			fill: "none",
+			stroke: A,
+			"stroke-width": 1.5,
+			"stroke-dasharray": "4 4",
+			"stroke-linecap": "round"
+		});
+		return p(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);
+	}
 	drawTeam(e, t) {
-		let n = o[t.teamType] ?? o["stream-aligned"], r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = n.strokeWidth, c = s(n.strokeStyle, a), l = this.teamOutline(n.shape, r, i, a, {
+		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, {
 			fill: t.fill ?? n.fill,
 			stroke: t.stroke ?? n.stroke,
 			"stroke-width": a,
-			...c ? { "stroke-dasharray": c } : {},
+			...o ? { "stroke-dasharray": o } : {},
 			"stroke-linejoin": "round"
 		});
-		return u(e, l), this.appendLabel(e, t.ttLabel ?? "", r, i, { "font-weight": "640" }), l;
+		return p(e, s), this.appendLabel(e, t.ttLabel ?? "", I(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 d(f("polygon"), {
-				points: me(a, o, s, e),
+			return m(h("polygon"), {
+				points: we(a, o, s, e),
 				...i
 			});
 		}
 		let c = e === "rect" ? 4 : Math.min(20, s / 2, o / 2);
-		return d(f("rect"), {
+		return m(h("rect"), {
 			x: a,
 			y: a,
 			width: o,
@@ -314,81 +447,85 @@ var j = class extends l {
 		});
 	}
 	drawInteraction(e, t) {
-		let n = a[t.mode] ?? a.collaboration, r = Math.max(t.width, 1), i = Math.max(t.height, 1), o = {
+		let n = s[t.mode] ?? s.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": s(n.strokeStyle, 2) || "6 4",
+			"stroke-dasharray": l(n.strokeStyle, 2) || "6 4",
 			"stroke-linejoin": "round"
-		}, c;
-		if (n.shape === "circle") c = d(f("ellipse"), {
+		}, o;
+		if (n.shape === "circle") o = m(h("ellipse"), {
 			cx: r / 2,
 			cy: i / 2,
 			rx: (r - 2) / 2,
 			ry: (i - 2) / 2,
-			...o
+			...a
 		});
 		else if (n.shape === "triangle") {
 			let e = `${r / 2},1 ${r - 1},${i - 1} 1,${i - 1}`;
-			c = d(f("polygon"), {
+			o = m(h("polygon"), {
 				points: e,
-				...o
+				...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}`;
-			c = d(f("polygon"), {
+			o = m(h("polygon"), {
 				points: t,
-				...o
+				...a
 			});
 		}
-		return u(e, c), t.ttLabel && this.appendLabel(e, t.ttLabel, r, i, {
-			"font-size": A.small,
-			"font-weight": "600"
-		}), c;
+		return p(e, o), this.appendLabel(e, t.ttLabel ?? "", I(t)), o;
 	}
 	drawFlow(e, t) {
-		let n = Math.max(t.width, 1), r = Math.max(t.height, 1), a = i.strokeWidth, o = a / 2, c = Math.min(n * .16, r * 1.1), l = r * .5, p = (r - l) / 2, m = p + l, h = [
-			[o, p],
-			[n - c, p],
-			[n - c, o],
-			[n - o, r / 2],
-			[n - c, r - o],
-			[n - c, m],
-			[o, m]
-		].map((e) => e.join(",")).join(" "), g = d(f("polygon"), {
-			points: h,
+		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],
+			[n - a, r / 2],
+			[n - s, r - a],
+			[n - s, d],
+			[a, d]
+		].map((e) => e.join(",")).join(" "), g = m(h("polygon"), {
+			points: f,
 			fill: "none",
-			stroke: i.stroke,
-			"stroke-width": a,
-			"stroke-dasharray": s(i.strokeStyle, a) || "6 4",
+			stroke: o.stroke,
+			"stroke-width": i,
+			"stroke-dasharray": l(o.strokeStyle, i) || "6 4",
+			"stroke-linejoin": "round"
+		});
+		return p(e, g), this.appendLabel(e, t.ttLabel ?? "", I(t)), g;
+	}
+	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"), {
+			d: `M${o},${a} L${a},${a} L${a},${r - a} L${o},${r - a}`,
+			fill: "none",
+			stroke: A,
+			"stroke-width": i,
 			"stroke-linejoin": "round"
 		});
-		return u(e, g), t.ttLabel && this.appendLabel(e, t.ttLabel, n - c, r, {
-			"font-size": A.small,
-			"font-weight": "650",
-			"letter-spacing": "0.06em",
-			fill: pe
-		}), g;
-	}
-	appendLabel(e, t, n, r, i) {
-		let a = typeof i["font-size"] == "number" ? i["font-size"] : A.label, o = he(t, n - 20, a), s = a * 1.2, c = r / 2 - (o.length - 1) * s / 2;
-		o.forEach((t, r) => {
-			let o = d(f("text"), {
-				x: n / 2,
-				y: c + r * s,
-				"font-family": A.family,
-				"font-size": a,
-				fill: fe,
-				"text-anchor": "middle",
+		return p(e, s), this.appendLabel(e, t.ttLabel ?? "", I(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;
+		a.forEach((t, r) => {
+			if (!t) return;
+			let a = m(h("text"), {
+				x: c,
+				y: l + r * o,
+				"font-family": j.family,
+				"font-size": i,
+				fill: n.fill,
+				"text-anchor": s ? "middle" : "start",
 				"dominant-baseline": "central",
-				...i
+				"font-weight": n.fontWeight,
+				...n.letterSpacing ? { "letter-spacing": n.letterSpacing } : {}
 			});
-			o.textContent = t, u(e, o);
+			a.textContent = t, p(e, a);
 		});
 	}
 };
-function me(e, t, n, r) {
+function we(e, t, n, r) {
 	return [
 		[e + r, e],
 		[e + t - r, e],
@@ -400,36 +537,32 @@ function me(e, t, n, r) {
 		[e, e + r]
 	].map((e) => e.join(",")).join(" ");
 }
-function he(e, t, n) {
-	let r = Math.max(4, Math.floor(t / (n * .58))), i = e.split(/\s+/).filter(Boolean);
-	if (i.length === 0) return [];
-	let a = [], o = "";
-	for (let e of i) {
-		let t = o ? `${o} ${e}` : e;
-		t.length > r && o ? (a.push(o), o = e) : o = t;
-	}
-	return o && a.push(o), a;
+function R(e) {
+	return e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x},${e.y}`).join(" ");
 }
 //#endregion
 //#region src/draw/index.ts
-var M = {
+var z = {
 	__init__: ["ttRenderer"],
-	ttRenderer: ["type", j]
-}, N = class {
+	ttRenderer: ["type", L],
+	connectionDocking: ["type", d]
+}, B = class {
 	canvas;
 	elementFactory;
 	factory;
 	eventBus;
 	elementRegistry;
+	connectionDocking;
 	static $inject = [
 		"canvas",
 		"elementFactory",
 		"ttElementFactory",
 		"eventBus",
-		"elementRegistry"
+		"elementRegistry",
+		"connectionDocking"
 	];
-	constructor(e, t, n, r, i) {
-		this.canvas = e, this.elementFactory = t, this.factory = n, this.eventBus = r, this.elementRegistry = i;
+	constructor(e, t, n, r, i, a) {
+		this.canvas = e, this.elementFactory = t, this.factory = n, this.eventBus = r, this.elementRegistry = i, this.connectionDocking = a;
 	}
 	import(e) {
 		let t = [];
@@ -441,18 +574,34 @@ var M = {
 			n = void 0;
 		}
 		let r;
-		n && n.id === "tt-root" ? r = n : (r = this.elementFactory.createRoot({ id: w }), this.canvas.setRootElement(r)), r.businessObject = { title: e.title };
+		n && n.id === "tt-root" ? r = n : (r = this.elementFactory.createRoot({ id: O }), this.canvas.setRootElement(r)), r.businessObject = { title: e.title };
 		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);
+		for (let t of e.annotations) this.canvas.addShape(this.factory.createAnnotation(t), r);
+		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)) {
+				t.push({
+					message: `Annotation "${n.id}" is attached to unknown element "${n.attachedTo}"; its connector was dropped.`,
+					elementId: n.id
+				});
+				continue;
+			}
+			let a = this.factory.createAssociation(e, i);
+			a.waypoints = this.connectionDocking.getCroppedWaypoints(a), this.canvas.addConnection(a, r);
+		}
 		return this.eventBus.fire("import.render.done", { warnings: t }), t;
 	}
 	clear() {
-		for (let e of [...this.elementRegistry.getAll()]) if (e.id !== "tt-root") try {
+		let e = this.elementRegistry.getAll().filter((e) => e.id !== O), 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 {}
 	}
-}, P = class {
+}, V = class {
 	elementRegistry;
 	canvas;
 	static $inject = ["elementRegistry", "canvas"];
@@ -466,93 +615,121 @@ var M = {
 		} catch {
 			e = void 0;
 		}
-		let t = [], n = [], i = [];
+		let t = [], n = [], r = [], i = [];
 		for (let e of this.elementRegistry.getAll()) {
 			if (e.id === "tt-root") continue;
-			let r = e, a = {
-				x: r.x,
-				y: r.y
-			}, o = {
-				width: r.width,
-				height: r.height
+			let a = e, o = {
+				x: a.x,
+				y: a.y
+			}, s = {
+				width: a.width,
+				height: a.height
 			};
-			y(e) ? t.push({
+			if (x(e)) t.push({
 				id: e.id,
 				type: e.teamType,
 				label: e.ttLabel ?? "",
-				position: a,
-				size: o,
+				position: o,
+				size: s,
 				...e.description ? { description: e.description } : {},
 				...e.fill ? { fill: e.fill } : {},
 				...e.stroke ? { stroke: e.stroke } : {}
-			}) : b(e) ? n.push({
+			});
+			else if (S(e)) n.push({
 				id: e.id,
 				mode: e.mode,
-				position: a,
-				size: o,
+				position: o,
+				size: s,
 				...e.ttLabel ? { label: e.ttLabel } : {},
 				...e.fill ? { fill: e.fill } : {},
 				...e.stroke ? { stroke: e.stroke } : {}
-			}) : x(e) && i.push({
+			});
+			else if (C(e)) r.push({
 				id: e.id,
-				position: a,
-				size: o,
+				position: o,
+				size: s,
 				...e.ttLabel ? { label: e.ttLabel } : {}
 			});
+			else if (w(e)) {
+				let t = Te(e);
+				i.push({
+					id: e.id,
+					text: e.ttLabel ?? "",
+					position: o,
+					size: s,
+					...t ? { attachedTo: t } : {}
+				});
+			}
 		}
 		return {
-			version: r,
+			version: a,
 			title: e?.title ?? "Untitled team topology",
 			nodes: t,
 			interactions: n,
-			flows: i
+			flows: r,
+			annotations: i
 		};
 	}
-}, F = {
-	ttImporter: ["type", N],
-	ttExporter: ["type", P]
-}, I = class extends E {
+};
+function Te(e) {
+	let t = [...e.outgoing, ...e.incoming].find(T);
+	if (t) return (t.source === e ? t.target : t.source)?.id;
+}
+//#endregion
+//#region src/io/index.ts
+var H = {
+	ttImporter: ["type", B],
+	ttExporter: ["type", V]
+}, U = class extends ve {
 	_getModules() {
 		return [
-			O,
-			M,
-			F
+			be,
+			z,
+			H
 		];
 	}
-}, L = class extends I {
+}, W = class extends U {
 	_getModules() {
 		return [
 			...super._getModules(),
-			p,
-			m,
-			h
+			g,
+			ee,
+			te
 		];
 	}
 };
 //#endregion
 //#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function R(e, t, n) {
+function G(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var ge = class {
+var Ee = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], R(r, e, n[e]);
+		for (let e of Object.keys(n)) i[e] = r[e], G(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)) R(r, e, n[e]);
+		if (n) for (let e of Object.keys(n)) G(r, e, n[e]);
 		return [t];
 	}
-}, z = "element.updateProperties", B = class {
+}, K = "element.updateProperties", q = 40, J = class {
 	commandStack;
-	static $inject = ["commandStack"];
-	constructor(e) {
-		this.commandStack = e, e.registerHandler(z, ge);
+	modeling;
+	factory;
+	canvas;
+	static $inject = [
+		"commandStack",
+		"modeling",
+		"ttElementFactory",
+		"canvas"
+	];
+	constructor(e, t, n, r) {
+		this.commandStack = e, this.modeling = t, this.factory = n, this.canvas = r, e.registerHandler(K, Ee);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(z, {
+		this.commandStack.execute(K, {
 			element: e,
 			properties: t
 		});
@@ -575,156 +752,278 @@ var ge = class {
 	setDescription(e, t) {
 		this.updateProperties(e, { description: t });
 	}
-}, V = {
+	appendAnnotation(e) {
+		let t = this.factory.createNewAnnotation(), n = {
+			x: e.x + e.width + q + t.width / 2,
+			y: e.y - q / 4
+		};
+		return this.modeling.appendShape(e, t, n, this.canvas.getRootElement(), {
+			connection: this.factory.createNewAssociation(),
+			connectionTarget: e
+		});
+	}
+	detachAnnotation(e) {
+		let t = [...e.incoming, ...e.outgoing].filter(T);
+		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)];
+	}
+}, De = {
+	__depends__: [v],
 	__init__: ["ttModeling"],
-	ttModeling: ["type", B]
-}, H = class extends ie {
+	ttModeling: ["type", J],
+	layouter: ["type", Y]
+};
+//#endregion
+//#region src/rules/TtRules.ts
+function Oe(e) {
+	return b(e) && !w(e);
+}
+var ke = class extends se {
 	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(["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);
 	}
-}, U = {
-	__depends__: [re],
+}, Ae = {
+	__depends__: [oe],
 	__init__: ["ttRules"],
-	ttRules: ["type", H]
-}, W = class extends ae {
+	ttRules: ["type", ke]
+}, je = class extends ce {
 	static $inject = ["eventBus", "canvas"];
 	constructor(e, t) {
 		super(e), this.preExecute(["shape.create", "elements.create"], (e) => {
 			e.parent = t.getRootElement();
 		}, !0);
 	}
-}, _e = {
-	__init__: ["ttFlatModelBehavior"],
-	ttFlatModelBehavior: ["type", W]
+}, Me = class extends ce {
+	static $inject = [
+		"eventBus",
+		"connectionDocking",
+		"modeling"
+	];
+	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);
+		}, !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));
+			i.length > 0 && n.removeElements(i);
+		}, !0);
+	}
+}, Ne = {
+	__init__: ["ttFlatModelBehavior", "ttAssociationBehavior"],
+	ttFlatModelBehavior: ["type", je],
+	ttAssociationBehavior: ["type", Me]
 };
 //#endregion
 //#region src/draw/palette-icons.ts
-function G(e) {
+function X(e) {
 	return `<svg class="tt-palette-svg" width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
 }
-function K(e) {
-	let t = o[e], n = s(t.strokeStyle, 1.5), r = `fill="${t.fill}" stroke="${t.stroke}" stroke-width="1.5"` + (n ? ` stroke-dasharray="${n}"` : "");
+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}"` : "");
 	switch (t.shape) {
-		case "octagon": return G(`<polygon points="8,3 18,3 23,8 23,18 18,23 8,23 3,18 3,8" ${r}/>`);
-		case "rounded-rect-vertical": return G(`<rect x="8" y="3" width="10" height="20" rx="4" ${r}/>`);
-		case "rect": return G(`<rect x="3" y="7" width="20" height="12" rx="1.5" ${r}/>`);
-		default: return G(`<rect x="3" y="8" width="20" height="10" rx="5" ${r}/>`);
+		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}/>`);
 	}
 }
-function q() {
-	return G("<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 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 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 J(e) {
-	let t = a[e], n = s(t.strokeStyle, 1.5), r = `fill="${t.fill}" fill-opacity="${t.opacity}" stroke="${t.stroke}" stroke-width="1.5"` + (n ? ` stroke-dasharray="${n}"` : "");
+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 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}"` : "");
 	switch (t.shape) {
-		case "circle": return G(`<circle cx="13" cy="13" r="9" ${r}/>`);
-		case "triangle": return G(`<polygon points="5,6 22,13 5,20" ${r}/>`);
-		default: return G(`<polygon points="9,6 23,6 17,20 3,20" ${r}/>`);
+		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}/>`);
 	}
 }
 //#endregion
 //#region src/palette/TtPaletteProvider.ts
-var ve = "tt-1-teams", ye = "tt-2-modes", be = "tt-3-flow";
-function Y(e, t) {
-	return `<div class="entry tt-palette-entry" draggable="true" title="${t}">${e}</div>`;
+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 X = class {
+var Ue = class {
 	create;
 	factory;
+	lassoTool;
 	static $inject = [
 		"palette",
 		"create",
-		"ttElementFactory"
+		"ttElementFactory",
+		"lassoTool"
 	];
-	constructor(e, t, n) {
-		this.create = t, this.factory = n, e.registerProvider(this);
+	constructor(e, t, n, r) {
+		this.create = t, this.factory = n, this.lassoTool = r, e.registerProvider(this);
 	}
 	getPaletteEntries() {
-		let e = {};
-		for (let t of n) {
+		let e = {}, t = "Select several elements (or Shift + drag on the canvas)";
+		e["lasso-tool"] = {
+			group: ze,
+			title: t,
+			html: Z(Le(), t, !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: ve,
+				group: Be,
 				title: `${t.label} team — ${t.description}`,
-				html: Y(K(t.type), `${t.label} team — ${t.description}`),
+				html: Z(Pe(t.type), `${t.label} team — ${t.description}`),
 				action: {
 					dragstart: n,
 					click: n
 				}
 			};
 		}
-		for (let n of t) {
-			let t = (e) => this.create.start(e, this.factory.createNewInteraction(n.mode));
-			e[`mode.${n.mode}`] = {
-				group: ye,
-				title: `${n.label} — ${n.description} (place over the teams it relates to)`,
-				html: Y(J(n.mode), `${n.label} — ${n.description}`),
+		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: t,
-					click: t
+					dragstart: n,
+					click: n
 				}
 			};
 		}
-		let r = (e) => this.create.start(e, this.factory.createNewFlow());
-		return e.flow = {
-			group: be,
-			title: `${i.label} — the implied left-to-right flow`,
-			html: Y(q(), i.label),
+		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: r,
-				click: r
+				dragstart: a,
+				click: a
+			}
+		};
+		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),
+			action: {
+				dragstart: s,
+				click: s
 			}
 		}, e;
 	}
-}, Z = {
-	__depends__: [oe, se],
+}, We = {
+	__depends__: [
+		le,
+		ue,
+		_
+	],
 	__init__: ["ttPaletteProvider"],
-	ttPaletteProvider: ["type", X]
-}, xe = "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", Se = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z";
-function Ce(e, t = 18) {
+	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>`;
 }
 //#endregion
 //#region src/context-pad/TtContextPadProvider.ts
 function Q(e, t) {
-	return `<div class="entry tt-cp-entry" title="${t}">${Ce(e)}</div>`;
+	return `<div class="entry tt-cp-entry" title="${t}">${Ye(e)}</div>`;
 }
-var we = class {
+var Xe = class {
 	modeling;
+	ttModeling;
 	labelEditing;
+	connect;
+	selection;
 	static $inject = [
 		"contextPad",
 		"modeling",
-		"ttLabelEditing"
+		"ttModeling",
+		"ttLabelEditing",
+		"connect",
+		"selection"
 	];
-	constructor(e, t, n) {
-		this.modeling = t, this.labelEditing = n, e.registerProvider(this);
+	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);
 	}
 	getContextPadEntries(e) {
-		return v(e) ? {
-			"edit-label": {
+		if (T(e)) return { delete: this.deleteEntry([e], "Remove connector") };
+		if (!b(e)) return {};
+		if (w(e)) {
+			let t = (t) => this.connect.start(t, e);
+			return {
+				"edit-label": this.editEntry(e, "Edit text"),
+				connect: {
+					group: "edit",
+					title: "Attach to an element",
+					html: Q(qe, "Attach to an element"),
+					action: {
+						click: t,
+						dragstart: t
+					}
+				},
+				delete: this.deleteEntry([e], "Delete")
+			};
+		}
+		return {
+			"edit-label": this.editEntry(e, "Rename"),
+			"append-annotation": {
 				group: "edit",
-				title: "Rename",
-				html: Q(xe, "Rename"),
-				action: { click: () => this.labelEditing.activate(e) }
+				title: "Add annotation",
+				html: Q(Je, "Add annotation"),
+				action: { click: () => {
+					let t = this.ttModeling.appendAnnotation(e);
+					this.selection.select(t), this.labelEditing.activate(t);
+				} }
 			},
-			delete: {
-				group: "edit",
-				title: "Delete",
-				html: Q(Se, "Delete"),
-				action: { click: () => this.modeling.removeElements([e]) }
-			}
-		} : {};
+			delete: this.deleteEntry([e], "Delete")
+		};
+	}
+	getMultiElementContextPadEntries(e) {
+		return { delete: this.deleteEntry(e, `Delete ${e.length} elements`) };
+	}
+	editEntry(e, t) {
+		return {
+			group: "edit",
+			title: t,
+			html: Q(Ge, t),
+			action: { click: () => this.labelEditing.activate(e) }
+		};
+	}
+	deleteEntry(e, t) {
+		return {
+			group: "edit",
+			title: t,
+			html: Q(Ke, t),
+			action: { click: () => this.modeling.removeElements([...e]) }
+		};
 	}
-}, Te = {
-	__depends__: [ce],
+}, Ze = {
+	__depends__: [
+		pe,
+		de,
+		fe
+	],
 	__init__: ["ttContextPadProvider"],
-	ttContextPadProvider: ["type", we]
-}, Ee = class {
+	ttContextPadProvider: ["type", Xe]
+}, $ = "tt-label-editing", Qe = 96, $e = class {
 	canvas;
 	modeling;
 	static $inject = [
@@ -735,82 +1034,133 @@ var we = class {
 	active = null;
 	constructor(e, t, n) {
 		this.canvas = t, this.modeling = n, e.on("element.dblclick", (e) => {
-			v(e.element) && this.activate(e.element);
+			b(e.element) && this.activate(e.element);
 		}), e.on([
 			"element.mousedown",
 			"drag.init",
 			"canvas.viewbox.changing"
-		], () => this.active?.commit());
+		], () => this.active?.commit()), e.on("import.render.start", () => this.cancel());
 	}
 	activate(e) {
 		this.active?.commit();
-		let t = this.canvas.getContainer(), n = this.canvas.zoom(), r = this.canvas.viewbox(), i = e.x + e.width / 2, a = e.y + e.height / 2, o = (i - r.x) * n - 85, s = (a - r.y) * n - 14, c = document.createElement("input");
-		c.type = "text", c.className = "tt-label-input", c.value = e.ttLabel ?? "", c.style.position = "absolute", c.style.left = `${o}px`, c.style.top = `${s}px`, c.style.width = "170px", t.appendChild(c), c.focus(), c.select();
-		let l = !1, u = () => {
-			l || (l = !0, c.removeEventListener("keydown", f), c.removeEventListener("blur", p), c.remove(), this.active = null);
-		}, d = () => {
-			if (l) return;
-			let t = c.value.trim(), n = t !== (e.ttLabel ?? "");
-			u(), n && this.modeling.updateLabel(e, t);
-		}, f = (e) => {
-			e.key === "Enter" ? (e.preventDefault(), d()) : e.key === "Escape" && (e.preventDefault(), u());
-		}, p = () => d();
-		c.addEventListener("keydown", f), c.addEventListener("blur", p), this.active = {
-			commit: d,
-			cleanup: u
+		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"
+		});
+		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`;
+		};
+		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
 		};
 	}
 	cancel() {
 		this.active?.cleanup();
 	}
-}, De = {
+}, et = {
 	__init__: ["ttLabelEditing"],
-	ttLabelEditing: ["type", Ee]
+	ttLabelEditing: ["type", $e]
+}, tt = 1, nt = 10, rt = {
+	ArrowLeft: {
+		x: -1,
+		y: 0
+	},
+	ArrowRight: {
+		x: 1,
+		y: 0
+	},
+	ArrowUp: {
+		x: 0,
+		y: -1
+	},
+	ArrowDown: {
+		x: 0,
+		y: 1
+	}
 };
-//#endregion
-//#region src/keyboard/TtKeyboard.ts
-function Oe(e) {
+function it(e) {
 	let t = e;
 	return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
 }
-var ke = class {
+function at(e) {
+	return !("waypoints" in e);
+}
+var ot = class {
 	static $inject = [
+		"eventBus",
 		"canvas",
+		"elementRegistry",
 		"commandStack",
 		"selection",
 		"modeling",
-		"copyPaste"
+		"copyPaste",
+		"rules"
 	];
-	constructor(e, t, n, r, i) {
-		(e.getContainer().ownerDocument ?? document).addEventListener("keydown", (e) => {
-			if (Oe(e.target)) return;
-			let a = e.ctrlKey || e.metaKey, o = e.key.toLowerCase();
-			if (a && o === "z" && !e.shiftKey) e.preventDefault(), t.canUndo() && t.undo();
-			else if (a && o === "z" && e.shiftKey || a && o === "y") e.preventDefault(), t.canRedo() && t.redo();
-			else if (o === "delete" || o === "backspace") {
-				let t = n.get();
-				t.length && (e.preventDefault(), r.removeElements([...t]));
-			} else if (a && o === "c") {
-				let t = n.get();
-				t.length && (e.preventDefault(), i.copy(t));
-			} else a && o === "v" && (e.preventDefault(), i.paste());
-		});
+	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;
+				e.preventDefault();
+				let n = rt[e.key], r = e.shiftKey ? nt : tt;
+				a.moveElements(t, {
+					x: n.x * r,
+					y: n.y * r
+				});
+			}
+		};
+		c.addEventListener("keydown", l), e.on("diagram.destroy", () => c.removeEventListener("keydown", l));
 	}
-}, Ae = {
+}, st = {
 	__init__: ["ttKeyboard"],
-	ttKeyboard: ["type", ke]
+	ttKeyboard: ["type", ot]
 };
 //#endregion
 //#region src/copy-paste/TtCopyPaste.ts
-function je(e) {
+function ct(e) {
 	switch (e) {
 		case "team": return "team";
 		case "interaction": return "int";
 		case "flow": return "flow";
+		case "annotation": return "ann";
+		case "association": return "assoc";
 		default: return;
 	}
 }
-var Me = class extends ue {
+var lt = class extends he {
 	elementFactory;
 	static $inject = [
 		"canvas",
@@ -825,14 +1175,21 @@ var Me = class extends ue {
 	constructor(e, t, n, r, i, a, o, s) {
 		super(e, t, n, r, i, a, o, s), this.elementFactory = r;
 	}
+	createConnection(e) {
+		let t = ct(e.ttKind);
+		return t ? this.elementFactory.createConnection({
+			...e,
+			id: u(t)
+		}) : super.createConnection(e);
+	}
 	createShape(e) {
-		let t = je(e.ttKind);
+		let t = ct(e.ttKind);
 		return t ? this.elementFactory.createShape({
 			...e,
-			id: c(t)
+			id: u(t)
 		}) : super.createShape(e);
 	}
-}, Ne = [
+}, ut = [
 	"ttKind",
 	"teamType",
 	"mode",
@@ -840,28 +1197,31 @@ var Me = class extends ue {
 	"description",
 	"fill",
 	"stroke"
-], Pe = {
-	__depends__: [le],
+], dt = {
+	__depends__: [me],
 	__init__: ["ttCopyPasteProps"],
-	copyPaste: ["type", Me],
+	copyPaste: ["type", lt],
 	ttCopyPasteProps: ["type", class {
 		static $inject = ["eventBus"];
 		constructor(e) {
 			e.on("copyPaste.copyElement", (e) => {
 				let { descriptor: t, element: n } = e;
-				if (!v(n)) return;
+				if (!b(n) && !T(n)) return;
 				let r = n;
-				for (let e of Ne) r[e] !== void 0 && (t[e] = r[e]);
+				for (let e of ut) r[e] !== void 0 && (t[e] = r[e]);
 			});
 		}
 	}]
 };
 //#endregion
 //#region src/zorder/TtZOrder.ts
-function Fe(e) {
-	return x(e) ? 0 : y(e) ? e.teamType === "enabling" ? 3 : e.teamType === "complicated-subsystem" ? 2 : 1 : b(e) ? 4 : 1;
+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 pt(e) {
+	return b(e) || T(e);
 }
-var Ie = class {
+var mt = class {
 	canvas;
 	elementRegistry;
 	static $inject = [
@@ -880,32 +1240,33 @@ var Ie = class {
 		});
 	}
 	reorder() {
-		let e = this.elementRegistry.getAll().filter(v).sort((e, t) => Fe(e) - Fe(t));
+		let e = this.elementRegistry.getAll().filter(pt).sort((e, t) => ft(e) - ft(t));
 		for (let t of e) {
 			let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
 			e && n && n.appendChild(e);
 		}
 	}
-}, $ = {
+}, ht = {
 	__init__: ["ttZOrder"],
-	ttZOrder: ["type", Ie]
-}, Le = class extends L {
+	ttZOrder: ["type", mt]
+}, gt = class extends W {
 	_getModules() {
 		return [
 			...super._getModules(),
-			g,
-			ee,
-			te,
+			v,
+			_,
 			ne,
-			V,
-			U,
-			_e,
-			Z,
-			Te,
+			re,
+			ie,
 			De,
 			Ae,
-			Pe,
-			$
+			Ne,
+			We,
+			Ze,
+			et,
+			st,
+			dt,
+			ht
 		];
 	}
 	undo() {
@@ -922,6 +1283,6 @@ var Ie = class {
 	}
 };
 //#endregion
-export { Le as Modeler, L as NavigatedViewer, w as ROOT_ID, j as TeamTopologiesRenderer, E as TtBaseViewer, we as TtContextPadProvider, D as TtElementFactory, P as TtExporter, W as TtFlatModelBehavior, N as TtImporter, ke as TtKeyboard, Ee as TtLabelEditing, B as TtModeling, X as TtPaletteProvider, H as TtRules, Ie as TtZOrder, I as Viewer, q as flowIconSvg, J as interactionIconSvg, F as ioModule, v as isTtElement, x as isTtFlow, b as isTtInteraction, y as isTtTeam, C as saveSVG, K as teamIconSvg, _e as ttBehaviorsModule, Te as ttContextPadModule, M as ttDrawModule, Ae as ttKeyboardModule, De as ttLabelEditingModule, O as ttModelModule, V as ttModelingModule, Z as ttPaletteModule, U as ttRulesModule, $ as ttZOrderModule };
+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 };
 
 //# sourceMappingURL=index.js.map