likec4 1.60.0 → 1.61.0

package/__app__/src/pages/ViewAsD2.mjs

@@ -0,0 +1,105 @@
+import "../chunks/rolldown-runtime.mjs";
+import { s as Box$1 } from "../chunks/styled-system.mjs";
+import { t as useAsync } from "../chunks/useAsync.mjs";
+import { n as xo, r as yo, t as mo } from "../chunks/libs/react-resizable-panels.mjs";
+import { CopyToClipboard } from "../components/CopyToClipboard.mjs";
+import { cssCodeBlock, cssScrollArea, svgContainer, viewWithTopPadding } from "./styles.css.mjs";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { krokiD2SvgUrl } from "likec4:app-config";
+import { Button, Code, ScrollArea } from "@mantine/core";
+// src/pages/ViewAsD2.tsx
+var fetchFromKroki = async (d2) => {
+	return await (await fetch(krokiD2SvgUrl, {
+		method: "POST",
+		cache: "force-cache",
+		body: JSON.stringify({
+			diagram_source: d2,
+			output_format: "svg"
+		}),
+		headers: { "Content-Type": "application/json" }
+	})).text();
+};
+function ViewAsD2(t0) {
+	const $ = c(18);
+	const { d2Source } = t0;
+	const [krokiSvg, t1] = useAsync(fetchFromKroki, null);
+	const { execute } = t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { viewport: { borderRadius: 6 } };
+		$[0] = t2;
+	} else t2 = $[0];
+	let t3;
+	if ($[1] !== d2Source) {
+		t3 = /* @__PURE__ */ jsx(yo, { children: /* @__PURE__ */ jsxs(ScrollArea, {
+			className: cssScrollArea,
+			p: 5,
+			styles: t2,
+			children: [/* @__PURE__ */ jsx(Code, {
+				block: true,
+				className: cssCodeBlock,
+				children: d2Source
+			}), /* @__PURE__ */ jsx(CopyToClipboard, { text: d2Source })]
+		}) });
+		$[1] = d2Source;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(xo, { style: { width: 10 } });
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== d2Source || $[5] !== execute || $[6] !== krokiSvg.error?.message || $[7] !== krokiSvg.status) {
+		t5 = krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			mt: "xs",
+			variant: "light",
+			disabled: krokiSvg.status === "loading",
+			onClick: () => void execute(d2Source),
+			children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
+		}), krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box$1, { children: krokiSvg.error?.message })] });
+		$[4] = d2Source;
+		$[5] = execute;
+		$[6] = krokiSvg.error?.message;
+		$[7] = krokiSvg.status;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== krokiSvg.result || $[10] !== krokiSvg.status) {
+		t6 = krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box$1, {
+			className: svgContainer,
+			children: !krokiSvg.result ? /* @__PURE__ */ jsx(Box$1, { children: "Empty result" }) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } })
+		});
+		$[9] = krokiSvg.result;
+		$[10] = krokiSvg.status;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t5 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(yo, { children: /* @__PURE__ */ jsxs(ScrollArea, {
+			h: "100%",
+			children: [t5, t6]
+		}) });
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t3 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(mo, {
+			className: viewWithTopPadding,
+			orientation: "horizontal",
+			children: [
+				t3,
+				t4,
+				t7
+			]
+		}) });
+		$[15] = t3;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+export { ViewAsD2 };

package/__app__/src/pages/ViewAsDot.mjs

