@miragon/team-topologies-renderer 0.1.0

package/dist/index.js

@@ -0,0 +1,852 @@
+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
+};
+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]
+};
+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]
+};
+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]
+};
+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]
+};
+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
+};
+//# sourceMappingURL=index.js.map