likec4 1.60.0 → 1.61.0

package/__app__/src/chunks/LikeC4Styles.mjs

@@ -1,4522 +0,0 @@
-import { i as __name } from "./rolldown-runtime.mjs";
-import { D as createReactComponent, F as t$6, M as t$8, O as t$7, _ as useStore, c as Markdown, y as useUpdateEffect } from "./hooks.mjs";
-import { Et as Paper, Lt as useMantineColorScheme, Mt as mergeThemeOverrides, Nt as createTheme, O as Menu, Pt as MantineProvider, Rt as MantineContext, X as Card, Y as Code, _ as SegmentedControl, in as useId$1$1, r as Title$1, u as Table, v as Tooltip, vt as ActionIcon, xt as Popover, zt as useMantineStyleNonce } from "./libs/@mantine.mjs";
-import { I as cx, L as css, N as token, _ as actionButtons, d as elementNodeData, f as elementNode, k as Box, m as edgeLabel, p as edgePath, u as elementShapeRecipe, v as actionBtn } from "./styled-system.mjs";
-import { _ as Position, a as Handle, b as getNodeDimensions, f as index, g as useStoreApi, h as useStore$1, i as EdgeLabelRenderer, m as useReactFlow, n as BackgroundVariant, t as Background$1 } from "./libs/@xyflow/react.mjs";
-import { n as shallowEqual, t as deepEqual } from "./libs/fast-equals.mjs";
-import { t as Bezier } from "./libs/bezier-js.mjs";
-import { r as atom } from "./libs/nanostores.mjs";
-import { f as LazyMotion, l as domMax, n as MotionButton, r as MotionDiv, u as MotionConfig } from "./libs/framer.mjs";
-import { createContext, forwardRef, memo, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { c } from "react/compiler-runtime";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { invariant, nonexhaustive } from "@likec4/core";
-import { BBox as BBox$1, vector } from "@likec4/core/geometry";
-import { invariant as invariant$1 } from "@likec4/core/utils";
-import { LikeC4Styles } from "@likec4/core/styles";
-import { RichText as RichText$1, ensureSizes as ensureSizes$1 } from "@likec4/core/types";
-//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/clamp.js
-function t$5(...t) {
-	return t$6(n$3, t);
-}
-__name(t$5, "t");
-var n$3 = /* @__PURE__ */ __name((e, { min: t, max: n }) => t !== void 0 && e < t ? t : n !== void 0 && e > n ? n : e, "n");
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/hasAtLeast.js
-function t$4(...t) {
-	return t$6(n$2, t);
-}
-__name(t$4, "t");
-var n$2 = /* @__PURE__ */ __name((e, t) => e.length >= t, "n");
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/entries.js
-function t$3(...t) {
-	return t$6(Object.entries, t);
-}
-__name(t$3, "t");
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/isArray.js
-function e$2(e) {
-	return Array.isArray(e);
-}
-__name(e$2, "e");
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/isNumber.js
-function e$1(e) {
-	return typeof e == `number` && !Number.isNaN(e);
-}
-__name(e$1, "e");
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/isTruthy.js
-function e(e) {
-	return !!e;
-}
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/join.js
-function t$2(...t) {
-	return t$6(n$1, t);
-}
-__name(t$2, "t");
-var n$1 = /* @__PURE__ */ __name((e, t) => e.join(t), "n");
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/pickBy.js
-function t$1(...t) {
-	return t$6(n, t);
-}
-__name(t$1, "t");
-function n(e, t) {
-	let n = {};
-	for (let [r, i] of Object.entries(e)) t(i, r, e) && (n[r] = i);
-	return n;
-}
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconBolt = createReactComponent("outline", "bolt", "Bolt", [["path", {
-	"d": "M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11",
-	"key": "svg-0"
-}]]);
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconBrowser = createReactComponent("outline", "browser", "Browser", [
-	["path", {
-		"d": "M4 8h16",
-		"key": "svg-0"
-	}],
-	["path", {
-		"d": "M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12",
-		"key": "svg-1"
-	}],
-	["path", {
-		"d": "M8 4v4",
-		"key": "svg-2"
-	}]
-]);
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconCylinder = createReactComponent("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"
-}]]);
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconDeviceMobile = createReactComponent("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"
-	}],
-	["path", {
-		"d": "M11 4h2",
-		"key": "svg-1"
-	}],
-	["path", {
-		"d": "M12 17v.01",
-		"key": "svg-2"
-	}]
-]);
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconFileText = createReactComponent("outline", "file-text", "FileText", [
-	["path", {
-		"d": "M14 3v4a1 1 0 0 0 1 1h4",
-		"key": "svg-0"
-	}],
-	["path", {
-		"d": "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2",
-		"key": "svg-1"
-	}],
-	["path", {
-		"d": "M9 9l1 0",
-		"key": "svg-2"
-	}],
-	["path", {
-		"d": "M9 13l6 0",
-		"key": "svg-3"
-	}],
-	["path", {
-		"d": "M9 17l6 0",
-		"key": "svg-4"
-	}]
-]);
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconRectangularPrism = createReactComponent("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"
-	}],
-	["path", {
-		"d": "M9 21v-7.5",
-		"key": "svg-1"
-	}],
-	["path", {
-		"d": "M9 13.5l11.5 -5.5",
-		"key": "svg-2"
-	}],
-	["path", {
-		"d": "M3.5 11l5.5 2.5",
-		"key": "svg-3"
-	}]
-]);
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconReorder = createReactComponent("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"
-	}],
-	["path", {
-		"d": "M10 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-1"
-	}],
-	["path", {
-		"d": "M17 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-2"
-	}],
-	["path", {
-		"d": "M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3",
-		"key": "svg-3"
-	}],
-	["path", {
-		"d": "M16.5 8.5l2.5 2.5l2.5 -2.5",
-		"key": "svg-4"
-	}]
-]);
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconRobot = createReactComponent("outline", "robot", "Robot", [
-	["path", {
-		"d": "M6 6a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -4",
-		"key": "svg-0"
-	}],
-	["path", {
-		"d": "M12 2v2",
-		"key": "svg-1"
-	}],
-	["path", {
-		"d": "M9 12v9",
-		"key": "svg-2"
-	}],
-	["path", {
-		"d": "M15 12v9",
-		"key": "svg-3"
-	}],
-	["path", {
-		"d": "M5 16l4 -2",
-		"key": "svg-4"
-	}],
-	["path", {
-		"d": "M15 14l4 2",
-		"key": "svg-5"
-	}],
-	["path", {
-		"d": "M9 18h6",
-		"key": "svg-6"
-	}],
-	["path", {
-		"d": "M10 8v.01",
-		"key": "svg-7"
-	}],
-	["path", {
-		"d": "M14 8v.01",
-		"key": "svg-8"
-	}]
-]);
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconUser = createReactComponent("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"
-}]]);
-/**
-* @license @tabler/icons-react v3.49.0 - MIT
-*
-* This source code is licensed under the MIT license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-var IconZoomScan = createReactComponent("outline", "zoom-scan", "ZoomScan", [
-	["path", {
-		"d": "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0",
-		"key": "svg-0"
-	}],
-	["path", {
-		"d": "M16 16l-2.5 -2.5",
-		"key": "svg-1"
-	}],
-	["path", {
-		"d": "M3 7v-2a2 2 0 0 1 2 -2h2",
-		"key": "svg-2"
-	}],
-	["path", {
-		"d": "M3 17v2a2 2 0 0 0 2 2h2",
-		"key": "svg-3"
-	}],
-	["path", {
-		"d": "M17 3h2a2 2 0 0 1 2 2v2",
-		"key": "svg-4"
-	}],
-	["path", {
-		"d": "M17 21h2a2 2 0 0 0 2 -2v-2",
-		"key": "svg-5"
-	}]
-]);
-//#endregion
-//#region ../diagram/src/context/IconRenderer.tsx
-var IconRendererContext = createContext(null);
-/**
-* Provider for custom element icon renderers
-*
-* @example
-* ```tsx
-* const MyIconRenderer: ElementIconRenderer = ({ node }) => {
-*   return <div>{node.title}</div>
-* }
-*
-* <IconRendererProvider value={MyIconRenderer}>
-*   <LikeC4Diagram />
-* </IconRendererProvider>
-* ```
-*/
-function IconRendererProvider(t0) {
-	const $ = c(5);
-	const { value, children } = t0;
-	if (useContext(IconRendererContext)) {
-		let t1;
-		if ($[0] !== children) {
-			t1 = /* @__PURE__ */ jsx(Fragment$1, { children });
-			$[0] = children;
-			$[1] = t1;
-		} else t1 = $[1];
-		return t1;
-	}
-	let t1;
-	if ($[2] !== children || $[3] !== value) {
-		t1 = /* @__PURE__ */ jsx(IconRendererContext.Provider, {
-			value,
-			children
-		});
-		$[2] = children;
-		$[3] = value;
-		$[4] = t1;
-	} else t1 = $[4];
-	return t1;
-}
-function IconRenderer({ element, className, style }) {
-	const RenderIcon = useContext(IconRendererContext);
-	if (!element || !element.icon || element.icon === "none") return null;
-	let icon;
-	switch (true) {
-		case element.icon.startsWith("data:image/svg+xml"):
-			icon = /* @__PURE__ */ jsx(SvgDataUrlIcon, {
-				dataUrl: element.icon,
-				alt: element.title
-			});
-			break;
-		case element.icon.startsWith("http://"):
-		case element.icon.startsWith("https://"):
-		case element.icon.startsWith("data:image"):
-			icon = /* @__PURE__ */ jsx("img", {
-				src: element.icon,
-				alt: element.title
-			});
-			break;
-		case !!RenderIcon:
-			icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
-			break;
-		default: icon = /* @__PURE__ */ jsx(DefaultIconRenderer, { node: element });
-	}
-	if (!icon) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: cx(className, "likec4-element-icon"),
-		"data-likec4-icon": element.icon,
-		style,
-		children: icon
-	});
-}
-var ShapeIcons = {
-	browser: IconBrowser,
-	cylinder: IconCylinder,
-	mobile: IconDeviceMobile,
-	person: IconUser,
-	queue: IconReorder,
-	rectangle: IconRectangularPrism,
-	storage: IconCylinder,
-	bucket: IconCylinder,
-	document: IconFileText,
-	component: IconRectangularPrism,
-	agent: IconRobot
-};
-function IconOrShapeRenderer(t0) {
-	const $ = c(12);
-	const { element, className, style } = t0;
-	if (!element.icon || element.icon === "none") {
-		const ShapeIcon = ShapeIcons[element.shape];
-		let t1;
-		if ($[0] !== className) {
-			t1 = cx(className, "likec4-shape-icon");
-			$[0] = className;
-			$[1] = t1;
-		} else t1 = $[1];
-		let t2;
-		if ($[2] !== ShapeIcon) {
-			t2 = /* @__PURE__ */ jsx(ShapeIcon, {});
-			$[2] = ShapeIcon;
-			$[3] = t2;
-		} else t2 = $[3];
-		let t3;
-		if ($[4] !== style || $[5] !== t1 || $[6] !== t2) {
-			t3 = /* @__PURE__ */ jsx("div", {
-				className: t1,
-				style,
-				children: t2
-			});
-			$[4] = style;
-			$[5] = t1;
-			$[6] = t2;
-			$[7] = t3;
-		} else t3 = $[7];
-		return t3;
-	}
-	let t1;
-	if ($[8] !== className || $[9] !== element || $[10] !== style) {
-		t1 = /* @__PURE__ */ jsx(IconRenderer, {
-			element,
-			className,
-			style
-		});
-		$[8] = className;
-		$[9] = element;
-		$[10] = style;
-		$[11] = t1;
-	} else t1 = $[11];
-	return t1;
-}
-function SvgDataUrlIcon(t0) {
-	const $ = c(11);
-	const { dataUrl, alt } = t0;
-	if (!hasCurrentColorReference(dataUrl)) {
-		let t1;
-		if ($[0] !== alt || $[1] !== dataUrl) {
-			t1 = /* @__PURE__ */ jsx("img", {
-				src: dataUrl,
-				alt
-			});
-			$[0] = alt;
-			$[1] = dataUrl;
-			$[2] = t1;
-		} else t1 = $[2];
-		return t1;
-	}
-	let t1;
-	if ($[3] !== dataUrl) {
-		t1 = JSON.stringify(dataUrl);
-		$[3] = dataUrl;
-		$[4] = t1;
-	} else t1 = $[4];
-	const maskUrl = `url(${t1})`;
-	const t2 = alt ? "img" : void 0;
-	let t3;
-	if ($[5] !== maskUrl) {
-		t3 = {
-			display: "inline-block",
-			width: "100%",
-			height: "100%",
-			backgroundColor: "currentColor",
-			maskImage: maskUrl,
-			maskRepeat: "no-repeat",
-			maskPosition: "center",
-			maskSize: "contain",
-			WebkitMaskImage: maskUrl,
-			WebkitMaskRepeat: "no-repeat",
-			WebkitMaskPosition: "center",
-			WebkitMaskSize: "contain"
-		};
-		$[5] = maskUrl;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== alt || $[8] !== t2 || $[9] !== t3) {
-		t4 = /* @__PURE__ */ jsx("span", {
-			role: t2,
-			"aria-label": alt,
-			style: t3
-		});
-		$[7] = alt;
-		$[8] = t2;
-		$[9] = t3;
-		$[10] = t4;
-	} else t4 = $[10];
-	return t4;
-}
-function hasCurrentColorReference(dataUrl) {
-	return /currentcolor/i.test(decodeSvgDataUrl(dataUrl) ?? "");
-}
-function decodeSvgDataUrl(dataUrl) {
-	if (!dataUrl.startsWith("data:image/svg+xml")) return null;
-	try {
-		const comma = dataUrl.indexOf(",");
-		if (comma === -1) return null;
-		const payload = dataUrl.slice(comma + 1);
-		if (dataUrl.slice(0, comma).endsWith(";base64")) return new TextDecoder().decode(Uint8Array.from(atob(payload), (c) => c.charCodeAt(0)));
-		try {
-			return decodeURIComponent(payload);
-		} catch {
-			return payload;
-		}
-	} catch {
-		return null;
-	}
-}
-var iconUrl = (group, name) => `https://icons.like-c4.dev/${encodeURIComponent(group)}/${encodeURIComponent(name)}.svg`;
-function BootstrapIconMask(t0) {
-	const $ = c(11);
-	let name;
-	let props;
-	if ($[0] !== t0) {
-		({name, ...props} = t0);
-		$[0] = t0;
-		$[1] = name;
-		$[2] = props;
-	} else {
-		name = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== name) {
-		t1 = iconUrl("bootstrap", name);
-		$[3] = name;
-		$[4] = t1;
-	} else t1 = $[4];
-	const url = t1;
-	const t2 = `url("${url}")`;
-	const t3 = `url("${url}")`;
-	let t4;
-	if ($[5] !== t2 || $[6] !== t3) {
-		t4 = {
-			display: "inline-block",
-			width: "100%",
-			height: "100%",
-			backgroundColor: "currentColor",
-			maskImage: t2,
-			maskRepeat: "no-repeat",
-			maskPosition: "center",
-			maskSize: "contain",
-			WebkitMaskImage: t3,
-			WebkitMaskRepeat: "no-repeat",
-			WebkitMaskPosition: "center",
-			WebkitMaskSize: "contain"
-		};
-		$[5] = t2;
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
-	const style = t4;
-	let t5;
-	if ($[8] !== props || $[9] !== style) {
-		t5 = /* @__PURE__ */ jsx("span", {
-			...props,
-			"aria-hidden": "true",
-			style
-		});
-		$[8] = props;
-		$[9] = style;
-		$[10] = t5;
-	} else t5 = $[10];
-	return t5;
-}
-function DefaultIconRenderer(t0) {
-	const $ = c(11);
-	let node;
-	let props;
-	if ($[0] !== t0) {
-		({node, ...props} = t0);
-		$[0] = t0;
-		$[1] = node;
-		$[2] = props;
-	} else {
-		node = $[1];
-		props = $[2];
-	}
-	if (!node.icon || node.icon === "none") return null;
-	const t1 = node.icon;
-	let t2;
-	let t3;
-	let t4;
-	if ($[3] !== node.icon || $[4] !== props) {
-		t4 = Symbol.for("react.early_return_sentinel");
-		bb0: {
-			const [group, name, ...rest] = t1.split(":");
-			if (!group || !name || rest.length > 0) {
-				t4 = null;
-				break bb0;
-			}
-			if (group === "bootstrap") {
-				t4 = /* @__PURE__ */ jsx(BootstrapIconMask, {
-					...props,
-					name
-				});
-				break bb0;
-			}
-			t2 = props;
-			t3 = iconUrl(group, name);
-		}
-		$[3] = node.icon;
-		$[4] = props;
-		$[5] = t2;
-		$[6] = t3;
-		$[7] = t4;
-	} else {
-		t2 = $[5];
-		t3 = $[6];
-		t4 = $[7];
-	}
-	if (t4 !== Symbol.for("react.early_return_sentinel")) return t4;
-	let t5;
-	if ($[8] !== t2 || $[9] !== t3) {
-		t5 = /* @__PURE__ */ jsx("img", {
-			...t2,
-			src: t3
-		});
-		$[8] = t2;
-		$[9] = t3;
-		$[10] = t5;
-	} else t5 = $[10];
-	return t5;
-}
-//#endregion
-//#region ../diagram/src/base/const.ts
-var ZIndexes = {
-	Compound: 1,
-	Edge: 20,
-	EdgeLabel: 25,
-	Element: 20,
-	Max: 30
-};
-var MinZoom = .05;
-var FitViewPaddings = {
-	default: "16px",
-	withControls: {
-		top: "58px",
-		left: "16px",
-		right: "16px",
-		bottom: "16px"
-	}
-};
-var IS_SERVER = typeof window === "undefined";
-//#endregion
-//#region ../diagram/src/base/Background.tsx
-function literalToEnum(value) {
-	switch (value) {
-		case "dots": return BackgroundVariant.Dots;
-		case "lines": return BackgroundVariant.Lines;
-		case "cross": return BackgroundVariant.Cross;
-		default: nonexhaustive(value);
-	}
-}
-var compareProps = (prev, next) => {
-	if (typeof prev.background === "string" && typeof next.background === "string") return prev.background === next.background;
-	return deepEqual(prev.background, next.background);
-};
-var Background = memo((t0) => {
-	const $ = c(6);
-	const { background } = t0;
-	if (typeof background === "string") {
-		let t1;
-		if ($[0] !== background) {
-			t1 = literalToEnum(background);
-			$[0] = background;
-			$[1] = t1;
-		} else t1 = $[1];
-		let t2;
-		if ($[2] !== t1) {
-			t2 = /* @__PURE__ */ jsx(Background$1, {
-				variant: t1,
-				size: 2,
-				gap: 20
-			});
-			$[2] = t1;
-			$[3] = t2;
-		} else t2 = $[3];
-		return t2;
-	}
-	let t1;
-	if ($[4] !== background) {
-		t1 = /* @__PURE__ */ jsx(Background$1, { ...background });
-		$[4] = background;
-		$[5] = t1;
-	} else t1 = $[5];
-	return t1;
-}, compareProps);
-Background.displayName = "Background";
-//#endregion
-//#region ../diagram/src/hooks/useCallbackRef.ts
-/**
-* Memoizes a callback function so that it will not be recreated on every render.
-* The returned function is guaranteed to be the same reference across renders.
-* @param callback the callback function to memoize
-* @returns the memoized callback function
-*/
-function useCallbackRef(callback) {
-	const ref = useRef(callback);
-	ref.current = callback;
-	return useMemo(() => {
-		function callbackRef(...args) {
-			return ref.current?.(...args);
-		}
-		return callbackRef;
-	}, []);
-}
-//#endregion
-//#region ../diagram/src/hooks/useXYFlow.ts
-function useXYFlow() {
-	return useReactFlow();
-}
-function useXYStore(selector, equalityFn) {
-	return useStore$1(selector, equalityFn ?? shallowEqual);
-}
-function selectXYStore(selector) {
-	return selector;
-}
-function useXYStoreApi() {
-	return useStoreApi();
-}
-function useCurrentZoomAtLeast(minZoom) {
-	const $ = c(2);
-	let t0;
-	if ($[0] !== minZoom) {
-		t0 = (state) => state.transform[2] >= minZoom;
-		$[0] = minZoom;
-		$[1] = t0;
-	} else t0 = $[1];
-	return useStore$1(t0);
-}
-var selectZoom = (state) => state.transform[2] < .2;
-function useIsZoomTooSmall() {
-	return useStore$1(selectZoom);
-}
-//#endregion
-//#region ../diagram/src/utils/roundDpr.ts
-/**
-* Returns the current device pixel ratio (DPR) given the passed options
-*
-* @param options
-* @returns current device pixel ratio
-*/
-function getDevicePixelRatio() {
-	const dpr = typeof window !== "undefined" && typeof window.devicePixelRatio === "number" ? window.devicePixelRatio : 1;
-	return t$5(Math.floor(dpr), {
-		min: 1,
-		max: 4
-	});
-}
-var knownDpr;
-function roundDpr(v) {
-	knownDpr ??= getDevicePixelRatio();
-	if (knownDpr < 2) return Math.round(v);
-	return Math.round(v * knownDpr) / knownDpr;
-}
-//#endregion
-//#region ../diagram/src/utils/xyflow.ts
-function isEqualRects(a, b) {
-	return Math.trunc(a.x) === Math.trunc(b.x) && Math.trunc(a.y) === Math.trunc(b.y) && Math.trunc(a.width) === Math.trunc(b.width) && Math.trunc(a.height) === Math.trunc(b.height);
-}
-function isLeafNodeType(type) {
-	return type !== "compound-element" && type !== "compound-deployment" && type !== "view-group";
-}
-function leafNodeRects(nodes) {
-	const rects = [];
-	for (const node of nodes) if (isLeafNodeType(node.type)) rects.push(nodeToRect(node));
-	return rects;
-}
-function nodeToRect(nd) {
-	return {
-		x: Math.trunc(nd.internals.positionAbsolute.x),
-		y: Math.trunc(nd.internals.positionAbsolute.y),
-		width: Math.round(nd.measured?.width ?? nd.width ?? nd.initialWidth ?? 0),
-		height: Math.round(nd.measured?.height ?? nd.height ?? nd.initialHeight ?? 0)
-	};
-}
-function getNodeCenter(node) {
-	const { width, height } = getNodeDimensions(node);
-	const { x, y } = node.internals.positionAbsolute;
-	return {
-		x: Math.round(x + width / 2),
-		y: Math.round(y + height / 2)
-	};
-}
-/**
-* Helper function returns the intersection point
-* of the line between the center of the intersectionNode and the target
-*
-* @param intersectionNode the node that is the center of the line
-* @param target position of the target
-* @param nodeMargin the margin of the intersectionNode. The point will be placed at nodeMargin distance from the border of the node
-* @returns coordinates of the intersection point
-*/
-function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMargin = 0) {
-	const { width, height } = intersectionNode;
-	const nodeCenter = BBox$1.center(intersectionNode);
-	const v = vector(target.x, target.y).subtract(nodeCenter);
-	const xScale = (nodeMargin + width / 2) / v.x;
-	const yScale = (nodeMargin + height / 2) / v.y;
-	const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
-	return vector(v).multiply(scale).add(nodeCenter).trunc().toObject();
-}
-function bezierControlPoints(points) {
-	let [start, ...bezierPoints] = points;
-	invariant$1(start, "start should be defined");
-	const handles = [];
-	while (t$4(bezierPoints, 3)) {
-		const [cp1, cp2, end, ...rest] = bezierPoints;
-		const bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]);
-		const inflections = bezier.inflections();
-		if (inflections.length === 0) inflections.push(.5);
-		inflections.forEach((t) => {
-			const { x, y } = bezier.get(t);
-			handles.push({
-				x: Math.trunc(x),
-				y: Math.trunc(y)
-			});
-		});
-		bezierPoints = rest;
-		start = end;
-	}
-	invariant$1(bezierPoints.length === 0, "all points should be consumed");
-	invariant$1(t$4(handles, 1), "at least one control point should be generated");
-	return handles;
-}
-/**
-* Checks if two points are the same, considering both XYPoint (object ) and Point (tuple) formats.
-* @returns `true` If points are within 2px
-*/
-function isSamePoint(a, b) {
-	if (a === b) return true;
-	const [ax, ay] = e$2(a) ? a : [a.x, a.y];
-	const [bx, by] = e$2(b) ? b : [b.x, b.y];
-	return Math.hypot(bx - ax, by - ay) < 2.1;
-}
-function stopPropagation(e) {
-	e.nativeEvent.stopImmediatePropagation();
-	e.stopPropagation();
-}
-var printPoint = (point) => {
-	return `${Math.trunc(point[0])},${Math.trunc(point[1])}`;
-};
-function bezierPath(bezierSpline) {
-	let [start, ...points] = bezierSpline;
-	invariant$1(start, "start should be defined");
-	let path = `M ${printPoint(start)}`;
-	while (t$4(points, 3)) {
-		const [cp1, cp2, end, ...rest] = points;
-		path = path + ` C ${printPoint(cp1)} ${printPoint(cp2)} ${printPoint(end)}`;
-		points = rest;
-	}
-	invariant$1(points.length === 0, "all points should be consumed");
-	return path;
-}
-/**
-* Parses a single padding value to a number
-* @internal
-* @param padding - Padding to parse
-* @param viewport - Width or height of the viewport
-* @returns The padding in pixels
-*/
-function parsePadding(padding, viewport) {
-	if (typeof padding === "number") return Math.floor((viewport - viewport / (1 + padding)) * .5);
-	if (typeof padding === "string" && padding.endsWith("px")) {
-		const paddingValue = parseFloat(padding);
-		if (!Number.isNaN(paddingValue)) return Math.floor(paddingValue);
-	}
-	if (typeof padding === "string" && padding.endsWith("%")) {
-		const paddingValue = parseFloat(padding);
-		if (!Number.isNaN(paddingValue)) return Math.floor(viewport * paddingValue * .01);
-	}
-	console.error(`[React Flow] The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
-	return 0;
-}
-/**
-* Parses the paddings to an object with top, right, bottom, left, x and y paddings
-* @internal
-* @param padding - Padding to parse
-* @param width - Width of the viewport
-* @param height - Height of the viewport
-* @returns An object with the paddings in pixels
-*/
-function parsePaddings(padding, width, height) {
-	if (typeof padding === "string" || typeof padding === "number") {
-		const paddingY = parsePadding(padding, height);
-		const paddingX = parsePadding(padding, width);
-		return {
-			top: paddingY,
-			right: paddingX,
-			bottom: paddingY,
-			left: paddingX,
-			x: paddingX * 2,
-			y: paddingY * 2
-		};
-	}
-	if (typeof padding === "object") {
-		const top = parsePadding(padding.top ?? padding.y ?? 0, height);
-		const bottom = parsePadding(padding.bottom ?? padding.y ?? 0, height);
-		const left = parsePadding(padding.left ?? padding.x ?? 0, width);
-		const right = parsePadding(padding.right ?? padding.x ?? 0, width);
-		return {
-			top,
-			right,
-			bottom,
-			left,
-			x: left + right,
-			y: top + bottom
-		};
-	}
-	return {
-		top: 0,
-		right: 0,
-		bottom: 0,
-		left: 0,
-		x: 0,
-		y: 0
-	};
-}
-//#endregion
-//#region ../diagram/src/base/Base.ts
-var mergeData = (v, data) => Object.assign({}, v, { data: Object.assign({}, v.data, data) });
-var _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : mergeData(v, { dimmed });
-function setDimmed(arg1, arg2) {
-	if (arg2 !== void 0) return _setDimmed(arg1, arg2);
-	return (v) => _setDimmed(v, arg1);
-}
-var _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : mergeData(v, { hovered });
-function setHovered(arg1, arg2) {
-	if (arg2 !== void 0) return _setHovered(arg1, arg2);
-	return (v) => _setHovered(v, arg1);
-}
-function hasSubObject(value, subobl) {
-	return value === subobl || t$3(subobl).every(([key, v]) => deepEqual(value[key] ?? void 0, v));
-}
-function _setData(value, data) {
-	if (hasSubObject(value.data, data)) return value;
-	return mergeData(value, data);
-}
-function setData(arg1, arg2) {
-	if (arg2 !== void 0) return _setData(arg1, arg2);
-	return (edge) => _setData(edge, arg1);
-}
-var Base = {
-	setDimmed,
-	setHovered,
-	setData
-};
-//#endregion
-//#region ../diagram/src/base/keyboardZoom.ts
-function isEditableKeyboardTarget(target) {
-	if (!(target instanceof HTMLElement)) return false;
-	const tagName = target.tagName.toLowerCase();
-	return tagName === "input" || tagName === "textarea" || tagName === "select" || target.isContentEditable;
-}
-function getKeyboardZoomAction(event) {
-	if (!event.ctrlKey && !event.metaKey || isEditableKeyboardTarget(event.target)) return null;
-	switch (event.key) {
-		case "+":
-		case "=": return "zoom-in";
-		case "-":
-		case "_": return "zoom-out";
-		case "0": return "reset";
-		default: return null;
-	}
-}
-//#endregion
-//#region ../diagram/src/base/BaseXYFlow.tsx
-var likec4AriaLabelConfig = {
-	"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."
-};
-function activateFocusedElement(event) {
-	if (event.repeat || event.key !== "Enter" && event.key !== " ") return;
-	const target = event.target;
-	if (!(target instanceof Element)) return;
-	const interactive = target.closest("a,button,input,textarea,select,[role=\"button\"],[role=\"link\"],[contenteditable=\"true\"]");
-	if (interactive && !interactive.classList.contains("react-flow__node") && !interactive.classList.contains("react-flow__edge")) return;
-	const flowElement = target.closest(".react-flow__node[data-id], .react-flow__edge[data-id]");
-	const view = flowElement?.ownerDocument.defaultView;
-	if (!flowElement || !view) return;
-	event.preventDefault();
-	const rect = flowElement.getBoundingClientRect();
-	flowElement.dispatchEvent(new view.MouseEvent("click", {
-		bubbles: true,
-		cancelable: true,
-		button: 0,
-		clientX: rect.left + rect.width / 2,
-		clientY: rect.top + rect.height / 2,
-		detail: 1,
-		view
-	}));
-}
-function BaseXYFlow(t0) {
-	const $ = c(107);
-	let ariaLabelConfig;
-	let children;
-	let className;
-	let colorMode;
-	let edges;
-	let nodes;
-	let onEdgeMouseEnter;
-	let onEdgeMouseLeave;
-	let onEdgesChange;
-	let onKeyDownCapture;
-	let onMoveEnd;
-	let onNodeMouseEnter;
-	let onNodeMouseLeave;
-	let onNodesChange;
-	let onViewportResize;
-	let props;
-	let t1;
-	let t10;
-	let t11;
-	let t12;
-	let t2;
-	let t3;
-	let t4;
-	let t5;
-	let t6;
-	let t7;
-	let t8;
-	let t9;
-	if ($[0] !== t0) {
-		({nodes, edges, onEdgesChange, onNodesChange, className, pannable: t1, zoomable: t2, nodesSelectable: t3, nodesDraggable: t4, background: t5, children, colorMode, fitViewPadding: t6, zoomOnDoubleClick: t7, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, onKeyDownCapture, ariaLabelConfig, nodesFocusable: t8, edgesFocusable: t9, showControls: t10, minZoom: t11, maxZoom: t12, ...props} = t0);
-		$[0] = t0;
-		$[1] = ariaLabelConfig;
-		$[2] = children;
-		$[3] = className;
-		$[4] = colorMode;
-		$[5] = edges;
-		$[6] = nodes;
-		$[7] = onEdgeMouseEnter;
-		$[8] = onEdgeMouseLeave;
-		$[9] = onEdgesChange;
-		$[10] = onKeyDownCapture;
-		$[11] = onMoveEnd;
-		$[12] = onNodeMouseEnter;
-		$[13] = onNodeMouseLeave;
-		$[14] = onNodesChange;
-		$[15] = onViewportResize;
-		$[16] = props;
-		$[17] = t1;
-		$[18] = t10;
-		$[19] = t11;
-		$[20] = t12;
-		$[21] = t2;
-		$[22] = t3;
-		$[23] = t4;
-		$[24] = t5;
-		$[25] = t6;
-		$[26] = t7;
-		$[27] = t8;
-		$[28] = t9;
-	} else {
-		ariaLabelConfig = $[1];
-		children = $[2];
-		className = $[3];
-		colorMode = $[4];
-		edges = $[5];
-		nodes = $[6];
-		onEdgeMouseEnter = $[7];
-		onEdgeMouseLeave = $[8];
-		onEdgesChange = $[9];
-		onKeyDownCapture = $[10];
-		onMoveEnd = $[11];
-		onNodeMouseEnter = $[12];
-		onNodeMouseLeave = $[13];
-		onNodesChange = $[14];
-		onViewportResize = $[15];
-		props = $[16];
-		t1 = $[17];
-		t10 = $[18];
-		t11 = $[19];
-		t12 = $[20];
-		t2 = $[21];
-		t3 = $[22];
-		t4 = $[23];
-		t5 = $[24];
-		t6 = $[25];
-		t7 = $[26];
-		t8 = $[27];
-		t9 = $[28];
-	}
-	const pannable = t1 === void 0 ? true : t1;
-	const zoomable = t2 === void 0 ? true : t2;
-	const nodesSelectable = t3 === void 0 ? true : t3;
-	const nodesDraggable = t4 === void 0 ? false : t4;
-	const background = t5 === void 0 ? "dots" : t5;
-	const fitViewPadding = t6 === void 0 ? 0 : t6;
-	const zoomOnDoubleClick = t7 === void 0 ? false : t7;
-	const nodesFocusable = t8 === void 0 ? nodesDraggable || nodesSelectable : t8;
-	const edgesFocusable = t9 === void 0 ? false : t9;
-	const minZoom = t11 === void 0 ? MinZoom : t11;
-	const maxZoom = t12 === void 0 ? 3 : t12;
-	const t13 = Math.min(maxZoom, 1);
-	let t14;
-	if ($[29] !== fitViewPadding || $[30] !== minZoom || $[31] !== t13) {
-		t14 = {
-			minZoom,
-			maxZoom: t13,
-			padding: fitViewPadding,
-			includeHiddenNodes: false
-		};
-		$[29] = fitViewPadding;
-		$[30] = minZoom;
-		$[31] = t13;
-		$[32] = t14;
-	} else t14 = $[32];
-	const fitViewOptions = t14;
-	const isBgWithPattern = background !== "transparent" && background !== "solid";
-	const isZoomTooSmall = useIsZoomTooSmall();
-	const xyflow = useXYFlow();
-	const xystore = useXYStoreApi();
-	const { colorScheme } = useMantineColorScheme();
-	if (!colorMode) colorMode = colorScheme === "auto" ? "system" : colorScheme;
-	const tabIndex = props.tabIndex ?? (zoomable ? 0 : void 0);
-	const ariaLabel = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0 || tabIndex === void 0 ? props["aria-label"] : "Interactive diagram";
-	let t15;
-	if ($[33] !== fitViewOptions || $[34] !== props || $[35] !== xyflow || $[36] !== zoomable) {
-		t15 = (event) => {
-			props.onKeyDown?.(event);
-			if (event.defaultPrevented || !zoomable) return;
-			const action = getKeyboardZoomAction(event.nativeEvent);
-			if (!action) return;
-			event.preventDefault();
-			switch (action) {
-				case "zoom-in":
-					xyflow.zoomIn();
-					return;
-				case "zoom-out":
-					xyflow.zoomOut();
-					return;
-				case "reset":
-					xyflow.fitView(fitViewOptions);
-					return;
-			}
-		};
-		$[33] = fitViewOptions;
-		$[34] = props;
-		$[35] = xyflow;
-		$[36] = zoomable;
-		$[37] = t15;
-	} else t15 = $[37];
-	const onKeyDown = useCallbackRef(t15);
-	const t16 = colorMode;
-	const t17 = nodes;
-	const t18 = edges;
-	const t19 = background === "transparent" && "bg-transparent";
-	let t20;
-	if ($[38] !== className || $[39] !== t19) {
-		t20 = cx(t19, className);
-		$[38] = className;
-		$[39] = t19;
-		$[40] = t20;
-	} else t20 = $[40];
-	let t21;
-	if ($[41] !== isZoomTooSmall) {
-		t21 = isZoomTooSmall && { "data-likec4-zoom-small": true };
-		$[41] = isZoomTooSmall;
-		$[42] = t21;
-	} else t21 = $[42];
-	const t22 = !pannable && zoomable;
-	let t23;
-	if ($[43] !== zoomable) {
-		t23 = !zoomable && { zoomActivationKeyCode: null };
-		$[43] = zoomable;
-		$[44] = t23;
-	} else t23 = $[44];
-	const t24 = zoomable ? maxZoom : 1;
-	const t25 = zoomable ? minZoom : 1;
-	const t26 = zoomable || pannable;
-	let t27;
-	if ($[45] !== pannable) {
-		t27 = !pannable && {
-			panActivationKeyCode: null,
-			selectionKeyCode: null
-		};
-		$[45] = pannable;
-		$[46] = t27;
-	} else t27 = $[46];
-	let t28;
-	if ($[47] !== ariaLabelConfig) {
-		t28 = {
-			...likec4AriaLabelConfig,
-			...ariaLabelConfig
-		};
-		$[47] = ariaLabelConfig;
-		$[48] = t28;
-	} else t28 = $[48];
-	const t29 = onNodesChange;
-	const t30 = onEdgesChange;
-	let t31;
-	if ($[49] !== onMoveEnd || $[50] !== xystore) {
-		t31 = (event_0, t32) => {
-			const { x, y, zoom } = t32;
-			const roundedX = roundDpr(x);
-			const roundedY = roundDpr(y);
-			if (x !== roundedX || y !== roundedY) xystore.setState({ transform: [
-				roundedX,
-				roundedY,
-				zoom
-			] });
-			onMoveEnd?.(event_0, {
-				x: roundedX,
-				y: roundedY,
-				zoom
-			});
-		};
-		$[49] = onMoveEnd;
-		$[50] = xystore;
-		$[51] = t31;
-	} else t31 = $[51];
-	const t32 = useCallbackRef(t31);
-	let t33;
-	if ($[52] !== onNodeMouseEnter || $[53] !== onNodesChange) {
-		t33 = (event_1, node) => {
-			if (onNodeMouseEnter) {
-				onNodeMouseEnter(event_1, node);
-				return;
-			}
-			onNodesChange([{
-				id: node.id,
-				type: "replace",
-				item: Base.setHovered(node, true)
-			}]);
-		};
-		$[52] = onNodeMouseEnter;
-		$[53] = onNodesChange;
-		$[54] = t33;
-	} else t33 = $[54];
-	const t34 = useCallbackRef(t33);
-	let t35;
-	if ($[55] !== onNodeMouseLeave || $[56] !== onNodesChange) {
-		t35 = (event_2, node_0) => {
-			if (onNodeMouseLeave) {
-				onNodeMouseLeave(event_2, node_0);
-				return;
-			}
-			onNodesChange([{
-				id: node_0.id,
-				type: "replace",
-				item: Base.setHovered(node_0, false)
-			}]);
-		};
-		$[55] = onNodeMouseLeave;
-		$[56] = onNodesChange;
-		$[57] = t35;
-	} else t35 = $[57];
-	const t36 = useCallbackRef(t35);
-	let t37;
-	if ($[58] !== onEdgeMouseEnter || $[59] !== onEdgesChange) {
-		t37 = (event_3, edge) => {
-			if (onEdgeMouseEnter) {
-				onEdgeMouseEnter(event_3, edge);
-				return;
-			}
-			onEdgesChange([{
-				id: edge.id,
-				type: "replace",
-				item: Base.setHovered(edge, true)
-			}]);
-		};
-		$[58] = onEdgeMouseEnter;
-		$[59] = onEdgesChange;
-		$[60] = t37;
-	} else t37 = $[60];
-	const t38 = useCallbackRef(t37);
-	let t39;
-	if ($[61] !== onEdgeMouseLeave || $[62] !== onEdgesChange) {
-		t39 = (event_4, edge_0) => {
-			if (onEdgeMouseLeave) {
-				onEdgeMouseLeave(event_4, edge_0);
-				return;
-			}
-			onEdgesChange([{
-				id: edge_0.id,
-				type: "replace",
-				item: Base.setHovered(edge_0, false)
-			}]);
-		};
-		$[61] = onEdgeMouseLeave;
-		$[62] = onEdgesChange;
-		$[63] = t39;
-	} else t39 = $[63];
-	const t40 = useCallbackRef(t39);
-	let t41;
-	if ($[64] !== onKeyDownCapture) {
-		t41 = (event_5) => {
-			onKeyDownCapture?.(event_5);
-			if (!event_5.defaultPrevented) activateFocusedElement(event_5);
-		};
-		$[64] = onKeyDownCapture;
-		$[65] = t41;
-	} else t41 = $[65];
-	const t42 = useCallbackRef(t41);
-	let t43;
-	if ($[66] !== background || $[67] !== isBgWithPattern) {
-		t43 = isBgWithPattern && /* @__PURE__ */ jsx(Background, { background });
-		$[66] = background;
-		$[67] = isBgWithPattern;
-		$[68] = t43;
-	} else t43 = $[68];
-	let t44;
-	if ($[69] !== onViewportResize) {
-		t44 = onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize });
-		$[69] = onViewportResize;
-		$[70] = t44;
-	} else t44 = $[70];
-	let t45;
-	if ($[71] !== ariaLabel || $[72] !== children || $[73] !== colorMode || $[74] !== edges || $[75] !== edgesFocusable || $[76] !== fitViewOptions || $[77] !== nodes || $[78] !== nodesDraggable || $[79] !== nodesFocusable || $[80] !== nodesSelectable || $[81] !== onEdgesChange || $[82] !== onKeyDown || $[83] !== onNodesChange || $[84] !== pannable || $[85] !== props || $[86] !== t20 || $[87] !== t21 || $[88] !== t22 || $[89] !== t23 || $[90] !== t24 || $[91] !== t25 || $[92] !== t26 || $[93] !== t27 || $[94] !== t28 || $[95] !== t32 || $[96] !== t34 || $[97] !== t36 || $[98] !== t38 || $[99] !== t40 || $[100] !== t42 || $[101] !== t43 || $[102] !== t44 || $[103] !== tabIndex || $[104] !== zoomOnDoubleClick || $[105] !== zoomable) {
-		t45 = /* @__PURE__ */ jsxs(index, {
-			colorMode: t16,
-			nodes: t17,
-			edges: t18,
-			className: t20,
-			...t21,
-			zoomOnPinch: zoomable,
-			zoomOnScroll: t22,
-			...t23,
-			zoomOnDoubleClick,
-			maxZoom: t24,
-			minZoom: t25,
-			fitViewOptions,
-			preventScrolling: t26,
-			defaultMarkerColor: "var(--xy-edge-stroke)",
-			noDragClassName: "nodrag",
-			noPanClassName: "nopan",
-			noWheelClassName: "nowheel",
-			panOnScroll: pannable,
-			panOnDrag: pannable,
-			...t27,
-			elementsSelectable: nodesSelectable,
-			nodesFocusable,
-			edgesFocusable,
-			nodesDraggable,
-			ariaLabelConfig: t28,
-			nodeDragThreshold: 4,
-			nodeClickDistance: 3,
-			paneClickDistance: 3,
-			elevateNodesOnSelect: false,
-			selectNodesOnDrag: false,
-			onNodesChange: t29,
-			onEdgesChange: t30,
-			onMoveEnd: t32,
-			onNodeMouseEnter: t34,
-			onNodeMouseLeave: t36,
-			onEdgeMouseEnter: t38,
-			onEdgeMouseLeave: t40,
-			onNodeDoubleClick: stopPropagation,
-			onEdgeDoubleClick: stopPropagation,
-			onKeyDownCapture: t42,
-			...props,
-			"aria-label": ariaLabel,
-			tabIndex,
-			onKeyDown,
-			children: [
-				t43,
-				t44,
-				children
-			]
-		});
-		$[71] = ariaLabel;
-		$[72] = children;
-		$[73] = colorMode;
-		$[74] = edges;
-		$[75] = edgesFocusable;
-		$[76] = fitViewOptions;
-		$[77] = nodes;
-		$[78] = nodesDraggable;
-		$[79] = nodesFocusable;
-		$[80] = nodesSelectable;
-		$[81] = onEdgesChange;
-		$[82] = onKeyDown;
-		$[83] = onNodesChange;
-		$[84] = pannable;
-		$[85] = props;
-		$[86] = t20;
-		$[87] = t21;
-		$[88] = t22;
-		$[89] = t23;
-		$[90] = t24;
-		$[91] = t25;
-		$[92] = t26;
-		$[93] = t27;
-		$[94] = t28;
-		$[95] = t32;
-		$[96] = t34;
-		$[97] = t36;
-		$[98] = t38;
-		$[99] = t40;
-		$[100] = t42;
-		$[101] = t43;
-		$[102] = t44;
-		$[103] = tabIndex;
-		$[104] = zoomOnDoubleClick;
-		$[105] = zoomable;
-		$[106] = t45;
-	} else t45 = $[106];
-	return t45;
-}
-var selectDimensions = ({ width, height }) => (width || 1) * (height || 1);
-var ViewportResizeHanlder = (t0) => {
-	const $ = c(2);
-	const { onViewportResize } = t0;
-	const square = useStore$1(selectDimensions);
-	let t1;
-	if ($[0] !== square) {
-		t1 = [square];
-		$[0] = square;
-		$[1] = t1;
-	} else t1 = $[1];
-	useUpdateEffect(onViewportResize, t1);
-	return null;
-};
-//#endregion
-//#region ../diagram/src/context/RootContainerContext.tsx
-var RootContainerContext = createContext(null);
-var RootContainerContextProvider = RootContainerContext.Provider;
-function useRootContainerContext() {
-	return useContext(RootContainerContext);
-}
-function useRootContainer() {
-	const ctx = useRootContainerContext();
-	if (!ctx) throw new Error("useRootContainer must be used within a RootContainer");
-	return ctx;
-}
-function useRootContainerRef() {
-	return useRootContainer().ref;
-}
-function useRootContainerElement() {
-	return useRootContainer().ref.current;
-}
-//#endregion
-//#region ../diagram/src/components/RootContainer.tsx
-function RootContainer(t0) {
-	const $ = c(18);
-	const { id, className, reduceGraphics: t1, children } = t0;
-	const reduceGraphics = t1 === void 0 ? false : t1;
-	const ref = useRef(null);
-	const [$isPanning] = useState(_temp$1);
-	const isPanning = useStore($isPanning);
-	const t2 = `#${id}`;
-	let t3;
-	if ($[0] !== $isPanning || $[1] !== id || $[2] !== reduceGraphics || $[3] !== t2) {
-		t3 = {
-			id,
-			ref,
-			selector: t2,
-			reducedGraphics: reduceGraphics,
-			$panning: $isPanning
-		};
-		$[0] = $isPanning;
-		$[1] = id;
-		$[2] = reduceGraphics;
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	const ctx = t3;
-	let t4;
-	if ($[5] !== className) {
-		t4 = cx("likec4-root", className);
-		$[5] = className;
-		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== reduceGraphics) {
-		t5 = reduceGraphics && { "data-likec4-reduced-graphics": true };
-		$[7] = reduceGraphics;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] !== children || $[10] !== ctx) {
-		t6 = /* @__PURE__ */ jsx(RootContainerContextProvider, {
-			value: ctx,
-			children
-		});
-		$[9] = children;
-		$[10] = ctx;
-		$[11] = t6;
-	} else t6 = $[11];
-	let t7;
-	if ($[12] !== id || $[13] !== isPanning || $[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			id,
-			className: t4,
-			ref,
-			"data-likec4-diagram-panning": isPanning,
-			...t5,
-			children: t6
-		});
-		$[12] = id;
-		$[13] = isPanning;
-		$[14] = t4;
-		$[15] = t5;
-		$[16] = t6;
-		$[17] = t7;
-	} else t7 = $[17];
-	return t7;
-}
-function _temp$1() {
-	return /* @__PURE__ */ atom(false);
-}
-__name(_temp$1, "_temp");
-//#endregion
-//#region ../diagram/src/LikeC4MantineProvider.tsx
-function t(name) {
-	return token.var(name);
-}
-var tshirts = [
-	"xs",
-	"sm",
-	"md",
-	"lg",
-	"xl"
-];
-var sizes = (tokenCategory) => {
-	return Object.fromEntries(tshirts.map((size) => [size, t(`${tokenCategory}.${size}`)]));
-};
-var shades = [
-	0,
-	1,
-	2,
-	3,
-	4,
-	5,
-	6,
-	7,
-	8,
-	9
-];
-var mapColor = (color) => {
-	return t$7(shades, (shade) => t(`colors.${color}.${shade}`));
-};
-var titles = [
-	css({ textStyle: "h1" }),
-	css({ textStyle: "h2" }),
-	css({ textStyle: "h3" }),
-	css({ textStyle: "h4" }),
-	css({ textStyle: "h5" }),
-	css({ textStyle: "h6" })
-];
-var likec4Theme = createTheme({
-	primaryColor: "likec4",
-	cursorType: "pointer",
-	autoContrast: true,
-	primaryShade: {
-		light: 5,
-		dark: 6
-	},
-	colors: { likec4: mapColor("likec4.accent") },
-	fontFamily: t("fonts.body"),
-	fontFamilyMonospace: t("fonts.mono"),
-	headings: {
-		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: {
-		...sizes("fontSizes"),
-		xxs: t("fontSizes.xxs")
-	},
-	spacing: {
-		...sizes("spacing"),
-		xxs: t("spacing.xxs")
-	},
-	radius: sizes("radii"),
-	shadows: sizes("shadows"),
-	lineHeights: sizes("lineHeights"),
-	components: {
-		Card: Card.extend({
-			defaultProps: { radius: "md" },
-			classNames: { root: css({ bg: "surface.default" }) }
-		}),
-		Paper: Paper.extend({
-			defaultProps: { radius: "md" },
-			classNames: { root: css({ bg: "surface.default" }) }
-		}),
-		Title: Title$1.extend({ classNames: (_theme, props) => ({ root: titles[(props.order ?? 1) - 1] }) }),
-		Code: Code.extend({ classNames: { root: css({ bg: "surface.code" }) } }),
-		Table: Table.extend({ classNames: { th: css({
-			fontSize: "xxs",
-			fontWeight: "bold",
-			color: "text.dimmed",
-			textTransform: "uppercase",
-			letterSpacing: "caps.sm"
-		}) } }),
-		Tooltip: Tooltip.extend({ defaultProps: {
-			color: "dark",
-			fz: "xs",
-			withArrow: false,
-			openDelay: 600,
-			closeDelay: 120,
-			offset: 8
-		} }),
-		SegmentedControl: SegmentedControl.extend({ vars: (theme, props) => ({ root: { "--sc-font-size": theme.fontSizes[props.fz ?? props.size] } }) }),
-		Popover: Popover.extend({ defaultProps: {
-			withArrow: false,
-			radius: "sm",
-			shadow: "lg"
-		} }),
-		Menu: Menu.extend({ defaultProps: {
-			radius: "sm",
-			shadow: "lg"
-		} })
-	}
-});
-var semantic = (variables) => ({
-	dark: variables,
-	light: variables
-});
-var resolver = (_) => ({
-	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")
-	})
-});
-/**
-* LikeC4 Mantine provider with custom theme and CSS variables resolver
-*/
-function LikeC4MantineProvider(t0) {
-	const $ = c(12);
-	let children;
-	let props;
-	let t1;
-	let theme;
-	if ($[0] !== t0) {
-		({children, defaultColorScheme: t1, theme, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = theme;
-	} else {
-		children = $[1];
-		props = $[2];
-		t1 = $[3];
-		theme = $[4];
-	}
-	const defaultColorScheme = t1 === void 0 ? "auto" : t1;
-	let t2;
-	if ($[5] !== theme) {
-		t2 = theme ? mergeThemeOverrides(likec4Theme, theme) : likec4Theme;
-		$[5] = theme;
-		$[6] = t2;
-	} else t2 = $[6];
-	const mergedTheme = t2;
-	let t3;
-	if ($[7] !== children || $[8] !== defaultColorScheme || $[9] !== mergedTheme || $[10] !== props) {
-		t3 = /* @__PURE__ */ jsx(MantineProvider, {
-			defaultColorScheme,
-			theme: mergedTheme,
-			cssVariablesResolver: resolver,
-			...props,
-			children
-		});
-		$[7] = children;
-		$[8] = defaultColorScheme;
-		$[9] = mergedTheme;
-		$[10] = props;
-		$[11] = t3;
-	} else t3 = $[11];
-	return t3;
-}
-//#endregion
-//#region ../diagram/src/context/EnsureMantine.tsx
-function EnsureMantine(t0) {
-	const $ = c(7);
-	const { children } = t0;
-	const mantineCtx = useContext(MantineContext);
-	let t1;
-	if ($[0] !== mantineCtx) {
-		t1 = () => {
-			if (!mantineCtx) console.warn("LikeC4Diagram must be a child of LikeC4MantineProvider");
-		};
-		$[0] = mantineCtx;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = [];
-		$[2] = t2;
-	} else t2 = $[2];
-	useEffect(t1, t2);
-	if (!mantineCtx) {
-		let t3;
-		if ($[3] !== children) {
-			t3 = /* @__PURE__ */ jsx(LikeC4MantineProvider, { children });
-			$[3] = children;
-			$[4] = t3;
-		} else t3 = $[4];
-		return t3;
-	}
-	let t3;
-	if ($[5] !== children) {
-		t3 = /* @__PURE__ */ jsx(Fragment$1, { children });
-		$[5] = children;
-		$[6] = t3;
-	} else t3 = $[6];
-	return t3;
-}
-//#endregion
-//#region ../diagram/src/context/FramerMotionConfig.tsx
-function FramerMotionConfig(t0) {
-	const $ = c(6);
-	const { reducedMotion: t1, children } = t0;
-	const reducedMotion = t1 === void 0 ? "user" : t1;
-	const nonce = useMantineStyleNonce()?.();
-	let t2;
-	if ($[0] !== nonce) {
-		t2 = nonce && { nonce };
-		$[0] = nonce;
-		$[1] = t2;
-	} else t2 = $[1];
-	let t3;
-	if ($[2] !== children || $[3] !== reducedMotion || $[4] !== t2) {
-		t3 = /* @__PURE__ */ jsx(LazyMotion, {
-			features: domMax,
-			strict: true,
-			children: /* @__PURE__ */ jsx(MotionConfig, {
-				reducedMotion,
-				...t2,
-				children
-			})
-		});
-		$[2] = children;
-		$[3] = reducedMotion;
-		$[4] = t2;
-		$[5] = t3;
-	} else t3 = $[5];
-	return t3;
-}
-//#endregion
-//#region ../diagram/src/context/LikeC4ModelContext.tsx
-var LikeC4ModelContext = createContext(null);
-var LikeC4ModelContextProvider = LikeC4ModelContext.Provider;
-var CurrentViewModelCtx = createContext(null);
-var CurrentViewModelContext = CurrentViewModelCtx.Provider;
-/**
-* @returns The LikeC4Model from context, or null if no LikeC4ModelProvider is found.
-*/
-function useOptionalLikeC4Model() {
-	return useContext(LikeC4ModelContext);
-}
-function useOptionalCurrentViewModel() {
-	return useContext(CurrentViewModelCtx);
-}
-//#endregion
-//#region ../diagram/src/hooks/useLikeC4Styles.ts
-function useLikeC4Styles() {
-	return useOptionalLikeC4Model()?.$styles ?? LikeC4Styles.DEFAULT;
-}
-//#endregion
-//#region ../diagram/src/hooks/useId.ts
-function useId$1() {
-	const $ = c(2);
-	const t0 = useId$1$1();
-	let t1;
-	if ($[0] !== t0) {
-		t1 = t0.replace("mantine-", "likec4-");
-		$[0] = t0;
-		$[1] = t1;
-	} else t1 = $[1];
-	return t1;
-}
-__name(useId$1, "useId");
-//#endregion
-//#region ../diagram/src/context/LikeC4ProjectsContext.ts
-var LikeC4ProjectsContext = createContext(null);
-var LikeC4ProjectsContextProvider = LikeC4ProjectsContext.Provider;
-function useOptionalProjectsContext() {
-	return useContext(LikeC4ProjectsContext);
-}
-//#endregion
-//#region ../diagram/src/hooks/useLikeC4Project.ts
-var emptyProjects = [];
-function onProjectChange(id) {
-	console.warn(`Triggered callback to change project to ${id}, but no <LikeC4ProjectsProvider/> found`);
-}
-var emptyContext = {
-	projects: emptyProjects,
-	onProjectChange
-};
-function useLikeC4ProjectsContext() {
-	return useOptionalProjectsContext() ?? emptyContext;
-}
-/**
-* @returns The list of available projects, or empty array if no projects are available.
-*/
-function useLikeC4Projects() {
-	return useLikeC4ProjectsContext().projects;
-}
-/**
-* @returns The callback to change current project, or a no-op if no LikeC4ProjectsProvider is found.
-*/
-function useChangeLikeC4Project() {
-	return useLikeC4ProjectsContext().onProjectChange;
-}
-/**
-* @returns Current project id, as provided by LikeC4Model
-*/
-function useLikeC4ProjectId() {
-	const ctx = useOptionalLikeC4Model();
-	if (!ctx) throw new Error("No LikeC4ModelProvider found");
-	return ctx.projectId;
-}
-//#endregion
-//#region ../diagram/src/components/Logo.tsx
-var Logo = forwardRef((props, ref) => {
-	const $ = c(5);
-	let t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("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"
-		});
-		t1 = /* @__PURE__ */ jsx("path", {
-			className: css({
-				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"
-		});
-		$[0] = t0;
-		$[1] = t1;
-	} else {
-		t0 = $[0];
-		t1 = $[1];
-	}
-	let t2;
-	if ($[2] !== props || $[3] !== ref) {
-		t2 = /* @__PURE__ */ jsxs("svg", {
-			ref,
-			xmlns: "http://www.w3.org/2000/svg",
-			fill: "none",
-			viewBox: "0 0 222 56",
-			...props,
-			children: [t0, t1]
-		});
-		$[2] = props;
-		$[3] = ref;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
-});
-var LogoIcon = forwardRef((props, ref) => {
-	const $ = c(4);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("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"
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props || $[2] !== ref) {
-		t1 = /* @__PURE__ */ jsx("svg", {
-			ref,
-			xmlns: "http://www.w3.org/2000/svg",
-			fill: "none",
-			viewBox: "0 0 56 56",
-			...props,
-			children: t0
-		});
-		$[1] = props;
-		$[2] = ref;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
-});
-//#endregion
-//#region ../diagram/src/base-primitives/edge/EdgeContainer.tsx
-function EdgeContainer(t0) {
-	const $ = c(47);
-	let children;
-	let component;
-	let style;
-	let t1;
-	let t2;
-	let t3;
-	let t4;
-	let t5;
-	let t6;
-	let t7;
-	let t8;
-	let t9;
-	if ($[0] !== t0) {
-		const { className, component: t10, selectable: t11, selected: t12, data: t13, animated: t14, children: t15, style: t16, ...rest } = t0;
-		children = t15;
-		style = t16;
-		component = t10 === void 0 ? "g" : t10;
-		const selectable = t11 === void 0 ? false : t11;
-		const selected = t12 === void 0 ? false : t12;
-		let data;
-		let t17;
-		let t18;
-		let t19;
-		let t20;
-		if ($[13] !== t13) {
-			({color: t17, hovered: t18, active: t19, dimmed: t20, ...data} = t13);
-			$[13] = t13;
-			$[14] = data;
-			$[15] = t17;
-			$[16] = t18;
-			$[17] = t19;
-			$[18] = t20;
-		} else {
-			data = $[14];
-			t17 = $[15];
-			t18 = $[16];
-			t19 = $[17];
-			t20 = $[18];
-		}
-		const color = t17 === void 0 ? "gray" : t17;
-		const isHovered = t18 === void 0 ? false : t18;
-		const isActive = t19 === void 0 ? false : t19;
-		const isDimmed = t20 === void 0 ? false : t20;
-		let animated = t14 === void 0 ? false : t14;
-		animated = animated || isActive;
-		const t21 = selected && "selected";
-		const t22 = selectable && "selectable";
-		if ($[19] !== className || $[20] !== t21 || $[21] !== t22) {
-			t1 = cx(className, "likec4-edge-container", t21, t22);
-			$[19] = className;
-			$[20] = t21;
-			$[21] = t22;
-			$[22] = t1;
-		} else t1 = $[22];
-		t2 = color;
-		t3 = data.dir ?? "forward";
-		t4 = isActive;
-		t5 = isHovered;
-		if ($[23] !== animated) {
-			t6 = animated && { "data-likec4-animated": animated };
-			$[23] = animated;
-			$[24] = t6;
-		} else t6 = $[24];
-		if ($[25] !== selected) {
-			t7 = selected && { "data-likec4-selected": selected };
-			$[25] = selected;
-			$[26] = t7;
-		} else t7 = $[26];
-		if ($[27] !== isDimmed) {
-			t8 = isDimmed !== false && { "data-likec4-dimmed": isDimmed };
-			$[27] = isDimmed;
-			$[28] = t8;
-		} else t8 = $[28];
-		t9 = t$1(rest, _temp);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = component;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
-		$[7] = t4;
-		$[8] = t5;
-		$[9] = t6;
-		$[10] = t7;
-		$[11] = t8;
-		$[12] = t9;
-	} else {
-		children = $[1];
-		component = $[2];
-		style = $[3];
-		t1 = $[4];
-		t2 = $[5];
-		t3 = $[6];
-		t4 = $[7];
-		t5 = $[8];
-		t6 = $[9];
-		t7 = $[10];
-		t8 = $[11];
-		t9 = $[12];
-	}
-	let t10;
-	if ($[29] !== t1 || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 || $[37] !== t9) {
-		t10 = {
-			className: t1,
-			"data-likec4-color": t2,
-			"data-edge-dir": t3,
-			"data-edge-active": t4,
-			"data-likec4-hovered": t5,
-			...t6,
-			...t7,
-			...t8,
-			...t9
-		};
-		$[29] = t1;
-		$[30] = t2;
-		$[31] = t3;
-		$[32] = t4;
-		$[33] = t5;
-		$[34] = t6;
-		$[35] = t7;
-		$[36] = t8;
-		$[37] = t9;
-		$[38] = t10;
-	} else t10 = $[38];
-	const props = t10;
-	if (component === "svg") {
-		let t11;
-		if ($[39] !== children || $[40] !== props || $[41] !== style) {
-			t11 = /* @__PURE__ */ jsx("svg", {
-				style,
-				...props,
-				children
-			});
-			$[39] = children;
-			$[40] = props;
-			$[41] = style;
-			$[42] = t11;
-		} else t11 = $[42];
-		return t11;
-	}
-	invariant(component === "g", "EdgeContainer: component must be \"g\" or \"svg\"");
-	let t11;
-	if ($[43] !== children || $[44] !== props || $[45] !== style) {
-		t11 = /* @__PURE__ */ jsx("g", {
-			style,
-			...props,
-			children
-		});
-		$[43] = children;
-		$[44] = props;
-		$[45] = style;
-		$[46] = t11;
-	} else t11 = $[46];
-	return t11;
-}
-function _temp(value, key) {
-	return value !== void 0 && key.startsWith("data-");
-}
-//#endregion
-//#region ../diagram/src/base-primitives/edge/EdgeLabel.tsx
-var EdgeLabel = forwardRef((t0, ref) => {
-	const $ = c(34);
-	let children;
-	let className;
-	let rest;
-	let stepNum;
-	let t1;
-	let t2;
-	let t3;
-	if ($[0] !== t0) {
-		({edgeProps: t1, isSequenceStep: t2, stepNum, pointerEvents: t3, className, children, ...rest} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = rest;
-		$[4] = stepNum;
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else {
-		children = $[1];
-		className = $[2];
-		rest = $[3];
-		stepNum = $[4];
-		t1 = $[5];
-		t2 = $[6];
-		t3 = $[7];
-	}
-	const { id, data: t4, selected: t5, selectable: t6 } = t1;
-	const { label, technology, hovered: t7 } = t4;
-	const isHovered = t7 === void 0 ? false : t7;
-	const selected = t5 === void 0 ? false : t5;
-	const selectable = t6 === void 0 ? false : t6;
-	const isStepEdge = t2 === void 0 ? false : t2;
-	const pointerEvents = t3 === void 0 ? "all" : t3;
-	let t8;
-	if ($[8] !== label || $[9] !== technology) {
-		t8 = e(label) || e(technology);
-		$[8] = label;
-		$[9] = technology;
-		$[10] = t8;
-	} else t8 = $[10];
-	const hasLabel = t8;
-	let t9;
-	if ($[11] !== className || $[12] !== isStepEdge || $[13] !== pointerEvents || $[14] !== selectable) {
-		t9 = cx("likec4-edge-label", edgeLabel({
-			pointerEvents,
-			isStepEdge,
-			cursor: selectable || isStepEdge ? "pointer" : "default"
-		}), className);
-		$[11] = className;
-		$[12] = isStepEdge;
-		$[13] = pointerEvents;
-		$[14] = selectable;
-		$[15] = t9;
-	} else t9 = $[15];
-	const t10 = isHovered && !selected ? 1.06 : 1;
-	let t11;
-	if ($[16] !== t10) {
-		t11 = { scale: t10 };
-		$[16] = t10;
-		$[17] = t11;
-	} else t11 = $[17];
-	let t12;
-	if ($[18] !== isStepEdge || $[19] !== stepNum) {
-		t12 = isStepEdge && stepNum && /* @__PURE__ */ jsx(Box, {
-			className: "likec4-edge-label__step-number",
-			children: stepNum
-		});
-		$[18] = isStepEdge;
-		$[19] = stepNum;
-		$[20] = t12;
-	} else t12 = $[20];
-	let t13;
-	if ($[21] !== children || $[22] !== hasLabel || $[23] !== label || $[24] !== technology) {
-		t13 = hasLabel && /* @__PURE__ */ jsxs(Box, {
-			className: "likec4-edge-label__contents",
-			children: [
-				e(label) && /* @__PURE__ */ jsx(Box, {
-					lineClamp: 5,
-					className: "likec4-edge-label__text",
-					children: label
-				}),
-				e(technology) && /* @__PURE__ */ jsx(Box, {
-					className: "likec4-edge-label__technology",
-					children: "[ " + technology + " ]"
-				}),
-				children
-			]
-		});
-		$[21] = children;
-		$[22] = hasLabel;
-		$[23] = label;
-		$[24] = technology;
-		$[25] = t13;
-	} else t13 = $[25];
-	let t14;
-	if ($[26] !== id || $[27] !== ref || $[28] !== rest || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t9) {
-		t14 = /* @__PURE__ */ jsxs(MotionDiv, {
-			ref,
-			className: t9,
-			"data-edge-id": id,
-			animate: t11,
-			...rest,
-			children: [t12, t13]
-		});
-		$[26] = id;
-		$[27] = ref;
-		$[28] = rest;
-		$[29] = t11;
-		$[30] = t12;
-		$[31] = t13;
-		$[32] = t9;
-		$[33] = t14;
-	} else t14 = $[33];
-	return t14;
-});
-EdgeLabel.displayName = "EdgeLabel";
-//#endregion
-//#region ../diagram/src/base-primitives/edge/EdgeLabelContainer.tsx
-var toCssVarValue = (value) => {
-	if (value === void 0) return "";
-	return e$1(value) ? `${Math.trunc(value)}px` : value;
-};
-function EdgeLabelContainer(t0) {
-	const $ = c(42);
-	let children;
-	let className;
-	let contentStyle;
-	let labelXY;
-	let rest;
-	let t1;
-	if ($[0] !== t0) {
-		({edgeProps: t1, labelPosition: labelXY, className, style: contentStyle, children, ...rest} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = contentStyle;
-		$[4] = labelXY;
-		$[5] = rest;
-		$[6] = t1;
-	} else {
-		children = $[1];
-		className = $[2];
-		contentStyle = $[3];
-		labelXY = $[4];
-		rest = $[5];
-		t1 = $[6];
-	}
-	let { id, selected: t2, data: t3, animated } = t1;
-	const selected = t2 === void 0 ? false : t2;
-	const { hovered: t4, active: t5, dimmed: t6, labelBBox, color: t7 } = t3;
-	const isHovered = t4 === void 0 ? false : t4;
-	const isActive = t5 === void 0 ? false : t5;
-	const isDimmed = t6 === void 0 ? false : t6;
-	const color = t7 === void 0 ? "gray" : t7;
-	const labelX = labelXY?.x ?? labelBBox?.x;
-	const labelY = labelXY?.y ?? labelBBox?.y;
-	if (labelX === void 0 || labelY === void 0) return null;
-	const translate = labelXY?.translate ?? "";
-	animated = animated || isActive;
-	const t8 = id;
-	let t9;
-	if ($[7] !== className) {
-		t9 = cx("nodrag nopan", "likec4-edge-label-container", className);
-		$[7] = className;
-		$[8] = t9;
-	} else t9 = $[8];
-	const t10 = animated || isActive;
-	let t11;
-	if ($[9] !== animated) {
-		t11 = animated && { "data-likec4-animated": animated };
-		$[9] = animated;
-		$[10] = t11;
-	} else t11 = $[10];
-	let t12;
-	if ($[11] !== selected) {
-		t12 = selected !== false && { "data-likec4-selected": selected };
-		$[11] = selected;
-		$[12] = t12;
-	} else t12 = $[12];
-	let t13;
-	if ($[13] !== isDimmed) {
-		t13 = isDimmed !== false && { "data-likec4-dimmed": isDimmed };
-		$[13] = isDimmed;
-		$[14] = t13;
-	} else t13 = $[14];
-	let t14;
-	if ($[15] !== labelX) {
-		t14 = toCssVarValue(labelX);
-		$[15] = labelX;
-		$[16] = t14;
-	} else t14 = $[16];
-	let t15;
-	if ($[17] !== labelY) {
-		t15 = toCssVarValue(labelY);
-		$[17] = labelY;
-		$[18] = t15;
-	} else t15 = $[18];
-	const t16 = `translate(${t14}, ${t15}) ${translate}`;
-	let t17;
-	if ($[19] !== t16) {
-		t17 = { transform: t16 };
-		$[19] = t16;
-		$[20] = t17;
-	} else t17 = $[20];
-	let t18;
-	if ($[21] !== labelBBox) {
-		t18 = labelBBox && { maxWidth: labelBBox.width + 20 };
-		$[21] = labelBBox;
-		$[22] = t18;
-	} else t18 = $[22];
-	let t19;
-	if ($[23] !== contentStyle || $[24] !== t18) {
-		t19 = {
-			...contentStyle,
-			...t18
-		};
-		$[23] = contentStyle;
-		$[24] = t18;
-		$[25] = t19;
-	} else t19 = $[25];
-	let t20;
-	if ($[26] !== children || $[27] !== t19) {
-		t20 = /* @__PURE__ */ jsx("div", {
-			style: t19,
-			children
-		});
-		$[26] = children;
-		$[27] = t19;
-		$[28] = t20;
-	} else t20 = $[28];
-	let t21;
-	if ($[29] !== color || $[30] !== id || $[31] !== isActive || $[32] !== isHovered || $[33] !== rest || $[34] !== t10 || $[35] !== t11 || $[36] !== t12 || $[37] !== t13 || $[38] !== t17 || $[39] !== t20 || $[40] !== t9) {
-		t21 = /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
-			...rest,
-			className: t9,
-			"data-likec4-hovered": isHovered,
-			"data-likec4-color": color,
-			"data-edge-active": isActive,
-			"data-edge-animated": t10,
-			...t11,
-			...t12,
-			...t13,
-			style: t17,
-			children: t20
-		}, t8) });
-		$[29] = color;
-		$[30] = id;
-		$[31] = isActive;
-		$[32] = isHovered;
-		$[33] = rest;
-		$[34] = t10;
-		$[35] = t11;
-		$[36] = t12;
-		$[37] = t13;
-		$[38] = t17;
-		$[39] = t20;
-		$[40] = t9;
-		$[41] = t21;
-	} else t21 = $[41];
-	return t21;
-}
-//#endregion
-//#region ../diagram/src/base-primitives/edge/EdgeMarkers.tsx
-var Open = (props) => {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("path", {
-			d: "M0,0 L7,4 L0,8 L4,4 Z",
-			stroke: "context-stroke",
-			fill: "context-stroke",
-			strokeDasharray: 0,
-			strokeWidth: 1,
-			strokeLinecap: "round"
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props) {
-		t1 = /* @__PURE__ */ jsx("marker", {
-			viewBox: "-4 -4 14 16",
-			refX: 5,
-			refY: 4,
-			markerWidth: "7",
-			markerHeight: "8",
-			preserveAspectRatio: "xMaxYMid meet",
-			orient: "auto-start-reverse",
-			...props,
-			children: t0
-		});
-		$[1] = props;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-var Arrow = (props) => {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("path", {
-			d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
-			fill: "context-stroke",
-			strokeWidth: 0
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props) {
-		t1 = /* @__PURE__ */ jsx("marker", {
-			viewBox: "-1 -1 12 10",
-			refX: 4,
-			refY: 3,
-			markerWidth: "8",
-			markerHeight: "6",
-			preserveAspectRatio: "xMaxYMid meet",
-			orient: "auto-start-reverse",
-			...props,
-			children: t0
-		});
-		$[1] = props;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-var Crow = (props) => {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("path", {
-			d: "M 8 0 L 0 4 L 8 8 M 8 4 L 0 4",
-			fill: "none",
-			strokeWidth: 1
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props) {
-		t1 = /* @__PURE__ */ jsx("marker", {
-			viewBox: "-1 -1 12 12",
-			refX: 8,
-			refY: 4,
-			markerWidth: "8",
-			markerHeight: "8",
-			preserveAspectRatio: "xMaxYMid meet",
-			orient: "auto-start-reverse",
-			...props,
-			children: t0
-		});
-		$[1] = props;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-var OArrow = (props) => {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("path", {
-			d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
-			stroke: "context-stroke",
-			fill: "var(--likec4-background-color)",
-			strokeWidth: 1.25,
-			strokeLinejoin: "miter",
-			strokeLinecap: "square"
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props) {
-		t1 = /* @__PURE__ */ jsx("marker", {
-			viewBox: "-1 -1 12 10",
-			refX: 4,
-			refY: 3,
-			markerWidth: "8",
-			markerHeight: "6",
-			preserveAspectRatio: "xMaxYMid meet",
-			orient: "auto-start-reverse",
-			...props,
-			children: t0
-		});
-		$[1] = props;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-var Diamond = (props) => {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("path", {
-			d: "M5,0 L10,4 L5,8 L0,4 Z",
-			fill: "context-stroke",
-			strokeWidth: 0,
-			strokeLinecap: "round"
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props) {
-		t1 = /* @__PURE__ */ jsx("marker", {
-			viewBox: "-4 -4 16 14",
-			refX: 5,
-			refY: 4,
-			markerWidth: "10",
-			markerHeight: "8",
-			preserveAspectRatio: "xMaxYMid meet",
-			orient: "auto-start-reverse",
-			...props,
-			children: t0
-		});
-		$[1] = props;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-var ODiamond = (props) => {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("path", {
-			d: "M5,0 L10,4 L5,8 L0,4 Z",
-			stroke: "context-stroke",
-			fill: "var(--likec4-background-color)",
-			strokeWidth: 1.25,
-			strokeLinecap: "round"
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props) {
-		t1 = /* @__PURE__ */ jsx("marker", {
-			viewBox: "-4 -4 16 14",
-			refX: 6,
-			refY: 4,
-			markerWidth: "10",
-			markerHeight: "8",
-			preserveAspectRatio: "xMaxYMid meet",
-			orient: "auto-start-reverse",
-			...props,
-			children: t0
-		});
-		$[1] = props;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-var Dot = (props) => {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("circle", {
-			strokeWidth: 0,
-			fill: "context-stroke",
-			cx: 4,
-			cy: 4,
-			r: 3
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props) {
-		t1 = /* @__PURE__ */ jsx("marker", {
-			viewBox: "0 0 10 10",
-			refX: 4,
-			refY: 4,
-			markerWidth: "6",
-			markerHeight: "6",
-			...props,
-			children: t0
-		});
-		$[1] = props;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-var ODot = (props) => {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("circle", {
-			strokeWidth: 1.25,
-			stroke: "context-stroke",
-			fill: "var(--likec4-background-color)",
-			cx: 4,
-			cy: 4,
-			r: 3
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== props) {
-		t1 = /* @__PURE__ */ jsx("marker", {
-			viewBox: "0 0 10 10",
-			refX: 4,
-			refY: 4,
-			markerWidth: "6",
-			markerHeight: "6",
-			...props,
-			children: t0
-		});
-		$[1] = props;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-var EdgeMarkers = {
-	Arrow,
-	Crow,
-	OArrow,
-	Open,
-	Diamond,
-	ODiamond,
-	Dot,
-	ODot
-};
-function arrowTypeToMarker(arrowType) {
-	if (!arrowType || arrowType === "none") return;
-	switch (arrowType) {
-		case "normal": return "Arrow";
-		case "crow": return "Crow";
-		case "onormal": return "OArrow";
-		case "diamond": return "Diamond";
-		case "odiamond": return "ODiamond";
-		case "open":
-		case "vee": return "Open";
-		case "dot": return "Dot";
-		case "odot": return `ODot`;
-		default: nonexhaustive(arrowType);
-	}
-}
-//#endregion
-//#region ../diagram/src/base-primitives/edge/EdgePath.tsx
-var EdgePath = forwardRef((t0, svgPathRef) => {
-	const $ = c(54);
-	const { edgeProps: t1, isDragging: t2, onEdgePointerDown, strokeWidth, svgPath } = t0;
-	const { id, data: t3, selectable: t4, style, interactionWidth } = t1;
-	const { line, dir, tail, head } = t3;
-	const selectable = t4 === void 0 ? true : t4;
-	const isDragging = t2 === void 0 ? false : t2;
-	let markerStartName = arrowTypeToMarker(tail);
-	let markerEndName = arrowTypeToMarker(head ?? "normal");
-	if (dir === "back") [markerStartName, markerEndName] = [markerEndName, markerStartName];
-	const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null;
-	const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
-	const isDotted = line === "dotted";
-	const isDashed = isDotted || line === "dashed";
-	let strokeDasharray;
-	if (isDotted) strokeDasharray = "1,8";
-	else if (isDashed) strokeDasharray = "8,10";
-	let t10;
-	let t11;
-	let t12;
-	let t5;
-	let t6;
-	let t7;
-	let t8;
-	let t9;
-	if ($[0] !== MarkerEnd || $[1] !== MarkerStart || $[2] !== id || $[3] !== interactionWidth || $[4] !== isDragging || $[5] !== onEdgePointerDown || $[6] !== selectable || $[7] !== style || $[8] !== svgPath || $[9] !== svgPathRef) {
-		const classes = edgePath();
-		if ($[18] !== interactionWidth || $[19] !== isDragging || $[20] !== onEdgePointerDown || $[21] !== selectable || $[22] !== svgPath) {
-			t11 = selectable && /* @__PURE__ */ jsx("path", {
-				className: cx("react-flow__edge-interaction", css({ fill: "none" })),
-				onPointerDown: onEdgePointerDown,
-				d: svgPath,
-				style: {
-					strokeWidth: interactionWidth ?? 10,
-					stroke: "currentcolor",
-					strokeOpacity: 0,
-					...isDragging ? { display: "none" } : {}
-				}
-			});
-			$[18] = interactionWidth;
-			$[19] = isDragging;
-			$[20] = onEdgePointerDown;
-			$[21] = selectable;
-			$[22] = svgPath;
-			$[23] = t11;
-		} else t11 = $[23];
-		const t13 = `path("${svgPath}")`;
-		let t14;
-		if ($[24] !== t13) {
-			t14 = { offsetPath: t13 };
-			$[24] = t13;
-			$[25] = t14;
-		} else t14 = $[25];
-		t12 = /* @__PURE__ */ jsx("circle", {
-			className: cx("likec4-edge-middle-point", classes.middlePoint),
-			"data-edge-id": id,
-			style: t14
-		});
-		t7 = classes.markersCtx;
-		t8 = onEdgePointerDown;
-		let t15;
-		if ($[26] !== MarkerStart || $[27] !== id) {
-			t15 = MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id });
-			$[26] = MarkerStart;
-			$[27] = id;
-			$[28] = t15;
-		} else t15 = $[28];
-		let t16;
-		if ($[29] !== MarkerEnd || $[30] !== id) {
-			t16 = MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id });
-			$[29] = MarkerEnd;
-			$[30] = id;
-			$[31] = t16;
-		} else t16 = $[31];
-		if ($[32] !== t15 || $[33] !== t16) {
-			t9 = /* @__PURE__ */ jsxs("defs", { children: [t15, t16] });
-			$[32] = t15;
-			$[33] = t16;
-			$[34] = t9;
-		} else t9 = $[34];
-		t10 = /* @__PURE__ */ jsx("path", {
-			className: cx("react-flow__edge-path", "hide-on-reduced-graphics", classes.pathBg, isDragging && css({ display: "none" })),
-			d: svgPath,
-			style,
-			strokeLinecap: "round"
-		});
-		t5 = svgPathRef;
-		t6 = cx("react-flow__edge-path", classes.path, selectable && "react-flow__edge-interaction");
-		$[0] = MarkerEnd;
-		$[1] = MarkerStart;
-		$[2] = id;
-		$[3] = interactionWidth;
-		$[4] = isDragging;
-		$[5] = onEdgePointerDown;
-		$[6] = selectable;
-		$[7] = style;
-		$[8] = svgPath;
-		$[9] = svgPathRef;
-		$[10] = t10;
-		$[11] = t11;
-		$[12] = t12;
-		$[13] = t5;
-		$[14] = t6;
-		$[15] = t7;
-		$[16] = t8;
-		$[17] = t9;
-	} else {
-		t10 = $[10];
-		t11 = $[11];
-		t12 = $[12];
-		t5 = $[13];
-		t6 = $[14];
-		t7 = $[15];
-		t8 = $[16];
-		t9 = $[17];
-	}
-	const t13 = MarkerStart ? `url(#start${id})` : void 0;
-	const t14 = MarkerEnd ? `url(#end${id})` : void 0;
-	let t15;
-	if ($[35] !== strokeDasharray || $[36] !== strokeWidth || $[37] !== style || $[38] !== svgPath || $[39] !== t13 || $[40] !== t14 || $[41] !== t5 || $[42] !== t6) {
-		t15 = /* @__PURE__ */ jsx("path", {
-			ref: t5,
-			className: t6,
-			d: svgPath,
-			style,
-			strokeWidth,
-			strokeLinecap: "round",
-			strokeDasharray,
-			markerStart: t13,
-			markerEnd: t14
-		});
-		$[35] = strokeDasharray;
-		$[36] = strokeWidth;
-		$[37] = style;
-		$[38] = svgPath;
-		$[39] = t13;
-		$[40] = t14;
-		$[41] = t5;
-		$[42] = t6;
-		$[43] = t15;
-	} else t15 = $[43];
-	let t16;
-	if ($[44] !== t10 || $[45] !== t15 || $[46] !== t7 || $[47] !== t8 || $[48] !== t9) {
-		t16 = /* @__PURE__ */ jsxs("g", {
-			className: t7,
-			onPointerDown: t8,
-			children: [
-				t9,
-				t10,
-				t15
-			]
-		});
-		$[44] = t10;
-		$[45] = t15;
-		$[46] = t7;
-		$[47] = t8;
-		$[48] = t9;
-		$[49] = t16;
-	} else t16 = $[49];
-	let t17;
-	if ($[50] !== t11 || $[51] !== t12 || $[52] !== t16) {
-		t17 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			t11,
-			t12,
-			t16
-		] });
-		$[50] = t11;
-		$[51] = t12;
-		$[52] = t16;
-		$[53] = t17;
-	} else t17 = $[53];
-	return t17;
-});
-EdgePath.displayName = "EdgePath";
-//#endregion
-//#region ../diagram/src/base-primitives/element/ElementActionButtons.tsx
-var variants$1 = {
-	normal: {
-		originY: 0,
-		opacity: .75,
-		scale: .8,
-		y: 0
-	},
-	selected: {
-		originY: 0,
-		opacity: 1,
-		scale: .9,
-		y: 7
-	},
-	hovered: {
-		originY: 0,
-		opacity: 1,
-		scale: 1.12,
-		y: 7
-	}
-};
-/**
-* Center-Bottom bar with action buttons. Intended to be used inside "leaf" nodes.
-*
-* @param selected - Whether the node is selected
-* @param data - Node data
-* @param buttons - Action buttons
-*
-* @example
-* ```tsx
-* <ElementActionButtons
-*   {...nodeProps}
-*   Buttons={[
-*     {
-*       key: 'action1',
-*       icon: <IconZoomScan />,
-*       onClick: (e) => {
-*         e.stopPropagation()
-*         console.log('action1 clicked')
-*       },
-*     },
-*     //...
-*   ]}
-* />
-* ```
-*/
-function ElementActionButtons(t0) {
-	const $ = c(14);
-	const { selected: t1, data: t2, buttons } = t0;
-	const selected = t1 === void 0 ? false : t1;
-	const { hovered: t3 } = t2;
-	const isHovered = t3 === void 0 ? false : t3;
-	const id = useId$1$1();
-	if (!buttons.length) return null;
-	let variant;
-	bb0: switch (true) {
-		case isHovered:
-			variant = "hovered";
-			break bb0;
-		case selected:
-			variant = "selected";
-			break bb0;
-		default: variant = "normal";
-	}
-	const isActionVisible = isHovered || selected;
-	let t4;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = actionButtons();
-		$[0] = t4;
-	} else t4 = $[0];
-	const t5 = variant;
-	const t6 = `${isHovered}-${selected}`;
-	let t7;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = cx("nodrag nopan");
-		$[1] = t7;
-	} else t7 = $[1];
-	let t8;
-	if ($[2] !== buttons || $[3] !== id || $[4] !== isActionVisible) {
-		let t9;
-		if ($[6] !== id || $[7] !== isActionVisible) {
-			t9 = (button, index) => /* @__PURE__ */ jsx(ActionIcon, {
-				component: MotionButton,
-				className: actionBtn({}),
-				initial: false,
-				whileTap: { scale: 1 },
-				whileHover: { scale: 1.3 },
-				tabIndex: isActionVisible ? 0 : -1,
-				inert: isActionVisible ? void 0 : true,
-				"aria-label": button.ariaLabel ?? button.key ?? "Element action",
-				onClick: button.onClick,
-				onDoubleClick: stopPropagation,
-				children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})
-			}, `${id}-${button.key ?? index}`);
-			$[6] = id;
-			$[7] = isActionVisible;
-			$[8] = t9;
-		} else t9 = $[8];
-		t8 = buttons.map(t9);
-		$[2] = buttons;
-		$[3] = id;
-		$[4] = isActionVisible;
-		$[5] = t8;
-	} else t8 = $[5];
-	let t9;
-	if ($[9] !== isHovered || $[10] !== t6 || $[11] !== t8 || $[12] !== variant) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			className: t4,
-			children: /* @__PURE__ */ jsx(MotionDiv, {
-				layoutRoot: true,
-				initial: false,
-				variants: variants$1,
-				animate: t5,
-				layoutDependency: t6,
-				"data-likec4-hovered": isHovered,
-				className: t7,
-				onClick: stopPropagation,
-				children: t8
-			})
-		});
-		$[9] = isHovered;
-		$[10] = t6;
-		$[11] = t8;
-		$[12] = variant;
-		$[13] = t9;
-	} else t9 = $[13];
-	return t9;
-}
-//#endregion
-//#region ../diagram/src/base-primitives/element/ElementData.tsx
-/**
-* Resolve the icon color based on the node's style and color.
-*
-* If the node's style icon color is not defined, returns undefined.
-* If the node's style icon color is the same as the node's color, returns the stroke color.
-* Otherwise, returns the fill color.
-*/
-var resolveIconColor = (styles, data) => {
-	const iconColor = data.style.iconColor;
-	if (!iconColor) return;
-	const colors = styles.colors(iconColor).elements;
-	return iconColor === data.color ? colors.stroke : colors.fill;
-};
-function shouldBlendIconWithPalette(icon, hasIconColor) {
-	return !hasIconColor && icon?.startsWith("bootstrap:") === true;
-}
-var Root = forwardRef((t0, ref) => {
-	const $ = c(37);
-	let className;
-	let data;
-	let props;
-	let style;
-	if ($[0] !== t0) {
-		({className, style, data, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = data;
-		$[3] = props;
-		$[4] = style;
-	} else {
-		className = $[1];
-		data = $[2];
-		props = $[3];
-		style = $[4];
-	}
-	const styles = useLikeC4Styles();
-	let t1;
-	if ($[5] !== data || $[6] !== styles) {
-		t1 = data.style.sizing === "fixed" ? styles.fitNodeContent({
-			...data,
-			shape: data.shape ?? styles.defaults.shape
-		}) : null;
-		$[5] = data;
-		$[6] = styles;
-		$[7] = t1;
-	} else t1 = $[7];
-	const fitted = t1;
-	let t2;
-	if ($[8] !== data.style || $[9] !== fitted?.iconSize || $[10] !== styles) {
-		t2 = fitted?.iconSize ?? (data.style.iconSize ? styles.nodeSizes(data.style).values.iconSize : void 0);
-		$[8] = data.style;
-		$[9] = fitted?.iconSize;
-		$[10] = styles;
-		$[11] = t2;
-	} else t2 = $[11];
-	const iconSize = t2;
-	let t3;
-	if ($[12] !== data || $[13] !== styles) {
-		t3 = resolveIconColor(styles, data);
-		$[12] = data;
-		$[13] = styles;
-		$[14] = t3;
-	} else t3 = $[14];
-	const resolvedIconColor = t3;
-	const hasIconColor = !!resolvedIconColor;
-	let t4;
-	if ($[15] !== className || $[16] !== data.icon || $[17] !== data.style.iconPosition || $[18] !== data.style.sizing || $[19] !== hasIconColor) {
-		t4 = cx(className, elementNodeData({
-			iconPosition: data.style.iconPosition,
-			withIconColor: hasIconColor,
-			withIconBlend: shouldBlendIconWithPalette(data.icon, hasIconColor),
-			sizing: data.style.sizing ?? "auto"
-		}), "likec4-element");
-		$[15] = className;
-		$[16] = data.icon;
-		$[17] = data.style.iconPosition;
-		$[18] = data.style.sizing;
-		$[19] = hasIconColor;
-		$[20] = t4;
-	} else t4 = $[20];
-	let t5;
-	if ($[21] !== iconSize) {
-		t5 = iconSize && { "--likec4-icon-size": `${iconSize}px` };
-		$[21] = iconSize;
-		$[22] = t5;
-	} else t5 = $[22];
-	let t6;
-	if ($[23] !== fitted) {
-		t6 = fitted && { "--likec4-text-size": `${fitted.textSize}px` };
-		$[23] = fitted;
-		$[24] = t6;
-	} else t6 = $[24];
-	let t7;
-	if ($[25] !== resolvedIconColor) {
-		t7 = resolvedIconColor && { "--likec4-icon-color": resolvedIconColor };
-		$[25] = resolvedIconColor;
-		$[26] = t7;
-	} else t7 = $[26];
-	let t8;
-	if ($[27] !== style || $[28] !== t5 || $[29] !== t6 || $[30] !== t7) {
-		t8 = {
-			...style,
-			...t5,
-			...t6,
-			...t7
-		};
-		$[27] = style;
-		$[28] = t5;
-		$[29] = t6;
-		$[30] = t7;
-		$[31] = t8;
-	} else t8 = $[31];
-	let t9;
-	if ($[32] !== props || $[33] !== ref || $[34] !== t4 || $[35] !== t8) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			...props,
-			ref,
-			className: t4,
-			style: t8
-		});
-		$[32] = props;
-		$[33] = ref;
-		$[34] = t4;
-		$[35] = t8;
-		$[36] = t9;
-	} else t9 = $[36];
-	return t9;
-});
-var Icon = (t0) => {
-	const $ = c(6);
-	let data;
-	let props;
-	if ($[0] !== t0) {
-		({data, ...props} = t0);
-		$[0] = t0;
-		$[1] = data;
-		$[2] = props;
-	} else {
-		data = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== data || $[4] !== props) {
-		t1 = /* @__PURE__ */ jsx(IconRenderer, {
-			element: data,
-			...props
-		});
-		$[3] = data;
-		$[4] = props;
-		$[5] = t1;
-	} else t1 = $[5];
-	return t1;
-};
-var Content = forwardRef((t0, ref) => {
-	const $ = c(9);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cx(className, "likec4-element-node-content");
-		$[3] = className;
-		$[4] = t1;
-	} else t1 = $[4];
-	let t2;
-	if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			...props,
-			className: t1,
-			ref
-		});
-		$[5] = props;
-		$[6] = ref;
-		$[7] = t1;
-		$[8] = t2;
-	} else t2 = $[8];
-	return t2;
-});
-var Title = forwardRef((t0, ref) => {
-	const $ = c(11);
-	let className;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({data: t1, className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-	}
-	const { title } = t1;
-	let t2;
-	if ($[4] !== className) {
-		t2 = cx(className, "likec4-element-title");
-		$[4] = className;
-		$[5] = t2;
-	} else t2 = $[5];
-	let t3;
-	if ($[6] !== props || $[7] !== ref || $[8] !== t2 || $[9] !== title) {
-		t3 = /* @__PURE__ */ jsx("div", {
-			...props,
-			className: t2,
-			"data-likec4-node-title": "",
-			ref,
-			children: title
-		});
-		$[6] = props;
-		$[7] = ref;
-		$[8] = t2;
-		$[9] = title;
-		$[10] = t3;
-	} else t3 = $[10];
-	return t3;
-});
-var Technology = forwardRef((t0, ref) => {
-	const $ = c(10);
-	let children;
-	let className;
-	let data;
-	let props;
-	if ($[0] !== t0) {
-		({data, children, className, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = data;
-		$[4] = props;
-	} else {
-		children = $[1];
-		className = $[2];
-		data = $[3];
-		props = $[4];
-	}
-	const text = data?.technology ?? children;
-	let t1;
-	if ($[5] !== className || $[6] !== props || $[7] !== ref || $[8] !== text) {
-		t1 = e(text) ? /* @__PURE__ */ jsx("div", {
-			...props,
-			className: cx(className, "likec4-element-technology"),
-			"data-likec4-node-technology": "",
-			ref,
-			children: text
-		}) : null;
-		$[5] = className;
-		$[6] = props;
-		$[7] = ref;
-		$[8] = text;
-		$[9] = t1;
-	} else t1 = $[9];
-	return t1;
-});
-var Description = forwardRef((t0, ref) => {
-	const $ = c(16);
-	let className;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({data: t1, className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-	}
-	const { description, style } = t1;
-	if (!description) return null;
-	let t2;
-	if ($[4] !== description) {
-		t2 = RichText$1.from(description);
-		$[4] = description;
-		$[5] = t2;
-	} else t2 = $[5];
-	const desc = t2;
-	let t3;
-	if ($[6] !== className) {
-		t3 = cx(className, "likec4-element-description");
-		$[6] = className;
-		$[7] = t3;
-	} else t3 = $[7];
-	const t4 = desc.isMarkdown ? style.sizing === "fixed" ? "calc(var(--likec4-text-size) * 0.74 * 1.2)" : "8rem" : void 0;
-	let t5;
-	if ($[8] !== t4) {
-		t5 = { maxHeight: t4 };
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
-	let t6;
-	if ($[10] !== desc || $[11] !== props || $[12] !== ref || $[13] !== t3 || $[14] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Markdown, {
-			...props,
-			className: t3,
-			"data-likec4-node-description": "",
-			value: desc,
-			uselikec4palette: true,
-			hideIfEmpty: true,
-			style: t5,
-			ref
-		});
-		$[10] = desc;
-		$[11] = props;
-		$[12] = ref;
-		$[13] = t3;
-		$[14] = t5;
-		$[15] = t6;
-	} else t6 = $[15];
-	return t6;
-});
-/**
-* Renders an element title, technology, description, and icon.
-*
-* @example
-* ```tsx
-* <ElementData {...nodeProps} />
-* ```
-* or
-* ```tsx
-* <ElementData.Root {...nodeProps} >
-*   <ElementData.Icon {...nodeProps} />
-*   <ElementData.Content>
-*     <ElementData.Title {...nodeProps} />
-*     <ElementData.Technology {...nodeProps} />
-*     <ElementData.Description {...nodeProps} />
-*   </ElementData.Content>
-* </ElementData.Root>
-* ```
-*/
-function ElementData(t0) {
-	const $ = c(9);
-	const { data, "aria-hidden": ariaHidden } = t0;
-	let t1;
-	if ($[0] !== data) {
-		t1 = /* @__PURE__ */ jsx(Icon, { data });
-		$[0] = data;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== data) {
-		t2 = /* @__PURE__ */ jsxs(Content, { children: [
-			/* @__PURE__ */ jsx(Title, { data }),
-			/* @__PURE__ */ jsx(Technology, { data }),
-			/* @__PURE__ */ jsx(Description, { data })
-		] });
-		$[2] = data;
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] !== ariaHidden || $[5] !== data || $[6] !== t1 || $[7] !== t2) {
-		t3 = /* @__PURE__ */ jsxs(Root, {
-			data,
-			"aria-hidden": ariaHidden,
-			children: [t1, t2]
-		});
-		$[4] = ariaHidden;
-		$[5] = data;
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-	} else t3 = $[8];
-	return t3;
-}
-ElementData.Root = Root;
-ElementData.Icon = Icon;
-ElementData.Content = Content;
-ElementData.Title = Title;
-ElementData.Technology = Technology;
-ElementData.Description = Description;
-//#endregion
-//#region ../diagram/src/base-primitives/element/ElementNodeContainer.tsx
-var variants = {
-	normal: { scale: 1 },
-	hovered: { scale: 1.05 },
-	selected: { scale: 1.02 },
-	tap: { scale: .98 }
-};
-/**
-* Top-level primitive to compose leaf nodes renderers.
-* This container provides the state via data-* attributes
-*/
-var ElementNodeContainer = forwardRef((t0, ref) => {
-	const $ = c(37);
-	let children;
-	let className;
-	let rest;
-	let style;
-	let t1;
-	if ($[0] !== t0) {
-		({nodeProps: t1, className, style, children, ...rest} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = rest;
-		$[4] = style;
-		$[5] = t1;
-	} else {
-		children = $[1];
-		className = $[2];
-		rest = $[3];
-		style = $[4];
-		t1 = $[5];
-	}
-	const { selected: t2, selectable: t3, data: t4 } = t1;
-	const selected = t2 === void 0 ? false : t2;
-	const selectable = t3 === void 0 ? false : t3;
-	let data;
-	let isDimmed;
-	let isHovered;
-	let t5;
-	let variant;
-	if ($[6] !== selected || $[7] !== t4) {
-		const { hovered: t6, dimmed: t7, ...t8 } = t4;
-		data = t8;
-		isHovered = t6 === void 0 ? false : t6;
-		isDimmed = t7 === void 0 ? false : t7;
-		bb0: switch (true) {
-			case isHovered:
-				variant = "hovered";
-				break bb0;
-			case selected:
-				variant = "selected";
-				break bb0;
-			default: variant = "normal";
-		}
-		t5 = ensureSizes$1(data.style ?? {});
-		$[6] = selected;
-		$[7] = t4;
-		$[8] = data;
-		$[9] = isDimmed;
-		$[10] = isHovered;
-		$[11] = t5;
-		$[12] = variant;
-	} else {
-		data = $[8];
-		isDimmed = $[9];
-		isHovered = $[10];
-		t5 = $[11];
-		variant = $[12];
-	}
-	const { size, padding, textSize } = t5;
-	let t6;
-	if ($[13] !== className) {
-		t6 = cx(elementNode(), "group", className);
-		$[13] = className;
-		$[14] = t6;
-	} else t6 = $[14];
-	let t7;
-	if ($[15] !== selectable || $[16] !== variant) {
-		t7 = selectable && {
-			animate: variant,
-			whileTap: "tap"
-		};
-		$[15] = selectable;
-		$[16] = variant;
-		$[17] = t7;
-	} else t7 = $[17];
-	let t8;
-	if ($[18] !== data.style?.sizing) {
-		t8 = data.style?.sizing === "fixed" && { "data-likec4-sizing": "fixed" };
-		$[18] = data.style?.sizing;
-		$[19] = t8;
-	} else t8 = $[19];
-	let t9;
-	if ($[20] !== isDimmed) {
-		t9 = isDimmed !== false && { "data-likec4-dimmed": isDimmed };
-		$[20] = isDimmed;
-		$[21] = t9;
-	} else t9 = $[21];
-	const t10 = style;
-	let t11;
-	if ($[22] !== children || $[23] !== data.color || $[24] !== data.shape || $[25] !== isHovered || $[26] !== padding || $[27] !== ref || $[28] !== rest || $[29] !== size || $[30] !== t10 || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== t9 || $[35] !== textSize) {
-		t11 = /* @__PURE__ */ jsx(MotionDiv, {
-			ref,
-			className: t6,
-			variants,
-			initial: false,
-			...t7,
-			"data-likec4-hovered": isHovered,
-			"data-likec4-color": data.color,
-			"data-likec4-shape": data.shape,
-			"data-likec4-shape-size": size,
-			"data-likec4-spacing": padding,
-			"data-likec4-text-size": textSize,
-			...t8,
-			...t9,
-			style: t10,
-			tabIndex: -1,
-			...rest,
-			children
-		});
-		$[22] = children;
-		$[23] = data.color;
-		$[24] = data.shape;
-		$[25] = isHovered;
-		$[26] = padding;
-		$[27] = ref;
-		$[28] = rest;
-		$[29] = size;
-		$[30] = t10;
-		$[31] = t6;
-		$[32] = t7;
-		$[33] = t8;
-		$[34] = t9;
-		$[35] = textSize;
-		$[36] = t11;
-	} else t11 = $[36];
-	return t11;
-});
-ElementNodeContainer.displayName = "ElementNodeContainer";
-//#endregion
-//#region ../diagram/src/base-primitives/element/ElementShape.tsx
-function cylinderSVGPath(diameter, height, tilt = .07) {
-	const radius = Math.round(diameter / 2);
-	const rx = radius;
-	const ry = roundDpr(tilt * radius);
-	const tiltAdjustedHeight = height - 2 * ry;
-	return {
-		path: `  M ${diameter},${ry}
-        a ${rx},${ry} 0,0,0 ${-diameter} 0
-        l 0,${tiltAdjustedHeight}
-        a ${rx},${ry} 0,0,0 ${diameter} 0
-        l 0,${-tiltAdjustedHeight}
-        z
-        `.replace(/\s+/g, " ").trim(),
-		ry,
-		rx
-	};
-}
-function docSVGPath(width, height) {
-	const baseY = roundDpr(height - height / 8 / 2);
-	const amplitude = roundDpr(height / 6);
-	const radius = 6;
-	return { path: `
-    M 0 ${baseY}
-    V ${radius}
-    Q 0 0 ${radius} 0
-    H ${width - radius}
-    Q ${width} 0 ${width} ${radius}
-    V ${baseY}
-    C ${roundDpr(width * .75)} ${baseY + amplitude}, ${roundDpr(width * .5)} ${baseY - amplitude}, 0 ${baseY}
-  `.replace(/\s+/g, " ").trim() };
-}
-function bucketSVGPath(width, height) {
-	const cx = width / 2;
-	const topRx = roundDpr(cx);
-	const topRy = roundDpr(Math.min(height / 8, topRx * .08));
-	const bottomRx = roundDpr(topRx * .8);
-	const bottomRy = roundDpr(topRy * 1.05);
-	const topY = topRy;
-	const bottomY = height - bottomRy;
-	const leftBottomX = cx - bottomRx;
-	return {
-		path: `
-    M ${width},${topY}
-    a ${topRx},${topRy} 0,0,0 ${-width} 0
-    L ${leftBottomX},${bottomY}
-    a ${bottomRx},${bottomRy} 0,0,0 ${bottomRx * 2} 0
-    Z
-  `.replace(/\s+/g, " ").trim(),
-		topRx,
-		topRy,
-		bottomRx,
-		bottomRy
-	};
-}
-function queueSVGPath(width, height, tilt = .185) {
-	const diameter = height;
-	const ry = Math.round(diameter / 2);
-	const rx = roundDpr(diameter / 2 * tilt);
-	return {
-		path: `
-    M ${rx},0
-    a ${rx},${ry} 0,0,0 0 ${diameter}
-    l ${width - 2 * rx},0
-    a ${rx},${ry} 0,0,0 0 ${-diameter}
-    z`.replace(/\s+/g, " ").trim(),
-		ry,
-		rx
-	};
-}
-var agentGeometry = (h) => ({
-	earW: 14,
-	earH: Math.min(Math.round(h * .38), 150),
-	stemW: 6,
-	stemH: 22,
-	ballR: 9
-});
-/**
-* Silhouette of the agent (body, ears and antenna), grown by `pad` on every side
-*/
-function agentSVGPath(w, h, pad = 0) {
-	const { earW, stemW, stemH, ballR, earH } = agentGeometry(h);
-	const r = 6 + pad;
-	const er = 3 + pad;
-	const cx = w / 2;
-	const sw = stemW / 2 + pad;
-	const R = ballR + pad;
-	const jy = roundDpr(-stemH + Math.sqrt(R * R - sw * sw));
-	const left = -pad;
-	const right = w + pad;
-	const top = -pad;
-	const bottom = h + pad;
-	const earTop = (h - earH) / 2 - pad;
-	const earBottom = (h + earH) / 2 + pad;
-	const earLeft = -(earW - 2) - pad;
-	const earRight = w + (earW - 2) + pad;
-	return `
-    M ${left + r},${top}
-    H ${cx - sw}
-    V ${jy}
-    A ${R} ${R} 0 1 1 ${cx + sw} ${jy}
-    V ${top}
-    H ${right - r}
-    A ${r} ${r} 0 0 1 ${right} ${top + r}
-    V ${earTop}
-    H ${earRight - er}
-    A ${er} ${er} 0 0 1 ${earRight} ${earTop + er}
-    V ${earBottom - er}
-    A ${er} ${er} 0 0 1 ${earRight - er} ${earBottom}
-    H ${right}
-    V ${bottom - r}
-    A ${r} ${r} 0 0 1 ${right - r} ${bottom}
-    H ${left + r}
-    A ${r} ${r} 0 0 1 ${left} ${bottom - r}
-    V ${earBottom}
-    H ${earLeft + er}
-    A ${er} ${er} 0 0 1 ${earLeft} ${earBottom - er}
-    V ${earTop + er}
-    A ${er} ${er} 0 0 1 ${earLeft + er} ${earTop}
-    H ${left}
-    V ${top + r}
-    A ${r} ${r} 0 0 1 ${left + r} ${top}
-    Z
-  `.replace(/\s+/g, " ").trim();
-}
-var PersonIcon = {
-	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`
-};
-var ComponentTopLeftRect = (t0) => {
-	const $ = c(5);
-	const { index, size } = t0;
-	let width;
-	let height;
-	let offsetX;
-	let offsetY;
-	let between;
-	bb0: switch (size) {
-		case "xs":
-		case "sm":
-			width = 40;
-			height = 18;
-			offsetX = -16;
-			offsetY = 16;
-			between = 10;
-			break bb0;
-		case "md":
-			width = 60;
-			height = 26;
-			offsetX = -20;
-			offsetY = 22;
-			between = 14;
-			break bb0;
-		case "lg":
-		case "xl":
-			width = 70;
-			height = 32;
-			offsetX = -24;
-			offsetY = 32;
-			between = 18;
-			break bb0;
-		default: nonexhaustive(size);
-	}
-	const t1 = offsetY + (height + between) * index;
-	let t2;
-	if ($[0] !== height || $[1] !== offsetX || $[2] !== t1 || $[3] !== width) {
-		t2 = /* @__PURE__ */ jsx("rect", {
-			x: offsetX,
-			y: t1,
-			width,
-			height,
-			rx: 3,
-			className: "top-left-rect",
-			strokeWidth: 2
-		});
-		$[0] = height;
-		$[1] = offsetX;
-		$[2] = t1;
-		$[3] = width;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
-};
-function ShapeSvg(t0) {
-	const $ = c(111);
-	const { shape, w, h, size: t1, isStacked: t2 } = t0;
-	const size = t1 === void 0 ? "md" : t1;
-	const isStacked = t2 === void 0 ? false : t2;
-	switch (shape) {
-		case "component": {
-			let t3;
-			if ($[0] !== h || $[1] !== w) {
-				t3 = /* @__PURE__ */ jsx("rect", {
-					width: w,
-					height: h,
-					rx: 6,
-					strokeWidth: 0
-				});
-				$[0] = h;
-				$[1] = w;
-				$[2] = t3;
-			} else t3 = $[2];
-			let t4;
-			let t5;
-			if ($[3] !== size) {
-				t4 = /* @__PURE__ */ jsx(ComponentTopLeftRect, {
-					index: 0,
-					size
-				});
-				t5 = /* @__PURE__ */ jsx(ComponentTopLeftRect, {
-					index: 1,
-					size
-				});
-				$[3] = size;
-				$[4] = t4;
-				$[5] = t5;
-			} else {
-				t4 = $[4];
-				t5 = $[5];
-			}
-			let t6;
-			if ($[6] !== t3 || $[7] !== t4 || $[8] !== t5) {
-				t6 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					t3,
-					t4,
-					t5
-				] });
-				$[6] = t3;
-				$[7] = t4;
-				$[8] = t5;
-				$[9] = t6;
-			} else t6 = $[9];
-			return t6;
-		}
-		case "mobile": {
-			let t3;
-			if ($[10] !== h || $[11] !== w) {
-				t3 = /* @__PURE__ */ jsx("rect", {
-					width: w,
-					height: h,
-					rx: 6,
-					"data-likec4-fill": "mix-stroke",
-					strokeWidth: 0
-				});
-				$[10] = h;
-				$[11] = w;
-				$[12] = t3;
-			} else t3 = $[12];
-			const t4 = h / 2;
-			let t5;
-			if ($[13] !== t4) {
-				t5 = /* @__PURE__ */ jsx("circle", {
-					cx: 17,
-					cy: t4,
-					r: 12
-				});
-				$[13] = t4;
-				$[14] = t5;
-			} else t5 = $[14];
-			const t6 = w - 44;
-			const t7 = h - 24;
-			let t8;
-			if ($[15] !== t6 || $[16] !== t7) {
-				t8 = /* @__PURE__ */ jsx("rect", {
-					x: 33,
-					y: 12,
-					width: t6,
-					height: t7,
-					rx: 5
-				});
-				$[15] = t6;
-				$[16] = t7;
-				$[17] = t8;
-			} else t8 = $[17];
-			let t9;
-			if ($[18] !== t5 || $[19] !== t8) {
-				t9 = /* @__PURE__ */ jsxs("g", {
-					"data-likec4-fill": "fill",
-					strokeWidth: 0,
-					children: [t5, t8]
-				});
-				$[18] = t5;
-				$[19] = t8;
-				$[20] = t9;
-			} else t9 = $[20];
-			let t10;
-			if ($[21] !== t3 || $[22] !== t9) {
-				t10 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t3, t9] });
-				$[21] = t3;
-				$[22] = t9;
-				$[23] = t10;
-			} else t10 = $[23];
-			return t10;
-		}
-		case "document": {
-			let t3;
-			if ($[24] !== h || $[25] !== w) {
-				t3 = docSVGPath(w, h);
-				$[24] = h;
-				$[25] = w;
-				$[26] = t3;
-			} else t3 = $[26];
-			const { path: path_2 } = t3;
-			let t4;
-			if ($[27] !== path_2) {
-				t4 = /* @__PURE__ */ jsx("path", {
-					d: path_2,
-					"data-likec4-fill": "fill",
-					strokeWidth: 2
-				});
-				$[27] = path_2;
-				$[28] = t4;
-			} else t4 = $[28];
-			return t4;
-		}
-		case "browser": {
-			let t3;
-			if ($[29] !== h || $[30] !== w) {
-				t3 = /* @__PURE__ */ jsx("rect", {
-					width: w,
-					height: h,
-					rx: 6,
-					"data-likec4-fill": "mix-stroke",
-					strokeWidth: 0
-				});
-				$[29] = h;
-				$[30] = w;
-				$[31] = t3;
-			} else t3 = $[31];
-			let t4;
-			let t5;
-			let t6;
-			if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-				t4 = /* @__PURE__ */ jsx("circle", {
-					cx: 16,
-					cy: 17,
-					r: 7
-				});
-				t5 = /* @__PURE__ */ jsx("circle", {
-					cx: 36,
-					cy: 17,
-					r: 7
-				});
-				t6 = /* @__PURE__ */ jsx("circle", {
-					cx: 56,
-					cy: 17,
-					r: 7
-				});
-				$[32] = t4;
-				$[33] = t5;
-				$[34] = t6;
-			} else {
-				t4 = $[32];
-				t5 = $[33];
-				t6 = $[34];
-			}
-			const t7 = w - 80;
-			let t8;
-			if ($[35] !== t7) {
-				t8 = /* @__PURE__ */ jsx("rect", {
-					x: 70,
-					y: 8,
-					width: t7,
-					height: 17,
-					rx: 4
-				});
-				$[35] = t7;
-				$[36] = t8;
-			} else t8 = $[36];
-			const t9 = w - 20;
-			const t10 = h - 42;
-			let t11;
-			if ($[37] !== t10 || $[38] !== t9) {
-				t11 = /* @__PURE__ */ jsx("rect", {
-					x: 10,
-					y: 32,
-					width: t9,
-					height: t10,
-					rx: 4
-				});
-				$[37] = t10;
-				$[38] = t9;
-				$[39] = t11;
-			} else t11 = $[39];
-			let t12;
-			if ($[40] !== t11 || $[41] !== t8) {
-				t12 = /* @__PURE__ */ jsxs("g", {
-					"data-likec4-fill": "fill",
-					strokeWidth: 0,
-					children: [
-						t4,
-						t5,
-						t6,
-						t8,
-						t11
-					]
-				});
-				$[40] = t11;
-				$[41] = t8;
-				$[42] = t12;
-			} else t12 = $[42];
-			let t13;
-			if ($[43] !== t12 || $[44] !== t3) {
-				t13 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t3, t12] });
-				$[43] = t12;
-				$[44] = t3;
-				$[45] = t13;
-			} else t13 = $[45];
-			return t13;
-		}
-		case "person": {
-			let t3;
-			if ($[46] !== h || $[47] !== w) {
-				t3 = /* @__PURE__ */ jsx("rect", {
-					width: w,
-					height: h,
-					rx: 6,
-					strokeWidth: 0
-				});
-				$[46] = h;
-				$[47] = w;
-				$[48] = t3;
-			} else t3 = $[48];
-			const t4 = w - PersonIcon.width - 6;
-			const t5 = h - PersonIcon.height;
-			let t6;
-			if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
-				t6 = /* @__PURE__ */ jsx("path", {
-					strokeWidth: 0,
-					d: PersonIcon.path
-				});
-				$[49] = t6;
-			} else t6 = $[49];
-			let t7;
-			if ($[50] !== t4 || $[51] !== t5) {
-				t7 = /* @__PURE__ */ jsx("svg", {
-					x: t4,
-					y: t5,
-					width: PersonIcon.width,
-					height: PersonIcon.height,
-					viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
-					"data-likec4-fill": "mix-stroke",
-					children: t6
-				});
-				$[50] = t4;
-				$[51] = t5;
-				$[52] = t7;
-			} else t7 = $[52];
-			let t8;
-			if ($[53] !== t3 || $[54] !== t7) {
-				t8 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t3, t7] });
-				$[53] = t3;
-				$[54] = t7;
-				$[55] = t8;
-			} else t8 = $[55];
-			return t8;
-		}
-		case "queue": {
-			let t3;
-			if ($[56] !== h || $[57] !== w) {
-				t3 = queueSVGPath(w, h);
-				$[56] = h;
-				$[57] = w;
-				$[58] = t3;
-			} else t3 = $[58];
-			const { path: path_1, rx: rx_0, ry: ry_0 } = t3;
-			let t4;
-			if ($[59] !== path_1) {
-				t4 = /* @__PURE__ */ jsx("path", {
-					d: path_1,
-					strokeWidth: 2
-				});
-				$[59] = path_1;
-				$[60] = t4;
-			} else t4 = $[60];
-			const t5 = ry_0 - .75;
-			let t6;
-			if ($[61] !== rx_0 || $[62] !== ry_0 || $[63] !== t5) {
-				t6 = /* @__PURE__ */ jsx("ellipse", {
-					cx: rx_0,
-					cy: ry_0,
-					ry: t5,
-					rx: rx_0,
-					"data-likec4-fill": "mix-stroke",
-					strokeWidth: 2
-				});
-				$[61] = rx_0;
-				$[62] = ry_0;
-				$[63] = t5;
-				$[64] = t6;
-			} else t6 = $[64];
-			let t7;
-			if ($[65] !== t4 || $[66] !== t6) {
-				t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t4, t6] });
-				$[65] = t4;
-				$[66] = t6;
-				$[67] = t7;
-			} else t7 = $[67];
-			return t7;
-		}
-		case "bucket": {
-			let t3;
-			if ($[68] !== h || $[69] !== w) {
-				t3 = bucketSVGPath(w, h);
-				$[68] = h;
-				$[69] = w;
-				$[70] = t3;
-			} else t3 = $[70];
-			const { path: path_0, topRx, topRy } = t3;
-			let t4;
-			if ($[71] !== path_0) {
-				t4 = /* @__PURE__ */ jsx("path", {
-					d: path_0,
-					strokeWidth: 2
-				});
-				$[71] = path_0;
-				$[72] = t4;
-			} else t4 = $[72];
-			const t5 = w / 2;
-			let t6;
-			if ($[73] !== t5 || $[74] !== topRx || $[75] !== topRy) {
-				t6 = /* @__PURE__ */ jsx("ellipse", {
-					cx: t5,
-					cy: topRy,
-					rx: topRx,
-					ry: topRy,
-					"data-likec4-fill": "mix-stroke",
-					strokeWidth: 2
-				});
-				$[73] = t5;
-				$[74] = topRx;
-				$[75] = topRy;
-				$[76] = t6;
-			} else t6 = $[76];
-			let t7;
-			if ($[77] !== t4 || $[78] !== t6) {
-				t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t4, t6] });
-				$[77] = t4;
-				$[78] = t6;
-				$[79] = t7;
-			} else t7 = $[79];
-			return t7;
-		}
-		case "storage":
-		case "cylinder": {
-			let t3;
-			if ($[80] !== h || $[81] !== w) {
-				t3 = cylinderSVGPath(w, h);
-				$[80] = h;
-				$[81] = w;
-				$[82] = t3;
-			} else t3 = $[82];
-			const { path, rx, ry } = t3;
-			let t4;
-			if ($[83] !== path) {
-				t4 = /* @__PURE__ */ jsx("path", {
-					d: path,
-					strokeWidth: 2
-				});
-				$[83] = path;
-				$[84] = t4;
-			} else t4 = $[84];
-			const t5 = rx - .75;
-			let t6;
-			if ($[85] !== rx || $[86] !== ry || $[87] !== t5) {
-				t6 = /* @__PURE__ */ jsx("ellipse", {
-					cx: rx,
-					cy: ry,
-					ry,
-					rx: t5,
-					"data-likec4-fill": "mix-stroke",
-					strokeWidth: 2
-				});
-				$[85] = rx;
-				$[86] = ry;
-				$[87] = t5;
-				$[88] = t6;
-			} else t6 = $[88];
-			let t7;
-			if ($[89] !== t4 || $[90] !== t6) {
-				t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t4, t6] });
-				$[89] = t4;
-				$[90] = t6;
-				$[91] = t7;
-			} else t7 = $[91];
-			return t7;
-		}
-		case "agent": {
-			let t3;
-			if ($[92] !== h) {
-				t3 = agentGeometry(h);
-				$[92] = h;
-				$[93] = t3;
-			} else t3 = $[93];
-			const { earW, earH, stemW, stemH, ballR } = t3;
-			const earY = (h - earH) / 2;
-			let t4;
-			if ($[94] !== ballR || $[95] !== earH || $[96] !== earW || $[97] !== earY || $[98] !== isStacked || $[99] !== stemH || $[100] !== stemW || $[101] !== w) {
-				t4 = !isStacked && /* @__PURE__ */ jsxs("g", {
-					"data-likec4-fill": "mix-stroke",
-					strokeWidth: 0,
-					children: [
-						/* @__PURE__ */ jsx("rect", {
-							x: -earW + 2,
-							y: earY,
-							width: earW,
-							height: earH,
-							rx: 3
-						}),
-						/* @__PURE__ */ jsx("rect", {
-							x: w - 2,
-							y: earY,
-							width: earW,
-							height: earH,
-							rx: 3
-						}),
-						/* @__PURE__ */ jsx("rect", {
-							x: (w - stemW) / 2,
-							y: -stemH,
-							width: stemW,
-							height: stemH + 2
-						}),
-						/* @__PURE__ */ jsx("circle", {
-							cx: w / 2,
-							cy: -stemH,
-							r: ballR
-						})
-					]
-				});
-				$[94] = ballR;
-				$[95] = earH;
-				$[96] = earW;
-				$[97] = earY;
-				$[98] = isStacked;
-				$[99] = stemH;
-				$[100] = stemW;
-				$[101] = w;
-				$[102] = t4;
-			} else t4 = $[102];
-			let t5;
-			if ($[103] !== h || $[104] !== w) {
-				t5 = /* @__PURE__ */ jsx("rect", {
-					width: w,
-					height: h,
-					rx: 6,
-					strokeWidth: 0
-				});
-				$[103] = h;
-				$[104] = w;
-				$[105] = t5;
-			} else t5 = $[105];
-			let t6;
-			if ($[106] !== t4 || $[107] !== t5) {
-				t6 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t4, t5] });
-				$[106] = t4;
-				$[107] = t5;
-				$[108] = t6;
-			} else t6 = $[108];
-			return t6;
-		}
-		default: {
-			let t3;
-			if ($[109] !== shape) {
-				t3 = nonexhaustive(shape);
-				$[109] = shape;
-				$[110] = t3;
-			} else t3 = $[110];
-			return t3;
-		}
-	}
-}
-/**
-* When element is selected, this component is used to render the indicator
-*/
-function ShapeSvgOutline(t0) {
-	const $ = c(30);
-	const { shape, w, h } = t0;
-	let svg;
-	bb0: switch (shape) {
-		case "bucket": {
-			const t1 = w + 6;
-			const t2 = h + 6;
-			let t3;
-			if ($[0] !== t1 || $[1] !== t2) {
-				t3 = bucketSVGPath(t1, t2);
-				$[0] = t1;
-				$[1] = t2;
-				$[2] = t3;
-			} else t3 = $[2];
-			let t4;
-			if ($[3] !== t3.path) {
-				t4 = /* @__PURE__ */ jsx("g", {
-					transform: "translate(-3 -3)",
-					children: /* @__PURE__ */ jsx("path", { d: t3.path })
-				});
-				$[3] = t3.path;
-				$[4] = t4;
-			} else t4 = $[4];
-			svg = t4;
-			break bb0;
-		}
-		case "queue": {
-			const t1 = w + 6;
-			const t2 = h + 6;
-			let t3;
-			if ($[5] !== t1 || $[6] !== t2) {
-				t3 = queueSVGPath(t1, t2);
-				$[5] = t1;
-				$[6] = t2;
-				$[7] = t3;
-			} else t3 = $[7];
-			let t4;
-			if ($[8] !== t3.path) {
-				t4 = /* @__PURE__ */ jsx("g", {
-					transform: "translate(-3 -3)",
-					children: /* @__PURE__ */ jsx("path", { d: t3.path })
-				});
-				$[8] = t3.path;
-				$[9] = t4;
-			} else t4 = $[9];
-			svg = t4;
-			break bb0;
-		}
-		case "document": {
-			const t1 = w + 6;
-			const t2 = h + 6;
-			let t3;
-			if ($[10] !== t1 || $[11] !== t2) {
-				t3 = docSVGPath(t1, t2);
-				$[10] = t1;
-				$[11] = t2;
-				$[12] = t3;
-			} else t3 = $[12];
-			let t4;
-			if ($[13] !== t3.path) {
-				t4 = /* @__PURE__ */ jsx("g", {
-					transform: "translate(-3 -3)",
-					children: /* @__PURE__ */ jsx("path", { d: t3.path })
-				});
-				$[13] = t3.path;
-				$[14] = t4;
-			} else t4 = $[14];
-			svg = t4;
-			break bb0;
-		}
-		case "agent": {
-			let t1;
-			if ($[15] !== h || $[16] !== w) {
-				t1 = agentSVGPath(w, h, 3);
-				$[15] = h;
-				$[16] = w;
-				$[17] = t1;
-			} else t1 = $[17];
-			let t2;
-			if ($[18] !== t1) {
-				t2 = /* @__PURE__ */ jsx("path", { d: t1 });
-				$[18] = t1;
-				$[19] = t2;
-			} else t2 = $[19];
-			svg = t2;
-			break bb0;
-		}
-		case "storage":
-		case "cylinder": {
-			const t1 = w + 6;
-			const t2 = h + 6;
-			let t3;
-			if ($[20] !== t1 || $[21] !== t2) {
-				t3 = cylinderSVGPath(t1, t2);
-				$[20] = t1;
-				$[21] = t2;
-				$[22] = t3;
-			} else t3 = $[22];
-			let t4;
-			if ($[23] !== t3.path) {
-				t4 = /* @__PURE__ */ jsx("g", {
-					transform: "translate(-3 -3)",
-					children: /* @__PURE__ */ jsx("path", { d: t3.path })
-				});
-				$[23] = t3.path;
-				$[24] = t4;
-			} else t4 = $[24];
-			svg = t4;
-			break bb0;
-		}
-		default: {
-			const t1 = w + 6;
-			const t2 = h + 6;
-			let t3;
-			if ($[25] !== t1 || $[26] !== t2) {
-				t3 = /* @__PURE__ */ jsx("rect", {
-					x: -3,
-					y: -3,
-					width: t1,
-					height: t2,
-					rx: 8
-				});
-				$[25] = t1;
-				$[26] = t2;
-				$[27] = t3;
-			} else t3 = $[27];
-			svg = t3;
-		}
-	}
-	let t1;
-	if ($[28] !== svg) {
-		t1 = /* @__PURE__ */ jsx("g", {
-			className: "likec4-shape-outline",
-			children: svg
-		});
-		$[28] = svg;
-		$[29] = t1;
-	} else t1 = $[29];
-	return t1;
-}
-function ElementShape(t0) {
-	const $ = c(38);
-	const { data, width, height, showSelectionOutline: t1 } = t0;
-	const showSelectionOutline = t1 === void 0 ? true : t1;
-	const w = !!width && width > 10 ? width : data.width;
-	const h = !!height && height > 10 ? height : data.height;
-	const isMultiple = data.style?.multiple ?? false;
-	const borderStyle = data.style?.border ?? "none";
-	const withBorder = borderStyle !== "none";
-	if (data.shape === "rectangle") {
-		let t2;
-		if ($[0] !== borderStyle) {
-			t2 = { borderStyle };
-			$[0] = borderStyle;
-			$[1] = t2;
-		} else t2 = $[1];
-		let t3;
-		if ($[2] !== showSelectionOutline || $[3] !== withBorder) {
-			t3 = elementShapeRecipe({
-				shapetype: "html",
-				withBorder,
-				withOutline: showSelectionOutline
-			});
-			$[2] = showSelectionOutline;
-			$[3] = withBorder;
-			$[4] = t3;
-		} else t3 = $[4];
-		let t4;
-		if ($[5] !== isMultiple) {
-			t4 = isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" });
-			$[5] = isMultiple;
-			$[6] = t4;
-		} else t4 = $[6];
-		let t5;
-		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-			t5 = /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" });
-			$[7] = t5;
-		} else t5 = $[7];
-		let t6;
-		if ($[8] !== t2 || $[9] !== t3 || $[10] !== t4) {
-			t6 = /* @__PURE__ */ jsxs("div", {
-				"aria-hidden": true,
-				style: t2,
-				className: t3,
-				children: [t4, t5]
-			});
-			$[8] = t2;
-			$[9] = t3;
-			$[10] = t4;
-			$[11] = t6;
-		} else t6 = $[11];
-		return t6;
-	}
-	let t2;
-	if ($[12] !== showSelectionOutline) {
-		t2 = elementShapeRecipe({
-			shapetype: "svg",
-			withOutline: showSelectionOutline
-		});
-		$[12] = showSelectionOutline;
-		$[13] = t2;
-	} else t2 = $[13];
-	const className = t2;
-	let t3;
-	if ($[14] !== className || $[15] !== data.shape || $[16] !== data.style?.size || $[17] !== h || $[18] !== isMultiple || $[19] !== w) {
-		t3 = isMultiple && /* @__PURE__ */ jsx("svg", {
-			"aria-hidden": true,
-			className,
-			"data-likec4-shape-multiple": "true",
-			viewBox: `0 0 ${w} ${h}`,
-			children: /* @__PURE__ */ jsx(ShapeSvg, {
-				shape: data.shape,
-				size: data.style?.size,
-				w,
-				h,
-				isStacked: true
-			})
-		});
-		$[14] = className;
-		$[15] = data.shape;
-		$[16] = data.style?.size;
-		$[17] = h;
-		$[18] = isMultiple;
-		$[19] = w;
-		$[20] = t3;
-	} else t3 = $[20];
-	const t4 = `0 0 ${w} ${h}`;
-	let t5;
-	if ($[21] !== data.shape || $[22] !== h || $[23] !== w) {
-		t5 = /* @__PURE__ */ jsx(ShapeSvgOutline, {
-			shape: data.shape,
-			w,
-			h
-		});
-		$[21] = data.shape;
-		$[22] = h;
-		$[23] = w;
-		$[24] = t5;
-	} else t5 = $[24];
-	const t6 = data.style?.size;
-	let t7;
-	if ($[25] !== data.shape || $[26] !== h || $[27] !== t6 || $[28] !== w) {
-		t7 = /* @__PURE__ */ jsx(ShapeSvg, {
-			shape: data.shape,
-			size: t6,
-			w,
-			h
-		});
-		$[25] = data.shape;
-		$[26] = h;
-		$[27] = t6;
-		$[28] = w;
-		$[29] = t7;
-	} else t7 = $[29];
-	let t8;
-	if ($[30] !== className || $[31] !== t4 || $[32] !== t5 || $[33] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("svg", {
-			"aria-hidden": true,
-			className,
-			viewBox: t4,
-			children: [t5, t7]
-		});
-		$[30] = className;
-		$[31] = t4;
-		$[32] = t5;
-		$[33] = t7;
-		$[34] = t8;
-	} else t8 = $[34];
-	let t9;
-	if ($[35] !== t3 || $[36] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t3, t8] });
-		$[35] = t3;
-		$[36] = t8;
-		$[37] = t9;
-	} else t9 = $[37];
-	return t9;
-}
-//#endregion
-//#region ../diagram/src/base-primitives/memoEdge.ts
-var isSame = (a, b) => {
-	return Math.abs(a - b) < 2.5;
-};
-var edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.animated ?? false, next.animated ?? false) && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.targetPosition, next.targetPosition) && deepEqual(prev.data, next.data);
-function memoEdge(Edge) {
-	const Memo = memo(Edge, edgePropsEqual);
-	Memo.displayName = `MemoEdge(${Edge.displayName || Edge.name})`;
-	return Memo;
-}
-//#endregion
-//#region ../diagram/src/base-primitives/NodeHandles.tsx
-/**
-* XYFlow requires handles to be defined on nodes.
-*/
-function DefaultHandles(t0) {
-	const $ = c(7);
-	const { direction: t1 } = t0;
-	const direction = t1 === void 0 ? "TB" : t1;
-	let sourcePosition;
-	let targetPosition;
-	bb0: switch (direction) {
-		case "TB":
-			sourcePosition = Position.Bottom;
-			targetPosition = Position.Top;
-			break bb0;
-		case "BT":
-			sourcePosition = Position.Top;
-			targetPosition = Position.Bottom;
-			break bb0;
-		case "LR":
-			sourcePosition = Position.Right;
-			targetPosition = Position.Left;
-			break bb0;
-		case "RL":
-			sourcePosition = Position.Left;
-			targetPosition = Position.Right;
-			break bb0;
-		default: nonexhaustive(direction);
-	}
-	let t2;
-	if ($[0] !== sourcePosition) {
-		t2 = /* @__PURE__ */ jsx(Handle, {
-			type: "source",
-			position: sourcePosition,
-			className: "likec4-node-handle-center"
-		});
-		$[0] = sourcePosition;
-		$[1] = t2;
-	} else t2 = $[1];
-	let t3;
-	if ($[2] !== targetPosition) {
-		t3 = /* @__PURE__ */ jsx(Handle, {
-			type: "target",
-			position: targetPosition,
-			className: "likec4-node-handle-center"
-		});
-		$[2] = targetPosition;
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] !== t2 || $[5] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t2, t3] });
-		$[4] = t2;
-		$[5] = t3;
-		$[6] = t4;
-	} else t4 = $[6];
-	return t4;
-}
-//#endregion
-//#region ../diagram/src/LikeC4Styles.tsx
-var scheme = (scheme) => `[data-mantine-color-scheme="${scheme}"]`;
-var whenDark = scheme("dark");
-var generateCompoundColors = (rootSelector, name, colors, depth) => {
-	return `
-${`${rootSelector} :is([data-likec4-color="${name}"][data-compound-depth="${depth}"])`} {
-  --likec4-palette-fill: ${colors.fill};
-  --likec4-palette-stroke: ${colors.stroke};  
-}
-  `;
-};
-function toStyle(styles, params) {
-	const { rootSelector, name, colors } = params;
-	const { elements, relationships } = colors;
-	const selector = `${rootSelector} :is([data-likec4-color=${name}])`;
-	return [`
-${selector} {
-  --likec4-palette-fill: ${elements.fill};
-  --likec4-palette-stroke: ${elements.stroke};
-  --likec4-palette-hiContrast: ${elements.hiContrast};
-  --likec4-palette-loContrast: ${elements.loContrast};
-  --likec4-palette-relation-stroke: ${relationships.line};
-  --likec4-palette-relation-label: ${relationships.label};
-  --likec4-palette-relation-label-bg: ${relationships.labelBg};
-  --likec4-palette-relation-stroke-selected: oklch(from ${relationships.line} calc(l - 0.15) c h);
-}
-${whenDark} ${selector} {
-  --likec4-palette-relation-stroke-selected: oklch(from ${relationships.line} calc(l + 0.15) c h);
-}
-
-  `, ...styles.colorsForCompounds(elements, 5).map((colors, depth) => generateCompoundColors(rootSelector, name, colors, depth + 1))].map((s) => s.trim()).join("\n");
-}
-function generateBuiltInColorStyles(styles, rootSelector) {
-	return t$8(styles.theme.colors, t$3(), t$7(([name, colors]) => toStyle(styles, {
-		rootSelector,
-		name,
-		colors
-	})), t$2("\n"));
-}
-/**
-* Component that renders LikeC4 theme colors as CSS variables
-* scoped to the provided root selector
-*/
-function LikeC4Styles$1({ rootSelector }) {
-	const nonce = useMantineStyleNonce()?.();
-	const $styles = useLikeC4Styles();
-	const colorsStyles = useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles.fingerprint]);
-	return /* @__PURE__ */ jsx(MemoizedStyle, {
-		id: $styles.fingerprint,
-		nonce,
-		colorsStyles
-	});
-}
-__name(LikeC4Styles$1, "LikeC4Styles");
-/**
-* @internal Memoized styles gives a performance boost during development
-*/
-var MemoizedStyle = memo((t0) => {
-	const $ = c(4);
-	const { id, nonce, colorsStyles } = t0;
-	const t1 = nonce || void 0;
-	let t2;
-	if ($[0] !== colorsStyles || $[1] !== id || $[2] !== t1) {
-		t2 = /* @__PURE__ */ jsx("style", {
-			type: "text/css",
-			"data-likec4-colors": id,
-			nonce: t1,
-			children: colorsStyles
-		});
-		$[0] = colorsStyles;
-		$[1] = id;
-		$[2] = t1;
-		$[3] = t2;
-	} else t2 = $[3];
-	return t2;
-});
-MemoizedStyle.displayName = "MemoizedStyle";
-//#endregion
-export { useCallbackRef as $, useRootContainer as A, getNodeIntersectionFromCenterToPoint as B, LikeC4ModelContextProvider as C, EnsureMantine as D, FramerMotionConfig as E, Base as F, parsePaddings as G, isSamePoint as H, hasSubObject as I, selectXYStore as J, stopPropagation as K, bezierControlPoints as L, useRootContainerElement as M, useRootContainerRef as N, LikeC4MantineProvider as O, BaseXYFlow as P, useXYStoreApi as Q, bezierPath as R, CurrentViewModelContext as S, useOptionalLikeC4Model as T, leafNodeRects as U, isEqualRects as V, nodeToRect as W, useXYFlow as X, useCurrentZoomAtLeast as Y, useXYStore as Z, useLikeC4ProjectsContext as _, ElementNodeContainer as a, IconRenderer as at, useId$1 as b, EdgePath as c, t$1 as ct, EdgeContainer as d, e$1 as dt, FitViewPaddings as et, Logo as f, e$2 as ft, useLikeC4Projects as g, useLikeC4ProjectId as h, t$5 as ht, ElementShape as i, IconOrShapeRenderer as it, useRootContainerContext as j, RootContainer as k, EdgeLabelContainer as l, t$2 as lt, useChangeLikeC4Project as m, t$4 as mt, DefaultHandles as n, MinZoom as nt, ElementData as o, IconRendererProvider as ot, LogoIcon as p, t$3 as pt, roundDpr as q, memoEdge as r, ZIndexes as rt, ElementActionButtons as s, IconZoomScan as st, LikeC4Styles$1 as t, IS_SERVER as tt, EdgeLabel as u, e as ut, LikeC4ProjectsContextProvider as v, useOptionalCurrentViewModel as w, useLikeC4Styles as x, useOptionalProjectsContext as y, getNodeCenter as z };