likec4 1.60.0 → 1.61.0

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

@@ -0,0 +1,258 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { f as css, r as Txt } from "../../chunks/styled-system.mjs";
+import { m as IconChevronDown, s as IconSearch } 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 { useState } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Highlight, Menu, MenuDivider, MenuDropdown, MenuItem, MenuSearch, MenuTarget, ScrollArea } from "@mantine/core";
+import { filterProjects, projectSearchHighlights, useLikeC4Projects } from "likec4/react";
+// src/components/view-page/SelectProject.tsx
+function SelectProject() {
+	const $ = c(55);
+	const projects = useLikeC4Projects();
+	const currentProject = useCurrentProject();
+	const [search, setSearch] = useState("");
+	if (projects.length < 2) return null;
+	let T0;
+	let T1;
+	let T2;
+	let t0;
+	let t1;
+	let t10;
+	let t11;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[0] !== currentProject.id || $[1] !== currentProject.title || $[2] !== projects || $[3] !== search) {
+		const found = filterProjects(projects, search);
+		let t12;
+		if ($[19] !== search) {
+			t12 = projectSearchHighlights(search);
+			$[19] = search;
+			$[20] = t12;
+		} else t12 = $[20];
+		const highlight = t12;
+		T2 = Menu;
+		t7 = "max-content";
+		t8 = "click";
+		t9 = "bottom-start";
+		if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+			t10 = { itemSection: css({ maxWidth: "[250px]" }) };
+			$[21] = t10;
+		} else t10 = $[21];
+		let t13;
+		if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = /* @__PURE__ */ jsx(IconChevronDown, {
+				opacity: .5,
+				size: 14
+			});
+			$[22] = t13;
+		} else t13 = $[22];
+		const t14 = currentProject.title ?? currentProject.id;
+		if ($[23] !== t14) {
+			t11 = /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "subtle",
+				size: "compact-md",
+				fz: "sm",
+				color: "gray",
+				px: "sm",
+				maw: "250",
+				rightSection: t13,
+				visibleFrom: "md",
+				children: t14
+			}) });
+			$[23] = t14;
+			$[24] = t11;
+		} else t11 = $[24];
+		T1 = MenuDropdown;
+		const t15 = `Search ${projects.length} projects (* wildcard)`;
+		let t16;
+		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+			t16 = /* @__PURE__ */ jsx(IconSearch, { size: 14 });
+			$[25] = t16;
+		} else t16 = $[25];
+		let t17;
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+			t17 = (e) => setSearch(e.currentTarget.value);
+			$[26] = t17;
+		} else t17 = $[26];
+		if ($[27] !== search || $[28] !== t15) {
+			t4 = /* @__PURE__ */ jsx(MenuSearch, {
+				miw: 300,
+				mb: 4,
+				placeholder: t15,
+				leftSection: t16,
+				value: search,
+				onChange: t17
+			});
+			$[27] = search;
+			$[28] = t15;
+			$[29] = t4;
+		} else t4 = $[29];
+		if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = /* @__PURE__ */ jsx(MenuItem, {
+				renderRoot: _temp,
+				children: "Overview"
+			});
+			t6 = /* @__PURE__ */ jsx(MenuDivider, {});
+			$[30] = t5;
+			$[31] = t6;
+		} else {
+			t5 = $[30];
+			t6 = $[31];
+		}
+		T0 = ScrollArea.Autosize;
+		t0 = "min(65vh, 560px)";
+		t1 = "auto";
+		t2 = found.length === 0 && /* @__PURE__ */ jsx(Txt, {
+			fontSize: "sm",
+			color: "text.dimmed",
+			px: "3",
+			py: "1.5",
+			children: "No matching project"
+		});
+		let t18;
+		if ($[32] !== currentProject.id || $[33] !== highlight) {
+			t18 = (t19) => {
+				const { id, title, path } = t19;
+				return /* @__PURE__ */ jsx(MenuItem, {
+					renderRoot: (props_0) => /* @__PURE__ */ jsx(Link, {
+						...props_0,
+						to: "/project/$projectId/view/$viewId/",
+						params: {
+							projectId: id,
+							viewId: "index"
+						}
+					}),
+					rightSection: !!path && /* @__PURE__ */ jsx(Txt, {
+						fontSize: "xxs",
+						color: "text.non-essential",
+						truncate: true,
+						children: /* @__PURE__ */ jsx(Highlight, {
+							component: "span",
+							highlight,
+							inherit: true,
+							children: path
+						})
+					}),
+					children: /* @__PURE__ */ jsx(Txt, {
+						fontSize: "sm",
+						truncate: true,
+						maxWidth: "[300px]",
+						css: currentProject.id === id ? {
+							color: "text.bright",
+							fontWeight: "semibold"
+						} : {},
+						children: /* @__PURE__ */ jsx(Highlight, {
+							component: "span",
+							highlight,
+							inherit: true,
+							children: title ?? id
+						})
+					})
+				}, id);
+			};
+			$[32] = currentProject.id;
+			$[33] = highlight;
+			$[34] = t18;
+		} else t18 = $[34];
+		t3 = found.map(t18);
+		$[0] = currentProject.id;
+		$[1] = currentProject.title;
+		$[2] = projects;
+		$[3] = search;
+		$[4] = T0;
+		$[5] = T1;
+		$[6] = T2;
+		$[7] = t0;
+		$[8] = t1;
+		$[9] = t10;
+		$[10] = t11;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else {
+		T0 = $[4];
+		T1 = $[5];
+		T2 = $[6];
+		t0 = $[7];
+		t1 = $[8];
+		t10 = $[9];
+		t11 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		t4 = $[13];
+		t5 = $[14];
+		t6 = $[15];
+		t7 = $[16];
+		t8 = $[17];
+		t9 = $[18];
+	}
+	let t12;
+	if ($[35] !== T0 || $[36] !== t0 || $[37] !== t1 || $[38] !== t2 || $[39] !== t3) {
+		t12 = /* @__PURE__ */ jsxs(T0, {
+			mah: t0,
+			type: t1,
+			children: [t2, t3]
+		});
+		$[35] = T0;
+		$[36] = t0;
+		$[37] = t1;
+		$[38] = t2;
+		$[39] = t3;
+		$[40] = t12;
+	} else t12 = $[40];
+	let t13;
+	if ($[41] !== T1 || $[42] !== t12 || $[43] !== t4 || $[44] !== t5 || $[45] !== t6) {
+		t13 = /* @__PURE__ */ jsxs(T1, { children: [
+			t4,
+			t5,
+			t6,
+			t12
+		] });
+		$[41] = T1;
+		$[42] = t12;
+		$[43] = t4;
+		$[44] = t5;
+		$[45] = t6;
+		$[46] = t13;
+	} else t13 = $[46];
+	let t14;
+	if ($[47] !== T2 || $[48] !== t10 || $[49] !== t11 || $[50] !== t13 || $[51] !== t7 || $[52] !== t8 || $[53] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(T2, {
+			width: t7,
+			trigger: t8,
+			position: t9,
+			classNames: t10,
+			children: [t11, t13]
+		});
+		$[47] = T2;
+		$[48] = t10;
+		$[49] = t11;
+		$[50] = t13;
+		$[51] = t7;
+		$[52] = t8;
+		$[53] = t9;
+		$[54] = t14;
+	} else t14 = $[54];
+	return t14;
+}
+function _temp(props) {
+	return /* @__PURE__ */ jsx(Link, {
+		...props,
+		to: "/projects"
+	});
+}
+export { SelectProject };

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

