likec4 1.60.0 → 1.61.0

package/__app__/src/components/sidebar/DiagramsTree.mjs

@@ -0,0 +1,304 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { s as Box$1 } from "../../chunks/styled-system.mjs";
+import { a as IconStack2, d as IconFileCode, l as IconLayoutDashboard, n as IconFolderFilled, t as IconStarFilled, u as IconFolderOpen } from "../../chunks/libs/@tabler/icons-react.mjs";
+import { c as useNavigate } from "../../chunks/libs/@tanstack.mjs";
+import { i as useLikeC4Views, n as useCurrentView, t as useCurrentProject } from "../../chunks/hooks.mjs";
+import { isTreeNodeData, useDiagramsTreeData } from "./data.mjs";
+import { SidebarDrawerOps } from "./state.mjs";
+import { memo, useEffect } from "react";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, HoverCard, HoverCardDropdown, HoverCardTarget, ThemeIcon, Tree, useComputedColorScheme, useTree } from "@mantine/core";
+import { StaticLikeC4Diagram, pickViewBounds, useUpdateEffect } from "likec4/react";
+// src/components/sidebar/DiagramsTree.tsx
+var isFile = (node) => isTreeNodeData(node) && node.type === "file";
+var FolderIcon = (t0) => {
+	const $ = c(3);
+	const { node, expanded } = t0;
+	if (isFile(node)) {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(ThemeIcon, {
+				size: "sm",
+				variant: "transparent",
+				color: "indigo",
+				children: /* @__PURE__ */ jsx(IconFileCode, { size: 16 })
+			});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	if ($[1] !== expanded) {
+		t1 = /* @__PURE__ */ jsx(ThemeIcon, {
+			size: "sm",
+			variant: "transparent",
+			color: "violet",
+			children: expanded ? /* @__PURE__ */ jsx(IconFolderOpen, { size: 16 }) : /* @__PURE__ */ jsx(IconFolderFilled, { size: 16 })
+		});
+		$[1] = expanded;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+var DiagramsTree = /* @__PURE__ */ memo((t0) => {
+	const $ = c(28);
+	const { groupBy } = t0;
+	const views = useLikeC4Views();
+	const data = useDiagramsTreeData(groupBy);
+	const navigate = useNavigate();
+	const { id: projectId } = useCurrentProject();
+	let t1;
+	if ($[0] !== navigate || $[1] !== projectId) {
+		t1 = (viewId) => {
+			SidebarDrawerOps.close();
+			navigate({
+				to: "/project/$projectId/view/$viewId/",
+				viewTransition: false,
+				params: {
+					projectId,
+					viewId
+				}
+			});
+		};
+		$[0] = navigate;
+		$[1] = projectId;
+		$[2] = t1;
+	} else t1 = $[2];
+	const navigateTo = t1;
+	const [diagram] = useCurrentView();
+	const viewId_0 = diagram?.id ?? null;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { multiple: false };
+		$[3] = t2;
+	} else t2 = $[3];
+	const tree = useTree(t2);
+	const sourcePath = diagram?.sourcePath ?? null;
+	let t3;
+	if ($[4] !== tree) {
+		t3 = () => {
+			tree.collapseAllNodes();
+		};
+		$[4] = tree;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== groupBy) {
+		t4 = [groupBy];
+		$[6] = groupBy;
+		$[7] = t4;
+	} else t4 = $[7];
+	useUpdateEffect(t3, t4);
+	let t5;
+	if ($[8] !== sourcePath || $[9] !== tree) {
+		t5 = () => {
+			if (sourcePath) {
+				const segments = sourcePath.split("/");
+				let path = "@fs";
+				for (const segment of segments) {
+					path = path + `/${segment}`;
+					tree.expand(path);
+				}
+			}
+		};
+		$[8] = sourcePath;
+		$[9] = tree;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== groupBy || $[12] !== sourcePath) {
+		t6 = [sourcePath, groupBy];
+		$[11] = groupBy;
+		$[12] = sourcePath;
+		$[13] = t6;
+	} else t6 = $[13];
+	useEffect(t5, t6);
+	let t7;
+	if ($[14] !== tree || $[15] !== viewId_0) {
+		t7 = () => {
+			if (viewId_0) tree.select(viewId_0);
+		};
+		$[14] = tree;
+		$[15] = viewId_0;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== viewId_0) {
+		t8 = [viewId_0];
+		$[17] = viewId_0;
+		$[18] = t8;
+	} else t8 = $[18];
+	useEffect(t7, t8);
+	const theme = useComputedColorScheme();
+	let t9;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = { node: {
+			marginTop: 2,
+			marginBottom: 2
+		} };
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== navigateTo || $[21] !== theme || $[22] !== views) {
+		t10 = (t11) => {
+			const { node, selected, expanded, elementProps, hasChildren } = t11;
+			return /* @__PURE__ */ jsx(DiagramPreviewHoverCard, {
+				diagram: !hasChildren ? views.find((v) => v.id === node.value) : void 0,
+				children: /* @__PURE__ */ jsx(Button, {
+					fullWidth: true,
+					color: theme === "light" ? "dark" : "gray",
+					variant: selected ? "transparent" : "subtle",
+					size: "sm",
+					fz: "sm",
+					fw: hasChildren ? "600" : "500",
+					justify: "flex-start",
+					styles: { section: { opacity: .5 } },
+					leftSection: /* @__PURE__ */ jsxs(Fragment, { children: [
+						!hasChildren && node.value === "index" && /* @__PURE__ */ jsx(IconStarFilled, {
+							size: 14,
+							opacity: .7
+						}),
+						!hasChildren && node.value !== "index" && isTreeNodeData(node) && /* @__PURE__ */ jsxs(Fragment, { children: [node.type === "deployment-view" && /* @__PURE__ */ jsx(IconStack2, { size: 14 }), node.type === "view" && /* @__PURE__ */ jsx(IconLayoutDashboard, { size: 14 })] }),
+						hasChildren && /* @__PURE__ */ jsx(FolderIcon, {
+							node,
+							expanded
+						})
+					] }),
+					...elementProps,
+					...!hasChildren && { onClick: (e) => {
+						e.stopPropagation();
+						navigateTo(node.value);
+					} },
+					children: node.label
+				})
+			});
+		};
+		$[20] = navigateTo;
+		$[21] = theme;
+		$[22] = views;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== data || $[25] !== t10 || $[26] !== tree) {
+		t11 = /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Tree, {
+			allowRangeSelection: false,
+			tree,
+			data,
+			styles: t9,
+			levelOffset: "md",
+			renderNode: t10
+		}) });
+		$[24] = data;
+		$[25] = t10;
+		$[26] = tree;
+		$[27] = t11;
+	} else t11 = $[27];
+	return t11;
+}, (prev, next) => prev.groupBy === next.groupBy);
+function DiagramPreviewHoverCard(t0) {
+	const $ = c(16);
+	const { diagram, children } = t0;
+	let t1;
+	if ($[0] !== diagram) {
+		t1 = diagram ? pickViewBounds(diagram) : null;
+		$[0] = diagram;
+		$[1] = t1;
+	} else t1 = $[1];
+	const bounds = t1;
+	const ratio = bounds ? Math.max(bounds.width / 400, bounds.height / 300) : 1;
+	let t2;
+	if ($[2] !== bounds || $[3] !== ratio) {
+		t2 = bounds ? Math.round(bounds.width / ratio) : 0;
+		$[2] = bounds;
+		$[3] = ratio;
+		$[4] = t2;
+	} else t2 = $[4];
+	const width = t2;
+	let t3;
+	if ($[5] !== bounds || $[6] !== ratio) {
+		t3 = bounds ? Math.round(bounds.height / ratio) : 0;
+		$[5] = bounds;
+		$[6] = ratio;
+		$[7] = t3;
+	} else t3 = $[7];
+	const height = t3;
+	let t4;
+	if ($[8] !== children || $[9] !== diagram || $[10] !== height || $[11] !== width) {
+		t4 = diagram && /* @__PURE__ */ jsxs(HoverCard, {
+			position: "right-start",
+			openDelay: 400,
+			closeDelay: 100,
+			keepMounted: false,
+			shadow: "lg",
+			children: [/* @__PURE__ */ jsx(HoverCardTarget, { children }), /* @__PURE__ */ jsx(HoverCardDropdown, {
+				style: {
+					width,
+					height
+				},
+				p: "xs",
+				children: /* @__PURE__ */ jsx(DiagramPreview, { diagram })
+			})]
+		});
+		$[8] = children;
+		$[9] = diagram;
+		$[10] = height;
+		$[11] = width;
+		$[12] = t4;
+	} else t4 = $[12];
+	const t5 = !diagram && children;
+	let t6;
+	if ($[13] !== t4 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t4, t5] });
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
+}
+var DiagramPreview = memo((t0) => {
+	const $ = c(12);
+	const { diagram } = t0;
+	let t1;
+	if ($[0] !== diagram) {
+		t1 = pickViewBounds(diagram);
+		$[0] = diagram;
+		$[1] = t1;
+	} else t1 = $[1];
+	const bounds = t1;
+	const ratio = Math.max(bounds.width / 400, bounds.height / 300);
+	let t2;
+	if ($[2] !== bounds.width || $[3] !== ratio) {
+		t2 = Math.round(bounds.width / ratio);
+		$[2] = bounds.width;
+		$[3] = ratio;
+		$[4] = t2;
+	} else t2 = $[4];
+	const width = t2;
+	let t3;
+	if ($[5] !== bounds.height || $[6] !== ratio) {
+		t3 = Math.round(bounds.height / ratio);
+		$[5] = bounds.height;
+		$[6] = ratio;
+		$[7] = t3;
+	} else t3 = $[7];
+	const height = t3;
+	let t4;
+	if ($[8] !== diagram || $[9] !== height || $[10] !== width) {
+		t4 = /* @__PURE__ */ jsx(StaticLikeC4Diagram, {
+			view: diagram,
+			fitView: true,
+			fitViewPadding: "4px",
+			enableElementDetails: false,
+			reduceGraphics: true,
+			initialWidth: width,
+			initialHeight: height
+		});
+		$[8] = diagram;
+		$[9] = height;
+		$[10] = width;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}, (prev, next) => prev.diagram.id === next.diagram.id);
+export { DiagramsTree };

package/__app__/src/components/sidebar/Drawer.mjs

@@ -0,0 +1,178 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { g as IconArrowLeft, t as IconStarFilled } from "../../chunks/libs/@tabler/icons-react.mjs";
+import { s as Link } from "../../chunks/libs/@tanstack.mjs";
+import { t as useCurrentProject } from "../../chunks/hooks.mjs";
+import { DiagramsTree } from "./DiagramsTree.mjs";
+import { SidebarDrawerOps, useDrawerOpened } from "./state.mjs";
+import { memo } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isSingleProject } from "likec4:projects";
+import { Button, Drawer, Group, ScrollArea, SegmentedControl, rem } from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
+// src/components/sidebar/Drawer.tsx
+var SidebarDrawer = memo(() => {
+	const $ = c(27);
+	const opened = useDrawerOpened();
+	const { id: projectId } = useCurrentProject();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			key: "sidebar-drawer-grouping",
+			defaultValue: "by-files"
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [grouping, setGrouping] = useLocalStorage(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Drawer.Overlay, { blur: 2 });
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			component: Link,
+			to: "/",
+			leftSection: t2,
+			color: "dimmed",
+			variant: "subtle",
+			px: rem(5),
+			styles: { section: { marginInlineEnd: 4 } },
+			size: "xs",
+			children: "Overview"
+		});
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = setGrouping;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = [
+			{
+				label: "By files",
+				value: "by-files"
+			},
+			{
+				label: "By folders",
+				value: "by-folders"
+			},
+			{
+				label: "List",
+				value: "none"
+			}
+		];
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== grouping || $[6] !== t4) {
+		t6 = /* @__PURE__ */ jsx(SegmentedControl, {
+			size: "xs",
+			withItemsBorders: false,
+			value: grouping,
+			onChange: t4,
+			data: t5
+		});
+		$[5] = grouping;
+		$[6] = t4;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(IconStarFilled, {
+			size: 12,
+			stroke: 2
+		});
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	let t9;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = rem(5);
+		t9 = { section: { marginInlineEnd: 4 } };
+		$[9] = t8;
+		$[10] = t9;
+	} else {
+		t8 = $[9];
+		t9 = $[10];
+	}
+	let t10;
+	if ($[11] !== projectId) {
+		t10 = /* @__PURE__ */ jsx(Button, {
+			leftSection: t7,
+			color: "dimmed",
+			variant: "subtle",
+			px: t8,
+			styles: t9,
+			size: "xs",
+			renderRoot: (props) => /* @__PURE__ */ jsx(Link, {
+				to: "/project/$projectId/view/$viewId/",
+				params: {
+					projectId,
+					viewId: "index"
+				},
+				...props
+			}),
+			children: "Open index"
+		});
+		$[11] = projectId;
+		$[12] = t10;
+	} else t10 = $[12];
+	let t11;
+	if ($[13] !== t10 || $[14] !== t6) {
+		t11 = /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			children: [
+				t3,
+				t6,
+				t10
+			]
+		});
+		$[13] = t10;
+		$[14] = t6;
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(Drawer.CloseButton, {});
+		$[16] = t12;
+	} else t12 = $[16];
+	let t13;
+	if ($[17] !== t11) {
+		t13 = /* @__PURE__ */ jsxs(Drawer.Header, { children: [t11, t12] });
+		$[17] = t11;
+		$[18] = t13;
+	} else t13 = $[18];
+	let t14;
+	if ($[19] !== grouping) {
+		t14 = /* @__PURE__ */ jsx(Drawer.Body, { children: /* @__PURE__ */ jsx(DiagramsTree, { groupBy: grouping }) });
+		$[19] = grouping;
+		$[20] = t14;
+	} else t14 = $[20];
+	let t15;
+	if ($[21] !== t13 || $[22] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Drawer.Content, { children: [t13, t14] });
+		$[21] = t13;
+		$[22] = t14;
+		$[23] = t15;
+	} else t15 = $[23];
+	let t16;
+	if ($[24] !== opened || $[25] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Drawer.Root, {
+			keepMounted: isSingleProject,
+			opened,
+			scrollAreaComponent: ScrollArea.Autosize,
+			onClose: SidebarDrawerOps.close,
+			children: [t1, t15]
+		});
+		$[24] = opened;
+		$[25] = t15;
+		$[26] = t16;
+	} else t16 = $[26];
+	return t16;
+});
+export { SidebarDrawer };

