likec4 1.59.3 → 1.59.4

package/__app__/src/chunks/LikeC4Styles.mjs

@@ -1,38 +1,38 @@
 import { i as r } from "./rolldown-runtime.mjs";
 import { A as i, F as a, R as o, S as s, _ as c, c as l, j as u, y as d } from "./hooks.mjs";
-import { Mt as f, Nt as p, Ot as m, Pt as h, Qt as g, g as _, h as v, ht as y, kt as b, xt as x } from "./libs/@mantine.mjs";
-import { D as S, E as C, M as w, N as T, c as E, d as D, f as O, g as k, h as A, k as j, l as M, t as N, u as P } from "./styled-system.mjs";
-import { _ as F, a as I, b as L, f as R, g as z, h as B, i as ee, m as V, n as H, t as U } from "./libs/@xyflow/react.mjs";
-import { n as te, t as W } from "./libs/fast-equals.mjs";
-import { t as ne } from "./libs/bezier-js.mjs";
-import { d as re, f as ie, l as ae, n as oe, r as G, u as se } from "./libs/framer.mjs";
-import { createContext as K, forwardRef as q, memo as ce, useContext as le, useEffect as ue, useMemo as de, useRef as fe, useState as pe } from "react";
-import { c as J } from "react/compiler-runtime";
-import { Fragment as Y, jsx as X, jsxs as Z } from "react/jsx-runtime";
-import { invariant as me, nonexhaustive as he } from "@likec4/core";
-import { BBox as ge, vector as _e } from "@likec4/core/geometry";
-import { invariant as Q } from "@likec4/core/utils";
-import { LikeC4Styles as ve } from "@likec4/core/styles";
-import { RichText as ye, ensureSizes as be } from "@likec4/core/types";
+import { Et as f, Lt as p, Mt as m, Nt as h, O as g, Pt as _, Rt as v, X as y, Y as b, _ as x, in as S, r as C, u as w, v as T, vt as E, xt as D, zt as O } from "./libs/@mantine.mjs";
+import { A as k, I as A, L as j, M, N, _ as P, d as F, f as I, k as L, m as R, p as z, t as B, u as V, v as H } from "./styled-system.mjs";
+import { _ as U, a as W, b as ee, f as te, g as ne, h as re, i as ie, m as ae, n as oe, t as se } from "./libs/@xyflow/react.mjs";
+import { n as ce, t as G } from "./libs/fast-equals.mjs";
+import { t as le } from "./libs/bezier-js.mjs";
+import { d as ue, f as de, i as fe, l as pe, n as me, r as he, u as ge } from "./libs/framer.mjs";
+import { createContext as K, forwardRef as q, memo as J, useContext as Y, useEffect as _e, useMemo as ve, useRef as ye, useState as be } from "react";
+import { c as X } from "react/compiler-runtime";
+import { Fragment as Z, jsx as Q, jsxs as $ } from "react/jsx-runtime";
+import { invariant as xe, nonexhaustive as Se } from "@likec4/core";
+import { BBox as Ce, vector as we } from "@likec4/core/geometry";
+import { invariant as Te } from "@likec4/core/utils";
+import { LikeC4Styles as Ee } from "@likec4/core/styles";
+import { RichText as De, ensureSizes as Oe } from "@likec4/core/types";
 //#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/clamp.js
