@miragon/wardley-renderer 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,46 +1,49 @@
 import e from "diagram-js/lib/Diagram";
-import { parseDSL as t, serializeDSL as n } from "@miragon/wardley-dsl";
-import { append as r, attr as i, clear as a, create as o } from "tiny-svg";
-import { CURRENT_SCHEMA_VERSION as s, DEFAULT_EVOLUTION_LABELS as c, DEFAULT_STAGE_BOUNDARIES as l, evolutionStage as u, validateMap as d } from "@miragon/wardley-schema-model";
-import f from "diagram-js/lib/command/CommandInterceptor";
-import ee from "diagram-js/lib/draw/BaseRenderer";
-import te from "diagram-js/lib/features/selection";
-import ne from "diagram-js/lib/navigation/zoomscroll";
-import re from "diagram-js/lib/navigation/movecanvas";
-import ie from "diagram-js/lib/features/keyboard";
-import ae from "diagram-js/lib/features/modeling";
-import oe from "diagram-js/lib/features/move";
-import se from "diagram-js/lib/features/create";
-import ce from "diagram-js/lib/features/connect";
-import le from "diagram-js/lib/features/context-pad";
-import ue from "diagram-js/lib/features/palette";
-import de from "diagram-js/lib/features/rules";
-import fe from "diagram-js/lib/features/outline";
-import pe from "diagram-js/lib/features/resize";
-import me from "diagram-js/lib/features/popup-menu";
-import he from "diagram-js/lib/features/rules/RuleProvider";
-import ge from "diagram-js/lib/features/connection-preview";
+import { parseDSLWithDiagnostics as t, serializeDSL as n } from "@miragon/wardley-dsl";
+import { CURRENT_SCHEMA_VERSION as r, DEFAULT_EVOLUTION_LABELS as i, DEFAULT_PLOT_SIZE as a, DEFAULT_STAGE_BOUNDARIES as o, evolutionStage as s, validateMap as c } from "@miragon/wardley-schema-model";
+import { append as l, attr as u, clear as d, create as f, remove as p } from "tiny-svg";
+import ee from "diagram-js/lib/command/CommandInterceptor";
+import te from "diagram-js/lib/draw/BaseRenderer";
+import ne from "diagram-js/lib/features/selection";
+import re from "diagram-js/lib/navigation/zoomscroll";
+import ie from "diagram-js/lib/navigation/movecanvas";
+import ae from "diagram-js/lib/features/keyboard";
+import oe from "diagram-js/lib/features/modeling";
+import se from "diagram-js/lib/features/move";
+import ce from "diagram-js/lib/features/create";
+import le from "diagram-js/lib/features/connect";
+import ue from "diagram-js/lib/features/context-pad";
+import de from "diagram-js/lib/features/palette";
+import fe from "diagram-js/lib/features/rules";
+import pe from "diagram-js/lib/features/outline";
+import me from "diagram-js/lib/features/resize";
+import he from "diagram-js/lib/features/popup-menu";
+import ge from "diagram-js/lib/features/mouse";
+import _e from "diagram-js/lib/features/lasso-tool";
+import ve from "diagram-js/lib/features/rules/RuleProvider";
+import ye from "diagram-js/lib/features/connection-preview";
+import be from "diagram-js/lib/features/ordering/OrderingProvider";
 //#region src/draw/styles.ts
