@miragon/value-chain-renderer 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,94 +1,96 @@
 import e from "diagram-js/lib/Diagram";
-import { getBBox as t } from "diagram-js/lib/util/Elements";
-import { CURRENT_SCHEMA_VERSION as n, DEFAULT_ORG_UNIT_SIZE as r, DEFAULT_STEP_SIZE as i, MIN_STEP_SIZE as a, validateDocument as o } from "@miragon/value-chain-schema-model";
-import s from "diagram-js/lib/core/ElementFactory";
-import c from "diagram-js/lib/draw/BaseRenderer";
-import l from "diagram-js/lib/util/Text";
-import { createLine as u } from "diagram-js/lib/util/RenderUtil";
-import { append as d, attr as f, create as p } from "tiny-svg";
-import ee from "diagram-js/lib/features/selection";
-import te from "diagram-js/lib/navigation/zoomscroll";
-import ne from "diagram-js/lib/navigation/movecanvas";
-import re from "diagram-js/lib/features/modeling";
-import ie from "diagram-js/lib/features/move";
-import ae from "diagram-js/lib/features/outline";
-import oe from "diagram-js/lib/features/bendpoints";
-import se from "diagram-js/lib/features/auto-scroll";
-import ce from "diagram-js/lib/features/grid-snapping";
-import le from "diagram-js/lib/features/snapping";
-import ue from "diagram-js/lib/features/keyboard-move-selection";
-import de from "diagram-js/lib/navigation/keyboard-move";
-import fe from "diagram-js/lib/layout/CroppingConnectionDocking";
-import pe from "diagram-js/lib/layout/BaseLayouter";
-import { getMid as m } from "diagram-js/lib/layout/LayoutUtil";
-import { connectPoints as me, connectRectangles as he, withoutRedundantPoints as h } from "diagram-js/lib/layout/ManhattanLayout";
-import ge from "diagram-js/lib/command/CommandInterceptor";
-import _e from "diagram-js/lib/features/rules";
-import ve from "diagram-js/lib/features/rules/RuleProvider";
-import ye from "diagram-js/lib/features/connect";
-import be from "diagram-js/lib/features/auto-place";
-import xe from "diagram-js/lib/features/create";
-import Se from "diagram-js/lib/features/connection-preview";
-import Ce from "diagram-js/lib/features/palette";
-import we from "diagram-js/lib/features/hand-tool";
-import Te from "diagram-js/lib/features/lasso-tool";
-import Ee from "diagram-js/lib/features/space-tool";
-import De from "diagram-js/lib/features/global-connect";
-import Oe from "diagram-js/lib/features/context-pad";
-import g from "diagram-js/lib/features/popup-menu";
-import ke from "diagram-js-direct-editing";
-import Ae from "diagram-js/lib/features/align-elements";
-import je from "diagram-js/lib/features/distribute-elements";
-import Me from "diagram-js/lib/features/keyboard";
-import Ne from "diagram-js/lib/features/editor-actions";
-import Pe from "diagram-js/lib/features/keyboard/KeyboardBindings";
-import { hasModifier as Fe, isKey as Ie } from "diagram-js/lib/features/keyboard/KeyboardUtil";
-import Le from "diagram-js/lib/features/ordering/OrderingProvider";
-import Re from "diagram-js/lib/features/copy-paste";
-import ze from "diagram-js/lib/features/resize";
+import { CURRENT_SCHEMA_VERSION as t, DEFAULT_ORG_UNIT_SIZE as n, DEFAULT_STEP_SIZE as r, MIN_STEP_SIZE as i, connectionExtensions as a, createEmptyDocument as o, documentExtensions as s, elementExtensions as c, metaExtensions as l, parseDocumentJSON as u, serializeDocument as d, validateDocument as f } from "@miragon/value-chain-schema-model";
+import ee from "diagram-js/lib/core/ElementFactory";
+import te from "diagram-js/lib/draw/BaseRenderer";
+import ne from "diagram-js/lib/util/Text";
+import { createLine as re } from "diagram-js/lib/util/RenderUtil";
+import { append as p, attr as m, create as h } from "tiny-svg";
+import { getBBox as ie } from "diagram-js/lib/util/Elements";
+import ae from "diagram-js/lib/features/selection";
+import oe from "diagram-js/lib/navigation/zoomscroll";
+import se from "diagram-js/lib/navigation/movecanvas";
+import ce from "diagram-js/lib/features/modeling";
+import le from "diagram-js/lib/features/move";
+import ue from "diagram-js/lib/features/outline";
+import de from "diagram-js/lib/features/bendpoints";
+import fe from "diagram-js/lib/features/auto-scroll";
+import pe from "diagram-js/lib/features/grid-snapping";
+import me from "diagram-js/lib/features/snapping";
+import he from "diagram-js/lib/features/keyboard-move-selection";
+import ge from "diagram-js/lib/navigation/keyboard-move";
+import _e from "diagram-js/lib/layout/CroppingConnectionDocking";
+import ve from "diagram-js/lib/layout/BaseLayouter";
+import { getMid as g } from "diagram-js/lib/layout/LayoutUtil";
+import { connectPoints as ye, connectRectangles as be, withoutRedundantPoints as _ } from "diagram-js/lib/layout/ManhattanLayout";
+import xe from "diagram-js/lib/command/CommandInterceptor";
+import Se from "diagram-js/lib/features/rules";
+import Ce from "diagram-js/lib/features/rules/RuleProvider";
+import we from "diagram-js/lib/features/connect";
+import Te from "diagram-js/lib/features/auto-place";
+import Ee from "diagram-js/lib/features/create";
+import De from "diagram-js/lib/features/connection-preview";
+import Oe from "diagram-js/lib/features/palette";
+import ke from "diagram-js/lib/features/hand-tool";
+import Ae from "diagram-js/lib/features/lasso-tool";
+import je from "diagram-js/lib/features/space-tool";
+import Me from "diagram-js/lib/features/global-connect";
+import Ne from "diagram-js/lib/features/context-pad";
+import v from "diagram-js/lib/features/popup-menu";
+import Pe from "diagram-js-direct-editing";
+import Fe from "diagram-js/lib/features/align-elements";
+import Ie from "diagram-js/lib/features/distribute-elements";
+import Le from "diagram-js/lib/features/keyboard";
+import Re from "diagram-js/lib/features/editor-actions";
+import ze from "diagram-js/lib/features/keyboard/KeyboardBindings";
+import { hasModifier as Be, isCmd as Ve, isKey as y } from "diagram-js/lib/features/keyboard/KeyboardUtil";
+import He from "diagram-js/lib/features/ordering/OrderingProvider";
+import Ue from "diagram-js/lib/features/copy-paste";
+import We from "diagram-js/lib/features/resize";
+import { MODELER_API_VERSION as Ge } from "@miragon/modeler-api";
+//#region src/io/saveSvg.ts
+var Ke = 20, qe = {
+	x: 0,
+	y: 0,
+	width: 800,
+	height: 600
+}, Je = [
+	"tabindex",
+	"role",
+	"aria-label",
+	"aria-roledescription"
+];
+function b(e, t) {
+	let n = [...e.getContainer().children].find((e) => e instanceof SVGSVGElement);
+	if (!n) throw Error("No SVG found in the canvas container.");
+	let r = t.contentBounds(Ke) ?? qe, i = n.cloneNode(!0);
+	for (let e of Je) i.removeAttribute(e);
+	i.setAttribute("xmlns", "http://www.w3.org/2000/svg"), i.setAttribute("viewBox", `${r.x} ${r.y} ${r.width} ${r.height}`), i.setAttribute("width", String(r.width)), i.setAttribute("height", String(r.height));
+	let a = i.querySelector(".viewport");
+	return a && a.removeAttribute("transform"), { svg: `<?xml version="1.0" encoding="utf-8"?>\n${new XMLSerializer().serializeToString(i)}` };
+}
+//#endregion
 //#region src/model/di-types.ts
