likec4 1.60.0 → 1.61.0

package/__app__/src/chunks/ViewReact.mjs

@@ -0,0 +1,438 @@
+import "./rolldown-runtime.mjs";
+import { t as useSyncedRef } from "./useSyncedRef.mjs";
+import { c as useNavigate, d as useRouter, l as useSearch } from "./libs/@tanstack.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 { headerOps } from "../components/view-page/state.mjs";
+import { n as useCurrentView, t as useCurrentProject } from "./hooks.mjs";
+import { t as useRelationshipBrowserScope } from "./scope.mjs";
+import { useCallback, useEffect, useRef } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { pageTitle } from "likec4:app-config";
+import { LikeC4Diagram, selectDiagramContext, useDiagram, useDiagramSelector, useLikeC4Model, useOnDiagramEvent, useUpdateEffect } from "likec4/react";
+import { useCallbackRef, useDocumentTitle } from "@mantine/hooks";
+// ../../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/useUnmountEffect/index.js
+/**
+* Run effect only when component is unmounted.
+*
+* @param effect Effector to run on unmount
+*/
+function useUnmountEffect(effect) {
+	const effectRef = useSyncedRef(effect);
+	useEffect(() => () => {
+		effectRef.current();
+	}, []);
+}
+// ../../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/useIsMounted/index.js
+/**
+* Returns a function that returns the current mount state. This hook is useful when you have to
+* detect component mount state within async effects.
+*
+* @param initialValue Initial value.
+*
+* @return Function that returns `true` only if the component is mounted.
+*/
+function useIsMounted(initialValue = false) {
+	const isMounted = useRef(initialValue);
+	const get = useCallback(() => isMounted.current, []);
+	useEffect(() => {
+		isMounted.current = true;
+		return () => {
+			isMounted.current = false;
+		};
+	}, []);
+	return get;
+}
+// src/pages/ViewReact.tsx
+function ViewReact() {
+	const $ = c(34);
+	const navigate = useNavigate();
+	const project = useCurrentProject();
+	const [view, setLayoutType] = useCurrentView();
+	const [relationshipBrowserScope, setRelationshipBrowserScope] = useRelationshipBrowserScope(project);
+	const model = useLikeC4Model();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { from: "__root__" };
+		$[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);
+	const title = view ? view.title ?? view.id : "View not found";
+	const pageTitle$1 = model.project.title ?? pageTitle;
+	useDocumentTitle(`${title} - ${pageTitle$1}`);
+	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;
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			position: "relative",
+			width: "100%",
+			height: "100%"
+		};
+		$[6] = t3;
+	} else t3 = $[6];
+	const t4 = compareView ?? view;
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			top: "70px",
+			bottom: "32px",
+			left: "32px",
+			right: "32px"
+		};
+		$[7] = t5;
+	} else t5 = $[7];
+	const t6 = !isComparing;
+	const t7 = !isComparing;
+	let t8;
+	if ($[8] !== navigate) {
+		t8 = () => {
+			navigate({ to: "/" });
+		};
+		$[8] = navigate;
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(ListenForDiagramStateChanges, {});
+		$[10] = t9;
+	} else t9 = $[10];
+	let t10;
+	if ($[11] !== relationshipBrowserScope) {
+		t10 = /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, { relationshipBrowserScope });
+		$[11] = relationshipBrowserScope;
+		$[12] = t10;
+	} else t10 = $[12];
+	let t11;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(FocusElementFromUrl, {});
+		$[13] = t11;
+	} else t11 = $[13];
+	let t12;
+	if ($[14] !== dynamic || $[15] !== hasNotations || $[16] !== onNavigateTo || $[17] !== relationshipBrowserScope || $[18] !== setLayoutType || $[19] !== setRelationshipBrowserScope || $[20] !== t10 || $[21] !== t4 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(LikeC4Diagram, {
+			view: t4,
+			zoomable: true,
+			pannable: true,
+			controls: true,
+			fitViewPadding: t5,
+			showNavigationButtons: true,
+			enableSearch: true,
+			enableFocusMode: true,
+			enableDynamicViewWalkthrough: t6,
+			dynamicViewVariant: dynamic,
+			enableElementDetails: true,
+			enableRelationshipDetails: true,
+			enableRelationshipBrowser: true,
+			relationshipBrowserScope,
+			onRelationshipBrowserScopeChange: setRelationshipBrowserScope,
+			enableElementTags: true,
+			enableCompareWithLatest: t7,
+			enableNotations: hasNotations,
+			nodesSelectable: true,
+			onNavigateTo,
+			onLayoutTypeChange: setLayoutType,
+			onLogoClick: t8,
+			children: [
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[14] = dynamic;
+		$[15] = hasNotations;
+		$[16] = onNavigateTo;
+		$[17] = relationshipBrowserScope;
+		$[18] = setLayoutType;
+		$[19] = setRelationshipBrowserScope;
+		$[20] = t10;
+		$[21] = t4;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t12 || $[27] !== view.id) {
+		t13 = /* @__PURE__ */ jsx(CompareModelProvider, {
+			viewId: view.id,
+			children: t12
+		});
+		$[26] = t12;
+		$[27] = view.id;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== view.id) {
+		t14 = /* @__PURE__ */ jsx(ModelDiffPanel, { viewId: view.id });
+		$[29] = view.id;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t13 || $[32] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			style: t3,
+			children: [t13, t14]
+		});
+		$[31] = t13;
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
+	return t15;
+}
+/**
+* Opens Relationship Browser when `?relationships={elementFqn}` URL parameter is present.
+* Handles both initial load and parameter changes during navigation.
+* Clears the URL parameters after opening to prevent reopening on navigation.
+*/
+function OpenRelationshipBrowserFromUrl(t0) {
+	const $ = c(20);
+	const { relationshipBrowserScope } = t0;
+	const router = useRouter();
+	const diagram = useDiagram();
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { from: "__root__" };
+		$[0] = t1;
+	} else t1 = $[0];
+	const { relationships, relationshipsScope } = useSearch(t1);
+	const processedRef = useRef(null);
+	const isInitializedRef = useRef(false);
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = Promise.resolve();
+		$[1] = t2;
+	} else t2 = $[1];
+	const isProcessingRef = useRef(t2);
+	const isMounted = useIsMounted();
+	let t3;
+	if ($[2] !== diagram || $[3] !== isMounted || $[4] !== relationshipBrowserScope || $[5] !== relationshipsScope || $[6] !== router) {
+		t3 = (fqn) => {
+			const scope = relationshipsScope ?? relationshipBrowserScope;
+			const requestKey = `${fqn}:${scope}`;
+			isProcessingRef.current = isProcessingRef.current.then(async () => {
+				if (!isMounted() || processedRef.current === requestKey) return;
+				try {
+					processedRef.current = requestKey;
+					diagram.openRelationshipsBrowser(fqn, scope);
+					await router.buildAndCommitLocation({
+						search: _temp,
+						replace: true,
+						viewTransition: false
+					});
+				} catch (t4) {
+					console.error("Failed to open relationship browser:", t4);
+				}
+			});
+		};
+		$[2] = diagram;
+		$[3] = isMounted;
+		$[4] = relationshipBrowserScope;
+		$[5] = relationshipsScope;
+		$[6] = router;
+		$[7] = t3;
+	} else t3 = $[7];
+	const openAndClear = t3;
+	let t4;
+	if ($[8] !== openAndClear || $[9] !== relationshipBrowserScope || $[10] !== relationships || $[11] !== relationshipsScope) {
+		t4 = () => {
+			if (!relationships) {
+				processedRef.current = null;
+				return;
+			}
+			const requestKey_0 = `${relationships}:${relationshipsScope ?? relationshipBrowserScope}`;
+			if (processedRef.current !== requestKey_0) openAndClear(relationships);
+		};
+		$[8] = openAndClear;
+		$[9] = relationshipBrowserScope;
+		$[10] = relationships;
+		$[11] = relationshipsScope;
+		$[12] = t4;
+	} else t4 = $[12];
+	const process = t4;
+	let t5;
+	if ($[13] !== process) {
+		t5 = () => {
+			isInitializedRef.current = true;
+			process();
+		};
+		$[13] = process;
+		$[14] = t5;
+	} else t5 = $[14];
+	useOnDiagramEvent("initialized", t5);
+	let t6;
+	if ($[15] !== process) {
+		t6 = () => {
+			process();
+		};
+		$[15] = process;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== relationships || $[18] !== relationshipsScope) {
+		t7 = [relationships, relationshipsScope];
+		$[17] = relationships;
+		$[18] = relationshipsScope;
+		$[19] = t7;
+	} else t7 = $[19];
+	useUpdateEffect(t6, t7);
+	return null;
+}
+function _temp(s) {
+	const { relationships: _, relationshipsScope: __, ...rest } = s;
+	return rest;
+}
+/**
+* Focuses on an element when `?focusOnElement={elementFqn}` URL parameter is present.
+* Used when navigating from the overview search with an element target.
+* Clears the parameter after focusing to prevent refocusing on navigation.
+*/
+function FocusElementFromUrl() {
+	const $ = c(10);
+	const router = useRouter();
+	const diagram = useDiagram();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { from: "__root__" };
+		$[0] = t0;
+	} else t0 = $[0];
+	const { focusOnElement } = useSearch(t0);
+	const processedRef = useRef(null);
+	let t1;
+	if ($[1] !== diagram || $[2] !== router) {
+		t1 = (fqn) => {
+			try {
+				if (processedRef.current === fqn) return;
+				processedRef.current = fqn;
+				diagram.focusOnElement(fqn);
+				router.buildAndCommitLocation({
+					search: _temp2,
+					replace: true,
+					viewTransition: false
+				});
+			} catch (t2) {
+				console.error("focusOnElement failed:", t2);
+			}
+		};
+		$[1] = diagram;
+		$[2] = router;
+		$[3] = t1;
+	} else t1 = $[3];
+	const focusAndClear = useCallbackRef(t1);
+	let t2;
+	if ($[4] !== focusAndClear || $[5] !== focusOnElement) {
+		t2 = () => {
+			if (focusOnElement && processedRef.current !== focusOnElement) focusAndClear(focusOnElement);
+		};
+		$[4] = focusAndClear;
+		$[5] = focusOnElement;
+		$[6] = t2;
+	} else t2 = $[6];
+	useOnDiagramEvent("initialized", t2);
+	let t3;
+	let t4;
+	if ($[7] !== focusOnElement) {
+		t3 = () => {
+			if (!focusOnElement) processedRef.current = null;
+		};
+		t4 = [focusOnElement];
+		$[7] = focusOnElement;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		t3 = $[8];
+		t4 = $[9];
+	}
+	useUpdateEffect(t3, t4);
+	return null;
+}
+function _temp2(s) {
+	const { focusOnElement: _, ...rest } = s;
+	return rest;
+}
+var selectDiagramState = selectDiagramContext((c) => ({
+	dynamicViewVariant: c.dynamicViewVariant,
+	isWalkthroughActive: !!c.activeWalkthrough
+}));
+function ListenForDiagramStateChanges() {
+	const $ = c(8);
+	const router = useRouter();
+	const { dynamicViewVariant, isWalkthroughActive } = useDiagramSelector(selectDiagramState);
+	let t0;
+	if ($[0] !== dynamicViewVariant || $[1] !== router) {
+		t0 = () => {
+			if ((router.latestLocation.search.dynamic ?? "diagram") !== dynamicViewVariant) router.buildAndCommitLocation({
+				search: (current) => ({
+					...current,
+					dynamic: dynamicViewVariant
+				}),
+				viewTransition: false
+			});
+		};
+		$[0] = dynamicViewVariant;
+		$[1] = router;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== dynamicViewVariant) {
+		t1 = [dynamicViewVariant];
+		$[3] = dynamicViewVariant;
+		$[4] = t1;
+	} else t1 = $[4];
+	useUpdateEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[5] !== isWalkthroughActive) {
+		t2 = () => {
+			headerOps.toggle(!isWalkthroughActive);
+		};
+		t3 = [isWalkthroughActive];
+		$[5] = isWalkthroughActive;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
+	useUnmountEffect(_temp3);
+	return null;
+}
+function _temp3() {
+	headerOps.show();
+}
+export { ViewReact as i, ListenForDiagramStateChanges as n, OpenRelationshipBrowserFromUrl as r, FocusElementFromUrl as t };

