likec4 1.60.0 → 1.61.0

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

@@ -0,0 +1,179 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { t as token } from "../../chunks/styled-system.mjs";
+import { useModelDiffs } from "../../context/ModelDiffsContext.mjs";
+import { selectCompareMode, selectDiff, useModelDiffState } from "./state.mjs";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Group, Paper, SegmentedControl, Select, Stack, Text } from "@mantine/core";
+import { filterCompareView } from "@likec4/core/compute-view";
+// src/components/model-diff/ModelDiffPanel.tsx
+var NoDiff = "__as-is__";
+var compareModes = [
+	{
+		value: "as-is",
+		label: "As-is"
+	},
+	{
+		value: "changes",
+		label: "Changes"
+	},
+	{
+		value: "to-be",
+		label: "To-be"
+	}
+];
+var legend = [
+	{
+		label: "added",
+		color: token.var("colors.likec4.diff.added"),
+		style: "solid"
+	},
+	{
+		label: "removed",
+		color: token.var("colors.likec4.diff.removed"),
+		style: "dashed"
+	},
+	{
+		label: "modified",
+		color: token.var("colors.likec4.diff.modified"),
+		style: "dashed"
+	}
+];
+/**
+* Compare view of the selected diff, to show instead of the view.
+* `null` for the model as is, or if the diff does not change the view.
+*/
+function useCompareView(viewId) {
+	const $ = c(3);
+	const { views } = useModelDiffs();
+	const { diffId, mode } = useModelDiffState();
+	const view = diffId && viewId ? views[diffId]?.[viewId] : void 0;
+	let t0;
+	if ($[0] !== mode || $[1] !== view) {
+		t0 = view ? filterCompareView(view, mode) : null;
+		$[0] = mode;
+		$[1] = view;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+/**
+* Model state selector (as-is or a diff) and compare mode.
+* Renders nothing if the project has no diffs.
+*/
+function ModelDiffPanel(t0) {
+	const $ = c(15);
+	const { viewId } = t0;
+	const { diffs, views } = useModelDiffs();
+	const { diffId, mode } = useModelDiffState();
+	if (diffs.length === 0) return null;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { zIndex: 20 };
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			value: NoDiff,
+			label: "As-is (no diff)"
+		};
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== diffs) {
+		t3 = [t2, ...diffs.map(_temp)];
+		$[2] = diffs;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = diffId ?? NoDiff;
+	let t5;
+	if ($[4] !== t3 || $[5] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Select, {
+			size: "xs",
+			"aria-label": "Model state",
+			data: t3,
+			value: t4,
+			allowDeselect: false,
+			onChange: _temp2
+		});
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== diffId || $[8] !== mode || $[9] !== viewId || $[10] !== views) {
+		t6 = diffId && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(SegmentedControl, {
+				size: "xs",
+				fullWidth: true,
+				value: mode,
+				onChange: selectCompareMode,
+				data: compareModes
+			}),
+			mode === "changes" && /* @__PURE__ */ jsx(Group, {
+				gap: "sm",
+				children: legend.map(_temp3)
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				size: "xs",
+				c: "dimmed",
+				children: views[diffId]?.[viewId] ? "This view is changed by the diff" : "This view is not changed by the diff"
+			})
+		] });
+		$[7] = diffId;
+		$[8] = mode;
+		$[9] = viewId;
+		$[10] = views;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t5 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Paper, {
+			shadow: "md",
+			p: "xs",
+			withBorder: true,
+			pos: "absolute",
+			top: 56,
+			right: 12,
+			w: 280,
+			style: t1,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				children: [t5, t6]
+			})
+		});
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
+}
+function _temp3(item) {
+	return /* @__PURE__ */ jsxs(Group, {
+		gap: 4,
+		wrap: "nowrap",
+		children: [/* @__PURE__ */ jsx(Box, {
+			w: 12,
+			h: 12,
+			style: {
+				border: `2px ${item.style} ${item.color}`,
+				borderRadius: 3
+			}
+		}), /* @__PURE__ */ jsx(Text, {
+			size: "xs",
+			c: "dimmed",
+			children: item.label
+		})]
+	}, item.label);
+}
+function _temp2(value) {
+	return selectDiff(value && value !== NoDiff ? value : null);
+}
+function _temp(d) {
+	return {
+		value: d.id,
+		label: d.title ?? d.id
+	};
+}
+export { ModelDiffPanel, useCompareView };

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