-function _(e) {
+function x(e) {
 	return typeof e == "object" && !!e;
 }
-function v(e) {
-	return _(e) && (e.vcType === "step" || e.vcType === "orgUnit");
-}
-function y(e) {
-	return _(e) && e.vcType === "step";
+function S(e) {
+	return x(e) && (e.vcType === "step" || e.vcType === "orgUnit");
 }
-function b(e) {
-	return _(e) && e.vcType === "orgUnit";
+function C(e) {
+	return x(e) && e.vcType === "step";
 }
-function x(e) {
-	return _(e) && (e.vcType === "sequence" || e.vcType === "hierarchy" || e.vcType === "assignment") && "waypoints" in e;
+function w(e) {
+	return x(e) && e.vcType === "orgUnit";
 }
-function S(e) {
-	return v(e) || x(e);
+function T(e) {
+	return x(e) && (e.vcType === "sequence" || e.vcType === "hierarchy" || e.vcType === "assignment") && "waypoints" in e;
 }
-//#endregion
-//#region src/io/saveSvg.ts
-var C = 20;
-function w(e, n) {
-	let r = e.getContainer().querySelector("svg");
-	if (!r) throw Error("No SVG found in the canvas container.");
-	let i = n.getAll().filter(S), a = i.length ? t(i) : {
-		x: 0,
-		y: 0,
-		width: 800,
-		height: 600
-	}, o = {
-		x: a.x - C,
-		y: a.y - C,
-		width: a.width + 40,
-		height: a.height + 40
-	}, s = r.cloneNode(!0);
-	s.setAttribute("xmlns", "http://www.w3.org/2000/svg"), s.setAttribute("viewBox", `${o.x} ${o.y} ${o.width} ${o.height}`), s.setAttribute("width", String(o.width)), s.setAttribute("height", String(o.height));
-	let c = s.querySelector(".viewport");
-	return c && c.removeAttribute("transform"), { svg: `<?xml version="1.0" encoding="utf-8"?>\n${new XMLSerializer().serializeToString(s)}` };
+function E(e) {
+	return S(e) || T(e);
 }
 //#endregion
 //#region src/VcBaseViewer.ts
-var T = class {
+var Ye = class {
 	_diagram;
 	_container;
 	_options;
@@ -111,20 +113,25 @@ var T = class {
 		this.get("eventBus").off(e, t);
 	}
 	importDocument(e) {
-		let t = this.get("vcImporter");
-		t.clear();
-		let n = t.import(e);
-		return this.getOptional("commandStack")?.clear(), this.fitViewport(), this.get("eventBus").fire("import.done", { warnings: n }), n;
+		let t = f(e), n = this.getOptional("vcLabelEditingProvider"), r = this._currentDocument();
+		n?.suspend(), this.getOptional("popupMenu")?.close();
+		let i;
+		try {
+			i = this._render(t);
+		} catch (e) {
+			throw r && this._render(r), e;
+		}
+		return n?.resumeAfterImport(), i;
 	}
 	exportDocument() {
 		return this.get("vcExporter").export();
 	}
 	saveSVG() {
-		return w(this.get("canvas"), this.get("elementRegistry"));
+		return b(this.get("canvas"), this.get("vcBounds"));
 	}
 	fitViewport() {
 		let e = this.get("canvas");
-		this.get("elementRegistry").getAll().some(S) && (e.zoom("fit-viewport"), e.zoom() > 1 && e.zoom(1));
+		this.get("elementRegistry").getAll().some(E) && (e.zoom("fit-viewport"), e.zoom() > 1 && e.zoom(1));
 	}
 	clear() {
 		this.get("vcImporter").clear(), this.getOptional("commandStack")?.clear();
@@ -138,27 +145,42 @@ var T = class {
 	destroy() {
 		this._diagram?.destroy(), this._diagram = void 0, this.detach();
 	}
+	_render(e) {
+		let t = this.get("vcImporter");
+		t.clear();
+		let n = t.import(e);
+		return this.getOptional("commandStack")?.clear(!1), this.get("eventBus").fire("import.done", { warnings: n }), n;
+	}
+	_currentDocument() {
+		try {
+			return this.exportDocument();
+		} catch {
+			return;
+		}
+	}
 	_createContainer(e) {
 		let t = e.container ?? document.createElement("div");
-		return t.classList.add("vc-container"), t.style.width = E(e.width ?? "100%"), t.style.height = E(e.height ?? (e.container ? "100%" : "600px")), t;
+		return t.classList.add("vc-container"), t.style.width = Xe(e.width ?? "100%"), t.style.height = Xe(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
+				modules: t,
+				vcPalette: { freeRectCenter: this._options.freeRectCenter },
+				vcKeyboard: { undoRedoKeys: this._options.undoRedoKeys ?? !0 }
 			});
 		}
 		return this._diagram;
 	}
 };
-function E(e) {
+function Xe(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
 //#endregion
 //#region src/model/VcElementFactory.ts
-var D = class {
+var Ze = class {
 	elementFactory;
 	static $inject = ["elementFactory"];
 	constructor(e) {
@@ -193,31 +215,41 @@ var D = class {
 	}
 	createNewStep(e = "") {
 		return this.elementFactory.createShape({
-			width: i.width,
-			height: i.height,
+			width: r.width,
+			height: r.height,
 			vcType: "step",
 			vcLabel: e
 		});
 	}
 	createNewOrgUnit(e = "") {
 		return this.elementFactory.createShape({
-			width: r.width,
-			height: r.height,
+			width: n.width,
+			height: n.height,
 			vcType: "orgUnit",
 			vcLabel: e
 		});
 	}
-}, O = class extends s {
+}, Qe = "0123456789abcdefghijklmnopqrstuvwxyz", $e = 8, et = {
+	step: "step",
+	orgUnit: "org",
+	sequence: "sequence",
+	hierarchy: "hierarchy",
+	assignment: "assignment"
+};
+function tt() {
+	let e = crypto.getRandomValues(new Uint8Array($e));
+	return Array.from(e, (e) => Qe[e % 36]).join("");
+}
+var nt = class extends ee {
 	elementRegistry;
 	static $inject = ["elementRegistry"];
-	counters = /* @__PURE__ */ new Map();
 	constructor(e) {
 		super(), this.elementRegistry = e;
 	}
 	create(e, t) {
 		let n = t?.id ? t : {
 			...t,
-			id: this.unusedId(e)
+			id: this.unusedId(e, t)
 		};
 		switch (e) {
 			case "root": return super.create(e, n);
@@ -226,31 +258,31 @@ var D = class {
 			case "label": return super.create(e, n);
 		}
 	}
-	unusedId(e) {
-		let t = this.counters.get(e) ?? 0, n;
+	unusedId(e, t) {
+		let n = t?.vcType, r = typeof n == "string" && et[n] || e, i;
 		do
-			t += 1, n = `${e}_${t}`;
-		while (this.elementRegistry.get(n));
-		return this.counters.set(e, t), n;
+			i = `${r}_${tt()}`;
+		while (this.elementRegistry.get(i));
+		return i;
 	}
-}, k = {
-	elementFactory: ["type", O],
-	vcElementFactory: ["type", D]
+}, rt = {
+	elementFactory: ["type", nt],
+	vcElementFactory: ["type", Ze]
 };
 //#endregion
 //#region src/draw/geometry.ts
-function A(e, t) {
+function D(e, t) {
 	return Math.min(t / 2, .4 * e);
 }
-function j(e, t) {
-	return N(0, 0, e, t);
+function it(e, t) {
+	return O(0, 0, e, t);
 }
-function M(e, t) {
-	let n = A(e, t);
+function at(e, t) {
+	let n = D(e, t);
 	return Math.max(7, n - 5);
 }
-function N(e, t, n, r) {
-	let i = A(n, r), a = t + r / 2;
+function O(e, t, n, r) {
+	let i = D(n, r), a = t + r / 2;
 	return [
 		`M${e},${t}`,
 		`L${e + n - i},${t}`,
@@ -261,7 +293,7 @@ function N(e, t, n, r) {
 		"Z"
 	].join("");
 }
-function P(e, t, n, r) {
+function k(e, t, n, r) {
 	let i = n / 2, a = r / 2, o = e + i;
 	return [
 		`M${o},${t}`,
@@ -271,15 +303,42 @@ function P(e, t, n, r) {
 	].join("");
 }
 //#endregion
-//#region src/draw/styles.ts
-var F = {
-	ink: "hsl(225, 10%, 15%)",
-	fill: "white"
-}, I = {
-	family: "Arial, sans-serif",
+//#region src/theme/cd-tokens.generated.json
+var ot = {
+	"--cd-ui-grund": "#F9F7F7",
+	"--cd-ui-flaeche": "#FFFFFF",
+	"--cd-ui-flaeche-hoch": "#FFFFFF",
+	"--cd-ui-hover": "#EEF1FD",
+	"--cd-ui-plot": "#FFFFFF",
+	"--cd-ui-seite": "#FFFFFF",
+	"--cd-ui-abschnitt": "#F9F7F7",
+	"--cd-ui-linie": "#E6E2E2",
+	"--cd-ui-kontur": "#8F8A8A",
+	"--cd-ui-text": "#1D1D1D",
+	"--cd-ui-text-leise": "#6B6666",
+	"--cd-ui-link": "#2B50D4",
+	"--cd-ui-icon-akzent": "#335DE5",
+	"--cd-ui-fokus": "#2B50D4",
+	"--cd-ui-interaktion": "#335DE5",
+	"--cd-ui-success": "#00E676",
+	"--cd-ui-warning": "#FFB000",
+	"--cd-ui-danger": "#CD1839",
+	"--cd-ui-info": "#335DE5",
+	"--cd-ui-success-flaeche": "#DAFBEB",
+	"--cd-ui-warning-flaeche": "#FFF1D2",
+	"--cd-ui-danger-flaeche": "#FBEEF0",
+	"--cd-ui-info-flaeche": "#EEF1FD",
+	"--cd-ui-wortmarke": "#00E676",
+	"--cd-ui-backdrop": "rgba(29, 29, 29, 0.42)",
+	"--cd-ui-chrome-deckkraft": "84%"
+}, A = {
+	ink: ot["--cd-ui-text"],
+	fill: ot["--cd-ui-plot"]
+}, j = {
+	family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, sans-serif",
 	size: 12,
 	lineHeight: 1.2
-}, L = [
+}, st = [
 	{ label: "Default" },
 	{
 		label: "Blue",
@@ -301,32 +360,48 @@ var F = {
 		label: "Purple",
 		color: "hsl(287, 65%, 44%)"
 	}
-], Be = 1500, Ve = "M 1 5 L 11 10 L 1 15 Z", He = 0, R = class extends c {
-	static $inject = ["eventBus"];
-	textUtil = new l({ style: {
-		fontFamily: I.family,
-		fontSize: I.size,
+], ct = 1500, lt = "M 1 5 L 11 10 L 1 15 Z", ut = 0, dt = class extends te {
+	elementRegistry;
+	graphicsFactory;
+	static $inject = [
+		"eventBus",
+		"elementRegistry",
+		"graphicsFactory"
+	];
+	textUtil = new ne({ style: {
+		fontFamily: j.family,
+		fontSize: j.size,
 		fontWeight: "normal",
-		lineHeight: I.lineHeight
+		lineHeight: j.lineHeight
 	} });
-	markerSuffix = `${He += 1}`;
-	constructor(e) {
-		super(e, Be);
+	markerSuffix = `${ut += 1}`;
+	constructor(e, t, n) {
+		super(e, ct), this.elementRegistry = t, this.graphicsFactory = n, this.relayoutLabelsWhenTheFontArrives(e);
+	}
+	relayoutLabelsWhenTheFontArrives(e) {
+		let t = typeof document > "u" ? void 0 : document.fonts, n = `${j.size}px ${j.family}`;
+		if (!t || t.check(n)) return;
+		let r = !1;
+		e.on("diagram.destroy", () => {
+			r = !0;
+		}), t.load(n).then((e) => {
+			if (!(r || e.length === 0)) for (let e of this.elementRegistry.getAll()) S(e) && e.vcLabel && this.graphicsFactory.update("shape", e, this.elementRegistry.getGraphics(e));
+		}, () => void 0);
 	}
 	canRender(e) {
-		return v(e) || x(e);
+		return S(e) || T(e);
 	}
 	drawShape(e, t) {
-		let n = t, r = n.color ?? F.ink, i = b(n), a = p("path");
-		if (f(a, {
-			d: i ? P(0, 0, n.width, n.height) : j(n.width, n.height),
-			fill: F.fill,
+		let n = t, r = n.color ?? A.ink, i = w(n), a = h("path");
+		if (m(a, {
+			d: i ? k(0, 0, n.width, n.height) : it(n.width, n.height),
+			fill: A.fill,
 			stroke: r,
 			"stroke-width": 2,
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round"
-		}), d(e, a), n.vcLabel) {
-			let t = i ? 12 : M(n.width, n.height), a = this.textUtil.createText(n.vcLabel, {
+		}), p(e, a), n.vcLabel) {
+			let t = i ? 12 : at(n.width, n.height), a = this.textUtil.createText(n.vcLabel, {
 				box: {
 					width: n.width,
 					height: n.height
@@ -340,12 +415,12 @@ var F = {
 				},
 				style: { fill: r }
 			});
-			d(e, a);
+			p(e, a);
 		}
 		return a;
 	}
 	drawConnection(e, t) {
-		let n = t, r = F.ink, i = {
+		let n = t, r = A.ink, i = {
 			stroke: r,
 			"stroke-width": 2,
 			"stroke-linecap": "round",
@@ -356,11 +431,11 @@ var F = {
 			let t = e.ownerSVGElement;
 			t && (i["marker-end"] = this.arrowMarker(t, r));
 		}
-		let a = u(n.waypoints, i);
-		return d(e, a), a;
+		let a = re(n.waypoints, i);
+		return p(e, a), a;
 	}
 	getShapePath(e) {
-		return b(e) ? P(e.x, e.y, e.width, e.height) : N(e.x, e.y, e.width, e.height);
+		return w(e) ? k(e.x, e.y, e.width, e.height) : O(e.x, e.y, e.width, e.height);
 	}
 	getConnectionPath(e) {
 		let [t, ...n] = e.waypoints;
@@ -370,9 +445,9 @@ var F = {
 		let n = `vc-arrow-${this.markerSuffix}-${t.replace(/[^a-zA-Z0-9]/g, "")}`;
 		if (!e.querySelector(`marker[id="${n}"]`)) {
 			let r = e.querySelector("defs");
-			r || (r = p("defs"), d(e, r));
-			let i = p("marker");
-			f(i, {
+			r || (r = h("defs"), p(e, r));
+			let i = h("marker");
+			m(i, {
 				id: n,
 				viewBox: "0 0 20 20",
 				refX: 11,
@@ -381,49 +456,70 @@ var F = {
 				markerHeight: 10,
 				orient: "auto"
 			});
-			let a = p("path");
-			f(a, {
-				d: Ve,
+			let a = h("path");
+			m(a, {
+				d: lt,
 				fill: t,
 				stroke: t,
 				"stroke-width": 1,
 				"stroke-linejoin": "round"
-			}), d(i, a), d(r, i);
+			}), p(i, a), p(r, i);
 		}
 		return `url(#${n})`;
 	}
-}, z = {
+}, ft = {
 	__init__: ["vcRenderer"],
-	vcRenderer: ["type", R]
-}, B = "vc-root", V = class {
+	vcRenderer: ["type", dt]
+}, pt = class {
+	elementRegistry;
+	static $inject = ["elementRegistry"];
+	constructor(e) {
+		this.elementRegistry = e;
+	}
+	isEmpty() {
+		return !this.elementRegistry.getAll().some(S);
+	}
+	contentBounds(e = 0) {
+		if (this.isEmpty()) return;
+		let t = this.elementRegistry.filter(E), { x: n, y: r, width: i, height: a } = ie(t);
+		return {
+			x: n - e,
+			y: r - e,
+			width: i + 2 * e,
+			height: a + 2 * e
+		};
+	}
+}, mt = { vcBounds: ["type", pt] }, M = "vc-root", ht = 20, gt = .001, _t = class {
 	canvas;
 	elementFactory;
 	vcElementFactory;
 	elementRegistry;
 	eventBus;
+	vcBounds;
 	static $inject = [
 		"canvas",
 		"elementFactory",
 		"vcElementFactory",
 		"elementRegistry",
-		"eventBus"
+		"eventBus",
+		"vcBounds"
 	];
-	constructor(e, t, n, r, i) {
-		this.canvas = e, this.elementFactory = t, this.vcElementFactory = n, this.elementRegistry = r, this.eventBus = i;
+	constructor(e, t, n, r, i, a) {
+		this.canvas = e, this.elementFactory = t, this.vcElementFactory = n, this.elementRegistry = r, this.eventBus = i, this.vcBounds = a;
 	}
 	import(e) {
 		let t = [];
 		this.eventBus.fire("import.render.start", { document: e });
-		let n = this.ensureRoot();
-		n.businessObject = { name: e.meta.name };
+		let n = this.diagramRoot();
+		n.businessObject = {
+			name: e.meta.name,
+			extensions: s(e),
+			metaExtensions: l(e.meta)
+		};
 		let r = /* @__PURE__ */ new Map();
-		for (let i of e.elements) {
-			if (i.id === "vc-root") {
-				t.push({ message: `Skipped element "${i.id}": reserved id.` });
-				continue;
-			}
-			let e = this.vcElementFactory.createElement(i);
-			this.canvas.addShape(e, n), r.set(i.id, e);
+		for (let t of e.elements) {
+			let e = this.vcElementFactory.createElement(t);
+			this.canvas.addShape(e, n), r.set(t.id, e);
 		}
 		let i = 0;
 		for (let a of e.connections) {
@@ -438,126 +534,195 @@ var F = {
 			let s = this.vcElementFactory.createConnection(a, e, o);
 			this.canvas.addConnection(s, n, i), i += 1;
 		}
-		return this.eventBus.fire("import.render.done", {
+		return this.fitToContent(), this.eventBus.fire("import.render.done", {
 			document: e,
 			warnings: t
 		}), t;
 	}
 	clear() {
-		let e = this.elementRegistry.getAll();
-		for (let t of e) if (t.id === "vc-root") t.businessObject = void 0;
+		let e = new Set(this.canvas.getRootElements());
+		for (let t of [...this.elementRegistry.getAll()]) if (e.has(t)) t.id === "vc-root" && (t.businessObject = void 0);
 		else try {
-			x(t) ? this.canvas.removeConnection(t) : v(t) && this.canvas.removeShape(t);
+			T(t) ? this.canvas.removeConnection(t) : S(t) && this.canvas.removeShape(t);
 		} catch {}
 	}
-	ensureRoot() {
-		let e = this.canvas.getRootElement();
-		if (e.id === "vc-root") return e;
-		let t = this.elementFactory.createRoot({ id: B });
-		return this.canvas.setRootElement(t), t;
+	diagramRoot() {
+		let e = this.elementRegistry.get(M);
+		e || (e = this.elementFactory.createRoot({ id: M }), this.canvas.setRootElement(e));
+		for (let t of this.canvas.getRootElements()) t !== e && this.canvas.removeRootElement(t);
+		return e;
+	}
+	fitToContent() {
+		let { width: e, height: t } = this.canvas.getSize();
+		if (!(e > 0 && t > 0)) return;
+		let n = this.vcBounds.contentBounds(ht);
+		if (!n) {
+			this.canvas.viewbox({
+				x: 0,
+				y: 0,
+				width: e,
+				height: t
+			});
+			return;
+		}
+		let r = Math.max(Math.min(e / n.width, t / n.height, 1), gt);
+		this.canvas.viewbox({
+			x: n.x + n.width / 2 - e / 2 / r,
+			y: n.y + n.height / 2 - t / 2 / r,
+			width: e / r,
+			height: t / r
+		});
 	}
-}, H = class {
+}, vt = class {
 	elementRegistry;
-	canvas;
-	static $inject = ["elementRegistry", "canvas"];
-	constructor(e, t) {
-		this.elementRegistry = e, this.canvas = t;
+	static $inject = ["elementRegistry"];
+	constructor(e) {
+		this.elementRegistry = e;
 	}
 	export() {
-		let e = [], t = [];
-		for (let n of this.elementRegistry.getAll()) if (n.id !== "vc-root") {
-			if (x(n)) {
-				if (!n.source || !n.target) continue;
-				t.push({
-					id: n.id,
-					connectionType: n.vcType,
-					source: n.source.id,
-					target: n.target.id,
-					waypoints: n.waypoints.map((e) => ({
+		let e = [], n = [];
+		for (let t of this.elementRegistry.getAll()) if (t.id !== "vc-root") {
+			if (T(t)) {
+				if (!t.source || !t.target) continue;
+				let e = t.businessObject;
+				n.push({
+					...e ? a(e) : {},
+					id: t.id,
+					connectionType: t.vcType,
+					source: t.source.id,
+					target: t.target.id,
+					waypoints: t.waypoints.map((e) => ({
 						x: e.x,
 						y: e.y
 					}))
 				});
-			} else if (v(n)) {
-				let t = {
-					x: n.x,
-					y: n.y,
-					width: n.width,
-					height: n.height
-				}, r = n.color === void 0 ? {} : { color: n.color };
-				if (n.vcType === "orgUnit") e.push({
-					id: n.id,
+			} else if (S(t)) {
+				let n = t.businessObject, r = n ? c(n) : {}, i = {
+					x: t.x,
+					y: t.y,
+					width: t.width,
+					height: t.height
+				}, a = t.color === void 0 ? {} : { color: t.color };
+				if (t.vcType === "orgUnit") e.push({
+					...r,
+					id: t.id,
 					elementType: "orgUnit",
-					name: n.vcLabel,
-					bounds: t,
-					...r
+					name: t.vcLabel,
+					bounds: i,
+					...a
 				});
 				else {
-					let i = n.businessObject, a = n.link ?? (i?.elementType === "step" ? i.link : void 0);
+					let o = t.link ?? (n?.elementType === "step" ? n.link : void 0);
 					e.push({
-						id: n.id,
-						elementType: "step",
-						name: n.vcLabel,
-						bounds: t,
 						...r,
-						...a === void 0 ? {} : { link: a }
+						id: t.id,
+						elementType: "step",
+						name: t.vcLabel,
+						bounds: i,
+						...a,
+						...o === void 0 ? {} : { link: o }
 					});
 				}
 			}
 		}
-		let r = this.canvas.getRootElement().businessObject;
-		return o({
-			schemaVersion: n,
-			meta: { name: r?.name ?? "Untitled value chain" },
+		let r = this.rootData();
+		return f({
+			...r?.extensions,
+			schemaVersion: t,
+			meta: {
+				...r?.metaExtensions,
+				name: r?.name ?? "Untitled value chain"
+			},
 			elements: e,
-			connections: t
+			connections: n
+		});
+	}
+	rootData() {
+		return this.elementRegistry.get(M)?.businessObject;
+	}
+};
+//#endregion
+//#region src/io/png.ts
+async function yt(e, t = 2) {
+	let { width: n, height: r } = bt(e), i = URL.createObjectURL(new Blob([e], { type: "image/svg+xml" }));
+	try {
+		let e = new Image();
+		e.width = n, e.height = r, await new Promise((t, n) => {
+			e.onload = () => t(), e.onerror = () => n(/* @__PURE__ */ Error("Could not render the SVG.")), e.src = i;
 		});
+		let a = document.createElement("canvas");
+		a.width = Math.round(n * t), a.height = Math.round(r * t);
+		let o = a.getContext("2d");
+		if (!o) throw Error("Canvas 2D context not available.");
+		o.fillStyle = A.fill, o.fillRect(0, 0, a.width, a.height), o.drawImage(e, 0, 0, a.width, a.height);
+		let s = await new Promise((e) => a.toBlob(e, "image/png"));
+		if (!s) throw Error("PNG generation failed.");
+		return s;
+	} finally {
+		URL.revokeObjectURL(i);
 	}
-}, U = {
-	vcImporter: ["type", V],
-	vcExporter: ["type", H]
-}, W = class extends T {
+}
+function bt(e) {
+	let t = /width="(\d+(?:\.\d+)?)"/.exec(e), n = /height="(\d+(?:\.\d+)?)"/.exec(e);
+	return {
+		width: t ? Number(t[1]) : 1e3,
+		height: n ? Number(n[1]) : 700
+	};
+}
+function xt(e) {
+	return new Promise((t, n) => {
+		let r = new FileReader();
+		r.onload = () => t(String(r.result).split(",")[1] ?? ""), r.onerror = () => n(/* @__PURE__ */ Error("Could not read the export blob.")), r.readAsDataURL(e);
+	});
+}
+//#endregion
+//#region src/io/index.ts
+var St = {
+	__depends__: [mt],
+	vcImporter: ["type", _t],
+	vcExporter: ["type", vt]
+}, Ct = class extends Ye {
 	_getModules() {
 		return [
-			k,
-			z,
-			U
+			rt,
+			ft,
+			St
 		];
 	}
-}, Ue = class extends W {
+}, N = class extends Ct {
 	_getModules() {
 		return [
 			...super._getModules(),
-			ee,
-			te,
-			ne
+			ae,
+			oe,
+			se
 		];
 	}
-}, We = class {
+}, wt = class {
 	execute(e) {
 		let { element: t, properties: n } = e, r = t, i = {};
-		for (let e of Object.keys(n)) i[e] = r[e], Ge(r, e, n[e]);
+		for (let e of Object.keys(n)) i[e] = r[e], Tt(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)) Ge(r, e, n[e]);
+		if (n) for (let e of Object.keys(n)) Tt(r, e, n[e]);
 		return [t];
 	}
 };
-function Ge(e, t, n) {
+function Tt(e, t, n) {
 	n === void 0 ? delete e[t] : e[t] = n;
 }
 //#endregion
 //#region src/modeling/VcModeling.ts
-var Ke = "element.updateProperties", qe = class {
+var Et = "element.updateProperties", Dt = class {
 	commandStack;
 	static $inject = ["commandStack"];
 	constructor(e) {
-		this.commandStack = e, e.registerHandler(Ke, We);
+		this.commandStack = e, e.registerHandler(Et, wt);
 	}
 	updateProperties(e, t) {
-		this.commandStack.execute(Ke, {
+		this.commandStack.execute(Et, {
 			element: e,
 			properties: t
 		});
@@ -571,7 +736,7 @@ var Ke = "element.updateProperties", qe = class {
 	setConnectionType(e, t) {
 		t !== e.vcType && this.updateProperties(e, { vcType: t });
 	}
-}, Je = 25, Ye = 10, Xe = 10, Ze = class extends pe {
+}, Ot = 25, kt = 10, At = 10, jt = class extends ve {
 	connectionDocking;
 	static $inject = ["connectionDocking"];
 	constructor(e) {
@@ -583,7 +748,7 @@ var Ke = "element.updateProperties", qe = class {
 			x: e.x,
 			y: e.y
 		})) ?? [];
-		let i = nt(e) ? this.hierarchyWaypoints(n, r, t) : this.sequenceWaypoints(e, n, r, t), a = {
+		let i = It(e) ? this.hierarchyWaypoints(n, r, t) : this.sequenceWaypoints(e, n, r, t), a = {
 			...e,
 			source: n,
 			target: r,
@@ -592,9 +757,9 @@ var Ke = "element.updateProperties", qe = class {
 		try {
 			o = this.connectionDocking.getCroppedWaypoints(a, n, r);
 		} catch {}
-		if (!rt(o)) {
-			let e = [m(n), m(r)];
-			return rt(e) ? e : [];
+		if (!Lt(o)) {
+			let e = [g(n), g(r)];
+			return Lt(e) ? e : [];
 		}
 		return o;
 	}
@@ -604,18 +769,18 @@ var Ke = "element.updateProperties", qe = class {
 			y: e.y
 		}));
 		return [
-			m(t),
+			g(t),
 			...i,
-			m(n)
+			g(n)
 		];
 	}
 	hierarchyWaypoints(e, t, n) {
-		let r = m(e), i = m(t);
+		let r = g(e), i = g(t);
 		if (t.y >= e.y + e.height) {
-			let n = $e(e), a = n.length ? n : [t];
-			if (et(a, e)) return h(me(r, i, "v:v"));
-			let o = e.y + e.height, s = Math.min(...a.map((e) => e.y)), c = Math.max(o + Ye, (o + s) / 2), l = Math.min(...a.map((e) => e.x)), u = r.x <= l - 10 ? r.x : l - Je;
-			return h([
+			let n = Nt(e), a = n.length ? n : [t];
+			if (Pt(a, e)) return _(ye(r, i, "v:v"));
+			let o = e.y + e.height, s = Math.min(...a.map((e) => e.y)), c = Math.max(o + kt, (o + s) / 2), l = Math.min(...a.map((e) => e.x)), u = r.x <= l - 10 ? r.x : l - Ot;
+			return _([
 				r,
 				{
 					x: r.x,
@@ -632,45 +797,45 @@ var Ke = "element.updateProperties", qe = class {
 				i
 			]);
 		}
-		return h(he(e, t, r, i, { preferredLayouts: ["v:v"] }));
+		return _(be(e, t, r, i, { preferredLayouts: ["v:v"] }));
 	}
 };
-function Qe(e) {
+function Mt(e) {
 	return {
-		min: e.x + Xe,
-		max: e.x + e.width - A(e.width, e.height) - Xe
+		min: e.x + At,
+		max: e.x + e.width - D(e.width, e.height) - At
 	};
 }
-function $e(e) {
-	return (e.outgoing ?? []).filter((e) => nt(e)).map((e) => e.target).filter((e) => !!e);
+function Nt(e) {
+	return (e.outgoing ?? []).filter((e) => It(e)).map((e) => e.target).filter((e) => !!e);
 }
-function et(e, t) {
+function Pt(e, t) {
 	if (!e.length) return !1;
 	if (e.length >= 2) {
 		let t = e.map((e) => e.y);
-		return Math.max(...t) - Math.min(...t) <= tt;
+		return Math.max(...t) - Math.min(...t) <= Ft;
 	}
-	let n = e[0], r = n.x + n.width / 2, i = Qe(t);
+	let n = e[0], r = n.x + n.width / 2, i = Mt(t);
 	return r >= i.min && r <= i.max;
 }
-var tt = 10;
-function nt(e) {
+var Ft = 10;
+function It(e) {
 	return e.vcType === "hierarchy";
 }
-function rt(e) {
+function Lt(e) {
 	return e.every((e) => Number.isFinite(e.x) && Number.isFinite(e.y));
 }
 //#endregion
 //#region src/modeling/VcConnectionTypeBehavior.ts
-var it = class extends ge {
+var Rt = class extends xe {
 	static $inject = ["eventBus", "modeling"];
 	constructor(e, t) {
 		super(e), this.postExecute(["element.updateProperties"], (e) => {
 			let { element: n, properties: r } = e;
-			r && "vcType" in r && x(n) && t.layoutConnection(n);
+			r && "vcType" in r && T(n) && t.layoutConnection(n);
 		}, !0);
 	}
-}, at = class extends ge {
+}, zt = class extends xe {
 	modeling;
 	layouter;
 	static $inject = [
@@ -692,74 +857,74 @@ var it = class extends ge {
 			e.shape,
 			...e.shapes ?? [],
 			...e.elements ?? []
-		].filter(v), n = e.connection, r = /* @__PURE__ */ new Set();
-		x(n) && n.vcType === "hierarchy" && n.source && r.add(n.source);
+		].filter(S), n = e.connection, r = /* @__PURE__ */ new Set();
+		T(n) && n.vcType === "hierarchy" && n.source && r.add(n.source);
 		for (let e of t) {
-			ot(e).length && r.add(e);
-			for (let t of e.incoming ?? []) x(t) && t.vcType === "hierarchy" && t.source && r.add(t.source);
+			Bt(e).length && r.add(e);
+			for (let t of e.incoming ?? []) T(t) && t.vcType === "hierarchy" && t.source && r.add(t.source);
 		}
-		for (let e of r) for (let t of ot(e)) st(this.layouter.layoutConnection(t), t.waypoints ?? []) || this.modeling.layoutConnection(t);
+		for (let e of r) for (let t of Bt(e)) Vt(this.layouter.layoutConnection(t), t.waypoints ?? []) || this.modeling.layoutConnection(t);
 	}
 };
-function ot(e) {
-	return (e.outgoing ?? []).filter((e) => x(e) && e.vcType === "hierarchy");
+function Bt(e) {
+	return (e.outgoing ?? []).filter((e) => T(e) && e.vcType === "hierarchy");
 }
-function st(e, t) {
+function Vt(e, t) {
 	return e.length === t.length && e.every((e, n) => e.x === t[n].x && e.y === t[n].y);
 }
 //#endregion
 //#region src/modeling/index.ts
-var ct = {
+var Ht = {
 	__init__: [
 		"vcModeling",
 		"vcConnectionTypeBehavior",
 		"vcHierarchyRelayoutBehavior"
 	],
-	vcModeling: ["type", qe],
-	vcConnectionTypeBehavior: ["type", it],
-	vcHierarchyRelayoutBehavior: ["type", at],
-	layouter: ["type", Ze],
-	connectionDocking: ["type", fe]
-}, lt = class extends ve {
+	vcModeling: ["type", Dt],
+	vcConnectionTypeBehavior: ["type", Rt],
+	vcHierarchyRelayoutBehavior: ["type", zt],
+	layouter: ["type", jt],
+	connectionDocking: ["type", _e]
+}, Ut = class extends Ce {
 	vcConnect;
 	static $inject = ["eventBus", "vcConnect"];
 	constructor(e, t) {
 		super(e), this.vcConnect = t;
 	}
 	init() {
-		this.addRule("connection.start", (e) => v(e.source)), this.addRule("connection.create", (e) => {
+		this.addRule("connection.start", (e) => S(e.source)), this.addRule("connection.create", (e) => {
 			let { source: t, target: n } = e, r = this.resolveType(t, n);
-			return !r || ft(t, n, r) ? !1 : { vcType: r };
+			return !r || Kt(t, n, r) ? !1 : { vcType: r };
 		}), this.addRule("connection.reconnect", (e) => {
 			let { source: t, target: n, connection: r } = e;
-			return !x(r) || !v(t) || !v(n) || t === n || !dt(r.vcType, t, n) ? !1 : !ft(t, n, r.vcType, r);
-		}), this.addRule("connection.updateWaypoints", (e) => x(e.connection)), this.addRule("shape.create", (e) => ut(e.target)), this.addRule("elements.create", (e) => ut(e.target)), this.addRule(["shape.move", "elements.move"], () => !0), this.addRule("shape.resize", (e) => v(e.shape)), this.addRule(["elements.align", "elements.distribute"], (e) => (e.elements ?? []).filter(v));
+			return !T(r) || !S(t) || !S(n) || t === n || !Gt(r.vcType, t, n) ? !1 : !Kt(t, n, r.vcType, r);
+		}), this.addRule("connection.updateWaypoints", (e) => T(e.connection)), this.addRule("shape.create", (e) => Wt(e.target)), this.addRule("elements.create", (e) => Wt(e.target)), this.addRule(["shape.move", "elements.move"], () => !0), this.addRule("shape.resize", (e) => S(e.shape)), this.addRule(["elements.align", "elements.distribute"], (e) => (e.elements ?? []).filter(S));
 	}
 	resolveType(e, t) {
-		if (!v(e) || !v(t) || e === t) return null;
-		if (y(e) && y(t)) {
+		if (!S(e) || !S(t) || e === t) return null;
+		if (C(e) && C(t)) {
 			let e = this.vcConnect.pendingType;
 			return e === "assignment" ? null : e;
 		}
-		return y(e) && b(t) || b(e) && y(t) ? "assignment" : null;
+		return C(e) && w(t) || w(e) && C(t) ? "assignment" : null;
 	}
 };
-function ut(e) {
-	return !!e && !v(e) && !x(e) && !e.parent;
+function Wt(e) {
+	return !!e && !S(e) && !T(e) && !e.parent;
 }
-function dt(e, t, n) {
-	return e === "assignment" ? y(t) && b(n) || b(t) && y(n) : y(t) && y(n);
+function Gt(e, t, n) {
+	return e === "assignment" ? C(t) && w(n) || w(t) && C(n) : C(t) && C(n);
 }
-function ft(e, t, n, r) {
-	return [...e.outgoing ?? [], ...n === "assignment" ? e.incoming ?? [] : []].some((e) => e !== r && x(e) && e.vcType === n && (e.target === t || e.source === t));
+function Kt(e, t, n, r) {
+	return [...e.outgoing ?? [], ...n === "assignment" ? e.incoming ?? [] : []].some((e) => e !== r && T(e) && e.vcType === n && (e.target === t || e.source === t));
 }
 //#endregion
 //#region src/rules/index.ts
-var pt = {
-	__depends__: [_e],
+var qt = {
+	__depends__: [Se],
 	__init__: ["vcRules"],
-	vcRules: ["type", lt]
-}, mt = class {
+	vcRules: ["type", Ut]
+}, Jt = class {
 	connect;
 	static $inject = ["connect", "eventBus"];
 	pendingType = "sequence";
@@ -775,11 +940,11 @@ var pt = {
 	start(e, t, n) {
 		this.pendingType = n, this.connect.start(e, t);
 	}
-}, ht = {
-	__depends__: [ye],
+}, Yt = {
+	__depends__: [we],
 	__init__: ["vcConnect"],
-	vcConnect: ["type", mt]
-}, gt = class {
+	vcConnect: ["type", Jt]
+}, Xt = class {
 	autoPlace;
 	create;
 	factory;
@@ -804,16 +969,16 @@ var pt = {
 	createShape(e) {
 		return e === "assignment" ? this.factory.createNewOrgUnit() : this.factory.createNewStep();
 	}
-}, _t = 200, vt = 45, yt = 45, bt = 30, xt = 20, St = 30, Ct = 10, wt = class {
+}, Zt = 200, Qt = 45, $t = 45, en = 30, tn = 20, nn = 30, rn = 10, an = class {
 	static $inject = [
 		"eventBus",
 		"vcConnect",
 		"elementRegistry"
 	];
 	constructor(e, t, n) {
-		e.on("autoPlace", _t, (e) => {
+		e.on("autoPlace", Zt, (e) => {
 			let { source: n, shape: r } = e;
-			if (!v(n)) return;
+			if (!S(n)) return;
 			let i = this.desiredPosition(t.pendingType, n, r);
 			return this.deconflict(i, r);
 		}), this.elementRegistry = n;
@@ -824,67 +989,67 @@ var pt = {
 	}
 	sequencePosition(e, t) {
 		return {
-			x: e.x + e.width + vt + t.width / 2,
+			x: e.x + e.width + Qt + t.width / 2,
 			y: e.y + e.height / 2
 		};
 	}
 	assignmentPosition(e, t) {
 		return {
 			x: e.x + e.width / 2,
-			y: e.y + e.height + yt + t.height / 2
+			y: e.y + e.height + $t + t.height / 2
 		};
 	}
 	hierarchyPosition(e, t) {
-		let n = $e(e);
+		let n = Nt(e);
 		if (!n.length) return {
 			x: e.x + e.width / 2 + 10 + t.width / 2,
-			y: e.y + e.height + yt + t.height / 2
+			y: e.y + e.height + $t + t.height / 2
 		};
-		if (et(n, e)) {
-			let e = Tt(n);
+		if (Pt(n, e)) {
+			let e = on(n);
 			return {
-				x: e.x + e.width + xt + t.width / 2,
+				x: e.x + e.width + tn + t.width / 2,
 				y: e.y + t.height / 2
 			};
 		}
-		let r = Et(n);
+		let r = sn(n);
 		return {
 			x: r.x + t.width / 2,
-			y: r.y + r.height + bt + t.height / 2
+			y: r.y + r.height + en + t.height / 2
 		};
 	}
 	deconflict(e, t) {
-		let n = this.elementRegistry.getAll().filter(v), r = { ...e };
+		let n = this.elementRegistry.getAll().filter(S), r = { ...e };
 		for (let e = 0; e < 50; e += 1) {
 			let e = {
-				x: r.x - t.width / 2 - Ct,
-				y: r.y - t.height / 2 - Ct,
+				x: r.x - t.width / 2 - rn,
+				y: r.y - t.height / 2 - rn,
 				width: t.width + 20,
 				height: t.height + 20
 			};
 			if (!n.some((t) => t.x < e.x + e.width && t.x + t.width > e.x && t.y < e.y + e.height && t.y + t.height > e.y)) break;
-			r.y += St;
+			r.y += nn;
 		}
 		return r;
 	}
 };
-function Tt(e) {
+function on(e) {
 	return e.reduce((e, t) => !e || t.x + t.width > e.x + e.width ? t : e, void 0);
 }
-function Et(e) {
+function sn(e) {
 	return e.reduce((e, t) => !e || t.y + t.height > e.y + e.height ? t : e, void 0);
 }
 //#endregion
 //#region src/append/index.ts
-var Dt = {
+var cn = {
 	__depends__: [
-		be,
-		xe,
-		Se
+		Te,
+		Ee,
+		De
 	],
 	__init__: ["vcAutoPlaceBehavior", "vcCreatePreviewBehavior"],
-	vcAppend: ["type", gt],
-	vcAutoPlaceBehavior: ["type", wt],
+	vcAppend: ["type", Xt],
+	vcAutoPlaceBehavior: ["type", an],
 	vcCreatePreviewBehavior: ["type", class {
 		static $inject = ["injector", "eventBus"];
 		constructor(e, t) {
@@ -895,7 +1060,7 @@ var Dt = {
 				let i = typeof t.canExecute == "object" && t.canExecute?.connect;
 				n.drawPreview(t, i ?? !1, {
 					source: r,
-					connectionStart: m(r),
+					connectionStart: g(r),
 					connectionEnd: {
 						x: e.x,
 						y: e.y
@@ -911,44 +1076,77 @@ var Dt = {
 			}));
 		}
 	}]
+}, ln = {
+	"square-dashed-mouse-pointer": "<path d=\"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z\"/><path d=\"M5 3a2 2 0 0 0-2 2\"/><path d=\"M19 3a2 2 0 0 1 2 2\"/><path d=\"M5 21a2 2 0 0 1-2-2\"/><path d=\"M9 3h1\"/><path d=\"M9 21h2\"/><path d=\"M14 3h1\"/><path d=\"M3 9v1\"/><path d=\"M21 9v2\"/><path d=\"M3 14v1\"/>",
+	hand: "<path d=\"M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2\"/><path d=\"M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2\"/><path d=\"M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8\"/><path d=\"M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15\"/>",
+	"unfold-horizontal": "<path d=\"M16 12h6\"/><path d=\"M8 12H2\"/><path d=\"M12 2v2\"/><path d=\"M12 8v2\"/><path d=\"M12 14v2\"/><path d=\"M12 20v2\"/><path d=\"m19 15 3-3-3-3\"/><path d=\"m5 9-3 3 3 3\"/>",
+	workflow: "<rect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M7 11v4a2 2 0 0 0 2 2h4\"/><rect width=\"8\" height=\"8\" x=\"13\" y=\"13\" rx=\"2\"/>",
+	palette: "<path d=\"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\"/><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>",
+	trash: "<path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M3 6h18\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>",
+	"arrow-left-right": "<path d=\"M8 3 4 7l4 4\"/><path d=\"M4 7h16\"/><path d=\"m16 21 4-4-4-4\"/><path d=\"M20 17H4\"/>",
+	"align-start-vertical": "<rect width=\"9\" height=\"6\" x=\"6\" y=\"14\" rx=\"2\"/><rect width=\"16\" height=\"6\" x=\"6\" y=\"4\" rx=\"2\"/><path d=\"M2 2v20\"/>",
+	x: "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>"
+}, P = {
+	size: 16,
+	strokeWidth: 2.5
+}, F = {
+	size: 20,
+	strokeWidth: 2
 };
+/*! @miragon/value-chain-renderer icon geometry
+* Lucide (lucide-static 1.59.0) @license ISC
+* Copyright (c) 2026 Lucide Icons and Contributors
+* Derived from Feather, as Lucide's LICENSE lists them: trash and x. Feather @license MIT
+* Copyright (c) 2013-present Cole Bemis */
+function I(e, t = P) {
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${t.size}" height="${t.size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${t.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${ln[e]}</svg>`;
+}
 //#endregion
 //#region src/draw/icons.ts
-function G(e, t = "0 0 24 24") {
-	return `<svg viewBox="${t}" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${e}</svg>`;
+function L(e, t = "0 0 24 24") {
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${P.size}" height="${P.size}" viewBox="${t}" fill="none" stroke="currentColor" stroke-width="${P.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${e}</svg>`;
+}
+function un(e) {
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="${A.fill}" stroke="${A.ink}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${e}</svg>`;
 }
-var K = {
-	handTool: G("<path d=\"M18 11V7.5a1.5 1.5 0 0 0-3 0\"/><path d=\"M15 10.5V6a1.5 1.5 0 0 0-3 0v4\"/><path d=\"M12 10V7a1.5 1.5 0 0 0-3 0v6\"/><path d=\"M18 10a1.5 1.5 0 0 1 3 0v4.5a6.5 6.5 0 0 1-6.5 6.5h-1.6c-2.1 0-3.4-.7-4.5-1.8l-3-3a1.5 1.5 0 0 1 2.1-2.1L9 15.5\"/>"),
-	lassoTool: G("<rect x=\"3.5\" y=\"5.5\" width=\"14\" height=\"11\" rx=\"1\" stroke-dasharray=\"3.2 2.4\"/><path d=\"M17.5 16.5 l3.5 3.5 M21 17.5 v2.5 h-2.5\"/>"),
-	spaceTool: G("<path d=\"M12 3.5 v17\" stroke-dasharray=\"3.2 2.4\"/><path d=\"M15 12 h5.5 m-2.5 -2.5 2.5 2.5 -2.5 2.5\"/><path d=\"M9 12 H3.5 m2.5 -2.5 L3.5 12 l2.5 2.5\"/>"),
-	globalConnect: G("<rect x=\"3\" y=\"3.5\" width=\"6\" height=\"5\" rx=\"0.5\"/><rect x=\"15\" y=\"15.5\" width=\"6\" height=\"5\" rx=\"0.5\"/><path d=\"M9.5 9.5 L14.5 14.5 m-4.2 -1 4.2 1 -1 -4.2\" stroke-dasharray=\"2.6 2\"/>"),
-	createStep: G("<path d=\"M3 7 h12 l6 5 -6 5 H3 l4.5 -5 Z\"/>"),
-	appendStep: G("<path d=\"M2.5 12 h4.5 m-2 -2 2 2 -2 2\" stroke-dasharray=\"2.6 2\"/><path d=\"M9 7 h8 l4 5 -4 5 H9 l3 -5 Z\"/>"),
-	appendSubStep: G("<path d=\"M7 3 v8.5 h2.5\" /><path d=\"M11 7 h7.5 l3 4.5 -3 4.5 H11 l2.5 -4.5 Z\" transform=\"translate(-1.5 0.5)\"/>", "0 0 22 22"),
-	connectSequence: G("<path d=\"M4 19 L17.5 5.5\" stroke-dasharray=\"3 2.6\"/><path d=\"M13 5 h5.5 v5.5\" />"),
-	connectHierarchy: G("<path d=\"M6 4 v14 h11.5 m-3.5 -3.5 3.5 3.5 -3.5 3.5\"/>"),
-	createOrgUnit: G("<ellipse cx=\"12\" cy=\"12\" rx=\"9.5\" ry=\"6.5\"/>"),
-	appendOrgUnit: G("<path d=\"M12 3.5 v5\"/><ellipse cx=\"12\" cy=\"15\" rx=\"8.5\" ry=\"5.5\"/>"),
-	toggleType: G("<path d=\"M4.5 9 h13 m-3.2 -3.2 3.2 3.2 -3.2 3.2\"/><path d=\"M19.5 15.5 h-13 m3.2 3.2 -3.2 -3.2 3.2 -3.2\" stroke-dasharray=\"2.8 2.2\"/>"),
-	align: G("<path d=\"M4 3.5 v17\"/><rect x=\"7\" y=\"6\" width=\"12\" height=\"4\" rx=\"0.5\"/><rect x=\"7\" y=\"13.5\" width=\"7.5\" height=\"4\" rx=\"0.5\"/>"),
-	color: G("<path d=\"M12 3.5 c3 4 6 7 6 10.5 a6 6 0 1 1 -12 0 c0 -3.5 3 -6.5 6 -10.5 Z\"/>"),
-	trash: G("<path d=\"M4.5 6.5 h15 M9.5 6 V4.5 h5 V6 M6.5 6.5 l1 13 h9 l1 -13 M10 10 v6 M14 10 v6\"/>")
+var R = {
+	handTool: I("hand", F),
+	lassoTool: I("square-dashed-mouse-pointer", F),
+	spaceTool: I("unfold-horizontal", F),
+	globalConnect: I("workflow", F),
+	createStep: un("<path d=\"M3 7 h12 l6 5 -6 5 H3 l4.5 -5 Z\"/>"),
+	createOrgUnit: un("<ellipse cx=\"12\" cy=\"12\" rx=\"9.5\" ry=\"6.5\"/>"),
+	appendStep: L("<path d=\"M2.5 12 h4.5 m-2 -2 2 2 -2 2\" stroke-dasharray=\"2.6 2\"/><path d=\"M9 7 h8 l4 5 -4 5 H9 l3 -5 Z\"/>"),
+	appendSubStep: L("<path d=\"M7 3 v8.5 h2.5\" /><path d=\"M11 7 h7.5 l3 4.5 -3 4.5 H11 l2.5 -4.5 Z\" transform=\"translate(-1.5 0.5)\"/>", "0 0 22 22"),
+	connectSequence: L("<path d=\"M4 19 L17.5 5.5\" stroke-dasharray=\"3 2.6\"/><path d=\"M13 5 h5.5 v5.5\" />"),
+	connectHierarchy: L("<path d=\"M6 4 v14 h11.5 m-3.5 -3.5 3.5 3.5 -3.5 3.5\"/>"),
+	appendOrgUnit: L("<path d=\"M12 3.5 v5\"/><ellipse cx=\"12\" cy=\"15\" rx=\"8.5\" ry=\"5.5\"/>"),
+	toggleType: I("arrow-left-right"),
+	align: I("align-start-vertical"),
+	color: I("palette"),
+	trash: I("trash")
 };
-function q(e, t, n = !1) {
-	return `<div class="entry vc-palette-entry"${n ? " draggable=\"true\"" : ""} title="${t}">${e}</div>`;
+function z(e, t = !1) {
+	return `<div class="entry vc-palette-entry"${t ? " draggable=\"true\"" : ""}>${e}</div>`;
 }
-function J(e, t, n = !1) {
-	return `<div class="entry vc-cp-entry"${n ? " draggable=\"true\"" : ""} title="${t}">${e}</div>`;
+function B(e, t = !1) {
+	return `<div class="entry vc-cp-entry"${t ? " draggable=\"true\"" : ""}>${e}</div>`;
 }
 //#endregion
 //#region src/palette/VcPaletteProvider.ts
-var Ot = class {
+var dn = 24, fn = class {
 	create;
 	factory;
 	handTool;
 	lassoTool;
 	spaceTool;
 	globalConnect;
+	canvas;
+	modeling;
+	selection;
+	elementRegistry;
+	injector;
+	config;
 	static $inject = [
 		"palette",
 		"create",
@@ -956,112 +1154,146 @@ var Ot = class {
 		"handTool",
 		"lassoTool",
 		"spaceTool",
-		"globalConnect"
+		"globalConnect",
+		"canvas",
+		"modeling",
+		"selection",
+		"elementRegistry",
+		"injector",
+		"config.vcPalette"
 	];
-	constructor(e, t, n, r, i, a, o) {
-		this.create = t, this.factory = n, this.handTool = r, this.lassoTool = i, this.spaceTool = a, this.globalConnect = o, e.registerProvider(this);
+	constructor(e, t, n, r, i, a, o, s, c, l, u, d, f) {
+		this.create = t, this.factory = n, this.handTool = r, this.lassoTool = i, this.spaceTool = a, this.globalConnect = o, this.canvas = s, this.modeling = c, this.selection = l, this.elementRegistry = u, this.injector = d, this.config = f, e.registerProvider(this);
 	}
 	getPaletteEntries() {
-		let e = (e) => {
-			this.create.start(e, this.factory.createNewStep());
-		}, t = (e) => {
-			this.create.start(e, this.factory.createNewOrgUnit());
-		};
+		let e = (e) => (t) => {
+			if (this.editLock()?.isReadOnly()) return;
+			let n = e();
+			pn(t) ? this.placeInFreeRect(n) : this.create.start(t, n);
+		}, t = e(() => this.factory.createNewStep()), n = e(() => this.factory.createNewOrgUnit());
 		return {
-			"hand-tool": {
-				group: "tools",
-				title: "Activate hand tool — H",
-				html: q(K.handTool, "Activate hand tool"),
-				action: { click: (e) => this.handTool.activateHand(e, !1, !1) }
-			},
 			"lasso-tool": {
 				group: "tools",
-				title: "Activate lasso tool — L",
-				html: q(K.lassoTool, "Activate lasso tool"),
+				title: "Lasso",
+				shortcut: "L",
+				html: z(R.lassoTool),
 				action: { click: (e) => this.lassoTool.activateSelection(e, !1) }
 			},
+			"hand-tool": {
+				group: "tools",
+				title: "Hand",
+				shortcut: "H",
+				html: z(R.handTool),
+				action: { click: (e) => this.handTool.activateHand(e, !1, !1) }
+			},
 			"space-tool": {
 				group: "tools",
-				title: "Activate create/remove space tool — S",
-				html: q(K.spaceTool, "Activate create/remove space tool"),
+				title: "Create or remove space",
+				shortcut: "S",
+				html: z(R.spaceTool),
 				action: { click: (e) => this.spaceTool.activateSelection(e, !1, !1) }
 			},
 			"global-connect-tool": {
 				group: "tools",
-				title: "Activate connect tool — C",
-				html: q(K.globalConnect, "Activate connect tool"),
+				title: "Connect",
+				shortcut: "C",
+				html: z(R.globalConnect),
 				action: { click: (e) => this.globalConnect.start(e, !1) }
 			},
-			"tool-separator": {
-				group: "tools",
-				separator: !0
-			},
 			"create.step": {
 				group: "value-chain",
-				title: "Create step",
-				html: q(K.createStep, "Create step", !0),
+				title: "Step",
+				html: z(R.createStep, !0),
 				action: {
-					click: e,
-					dragstart: e
+					click: t,
+					dragstart: t
 				}
 			},
 			"create.org-unit": {
 				group: "value-chain",
-				title: "Create organizational unit",
-				html: q(K.createOrgUnit, "Create organizational unit", !0),
+				title: "Organizational unit",
+				html: z(R.createOrgUnit, !0),
 				action: {
-					click: t,
-					dragstart: t
+					click: n,
+					dragstart: n
 				}
 			}
 		};
 	}
-}, kt = {
+	placeInFreeRect(e) {
+		let t = this.config?.freeRectCenter?.() ?? this.visibleCentre(), n = {
+			x: t.x,
+			y: t.y
+		};
+		for (; this.centreTaken(n);) n.x += dn, n.y += dn;
+		let r = this.modeling.createShape(e, n, this.canvas.getRootElement());
+		this.selection.select(r), this.canvas.focus(), this.injector.get("directEditing", !1)?.activate(r);
+	}
+	visibleCentre() {
+		let { x: e, y: t, width: n, height: r } = this.canvas.viewbox();
+		return {
+			x: e + n / 2,
+			y: t + r / 2
+		};
+	}
+	centreTaken(e) {
+		return this.elementRegistry.filter(S).some((t) => Math.abs(t.x + t.width / 2 - e.x) < 1 && Math.abs(t.y + t.height / 2 - e.y) < 1);
+	}
+	editLock() {
+		return this.injector.get("vcReadOnly", !1);
+	}
+};
+function pn(e) {
+	return e.type === "click" && e.detail === 0;
+}
+//#endregion
+//#region src/palette/index.ts
+var mn = {
 	__depends__: [
-		Ce,
-		xe,
-		we,
-		Te,
+		Oe,
 		Ee,
-		De
+		ke,
+		Ae,
+		je,
+		Me
 	],
 	__init__: ["vcPaletteProvider"],
-	vcPaletteProvider: ["type", Ot]
-}, Y = "vc-color-picker";
-function At(e) {
-	return `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><rect x="1" y="1" width="14" height="14" rx="2" fill="white" stroke="${e}" stroke-width="2"/></svg>`;
+	vcPaletteProvider: ["type", fn]
+}, V = "vc-color-picker";
+function hn(e) {
+	return `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><rect x="1" y="1" width="14" height="14" rx="2" fill="${A.fill}" stroke="${e}" stroke-width="2"/></svg>`;
 }
-var jt = class {
+var gn = class {
 	vcModeling;
 	static $inject = ["popupMenu", "vcModeling"];
 	constructor(e, t) {
-		this.vcModeling = t, e.registerProvider(Y, this);
+		this.vcModeling = t, e.registerProvider(V, this);
 	}
 	getPopupMenuEntries(e) {
 		let t = Array.isArray(e) ? e[0] : e;
-		if (!v(t)) return {};
+		if (!S(t)) return {};
 		let n = {};
-		for (let e of L) n[`color-${e.label.toLowerCase()}`] = {
+		for (let e of st) n[`color-${e.label.toLowerCase()}`] = {
 			label: e.label,
-			imageHtml: At(e.color ?? F.ink),
+			imageHtml: hn(e.color ?? A.ink),
 			action: () => this.vcModeling.setColor(t, e.color)
 		};
 		return n;
 	}
-}, X = "vc-align-elements";
-function Z(e) {
+}, H = "vc-align-elements";
+function U(e) {
 	return `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" aria-hidden="true">${e}</svg>`;
 }
-var Q = {
-	left: Z("<path d=\"M3 2v12\"/><rect x=\"5\" y=\"4\" width=\"8\" height=\"3\"/><rect x=\"5\" y=\"9\" width=\"5\" height=\"3\"/>"),
-	center: Z("<path d=\"M8 2v12\"/><rect x=\"4\" y=\"4\" width=\"8\" height=\"3\"/><rect x=\"5.5\" y=\"9\" width=\"5\" height=\"3\"/>"),
-	right: Z("<path d=\"M13 2v12\"/><rect x=\"3\" y=\"4\" width=\"8\" height=\"3\"/><rect x=\"6\" y=\"9\" width=\"5\" height=\"3\"/>"),
-	top: Z("<path d=\"M2 3h12\"/><rect x=\"4\" y=\"5\" width=\"3\" height=\"8\"/><rect x=\"9\" y=\"5\" width=\"3\" height=\"5\"/>"),
-	middle: Z("<path d=\"M2 8h12\"/><rect x=\"4\" y=\"4\" width=\"3\" height=\"8\"/><rect x=\"9\" y=\"5.5\" width=\"3\" height=\"5\"/>"),
-	bottom: Z("<path d=\"M2 13h12\"/><rect x=\"4\" y=\"3\" width=\"3\" height=\"8\"/><rect x=\"9\" y=\"6\" width=\"3\" height=\"5\"/>"),
-	horizontal: Z("<rect x=\"2\" y=\"5\" width=\"3\" height=\"6\"/><rect x=\"6.5\" y=\"5\" width=\"3\" height=\"6\"/><rect x=\"11\" y=\"5\" width=\"3\" height=\"6\"/>"),
-	vertical: Z("<rect x=\"5\" y=\"2\" width=\"6\" height=\"3\"/><rect x=\"5\" y=\"6.5\" width=\"6\" height=\"3\"/><rect x=\"5\" y=\"11\" width=\"6\" height=\"3\"/>")
-}, Mt = class {
+var W = {
+	left: U("<path d=\"M3 2v12\"/><rect x=\"5\" y=\"4\" width=\"8\" height=\"3\"/><rect x=\"5\" y=\"9\" width=\"5\" height=\"3\"/>"),
+	center: U("<path d=\"M8 2v12\"/><rect x=\"4\" y=\"4\" width=\"8\" height=\"3\"/><rect x=\"5.5\" y=\"9\" width=\"5\" height=\"3\"/>"),
+	right: U("<path d=\"M13 2v12\"/><rect x=\"3\" y=\"4\" width=\"8\" height=\"3\"/><rect x=\"6\" y=\"9\" width=\"5\" height=\"3\"/>"),
+	top: U("<path d=\"M2 3h12\"/><rect x=\"4\" y=\"5\" width=\"3\" height=\"8\"/><rect x=\"9\" y=\"5\" width=\"3\" height=\"5\"/>"),
+	middle: U("<path d=\"M2 8h12\"/><rect x=\"4\" y=\"4\" width=\"3\" height=\"8\"/><rect x=\"9\" y=\"5.5\" width=\"3\" height=\"5\"/>"),
+	bottom: U("<path d=\"M2 13h12\"/><rect x=\"4\" y=\"3\" width=\"3\" height=\"8\"/><rect x=\"9\" y=\"6\" width=\"3\" height=\"5\"/>"),
+	horizontal: U("<rect x=\"2\" y=\"5\" width=\"3\" height=\"6\"/><rect x=\"6.5\" y=\"5\" width=\"3\" height=\"6\"/><rect x=\"11\" y=\"5\" width=\"3\" height=\"6\"/>"),
+	vertical: U("<rect x=\"5\" y=\"2\" width=\"6\" height=\"3\"/><rect x=\"5\" y=\"6.5\" width=\"6\" height=\"3\"/><rect x=\"5\" y=\"11\" width=\"6\" height=\"3\"/>")
+}, _n = class {
 	alignElements;
 	distributeElements;
 	static $inject = [
@@ -1070,10 +1302,10 @@ var Q = {
 		"distributeElements"
 	];
 	constructor(e, t, n) {
-		this.alignElements = t, this.distributeElements = n, e.registerProvider(X, this);
+		this.alignElements = t, this.distributeElements = n, e.registerProvider(H, this);
 	}
 	getPopupMenuEntries(e) {
-		let t = (Array.isArray(e) ? e : [e]).filter(v);
+		let t = (Array.isArray(e) ? e : [e]).filter(S);
 		if (t.length < 2) return {};
 		let n = (e, n, r) => ({
 			label: n,
@@ -1081,94 +1313,97 @@ var Q = {
 			imageHtml: r,
 			action: () => this.alignElements.trigger(t, e)
 		}), r = {
-			"align-left": n("left", "Align left", Q.left),
-			"align-center": n("center", "Align center", Q.center),
-			"align-right": n("right", "Align right", Q.right),
-			"align-top": n("top", "Align top", Q.top),
-			"align-middle": n("middle", "Align middle", Q.middle),
-			"align-bottom": n("bottom", "Align bottom", Q.bottom)
+			"align-left": n("left", "Align left", W.left),
+			"align-center": n("center", "Align center", W.center),
+			"align-right": n("right", "Align right", W.right),
+			"align-top": n("top", "Align top", W.top),
+			"align-middle": n("middle", "Align middle", W.middle),
+			"align-bottom": n("bottom", "Align bottom", W.bottom)
 		};
 		return t.length >= 3 && (r["distribute-horizontally"] = {
 			label: "Distribute horizontally",
 			group: "distribute",
-			imageHtml: Q.horizontal,
+			imageHtml: W.horizontal,
 			action: () => this.distributeElements.trigger(t, "horizontal")
 		}, r["distribute-vertically"] = {
 			label: "Distribute vertically",
 			group: "distribute",
-			imageHtml: Q.vertical,
+			imageHtml: W.vertical,
 			action: () => this.distributeElements.trigger(t, "vertical")
 		}), r;
 	}
-}, Nt = class {
+}, vn = class {
 	modeling;
 	popupMenu;
 	vcAppend;
 	vcConnect;
 	vcModeling;
+	readOnly;
 	static $inject = [
 		"contextPad",
 		"modeling",
 		"popupMenu",
 		"vcAppend",
 		"vcConnect",
-		"vcModeling"
+		"vcModeling",
+		"vcReadOnly"
 	];
-	constructor(e, t, n, r, i, a) {
-		this.modeling = t, this.popupMenu = n, this.vcAppend = r, this.vcConnect = i, this.vcModeling = a, e.registerProvider(this);
+	constructor(e, t, n, r, i, a, o) {
+		this.modeling = t, this.popupMenu = n, this.vcAppend = r, this.vcConnect = i, this.vcModeling = a, this.readOnly = o, e.registerProvider(this);
 	}
 	getContextPadEntries(e) {
 		let t = {};
-		if (y(e) && this.addStepEntries(t, e), b(e)) {
+		if (this.readOnly.isReadOnly()) return t;
+		if (C(e) && this.addStepEntries(t, e), w(e)) {
 			let n = (t) => {
 				this.vcConnect.start(t, e, "assignment");
 			};
 			t["connect.assignment"] = {
 				group: "connect",
 				title: "Connect to step",
-				html: J(K.connectHierarchy, "Connect to step", !0),
+				html: B(R.connectHierarchy, !0),
 				action: {
 					click: n,
 					dragstart: n
 				}
 			};
 		}
-		if (v(e) && (t["set-color"] = {
+		if (S(e) && (t["set-color"] = {
 			group: "edit",
 			title: "Set color",
-			html: J(K.color, "Set color"),
+			html: B(R.color),
 			action: { click: (t) => {
 				let n = t;
-				this.popupMenu.open(e, Y, {
+				this.popupMenu.open(e, V, {
 					x: n.clientX,
 					y: n.clientY
 				});
 			} }
-		}), x(e) && e.vcType !== "assignment") {
+		}), T(e) && e.vcType !== "assignment") {
 			let n = e, r = n.vcType === "sequence" ? "hierarchy" : "sequence";
 			t["toggle-type"] = {
 				group: "edit",
 				title: `Switch to "${r === "sequence" ? "is predecessor of" : "is process-oriented superior"}"`,
-				html: J(K.toggleType, "Switch relation type"),
+				html: B(R.toggleType),
 				action: { click: () => this.vcModeling.setConnectionType(n, r) }
 			};
 		}
-		return (v(e) || x(e)) && (t.delete = {
+		return (S(e) || T(e)) && (t.delete = {
 			group: "edit",
 			title: "Delete",
-			html: J(K.trash, "Delete"),
+			html: B(R.trash),
 			action: { click: () => this.modeling.removeElements([e]) }
 		}), t;
 	}
 	getMultiElementContextPadEntries(e) {
 		let t = {};
-		return e.filter(v).length >= 2 && (t.align = {
+		return this.readOnly.isReadOnly() || (e.filter(S).length >= 2 && (t.align = {
 			group: "edit",
 			title: "Align / distribute",
-			html: J(K.align, "Align / distribute"),
+			html: B(R.align),
 			action: { click: (t) => {
 				let n = t;
-				this.popupMenu.open(e, X, {
+				this.popupMenu.open(e, H, {
 					x: n.clientX,
 					y: n.clientY
 				});
@@ -1176,9 +1411,9 @@ var Q = {
 		}), t.delete = {
 			group: "edit",
 			title: "Delete",
-			html: J(K.trash, "Delete"),
+			html: B(R.trash),
 			action: { click: () => this.modeling.removeElements([...e]) }
-		}, t;
+		}), t;
 	}
 	addStepEntries(e, t) {
 		let n = (e) => () => {
@@ -1191,7 +1426,7 @@ var Q = {
 		e["append.step"] = {
 			group: "model",
 			title: "Append step (is predecessor of)",
-			html: J(K.appendStep, "Append step (is predecessor of)", !0),
+			html: B(R.appendStep, !0),
 			action: {
 				click: n("sequence"),
 				dragstart: r("sequence")
@@ -1199,7 +1434,7 @@ var Q = {
 		}, e["append.sub-step"] = {
 			group: "model",
 			title: "Append sub-step (is process-oriented superior)",
-			html: J(K.appendSubStep, "Append sub-step (is process-oriented superior)", !0),
+			html: B(R.appendSubStep, !0),
 			action: {
 				click: n("hierarchy"),
 				dragstart: r("hierarchy")
@@ -1207,7 +1442,7 @@ var Q = {
 		}, e["append.org-unit"] = {
 			group: "model",
 			title: "Append organizational unit",
-			html: J(K.appendOrgUnit, "Append organizational unit", !0),
+			html: B(R.appendOrgUnit, !0),
 			action: {
 				click: n("assignment"),
 				dragstart: r("assignment")
@@ -1215,7 +1450,7 @@ var Q = {
 		}, e["connect.sequence"] = {
 			group: "connect",
 			title: "Connect (is predecessor of)",
-			html: J(K.connectSequence, "Connect (is predecessor of)", !0),
+			html: B(R.connectSequence, !0),
 			action: {
 				click: i("sequence"),
 				dragstart: i("sequence")
@@ -1223,35 +1458,39 @@ var Q = {
 		}, e["connect.hierarchy"] = {
 			group: "connect",
 			title: "Connect (is process-oriented superior)",
-			html: J(K.connectHierarchy, "Connect (is process-oriented superior)", !0),
+			html: B(R.connectHierarchy, !0),
 			action: {
 				click: i("hierarchy"),
 				dragstart: i("hierarchy")
 			}
 		};
 	}
-}, Pt = {
-	__depends__: [Oe, g],
+}, yn = {
+	__depends__: [Ne, v],
 	__init__: ["vcContextPadProvider"],
-	vcContextPadProvider: ["type", Nt]
-}, Ft = class {
+	vcContextPadProvider: ["type", vn]
+}, bn = class {
 	directEditing;
 	canvas;
 	vcModeling;
+	elementRegistry;
 	static $inject = [
 		"directEditing",
 		"canvas",
 		"eventBus",
-		"vcModeling"
+		"vcModeling",
+		"elementRegistry"
 	];
-	constructor(e, t, n, r) {
-		this.directEditing = e, this.canvas = t, this.vcModeling = r, e.registerProvider(this), n.on("element.dblclick", (t) => {
-			t.element && v(t.element) && e.activate(t.element);
+	suspended = null;
+	resumeTimer;
+	constructor(e, t, n, r, i) {
+		this.directEditing = e, this.canvas = t, this.vcModeling = r, this.elementRegistry = i, e.registerProvider(this), n.on("element.dblclick", (t) => {
+			t.element && S(t.element) && e.activate(t.element);
 		}), n.on("autoPlace.end", 500, (t) => {
-			t.shape && v(t.shape) && e.activate(t.shape);
+			t.shape && S(t.shape) && e.activate(t.shape);
 		}), n.on("create.end", 500, (t) => {
 			let { source: n, shape: r, canExecute: i } = t.context;
-			n && i && r && v(r) && e.activate(r);
+			n && i && r && S(r) && e.activate(r);
 		}), n.on([
 			"element.mousedown",
 			"drag.init",
@@ -1260,13 +1499,45 @@ var Q = {
 			"popupMenu.open"
 		], () => {
 			e.isActive() && e.complete();
-		}), n.on(["commandStack.changed", "diagram.destroy"], () => {
+		}), n.on("commandStack.changed", () => {
 			e.isActive() && e.cancel();
+		}), n.on("diagram.destroy", 1500, () => {
+			clearTimeout(this.resumeTimer), this.suspended = null, e.isActive() && e.cancel();
 		});
 	}
+	openEdit() {
+		let e = this.directEditing._active?.element;
+		if (this.directEditing.isActive() && S(e)) return {
+			element: e,
+			text: this.directEditing.getValue()
+		};
+	}
+	suspend() {
+		clearTimeout(this.resumeTimer);
+		let e = this.openEdit();
+		e && (this.suspended = {
+			elementId: e.element.id,
+			text: e.text
+		}, this.directEditing.cancel());
+	}
+	resumeAfterImport() {
+		clearTimeout(this.resumeTimer), this.suspended && (this.resumeTimer = setTimeout(() => {
+			let e = this.suspended;
+			this.suspended = null, e && !this.directEditing.isActive() && this.resume(e);
+		}, 0));
+	}
+	resume(e) {
+		let t = this.elementRegistry.get(e.elementId);
+		if (!S(t) || !this.directEditing.activate(t)) return;
+		let n = this.directEditing._textbox?.content;
+		if (!n) return;
+		n.innerText = e.text;
+		let r = n.ownerDocument.getSelection();
+		r?.selectAllChildren(n), r?.collapseToEnd();
+	}
 	activate(e) {
-		if (!v(e)) return;
-		let t = e, n = this.canvas.getAbsoluteBBox(t), r = this.canvas.zoom(), i = (b(t) ? 12 : M(t.width, t.height)) * r;
+		if (!S(e)) return;
+		let t = e, n = this.canvas.getAbsoluteBBox(t), r = this.canvas.zoom(), i = (w(t) ? 12 : at(t.width, t.height)) * r;
 		return {
 			bounds: {
 				x: n.x + i,
@@ -1275,142 +1546,201 @@ var Q = {
 				height: n.height
 			},
 			style: {
-				fontFamily: I.family,
-				fontSize: `${I.size * r}px`,
+				fontFamily: j.family,
+				fontSize: `${j.size * r}px`,
 				fontWeight: "normal",
-				lineHeight: String(I.lineHeight),
-				textAlign: "center"
+				lineHeight: String(j.lineHeight),
+				textAlign: "center",
+				backgroundColor: "var(--cd-ui-flaeche-hoch)",
+				border: "1px solid var(--cd-ui-interaktion)"
 			},
 			options: { centerVertically: !0 },
 			text: t.vcLabel || ""
 		};
 	}
 	update(e, t) {
-		this.vcModeling.updateLabel(e, It(t));
+		this.vcModeling.updateLabel(e, xn(t));
 	}
 };
-function It(e) {
+function xn(e) {
 	return e.replace(/\r\n?/g, "\n").trim();
 }
 //#endregion
 //#region src/label-editing/index.ts
-var Lt = {
-	__depends__: [ke],
+var Sn = {
+	__depends__: [Pe],
 	__init__: ["vcLabelEditingProvider"],
-	vcLabelEditingProvider: ["type", Ft]
-}, Rt = {
-	__depends__: [g],
+	vcLabelEditingProvider: ["type", bn]
+}, Cn = {
+	__depends__: [v],
 	__init__: ["vcColorPickerProvider"],
-	vcColorPickerProvider: ["type", jt]
-}, zt = {
+	vcColorPickerProvider: ["type", gn]
+}, wn = {
 	__depends__: [
-		g,
-		Ae,
-		je
+		v,
+		Fe,
+		Ie
 	],
 	__init__: ["vcAlignMenuProvider"],
-	vcAlignMenuProvider: ["type", Mt]
-}, $ = class extends Pe {
+	vcAlignMenuProvider: ["type", _n]
+}, Tn = /* @__PURE__ */ new Set(["undo", "redo"]), En = class extends ze {
+	static $inject = [
+		"eventBus",
+		"keyboard",
+		"config.vcKeyboard"
+	];
+	undoRedoKeys;
+	constructor(e, t, n) {
+		super(e, t), this.undoRedoKeys = n?.undoRedoKeys ?? !0;
+	}
 	registerBindings(e, t) {
-		super.registerBindings(e, t);
-		let n = (n, r) => {
+		let n = this.undoRedoKeys ? t : Object.create(t, { isRegistered: { value: (e) => !Tn.has(e) && t.isRegistered(e) } });
+		super.registerBindings(e, n);
+		let r = (n, r) => {
 			t.isRegistered(n) && e.addListener(r);
-		}, r = (e, r) => {
-			n(e, (n) => {
-				let i = n.keyEvent;
-				if (Ie(r, i) && !Fe(i)) return t.trigger(e, {}), !0;
+		}, i = (e, n) => {
+			r(e, (r) => {
+				let i = r.keyEvent;
+				if (y(n, i) && !Be(i)) return t.trigger(e, {}), !0;
 			});
 		};
-		r("handTool", ["h", "H"]), r("lassoTool", ["l", "L"]), r("spaceTool", ["s", "S"]), r("globalConnectTool", ["c", "C"]), r("directEditing", ["e", "E"]);
+		i("lassoTool", ["l", "L"]), i("handTool", ["h", "H"]), i("spaceTool", ["s", "S"]), i("globalConnectTool", ["c", "C"]), i("directEditing", ["e", "E"]), r("selectAll", (e) => {
+			let n = e.keyEvent;
+			if (Ve(n) && y(["a", "A"], n) && !n.shiftKey && !n.altKey) return t.trigger("selectAll", {}), !0;
+		});
 	}
-}, Bt = 1500, Vt = class {
+}, Dn = 1500, On = class {
 	static $inject = ["eventBus", "injector"];
 	constructor(e, t) {
-		e.on("editorActions.init", Bt, (e) => {
-			let { editorActions: n } = e, r = (e, r, i) => {
-				let a = t.get(r, !1);
-				a && n.register({ [e]: () => i(a) });
+		e.on("editorActions.init", Dn, (e) => {
+			let { editorActions: n } = e, r = t.get("vcReadOnly", !1), i = () => !r?.isReadOnly(), a = (e, r, i, a = () => !0) => {
+				let o = t.get(r, !1);
+				o && n.register({ [e]: () => {
+					a() && i(o);
+				} });
 			};
-			r("handTool", "handTool", (e) => e.toggle()), r("lassoTool", "lassoTool", (e) => e.toggle()), r("spaceTool", "spaceTool", (e) => e.toggle()), r("globalConnectTool", "globalConnect", (e) => e.toggle());
-			let i = t.get("directEditing", !1), a = t.get("selection", !1);
-			i && a && n.register({ directEditing: () => {
-				let e = a.get();
-				e.length === 1 && e[0] && i.activate(e[0]);
+			a("handTool", "handTool", (e) => e.toggle()), a("lassoTool", "lassoTool", (e) => e.toggle()), a("spaceTool", "spaceTool", (e) => e.toggle(), i), a("globalConnectTool", "globalConnect", (e) => e.toggle(), i);
+			let o = t.get("elementRegistry", !1), s = t.get("selection", !1);
+			o && s && n.register({ selectAll: () => s.select(o.filter(E)) });
+			let c = t.get("directEditing", !1);
+			c && s && n.register({ directEditing: () => {
+				let e = s.get();
+				i() && e.length === 1 && e[0] && c.activate(e[0]);
 			} });
 		});
 	}
-}, Ht = {
-	__depends__: [Me, Ne],
+}, kn = {
+	__depends__: [Le, Re],
 	__init__: ["vcEditorActions"],
-	keyboardBindings: ["type", $],
-	vcEditorActions: ["type", Vt]
-}, Ut = class extends Le {
+	keyboardBindings: ["type", En],
+	vcEditorActions: ["type", On]
+}, An = class extends He {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		super(e);
 	}
 	getOrdering(e, t) {
-		return x(e) ? {
+		return T(e) ? {
 			parent: t,
-			index: (t.children ?? []).filter((t) => t !== e && x(t)).length
+			index: (t.children ?? []).filter((t) => t !== e && T(t)).length
 		} : { parent: t };
 	}
-}, Wt = {
+}, jn = {
 	__init__: ["vcOrderingProvider"],
-	vcOrderingProvider: ["type", Ut]
-}, Gt = class {
+	vcOrderingProvider: ["type", An]
+}, Mn = class {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		e.on("copyPaste.copyElement", (e) => {
 			let { descriptor: t, element: n } = e;
-			v(n) ? (t.vcType = n.vcType, t.vcLabel = n.vcLabel, n.color !== void 0 && (t.color = n.color), n.link !== void 0 && (t.link = n.link)) : x(n) && (t.vcType = n.vcType);
+			S(n) ? (t.vcType = n.vcType, t.vcLabel = n.vcLabel, n.color !== void 0 && (t.color = n.color), n.link !== void 0 && (t.link = n.link)) : T(n) && (t.vcType = n.vcType);
 		});
 	}
-}, Kt = {
-	__depends__: [Re],
+}, Nn = {
+	__depends__: [Ue],
 	__init__: ["vcCopyPasteBehavior"],
-	vcCopyPasteBehavior: ["type", Gt]
-}, qt = class {
+	vcCopyPasteBehavior: ["type", Mn]
+}, Pn = class {
 	static $inject = ["eventBus"];
 	constructor(e) {
 		e.on("resize.start", (e) => {
-			v(e.context.shape) && (e.context.minDimensions = { ...a });
+			S(e.context.shape) && (e.context.minDimensions = { ...i });
 		}), e.on("spaceTool.getMinDimensions", (e) => {
 			let t = {};
-			for (let n of e.shapes) v(n) && (t[n.id] = { ...a });
+			for (let n of e.shapes) S(n) && (t[n.id] = { ...i });
 			return t;
 		});
 	}
-}, Jt = {
-	__depends__: [ze],
+}, Fn = {
+	__depends__: [We],
 	__init__: ["vcResizeBehavior"],
-	vcResizeBehavior: ["type", qt]
-}, Yt = class extends Ue {
+	vcResizeBehavior: ["type", Pn]
+}, In = "valueChain.readOnly.changed", G = 5e3, Ln = [
+	"elements.move",
+	"shape.move",
+	"shape.resize",
+	"shape.create",
+	"elements.create",
+	"shape.append",
+	"connection.start",
+	"connection.create",
+	"connection.reconnect",
+	"connection.updateWaypoints",
+	"elements.delete",
+	"elements.align",
+	"elements.distribute"
+], Rn = class extends Ce {
+	bus;
+	injector;
+	static $inject = ["eventBus", "injector"];
+	readOnly = !1;
+	constructor(e, t) {
+		super(e), this.bus = e, this.injector = t, e.on("copyPaste.pasteElements", G, () => !this.readOnly && void 0), e.on("directEditing.activate.allowed", G, () => !this.readOnly && void 0);
+	}
+	init() {
+		this.addRule(Ln, G, () => !this.readOnly && void 0);
+	}
+	isReadOnly() {
+		return this.readOnly;
+	}
+	setReadOnly(e) {
+		this.readOnly !== e && (this.readOnly = e, e && this.interruptEdits(), this.bus.fire(In, { readOnly: e }));
+	}
+	interruptEdits() {
+		let e = (e) => this.injector.get(e, !1);
+		e("directEditing")?.cancel(), e("dragging")?.cancel(), e("popupMenu")?.close(), e("contextPad")?.close();
+	}
+}, zn = {
+	__depends__: [Se],
+	__init__: ["vcReadOnly"],
+	vcReadOnly: ["type", Rn]
+}, Bn = class extends N {
 	_getModules() {
 		return [
 			...super._getModules(),
-			re,
-			ie,
-			ae,
-			oe,
-			se,
 			ce,
 			le,
 			ue,
 			de,
-			ct,
-			pt,
-			ht,
-			Dt,
-			kt,
-			Pt,
-			Lt,
-			Rt,
-			zt,
+			fe,
+			pe,
+			me,
+			he,
+			ge,
+			zn,
 			Ht,
-			Wt,
-			Kt,
-			Jt
+			qt,
+			Yt,
+			cn,
+			mn,
+			yn,
+			Sn,
+			Cn,
+			wn,
+			kn,
+			jn,
+			Nn,
+			Fn
 		];
 	}
 	undo() {
@@ -1425,8 +1755,387 @@ var Lt = {
 	canRedo() {
 		return this.get("commandStack").canRedo();
 	}
-};
+}, Vn = "value-chain", Hn = "New value chain";
+function Un(e = {}) {
+	return qn(new Bn({
+		...Gn(e),
+		undoRedoKeys: e.undoRedoKeys ?? !0,
+		freeRectCenter: e.freeRectCenter
+	}), !0);
+}
+function Wn(e = {}) {
+	return qn(new N(Gn(e)), !1);
+}
+function Gn(e) {
+	return {
+		width: "100%",
+		height: "100%",
+		additionalModules: e.additionalModules ?? []
+	};
+}
+function Kn(e) {
+	return e.trim() === "" ? o(Hn) : u(e);
+}
+function qn(e, t) {
+	let n = e.get("eventBus"), r = e.get("canvas"), i = e.get("elementRegistry"), a = e.get("selection"), o = /* @__PURE__ */ new Set(), s = !1, c = "", l = {
+		notation: Vn,
+		apiVersion: Ge,
+		editable: t
+	};
+	return t && n.on("commandStack.changed", () => {
+		for (let e of [...o]) e();
+	}), {
+		meta: l,
+		elements: {
+			list: () => s ? [] : i.getAll().filter(S).map(Jn),
+			reveal(e) {
+				if (s) return !1;
+				let t = i.get(e);
+				return S(t) ? (a.select(t), r.scrollToElement(t), !0) : !1;
+			},
+			selection: () => s ? [] : K(a.get()),
+			onSelection(e) {
+				let t = (t) => e(K(t.newSelection ?? []));
+				return n.on("selection.changed", t), () => n.off("selection.changed", t);
+			}
+		},
+		diagram: e,
+		attachTo(t) {
+			t.appendChild(e.container), r.resized();
+		},
+		importText(t) {
+			if (s) return Promise.reject(/* @__PURE__ */ Error("The modeler was destroyed."));
+			try {
+				let n = e.importDocument(Kn(t));
+				return Promise.resolve({ warnings: n.map((e) => e.message) });
+			} catch (e) {
+				return Promise.reject(e instanceof Error ? e : Error(String(e)));
+			}
+		},
+		exportText() {
+			return s ? c : d(e.exportDocument());
+		},
+		onContentChanged(e) {
+			return t ? (o.add(e), () => o.delete(e)) : () => void 0;
+		},
+		getViewState() {
+			if (!s) try {
+				let { x: e, y: t, width: n, height: i } = r.viewbox(), a = {
+					x: e,
+					y: t,
+					width: n,
+					height: i
+				};
+				return Yn(a) ? a : void 0;
+			} catch {
+				return;
+			}
+		},
+		setViewState(e) {
+			!s && Yn(e) && r.viewbox({
+				x: e.x,
+				y: e.y,
+				width: e.width,
+				height: e.height
+			});
+		},
+		destroy() {
+			if (!s) {
+				try {
+					c = d(e.exportDocument());
+				} catch {
+					c = "";
+				}
+				s = !0, o.clear(), e.destroy();
+			}
+		}
+	};
+}
+function K(e) {
+	return e.filter(S).map((e) => e.id);
+}
+function Jn(e) {
+	return e.vcLabel ? {
+		id: e.id,
+		name: e.vcLabel
+	} : { id: e.id };
+}
+function Yn(e) {
+	if (typeof e != "object" || !e) return !1;
+	let { x: t, y: n, width: r, height: i } = e;
+	return q(t) && q(n) && q(r) && q(i) && r > 0 && i > 0;
+}
+function q(e) {
+	return typeof e == "number" && Number.isFinite(e);
+}
+//#endregion
+//#region src/diagram-menu/menu.ts
+function J(e, t, n, r) {
+	return {
+		kind: "action",
+		id: e,
+		label: t,
+		...r ? { icon: r } : {},
+		...n.shortcut ? { shortcut: n.shortcut } : {},
+		onSelect: () => n.onSelect()
+	};
+}
+var Y = "Export as JSON";
+function Xn(e) {
+	let { exports: t } = e;
+	return {
+		export: [
+			J("export-png", "Export as PNG", t.png, "file-image"),
+			J("export-svg", "Export as SVG", t.svg, "file-code-corner"),
+			...t.json ? [J("export-json", Y, t.json)] : []
+		],
+		help: [{
+			kind: "dialog",
+			id: "keyboard-shortcuts",
+			label: "Keyboard shortcuts…",
+			icon: "keyboard",
+			onSelect: () => e.showKeyboardShortcuts()
+		}]
+	};
+}
+//#endregion
+//#region src/diagram-menu/shortcuts.ts
+var X = [
+	"←",
+	"↑",
+	"→",
+	"↓"
+];
+function Zn(e, t, n) {
+	return t === "mac" ? `⌘${e}` : `${n.ctrl}+${e}`;
+}
+function Qn(e) {
+	try {
+		return new Intl.NumberFormat(e, { style: "percent" }).format(1);
+	} catch {
+		return new Intl.NumberFormat("en", { style: "percent" }).format(1);
+	}
+}
+function $n(e, t) {
+	if (e === "mac") return {
+		zoomIn: "⌘+",
+		zoomOut: "⌘−",
+		zoomToActual: "⌘0",
+		fit: "⇧1"
+	};
+	let { ctrl: n, shift: r, plus: i, minus: a } = t;
+	return {
+		zoomIn: `${n}+${i}`,
+		zoomOut: `${n}+${a}`,
+		zoomToActual: `${n}+0`,
+		fit: `${r}+1`
+	};
+}
+function er(e, t) {
+	if (e === "mac") return {
+		undo: ["⌘Z"],
+		redo: ["⌘⇧Z"],
+		selectAll: ["⌘A"],
+		copy: ["⌘C"],
+		cut: ["⌘X"],
+		paste: ["⌘V"],
+		duplicate: ["⌘D"],
+		remove: ["⌫"],
+		coarseMove: X.map((e) => `⇧${e}`),
+		moveCanvas: X.map((e) => `⌘${e}`),
+		lassoDrag: ["⇧ Drag"]
+	};
+	let { ctrl: n, shift: r } = t;
+	return {
+		undo: [`${n}+Z`],
+		redo: [`${n}+${r}+Z`, `${n}+Y`],
+		selectAll: [`${n}+A`],
+		copy: [`${n}+C`],
+		cut: [`${n}+X`],
+		paste: [`${n}+V`],
+		duplicate: [`${n}+D`],
+		remove: ["Del", "Backspace"],
+		coarseMove: X.map((e) => `${r}+${e}`),
+		moveCanvas: X.map((e) => `${n}+${e}`),
+		lassoDrag: [`${r}+Drag`]
+	};
+}
+function tr(e) {
+	let { platform: t, messages: n } = e;
+	return {
+		title: "File",
+		rows: [{
+			action: n.openFile ?? "Open…",
+			keys: [Zn("O", t, n.keyNames)]
+		}, {
+			action: Y,
+			keys: [Zn("S", t, n.keyNames)]
+		}]
+	};
+}
+function nr(e, t = {}) {
+	let { platform: n, messages: r } = e, i = $n(n, r.keyNames), a = er(n, r.keyNames);
+	return [
+		...t.fileKeys ? [tr(e)] : [],
+		{
+			title: "View",
+			rows: [
+				{
+					action: r.zoomIn,
+					keys: [i.zoomIn]
+				},
+				{
+					action: r.zoomOut,
+					keys: [i.zoomOut]
+				},
+				{
+					action: r.zoomToActual(Qn(e.lang)),
+					keys: [i.zoomToActual]
+				},
+				{
+					action: r.fit,
+					keys: [i.fit]
+				},
+				{
+					action: "Move the canvas",
+					keys: a.moveCanvas
+				}
+			]
+		},
+		{
+			title: "Edit",
+			rows: [
+				{
+					action: "Undo",
+					keys: a.undo
+				},
+				{
+					action: "Redo",
+					keys: a.redo
+				},
+				{
+					action: "Select all",
+					keys: a.selectAll
+				},
+				{
+					action: "Copy",
+					keys: a.copy
+				},
+				{
+					action: "Cut",
+					keys: a.cut
+				},
+				{
+					action: "Paste",
+					keys: a.paste
+				},
+				{
+					action: "Duplicate",
+					keys: a.duplicate
+				},
+				{
+					action: "Delete",
+					keys: a.remove
+				},
+				{
+					action: "Edit label",
+					keys: ["E", "Double-click"]
+				},
+				{
+					action: "Move selection",
+					keys: X
+				},
+				{
+					action: "Move selection in large steps",
+					keys: a.coarseMove
+				}
+			]
+		},
+		{
+			title: "Tools",
+			rows: [
+				{
+					action: "Lasso",
+					keys: ["L"]
+				},
+				{
+					action: "Lasso by dragging",
+					keys: a.lassoDrag
+				},
+				{
+					action: "Hand",
+					keys: ["H"]
+				},
+				{
+					action: "Hand while held",
+					keys: ["Space"]
+				},
+				{
+					action: "Create or remove space",
+					keys: ["S"]
+				},
+				{
+					action: "Connect",
+					keys: ["C"]
+				}
+			]
+		}
+	];
+}
+//#endregion
+//#region src/diagram-menu/ShortcutsDialog.ts
+var Z = "vc-shortcuts", Q = "vc-shortcuts-title";
+function $(e, t, n) {
+	let r = document.createElement(e);
+	return r.className = t, n !== void 0 && (r.textContent = n), r;
+}
+function rr(e, t) {
+	let n = $("section", `${Z}-group`), r = `${Q}-group-${t}`, i = $("h4", `${Z}-group-title`, e.title);
+	i.id = r;
+	let a = $("table", `${Z}-table`);
+	a.setAttribute("aria-labelledby", r);
+	let o = a.createTBody();
+	for (let t of e.rows) {
+		let e = o.insertRow(), n = $("th", `${Z}-action`, t.action);
+		n.scope = "row";
+		let r = $("td", `${Z}-keys`);
+		for (let e of t.keys) r.append($("kbd", `${Z}-key`, e));
+		e.append(n, r);
+	}
+	return n.append(i, a), n;
+}
+function ir(e, t, n) {
+	let r = $("div", `${Z}-panel`), i = $("header", `${Z}-header`), a = $("h3", `${Z}-title`, "Keyboard shortcuts");
+	a.id = Q;
+	let o = $("button", `${Z}-close`);
+	o.type = "button", o.setAttribute("aria-label", e.messages.close), o.innerHTML = I("x"), o.addEventListener("click", n), i.append(a, o);
+	let s = $("div", `${Z}-body`);
+	return s.append(...nr(e, t).map(rr)), r.append(i, s), r;
+}
+function ar(e, t = {}) {
+	let n;
+	function r() {
+		let n = $("dialog", Z);
+		return n.setAttribute("aria-labelledby", Q), n.append(ir(e, t, () => n.close())), n.addEventListener("click", (e) => {
+			e.target === n && n.close();
+		}), n.addEventListener("close", () => {
+			e.menu.trigger.hidden || e.menu.trigger.focus({ preventScroll: !0 });
+		}), e.root.append(n), n;
+	}
+	return {
+		open() {
+			n ??= r(), n.open || n.showModal();
+		},
+		close() {
+			n?.close();
+		},
+		isOpen: () => n?.open === !0,
+		destroy() {
+			n?.remove(), n = void 0;
+		}
+	};
+}
 //#endregion
-export { X as ALIGN_MENU_PROVIDER_ID, F as COLORS, L as COLOR_OPTIONS, Y as COLOR_PICKER_PROVIDER_ID, I as FONT, K as ICONS, Yt as Modeler, Ue as NavigatedViewer, B as ROOT_ID, Mt as VcAlignMenuProvider, gt as VcAppend, T as VcBaseViewer, jt as VcColorPickerProvider, mt as VcConnect, it as VcConnectionTypeBehavior, Nt as VcContextPadProvider, Gt as VcCopyPasteBehavior, O as VcDiagramElementFactory, Vt as VcEditorActions, D as VcElementFactory, H as VcExporter, V as VcImporter, $ as VcKeyboardBindings, Ft as VcLabelEditingProvider, Ze as VcLayouter, qe as VcModeling, Ut as VcOrderingProvider, Ot as VcPaletteProvider, R as VcRenderer, qt as VcResizeBehavior, lt as VcRules, W as Viewer, j as chevronPath, N as chevronPathAt, P as ellipsePathAt, U as ioModule, b as isOrgUnit, y as isStep, x as isVcConnection, S as isVcElement, v as isVcShape, A as notchDepth, w as saveSVG, zt as vcAlignMenuModule, Dt as vcAppendModule, Rt as vcColorPickerModule, ht as vcConnectModule, Pt as vcContextPadModule, Kt as vcCopyPasteModule, z as vcDrawModule, Ht as vcKeyboardModule, Lt as vcLabelEditingModule, k as vcModelModule, ct as vcModelingModule, Wt as vcOrderingModule, kt as vcPaletteModule, Jt as vcResizeModule, pt as vcRulesModule };
+export { H as ALIGN_MENU_PROVIDER_ID, Hn as BLANK_DOCUMENT_NAME, A as COLORS, st as COLOR_OPTIONS, V as COLOR_PICKER_PROVIDER_ID, j as FONT, R as ICONS, Y as JSON_EXPORT_LABEL, Bn as Modeler, N as NavigatedViewer, In as READ_ONLY_CHANGED_EVENT, M as ROOT_ID, Vn as VALUE_CHAIN_NOTATION, _n as VcAlignMenuProvider, Xt as VcAppend, Ye as VcBaseViewer, pt as VcBounds, gn as VcColorPickerProvider, Jt as VcConnect, Rt as VcConnectionTypeBehavior, vn as VcContextPadProvider, Mn as VcCopyPasteBehavior, nt as VcDiagramElementFactory, On as VcEditorActions, Ze as VcElementFactory, vt as VcExporter, _t as VcImporter, En as VcKeyboardBindings, bn as VcLabelEditingProvider, jt as VcLayouter, Dt as VcModeling, An as VcOrderingProvider, fn as VcPaletteProvider, Rn as VcReadOnly, dt as VcRenderer, Pn as VcResizeBehavior, Ut as VcRules, Ct as Viewer, xt as blobToBase64, it as chevronPath, O as chevronPathAt, Un as createCollaborativeModeler, Wn as createCollaborativeViewer, ar as createShortcutsDialog, Xn as diagramMenu, nr as diagramShortcuts, k as ellipsePathAt, St as ioModule, w as isOrgUnit, C as isStep, T as isVcConnection, E as isVcElement, S as isVcShape, D as notchDepth, b as saveSVG, yt as svgToPng, wn as vcAlignMenuModule, cn as vcAppendModule, mt as vcBoundsModule, Cn as vcColorPickerModule, Yt as vcConnectModule, yn as vcContextPadModule, Nn as vcCopyPasteModule, ft as vcDrawModule, kn as vcKeyboardModule, Sn as vcLabelEditingModule, rt as vcModelModule, Ht as vcModelingModule, jn as vcOrderingModule, mn as vcPaletteModule, zn as vcReadOnlyModule, Fn as vcResizeModule, qt as vcRulesModule };
 
 //# sourceMappingURL=index.js.map