likec4 1.59.4 → 1.61.0

package/__app__/src/chunks/useAsync.mjs

@@ -0,0 +1,69 @@
+import "./rolldown-runtime.mjs";
+import { t as useSyncedRef } from "./useSyncedRef.mjs";
+import { useMemo, useRef, useState } from "react";
+// ../../node_modules/.pnpm/@react-hookz+web@26.1.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/@react-hookz/web/dist/useAsync/index.js
+/**
+* Tracks the result and errors of the provided async function and provides handles to control its execution.
+*
+* @param asyncFn Function that returns a promise.
+* @param initialValue Value that will be set on initialisation before the async function is
+* executed.
+*/
+function useAsync(asyncFn, initialValue) {
+	const [state, setState] = useState({
+		status: "not-executed",
+		error: void 0,
+		result: initialValue
+	});
+	const promiseRef = useRef(void 0);
+	const argsRef = useRef(void 0);
+	const methods = useSyncedRef({
+		async execute(...params) {
+			argsRef.current = params;
+			const promise = asyncFn(...params);
+			promiseRef.current = promise;
+			setState((s) => ({
+				...s,
+				status: "loading"
+			}));
+			promise.then((result) => {
+				if (promise === promiseRef.current) setState((s) => ({
+					...s,
+					status: "success",
+					error: void 0,
+					result
+				}));
+			}, (error) => {
+				if (promise === promiseRef.current) setState((previousState) => ({
+					...previousState,
+					status: "error",
+					error
+				}));
+			});
+			return promise;
+		},
+		reset() {
+			setState({
+				status: "not-executed",
+				error: void 0,
+				result: initialValue
+			});
+			promiseRef.current = void 0;
+			argsRef.current = void 0;
+		}
+	});
+	return [
+		state,
+		useMemo(() => ({
+			reset() {
+				methods.current.reset();
+			},
+			execute: async (...params) => methods.current.execute(...params)
+		}), []),
+		{
+			promise: promiseRef.current,
+			lastArgs: argsRef.current
+		}
+	];
+}
+export { useAsync as t };

package/__app__/src/chunks/useSyncedRef.mjs

@@ -0,0 +1,16 @@
+import "./rolldown-runtime.mjs";
+import { useMemo, useRef } from "react";
+// ../../node_modules/.pnpm/@react-hookz+web@26.1.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/@react-hookz/web/dist/useSyncedRef/index.js
+/**
+* Like `useRef`, but it returns immutable ref that contains actual value.
+*
+* @param value
+*/
+function useSyncedRef(value) {
+	const ref = useRef(value);
+	ref.current = value;
+	return useMemo(() => Object.freeze({ get current() {
+		return ref.current;
+	} }), []);
+}
+export { useSyncedRef as t };

package/__app__/src/components/ColorSchemeToggle.mjs

