@miragon/team-topologies-renderer 0.3.1 → 0.4.0

package/dist/index.js

@@ -1,852 +1,841 @@
-import B from "diagram-js/lib/Diagram";
-import { TEAM_TYPE_SPECS as T, newId as L, INTERACTION_MODE_SPECS as S, FLOW_SPEC as w, dashArray as x, DOCUMENT_VERSION as K, ALL_TEAM_SPECS as U, ALL_INTERACTION_SPECS as V } from "@miragon/team-topologies-schema-model";
-import G from "diagram-js/lib/draw/BaseRenderer";
-import { attr as g, create as y, append as _ } from "tiny-svg";
-import H from "diagram-js/lib/features/selection";
-import Y from "diagram-js/lib/navigation/zoomscroll";
-import X from "diagram-js/lib/navigation/movecanvas";
-import W from "diagram-js/lib/features/modeling";
-import Z from "diagram-js/lib/features/move";
-import q from "diagram-js/lib/features/outline";
-import J from "diagram-js/lib/features/resize";
-import Q from "diagram-js/lib/features/rules";
-import tt from "diagram-js/lib/features/rules/RuleProvider";
-import et from "diagram-js/lib/command/CommandInterceptor";
-import it from "diagram-js/lib/features/palette";
-import nt from "diagram-js/lib/features/create";
-import ot from "diagram-js/lib/features/context-pad";
-function R(r) {
-  return typeof r == "object" && r !== null ? r.ttKind : void 0;
-}
-function $(r) {
-  return typeof R(r) == "string";
-}
-function I(r) {
-  return R(r) === "team";
-}
-function C(r) {
-  return R(r) === "interaction";
-}
-function O(r) {
-  return R(r) === "flow";
-}
-const k = 40;
-function rt(r, t) {
-  const e = r.getContainer().querySelector("svg");
-  if (!e) throw new Error("No SVG found in the canvas container.");
-  let o = 1 / 0, n = 1 / 0, s = -1 / 0, a = -1 / 0;
-  for (const b of t.getAll()) {
-    if (!$(b)) continue;
-    const d = b;
-    o = Math.min(o, d.x), n = Math.min(n, d.y), s = Math.max(s, d.x + d.width), a = Math.max(a, d.y + d.height);
-  }
-  Number.isFinite(o) || (o = 0, n = 0, s = 100, a = 100);
-  const c = o - k, h = n - k, l = s - o + k * 2, m = a - n + k * 2, u = e.cloneNode(!0);
-  u.setAttribute("xmlns", "http://www.w3.org/2000/svg"), u.setAttribute("viewBox", `${c} ${h} ${l} ${m}`), u.setAttribute("width", String(Math.round(l))), u.setAttribute("height", String(Math.round(m)));
-  const f = u.querySelector(".viewport");
-  return f && f.removeAttribute("transform"), { svg: `<?xml version="1.0" encoding="utf-8"?>
-` + new XMLSerializer().serializeToString(u) };
-}
-const M = "tt-root";
-function z(r) {
-  return typeof r == "number" ? `${r}px` : r;
-}
-class st {
-  _diagram;
-  _container;
-  _options;
-  constructor(t = {}) {
-    this._options = t, this._container = this._createContainer(t);
-  }
-  _createContainer(t) {
-    const i = t.container ?? document.createElement("div");
-    return i.classList.add("tt-djs-container"), i.style.width = z(t.width ?? "100%"), i.style.height = z(t.height ?? (t.container ? "100%" : "600px")), i;
-  }
-  _ensureDiagram() {
-    if (!this._diagram) {
-      const t = [...this._getModules(), ...this._options.additionalModules ?? []];
-      this._diagram = new B({ canvas: { container: this._container }, modules: t });
-    }
-    return this._diagram;
-  }
-  /** Resolve a diagram-js service from the didi injector. */
-  get(t) {
-    return this._ensureDiagram().get(t);
-  }
-  on(t, i, e = 1e3) {
-    this.get("eventBus").on(t, e, i);
-  }
-  off(t, i) {
-    this.get("eventBus").off(t, i);
-  }
-  /** Load a document into the canvas (replaces existing content). */
-  importDocument(t) {
-    const i = this._ensureDiagram(), e = i.get("eventBus"), o = i.get("ttImporter");
-    o.clear();
-    const n = o.import(t);
-    return this._fit(), e.fire("import.done", { warnings: n }), { warnings: n };
-  }
-  /** Current canvas state as a canonical document. */
-  exportDocument() {
-    return this.get("ttExporter").export();
-  }
-  /** Update diagram-level metadata (title / flow-of-change) on the root. */
-  setMeta(t) {
-    const i = this.get("canvas");
-    let e;
-    try {
-      e = i.getRootElement();
-    } catch {
-      return;
-    }
-    if (!e || e.id !== M) return;
-    const o = e.businessObject ?? { title: "Untitled team topology" };
-    e.businessObject = { ...o, ...t };
-  }
-  /** Read diagram-level metadata (title / flow-of-change) from the root. */
-  getMeta() {
-    try {
-      return this.get("canvas").getRootElement().businessObject;
-    } catch {
-      return;
-    }
-  }
-  /** Standalone, self-contained SVG snapshot. */
-  saveSVG() {
-    return rt(this.get("canvas"), this.get("elementRegistry"));
-  }
-  /** Fit the content into the viewport, leaving room at the top for the palette. */
-  _fit(t = 84, i = 56) {
-    const e = this.get("canvas"), o = this.get("elementRegistry");
-    let n = 1 / 0, s = 1 / 0, a = -1 / 0, c = -1 / 0;
-    for (const b of o.getAll()) {
-      const d = b;
-      typeof d.x != "number" || typeof d.y != "number" || typeof d.width != "number" || typeof d.height != "number" || (n = Math.min(n, d.x), s = Math.min(s, d.y), a = Math.max(a, d.x + d.width), c = Math.max(c, d.y + d.height));
-    }
-    if (!Number.isFinite(n)) return;
-    const h = this._container.getBoundingClientRect(), l = h.width, m = h.height, u = Math.max(a - n, 1), f = Math.max(c - s, 1);
-    if (!l || !m) {
-      e.zoom("fit-viewport");
-      return;
-    }
-    const p = Math.min((l - 2 * i) / u, (m - t - i) / f, 1.25);
-    e.viewbox({
-      x: n + u / 2 - l / 2 / p,
-      y: s - t / p,
-      width: l / p,
-      height: m / p
-    });
-  }
-  /** Attach the container into `target`. */
-  attachTo(t) {
-    t.appendChild(this._container), this.get("canvas").resized();
-  }
-  /** Detach the container from the DOM, preserving state. */
-  detach() {
-    this._container.remove();
-  }
-  clear() {
-    this._ensureDiagram().clear();
-  }
-  destroy() {
-    this._diagram && (this._diagram.destroy(), this._diagram = void 0), this._container.remove();
-  }
-  get container() {
-    return this._container;
-  }
-}
-class at {
-  constructor(t) {
-    this.elementFactory = t;
-  }
-  static $inject = ["elementFactory"];
-  // --- from canonical document elements (import) -------------------------
-  createTeam(t) {
-    return this.elementFactory.createShape({
-      id: t.id,
-      x: t.position.x,
-      y: t.position.y,
-      width: t.size.width,
-      height: t.size.height,
-      ttKind: "team",
-      teamType: t.type,
-      ttLabel: t.label,
-      ...t.description ? { description: t.description } : {},
-      ...t.fill ? { fill: t.fill } : {},
-      ...t.stroke ? { stroke: t.stroke } : {}
-    });
-  }
-  createInteraction(t) {
-    return this.elementFactory.createShape({
-      id: t.id,
-      x: t.position.x,
-      y: t.position.y,
-      width: t.size.width,
-      height: t.size.height,
-      ttKind: "interaction",
-      mode: t.mode,
-      ...t.label ? { ttLabel: t.label } : {},
-      ...t.fill ? { fill: t.fill } : {},
-      ...t.stroke ? { stroke: t.stroke } : {}
-    });
-  }
-  createFlow(t) {
-    return this.elementFactory.createShape({
-      id: t.id,
-      x: t.position.x,
-      y: t.position.y,
-      width: t.size.width,
-      height: t.size.height,
-      ttKind: "flow",
-      ...t.label ? { ttLabel: t.label } : {}
-    });
-  }
-  // --- fresh, not-yet-placed shapes (palette / context-pad create) -------
-  //
-  // These set an explicit model-style id (`team_…`/`int_…`/`flow_…`, matching
-  // the model package's factory). We must NOT fall back to diagram-js' own
-  // auto-id: its counter starts at `shape_12` and is not advanced past ids that
-  // come in via import, so a re-imported `shape_N` (an element created in a
-  // previous session, then autosaved) collides with the next palette create —
-  // the first placement after a reload then throws "element already exists".
-  createNewTeam(t, i) {
-    const e = T[t];
-    return this.elementFactory.createShape({
-      id: L("team"),
-      width: e.defaultSize.width,
-      height: e.defaultSize.height,
-      ttKind: "team",
-      teamType: t,
-      ttLabel: i ?? e.label
-    });
-  }
-  createNewInteraction(t) {
-    const i = S[t];
-    return this.elementFactory.createShape({
-      id: L("int"),
-      width: i.defaultSize.width,
-      height: i.defaultSize.height,
-      ttKind: "interaction",
-      mode: t
-    });
-  }
-  createNewFlow() {
-    return this.elementFactory.createShape({
-      id: L("flow"),
-      width: w.defaultSize.width,
-      height: w.defaultSize.height,
-      ttKind: "flow",
-      ttLabel: w.label
-    });
-  }
-}
-const ct = {
-  ttElementFactory: ["type", at]
-}, lt = 1500, dt = "#1f2430", ht = "#525a6b", E = {
-  /**
-   * Set directly as the `font-family` attribute on every SVG <text> (canvas
-   * labels and therefore the SVG export too) — not inherited from a CSS
-   * container. Falls back to system sans when the host doesn't provide Inter.
-   */
-  family: "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
-  label: 13.5,
-  small: 11
+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";
+//#region src/model/di-types.ts
+function _(e) {
+	return typeof e == "object" && e ? e.ttKind : void 0;
+}
+function v(e) {
+	return typeof _(e) == "string";
+}
+function y(e) {
+	return _(e) === "team";
+}
+function b(e) {
+	return _(e) === "interaction";
+}
+function x(e) {
+	return _(e) === "flow";
+}
+//#endregion
+//#region src/io/saveSvg.ts
+var S = 40;
+function C(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;
+		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 + S * 2, u = o - i + S * 2, 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";
+//#endregion
+//#region src/TtBaseViewer.ts
+function T(e) {
+	return typeof e == "number" ? `${e}px` : e;
+}
+var E = class {
+	_diagram;
+	_container;
+	_options;
+	constructor(e = {}) {
+		this._options = e, this._container = this._createContainer(e);
+	}
+	_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;
+	}
+	_ensureDiagram() {
+		if (!this._diagram) {
+			let t = [...this._getModules(), ...this._options.additionalModules ?? []];
+			this._diagram = new e({
+				canvas: { container: this._container },
+				modules: t
+			});
+		}
+		return this._diagram;
+	}
+	get(e) {
+		return this._ensureDiagram().get(e);
+	}
+	on(e, t, n = 1e3) {
+		this.get("eventBus").on(e, n, t);
+	}
+	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 };
+	}
+	exportDocument() {
+		return this.get("ttExporter").export();
+	}
+	setMeta(e) {
+		let t = this.get("canvas"), n;
+		try {
+			n = t.getRootElement();
+		} catch {
+			return;
+		}
+		if (!n || n.id !== "tt-root") return;
+		let r = n.businessObject ?? { title: "Untitled team topology" };
+		n.businessObject = {
+			...r,
+			...e
+		};
+	}
+	getMeta() {
+		try {
+			return this.get("canvas").getRootElement().businessObject;
+		} catch {
+			return;
+		}
+	}
+	saveSVG() {
+		return C(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
+		});
+	}
+	attachTo(e) {
+		e.appendChild(this._container), this.get("canvas").resized();
+	}
+	detach() {
+		this._container.remove();
+	}
+	clear() {
+		this._ensureDiagram().clear();
+	}
+	destroy() {
+		this._diagram &&= (this._diagram.destroy(), void 0), this._container.remove();
+	}
+	get container() {
+		return this._container;
+	}
+}, D = class {
+	elementFactory;
+	static $inject = ["elementFactory"];
+	constructor(e) {
+		this.elementFactory = e;
+	}
+	createTeam(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: "team",
+			teamType: e.type,
+			ttLabel: e.label,
+			...e.description ? { description: e.description } : {},
+			...e.fill ? { fill: e.fill } : {},
+			...e.stroke ? { stroke: e.stroke } : {}
+		});
+	}
+	createInteraction(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: "interaction",
+			mode: e.mode,
+			...e.label ? { ttLabel: e.label } : {},
+			...e.fill ? { fill: e.fill } : {},
+			...e.stroke ? { stroke: e.stroke } : {}
+		});
+	}
+	createFlow(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: "flow",
+			...e.label ? { ttLabel: e.label } : {}
+		});
+	}
+	createNewTeam(e, t) {
+		let n = o[e];
+		return this.elementFactory.createShape({
+			id: c("team"),
+			width: n.defaultSize.width,
+			height: n.defaultSize.height,
+			ttKind: "team",
+			teamType: e,
+			ttLabel: t ?? n.label
+		});
+	}
+	createNewInteraction(e) {
+		let t = a[e];
+		return this.elementFactory.createShape({
+			id: c("int"),
+			width: t.defaultSize.width,
+			height: t.defaultSize.height,
+			ttKind: "interaction",
+			mode: e
+		});
+	}
+	createNewFlow() {
+		return this.elementFactory.createShape({
+			id: c("flow"),
+			width: i.defaultSize.width,
+			height: i.defaultSize.height,
+			ttKind: "flow",
+			ttLabel: i.label
+		});
+	}
+}, O = { ttElementFactory: ["type", D] }, le = 1500, ue = "#1f2430", de = "#525a6b", k = {
+	family: "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
+	label: 13.5,
+	small: 11
+}, A = class extends l {
+	static $inject = ["eventBus"];
+	constructor(e) {
+		super(e, le);
+	}
+	canRender(e) {
+		return v(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"), {
+			width: t.width,
+			height: t.height,
+			fill: "#eee"
+		});
+		return u(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`;
+	}
+	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, {
+			fill: t.fill ?? n.fill,
+			stroke: t.stroke ?? n.stroke,
+			"stroke-width": a,
+			...c ? { "stroke-dasharray": c } : {},
+			"stroke-linejoin": "round"
+		});
+		return u(e, l), this.appendLabel(e, t.ttLabel ?? "", r, i, { "font-weight": "640" }), l;
+	}
+	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: fe(a, o, s, e),
+				...i
+			});
+		}
+		let c = e === "rect" ? 4 : Math.min(20, s / 2, o / 2);
+		return d(f("rect"), {
+			x: a,
+			y: a,
+			width: o,
+			height: s,
+			rx: c,
+			ry: c,
+			...i
+		});
+	}
+	drawInteraction(e, t) {
+		let n = a[t.mode] ?? a.collaboration, r = Math.max(t.width, 1), i = Math.max(t.height, 1), o = {
+			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-linejoin": "round"
+		}, c;
+		if (n.shape === "circle") c = d(f("ellipse"), {
+			cx: r / 2,
+			cy: i / 2,
+			rx: (r - 2) / 2,
+			ry: (i - 2) / 2,
+			...o
+		});
+		else if (n.shape === "triangle") {
+			let e = `${r / 2},1 ${r - 1},${i - 1} 1,${i - 1}`;
+			c = d(f("polygon"), {
+				points: e,
+				...o
+			});
+		} else {
+			let e = Math.min(r * .26, i * .85), t = `${1 + e},1 ${r - 1},1 ${r - 1 - e},${i - 1} 1,${i - 1}`;
+			c = d(f("polygon"), {
+				points: t,
+				...o
+			});
+		}
+		return u(e, c), t.ttLabel && this.appendLabel(e, t.ttLabel, r, i, {
+			"font-size": k.small,
+			"font-weight": "600"
+		}), c;
+	}
+	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,
+			fill: "none",
+			stroke: i.stroke,
+			"stroke-width": a,
+			"stroke-dasharray": s(i.strokeStyle, a) || "6 4",
+			"stroke-linejoin": "round"
+		});
+		return u(e, g), t.ttLabel && this.appendLabel(e, t.ttLabel, n - c, r, {
+			"font-size": k.small,
+			"font-weight": "650",
+			"letter-spacing": "0.06em",
+			fill: de
+		}), g;
+	}
+	appendLabel(e, t, n, r, i) {
+		let a = typeof i["font-size"] == "number" ? i["font-size"] : k.label, o = pe(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": k.family,
+				"font-size": a,
+				fill: ue,
+				"text-anchor": "middle",
+				"dominant-baseline": "central",
+				...i
+			});
+			o.textContent = t, u(e, o);
+		});
+	}
 };
-class ut extends G {
-  static $inject = ["eventBus"];
-  constructor(t) {
-    super(t, lt);
-  }
-  canRender(t) {
-    return $(t);
-  }
-  drawShape(t, i) {
-    if (I(i)) return this.drawTeam(t, i);
-    if (C(i)) return this.drawInteraction(t, i);
-    if (O(i)) return this.drawFlow(t, i);
-    const e = g(y("rect"), {
-      width: i.width,
-      height: i.height,
-      fill: "#eee"
-    });
-    return _(t, e), e;
-  }
-  getShapePath(t) {
-    const { x: i, y: e, width: o, height: n } = t;
-    return `M${i},${e}l${o},0l0,${n}l${-o},0z`;
-  }
-  // --- teams ---------------------------------------------------------------
-  drawTeam(t, i) {
-    const e = T[i.teamType] ?? T["stream-aligned"], o = Math.max(i.width, 1), n = Math.max(i.height, 1), s = e.strokeWidth, a = x(e.strokeStyle, s), c = this.teamOutline(e.shape, o, n, s, {
-      fill: i.fill ?? e.fill,
-      stroke: i.stroke ?? e.stroke,
-      "stroke-width": s,
-      ...a ? { "stroke-dasharray": a } : {},
-      "stroke-linejoin": "round"
-    });
-    return _(t, c), this.appendLabel(t, i.ttLabel ?? "", o, n, { "font-weight": "640" }), c;
-  }
-  teamOutline(t, i, e, o, n) {
-    const s = o / 2, a = i - o, c = e - o;
-    if (t === "octagon") {
-      const l = Math.min(a, c) * 0.29;
-      return g(y("polygon"), { points: mt(s, a, c, l), ...n });
-    }
-    const h = t === "rect" ? 4 : Math.min(20, c / 2, a / 2);
-    return g(y("rect"), { x: s, y: s, width: a, height: c, rx: h, ry: h, ...n });
-  }
-  // --- interactions --------------------------------------------------------
-  drawInteraction(t, i) {
-    const e = S[i.mode] ?? S.collaboration, o = Math.max(i.width, 1), n = Math.max(i.height, 1), s = 2, a = s / 2, c = {
-      fill: i.fill ?? e.fill,
-      "fill-opacity": e.opacity,
-      stroke: i.stroke ?? e.stroke,
-      "stroke-width": s,
-      "stroke-dasharray": x(e.strokeStyle, s) || "6 4",
-      "stroke-linejoin": "round"
-    };
-    let h;
-    if (e.shape === "circle")
-      h = g(y("ellipse"), {
-        cx: o / 2,
-        cy: n / 2,
-        rx: (o - s) / 2,
-        ry: (n - s) / 2,
-        ...c
-      });
-    else if (e.shape === "triangle") {
-      const l = `${o / 2},${a} ${o - a},${n - a} ${a},${n - a}`;
-      h = g(y("polygon"), { points: l, ...c });
-    } else {
-      const l = Math.min(o * 0.26, n * 0.85), m = `${a + l},${a} ${o - a},${a} ${o - a - l},${n - a} ${a},${n - a}`;
-      h = g(y("polygon"), { points: m, ...c });
-    }
-    return _(t, h), i.ttLabel && this.appendLabel(t, i.ttLabel, o, n, {
-      "font-size": E.small,
-      "font-weight": "600"
-    }), h;
-  }
-  // --- flow of change ------------------------------------------------------
-  drawFlow(t, i) {
-    const e = Math.max(i.width, 1), o = Math.max(i.height, 1), n = w.strokeWidth, s = n / 2, a = Math.min(e * 0.16, o * 1.1), c = o * 0.5, h = (o - c) / 2, l = h + c, m = [
-      [s, h],
-      [e - a, h],
-      [e - a, s],
-      [e - s, o / 2],
-      [e - a, o - s],
-      [e - a, l],
-      [s, l]
-    ].map((f) => f.join(",")).join(" "), u = g(y("polygon"), {
-      points: m,
-      fill: "none",
-      stroke: w.stroke,
-      "stroke-width": n,
-      "stroke-dasharray": x(w.strokeStyle, n) || "6 4",
-      "stroke-linejoin": "round"
-    });
-    return _(t, u), i.ttLabel && this.appendLabel(t, i.ttLabel, e - a, o, {
-      "font-size": E.small,
-      "font-weight": "650",
-      "letter-spacing": "0.06em",
-      fill: ht
-    }), u;
-  }
-  // --- shared label rendering (wrapped, centred, no halo) ------------------
-  appendLabel(t, i, e, o, n) {
-    const s = typeof n["font-size"] == "number" ? n["font-size"] : E.label, a = ft(i, e - 20, s), c = s * 1.2, h = o / 2 - (a.length - 1) * c / 2;
-    a.forEach((l, m) => {
-      const u = g(y("text"), {
-        x: e / 2,
-        y: h + m * c,
-        "font-family": E.family,
-        "font-size": s,
-        fill: dt,
-        "text-anchor": "middle",
-        "dominant-baseline": "central",
-        ...n
-      });
-      u.textContent = l, _(t, u);
-    });
-  }
-}
-function mt(r, t, i, e) {
-  return [
-    [r + e, r],
-    [r + t - e, r],
-    [r + t, r + e],
-    [r + t, r + i - e],
-    [r + t - e, r + i],
-    [r + e, r + i],
-    [r, r + i - e],
-    [r, r + e]
-  ].map((o) => o.join(",")).join(" ");
-}
-function ft(r, t, i) {
-  const e = Math.max(4, Math.floor(t / (i * 0.58))), o = r.split(/\s+/).filter(Boolean);
-  if (o.length === 0) return [];
-  const n = [];
-  let s = "";
-  for (const a of o) {
-    const c = s ? `${s} ${a}` : a;
-    c.length > e && s ? (n.push(s), s = a) : s = c;
-  }
-  return s && n.push(s), n;
-}
-const pt = {
-  __init__: ["ttRenderer"],
-  ttRenderer: ["type", ut]
+function fe(e, t, n, r) {
+	return [
+		[e + r, e],
+		[e + t - r, e],
+		[e + t, e + r],
+		[e + t, e + n - r],
+		[e + t - r, e + n],
+		[e + r, e + n],
+		[e, e + n - r],
+		[e, e + r]
+	].map((e) => e.join(",")).join(" ");
+}
+function pe(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;
+}
+//#endregion
+//#region src/draw/index.ts
+var j = {
+	__init__: ["ttRenderer"],
+	ttRenderer: ["type", A]
+}, M = class {
+	canvas;
+	elementFactory;
+	factory;
+	eventBus;
+	elementRegistry;
+	static $inject = [
+		"canvas",
+		"elementFactory",
+		"ttElementFactory",
+		"eventBus",
+		"elementRegistry"
+	];
+	constructor(e, t, n, r, i) {
+		this.canvas = e, this.elementFactory = t, this.factory = n, this.eventBus = r, this.elementRegistry = i;
+	}
+	import(e) {
+		let t = [];
+		this.eventBus.fire("import.render.start", { document: e });
+		let n;
+		try {
+			n = this.canvas.getRootElement();
+		} catch {
+			n = void 0;
+		}
+		let r;
+		n && n.id === "tt-root" ? r = n : (r = this.elementFactory.createRoot({ id: w }), 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);
+		return this.eventBus.fire("import.render.done", { warnings: t }), t;
+	}
+	clear() {
+		for (let e of [...this.elementRegistry.getAll()]) if (e.id !== "tt-root") try {
+			this.canvas.removeShape(e.id);
+		} catch {}
+	}
+}, N = class {
+	elementRegistry;
+	canvas;
+	static $inject = ["elementRegistry", "canvas"];
+	constructor(e, t) {
+		this.elementRegistry = e, this.canvas = t;
+	}
+	export() {
+		let e;
+		try {
+			e = this.canvas.getRootElement().businessObject;
+		} catch {
+			e = void 0;
+		}
+		let t = [], n = [], 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
+			};
+			y(e) ? t.push({
+				id: e.id,
+				type: e.teamType,
+				label: e.ttLabel ?? "",
+				position: a,
+				size: o,
+				...e.description ? { description: e.description } : {},
+				...e.fill ? { fill: e.fill } : {},
+				...e.stroke ? { stroke: e.stroke } : {}
+			}) : b(e) ? n.push({
+				id: e.id,
+				mode: e.mode,
+				position: a,
+				size: o,
+				...e.ttLabel ? { label: e.ttLabel } : {},
+				...e.fill ? { fill: e.fill } : {},
+				...e.stroke ? { stroke: e.stroke } : {}
+			}) : x(e) && i.push({
+				id: e.id,
+				position: a,
+				size: o,
+				...e.ttLabel ? { label: e.ttLabel } : {}
+			});
+		}
+		return {
+			version: r,
+			title: e?.title ?? "Untitled team topology",
+			nodes: t,
+			interactions: n,
+			flows: i
+		};
+	}
+}, P = {
+	ttImporter: ["type", M],
+	ttExporter: ["type", N]
+}, F = class extends E {
+	_getModules() {
+		return [
+			O,
+			j,
+			P
+		];
+	}
+}, I = class extends F {
+	_getModules() {
+		return [
+			...super._getModules(),
+			p,
+			m,
+			h
+		];
+	}
 };
-class gt {
-  constructor(t, i, e, o, n) {
-    this.canvas = t, this.elementFactory = i, this.factory = e, this.eventBus = o, this.elementRegistry = n;
-  }
-  static $inject = ["canvas", "elementFactory", "ttElementFactory", "eventBus", "elementRegistry"];
-  import(t) {
-    const i = [];
-    this.eventBus.fire("import.render.start", { document: t });
-    let e;
-    try {
-      e = this.canvas.getRootElement();
-    } catch {
-      e = void 0;
-    }
-    let o;
-    e && e.id === M ? o = e : (o = this.elementFactory.createRoot({ id: M }), this.canvas.setRootElement(o)), o.businessObject = { title: t.title };
-    for (const n of t.flows)
-      this.canvas.addShape(this.factory.createFlow(n), o);
-    for (const n of t.nodes)
-      this.canvas.addShape(this.factory.createTeam(n), o);
-    for (const n of t.interactions)
-      this.canvas.addShape(this.factory.createInteraction(n), o);
-    return this.eventBus.fire("import.render.done", { warnings: i }), i;
-  }
-  /** Removes every element (for re-import). */
-  clear() {
-    for (const t of [...this.elementRegistry.getAll()])
-      if (t.id !== M)
-        try {
-          this.canvas.removeShape(t.id);
-        } catch {
-        }
-  }
-}
-class yt {
-  constructor(t, i) {
-    this.elementRegistry = t, this.canvas = i;
-  }
-  static $inject = ["elementRegistry", "canvas"];
-  export() {
-    let t;
-    try {
-      t = this.canvas.getRootElement().businessObject;
-    } catch {
-      t = void 0;
-    }
-    const i = [], e = [], o = [];
-    for (const n of this.elementRegistry.getAll()) {
-      if (n.id === M) continue;
-      const s = n, a = { x: s.x, y: s.y }, c = { width: s.width, height: s.height };
-      I(n) ? i.push({
-        id: n.id,
-        type: n.teamType,
-        label: n.ttLabel ?? "",
-        position: a,
-        size: c,
-        ...n.description ? { description: n.description } : {},
-        ...n.fill ? { fill: n.fill } : {},
-        ...n.stroke ? { stroke: n.stroke } : {}
-      }) : C(n) ? e.push({
-        id: n.id,
-        mode: n.mode,
-        position: a,
-        size: c,
-        ...n.ttLabel ? { label: n.ttLabel } : {},
-        ...n.fill ? { fill: n.fill } : {},
-        ...n.stroke ? { stroke: n.stroke } : {}
-      }) : O(n) && o.push({
-        id: n.id,
-        position: a,
-        size: c,
-        ...n.ttLabel ? { label: n.ttLabel } : {}
-      });
-    }
-    return {
-      version: K,
-      title: t?.title ?? "Untitled team topology",
-      nodes: i,
-      interactions: e,
-      flows: o
-    };
-  }
-}
-const vt = {
-  ttImporter: ["type", gt],
-  ttExporter: ["type", yt]
+//#endregion
+//#region src/modeling/cmd/UpdatePropertiesHandler.ts
+function L(e, t, n) {
+	n === void 0 ? delete e[t] : e[t] = n;
+}
+var me = class {
+	execute(e) {
+		let { element: t, properties: n } = e, r = t, i = {};
+		for (let e of Object.keys(n)) i[e] = r[e], L(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)) L(r, e, n[e]);
+		return [t];
+	}
+}, R = "element.updateProperties", he = class {
+	commandStack;
+	static $inject = ["commandStack"];
+	constructor(e) {
+		this.commandStack = e, e.registerHandler(R, me);
+	}
+	updateProperties(e, t) {
+		this.commandStack.execute(R, {
+			element: e,
+			properties: t
+		});
+	}
+	updateLabel(e, t) {
+		this.updateProperties(e, { ttLabel: t || void 0 });
+	}
+	setTeamType(e, t) {
+		this.updateProperties(e, { teamType: t });
+	}
+	setInteractionMode(e, t) {
+		this.updateProperties(e, { mode: t });
+	}
+	setColors(e, t, n) {
+		this.updateProperties(e, {
+			fill: t,
+			stroke: n
+		});
+	}
+	setDescription(e, t) {
+		this.updateProperties(e, { description: t });
+	}
+}, z = {
+	__init__: ["ttModeling"],
+	ttModeling: ["type", he]
+}, B = class extends ie {
+	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);
+	}
+}, V = {
+	__depends__: [re],
+	__init__: ["ttRules"],
+	ttRules: ["type", B]
+}, H = class extends ae {
+	static $inject = ["eventBus", "canvas"];
+	constructor(e, t) {
+		super(e), this.preExecute(["shape.create", "elements.create"], (e) => {
+			e.parent = t.getRootElement();
+		}, !0);
+	}
+}, U = {
+	__init__: ["ttFlatModelBehavior"],
+	ttFlatModelBehavior: ["type", H]
 };
-class wt extends st {
-  _getModules() {
-    return [ct, pt, vt];
-  }
-}
-class bt extends wt {
-  _getModules() {
-    return [...super._getModules(), H, Y, X];
-  }
-}
-function F(r, t, i) {
-  i === void 0 ? delete r[t] : r[t] = i;
-}
-class _t {
-  execute(t) {
-    const { element: i, properties: e } = t, o = i, n = {};
-    for (const s of Object.keys(e))
-      n[s] = o[s], F(o, s, e[s]);
-    return t.oldProperties = n, [i];
-  }
-  revert(t) {
-    const { element: i, oldProperties: e } = t, o = i;
-    if (e)
-      for (const n of Object.keys(e)) F(o, n, e[n]);
-    return [i];
-  }
-}
-const N = "element.updateProperties";
-class xt {
-  constructor(t) {
-    this.commandStack = t, t.registerHandler(N, _t);
-  }
-  static $inject = ["commandStack"];
-  updateProperties(t, i) {
-    this.commandStack.execute(N, { element: t, properties: i });
-  }
-  /** Rename / relabel any element. */
-  updateLabel(t, i) {
-    this.updateProperties(t, { ttLabel: i || void 0 });
-  }
-  setTeamType(t, i) {
-    this.updateProperties(t, { teamType: i });
-  }
-  setInteractionMode(t, i) {
-    this.updateProperties(t, { mode: i });
-  }
-  /** Set or clear per-element colour overrides (`undefined` reverts to default). */
-  setColors(t, i, e) {
-    this.updateProperties(t, { fill: i, stroke: e });
-  }
-  setDescription(t, i) {
-    this.updateProperties(t, { description: i });
-  }
-}
-const Mt = {
-  __init__: ["ttModeling"],
-  ttModeling: ["type", xt]
+//#endregion
+//#region src/draw/palette-icons.ts
+function W(e) {
+	return `<svg class="tt-palette-svg" width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
+}
+function G(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}"` : "");
+	switch (t.shape) {
+		case "octagon": return W(`<polygon points="8,3 18,3 23,8 23,18 18,23 8,23 3,18 3,8" ${r}/>`);
+		case "rounded-rect-vertical": return W(`<rect x="8" y="3" width="10" height="20" rx="4" ${r}/>`);
+		case "rect": return W(`<rect x="3" y="7" width="20" height="12" rx="1.5" ${r}/>`);
+		default: return W(`<rect x="3" y="8" width="20" height="10" rx="5" ${r}/>`);
+	}
+}
+function K() {
+	return W("<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 q(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}"` : "");
+	switch (t.shape) {
+		case "circle": return W(`<circle cx="13" cy="13" r="9" ${r}/>`);
+		case "triangle": return W(`<polygon points="5,6 22,13 5,20" ${r}/>`);
+		default: return W(`<polygon points="9,6 23,6 17,20 3,20" ${r}/>`);
+	}
+}
+//#endregion
+//#region src/palette/TtPaletteProvider.ts
+var ge = "tt-1-teams", _e = "tt-2-modes", ve = "tt-3-flow";
+function J(e, t) {
+	return `<div class="entry tt-palette-entry" draggable="true" title="${t}">${e}</div>`;
+}
+var Y = class {
+	create;
+	factory;
+	static $inject = [
+		"palette",
+		"create",
+		"ttElementFactory"
+	];
+	constructor(e, t, n) {
+		this.create = t, this.factory = n, e.registerProvider(this);
+	}
+	getPaletteEntries() {
+		let e = {};
+		for (let t of n) {
+			let n = (e) => this.create.start(e, this.factory.createNewTeam(t.type, t.label));
+			e[`team.${t.type}`] = {
+				group: ge,
+				title: `${t.label} team — ${t.description}`,
+				html: J(G(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: _e,
+				title: `${n.label} — ${n.description} (place over the teams it relates to)`,
+				html: J(q(n.mode), `${n.label} — ${n.description}`),
+				action: {
+					dragstart: t,
+					click: t
+				}
+			};
+		}
+		let r = (e) => this.create.start(e, this.factory.createNewFlow());
+		return e.flow = {
+			group: ve,
+			title: `${i.label} — the implied left-to-right flow`,
+			html: J(K(), i.label),
+			action: {
+				dragstart: r,
+				click: r
+			}
+		}, e;
+	}
+}, X = {
+	__depends__: [oe, se],
+	__init__: ["ttPaletteProvider"],
+	ttPaletteProvider: ["type", Y]
+}, ye = "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", be = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z";
+function xe(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 Z(e, t) {
+	return `<div class="entry tt-cp-entry" title="${t}">${xe(e)}</div>`;
+}
+var Q = class {
+	modeling;
+	labelEditing;
+	static $inject = [
+		"contextPad",
+		"modeling",
+		"ttLabelEditing"
+	];
+	constructor(e, t, n) {
+		this.modeling = t, this.labelEditing = n, e.registerProvider(this);
+	}
+	getContextPadEntries(e) {
+		return v(e) ? {
+			"edit-label": {
+				group: "edit",
+				title: "Rename",
+				html: Z(ye, "Rename"),
+				action: { click: () => this.labelEditing.activate(e) }
+			},
+			delete: {
+				group: "edit",
+				title: "Delete",
+				html: Z(be, "Delete"),
+				action: { click: () => this.modeling.removeElements([e]) }
+			}
+		} : {};
+	}
+}, Se = {
+	__depends__: [ce],
+	__init__: ["ttContextPadProvider"],
+	ttContextPadProvider: ["type", Q]
+}, Ce = class {
+	canvas;
+	modeling;
+	static $inject = [
+		"eventBus",
+		"canvas",
+		"ttModeling"
+	];
+	active = null;
+	constructor(e, t, n) {
+		this.canvas = t, this.modeling = n, e.on("element.dblclick", (e) => {
+			v(e.element) && this.activate(e.element);
+		}), e.on([
+			"element.mousedown",
+			"drag.init",
+			"canvas.viewbox.changing"
+		], () => this.active?.commit());
+	}
+	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 - 170 / 2, 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
+		};
+	}
+	cancel() {
+		this.active?.cleanup();
+	}
+}, we = {
+	__init__: ["ttLabelEditing"],
+	ttLabelEditing: ["type", Ce]
 };
-class $t extends tt {
-  static $inject = ["eventBus"];
-  constructor(t) {
-    super(t);
-  }
-  init() {
-    this.addRule(
-      ["shape.move", "elements.move"],
-      (t) => t.target && t.target.parent ? null : !0
-    ), this.addRule("shape.create", () => !0), this.addRule("shape.resize", () => !0);
-  }
-}
-const kt = {
-  __depends__: [Q],
-  __init__: ["ttRules"],
-  ttRules: ["type", $t]
+//#endregion
+//#region src/keyboard/TtKeyboard.ts
+function Te(e) {
+	let t = e;
+	return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
+}
+var Ee = class {
+	static $inject = [
+		"canvas",
+		"commandStack",
+		"selection",
+		"modeling"
+	];
+	constructor(e, t, n, r) {
+		(e.getContainer().ownerDocument ?? document).addEventListener("keydown", (e) => {
+			if (Te(e.target)) return;
+			let i = e.ctrlKey || e.metaKey, a = e.key.toLowerCase();
+			if (i && a === "z" && !e.shiftKey) e.preventDefault(), t.canUndo() && t.undo();
+			else if (i && a === "z" && e.shiftKey || i && a === "y") e.preventDefault(), t.canRedo() && t.redo();
+			else if (a === "delete" || a === "backspace") {
+				let t = n.get();
+				t.length && (e.preventDefault(), r.removeElements([...t]));
+			}
+		});
+	}
+}, De = {
+	__init__: ["ttKeyboard"],
+	ttKeyboard: ["type", Ee]
 };
-class Et extends et {
-  static $inject = ["eventBus", "canvas"];
-  constructor(t, i) {
-    super(t), this.preExecute(
-      ["shape.create", "elements.create"],
-      (e) => {
-        e.parent = i.getRootElement();
-      },
-      !0
-    );
-  }
-}
-const Tt = {
-  __init__: ["ttFlatModelBehavior"],
-  ttFlatModelBehavior: ["type", Et]
-};
-function v(r) {
-  return `<svg class="tt-palette-svg" width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">${r}</svg>`;
-}
-function St(r) {
-  const t = T[r], i = x(t.strokeStyle, 1.5), e = `fill="${t.fill}" stroke="${t.stroke}" stroke-width="1.5"` + (i ? ` stroke-dasharray="${i}"` : "");
-  switch (t.shape) {
-    case "octagon":
-      return v(`<polygon points="8,3 18,3 23,8 23,18 18,23 8,23 3,18 3,8" ${e}/>`);
-    case "rounded-rect-vertical":
-      return v(`<rect x="8" y="3" width="10" height="20" rx="4" ${e}/>`);
-    case "rect":
-      return v(`<rect x="3" y="7" width="20" height="12" rx="1.5" ${e}/>`);
-    default:
-      return v(`<rect x="3" y="8" width="20" height="10" rx="5" ${e}/>`);
-  }
-}
-function Rt() {
-  return v(
-    '<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 Lt(r) {
-  const t = S[r], i = x(t.strokeStyle, 1.5), e = `fill="${t.fill}" fill-opacity="${t.opacity}" stroke="${t.stroke}" stroke-width="1.5"` + (i ? ` stroke-dasharray="${i}"` : "");
-  switch (t.shape) {
-    case "circle":
-      return v(`<circle cx="13" cy="13" r="9" ${e}/>`);
-    case "triangle":
-      return v(`<polygon points="5,6 22,13 5,20" ${e}/>`);
-    default:
-      return v(`<polygon points="9,6 23,6 17,20 3,20" ${e}/>`);
-  }
-}
-const Pt = "tt-1-teams", It = "tt-2-modes", Ct = "tt-3-flow";
-function P(r, t) {
-  return `<div class="entry tt-palette-entry" draggable="true" title="${t}">${r}</div>`;
-}
-class Ot {
-  constructor(t, i, e) {
-    this.create = i, this.factory = e, t.registerProvider(this);
-  }
-  static $inject = ["palette", "create", "ttElementFactory"];
-  getPaletteEntries() {
-    const t = {};
-    for (const e of U) {
-      const o = (n) => this.create.start(
-        n,
-        this.factory.createNewTeam(e.type, e.label)
-      );
-      t[`team.${e.type}`] = {
-        group: Pt,
-        title: `${e.label} team — ${e.description}`,
-        html: P(St(e.type), `${e.label} team — ${e.description}`),
-        action: { dragstart: o, click: o }
-      };
-    }
-    for (const e of V) {
-      const o = (n) => this.create.start(
-        n,
-        this.factory.createNewInteraction(e.mode)
-      );
-      t[`mode.${e.mode}`] = {
-        group: It,
-        title: `${e.label} — ${e.description} (place over the teams it relates to)`,
-        html: P(Lt(e.mode), `${e.label} — ${e.description}`),
-        action: { dragstart: o, click: o }
-      };
-    }
-    const i = (e) => this.create.start(e, this.factory.createNewFlow());
-    return t.flow = {
-      group: Ct,
-      title: `${w.label} — the implied left-to-right flow`,
-      html: P(Rt(), w.label),
-      action: { dragstart: i, click: i }
-    }, t;
-  }
-}
-const zt = {
-  __depends__: [it, nt],
-  __init__: ["ttPaletteProvider"],
-  ttPaletteProvider: ["type", Ot]
-}, Ft = "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", Nt = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z";
-function jt(r, t = 18) {
-  return `<svg width="${t}" height="${t}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${r}"/></svg>`;
-}
-function j(r, t) {
-  return `<div class="entry tt-cp-entry" title="${t}">${jt(r)}</div>`;
-}
-class Dt {
-  constructor(t, i, e) {
-    this.modeling = i, this.labelEditing = e, t.registerProvider(this);
-  }
-  static $inject = ["contextPad", "modeling", "ttLabelEditing"];
-  getContextPadEntries(t) {
-    return $(t) ? {
-      "edit-label": {
-        group: "edit",
-        title: "Rename",
-        html: j(Ft, "Rename"),
-        action: { click: () => this.labelEditing.activate(t) }
-      },
-      delete: {
-        group: "edit",
-        title: "Delete",
-        html: j(Nt, "Delete"),
-        action: { click: () => this.modeling.removeElements([t]) }
-      }
-    } : {};
-  }
-}
-const At = {
-  __depends__: [ot],
-  __init__: ["ttContextPadProvider"],
-  ttContextPadProvider: ["type", Dt]
-};
-class Bt {
-  constructor(t, i, e) {
-    this.canvas = i, this.modeling = e, t.on("element.dblclick", (o) => {
-      $(o.element) && this.activate(o.element);
-    }), t.on(
-      ["element.mousedown", "drag.init", "canvas.viewbox.changing"],
-      () => this.active?.commit()
-    );
-  }
-  static $inject = ["eventBus", "canvas", "ttModeling"];
-  active = null;
-  activate(t) {
-    this.active?.commit();
-    const i = this.canvas.getContainer(), e = this.canvas.zoom(), o = this.canvas.viewbox(), n = t.x + t.width / 2, s = t.y + t.height / 2, a = 170, c = (n - o.x) * e - a / 2, h = (s - o.y) * e - 14, l = document.createElement("input");
-    l.type = "text", l.className = "tt-label-input", l.value = t.ttLabel ?? "", l.style.position = "absolute", l.style.left = `${c}px`, l.style.top = `${h}px`, l.style.width = `${a}px`, i.appendChild(l), l.focus(), l.select();
-    let m = !1;
-    const u = () => {
-      m || (m = !0, l.removeEventListener("keydown", p), l.removeEventListener("blur", b), l.remove(), this.active = null);
-    }, f = () => {
-      if (m) return;
-      const d = l.value.trim(), A = d !== (t.ttLabel ?? "");
-      u(), A && this.modeling.updateLabel(t, d);
-    }, p = (d) => {
-      d.key === "Enter" ? (d.preventDefault(), f()) : d.key === "Escape" && (d.preventDefault(), u());
-    }, b = () => f();
-    l.addEventListener("keydown", p), l.addEventListener("blur", b), this.active = { commit: f, cleanup: u };
-  }
-  cancel() {
-    this.active?.cleanup();
-  }
-}
-const Kt = {
-  __init__: ["ttLabelEditing"],
-  ttLabelEditing: ["type", Bt]
-};
-function Ut(r) {
-  const t = r;
-  return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
-}
-class Vt {
-  static $inject = ["canvas", "commandStack", "selection", "modeling"];
-  constructor(t, i, e, o) {
-    (t.getContainer().ownerDocument ?? document).addEventListener("keydown", (s) => {
-      if (Ut(s.target)) return;
-      const a = s.ctrlKey || s.metaKey, c = s.key.toLowerCase();
-      if (a && c === "z" && !s.shiftKey)
-        s.preventDefault(), i.canUndo() && i.undo();
-      else if (a && c === "z" && s.shiftKey || a && c === "y")
-        s.preventDefault(), i.canRedo() && i.redo();
-      else if (c === "delete" || c === "backspace") {
-        const h = e.get();
-        h.length && (s.preventDefault(), o.removeElements([...h]));
-      }
-    });
-  }
-}
-const Gt = {
-  __init__: ["ttKeyboard"],
-  ttKeyboard: ["type", Vt]
-};
-function D(r) {
-  return O(r) ? 0 : I(r) ? r.teamType === "enabling" ? 3 : r.teamType === "complicated-subsystem" ? 2 : 1 : C(r) ? 4 : 1;
-}
-class Ht {
-  constructor(t, i, e) {
-    this.canvas = i, this.elementRegistry = e, t.on("import.render.start", () => {
-      this.importing = !0;
-    }), t.on("import.render.done", () => {
-      this.importing = !1, this.reorder();
-    }), t.on("commandStack.changed", () => {
-      this.importing || this.reorder();
-    });
-  }
-  static $inject = ["eventBus", "canvas", "elementRegistry"];
-  importing = !1;
-  /** Re-append each element's graphics group in ascending tier order (back → front). */
-  reorder() {
-    const t = this.elementRegistry.getAll().filter($).sort(
-      (i, e) => D(i) - D(e)
-    );
-    for (const i of t) {
-      const o = this.canvas.getGraphics(i)?.parentNode, n = o?.parentNode;
-      o && n && n.appendChild(o);
-    }
-  }
-}
-const Yt = {
-  __init__: ["ttZOrder"],
-  ttZOrder: ["type", Ht]
-};
-class he extends bt {
-  _getModules() {
-    return [
-      ...super._getModules(),
-      // diagram-js stock
-      W,
-      Z,
-      q,
-      J,
-      // Team Topologies editor
-      Mt,
-      kt,
-      Tt,
-      zt,
-      At,
-      Kt,
-      Gt,
-      Yt
-    ];
-  }
-  undo() {
-    this.get("commandStack").undo();
-  }
-  redo() {
-    this.get("commandStack").redo();
-  }
-  canUndo() {
-    return this.get("commandStack").canUndo();
-  }
-  canRedo() {
-    return this.get("commandStack").canRedo();
-  }
-}
-export {
-  he as Modeler,
-  bt as NavigatedViewer,
-  M as ROOT_ID,
-  ut as TeamTopologiesRenderer,
-  st as TtBaseViewer,
-  Dt as TtContextPadProvider,
-  at as TtElementFactory,
-  yt as TtExporter,
-  Et as TtFlatModelBehavior,
-  gt as TtImporter,
-  Vt as TtKeyboard,
-  Bt as TtLabelEditing,
-  xt as TtModeling,
-  Ot as TtPaletteProvider,
-  $t as TtRules,
-  Ht as TtZOrder,
-  wt as Viewer,
-  Rt as flowIconSvg,
-  Lt as interactionIconSvg,
-  vt as ioModule,
-  $ as isTtElement,
-  O as isTtFlow,
-  C as isTtInteraction,
-  I as isTtTeam,
-  rt as saveSVG,
-  St as teamIconSvg,
-  Tt as ttBehaviorsModule,
-  At as ttContextPadModule,
-  pt as ttDrawModule,
-  Gt as ttKeyboardModule,
-  Kt as ttLabelEditingModule,
-  ct as ttModelModule,
-  Mt as ttModelingModule,
-  zt as ttPaletteModule,
-  kt as ttRulesModule,
-  Yt as ttZOrderModule
+//#endregion
+//#region src/zorder/TtZOrder.ts
+function Oe(e) {
+	return x(e) ? 0 : y(e) ? e.teamType === "enabling" ? 3 : e.teamType === "complicated-subsystem" ? 2 : 1 : b(e) ? 4 : 1;
+}
+var ke = class {
+	canvas;
+	elementRegistry;
+	static $inject = [
+		"eventBus",
+		"canvas",
+		"elementRegistry"
+	];
+	importing = !1;
+	constructor(e, t, n) {
+		this.canvas = t, this.elementRegistry = n, e.on("import.render.start", () => {
+			this.importing = !0;
+		}), e.on("import.render.done", () => {
+			this.importing = !1, this.reorder();
+		}), e.on("commandStack.changed", () => {
+			this.importing || this.reorder();
+		});
+	}
+	reorder() {
+		let e = this.elementRegistry.getAll().filter(v).sort((e, t) => Oe(e) - Oe(t));
+		for (let t of e) {
+			let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
+			e && n && n.appendChild(e);
+		}
+	}
+}, $ = {
+	__init__: ["ttZOrder"],
+	ttZOrder: ["type", ke]
+}, Ae = class extends I {
+	_getModules() {
+		return [
+			...super._getModules(),
+			g,
+			ee,
+			te,
+			ne,
+			z,
+			V,
+			U,
+			X,
+			Se,
+			we,
+			De,
+			$
+		];
+	}
+	undo() {
+		this.get("commandStack").undo();
+	}
+	redo() {
+		this.get("commandStack").redo();
+	}
+	canUndo() {
+		return this.get("commandStack").canUndo();
+	}
+	canRedo() {
+		return this.get("commandStack").canRedo();
+	}
 };
-//# sourceMappingURL=index.js.map
+//#endregion
+export { Ae as Modeler, I as NavigatedViewer, w as ROOT_ID, A as TeamTopologiesRenderer, E as TtBaseViewer, Q as TtContextPadProvider, D as TtElementFactory, N as TtExporter, H as TtFlatModelBehavior, M as TtImporter, Ee as TtKeyboard, Ce as TtLabelEditing, he as TtModeling, Y as TtPaletteProvider, B as TtRules, ke as TtZOrder, F as Viewer, K as flowIconSvg, q as interactionIconSvg, P as ioModule, v as isTtElement, x as isTtFlow, b as isTtInteraction, y as isTtTeam, C as saveSVG, G as teamIconSvg, U as ttBehaviorsModule, Se as ttContextPadModule, j as ttDrawModule, De as ttKeyboardModule, we as ttLabelEditingModule, O as ttModelModule, z as ttModelingModule, X as ttPaletteModule, V as ttRulesModule, $ as ttZOrderModule };
+
+//# sourceMappingURL=index.js.map