package/__app__/src/chunks/find.mjs

@@ -0,0 +1,38 @@
+import { r as __name } from "./rolldown-runtime.mjs";
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/dataLastImplementation-D-BXl-Tn.js
+var e$3 = /* @__PURE__ */ __name((e, t) => t.length === 1 ? (n) => e(n, t[0]) : (n) => e(n, ...t), "e");
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/lazyControl-BA0LgJso.js
+var e$2 = Symbol.for(`remeda/lazy/skip`);
+var t$3 = Symbol.for(`remeda/lazy/stop`);
+var n$1 = Symbol.for(`remeda/lazy/last`);
+var r = Symbol.for(`remeda/lazy/many`);
+var i = [];
+var a$1 = /* @__PURE__ */ __name(() => ({
+	value: void 0,
+	values: i
+}), "a");
+function s$1(e, t) {
+	return t.value = e, n$1;
+}
+__name(s$1, "s");
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/lazyDataLastImplementation-DFviQKyZ.js
+function t$2(t, n, r) {
+	let i = e$3(t, n);
+	return i.lazy = r, i.lazyArgs = n, i;
+}
+__name(t$2, "t");
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/purryWithLazy-CKUoTFu0.js
+var t$1 = /* @__PURE__ */ __name((t, n, r) => n.length >= t.length ? t(...n) : t$2(t, n, r), "t");
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/requireData-CnnPAgxf.js
+var e$1 = /* @__PURE__ */ __name((e) => (e.requiresData = !0, e), "e");
+var t = (t, r, { dataParameterIndex: i = 2 } = {}) => n(t, i) ? e$1(r) : r;
+var n = ({ length: e }, t = 2) => e === 0 || e > t;
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/toSingle-DiQSixar.js
+var e = (e) => Object.assign(e, { single: !0 });
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/find.js
+function a(...e) {
+	return t$1(o, e, s);
+}
+var o = (e, t) => e.find(t);
+var s = e((n) => t(n, (r, i, a, o) => n(r, i, a) ? s$1(r, o) : e$2));
+export { a$1 as a, r as c, t$1 as i, t$3 as l, e$1 as n, e$2 as o, n as r, n$1 as s, a as t, e$3 as u };