@miragon/team-topologies-renderer 0.5.0 → 0.6.0

package/README.md

@@ -52,8 +52,12 @@ modeler.redo();
 ```
 
 > **The CSS is required.** Import `@miragon/team-topologies-renderer/assets/team-topologies.css`
-> (it also pulls in `diagram-js`'s own stylesheet) — without it the palette, context pad and label
-> editor are unstyled.
+> (it also pulls in `diagram-js`'s own stylesheet and the Miragon `--cd-*` brand tokens) — without it
+> the palette, context pad and label editor are unstyled.
+
+> **Typeface.** The canvas labels are drawn in the Miragon typeface **Geist**. The library does not
+> ship the font; self-host it in the host app (e.g. `@fontsource-variable/geist`) so the on-screen
+> canvas and exported SVG render in Geist. Without it, text falls back to a system sans.
 
 ## API
 

package/dist/Modeler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modeler.d.ts","sourceRoot":"","sources":["../src/Modeler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAQ9C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAUvD;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,eAAe;cACvB,WAAW,IAAI,iBAAiB,EAAE;IAoBrD,IAAI,IAAI,IAAI;IAIZ,IAAI,IAAI,IAAI;IAIZ,OAAO,IAAI,OAAO;IAIlB,OAAO,IAAI,OAAO;CAGnB"}
+{"version":3,"file":"Modeler.d.ts","sourceRoot":"","sources":["../src/Modeler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAQ9C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAWvD;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,eAAe;cACvB,WAAW,IAAI,iBAAiB,EAAE;IAqBrD,IAAI,IAAI,IAAI;IAIZ,IAAI,IAAI,IAAI;IAIZ,OAAO,IAAI,OAAO;IAIlB,OAAO,IAAI,OAAO;CAGnB"}

package/dist/copy-paste/TtCopyPaste.d.ts

@@ -0,0 +1,17 @@
+import { default as CopyPaste } from 'diagram-js/lib/features/copy-paste/CopyPaste.js';
+import { default as Canvas } from 'diagram-js/lib/core/Canvas';
+import { default as Create } from 'diagram-js/lib/features/create/Create';
+import { default as Clipboard } from 'diagram-js/lib/features/clipboard/Clipboard';
+import { default as ElementFactory } from 'diagram-js/lib/core/ElementFactory';
+import { default as EventBus } from 'diagram-js/lib/core/EventBus';
+import { default as Modeling } from 'diagram-js/lib/features/modeling/Modeling';
+import { default as Mouse } from 'diagram-js/lib/features/mouse/Mouse';
+import { default as Rules } from 'diagram-js/lib/features/rules/Rules';
+import { Shape } from 'diagram-js/lib/model/Types';
+export default class TtCopyPaste extends CopyPaste {
+    private readonly elementFactory;
+    static $inject: string[];
+    constructor(canvas: Canvas, create: Create, clipboard: Clipboard, elementFactory: ElementFactory, eventBus: EventBus, modeling: Modeling, mouse: Mouse, rules: Rules);
+    createShape(attrs: Record<string, unknown>): Shape;
+}
+//# sourceMappingURL=TtCopyPaste.d.ts.map

package/dist/copy-paste/TtCopyPaste.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtCopyPaste.d.ts","sourceRoot":"","sources":["../../src/copy-paste/TtCopyPaste.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,SAAS,MAAM,iDAAiD,CAAC;AAGxE,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,MAAM,MAAM,uCAAuC,CAAC;AAChE,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AACzE,OAAO,KAAK,cAAc,MAAM,oCAAoC,CAAC;AACrE,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,KAAK,MAAM,qCAAqC,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,qCAAqC,CAAC;AAC7D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAgBxD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,SAAS;IAgB9C,OAAO,CAAC,QAAQ,CAAC,cAAc;IAfjC,OAAgB,OAAO,WASrB;gBAGA,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACH,cAAc,EAAE,cAAc,EAC/C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK;IAKL,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,KAAK;CAS5D"}

package/dist/copy-paste/TtCopyPasteProps.d.ts

@@ -0,0 +1,6 @@
+import { default as EventBus } from 'diagram-js/lib/core/EventBus';
+export default class TtCopyPasteProps {
+    static $inject: string[];
+    constructor(eventBus: EventBus);
+}
+//# sourceMappingURL=TtCopyPasteProps.d.ts.map

package/dist/copy-paste/TtCopyPasteProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtCopyPasteProps.d.ts","sourceRoot":"","sources":["../../src/copy-paste/TtCopyPasteProps.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AAczD,MAAM,CAAC,OAAO,OAAO,gBAAgB;IACnC,MAAM,CAAC,OAAO,WAAgB;gBAElB,QAAQ,EAAE,QAAQ;CAa/B"}

package/dist/copy-paste/index.d.ts

@@ -0,0 +1,9 @@
+import { ModuleDeclaration } from 'didi';
+/**
+ * Copy-paste of Team Topologies shapes: the stock diagram-js feature (clipboard,
+ * cursor-follow placement) with `copyPaste` overridden to mint model-style ids
+ * and a listener that preserves the flat `tt*` props across the round-trip.
+ */
+export declare const ttCopyPasteModule: ModuleDeclaration;
+export { default as TtCopyPaste } from './TtCopyPaste.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/copy-paste/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/copy-paste/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAK9C;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAK/B,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/draw/styles.d.ts

@@ -1,20 +1,25 @@
-/** Shared rendering constants (typography, accent, priorities). */
+/** Shared rendering constants (typography, accent, priorities) — Miragon corporate identity.
+ *  Colours are derived from the single source of truth in `theme/palette.ts` (`MIRAGON`), which
+ *  mirrors the vendored `--cd-*` brand tokens. */
 /** BaseRenderer default priority is 1000; 1500 wins the render.shape/connection event. */
 export declare const TT_RENDER_PRIORITY = 1500;
-/** Selection / hover accent (kept in sync with the app theme). */
-export declare const ACCENT = "#4f46e5";
-export declare const INK = "#1f2430";
-export declare const INK_SOFT = "#525a6b";
+/** Selection / hover accent (Miragon blue — kept in sync with the app theme via the shared palette). */
+export declare const ACCENT: "#335DE5";
+export declare const INK: "#1D1D1D";
+export declare const INK_SOFT = "#5B5B5B";
 export declare const FONT: {
     /**
      * 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.
+     * container. Prefers the self-hosted Miragon typeface Geist (registered as
+     * 'Geist Variable' by @fontsource-variable/geist, with 'Geist' as a fallback
+     * name), and falls back to a system sans when the host hasn't loaded it (e.g.
+     * an exported SVG opened standalone).
      */
-    readonly family: "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";
+    readonly family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";
     readonly label: 13.5;
     readonly small: 11;
 };
 /** Paper colour used for the label halo so text stays legible over lines. */
-export declare const PAPER = "#ffffff";
+export declare const PAPER: "#FFFFFF";
 //# sourceMappingURL=styles.d.ts.map

package/dist/draw/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAAA,mEAAmE;AAEnE,0FAA0F;AAC1F,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC,kEAAkE;AAClE,eAAO,MAAM,MAAM,YAAY,CAAC;AAEhC,eAAO,MAAM,GAAG,YAAY,CAAC;AAC7B,eAAO,MAAM,QAAQ,YAAY,CAAC;AAElC,eAAO,MAAM,IAAI;IACf;;;;OAIG;;;;CAIK,CAAC;AAEX,6EAA6E;AAC7E,eAAO,MAAM,KAAK,YAAY,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAAA;;kDAEkD;AAIlD,0FAA0F;AAC1F,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC,wGAAwG;AACxG,eAAO,MAAM,MAAM,WAAe,CAAC;AAEnC,eAAO,MAAM,GAAG,WAAkB,CAAC;AACnC,eAAO,MAAM,QAAQ,YAAY,CAAC;AAElC,eAAO,MAAM,IAAI;IACf;;;;;;;OAOG;;;;CAKK,CAAC;AAEX,6EAA6E;AAC7E,eAAO,MAAM,KAAK,WAAgB,CAAC"}

package/dist/index.js

@@ -15,6 +15,8 @@ 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";
 //#region src/model/di-types.ts
 function _(e) {
 	return typeof e == "object" && e ? e.ttKind : void 0;
@@ -231,14 +233,37 @@ var E = class {
 			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",
+}, O = { ttElementFactory: ["type", D] }, k = {
+	blau: "#335DE5",
+	blauLink: "#2B50D4",
+	blauHell: "#6B8AFF",
+	gruen: "#00E676",
+	grau: "#F9F7F7",
+	schwarz: "#1D1D1D",
+	weiss: "#FFFFFF",
+	success: "#0B7A55",
+	warning: "#92610A",
+	danger: "#C92A2A",
+	info: "#2B50D4",
+	gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
+};
+k.blau, k.gruen, k.grau, k.schwarz, k.weiss, k.blauLink, k.blauHell, k.success, k.warning, k.danger, k.info, k.gradientBrand;
+//#endregion
+//#region src/draw/styles.ts
+var de = 1500;
+k.blau;
+var fe = k.schwarz, pe = "#5B5B5B", A = {
+	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13.5,
 	small: 11
-}, A = class extends l {
+};
+k.weiss;
+//#endregion
+//#region src/draw/TeamTopologiesRenderer.ts
+var j = class extends l {
 	static $inject = ["eventBus"];
 	constructor(e) {
-		super(e, le);
+		super(e, de);
 	}
 	canRender(e) {
 		return v(e);
@@ -273,7 +298,7 @@ var E = class {
 		if (e === "octagon") {
 			let e = Math.min(o, s) * .29;
 			return d(f("polygon"), {
-				points: fe(a, o, s, e),
+				points: me(a, o, s, e),
 				...i
 			});
 		}
@@ -318,7 +343,7 @@ var E = class {
 			});
 		}
 		return u(e, c), t.ttLabel && this.appendLabel(e, t.ttLabel, r, i, {
-			"font-size": k.small,
+			"font-size": A.small,
 			"font-weight": "600"
 		}), c;
 	}
@@ -340,21 +365,21 @@ var E = class {
 			"stroke-linejoin": "round"
 		});
 		return u(e, g), t.ttLabel && this.appendLabel(e, t.ttLabel, n - c, r, {
-			"font-size": k.small,
+			"font-size": A.small,
 			"font-weight": "650",
 			"letter-spacing": "0.06em",
-			fill: de
+			fill: pe
 		}), 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;
+		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": k.family,
+				"font-family": A.family,
 				"font-size": a,
-				fill: ue,
+				fill: fe,
 				"text-anchor": "middle",
 				"dominant-baseline": "central",
 				...i
@@ -363,7 +388,7 @@ var E = class {
 		});
 	}
 };
-function fe(e, t, n, r) {
+function me(e, t, n, r) {
 	return [
 		[e + r, e],
 		[e + t - r, e],
@@ -375,7 +400,7 @@ function fe(e, t, n, r) {
 		[e, e + r]
 	].map((e) => e.join(",")).join(" ");
 }
-function pe(e, t, n) {
+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 = "";
@@ -387,10 +412,10 @@ function pe(e, t, n) {
 }
 //#endregion
 //#region src/draw/index.ts
-var j = {
+var M = {
 	__init__: ["ttRenderer"],
-	ttRenderer: ["type", A]
-}, M = class {
+	ttRenderer: ["type", j]
+}, N = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -427,7 +452,7 @@ var j = {
 			this.canvas.removeShape(e.id);
 		} catch {}
 	}
-}, N = class {
+}, P = class {
 	elementRegistry;
 	canvas;
 	static $inject = ["elementRegistry", "canvas"];
@@ -483,18 +508,18 @@ var j = {
 			flows: i
 		};
 	}
-}, P = {
-	ttImporter: ["type", M],
-	ttExporter: ["type", N]
-}, F = class extends E {
+}, F = {
+	ttImporter: ["type", N],
+	ttExporter: ["type", P]
+}, I = class extends E {
 	_getModules() {
 		return [
 			O,
-			j,
-			P
+			M,
+			F
 		];
 	}
-}, I = class extends F {
+}, L = class extends I {
 	_getModules() {
 		return [
 			...super._getModules(),
@@ -506,28 +531,28 @@ var j = {
 };
 //#endregion
 //#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function L(e, t, n) {
+function R(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var me = class {
+var ge = 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]);
+		for (let e of Object.keys(n)) i[e] = r[e], R(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]);
+		if (n) for (let e of Object.keys(n)) R(r, e, n[e]);
 		return [t];
 	}
-}, R = "element.updateProperties", he = class {
+}, z = "element.updateProperties", B = class {
 	commandStack;
 	static $inject = ["commandStack"];
 	constructor(e) {
-		this.commandStack = e, e.registerHandler(R, me);
+		this.commandStack = e, e.registerHandler(z, ge);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(R, {
+		this.commandStack.execute(z, {
 			element: e,
 			properties: t
 		});
@@ -550,64 +575,64 @@ var me = class {
 	setDescription(e, t) {
 		this.updateProperties(e, { description: t });
 	}
-}, z = {
+}, V = {
 	__init__: ["ttModeling"],
-	ttModeling: ["type", he]
-}, B = class extends ie {
+	ttModeling: ["type", B]
+}, _e = 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);
+		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);
 	}
-}, V = {
+}, H = {
 	__depends__: [re],
 	__init__: ["ttRules"],
-	ttRules: ["type", B]
-}, H = class extends ae {
+	ttRules: ["type", _e]
+}, U = 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 = {
+}, W = {
 	__init__: ["ttFlatModelBehavior"],
-	ttFlatModelBehavior: ["type", H]
+	ttFlatModelBehavior: ["type", U]
 };
 //#endregion
 //#region src/draw/palette-icons.ts
-function W(e) {
+function G(e) {
 	return `<svg class="tt-palette-svg" width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
 }