@@ -0,0 +1,65 @@
+import "../chunks/rolldown-runtime.mjs";
+import { n as xo, r as yo, t as mo } from "../chunks/libs/react-resizable-panels.mjs";
+import { CopyToClipboard } from "../components/CopyToClipboard.mjs";
+import { cssCodeBlock, cssScrollArea, svgContainer, viewWithTopPadding } from "./styles.css.mjs";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Code, ScrollArea } from "@mantine/core";
+// src/pages/ViewAsDot.tsx
+function ViewAsDot(t0) {
+	const $ = c(9);
+	const { dot, dotSvg } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { viewport: { borderRadius: 6 } };
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== dot) {
+		t2 = /* @__PURE__ */ jsx(yo, { children: /* @__PURE__ */ jsxs(ScrollArea, {
+			className: cssScrollArea,
+			p: 5,
+			styles: t1,
+			children: [/* @__PURE__ */ jsx(Code, {
+				block: true,
+				className: cssCodeBlock,
+				children: dot
+			}), /* @__PURE__ */ jsx(CopyToClipboard, { text: dot })]
+		}) });
+		$[1] = dot;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(xo, { style: { width: 10 } });
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== dotSvg) {
+		t4 = /* @__PURE__ */ jsx(yo, { children: /* @__PURE__ */ jsx(ScrollArea, {
+			h: "100%",
+			children: /* @__PURE__ */ jsx("div", {
+				className: svgContainer,
+				dangerouslySetInnerHTML: { __html: dotSvg }
+			})
+		}) });
+		$[4] = dotSvg;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t2 || $[7] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(mo, {
+			className: viewWithTopPadding,
+			children: [
+				t2,
+				t3,
+				t4
+			]
+		}) });
+		$[6] = t2;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+}
+export { ViewAsDot };

package/__app__/src/pages/ViewAsMmd.mjs

@@ -0,0 +1,109 @@
+import "../chunks/rolldown-runtime.mjs";
+import { s as Box$1 } from "../chunks/styled-system.mjs";
+import { t as useAsync } from "../chunks/useAsync.mjs";
+import { n as xo, r as yo, t as mo } from "../chunks/libs/react-resizable-panels.mjs";
+import { CopyToClipboard } from "../components/CopyToClipboard.mjs";
+import { cssCodeBlock, cssScrollArea, svgContainer, viewWithTopPadding } from "./styles.css.mjs";
+import { useEffect } from "react";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Code, ScrollArea, useMantineColorScheme } from "@mantine/core";
+// src/pages/ViewAsMmd.tsx
+var renderSvg = async (viewId, diagram, theme) => {
+	const { default: mermaid } = await import("https://cdn.jsdelivr.net/npm/mermaid@11.12/dist/mermaid.esm.min.mjs");
+	mermaid.initialize({ theme });
+	const { svg } = await mermaid.render(viewId, diagram);
+	return svg;
+};
+function ViewAsMmd(t0) {
+	const $ = c(20);
+	const { viewId, mmdSource } = t0;
+	const { colorScheme } = useMantineColorScheme();
+	const theme = colorScheme === "auto" ? "dark" : colorScheme;
+	const [mmdSvg, t1] = useAsync(renderSvg, null);
+	const { execute } = t1;
+	let t2;
+	if ($[0] !== execute || $[1] !== mmdSource || $[2] !== theme || $[3] !== viewId) {
+		t2 = () => {
+			execute(viewId, mmdSource, theme);
+		};
+		$[0] = execute;
+		$[1] = mmdSource;
+		$[2] = theme;
+		$[3] = viewId;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== mmdSource || $[6] !== theme || $[7] !== viewId) {
+		t3 = [
+			mmdSource,
+			theme,
+			viewId
+		];
+		$[5] = mmdSource;
+		$[6] = theme;
+		$[7] = viewId;
+		$[8] = t3;
+	} else t3 = $[8];
+	useEffect(t2, t3);
+	let t4;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { viewport: { borderRadius: 6 } };
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== mmdSource) {
+		t5 = /* @__PURE__ */ jsx(yo, { children: /* @__PURE__ */ jsxs(ScrollArea, {
+			className: cssScrollArea,
+			p: 5,
+			styles: t4,
+			children: [/* @__PURE__ */ jsx(Code, {
+				block: true,
+				className: cssCodeBlock,
+				children: mmdSource
+			}), /* @__PURE__ */ jsx(CopyToClipboard, { text: mmdSource })]
+		}) });
+		$[10] = mmdSource;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(xo, { style: { width: 10 } });
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== mmdSvg.result) {
+		t7 = mmdSvg.result && /* @__PURE__ */ jsx(Box$1, {
+			className: svgContainer,
+			dangerouslySetInnerHTML: { __html: mmdSvg.result }
+		});
+		$[13] = mmdSvg.result;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(yo, { children: /* @__PURE__ */ jsx(ScrollArea, {
+			h: "100%",
+			children: t7
+		}) });
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t5 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(mo, {
+			className: viewWithTopPadding,
+			orientation: "horizontal",
+			children: [
+				t5,
+				t6,
+				t8
+			]
+		}) });
+		$[17] = t5;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	return t9;
+}
+export { ViewAsMmd };

