likec4 1.60.0 → 1.61.0

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

@@ -0,0 +1,264 @@
+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 { AlertLocalhost } from "./AlertLocalhost.mjs";
+import { CopyButtonChild } from "./CopyButtonChild.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ComponentName } from "likec4:app-config";
+import { ActionIcon, Box, Code, CopyButton, Group, Stack, Text } from "@mantine/core";
+// src/components/view-page/share-modal/WebcomponentsPanel.tsx
+function WebcomponentsPanel(t0) {
+	const $ = c(48);
+	const { diagram } = t0;
+	const router = useRouter();
+	let t1;
+	if ($[0] !== router.basepath) {
+		t1 = router.basepath.endsWith("/") ? router.basepath : `${router.basepath}/`;
+		$[0] = router.basepath;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = `${t1}likec4-views.js`;
+	let t3;
+	if ($[2] !== t2) {
+		t3 = new URL(t2, window.location.href);
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	const href = t3.href;
+	let T0;
+	let htmlCode;
+	let jscode;
+	let t4;
+	let webcomponentPreview;
+	if ($[4] !== diagram.id || $[5] !== href || $[6] !== router) {
+		jscode = `
+  <script module src="${href}"><\/script>
+`.trim();
+		const t5 = `
+<${ComponentName.View}
+   view-id="${encodeURIComponent(diagram.id)}"
+   browser="true"
+   dynamic-variant="sequence">
+</${ComponentName.View}>
+`;
+		let t6;
+		if ($[12] !== t5) {
+			t6 = t5.trim();
+			$[12] = t5;
+			$[13] = t6;
+		} else t6 = $[13];
+		htmlCode = t6;
+		let t7;
+		if ($[14] !== diagram.id || $[15] !== router) {
+			t7 = router.buildLocation({
+				to: "/webcomponent/$/",
+				params: { _splat: diagram.id },
+				search: true
+			});
+			$[14] = diagram.id;
+			$[15] = router;
+			$[16] = t7;
+		} else t7 = $[16];
+		webcomponentPreview = t7;
+		T0 = Stack;
+		t4 = jscode.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {});
+		$[4] = diagram.id;
+		$[5] = href;
+		$[6] = router;
+		$[7] = T0;
+		$[8] = htmlCode;
+		$[9] = jscode;
+		$[10] = t4;
+		$[11] = webcomponentPreview;
+	} else {
+		T0 = $[7];
+		htmlCode = $[8];
+		jscode = $[9];
+		t4 = $[10];
+		webcomponentPreview = $[11];
+	}
+	let t5;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: "Add this script to your page:"
+		}) });
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
+			fw: "500",
+			size: "sm",
+			children: "JavaScript"
+		}) });
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(IconExternalLink, {});
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== webcomponentPreview.publicHref) {
+		t8 = /* @__PURE__ */ jsx(ActionIcon, {
+			component: "a",
+			href: webcomponentPreview.publicHref,
+			target: "_blank",
+			variant: "light",
+			color: "gray",
+			children: t7
+		});
+		$[20] = webcomponentPreview.publicHref;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== jscode) {
+		t9 = /* @__PURE__ */ jsx(CopyButton, {
+			value: jscode,
+			timeout: 1500,
+			children: CopyButtonChild
+		});
+		$[22] = jscode;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t8 || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			children: [t6, /* @__PURE__ */ jsxs(Group, {
+				gap: "xs",
+				children: [t8, t9]
+			})]
+		});
+		$[24] = t8;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== jscode) {
+		t11 = /* @__PURE__ */ jsx(Code, {
+			block: true,
+			children: jscode
+		});
+		$[27] = jscode;
+		$[28] = t11;
+	} else t11 = $[28];
+	let t12;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx("br", {});
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx("code", { children: "<head>" });
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, {
+			size: "sm",
+			c: "dimmed",
+			children: [
+				"This script defines a custom element (webcomponent) that renders your diagrams.",
+				t12,
+				"Script must be inserted once in the ",
+				t13,
+				" or at the end of the ",
+				/* @__PURE__ */ jsx("code", { children: "<body>" }),
+				" ",
+				"tag."
+			]
+		}) });
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t10 || $[33] !== t11) {
+		t15 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [
+				t10,
+				t11,
+				t14
+			]
+		});
+		$[32] = t10;
+		$[33] = t11;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
+			fw: "500",
+			size: "sm",
+			children: "HTML"
+		}) });
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	let t18;
+	if ($[36] !== htmlCode) {
+		t17 = /* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			children: [t16, /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CopyButton, {
+				value: htmlCode,
+				timeout: 1500,
+				children: CopyButtonChild
+			}) })]
+		});
+		t18 = /* @__PURE__ */ jsx(Code, {
+			block: true,
+			children: htmlCode
+		});
+		$[36] = htmlCode;
+		$[37] = t17;
+		$[38] = t18;
+	} else {
+		t17 = $[37];
+		t18 = $[38];
+	}
+	let t19;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, {
+			size: "sm",
+			c: "dimmed",
+			children: [
+				"Insert this code to your page. Page may have multiple ",
+				/* @__PURE__ */ jsx("code", { children: "<likec4-view>" }),
+				"."
+			]
+		}) });
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== t17 || $[41] !== t18) {
+		t20 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [
+				t17,
+				t18,
+				t19
+			]
+		});
+		$[40] = t17;
+		$[41] = t18;
+		$[42] = t20;
+	} else t20 = $[42];
+	let t21;
+	if ($[43] !== T0 || $[44] !== t15 || $[45] !== t20 || $[46] !== t4) {
+		t21 = /* @__PURE__ */ jsxs(T0, { children: [
+			t4,
+			t5,
+			t15,
+			t20
+		] });
+		$[43] = T0;
+		$[44] = t15;
+		$[45] = t20;
+		$[46] = t4;
+		$[47] = t21;
+	} else t21 = $[47];
+	return t21;
+}
+export { WebcomponentsPanel };

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