@@ -0,0 +1,76 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { applyModelDiff } from "@likec4/core/compute-view";
+import { ElementModel, LikeC4Model, LikeC4ViewModel } from "@likec4/core/model";
+// src/components/model-diff/compare-model.ts
+function idOf(value) {
+	return typeof value === "string" ? value : value.id;
+}
+/**
+* Model the detail popups read while a compare view is on screen.
+*
+* Added and modified elements come from the model after the diff.
+* Removed elements come from the model before the diff.
+* `as-is` reads only the model before the diff.
+* The open compare view replaces the view of the same id, so node lookup matches the diagram.
+*/
+function compareLookupModel(before, input) {
+	const diff = before.$data.diffs?.[input.diffId];
+	if (!diff) return before;
+	const after = input.mode === "as-is" ? before : LikeC4Model.create(applyModelDiff(before.$data, diff));
+	const useAfter = input.mode !== "as-is";
+	let compareViewModel;
+	const proxy = new Proxy(before, { get(target, prop, receiver) {
+		switch (prop) {
+			case "element": return (el) => {
+				if (el instanceof ElementModel) return el;
+				return (useAfter ? after.findElement(idOf(el)) : null) ?? target.element(el);
+			};
+			case "findElement": return (el) => {
+				return (useAfter ? after.findElement(idOf(el)) : null) ?? target.findElement(el);
+			};
+			case "relationship": return (rel, type) => {
+				if (!useAfter || type === "deployment") return target.relationship(rel, type);
+				return after.findRelationship(idOf(rel), type) ?? target.relationship(rel, type);
+			};
+			case "findRelationship": return (id, type) => {
+				if (!useAfter || type === "deployment") return target.findRelationship(id, type);
+				return after.findRelationship(id, type) ?? target.findRelationship(id, type);
+			};
+			case "elements": return function* () {
+				const seen = /* @__PURE__ */ new Set();
+				if (useAfter) for (const element of after.elements()) {
+					seen.add(element.id);
+					yield element;
+				}
+				for (const element of target.elements()) if (!seen.has(element.id)) yield element;
+			};
+			case "roots": return function* () {
+				const seen = /* @__PURE__ */ new Set();
+				if (useAfter) for (const element of after.roots()) {
+					seen.add(element.id);
+					yield element;
+				}
+				for (const element of target.roots()) if (!seen.has(element.id)) yield element;
+			};
+			case "findView": return (viewId) => viewModel(viewId) ?? target.findView(viewId);
+			case "view": return (viewId) => {
+				return viewModel(idOf(viewId)) ?? target.view(viewId);
+			};
+			default: {
+				const value = Reflect.get(target, prop, receiver);
+				return typeof value === "function" ? value.bind(target) : value;
+			}
+		}
+	} });
+	function viewModel(viewId) {
+		if (viewId !== input.view.id) return null;
+		if (!compareViewModel) {
+			const existing = before.findView(input.view.id);
+			if (!existing) return null;
+			compareViewModel = new LikeC4ViewModel(proxy, existing.folder, input.view);
+		}
+		return compareViewModel;
+	}
+	return proxy;
+}
+export { compareLookupModel };

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