-function G(e) {
+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}"` : "");
 	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}/>`);
+		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}/>`);
 	}
 }
-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() {
+	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 q(e) {
+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}"` : "");
 	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}/>`);
+		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}/>`);
 	}
 }
 //#endregion
 //#region src/palette/TtPaletteProvider.ts
-var ge = "tt-1-teams", _e = "tt-2-modes", ve = "tt-3-flow";
-function J(e, t) {
+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 Y = class {
+var X = class {
 	create;
 	factory;
 	static $inject = [
@@ -623,9 +648,9 @@ var Y = class {
 		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,
+				group: ve,
 				title: `${t.label} team — ${t.description}`,
-				html: J(G(t.type), `${t.label} team — ${t.description}`),
+				html: Y(K(t.type), `${t.label} team — ${t.description}`),
 				action: {
 					dragstart: n,
 					click: n
@@ -635,9 +660,9 @@ var Y = class {
 		for (let n of t) {
 			let t = (e) => this.create.start(e, this.factory.createNewInteraction(n.mode));
 			e[`mode.${n.mode}`] = {
-				group: _e,
+				group: ye,
 				title: `${n.label} — ${n.description} (place over the teams it relates to)`,
-				html: J(q(n.mode), `${n.label} — ${n.description}`),
+				html: Y(J(n.mode), `${n.label} — ${n.description}`),
 				action: {
 					dragstart: t,
 					click: t
@@ -646,29 +671,29 @@ var Y = class {
 		}
 		let r = (e) => this.create.start(e, this.factory.createNewFlow());
 		return e.flow = {
-			group: ve,
+			group: be,
 			title: `${i.label} — the implied left-to-right flow`,
-			html: J(K(), i.label),
+			html: Y(q(), i.label),
 			action: {
 				dragstart: r,
 				click: r
 			}
 		}, e;
 	}
-}, X = {
+}, Z = {
 	__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) {
+	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) {
 	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>`;
+function Q(e, t) {
+	return `<div class="entry tt-cp-entry" title="${t}">${Ce(e)}</div>`;
 }
-var Q = class {
+var $ = class {
 	modeling;
 	labelEditing;
 	static $inject = [
@@ -684,22 +709,22 @@ var Q = class {
 			"edit-label": {
 				group: "edit",
 				title: "Rename",
-				html: Z(ye, "Rename"),
+				html: Q(xe, "Rename"),
 				action: { click: () => this.labelEditing.activate(e) }
 			},
 			delete: {
 				group: "edit",
 				title: "Delete",
-				html: Z(be, "Delete"),
+				html: Q(Se, "Delete"),
 				action: { click: () => this.modeling.removeElements([e]) }
 			}
 		} : {};
 	}
-}, Se = {
+}, we = {
 	__depends__: [ce],
 	__init__: ["ttContextPadProvider"],
-	ttContextPadProvider: ["type", Q]
-}, Ce = class {
+	ttContextPadProvider: ["type", $]
+}, Te = class {
 	canvas;
 	modeling;
 	static $inject = [
@@ -738,45 +763,105 @@ var Q = class {
 	cancel() {
 		this.active?.cleanup();
 	}
-}, we = {
+}, Ee = {
 	__init__: ["ttLabelEditing"],
-	ttLabelEditing: ["type", Ce]
+	ttLabelEditing: ["type", Te]
 };
 //#endregion
 //#region src/keyboard/TtKeyboard.ts
-function Te(e) {
+function De(e) {
 	let t = e;
 	return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
 }
-var Ee = class {
+var Oe = class {
 	static $inject = [
 		"canvas",
 		"commandStack",
 		"selection",
-		"modeling"
+		"modeling",
+		"copyPaste"
 	];
-	constructor(e, t, n, r) {
+	constructor(e, t, n, r, i) {
 		(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") {
+			if (De(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());
 		});
 	}
-}, De = {
+}, ke = {
 	__init__: ["ttKeyboard"],
-	ttKeyboard: ["type", Ee]
+	ttKeyboard: ["type", Oe]
+};
+//#endregion
+//#region src/copy-paste/TtCopyPaste.ts
+function Ae(e) {
+	switch (e) {
+		case "team": return "team";
+		case "interaction": return "int";
+		case "flow": return "flow";
+		default: return;
+	}
+}
+var je = class extends ue {
+	elementFactory;
+	static $inject = [
+		"canvas",
+		"create",
+		"clipboard",
+		"elementFactory",
+		"eventBus",
+		"modeling",
+		"mouse",
+		"rules"
+	];
+	constructor(e, t, n, r, i, a, o, s) {
+		super(e, t, n, r, i, a, o, s), this.elementFactory = r;
+	}
+	createShape(e) {
+		let t = Ae(e.ttKind);
+		return t ? this.elementFactory.createShape({
+			...e,
+			id: c(t)
+		}) : super.createShape(e);
+	}
+}, Me = [
+	"ttKind",
+	"teamType",
+	"mode",
+	"ttLabel",
+	"description",
+	"fill",
+	"stroke"
+], Ne = {
+	__depends__: [le],
+	__init__: ["ttCopyPasteProps"],
+	copyPaste: ["type", je],
+	ttCopyPasteProps: ["type", class {
+		static $inject = ["eventBus"];
+		constructor(e) {
+			e.on("copyPaste.copyElement", (e) => {
+				let { descriptor: t, element: n } = e;
+				if (!v(n)) return;
+				let r = n;
+				for (let e of Me) r[e] !== void 0 && (t[e] = r[e]);
+			});
+		}
+	}]
 };
 //#endregion
 //#region src/zorder/TtZOrder.ts
-function Oe(e) {
+function Pe(e) {
 	return x(e) ? 0 : y(e) ? e.teamType === "enabling" ? 3 : e.teamType === "complicated-subsystem" ? 2 : 1 : b(e) ? 4 : 1;
 }
-var ke = class {
+var Fe = class {
 	canvas;
 	elementRegistry;
 	static $inject = [
@@ -795,16 +880,16 @@ var ke = class {
 		});
 	}
 	reorder() {
-		let e = this.elementRegistry.getAll().filter(v).sort((e, t) => Oe(e) - Oe(t));
+		let e = this.elementRegistry.getAll().filter(v).sort((e, t) => Pe(e) - Pe(t));
 		for (let t of e) {
 			let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
 			e && n && n.appendChild(e);
 		}
 	}
-}, $ = {
+}, Ie = {
 	__init__: ["ttZOrder"],
-	ttZOrder: ["type", ke]
-}, Ae = class extends I {
+	ttZOrder: ["type", Fe]
+}, Le = class extends L {
 	_getModules() {
 		return [
 			...super._getModules(),
@@ -812,14 +897,15 @@ var ke = class {
 			ee,
 			te,
 			ne,
-			z,
 			V,
-			U,
-			X,
-			Se,
+			H,
+			W,
+			Z,
 			we,
-			De,
-			$
+			Ee,
+			ke,
+			Ne,
+			Ie
 		];
 	}
 	undo() {
@@ -836,6 +922,6 @@ var ke = class {
 	}
 };
 //#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 };
+export { Le as Modeler, L as NavigatedViewer, w as ROOT_ID, j as TeamTopologiesRenderer, E as TtBaseViewer, $ as TtContextPadProvider, D as TtElementFactory, P as TtExporter, U as TtFlatModelBehavior, N as TtImporter, Oe as TtKeyboard, Te as TtLabelEditing, B as TtModeling, X as TtPaletteProvider, _e as TtRules, Fe 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, W as ttBehaviorsModule, we as ttContextPadModule, M as ttDrawModule, ke as ttKeyboardModule, Ee as ttLabelEditingModule, O as ttModelModule, V as ttModelingModule, Z as ttPaletteModule, H as ttRulesModule, Ie as ttZOrderModule };
 
 //# sourceMappingURL=index.js.map