@@ -0,0 +1,17 @@
+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/view-page/state.ts
+var headerVisibleAtom = /* @__PURE__ */ atom(true);
+onMount(headerVisibleAtom, () => {
+	headerVisibleAtom.set(true);
+});
+var useHeaderVisible = () => {
+	return useStore(headerVisibleAtom);
+};
+var headerOps = {
+	toggle: (value) => headerVisibleAtom.set(value ?? !headerVisibleAtom.get()),
+	show: () => headerVisibleAtom.set(true),
+	hide: () => headerVisibleAtom.set(false)
+};
+export { headerOps, useHeaderVisible };

package/__app__/src/context/LikeC4CustomizationContext.mjs

@@ -0,0 +1,26 @@
+import "../chunks/rolldown-runtime.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { CustomizationProvider } from "likec4/react";
+import { useCustomComponents } from "likec4:customization";
+// src/context/LikeC4CustomizationContext.tsx
+/**
+* Applies UI overrides from the customization file configured in the LikeC4 Vite plugin
+*/
+function LikeC4CustomizationContext(t0) {
+	const $ = c(3);
+	const { children } = t0;
+	const components = useCustomComponents();
+	let t1;
+	if ($[0] !== children || $[1] !== components) {
+		t1 = /* @__PURE__ */ jsx(CustomizationProvider, {
+			components,
+			children
+		});
+		$[0] = children;
+		$[1] = components;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+export { LikeC4CustomizationContext };

package/__app__/src/context/LikeC4IconRendererContext.mjs

@@ -0,0 +1,29 @@
+import "../chunks/rolldown-runtime.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { IconRendererProvider } from "likec4/react";
+import { getProjectIcons } from "likec4:icons";
+// src/context/LikeC4IconRendererContext.tsx
+function LikeC4IconRendererContext(t0) {
+	const $ = c(5);
+	const { children, projectId } = t0;
+	let t1;
+	if ($[0] !== projectId) {
+		t1 = getProjectIcons(projectId);
+		$[0] = projectId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const IconRenderer = t1;
+	let t2;
+	if ($[2] !== IconRenderer || $[3] !== children) {
+		t2 = /* @__PURE__ */ jsx(IconRendererProvider, {
+			value: IconRenderer,
+			children
+		});
+		$[2] = IconRenderer;
+		$[3] = children;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+export { LikeC4IconRendererContext };

package/__app__/src/context/LikeC4ModelContext.mjs

@@ -0,0 +1,34 @@
+import "../chunks/rolldown-runtime.mjs";
+import { t as useStore } from "../chunks/react.mjs";
+import { LikeC4ModelDataContextProvider } from "./safeCtx.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { LikeC4ModelProvider } from "likec4/react";
+// src/context/LikeC4ModelContext.tsx
+function LikeC4ModelContext(t0) {
+	const $ = c(6);
+	const { likec4model, children } = t0;
+	const model = useStore(likec4model);
+	let t1;
+	if ($[0] !== children || $[1] !== model) {
+		t1 = /* @__PURE__ */ jsx(LikeC4ModelProvider, {
+			likec4model: model,
+			children
+		});
+		$[0] = children;
+		$[1] = model;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== likec4model || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(LikeC4ModelDataContextProvider, {
+			value: likec4model,
+			children: t1
+		});
+		$[3] = likec4model;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+export { LikeC4ModelContext };

package/__app__/src/context/LikeC4ProjectsContext.mjs

@@ -0,0 +1,40 @@
+import "../chunks/rolldown-runtime.mjs";
+import { c as useNavigate } from "../chunks/libs/@tanstack.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useLikeC4Projects } from "likec4:projects";
+import { LikeC4ProjectsProvider } from "likec4/react";
+import { useCallbackRef } from "@mantine/hooks";
+// src/context/LikeC4ProjectsContext.tsx
+function LikeC4ProjectsContext(t0) {
+	const $ = c(6);
+	const { children } = t0;
+	const projects = useLikeC4Projects();
+	const navigate = useNavigate();
+	let t1;
+	if ($[0] !== navigate) {
+		t1 = (projectId) => {
+			navigate({
+				to: "/project/$projectId/",
+				params: { projectId }
+			}).catch(console.error);
+		};
+		$[0] = navigate;
+		$[1] = t1;
+	} else t1 = $[1];
+	const onProjectChange = useCallbackRef(t1);
+	let t2;
+	if ($[2] !== children || $[3] !== onProjectChange || $[4] !== projects) {
+		t2 = /* @__PURE__ */ jsx(LikeC4ProjectsProvider, {
+			projects,
+			onProjectChange,
+			children
+		});
+		$[2] = children;
+		$[3] = onProjectChange;
+		$[4] = projects;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+export { LikeC4ProjectsContext };

package/__app__/src/context/ModelDiffsContext.mjs

@@ -0,0 +1,33 @@
+import "../chunks/rolldown-runtime.mjs";
+import { t as useStore } from "../chunks/react.mjs";
+import { r as atom } from "../chunks/libs/nanostores.mjs";
+import { createContext, useContext } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/context/ModelDiffsContext.tsx
+var ModelDiffsCtx = createContext(/* @__PURE__ */ atom({
+	diffs: [],
+	views: {}
+}));
+/**
+* Provides the diffs of the project with their compare views
+*/
+function ModelDiffsContext(t0) {
+	const $ = c(3);
+	const { diffs, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== diffs) {
+		t1 = /* @__PURE__ */ jsx(ModelDiffsCtx.Provider, {
+			value: diffs,
+			children
+		});
+		$[0] = children;
+		$[1] = diffs;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+var useModelDiffs = () => {
+	return useStore(useContext(ModelDiffsCtx));
+};
+export { ModelDiffsContext, useModelDiffs };

package/__app__/src/context/safeCtx.mjs

@@ -0,0 +1,14 @@
+import "../chunks/rolldown-runtime.mjs";
+import { createContext, useContext } from "react";
+// src/context/safeCtx.ts
+/**
+* To improve experience with HMR, we move context to separate files and use as a boundary for hooks
+*/
+var LikeC4ModelDataContext = createContext(null);
+var LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider;
+var useLikeC4ModelAtom = () => {
+	const ctx = useContext(LikeC4ModelDataContext);
+	if (ctx === null) throw new Error("LikeC4ModelAtom is not provided");
+	return ctx;
+};
+export { LikeC4ModelDataContextProvider, useLikeC4ModelAtom };

package/__app__/src/hooks.mjs

@@ -0,0 +1 @@
+export { t as useCurrentProject, n as useCurrentView, r as useCurrentViewId, i as useLikeC4Views, a as useTransparentBackground } from "./chunks/hooks.mjs";