likec4 1.60.0 → 1.61.0

package/__app__/src/chunks/ErrorComponent.mjs

@@ -0,0 +1,444 @@
+import { r as __name } from "./rolldown-runtime.mjs";
+import { a as hstack, f as css, i as HStack, o as VStack, r as Txt } from "./styled-system.mjs";
+import { r as IconX } from "./libs/@tabler/icons-react.mjs";
+import { d as useRouter, g as isNotFound, u as useParams } from "./libs/@tanstack.mjs";
+import { Component, createContext, createElement, useEffect, useMemo, useRef } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Button, Code, Container, ScrollAreaAutosize, Text, ThemeIcon } from "@mantine/core";
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/isError.js
+function e$2(e) {
+	return e instanceof Error;
+}
+__name(e$2, "e");
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/isNullish.js
+function e$1(e) {
+	return e == null;
+}
+__name(e$1, "e");
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/isObjectType.js
+function e(e) {
+	return typeof e == `object` && !!e;
+}
+// ../../node_modules/.pnpm/react-error-boundary@6.1.6_@types+react@19.3.0_react@19.3.1/node_modules/react-error-boundary/dist/react-error-boundary.js
+var f = createContext(null);
+function m({ children: r, didCatch: e, error: t, resetErrorBoundary: o }) {
+	const n = useMemo(() => ({
+		didCatch: e,
+		error: t,
+		resetErrorBoundary: o
+	}), [
+		e,
+		t,
+		o
+	]);
+	return createElement(f.Provider, { value: n }, r);
+}
+var d = {
+	didCatch: !1,
+	error: null
+};
+var C = class extends Component {
+	constructor(e) {
+		super(e), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = d;
+	}
+	static getDerivedStateFromError(e) {
+		return {
+			didCatch: !0,
+			error: e
+		};
+	}
+	resetErrorBoundary(...e) {
+		const { didCatch: t } = this.state;
+		t && (this.props.onReset?.({
+			args: e,
+			reason: "imperative-api"
+		}), this.setState(d));
+	}
+	componentDidCatch(e, t) {
+		this.props.onError?.(e, t);
+	}
+	componentDidUpdate(e, t) {
+		const { didCatch: o } = this.state, { resetKeys: n } = this.props;
+		o && t.didCatch && g(e.resetKeys, n) && (this.props.onReset?.({
+			next: n,
+			prev: e.resetKeys,
+			reason: "keys"
+		}), this.setState(d));
+	}
+	render() {
+		const { children: e, fallbackRender: t, FallbackComponent: o, fallback: n } = this.props, { didCatch: s, error: a } = this.state;
+		let c = e;
+		if (s) {
+			const u = {
+				error: a,
+				resetErrorBoundary: this.resetErrorBoundary
+			};
+			if (typeof t == "function") c = t(u);
+			else if (o) c = createElement(o, u);
+			else if ("fallback" in this.props) c = n;
+			else throw a;
+		}
+		return createElement(m, {
+			didCatch: s,
+			error: a,
+			resetErrorBoundary: this.resetErrorBoundary
+		}, c);
+	}
+};
+function g(r = [], e = []) {
+	return r.length !== e.length || r.some((t, o) => !Object.is(t, e[o]));
+}
+// src/components/ErrorComponent.tsx
+var hasMessageOrStack = (error) => {
+	return e(error) && error !== null && (Object.hasOwn(error, "stack") || Object.hasOwn(error, "message"));
+};
+function errorMessage(error) {
+	let message;
+	try {
+		switch (true) {
+			case e$1(error):
+				message = "Unknown error";
+				break;
+			case e$2(error):
+				message = error.stack ?? error.message;
+				break;
+			case typeof error === "string":
+				message = error;
+				break;
+			case hasMessageOrStack(error):
+				message = error.stack ?? error.message ?? error.toString();
+				break;
+			default: message = String(error);
+		}
+	} catch (e) {
+		message = `${e}`;
+	}
+	return message;
+}
+function FallbackDialog(t0) {
+	const $ = c(23);
+	const { error, resetErrorBoundary, children } = t0;
+	let t1;
+	if ($[0] !== error) {
+		t1 = errorMessage(error);
+		$[0] = error;
+		$[1] = t1;
+	} else t1 = $[1];
+	const errorString = t1;
+	const dialogRef = useRef(null);
+	let t2;
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			dialogRef.current?.showModal();
+		};
+		t3 = [];
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t2 = $[2];
+		t3 = $[3];
+	}
+	useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = hstack({
+			margin: "0",
+			padding: "0",
+			position: "fixed",
+			top: "10",
+			left: "10",
+			width: "[calc(100vw - ({spacing.10} * 2))]",
+			height: "max-content",
+			maxHeight: "[min(calc(100vh - ({spacing.10} * 3)), 500px)]",
+			background: "likec4.overlay.body",
+			rounded: "sm",
+			borderWidth: "extra",
+			borderColor: "likec4.overlay.border",
+			shadow: "xl",
+			outline: "none",
+			overflow: "hidden",
+			p: "xl",
+			gap: "lg",
+			alignItems: "flex-start",
+			flexWrap: "nowrap",
+			_backdrop: {
+				cursor: "zoom-out",
+				backdropFilter: "[blur(18px)]",
+				bg: "[color-mix(in oklab, {colors.likec4.overlay.backdrop} 60%, transparent)]"
+			}
+		});
+		t5 = (e) => {
+			e.stopPropagation();
+			if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
+				dialogRef.current?.close();
+				return;
+			}
+		};
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t4 = $[4];
+		t5 = $[5];
+	}
+	let t6;
+	if ($[6] !== resetErrorBoundary) {
+		t6 = (e_0) => {
+			e_0.stopPropagation();
+			resetErrorBoundary();
+		};
+		$[6] = resetErrorBoundary;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ThemeIcon, {
+			size: "md",
+			radius: "xl",
+			color: "red",
+			children: /* @__PURE__ */ jsx(IconX, { style: {
+				width: 20,
+				height: 20
+			} })
+		});
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Txt, {
+			flex: "[0]",
+			children: "Oops, something went wrong"
+		});
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = {
+			root: css({
+				background: "surface.sunken",
+				_hover: { background: "surface.sunken.hover" },
+				borderWidth: "strong",
+				borderStyle: "solid",
+				borderColor: "border.subtle",
+				rounded: "sm"
+			}),
+			content: css({ padding: "3" })
+		};
+		$[10] = t9;
+	} else t9 = $[10];
+	let t10;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = { whiteSpace: "pre-wrap" };
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	if ($[12] !== errorString) {
+		t11 = /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+			flex: "1",
+			maw: "100%",
+			type: "auto",
+			classNames: t9,
+			children: /* @__PURE__ */ jsx(Txt, {
+				textStyle: "dimmed.sm",
+				fontFamily: "mono",
+				style: t10,
+				children: errorString
+			})
+		});
+		$[12] = errorString;
+		$[13] = t11;
+	} else t11 = $[13];
+	let t12;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(Text, {
+			fz: "sm",
+			c: "dimmed",
+			children: "See console for more details and report the issue if it persists."
+		});
+		$[14] = t12;
+	} else t12 = $[14];
+	let t13;
+	if ($[15] !== children) {
+		t13 = /* @__PURE__ */ jsxs(HStack, {
+			gap: "md",
+			my: "sm",
+			flex: "[0]",
+			children: [children, t12]
+		});
+		$[15] = children;
+		$[16] = t13;
+	} else t13 = $[16];
+	let t14;
+	if ($[17] !== t11 || $[18] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(VStack, {
+			flex: "1",
+			gap: "2",
+			h: "stretch",
+			overflow: "hidden",
+			children: [
+				t8,
+				t11,
+				t13
+			]
+		});
+		$[17] = t11;
+		$[18] = t13;
+		$[19] = t14;
+	} else t14 = $[19];
+	let t15;
+	if ($[20] !== t14 || $[21] !== t6) {
+		t15 = /* @__PURE__ */ jsxs("dialog", {
+			ref: dialogRef,
+			className: t4,
+			onClick: t5,
+			onClose: t6,
+			children: [t7, t14]
+		});
+		$[20] = t14;
+		$[21] = t6;
+		$[22] = t15;
+	} else t15 = $[22];
+	return t15;
+}
+function Fallback(t0) {
+	const $ = c(20);
+	const { error, resetErrorBoundary } = t0;
+	const router = useRouter();
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { strict: false };
+		$[0] = t1;
+	} else t1 = $[0];
+	const params = useParams(t1);
+	if (isNotFound(error)) {
+		const t2 = params.viewId ?? "unknown";
+		let t3;
+		if ($[1] !== t2) {
+			t3 = /* @__PURE__ */ jsxs(Text, {
+				c: "orange",
+				fz: "md",
+				children: [
+					"The diagram",
+					" ",
+					/* @__PURE__ */ jsx(Code, {
+						color: "orange",
+						children: t2
+					}),
+					" ",
+					"does not exist or contains errors"
+				]
+			});
+			$[1] = t2;
+			$[2] = t3;
+		} else t3 = $[2];
+		let t4;
+		if ($[3] !== resetErrorBoundary || $[4] !== router) {
+			t4 = /* @__PURE__ */ jsx(Button, {
+				onClick: () => {
+					resetErrorBoundary();
+					router.navigate({ to: "/" });
+				},
+				variant: "light",
+				color: "orange",
+				mt: "lg",
+				size: "xs",
+				children: "Go to overview"
+			});
+			$[3] = resetErrorBoundary;
+			$[4] = router;
+			$[5] = t4;
+		} else t4 = $[5];
+		let t5;
+		if ($[6] !== t3 || $[7] !== t4) {
+			t5 = /* @__PURE__ */ jsx(Container, {
+				my: "md",
+				children: /* @__PURE__ */ jsxs(Alert, {
+					variant: "light",
+					color: "orange",
+					children: [t3, t4]
+				})
+			});
+			$[6] = t3;
+			$[7] = t4;
+			$[8] = t5;
+		} else t5 = $[8];
+		return t5;
+	}
+	let t2;
+	if ($[9] !== resetErrorBoundary || $[10] !== router) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "default",
+			onClick: () => {
+				router.invalidate().finally(() => {
+					resetErrorBoundary();
+				});
+			},
+			children: "Try again"
+		});
+		$[9] = resetErrorBoundary;
+		$[10] = router;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== resetErrorBoundary || $[13] !== router) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "default",
+			onClick: () => {
+				resetErrorBoundary();
+				router.navigate({ to: "/" });
+			},
+			children: "Go to overview"
+		});
+		$[12] = resetErrorBoundary;
+		$[13] = router;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== error || $[16] !== resetErrorBoundary || $[17] !== t2 || $[18] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(FallbackDialog, {
+			error,
+			resetErrorBoundary,
+			children: [t2, t3]
+		});
+		$[15] = error;
+		$[16] = resetErrorBoundary;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+	} else t4 = $[19];
+	return t4;
+}
+function ErrorComponent(t0) {
+	const $ = c(3);
+	const { error, reset } = t0;
+	let t1;
+	if ($[0] !== error || $[1] !== reset) {
+		t1 = /* @__PURE__ */ jsx(Fallback, {
+			error,
+			resetErrorBoundary: reset
+		});
+		$[0] = error;
+		$[1] = reset;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+function ErrorBoundary(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(C, {
+			FallbackComponent: Fallback,
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+export { ErrorComponent as n, Fallback as r, ErrorBoundary as t };

package/__app__/src/chunks/Header.mjs

@@ -0,0 +1,269 @@
+import "./rolldown-runtime.mjs";
+import { m as IconChevronDown, o as IconShare } from "./libs/@tabler/icons-react.mjs";
+import { r as useMatches, s as Link } from "./libs/@tanstack.mjs";
+import { r as useCurrentViewId, t as useCurrentProject } from "./hooks.mjs";
+import { ColorSchemeToggle } from "../components/ColorSchemeToggle.mjs";
+import { NavigationPanel } from "../components/NavigationPanel.mjs";
+import { SelectProject } from "../components/view-page/SelectProject.mjs";
+import { ShareModal } from "../components/view-page/ShareModal.mjs";
+import { useHeaderVisible } from "../components/view-page/state.mjs";
+import { memo, useCallback, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Divider, Menu, MenuDropdown, MenuItem, MenuLabel, MenuTarget, useMantineTheme } from "@mantine/core";
+import { useLikeC4Projects } from "likec4/react";
+import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import { AnimatePresence } from "motion/react";
+// ../config/src/webapp-export-formats.ts
+var WebappExportFormats = [
+	"png",
+	"jpg",
+	"dot",
+	"d2",
+	"mmd",
+	"puml",
+	"drawio"
+];
+// src/export-formats.ts
+/**
+* Returns enabled webapp export formats in canonical menu order.
+*/
+function enabledWebappExportFormats(project) {
+	const configured = project.exportFormats;
+	if (!configured) return [...WebappExportFormats];
+	const enabledFormats = new Set(configured);
+	return WebappExportFormats.filter((format) => enabledFormats.has(format));
+}
+// src/components/view-page/Header.tsx
+var Header = memo(() => {
+	const $ = c(16);
+	const projects = useLikeC4Projects();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { select(matches) {
+			return matches.some(_temp);
+		} };
+		$[0] = t0;
+	} else t0 = $[0];
+	const isReactDiagramRoute = useMatches(t0);
+	const { breakpoints } = useMantineTheme();
+	const isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? false;
+	const [opened, t1] = useDisclosure(false);
+	const { open, close } = t1;
+	const headerVisible = useHeaderVisible();
+	let t2;
+	if ($[1] !== headerVisible || $[2] !== isReactDiagramRoute || $[3] !== isTablet || $[4] !== open || $[5] !== projects) {
+		t2 = headerVisible && /* @__PURE__ */ jsx(NavigationPanel.Root, {
+			panelPosition: "right",
+			hideBelow: "md",
+			initial: {
+				opacity: 0,
+				y: -20,
+				scale: .97
+			},
+			animate: {
+				opacity: 1,
+				y: 0,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				y: -50
+			},
+			children: /* @__PURE__ */ jsxs(NavigationPanel.Body, {
+				gap: "1",
+				children: [
+					isReactDiagramRoute ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(SelectProject, {}),
+						projects.length <= 1 && /* @__PURE__ */ jsx(Button, {
+							size: isTablet ? "compact-md" : "xs",
+							fz: isTablet ? "sm" : "xs",
+							leftSection: /* @__PURE__ */ jsx(IconShare, { size: 14 }),
+							onClick: open,
+							children: "Share"
+						}),
+						/* @__PURE__ */ jsx(ExportButton, {})
+					] }) : /* @__PURE__ */ jsx(Button, {
+						component: Link,
+						to: "../",
+						size: isTablet ? "compact-md" : "xs",
+						fz: isTablet ? "sm" : "xs",
+						variant: "subtle",
+						color: "gray",
+						children: "Back to diagram"
+					}),
+					/* @__PURE__ */ jsx(Divider, {
+						orientation: "vertical",
+						visibleFrom: "md"
+					}),
+					/* @__PURE__ */ jsx(ColorSchemeToggle, {})
+				]
+			})
+		});
+		$[1] = headerVisible;
+		$[2] = isReactDiagramRoute;
+		$[3] = isTablet;
+		$[4] = open;
+		$[5] = projects;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			children: t2
+		});
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== close || $[10] !== headerVisible || $[11] !== opened) {
+		t4 = headerVisible && opened && /* @__PURE__ */ jsx(ShareModal, { onClose: close });
+		$[9] = close;
+		$[10] = headerVisible;
+		$[11] = opened;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t4] });
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+});
+var enableDownload = (params) => ({
+	...params,
+	download: true
+});
+var enableJpegDownload = (params) => ({
+	...params,
+	download: true,
+	format: "jpeg"
+});
+function ExportButton() {
+	const [isDrawioLoading, setIsDrawioLoading] = useState(false);
+	const project = useCurrentProject();
+	const viewId = useCurrentViewId();
+	const enabledFormats = new Set(enabledWebappExportFormats(project));
+	const handleDrawioExport = useCallback(async () => {
+		try {
+			setIsDrawioLoading(true);
+			const { loadDrawioSources } = await import("likec4:drawio");
+			const { drawioEditUrl } = await loadDrawioSources(project.id);
+			const url = drawioEditUrl(viewId);
+			window.open(url, "_blank", "noopener,noreferrer");
+		} catch (error) {
+			console.error("Failed to export to Draw.io:", error);
+		} finally {
+			setIsDrawioLoading(false);
+		}
+	}, [project.id, viewId]);
+	if (enabledFormats.size === 0) return null;
+	return /* @__PURE__ */ jsxs(Menu, {
+		shadow: "md",
+		width: 200,
+		trigger: "click-hover",
+		openDelay: 300,
+		children: [/* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "subtle",
+			size: "compact-md",
+			fz: "sm",
+			color: "gray",
+			px: "sm",
+			rightSection: /* @__PURE__ */ jsx(IconChevronDown, {
+				opacity: .5,
+				size: 14
+			}),
+			visibleFrom: "md",
+			children: "Export"
+		}) }), /* @__PURE__ */ jsxs(MenuDropdown, { children: [
+			/* @__PURE__ */ jsx(MenuLabel, { children: "Current view" }),
+			enabledFormats.has("png") && /* @__PURE__ */ jsx(MenuItem, {
+				renderRoot: (props) => /* @__PURE__ */ jsx(Link, {
+					target: "_blank",
+					to: "/project/$projectId/export/$viewId/",
+					params: {
+						projectId: project.id,
+						viewId
+					},
+					search: enableDownload,
+					...props
+				}),
+				children: "Export as .png"
+			}),
+			enabledFormats.has("jpg") && /* @__PURE__ */ jsx(MenuItem, {
+				renderRoot: (props) => /* @__PURE__ */ jsx(Link, {
+					target: "_blank",
+					to: "/project/$projectId/export/$viewId/",
+					params: {
+						projectId: project.id,
+						viewId
+					},
+					search: enableJpegDownload,
+					...props
+				}),
+				children: "Export as .jpg"
+			}),
+			enabledFormats.has("dot") && /* @__PURE__ */ jsx(MenuItem, {
+				renderRoot: (props) => /* @__PURE__ */ jsx(Link, {
+					to: "/project/$projectId/view/$viewId/dot/",
+					params: {
+						projectId: project.id,
+						viewId
+					},
+					search: true,
+					...props
+				}),
+				children: "Export as .dot"
+			}),
+			enabledFormats.has("d2") && /* @__PURE__ */ jsx(MenuItem, {
+				renderRoot: (props) => /* @__PURE__ */ jsx(Link, {
+					to: "/project/$projectId/view/$viewId/d2",
+					params: {
+						projectId: project.id,
+						viewId
+					},
+					search: true,
+					...props
+				}),
+				children: "Export as .d2"
+			}),
+			enabledFormats.has("mmd") && /* @__PURE__ */ jsx(MenuItem, {
+				renderRoot: (props) => /* @__PURE__ */ jsx(Link, {
+					to: "/project/$projectId/view/$viewId/mmd",
+					params: {
+						projectId: project.id,
+						viewId
+					},
+					search: true,
+					...props
+				}),
+				children: "Export as .mmd"
+			}),
+			enabledFormats.has("puml") && /* @__PURE__ */ jsx(MenuItem, {
+				renderRoot: (props) => /* @__PURE__ */ jsx(Link, {
+					to: "/project/$projectId/view/$viewId/puml",
+					params: {
+						projectId: project.id,
+						viewId
+					},
+					search: true,
+					...props
+				}),
+				children: "Export as .puml"
+			}),
+			enabledFormats.has("drawio") && /* @__PURE__ */ jsx(MenuItem, {
+				disabled: isDrawioLoading,
+				onClick: handleDrawioExport,
+				children: "Export to Draw.io"
+			})
+		] })]
+	});
+}
+function _temp(t0) {
+	const { routeId } = t0;
+	return routeId === "/project/$projectId/view/$viewId/";
+}
+export { Header as t };