@@ -0,0 +1,124 @@
+import "../chunks/rolldown-runtime.mjs";
+import { c as IconMoonStars, i as IconSun } from "../chunks/libs/@tabler/icons-react.mjs";
+import { c as useNavigate, l as useSearch } from "../chunks/libs/@tanstack.mjs";
+import { t as resolveForceColorScheme } from "../chunks/searchParams.mjs";
+import { useEffect, useRef } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
+// src/components/ColorSchemeToggle.tsx
+function ColorSchemeToggle() {
+	const $ = c(23);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { keepTransitions: true };
+		$[0] = t0;
+	} else t0 = $[0];
+	const { setColorScheme } = useMantineColorScheme(t0);
+	const computedColorScheme = useComputedColorScheme("light");
+	const navigate = useNavigate();
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { from: "__root__" };
+		$[1] = t1;
+	} else t1 = $[1];
+	const { theme: urlTheme } = useSearch(t1);
+	let t2;
+	if ($[2] !== urlTheme) {
+		t2 = resolveForceColorScheme(urlTheme);
+		$[2] = urlTheme;
+		$[3] = t2;
+	} else t2 = $[3];
+	const isForced = t2 != null;
+	const pendingScheme = useRef(null);
+	let t3;
+	let t4;
+	if ($[4] !== isForced || $[5] !== setColorScheme) {
+		t3 = () => {
+			if (pendingScheme.current != null && !isForced) {
+				setColorScheme(pendingScheme.current);
+				pendingScheme.current = null;
+			}
+		};
+		t4 = [isForced, setColorScheme];
+		$[4] = isForced;
+		$[5] = setColorScheme;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[8] !== computedColorScheme || $[9] !== isForced || $[10] !== navigate || $[11] !== setColorScheme) {
+		t5 = () => {
+			if (pendingScheme.current != null) return;
+			const next = computedColorScheme === "light" ? "dark" : "light";
+			if (isForced) {
+				pendingScheme.current = next;
+				navigate({
+					to: "../",
+					search: _temp,
+					replace: true
+				}).catch(() => {
+					pendingScheme.current = null;
+				});
+			} else setColorScheme(next);
+		};
+		$[8] = computedColorScheme;
+		$[9] = isForced;
+		$[10] = navigate;
+		$[11] = setColorScheme;
+		$[12] = t5;
+	} else t5 = $[12];
+	const toggle = t5;
+	let t6;
+	if ($[13] !== computedColorScheme) {
+		t6 = computedColorScheme === "dark" ? ["block", "none"] : ["none", "block"];
+		$[13] = computedColorScheme;
+		$[14] = t6;
+	} else t6 = $[14];
+	const [sun, moon] = t6;
+	let t7;
+	if ($[15] !== sun) {
+		t7 = /* @__PURE__ */ jsx(IconSun, {
+			stroke: 1.5,
+			style: { display: sun }
+		});
+		$[15] = sun;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== moon) {
+		t8 = /* @__PURE__ */ jsx(IconMoonStars, {
+			stroke: 1.5,
+			style: { display: moon }
+		});
+		$[17] = moon;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t7 || $[20] !== t8 || $[21] !== toggle) {
+		t9 = /* @__PURE__ */ jsxs(ActionIcon, {
+			size: "md",
+			variant: "subtle",
+			color: "gray",
+			onClick: toggle,
+			"aria-label": "Toggle color scheme",
+			children: [t7, t8]
+		});
+		$[19] = t7;
+		$[20] = t8;
+		$[21] = toggle;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+}
+function _temp(prev) {
+	return {
+		...prev,
+		theme: void 0
+	};
+}
+export { ColorSchemeToggle };

package/__app__/src/components/CopyToClipboard.mjs