@@ -0,0 +1,111 @@
+import "../../chunks/rolldown-runtime.mjs";
+import { n as useCurrentView } from "../../chunks/hooks.mjs";
+import { EmbedPanel } from "./share-modal/EmbedPanel.mjs";
+import { WebcomponentsPanel } from "./share-modal/WebcomponentsPanel.mjs";
+import { useState } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Group, ModalBody, ModalContent, ModalOverlay, ModalRoot, Tabs, TabsList, TabsPanel, TabsTab } from "@mantine/core";
+// src/components/view-page/ShareModal.tsx
+function ShareModal(t0) {
+	const $ = c(19);
+	const { onClose } = t0;
+	const [diagram] = useCurrentView();
+	const [activeTab, setActiveTab] = useState("webcomponent");
+	if (!diagram) return null;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(ModalOverlay, {
+			backgroundOpacity: .5,
+			blur: 3
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (tab) => setActiveTab(tab ?? "webcomponent");
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs(TabsList, { children: [/* @__PURE__ */ jsx(TabsTab, {
+			value: "webcomponent",
+			children: "Webcomponent"
+		}), /* @__PURE__ */ jsx(TabsTab, {
+			value: "embed",
+			children: "Embedded"
+		})] });
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== diagram) {
+		t4 = /* @__PURE__ */ jsx(TabsPanel, {
+			value: "embed",
+			pt: "md",
+			children: /* @__PURE__ */ jsx(EmbedPanel, { diagram })
+		});
+		$[3] = diagram;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== diagram) {
+		t5 = /* @__PURE__ */ jsx(TabsPanel, {
+			value: "webcomponent",
+			pt: "md",
+			children: /* @__PURE__ */ jsx(WebcomponentsPanel, { diagram })
+		});
+		$[5] = diagram;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== activeTab || $[8] !== t4 || $[9] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Tabs, {
+			value: activeTab,
+			onChange: t2,
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[7] = activeTab;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== onClose) {
+		t7 = /* @__PURE__ */ jsx(Group, {
+			justify: "flex-end",
+			mt: "lg",
+			children: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onClick: onClose,
+				children: "Close"
+			})
+		});
+		$[11] = onClose;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t6 || $[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsxs(ModalBody, { children: [t6, t7] }) });
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== onClose || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(ModalRoot, {
+			size: "xl",
+			opened: true,
+			onClose,
+			children: [t1, t8]
+		});
+		$[16] = onClose;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
+}
+export { ShareModal };