-function t$4(...r) {
-	return o(xe, r);
+function t$5(...r) {
+	return o(ke, r);
 }
-r(t$4, "t");
-var xe = /* @__PURE__ */ r((r, { min: i, max: a }) => i !== void 0 && r < i ? i : a !== void 0 && r > a ? a : r, "n");
+r(t$5, "t");
+var ke = /* @__PURE__ */ r((r, { min: i, max: a }) => i !== void 0 && r < i ? i : a !== void 0 && r > a ? a : r, "n");
 //#endregion
 //#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/hasAtLeast.js
-function t$3(...r) {
-	return o(Se, r);
+function t$4(...r) {
+	return o(Ae, r);
 }
-r(t$3, "t");
-var Se = /* @__PURE__ */ r((r, i) => r.length >= i, "n");
+r(t$4, "t");
+var Ae = /* @__PURE__ */ r((r, i) => r.length >= i, "n");
 //#endregion
 //#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/entries.js
-function t$2(...r) {
+function t$3(...r) {
 	return o(Object.entries, r);
 }
-r(t$2, "t");
+r(t$3, "t");
 //#endregion
 //#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/isArray.js
 function e$2(r) {
@@ -52,25 +52,26 @@ function e(r) {
 }
 //#endregion
 //#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/join.js
-function t$1(...r) {
-	return o(Ce, r);
+function t$2(...r) {
+	return o(je, r);
 }
-r(t$1, "t");
-var Ce = /* @__PURE__ */ r((r, i) => r.join(i), "n");
+r(t$2, "t");
+var je = /* @__PURE__ */ r((r, i) => r.join(i), "n");
 //#endregion
 //#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/pickBy.js
-function t(...r) {
+function t$1(...r) {
 	return o(n, r);
 }
+r(t$1, "t");
 function n(r, i) {
 	let a = {};
 	for (let [o, s] of Object.entries(r)) i(s, o, r) && (a[o] = s);
 	return a;
 }
-var we = i("outline", "bolt", "Bolt", [["path", {
+var Me = i("outline", "bolt", "Bolt", [["path", {
 	d: "M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11",
 	key: "svg-0"
-}]]), Te = i("outline", "browser", "Browser", [
+}]]), Ne = i("outline", "browser", "Browser", [
 	["path", {
 		d: "M4 8h16",
 		key: "svg-0"
@@ -83,13 +84,13 @@ var we = i("outline", "bolt", "Bolt", [["path", {
 		d: "M8 4v4",
 		key: "svg-2"
 	}]
-]), $ = i("outline", "cylinder", "Cylinder", [["path", {
+]), Pe = i("outline", "cylinder", "Cylinder", [["path", {
 	d: "M5 6a7 3 0 1 0 14 0a7 3 0 1 0 -14 0",
 	key: "svg-0"
 }], ["path", {
 	d: "M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12",
 	key: "svg-1"
-}]]), Ee = i("outline", "device-mobile", "DeviceMobile", [
+}]]), Fe = i("outline", "device-mobile", "DeviceMobile", [
 	["path", {
 		d: "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14",
 		key: "svg-0"
@@ -102,7 +103,7 @@ var we = i("outline", "bolt", "Bolt", [["path", {
 		d: "M12 17v.01",
 		key: "svg-2"
 	}]
-]), De = i("outline", "file-text", "FileText", [
+]), Ie = i("outline", "file-text", "FileText", [
 	["path", {
 		d: "M14 3v4a1 1 0 0 0 1 1h4",
 		key: "svg-0"
@@ -123,7 +124,7 @@ var we = i("outline", "bolt", "Bolt", [["path", {
 		d: "M9 17l6 0",
 		key: "svg-4"
 	}]
-]), Oe = i("outline", "rectangular-prism", "RectangularPrism", [
+]), Le = i("outline", "rectangular-prism", "RectangularPrism", [
 	["path", {
 		d: "M21 14.008v-5.018a1.98 1.98 0 0 0 -1 -1.717l-4 -2.008a2.016 2.016 0 0 0 -2 0l-10 5.008c-.619 .355 -1 1.01 -1 1.718v5.018c0 .709 .381 1.363 1 1.717l4 2.008a2.016 2.016 0 0 0 2 0l10 -5.008c.619 -.355 1 -1.01 1 -1.718",
 		key: "svg-0"
@@ -140,7 +141,7 @@ var we = i("outline", "bolt", "Bolt", [["path", {
 		d: "M3.5 11l5.5 2.5",
 		key: "svg-3"
 	}]
-]), ke = i("outline", "reorder", "Reorder", [
+]), Re = i("outline", "reorder", "Reorder", [
 	["path", {
 		d: "M3 16a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -2",
 		key: "svg-0"
@@ -161,13 +162,13 @@ var we = i("outline", "bolt", "Bolt", [["path", {
 		d: "M16.5 8.5l2.5 2.5l2.5 -2.5",
 		key: "svg-4"
 	}]
-]), Ae = i("outline", "user", "User", [["path", {
+]), ze = i("outline", "user", "User", [["path", {
 	d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0",
 	key: "svg-0"
 }], ["path", {
 	d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2",
 	key: "svg-1"
-}]]), je = i("outline", "zoom-scan", "ZoomScan", [
+}]]), Be = i("outline", "zoom-scan", "ZoomScan", [
 	["path", {
 		d: "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0",
 		key: "svg-0"
@@ -192,26 +193,26 @@ var we = i("outline", "bolt", "Bolt", [["path", {
 		d: "M17 21h2a2 2 0 0 0 2 -2v-2",
 		key: "svg-5"
 	}]
-]), Me = K(null);
+]), Ve = K(null);
 function IconRendererProvider(r) {
-	let i = J(5), { value: a, children: o } = r;
-	if (le(Me)) {
+	let i = X(5), { value: a, children: o } = r;
+	if (Y(Ve)) {
 		let r;
-		return i[0] === o ? r = i[1] : (r = /* @__PURE__ */ X(Y, { children: o }), i[0] = o, i[1] = r), r;
+		return i[0] === o ? r = i[1] : (r = /* @__PURE__ */ Q(Z, { children: o }), i[0] = o, i[1] = r), r;
 	}
 	let s;
-	return i[2] !== o || i[3] !== a ? (s = /* @__PURE__ */ X(Me.Provider, {
+	return i[2] !== o || i[3] !== a ? (s = /* @__PURE__ */ Q(Ve.Provider, {
 		value: a,
 		children: o
 	}), i[2] = o, i[3] = a, i[4] = s) : s = i[4], s;
 }
 function IconRenderer({ element: r, className: i, style: a }) {
-	let o = le(Me);
+	let o = Y(Ve);
 	if (!r || !r.icon || r.icon === "none") return null;
 	let s;
 	switch (!0) {
 		case r.icon.startsWith("data:image/svg+xml"):
-			s = /* @__PURE__ */ X(SvgDataUrlIcon, {
+			s = /* @__PURE__ */ Q(SvgDataUrlIcon, {
 				dataUrl: r.icon,
 				alt: r.title
 			});
@@ -219,61 +220,61 @@ function IconRenderer({ element: r, className: i, style: a }) {
 		case r.icon.startsWith("http://"):
 		case r.icon.startsWith("https://"):
 		case r.icon.startsWith("data:image"):
-			s = /* @__PURE__ */ X("img", {
+			s = /* @__PURE__ */ Q("img", {
 				src: r.icon,
 				alt: r.title
 			});
 			break;
 		case !!o:
-			s = /* @__PURE__ */ X(o, { node: r });
+			s = /* @__PURE__ */ Q(o, { node: r });
 			break;
-		default: s = null;
+		default: s = /* @__PURE__ */ Q(DefaultIconRenderer, { node: r });
 	}
-	return s ? /* @__PURE__ */ X("div", {
-		className: w(i, "likec4-element-icon"),
+	return s ? /* @__PURE__ */ Q("div", {
+		className: A(i, "likec4-element-icon"),
 		"data-likec4-icon": r.icon,
 		style: a,
 		children: s
 	}) : null;
 }
-var Ne = {
-	browser: Te,
-	cylinder: $,
-	mobile: Ee,
-	person: Ae,
-	queue: ke,
-	rectangle: Oe,
-	storage: $,
-	bucket: $,
-	document: De,
-	component: Oe
+var He = {
+	browser: Ne,
+	cylinder: Pe,
+	mobile: Fe,
+	person: ze,
+	queue: Re,
+	rectangle: Le,
+	storage: Pe,
+	bucket: Pe,
+	document: Ie,
+	component: Le
 };
 function IconOrShapeRenderer(r) {
-	let i = J(12), { element: a, className: o, style: s } = r;
+	let i = X(12), { element: a, className: o, style: s } = r;
 	if (!a.icon || a.icon === "none") {
-		let r = Ne[a.shape], c;
-		i[0] === o ? c = i[1] : (c = w(o, "likec4-shape-icon"), i[0] = o, i[1] = c);
+		let r = He[a.shape], c;
+		i[0] === o ? c = i[1] : (c = A(o, "likec4-shape-icon"), i[0] = o, i[1] = c);
 		let l;
-		i[2] === r ? l = i[3] : (l = /* @__PURE__ */ X(r, {}), i[2] = r, i[3] = l);
+		i[2] === r ? l = i[3] : (l = /* @__PURE__ */ Q(r, {}), i[2] = r, i[3] = l);
 		let u;
-		return i[4] !== s || i[5] !== c || i[6] !== l ? (u = /* @__PURE__ */ X("div", {
+		return i[4] !== s || i[5] !== c || i[6] !== l ? (u = /* @__PURE__ */ Q("div", {
 			className: c,
 			style: s,
 			children: l
 		}), i[4] = s, i[5] = c, i[6] = l, i[7] = u) : u = i[7], u;
 	}
 	let c;
-	return i[8] !== o || i[9] !== a || i[10] !== s ? (c = /* @__PURE__ */ X(IconRenderer, {
+	return i[8] !== o || i[9] !== a || i[10] !== s ? (c = /* @__PURE__ */ Q(IconRenderer, {
 		element: a,
 		className: o,
 		style: s
 	}), i[8] = o, i[9] = a, i[10] = s, i[11] = c) : c = i[11], c;
 }
 function SvgDataUrlIcon(r) {
-	let i = J(11), { dataUrl: a, alt: o } = r;
+	let i = X(11), { dataUrl: a, alt: o } = r;
 	if (!hasCurrentColorReference(a)) {
 		let r;
-		return i[0] !== o || i[1] !== a ? (r = /* @__PURE__ */ X("img", {
+		return i[0] !== o || i[1] !== a ? (r = /* @__PURE__ */ Q("img", {
 			src: a,
 			alt: o
 		}), i[0] = o, i[1] = a, i[2] = r) : r = i[2], r;
@@ -296,7 +297,7 @@ function SvgDataUrlIcon(r) {
 		WebkitMaskSize: "contain"
 	}, i[5] = c, i[6] = u);
 	let d;
-	return i[7] !== o || i[8] !== l || i[9] !== u ? (d = /* @__PURE__ */ X("span", {
+	return i[7] !== o || i[8] !== l || i[9] !== u ? (d = /* @__PURE__ */ Q("span", {
 		role: l,
 		"aria-label": o,
 		style: u
@@ -321,37 +322,112 @@ function decodeSvgDataUrl(r) {
 		return null;
 	}
 }
+var iconUrl = (r, i) => `https://icons.like-c4.dev/${encodeURIComponent(r)}/${encodeURIComponent(i)}.svg`;
+function BootstrapIconMask(r) {
+	let i = X(11), a, o;
+	i[0] === r ? (a = i[1], o = i[2]) : ({name: a, ...o} = r, i[0] = r, i[1] = a, i[2] = o);
+	let s;
+	i[3] === a ? s = i[4] : (s = iconUrl("bootstrap", a), i[3] = a, i[4] = s);
+	let c = s, l = `url("${c}")`, u = `url("${c}")`, d;
+	i[5] !== l || i[6] !== u ? (d = {
+		display: "inline-block",
+		width: "100%",
+		height: "100%",
+		backgroundColor: "currentColor",
+		maskImage: l,
+		maskRepeat: "no-repeat",
+		maskPosition: "center",
+		maskSize: "contain",
+		WebkitMaskImage: u,
+		WebkitMaskRepeat: "no-repeat",
+		WebkitMaskPosition: "center",
+		WebkitMaskSize: "contain"
+	}, i[5] = l, i[6] = u, i[7] = d) : d = i[7];
+	let f = d, p;
+	return i[8] !== o || i[9] !== f ? (p = /* @__PURE__ */ Q("span", {
+		...o,
+		"aria-hidden": "true",
+		style: f
+	}), i[8] = o, i[9] = f, i[10] = p) : p = i[10], p;
+}
+function DefaultIconRenderer(r) {
+	let i = X(11), a, o;
+	if (i[0] === r ? (a = i[1], o = i[2]) : ({node: a, ...o} = r, i[0] = r, i[1] = a, i[2] = o), !a.icon || a.icon === "none") return null;
+	let s = a.icon, c, l, u;
+	if (i[3] !== a.icon || i[4] !== o) {
+		u = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let [r, i, ...a] = s.split(":");
+			if (!r || !i || a.length > 0) {
+				u = null;
+				break bb0;
+			}
+			if (r === "bootstrap") {
+				u = /* @__PURE__ */ Q(BootstrapIconMask, {
+					...o,
+					name: i
+				});
+				break bb0;
+			}
+			c = o, l = iconUrl(r, i);
+		}
+		i[3] = a.icon, i[4] = o, i[5] = c, i[6] = l, i[7] = u;
+	} else c = i[5], l = i[6], u = i[7];
+	if (u !== Symbol.for("react.early_return_sentinel")) return u;
+	let d;
+	return i[8] !== c || i[9] !== l ? (d = /* @__PURE__ */ Q("img", {
+		...c,
+		src: l
+	}), i[8] = c, i[9] = l, i[10] = d) : d = i[10], d;
+}
+//#endregion
+//#region ../diagram/src/base/const.ts
+var Ue = {
+	Compound: 1,
+	Edge: 20,
+	EdgeLabel: 25,
+	Element: 20,
+	Max: 30
+}, We = .05, Ge = {
+	default: "16px",
+	withControls: {
+		top: "58px",
+		left: "16px",
+		right: "16px",
+		bottom: "16px"
+	}
+}, Ke = typeof window > "u";
 //#endregion
 //#region ../diagram/src/base/Background.tsx
 function literalToEnum(r) {
 	switch (r) {
-		case "dots": return H.Dots;
-		case "lines": return H.Lines;
-		case "cross": return H.Cross;
-		default: he(r);
+		case "dots": return oe.Dots;
+		case "lines": return oe.Lines;
+		case "cross": return oe.Cross;
+		default: Se(r);
 	}
 }
-var compareProps = (r, i) => typeof r.background == "string" && typeof i.background == "string" ? r.background === i.background : W(r.background, i.background), Pe = ce((r) => {
-	let i = J(6), { background: a } = r;
+var compareProps = (r, i) => typeof r.background == "string" && typeof i.background == "string" ? r.background === i.background : G(r.background, i.background), qe = J((r) => {
+	let i = X(6), { background: a } = r;
 	if (typeof a == "string") {
 		let r;
 		i[0] === a ? r = i[1] : (r = literalToEnum(a), i[0] = a, i[1] = r);
 		let o;
-		return i[2] === r ? o = i[3] : (o = /* @__PURE__ */ X(U, {
+		return i[2] === r ? o = i[3] : (o = /* @__PURE__ */ Q(se, {
 			variant: r,
 			size: 2,
 			gap: 20
 		}), i[2] = r, i[3] = o), o;
 	}
 	let o;
-	return i[4] === a ? o = i[5] : (o = /* @__PURE__ */ X(U, { ...a }), i[4] = a, i[5] = o), o;
+	return i[4] === a ? o = i[5] : (o = /* @__PURE__ */ Q(se, { ...a }), i[4] = a, i[5] = o), o;
 }, compareProps);
-Pe.displayName = "Background";
+qe.displayName = "Background";
 //#endregion
 //#region ../diagram/src/hooks/useCallbackRef.ts
 function useCallbackRef(r) {
-	let i = fe(r);
-	return i.current = r, de(() => {
+	let i = ye(r);
+	return i.current = r, ve(() => {
 		function callbackRef(...r) {
 			return i.current?.(...r);
 		}
@@ -361,37 +437,37 @@ function useCallbackRef(r) {
 //#endregion
 //#region ../diagram/src/hooks/useXYFlow.ts
 function useXYFlow() {
-	return V();
+	return ae();
 }
 function useXYStore(r, i) {
-	return B(r, i ?? te);
+	return re(r, i ?? ce);
 }
 function selectXYStore(r) {
 	return r;
 }
 function useXYStoreApi() {
-	return z();
+	return ne();
 }
 function useCurrentZoomAtLeast(r) {
-	let i = J(2), t0;
-	return i[0] === r ? t0 = i[1] : (t0 = (i) => i.transform[2] >= r, i[0] = r, i[1] = t0), B(t0);
+	let i = X(2), t0;
+	return i[0] === r ? t0 = i[1] : (t0 = (i) => i.transform[2] >= r, i[0] = r, i[1] = t0), re(t0);
 }
 var selectZoom = (r) => r.transform[2] < .2;
 function useIsZoomTooSmall() {
-	return B(selectZoom);
+	return re(selectZoom);
 }
 //#endregion
 //#region ../diagram/src/utils/roundDpr.ts
 function getDevicePixelRatio() {
 	let r = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : 1;
-	return t$4(Math.floor(r), {
+	return t$5(Math.floor(r), {
 		min: 1,
 		max: 4
 	});
 }
-var Fe;
+var Je;
 function roundDpr(r) {
-	return Fe ??= getDevicePixelRatio(), Fe < 2 ? Math.round(r) : Math.round(r * Fe) / Fe;
+	return Je ??= getDevicePixelRatio(), Je < 2 ? Math.round(r) : Math.round(r * Je) / Je;
 }
 //#endregion
 //#region ../diagram/src/utils/xyflow.ts
@@ -404,22 +480,22 @@ function nodeToRect(r) {
 	};
 }
 function getNodeCenter(r) {
-	let { width: i, height: a } = L(r), { x: o, y: s } = r.internals.positionAbsolute;
+	let { width: i, height: a } = ee(r), { x: o, y: s } = r.internals.positionAbsolute;
 	return {
 		x: Math.round(o + i / 2),
 		y: Math.round(s + a / 2)
 	};
 }
 function getNodeIntersectionFromCenterToPoint(r, i, a = 0) {
-	let { width: o, height: s } = r, c = ge.center(r), l = _e(i.x, i.y).subtract(c), u = (a + o / 2) / l.x, d = (a + s / 2) / l.y, f = Math.min(Math.abs(u), Math.abs(d));
-	return _e(l).multiply(f).add(c).trunc().toObject();
+	let { width: o, height: s } = r, c = Ce.center(r), l = we(i.x, i.y).subtract(c), u = (a + o / 2) / l.x, d = (a + s / 2) / l.y, f = Math.min(Math.abs(u), Math.abs(d));
+	return we(l).multiply(f).add(c).trunc().toObject();
 }
 function bezierControlPoints(r) {
 	let [i, ...a] = r;
-	Q(i, "start should be defined");
+	Te(i, "start should be defined");
 	let o = [];
-	for (; t$3(a, 3);) {
-		let [r, s, c, ...l] = a, u = new ne(i[0], i[1], r[0], r[1], s[0], s[1], c[0], c[1]), d = u.inflections();
+	for (; t$4(a, 3);) {
+		let [r, s, c, ...l] = a, u = new le(i[0], i[1], r[0], r[1], s[0], s[1], c[0], c[1]), d = u.inflections();
 		d.length === 0 && d.push(.5), d.forEach((r) => {
 			let { x: i, y: a } = u.get(r);
 			o.push({
@@ -428,7 +504,7 @@ function bezierControlPoints(r) {
 			});
 		}), a = l, i = c;
 	}
-	return Q(a.length === 0, "all points should be consumed"), Q(t$3(o, 1), "at least one control point should be generated"), o;
+	return Te(a.length === 0, "all points should be consumed"), Te(t$4(o, 1), "at least one control point should be generated"), o;
 }
 function isSamePoint(r, i) {
 	if (r === i) return !0;
@@ -441,13 +517,13 @@ function stopPropagation(r) {
 var printPoint = (r) => `${Math.trunc(r[0])},${Math.trunc(r[1])}`;
 function bezierPath(r) {
 	let [i, ...a] = r;
-	Q(i, "start should be defined");
+	Te(i, "start should be defined");
 	let o = `M ${printPoint(i)}`;
-	for (; t$3(a, 3);) {
+	for (; t$4(a, 3);) {
 		let [r, i, s, ...c] = a;
 		o += ` C ${printPoint(r)} ${printPoint(i)} ${printPoint(s)}`, a = c;
 	}
-	return Q(a.length === 0, "all points should be consumed"), o;
+	return Te(a.length === 0, "all points should be consumed"), o;
 }
 function parsePadding(r, i) {
 	if (typeof r == "number") return Math.floor((i - i / (1 + r)) * .5);
@@ -504,7 +580,7 @@ function setHovered(r, i) {
 	return i === void 0 ? (i) => _setHovered(i, r) : _setHovered(r, i);
 }
 function hasSubObject(r, i) {
-	return r === i || t$2(i).every(([i, a]) => W(r[i] ?? void 0, a));
+	return r === i || t$3(i).every(([i, a]) => G(r[i] ?? void 0, a));
 }
 function _setData(r, i) {
 	return hasSubObject(r.data, i) ? r : mergeData(r, i);
@@ -512,24 +588,10 @@ function _setData(r, i) {
 function setData(r, i) {
 	return i === void 0 ? (i) => _setData(i, r) : _setData(r, i);
 }
-var Ie = {
+var Ye = {
 	setDimmed,
 	setHovered,
 	setData
-}, Le = {
-	Compound: 1,
-	Edge: 20,
-	EdgeLabel: 25,
-	Element: 20,
-	Max: 30
-}, Re = .05, ze = {
-	default: "16px",
-	withControls: {
-		top: "58px",
-		left: "16px",
-		right: "16px",
-		bottom: "16px"
-	}
 };
 //#endregion
 //#region ../diagram/src/base/keyboardZoom.ts
@@ -551,7 +613,7 @@ function getKeyboardZoomAction(r) {
 }
 //#endregion
 //#region ../diagram/src/base/BaseXYFlow.tsx
-var Be = {
+var Xe = {
 	"node.a11yDescription.default": "Press Enter or Space to select this node and reveal its actions.",
 	"node.a11yDescription.keyboardDisabled": "Keyboard activation is disabled.",
 	"edge.a11yDescription.default": "Press Enter or Space to select this relationship and reveal its actions."
@@ -577,53 +639,53 @@ function activateFocusedElement(r) {
 	}));
 }
 function BaseXYFlow(r) {
-	let i = J(105), a, o, s, c, l, u, d, p, m, h, g, _, v, y, b, x, S, C, T, E, D, O, k, A, j, M, N;
-	i[0] === r ? (a = i[1], o = i[2], s = i[3], c = i[4], l = i[5], u = i[6], d = i[7], p = i[8], m = i[9], h = i[10], g = i[11], _ = i[12], v = i[13], y = i[14], b = i[15], x = i[16], S = i[17], C = i[18], T = i[19], E = i[20], D = i[21], O = i[22], k = i[23], A = i[24], j = i[25], M = i[26], N = i[27]) : ({nodes: u, edges: l, onEdgesChange: m, onNodesChange: y, className: s, pannable: S, zoomable: E, nodesSelectable: D, nodesDraggable: O, background: k, children: o, colorMode: c, fitViewPadding: A, fitView: j, zoomOnDoubleClick: M, onViewportResize: b, onMoveEnd: g, onNodeMouseEnter: _, onNodeMouseLeave: v, onEdgeMouseEnter: d, onEdgeMouseLeave: p, onKeyDownCapture: h, ariaLabelConfig: a, nodesFocusable: N, edgesFocusable: C, showControls: T, ...x} = r, i[0] = r, i[1] = a, i[2] = o, i[3] = s, i[4] = c, i[5] = l, i[6] = u, i[7] = d, i[8] = p, i[9] = m, i[10] = h, i[11] = g, i[12] = _, i[13] = v, i[14] = y, i[15] = b, i[16] = x, i[17] = S, i[18] = C, i[19] = T, i[20] = E, i[21] = D, i[22] = O, i[23] = k, i[24] = A, i[25] = j, i[26] = M, i[27] = N);
-	let P = S === void 0 || S, F = E === void 0 || E, I = D === void 0 || D, L = O !== void 0 && O, z = k === void 0 ? "dots" : k, B = A === void 0 ? 0 : A, ee = j === void 0 || j, V = M !== void 0 && M, H = N === void 0 ? L || I : N, U = C !== void 0 && C, te;
-	i[28] === B ? te = i[29] : (te = {
-		minZoom: Re,
-		maxZoom: 1,
+	let i = X(107), a, o, s, c, l, u, d, f, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, j, M, N, P;
+	i[0] === r ? (a = i[1], o = i[2], s = i[3], c = i[4], l = i[5], u = i[6], d = i[7], f = i[8], m = i[9], h = i[10], g = i[11], _ = i[12], v = i[13], y = i[14], b = i[15], x = i[16], S = i[17], C = i[18], w = i[19], T = i[20], E = i[21], D = i[22], O = i[23], k = i[24], j = i[25], M = i[26], N = i[27], P = i[28]) : ({nodes: u, edges: l, onEdgesChange: m, onNodesChange: y, className: s, pannable: S, zoomable: E, nodesSelectable: D, nodesDraggable: O, background: k, children: o, colorMode: c, fitViewPadding: j, zoomOnDoubleClick: M, onViewportResize: b, onMoveEnd: g, onNodeMouseEnter: _, onNodeMouseLeave: v, onEdgeMouseEnter: d, onEdgeMouseLeave: f, onKeyDownCapture: h, ariaLabelConfig: a, nodesFocusable: N, edgesFocusable: P, showControls: C, minZoom: w, maxZoom: T, ...x} = r, i[0] = r, i[1] = a, i[2] = o, i[3] = s, i[4] = c, i[5] = l, i[6] = u, i[7] = d, i[8] = f, i[9] = m, i[10] = h, i[11] = g, i[12] = _, i[13] = v, i[14] = y, i[15] = b, i[16] = x, i[17] = S, i[18] = C, i[19] = w, i[20] = T, i[21] = E, i[22] = D, i[23] = O, i[24] = k, i[25] = j, i[26] = M, i[27] = N, i[28] = P);
+	let F = S === void 0 || S, I = E === void 0 || E, L = D === void 0 || D, R = O !== void 0 && O, z = k === void 0 ? "dots" : k, B = j === void 0 ? 0 : j, V = M !== void 0 && M, H = N === void 0 ? R || L : N, U = P !== void 0 && P, W = w === void 0 ? We : w, ee = T === void 0 ? 3 : T, ne = Math.min(ee, 1), re;
+	i[29] !== B || i[30] !== W || i[31] !== ne ? (re = {
+		minZoom: W,
+		maxZoom: ne,
 		padding: B,
 		includeHiddenNodes: !1
-	}, i[28] = B, i[29] = te);
-	let W = te, ne = z !== "transparent" && z !== "solid", re = useIsZoomTooSmall(), ie = useXYFlow(), ae = useXYStoreApi(), { colorScheme: oe } = f();
-	c ||= oe === "auto" ? "system" : oe;
-	let G = x.tabIndex ?? (F ? 0 : void 0), se = x["aria-label"] !== void 0 || x["aria-labelledby"] !== void 0 || G === void 0 ? x["aria-label"] : "Interactive diagram", t13;
-	i[30] !== W || i[31] !== x || i[32] !== ie || i[33] !== F ? (t13 = (r) => {
-		if (x.onKeyDown?.(r), r.defaultPrevented || !F) return;
+	}, i[29] = B, i[30] = W, i[31] = ne, i[32] = re) : re = i[32];
+	let ie = re, ae = z !== "transparent" && z !== "solid", oe = useIsZoomTooSmall(), se = useXYFlow(), ce = useXYStoreApi(), { colorScheme: G } = p();
+	c ||= G === "auto" ? "system" : G;
+	let le = x.tabIndex ?? (I ? 0 : void 0), ue = x["aria-label"] !== void 0 || x["aria-labelledby"] !== void 0 || le === void 0 ? x["aria-label"] : "Interactive diagram", t15;
+	i[33] !== ie || i[34] !== x || i[35] !== se || i[36] !== I ? (t15 = (r) => {
+		if (x.onKeyDown?.(r), r.defaultPrevented || !I) return;
 		let i = getKeyboardZoomAction(r.nativeEvent);
 		if (i) switch (r.preventDefault(), i) {
 			case "zoom-in":
-				ie.zoomIn();
+				se.zoomIn();
 				return;
 			case "zoom-out":
-				ie.zoomOut();
+				se.zoomOut();
 				return;
 			case "reset":
-				ie.fitView(W);
+				se.fitView(ie);
 				return;
 		}
-	}, i[30] = W, i[31] = x, i[32] = ie, i[33] = F, i[34] = t13) : t13 = i[34];
-	let K = useCallbackRef(t13), q = c, ce = u, le = l, ue = z === "transparent" && "bg-transparent", de;
-	i[35] !== s || i[36] !== ue ? (de = w(ue, s), i[35] = s, i[36] = ue, i[37] = de) : de = i[37];
-	let fe;
-	i[38] === re ? fe = i[39] : (fe = re && { "data-likec4-zoom-small": !0 }, i[38] = re, i[39] = fe);
-	let pe = !P && F, Y;
-	i[40] === F ? Y = i[41] : (Y = !F && { zoomActivationKeyCode: null }, i[40] = F, i[41] = Y);
-	let me = F ? 3 : 1, he = F ? Re : 1, ge = F || P, _e;
-	i[42] === P ? _e = i[43] : (_e = !P && {
+	}, i[33] = ie, i[34] = x, i[35] = se, i[36] = I, i[37] = t15) : t15 = i[37];
+	let de = useCallbackRef(t15), fe = c, pe = u, me = l, he = z === "transparent" && "bg-transparent", ge;
+	i[38] !== s || i[39] !== he ? (ge = A(he, s), i[38] = s, i[39] = he, i[40] = ge) : ge = i[40];
+	let K;
+	i[41] === oe ? K = i[42] : (K = oe && { "data-likec4-zoom-small": !0 }, i[41] = oe, i[42] = K);
+	let q = !F && I, J;
+	i[43] === I ? J = i[44] : (J = !I && { zoomActivationKeyCode: null }, i[43] = I, i[44] = J);
+	let Y = I ? ee : 1, _e = I ? W : 1, ve = I || F, ye;
+	i[45] === F ? ye = i[46] : (ye = !F && {
 		panActivationKeyCode: null,
 		selectionKeyCode: null
-	}, i[42] = P, i[43] = _e);
-	let Q;
-	i[44] === a ? Q = i[45] : (Q = {
-		...Be,
+	}, i[45] = F, i[46] = ye);
+	let be;
+	i[47] === a ? be = i[48] : (be = {
+		...Xe,
 		...a
-	}, i[44] = a, i[45] = Q);
-	let ve = y, ye = m, t29;
-	i[46] !== g || i[47] !== ae ? (t29 = (r, i) => {
+	}, i[47] = a, i[48] = be);
+	let Z = y, xe = m, t31;
+	i[49] !== g || i[50] !== ce ? (t31 = (r, i) => {
 		let { x: a, y: o, zoom: s } = i, c = roundDpr(a), l = roundDpr(o);
-		(a !== c || o !== l) && ae.setState({ transform: [
+		(a !== c || o !== l) && ce.setState({ transform: [
 			c,
 			l,
 			s
@@ -632,9 +694,9 @@ function BaseXYFlow(r) {
 			y: l,
 			zoom: s
 		});
-	}, i[46] = g, i[47] = ae, i[48] = t29) : t29 = i[48];
-	let be = useCallbackRef(t29), t31;
-	i[49] !== _ || i[50] !== y ? (t31 = (r, i) => {
+	}, i[49] = g, i[50] = ce, i[51] = t31) : t31 = i[51];
+	let Se = useCallbackRef(t31), t33;
+	i[52] !== _ || i[53] !== y ? (t33 = (r, i) => {
 		if (_) {
 			_(r, i);
 			return;
@@ -642,11 +704,11 @@ function BaseXYFlow(r) {
 		y([{
 			id: i.id,
 			type: "replace",
-			item: Ie.setHovered(i, !0)
+			item: Ye.setHovered(i, !0)
 		}]);
-	}, i[49] = _, i[50] = y, i[51] = t31) : t31 = i[51];
-	let xe = useCallbackRef(t31), t33;
-	i[52] !== v || i[53] !== y ? (t33 = (r, i) => {
+	}, i[52] = _, i[53] = y, i[54] = t33) : t33 = i[54];
+	let Ce = useCallbackRef(t33), t35;
+	i[55] !== v || i[56] !== y ? (t35 = (r, i) => {
 		if (v) {
 			v(r, i);
 			return;
@@ -654,11 +716,11 @@ function BaseXYFlow(r) {
 		y([{
 			id: i.id,
 			type: "replace",
-			item: Ie.setHovered(i, !1)
+			item: Ye.setHovered(i, !1)
 		}]);
-	}, i[52] = v, i[53] = y, i[54] = t33) : t33 = i[54];
-	let Se = useCallbackRef(t33), t35;
-	i[55] !== d || i[56] !== m ? (t35 = (r, i) => {
+	}, i[55] = v, i[56] = y, i[57] = t35) : t35 = i[57];
+	let we = useCallbackRef(t35), t37;
+	i[58] !== d || i[59] !== m ? (t37 = (r, i) => {
 		if (d) {
 			d(r, i);
 			return;
@@ -666,89 +728,88 @@ function BaseXYFlow(r) {
 		m([{
 			id: i.id,
 			type: "replace",
-			item: Ie.setHovered(i, !0)
+			item: Ye.setHovered(i, !0)
 		}]);
-	}, i[55] = d, i[56] = m, i[57] = t35) : t35 = i[57];
-	let Ce = useCallbackRef(t35), t37;
-	i[58] !== p || i[59] !== m ? (t37 = (r, i) => {
-		if (p) {
-			p(r, i);
+	}, i[58] = d, i[59] = m, i[60] = t37) : t37 = i[60];
+	let Te = useCallbackRef(t37), t39;
+	i[61] !== f || i[62] !== m ? (t39 = (r, i) => {
+		if (f) {
+			f(r, i);
 			return;
 		}
 		m([{
 			id: i.id,
 			type: "replace",
-			item: Ie.setHovered(i, !1)
+			item: Ye.setHovered(i, !1)
 		}]);
-	}, i[58] = p, i[59] = m, i[60] = t37) : t37 = i[60];
-	let we = useCallbackRef(t37), t39;
-	i[61] === h ? t39 = i[62] : (t39 = (r) => {
+	}, i[61] = f, i[62] = m, i[63] = t39) : t39 = i[63];
+	let Ee = useCallbackRef(t39), t41;
+	i[64] === h ? t41 = i[65] : (t41 = (r) => {
 		h?.(r), r.defaultPrevented || activateFocusedElement(r);
-	}, i[61] = h, i[62] = t39);
-	let Te = useCallbackRef(t39), $;
-	i[63] !== z || i[64] !== ne ? ($ = ne && /* @__PURE__ */ X(Pe, { background: z }), i[63] = z, i[64] = ne, i[65] = $) : $ = i[65];
-	let Ee;
-	i[66] === b ? Ee = i[67] : (Ee = b && /* @__PURE__ */ X(ViewportResizeHanlder, { onViewportResize: b }), i[66] = b, i[67] = Ee);
-	let De;
-	return i[68] !== se || i[69] !== o || i[70] !== c || i[71] !== l || i[72] !== U || i[73] !== ee || i[74] !== W || i[75] !== u || i[76] !== L || i[77] !== H || i[78] !== I || i[79] !== m || i[80] !== K || i[81] !== y || i[82] !== P || i[83] !== x || i[84] !== de || i[85] !== fe || i[86] !== pe || i[87] !== Y || i[88] !== me || i[89] !== he || i[90] !== ge || i[91] !== _e || i[92] !== Q || i[93] !== be || i[94] !== xe || i[95] !== Se || i[96] !== Ce || i[97] !== we || i[98] !== Te || i[99] !== $ || i[100] !== Ee || i[101] !== G || i[102] !== V || i[103] !== F ? (De = /* @__PURE__ */ Z(R, {
-		colorMode: q,
-		nodes: ce,
-		edges: le,
-		className: de,
-		...fe,
-		zoomOnPinch: F,
-		zoomOnScroll: pe,
-		...Y,
+	}, i[64] = h, i[65] = t41);
+	let De = useCallbackRef(t41), Oe;
+	i[66] !== z || i[67] !== ae ? (Oe = ae && /* @__PURE__ */ Q(qe, { background: z }), i[66] = z, i[67] = ae, i[68] = Oe) : Oe = i[68];
+	let ke;
+	i[69] === b ? ke = i[70] : (ke = b && /* @__PURE__ */ Q(ViewportResizeHanlder, { onViewportResize: b }), i[69] = b, i[70] = ke);
+	let Ae;
+	return i[71] !== ue || i[72] !== o || i[73] !== c || i[74] !== l || i[75] !== U || i[76] !== ie || i[77] !== u || i[78] !== R || i[79] !== H || i[80] !== L || i[81] !== m || i[82] !== de || i[83] !== y || i[84] !== F || i[85] !== x || i[86] !== ge || i[87] !== K || i[88] !== q || i[89] !== J || i[90] !== Y || i[91] !== _e || i[92] !== ve || i[93] !== ye || i[94] !== be || i[95] !== Se || i[96] !== Ce || i[97] !== we || i[98] !== Te || i[99] !== Ee || i[100] !== De || i[101] !== Oe || i[102] !== ke || i[103] !== le || i[104] !== V || i[105] !== I ? (Ae = /* @__PURE__ */ $(te, {
+		colorMode: fe,
+		nodes: pe,
+		edges: me,
+		className: ge,
+		...K,
+		zoomOnPinch: I,
+		zoomOnScroll: q,
+		...J,
 		zoomOnDoubleClick: V,
-		maxZoom: me,
-		minZoom: he,
-		fitView: ee,
-		fitViewOptions: W,
-		preventScrolling: ge,
+		maxZoom: Y,
+		minZoom: _e,
+		fitViewOptions: ie,
+		preventScrolling: ve,
 		defaultMarkerColor: "var(--xy-edge-stroke)",
 		noDragClassName: "nodrag",
 		noPanClassName: "nopan",
 		noWheelClassName: "nowheel",
-		panOnScroll: P,
-		panOnDrag: P,
-		..._e,
-		elementsSelectable: I,
+		panOnScroll: F,
+		panOnDrag: F,
+		...ye,
+		elementsSelectable: L,
 		nodesFocusable: H,
 		edgesFocusable: U,
-		nodesDraggable: L,
-		ariaLabelConfig: Q,
+		nodesDraggable: R,
+		ariaLabelConfig: be,
 		nodeDragThreshold: 4,
 		nodeClickDistance: 3,
 		paneClickDistance: 3,
 		elevateNodesOnSelect: !1,
 		selectNodesOnDrag: !1,
-		onNodesChange: ve,
-		onEdgesChange: ye,
-		onMoveEnd: be,
-		onNodeMouseEnter: xe,
-		onNodeMouseLeave: Se,
-		onEdgeMouseEnter: Ce,
-		onEdgeMouseLeave: we,
+		onNodesChange: Z,
+		onEdgesChange: xe,
+		onMoveEnd: Se,
+		onNodeMouseEnter: Ce,
+		onNodeMouseLeave: we,
+		onEdgeMouseEnter: Te,
+		onEdgeMouseLeave: Ee,
 		onNodeDoubleClick: stopPropagation,
 		onEdgeDoubleClick: stopPropagation,
-		onKeyDownCapture: Te,
+		onKeyDownCapture: De,
 		...x,
-		"aria-label": se,
-		tabIndex: G,
-		onKeyDown: K,
+		"aria-label": ue,
+		tabIndex: le,
+		onKeyDown: de,
 		children: [
-			$,
-			Ee,
+			Oe,
+			ke,
 			o
 		]
-	}), i[68] = se, i[69] = o, i[70] = c, i[71] = l, i[72] = U, i[73] = ee, i[74] = W, i[75] = u, i[76] = L, i[77] = H, i[78] = I, i[79] = m, i[80] = K, i[81] = y, i[82] = P, i[83] = x, i[84] = de, i[85] = fe, i[86] = pe, i[87] = Y, i[88] = me, i[89] = he, i[90] = ge, i[91] = _e, i[92] = Q, i[93] = be, i[94] = xe, i[95] = Se, i[96] = Ce, i[97] = we, i[98] = Te, i[99] = $, i[100] = Ee, i[101] = G, i[102] = V, i[103] = F, i[104] = De) : De = i[104], De;
+	}), i[71] = ue, i[72] = o, i[73] = c, i[74] = l, i[75] = U, i[76] = ie, i[77] = u, i[78] = R, i[79] = H, i[80] = L, i[81] = m, i[82] = de, i[83] = y, i[84] = F, i[85] = x, i[86] = ge, i[87] = K, i[88] = q, i[89] = J, i[90] = Y, i[91] = _e, i[92] = ve, i[93] = ye, i[94] = be, i[95] = Se, i[96] = Ce, i[97] = we, i[98] = Te, i[99] = Ee, i[100] = De, i[101] = Oe, i[102] = ke, i[103] = le, i[104] = V, i[105] = I, i[106] = Ae) : Ae = i[106], Ae;
 }
 var selectDimensions = ({ width: r, height: i }) => (r || 1) * (i || 1), ViewportResizeHanlder = (r) => {
-	let i = J(2), { onViewportResize: a } = r, o = B(selectDimensions), c;
+	let i = X(2), { onViewportResize: a } = r, o = re(selectDimensions), c;
 	return i[0] === o ? c = i[1] : (c = [o], i[0] = o, i[1] = c), s(a, c), null;
-}, Ve = K(null), He = Ve.Provider;
+}, Ze = K(null), Qe = Ze.Provider;
 function useRootContainerContext() {
-	return le(Ve);
+	return Y(Ze);
 }
 function useRootContainer() {
 	let r = useRootContainerContext();
@@ -764,7 +825,7 @@ function useRootContainerElement() {
 //#endregion
 //#region ../diagram/src/components/RootContainer.tsx
 function RootContainer(r) {
-	let i = J(18), { id: a, className: o, reduceGraphics: s, children: l } = r, u = s !== void 0 && s, d = fe(null), [f] = pe(_temp$1), p = c(f), m = `#${a}`, h;
+	let i = X(18), { id: a, className: o, reduceGraphics: s, children: l } = r, u = s !== void 0 && s, d = ye(null), [f] = be(_temp$1), p = c(f), m = `#${a}`, h;
 	i[0] !== f || i[1] !== a || i[2] !== u || i[3] !== m ? (h = {
 		id: a,
 		ref: d,
@@ -773,16 +834,16 @@ function RootContainer(r) {
 		$panning: f
 	}, i[0] = f, i[1] = a, i[2] = u, i[3] = m, i[4] = h) : h = i[4];
 	let g = h, _;
-	i[5] === o ? _ = i[6] : (_ = w("likec4-root", o), i[5] = o, i[6] = _);
+	i[5] === o ? _ = i[6] : (_ = A("likec4-root", o), i[5] = o, i[6] = _);
 	let v;
 	i[7] === u ? v = i[8] : (v = u && { "data-likec4-reduced-graphics": !0 }, i[7] = u, i[8] = v);
 	let y;
-	i[9] !== l || i[10] !== g ? (y = /* @__PURE__ */ X(He, {
+	i[9] !== l || i[10] !== g ? (y = /* @__PURE__ */ Q(Qe, {
 		value: g,
 		children: l
 	}), i[9] = l, i[10] = g, i[11] = y) : y = i[11];
 	let b;
-	return i[12] !== a || i[13] !== p || i[14] !== _ || i[15] !== v || i[16] !== y ? (b = /* @__PURE__ */ X("div", {
+	return i[12] !== a || i[13] !== p || i[14] !== _ || i[15] !== v || i[16] !== y ? (b = /* @__PURE__ */ Q("div", {
 		id: a,
 		className: _,
 		ref: d,
@@ -796,77 +857,163 @@ function _temp$1() {
 }
 r(_temp$1, "_temp");
 //#endregion
-//#region ../diagram/src/context/DefaultMantineProvider.tsx
-var Ue = m({
-	autoContrast: !0,
-	primaryColor: "indigo",
+//#region ../diagram/src/LikeC4MantineProvider.tsx
+function t(r) {
+	return N.var(r);
+}
+var $e = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+], sizes = (r) => Object.fromEntries($e.map((i) => [i, t(`${r}.${i}`)])), et = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9
+], mapColor = (r) => u(et, (i) => t(`colors.${r}.${i}`)), tt = [
+	j({ textStyle: "h1" }),
+	j({ textStyle: "h2" }),
+	j({ textStyle: "h3" }),
+	j({ textStyle: "h4" }),
+	j({ textStyle: "h5" }),
+	j({ textStyle: "h6" })
+], nt = h({
+	primaryColor: "likec4",
 	cursorType: "pointer",
-	defaultRadius: "sm",
-	fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
+	autoContrast: !0,
+	primaryShade: {
+		light: 5,
+		dark: 6
+	},
+	colors: { likec4: mapColor("likec4.accent") },
+	fontFamily: t("fonts.body"),
+	fontFamilyMonospace: t("fonts.mono"),
 	headings: {
-		fontWeight: "medium",
-		sizes: {
-			h1: { fontWeight: "bold" },
-			h2: { fontWeight: "medium" }
-		}
+		fontFamily: t("fonts.display"),
+		fontWeight: t("fontWeights.bold")
+	},
+	defaultRadius: "sm",
+	fontWeights: {
+		regular: t("fontWeights.normal"),
+		medium: t("fontWeights.medium"),
+		semibold: t("fontWeights.semibold"),
+		bold: t("fontWeights.bold")
 	},
 	fontSizes: {
-		xxs: "var(--font-sizes-xxs)",
-		xs: "var(--font-sizes-xs)",
-		sm: "var(--font-sizes-sm)",
-		md: "var(--font-sizes-md)",
-		lg: "var(--font-sizes-lg)",
-		xl: "var(--font-sizes-xl)"
+		...sizes("fontSizes"),
+		xxs: t("fontSizes.xxs")
 	},
 	spacing: {
-		xs: "var(--spacing-xs)",
-		sm: "var(--spacing-sm)",
-		md: "var(--spacing-md)",
-		lg: "var(--spacing-lg)",
-		xl: "var(--spacing-xl)"
+		...sizes("spacing"),
+		xxs: t("spacing.xxs")
 	},
+	radius: sizes("radii"),
+	shadows: sizes("shadows"),
+	lineHeights: sizes("lineHeights"),
 	components: {
-		SegmentedControl: v.extend({ vars: (r, i) => ({ root: { "--sc-font-size": r.fontSizes[i.fz ?? i.size] } }) }),
-		Portal: x.extend({ defaultProps: { reuseTargetNode: !0 } }),
-		Tooltip: _.extend({ defaultProps: { color: "dark" } })
+		Card: y.extend({
+			defaultProps: { radius: "md" },
+			classNames: { root: j({ bg: "surface.default" }) }
+		}),
+		Paper: f.extend({
+			defaultProps: { radius: "md" },
+			classNames: { root: j({ bg: "surface.default" }) }
+		}),
+		Title: C.extend({ classNames: (r, i) => ({ root: tt[(i.order ?? 1) - 1] }) }),
+		Code: b.extend({ classNames: { root: j({ bg: "surface.code" }) } }),
+		Table: w.extend({ classNames: { th: j({
+			fontSize: "xxs",
+			fontWeight: "bold",
+			color: "text.dimmed",
+			textTransform: "uppercase",
+			letterSpacing: "caps.sm"
+		}) } }),
+		Tooltip: T.extend({ defaultProps: {
+			color: "dark",
+			fz: "xs",
+			withArrow: !1,
+			openDelay: 600,
+			closeDelay: 120,
+			offset: 8
+		} }),
+		SegmentedControl: x.extend({ vars: (r, i) => ({ root: { "--sc-font-size": r.fontSizes[i.fz ?? i.size] } }) }),
+		Popover: D.extend({ defaultProps: {
+			withArrow: !1,
+			radius: "sm",
+			shadow: "lg"
+		} }),
+		Menu: g.extend({ defaultProps: {
+			radius: "sm",
+			shadow: "lg"
+		} })
 	}
+}), semantic = (r) => ({
+	dark: r,
+	light: r
+}), resolver = (r) => ({
+	variables: { "--mantine-radius-default": t("radii.sm") },
+	...semantic({
+		"--mantine-color-text": t("colors.text"),
+		"--mantine-color-body": t("colors.surface.default"),
+		"--mantine-color-placeholder": t("colors.text.non-essential"),
+		"--mantine-color-anchor": t("colors.text.link"),
+		"--mantine-color-disabled": t("colors.disabled.body"),
+		"--mantine-color-disabled-color": t("colors.disabled.text"),
+		"--mantine-color-disabled-hover": t("colors.disabled.body"),
+		"--mantine-color-disabled-border": t("colors.disabled.border"),
+		"--mantine-color-default": t("colors.surface.default"),
+		"--mantine-color-default-color": t("colors.text"),
+		"--mantine-color-default-border": t("colors.border.default"),
+		"--mantine-color-default-hover": t("colors.surface.hover")
+	})
 });
-function DefaultMantineProvider(r) {
-	let i = J(8), a, o, s;
-	i[0] === r ? (a = i[1], o = i[2], s = i[3]) : ({children: a, theme: s, ...o} = r, i[0] = r, i[1] = a, i[2] = o, i[3] = s);
-	let c = s ?? Ue, l;
-	return i[4] !== a || i[5] !== o || i[6] !== c ? (l = /* @__PURE__ */ X(b, {
-		defaultColorScheme: "auto",
-		theme: c,
+function LikeC4MantineProvider(r) {
+	let i = X(12), a, o, s, c;
+	i[0] === r ? (a = i[1], o = i[2], s = i[3], c = i[4]) : ({children: a, defaultColorScheme: s, theme: c, ...o} = r, i[0] = r, i[1] = a, i[2] = o, i[3] = s, i[4] = c);
+	let l = s === void 0 ? "auto" : s, u;
+	i[5] === c ? u = i[6] : (u = c ? m(nt, c) : nt, i[5] = c, i[6] = u);
+	let d = u, f;
+	return i[7] !== a || i[8] !== l || i[9] !== d || i[10] !== o ? (f = /* @__PURE__ */ Q(_, {
+		defaultColorScheme: l,
+		theme: d,
+		cssVariablesResolver: resolver,
 		...o,
 		children: a
-	}), i[4] = a, i[5] = o, i[6] = c, i[7] = l) : l = i[7], l;
+	}), i[7] = a, i[8] = l, i[9] = d, i[10] = o, i[11] = f) : f = i[11], f;
 }
 //#endregion
 //#region ../diagram/src/context/EnsureMantine.tsx
 function EnsureMantine(r) {
-	let i = J(7), { children: a } = r, o = le(p), t1;
+	let i = X(7), { children: a } = r, o = Y(v), t1;
 	i[0] === o ? t1 = i[1] : (t1 = () => {
-		o || console.warn("LikeC4Diagram must be a child of MantineProvider");
+		o || console.warn("LikeC4Diagram must be a child of LikeC4MantineProvider");
 	}, i[0] = o, i[1] = t1);
 	let s;
-	if (i[2] === Symbol.for("react.memo_cache_sentinel") ? (s = [], i[2] = s) : s = i[2], ue(t1, s), !o) {
+	if (i[2] === Symbol.for("react.memo_cache_sentinel") ? (s = [], i[2] = s) : s = i[2], _e(t1, s), !o) {
 		let r;
-		return i[3] === a ? r = i[4] : (r = /* @__PURE__ */ X(DefaultMantineProvider, { children: a }), i[3] = a, i[4] = r), r;
+		return i[3] === a ? r = i[4] : (r = /* @__PURE__ */ Q(LikeC4MantineProvider, { children: a }), i[3] = a, i[4] = r), r;
 	}
 	let c;
-	return i[5] === a ? c = i[6] : (c = /* @__PURE__ */ X(Y, { children: a }), i[5] = a, i[6] = c), c;
+	return i[5] === a ? c = i[6] : (c = /* @__PURE__ */ Q(Z, { children: a }), i[5] = a, i[6] = c), c;
 }
 //#endregion
 //#region ../diagram/src/context/FramerMotionConfig.tsx
 function FramerMotionConfig(r) {
-	let i = J(6), { reducedMotion: a, children: o } = r, s = a === void 0 ? "user" : a, c = h()?.(), l;
+	let i = X(6), { reducedMotion: a, children: o } = r, s = a === void 0 ? "user" : a, c = O()?.(), l;
 	i[0] === c ? l = i[1] : (l = c && { nonce: c }, i[0] = c, i[1] = l);
 	let u;
-	return i[2] !== o || i[3] !== s || i[4] !== l ? (u = /* @__PURE__ */ X(ie, {
-		features: ae,
+	return i[2] !== o || i[3] !== s || i[4] !== l ? (u = /* @__PURE__ */ Q(de, {
+		features: pe,
 		strict: !0,
-		children: /* @__PURE__ */ X(se, {
+		children: /* @__PURE__ */ Q(ge, {
 			reducedMotion: s,
 			...l,
 			children: o
@@ -875,43 +1022,43 @@ function FramerMotionConfig(r) {
 }
 //#endregion
 //#region ../diagram/src/context/LikeC4ModelContext.tsx
-var We = K(null), Ge = We.Provider, Ke = K(null), qe = Ke.Provider;
+var rt = K(null), it = rt.Provider, at = K(null), ot = at.Provider;
 function useOptionalLikeC4Model() {
-	return le(We);
+	return Y(rt);
 }
 function useOptionalCurrentViewModel() {
-	return le(Ke);
+	return Y(at);
 }
 //#endregion
 //#region ../diagram/src/hooks/useLikeC4Styles.ts
 function useLikeC4Styles() {
-	return useOptionalLikeC4Model()?.$styles ?? ve.DEFAULT;
+	return useOptionalLikeC4Model()?.$styles ?? Ee.DEFAULT;
 }
 //#endregion
 //#region ../diagram/src/hooks/useId.ts
 function useId$1() {
-	let r = J(2), i = g(), a;
+	let r = X(2), i = S(), a;
 	return r[0] === i ? a = r[1] : (a = i.replace("mantine-", "likec4-"), r[0] = i, r[1] = a), a;
 }
 r(useId$1, "useId");
 //#endregion
 //#region ../diagram/src/context/LikeC4ProjectsContext.ts
-var Je = K(null), Ye = Je.Provider;
+var st = K(null), ct = st.Provider;
 function useOptionalProjectsContext() {
-	return le(Je);
+	return Y(st);
 }
 //#endregion
 //#region ../diagram/src/hooks/useLikeC4Project.ts
-var Xe = [];
+var lt = [];
 function onProjectChange(r) {
 	console.warn(`Triggered callback to change project to ${r}, but no <LikeC4ProjectsProvider/> found`);
 }
-var Ze = {
-	projects: Xe,
+var ut = {
+	projects: lt,
 	onProjectChange
 };
 function useLikeC4ProjectsContext() {
-	return useOptionalProjectsContext() ?? Ze;
+	return useOptionalProjectsContext() ?? ut;
 }
 function useLikeC4Projects() {
 	return useLikeC4ProjectsContext().projects;
@@ -925,18 +1072,57 @@ function useLikeC4ProjectId() {
 	return r.projectId;
 }
 //#endregion
+//#region ../diagram/src/components/Logo.tsx
+var dt = q((r, i) => {
+	let a = X(5), o, s;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ Q("path", {
+		fill: "#5E98AF",
+		d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
+	}), s = /* @__PURE__ */ Q("path", {
+		className: j({
+			fill: "[#FCFBF7]",
+			_light: { fill: "[#222221]" }
+		}),
+		d: "M71.61 12.08c-.06 3.61.3 29.95.23 31.87 0 1.8 0 3.6.06 5.41 0 .3.18.58.47.58 4.1.18 8.13-.17 12.22-.11 1.34.05 2.69 0 3.97 0 1.29-.06 1.4-.59 1.35-1.63-.06-1.63-.06-3.08-.06-4.65-.06-.82-.53-1.11-1.23-1.11-2.4.06-4.8-.06-7.19.06-.4.06-.82.06-1.23.06-.7-.06-.87-.24-.93-1v-.86c-.18-4.83.17-9.83.17-14.66-.06-4.07 0-7.73-.06-11.34 0-1.57 0-3.14-.05-4.65-.06-.93 0-1.92-.24-2.85-.11-.35-.29-.81-.7-.81h-5.5c-.93 0-1.22.64-1.28 1.57v4.12ZM103.81 35c-.17-6.63-.1-13.67-.05-20.24 0-2.04-.12-4.25-.12-6.28 0-2.21-.87-2.1-2.04-2.15-1.7-.06-2.46-.06-4.15-.06-1.11-.06-1.58.23-1.58 1.34 0 5.7-.18 21.8-.12 24.13.06 2.33.3 12.91.18 15.24-.06.81 0 1.62.06 2.44.05.29.23.58.7.58 1.93-.12 3.74-.12 5.67-.17.7-.06 1.28-.24 1.58-1 .05-.4-.12-11.04-.12-13.83Zm13.92 4.47c0-2.03-.3-7.56-.23-8.72 0-.17.11-.4.17-.4.12 0 .35.11.41.17 1.87 2.44 10.64 19.36 11.7 19.42.28.06.58.06.87.06 1.99-.12 3.74 0 5.73 0 2.04 0 .7-1.98.35-2.5-.53-.76-7.48-13.14-7.9-13.9-1.16-1.98-2.16-4.13-3.32-6.05-.12-.23-.24-.58-.18-.81.12-.7.3-1.34.59-1.98a93.18 93.18 0 0 1 4.55-8.14c1.88-2.97 2.93-4.83 4.45-7.5.35-.64.58-1.34.82-2.1.05-.29-.18-.58-.53-.58-1.11-.05-5.15 0-6.43 0-.59 0-1.17.12-1.46.64-.76 1.46-8.6 15.7-9.35 16.98-.06.12-.24.18-.41.18 0 0-.12-.18-.12-.3-.06-3.25.53-13.9.4-16.04-.05-1.28-.28-1.4-1.57-1.46-1.4-.05-3.33-.05-4.73-.05-1.3 0-1.4.7-1.58 1.62-.06.18-.06 5.64-.06 8.09 0 3.54-.3 25.76.11 32.8 0 .7.18 1.1.77 1.1 1.57-.12 3.91 0 5.49 0 1.11 0 1.29-.12 1.29-1.98 0-2.5.23-4.77.23-7.85 0-.23-.06-.46-.06-.7Zm25.66-1.4h-.06c0 1.46-.05 2.97 0 4.49.06 1.86.18 3.72.3 5.58 0 .64.17.81.76.93 1.22.29 2.4.35 3.62.35 3.16-.12 6.31.11 9.47 0 1.29-.06 1.87.06 3.16-.18 1.17-.23 1.58-.87 1.58-2.61-.12-1.1-.06-1.57-.06-2.91 0-1.92-1.35-2.56-2.52-2.5-.81.06-4.73-.06-6.31-.06-2.63.06-2.22.4-2.22-2.33 0-2.2.06-5.05.06-7.32 0-1.22.11-1.63 1.28-1.63h7.31c1.17.17 1.99-.64 1.99-1.86 0-1.22.12-1.28.12-2.5l-.18-1.75c-.12-.99-.47-1.33-1.46-1.33-.64 0-1.29.05-1.93.11-2.52.18-3.68-.17-6.14 0-.82 0-.93-.11-1-.87-.23-2.27 0-4.77.24-7.04.06-.93.3-1.1 1.17-1.16l8.24-.06c1.11-.11 1.46-.06 1.4-1.16-.11-1.69.06-3.43-.11-5.12-.12-.93-.41-1.1-1.46-1.1-1.76.05-2.17.05-3.92.17-1.75.06-8.77.06-10.46.06-2.46 0-2.63-.18-2.7 2.8-.1 2.32-.05 4.7-.05 7.09 0 4.07-.23 18.66-.12 21.92Zm47.76-24.82c.06-1.92 0-3.5 0-5.35 0-2.15-3.92-1.92-5.32-1.86a18.95 18.95 0 0 0-15.08 9.77c-.82 1.57-1.4 3.2-1.81 4.88a34 34 0 0 0-.59 12.15c.41 3.78 1.4 7.56 3.74 10.59 4.04 5.3 11.46 7.15 17.83 6.16.3-.06.59-.11.82-.29.18-.11.35-.35.35-.58l.18-3.31c.06-1.05 0-1 0-2.04 0-1.4-2.93-.35-4.74-.35-1.75 0-3.62-.06-5.2-.87-2.8-1.57-4.38-4.71-5.26-7.68-1-3.2-1.23-6.63-.64-9.88.7-4.25 2.74-9.13 7.25-10.59 2.57-.87 5.31-.58 7.89-.29.35.06.58-.17.58-.46Zm26.77 15.3c.06-2.5 0-14.84 0-18.38.06-.82 0-1.63-.11-2.45-.06-.99-.24-1.28-1.29-1.33h-4.44c-.82 0-1.35.4-1.82 1.27-1.34 3.2-10.75 24.02-12.15 26.58-.53.99-1 1.63-1 2.68v4.24c0 .76-.06 1.28 1.23 1.28l11.1-.06c1.47 0 1.47.3 1.47 1.1 0 .88-.12 4.9-.12 5.3 0 .58.12 1.16 1.23 1.16h5.08c1.23 0 1.23-.7 1.23-2.03.06-1.17-.06-3.5-.06-4.66 0-.93.18-.98 1.76-.98 1.22 0 1.75-.12 1.75-.88.06-1.57 0-2.67 0-4.42 0-1.04-.93-.98-2.92-.98-.65 0-.7-.18-.7-1.05-.12-1.8-.24-4.6-.24-6.4Zm-7.25-5.94c-.05.7-.11 10.82-.11 12.27-.06.81-.24 1.05-1 1.1-1.93.06-3.85.06-5.78.06-.47 0-.65-.4-.41-.87.23-.4 4.85-11.57 6.13-14.48.18-.17.24-.35.41-.52.18-.12.41-.18.59-.23.06 0 .23.29.23.46 0 .76-.06 1.51-.06 2.21Z"
+	}), a[0] = o, a[1] = s) : (o = a[0], s = a[1]);
+	let c;
+	return a[2] !== r || a[3] !== i ? (c = /* @__PURE__ */ $("svg", {
+		ref: i,
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 222 56",
+		...r,
+		children: [o, s]
+	}), a[2] = r, a[3] = i, a[4] = c) : c = a[4], c;
+}), ft = q((r, i) => {
+	let a = X(4), o;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ Q("path", {
+		fill: "#5E98AF",
+		d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
+	}), a[0] = o) : o = a[0];
+	let s;
+	return a[1] !== r || a[2] !== i ? (s = /* @__PURE__ */ Q("svg", {
+		ref: i,
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 56 56",
+		...r,
+		children: o
+	}), a[1] = r, a[2] = i, a[3] = s) : s = a[3], s;
+});
+//#endregion
 //#region ../diagram/src/base-primitives/edge/EdgeContainer.tsx
 function EdgeContainer(r) {
-	let i = J(47), a, o, s, c, l, u, d, f, p, m, h, g;
+	let i = X(47), a, o, s, c, l, u, d, f, p, m, h, g;
 	if (i[0] !== r) {
-		let { className: _, component: v, selectable: y, selected: b, data: x, animated: S, children: C, style: T, ...E } = r;
-		a = C, s = T, o = v === void 0 ? "g" : v;
-		let D = y !== void 0 && y, O = b !== void 0 && b, k, A, j, M, N;
-		i[13] === x ? (k = i[14], A = i[15], j = i[16], M = i[17], N = i[18]) : ({color: A, hovered: j, active: M, dimmed: N, ...k} = x, i[13] = x, i[14] = k, i[15] = A, i[16] = j, i[17] = M, i[18] = N);
-		let P = A === void 0 ? "gray" : A, F = j !== void 0 && j, I = M !== void 0 && M, L = N !== void 0 && N, R = S !== void 0 && S;
+		let { className: _, component: v, selectable: y, selected: b, data: x, animated: S, children: C, style: w, ...T } = r;
+		a = C, s = w, o = v === void 0 ? "g" : v;
+		let E = y !== void 0 && y, D = b !== void 0 && b, O, k, j, M, N;
+		i[13] === x ? (O = i[14], k = i[15], j = i[16], M = i[17], N = i[18]) : ({color: k, hovered: j, active: M, dimmed: N, ...O} = x, i[13] = x, i[14] = O, i[15] = k, i[16] = j, i[17] = M, i[18] = N);
+		let P = k === void 0 ? "gray" : k, F = j !== void 0 && j, I = M !== void 0 && M, L = N !== void 0 && N, R = S !== void 0 && S;
 		R ||= I;
-		let z = O && "selected", B = D && "selectable";
-		i[19] !== _ || i[20] !== z || i[21] !== B ? (c = w(_, "likec4-edge-container", z, B), i[19] = _, i[20] = z, i[21] = B, i[22] = c) : c = i[22], l = P, u = k.dir ?? "forward", d = I, f = F, i[23] === R ? p = i[24] : (p = R && { "data-likec4-animated": R }, i[23] = R, i[24] = p), i[25] === O ? m = i[26] : (m = O && { "data-likec4-selected": O }, i[25] = O, i[26] = m), i[27] === L ? h = i[28] : (h = L !== !1 && { "data-likec4-dimmed": L }, i[27] = L, i[28] = h), g = t(E, _temp), i[0] = r, i[1] = a, i[2] = o, i[3] = s, i[4] = c, i[5] = l, i[6] = u, i[7] = d, i[8] = f, i[9] = p, i[10] = m, i[11] = h, i[12] = g;
+		let z = D && "selected", B = E && "selectable";
+		i[19] !== _ || i[20] !== z || i[21] !== B ? (c = A(_, "likec4-edge-container", z, B), i[19] = _, i[20] = z, i[21] = B, i[22] = c) : c = i[22], l = P, u = O.dir ?? "forward", d = I, f = F, i[23] === R ? p = i[24] : (p = R && { "data-likec4-animated": R }, i[23] = R, i[24] = p), i[25] === D ? m = i[26] : (m = D && { "data-likec4-selected": D }, i[25] = D, i[26] = m), i[27] === L ? h = i[28] : (h = L !== !1 && { "data-likec4-dimmed": L }, i[27] = L, i[28] = h), g = t$1(T, _temp), i[0] = r, i[1] = a, i[2] = o, i[3] = s, i[4] = c, i[5] = l, i[6] = u, i[7] = d, i[8] = f, i[9] = p, i[10] = m, i[11] = h, i[12] = g;
 	} else a = i[1], o = i[2], s = i[3], c = i[4], l = i[5], u = i[6], d = i[7], f = i[8], p = i[9], m = i[10], h = i[11], g = i[12];
 	let _;
 	i[29] !== c || i[30] !== l || i[31] !== u || i[32] !== d || i[33] !== f || i[34] !== p || i[35] !== m || i[36] !== h || i[37] !== g ? (_ = {
@@ -953,15 +1139,15 @@ function EdgeContainer(r) {
 	let v = _;
 	if (o === "svg") {
 		let r;
-		return i[39] !== a || i[40] !== v || i[41] !== s ? (r = /* @__PURE__ */ X("svg", {
+		return i[39] !== a || i[40] !== v || i[41] !== s ? (r = /* @__PURE__ */ Q("svg", {
 			style: s,
 			...v,
 			children: a
 		}), i[39] = a, i[40] = v, i[41] = s, i[42] = r) : r = i[42], r;
 	}
-	me(o === "g", "EdgeContainer: component must be \"g\" or \"svg\"");
+	xe(o === "g", "EdgeContainer: component must be \"g\" or \"svg\"");
 	let y;
-	return i[43] !== a || i[44] !== v || i[45] !== s ? (y = /* @__PURE__ */ X("g", {
+	return i[43] !== a || i[44] !== v || i[45] !== s ? (y = /* @__PURE__ */ Q("g", {
 		style: s,
 		...v,
 		children: a
@@ -972,63 +1158,63 @@ function _temp(r, i) {
 }
 //#endregion
 //#region ../diagram/src/base-primitives/edge/EdgeLabel.tsx
-var Qe = q((r, i) => {
-	let a = J(34), o, s, c, l, u, d, f;
+var pt = q((r, i) => {
+	let a = X(34), o, s, c, l, u, d, f;
 	a[0] === r ? (o = a[1], s = a[2], c = a[3], l = a[4], u = a[5], d = a[6], f = a[7]) : ({edgeProps: u, isSequenceStep: d, stepNum: l, pointerEvents: f, className: s, children: o, ...c} = r, a[0] = r, a[1] = o, a[2] = s, a[3] = c, a[4] = l, a[5] = u, a[6] = d, a[7] = f);
-	let { id: p, data: m, selected: h, selectable: g } = u, { label: _, technology: v, hovered: y } = m, b = y !== void 0 && y, x = h !== void 0 && h, S = g !== void 0 && g, T = d !== void 0 && d, E = f === void 0 ? "all" : f, D;
-	a[8] !== _ || a[9] !== v ? (D = e(_) || e(v), a[8] = _, a[9] = v, a[10] = D) : D = a[10];
-	let k = D, A;
-	a[11] !== s || a[12] !== T || a[13] !== E || a[14] !== S ? (A = w("likec4-edge-label", O({
-		pointerEvents: E,
-		isStepEdge: T,
-		cursor: S || T ? "pointer" : "default"
-	}), s), a[11] = s, a[12] = T, a[13] = E, a[14] = S, a[15] = A) : A = a[15];
-	let j = b && !x ? 1.06 : 1, M;
-	a[16] === j ? M = a[17] : (M = { scale: j }, a[16] = j, a[17] = M);
-	let N;
-	a[18] !== T || a[19] !== l ? (N = T && l && /* @__PURE__ */ X(C, {
+	let { id: p, data: m, selected: h, selectable: g } = u, { label: _, technology: v, hovered: y } = m, b = y !== void 0 && y, x = h !== void 0 && h, S = g !== void 0 && g, C = d !== void 0 && d, w = f === void 0 ? "all" : f, T;
+	a[8] !== _ || a[9] !== v ? (T = e(_) || e(v), a[8] = _, a[9] = v, a[10] = T) : T = a[10];
+	let E = T, D;
+	a[11] !== s || a[12] !== C || a[13] !== w || a[14] !== S ? (D = A("likec4-edge-label", R({
+		pointerEvents: w,
+		isStepEdge: C,
+		cursor: S || C ? "pointer" : "default"
+	}), s), a[11] = s, a[12] = C, a[13] = w, a[14] = S, a[15] = D) : D = a[15];
+	let O = b && !x ? 1.06 : 1, k;
+	a[16] === O ? k = a[17] : (k = { scale: O }, a[16] = O, a[17] = k);
+	let j;
+	a[18] !== C || a[19] !== l ? (j = C && l && /* @__PURE__ */ Q(L, {
 		className: "likec4-edge-label__step-number",
 		children: l
-	}), a[18] = T, a[19] = l, a[20] = N) : N = a[20];
-	let P;
-	a[21] !== o || a[22] !== k || a[23] !== _ || a[24] !== v ? (P = k && /* @__PURE__ */ Z(C, {
+	}), a[18] = C, a[19] = l, a[20] = j) : j = a[20];
+	let M;
+	a[21] !== o || a[22] !== E || a[23] !== _ || a[24] !== v ? (M = E && /* @__PURE__ */ $(L, {
 		className: "likec4-edge-label__contents",
 		children: [
-			e(_) && /* @__PURE__ */ X(C, {
+			e(_) && /* @__PURE__ */ Q(L, {
 				lineClamp: 5,
 				className: "likec4-edge-label__text",
 				children: _
 			}),
-			e(v) && /* @__PURE__ */ X(C, {
+			e(v) && /* @__PURE__ */ Q(L, {
 				className: "likec4-edge-label__technology",
 				children: "[ " + v + " ]"
 			}),
 			o
 		]
-	}), a[21] = o, a[22] = k, a[23] = _, a[24] = v, a[25] = P) : P = a[25];
-	let F;
-	return a[26] !== p || a[27] !== i || a[28] !== c || a[29] !== M || a[30] !== N || a[31] !== P || a[32] !== A ? (F = /* @__PURE__ */ Z(G, {
+	}), a[21] = o, a[22] = E, a[23] = _, a[24] = v, a[25] = M) : M = a[25];
+	let N;
+	return a[26] !== p || a[27] !== i || a[28] !== c || a[29] !== k || a[30] !== j || a[31] !== M || a[32] !== D ? (N = /* @__PURE__ */ $(he, {
 		ref: i,
-		className: A,
+		className: D,
 		"data-edge-id": p,
-		animate: M,
+		animate: k,
 		...c,
-		children: [N, P]
-	}), a[26] = p, a[27] = i, a[28] = c, a[29] = M, a[30] = N, a[31] = P, a[32] = A, a[33] = F) : F = a[33], F;
+		children: [j, M]
+	}), a[26] = p, a[27] = i, a[28] = c, a[29] = k, a[30] = j, a[31] = M, a[32] = D, a[33] = N) : N = a[33], N;
 });
-Qe.displayName = "EdgeLabel";
+pt.displayName = "EdgeLabel";
 //#endregion
 //#region ../diagram/src/base-primitives/edge/EdgeLabelContainer.tsx
 var toCssVarValue = (r) => r === void 0 ? "" : e$1(r) ? `${Math.trunc(r)}px` : r;
 function EdgeLabelContainer(r) {
-	let i = J(42), a, o, s, c, l, u;
+	let i = X(42), a, o, s, c, l, u;
 	i[0] === r ? (a = i[1], o = i[2], s = i[3], c = i[4], l = i[5], u = i[6]) : ({edgeProps: u, labelPosition: c, className: o, style: s, children: a, ...l} = r, i[0] = r, i[1] = a, i[2] = o, i[3] = s, i[4] = c, i[5] = l, i[6] = u);
-	let { id: d, selected: f, data: p, animated: m } = u, h = f !== void 0 && f, { hovered: g, active: _, dimmed: v, labelBBox: y, color: b } = p, x = g !== void 0 && g, S = _ !== void 0 && _, C = v !== void 0 && v, T = b === void 0 ? "gray" : b, E = c?.x ?? y?.x, D = c?.y ?? y?.y;
-	if (E === void 0 || D === void 0) return null;
-	let O = c?.translate ?? "";
+	let { id: d, selected: f, data: p, animated: m } = u, h = f !== void 0 && f, { hovered: g, active: _, dimmed: v, labelBBox: y, color: b } = p, x = g !== void 0 && g, S = _ !== void 0 && _, C = v !== void 0 && v, w = b === void 0 ? "gray" : b, T = c?.x ?? y?.x, E = c?.y ?? y?.y;
+	if (T === void 0 || E === void 0) return null;
+	let D = c?.translate ?? "";
 	m ||= S;
-	let k = d, A;
-	i[7] === o ? A = i[8] : (A = w("nodrag nopan", "likec4-edge-label-container", o), i[7] = o, i[8] = A);
+	let O = d, k;
+	i[7] === o ? k = i[8] : (k = A("nodrag nopan", "likec4-edge-label-container", o), i[7] = o, i[8] = k);
 	let j = m || S, M;
 	i[9] === m ? M = i[10] : (M = m && { "data-likec4-animated": m }, i[9] = m, i[10] = M);
 	let N;
@@ -1036,10 +1222,10 @@ function EdgeLabelContainer(r) {
 	let P;
 	i[13] === C ? P = i[14] : (P = C !== !1 && { "data-likec4-dimmed": C }, i[13] = C, i[14] = P);
 	let F;
-	i[15] === E ? F = i[16] : (F = toCssVarValue(E), i[15] = E, i[16] = F);
+	i[15] === T ? F = i[16] : (F = toCssVarValue(T), i[15] = T, i[16] = F);
 	let I;
-	i[17] === D ? I = i[18] : (I = toCssVarValue(D), i[17] = D, i[18] = I);
-	let L = `translate(${F}, ${I}) ${O}`, R;
+	i[17] === E ? I = i[18] : (I = toCssVarValue(E), i[17] = E, i[18] = I);
+	let L = `translate(${F}, ${I}) ${D}`, R;
 	i[19] === L ? R = i[20] : (R = { transform: L }, i[19] = L, i[20] = R);
 	let z;
 	i[21] === y ? z = i[22] : (z = y && { maxWidth: y.width + 20 }, i[21] = y, i[22] = z);
@@ -1049,16 +1235,16 @@ function EdgeLabelContainer(r) {
 		...z
 	}, i[23] = s, i[24] = z, i[25] = B) : B = i[25];
 	let V;
-	i[26] !== a || i[27] !== B ? (V = /* @__PURE__ */ X("div", {
+	i[26] !== a || i[27] !== B ? (V = /* @__PURE__ */ Q("div", {
 		style: B,
 		children: a
 	}), i[26] = a, i[27] = B, i[28] = V) : V = i[28];
 	let H;
-	return i[29] !== T || i[30] !== d || i[31] !== S || i[32] !== x || i[33] !== l || i[34] !== j || i[35] !== M || i[36] !== N || i[37] !== P || i[38] !== R || i[39] !== V || i[40] !== A ? (H = /* @__PURE__ */ X(ee, { children: /* @__PURE__ */ X("div", {
+	return i[29] !== w || i[30] !== d || i[31] !== S || i[32] !== x || i[33] !== l || i[34] !== j || i[35] !== M || i[36] !== N || i[37] !== P || i[38] !== R || i[39] !== V || i[40] !== k ? (H = /* @__PURE__ */ Q(ie, { children: /* @__PURE__ */ Q("div", {
 		...l,
-		className: A,
+		className: k,
 		"data-likec4-hovered": x,
-		"data-likec4-color": T,
+		"data-likec4-color": w,
 		"data-edge-active": S,
 		"data-edge-animated": j,
 		...M,
@@ -1066,13 +1252,13 @@ function EdgeLabelContainer(r) {
 		...P,
 		style: R,
 		children: V
-	}, k) }), i[29] = T, i[30] = d, i[31] = S, i[32] = x, i[33] = l, i[34] = j, i[35] = M, i[36] = N, i[37] = P, i[38] = R, i[39] = V, i[40] = A, i[41] = H) : H = i[41], H;
+	}, O) }), i[29] = w, i[30] = d, i[31] = S, i[32] = x, i[33] = l, i[34] = j, i[35] = M, i[36] = N, i[37] = P, i[38] = R, i[39] = V, i[40] = k, i[41] = H) : H = i[41], H;
 }
 //#endregion
 //#region ../diagram/src/base-primitives/edge/EdgeMarkers.tsx
 var Open = (r) => {
-	let i = J(3), a;
-	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ X("path", {
+	let i = X(3), a;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ Q("path", {
 		d: "M0,0 L7,4 L0,8 L4,4 Z",
 		stroke: "context-stroke",
 		fill: "context-stroke",
@@ -1081,7 +1267,7 @@ var Open = (r) => {
 		strokeLinecap: "round"
 	}), i[0] = a) : a = i[0];
 	let o;
-	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ X("marker", {
+	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ Q("marker", {
 		viewBox: "-4 -4 14 16",
 		refX: 5,
 		refY: 4,
@@ -1093,14 +1279,14 @@ var Open = (r) => {
 		children: a
 	}), i[1] = r, i[2] = o), o;
 }, Arrow = (r) => {
-	let i = J(3), a;
-	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ X("path", {
+	let i = X(3), a;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ Q("path", {
 		d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
 		fill: "context-stroke",
 		strokeWidth: 0
 	}), i[0] = a) : a = i[0];
 	let o;
-	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ X("marker", {
+	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ Q("marker", {
 		viewBox: "-1 -1 12 10",
 		refX: 4,
 		refY: 3,
@@ -1112,14 +1298,14 @@ var Open = (r) => {
 		children: a
 	}), i[1] = r, i[2] = o), o;
 }, Crow = (r) => {
-	let i = J(3), a;
-	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ X("path", {
+	let i = X(3), a;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ Q("path", {
 		d: "M 8 0 L 0 4 L 8 8 M 8 4 L 0 4",
 		fill: "none",
 		strokeWidth: 1
 	}), i[0] = a) : a = i[0];
 	let o;
-	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ X("marker", {
+	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ Q("marker", {
 		viewBox: "-1 -1 12 12",
 		refX: 8,
 		refY: 4,
@@ -1131,8 +1317,8 @@ var Open = (r) => {
 		children: a
 	}), i[1] = r, i[2] = o), o;
 }, OArrow = (r) => {
-	let i = J(3), a;
-	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ X("path", {
+	let i = X(3), a;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ Q("path", {
 		d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
 		stroke: "context-stroke",
 		fill: "var(--likec4-background-color)",
@@ -1141,7 +1327,7 @@ var Open = (r) => {
 		strokeLinecap: "square"
 	}), i[0] = a) : a = i[0];
 	let o;
-	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ X("marker", {
+	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ Q("marker", {
 		viewBox: "-1 -1 12 10",
 		refX: 4,
 		refY: 3,
@@ -1153,15 +1339,15 @@ var Open = (r) => {
 		children: a
 	}), i[1] = r, i[2] = o), o;
 }, Diamond = (r) => {
-	let i = J(3), a;
-	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ X("path", {
+	let i = X(3), a;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ Q("path", {
 		d: "M5,0 L10,4 L5,8 L0,4 Z",
 		fill: "context-stroke",
 		strokeWidth: 0,
 		strokeLinecap: "round"
 	}), i[0] = a) : a = i[0];
 	let o;
-	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ X("marker", {
+	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ Q("marker", {
 		viewBox: "-4 -4 16 14",
 		refX: 5,
 		refY: 4,
@@ -1173,8 +1359,8 @@ var Open = (r) => {
 		children: a
 	}), i[1] = r, i[2] = o), o;
 }, ODiamond = (r) => {
-	let i = J(3), a;
-	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ X("path", {
+	let i = X(3), a;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ Q("path", {
 		d: "M5,0 L10,4 L5,8 L0,4 Z",
 		stroke: "context-stroke",
 		fill: "var(--likec4-background-color)",
@@ -1182,7 +1368,7 @@ var Open = (r) => {
 		strokeLinecap: "round"
 	}), i[0] = a) : a = i[0];
 	let o;
-	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ X("marker", {
+	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ Q("marker", {
 		viewBox: "-4 -4 16 14",
 		refX: 6,
 		refY: 4,
@@ -1194,8 +1380,8 @@ var Open = (r) => {
 		children: a
 	}), i[1] = r, i[2] = o), o;
 }, Dot = (r) => {
-	let i = J(3), a;
-	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ X("circle", {
+	let i = X(3), a;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ Q("circle", {
 		strokeWidth: 0,
 		fill: "context-stroke",
 		cx: 4,
@@ -1203,7 +1389,7 @@ var Open = (r) => {
 		r: 3
 	}), i[0] = a) : a = i[0];
 	let o;
-	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ X("marker", {
+	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ Q("marker", {
 		viewBox: "0 0 10 10",
 		refX: 4,
 		refY: 4,
@@ -1213,8 +1399,8 @@ var Open = (r) => {
 		children: a
 	}), i[1] = r, i[2] = o), o;
 }, ODot = (r) => {
-	let i = J(3), a;
-	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ X("circle", {
+	let i = X(3), a;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ Q("circle", {
 		strokeWidth: 1.25,
 		stroke: "context-stroke",
 		fill: "var(--likec4-background-color)",
@@ -1223,7 +1409,7 @@ var Open = (r) => {
 		r: 3
 	}), i[0] = a) : a = i[0];
 	let o;
-	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ X("marker", {
+	return i[1] === r ? o = i[2] : (o = /* @__PURE__ */ Q("marker", {
 		viewBox: "0 0 10 10",
 		refX: 4,
 		refY: 4,
@@ -1232,7 +1418,7 @@ var Open = (r) => {
 		...r,
 		children: a
 	}), i[1] = r, i[2] = o), o;
-}, $e = {
+}, mt = {
 	Arrow,
 	Crow,
 	OArrow,
@@ -1243,7 +1429,7 @@ var Open = (r) => {
 	ODot
 };
 function arrowTypeToMarker(r) {
-	if (!(!r || r === "none")) switch (r) {
+	if (r && r !== "none") switch (r) {
 		case "normal": return "Arrow";
 		case "crow": return "Crow";
 		case "onormal": return "OArrow";
@@ -1253,21 +1439,21 @@ function arrowTypeToMarker(r) {
 		case "vee": return "Open";
 		case "dot": return "Dot";
 		case "odot": return "ODot";
-		default: he(r);
+		default: Se(r);
 	}
 }
 //#endregion
 //#region ../diagram/src/base-primitives/edge/EdgePath.tsx
-var et = q((r, i) => {
-	let a = J(54), { edgeProps: o, isDragging: s, onEdgePointerDown: c, strokeWidth: l, svgPath: u } = r, { id: d, data: f, selectable: p, style: m, interactionWidth: h } = o, { line: g, dir: _, tail: v, head: y } = f, b = p === void 0 || p, x = s !== void 0 && s, S = arrowTypeToMarker(v), C = arrowTypeToMarker(y ?? "normal");
+var ht = q((r, i) => {
+	let a = X(54), { edgeProps: o, isDragging: s, onEdgePointerDown: c, strokeWidth: l, svgPath: u } = r, { id: d, data: f, selectable: p, style: m, interactionWidth: h } = o, { line: g, dir: _, tail: v, head: y } = f, b = p === void 0 || p, x = s !== void 0 && s, S = arrowTypeToMarker(v), C = arrowTypeToMarker(y ?? "normal");
 	_ === "back" && ([S, C] = [C, S]);
-	let E = S ? $e[S] : null, O = C ? $e[C] : null, k = g === "dotted", A = k || g === "dashed", j;
-	k ? j = "1,8" : A && (j = "8,10");
-	let M, N, P, F, I, L, R, z;
-	if (a[0] !== O || a[1] !== E || a[2] !== d || a[3] !== h || a[4] !== x || a[5] !== c || a[6] !== b || a[7] !== m || a[8] !== u || a[9] !== i) {
-		let r = D();
-		a[18] !== h || a[19] !== x || a[20] !== c || a[21] !== b || a[22] !== u ? (N = b && /* @__PURE__ */ X("path", {
-			className: w("react-flow__edge-interaction", T({ fill: "none" })),
+	let w = S ? mt[S] : null, T = C ? mt[C] : null, E = g === "dotted", D = E || g === "dashed", O;
+	E ? O = "1,8" : D && (O = "8,10");
+	let k, M, N, P, F, I, L, R;
+	if (a[0] !== T || a[1] !== w || a[2] !== d || a[3] !== h || a[4] !== x || a[5] !== c || a[6] !== b || a[7] !== m || a[8] !== u || a[9] !== i) {
+		let r = z();
+		a[18] !== h || a[19] !== x || a[20] !== c || a[21] !== b || a[22] !== u ? (M = b && /* @__PURE__ */ Q("path", {
+			className: A("react-flow__edge-interaction", j({ fill: "none" })),
 			onPointerDown: c,
 			d: u,
 			style: {
@@ -1276,56 +1462,56 @@ var et = q((r, i) => {
 				strokeOpacity: 0,
 				...x ? { display: "none" } : {}
 			}
-		}), a[18] = h, a[19] = x, a[20] = c, a[21] = b, a[22] = u, a[23] = N) : N = a[23];
+		}), a[18] = h, a[19] = x, a[20] = c, a[21] = b, a[22] = u, a[23] = M) : M = a[23];
 		let o = `path("${u}")`, s;
-		a[24] === o ? s = a[25] : (s = { offsetPath: o }, a[24] = o, a[25] = s), P = /* @__PURE__ */ X("circle", {
-			className: w("likec4-edge-middle-point", r.middlePoint),
+		a[24] === o ? s = a[25] : (s = { offsetPath: o }, a[24] = o, a[25] = s), N = /* @__PURE__ */ Q("circle", {
+			className: A("likec4-edge-middle-point", r.middlePoint),
 			"data-edge-id": d,
 			style: s
-		}), L = r.markersCtx, R = c;
+		}), I = r.markersCtx, L = c;
 		let l;
-		a[26] !== E || a[27] !== d ? (l = E && /* @__PURE__ */ X(E, { id: "start" + d }), a[26] = E, a[27] = d, a[28] = l) : l = a[28];
+		a[26] !== w || a[27] !== d ? (l = w && /* @__PURE__ */ Q(w, { id: "start" + d }), a[26] = w, a[27] = d, a[28] = l) : l = a[28];
 		let f;
-		a[29] !== O || a[30] !== d ? (f = O && /* @__PURE__ */ X(O, { id: "end" + d }), a[29] = O, a[30] = d, a[31] = f) : f = a[31], a[32] !== l || a[33] !== f ? (z = /* @__PURE__ */ Z("defs", { children: [l, f] }), a[32] = l, a[33] = f, a[34] = z) : z = a[34], M = /* @__PURE__ */ X("path", {
-			className: w("react-flow__edge-path", "hide-on-reduced-graphics", r.pathBg, x && T({ display: "none" })),
+		a[29] !== T || a[30] !== d ? (f = T && /* @__PURE__ */ Q(T, { id: "end" + d }), a[29] = T, a[30] = d, a[31] = f) : f = a[31], a[32] !== l || a[33] !== f ? (R = /* @__PURE__ */ $("defs", { children: [l, f] }), a[32] = l, a[33] = f, a[34] = R) : R = a[34], k = /* @__PURE__ */ Q("path", {
+			className: A("react-flow__edge-path", "hide-on-reduced-graphics", r.pathBg, x && j({ display: "none" })),
 			d: u,
 			style: m,
 			strokeLinecap: "round"
-		}), F = i, I = w("react-flow__edge-path", r.path, b && "react-flow__edge-interaction"), a[0] = O, a[1] = E, a[2] = d, a[3] = h, a[4] = x, a[5] = c, a[6] = b, a[7] = m, a[8] = u, a[9] = i, a[10] = M, a[11] = N, a[12] = P, a[13] = F, a[14] = I, a[15] = L, a[16] = R, a[17] = z;
-	} else M = a[10], N = a[11], P = a[12], F = a[13], I = a[14], L = a[15], R = a[16], z = a[17];
-	let B = E ? `url(#start${d})` : void 0, ee = O ? `url(#end${d})` : void 0, V;
-	a[35] !== j || a[36] !== l || a[37] !== m || a[38] !== u || a[39] !== B || a[40] !== ee || a[41] !== F || a[42] !== I ? (V = /* @__PURE__ */ X("path", {
-		ref: F,
-		className: I,
+		}), P = i, F = A("react-flow__edge-path", r.path, b && "react-flow__edge-interaction"), a[0] = T, a[1] = w, a[2] = d, a[3] = h, a[4] = x, a[5] = c, a[6] = b, a[7] = m, a[8] = u, a[9] = i, a[10] = k, a[11] = M, a[12] = N, a[13] = P, a[14] = F, a[15] = I, a[16] = L, a[17] = R;
+	} else k = a[10], M = a[11], N = a[12], P = a[13], F = a[14], I = a[15], L = a[16], R = a[17];
+	let B = w ? `url(#start${d})` : void 0, V = T ? `url(#end${d})` : void 0, H;
+	a[35] !== O || a[36] !== l || a[37] !== m || a[38] !== u || a[39] !== B || a[40] !== V || a[41] !== P || a[42] !== F ? (H = /* @__PURE__ */ Q("path", {
+		ref: P,
+		className: F,
 		d: u,
 		style: m,
 		strokeWidth: l,
 		strokeLinecap: "round",
-		strokeDasharray: j,
+		strokeDasharray: O,
 		markerStart: B,
-		markerEnd: ee
-	}), a[35] = j, a[36] = l, a[37] = m, a[38] = u, a[39] = B, a[40] = ee, a[41] = F, a[42] = I, a[43] = V) : V = a[43];
-	let H;
-	a[44] !== M || a[45] !== V || a[46] !== L || a[47] !== R || a[48] !== z ? (H = /* @__PURE__ */ Z("g", {
-		className: L,
-		onPointerDown: R,
+		markerEnd: V
+	}), a[35] = O, a[36] = l, a[37] = m, a[38] = u, a[39] = B, a[40] = V, a[41] = P, a[42] = F, a[43] = H) : H = a[43];
+	let U;
+	a[44] !== k || a[45] !== H || a[46] !== I || a[47] !== L || a[48] !== R ? (U = /* @__PURE__ */ $("g", {
+		className: I,
+		onPointerDown: L,
 		children: [
-			z,
-			M,
-			V
+			R,
+			k,
+			H
 		]
-	}), a[44] = M, a[45] = V, a[46] = L, a[47] = R, a[48] = z, a[49] = H) : H = a[49];
-	let U;
-	return a[50] !== N || a[51] !== P || a[52] !== H ? (U = /* @__PURE__ */ Z(Y, { children: [
+	}), a[44] = k, a[45] = H, a[46] = I, a[47] = L, a[48] = R, a[49] = U) : U = a[49];
+	let W;
+	return a[50] !== M || a[51] !== N || a[52] !== U ? (W = /* @__PURE__ */ $(Z, { children: [
+		M,
 		N,
-		P,
-		H
-	] }), a[50] = N, a[51] = P, a[52] = H, a[53] = U) : U = a[53], U;
+		U
+	] }), a[50] = M, a[51] = N, a[52] = U, a[53] = W) : W = a[53], W;
 });
-et.displayName = "EdgePath";
+ht.displayName = "EdgePath";
 //#endregion
 //#region ../diagram/src/base-primitives/element/ElementActionButtons.tsx
-var tt = {
+var gt = {
 	normal: {
 		originY: 0,
 		opacity: .75,
@@ -1346,7 +1532,7 @@ var tt = {
 	}
 };
 function ElementActionButtons(r) {
-	let i = J(14), { selected: a, data: o, buttons: s } = r, c = a !== void 0 && a, { hovered: l } = o, u = l !== void 0 && l, d = g();
+	let i = X(14), { selected: a, data: o, buttons: s } = r, c = a !== void 0 && a, { hovered: l } = o, u = l !== void 0 && l, d = S();
 	if (!s.length) return null;
 	let f;
 	bb0: switch (!0) {
@@ -1359,15 +1545,15 @@ function ElementActionButtons(r) {
 		default: f = "normal";
 	}
 	let p = u || c, m;
-	i[0] === Symbol.for("react.memo_cache_sentinel") ? (m = A(), i[0] = m) : m = i[0];
-	let h = f, _ = `${u}-${c}`, v;
-	i[1] === Symbol.for("react.memo_cache_sentinel") ? (v = w("nodrag nopan"), i[1] = v) : v = i[1];
-	let b;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (m = P(), i[0] = m) : m = i[0];
+	let h = f, g = `${u}-${c}`, _;
+	i[1] === Symbol.for("react.memo_cache_sentinel") ? (_ = A("nodrag nopan"), i[1] = _) : _ = i[1];
+	let v;
 	if (i[2] !== s || i[3] !== d || i[4] !== p) {
 		let t9;
-		i[6] !== d || i[7] !== p ? (t9 = (r, i) => /* @__PURE__ */ X(y, {
-			component: oe,
-			className: k({}),
+		i[6] !== d || i[7] !== p ? (t9 = (r, i) => /* @__PURE__ */ Q(E, {
+			component: me,
+			className: H({}),
 			initial: !1,
 			whileTap: { scale: 1 },
 			whileHover: { scale: 1.3 },
@@ -1376,24 +1562,24 @@ function ElementActionButtons(r) {
 			"aria-label": r.ariaLabel ?? r.key ?? "Element action",
 			onClick: r.onClick,
 			onDoubleClick: stopPropagation,
-			children: r.icon || /* @__PURE__ */ X(we, {})
-		}, `${d}-${r.key ?? i}`), i[6] = d, i[7] = p, i[8] = t9) : t9 = i[8], b = s.map(t9), i[2] = s, i[3] = d, i[4] = p, i[5] = b;
-	} else b = i[5];
-	let x;
-	return i[9] !== u || i[10] !== _ || i[11] !== b || i[12] !== f ? (x = /* @__PURE__ */ X("div", {
+			children: r.icon || /* @__PURE__ */ Q(Me, {})
+		}, `${d}-${r.key ?? i}`), i[6] = d, i[7] = p, i[8] = t9) : t9 = i[8], v = s.map(t9), i[2] = s, i[3] = d, i[4] = p, i[5] = v;
+	} else v = i[5];
+	let y;
+	return i[9] !== u || i[10] !== g || i[11] !== v || i[12] !== f ? (y = /* @__PURE__ */ Q("div", {
 		className: m,
-		children: /* @__PURE__ */ X(G, {
+		children: /* @__PURE__ */ Q(he, {
 			layoutRoot: !0,
 			initial: !1,
-			variants: tt,
+			variants: gt,
 			animate: h,
-			layoutDependency: _,
+			layoutDependency: g,
 			"data-likec4-hovered": u,
-			className: v,
+			className: _,
 			onClick: stopPropagation,
-			children: b
+			children: v
 		})
-	}), i[9] = u, i[10] = _, i[11] = b, i[12] = f, i[13] = x) : x = i[13], x;
+	}), i[9] = u, i[10] = g, i[11] = v, i[12] = f, i[13] = y) : y = i[13], y;
 }
 //#endregion
 //#region ../diagram/src/base-primitives/element/ElementData.tsx
@@ -1406,15 +1592,15 @@ var resolveIconColor = (r, i) => {
 function shouldBlendIconWithPalette(r, i) {
 	return !i && r?.startsWith("bootstrap:") === !0;
 }
-var nt = q((r, i) => {
-	let a = J(29), o, s, c, l;
+var _t = q((r, i) => {
+	let a = X(29), o, s, c, l;
 	a[0] === r ? (o = a[1], s = a[2], c = a[3], l = a[4]) : ({className: o, style: l, data: s, ...c} = r, a[0] = r, a[1] = o, a[2] = s, a[3] = c, a[4] = l);
 	let u = useLikeC4Styles(), d;
 	a[5] !== s.style || a[6] !== u ? (d = s.style.iconSize ? u.nodeSizes(s.style).values.iconSize : void 0, a[5] = s.style, a[6] = u, a[7] = d) : d = a[7];
 	let f = d, p;
 	a[8] !== s || a[9] !== u ? (p = resolveIconColor(u, s), a[8] = s, a[9] = u, a[10] = p) : p = a[10];
 	let m = p, h = !!m, g;
-	a[11] !== o || a[12] !== s.icon || a[13] !== s.style.iconPosition || a[14] !== h ? (g = w(o, M({
+	a[11] !== o || a[12] !== s.icon || a[13] !== s.style.iconPosition || a[14] !== h ? (g = A(o, F({
 		iconPosition: s.style.iconPosition,
 		withIconColor: h,
 		withIconBlend: shouldBlendIconWithPalette(s.icon, h)
@@ -1430,68 +1616,68 @@ var nt = q((r, i) => {
 		...v
 	}, a[20] = l, a[21] = _, a[22] = v, a[23] = y) : y = a[23];
 	let b;
-	return a[24] !== c || a[25] !== i || a[26] !== g || a[27] !== y ? (b = /* @__PURE__ */ X("div", {
+	return a[24] !== c || a[25] !== i || a[26] !== g || a[27] !== y ? (b = /* @__PURE__ */ Q("div", {
 		...c,
 		ref: i,
 		className: g,
 		style: y
 	}), a[24] = c, a[25] = i, a[26] = g, a[27] = y, a[28] = b) : b = a[28], b;
 }), Icon = (r) => {
-	let i = J(6), a, o;
+	let i = X(6), a, o;
 	i[0] === r ? (a = i[1], o = i[2]) : ({data: a, ...o} = r, i[0] = r, i[1] = a, i[2] = o);
 	let s;
-	return i[3] !== a || i[4] !== o ? (s = /* @__PURE__ */ X(IconRenderer, {
+	return i[3] !== a || i[4] !== o ? (s = /* @__PURE__ */ Q(IconRenderer, {
 		element: a,
 		...o
 	}), i[3] = a, i[4] = o, i[5] = s) : s = i[5], s;
-}, rt = q((r, i) => {
-	let a = J(9), o, s;
+}, vt = q((r, i) => {
+	let a = X(9), o, s;
 	a[0] === r ? (o = a[1], s = a[2]) : ({className: o, ...s} = r, a[0] = r, a[1] = o, a[2] = s);
 	let c;
-	a[3] === o ? c = a[4] : (c = w(o, "likec4-element-node-content"), a[3] = o, a[4] = c);
+	a[3] === o ? c = a[4] : (c = A(o, "likec4-element-node-content"), a[3] = o, a[4] = c);
 	let l;
-	return a[5] !== s || a[6] !== i || a[7] !== c ? (l = /* @__PURE__ */ X("div", {
+	return a[5] !== s || a[6] !== i || a[7] !== c ? (l = /* @__PURE__ */ Q("div", {
 		...s,
 		className: c,
 		ref: i
 	}), a[5] = s, a[6] = i, a[7] = c, a[8] = l) : l = a[8], l;
-}), it = q((r, i) => {
-	let a = J(11), o, s, c;
+}), yt = q((r, i) => {
+	let a = X(11), o, s, c;
 	a[0] === r ? (o = a[1], s = a[2], c = a[3]) : ({data: c, className: o, ...s} = r, a[0] = r, a[1] = o, a[2] = s, a[3] = c);
 	let { title: l } = c, u;
-	a[4] === o ? u = a[5] : (u = w(o, "likec4-element-title"), a[4] = o, a[5] = u);
+	a[4] === o ? u = a[5] : (u = A(o, "likec4-element-title"), a[4] = o, a[5] = u);
 	let d;
-	return a[6] !== s || a[7] !== i || a[8] !== u || a[9] !== l ? (d = /* @__PURE__ */ X("div", {
+	return a[6] !== s || a[7] !== i || a[8] !== u || a[9] !== l ? (d = /* @__PURE__ */ Q("div", {
 		...s,
 		className: u,
 		"data-likec4-node-title": "",
 		ref: i,
 		children: l
 	}), a[6] = s, a[7] = i, a[8] = u, a[9] = l, a[10] = d) : d = a[10], d;
-}), at = q((r, i) => {
-	let a = J(10), o, s, c, l;
+}), bt = q((r, i) => {
+	let a = X(10), o, s, c, l;
 	a[0] === r ? (o = a[1], s = a[2], c = a[3], l = a[4]) : ({data: c, children: o, className: s, ...l} = r, a[0] = r, a[1] = o, a[2] = s, a[3] = c, a[4] = l);
 	let u = c?.technology ?? o, d;
-	return a[5] !== s || a[6] !== l || a[7] !== i || a[8] !== u ? (d = e(u) ? /* @__PURE__ */ X("div", {
+	return a[5] !== s || a[6] !== l || a[7] !== i || a[8] !== u ? (d = e(u) ? /* @__PURE__ */ Q("div", {
 		...l,
-		className: w(s, "likec4-element-technology"),
+		className: A(s, "likec4-element-technology"),
 		"data-likec4-node-technology": "",
 		ref: i,
 		children: u
 	}) : null, a[5] = s, a[6] = l, a[7] = i, a[8] = u, a[9] = d) : d = a[9], d;
-}), ot = q((r, i) => {
-	let a = J(16), o, s, c;
+}), xt = q((r, i) => {
+	let a = X(16), o, s, c;
 	a[0] === r ? (o = a[1], s = a[2], c = a[3]) : ({data: c, className: o, ...s} = r, a[0] = r, a[1] = o, a[2] = s, a[3] = c);
 	let { description: u } = c;
 	if (!u) return null;
 	let d;
-	a[4] === u ? d = a[5] : (d = ye.from(u), a[4] = u, a[5] = d);
+	a[4] === u ? d = a[5] : (d = De.from(u), a[4] = u, a[5] = d);
 	let f = d, p;
-	a[6] === o ? p = a[7] : (p = w(o, "likec4-element-description"), a[6] = o, a[7] = p);
+	a[6] === o ? p = a[7] : (p = A(o, "likec4-element-description"), a[6] = o, a[7] = p);
 	let m = f.isMarkdown ? "8rem" : void 0, h;
 	a[8] === m ? h = a[9] : (h = { maxHeight: m }, a[8] = m, a[9] = h);
 	let g;
-	return a[10] !== f || a[11] !== s || a[12] !== i || a[13] !== p || a[14] !== h ? (g = /* @__PURE__ */ X(l, {
+	return a[10] !== f || a[11] !== s || a[12] !== i || a[13] !== p || a[14] !== h ? (g = /* @__PURE__ */ Q(l, {
 		...s,
 		className: p,
 		"data-likec4-node-description": "",
@@ -1503,31 +1689,31 @@ var nt = q((r, i) => {
 	}), a[10] = f, a[11] = s, a[12] = i, a[13] = p, a[14] = h, a[15] = g) : g = a[15], g;
 });
 function ElementData(r) {
-	let i = J(9), { data: a, "aria-hidden": o } = r, s;
-	i[0] === a ? s = i[1] : (s = /* @__PURE__ */ X(Icon, { data: a }), i[0] = a, i[1] = s);
+	let i = X(9), { data: a, "aria-hidden": o } = r, s;
+	i[0] === a ? s = i[1] : (s = /* @__PURE__ */ Q(Icon, { data: a }), i[0] = a, i[1] = s);
 	let c;
-	i[2] === a ? c = i[3] : (c = /* @__PURE__ */ Z(rt, { children: [
-		/* @__PURE__ */ X(it, { data: a }),
-		/* @__PURE__ */ X(at, { data: a }),
-		/* @__PURE__ */ X(ot, { data: a })
+	i[2] === a ? c = i[3] : (c = /* @__PURE__ */ $(vt, { children: [
+		/* @__PURE__ */ Q(yt, { data: a }),
+		/* @__PURE__ */ Q(bt, { data: a }),
+		/* @__PURE__ */ Q(xt, { data: a })
 	] }), i[2] = a, i[3] = c);
 	let l;
-	return i[4] !== o || i[5] !== a || i[6] !== s || i[7] !== c ? (l = /* @__PURE__ */ Z(nt, {
+	return i[4] !== o || i[5] !== a || i[6] !== s || i[7] !== c ? (l = /* @__PURE__ */ $(_t, {
 		data: a,
 		"aria-hidden": o,
 		children: [s, c]
 	}), i[4] = o, i[5] = a, i[6] = s, i[7] = c, i[8] = l) : l = i[8], l;
 }
-ElementData.Root = nt, ElementData.Icon = Icon, ElementData.Content = rt, ElementData.Title = it, ElementData.Technology = at, ElementData.Description = ot;
+ElementData.Root = _t, ElementData.Icon = Icon, ElementData.Content = vt, ElementData.Title = yt, ElementData.Technology = bt, ElementData.Description = xt;
 //#endregion
 //#region ../diagram/src/base-primitives/element/ElementNodeContainer.tsx
-var st = {
+var St = {
 	normal: { scale: 1 },
 	hovered: { scale: 1.05 },
 	selected: { scale: 1.02 },
 	tap: { scale: .98 }
-}, ct = q((r, i) => {
-	let a = J(34), o, s, c, l, u;
+}, Ct = q((r, i) => {
+	let a = X(34), o, s, c, l, u;
 	a[0] === r ? (o = a[1], s = a[2], c = a[3], l = a[4], u = a[5]) : ({nodeProps: u, className: s, style: l, children: o, ...c} = r, a[0] = r, a[1] = o, a[2] = s, a[3] = c, a[4] = l, a[5] = u);
 	let { selected: d, selectable: f, data: p } = u, m = d !== void 0 && d, h = f !== void 0 && f, g, _, v, y, b;
 	if (a[6] !== m || a[7] !== p) {
@@ -1542,38 +1728,38 @@ var st = {
 				break bb0;
 			default: b = "normal";
 		}
-		y = be(g.style ?? {}), a[6] = m, a[7] = p, a[8] = g, a[9] = _, a[10] = v, a[11] = y, a[12] = b;
+		y = Oe(g.style ?? {}), a[6] = m, a[7] = p, a[8] = g, a[9] = _, a[10] = v, a[11] = y, a[12] = b;
 	} else g = a[8], _ = a[9], v = a[10], y = a[11], b = a[12];
-	let { size: x, padding: S, textSize: C } = y, T;
-	a[13] === s ? T = a[14] : (T = w(P(), "group", s), a[13] = s, a[14] = T);
-	let E;
-	a[15] !== h || a[16] !== b ? (E = h && {
+	let { size: x, padding: S, textSize: C } = y, w;
+	a[13] === s ? w = a[14] : (w = A(I(), "group", s), a[13] = s, a[14] = w);
+	let T;
+	a[15] !== h || a[16] !== b ? (T = h && {
 		animate: b,
 		whileTap: "tap"
-	}, a[15] = h, a[16] = b, a[17] = E) : E = a[17];
-	let D;
-	a[18] === _ ? D = a[19] : (D = _ !== !1 && { "data-likec4-dimmed": _ }, a[18] = _, a[19] = D);
-	let O = l, k;
-	return a[20] !== o || a[21] !== g.color || a[22] !== g.shape || a[23] !== v || a[24] !== S || a[25] !== i || a[26] !== c || a[27] !== x || a[28] !== T || a[29] !== E || a[30] !== D || a[31] !== O || a[32] !== C ? (k = /* @__PURE__ */ X(G, {
+	}, a[15] = h, a[16] = b, a[17] = T) : T = a[17];
+	let E;
+	a[18] === _ ? E = a[19] : (E = _ !== !1 && { "data-likec4-dimmed": _ }, a[18] = _, a[19] = E);
+	let D = l, O;
+	return a[20] !== o || a[21] !== g.color || a[22] !== g.shape || a[23] !== v || a[24] !== S || a[25] !== i || a[26] !== c || a[27] !== x || a[28] !== w || a[29] !== T || a[30] !== E || a[31] !== D || a[32] !== C ? (O = /* @__PURE__ */ Q(he, {
 		ref: i,
-		className: T,
-		variants: st,
+		className: w,
+		variants: St,
 		initial: !1,
-		...E,
+		...T,
 		"data-likec4-hovered": v,
 		"data-likec4-color": g.color,
 		"data-likec4-shape": g.shape,
 		"data-likec4-shape-size": x,
 		"data-likec4-spacing": S,
 		"data-likec4-text-size": C,
-		...D,
-		style: O,
+		...E,
+		style: D,
 		tabIndex: -1,
 		...c,
 		children: o
-	}), a[20] = o, a[21] = g.color, a[22] = g.shape, a[23] = v, a[24] = S, a[25] = i, a[26] = c, a[27] = x, a[28] = T, a[29] = E, a[30] = D, a[31] = O, a[32] = C, a[33] = k) : k = a[33], k;
+	}), a[20] = o, a[21] = g.color, a[22] = g.shape, a[23] = v, a[24] = S, a[25] = i, a[26] = c, a[27] = x, a[28] = w, a[29] = T, a[30] = E, a[31] = D, a[32] = C, a[33] = O) : O = a[33], O;
 });
-ct.displayName = "ElementNodeContainer";
+Ct.displayName = "ElementNodeContainer";
 //#endregion
 //#region ../diagram/src/base-primitives/element/ElementShape.tsx
 function cylinderSVGPath(r, i, a = .07) {
@@ -1631,12 +1817,12 @@ function queueSVGPath(r, i, a = .185) {
 		rx: c
 	};
 }
-var lt = {
+var wt = {
 	width: 115,
 	height: 120,
 	path: "M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z"
 }, ComponentTopLeftRect = (r) => {
-	let i = J(5), { index: a, size: o } = r, s, c, l, u, d;
+	let i = X(5), { index: a, size: o } = r, s, c, l, u, d;
 	bb0: switch (o) {
 		case "xs":
 		case "sm":
@@ -1649,10 +1835,10 @@ var lt = {
 		case "xl":
 			s = 70, c = 32, l = -24, u = 32, d = 18;
 			break bb0;
-		default: he(o);
+		default: Se(o);
 	}
 	let f = u + (c + d) * a, p;
-	return i[0] !== c || i[1] !== l || i[2] !== f || i[3] !== s ? (p = /* @__PURE__ */ X("rect", {
+	return i[0] !== c || i[1] !== l || i[2] !== f || i[3] !== s ? (p = /* @__PURE__ */ Q("rect", {
 		x: l,
 		y: f,
 		width: s,
@@ -1663,26 +1849,26 @@ var lt = {
 	}), i[0] = c, i[1] = l, i[2] = f, i[3] = s, i[4] = p) : p = i[4], p;
 };
 function ShapeSvg(r) {
-	let i = J(94), { shape: a, w: o, h: s, size: c } = r, l = c === void 0 ? "md" : c;
+	let i = X(94), { shape: a, w: o, h: s, size: c } = r, l = c === void 0 ? "md" : c;
 	switch (a) {
 		case "component": {
 			let r;
-			i[0] !== s || i[1] !== o ? (r = /* @__PURE__ */ X("rect", {
+			i[0] !== s || i[1] !== o ? (r = /* @__PURE__ */ Q("rect", {
 				width: o,
 				height: s,
 				rx: 6,
 				strokeWidth: 0
 			}), i[0] = s, i[1] = o, i[2] = r) : r = i[2];
 			let a, c;
-			i[3] === l ? (a = i[4], c = i[5]) : (a = /* @__PURE__ */ X(ComponentTopLeftRect, {
+			i[3] === l ? (a = i[4], c = i[5]) : (a = /* @__PURE__ */ Q(ComponentTopLeftRect, {
 				index: 0,
 				size: l
-			}), c = /* @__PURE__ */ X(ComponentTopLeftRect, {
+			}), c = /* @__PURE__ */ Q(ComponentTopLeftRect, {
 				index: 1,
 				size: l
 			}), i[3] = l, i[4] = a, i[5] = c);
 			let u;
-			return i[6] !== r || i[7] !== a || i[8] !== c ? (u = /* @__PURE__ */ Z(Y, { children: [
+			return i[6] !== r || i[7] !== a || i[8] !== c ? (u = /* @__PURE__ */ $(Z, { children: [
 				r,
 				a,
 				c
@@ -1690,7 +1876,7 @@ function ShapeSvg(r) {
 		}
 		case "mobile": {
 			let r;
-			i[10] !== s || i[11] !== o ? (r = /* @__PURE__ */ X("rect", {
+			i[10] !== s || i[11] !== o ? (r = /* @__PURE__ */ Q("rect", {
 				width: o,
 				height: s,
 				rx: 6,
@@ -1698,13 +1884,13 @@ function ShapeSvg(r) {
 				strokeWidth: 0
 			}), i[10] = s, i[11] = o, i[12] = r) : r = i[12];
 			let a = s / 2, c;
-			i[13] === a ? c = i[14] : (c = /* @__PURE__ */ X("circle", {
+			i[13] === a ? c = i[14] : (c = /* @__PURE__ */ Q("circle", {
 				cx: 17,
 				cy: a,
 				r: 12
 			}), i[13] = a, i[14] = c);
 			let l = o - 44, u = s - 24, d;
-			i[15] !== l || i[16] !== u ? (d = /* @__PURE__ */ X("rect", {
+			i[15] !== l || i[16] !== u ? (d = /* @__PURE__ */ Q("rect", {
 				x: 33,
 				y: 12,
 				width: l,
@@ -1712,19 +1898,19 @@ function ShapeSvg(r) {
 				rx: 5
 			}), i[15] = l, i[16] = u, i[17] = d) : d = i[17];
 			let f;
-			i[18] !== c || i[19] !== d ? (f = /* @__PURE__ */ Z("g", {
+			i[18] !== c || i[19] !== d ? (f = /* @__PURE__ */ $("g", {
 				"data-likec4-fill": "fill",
 				strokeWidth: 0,
 				children: [c, d]
 			}), i[18] = c, i[19] = d, i[20] = f) : f = i[20];
 			let p;
-			return i[21] !== r || i[22] !== f ? (p = /* @__PURE__ */ Z(Y, { children: [r, f] }), i[21] = r, i[22] = f, i[23] = p) : p = i[23], p;
+			return i[21] !== r || i[22] !== f ? (p = /* @__PURE__ */ $(Z, { children: [r, f] }), i[21] = r, i[22] = f, i[23] = p) : p = i[23], p;
 		}
 		case "document": {
 			let r;
 			i[24] !== s || i[25] !== o ? (r = docSVGPath(o, s), i[24] = s, i[25] = o, i[26] = r) : r = i[26];
 			let { path: a } = r, c;
-			return i[27] === a ? c = i[28] : (c = /* @__PURE__ */ X("path", {
+			return i[27] === a ? c = i[28] : (c = /* @__PURE__ */ Q("path", {
 				d: a,
 				"data-likec4-fill": "fill",
 				strokeWidth: 2
@@ -1732,7 +1918,7 @@ function ShapeSvg(r) {
 		}
 		case "browser": {
 			let r;
-			i[29] !== s || i[30] !== o ? (r = /* @__PURE__ */ X("rect", {
+			i[29] !== s || i[30] !== o ? (r = /* @__PURE__ */ Q("rect", {
 				width: o,
 				height: s,
 				rx: 6,
@@ -1740,21 +1926,21 @@ function ShapeSvg(r) {
 				strokeWidth: 0
 			}), i[29] = s, i[30] = o, i[31] = r) : r = i[31];
 			let a, c, l;
-			i[32] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ X("circle", {
+			i[32] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ Q("circle", {
 				cx: 16,
 				cy: 17,
 				r: 7
-			}), c = /* @__PURE__ */ X("circle", {
+			}), c = /* @__PURE__ */ Q("circle", {
 				cx: 36,
 				cy: 17,
 				r: 7
-			}), l = /* @__PURE__ */ X("circle", {
+			}), l = /* @__PURE__ */ Q("circle", {
 				cx: 56,
 				cy: 17,
 				r: 7
 			}), i[32] = a, i[33] = c, i[34] = l) : (a = i[32], c = i[33], l = i[34]);
 			let u = o - 80, d;
-			i[35] === u ? d = i[36] : (d = /* @__PURE__ */ X("rect", {
+			i[35] === u ? d = i[36] : (d = /* @__PURE__ */ Q("rect", {
 				x: 70,
 				y: 8,
 				width: u,
@@ -1762,7 +1948,7 @@ function ShapeSvg(r) {
 				rx: 4
 			}), i[35] = u, i[36] = d);
 			let f = o - 20, p = s - 42, m;
-			i[37] !== f || i[38] !== p ? (m = /* @__PURE__ */ X("rect", {
+			i[37] !== f || i[38] !== p ? (m = /* @__PURE__ */ Q("rect", {
 				x: 10,
 				y: 32,
 				width: f,
@@ -1770,7 +1956,7 @@ function ShapeSvg(r) {
 				rx: 4
 			}), i[37] = f, i[38] = p, i[39] = m) : m = i[39];
 			let h;
-			i[40] !== m || i[41] !== d ? (h = /* @__PURE__ */ Z("g", {
+			i[40] !== m || i[41] !== d ? (h = /* @__PURE__ */ $("g", {
 				"data-likec4-fill": "fill",
 				strokeWidth: 0,
 				children: [
@@ -1782,44 +1968,44 @@ function ShapeSvg(r) {
 				]
 			}), i[40] = m, i[41] = d, i[42] = h) : h = i[42];
 			let g;
-			return i[43] !== h || i[44] !== r ? (g = /* @__PURE__ */ Z(Y, { children: [r, h] }), i[43] = h, i[44] = r, i[45] = g) : g = i[45], g;
+			return i[43] !== h || i[44] !== r ? (g = /* @__PURE__ */ $(Z, { children: [r, h] }), i[43] = h, i[44] = r, i[45] = g) : g = i[45], g;
 		}
 		case "person": {
 			let r;
-			i[46] !== s || i[47] !== o ? (r = /* @__PURE__ */ X("rect", {
+			i[46] !== s || i[47] !== o ? (r = /* @__PURE__ */ Q("rect", {
 				width: o,
 				height: s,
 				rx: 6,
 				strokeWidth: 0
 			}), i[46] = s, i[47] = o, i[48] = r) : r = i[48];
-			let a = o - lt.width - 6, c = s - lt.height, l;
-			i[49] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ X("path", {
+			let a = o - wt.width - 6, c = s - wt.height, l;
+			i[49] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ Q("path", {
 				strokeWidth: 0,
-				d: lt.path
+				d: wt.path
 			}), i[49] = l) : l = i[49];
 			let u;
-			i[50] !== a || i[51] !== c ? (u = /* @__PURE__ */ X("svg", {
+			i[50] !== a || i[51] !== c ? (u = /* @__PURE__ */ Q("svg", {
 				x: a,
 				y: c,
-				width: lt.width,
-				height: lt.height,
-				viewBox: `0 0 ${lt.width} ${lt.height}`,
+				width: wt.width,
+				height: wt.height,
+				viewBox: `0 0 ${wt.width} ${wt.height}`,
 				"data-likec4-fill": "mix-stroke",
 				children: l
 			}), i[50] = a, i[51] = c, i[52] = u) : u = i[52];
 			let d;
-			return i[53] !== r || i[54] !== u ? (d = /* @__PURE__ */ Z(Y, { children: [r, u] }), i[53] = r, i[54] = u, i[55] = d) : d = i[55], d;
+			return i[53] !== r || i[54] !== u ? (d = /* @__PURE__ */ $(Z, { children: [r, u] }), i[53] = r, i[54] = u, i[55] = d) : d = i[55], d;
 		}
 		case "queue": {
 			let r;
 			i[56] !== s || i[57] !== o ? (r = queueSVGPath(o, s), i[56] = s, i[57] = o, i[58] = r) : r = i[58];
 			let { path: a, rx: c, ry: l } = r, u;
-			i[59] === a ? u = i[60] : (u = /* @__PURE__ */ X("path", {
+			i[59] === a ? u = i[60] : (u = /* @__PURE__ */ Q("path", {
 				d: a,
 				strokeWidth: 2
 			}), i[59] = a, i[60] = u);
 			let d = l - .75, f;
-			i[61] !== c || i[62] !== l || i[63] !== d ? (f = /* @__PURE__ */ X("ellipse", {
+			i[61] !== c || i[62] !== l || i[63] !== d ? (f = /* @__PURE__ */ Q("ellipse", {
 				cx: c,
 				cy: l,
 				ry: d,
@@ -1828,18 +2014,18 @@ function ShapeSvg(r) {
 				strokeWidth: 2
 			}), i[61] = c, i[62] = l, i[63] = d, i[64] = f) : f = i[64];
 			let p;
-			return i[65] !== u || i[66] !== f ? (p = /* @__PURE__ */ Z(Y, { children: [u, f] }), i[65] = u, i[66] = f, i[67] = p) : p = i[67], p;
+			return i[65] !== u || i[66] !== f ? (p = /* @__PURE__ */ $(Z, { children: [u, f] }), i[65] = u, i[66] = f, i[67] = p) : p = i[67], p;
 		}
 		case "bucket": {
 			let r;
 			i[68] !== s || i[69] !== o ? (r = bucketSVGPath(o, s), i[68] = s, i[69] = o, i[70] = r) : r = i[70];
 			let { path: a, topRx: c, topRy: l } = r, u;
-			i[71] === a ? u = i[72] : (u = /* @__PURE__ */ X("path", {
+			i[71] === a ? u = i[72] : (u = /* @__PURE__ */ Q("path", {
 				d: a,
 				strokeWidth: 2
 			}), i[71] = a, i[72] = u);
 			let d = o / 2, f;
-			i[73] !== d || i[74] !== c || i[75] !== l ? (f = /* @__PURE__ */ X("ellipse", {
+			i[73] !== d || i[74] !== c || i[75] !== l ? (f = /* @__PURE__ */ Q("ellipse", {
 				cx: d,
 				cy: l,
 				rx: c,
@@ -1848,19 +2034,19 @@ function ShapeSvg(r) {
 				strokeWidth: 2
 			}), i[73] = d, i[74] = c, i[75] = l, i[76] = f) : f = i[76];
 			let p;
-			return i[77] !== u || i[78] !== f ? (p = /* @__PURE__ */ Z(Y, { children: [u, f] }), i[77] = u, i[78] = f, i[79] = p) : p = i[79], p;
+			return i[77] !== u || i[78] !== f ? (p = /* @__PURE__ */ $(Z, { children: [u, f] }), i[77] = u, i[78] = f, i[79] = p) : p = i[79], p;
 		}
 		case "storage":
 		case "cylinder": {
 			let r;
 			i[80] !== s || i[81] !== o ? (r = cylinderSVGPath(o, s), i[80] = s, i[81] = o, i[82] = r) : r = i[82];
 			let { path: a, rx: c, ry: l } = r, u;
-			i[83] === a ? u = i[84] : (u = /* @__PURE__ */ X("path", {
+			i[83] === a ? u = i[84] : (u = /* @__PURE__ */ Q("path", {
 				d: a,
 				strokeWidth: 2
 			}), i[83] = a, i[84] = u);
 			let d = c - .75, f;
-			i[85] !== c || i[86] !== l || i[87] !== d ? (f = /* @__PURE__ */ X("ellipse", {
+			i[85] !== c || i[86] !== l || i[87] !== d ? (f = /* @__PURE__ */ Q("ellipse", {
 				cx: c,
 				cy: l,
 				ry: l,
@@ -1869,24 +2055,24 @@ function ShapeSvg(r) {
 				strokeWidth: 2
 			}), i[85] = c, i[86] = l, i[87] = d, i[88] = f) : f = i[88];
 			let p;
-			return i[89] !== u || i[90] !== f ? (p = /* @__PURE__ */ Z(Y, { children: [u, f] }), i[89] = u, i[90] = f, i[91] = p) : p = i[91], p;
+			return i[89] !== u || i[90] !== f ? (p = /* @__PURE__ */ $(Z, { children: [u, f] }), i[89] = u, i[90] = f, i[91] = p) : p = i[91], p;
 		}
 		default: {
 			let r;
-			return i[92] === a ? r = i[93] : (r = he(a), i[92] = a, i[93] = r), r;
+			return i[92] === a ? r = i[93] : (r = Se(a), i[92] = a, i[93] = r), r;
 		}
 	}
 }
 function ShapeSvgOutline(r) {
-	let i = J(25), { shape: a, w: o, h: s } = r, c;
+	let i = X(25), { shape: a, w: o, h: s } = r, c;
 	bb0: switch (a) {
 		case "bucket": {
 			let r = o + 6, a = s + 6, l;
 			i[0] !== r || i[1] !== a ? (l = bucketSVGPath(r, a), i[0] = r, i[1] = a, i[2] = l) : l = i[2];
 			let u;
-			i[3] === l.path ? u = i[4] : (u = /* @__PURE__ */ X("g", {
+			i[3] === l.path ? u = i[4] : (u = /* @__PURE__ */ Q("g", {
 				transform: "translate(-3 -3)",
-				children: /* @__PURE__ */ X("path", { d: l.path })
+				children: /* @__PURE__ */ Q("path", { d: l.path })
 			}), i[3] = l.path, i[4] = u), c = u;
 			break bb0;
 		}
@@ -1894,9 +2080,9 @@ function ShapeSvgOutline(r) {
 			let r = o + 6, a = s + 6, l;
 			i[5] !== r || i[6] !== a ? (l = queueSVGPath(r, a), i[5] = r, i[6] = a, i[7] = l) : l = i[7];
 			let u;
-			i[8] === l.path ? u = i[9] : (u = /* @__PURE__ */ X("g", {
+			i[8] === l.path ? u = i[9] : (u = /* @__PURE__ */ Q("g", {
 				transform: "translate(-3 -3)",
-				children: /* @__PURE__ */ X("path", { d: l.path })
+				children: /* @__PURE__ */ Q("path", { d: l.path })
 			}), i[8] = l.path, i[9] = u), c = u;
 			break bb0;
 		}
@@ -1904,9 +2090,9 @@ function ShapeSvgOutline(r) {
 			let r = o + 6, a = s + 6, l;
 			i[10] !== r || i[11] !== a ? (l = docSVGPath(r, a), i[10] = r, i[11] = a, i[12] = l) : l = i[12];
 			let u;
-			i[13] === l.path ? u = i[14] : (u = /* @__PURE__ */ X("g", {
+			i[13] === l.path ? u = i[14] : (u = /* @__PURE__ */ Q("g", {
 				transform: "translate(-3 -3)",
-				children: /* @__PURE__ */ X("path", { d: l.path })
+				children: /* @__PURE__ */ Q("path", { d: l.path })
 			}), i[13] = l.path, i[14] = u), c = u;
 			break bb0;
 		}
@@ -1915,15 +2101,15 @@ function ShapeSvgOutline(r) {
 			let r = o + 6, a = s + 6, l;
 			i[15] !== r || i[16] !== a ? (l = cylinderSVGPath(r, a), i[15] = r, i[16] = a, i[17] = l) : l = i[17];
 			let u;
-			i[18] === l.path ? u = i[19] : (u = /* @__PURE__ */ X("g", {
+			i[18] === l.path ? u = i[19] : (u = /* @__PURE__ */ Q("g", {
 				transform: "translate(-3 -3)",
-				children: /* @__PURE__ */ X("path", { d: l.path })
+				children: /* @__PURE__ */ Q("path", { d: l.path })
 			}), i[18] = l.path, i[19] = u), c = u;
 			break bb0;
 		}
 		default: {
 			let r = o + 6, a = s + 6, l;
-			i[20] !== r || i[21] !== a ? (l = /* @__PURE__ */ X("rect", {
+			i[20] !== r || i[21] !== a ? (l = /* @__PURE__ */ Q("rect", {
 				x: -3,
 				y: -3,
 				width: r,
@@ -1933,28 +2119,28 @@ function ShapeSvgOutline(r) {
 		}
 	}
 	let l;
-	return i[23] === c ? l = i[24] : (l = /* @__PURE__ */ X("g", {
+	return i[23] === c ? l = i[24] : (l = /* @__PURE__ */ Q("g", {
 		className: "likec4-shape-outline",
 		children: c
 	}), i[23] = c, i[24] = l), l;
 }
 function ElementShape(r) {
-	let i = J(38), { data: a, width: o, height: s, showSelectionOutline: c } = r, l = c === void 0 || c, u = o && o > 10 ? o : a.width, d = s && s > 10 ? s : a.height, f = a.style?.multiple ?? !1, p = a.style?.border ?? "none", m = p !== "none";
+	let i = X(38), { data: a, width: o, height: s, showSelectionOutline: c } = r, l = c === void 0 || c, u = o && o > 10 ? o : a.width, d = s && s > 10 ? s : a.height, f = a.style?.multiple ?? !1, p = a.style?.border ?? "none", m = p !== "none";
 	if (a.shape === "rectangle") {
 		let r;
 		i[0] === p ? r = i[1] : (r = { borderStyle: p }, i[0] = p, i[1] = r);
 		let a;
-		i[2] !== l || i[3] !== m ? (a = E({
+		i[2] !== l || i[3] !== m ? (a = V({
 			shapetype: "html",
 			withBorder: m,
 			withOutline: l
 		}), i[2] = l, i[3] = m, i[4] = a) : a = i[4];
 		let o;
-		i[5] === f ? o = i[6] : (o = f && /* @__PURE__ */ X("div", { className: "likec4-shape-multiple" }), i[5] = f, i[6] = o);
+		i[5] === f ? o = i[6] : (o = f && /* @__PURE__ */ Q("div", { className: "likec4-shape-multiple" }), i[5] = f, i[6] = o);
 		let s;
-		i[7] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ X("div", { className: "likec4-shape-outline" }), i[7] = s) : s = i[7];
+		i[7] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ Q("div", { className: "likec4-shape-outline" }), i[7] = s) : s = i[7];
 		let c;
-		return i[8] !== r || i[9] !== a || i[10] !== o ? (c = /* @__PURE__ */ Z("div", {
+		return i[8] !== r || i[9] !== a || i[10] !== o ? (c = /* @__PURE__ */ $("div", {
 			"aria-hidden": !0,
 			style: r,
 			className: a,
@@ -1962,17 +2148,17 @@ function ElementShape(r) {
 		}), i[8] = r, i[9] = a, i[10] = o, i[11] = c) : c = i[11], c;
 	}
 	let h;
-	i[12] === l ? h = i[13] : (h = E({
+	i[12] === l ? h = i[13] : (h = V({
 		shapetype: "svg",
 		withOutline: l
 	}), i[12] = l, i[13] = h);
 	let g = h, _;
-	i[14] !== g || i[15] !== a.shape || i[16] !== a.style?.size || i[17] !== d || i[18] !== f || i[19] !== u ? (_ = f && /* @__PURE__ */ X("svg", {
+	i[14] !== g || i[15] !== a.shape || i[16] !== a.style?.size || i[17] !== d || i[18] !== f || i[19] !== u ? (_ = f && /* @__PURE__ */ Q("svg", {
 		"aria-hidden": !0,
 		className: g,
 		"data-likec4-shape-multiple": "true",
 		viewBox: `0 0 ${u} ${d}`,
-		children: /* @__PURE__ */ X(ShapeSvg, {
+		children: /* @__PURE__ */ Q(ShapeSvg, {
 			shape: a.shape,
 			size: a.style?.size,
 			w: u,
@@ -1980,128 +2166,92 @@ function ElementShape(r) {
 		})
 	}), i[14] = g, i[15] = a.shape, i[16] = a.style?.size, i[17] = d, i[18] = f, i[19] = u, i[20] = _) : _ = i[20];
 	let v = `0 0 ${u} ${d}`, y;
-	i[21] !== a.shape || i[22] !== d || i[23] !== u ? (y = /* @__PURE__ */ X(ShapeSvgOutline, {
+	i[21] !== a.shape || i[22] !== d || i[23] !== u ? (y = /* @__PURE__ */ Q(ShapeSvgOutline, {
 		shape: a.shape,
 		w: u,
 		h: d
 	}), i[21] = a.shape, i[22] = d, i[23] = u, i[24] = y) : y = i[24];
 	let b = a.style?.size, x;
-	i[25] !== a.shape || i[26] !== d || i[27] !== b || i[28] !== u ? (x = /* @__PURE__ */ X(ShapeSvg, {
+	i[25] !== a.shape || i[26] !== d || i[27] !== b || i[28] !== u ? (x = /* @__PURE__ */ Q(ShapeSvg, {
 		shape: a.shape,
 		size: b,
 		w: u,
 		h: d
 	}), i[25] = a.shape, i[26] = d, i[27] = b, i[28] = u, i[29] = x) : x = i[29];
 	let S;
-	i[30] !== g || i[31] !== v || i[32] !== y || i[33] !== x ? (S = /* @__PURE__ */ Z("svg", {
+	i[30] !== g || i[31] !== v || i[32] !== y || i[33] !== x ? (S = /* @__PURE__ */ $("svg", {
 		"aria-hidden": !0,
 		className: g,
 		viewBox: v,
 		children: [y, x]
 	}), i[30] = g, i[31] = v, i[32] = y, i[33] = x, i[34] = S) : S = i[34];
 	let C;
-	return i[35] !== _ || i[36] !== S ? (C = /* @__PURE__ */ Z(Y, { children: [_, S] }), i[35] = _, i[36] = S, i[37] = C) : C = i[37], C;
+	return i[35] !== _ || i[36] !== S ? (C = /* @__PURE__ */ $(Z, { children: [_, S] }), i[35] = _, i[36] = S, i[37] = C) : C = i[37], C;
 }
 //#endregion
 //#region ../diagram/src/base-primitives/memoEdge.ts
-var isSame = (r, i) => Math.abs(r - i) < 2.5, edgePropsEqual = (r, i) => r.id === i.id && W(r.selected ?? !1, i.selected ?? !1) && W(r.animated ?? !1, i.animated ?? !1) && W(r.source, i.source) && W(r.target, i.target) && isSame(r.sourceX, i.sourceX) && isSame(r.sourceY, i.sourceY) && isSame(r.targetX, i.targetX) && isSame(r.targetY, i.targetY) && W(r.sourceHandleId ?? null, i.sourceHandleId ?? null) && W(r.targetHandleId ?? null, i.targetHandleId ?? null) && W(r.sourcePosition, i.sourcePosition) && W(r.targetPosition, i.targetPosition) && W(r.data, i.data);
+var isSame = (r, i) => Math.abs(r - i) < 2.5, edgePropsEqual = (r, i) => r.id === i.id && G(r.selected ?? !1, i.selected ?? !1) && G(r.animated ?? !1, i.animated ?? !1) && G(r.source, i.source) && G(r.target, i.target) && isSame(r.sourceX, i.sourceX) && isSame(r.sourceY, i.sourceY) && isSame(r.targetX, i.targetX) && isSame(r.targetY, i.targetY) && G(r.sourceHandleId ?? null, i.sourceHandleId ?? null) && G(r.targetHandleId ?? null, i.targetHandleId ?? null) && G(r.sourcePosition, i.sourcePosition) && G(r.targetPosition, i.targetPosition) && G(r.data, i.data);
 function memoEdge(r) {
-	let i = ce(r, edgePropsEqual);
+	let i = J(r, edgePropsEqual);
 	return i.displayName = `MemoEdge(${r.displayName || r.name})`, i;
 }
 //#endregion
 //#region ../diagram/src/base-primitives/NodeHandles.tsx
 function DefaultHandles(r) {
-	let i = J(7), { direction: a } = r, o = a === void 0 ? "TB" : a, s, c;
+	let i = X(7), { direction: a } = r, o = a === void 0 ? "TB" : a, s, c;
 	bb0: switch (o) {
 		case "TB":
-			s = F.Bottom, c = F.Top;
+			s = U.Bottom, c = U.Top;
 			break bb0;
 		case "BT":
-			s = F.Top, c = F.Bottom;
+			s = U.Top, c = U.Bottom;
 			break bb0;
 		case "LR":
-			s = F.Right, c = F.Left;
+			s = U.Right, c = U.Left;
 			break bb0;
 		case "RL":
-			s = F.Left, c = F.Right;
+			s = U.Left, c = U.Right;
 			break bb0;
-		default: he(o);
+		default: Se(o);
 	}
 	let l;
-	i[0] === s ? l = i[1] : (l = /* @__PURE__ */ X(I, {
+	i[0] === s ? l = i[1] : (l = /* @__PURE__ */ Q(W, {
 		type: "source",
 		position: s,
 		className: "likec4-node-handle-center"
 	}), i[0] = s, i[1] = l);
 	let u;
-	i[2] === c ? u = i[3] : (u = /* @__PURE__ */ X(I, {
+	i[2] === c ? u = i[3] : (u = /* @__PURE__ */ Q(W, {
 		type: "target",
 		position: c,
 		className: "likec4-node-handle-center"
 	}), i[2] = c, i[3] = u);
 	let d;
-	return i[4] !== l || i[5] !== u ? (d = /* @__PURE__ */ Z(Y, { children: [l, u] }), i[4] = l, i[5] = u, i[6] = d) : d = i[6], d;
+	return i[4] !== l || i[5] !== u ? (d = /* @__PURE__ */ $(Z, { children: [l, u] }), i[4] = l, i[5] = u, i[6] = d) : d = i[6], d;
 }
 //#endregion
-//#region ../diagram/src/components/Logo.tsx
-var ut = q((r, i) => {
-	let a = J(5), o, s;
-	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ X("path", {
-		fill: "#5E98AF",
-		d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
-	}), s = /* @__PURE__ */ X("path", {
-		className: T({
-			fill: "[#FCFBF7]",
-			_light: { fill: "[#222221]" }
-		}),
-		d: "M71.61 12.08c-.06 3.61.3 29.95.23 31.87 0 1.8 0 3.6.06 5.41 0 .3.18.58.47.58 4.1.18 8.13-.17 12.22-.11 1.34.05 2.69 0 3.97 0 1.29-.06 1.4-.59 1.35-1.63-.06-1.63-.06-3.08-.06-4.65-.06-.82-.53-1.11-1.23-1.11-2.4.06-4.8-.06-7.19.06-.4.06-.82.06-1.23.06-.7-.06-.87-.24-.93-1v-.86c-.18-4.83.17-9.83.17-14.66-.06-4.07 0-7.73-.06-11.34 0-1.57 0-3.14-.05-4.65-.06-.93 0-1.92-.24-2.85-.11-.35-.29-.81-.7-.81h-5.5c-.93 0-1.22.64-1.28 1.57v4.12ZM103.81 35c-.17-6.63-.1-13.67-.05-20.24 0-2.04-.12-4.25-.12-6.28 0-2.21-.87-2.1-2.04-2.15-1.7-.06-2.46-.06-4.15-.06-1.11-.06-1.58.23-1.58 1.34 0 5.7-.18 21.8-.12 24.13.06 2.33.3 12.91.18 15.24-.06.81 0 1.62.06 2.44.05.29.23.58.7.58 1.93-.12 3.74-.12 5.67-.17.7-.06 1.28-.24 1.58-1 .05-.4-.12-11.04-.12-13.83Zm13.92 4.47c0-2.03-.3-7.56-.23-8.72 0-.17.11-.4.17-.4.12 0 .35.11.41.17 1.87 2.44 10.64 19.36 11.7 19.42.28.06.58.06.87.06 1.99-.12 3.74 0 5.73 0 2.04 0 .7-1.98.35-2.5-.53-.76-7.48-13.14-7.9-13.9-1.16-1.98-2.16-4.13-3.32-6.05-.12-.23-.24-.58-.18-.81.12-.7.3-1.34.59-1.98a93.18 93.18 0 0 1 4.55-8.14c1.88-2.97 2.93-4.83 4.45-7.5.35-.64.58-1.34.82-2.1.05-.29-.18-.58-.53-.58-1.11-.05-5.15 0-6.43 0-.59 0-1.17.12-1.46.64-.76 1.46-8.6 15.7-9.35 16.98-.06.12-.24.18-.41.18 0 0-.12-.18-.12-.3-.06-3.25.53-13.9.4-16.04-.05-1.28-.28-1.4-1.57-1.46-1.4-.05-3.33-.05-4.73-.05-1.3 0-1.4.7-1.58 1.62-.06.18-.06 5.64-.06 8.09 0 3.54-.3 25.76.11 32.8 0 .7.18 1.1.77 1.1 1.57-.12 3.91 0 5.49 0 1.11 0 1.29-.12 1.29-1.98 0-2.5.23-4.77.23-7.85 0-.23-.06-.46-.06-.7Zm25.66-1.4h-.06c0 1.46-.05 2.97 0 4.49.06 1.86.18 3.72.3 5.58 0 .64.17.81.76.93 1.22.29 2.4.35 3.62.35 3.16-.12 6.31.11 9.47 0 1.29-.06 1.87.06 3.16-.18 1.17-.23 1.58-.87 1.58-2.61-.12-1.1-.06-1.57-.06-2.91 0-1.92-1.35-2.56-2.52-2.5-.81.06-4.73-.06-6.31-.06-2.63.06-2.22.4-2.22-2.33 0-2.2.06-5.05.06-7.32 0-1.22.11-1.63 1.28-1.63h7.31c1.17.17 1.99-.64 1.99-1.86 0-1.22.12-1.28.12-2.5l-.18-1.75c-.12-.99-.47-1.33-1.46-1.33-.64 0-1.29.05-1.93.11-2.52.18-3.68-.17-6.14 0-.82 0-.93-.11-1-.87-.23-2.27 0-4.77.24-7.04.06-.93.3-1.1 1.17-1.16l8.24-.06c1.11-.11 1.46-.06 1.4-1.16-.11-1.69.06-3.43-.11-5.12-.12-.93-.41-1.1-1.46-1.1-1.76.05-2.17.05-3.92.17-1.75.06-8.77.06-10.46.06-2.46 0-2.63-.18-2.7 2.8-.1 2.32-.05 4.7-.05 7.09 0 4.07-.23 18.66-.12 21.92Zm47.76-24.82c.06-1.92 0-3.5 0-5.35 0-2.15-3.92-1.92-5.32-1.86a18.95 18.95 0 0 0-15.08 9.77c-.82 1.57-1.4 3.2-1.81 4.88a34 34 0 0 0-.59 12.15c.41 3.78 1.4 7.56 3.74 10.59 4.04 5.3 11.46 7.15 17.83 6.16.3-.06.59-.11.82-.29.18-.11.35-.35.35-.58l.18-3.31c.06-1.05 0-1 0-2.04 0-1.4-2.93-.35-4.74-.35-1.75 0-3.62-.06-5.2-.87-2.8-1.57-4.38-4.71-5.26-7.68-1-3.2-1.23-6.63-.64-9.88.7-4.25 2.74-9.13 7.25-10.59 2.57-.87 5.31-.58 7.89-.29.35.06.58-.17.58-.46Zm26.77 15.3c.06-2.5 0-14.84 0-18.38.06-.82 0-1.63-.11-2.45-.06-.99-.24-1.28-1.29-1.33h-4.44c-.82 0-1.35.4-1.82 1.27-1.34 3.2-10.75 24.02-12.15 26.58-.53.99-1 1.63-1 2.68v4.24c0 .76-.06 1.28 1.23 1.28l11.1-.06c1.47 0 1.47.3 1.47 1.1 0 .88-.12 4.9-.12 5.3 0 .58.12 1.16 1.23 1.16h5.08c1.23 0 1.23-.7 1.23-2.03.06-1.17-.06-3.5-.06-4.66 0-.93.18-.98 1.76-.98 1.22 0 1.75-.12 1.75-.88.06-1.57 0-2.67 0-4.42 0-1.04-.93-.98-2.92-.98-.65 0-.7-.18-.7-1.05-.12-1.8-.24-4.6-.24-6.4Zm-7.25-5.94c-.05.7-.11 10.82-.11 12.27-.06.81-.24 1.05-1 1.1-1.93.06-3.85.06-5.78.06-.47 0-.65-.4-.41-.87.23-.4 4.85-11.57 6.13-14.48.18-.17.24-.35.41-.52.18-.12.41-.18.59-.23.06 0 .23.29.23.46 0 .76-.06 1.51-.06 2.21Z"
-	}), a[0] = o, a[1] = s) : (o = a[0], s = a[1]);
-	let c;
-	return a[2] !== r || a[3] !== i ? (c = /* @__PURE__ */ Z("svg", {
-		ref: i,
-		xmlns: "http://www.w3.org/2000/svg",
-		fill: "none",
-		viewBox: "0 0 222 56",
-		...r,
-		children: [o, s]
-	}), a[2] = r, a[3] = i, a[4] = c) : c = a[4], c;
-}), dt = q((r, i) => {
-	let a = J(4), o;
-	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ X("path", {
-		fill: "#5E98AF",
-		d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
-	}), a[0] = o) : o = a[0];
-	let s;
-	return a[1] !== r || a[2] !== i ? (s = /* @__PURE__ */ X("svg", {
-		ref: i,
-		xmlns: "http://www.w3.org/2000/svg",
-		fill: "none",
-		viewBox: "0 0 56 56",
-		...r,
-		children: o
-	}), a[1] = r, a[2] = i, a[3] = s) : s = a[3], s;
-}), { withProvider: ft, withContext: pt } = S(N), shouldForwardProp = (r, i) => !i.includes(r) && (re(r) || !j(r)), mt = q((r, i) => {
-	let a = J(11), o, s;
+//#region ../diagram/src/components/NavigationPanel.tsx
+var { withProvider: Tt, withContext: Et } = k(B), shouldForwardProp = (r, i) => !i.includes(r) && (ue(r) || !M(r)), Dt = q((r, i) => {
+	let a = X(11), o, s;
 	a[0] === r ? (o = a[1], s = a[2]) : ({className: o, ...s} = r, a[0] = r, a[1] = o, a[2] = s);
 	let c;
-	a[3] === o ? c = a[4] : (c = w("mantine-active", o), a[3] = o, a[4] = c);
+	a[3] === o ? c = a[4] : (c = A("mantine-active", o), a[3] = o, a[4] = c);
 	let l, u;
-	a[5] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ X(dt, { "data-logo-icon": !0 }), u = /* @__PURE__ */ X(ut, { "data-logo-full": !0 }), a[5] = l, a[6] = u) : (l = a[5], u = a[6]);
+	a[5] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ Q(ft, { "data-logo-icon": !0 }), u = /* @__PURE__ */ Q(dt, { "data-logo-full": !0 }), a[5] = l, a[6] = u) : (l = a[5], u = a[6]);
 	let d;
-	return a[7] !== s || a[8] !== i || a[9] !== c ? (d = /* @__PURE__ */ Z("button", {
+	return a[7] !== s || a[8] !== i || a[9] !== c ? (d = /* @__PURE__ */ $("button", {
 		...s,
 		ref: i,
 		className: c,
 		children: [l, u]
 	}), a[7] = s, a[8] = i, a[9] = c, a[10] = d) : d = a[10], d;
-}), ht = {
-	Root: ft(G, "root", { shouldForwardProp }),
-	Body: pt(G, "body", { shouldForwardProp }),
-	Logo: pt(mt, "logo", { shouldForwardProp }),
-	Label: pt(G, "label", { shouldForwardProp }),
-	Dropdown: pt(G, "dropdown", { shouldForwardProp })
-}, scheme = (r) => `[data-mantine-color-scheme="${r}"]`, gt = scheme("dark"), generateCompoundColors = (r, i, a, o) => `
+}), Ot = {
+	Root: Tt(fe.div, "root", { shouldForwardProp }),
+	Body: Et(fe.div, "body", { shouldForwardProp }),
+	Logo: Et(Dt, "logo", { shouldForwardProp }),
+	Label: Et(fe.div, "label", { shouldForwardProp }),
+	Dropdown: Et(fe.div, "dropdown", { shouldForwardProp })
+}, scheme = (r) => `[data-mantine-color-scheme="${r}"]`, kt = scheme("dark"), generateCompoundColors = (r, i, a, o) => `
 ${`${r} :is([data-likec4-color="${i}"][data-compound-depth="${o}"])`} {
   --likec4-palette-fill: ${a.fill};
   --likec4-palette-stroke: ${a.stroke};  
@@ -2120,39 +2270,37 @@ ${u} {
   --likec4-palette-relation-label-bg: ${l.labelBg};
   --likec4-palette-relation-stroke-selected: oklch(from ${l.line} calc(l - 0.15) c h);
 }
-${gt} ${u} {
+${kt} ${u} {
   --likec4-palette-relation-stroke-selected: oklch(from ${l.line} calc(l + 0.15) c h);
 }
 
   `, ...r.colorsForCompounds(c, 5).map((r, i) => generateCompoundColors(a, o, r, i + 1))].map((r) => r.trim()).join("\n");
 }
 function generateBuiltInColorStyles(r, i) {
-	return a(r.theme.colors, t$2(), u(([a, o]) => toStyle(r, {
+	return a(r.theme.colors, t$3(), u(([a, o]) => toStyle(r, {
 		rootSelector: i,
 		name: a,
 		colors: o
-	})), t$1("\n"));
-}
-function LikeC4Styles$1({ id: r }) {
-	let i = `#${r}`, a = h()?.(), o = useLikeC4Styles(), s = de(() => generateBuiltInColorStyles(o, i), [i, o.fingerprint]);
-	return /* @__PURE__ */ X(_t, {
-		id: r,
-		nonce: a,
-		colorsStyles: s
+	})), t$2("\n"));
+}
+function LikeC4Styles$1({ rootSelector: r }) {
+	let i = O()?.(), a = useLikeC4Styles(), o = ve(() => generateBuiltInColorStyles(a, r), [r, a.fingerprint]);
+	return /* @__PURE__ */ Q(At, {
+		id: a.fingerprint,
+		nonce: i,
+		colorsStyles: o
 	});
 }
 r(LikeC4Styles$1, "LikeC4Styles");
-var _t = ce((r) => {
-	let i = J(6), { id: a, nonce: o, colorsStyles: s } = r, c;
-	i[0] === s ? c = i[1] : (c = { __html: s }, i[0] = s, i[1] = c);
-	let l = o || void 0, u;
-	return i[2] !== a || i[3] !== c || i[4] !== l ? (u = /* @__PURE__ */ X("style", {
+var At = J((r) => {
+	let i = X(4), { id: a, nonce: o, colorsStyles: s } = r, c = o || void 0, l;
+	return i[0] !== s || i[1] !== a || i[2] !== c ? (l = /* @__PURE__ */ Q("style", {
 		type: "text/css",
 		"data-likec4-colors": a,
-		dangerouslySetInnerHTML: c,
-		nonce: l
-	}), i[2] = a, i[3] = c, i[4] = l, i[5] = u) : u = i[5], u;
+		nonce: c,
+		children: s
+	}), i[0] = s, i[1] = a, i[2] = c, i[3] = l) : l = i[3], l;
 });
-_t.displayName = "MemoizedStyle";
+At.displayName = "MemoizedStyle";
 //#endregion
-export { useXYStore as $, RootContainer as A, hasSubObject as B, qe as C, FramerMotionConfig as D, useOptionalLikeC4Model as E, BaseXYFlow as F, isSamePoint as G, bezierPath as H, ze as I, stopPropagation as J, nodeToRect as K, Re as L, useRootContainerContext as M, useRootContainerElement as N, EnsureMantine as O, useRootContainerRef as P, useXYFlow as Q, Le as R, useLikeC4Styles as S, useOptionalCurrentViewModel as T, getNodeCenter as U, bezierControlPoints as V, getNodeIntersectionFromCenterToPoint as W, selectXYStore as X, roundDpr as Y, useCurrentZoomAtLeast as Z, useLikeC4Projects as _, DefaultHandles as a, je as at, useOptionalProjectsContext as b, ct as c, e as ct, et as d, t$2 as dt, useXYStoreApi as et, EdgeLabelContainer as f, t$3 as ft, useLikeC4ProjectId as g, useChangeLikeC4Project as h, dt as i, IconRendererProvider as it, useRootContainer as j, DefaultMantineProvider as k, ElementData as l, e$1 as lt, EdgeContainer as m, ht as n, IconOrShapeRenderer as nt, memoEdge as o, t as ot, Qe as p, t$4 as pt, parsePaddings as q, ut as r, IconRenderer as rt, ElementShape as s, t$1 as st, LikeC4Styles$1 as t, useCallbackRef as tt, ElementActionButtons as u, e$2 as ut, useLikeC4ProjectsContext as v, Ge as w, useId$1 as x, Ye as y, Ie as z };
+export { Ge as $, RootContainer as A, getNodeCenter as B, ot as C, FramerMotionConfig as D, useOptionalLikeC4Model as E, BaseXYFlow as F, stopPropagation as G, isSamePoint as H, Ye as I, useCurrentZoomAtLeast as J, roundDpr as K, hasSubObject as L, useRootContainerContext as M, useRootContainerElement as N, EnsureMantine as O, useRootContainerRef as P, useCallbackRef as Q, bezierControlPoints as R, useLikeC4Styles as S, useOptionalCurrentViewModel as T, nodeToRect as U, getNodeIntersectionFromCenterToPoint as V, parsePaddings as W, useXYStore as X, useXYFlow as Y, useXYStoreApi as Z, useLikeC4Projects as _, ElementShape as a, IconRendererProvider as at, useOptionalProjectsContext as b, ElementActionButtons as c, t$2 as ct, pt as d, e$2 as dt, Ke as et, EdgeContainer as f, t$3 as ft, useLikeC4ProjectId as g, useChangeLikeC4Project as h, memoEdge as i, IconRenderer as it, useRootContainer as j, LikeC4MantineProvider as k, ht as l, e as lt, ft as m, t$5 as mt, Ot as n, Ue as nt, Ct as o, Be as ot, dt as p, t$4 as pt, selectXYStore as q, DefaultHandles as r, IconOrShapeRenderer as rt, ElementData as s, t$1 as st, LikeC4Styles$1 as t, We as tt, EdgeLabelContainer as u, e$1 as ut, useLikeC4ProjectsContext as v, it as w, useId$1 as x, ct as y, bezierPath as z };