@@ -0,0 +1,45 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { t as useStore } from "../../chunks/react.mjs";
+import { r as atom } from "../../chunks/libs/nanostores.mjs";
+import { useModelDiffs } from "../../context/ModelDiffsContext.mjs";
+import { c } from "react/compiler-runtime";
+// src/components/model-diff/state.ts
+/**
+* Selected diff (`null` shows the model as is) and compare mode, kept across views
+*/
+var $modelDiff = /* @__PURE__ */ atom({
+	diffId: null,
+	mode: "changes"
+});
+/**
+* Selected diff (`null` if the project no longer has it) and compare mode
+*/
+function useModelDiffState() {
+	const $ = c(3);
+	const { diffs } = useModelDiffs();
+	const state = useStore($modelDiff);
+	let t0;
+	if ($[0] !== diffs || $[1] !== state) {
+		t0 = diffs.some((d) => d.id === state.diffId) ? state : {
+			...state,
+			diffId: null
+		};
+		$[0] = diffs;
+		$[1] = state;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+function selectDiff(diffId) {
+	$modelDiff.set({
+		...$modelDiff.get(),
+		diffId
+	});
+}
+function selectCompareMode(mode) {
+	$modelDiff.set({
+		...$modelDiff.get(),
+		mode
+	});
+}
+export { selectCompareMode, selectDiff, useModelDiffState };

package/__app__/src/components/search/OverviewSearch.mjs

@@ -0,0 +1,92 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { OverviewSearchAdapter } from "./OverviewSearchAdapter.mjs";
+import { memo, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FramerMotionConfig, Overlay, SearchControl, SearchPanelContent, searchBodyCss, searchDialogCss } from "likec4/react";
+import { useHotkeys } from "@mantine/hooks";
+import { AnimatePresence } from "motion/react";
+// src/components/search/OverviewSearch.tsx
+var OverviewSearch = memo(() => {
+	const $ = c(10);
+	const [isOpened, setIsOpened] = useState(false);
+	const dialogElRef = useRef(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => setIsOpened(true);
+		$[0] = t0;
+	} else t0 = $[0];
+	const open = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => setIsOpened(false);
+		$[1] = t1;
+	} else t1 = $[1];
+	const close = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (node) => {
+			if (node) dialogElRef.current = node;
+		};
+		$[2] = t2;
+	} else t2 = $[2];
+	const captureDialogRef = t2;
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			if (dialogElRef.current?.open) dialogElRef.current.close();
+			dialogElRef.current = null;
+		};
+		$[3] = t3;
+	} else t3 = $[3];
+	const handleExitComplete = t3;
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = [[
+			"mod+k",
+			open,
+			{ preventDefault: true }
+		]];
+		$[4] = t4;
+	} else t4 = $[4];
+	useHotkeys(t4);
+	let t5;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(SearchControl, { onClick: open });
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== isOpened) {
+		t6 = isOpened && /* @__PURE__ */ jsx(Overlay, {
+			ref: captureDialogRef,
+			fullscreen: true,
+			withBackdrop: false,
+			backdrop: { opacity: .9 },
+			classes: {
+				dialog: searchDialogCss,
+				body: searchBodyCss
+			},
+			openDelay: 0,
+			onClose: close,
+			"data-likec4-search": "true",
+			children: /* @__PURE__ */ jsx(OverviewSearchAdapter, {
+				onClose: close,
+				children: /* @__PURE__ */ jsx(SearchPanelContent, {})
+			})
+		});
+		$[6] = isOpened;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t5, /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+			onExitComplete: handleExitComplete,
+			children: t6
+		}) })] });
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	return t7;
+});
+OverviewSearch.displayName = "OverviewSearch";
+export { OverviewSearch };

package/__app__/src/components/search/OverviewSearchAdapter.mjs