package/__app__/src/components/view-page/share-modal/AlertLocalhost.mjs

@@ -0,0 +1,31 @@
+import "../../../chunks/rolldown-runtime.mjs";
+import { _ as IconAlertTriangle } from "../../../chunks/libs/@tabler/icons-react.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Alert, Text, rem } from "@mantine/core";
+// src/components/view-page/share-modal/AlertLocalhost.tsx
+var AlertLocalhost = () => {
+	const $ = c(2);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(IconAlertTriangle, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Alert, {
+			color: "yellow",
+			icon: t0,
+			title: "Localhost URL",
+			styles: { body: { gap: rem(4) } },
+			children: /* @__PURE__ */ jsx(Text, {
+				c: "yellow",
+				size: "sm",
+				children: "You need to deploy your project to make it available on the internet"
+			})
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+export { AlertLocalhost };

package/__app__/src/components/view-page/share-modal/CopyButtonChild.mjs

@@ -0,0 +1,36 @@
+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 { Button, rem } from "@mantine/core";
+// src/components/view-page/share-modal/CopyButtonChild.tsx
+var CopyButtonChild = (t0) => {
+	const $ = c(7);
+	const { copied, copy } = t0;
+	const t1 = copied ? "teal" : "gray";
+	let t2;
+	if ($[0] !== copied) {
+		t2 = copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } });
+		$[0] = copied;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = copied ? "Copied" : "Copy to clipboard";
+	let t4;
+	if ($[2] !== copy || $[3] !== t1 || $[4] !== t2 || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Button, {
+			size: "xs",
+			color: t1,
+			variant: "light",
+			leftSection: t2,
+			onClick: copy,
+			children: t3
+		});
+		$[2] = copy;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+};
+export { CopyButtonChild };

package/__app__/src/components/view-page/share-modal/EmbedPanel.mjs

@@ -0,0 +1,100 @@
+import "../../../chunks/rolldown-runtime.mjs";
+import { f as IconExternalLink } from "../../../chunks/libs/@tabler/icons-react.mjs";
+import { d as useRouter } from "../../../chunks/libs/@tanstack.mjs";
+import { t as useCurrentProject } from "../../../chunks/hooks.mjs";
+import { AlertLocalhost } from "./AlertLocalhost.mjs";
+import { CopyButtonChild } from "./CopyButtonChild.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useHashHistory } from "likec4:app-config";
+import { ActionIcon, Box, Code, CopyButton, Group, Select, Stack, Text, useMantineColorScheme } from "@mantine/core";
+// src/components/view-page/share-modal/EmbedPanel.tsx
+var EmbedPanel = ({ diagram }) => {
+	const router = useRouter();
+	const { id: projectId } = useCurrentProject();
+	const { colorScheme } = useMantineColorScheme();
+	const [theme, setTheme] = useState(colorScheme);
+	let location = router.buildLocation({
+		to: "/project/$projectId/embed/$viewId/",
+		params: {
+			projectId,
+			viewId: diagram.id
+		},
+		search: {
+			padding: 20,
+			...theme !== "auto" ? { theme } : {}
+		}
+	}).publicHref;
+	location = useHashHistory ? `#${location}` : location;
+	const url = new URL(location, window.location.href);
+	const width = diagram.bounds.width + 40;
+	const height = diagram.bounds.height + 40;
+	const href = url.href;
+	const code = `
+<div style="aspect-ratio:${width}/${height};width:100%;height:auto;max-width:${width}px;margin:0 auto">
+  <iframe src="${href}" width="100%" height="100%" style="border:0;background:transparent;"></iframe>
+</div>
+`.trim();
+	return /* @__PURE__ */ jsxs(Stack, { children: [
+		code.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
+		/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: "Embedded view is an iframe with a static diagram"
+		}) }),
+		/* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [
+				/* @__PURE__ */ jsxs(Group, {
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
+						fw: "500",
+						size: "sm",
+						children: "HTML"
+					}) }), /* @__PURE__ */ jsxs(Group, {
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(ActionIcon, {
+							component: "a",
+							href,
+							target: "_blank",
+							variant: "light",
+							color: "gray",
+							children: /* @__PURE__ */ jsx(IconExternalLink, {})
+						}), /* @__PURE__ */ jsx(CopyButton, {
+							value: code,
+							timeout: 1500,
+							children: CopyButtonChild
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Code, {
+					block: true,
+					children: code
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					style: { "alignSelf": "flex-start" },
+					children: /* @__PURE__ */ jsx(Select, {
+						label: "Color scheme",
+						value: theme,
+						allowDeselect: false,
+						onChange: (v) => setTheme(v ?? "auto"),
+						data: [
+							{
+								value: "auto",
+								label: "Auto"
+							},
+							{
+								value: "light",
+								label: "Light"
+							},
+							{
+								value: "dark",
+								label: "Dark"
+							}
+						]
+					})
+				})
+			]
+		})
+	] });
+};
+export { EmbedPanel };