package/__app__/src/components/sidebar/SidebarBurger.mjs

@@ -0,0 +1,28 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { s as Box$1 } from "../../chunks/styled-system.mjs";
+import { SidebarDrawerOps } from "./state.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Burger } from "@mantine/core";
+// src/components/sidebar/SidebarBurger.tsx
+function SidebarBurger() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Box$1, {
+			css: {
+				position: "fixed",
+				top: "[14px]",
+				left: "[10px]"
+			},
+			children: /* @__PURE__ */ jsx(Burger, {
+				size: "sm",
+				onClick: SidebarDrawerOps.open,
+				"aria-label": "Toggle navigation"
+			})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+export { SidebarBurger };

package/__app__/src/components/sidebar/data.mjs

@@ -0,0 +1,94 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { t as a } from "../../chunks/find.mjs";
+import { c } from "react/compiler-runtime";
+import { useLikeC4Model } from "likec4/react";
+import { compareNatural, nonexhaustive } from "@likec4/core/utils";
+// src/components/sidebar/data.ts
+var isTreeNodeData = (node) => "type" in node && [
+	"file",
+	"folder",
+	"view",
+	"deployment-view"
+].includes(node.type);
+function dropFilename(relativePath) {
+	if (relativePath === "") return "";
+	return relativePath.split("/").slice(0, -1).join("/");
+}
+function compareTreeNodes(a, b) {
+	const aChildren = a.children?.length ?? 0;
+	const bChildren = b.children?.length ?? 0;
+	if (aChildren === 0 && bChildren > 0) return 1;
+	if (aChildren > 0 && bChildren === 0) return -1;
+	return compareNatural(a.label, b.label);
+}
+function buildDiagramTreeData(views, groupBy) {
+	const root = {
+		value: "",
+		label: "Diagrams",
+		type: "folder",
+		children: []
+	};
+	const findParent = (path) => {
+		let parent = root;
+		if (path === "") return parent;
+		const segments = path.split("/");
+		const traversed = ["@fs"];
+		while (segments.length) {
+			const label = segments.shift();
+			traversed.push(label);
+			const value = traversed.join("/");
+			let node = a(parent.children, (n) => n.value === value);
+			if (!node) {
+				node = {
+					label,
+					value,
+					type: "folder",
+					children: []
+				};
+				parent.children.push(node);
+			}
+			parent = node;
+		}
+		return parent;
+	};
+	for (const view of views) {
+		let relativePath;
+		switch (groupBy) {
+			case "by-files":
+				relativePath = view.$view.sourcePath ?? "";
+				break;
+			case "by-folders":
+				relativePath = dropFilename(view.$view.sourcePath ?? "");
+				break;
+			case "none":
+				relativePath = "";
+				break;
+			default: nonexhaustive(groupBy);
+		}
+		const parent = findParent(relativePath);
+		parent.children.push({
+			value: view.id,
+			label: view.title ?? view.id,
+			type: view.isDeploymentView() ? "deployment-view" : "view"
+		});
+		if (parent !== root) {
+			parent.children.sort(compareTreeNodes);
+			if (groupBy === "by-files" && parent.type !== "file") parent.type = "file";
+		}
+	}
+	return root.children.sort(compareTreeNodes);
+}
+function useDiagramsTreeData(t0) {
+	const $ = c(3);
+	const groupBy = t0 === void 0 ? "by-files" : t0;
+	const model = useLikeC4Model();
+	let t1;
+	if ($[0] !== groupBy || $[1] !== model) {
+		t1 = buildDiagramTreeData([...model.views()], groupBy);
+		$[0] = groupBy;
+		$[1] = model;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+export { isTreeNodeData, useDiagramsTreeData };

package/__app__/src/components/sidebar/state.mjs

@@ -0,0 +1,16 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { t as useStore } from "../../chunks/react.mjs";
+import { n as onMount, r as atom } from "../../chunks/libs/nanostores.mjs";
+// src/components/sidebar/state.ts
+var drawerOpenedAtom = /* @__PURE__ */ atom(false);
+onMount(drawerOpenedAtom, () => {
+	drawerOpenedAtom.set(false);
+});
+var useDrawerOpened = () => {
+	return useStore(drawerOpenedAtom);
+};
+var SidebarDrawerOps = {
+	open: () => drawerOpenedAtom.set(true),
+	close: () => drawerOpenedAtom.set(false)
+};
+export { SidebarDrawerOps, useDrawerOpened };

package/__app__/src/components/view-page/Header.mjs

@@ -0,0 +1 @@
+export { t as Header } from "../../chunks/Header.mjs";