package/__app__/src/pages/ViewAsPuml.mjs

@@ -0,0 +1,105 @@
+import "../chunks/rolldown-runtime.mjs";
+import { s as Box$1 } from "../chunks/styled-system.mjs";
+import { t as useAsync } from "../chunks/useAsync.mjs";
+import { n as xo, r as yo, t as mo } from "../chunks/libs/react-resizable-panels.mjs";
+import { CopyToClipboard } from "../components/CopyToClipboard.mjs";
+import { cssCodeBlock, cssScrollArea, svgContainer, viewWithTopPadding } from "./styles.css.mjs";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { krokiPumlSvgUrl } from "likec4:app-config";
+import { Button, Code, ScrollArea } from "@mantine/core";
+// src/pages/ViewAsPuml.tsx
+var fetchFromKroki = async (puml) => {
+	return await (await fetch(krokiPumlSvgUrl, {
+		method: "POST",
+		cache: "force-cache",
+		body: JSON.stringify({
+			diagram_source: puml,
+			output_format: "svg"
+		}),
+		headers: { "Content-Type": "application/json" }
+	})).text();
+};
+function ViewAsPuml(t0) {
+	const $ = c(18);
+	const { pumlSource } = t0;
+	const [krokiSvg, t1] = useAsync(fetchFromKroki, null);
+	const { execute } = t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { viewport: { borderRadius: 6 } };
+		$[0] = t2;
+	} else t2 = $[0];
+	let t3;
+	if ($[1] !== pumlSource) {
+		t3 = /* @__PURE__ */ jsx(yo, { children: /* @__PURE__ */ jsxs(ScrollArea, {
+			className: cssScrollArea,
+			p: 5,
+			styles: t2,
+			children: [/* @__PURE__ */ jsx(Code, {
+				block: true,
+				className: cssCodeBlock,
+				children: pumlSource
+			}), /* @__PURE__ */ jsx(CopyToClipboard, { text: pumlSource })]
+		}) });
+		$[1] = pumlSource;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(xo, { style: { width: 10 } });
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== execute || $[5] !== krokiSvg.error?.message || $[6] !== krokiSvg.status || $[7] !== pumlSource) {
+		t5 = krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			mt: "xs",
+			variant: "light",
+			disabled: krokiSvg.status === "loading",
+			onClick: () => void execute(pumlSource),
+			children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
+		}), krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box$1, { children: krokiSvg.error?.message })] });
+		$[4] = execute;
+		$[5] = krokiSvg.error?.message;
+		$[6] = krokiSvg.status;
+		$[7] = pumlSource;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== krokiSvg.result || $[10] !== krokiSvg.status) {
+		t6 = krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box$1, {
+			className: svgContainer,
+			children: !krokiSvg.result ? /* @__PURE__ */ jsx(Box$1, { children: "Empty result" }) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } })
+		});
+		$[9] = krokiSvg.result;
+		$[10] = krokiSvg.status;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t5 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(yo, { children: /* @__PURE__ */ jsxs(ScrollArea, {
+			h: "100%",
+			children: [t5, t6]
+		}) });
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t3 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(mo, {
+			className: viewWithTopPadding,
+			orientation: "horizontal",
+			children: [
+				t3,
+				t4,
+				t7
+			]
+		}) });
+		$[15] = t3;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+export { ViewAsPuml };

package/__app__/src/pages/ViewEditor.mjs