@@ -0,0 +1,53 @@
+import "../chunks/rolldown-runtime.mjs";
+import { h as IconCheck, p as IconCopy } from "../chunks/libs/@tabler/icons-react.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon, Box, CopyButton as CopyButton$1, Tooltip, rem } from "@mantine/core";
+// src/components/CopyToClipboard.tsx
+function CopyButton(t0) {
+	const $ = c(2);
+	const { text } = t0;
+	let t1;
+	if ($[0] !== text) {
+		t1 = /* @__PURE__ */ jsx(CopyButton$1, {
+			value: text,
+			timeout: 2e3,
+			children: _temp
+		});
+		$[0] = text;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+function _temp(t0) {
+	const { copied, copy } = t0;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: copied ? "Copied" : "Copy",
+		withArrow: true,
+		position: "right",
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			color: copied ? "teal" : "gray",
+			variant: copied ? "light" : "subtle",
+			onClick: copy,
+			children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } })
+		})
+	});
+}
+function CopyToClipboard(t0) {
+	const $ = c(2);
+	const { text } = t0;
+	let t1;
+	if ($[0] !== text) {
+		t1 = /* @__PURE__ */ jsx(Box, {
+			pos: "absolute",
+			top: "0",
+			right: "0",
+			p: "4",
+			children: /* @__PURE__ */ jsx(CopyButton, { text })
+		});
+		$[0] = text;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+export { CopyButton, CopyToClipboard };

package/__app__/src/components/ErrorComponent.mjs

@@ -0,0 +1 @@
+export { t as ErrorBoundary, n as ErrorComponent, r as Fallback } from "../chunks/ErrorComponent.mjs";

package/__app__/src/components/NavigationPanel.mjs

@@ -0,0 +1,63 @@
+import "../chunks/rolldown-runtime.mjs";
+import { c as createStyleContext, d as cx, n as navigationPanel, u as isCssProperty } from "../chunks/styled-system.mjs";
+import { forwardRef } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Logo, LogoIcon } from "likec4/react";
+import { isValidMotionProp, m } from "motion/react";
+// src/components/NavigationPanel.tsx
+var { withProvider, withContext } = createStyleContext(navigationPanel);
+var shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop));
+var LogoButton = forwardRef((t0, ref) => {
+	const $ = c(11);
+	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("mantine-active", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(LogoIcon, { "data-logo-icon": true });
+		t3 = /* @__PURE__ */ jsx(Logo, { "data-logo-full": true });
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t2 = $[5];
+		t3 = $[6];
+	}
+	let t4;
+	if ($[7] !== props || $[8] !== ref || $[9] !== t1) {
+		t4 = /* @__PURE__ */ jsxs("button", {
+			...props,
+			ref,
+			className: t1,
+			children: [t2, t3]
+		});
+		$[7] = props;
+		$[8] = ref;
+		$[9] = t1;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+});
+var NavigationPanel = {
+	Root: withProvider(m.div, "root", { shouldForwardProp }),
+	Body: withContext(m.div, "body", { shouldForwardProp }),
+	Logo: withContext(LogoButton, "logo", { shouldForwardProp }),
+	Label: withContext(m.div, "label", { shouldForwardProp }),
+	Dropdown: withContext(m.div, "dropdown", { shouldForwardProp })
+};
+export { NavigationPanel };

package/__app__/src/components/NotFound.mjs

@@ -0,0 +1,155 @@
+import "../chunks/rolldown-runtime.mjs";
+import { s as Link, u as useParams } from "../chunks/libs/@tanstack.mjs";
+import { f as css } from "../chunks/styled-system.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Button, Code, Container, Group, Text, Title } from "@mantine/core";
+// src/components/NotFound.tsx
+var classes = {
+	content: css({
+		paddingTop: "[120px]",
+		position: "relative",
+		zIndex: "[1]",
+		sm: { paddingTop: "[220px]" }
+	}),
+	image: css({
+		position: "absolute",
+		inset: "0",
+		opacity: "0.2"
+	}),
+	inner: css({ position: "relative" }),
+	root: css({
+		paddingTop: "[80px]",
+		paddingBottom: "[80px]"
+	}),
+	description: css({
+		maxWidth: "[540px]",
+		margin: "auto",
+		marginTop: "xl",
+		marginBottom: "[calc({spacing.xl}*1.5)]"
+	}),
+	title: css({
+		textAlign: "center",
+		fontWeight: "[900]",
+		fontSize: `[38px]`
+	})
+};
+function NotFound() {
+	const $ = c(10);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { strict: false };
+		$[0] = t0;
+	} else t0 = $[0];
+	const params = useParams(t0);
+	if (params.viewId) {
+		let t1;
+		if ($[1] !== params.viewId) {
+			t1 = /* @__PURE__ */ jsxs(Text, {
+				c: "orange",
+				fz: "md",
+				children: [
+					"The diagram",
+					" ",
+					/* @__PURE__ */ jsx(Code, {
+						color: "orange",
+						children: params.viewId
+					}),
+					" ",
+					"does not exist or contains errors"
+				]
+			});
+			$[1] = params.viewId;
+			$[2] = t1;
+		} else t1 = $[2];
+		let t2;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(Button, {
+				component: Link,
+				to: "/",
+				variant: "light",
+				color: "orange",
+				mt: "lg",
+				size: "xs",
+				children: "Go to overview"
+			});
+			$[3] = t2;
+		} else t2 = $[3];
+		let t3;
+		if ($[4] !== t1) {
+			t3 = /* @__PURE__ */ jsx(Container, {
+				my: "md",
+				children: /* @__PURE__ */ jsxs(Alert, {
+					variant: "light",
+					color: "orange",
+					children: [t1, t2]
+				})
+			});
+			$[4] = t1;
+			$[5] = t3;
+		} else t3 = $[5];
+		return t3;
+	}
+	let t1;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 362 145",
+			className: classes.image,
+			children: /* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M62.6 142c-2.133 0-3.2-1.067-3.2-3.2V118h-56c-2 0-3-1-3-3V92.8c0-1.333.4-2.733 1.2-4.2L58.2 4c.8-1.333 2.067-2 3.8-2h28c2 0 3 1 3 3v85.4h11.2c.933 0 1.733.333 2.4 1 .667.533 1 1.267 1 2.2v21.2c0 .933-.333 1.733-1 2.4-.667.533-1.467.8-2.4.8H93v20.8c0 2.133-1.067 3.2-3.2 3.2H62.6zM33 90.4h26.4V51.2L33 90.4zM181.67 144.6c-7.333 0-14.333-1.333-21-4-6.666-2.667-12.866-6.733-18.6-12.2-5.733-5.467-10.266-13-13.6-22.6-3.333-9.6-5-20.667-5-33.2 0-12.533 1.667-23.6 5-33.2 3.334-9.6 7.867-17.133 13.6-22.6 5.734-5.467 11.934-9.533 18.6-12.2 6.667-2.8 13.667-4.2 21-4.2 7.467 0 14.534 1.4 21.2 4.2 6.667 2.667 12.8 6.733 18.4 12.2 5.734 5.467 10.267 13 13.6 22.6 3.334 9.6 5 20.667 5 33.2 0 12.533-1.666 23.6-5 33.2-3.333 9.6-7.866 17.133-13.6 22.6-5.6 5.467-11.733 9.533-18.4 12.2-6.666 2.667-13.733 4-21.2 4zm0-31c9.067 0 15.6-3.733 19.6-11.2 4.134-7.6 6.2-17.533 6.2-29.8s-2.066-22.2-6.2-29.8c-4.133-7.6-10.666-11.4-19.6-11.4-8.933 0-15.466 3.8-19.6 11.4-4 7.6-6 17.533-6 29.8s2 22.2 6 29.8c4.134 7.467 10.667 11.2 19.6 11.2zM316.116 142c-2.134 0-3.2-1.067-3.2-3.2V118h-56c-2 0-3-1-3-3V92.8c0-1.333.4-2.733 1.2-4.2l56.6-84.6c.8-1.333 2.066-2 3.8-2h28c2 0 3 1 3 3v85.4h11.2c.933 0 1.733.333 2.4 1 .666.533 1 1.267 1 2.2v21.2c0 .933-.334 1.733-1 2.4-.667.533-1.467.8-2.4.8h-11.2v20.8c0 2.133-1.067 3.2-3.2 3.2h-27.2zm-29.6-51.6h26.4V51.2l-26.4 39.2z"
+			})
+		});
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Title, {
+			className: classes.title,
+			children: "Nothing to see here"
+		});
+		t3 = /* @__PURE__ */ jsx(Text, {
+			c: "dimmed",
+			size: "lg",
+			ta: "center",
+			className: classes.description,
+			children: "Page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to another URL. If you think this is an error contact support."
+		});
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t2 = $[7];
+		t3 = $[8];
+	}
+	let t4;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Container, {
+			className: classes.root,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: classes.inner,
+				children: [t1, /* @__PURE__ */ jsxs("div", {
+					className: classes.content,
+					children: [
+						t2,
+						t3,
+						/* @__PURE__ */ jsx(Group, {
+							justify: "center",
+							children: /* @__PURE__ */ jsx(Button, {
+								component: Link,
+								to: "/",
+								search: true,
+								size: "md",
+								children: "Take me back to home page"
+							})
+						})
+					]
+				})]
+			})
+		});
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+export { NotFound };