-var p = {
-	width: 1080,
-	height: 680,
+var m = {
+	width: a.width,
+	height: a.height,
 	marginLeft: 66,
 	marginTop: 38,
 	marginRight: 44,
 	marginBottom: 58
-}, _e = {
+}, xe = {
 	width: 480,
 	height: 320
-}, ve = 8, ye = 6, be = 7.5;
-function m(e) {
+}, Se = 8, Ce = 6, we = 7.5;
+function h(e) {
 	let t = (e && e.length ? e : "note").split("\n"), n = Math.max(1, ...t.map((e) => e.length));
 	return {
 		lines: t,
-		width: Math.max(34, Math.round(n * be) + ve * 2),
-		height: Math.max(34, t.length * 17 + ye * 2)
+		width: Math.max(34, Math.round(n * we) + Se * 2),
+		height: Math.max(34, t.length * 17 + Ce * 2)
 	};
 }
-var h = {
+var g = {
 	paper: "#fbfaf7",
 	ink: "#1b1b1a",
 	inkSoft: "#3a3a37",
@@ -58,8 +61,12 @@ var h = {
 	movement: "#bf2f2a",
 	inertia: "#1b1b1a",
 	noteText: "#4a4640",
-	pipeline: "#1b1b1a"
-}, xe = [
+	pipeline: "#1b1b1a",
+	annotationFill: "#fff8e6",
+	plotBackground: "#ffffff",
+	accelerator: "#0e7c74",
+	deaccelerator: "#bf2f2a"
+}, Te = [
 	{
 		id: "green",
 		name: "Green · good",
@@ -100,7 +107,7 @@ var h = {
 		name: "Slate · neutral",
 		value: "#475569"
 	}
-], Se = {
+], _ = {
 	pioneers: {
 		fill: "rgba(14,124,116,0.07)",
 		stroke: "#0e7c74"
@@ -113,7 +120,7 @@ var h = {
 		fill: "rgba(120,53,170,0.07)",
 		stroke: "#7835aa"
 	}
-}, g = {
+}, v = {
 	family: "'Spline Sans Variable', 'Spline Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
 	label: 13,
 	axis: 12,
@@ -121,23 +128,28 @@ var h = {
 };
 //#endregion
 //#region src/io/saveSvg.ts
-function Ce(e) {
-	let t = e.getContainer().querySelector("svg");
-	if (!t) throw Error("No SVG found in the canvas container.");
-	let n = t.cloneNode(!0), r = p.marginLeft + p.width + p.marginRight, i = p.marginTop + p.height + p.marginBottom;
-	n.setAttribute("xmlns", "http://www.w3.org/2000/svg"), n.setAttribute("viewBox", `0 0 ${r} ${i}`), n.setAttribute("width", String(r)), n.setAttribute("height", String(i));
-	let a = n.querySelector(".viewport");
-	return a && a.removeAttribute("transform"), { svg: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + new XMLSerializer().serializeToString(n) };
+function Ee(e, t) {
+	let n = e.getContainer().querySelector("svg");
+	if (!n) throw Error("No SVG found in the canvas container.");
+	let r = n.cloneNode(!0), i = t ?? {
+		x: 0,
+		y: 0,
+		width: m.marginLeft + m.width + m.marginRight,
+		height: m.marginTop + m.height + m.marginBottom
+	};
+	r.setAttribute("xmlns", "http://www.w3.org/2000/svg"), r.setAttribute("viewBox", `${i.x} ${i.y} ${i.width} ${i.height}`), r.setAttribute("width", String(i.width)), r.setAttribute("height", String(i.height));
+	let a = r.querySelector(".viewport");
+	return a && a.removeAttribute("transform"), { svg: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + new XMLSerializer().serializeToString(r) };
 }
 //#endregion
 //#region src/io/types.ts
-var we = "wardley-root";
+var De = "wardley-root";
 //#endregion
 //#region src/WardleyBaseViewer.ts
-function Te(e) {
+function Oe(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-var Ee = class {
+var ke = class {
 	_diagram;
 	_container;
 	_options;
@@ -146,7 +158,7 @@ var Ee = class {
 	}
 	_createContainer(e) {
 		let t = e.container ?? document.createElement("div");
-		return t.classList.add("wardley-container"), t.style.width = Te(e.width ?? "100%"), t.style.height = Te(e.height ?? (e.container ? "100%" : "600px")), t;
+		return t.classList.add("wardley-container"), t.style.width = Oe(e.width ?? "100%"), t.style.height = Oe(e.height ?? (e.container ? "100%" : "600px")), t;
 	}
 	_ensureDiagram() {
 		if (!this._diagram) {
@@ -171,13 +183,28 @@ var Ee = class {
 		let t = this._ensureDiagram(), n = t.get("eventBus"), r = t.get("wardleyImporter");
 		r.clear();
 		let i = r.import(e);
-		return n.fire("import.done", { warnings: i }), { warnings: i };
+		return this._applyStyleClass(e.config.style), t.get("commandStack").clear(), n.fire("import.done", { warnings: i }), { warnings: i };
+	}
+	_applyStyleClass(e) {
+		let t = this._container.classList;
+		for (let e of [
+			"wardley",
+			"handwritten",
+			"colour",
+			"dark"
+		]) t.remove(`wardley-${e}`);
+		e && e !== "wardley" && t.add(`wardley-${e}`);
 	}
 	async importDSL(e) {
 		let n = this._ensureDiagram().get("eventBus");
 		n.fire("import.parse.start", { text: e });
-		let r = t(e);
-		return n.fire("import.parse.done", { map: r }), this.importMap(r);
+		let { map: r, diagnostics: i } = t(e);
+		n.fire("import.parse.done", {
+			map: r,
+			diagnostics: i
+		});
+		let { warnings: a } = await this.importMap(r);
+		return { warnings: [...i.map((e) => ({ message: `Line ${e.line}: ${e.message} — "${e.text}"` })), ...a] };
 	}
 	exportMap() {
 		return this.get("wardleyExporter").export();
@@ -218,7 +245,7 @@ var Ee = class {
 		return n(this.exportMap());
 	}
 	async saveSVG() {
-		return Ce(this.get("canvas"));
+		return Ee(this.get("canvas"), this.get("evolutionGrid").outerBounds());
 	}
 	attachTo(e) {
 		e.appendChild(this._container), this.get("canvas").resized();
@@ -235,7 +262,7 @@ var Ee = class {
 	get container() {
 		return this._container;
 	}
-}, _ = class {
+}, Ae = class {
 	elementFactory;
 	grid;
 	elementRegistry;
@@ -259,17 +286,28 @@ var Ee = class {
 		for (; n.has(`${e} ${r}`);) r++;
 		return `${e} ${r}`;
 	}
+	nextAnnotationNumber() {
+		let e = 0;
+		for (let t of this.elementRegistry.getAll()) {
+			let n = t.annotationNumber;
+			typeof n == "number" && n > e && (e = n);
+		}
+		return e + 1;
+	}
 	createComponent(e) {
-		return this.node("component", e.id, e.label, e.position.visibility, e.position.evolution, e, {
+		let t = this.node("component", e.id, e.label, e.position.visibility, e.position.evolution, e, {
 			...e.decorators ? { decorators: e.decorators } : {},
-			...e.movement ? { movement: e.movement } : {}
+			...e.movement ? { movement: e.movement } : {},
+			...e.labelOffset ? { labelOffset: e.labelOffset } : {},
+			...e.pipelineId ? { pipelineId: e.pipelineId } : {}
 		});
+		return e.pipelineId && (t.y += 30 / 2), t;
 	}
 	createAnchor(e) {
-		return this.node("anchor", e.id, e.label, e.position.visibility, e.position.evolution, e);
+		return this.node("anchor", e.id, e.label, e.position.visibility, e.position.evolution, e, { ...e.labelOffset ? { labelOffset: e.labelOffset } : {} });
 	}
 	createNote(e) {
-		let { width: t, height: n } = m(e.label), r = this.grid.toCanvas(e.position);
+		let { width: t, height: n } = h(e.label), r = this.grid.toCanvas(e.position);
 		return this.elementFactory.createShape({
 			id: e.id,
 			x: r.x - t / 2,
@@ -295,7 +333,7 @@ var Ee = class {
 		return this.elementFactory.createShape({
 			id: e.id,
 			x: t.x,
-			y: t.y - 30 / 2,
+			y: t.y,
 			width: r,
 			height: 30,
 			wardleyType: "pipeline",
@@ -305,7 +343,8 @@ var Ee = class {
 			evolutionStart: e.evolutionStart,
 			evolutionEnd: e.evolutionEnd,
 			isFrame: !0,
-			businessObject: e
+			businessObject: e,
+			...e.color ? { color: e.color } : {}
 		});
 	}
 	createAnnotation(e) {
@@ -316,25 +355,59 @@ var Ee = class {
 		return this.node("accelerator", e.id, e.label, e.position.visibility, e.position.evolution, e, { acceleratorDirection: e.direction });
 	}
 	createAttitude(e) {
-		let t = this.grid.toCanvas(e.position);
+		let t = this.grid.toCanvas(e.position), n = this.grid.toCanvas(e.corner2), r = Math.min(t.x, n.x), i = Math.min(t.y, n.y);
 		return this.elementFactory.createShape({
 			id: e.id,
-			x: t.x,
-			y: t.y,
-			width: Math.max(e.width, 4),
-			height: Math.max(e.height, 4),
+			x: r,
+			y: i,
+			width: Math.max(Math.abs(n.x - t.x), 4),
+			height: Math.max(Math.abs(n.y - t.y), 4),
 			wardleyType: "attitude",
 			wardleyLabel: e.label || e.kind,
 			attitudeKind: e.kind,
 			evolution: e.position.evolution,
 			visibility: e.position.visibility,
+			corner2: e.corner2,
 			isFrame: !0,
-			businessObject: e
+			businessObject: e,
+			...e.color ? { color: e.color } : {}
 		});
 	}
 	createSubmap(e) {
 		return this.node("submap", e.id, e.label, e.position.visibility, e.position.evolution, e);
 	}
+	createDrawing(e) {
+		let t = e.points.map((e) => this.grid.toCanvas(e));
+		return this.drawingFromCanvasPoints(t, {
+			id: e.id,
+			...e.closed ? { closed: !0 } : {},
+			...e.strokeStyle ? { strokeStyle: e.strokeStyle } : {},
+			...e.color ? { color: e.color } : {},
+			businessObject: e
+		});
+	}
+	drawingFromCanvasPoints(e, t = {}) {
+		let n = e.map((e) => e.x), r = e.map((e) => e.y), i = Math.min(...n), a = Math.min(...r), o = Math.max(Math.max(...n) - i, 4), s = Math.max(Math.max(...r) - a, 4), c = e[0], l = this.grid.fromCanvas(c);
+		return this.elementFactory.createShape({
+			...t.id ? { id: t.id } : {},
+			x: i,
+			y: a,
+			width: o,
+			height: s,
+			wardleyType: "drawing",
+			wardleyLabel: "",
+			evolution: l.evolution,
+			visibility: l.visibility,
+			drawingPoints: e.map((e) => ({
+				x: e.x - i,
+				y: e.y - a
+			})),
+			...t.closed ? { closed: !0 } : {},
+			...t.strokeStyle ? { strokeStyle: t.strokeStyle } : {},
+			...t.color ? { color: t.color } : {},
+			...t.businessObject ? { businessObject: t.businessObject } : {}
+		});
+	}
 	createNew(e, t, n = {}) {
 		let r = this.uniqueLabel(t);
 		if (e === "pipeline") return this.elementFactory.createShape({
@@ -359,7 +432,7 @@ var Ee = class {
 			isFrame: !0
 		});
 		if (e === "note") {
-			let { width: e, height: t } = m(r);
+			let { width: e, height: t } = h(r);
 			return this.elementFactory.createShape({
 				width: e,
 				height: t,
@@ -369,7 +442,7 @@ var Ee = class {
 				visibility: .5
 			});
 		}
-		let i = n.market ? { market: !0 } : n.ecosystem ? { ecosystem: !0 } : void 0;
+		let i = n.market ? { market: !0 } : n.ecosystem ? { ecosystem: !0 } : void 0, a = e === "annotation" ? n.annotationNumber ?? this.nextAnnotationNumber() : void 0;
 		return this.elementFactory.createShape({
 			width: 34,
 			height: 34,
@@ -378,7 +451,7 @@ var Ee = class {
 			evolution: .5,
 			visibility: .5,
 			...n.acceleratorDirection ? { acceleratorDirection: n.acceleratorDirection } : {},
-			...n.annotationNumber === void 0 ? {} : { annotationNumber: n.annotationNumber },
+			...a === void 0 ? {} : { annotationNumber: a },
 			...i ? { decorators: i } : {}
 		});
 	}
@@ -393,7 +466,7 @@ var Ee = class {
 		let s = this.grid.toCanvas({
 			visibility: r,
 			evolution: i
-		});
+		}), c = a?.color;
 		return this.elementFactory.createShape({
 			id: t,
 			x: s.x - 34 / 2,
@@ -405,6 +478,7 @@ var Ee = class {
 			evolution: i,
 			visibility: r,
 			businessObject: a,
+			...c ? { color: c } : {},
 			...o
 		});
 	}
@@ -414,7 +488,7 @@ var Ee = class {
 			id: t.id,
 			source: n,
 			target: r,
-			waypoints: [v(n), v(r)],
+			waypoints: [je(n), je(r)],
 			wardleyType: e,
 			bidirectional: i,
 			...a ? { flowValue: a } : {},
@@ -423,63 +497,70 @@ var Ee = class {
 		});
 	}
 };
-function v(e) {
-	return {
+function je(e) {
+	return e.wardleyType === "pipeline" ? {
+		x: e.x + e.width / 2,
+		y: e.y
+	} : {
 		x: e.x + e.width / 2,
 		y: e.y + e.height / 2
 	};
 }
 //#endregion
 //#region src/model/di-types.ts
-function y(e) {
+function Me(e) {
 	return typeof e == "object" && !!e;
 }
+function y(e) {
+	return Me(e) && typeof e.wardleyType == "string" && "evolution" in e;
+}
 function b(e) {
-	return y(e) && typeof e.wardleyType == "string" && "evolution" in e;
+	return Me(e) && typeof e.wardleyType == "string" && "waypoints" in e;
 }
-function x(e) {
-	return y(e) && typeof e.wardleyType == "string" && "waypoints" in e;
+function Ne(e) {
+	return y(e) && e.wardleyType === "component";
 }
-function S(e) {
-	return b(e) && e.wardleyType === "component";
+function x(e) {
+	return y(e) && e.wardleyType === "pipeline";
 }
-function C(e) {
-	return b(e) && e.wardleyType === "pipeline";
+function Pe(e) {
+	return y(e) && e.wardleyType === "attitude";
 }
 //#endregion
 //#region src/model/index.ts
-var w = { wardleyElementFactory: ["type", _] }, De = "wardley-axes";
-function T(e) {
+var Fe = { wardleyElementFactory: ["type", Ae] }, Ie = "wardley-axes";
+function Le(e) {
 	return e < 0 ? 0 : e > 1 ? 1 : e;
 }
-var E = class {
+var Re = class {
 	canvas;
 	static $inject = ["canvas"];
-	boundaries = l;
-	labels = c;
+	boundaries = o;
+	labels = i;
 	yAxisLabel = "Value Chain";
-	plotWidth = p.width;
-	plotHeight = p.height;
+	yAxisEndLabels = ["invisible", "visible"];
+	plotWidth = m.width;
+	plotHeight = m.height;
 	constructor(e) {
 		this.canvas = e;
 	}
 	configure(e) {
-		this.boundaries = e.stageBoundaries ?? l, this.labels = e.evolutionLabels ?? c, this.yAxisLabel = e.yAxisLabel ?? "Value Chain", this.plotWidth = Math.max(e.size?.width ?? p.width, _e.width), this.plotHeight = Math.max(e.size?.height ?? p.height, _e.height);
+		this.boundaries = e.stageBoundaries ?? o, this.labels = e.evolutionLabels ?? i, this.yAxisLabel = e.yAxisLabel ?? "Value Chain", this.yAxisEndLabels = e.yAxisEndLabels ?? ["invisible", "visible"], this.plotWidth = Math.max(e.size?.width ?? m.width, xe.width), this.plotHeight = Math.max(e.size?.height ?? m.height, xe.height);
 	}
 	toCanvas(e) {
 		return {
-			x: p.marginLeft + e.evolution * this.plotWidth,
-			y: p.marginTop + (1 - e.visibility) * this.plotHeight
+			x: m.marginLeft + e.evolution * this.plotWidth,
+			y: m.marginTop + (1 - e.visibility) * this.plotHeight
 		};
 	}
 	fromCanvas(e) {
 		return {
-			evolution: T((e.x - p.marginLeft) / this.plotWidth),
-			visibility: T(1 - (e.y - p.marginTop) / this.plotHeight)
+			evolution: Le((e.x - m.marginLeft) / this.plotWidth),
+			visibility: Le(1 - (e.y - m.marginTop) / this.plotHeight)
 		};
 	}
 	stageOf(e) {
-		return u(e, this.boundaries);
+		return s(e, this.boundaries);
 	}
 	getBoundaries() {
 		return this.boundaries;
@@ -494,114 +575,136 @@ var E = class {
 		return {
 			x: 0,
 			y: 0,
-			width: p.marginLeft + this.plotWidth + p.marginRight,
-			height: p.marginTop + this.plotHeight + p.marginBottom
+			width: m.marginLeft + this.plotWidth + m.marginRight,
+			height: m.marginTop + this.plotHeight + m.marginBottom
 		};
 	}
 	render() {
-		let e = this.canvas.getLayer(De, -1);
-		a(e);
-		let t = p.marginLeft, n = p.marginTop, o = t + this.plotWidth, s = n + this.plotHeight;
-		r(e, D(t, n, this.plotWidth, this.plotHeight, {
-			fill: "#ffffff",
-			stroke: h.grid
+		let e = this.canvas.getLayer(Ie, -1);
+		d(e);
+		let t = m.marginLeft, n = m.marginTop, r = t + this.plotWidth, i = n + this.plotHeight;
+		l(e, ze(t, n, this.plotWidth, this.plotHeight, {
+			fill: g.plotBackground,
+			stroke: g.grid
 		}));
-		let c = [
+		let a = [
 			0,
 			...this.boundaries,
 			1
 		];
-		for (let i = 0; i < 4; i++) {
-			let a = t + c[i] * this.plotWidth, o = t + c[i + 1] * this.plotWidth;
-			i % 2 == 1 && r(e, D(a, n, o - a, this.plotHeight, {
-				fill: h.band,
+		for (let r = 0; r < 4; r++) {
+			let o = t + a[r] * this.plotWidth, s = t + a[r + 1] * this.plotWidth;
+			r % 2 == 1 && l(e, ze(o, n, s - o, this.plotHeight, {
+				fill: g.band,
 				stroke: "none"
-			})), i > 0 && r(e, O(a, n, a, s, {
-				stroke: h.grid,
+			})), r > 0 && l(e, S(o, n, o, i, {
+				stroke: g.grid,
 				"stroke-dasharray": "3 5"
 			}));
-			let l = (a + o) / 2;
-			r(e, k(this.labels[i].toUpperCase(), l, s + 18, {
+			let c = (o + s) / 2;
+			l(e, C(this.labels[r].toUpperCase(), c, i + 18, {
 				"text-anchor": "middle",
-				"font-size": g.stage,
+				"font-size": v.stage,
 				"letter-spacing": "0.08em",
-				fill: h.axisText
+				fill: g.axisText
 			}));
 		}
-		r(e, O(t, s, o + 10, s, { stroke: h.axis })), r(e, A(o + 10, s, "right")), r(e, k("Evolution", o + 6, s + 38, {
+		l(e, S(t, i, r + 10, i, { stroke: g.axis })), l(e, Be(r + 10, i, "right")), l(e, C("Evolution", r + 6, i + 38, {
 			"text-anchor": "end",
-			"font-size": g.axis,
-			fill: h.axisText,
+			"font-size": v.axis,
+			fill: g.axisText,
 			"font-style": "italic"
-		})), r(e, O(t, s, t, n - 10, { stroke: h.axis })), r(e, A(t, n - 10, "up"));
-		let l = k(this.yAxisLabel, 0, 0, {
+		})), l(e, S(t, i, t, n - 10, { stroke: g.axis })), l(e, Be(t, n - 10, "up"));
+		let o = C(this.yAxisLabel, 0, 0, {
 			"text-anchor": "middle",
-			"font-size": g.axis,
-			fill: h.axisText,
+			"font-size": v.axis,
+			fill: g.axisText,
 			"font-style": "italic"
 		});
-		i(l, { transform: `translate(${t - 46}, ${(n + s) / 2}) rotate(-90)` }), r(e, l), r(e, k("visible", t - 10, n + 11, {
+		u(o, { transform: `translate(${t - 46}, ${(n + i) / 2}) rotate(-90)` }), l(e, o), l(e, C(this.yAxisEndLabels[1], t - 10, n + 11, {
 			"text-anchor": "end",
-			"font-size": g.stage,
-			fill: h.axisText
-		})), r(e, k("invisible", t - 10, s - 2, {
+			"font-size": v.stage,
+			fill: g.axisText
+		})), l(e, C(this.yAxisEndLabels[0], t - 10, i - 2, {
 			"text-anchor": "end",
-			"font-size": g.stage,
-			fill: h.axisText
+			"font-size": v.stage,
+			fill: g.axisText
 		}));
 	}
 };
-function D(e, t, n, r, a) {
-	return i(o("rect"), {
+function ze(e, t, n, r, i) {
+	return u(f("rect"), {
 		x: e,
 		y: t,
 		width: n,
 		height: r,
 		"stroke-width": 1,
-		...a
+		...i
 	});
 }
-function O(e, t, n, r, a) {
-	return i(o("line"), {
+function S(e, t, n, r, i) {
+	return u(f("line"), {
 		x1: e,
 		y1: t,
 		x2: n,
 		y2: r,
 		"stroke-width": 1,
-		...a
+		...i
 	});
 }
-function k(e, t, n, r) {
-	let a = i(o("text"), {
+function C(e, t, n, r) {
+	let i = u(f("text"), {
 		x: t,
 		y: n,
-		"font-family": g.family,
+		"font-family": v.family,
 		...r
 	});
-	return a.textContent = e, a;
+	return i.textContent = e, i;
 }
-function A(e, t, n) {
+function Be(e, t, n) {
 	let r = n === "right" ? `${e - 5},${t - 5} ${e + 2},${t} ${e - 5},${t + 5}` : `${e - 5},${t + 5} ${e},${t - 2} ${e + 5},${t + 5}`;
-	return i(o("polygon"), {
+	return u(f("polygon"), {
 		points: r,
-		fill: h.axis
+		fill: g.axis
 	});
 }
 //#endregion
 //#region src/evolution-grid/EvolutionConstraintBehavior.ts
-var j = [
+var w = [
 	"shape.move",
 	"shape.create",
 	"shape.resize",
 	"elements.move",
 	"elements.create"
-], Oe = class extends f {
+], Ve = class extends ee {
+	eventBus;
 	grid;
-	static $inject = ["eventBus", "evolutionGrid"];
-	constructor(e, t) {
-		super(e), this.grid = t;
-		let n = (e) => this.syncAll(e.context);
-		this.postExecuted(j, n), this.reverted(j, n);
+	elementRegistry;
+	static $inject = [
+		"eventBus",
+		"evolutionGrid",
+		"elementRegistry"
+	];
+	constructor(e, t, n) {
+		super(e), this.eventBus = e, this.grid = t, this.elementRegistry = n;
+		let r = (e) => this.syncAll(e.context);
+		this.postExecuted(w, r), this.reverted(w, r);
+		let i = (e) => {
+			if ([
+				e.context?.shape,
+				e.context?.element,
+				...e.context?.elements ?? []
+			].some((e) => y(e) && e.wardleyType === "component")) for (let e of this.elementRegistry.filter((e) => x(e))) this.eventBus.fire("element.changed", { element: e });
+		};
+		this.postExecuted([
+			"shape.create",
+			"shape.delete",
+			"element.updateProperties"
+		], i), this.reverted([
+			"shape.create",
+			"shape.delete",
+			"element.updateProperties"
+		], i);
 	}
 	syncAll(e) {
 		if (!e) return;
@@ -610,27 +713,40 @@ var j = [
 			...e.shapes ?? [],
 			...e.elements ?? []
 		];
-		for (let e of t) b(e) && this.syncFromGeometry(e);
+		for (let e of t) y(e) && this.syncFromGeometry(e);
 	}
 	syncFromGeometry(e) {
 		let t = e.y + e.height / 2;
 		if (e.wardleyType === "pipeline") {
-			let n = this.grid.fromCanvas({
+			let t = e.y, n = this.grid.fromCanvas({
 				x: e.x,
 				y: t
 			}), r = this.grid.fromCanvas({
 				x: e.x + e.width,
 				y: t
+			}), [i, a] = We(n.evolution, r.evolution);
+			e.evolutionStart = i, e.evolutionEnd = a, e.evolution = Ue((i + a) / 2), e.visibility = n.visibility;
+			let o = this.grid.toCanvas({
+				visibility: e.visibility,
+				evolution: i
+			}), s = this.grid.toCanvas({
+				visibility: e.visibility,
+				evolution: a
 			});
-			e.evolutionStart = n.evolution, e.evolutionEnd = Math.max(r.evolution, n.evolution + .001), e.evolution = (e.evolutionStart + e.evolutionEnd) / 2, e.visibility = n.visibility;
+			this.applyGeometry(e, o.x, o.y, Math.max(s.x - o.x, 2)), this.reconcileMembership(e);
 			return;
 		}
 		if (e.wardleyType === "attitude") {
 			let t = this.grid.fromCanvas({
 				x: e.x,
 				y: e.y
+			}), n = this.grid.fromCanvas({
+				x: e.x + e.width,
+				y: e.y + e.height
 			});
-			e.evolution = t.evolution, e.visibility = t.visibility;
+			e.evolution = t.evolution, e.visibility = t.visibility, e.corner2 = n;
+			let r = this.grid.toCanvas(t), i = this.grid.toCanvas(n);
+			this.applyGeometry(e, r.x, r.y, Math.max(i.x - r.x, 4), Math.max(i.y - r.y, 4));
 			return;
 		}
 		let n = this.grid.fromCanvas({
@@ -638,33 +754,80 @@ var j = [
 			y: t
 		});
 		e.evolution = n.evolution, e.visibility = n.visibility;
+		let r = this.grid.toCanvas(n);
+		this.applyGeometry(e, r.x - e.width / 2, r.y - e.height / 2), e.wardleyType === "component" && this.updateMembership(e);
+	}
+	applyGeometry(e, t, n, r, i) {
+		(Math.abs(t - e.x) > .5 || Math.abs(n - e.y) > .5 || r !== void 0 && Math.abs(r - e.width) > .5 || i !== void 0 && Math.abs(i - e.height) > .5) && (e.x = t, e.y = n, r !== void 0 && (e.width = r), i !== void 0 && (e.height = i), this.fireChanged(e));
+	}
+	updateMembership(e) {
+		let t = e.x + e.width / 2, n = e.y + e.height / 2, r = this.elementRegistry.filter((e) => x(e)).find((r) => r.wardleyLabel !== e.wardleyLabel && t >= r.x && t <= r.x + r.width && n >= r.y && n <= r.y + r.height);
+		r ? (e.pipelineId = r.id, this.glueToPipeline(e, r)) : e.pipelineId && delete e.pipelineId;
+	}
+	glueToPipeline(e, t) {
+		e.y = t.y + t.height / 2 - e.height / 2, e.visibility = t.visibility, this.fireChanged(e);
+	}
+	reconcileMembership(e) {
+		let t = this.elementRegistry.filter((e) => y(e) && e.wardleyType === "component");
+		for (let n of t) {
+			if (n.wardleyLabel === e.wardleyLabel) continue;
+			let t = n.x + n.width / 2, r = n.y + n.height / 2, i = t >= e.x && t <= e.x + e.width && r >= e.y && r <= e.y + e.height;
+			if (i && n.pipelineId !== e.id) n.pipelineId = e.id, n.visibility = e.visibility, this.fireChanged(n);
+			else if (!i && n.pipelineId === e.id) {
+				delete n.pipelineId;
+				let e = this.grid.fromCanvas({
+					x: t,
+					y: r
+				});
+				n.evolution = e.evolution, n.visibility = e.visibility, this.fireChanged(n);
+			}
+		}
 	}
-}, M = { evolutionGrid: ["type", E] }, ke = {
+	fireChanged(e) {
+		this.eventBus.fire("element.changed", { element: e });
+		for (let t of [...e.incoming ?? [], ...e.outgoing ?? []]) this.eventBus.fire("element.changed", { element: t });
+	}
+}, He = .001;
+function Ue(e) {
+	return e < 0 ? 0 : e > 1 ? 1 : e;
+}
+function We(e, t) {
+	let n = Ue(Math.max(t, e + He));
+	return [Math.max(0, Math.min(e, n - He)), n];
+}
+//#endregion
+//#region src/evolution-grid/index.ts
+var T = { evolutionGrid: ["type", Re] }, Ge = {
 	__init__: ["evolutionConstraintBehavior"],
-	__depends__: [M],
-	evolutionConstraintBehavior: ["type", Oe]
-}, N = "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z", Ae = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z", je = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z", Me = "M15.5 5H11l5 7-5 7h4.5l5-7zM8.5 5H4l5 7-5 7h4.5l5-7z", Ne = "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.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z", P = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", Pe = "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z", Fe = "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z", Ie = "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z", Le = "M4 7v2c0 .55-.45 1-1 1H2v2h1c.55 0 1 .45 1 1v2c0 1.65 1.35 3 3 3h1v-2H7c-.55 0-1-.45-1-1v-2c0-.84-.35-1.61-.92-2.18L4.85 12l.23-.82C5.65 10.61 6 9.84 6 9V7c0-.55.45-1 1-1h1V4H7C5.35 4 4 5.35 4 7zm16 3c-.55 0-1-.45-1-1V7c0-1.65-1.35-3-3-3h-1v2h1c.55 0 1 .45 1 1v2c0 .84.35 1.61.92 2.18l.23.82-.23.82c-.57.57-.92 1.34-.92 2.18v2c0 .55-.45 1-1 1h-1v2h1c1.65 0 3-1.35 3-3v-2c0-.55.45-1 1-1h1v-2h-1z", Re = "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z", ze = "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z", Be = "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z", Ve = "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z", He = "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z", Ue = "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z", We = "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z", Ge = "M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.61-.23-1.2-.64-1.67-.08-.1-.13-.21-.13-.33 0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 8 6.5 8 8 8.67 8 9.5 7.33 11 6.5 11zm3-4C8.67 7 8 6.33 8 5.5S8.67 4 9.5 4s1.5.67 1.5 1.5S10.33 7 9.5 7zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 4 14.5 4s1.5.67 1.5 1.5S15.33 7 14.5 7zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 8 17.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z", Ke = "M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z", qe = "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", Je = "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", Ye = "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z";
-function Xe(e, t, n, a, s) {
-	let c = o("g"), l = a / 24;
-	return i(c, {
-		transform: `translate(${t - a / 2}, ${n - a / 2}) scale(${l})`,
-		fill: s,
+	__depends__: [T],
+	evolutionConstraintBehavior: ["type", Ve]
+}, E = "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z", Ke = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z", qe = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z", Je = "M15.5 5H11l5 7-5 7h4.5l5-7zM8.5 5H4l5 7-5 7h4.5l5-7z", D = "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.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z", O = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", Ye = "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z", Xe = "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z", Ze = "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z", Qe = "M4 7v2c0 .55-.45 1-1 1H2v2h1c.55 0 1 .45 1 1v2c0 1.65 1.35 3 3 3h1v-2H7c-.55 0-1-.45-1-1v-2c0-.84-.35-1.61-.92-2.18L4.85 12l.23-.82C5.65 10.61 6 9.84 6 9V7c0-.55.45-1 1-1h1V4H7C5.35 4 4 5.35 4 7zm16 3c-.55 0-1-.45-1-1V7c0-1.65-1.35-3-3-3h-1v2h1c.55 0 1 .45 1 1v2c0 .84.35 1.61.92 2.18l.23.82-.23.82c-.57.57-.92 1.34-.92 2.18v2c0 .55-.45 1-1 1h-1v2h1c1.65 0 3-1.35 3-3v-2c0-.55.45-1 1-1h1v-2h-1z", $e = "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z", et = "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z", tt = "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z", nt = "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z", rt = "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z", it = "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z", at = "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z", ot = "M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.61-.23-1.2-.64-1.67-.08-.1-.13-.21-.13-.33 0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 8 6.5 8 8 8.67 8 9.5 7.33 11 6.5 11zm3-4C8.67 7 8 6.33 8 5.5S8.67 4 9.5 4s1.5.67 1.5 1.5S10.33 7 9.5 7zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 4 14.5 4s1.5.67 1.5 1.5S15.33 7 14.5 7zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 8 17.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z", k = "M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z", A = "M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z", st = "M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z", ct = "M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z", lt = "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", ut = "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", dt = "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z";
+function j(e, t, n, r, i) {
+	let a = f("g"), o = r / 24;
+	return u(a, {
+		transform: `translate(${t - r / 2}, ${n - r / 2}) scale(${o})`,
+		fill: i,
 		stroke: "none"
-	}), r(c, i(o("path"), { d: e })), c;
+	}), l(a, u(f("path"), { d: e })), a;
 }
-function Ze(e, t = 18) {
+function M(e, t = 18) {
 	return `<svg viewBox="0 0 24 24" width="${t}" height="${t}" fill="currentColor" aria-hidden="true"><path d="${e}"/></svg>`;
 }
 //#endregion
 //#region src/draw/WardleyRenderer.ts
-var Qe = 1500, $e = class extends ee {
+var ft = 1500, N = class extends te {
 	grid;
-	static $inject = ["eventBus", "evolutionGrid"];
-	constructor(e, t) {
-		super(e, Qe), this.grid = t;
+	elementRegistry;
+	static $inject = [
+		"eventBus",
+		"evolutionGrid",
+		"elementRegistry"
+	];
+	constructor(e, t, n) {
+		super(e, ft), this.grid = t, this.elementRegistry = n;
 	}
 	canRender(e) {
-		return b(e) || x(e);
+		return y(e) || b(e);
 	}
 	drawShape(e, t) {
 		let n = t;
@@ -676,29 +839,42 @@ var Qe = 1500, $e = class extends ee {
 			case "annotation": return this.drawAnnotation(e, n);
 			case "accelerator": return this.drawAccelerator(e, n);
 			case "submap": return this.drawSubmap(e, n);
+			case "drawing": return this.drawDrawing(e, n);
 			default: return this.drawComponent(e, n);
 		}
 	}
+	drawDrawing(e, t) {
+		let n = t.drawingPoints ?? [], r = t.strokeStyle === "dashed" ? "8 5" : t.strokeStyle === "dotted" ? "2 4" : void 0, i = u(f(t.closed ? "polygon" : "polyline"), {
+			points: n.map((e) => `${e.x},${e.y}`).join(" "),
+			fill: "none",
+			stroke: t.color ?? g.ink,
+			"stroke-width": 2,
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			...r ? { "stroke-dasharray": r } : {}
+		});
+		return l(e, i), i;
+	}
 	drawConnection(e, t) {
-		let n = t, a = n.wardleyType === "flow", s = a ? h.flow : h.dependency, [c, l] = nt(n), u = i(o("polyline"), {
-			points: `${c.x},${c.y} ${l.x},${l.y}`,
+		let n = t, r = n.wardleyType === "flow", i = r ? g.flow : g.dependency, [a, o] = ht(n), s = u(f("polyline"), {
+			points: `${a.x},${a.y} ${o.x},${o.y}`,
 			fill: "none",
-			stroke: s,
-			"stroke-width": a ? 2.5 : 1.5,
+			stroke: i,
+			"stroke-width": r ? 2.5 : 1.5,
 			"stroke-linecap": "round"
 		});
-		r(e, u), r(e, L(c, l, s, a ? 11 : 9, a ? 5 : 4)), a && n.bidirectional && r(e, L(l, c, s, 11, 5));
-		let d = (c.x + l.x) / 2, f = (c.y + l.y) / 2;
-		return a && n.flowValue && r(e, I(n.flowValue, d, f - 5, {
+		l(e, s), r && (l(e, L(a, o, i, 11, 5)), n.bidirectional && l(e, L(o, a, i, 11, 5)));
+		let c = (a.x + o.x) / 2, d = (a.y + o.y) / 2;
+		return r && n.flowValue && l(e, I(n.flowValue, c, d - 5, {
 			"text-anchor": "middle",
 			"font-size": 11,
-			fill: h.flow
-		})), n.linkLabel && r(e, I(n.linkLabel, d, f + (n.flowValue ? 12 : -4), {
+			fill: g.flow
+		})), n.linkLabel && l(e, I(n.linkLabel, c, d + (n.flowValue ? 12 : -4), {
 			"text-anchor": "middle",
 			"font-size": 11,
 			"font-style": "italic",
-			fill: h.axisText
-		})), u;
+			fill: g.axisText
+		})), s;
 	}
 	getShapePath(e) {
 		let { x: t, y: n, width: r, height: i } = e;
@@ -709,160 +885,185 @@ var Qe = 1500, $e = class extends ee {
 		return t ? `M${t.x},${t.y}` + n.map((e) => `L${e.x},${e.y}`).join("") : "";
 	}
 	drawComponent(e, t) {
-		let n = t.width / 2, i = t.height / 2, a = !!t.movement, o = t.decorators;
+		let n = t.width / 2, r = t.height / 2, i = !!t.movement, a = t.decorators;
 		if (t.movement) {
-			let a = this.grid.toCanvas({
+			let i = t.movement, a = this.grid.toCanvas({
 				visibility: t.visibility,
 				evolution: t.evolution
 			}), o = this.grid.toCanvas({
 				visibility: t.visibility,
-				evolution: t.movement.targetEvolution
-			}).x - a.x;
-			r(e, et(n, i, n + o, i, {
-				stroke: h.movement,
-				"stroke-width": 1.5
-			})), r(e, L({
+				evolution: i.targetEvolution
+			}).x - a.x, s = n + o, c = s - (Math.sign(o) || 1) * 17;
+			l(e, F(n, r, c, r, {
+				stroke: g.movement,
+				"stroke-width": 1.5,
+				"stroke-dasharray": "6 4"
+			})), l(e, L({
 				x: n,
-				y: i
+				y: r
 			}, {
-				x: n + o,
-				y: i
-			}, h.movement)), r(e, F(n + o, i, 15, {
-				fill: h.paper,
-				stroke: h.movement,
+				x: c,
+				y: r
+			}, g.movement)), l(e, P(s, r, 15, {
+				fill: g.paper,
+				stroke: g.movement,
 				"stroke-width": 2,
 				class: "wardley-evolve-handle"
+			})), l(e, I(i.newLabel ?? t.wardleyLabel, s + 15 + 7, r - 4, {
+				"font-weight": "500",
+				fill: g.movement
+			})), i.method && l(e, I(i.method, s + 15 + 7, r + 11, {
+				"font-size": 10.5,
+				fill: g.movement
 			}));
 		}
-		if (o?.inertia) {
+		if (a?.inertia) {
 			let t = n + 15 + 3;
-			r(e, et(t, i - 13, t, i + 13, {
-				stroke: h.inertia,
+			l(e, F(t, r - 13, t, r + 13, {
+				stroke: g.inertia,
 				"stroke-width": 3,
 				"stroke-linecap": "round"
 			}));
 		}
-		let s = F(n, i, 15, {
-			fill: h.componentFill,
-			stroke: h.stroke,
+		let o = t.color ?? g.stroke, s = P(n, r, 15, {
+			fill: g.componentFill,
+			stroke: o,
 			"stroke-width": 2
 		});
-		return r(e, s), a && r(e, F(n, i, 12, {
+		if (l(e, s), i && l(e, P(n, r, 12, {
 			fill: "none",
-			stroke: h.stroke,
+			stroke: o,
 			"stroke-width": 1.5
-		})), o?.ecosystem ? r(e, F(n, i, 4.5, {
+		})), a?.ecosystem && l(e, P(n, r, 18.5, {
 			fill: "none",
-			stroke: h.stroke,
-			"stroke-width": 1.5
-		})) : o?.market && r(e, F(n, i, 3, { fill: h.stroke })), r(e, I(t.wardleyLabel, n + 15 + 7, i - 4, { "font-weight": "500" })), o?.method && r(e, I(o.method, n + 15 + 7, i + 11, {
+			stroke: o,
+			"stroke-width": 1.25,
+			"stroke-dasharray": "1.5 3",
+			"stroke-linecap": "round"
+		})), a?.market) for (let [t, i] of [
+			[0, -3.8],
+			[-3.4, 2.4],
+			[3.4, 2.4]
+		]) l(e, P(n + t, r + i, 1.7, { fill: o }));
+		let c = n + 15 + 7 + (t.labelOffset?.dx ?? 0), u = r - 4 + (t.labelOffset?.dy ?? 0);
+		return l(e, I(t.wardleyLabel, c, u, {
+			"font-weight": "500",
+			...t.color ? { fill: t.color } : {}
+		})), a?.method && l(e, I(a.method, c, u + 15, {
 			"font-size": 10.5,
-			fill: h.axisText
+			fill: g.axisText
 		})), s;
 	}
 	drawAnchor(e, t) {
-		let n = t.width / 2, i = t.height / 2, a = Xe(N, n, i, 26, h.ink);
-		return r(e, a), r(e, I(t.wardleyLabel, n, i - 26 / 2 - 4, {
+		let n = t.width / 2, r = t.height / 2, i = j(E, n, r, 26, t.color ?? g.ink);
+		return l(e, i), l(e, I(t.wardleyLabel, n + (t.labelOffset?.dx ?? 0), r - 26 / 2 - 4 + (t.labelOffset?.dy ?? 0), {
 			"text-anchor": "middle",
-			"font-weight": "700"
-		})), a;
+			"font-weight": "700",
+			...t.color ? { fill: t.color } : {}
+		})), i;
 	}
 	drawPipeline(e, t) {
-		let n = i(o("rect"), {
+		let n = Math.max(t.width, 1), r = t.color, i = u(f("rect"), {
 			x: 0,
 			y: 0,
-			width: Math.max(t.width, 1),
+			width: n,
 			height: Math.max(t.height, 1),
 			rx: 4,
-			fill: h.accentSoft,
-			stroke: h.pipeline,
+			fill: "none",
+			stroke: r ?? g.pipeline,
 			"stroke-width": 1.25,
 			"stroke-dasharray": "6 3"
 		});
-		return r(e, n), r(e, I(t.wardleyLabel, 4, -6, { "font-weight": "500" })), n;
+		return l(e, i), !this.elementRegistry.filter((e) => y(e) && e.wardleyType === "component").some((e) => e.wardleyLabel === t.wardleyLabel) && (l(e, u(f("rect"), {
+			x: n / 2 - 8,
+			y: -8,
+			width: 16,
+			height: 16,
+			fill: g.componentFill,
+			stroke: r ?? g.stroke,
+			"stroke-width": 2
+		})), l(e, I(t.wardleyLabel, n / 2 + 8 + 6, -4, {
+			"font-weight": "500",
+			...r ? { fill: r } : {}
+		}))), i;
 	}
 	drawNote(e, t) {
-		let n = t.color, i = (t.wardleyLabel ?? "").split("\n"), a = t.width / 2, s = t.height / 2 - (i.length - 1) * 17 / 2 + 4, c = {
+		let n = t.color, r = (t.wardleyLabel ?? "").split("\n"), i = t.width / 2, a = t.height / 2 - (r.length - 1) * 17 / 2 + 4, o = {
 			"text-anchor": "middle",
-			fill: n ?? h.noteText,
+			fill: n ?? g.noteText,
 			"font-style": "italic",
 			...n ? { "font-weight": "600" } : {}
-		}, l;
-		return i.forEach((t, n) => {
-			let i = I(t, a, s + n * 17, c);
-			r(e, i), l ||= i;
-		}), l ?? o("text");
+		}, s;
+		return r.forEach((t, n) => {
+			let r = I(t, i, a + n * 17, o);
+			l(e, r), s ||= r;
+		}), s ?? f("text");
 	}
 	drawAttitude(e, t) {
-		let n = Se[t.attitudeKind ?? "pioneers"] ?? {
-			fill: "rgba(0,0,0,0.05)",
-			stroke: "#666666"
-		}, a = i(o("rect"), {
+		let n = _[t.attitudeKind ?? "pioneers"] ?? _.pioneers, r = t.color ?? n.stroke, i = u(f("rect"), {
 			x: 0,
 			y: 0,
 			width: Math.max(t.width, 1),
 			height: Math.max(t.height, 1),
 			rx: 10,
 			fill: n.fill,
-			stroke: n.stroke,
+			stroke: r,
 			"stroke-width": 1.25,
 			"stroke-dasharray": "5 4"
 		});
-		return r(e, a), r(e, I(rt(t.attitudeKind ?? t.wardleyLabel), 10, 18, {
-			fill: n.stroke,
+		return l(e, i), l(e, I(t.wardleyLabel && t.wardleyLabel !== t.attitudeKind ? t.wardleyLabel : gt(t.attitudeKind ?? "pioneers"), 10, 18, {
+			fill: r,
 			"font-weight": "700",
 			"letter-spacing": "0.04em"
-		})), a;
+		})), i;
 	}
 	drawAnnotation(e, t) {
-		let n = t.width / 2, i = t.height / 2, a = F(n, i, 10, {
-			fill: "#fff8e6",
-			stroke: h.stroke,
+		let n = t.width / 2, r = t.height / 2, i = P(n, r, 10, {
+			fill: g.annotationFill,
+			stroke: t.color ?? g.stroke,
 			"stroke-width": 1.25
 		});
-		return r(e, a), r(e, I(String(t.annotationNumber ?? ""), n, i + 4, {
+		return l(e, i), l(e, I(String(t.annotationNumber ?? ""), n, r + 4, {
 			"text-anchor": "middle",
 			"font-size": 11,
 			"font-weight": "700"
-		}, !1)), t.wardleyLabel && r(e, I(t.wardleyLabel, n + 15, i + 4, {
+		}, !1)), t.wardleyLabel && l(e, I(t.wardleyLabel, n + 15, r + 4, {
 			"font-size": 12,
-			fill: h.noteText
-		})), a;
+			fill: g.noteText
+		})), i;
 	}
 	drawAccelerator(e, t) {
-		let n = t.width / 2, i = t.height / 2, a = t.acceleratorDirection !== "deaccelerate", o = I(a ? "»" : "«", n, i + 6, {
-			"text-anchor": "middle",
-			"font-size": 19,
-			"font-weight": "700",
-			fill: a ? h.flow : h.movement
-		});
-		return r(e, o), t.wardleyLabel && r(e, I(t.wardleyLabel, n + 11, i + 6, { "font-size": 12 })), o;
+		let n = t.width / 2, r = t.height / 2, i = t.acceleratorDirection !== "deaccelerate", a = j(i ? k : A, n, r, 24, t.color ?? (i ? g.accelerator : g.deaccelerator));
+		return l(e, a), t.wardleyLabel && l(e, I(t.wardleyLabel, n + 15, r + 5, { "font-size": 12 })), a;
 	}
 	drawSubmap(e, t) {
-		let n = t.width / 2, a = t.height / 2, s = i(o("rect"), {
+		let n = t.width / 2, r = t.height / 2, i = t.color ?? g.stroke, a = u(f("rect"), {
 			x: n - 16,
-			y: a - 16,
+			y: r - 16,
 			width: 32,
 			height: 32,
 			rx: 3,
-			fill: h.componentFill,
-			stroke: h.stroke,
+			fill: g.componentFill,
+			stroke: i,
 			"stroke-width": 2
 		});
-		return r(e, s), r(e, i(o("rect"), {
+		return l(e, a), l(e, u(f("rect"), {
 			x: n - 16 + 3,
-			y: a - 16 + 3,
+			y: r - 16 + 3,
 			width: 26,
 			height: 26,
 			rx: 1.5,
 			fill: "none",
-			stroke: h.stroke,
+			stroke: i,
 			"stroke-width": 1
-		})), r(e, I(t.wardleyLabel, n + 16 + 6, a - 6, { "font-weight": "500" })), s;
+		})), l(e, I(t.wardleyLabel, n + 16 + 6, r - 6, {
+			"font-weight": "500",
+			...t.color ? { fill: t.color } : {}
+		})), a;
 	}
 };
-function F(e, t, n, r) {
-	return i(o("circle"), {
+function P(e, t, n, r) {
+	return u(f("circle"), {
 		cx: e,
 		cy: t,
 		r: n,
@@ -870,43 +1071,52 @@ function F(e, t, n, r) {
 		...r
 	});
 }
-function et(e, t, n, r, a) {
-	return i(o("line"), {
+function F(e, t, n, r, i) {
+	return u(f("line"), {
 		x1: e,
 		y1: t,
 		x2: n,
 		y2: r,
-		...a
+		...i
 	});
 }
-function I(e, t, n, r = {}, a = !0) {
-	let s = a ? {
-		stroke: h.paper,
+function I(e, t, n, r = {}, i = !0) {
+	let a = i ? {
+		stroke: g.paper,
 		"stroke-width": 3.5,
 		"paint-order": "stroke",
 		"stroke-linejoin": "round"
-	} : {}, c = i(o("text"), {
+	} : {}, o = u(f("text"), {
 		x: t,
 		y: n,
-		"font-family": g.family,
-		"font-size": g.label,
-		fill: h.ink,
-		...s,
+		"font-family": v.family,
+		"font-size": v.label,
+		fill: g.ink,
+		...a,
 		...r
 	});
-	return c.textContent = e, c;
+	return o.textContent = e, o;
 }
-function L(e, t, n, r = 10, a = 5) {
-	let s = Math.atan2(t.y - e.y, t.x - e.x), c = t.x - r * Math.cos(s), l = t.y - r * Math.sin(s), u = `${t.x},${t.y} ${c - a * Math.sin(s)},${l + a * Math.cos(s)} ${c + a * Math.sin(s)},${l - a * Math.cos(s)}`;
-	return i(o("polygon"), {
-		points: u,
+function L(e, t, n, r = 10, i = 5) {
+	let a = Math.atan2(t.y - e.y, t.x - e.x), o = t.x - r * Math.cos(a), s = t.y - r * Math.sin(a), c = `${t.x},${t.y} ${o - i * Math.sin(a)},${s + i * Math.cos(a)} ${o + i * Math.sin(a)},${s - i * Math.cos(a)}`;
+	return u(f("polygon"), {
+		points: c,
 		fill: n
 	});
 }
-function tt(e) {
-	return e.wardleyType === "component" ? 17 : e.wardleyType === "anchor" ? 14 : Math.min(e.width, e.height) / 2;
+function pt(e) {
+	return e.wardleyType === "component" ? 17 : e.wardleyType === "anchor" ? 14 : e.wardleyType === "pipeline" ? 10 : Math.min(e.width, e.height) / 2;
+}
+function mt(e) {
+	return e.wardleyType === "pipeline" ? {
+		x: e.x + e.width / 2,
+		y: e.y
+	} : {
+		x: e.x + e.width / 2,
+		y: e.y + e.height / 2
+	};
 }
-function nt(e) {
+function ht(e) {
 	let t = e.source, n = e.target, r = e.waypoints;
 	if (!t || !n) {
 		let e = r[0] ?? {
@@ -915,13 +1125,7 @@ function nt(e) {
 		};
 		return [e, r[r.length - 1] ?? e];
 	}
-	let i = {
-		x: t.x + t.width / 2,
-		y: t.y + t.height / 2
-	}, a = {
-		x: n.x + n.width / 2,
-		y: n.y + n.height / 2
-	}, o = a.x - i.x, s = a.y - i.y, c = Math.hypot(o, s) || 1, l = o / c, u = s / c, d = tt(t), f = tt(n);
+	let i = mt(t), a = mt(n), o = a.x - i.x, s = a.y - i.y, c = Math.hypot(o, s) || 1, l = o / c, u = s / c, d = pt(t), f = pt(n);
 	return c <= d + f + 2 ? [i, a] : [{
 		x: i.x + l * d,
 		y: i.y + u * d
@@ -930,15 +1134,15 @@ function nt(e) {
 		y: a.y - u * f
 	}];
 }
-function rt(e) {
+function gt(e) {
 	return e && e.charAt(0).toUpperCase() + e.slice(1);
 }
 //#endregion
 //#region src/draw/index.ts
-var it = {
+var _t = {
 	__init__: ["wardleyRenderer"],
-	wardleyRenderer: ["type", $e]
-}, at = new Set(["attitude", "pipeline"]), ot = {
+	wardleyRenderer: ["type", N]
+}, vt = new Set(["attitude", "pipeline"]), yt = {
 	attitude: 0,
 	pipeline: 1,
 	note: 2,
@@ -947,7 +1151,7 @@ var it = {
 	annotation: 5,
 	submap: 3,
 	accelerator: 3
-}, st = class {
+}, bt = class {
 	canvas;
 	elementFactory;
 	factory;
@@ -978,8 +1182,8 @@ var it = {
 			r = void 0;
 		}
 		let i;
-		r && r.id === "wardley-root" ? i = r : (i = this.elementFactory.createRoot({ id: we }), this.canvas.setRootElement(i)), i.businessObject = n, this.grid.render();
-		let a = /* @__PURE__ */ new Map(), o = [...e.elements].sort((e, t) => (ot[e.elementType] ?? 9) - (ot[t.elementType] ?? 9)), s = o.filter((e) => at.has(e.elementType)), c = o.filter((e) => !at.has(e.elementType)), l = 0;
+		r && r.id === "wardley-root" ? i = r : (i = this.elementFactory.createRoot({ id: De }), this.canvas.setRootElement(i)), i.businessObject = n, this.grid.render();
+		let a = /* @__PURE__ */ new Map(), o = [...e.elements].sort((e, t) => (yt[e.elementType] ?? 9) - (yt[t.elementType] ?? 9)), s = o.filter((e) => vt.has(e.elementType)), c = o.filter((e) => !vt.has(e.elementType)), l = 0;
 		for (let e of s) {
 			let t = this.createShape(e);
 			t && (this.canvas.addShape(t, i), a.set(e.id, t), l++);
@@ -1000,6 +1204,10 @@ var it = {
 			let o = n.edgeType === "flow" ? this.factory.createFlow(n, e, r) : this.factory.createDependency(n, e, r);
 			this.canvas.addConnection(o, i, l);
 		}
+		for (let e of s) {
+			let t = a.get(e.id);
+			t && e.elementType === "pipeline" && this.eventBus.fire("element.changed", { element: t });
+		}
 		return this.canvas.viewbox(this.grid.outerBounds()), this.eventBus.fire("import.render.done", { warnings: t }), t;
 	}
 	createShape(e) {
@@ -1012,6 +1220,7 @@ var it = {
 			case "attitude": return this.factory.createAttitude(e);
 			case "accelerator": return this.factory.createAccelerator(e);
 			case "submap": return this.factory.createSubmap(e);
+			case "drawing": return this.factory.createDrawing(e);
 			default: return;
 		}
 	}
@@ -1031,24 +1240,29 @@ function R(e) {
 	for (let [n, r] of Object.entries(e)) r !== void 0 && (t[n] = r);
 	return t;
 }
-var ct = class {
+var xt = class {
 	elementRegistry;
 	canvas;
-	static $inject = ["elementRegistry", "canvas"];
-	constructor(e, t) {
-		this.elementRegistry = e, this.canvas = t;
+	grid;
+	static $inject = [
+		"elementRegistry",
+		"canvas",
+		"evolutionGrid"
+	];
+	constructor(e, t, n) {
+		this.elementRegistry = e, this.canvas = t, this.grid = n;
 	}
 	export() {
-		let e = this.canvas.getRootElement().businessObject, t = e?.config ?? { title: "Untitled Map" }, n = [], r = [];
+		let e = this.canvas.getRootElement().businessObject, t = e?.config ?? { title: "Untitled Map" }, n = [], i = [];
 		for (let e of this.elementRegistry.getAll()) if (e.id !== "wardley-root") {
-			if (x(e)) if (e.businessObject) r.push(e.businessObject);
+			if (b(e)) if (e.businessObject) i.push(e.businessObject);
 			else {
 				let t = {
 					id: e.id,
 					from: e.source?.id ?? "",
 					to: e.target?.id ?? ""
 				};
-				r.push(e.wardleyType === "flow" ? {
+				i.push(e.wardleyType === "flow" ? {
 					...t,
 					edgeType: "flow",
 					...e.bidirectional ? { bidirectional: !0 } : {}
@@ -1057,16 +1271,30 @@ var ct = class {
 					edgeType: "dependency"
 				});
 			}
-			else if (b(e)) {
+			else if (y(e)) {
 				let t = this.buildElement(e);
 				t && n.push(t);
 			}
 		}
-		return d({
-			schemaVersion: s,
+		let a = new Set(n.filter((e) => e.elementType === "pipeline").map((e) => e.id));
+		return c({
+			schemaVersion: r,
 			config: t,
-			elements: n,
-			edges: r,
+			elements: n.map((e) => {
+				if (e.elementType === "component" && e.pipelineId && !a.has(e.pipelineId)) {
+					let { pipelineId: t, ...n } = e;
+					return n;
+				}
+				if (e.elementType === "pipeline") {
+					let t = n.filter((t) => t.elementType === "component" && t.pipelineId === e.id).map((e) => e.id);
+					return {
+						...e,
+						childIds: t
+					};
+				}
+				return e;
+			}),
+			edges: i,
 			...e?.rawPassthrough ? { rawPassthrough: e.rawPassthrough } : {}
 		});
 	}
@@ -1081,16 +1309,21 @@ var ct = class {
 				elementType: "component",
 				label: e.wardleyLabel,
 				position: t,
+				labelOffset: e.labelOffset ?? n?.labelOffset,
 				decorators: e.decorators,
 				movement: e.movement,
-				pipelineId: n?.pipelineId
+				pipelineId: e.pipelineId,
+				url: n?.url,
+				color: e.color
 			});
-			case "anchor": return {
+			case "anchor": return R({
 				id: e.id,
 				elementType: "anchor",
 				label: e.wardleyLabel,
-				position: t
-			};
+				position: t,
+				labelOffset: e.labelOffset ?? n?.labelOffset,
+				color: e.color
+			});
 			case "note": return R({
 				id: e.id,
 				elementType: "note",
@@ -1106,7 +1339,8 @@ var ct = class {
 				position: t,
 				evolutionStart: e.evolutionStart ?? 0,
 				evolutionEnd: e.evolutionEnd ?? 1,
-				childIds: n?.childIds ?? []
+				childIds: n?.childIds ?? [],
+				...e.color ? { color: e.color } : {}
 			};
 			case "attitude": return {
 				id: e.id,
@@ -1114,55 +1348,80 @@ var ct = class {
 				kind: e.attitudeKind ?? "pioneers",
 				label: e.wardleyLabel,
 				position: t,
-				width: e.width,
-				height: e.height
+				corner2: e.corner2 ?? n?.corner2 ?? {
+					visibility: Math.max(0, t.visibility - .1),
+					evolution: Math.min(1, t.evolution + .15)
+				},
+				...e.color ? { color: e.color } : {}
 			};
 			case "accelerator": return {
 				id: e.id,
 				elementType: "accelerator",
 				direction: e.acceleratorDirection ?? "accelerate",
 				label: e.wardleyLabel,
-				position: t
-			};
-			case "annotation": return {
-				id: e.id,
-				elementType: "annotation",
-				label: e.wardleyLabel,
 				position: t,
-				number: e.annotationNumber ?? 0,
-				positions: [t],
-				text: e.wardleyLabel
+				...e.color ? { color: e.color } : {}
 			};
+			case "annotation": {
+				let r = (n?.positions ?? []).slice(1);
+				return {
+					id: e.id,
+					elementType: "annotation",
+					label: e.wardleyLabel,
+					position: t,
+					number: e.annotationNumber ?? 0,
+					positions: [t, ...r],
+					text: e.wardleyLabel,
+					...e.color ? { color: e.color } : {}
+				};
+			}
 			case "submap": return R({
 				id: e.id,
 				elementType: "submap",
 				label: e.wardleyLabel,
 				position: t,
-				urlRef: n?.urlRef
+				urlRef: n?.urlRef,
+				color: e.color
 			});
+			case "drawing": {
+				let t = (e.drawingPoints ?? []).map((t) => this.grid.fromCanvas({
+					x: e.x + t.x,
+					y: e.y + t.y
+				}));
+				return t.length < 2 ? void 0 : {
+					id: e.id,
+					elementType: "drawing",
+					label: "",
+					position: t[0],
+					points: t,
+					...e.closed ? { closed: !0 } : {},
+					...e.strokeStyle ? { strokeStyle: e.strokeStyle } : {},
+					...e.color ? { color: e.color } : {}
+				};
+			}
 			default: return e.wardleyType, n ? {
 				...n,
 				position: t
 			} : void 0;
 		}
 	}
-}, lt = {
-	wardleyImporter: ["type", st],
-	wardleyExporter: ["type", ct]
-}, ut = class extends Ee {
+}, St = {
+	wardleyImporter: ["type", bt],
+	wardleyExporter: ["type", xt]
+}, Ct = class extends ke {
 	_getModules() {
 		return [
-			w,
-			M,
-			it,
-			lt
+			Fe,
+			T,
+			_t,
+			St
 		];
 	}
-}, dt = 180, ft = 80, pt = 120, mt = .5, ht = (e, t, n) => e < t ? t : e > n ? n : e;
-function gt(e, t, n, r) {
-	return t <= r ? ht(e, n, n + r - t) : n + r / 2 - t / 2;
+}, wt = 180, Tt = 80, Et = 120, Dt = .5, Ot = (e, t, n) => e < t ? t : e > n ? n : e;
+function kt(e, t, n, r) {
+	return t <= r ? Ot(e, n, n + r - t) : n + r / 2 - t / 2;
 }
-var _t = class {
+var At = class {
 	canvas;
 	grid;
 	static $inject = [
@@ -1179,8 +1438,8 @@ var _t = class {
 	constrain(e) {
 		let t = e ?? this.canvas.viewbox(), n = this.grid.outerBounds();
 		if (!(n.width > 0) || !(n.height > 0) || !(t.width > 0) || !(t.height > 0)) return;
-		let r = gt(t.x, t.width, n.x - pt, n.width + 2 * pt), i = gt(t.y, t.height, n.y - dt, n.height + dt + ft);
-		if (!(Math.abs(r - t.x) < mt && Math.abs(i - t.y) < mt)) {
+		let r = kt(t.x, t.width, n.x - Et, n.width + 2 * Et), i = kt(t.y, t.height, n.y - wt, n.height + wt + Tt);
+		if (!(Math.abs(r - t.x) < Dt && Math.abs(i - t.y) < Dt)) {
 			this.applying = !0;
 			try {
 				this.canvas.viewbox({
@@ -1194,58 +1453,58 @@ var _t = class {
 			}
 		}
 	}
-}, vt = {
+}, jt = {
 	__init__: ["panConstraint"],
-	panConstraint: ["type", _t]
-}, yt = class extends ut {
+	panConstraint: ["type", At]
+}, Mt = class extends Ct {
 	_getModules() {
 		return [
 			...super._getModules(),
-			te,
 			ne,
 			re,
 			ie,
-			vt
+			ae,
+			jt
 		];
 	}
 };
 //#endregion
 //#region src/modeling/cmd/UpdatePropertiesHandler.ts
-function bt(e, t, n) {
+function Nt(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
-var xt = class {
+var Pt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], bt(r, e, n[e]);
+		for (let e of Object.keys(n)) i[e] = r[e], Nt(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)) bt(r, e, n[e]);
+		if (n) for (let e of Object.keys(n)) Nt(r, e, n[e]);
 		return [t];
 	}
-}, St = "element.updateProperties";
-function Ct(e) {
+}, Ft = "element.updateProperties";
+function It(e) {
 	let t = {};
 	for (let [n, r] of Object.entries(e)) r !== void 0 && (t[n] = r);
 	return t;
 }
-var wt = class {
+var z = class {
 	commandStack;
 	static $inject = ["commandStack"];
 	constructor(e) {
-		this.commandStack = e, e.registerHandler(St, xt);
+		this.commandStack = e, e.registerHandler(Ft, Pt);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(St, {
+		this.commandStack.execute(Ft, {
 			element: e,
 			properties: t
 		});
 	}
 	updateLabel(e, t) {
 		if (e.wardleyType === "note") {
-			let { width: n, height: r } = m(t), i = e.x + e.width / 2, a = e.y + e.height / 2;
+			let { width: n, height: r } = h(t), i = e.x + e.width / 2, a = e.y + e.height / 2;
 			this.updateProperties(e, {
 				wardleyLabel: t,
 				width: n,
@@ -1258,8 +1517,9 @@ var wt = class {
 		this.updateProperties(e, { wardleyLabel: t });
 	}
 	evolveComponent(e, t, n = {}) {
-		this.updateProperties(e, { movement: Ct({
-			targetEvolution: Tt(t),
+		let r = Lt(t);
+		r <= e.evolution || this.updateProperties(e, { movement: It({
+			targetEvolution: r,
 			newLabel: n.newLabel,
 			method: n.method
 		}) });
@@ -1283,84 +1543,272 @@ var wt = class {
 		this.updateProperties(e, { color: t });
 	}
 };
-function Tt(e) {
+function Lt(e) {
 	return e < 0 ? 0 : e > 1 ? 1 : e;
 }
 //#endregion
+//#region src/modeling/WardleyCopyPaste.ts
+var Rt = 24, zt = [
+	"wardleyType",
+	"evolution",
+	"visibility",
+	"decorators",
+	"movement",
+	"evolutionStart",
+	"evolutionEnd",
+	"annotationNumber",
+	"attitudeKind",
+	"corner2",
+	"acceleratorDirection",
+	"labelOffset",
+	"color",
+	"drawingPoints",
+	"closed",
+	"strokeStyle"
+], Bt = [
+	"wardleyType",
+	"bidirectional",
+	"flowValue",
+	"linkLabel"
+];
+function Vt(e, t) {
+	let n = {};
+	for (let r of t) {
+		let t = e[r];
+		t !== void 0 && (n[r] = structuredClone(t));
+	}
+	return n;
+}
+var Ht = class {
+	selection;
+	modeling;
+	elementFactory;
+	elementRegistry;
+	canvas;
+	create;
+	mouse;
+	static $inject = [
+		"selection",
+		"modeling",
+		"elementFactory",
+		"elementRegistry",
+		"canvas",
+		"create",
+		"mouse"
+	];
+	clipboard = null;
+	pasteCount = 0;
+	constructor(e, t, n, r, i, a, o) {
+		this.selection = e, this.modeling = t, this.elementFactory = n, this.elementRegistry = r, this.canvas = i, this.create = a, this.mouse = o;
+	}
+	copy() {
+		let e = this.selection.get().filter((e) => y(e));
+		if (!e.length) return !1;
+		let t = new Map(e.map((e, t) => [e, t])), n = [], r = /* @__PURE__ */ new Set();
+		for (let i of e) for (let e of [...i.incoming ?? [], ...i.outgoing ?? []]) {
+			if (!b(e) || r.has(e)) continue;
+			let i = t.get(e.source), a = t.get(e.target);
+			i === void 0 || a === void 0 || (r.add(e), n.push({
+				sourceIdx: i,
+				targetIdx: a,
+				props: Vt(e, Bt)
+			}));
+		}
+		return this.clipboard = {
+			shapes: e.map((e) => ({
+				props: Vt(e, zt),
+				x: e.x,
+				y: e.y,
+				width: e.width,
+				height: e.height,
+				label: e.wardleyLabel ?? ""
+			})),
+			connections: n
+		}, this.pasteCount = 0, !0;
+	}
+	paste() {
+		if (!this.clipboard?.shapes.length) return !1;
+		let e = this.buildClones(), t = this.mouse.getLastMoveEvent();
+		return t ? (this.create.start(t, [...e.shapes, ...e.connections]), !0) : this.insertWithOffset(e);
+	}
+	duplicate() {
+		return this.copy() ? this.insertWithOffset(this.buildClones()) : !1;
+	}
+	buildClones() {
+		let e = this.clipboard, t = this.uniqueLabels(e.shapes.map((e) => e.label)), n = e.shapes.map((e, n) => this.elementFactory.createShape({
+			...structuredClone(e.props),
+			x: e.x,
+			y: e.y,
+			width: e.width,
+			height: e.height,
+			wardleyLabel: t[n],
+			...e.props.wardleyType === "pipeline" || e.props.wardleyType === "attitude" ? { isFrame: !0 } : {}
+		}));
+		return {
+			shapes: n,
+			connections: e.connections.map((e) => this.elementFactory.createConnection({
+				...structuredClone(e.props),
+				source: n[e.sourceIdx],
+				target: n[e.targetIdx],
+				waypoints: [Ut(n[e.sourceIdx]), Ut(n[e.targetIdx])]
+			}))
+		};
+	}
+	insertWithOffset(e) {
+		this.pasteCount++;
+		let t = Rt * this.pasteCount, n = Wt(e.shapes), r = this.modeling.createElements([...e.shapes, ...e.connections], {
+			x: n.cx + t,
+			y: n.cy + t
+		}, this.canvas.getRootElement());
+		return this.selection.select(r), !0;
+	}
+	uniqueLabels(e) {
+		let t = /* @__PURE__ */ new Set();
+		for (let e of this.elementRegistry.getAll()) {
+			let n = e.wardleyLabel;
+			typeof n == "string" && t.add(n);
+		}
+		return e.map((e) => {
+			let n = e, r = 2;
+			for (; t.has(n);) n = `${e} ${r++}`;
+			return t.add(n), n;
+		});
+	}
+};
+function Ut(e) {
+	return {
+		x: e.x + e.width / 2,
+		y: e.y + e.height / 2
+	};
+}
+function Wt(e) {
+	let t = Math.min(...e.map((e) => e.x)), n = Math.min(...e.map((e) => e.y)), r = Math.max(...e.map((e) => e.x + e.width)), i = Math.max(...e.map((e) => e.y + e.height));
+	return {
+		cx: (t + r) / 2,
+		cy: (n + i) / 2
+	};
+}
+//#endregion
 //#region src/modeling/index.ts
-var Et = {
+var Gt = {
+	__depends__: [ge, ce],
 	__init__: ["wardleyModeling"],
-	wardleyModeling: ["type", wt]
-}, Dt = new Set(["component", "anchor"]);
-function z(e) {
-	return b(e) && Dt.has(e.wardleyType);
+	wardleyModeling: ["type", z],
+	wardleyCopyPaste: ["type", Ht]
+}, Kt = {
+	__depends__: [_e],
+	__init__: ["wardleyLassoBehavior"],
+	wardleyLassoBehavior: ["type", class {
+		static $inject = [
+			"eventBus",
+			"canvas",
+			"lassoTool"
+		];
+		constructor(e, t, n) {
+			e.on("element.mousedown", 1500, (e) => {
+				let r = e.originalEvent;
+				if (!r?.shiftKey) return;
+				let i;
+				try {
+					i = t.getRootElement();
+				} catch {
+					return;
+				}
+				if (e.element === i) return n.activateLasso(r), !1;
+			});
+		}
+	}]
+}, qt = new Set([
+	"component",
+	"anchor",
+	"submap",
+	"pipeline"
+]);
+function B(e) {
+	return y(e) && qt.has(e.wardleyType);
 }
-var Ot = class extends he {
+function Jt(e, t) {
+	return (e.outgoing ?? []).some((e) => e.target === t) || (e.incoming ?? []).some((e) => e.source === t);
+}
+var Yt = class extends ve {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		super(e);
 	}
 	init() {
-		this.addRule("connection.start", (e) => z(e.source)), this.addRule("connection.create", (e) => {
+		this.addRule("connection.start", (e) => B(e.source)), this.addRule("connection.create", (e) => {
 			let { source: t, target: n } = e;
-			return !z(t) || !z(n) || t === n ? !1 : { wardleyType: "dependency" };
-		}), this.addRule(["shape.move", "elements.move"], () => !0), this.addRule("shape.create", () => !0), this.addRule("shape.resize", (e) => C(e.shape));
+			return !B(t) || !B(n) || t === n || Jt(t, n) ? !1 : { wardleyType: "dependency" };
+		}), this.addRule(["shape.move", "elements.move"], () => !0), this.addRule("shape.create", () => !0), this.addRule("elements.create", () => !0), this.addRule("shape.resize", (e) => x(e.shape) || Pe(e.shape));
 	}
-}, kt = {
+}, Xt = {
 	__init__: ["wardleyRules"],
-	wardleyRules: ["type", Ot]
-}, At = 8, jt = {
+	wardleyRules: ["type", Yt]
+}, Zt = 8, Qt = {
 	__init__: ["stageSnapping"],
 	stageSnapping: ["type", class {
 		static $inject = ["eventBus", "evolutionGrid"];
 		constructor(e, t) {
-			e.on([
-				"shape.move.move",
-				"shape.move.end",
+			let n = () => t.getBoundaries().map((e) => t.toCanvas({
+				visibility: .5,
+				evolution: e
+			}).x), r = (e, t) => {
+				typeof e.dx == "number" && typeof e.x == "number" && (e.dx += t - e.x), e.x = t;
+			};
+			e.on(["shape.move.move", "shape.move.end"], 1500, (e) => {
+				if (e.originalEvent?.shiftKey || typeof e.x != "number" || typeof e.dx != "number") return;
+				let t = e.context?.shape;
+				if (!t) return;
+				let r = t.x + t.width / 2 + e.dx;
+				for (let t of n()) if (Math.abs(r - t) <= Zt) {
+					let n = t - r;
+					e.dx += n, e.x += n;
+					break;
+				}
+			}), e.on([
 				"create.move",
 				"create.end",
-				"shape.resize.move",
-				"shape.resize.end"
+				"resize.move",
+				"resize.end"
 			], 1500, (e) => {
-				if (e.originalEvent?.shiftKey || typeof e.x != "number") return;
-				let n = t.getBoundaries().map((e) => t.toCanvas({
-					visibility: .5,
-					evolution: e
-				}).x);
-				for (let t of n) if (Math.abs(e.x - t) <= At) {
-					e.x = t;
-					break;
+				if (!e.originalEvent?.shiftKey && typeof e.x == "number") {
+					for (let t of n()) if (Math.abs(e.x - t) <= Zt) {
+						r(e, t);
+						break;
+					}
 				}
 			});
 		}
 	}]
-}, B = (e) => `<svg width="24" height="24" viewBox="0 0 24 24" class="wardley-palette-svg">${e}</svg>`, V = (e = "") => `<circle cx="12" cy="12" r="7" fill="${h.componentFill}" stroke="${h.stroke}" stroke-width="2"/>${e}`, H = (e, t) => `<text x="12" text-anchor="middle" font-family="${g.family}" ${t}>${e}</text>`, U = {
-	component: B(V()),
-	market: B(V(`<circle cx="12" cy="12" r="2.6" fill="${h.stroke}"/>`)),
-	ecosystem: B(V(`<circle cx="12" cy="12" r="4" fill="none" stroke="${h.stroke}" stroke-width="1.5"/>`)),
-	anchor: B(`<path d="${N}" fill="${h.ink}"/>`),
-	pipeline: B(`<rect x="2" y="8" width="20" height="8" rx="3" fill="${h.accentSoft}" stroke="${h.pipeline}" stroke-width="1.5" stroke-dasharray="3 2"/>`),
-	note: B(`<g stroke="${h.noteText}" stroke-width="1.5" stroke-linecap="round"><line x1="5" y1="8" x2="19" y2="8"/><line x1="5" y1="12" x2="19" y2="12"/><line x1="5" y1="16" x2="13" y2="16"/></g>`),
-	annotation: B(`<circle cx="12" cy="12" r="8" fill="#fff8e6" stroke="${h.stroke}" stroke-width="1.25"/>` + H("1", `y="16" font-size="11" font-weight="700" fill="${h.stroke}"`)),
-	accelerator: B(H("»", `y="17.5" font-size="19" font-weight="700" fill="${h.flow}"`)),
-	deaccelerator: B(H("«", `y="17.5" font-size="19" font-weight="700" fill="${h.movement}"`)),
-	submap: B(`<rect x="4" y="4" width="16" height="16" rx="3" fill="${h.componentFill}" stroke="${h.stroke}" stroke-width="2"/><rect x="7.5" y="7.5" width="9" height="9" rx="1.5" fill="none" stroke="${h.stroke}" stroke-width="1"/>`)
+}, V = (e) => `<svg width="24" height="24" viewBox="0 0 24 24" class="wardley-palette-svg">${e}</svg>`, H = (e = "") => `<circle cx="12" cy="12" r="7" fill="${g.componentFill}" stroke="${g.stroke}" stroke-width="2"/>${e}`, U = {
+	draw: V(`<polyline points="3,18 8.5,7 14,14 21,4" fill="none" stroke="${g.ink}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="3" cy="18" r="2.2" fill="${g.componentFill}" stroke="${g.ink}" stroke-width="1.4"/>`),
+	lasso: V(`<rect x="3" y="3" width="13" height="13" rx="2" fill="none" stroke="${g.ink}" stroke-width="1.5" stroke-dasharray="3 2.5"/><path d="M13.5 13.5l7 2.7-3 1.3-1.3 3z" fill="${g.ink}"/>`),
+	component: V(H()),
+	market: V(H(`<circle cx="12" cy="10" r="1.4" fill="${g.stroke}"/><circle cx="10.2" cy="13.4" r="1.4" fill="${g.stroke}"/><circle cx="13.8" cy="13.4" r="1.4" fill="${g.stroke}"/>`)),
+	ecosystem: V(H(`<circle cx="12" cy="12" r="10" fill="none" stroke="${g.stroke}" stroke-width="1.25" stroke-dasharray="1.5 3" stroke-linecap="round"/>`)),
+	anchor: V(`<path d="${E}" fill="${g.ink}"/>`),
+	pipeline: V(`<rect x="9.5" y="2.5" width="5.5" height="5.5" fill="${g.componentFill}" stroke="${g.stroke}" stroke-width="1.5"/><rect x="2" y="10" width="20" height="9" rx="2" fill="none" stroke="${g.pipeline}" stroke-width="1.25" stroke-dasharray="3 2"/><circle cx="7" cy="14.5" r="2.2" fill="${g.componentFill}" stroke="${g.stroke}" stroke-width="1.2"/><circle cx="17" cy="14.5" r="2.2" fill="${g.componentFill}" stroke="${g.stroke}" stroke-width="1.2"/>`),
+	note: V(`<g stroke="${g.noteText}" stroke-width="1.5" stroke-linecap="round"><line x1="5" y1="8" x2="19" y2="8"/><line x1="5" y1="12" x2="19" y2="12"/><line x1="5" y1="16" x2="13" y2="16"/></g>`),
+	annotation: V(`<circle cx="12" cy="12" r="8" fill="${g.annotationFill}" stroke="${g.stroke}" stroke-width="1.25"/>` + ((e, t) => `<text x="12" text-anchor="middle" font-family="${v.family}" ${t}>${e}</text>`)("1", `y="16" font-size="11" font-weight="700" fill="${g.stroke}"`)),
+	accelerator: V(`<path d="${k}" fill="${g.accelerator}"/>`),
+	deaccelerator: V(`<path d="${A}" fill="${g.deaccelerator}"/>`),
+	submap: V(`<rect x="4" y="4" width="16" height="16" rx="3" fill="${g.componentFill}" stroke="${g.stroke}" stroke-width="2"/><rect x="7.5" y="7.5" width="9" height="9" rx="1.5" fill="none" stroke="${g.stroke}" stroke-width="1"/>`)
 };
 function W(e) {
-	let t = Se[e] ?? {
+	let t = _[e] ?? {
 		fill: "rgba(0,0,0,0.05)",
 		stroke: "#666666"
 	};
-	return B(`<rect x="2" y="6" width="20" height="12" rx="3" fill="${t.fill}" stroke="${t.stroke}" stroke-width="1.5" stroke-dasharray="3 2"/>`);
+	return V(`<rect x="2" y="6" width="20" height="12" rx="3" fill="${t.fill}" stroke="${t.stroke}" stroke-width="1.5" stroke-dasharray="3 2"/>`);
 }
 //#endregion
 //#region src/palette/WardleyPaletteProvider.ts
-var G = "wardley-1-blocks", K = "wardley-2-strategy", Mt = "wardley-3-notes", Nt = [
+var G = "wardley-1-blocks", K = "wardley-2-strategy", $t = [
 	{
 		key: "component",
 		type: "component",
 		label: "Component",
-		title: "Component",
+		title: "Component — C",
 		icon: U.component,
 		group: G
 	},
@@ -1386,7 +1834,7 @@ var G = "wardley-1-blocks", K = "wardley-2-strategy", Mt = "wardley-3-notes", Nt
 		key: "anchor",
 		type: "anchor",
 		label: "User",
-		title: "Anchor / User",
+		title: "Anchor / User — U",
 		icon: U.anchor,
 		group: G
 	},
@@ -1457,33 +1905,39 @@ var G = "wardley-1-blocks", K = "wardley-2-strategy", Mt = "wardley-3-notes", Nt
 		label: "Note",
 		title: "Note",
 		icon: U.note,
-		group: Mt
-	},
-	{
-		key: "annotation",
-		type: "annotation",
-		label: "Annotation",
-		title: "Annotation (numbered marker)",
-		icon: U.annotation,
-		group: Mt,
-		extra: { annotationNumber: 1 }
-	}
-], Pt = {
+		group: "wardley-3-notes"
+	}
+], en = {
 	__init__: ["wardleyPaletteProvider"],
 	wardleyPaletteProvider: ["type", class {
 		create;
 		factory;
+		lassoTool;
+		drawTool;
 		static $inject = [
 			"palette",
 			"create",
-			"wardleyElementFactory"
+			"wardleyElementFactory",
+			"lassoTool",
+			"wardleyDrawTool"
 		];
-		constructor(e, t, n) {
-			this.create = t, this.factory = n, e.registerProvider(this);
+		constructor(e, t, n, r, i) {
+			this.create = t, this.factory = n, this.lassoTool = r, this.drawTool = i, e.registerProvider(this);
 		}
 		getPaletteEntries() {
 			let e = {};
-			for (let t of Nt) {
+			e["lasso-tool"] = {
+				group: "tools",
+				title: "Selection tool — L (or Shift+drag)",
+				html: `<div class="entry wardley-palette-entry" title="Selection tool — L (or Shift+drag)">${U.lasso}</div>`,
+				action: { click: (e) => this.lassoTool.activateSelection(e) }
+			}, e["draw-tool"] = {
+				group: "tools",
+				title: "Draw — click point by point, double-click/Enter finishes, click the start point to close",
+				html: `<div class="entry wardley-palette-entry" title="Draw — click point by point, double-click/Enter finishes, click the start point to close">${U.draw}</div>`,
+				action: { click: () => this.drawTool.toggle() }
+			};
+			for (let t of $t) {
 				let n = (e) => {
 					let n = this.factory.createNew(t.type, t.label, t.extra ?? {});
 					this.create.start(e, n);
@@ -1507,14 +1961,14 @@ var G = "wardley-1-blocks", K = "wardley-2-strategy", Mt = "wardley-3-notes", Nt
 }, Y = {
 	id: "method",
 	name: "Sourcing"
-}, Ft = {
+}, tn = {
 	id: "props",
 	name: "Properties"
 };
 function X(e, t) {
 	return e ? `✓ ${t}` : t;
 }
-var It = class {
+var nn = class {
 	modeling;
 	static $inject = ["popupMenu", "wardleyModeling"];
 	constructor(e, t) {
@@ -1522,7 +1976,7 @@ var It = class {
 	}
 	getPopupMenuEntries(e) {
 		let t = Array.isArray(e) ? e[0] : e;
-		return S(t) ? this.componentEntries(t) : {};
+		return Ne(t) ? this.componentEntries(t) : {};
 	}
 	componentEntries(e) {
 		let t = e.decorators ?? {}, n = t.ecosystem ? "ecosystem" : t.market ? "market" : "normal", r = t.method;
@@ -1564,23 +2018,23 @@ var It = class {
 			},
 			"prop-inertia": {
 				label: X(!!t.inertia, "Inertia"),
-				group: Ft,
+				group: tn,
 				action: () => this.modeling.toggleInertia(e)
 			}
 		};
 	}
-}, Lt = {
+}, rn = {
 	__init__: ["wardleyElementSettings"],
-	wardleyElementSettings: ["type", It]
+	wardleyElementSettings: ["type", nn]
 };
 //#endregion
 //#region src/context-pad/WardleyContextPadProvider.ts
 function Z(e, t, n = !1) {
-	return `<div class="entry wardley-cp-entry"${n ? " draggable=\"true\"" : ""} title="${t}">${Ze(e)}</div>`;
+	return `<div class="entry wardley-cp-entry"${n ? " draggable=\"true\"" : ""} title="${t}">${M(e)}</div>`;
 }
 //#endregion
 //#region src/context-pad/index.ts
-var Rt = {
+var an = {
 	__init__: ["wardleyContextPadProvider"],
 	wardleyContextPadProvider: ["type", class {
 		modeling;
@@ -1608,15 +2062,26 @@ var Rt = {
 			this.modeling = t, this.connect = n, this.create = r, this.popupMenu = i, this.wardleyModeling = a, this.labelEditing = o, this.evolveDragging = s, this.factory = c, this.colorPicker = l, e.registerProvider(this);
 		}
 		getContextPadEntries(e) {
-			if (x(e)) return { delete: {
-				group: "edit",
-				title: "Delete connection",
-				html: Z(P, "Delete connection"),
-				action: { click: () => this.modeling.removeElements([e]) }
-			} };
-			if (!b(e)) return {};
+			if (b(e)) {
+				let t = e, n = t.wardleyType === "flow";
+				return {
+					"edit-value": {
+						group: "edit",
+						title: n ? "Edit flow value" : "Edit link annotation",
+						html: Z(D, n ? "Edit flow value" : "Edit link annotation"),
+						action: { click: () => this.labelEditing.activateConnection(t) }
+					},
+					delete: {
+						group: "edit",
+						title: "Delete connection",
+						html: Z(O, "Delete connection"),
+						action: { click: () => this.modeling.removeElements([e]) }
+					}
+				};
+			}
+			if (!y(e)) return {};
 			let t = e, n = {};
-			if (t.wardleyType === "component" || t.wardleyType === "anchor") {
+			if (t.wardleyType === "component" || t.wardleyType === "anchor" || t.wardleyType === "submap" || t.wardleyType === "pipeline") {
 				let e = (e) => {
 					let n = this.factory.createNew("component", "Component");
 					this.create.start(e, n, { source: t });
@@ -1624,7 +2089,7 @@ var Rt = {
 				n.append = {
 					group: "edit",
 					title: "Append component (auto-connect)",
-					html: Z(Ae, "Append component", !0),
+					html: Z(Ke, "Append component", !0),
 					action: {
 						click: e,
 						dragstart: e
@@ -1636,7 +2101,7 @@ var Rt = {
 				n.connect = {
 					group: "edit",
 					title: "Connect to existing element",
-					html: Z(je, "Connect to existing element", !0),
+					html: Z(qe, "Connect to existing element", !0),
 					action: {
 						click: r,
 						dragstart: r
@@ -1647,15 +2112,15 @@ var Rt = {
 				if (t.movement) n["evolve-clear"] = {
 					group: "wardley",
 					title: "Remove evolve",
-					html: Z(Pe, "Remove evolve"),
+					html: Z(Ye, "Remove evolve"),
 					action: { click: () => this.wardleyModeling.clearMovement(t) }
 				};
-				else {
+				else if (t.evolution < .999) {
 					let e = (e) => this.evolveDragging.start(e, t);
 					n.evolve = {
 						group: "wardley",
 						title: "Evolve: drag to set the target maturity",
-						html: Z(Me, "Evolve: drag to set the target maturity", !0),
+						html: Z(Je, "Evolve: drag to set the target maturity", !0),
 						action: {
 							click: e,
 							dragstart: e
@@ -1665,7 +2130,7 @@ var Rt = {
 				n.settings = {
 					group: "wardley",
 					title: "Settings (type, sourcing, inertia)",
-					html: Z(We, "Settings"),
+					html: Z(at, "Settings"),
 					action: { click: (e) => {
 						let n = e;
 						this.popupMenu.open(t, q, {
@@ -1675,28 +2140,50 @@ var Rt = {
 					} }
 				};
 			}
-			return t.wardleyType === "note" && (n.color = {
+			if (t.wardleyType === "drawing") {
+				let e = t.strokeStyle === "dashed" ? "dotted" : t.strokeStyle === "dotted" ? void 0 : "dashed", r = `Line style: ${t.strokeStyle ?? "solid"} (click to change)`;
+				n["stroke-style"] = {
+					group: "wardley",
+					title: r,
+					html: Z(st, r),
+					action: { click: () => this.wardleyModeling.updateProperties(t, { strokeStyle: e }) }
+				};
+			}
+			n.color = {
 				group: "wardley",
-				title: "Note color",
-				html: Z(Ge, "Note color"),
+				title: "Color",
+				html: Z(ot, "Color"),
 				action: { click: (e) => {
 					let n = e;
 					this.colorPicker.open(t, n.clientX, n.clientY);
 				} }
-			}), n["edit-label"] = {
+			};
+			let r = t.businessObject, i = r?.url ?? r?.urlRef;
+			return i && (n["open-link"] = {
+				group: "wardley",
+				title: `Open link (${i})`,
+				html: Z(qe, "Open link"),
+				action: { click: () => window.open(i, "_blank", "noopener") }
+			}), t.wardleyType !== "drawing" && (n["edit-label"] = {
 				group: "edit",
 				title: "Edit label",
-				html: Z(Ne, "Edit label"),
+				html: Z(D, "Edit label"),
 				action: { click: () => this.labelEditing.activate(t) }
-			}, n.delete = {
+			}), n.delete = {
 				group: "edit",
 				title: "Delete",
-				html: Z(P, "Delete"),
+				html: Z(O, "Delete"),
 				action: { click: () => this.modeling.removeElements([t]) }
 			}, n;
 		}
 	}]
-}, zt = class {
+};
+//#endregion
+//#region src/label-editing/WardleyLabelEditing.ts
+function on(e) {
+	return e.replace(/->/g, "→").replace(/;/g, ",").replace(/\[/g, "(").replace(/\]/g, ")").trim();
+}
+var sn = class {
 	canvas;
 	modeling;
 	factory;
@@ -1709,7 +2196,7 @@ var Rt = {
 	active = null;
 	constructor(e, t, n, r) {
 		this.canvas = t, this.modeling = n, this.factory = r, e.on("element.dblclick", (e) => {
-			b(e.element) && this.activate(e.element);
+			y(e.element) ? this.activate(e.element) : b(e.element) && this.activateConnection(e.element);
 		}), e.on([
 			"element.mousedown",
 			"drag.init",
@@ -1728,7 +2215,7 @@ var Rt = {
 			c || (c = !0, s.removeEventListener("keydown", d), s.removeEventListener("blur", f), s.remove(), this.active = null);
 		}, u = () => {
 			if (c) return;
-			let t = s.value.trim(), n = t && t !== e.wardleyLabel;
+			let t = on(s.value), n = t && t !== e.wardleyLabel;
 			if (l(), !n) return;
 			let r = i ? t : this.factory.uniqueLabel(t, e.id);
 			this.modeling.updateLabel(e, r);
@@ -1748,48 +2235,129 @@ var Rt = {
 			cleanup: l
 		};
 	}
+	activateConnection(e) {
+		this.active?.commit();
+		let t = this.canvas.getContainer(), n = this.canvas.zoom(), r = this.canvas.viewbox(), i = e.waypoints[0], a = e.waypoints[e.waypoints.length - 1];
+		if (!i || !a) return;
+		let o = e.wardleyType === "flow", s = document.createElement("input");
+		s.type = "text", s.className = "wardley-label-input", s.placeholder = o ? "flow value (e.g. $0.10)" : "link annotation", s.value = (o ? e.flowValue : e.linkLabel) ?? "", s.style.position = "absolute", s.style.left = `${((i.x + a.x) / 2 - 60 - r.x) * n}px`, s.style.top = `${((i.y + a.y) / 2 - 26 - r.y) * n}px`, t.appendChild(s), s.focus(), s.select();
+		let c = !1, l = () => {
+			c || (c = !0, s.removeEventListener("keydown", d), s.removeEventListener("blur", f), s.remove(), this.active = null);
+		}, u = () => {
+			if (c) return;
+			let t = s.value.replace(/'/g, "’").replace(/;/g, ",").trim(), n = (o ? e.flowValue : e.linkLabel) ?? "";
+			if (l(), t === n) return;
+			let r = e.businessObject, i = r ? o ? {
+				...r,
+				...t ? { flowValue: t } : {}
+			} : {
+				...r,
+				...t ? { label: t } : {}
+			} : void 0;
+			i && !t && (o ? delete i.flowValue : delete i.label), this.modeling.updateProperties(e, {
+				[o ? "flowValue" : "linkLabel"]: t || void 0,
+				...i ? { businessObject: i } : {}
+			});
+		}, d = (e) => {
+			e.key === "Escape" ? (e.preventDefault(), l()) : e.key === "Enter" && (e.preventDefault(), u());
+		}, f = () => u();
+		s.addEventListener("keydown", d), s.addEventListener("blur", f), this.active = {
+			field: s,
+			commit: u,
+			cleanup: l
+		};
+	}
 	cancel() {
 		this.active?.cleanup();
 	}
-}, Bt = {
+}, cn = {
 	__init__: ["wardleyLabelEditing"],
-	wardleyLabelEditing: ["type", zt]
-}, Vt = class {
+	wardleyLabelEditing: ["type", sn]
+}, ln = 2, un = 10, dn = {
+	arrowleft: {
+		x: -1,
+		y: 0
+	},
+	arrowright: {
+		x: 1,
+		y: 0
+	},
+	arrowup: {
+		x: 0,
+		y: -1
+	},
+	arrowdown: {
+		x: 0,
+		y: 1
+	}
+}, fn = class {
 	static $inject = [
 		"canvas",
 		"commandStack",
 		"selection",
-		"modeling"
+		"modeling",
+		"wardleyCopyPaste",
+		"wardleyElementFactory",
+		"create",
+		"mouse",
+		"lassoTool",
+		"eventBus"
 	];
-	constructor(e, t, n, r) {
-		let i = e.getContainer();
-		i.hasAttribute("tabindex") || i.setAttribute("tabindex", "0"), i.addEventListener("keydown", (e) => {
-			if (Ht(e.target)) return;
-			let i = e.ctrlKey || e.metaKey, a = e.key.toLowerCase();
-			if (i && a === "z" && !e.shiftKey) e.preventDefault(), t.undo();
-			else if (i && a === "z" && e.shiftKey || i && a === "y") e.preventDefault(), t.redo();
-			else if (a === "delete" || a === "backspace") {
+	constructor(e, t, n, r, i, a, o, s, c, l) {
+		let u = e.getContainer();
+		u.hasAttribute("tabindex") || u.setAttribute("tabindex", "0");
+		let d = (e) => {
+			if (pn(e.target)) return;
+			let l = e.ctrlKey || e.metaKey, u = e.key.toLowerCase();
+			if (l && u === "z" && !e.shiftKey) e.preventDefault(), t.undo();
+			else if (l && u === "z" && e.shiftKey || l && u === "y") e.preventDefault(), t.redo();
+			else if (l && u === "c") i.copy() && e.preventDefault();
+			else if (l && u === "v") i.paste() && e.preventDefault();
+			else if (l && u === "d") e.preventDefault(), i.duplicate();
+			else if (u === "delete" || u === "backspace") {
 				let t = n.get();
 				t.length && (e.preventDefault(), r.removeElements(t));
+			} else if (!l && !e.altKey && (u === "c" || u === "u")) {
+				let t = s.getLastMoveEvent();
+				if (t) {
+					e.preventDefault();
+					let n = u === "c" ? a.createNew("component", "Component") : a.createNew("anchor", "User");
+					o.start(t, n);
+				}
+			} else if (!l && !e.altKey && u === "l") {
+				e.preventDefault();
+				let t = s.getLastMoveEvent();
+				c.activateSelection(t ?? e, !!t);
+			} else if (u in dn && !l) {
+				let t = n.get();
+				if (t.length) {
+					e.preventDefault();
+					let n = e.shiftKey ? un : ln, i = dn[u];
+					r.moveElements(t, {
+						x: i.x * n,
+						y: i.y * n
+					});
+				}
 			}
-		});
+		};
+		document.addEventListener("keydown", d), l.on("diagram.destroy", () => document.removeEventListener("keydown", d));
 	}
 };
-function Ht(e) {
+function pn(e) {
 	if (!(e instanceof HTMLElement)) return !1;
 	let t = e.tagName;
 	return t === "INPUT" || t === "TEXTAREA" || e.isContentEditable;
 }
 //#endregion
 //#region src/keyboard/index.ts
-var Ut = {
+var mn = {
 	__init__: ["wardleyKeyboard"],
-	wardleyKeyboard: ["type", Vt]
-}, Q = "wardley.evolve", Wt = .005, Gt = "wardley-evolve-handle";
-function Kt(e) {
+	wardleyKeyboard: ["type", fn]
+}, Q = "wardley.evolve", hn = .005, gn = "wardley-evolve-handle";
+function _n(e) {
 	return e < 0 ? 0 : e > 1 ? 1 : e;
 }
-var $ = class {
+var vn = class {
 	dragging;
 	static $inject = [
 		"eventBus",
@@ -1805,32 +2373,32 @@ var $ = class {
 			n === void 0 ? delete t.movement : t.movement = n, e.fire("element.changed", { element: t });
 		}, s = (e, t) => {
 			let r = i.getContainer().getBoundingClientRect(), a = i.viewbox(), o = a.x + (e - r.left) * (a.width / r.width);
-			return Kt(n.fromCanvas({
+			return _n(n.fromCanvas({
 				x: o,
 				y: t
 			}).evolution);
 		};
 		i.getContainer().addEventListener("mousedown", (e) => {
 			let t = e.target;
-			if (!t?.closest(`.${Gt}`)) return;
+			if (!t?.closest(`.${gn}`)) return;
 			let n = t.closest("[data-element-id]")?.getAttribute("data-element-id"), i = n ? a.get(n) : void 0;
 			if (!i || i.wardleyType !== "component") return;
 			e.stopPropagation(), e.preventDefault();
 			let c = i.movement, l = i.y + i.height / 2, u, d = (e) => {
 				u = s(e.clientX, l), o(i, { targetEvolution: u });
 			}, f = () => {
-				document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", f), o(i, c), u !== void 0 && Math.abs(u - i.evolution) > Wt && r.evolveComponent(i, u);
+				document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", f), o(i, c), u !== void 0 && Math.abs(u - i.evolution) > hn && r.evolveComponent(i, u);
 			};
 			document.addEventListener("mousemove", d), document.addEventListener("mouseup", f);
 		}, !0), e.on(`${Q}.move`, (e) => {
-			let { shape: t } = e.context, r = t.y + t.height / 2, i = Kt(n.fromCanvas({
+			let { shape: t } = e.context, r = t.y + t.height / 2, i = _n(n.fromCanvas({
 				x: e.x,
 				y: r
 			}).evolution);
 			e.context.target = i, o(t, { targetEvolution: i });
 		}), e.on(`${Q}.end`, (e) => {
 			let t = e.context, { shape: n, target: i } = t;
-			o(n, t.originalMovement), i !== void 0 && Math.abs(i - n.evolution) > Wt && r.evolveComponent(n, i), t.committed = !0;
+			o(n, t.originalMovement), i !== void 0 && Math.abs(i - n.evolution) > hn && r.evolveComponent(n, i), t.committed = !0;
 		}), e.on(`${Q}.cleanup`, (e) => {
 			let t = e.context;
 			t && !t.committed && o(t.shape, t.originalMovement);
@@ -1846,10 +2414,10 @@ var $ = class {
 			data: { context: n }
 		});
 	}
-}, qt = {
+}, yn = {
 	__init__: ["wardleyEvolveDragging"],
-	wardleyEvolveDragging: ["type", $]
-}, Jt = 500, Yt = class {
+	wardleyEvolveDragging: ["type", vn]
+}, bn = 500, xn = class {
 	static $inject = ["injector", "eventBus"];
 	constructor(e, t) {
 		let n = e.get("connectionPreview", !1), r = e.get("wardleyLabelEditing", !1);
@@ -1874,18 +2442,18 @@ var $ = class {
 			"create.cleanup"
 		], (e) => {
 			n.cleanUp(e.context);
-		})), r && t.on("create.end", Jt, (e) => {
+		})), r && t.on("create.end", bn, (e) => {
 			let { context: t } = e;
 			if (!t.source || !t.canExecute || !t.shape) return;
 			let n = t.shape;
 			setTimeout(() => r.activate(n), 0);
 		});
 	}
-}, Xt = {
-	__depends__: [ge],
+}, Sn = {
+	__depends__: [ye],
 	__init__: ["wardleyAppendBehavior"],
-	wardleyAppendBehavior: ["type", Yt]
-}, Zt = class {
+	wardleyAppendBehavior: ["type", xn]
+}, Cn = class {
 	canvas;
 	modeling;
 	static $inject = [
@@ -1915,7 +2483,7 @@ var $ = class {
 			value: void 0,
 			title: "No color",
 			cls: "wardley-cp-none"
-		}, ...xe.map((e) => ({
+		}, ...Te.map((e) => ({
 			value: e.value,
 			title: e.name,
 			cls: ""
@@ -1935,35 +2503,339 @@ var $ = class {
 	close() {
 		this.popover && (this.popover.remove(), this.popover = void 0, document.removeEventListener("click", this.onDocPointer, !0), document.removeEventListener("keydown", this.onKey, !0));
 	}
-}, Qt = {
+}, wn = {
 	__init__: ["wardleyColorPicker"],
-	wardleyColorPicker: ["type", Zt]
-}, $t = class extends yt {
+	wardleyColorPicker: ["type", Cn]
+};
+//#endregion
+//#region src/ordering/WardleyOrderingProvider.ts
+function $(e) {
+	return y(e) && (e.wardleyType === "attitude" || e.wardleyType === "pipeline");
+}
+//#endregion
+//#region src/ordering/index.ts
+var Tn = {
+	__init__: ["wardleyOrderingProvider"],
+	wardleyOrderingProvider: ["type", class extends be {
+		static $inject = ["eventBus"];
+		constructor(e) {
+			super(e);
+		}
+		getOrdering(e, t) {
+			let n = t.children ?? [];
+			return b(e) ? {
+				parent: t,
+				index: n.filter((t) => t !== e && ($(t) || b(t))).length
+			} : $(e) ? {
+				parent: t,
+				index: n.filter((t) => t !== e && $(t)).length
+			} : { parent: t };
+		}
+	}]
+}, En = 12, Dn = class {
+	canvas;
+	eventBus;
+	modeling;
+	selection;
+	factory;
+	static $inject = [
+		"canvas",
+		"eventBus",
+		"modeling",
+		"selection",
+		"wardleyElementFactory"
+	];
+	active = !1;
+	points = [];
+	cursor = null;
+	layer = null;
+	constructor(e, t, n, r, i) {
+		this.canvas = e, this.eventBus = t, this.modeling = n, this.selection = r, this.factory = i, t.on("diagram.destroy", () => this.cancel());
+	}
+	isActive() {
+		return this.active;
+	}
+	toggle() {
+		this.active ? this.cancel() : this.activate();
+	}
+	outerContainer() {
+		let e = this.canvas.getContainer();
+		return e.closest(".wardley-container") ?? e;
+	}
+	activate() {
+		if (this.active) return;
+		this.active = !0, this.points = [], this.cursor = null;
+		let e = this.canvas.getContainer();
+		this.outerContainer().classList.add("wardley-draw-mode"), e.addEventListener("mousedown", this.onMouseDown, !0), e.addEventListener("dblclick", this.onDblClick, !0), e.addEventListener("mousemove", this.onMouseMove, !0), document.addEventListener("keydown", this.onKeyDown, !0), this.eventBus.fire("tool-manager.update", { tool: "draw" });
+	}
+	finish() {
+		let e = [...this.points];
+		if (this.deactivate(), e.length < 2) return;
+		let t = this.factory.drawingFromCanvasPoints(e), n = this.modeling.createShape(t, {
+			x: t.x + t.width / 2,
+			y: t.y + t.height / 2
+		}, this.canvas.getRootElement());
+		this.selection.select(n);
+	}
+	finishClosed() {
+		let e = [...this.points];
+		if (this.deactivate(), e.length < 3) return;
+		let t = this.factory.drawingFromCanvasPoints(e, { closed: !0 }), n = this.modeling.createShape(t, {
+			x: t.x + t.width / 2,
+			y: t.y + t.height / 2
+		}, this.canvas.getRootElement());
+		this.selection.select(n);
+	}
+	cancel() {
+		this.deactivate();
+	}
+	deactivate() {
+		if (!this.active) return;
+		this.active = !1;
+		let e = this.canvas.getContainer();
+		this.outerContainer().classList.remove("wardley-draw-mode"), e.removeEventListener("mousedown", this.onMouseDown, !0), e.removeEventListener("dblclick", this.onDblClick, !0), e.removeEventListener("mousemove", this.onMouseMove, !0), document.removeEventListener("keydown", this.onKeyDown, !0), this.points = [], this.cursor = null, this.clearPreview(), this.eventBus.fire("tool-manager.update", { tool: null });
+	}
+	toCanvasPoint(e) {
+		let t = this.canvas.getContainer().getBoundingClientRect(), n = this.canvas.viewbox(), r = this.canvas.zoom();
+		return {
+			x: (e.clientX - t.left) / r + n.x,
+			y: (e.clientY - t.top) / r + n.y
+		};
+	}
+	isChromeTarget(e) {
+		return !!e.target?.closest(".djs-palette, .djs-context-pad, .wardley-color-picker");
+	}
+	onMouseDown = (e) => {
+		if (e.button !== 0 || this.isChromeTarget(e)) return;
+		e.preventDefault(), e.stopPropagation();
+		let t = this.toCanvasPoint(e), n = this.points[0];
+		if (n && this.points.length >= 3 && On(t, n) <= En) {
+			this.finishClosed();
+			return;
+		}
+		let r = this.points[this.points.length - 1];
+		if (r && On(t, r) <= En) {
+			this.points.length >= 2 && this.finish();
+			return;
+		}
+		this.points.push(t), this.renderPreview();
+	};
+	onDblClick = (e) => {
+		this.isChromeTarget(e) || (e.preventDefault(), e.stopPropagation(), this.finish());
+	};
+	onMouseMove = (e) => {
+		this.points.length && (this.cursor = this.toCanvasPoint(e), this.renderPreview());
+	};
+	onKeyDown = (e) => {
+		e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), this.points.length >= 2 ? this.finish() : this.cancel()) : e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), this.finish());
+	};
+	renderPreview() {
+		if (this.clearPreview(), !this.points.length) return;
+		let e = this.canvas.getLayer("wardley-draw-preview", 1e3), t = f("g"), n = this.cursor ? [...this.points, this.cursor] : this.points;
+		l(t, u(f("polyline"), {
+			points: n.map((e) => `${e.x},${e.y}`).join(" "),
+			fill: "none",
+			stroke: g.ink,
+			"stroke-width": 2,
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			"stroke-dasharray": "5 4"
+		}));
+		let r = this.points[0];
+		if (l(t, u(f("circle"), {
+			cx: r.x,
+			cy: r.y,
+			r: this.points.length >= 3 ? 5 : 3,
+			fill: g.paper,
+			stroke: g.ink,
+			"stroke-width": 1.5
+		})), this.points.length >= 2) {
+			let e = this.points[this.points.length - 1];
+			l(t, u(f("circle"), {
+				cx: e.x,
+				cy: e.y,
+				r: 5,
+				fill: g.paper,
+				stroke: g.ink,
+				"stroke-width": 1.5
+			}));
+		}
+		l(e, t), this.layer = t;
+	}
+	clearPreview() {
+		this.layer &&= (p(this.layer), null);
+	}
+};
+function On(e, t) {
+	return Math.hypot(e.x - t.x, e.y - t.y);
+}
+//#endregion
+//#region src/draw-tool/WardleyDrawingHandles.ts
+var kn = class {
+	eventBus;
+	canvas;
+	modeling;
+	grid;
+	static $inject = [
+		"eventBus",
+		"canvas",
+		"wardleyModeling",
+		"evolutionGrid"
+	];
+	shape = null;
+	group = null;
+	dragPreview = null;
+	constructor(e, t, n, r) {
+		this.eventBus = e, this.canvas = t, this.modeling = n, this.grid = r, e.on("selection.changed", (e) => {
+			let t = e.newSelection ?? [], n = t.length === 1 ? t[0] : null;
+			this.attach(y(n) && n.wardleyType === "drawing" ? n : null);
+		}), e.on("element.changed", (e) => {
+			this.shape && e.element === this.shape && this.render();
+		}), e.on(["diagram.clear", "diagram.destroy"], () => this.attach(null));
+	}
+	attach(e) {
+		this.shape = e, this.render();
+	}
+	absolutePoints() {
+		let e = this.shape;
+		return (e.drawingPoints ?? []).map((t) => ({
+			x: e.x + t.x,
+			y: e.y + t.y
+		}));
+	}
+	render() {
+		if (this.clear(), !this.shape) return;
+		let e = this.canvas.getLayer("wardley-drawing-handles", 1100), t = f("g");
+		this.absolutePoints().forEach((e, n) => {
+			let r = u(f("circle"), {
+				cx: e.x,
+				cy: e.y,
+				r: 5,
+				fill: g.paper,
+				stroke: g.ink,
+				"stroke-width": 1.5,
+				class: "wardley-drawing-handle"
+			});
+			r.addEventListener("mousedown", (e) => this.startDrag(e, n)), l(t, r);
+		}), l(e, t), this.group = t;
+	}
+	startDrag(e, t) {
+		if (e.button !== 0 || !this.shape) return;
+		e.preventDefault(), e.stopPropagation();
+		let n = this.shape, r = this.absolutePoints(), i = (e) => {
+			r[t] = this.toCanvasPoint(e), this.renderDragPreview(r, !!n.closed);
+		}, a = (e) => {
+			document.removeEventListener("mousemove", i, !0), document.removeEventListener("mouseup", a, !0), r[t] = this.toCanvasPoint(e), this.clearDragPreview(), this.commit(n, r);
+		};
+		document.addEventListener("mousemove", i, !0), document.addEventListener("mouseup", a, !0);
+	}
+	commit(e, t) {
+		let n = t.map((e) => e.x), r = t.map((e) => e.y), i = Math.min(...n), a = Math.min(...r), o = this.grid.fromCanvas(t[0]);
+		this.modeling.updateProperties(e, {
+			x: i,
+			y: a,
+			width: Math.max(Math.max(...n) - i, 4),
+			height: Math.max(Math.max(...r) - a, 4),
+			drawingPoints: t.map((e) => ({
+				x: e.x - i,
+				y: e.y - a
+			})),
+			evolution: o.evolution,
+			visibility: o.visibility
+		}), this.render();
+	}
+	renderDragPreview(e, t) {
+		this.clearDragPreview();
+		let n = this.canvas.getLayer("wardley-drawing-handles", 1100), r = u(f(t ? "polygon" : "polyline"), {
+			points: e.map((e) => `${e.x},${e.y}`).join(" "),
+			fill: "none",
+			stroke: g.ink,
+			"stroke-width": 1.5,
+			"stroke-dasharray": "5 4",
+			"pointer-events": "none"
+		});
+		l(n, r), this.dragPreview = r;
+	}
+	clearDragPreview() {
+		this.dragPreview &&= (p(this.dragPreview), null);
+	}
+	clear() {
+		this.clearDragPreview(), this.group &&= (p(this.group), null);
+	}
+	toCanvasPoint(e) {
+		let t = this.canvas.getContainer().getBoundingClientRect(), n = this.canvas.viewbox(), r = this.canvas.zoom();
+		return {
+			x: (e.clientX - t.left) / r + n.x,
+			y: (e.clientY - t.top) / r + n.y
+		};
+	}
+};
+//#endregion
+//#region src/draw-tool/WardleyDrawingHitProvider.ts
+function An(e) {
+	return y(e) && e.wardleyType === "drawing";
+}
+var jn = class {
+	static $inject = ["eventBus", "interactionEvents"];
+	constructor(e, t) {
+		e.on("interactionEvents.createHit", (e) => {
+			if (!(!An(e.element) || !e.gfx)) return Mn(e.element, e.gfx), !1;
+		}), e.on("interactionEvents.updateHit", (e) => {
+			if (!(!An(e.element) || !e.gfx)) return t.removeHits(e.gfx), Mn(e.element, e.gfx), !1;
+		});
+	}
+};
+function Mn(e, t) {
+	let n = e.drawingPoints ?? [], r = f(e.closed ? "polygon" : "polyline");
+	u(r, {
+		points: n.map((e) => `${e.x},${e.y}`).join(" "),
+		class: "djs-hit djs-hit-stroke",
+		fill: "none",
+		stroke: "white",
+		"stroke-width": 15,
+		"stroke-opacity": 0
+	}), l(t, r);
+}
+//#endregion
+//#region src/draw-tool/index.ts
+var Nn = {
+	__init__: [
+		"wardleyDrawTool",
+		"wardleyDrawingHandles",
+		"wardleyDrawingHitProvider"
+	],
+	wardleyDrawTool: ["type", Dn],
+	wardleyDrawingHandles: ["type", kn],
+	wardleyDrawingHitProvider: ["type", jn]
+}, Pn = class extends Mt {
 	_getModules() {
 		return [
 			...super._getModules(),
-			ae,
-			de,
 			oe,
+			fe,
 			se,
 			ce,
 			le,
 			ue,
-			fe,
+			de,
 			pe,
 			me,
-			Et,
-			kt,
-			ke,
-			jt,
-			Pt,
-			Rt,
-			Bt,
-			Ut,
-			qt,
-			Lt,
+			he,
+			Gt,
 			Xt,
-			Qt
+			Ge,
+			Qt,
+			en,
+			an,
+			cn,
+			mn,
+			yn,
+			rn,
+			Sn,
+			wn,
+			Kt,
+			Tn,
+			Nn
 		];
 	}
 	undo() {
@@ -1980,6 +2852,6 @@ var $ = class {
 	}
 };
 //#endregion
-export { E as EvolutionGrid, Je as ICON_ADD, Ke as ICON_ASPECT_RATIO, Re as ICON_CODE, Le as ICON_DATA_OBJECT, P as ICON_DELETE, ze as ICON_DOWNLOAD, Ne as ICON_EDIT, Ve as ICON_FOLDER_OPEN, He as ICON_IMAGE, qe as ICON_MENU, Ue as ICON_NEW, N as ICON_PERSON, Ie as ICON_REDO, Be as ICON_SHARE, Fe as ICON_UNDO, Ye as ICON_VISIBILITY, $t as Modeler, xe as NOTE_COLORS, yt as NavigatedViewer, q as POPUP_PROVIDER_ID, _t as PanConstraint, vt as PanConstraintModule, we as ROOT_ID, ut as Viewer, Yt as WardleyAppendBehavior, Ee as WardleyBaseViewer, Zt as WardleyColorPicker, _ as WardleyElementFactory, It as WardleyElementSettingsProvider, $ as WardleyEvolveDragging, ct as WardleyExporter, st as WardleyImporter, zt as WardleyLabelEditing, wt as WardleyModeling, $e as WardleyRenderer, Ot as WardleyRules, ke as evolutionConstraintModule, M as evolutionGridModule, Ze as iconMarkup, lt as ioModule, S as isComponent, C as isPipeline, x as isWardleyConnection, b as isWardleyShape, Bt as labelEditingModule, Ce as saveSVG, jt as stageSnappingModule, Xt as wardleyAppendModule, Qt as wardleyColorPickerModule, Rt as wardleyContextPadModule, it as wardleyDrawModule, qt as wardleyEvolveModule, Ut as wardleyKeyboardModule, w as wardleyModelModule, Et as wardleyModelingModule, Pt as wardleyPaletteModule, Lt as wardleyPopupModule, kt as wardleyRulesModule };
+export { g as COLORS, Re as EvolutionGrid, ut as ICON_ADD, ct as ICON_ASPECT_RATIO, $e as ICON_CODE, Qe as ICON_DATA_OBJECT, O as ICON_DELETE, et as ICON_DOWNLOAD, D as ICON_EDIT, nt as ICON_FOLDER_OPEN, rt as ICON_IMAGE, lt as ICON_MENU, it as ICON_NEW, E as ICON_PERSON, Ze as ICON_REDO, tt as ICON_SHARE, Xe as ICON_UNDO, dt as ICON_VISIBILITY, Pn as Modeler, Te as NOTE_COLORS, Mt as NavigatedViewer, m as PLOT, q as POPUP_PROVIDER_ID, At as PanConstraint, jt as PanConstraintModule, De as ROOT_ID, Ct as Viewer, xn as WardleyAppendBehavior, ke as WardleyBaseViewer, Cn as WardleyColorPicker, Ae as WardleyElementFactory, nn as WardleyElementSettingsProvider, vn as WardleyEvolveDragging, xt as WardleyExporter, bt as WardleyImporter, sn as WardleyLabelEditing, z as WardleyModeling, N as WardleyRenderer, Yt as WardleyRules, Ge as evolutionConstraintModule, T as evolutionGridModule, M as iconMarkup, St as ioModule, Ne as isComponent, x as isPipeline, b as isWardleyConnection, y as isWardleyShape, cn as labelEditingModule, Ee as saveSVG, Qt as stageSnappingModule, Sn as wardleyAppendModule, wn as wardleyColorPickerModule, an as wardleyContextPadModule, _t as wardleyDrawModule, yn as wardleyEvolveModule, mn as wardleyKeyboardModule, Fe as wardleyModelModule, Gt as wardleyModelingModule, en as wardleyPaletteModule, rn as wardleyPopupModule, Xt as wardleyRulesModule };
 
 //# sourceMappingURL=index.js.map