@@ -0,0 +1,220 @@
+import "../chunks/rolldown-runtime.mjs";
+import { c as useNavigate, l as useSearch } from "../chunks/libs/@tanstack.mjs";
+import { LazyAIChat } from "../aichat/index.mjs";
+import { CompareModelProvider } from "../components/model-diff/CompareModelProvider.mjs";
+import { ModelDiffPanel, useCompareView } from "../components/model-diff/ModelDiffPanel.mjs";
+import { NotFound } from "../components/NotFound.mjs";
+import { useLikeC4ModelAtom } from "../context/safeCtx.mjs";
+import { n as useCurrentView, t as useCurrentProject } from "../chunks/hooks.mjs";
+import { t as useRelationshipBrowserScope } from "../chunks/scope.mjs";
+import { n as ListenForDiagramStateChanges, r as OpenRelationshipBrowserFromUrl, t as FocusElementFromUrl } from "../chunks/ViewReact.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isDevelopment } from "likec4:app-config";
+import { LikeC4Diagram, LikeC4EditorProvider } from "likec4/react";
+import { useCallbackRef } from "@mantine/hooks";
+import { isAIAvailable, likec4rpc } from "likec4:rpc";
+// src/pages/ViewEditor.tsx
+function ViewEditor() {
+	const $ = c(40);
+	const navigate = useNavigate();
+	const project = useCurrentProject();
+	const [view, setLayoutType] = useCurrentView();
+	const [relationshipBrowserScope, setRelationshipBrowserScope] = useRelationshipBrowserScope(project);
+	const $likec4model = useLikeC4ModelAtom();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { strict: false };
+		$[0] = t0;
+	} else t0 = $[0];
+	const { dynamic } = useSearch(t0);
+	const compareView = useCompareView(view?.id);
+	let t1;
+	if ($[1] !== navigate) {
+		t1 = (viewId) => {
+			navigate({
+				to: "./",
+				viewTransition: false,
+				params: (current) => ({
+					...current,
+					viewId
+				}),
+				search: true
+			});
+		};
+		$[1] = navigate;
+		$[2] = t1;
+	} else t1 = $[2];
+	const onNavigateTo = useCallbackRef(t1);
+	if (!view) {
+		let t2;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(NotFound, {});
+			$[3] = t2;
+		} else t2 = $[3];
+		return t2;
+	}
+	let t2;
+	if ($[4] !== view.notation?.nodes) {
+		t2 = view.notation?.nodes ?? [];
+		$[4] = view.notation?.nodes;
+		$[5] = t2;
+	} else t2 = $[5];
+	const hasNotations = t2.length > 0;
+	const isComparing = compareView !== null;
+	const t3 = compareView ?? view;
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			top: "70px",
+			bottom: "32px",
+			left: "50px",
+			right: "32px"
+		};
+		$[6] = t4;
+	} else t4 = $[6];
+	const t5 = isDevelopment || hasNotations;
+	const t6 = !isComparing;
+	const t7 = !isComparing;
+	let t8;
+	if ($[7] !== navigate) {
+		t8 = () => {
+			navigate({ to: "/" });
+		};
+		$[7] = navigate;
+		$[8] = t8;
+	} else t8 = $[8];
+	let t9;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(ListenForDiagramStateChanges, {});
+		$[9] = t9;
+	} else t9 = $[9];
+	let t10;
+	if ($[10] !== relationshipBrowserScope) {
+		t10 = /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, { relationshipBrowserScope });
+		$[10] = relationshipBrowserScope;
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	let t12;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(FocusElementFromUrl, {});
+		t12 = /* @__PURE__ */ jsx(LazyAIChat, {});
+		$[12] = t11;
+		$[13] = t12;
+	} else {
+		t11 = $[12];
+		t12 = $[13];
+	}
+	let t13;
+	if ($[14] !== dynamic || $[15] !== onNavigateTo || $[16] !== relationshipBrowserScope || $[17] !== setLayoutType || $[18] !== setRelationshipBrowserScope || $[19] !== t10 || $[20] !== t3 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8) {
+		t13 = /* @__PURE__ */ jsxs(LikeC4Diagram, {
+			view: t3,
+			zoomable: true,
+			pannable: true,
+			controls: true,
+			fitViewPadding: t4,
+			showNavigationButtons: true,
+			enableNotations: t5,
+			enableSearch: true,
+			enableDynamicViewWalkthrough: t6,
+			enableFocusMode: true,
+			enableElementDetails: true,
+			enableRelationshipDetails: true,
+			enableRelationshipBrowser: true,
+			relationshipBrowserScope,
+			onRelationshipBrowserScopeChange: setRelationshipBrowserScope,
+			enableElementTags: true,
+			enableCompareWithLatest: t7,
+			dynamicViewVariant: dynamic,
+			onNavigateTo,
+			onLayoutTypeChange: setLayoutType,
+			onLogoClick: t8,
+			children: [
+				t9,
+				t10,
+				t11,
+				t12
+			]
+		});
+		$[14] = dynamic;
+		$[15] = onNavigateTo;
+		$[16] = relationshipBrowserScope;
+		$[17] = setLayoutType;
+		$[18] = setRelationshipBrowserScope;
+		$[19] = t10;
+		$[20] = t3;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t13;
+	} else t13 = $[25];
+	const diagram = t13;
+	let t14;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = {
+			position: "relative",
+			width: "100%",
+			height: "100%"
+		};
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== $likec4model || $[28] !== diagram || $[29] !== isComparing || $[30] !== project) {
+		t15 = isComparing ? diagram : /* @__PURE__ */ jsx(LikeC4EditorProvider, {
+			editor: {
+				fetchView: (id, layout) => {
+					const model = $likec4model.get().view(id);
+					return layout === "auto" ? model.$view : model.$layouted;
+				},
+				handleChange: (viewId_0, change) => {
+					const event = {
+						projectId: project.id,
+						viewId: viewId_0,
+						change
+					};
+					return likec4rpc.updateView(event);
+				},
+				...isAIAvailable && { applySemanticLayout: (viewId_1) => likec4rpc.applySemanticLayout({
+					projectId: project.id,
+					viewId: viewId_1
+				}) }
+			},
+			children: diagram
+		});
+		$[27] = $likec4model;
+		$[28] = diagram;
+		$[29] = isComparing;
+		$[30] = project;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== t15 || $[33] !== view.id) {
+		t16 = /* @__PURE__ */ jsx(CompareModelProvider, {
+			viewId: view.id,
+			children: t15
+		});
+		$[32] = t15;
+		$[33] = view.id;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== view.id) {
+		t17 = /* @__PURE__ */ jsx(ModelDiffPanel, { viewId: view.id });
+		$[35] = view.id;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t16 || $[38] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			style: t14,
+			children: [t16, t17]
+		});
+		$[37] = t16;
+		$[38] = t17;
+		$[39] = t18;
+	} else t18 = $[39];
+	return t18;
+}
+export { ViewEditor };