package/__app__/src/components/ViewOutlet.mjs

@@ -0,0 +1,9 @@
+import { l as styled } from "../chunks/styled-system.mjs";
+// src/components/ViewOutlet.tsx
+var ViewOutlet = styled("div", { base: {
+	padding: "0",
+	margin: "0",
+	width: "full",
+	height: "full"
+} });
+export { ViewOutlet };

package/__app__/src/components/model-diff/CompareModelProvider.mjs

@@ -0,0 +1,44 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { compareLookupModel } from "./compare-model.mjs";
+import { useCompareView } from "./ModelDiffPanel.mjs";
+import { useModelDiffState } from "./state.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { LikeC4ModelProvider, useLikeC4Model } from "likec4/react";
+// src/components/model-diff/CompareModelProvider.tsx
+/**
+* While a diff is selected, detail popups read the model that matches the compare view.
+*/
+function CompareModelProvider(t0) {
+	const $ = c(8);
+	const { viewId, children } = t0;
+	const before = useLikeC4Model();
+	const compareView = useCompareView(viewId);
+	const { diffId, mode } = useModelDiffState();
+	let t1;
+	if ($[0] !== before || $[1] !== compareView || $[2] !== diffId || $[3] !== mode) {
+		t1 = compareView && diffId ? compareLookupModel(before, {
+			diffId,
+			mode,
+			view: compareView
+		}) : before;
+		$[0] = before;
+		$[1] = compareView;
+		$[2] = diffId;
+		$[3] = mode;
+		$[4] = t1;
+	} else t1 = $[4];
+	const model = t1;
+	let t2;
+	if ($[5] !== children || $[6] !== model) {
+		t2 = /* @__PURE__ */ jsx(LikeC4ModelProvider, {
+			likec4model: model,
+			children
+		});
+		$[5] = children;
+		$[6] = model;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+export { CompareModelProvider };