@miragon/wardley-renderer 0.0.0

package/dist/index.js

@@ -0,0 +1,1985 @@
+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";
+//#region src/draw/styles.ts
+var p = {
+	width: 1080,
+	height: 680,
+	marginLeft: 66,
+	marginTop: 38,
+	marginRight: 44,
+	marginBottom: 58
+}, _e = {
+	width: 480,
+	height: 320
+}, ve = 8, ye = 6, be = 7.5;
+function m(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)
+	};
+}
+var h = {
+	paper: "#fbfaf7",
+	ink: "#1b1b1a",
+	inkSoft: "#3a3a37",
+	axis: "#cdc7bb",
+	axisText: "#8c8475",
+	grid: "#ebe7de",
+	band: "rgba(27,27,26,0.022)",
+	stroke: "#1b1b1a",
+	componentFill: "#ffffff",
+	anchorFill: "#1b1b1a",
+	dependency: "#a9a296",
+	accent: "#0e7c74",
+	accentSoft: "rgba(14,124,116,0.12)",
+	flow: "#0e7c74",
+	movement: "#bf2f2a",
+	inertia: "#1b1b1a",
+	noteText: "#4a4640",
+	pipeline: "#1b1b1a"
+}, xe = [
+	{
+		id: "green",
+		name: "Green · good",
+		value: "#15803d"
+	},
+	{
+		id: "amber",
+		name: "Amber · watch",
+		value: "#b45309"
+	},
+	{
+		id: "red",
+		name: "Red · problem",
+		value: "#b91c1c"
+	},
+	{
+		id: "blue",
+		name: "Blue · info",
+		value: "#1d4ed8"
+	},
+	{
+		id: "teal",
+		name: "Teal",
+		value: "#0e7c74"
+	},
+	{
+		id: "purple",
+		name: "Purple · idea",
+		value: "#7e22ce"
+	},
+	{
+		id: "pink",
+		name: "Pink",
+		value: "#be185d"
+	},
+	{
+		id: "slate",
+		name: "Slate · neutral",
+		value: "#475569"
+	}
+], Se = {
+	pioneers: {
+		fill: "rgba(14,124,116,0.07)",
+		stroke: "#0e7c74"
+	},
+	settlers: {
+		fill: "rgba(180,131,30,0.08)",
+		stroke: "#b4831e"
+	},
+	townplanners: {
+		fill: "rgba(120,53,170,0.07)",
+		stroke: "#7835aa"
+	}
+}, g = {
+	family: "'Spline Sans Variable', 'Spline Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
+	label: 13,
+	axis: 12,
+	stage: 12
+};
+//#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) };
+}
+//#endregion
+//#region src/io/types.ts
+var we = "wardley-root";
+//#endregion
+//#region src/WardleyBaseViewer.ts
+function Te(e) {
+	return typeof e == "number" ? `${e}px` : e;
+}
+var Ee = class {
+	_diagram;
+	_container;
+	_options;
+	constructor(e = {}) {
+		this._options = e, this._container = this._createContainer(e);
+	}
+	_createContainer(e) {
+		let t = e.container ?? document.createElement("div");
+		return t.classList.add("wardley-container"), t.style.width = Te(e.width ?? "100%"), t.style.height = Te(e.height ?? (e.container ? "100%" : "600px")), t;
+	}
+	_ensureDiagram() {
+		if (!this._diagram) {
+			let t = [...this._getModules(), ...this._options.additionalModules ?? []];
+			this._diagram = new e({
+				canvas: { container: this._container },
+				modules: t
+			});
+		}
+		return this._diagram;
+	}
+	get(e) {
+		return this._ensureDiagram().get(e);
+	}
+	on(e, t, n = 1e3) {
+		this.get("eventBus").on(e, n, t);
+	}
+	off(e, t) {
+		this.get("eventBus").off(e, t);
+	}
+	async importMap(e) {
+		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 };
+	}
+	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);
+	}
+	exportMap() {
+		return this.get("wardleyExporter").export();
+	}
+	async setMapSize(e, t) {
+		let n = this.exportMap();
+		return this.importMap({
+			...n,
+			config: {
+				...n.config,
+				size: {
+					width: e,
+					height: t
+				}
+			}
+		});
+	}
+	setEvolutionLabels(e) {
+		let t = this.get("canvas"), n;
+		try {
+			n = t.getRootElement();
+		} catch {
+			return;
+		}
+		if (!n || n.id !== "wardley-root") return;
+		let { evolutionLabels: r, ...i } = n.businessObject?.config ?? { title: "Untitled Map" }, a = e ? {
+			...i,
+			evolutionLabels: e
+		} : i;
+		n.businessObject = {
+			...n.businessObject,
+			config: a
+		};
+		let o = this.get("evolutionGrid");
+		o.configure(a), o.render(), this.get("eventBus").fire("wardley.config.changed", { config: a });
+	}
+	exportDSL() {
+		return n(this.exportMap());
+	}
+	async saveSVG() {
+		return Ce(this.get("canvas"));
+	}
+	attachTo(e) {
+		e.appendChild(this._container), this.get("canvas").resized();
+	}
+	detach() {
+		this._container.remove();
+	}
+	clear() {
+		this._ensureDiagram().clear();
+	}
+	destroy() {
+		this._diagram &&= (this._diagram.destroy(), void 0), this._container.remove();
+	}
+	get container() {
+		return this._container;
+	}
+}, _ = class {
+	elementFactory;
+	grid;
+	elementRegistry;
+	static $inject = [
+		"elementFactory",
+		"evolutionGrid",
+		"elementRegistry"
+	];
+	constructor(e, t, n) {
+		this.elementFactory = e, this.grid = t, this.elementRegistry = n;
+	}
+	uniqueLabel(e, t) {
+		let n = /* @__PURE__ */ new Set();
+		for (let e of this.elementRegistry.getAll()) {
+			if (t && e.id === t) continue;
+			let r = e.wardleyLabel;
+			typeof r == "string" && n.add(r);
+		}
+		if (!n.has(e)) return e;
+		let r = 2;
+		for (; n.has(`${e} ${r}`);) r++;
+		return `${e} ${r}`;
+	}
+	createComponent(e) {
+		return this.node("component", e.id, e.label, e.position.visibility, e.position.evolution, e, {
+			...e.decorators ? { decorators: e.decorators } : {},
+			...e.movement ? { movement: e.movement } : {}
+		});
+	}
+	createAnchor(e) {
+		return this.node("anchor", e.id, e.label, e.position.visibility, e.position.evolution, e);
+	}
+	createNote(e) {
+		let { width: t, height: n } = m(e.label), r = this.grid.toCanvas(e.position);
+		return this.elementFactory.createShape({
+			id: e.id,
+			x: r.x - t / 2,
+			y: r.y - n / 2,
+			width: t,
+			height: n,
+			wardleyType: "note",
+			wardleyLabel: e.label,
+			evolution: e.position.evolution,
+			visibility: e.position.visibility,
+			businessObject: e,
+			...e.color ? { color: e.color } : {}
+		});
+	}
+	createPipeline(e) {
+		let t = this.grid.toCanvas({
+			visibility: e.position.visibility,
+			evolution: e.evolutionStart
+		}), n = this.grid.toCanvas({
+			visibility: e.position.visibility,
+			evolution: e.evolutionEnd
+		}), r = Math.max(n.x - t.x, 2);
+		return this.elementFactory.createShape({
+			id: e.id,
+			x: t.x,
+			y: t.y - 30 / 2,
+			width: r,
+			height: 30,
+			wardleyType: "pipeline",
+			wardleyLabel: e.label,
+			evolution: e.position.evolution,
+			visibility: e.position.visibility,
+			evolutionStart: e.evolutionStart,
+			evolutionEnd: e.evolutionEnd,
+			isFrame: !0,
+			businessObject: e
+		});
+	}
+	createAnnotation(e) {
+		let t = e.positions[0] ?? e.position;
+		return this.node("annotation", e.id, e.text, t.visibility, t.evolution, e, { annotationNumber: e.number });
+	}
+	createAccelerator(e) {
+		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);
+		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),
+			wardleyType: "attitude",
+			wardleyLabel: e.label || e.kind,
+			attitudeKind: e.kind,
+			evolution: e.position.evolution,
+			visibility: e.position.visibility,
+			isFrame: !0,
+			businessObject: e
+		});
+	}
+	createSubmap(e) {
+		return this.node("submap", e.id, e.label, e.position.visibility, e.position.evolution, e);
+	}
+	createNew(e, t, n = {}) {
+		let r = this.uniqueLabel(t);
+		if (e === "pipeline") return this.elementFactory.createShape({
+			width: 200,
+			height: 30,
+			wardleyType: "pipeline",
+			wardleyLabel: r,
+			evolution: .5,
+			visibility: .5,
+			evolutionStart: .4,
+			evolutionEnd: .6,
+			isFrame: !0
+		});
+		if (e === "attitude") return this.elementFactory.createShape({
+			width: 180,
+			height: 48,
+			wardleyType: "attitude",
+			wardleyLabel: r,
+			attitudeKind: n.attitudeKind ?? "pioneers",
+			evolution: .5,
+			visibility: .5,
+			isFrame: !0
+		});
+		if (e === "note") {
+			let { width: e, height: t } = m(r);
+			return this.elementFactory.createShape({
+				width: e,
+				height: t,
+				wardleyType: "note",
+				wardleyLabel: r,
+				evolution: .5,
+				visibility: .5
+			});
+		}
+		let i = n.market ? { market: !0 } : n.ecosystem ? { ecosystem: !0 } : void 0;
+		return this.elementFactory.createShape({
+			width: 34,
+			height: 34,
+			wardleyType: e,
+			wardleyLabel: r,
+			evolution: .5,
+			visibility: .5,
+			...n.acceleratorDirection ? { acceleratorDirection: n.acceleratorDirection } : {},
+			...n.annotationNumber === void 0 ? {} : { annotationNumber: n.annotationNumber },
+			...i ? { decorators: i } : {}
+		});
+	}
+	createDependency(e, t, n) {
+		return this.connection("dependency", e, t, n);
+	}
+	createFlow(e, t, n) {
+		let r = e.edgeType === "flow" && e.bidirectional === !0;
+		return this.connection("flow", e, t, n, r);
+	}
+	node(e, t, n, r, i, a, o = {}) {
+		let s = this.grid.toCanvas({
+			visibility: r,
+			evolution: i
+		});
+		return this.elementFactory.createShape({
+			id: t,
+			x: s.x - 34 / 2,
+			y: s.y - 34 / 2,
+			width: 34,
+			height: 34,
+			wardleyType: e,
+			wardleyLabel: n,
+			evolution: i,
+			visibility: r,
+			businessObject: a,
+			...o
+		});
+	}
+	connection(e, t, n, r, i = !1) {
+		let a = t.edgeType === "flow" ? t.flowValue : void 0;
+		return this.elementFactory.createConnection({
+			id: t.id,
+			source: n,
+			target: r,
+			waypoints: [v(n), v(r)],
+			wardleyType: e,
+			bidirectional: i,
+			...a ? { flowValue: a } : {},
+			...t.label ? { linkLabel: t.label } : {},
+			businessObject: t
+		});
+	}
+};
+function v(e) {
+	return {
+		x: e.x + e.width / 2,
+		y: e.y + e.height / 2
+	};
+}
+//#endregion
+//#region src/model/di-types.ts
+function y(e) {
+	return typeof e == "object" && !!e;
+}
+function b(e) {
+	return y(e) && typeof e.wardleyType == "string" && "evolution" in e;
+}
+function x(e) {
+	return y(e) && typeof e.wardleyType == "string" && "waypoints" in e;
+}
+function S(e) {
+	return b(e) && e.wardleyType === "component";
+}
+function C(e) {
+	return b(e) && e.wardleyType === "pipeline";
+}
+//#endregion
+//#region src/model/index.ts
+var w = { wardleyElementFactory: ["type", _] }, De = "wardley-axes";
+function T(e) {
+	return e < 0 ? 0 : e > 1 ? 1 : e;
+}
+var E = class {
+	canvas;
+	static $inject = ["canvas"];
+	boundaries = l;
+	labels = c;
+	yAxisLabel = "Value Chain";
+	plotWidth = p.width;
+	plotHeight = p.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);
+	}
+	toCanvas(e) {
+		return {
+			x: p.marginLeft + e.evolution * this.plotWidth,
+			y: p.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)
+		};
+	}
+	stageOf(e) {
+		return u(e, this.boundaries);
+	}
+	getBoundaries() {
+		return this.boundaries;
+	}
+	getPlotSize() {
+		return {
+			width: this.plotWidth,
+			height: this.plotHeight
+		};
+	}
+	outerBounds() {
+		return {
+			x: 0,
+			y: 0,
+			width: p.marginLeft + this.plotWidth + p.marginRight,
+			height: p.marginTop + this.plotHeight + p.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 c = [
+			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,
+				stroke: "none"
+			})), i > 0 && r(e, O(a, n, a, s, {
+				stroke: h.grid,
+				"stroke-dasharray": "3 5"
+			}));
+			let l = (a + o) / 2;
+			r(e, k(this.labels[i].toUpperCase(), l, s + 18, {
+				"text-anchor": "middle",
+				"font-size": g.stage,
+				"letter-spacing": "0.08em",
+				fill: h.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, {
+			"text-anchor": "end",
+			"font-size": g.axis,
+			fill: h.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, {
+			"text-anchor": "middle",
+			"font-size": g.axis,
+			fill: h.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, {
+			"text-anchor": "end",
+			"font-size": g.stage,
+			fill: h.axisText
+		})), r(e, k("invisible", t - 10, s - 2, {
+			"text-anchor": "end",
+			"font-size": g.stage,
+			fill: h.axisText
+		}));
+	}
+};
+function D(e, t, n, r, a) {
+	return i(o("rect"), {
+		x: e,
+		y: t,
+		width: n,
+		height: r,
+		"stroke-width": 1,
+		...a
+	});
+}
+function O(e, t, n, r, a) {
+	return i(o("line"), {
+		x1: e,
+		y1: t,
+		x2: n,
+		y2: r,
+		"stroke-width": 1,
+		...a
+	});
+}
+function k(e, t, n, r) {
+	let a = i(o("text"), {
+		x: t,
+		y: n,
+		"font-family": g.family,
+		...r
+	});
+	return a.textContent = e, a;
+}
+function A(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"), {
+		points: r,
+		fill: h.axis
+	});
+}
+//#endregion
+//#region src/evolution-grid/EvolutionConstraintBehavior.ts
+var j = [
+	"shape.move",
+	"shape.create",
+	"shape.resize",
+	"elements.move",
+	"elements.create"
+], Oe = class extends f {
+	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);
+	}
+	syncAll(e) {
+		if (!e) return;
+		let t = [
+			...e.shape ? [e.shape] : [],
+			...e.shapes ?? [],
+			...e.elements ?? []
+		];
+		for (let e of t) b(e) && this.syncFromGeometry(e);
+	}
+	syncFromGeometry(e) {
+		let t = e.y + e.height / 2;
+		if (e.wardleyType === "pipeline") {
+			let n = this.grid.fromCanvas({
+				x: e.x,
+				y: t
+			}), r = this.grid.fromCanvas({
+				x: e.x + e.width,
+				y: t
+			});
+			e.evolutionStart = n.evolution, e.evolutionEnd = Math.max(r.evolution, n.evolution + .001), e.evolution = (e.evolutionStart + e.evolutionEnd) / 2, e.visibility = n.visibility;
+			return;
+		}
+		if (e.wardleyType === "attitude") {
+			let t = this.grid.fromCanvas({
+				x: e.x,
+				y: e.y
+			});
+			e.evolution = t.evolution, e.visibility = t.visibility;
+			return;
+		}
+		let n = this.grid.fromCanvas({
+			x: e.x + e.width / 2,
+			y: t
+		});
+		e.evolution = n.evolution, e.visibility = n.visibility;
+	}
+}, M = { evolutionGrid: ["type", E] }, ke = {
+	__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,
+		stroke: "none"
+	}), r(c, i(o("path"), { d: e })), c;
+}
+function Ze(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 {
+	grid;
+	static $inject = ["eventBus", "evolutionGrid"];
+	constructor(e, t) {
+		super(e, Qe), this.grid = t;
+	}
+	canRender(e) {
+		return b(e) || x(e);
+	}
+	drawShape(e, t) {
+		let n = t;
+		switch (n.wardleyType) {
+			case "pipeline": return this.drawPipeline(e, n);
+			case "anchor": return this.drawAnchor(e, n);
+			case "note": return this.drawNote(e, n);
+			case "attitude": return this.drawAttitude(e, n);
+			case "annotation": return this.drawAnnotation(e, n);
+			case "accelerator": return this.drawAccelerator(e, n);
+			case "submap": return this.drawSubmap(e, n);
+			default: return this.drawComponent(e, n);
+		}
+	}
+	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}`,
+			fill: "none",
+			stroke: s,
+			"stroke-width": a ? 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, {
+			"text-anchor": "middle",
+			"font-size": 11,
+			fill: h.flow
+		})), n.linkLabel && r(e, I(n.linkLabel, d, f + (n.flowValue ? 12 : -4), {
+			"text-anchor": "middle",
+			"font-size": 11,
+			"font-style": "italic",
+			fill: h.axisText
+		})), u;
+	}
+	getShapePath(e) {
+		let { x: t, y: n, width: r, height: i } = e;
+		return `M${t},${n}l${r},0l0,${i}l${-r},0z`;
+	}
+	getConnectionPath(e) {
+		let [t, ...n] = e.waypoints;
+		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;
+		if (t.movement) {
+			let 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({
+				x: n,
+				y: i
+			}, {
+				x: n + o,
+				y: i
+			}, h.movement)), r(e, F(n + o, i, 15, {
+				fill: h.paper,
+				stroke: h.movement,
+				"stroke-width": 2,
+				class: "wardley-evolve-handle"
+			}));
+		}
+		if (o?.inertia) {
+			let t = n + 15 + 3;
+			r(e, et(t, i - 13, t, i + 13, {
+				stroke: h.inertia,
+				"stroke-width": 3,
+				"stroke-linecap": "round"
+			}));
+		}
+		let s = F(n, i, 15, {
+			fill: h.componentFill,
+			stroke: h.stroke,
+			"stroke-width": 2
+		});
+		return r(e, s), a && r(e, F(n, i, 12, {
+			fill: "none",
+			stroke: h.stroke,
+			"stroke-width": 1.5
+		})), o?.ecosystem ? r(e, F(n, i, 4.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, {
+			"font-size": 10.5,
+			fill: h.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, {
+			"text-anchor": "middle",
+			"font-weight": "700"
+		})), a;
+	}
+	drawPipeline(e, t) {
+		let n = i(o("rect"), {
+			x: 0,
+			y: 0,
+			width: Math.max(t.width, 1),
+			height: Math.max(t.height, 1),
+			rx: 4,
+			fill: h.accentSoft,
+			stroke: h.pipeline,
+			"stroke-width": 1.25,
+			"stroke-dasharray": "6 3"
+		});
+		return r(e, n), r(e, I(t.wardleyLabel, 4, -6, { "font-weight": "500" })), n;
+	}
+	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 = {
+			"text-anchor": "middle",
+			fill: n ?? h.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");
+	}
+	drawAttitude(e, t) {
+		let n = Se[t.attitudeKind ?? "pioneers"] ?? {
+			fill: "rgba(0,0,0,0.05)",
+			stroke: "#666666"
+		}, a = i(o("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-width": 1.25,
+			"stroke-dasharray": "5 4"
+		});
+		return r(e, a), r(e, I(rt(t.attitudeKind ?? t.wardleyLabel), 10, 18, {
+			fill: n.stroke,
+			"font-weight": "700",
+			"letter-spacing": "0.04em"
+		})), a;
+	}
+	drawAnnotation(e, t) {
+		let n = t.width / 2, i = t.height / 2, a = F(n, i, 10, {
+			fill: "#fff8e6",
+			stroke: h.stroke,
+			"stroke-width": 1.25
+		});
+		return r(e, a), r(e, I(String(t.annotationNumber ?? ""), n, i + 4, {
+			"text-anchor": "middle",
+			"font-size": 11,
+			"font-weight": "700"
+		}, !1)), t.wardleyLabel && r(e, I(t.wardleyLabel, n + 15, i + 4, {
+			"font-size": 12,
+			fill: h.noteText
+		})), a;
+	}
+	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;
+	}
+	drawSubmap(e, t) {
+		let n = t.width / 2, a = t.height / 2, s = i(o("rect"), {
+			x: n - 16,
+			y: a - 16,
+			width: 32,
+			height: 32,
+			rx: 3,
+			fill: h.componentFill,
+			stroke: h.stroke,
+			"stroke-width": 2
+		});
+		return r(e, s), r(e, i(o("rect"), {
+			x: n - 16 + 3,
+			y: a - 16 + 3,
+			width: 26,
+			height: 26,
+			rx: 1.5,
+			fill: "none",
+			stroke: h.stroke,
+			"stroke-width": 1
+		})), r(e, I(t.wardleyLabel, n + 16 + 6, a - 6, { "font-weight": "500" })), s;
+	}
+};
+function F(e, t, n, r) {
+	return i(o("circle"), {
+		cx: e,
+		cy: t,
+		r: n,
+		"stroke-width": 1,
+		...r
+	});
+}
+function et(e, t, n, r, a) {
+	return i(o("line"), {
+		x1: e,
+		y1: t,
+		x2: n,
+		y2: r,
+		...a
+	});
+}
+function I(e, t, n, r = {}, a = !0) {
+	let s = a ? {
+		stroke: h.paper,
+		"stroke-width": 3.5,
+		"paint-order": "stroke",
+		"stroke-linejoin": "round"
+	} : {}, c = i(o("text"), {
+		x: t,
+		y: n,
+		"font-family": g.family,
+		"font-size": g.label,
+		fill: h.ink,
+		...s,
+		...r
+	});
+	return c.textContent = e, c;
+}
+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,
+		fill: n
+	});
+}
+function tt(e) {
+	return e.wardleyType === "component" ? 17 : e.wardleyType === "anchor" ? 14 : Math.min(e.width, e.height) / 2;
+}
+function nt(e) {
+	let t = e.source, n = e.target, r = e.waypoints;
+	if (!t || !n) {
+		let e = r[0] ?? {
+			x: 0,
+			y: 0
+		};
+		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);
+	return c <= d + f + 2 ? [i, a] : [{
+		x: i.x + l * d,
+		y: i.y + u * d
+	}, {
+		x: a.x - l * f,
+		y: a.y - u * f
+	}];
+}
+function rt(e) {
+	return e && e.charAt(0).toUpperCase() + e.slice(1);
+}
+//#endregion
+//#region src/draw/index.ts
+var it = {
+	__init__: ["wardleyRenderer"],
+	wardleyRenderer: ["type", $e]
+}, at = new Set(["attitude", "pipeline"]), ot = {
+	attitude: 0,
+	pipeline: 1,
+	note: 2,
+	component: 3,
+	anchor: 4,
+	annotation: 5,
+	submap: 3,
+	accelerator: 3
+}, st = class {
+	canvas;
+	elementFactory;
+	factory;
+	grid;
+	eventBus;
+	elementRegistry;
+	static $inject = [
+		"canvas",
+		"elementFactory",
+		"wardleyElementFactory",
+		"evolutionGrid",
+		"eventBus",
+		"elementRegistry"
+	];
+	constructor(e, t, n, r, i, a) {
+		this.canvas = e, this.elementFactory = t, this.factory = n, this.grid = r, this.eventBus = i, this.elementRegistry = a;
+	}
+	import(e) {
+		let t = [];
+		this.eventBus.fire("import.render.start", { map: e }), this.grid.configure(e.config);
+		let n = {
+			config: e.config,
+			...e.rawPassthrough ? { rawPassthrough: e.rawPassthrough } : {}
+		}, r;
+		try {
+			r = this.canvas.getRootElement();
+		} catch {
+			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;
+		for (let e of s) {
+			let t = this.createShape(e);
+			t && (this.canvas.addShape(t, i), a.set(e.id, t), l++);
+		}
+		for (let e of c) {
+			let t = this.createShape(e);
+			t && (this.canvas.addShape(t, i), a.set(e.id, t));
+		}
+		for (let n of e.edges) {
+			let e = a.get(n.from), r = a.get(n.to);
+			if (!e || !r) {
+				t.push({
+					message: `Edge ${n.id}: endpoint missing.`,
+					elementId: n.id
+				});
+				continue;
+			}
+			let o = n.edgeType === "flow" ? this.factory.createFlow(n, e, r) : this.factory.createDependency(n, e, r);
+			this.canvas.addConnection(o, i, l);
+		}
+		return this.canvas.viewbox(this.grid.outerBounds()), this.eventBus.fire("import.render.done", { warnings: t }), t;
+	}
+	createShape(e) {
+		switch (e.elementType) {
+			case "component": return this.factory.createComponent(e);
+			case "anchor": return this.factory.createAnchor(e);
+			case "note": return this.factory.createNote(e);
+			case "pipeline": return this.factory.createPipeline(e);
+			case "annotation": return this.factory.createAnnotation(e);
+			case "attitude": return this.factory.createAttitude(e);
+			case "accelerator": return this.factory.createAccelerator(e);
+			case "submap": return this.factory.createSubmap(e);
+			default: return;
+		}
+	}
+	clear() {
+		for (let e of [...this.elementRegistry.getAll()]) {
+			let t = e;
+			if (t.id !== "wardley-root") try {
+				t.waypoints ? this.canvas.removeConnection(t.id) : this.canvas.removeShape(t.id);
+			} catch {}
+		}
+	}
+};
+//#endregion
+//#region src/io/WardleyExporter.ts
+function R(e) {
+	let t = {};
+	for (let [n, r] of Object.entries(e)) r !== void 0 && (t[n] = r);
+	return t;
+}
+var ct = class {
+	elementRegistry;
+	canvas;
+	static $inject = ["elementRegistry", "canvas"];
+	constructor(e, t) {
+		this.elementRegistry = e, this.canvas = t;
+	}
+	export() {
+		let e = this.canvas.getRootElement().businessObject, t = e?.config ?? { title: "Untitled Map" }, n = [], r = [];
+		for (let e of this.elementRegistry.getAll()) if (e.id !== "wardley-root") {
+			if (x(e)) if (e.businessObject) r.push(e.businessObject);
+			else {
+				let t = {
+					id: e.id,
+					from: e.source?.id ?? "",
+					to: e.target?.id ?? ""
+				};
+				r.push(e.wardleyType === "flow" ? {
+					...t,
+					edgeType: "flow",
+					...e.bidirectional ? { bidirectional: !0 } : {}
+				} : {
+					...t,
+					edgeType: "dependency"
+				});
+			}
+			else if (b(e)) {
+				let t = this.buildElement(e);
+				t && n.push(t);
+			}
+		}
+		return d({
+			schemaVersion: s,
+			config: t,
+			elements: n,
+			edges: r,
+			...e?.rawPassthrough ? { rawPassthrough: e.rawPassthrough } : {}
+		});
+	}
+	buildElement(e) {
+		let t = {
+			visibility: e.visibility,
+			evolution: e.evolution
+		}, n = e.businessObject;
+		switch (e.wardleyType) {
+			case "component": return R({
+				id: e.id,
+				elementType: "component",
+				label: e.wardleyLabel,
+				position: t,
+				decorators: e.decorators,
+				movement: e.movement,
+				pipelineId: n?.pipelineId
+			});
+			case "anchor": return {
+				id: e.id,
+				elementType: "anchor",
+				label: e.wardleyLabel,
+				position: t
+			};
+			case "note": return R({
+				id: e.id,
+				elementType: "note",
+				label: e.wardleyLabel,
+				position: t,
+				patternType: n?.patternType,
+				color: e.color
+			});
+			case "pipeline": return {
+				id: e.id,
+				elementType: "pipeline",
+				label: e.wardleyLabel,
+				position: t,
+				evolutionStart: e.evolutionStart ?? 0,
+				evolutionEnd: e.evolutionEnd ?? 1,
+				childIds: n?.childIds ?? []
+			};
+			case "attitude": return {
+				id: e.id,
+				elementType: "attitude",
+				kind: e.attitudeKind ?? "pioneers",
+				label: e.wardleyLabel,
+				position: t,
+				width: e.width,
+				height: e.height
+			};
+			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
+			};
+			case "submap": return R({
+				id: e.id,
+				elementType: "submap",
+				label: e.wardleyLabel,
+				position: t,
+				urlRef: n?.urlRef
+			});
+			default: return e.wardleyType, n ? {
+				...n,
+				position: t
+			} : void 0;
+		}
+	}
+}, lt = {
+	wardleyImporter: ["type", st],
+	wardleyExporter: ["type", ct]
+}, ut = class extends Ee {
+	_getModules() {
+		return [
+			w,
+			M,
+			it,
+			lt
+		];
+	}
+}, 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;
+}
+var _t = class {
+	canvas;
+	grid;
+	static $inject = [
+		"eventBus",
+		"canvas",
+		"evolutionGrid"
+	];
+	applying = !1;
+	constructor(e, t, n) {
+		this.canvas = t, this.grid = n, e.on("canvas.viewbox.changed", (e) => {
+			this.applying || this.constrain(e?.viewbox);
+		});
+	}
+	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)) {
+			this.applying = !0;
+			try {
+				this.canvas.viewbox({
+					x: r,
+					y: i,
+					width: t.width,
+					height: t.height
+				});
+			} finally {
+				this.applying = !1;
+			}
+		}
+	}
+}, vt = {
+	__init__: ["panConstraint"],
+	panConstraint: ["type", _t]
+}, yt = class extends ut {
+	_getModules() {
+		return [
+			...super._getModules(),
+			te,
+			ne,
+			re,
+			ie,
+			vt
+		];
+	}
+};
+//#endregion
+//#region src/modeling/cmd/UpdatePropertiesHandler.ts
+function bt(e, t, n) {
+	n === void 0 ? delete e[t] : e[t] = n;
+}
+var xt = 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]);
+		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]);
+		return [t];
+	}
+}, St = "element.updateProperties";
+function Ct(e) {
+	let t = {};
+	for (let [n, r] of Object.entries(e)) r !== void 0 && (t[n] = r);
+	return t;
+}
+var wt = class {
+	commandStack;
+	static $inject = ["commandStack"];
+	constructor(e) {
+		this.commandStack = e, e.registerHandler(St, xt);
+	}
+	updateProperties(e, t) {
+		this.commandStack.execute(St, {
+			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;
+			this.updateProperties(e, {
+				wardleyLabel: t,
+				width: n,
+				height: r,
+				x: i - n / 2,
+				y: a - r / 2
+			});
+			return;
+		}
+		this.updateProperties(e, { wardleyLabel: t });
+	}
+	evolveComponent(e, t, n = {}) {
+		this.updateProperties(e, { movement: Ct({
+			targetEvolution: Tt(t),
+			newLabel: n.newLabel,
+			method: n.method
+		}) });
+	}
+	clearMovement(e) {
+		this.updateProperties(e, { movement: void 0 });
+	}
+	toggleInertia(e) {
+		let t = { ...e.decorators ?? {} };
+		t.inertia ? delete t.inertia : t.inertia = !0, this.updateProperties(e, { decorators: Object.keys(t).length ? t : void 0 });
+	}
+	setMethod(e, t) {
+		let n = { ...e.decorators ?? {} };
+		t ? n.method = t : delete n.method, this.updateProperties(e, { decorators: Object.keys(n).length ? n : void 0 });
+	}
+	setMarketEcosystem(e, t) {
+		let n = { ...e.decorators ?? {} };
+		delete n.market, delete n.ecosystem, t && (n[t] = !0), this.updateProperties(e, { decorators: Object.keys(n).length ? n : void 0 });
+	}
+	setColor(e, t) {
+		this.updateProperties(e, { color: t });
+	}
+};
+function Tt(e) {
+	return e < 0 ? 0 : e > 1 ? 1 : e;
+}
+//#endregion
+//#region src/modeling/index.ts
+var Et = {
+	__init__: ["wardleyModeling"],
+	wardleyModeling: ["type", wt]
+}, Dt = new Set(["component", "anchor"]);
+function z(e) {
+	return b(e) && Dt.has(e.wardleyType);
+}
+var Ot = class extends he {
+	static $inject = ["eventBus"];
+	constructor(e) {
+		super(e);
+	}
+	init() {
+		this.addRule("connection.start", (e) => z(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));
+	}
+}, kt = {
+	__init__: ["wardleyRules"],
+	wardleyRules: ["type", Ot]
+}, At = 8, jt = {
+	__init__: ["stageSnapping"],
+	stageSnapping: ["type", class {
+		static $inject = ["eventBus", "evolutionGrid"];
+		constructor(e, t) {
+			e.on([
+				"shape.move.move",
+				"shape.move.end",
+				"create.move",
+				"create.end",
+				"shape.resize.move",
+				"shape.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;
+				}
+			});
+		}
+	}]
+}, 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"/>`)
+};
+function W(e) {
+	let t = Se[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"/>`);
+}
+//#endregion
+//#region src/palette/WardleyPaletteProvider.ts
+var G = "wardley-1-blocks", K = "wardley-2-strategy", Mt = "wardley-3-notes", Nt = [
+	{
+		key: "component",
+		type: "component",
+		label: "Component",
+		title: "Component",
+		icon: U.component,
+		group: G
+	},
+	{
+		key: "market",
+		type: "component",
+		label: "Market",
+		title: "Market component",
+		icon: U.market,
+		group: G,
+		extra: { market: !0 }
+	},
+	{
+		key: "ecosystem",
+		type: "component",
+		label: "Ecosystem",
+		title: "Ecosystem component",
+		icon: U.ecosystem,
+		group: G,
+		extra: { ecosystem: !0 }
+	},
+	{
+		key: "anchor",
+		type: "anchor",
+		label: "User",
+		title: "Anchor / User",
+		icon: U.anchor,
+		group: G
+	},
+	{
+		key: "pipeline",
+		type: "pipeline",
+		label: "Pipeline",
+		title: "Pipeline",
+		icon: U.pipeline,
+		group: G
+	},
+	{
+		key: "submap",
+		type: "submap",
+		label: "Submap",
+		title: "Submap",
+		icon: U.submap,
+		group: G
+	},
+	{
+		key: "pioneers",
+		type: "attitude",
+		label: "Pioneers",
+		title: "Pioneers region",
+		icon: W("pioneers"),
+		group: K,
+		extra: { attitudeKind: "pioneers" }
+	},
+	{
+		key: "settlers",
+		type: "attitude",
+		label: "Settlers",
+		title: "Settlers region",
+		icon: W("settlers"),
+		group: K,
+		extra: { attitudeKind: "settlers" }
+	},
+	{
+		key: "townplanners",
+		type: "attitude",
+		label: "Town Planners",
+		title: "Town Planners region",
+		icon: W("townplanners"),
+		group: K,
+		extra: { attitudeKind: "townplanners" }
+	},
+	{
+		key: "accelerator",
+		type: "accelerator",
+		label: "Accelerate",
+		title: "Accelerator",
+		icon: U.accelerator,
+		group: K,
+		extra: { acceleratorDirection: "accelerate" }
+	},
+	{
+		key: "deaccelerator",
+		type: "accelerator",
+		label: "Deaccelerate",
+		title: "Deaccelerator",
+		icon: U.deaccelerator,
+		group: K,
+		extra: { acceleratorDirection: "deaccelerate" }
+	},
+	{
+		key: "note",
+		type: "note",
+		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 = {
+	__init__: ["wardleyPaletteProvider"],
+	wardleyPaletteProvider: ["type", class {
+		create;
+		factory;
+		static $inject = [
+			"palette",
+			"create",
+			"wardleyElementFactory"
+		];
+		constructor(e, t, n) {
+			this.create = t, this.factory = n, e.registerProvider(this);
+		}
+		getPaletteEntries() {
+			let e = {};
+			for (let t of Nt) {
+				let n = (e) => {
+					let n = this.factory.createNew(t.type, t.label, t.extra ?? {});
+					this.create.start(e, n);
+				};
+				e[`create.${t.key}`] = {
+					group: t.group,
+					title: t.title,
+					html: `<div class="entry wardley-palette-entry" draggable="true" title="${t.title}">${t.icon}</div>`,
+					action: {
+						dragstart: n,
+						click: n
+					}
+				};
+			}
+			return e;
+		}
+	}]
+}, q = "wardley-element-settings", J = {
+	id: "type",
+	name: "Type"
+}, Y = {
+	id: "method",
+	name: "Sourcing"
+}, Ft = {
+	id: "props",
+	name: "Properties"
+};
+function X(e, t) {
+	return e ? `✓ ${t}` : t;
+}
+var It = class {
+	modeling;
+	static $inject = ["popupMenu", "wardleyModeling"];
+	constructor(e, t) {
+		this.modeling = t, e.registerProvider(q, this);
+	}
+	getPopupMenuEntries(e) {
+		let t = Array.isArray(e) ? e[0] : e;
+		return S(t) ? this.componentEntries(t) : {};
+	}
+	componentEntries(e) {
+		let t = e.decorators ?? {}, n = t.ecosystem ? "ecosystem" : t.market ? "market" : "normal", r = t.method;
+		return {
+			"type-normal": {
+				label: X(n === "normal", "Normal"),
+				group: J,
+				action: () => this.modeling.setMarketEcosystem(e, void 0)
+			},
+			"type-market": {
+				label: X(n === "market", "Market"),
+				group: J,
+				action: () => this.modeling.setMarketEcosystem(e, "market")
+			},
+			"type-ecosystem": {
+				label: X(n === "ecosystem", "Ecosystem"),
+				group: J,
+				action: () => this.modeling.setMarketEcosystem(e, "ecosystem")
+			},
+			"method-none": {
+				label: X(!r, "None"),
+				group: Y,
+				action: () => this.modeling.setMethod(e, void 0)
+			},
+			"method-build": {
+				label: X(r === "build", "Build"),
+				group: Y,
+				action: () => this.modeling.setMethod(e, "build")
+			},
+			"method-buy": {
+				label: X(r === "buy", "Buy"),
+				group: Y,
+				action: () => this.modeling.setMethod(e, "buy")
+			},
+			"method-outsource": {
+				label: X(r === "outsource", "Outsource"),
+				group: Y,
+				action: () => this.modeling.setMethod(e, "outsource")
+			},
+			"prop-inertia": {
+				label: X(!!t.inertia, "Inertia"),
+				group: Ft,
+				action: () => this.modeling.toggleInertia(e)
+			}
+		};
+	}
+}, Lt = {
+	__init__: ["wardleyElementSettings"],
+	wardleyElementSettings: ["type", It]
+};
+//#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>`;
+}
+//#endregion
+//#region src/context-pad/index.ts
+var Rt = {
+	__init__: ["wardleyContextPadProvider"],
+	wardleyContextPadProvider: ["type", class {
+		modeling;
+		connect;
+		create;
+		popupMenu;
+		wardleyModeling;
+		labelEditing;
+		evolveDragging;
+		factory;
+		colorPicker;
+		static $inject = [
+			"contextPad",
+			"modeling",
+			"connect",
+			"create",
+			"popupMenu",
+			"wardleyModeling",
+			"wardleyLabelEditing",
+			"wardleyEvolveDragging",
+			"wardleyElementFactory",
+			"wardleyColorPicker"
+		];
+		constructor(e, t, n, r, i, a, o, s, c, l) {
+			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 {};
+			let t = e, n = {};
+			if (t.wardleyType === "component" || t.wardleyType === "anchor") {
+				let e = (e) => {
+					let n = this.factory.createNew("component", "Component");
+					this.create.start(e, n, { source: t });
+				};
+				n.append = {
+					group: "edit",
+					title: "Append component (auto-connect)",
+					html: Z(Ae, "Append component", !0),
+					action: {
+						click: e,
+						dragstart: e
+					}
+				};
+				let r = (e) => {
+					this.connect.start(e, t);
+				};
+				n.connect = {
+					group: "edit",
+					title: "Connect to existing element",
+					html: Z(je, "Connect to existing element", !0),
+					action: {
+						click: r,
+						dragstart: r
+					}
+				};
+			}
+			if (t.wardleyType === "component") {
+				if (t.movement) n["evolve-clear"] = {
+					group: "wardley",
+					title: "Remove evolve",
+					html: Z(Pe, "Remove evolve"),
+					action: { click: () => this.wardleyModeling.clearMovement(t) }
+				};
+				else {
+					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),
+						action: {
+							click: e,
+							dragstart: e
+						}
+					};
+				}
+				n.settings = {
+					group: "wardley",
+					title: "Settings (type, sourcing, inertia)",
+					html: Z(We, "Settings"),
+					action: { click: (e) => {
+						let n = e;
+						this.popupMenu.open(t, q, {
+							x: n.clientX,
+							y: n.clientY
+						});
+					} }
+				};
+			}
+			return t.wardleyType === "note" && (n.color = {
+				group: "wardley",
+				title: "Note color",
+				html: Z(Ge, "Note color"),
+				action: { click: (e) => {
+					let n = e;
+					this.colorPicker.open(t, n.clientX, n.clientY);
+				} }
+			}), n["edit-label"] = {
+				group: "edit",
+				title: "Edit label",
+				html: Z(Ne, "Edit label"),
+				action: { click: () => this.labelEditing.activate(t) }
+			}, n.delete = {
+				group: "edit",
+				title: "Delete",
+				html: Z(P, "Delete"),
+				action: { click: () => this.modeling.removeElements([t]) }
+			}, n;
+		}
+	}]
+}, zt = class {
+	canvas;
+	modeling;
+	factory;
+	static $inject = [
+		"eventBus",
+		"canvas",
+		"wardleyModeling",
+		"wardleyElementFactory"
+	];
+	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);
+		}), e.on([
+			"element.mousedown",
+			"drag.init",
+			"canvas.viewbox.changing"
+		], () => this.active?.commit());
+	}
+	activate(e) {
+		this.active?.commit();
+		let t = this.canvas.getContainer(), n = this.canvas.zoom(), r = this.canvas.viewbox(), i = e.wardleyType === "note", a = (e.x + e.width + 6 - r.x) * n, o = (e.y + e.height / 2 - 11 - r.y) * n, s = document.createElement(i ? "textarea" : "input");
+		if (s.className = i ? "wardley-label-input wardley-label-textarea" : "wardley-label-input", s.value = e.wardleyLabel ?? "", i) {
+			let e = s;
+			e.rows = Math.max(2, s.value.split("\n").length), e.wrap = "off";
+		} else s.type = "text";
+		s.style.position = "absolute", s.style.left = `${a}px`, s.style.top = `${o}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.trim(), n = t && t !== e.wardleyLabel;
+			if (l(), !n) return;
+			let r = i ? t : this.factory.uniqueLabel(t, e.id);
+			this.modeling.updateLabel(e, r);
+		}, d = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault(), l();
+				return;
+			}
+			if (e.key === "Enter") {
+				if (i && !(e.metaKey || e.ctrlKey)) return;
+				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 = {
+	__init__: ["wardleyLabelEditing"],
+	wardleyLabelEditing: ["type", zt]
+}, Vt = class {
+	static $inject = [
+		"canvas",
+		"commandStack",
+		"selection",
+		"modeling"
+	];
+	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") {
+				let t = n.get();
+				t.length && (e.preventDefault(), r.removeElements(t));
+			}
+		});
+	}
+};
+function Ht(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 = {
+	__init__: ["wardleyKeyboard"],
+	wardleyKeyboard: ["type", Vt]
+}, Q = "wardley.evolve", Wt = .005, Gt = "wardley-evolve-handle";
+function Kt(e) {
+	return e < 0 ? 0 : e > 1 ? 1 : e;
+}
+var $ = class {
+	dragging;
+	static $inject = [
+		"eventBus",
+		"dragging",
+		"evolutionGrid",
+		"wardleyModeling",
+		"canvas",
+		"elementRegistry"
+	];
+	constructor(e, t, n, r, i, a) {
+		this.dragging = t;
+		let o = (t, n) => {
+			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({
+				x: o,
+				y: t
+			}).evolution);
+		};
+		i.getContainer().addEventListener("mousedown", (e) => {
+			let t = e.target;
+			if (!t?.closest(`.${Gt}`)) 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.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({
+				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;
+		}), e.on(`${Q}.cleanup`, (e) => {
+			let t = e.context;
+			t && !t.committed && o(t.shape, t.originalMovement);
+		});
+	}
+	start(e, t) {
+		let n = {
+			shape: t,
+			...t.movement ? { originalMovement: t.movement } : {}
+		};
+		this.dragging.init(e, Q, {
+			cursor: "ew-resize",
+			data: { context: n }
+		});
+	}
+}, qt = {
+	__init__: ["wardleyEvolveDragging"],
+	wardleyEvolveDragging: ["type", $]
+}, Jt = 500, Yt = class {
+	static $inject = ["injector", "eventBus"];
+	constructor(e, t) {
+		let n = e.get("connectionPreview", !1), r = e.get("wardleyLabelEditing", !1);
+		n && (t.on("create.move", (e) => {
+			let { context: t } = e, r = t.source;
+			if (!r) return;
+			let i = t.canExecute && t.canExecute.connect;
+			n.drawPreview(t, i ?? !1, {
+				source: r,
+				connectionStart: {
+					x: r.x + r.width / 2,
+					y: r.y + r.height / 2
+				},
+				connectionEnd: {
+					x: e.x,
+					y: e.y
+				}
+			});
+		}), t.on([
+			"create.end",
+			"create.cancel",
+			"create.cleanup"
+		], (e) => {
+			n.cleanUp(e.context);
+		})), r && t.on("create.end", Jt, (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],
+	__init__: ["wardleyAppendBehavior"],
+	wardleyAppendBehavior: ["type", Yt]
+}, Zt = class {
+	canvas;
+	modeling;
+	static $inject = [
+		"canvas",
+		"eventBus",
+		"wardleyModeling"
+	];
+	popover;
+	onDocPointer = (e) => {
+		this.popover && !this.popover.contains(e.target) && this.close();
+	};
+	onKey = (e) => {
+		e.key === "Escape" && this.close();
+	};
+	constructor(e, t, n) {
+		this.canvas = e, this.modeling = n, t.on([
+			"canvas.viewbox.changing",
+			"drag.init",
+			"diagram.clear"
+		], () => this.close());
+	}
+	open(e, t, n) {
+		this.close();
+		let r = this.canvas.getContainer(), i = r.getBoundingClientRect(), a = document.createElement("div");
+		a.className = "wardley-color-picker";
+		let o = [{
+			value: void 0,
+			title: "No color",
+			cls: "wardley-cp-none"
+		}, ...xe.map((e) => ({
+			value: e.value,
+			title: e.name,
+			cls: ""
+		}))];
+		for (let t of o) {
+			let n = document.createElement("button");
+			n.type = "button", n.className = `wardley-cp-swatch ${t.cls}`.trim(), n.title = t.title, t.value && (n.style.background = t.value), (e.color ?? void 0) === t.value && n.classList.add("wardley-cp-active"), n.addEventListener("click", (n) => {
+				n.stopPropagation(), this.modeling.setColor(e, t.value), this.close();
+			}), a.append(n);
+		}
+		r.appendChild(a);
+		let s = r.clientWidth, c = r.clientHeight, l = a.offsetWidth, u = a.offsetHeight, d = Math.max(4, Math.min(t - i.left, s - l - 4)), f = Math.max(4, Math.min(n - i.top, c - u - 4));
+		a.style.left = `${d}px`, a.style.top = `${f}px`, this.popover = a, setTimeout(() => {
+			document.addEventListener("click", this.onDocPointer, !0), document.addEventListener("keydown", this.onKey, !0);
+		}, 0);
+	}
+	close() {
+		this.popover && (this.popover.remove(), this.popover = void 0, document.removeEventListener("click", this.onDocPointer, !0), document.removeEventListener("keydown", this.onKey, !0));
+	}
+}, Qt = {
+	__init__: ["wardleyColorPicker"],
+	wardleyColorPicker: ["type", Zt]
+}, $t = class extends yt {
+	_getModules() {
+		return [
+			...super._getModules(),
+			ae,
+			de,
+			oe,
+			se,
+			ce,
+			le,
+			ue,
+			fe,
+			pe,
+			me,
+			Et,
+			kt,
+			ke,
+			jt,
+			Pt,
+			Rt,
+			Bt,
+			Ut,
+			qt,
+			Lt,
+			Xt,
+			Qt
+		];
+	}
+	undo() {
+		this.get("commandStack").undo();
+	}
+	redo() {
+		this.get("commandStack").redo();
+	}
+	canUndo() {
+		return this.get("commandStack").canUndo();
+	}
+	canRedo() {
+		return this.get("commandStack").canRedo();
+	}
+};
+//#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 };
+
+//# sourceMappingURL=index.js.map