likec4 1.60.0 → 1.61.0

package/__app__/src/chunks/single-index.mjs

@@ -0,0 +1,465 @@
+import "./rolldown-runtime.mjs";
+import { _ as notFound, a as createFileRoute, s as Link } from "./libs/@tanstack.mjs";
+import { f as css } from "./styled-system.mjs";
+import { ColorSchemeToggle } from "../components/ColorSchemeToggle.mjs";
+import { n as ErrorComponent } from "./ErrorComponent.mjs";
+import { NavigationPanel } from "../components/NavigationPanel.mjs";
+import { OverviewSearch } from "../components/search/OverviewSearch.mjs";
+import { SidebarDrawer } from "../components/sidebar/Drawer.mjs";
+import { SidebarDrawerOps } from "../components/sidebar/state.mjs";
+import { ViewOutlet } from "../components/ViewOutlet.mjs";
+import { LikeC4IconRendererContext } from "../context/LikeC4IconRendererContext.mjs";
+import { LikeC4ModelContext } from "../context/LikeC4ModelContext.mjs";
+import { ModelDiffsContext } from "../context/ModelDiffsContext.mjs";
+import { i as useLikeC4Views, t as useCurrentProject } from "./hooks.mjs";
+import { cardLink, previewBg } from "../routes/index.css.mjs";
+import { useEffect, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { pageTitle } from "likec4:app-config";
+import { Box, Burger, Card, Container, Group, SimpleGrid, Text } from "@mantine/core";
+import { Markdown, StaticLikeC4Diagram } from "likec4/react";
+import { useDocumentTitle, useInViewport } from "@mantine/hooks";
+import { RichText } from "@likec4/core/types";
+import { loadDiffs } from "likec4:diffs";
+import { loadModel } from "likec4:model";
+// ../../node_modules/.pnpm/remeda@2.52.0/node_modules/remeda/dist/randomInteger.js
+function e(e, t) {
+	let n = Math.ceil(e);
+	let r = Math.floor(t);
+	if (r < n) throw RangeError(`randomInteger: The range [${e.toString()},${t.toString()}] contains no integer`);
+	return Math.floor(Math.random() * (r - n + 1) + n);
+}
+// src/filterLandingPageViews.ts
+function filterLandingPageViews(views, filter) {
+	if (!filter) return views;
+	if ("include" in filter) return views.filter((view) => matchesAny(view, filter.include));
+	if ("exclude" in filter) return views.filter((view) => !matchesAny(view, filter.exclude));
+	return views;
+}
+function matchesAny(view, patterns) {
+	return patterns.some((pattern) => {
+		if (pattern.startsWith("#")) {
+			const tag = pattern.slice(1);
+			return view.tags?.some((t) => t === tag) ?? false;
+		}
+		return view.id === pattern;
+	});
+}
+// src/routes/single-index.tsx
+var Route = createFileRoute("/single-index")({
+	staleTime: Infinity,
+	loader: async ({ context }) => {
+		const projectId = context.projectId;
+		const [data, { $diffs }] = await Promise.all([loadModel(projectId), loadDiffs(projectId)]);
+		if (!data.$likec4data.value) throw notFound();
+		return {
+			$likec4model: data.$likec4model,
+			$diffs,
+			projectId
+		};
+	},
+	component: RouteComponent,
+	errorComponent: ErrorComponent
+});
+function RouteComponent() {
+	const $ = c(9);
+	const { $likec4model, $diffs, projectId } = Route.useLoaderData();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(SingleIndexPage, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== $diffs) {
+		t1 = /* @__PURE__ */ jsx(ModelDiffsContext, {
+			diffs: $diffs,
+			children: t0
+		});
+		$[1] = $diffs;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== $likec4model || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(LikeC4ModelContext, {
+			likec4model: $likec4model,
+			children: t1
+		});
+		$[3] = $likec4model;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== projectId || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ViewOutlet, { children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, {
+			projectId,
+			children: t2
+		}) });
+		$[6] = projectId;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+function SingleIndexPage() {
+	const $ = c(40);
+	const allViews = useLikeC4Views();
+	const { landingPage, title: projectTitle } = useCurrentProject();
+	useDocumentTitle(projectTitle ?? pageTitle);
+	let T0;
+	let T1;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	if ($[0] !== allViews || $[1] !== landingPage) {
+		const views = filterLandingPageViews(allViews, landingPage);
+		T1 = Container;
+		t6 = "xl";
+		let t9;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = /* @__PURE__ */ jsx(SidebarDrawer, {});
+			t9 = css({
+				containerName: "likec4-root",
+				containerType: "inline-size",
+				display: "flex",
+				alignItems: "flex-start",
+				justifyContent: "space-between",
+				padding: "xs",
+				gap: "xs",
+				position: "sticky",
+				top: "0",
+				zIndex: "[10]",
+				backgroundColor: "likec4.panel.bg/85",
+				backdropFilter: "[blur(8px)]"
+			});
+			$[13] = t7;
+			$[14] = t9;
+		} else {
+			t7 = $[13];
+			t9 = $[14];
+		}
+		let t10;
+		if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+			t10 = {
+				position: "relative",
+				width: "max-content",
+				margin: "0"
+			};
+			$[15] = t10;
+		} else t10 = $[15];
+		let t11;
+		let t12;
+		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+			t11 = /* @__PURE__ */ jsx("div", {
+				style: {
+					width: 0,
+					height: 36
+				},
+				"aria-hidden": true
+			});
+			t12 = /* @__PURE__ */ jsx(Burger, {
+				size: "sm",
+				onClick: SidebarDrawerOps.open,
+				"aria-label": "Toggle navigation"
+			});
+			$[16] = t11;
+			$[17] = t12;
+		} else {
+			t11 = $[16];
+			t12 = $[17];
+		}
+		let t13;
+		if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = /* @__PURE__ */ jsx(NavigationPanel.Root, {
+				css: t10,
+				children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [
+					t11,
+					t12,
+					/* @__PURE__ */ jsx(NavigationPanel.Logo, {
+						css: { flexShrink: 0 },
+						onClick: _temp
+					}),
+					/* @__PURE__ */ jsx(OverviewSearch, {})
+				] })
+			});
+			$[18] = t13;
+		} else t13 = $[18];
+		let t14;
+		if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+			t14 = {
+				position: "relative",
+				margin: "0"
+			};
+			$[19] = t14;
+		} else t14 = $[19];
+		if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = /* @__PURE__ */ jsxs("div", {
+				className: t9,
+				children: [t13, /* @__PURE__ */ jsx(NavigationPanel.Root, {
+					panelPosition: "right",
+					css: t14,
+					children: /* @__PURE__ */ jsx(NavigationPanel.Body, { children: /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							minHeight: 36
+						},
+						children: /* @__PURE__ */ jsx(ColorSchemeToggle, {})
+					}) })
+				})]
+			});
+			$[20] = t8;
+		} else t8 = $[20];
+		T0 = SimpleGrid;
+		if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+			t0 = {
+				base: "md",
+				sm: "md"
+			};
+			t1 = {
+				base: "sm",
+				sm: "sm"
+			};
+			t2 = {
+				base: 1,
+				sm: 2,
+				md: 3,
+				xl: 4
+			};
+			t3 = {
+				base: 10,
+				sm: "xl"
+			};
+			t4 = {
+				base: "md",
+				sm: "xl"
+			};
+			$[21] = t0;
+			$[22] = t1;
+			$[23] = t2;
+			$[24] = t3;
+			$[25] = t4;
+		} else {
+			t0 = $[21];
+			t1 = $[22];
+			t2 = $[23];
+			t3 = $[24];
+			t4 = $[25];
+		}
+		t5 = views.map(_temp2);
+		$[0] = allViews;
+		$[1] = landingPage;
+		$[2] = T0;
+		$[3] = T1;
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+		$[12] = t8;
+	} else {
+		T0 = $[2];
+		T1 = $[3];
+		t0 = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+		t5 = $[9];
+		t6 = $[10];
+		t7 = $[11];
+		t8 = $[12];
+	}
+	let t9;
+	if ($[26] !== T0 || $[27] !== t0 || $[28] !== t1 || $[29] !== t2 || $[30] !== t3 || $[31] !== t4 || $[32] !== t5) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			p: t0,
+			pt: t1,
+			cols: t2,
+			spacing: t3,
+			verticalSpacing: t4,
+			children: t5
+		});
+		$[26] = T0;
+		$[27] = t0;
+		$[28] = t1;
+		$[29] = t2;
+		$[30] = t3;
+		$[31] = t4;
+		$[32] = t5;
+		$[33] = t9;
+	} else t9 = $[33];
+	let t10;
+	if ($[34] !== T1 || $[35] !== t6 || $[36] !== t7 || $[37] !== t8 || $[38] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(T1, {
+			size: t6,
+			children: [
+				t7,
+				t8,
+				t9
+			]
+		});
+		$[34] = T1;
+		$[35] = t6;
+		$[36] = t7;
+		$[37] = t8;
+		$[38] = t9;
+		$[39] = t10;
+	} else t10 = $[39];
+	return t10;
+}
+function _temp2(v) {
+	return /* @__PURE__ */ jsx(ViewCard, { view: v }, v.id);
+}
+function _temp() {
+	return window.scrollTo({
+		top: 0,
+		behavior: "smooth"
+	});
+}
+function ViewCard(t0) {
+	const $ = c(26);
+	const { view } = t0;
+	const [visible, setVisible] = useState(false);
+	const { ref, inViewport } = useInViewport();
+	const { projectId } = Route.useLoaderData();
+	let t1;
+	let t2;
+	if ($[0] !== inViewport || $[1] !== visible) {
+		t1 = () => {
+			if (!inViewport || visible) return;
+			const tm = setTimeout(() => setVisible(true), e(30, 80));
+			return () => clearTimeout(tm);
+		};
+		t2 = [inViewport, visible];
+		$[0] = inViewport;
+		$[1] = visible;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { height: 200 };
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== view || $[6] !== visible) {
+		t4 = visible && /* @__PURE__ */ jsx(StaticLikeC4Diagram, {
+			background: "transparent",
+			view,
+			fitView: true,
+			fitViewPadding: "4px",
+			reduceGraphics: true
+		});
+		$[5] = view;
+		$[6] = visible;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Box, {
+			className: previewBg,
+			style: t3,
+			children: t4
+		}) });
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	const t6 = view.title ?? view.id;
+	let t7;
+	if ($[10] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Group, {
+			justify: "space-between",
+			mt: "md",
+			children: /* @__PURE__ */ jsx(Text, {
+				fw: 500,
+				children: t6
+			})
+		});
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== view.description) {
+		t8 = RichText.from(view.description);
+		$[12] = view.description;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = css({
+			lineClamp: 3,
+			mt: "1",
+			transition: "fast",
+			opacity: {
+				base: "0.8",
+				_groupHover: "1"
+			}
+		});
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== t8) {
+		t10 = /* @__PURE__ */ jsx(Markdown, {
+			value: t8,
+			textScale: .75,
+			emptyText: "No description",
+			className: t9
+		});
+		$[15] = t8;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== projectId || $[18] !== view.id) {
+		t11 = /* @__PURE__ */ jsx(Link, {
+			to: "/project/$projectId/view/$viewId/",
+			params: {
+				projectId,
+				viewId: view.id
+			},
+			search: true,
+			className: cardLink
+		});
+		$[17] = projectId;
+		$[18] = view.id;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== ref || $[21] !== t10 || $[22] !== t11 || $[23] !== t5 || $[24] !== t7) {
+		t12 = /* @__PURE__ */ jsxs(Card, {
+			ref,
+			shadow: "xs",
+			padding: "lg",
+			radius: "sm",
+			className: "group",
+			withBorder: true,
+			children: [
+				t5,
+				t7,
+				t10,
+				t11
+			]
+		});
+		$[20] = ref;
+		$[21] = t10;
+		$[22] = t11;
+		$[23] = t5;
+		$[24] = t7;
+		$[25] = t12;
+	} else t12 = $[25];
+	return t12;
+}
+export { Route as t };