@@ -0,0 +1,94 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { c as useNavigate } from "../../chunks/libs/@tanstack.mjs";
+import { t as useCurrentProject } from "../../chunks/hooks.mjs";
+import { useState } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { SearchContext, normalizeSearch } from "likec4/react";
+// src/components/search/OverviewSearchAdapter.tsx
+function OverviewSearchAdapter(t0) {
+	const $ = c(17);
+	const { onClose, children } = t0;
+	const [searchValue, setSearchValue] = useState("");
+	const [pickViewFor, setPickViewFor] = useState(null);
+	const navigate = useNavigate();
+	const { id: projectId } = useCurrentProject();
+	let t1;
+	if ($[0] !== navigate || $[1] !== onClose || $[2] !== projectId) {
+		t1 = (viewId, focusOnElement) => {
+			onClose();
+			navigate({
+				to: "/project/$projectId/view/$viewId/",
+				params: {
+					projectId,
+					viewId
+				},
+				search: (prev) => ({
+					...prev,
+					...focusOnElement && { focusOnElement }
+				})
+			});
+		};
+		$[0] = navigate;
+		$[1] = onClose;
+		$[2] = projectId;
+		$[3] = t1;
+	} else t1 = $[3];
+	const navigateTo = t1;
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (elementFqn) => {
+			setPickViewFor(elementFqn);
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	const openPickView = t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			setPickViewFor(null);
+		};
+		$[5] = t3;
+	} else t3 = $[5];
+	const closePickView = t3;
+	let t4;
+	if ($[6] !== searchValue) {
+		t4 = normalizeSearch(searchValue);
+		$[6] = searchValue;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== navigateTo || $[9] !== onClose || $[10] !== pickViewFor || $[11] !== searchValue || $[12] !== t4) {
+		t5 = {
+			searchValue,
+			setSearchValue,
+			normalizedSearch: t4,
+			navigateTo,
+			openPickView,
+			closePickView,
+			pickViewFor,
+			close: onClose,
+			currentViewId: null,
+			openedWithSearch: null
+		};
+		$[8] = navigateTo;
+		$[9] = onClose;
+		$[10] = pickViewFor;
+		$[11] = searchValue;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	const value = t5;
+	let t6;
+	if ($[14] !== children || $[15] !== value) {
+		t6 = /* @__PURE__ */ jsx(SearchContext.Provider, {
+			value,
+			children
+		});
+		$[14] = children;
+		$[15] = value;
+		$[16] = t6;
+	} else t6 = $[16];
+	return t6;
+}
+export { OverviewSearchAdapter };

package/__app__/src/components/sidebar/DiagramTree.css.mjs

@@ -0,0 +1,48 @@
+import { f as css } from "../../chunks/styled-system.mjs";
+// src/components/sidebar/DiagramTree.css.ts
+var navsidebar = css({
+	backdropFilter: "[blur(6px)]",
+	transitionProperty: "common",
+	transition: "slow",
+	transform: "translateX(-100%)",
+	_before: {
+		transitionProperty: "common",
+		transition: "slow",
+		position: "absolute",
+		content: "\" \"",
+		inset: "0",
+		background: "mantine.gray[7]",
+		opacity: "0.7",
+		zIndex: "[1]"
+	},
+	"& > div": {
+		position: "relative",
+		zIndex: "[2]"
+	},
+	"&[data-opened='true']": { transform: "translateX(0)" }
+});
+var trigger = css({
+	cursor: "pointer",
+	_before: {
+		transitionProperty: "common",
+		transitionTimingFunction: "[cubic-bezier(0,0.31,0,1.03)]",
+		transitionDuration: "fast",
+		position: "absolute",
+		content: "",
+		inset: "0",
+		background: "mantine.gray[7]",
+		opacity: "0",
+		zIndex: "[1]"
+	},
+	"& > *": {
+		position: "relative",
+		zIndex: "[2]"
+	},
+	"&:hover::before": {
+		visibility: "visible",
+		opacity: "0.7"
+	},
+	"&[data-opened='true']": { visibility: "hidden" }
+});
+var diagramPreview = css({ pointerEvents: "none" });
+export { diagramPreview, navsidebar, trigger };