package/__app__/src/pages/ViewReact.mjs

@@ -0,0 +1 @@
+export { t as FocusElementFromUrl, n as ListenForDiagramStateChanges, r as OpenRelationshipBrowserFromUrl, i as ViewReact } from "../chunks/ViewReact.mjs";

package/__app__/src/pages/export-layout.mjs

@@ -0,0 +1,95 @@
+import "../chunks/rolldown-runtime.mjs";
+// src/pages/export-layout.ts
+var EXPORT_EXTRA_PADDING = 16;
+var EXPORT_DESCRIPTION_GAP = 16;
+var EXPORT_DESCRIPTION_INSET = 16;
+var EXPORT_DESCRIPTION_MIN_HEIGHT = 84;
+var EXPORT_DESCRIPTION_MAX_HEIGHT = 240;
+var EXPORT_NOTATION_GAP = 24;
+var EXPORT_NOTATION_WIDTH = 320;
+var EXPORT_NOTATION_INSET = 12;
+var EXPORT_NOTATION_HEADER_HEIGHT = 36;
+var EXPORT_NOTATION_ITEM_HEIGHT = 68;
+var EXPORT_DESCRIPTION_TITLE_LINE_HEIGHT = 20;
+var EXPORT_DESCRIPTION_BODY_LINE_HEIGHT = 19;
+var EXPORT_DESCRIPTION_TOP_PADDING = 10;
+var EXPORT_DESCRIPTION_BODY_TOP_GAP = 4;
+var EXPORT_DESCRIPTION_BOTTOM_PADDING = 16;
+var EXPORT_DESCRIPTION_AVERAGE_CHARACTER_WIDTH = 7.5;
+/**
+* Calculates the reserved height for the notation panel in exported images.
+*/
+function exportNotationHeight(entries) {
+	return 60 + entries * 68;
+}
+/**
+* Estimates the description panel height for exported images and clamps it to export-friendly bounds.
+*/
+function exportDescriptionHeight({ title, text, width }) {
+	const availableWidth = Math.max(80, width - 32);
+	const charactersPerLine = Math.max(12, Math.floor(availableWidth / EXPORT_DESCRIPTION_AVERAGE_CHARACTER_WIDTH));
+	const titleLines = title.trim().length > 0 ? 1 : 0;
+	const bodyLines = estimateWrappedLines(text, charactersPerLine);
+	const bodyTopGap = bodyLines > 0 ? 4 : 0;
+	const preferredHeight = 10 + titleLines * 20 + bodyTopGap + bodyLines * EXPORT_DESCRIPTION_BODY_LINE_HEIGHT + 16;
+	return Math.min(240, Math.max(84, Math.ceil(preferredHeight)));
+}
+/**
+* Estimates wrapped text lines from plain text using an average character width.
+*/
+function estimateWrappedLines(text, charactersPerLine) {
+	const lines = text.split("\n").map((line) => line.trim()).filter((line) => line.length > 0);
+	if (lines.length === 0) return 0;
+	return lines.reduce((sum, line) => sum + Math.max(1, Math.ceil(line.length / charactersPerLine)), 0);
+}
+/**
+* Computes the export canvas size and non-overlapping bounds for the diagram, description, and notation areas.
+*/
+function computeExportPageLayout({ bounds, padding, description, notationEntries }) {
+	const diagramWidth = bounds.width + padding * 2 + 16;
+	const diagramHeight = bounds.height + padding * 2 + 16;
+	const hasNotation = notationEntries > 0;
+	const width = hasNotation ? diagramWidth + 24 + 320 + padding : diagramWidth;
+	const descriptionHeight = description ? exportDescriptionHeight({
+		...description,
+		width
+	}) : 0;
+	const contentTop = descriptionHeight > 0 ? descriptionHeight + 16 : 0;
+	const diagram = {
+		left: 0,
+		top: contentTop,
+		width: diagramWidth,
+		height: diagramHeight
+	};
+	if (!hasNotation) return {
+		width,
+		height: contentTop + diagram.height,
+		diagram,
+		description: description ? {
+			left: 0,
+			top: 0,
+			width,
+			height: descriptionHeight
+		} : null,
+		notation: null
+	};
+	const notationHeight = exportNotationHeight(notationEntries);
+	return {
+		width,
+		height: contentTop + Math.max(diagram.height, notationHeight + padding * 2),
+		diagram,
+		description: description ? {
+			left: 0,
+			top: 0,
+			width,
+			height: descriptionHeight
+		} : null,
+		notation: {
+			left: diagram.width + 24,
+			top: contentTop + padding,
+			width: 320,
+			height: notationHeight
+		}
+	};
+}
+export { EXPORT_DESCRIPTION_BODY_TOP_GAP, EXPORT_DESCRIPTION_BOTTOM_PADDING, EXPORT_DESCRIPTION_GAP, EXPORT_DESCRIPTION_INSET, EXPORT_DESCRIPTION_MAX_HEIGHT, EXPORT_DESCRIPTION_MIN_HEIGHT, EXPORT_DESCRIPTION_TITLE_LINE_HEIGHT, EXPORT_DESCRIPTION_TOP_PADDING, EXPORT_EXTRA_PADDING, EXPORT_NOTATION_GAP, EXPORT_NOTATION_HEADER_HEIGHT, EXPORT_NOTATION_INSET, EXPORT_NOTATION_ITEM_HEIGHT, EXPORT_NOTATION_WIDTH, computeExportPageLayout, exportDescriptionHeight, exportNotationHeight };