likec4 1.57.0 → 1.58.0

package/__app__/src/chunks/ProjectsOverview.mjs

@@ -0,0 +1,540 @@
+import "./rolldown-runtime.mjs";
+import { K as e, h as t } from "./libs/remeda.mjs";
+import { an as n } from "./libs/@mantine.mjs";
+import { M as r } from "./styled-system.mjs";
+import { n as i } from "./libs/@tabler/icons-react.mjs";
+import { D as a, F as o, I as s, M as c, P as l, R as u, T as d, X as f, a as p, c as m, d as h, f as g, i as _, l as v, o as y, p as b, s as x, t as S, u as C, w, y as T } from "./LikeC4Styles.mjs";
+import { u as E } from "./Markdown.mjs";
+import { l as ee, m as D, s as O, u as k, x as te } from "./libs/@xyflow/react.mjs";
+import { n as A } from "./libs/fast-equals.mjs";
+import { _ as ne, a as j, g as re, p as M, v as N, y as ie } from "./libs/framer.mjs";
+import { a as P, i as F, l as I, n as ae, r as L, t as oe } from "./libs/@xstate/react.mjs";
+import { n as R, t as z } from "./NavigationPanel.mjs";
+import { createContext as B, memo as V, useContext as H, useEffect as U, useRef as W } from "react";
+import { c as G } from "react/compiler-runtime";
+import { jsx as K, jsxs as q } from "react/jsx-runtime";
+import { invariant as se, nonNullable as J, nonexhaustive as ce } from "@likec4/core";
+import { useLikeC4ProjectsOverview as le } from "likec4:projects-overview";
+//#region ../diagram/src/projects-overview/layouted-to-xyflow.ts
+function layoutedProjectsViewToXYFlow(e) {
+	return {
+		xynodes: t(e.nodes, projectNodeToXY),
+		xyedges: t(e.edges, projectEdgeToXY)
+	};
+}
+function projectNodeToXY({ id: e, x: t, y: n, width: r, height: i, ...a }) {
+	return {
+		id: e,
+		position: {
+			x: t,
+			y: n
+		},
+		type: "project",
+		initialWidth: r,
+		initialHeight: i,
+		draggable: !1,
+		deletable: !1,
+		zIndex: o.Element,
+		style: {
+			width: r,
+			height: i
+		},
+		data: {
+			id: e,
+			width: r,
+			height: i,
+			...a
+		}
+	};
+}
+function projectEdgeToXY({ id: e, source: t, target: n, ...r }) {
+	return {
+		id: e,
+		source: t,
+		target: n,
+		type: "relationship",
+		zIndex: o.Edge,
+		deletable: !1,
+		data: {
+			id: e,
+			technology: null,
+			labelBBox: null,
+			...r
+		}
+	};
+}
+//#endregion
+//#region ../diagram/src/projects-overview/persistence.ts
+var Y = "likec4:projects-overview:lastViewport", X = {
+	read() {
+		try {
+			let e = sessionStorage.getItem(Y);
+			return e ? JSON.parse(e) : null;
+		} catch (e) {
+			return console.error(`Error reading fromStorage ${Y}:`, e), null;
+		}
+	},
+	write(e) {
+		if (!e) {
+			sessionStorage.removeItem(Y);
+			return;
+		}
+		sessionStorage.setItem(Y, JSON.stringify(e));
+	}
+}, Z = F({
+	types: {
+		context: {},
+		tags: "",
+		input: {},
+		events: {},
+		emitted: {}
+	},
+	guards: {
+		isReady: ({ context: e }) => e.initialized.xydata && e.initialized.xyflow && !!e.xystore && !!e.xyflow,
+		"click: selected node": ({ event: e }) => e.type === "xyflow.click.node" && e.node.selected === !0
+	}
+}), updateView = () => Z.assign(({ event: e }) => {
+	L(e, "update.view");
+	let { xynodes: t, xyedges: n } = layoutedProjectsViewToXYFlow(e.view);
+	return {
+		view: e.view,
+		xynodes: t,
+		xyedges: n
+	};
+}), xyflowApplyNodeChanges = () => Z.assign(({ context: e, event: t }) => (L(t, "xyflow.applyNodeChanges"), { xynodes: k(t.changes, e.xynodes) })), xyflowApplyEdgeChanges = () => Z.assign(({ context: e, event: t }) => (L(t, "xyflow.applyEdgeChanges"), { xyedges: ee(t.changes, e.xyedges) })), onMouseEnterOrLeave = () => Z.assign(({ context: e, event: t }) => {
+	L(t, [
+		"xyflow.mouse.enter.edge",
+		"xyflow.mouse.leave.edge",
+		"xyflow.mouse.enter.node",
+		"xyflow.mouse.leave.node"
+	]);
+	let n = t.type.startsWith("xyflow.mouse.enter");
+	switch (t.type) {
+		case "xyflow.mouse.enter.edge":
+		case "xyflow.mouse.leave.edge": {
+			let r = t.edge.id;
+			return { xyedges: e.xyedges.map((e) => e.id === r ? s.setHovered(e, n) : e) };
+		}
+		case "xyflow.mouse.enter.node":
+		case "xyflow.mouse.leave.node": {
+			let r = t.node.id;
+			return { xynodes: e.xynodes.map((e) => e.id === r ? s.setHovered(e, n) : e) };
+		}
+		default: ce(t);
+	}
+}), saveViewport = () => Z.createAction(({ context: e }) => {
+	let t = e.xyflow;
+	t && X.write(t.getViewport());
+}), handleClick = () => Z.enqueueActions(({ event: e, enqueue: t }) => {
+	if (e.type === "xyflow.click.double") {
+		t(fitDiagram());
+		return;
+	}
+}), fitDiagram = (e) => Z.enqueueActions(({ context: t, event: n }) => {
+	let r = t.view.bounds, i;
+	e ? (r = e.bounds ?? t.view.bounds, i = e.duration) : n.type === "xyflow.fitDiagram" && (r = n.bounds ?? t.view.bounds, i = n.duration), i ??= 450;
+	let { width: a, height: o, panZoom: s, transform: c } = J(t.xystore).getState(), u = Math.max(1, c[2]), d = te(r, a, o, l, u, t.fitViewPadding);
+	d.x = Math.round(d.x), d.y = Math.round(d.y);
+	let f = i > 0 ? {
+		duration: i,
+		interpolate: "smooth"
+	} : void 0;
+	s?.setViewport(d, f).catch((e) => {
+		console.error("Error during fitDiagram panZoom setViewport", { err: e });
+	}), X.write(null);
+}), restoreViewport = () => Z.enqueueActions(({ context: e, enqueue: t }) => {
+	let n = X.read();
+	if (n) {
+		J(e.xyflow).setViewport(n, { duration: 0 });
+		return;
+	}
+	t(fitDiagram({ duration: 0 }));
+}), dispose = () => Z.assign({
+	xyflow: null,
+	xystore: null,
+	initialized: {
+		xyflow: !1,
+		xydata: !1
+	},
+	xyedges: [],
+	xynodes: []
+}), assignNavigateTo = () => Z.assign(({ event: e, context: t }) => {
+	let n;
+	switch (e.type) {
+		case "xyflow.click.node":
+			n = e.node;
+			break;
+		case "navigate.to":
+			n = J(t.xynodes.find((t) => t.id === e.fromNode), `Node ${e.fromNode} not found`);
+			break;
+		default: return console.warn(`Unexpected event ${e.type} in assignNavigateTo`), {};
+	}
+	return { navigateTo: n };
+}), ue = Z.createMachine({
+	id: "projects-overview",
+	context: ({ input: e }) => ({
+		...e,
+		initialized: {
+			xydata: !1,
+			xyflow: !1
+		},
+		xyflow: null,
+		xystore: null,
+		xynodes: [],
+		xyedges: []
+	}),
+	initial: "init",
+	on: { close: { target: ".closed" } },
+	states: {
+		init: { on: {
+			"update.view": {
+				actions: [updateView(), I(({ context: e }) => ({ initialized: {
+					...e.initialized,
+					xydata: !0
+				} }))],
+				target: "isReady"
+			},
+			"xyflow.init": {
+				actions: [I(({ context: e, event: t }) => ({
+					initialized: {
+						...e.initialized,
+						xyflow: !0
+					},
+					xyflow: t.xyflow,
+					xystore: t.xystore
+				}))],
+				target: "isReady"
+			}
+		} },
+		isReady: { always: [{
+			guard: "isReady",
+			target: "active"
+		}, { target: "init" }] },
+		active: {
+			tags: "active",
+			entry: [restoreViewport()],
+			on: {
+				"navigate.to": {
+					actions: assignNavigateTo(),
+					target: "navigate"
+				},
+				"xyflow.applyNodeChanges": { actions: xyflowApplyNodeChanges() },
+				"xyflow.applyEdgeChanges": { actions: xyflowApplyEdgeChanges() },
+				"xyflow.mouse.*": { actions: onMouseEnterOrLeave() },
+				"xyflow.click.*": [{
+					guard: "click: selected node",
+					actions: assignNavigateTo(),
+					target: "navigate"
+				}, { actions: handleClick() }],
+				"xyflow.fitDiagram": { actions: fitDiagram() },
+				"update.view": { actions: updateView() }
+			}
+		},
+		navigate: {
+			tags: "active",
+			entry: [
+				saveViewport(),
+				I({ xyedges: [] }),
+				({ context: { navigateTo: t, xyflow: n, xystore: r }, self: i }) => {
+					se(n && t, "Invalid state, xyflow is undefined");
+					let { width: a, domNode: o } = J(r).getState(), s = e(Math.min(a * 7 / 9 / t.data.width), {
+						min: l,
+						max: 2.5
+					}), c = {
+						x: Math.round(-s * t.position.x + (a - s * t.data.width) / 2),
+						y: Math.round(-s * t.position.y) + 50
+					}, u = n.getViewport(), d = o.querySelectorAll(`.react-flow__node-project:not([data-id="${t.id}"]) > *`), f = j(d, {
+						opacity: 0,
+						scale: .9
+					}, {
+						visualDuration: .25,
+						delay: ne(.08, { from: "center" })
+					}), p = ie(1), m = re(p, [1, 0], [`translate(${u.x}px, ${u.y}px) scale(${u.zoom})`, `translate(${c.x}px, ${c.y}px) scale(${s})`]), h = N(o.querySelector(".xyflow__viewport"), { transform: m }), g = N(o.querySelector(`.react-flow__node-project:is([data-id="${t.id}"]) > *`), { opacity: p }), _ = j(p, 0, {
+						delay: d.length > 3 ? .25 : 0,
+						type: "spring",
+						stiffness: 350,
+						damping: 40,
+						mass: 1.5,
+						visualDuration: .55
+					});
+					Promise.race([_.finished, sleep(750)]).then(() => {
+						h(), g(), _.stop(), f.stop(), i.send({
+							type: "emit.navigate.to",
+							projectId: t.data.projectId
+						});
+					});
+				}
+			],
+			on: { "emit.navigate.to": { actions: P(({ event: e }) => ({
+				...e,
+				type: "navigate.to"
+			})) } }
+		},
+		closed: {
+			id: "closed",
+			type: "final",
+			entry: dispose()
+		}
+	}
+});
+function sleep(e) {
+	return new Promise((t) => setTimeout(t, e));
+}
+//#endregion
+//#region ../diagram/src/projects-overview/context.ts
+var Q = B(null), de = Q.Provider;
+function useProjectsOverviewActor() {
+	let e = G(2), t = H(Q), n;
+	return e[0] === t ? n = e[1] : (n = J(t, "No ProjectsOverviewActorContext"), e[0] = t, e[1] = n), n;
+}
+//#endregion
+//#region ../diagram/src/projects-overview/panel/ProjectsOverviewPanel.tsx
+var ProjectsOverviewPanel = () => {
+	let e = G(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ K(z.Root, { children: /* @__PURE__ */ q(z.Body, { children: [/* @__PURE__ */ K(z.Logo, {}), /* @__PURE__ */ K(z.Label, { children: "Projects Overview" })] }) }), e[0] = t) : t = e[0], t;
+}, fe = p((e) => {
+	let t = u(e.data.points);
+	return /* @__PURE__ */ q(b, {
+		...e,
+		children: [/* @__PURE__ */ K(C, {
+			edgeProps: e,
+			svgPath: t
+		}), /* @__PURE__ */ K(h, {
+			edgeProps: e,
+			children: /* @__PURE__ */ K(g, { edgeProps: e })
+		})]
+	});
+});
+//#endregion
+//#region ../diagram/src/projects-overview/custom/nodeTypes.tsx
+function ProjectNode(e) {
+	let t = G(19), r = useProjectsOverviewActor(), t0;
+	t[0] !== r || t[1] !== e.data.id || t[2] !== e.data.projectId ? (t0 = (t) => {
+		t.stopPropagation(), r.send({
+			type: "navigate.to",
+			fromNode: e.data.id,
+			projectId: e.data.projectId
+		});
+	}, t[0] = r, t[1] = e.data.id, t[2] = e.data.projectId, t[3] = t0) : t0 = t[3];
+	let a = n(t0), o, s;
+	t[4] === e ? (o = t[5], s = t[6]) : (o = /* @__PURE__ */ K(y, { ...e }), s = /* @__PURE__ */ K(m, { ...e }), t[4] = e, t[5] = o, t[6] = s);
+	let c;
+	t[7] === Symbol.for("react.memo_cache_sentinel") ? (c = /* @__PURE__ */ K(i, {}), t[7] = c) : c = t[7];
+	let l;
+	t[8] === a ? l = t[9] : (l = [{
+		key: "navigate",
+		icon: c,
+		onClick: a
+	}], t[8] = a, t[9] = l);
+	let u;
+	t[10] !== e || t[11] !== l ? (u = /* @__PURE__ */ K(v, {
+		...e,
+		buttons: l
+	}), t[10] = e, t[11] = l, t[12] = u) : u = t[12];
+	let d;
+	t[13] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ K(_, {}), t[13] = d) : d = t[13];
+	let f;
+	return t[14] !== e || t[15] !== o || t[16] !== s || t[17] !== u ? (f = /* @__PURE__ */ q(x, {
+		layout: !0,
+		nodeProps: e,
+		children: [
+			o,
+			s,
+			u,
+			d
+		]
+	}, e.id), t[14] = e, t[15] = o, t[16] = s, t[17] = u, t[18] = f) : f = t[18], f;
+}
+//#endregion
+//#region ../diagram/src/projects-overview/hooks.ts
+function useProjectsOverviewState(e, t) {
+	let n = t === void 0 ? A : t;
+	return ae(useProjectsOverviewActor(), e, n);
+}
+function useProjectsOverviewXYStoreApi() {
+	return D();
+}
+//#endregion
+//#region ../diagram/src/projects-overview/ProjectsOverviewXY.tsx
+var pe = { project: ProjectNode }, me = { relationship: fe }, selector = (e) => ({
+	isActive: e.hasTag("active"),
+	nodes: e.context.xynodes,
+	edges: e.context.xyedges
+}), selectorEq = (e, t) => e.isActive === t.isActive && A(e.nodes, t.nodes) && A(e.edges, t.edges), $ = V((e) => {
+	let t = G(45), n, i;
+	t[0] === e ? (n = t[1], i = t[2]) : ({background: i, ...n} = e, t[0] = e, t[1] = n, t[2] = i);
+	let a = i === void 0 ? "dots" : i, o = useProjectsOverviewActor(), { isActive: s, nodes: l, edges: u } = useProjectsOverviewState(selector, selectorEq), d = useProjectsOverviewXYStoreApi(), p = s ? "initialized" : "not-initialized", m;
+	t[3] === p ? m = t[4] : (m = r(p, "projects-overview"), t[3] = p, t[4] = m);
+	let t4;
+	t[5] === o ? t4 = t[6] : (t4 = (e, t) => {
+		e.stopPropagation(), o.send({
+			type: "xyflow.click.node",
+			node: t
+		});
+	}, t[5] = o, t[6] = t4);
+	let h = f(t4), t6;
+	t[7] === o ? t6 = t[8] : (t6 = (e, t) => {
+		e.stopPropagation(), o.send({
+			type: "xyflow.click.edge",
+			edge: t
+		});
+	}, t[7] = o, t[8] = t6);
+	let g = f(t6), t8;
+	t[9] === o ? t8 = t[10] : (t8 = (e) => {
+		e.stopPropagation(), o.send({ type: "xyflow.click.pane" });
+	}, t[9] = o, t[10] = t8);
+	let _ = f(t8), t10;
+	t[11] === o ? t10 = t[12] : (t10 = (e) => {
+		e.stopPropagation(), o.send({ type: "xyflow.click.double" });
+	}, t[11] = o, t[12] = t10);
+	let v = f(t10), t12;
+	t[13] === o ? t12 = t[14] : (t12 = (e) => {
+		o.send({
+			type: "xyflow.applyNodeChanges",
+			changes: e
+		});
+	}, t[13] = o, t[14] = t12);
+	let y = f(t12), t14;
+	t[15] === o ? t14 = t[16] : (t14 = (e) => {
+		o.send({
+			type: "xyflow.applyEdgeChanges",
+			changes: e
+		});
+	}, t[15] = o, t[16] = t14);
+	let b = f(t14), t16;
+	t[17] === o ? t16 = t[18] : (t16 = (e, t) => {
+		o.send({
+			type: "xyflow.mouse.enter.edge",
+			edge: t,
+			event: e
+		});
+	}, t[17] = o, t[18] = t16);
+	let x = f(t16), t18;
+	t[19] === o ? t18 = t[20] : (t18 = (e, t) => {
+		o.send({
+			type: "xyflow.mouse.leave.edge",
+			edge: t,
+			event: e
+		});
+	}, t[19] = o, t[20] = t18);
+	let S = f(t18), t20;
+	t[21] === o ? t20 = t[22] : (t20 = (e, t) => {
+		o.send({
+			type: "xyflow.mouse.enter.node",
+			node: t
+		});
+	}, t[21] = o, t[22] = t20);
+	let C = f(t20), t22;
+	t[23] === o ? t22 = t[24] : (t22 = (e, t) => {
+		o.send({
+			type: "xyflow.mouse.leave.node",
+			node: t
+		});
+	}, t[23] = o, t[24] = t22);
+	let w = f(t22), t24;
+	t[25] !== o || t[26] !== d ? (t24 = (e) => {
+		o.send({
+			type: "xyflow.init",
+			xyflow: e,
+			xystore: d
+		});
+	}, t[25] = o, t[26] = d, t[27] = t24) : t24 = t[27];
+	let T = f(t24), E;
+	return t[28] !== a || t[29] !== u || t[30] !== l || t[31] !== n || t[32] !== v || t[33] !== y || t[34] !== b || t[35] !== x || t[36] !== S || t[37] !== C || t[38] !== w || t[39] !== T || t[40] !== m || t[41] !== h || t[42] !== g || t[43] !== _ ? (E = /* @__PURE__ */ K(c, {
+		nodes: l,
+		edges: u,
+		className: m,
+		nodeTypes: pe,
+		edgeTypes: me,
+		fitView: !1,
+		onNodeClick: h,
+		onEdgeClick: g,
+		onPaneClick: _,
+		onDoubleClick: v,
+		onNodesChange: y,
+		onEdgesChange: b,
+		onEdgeMouseEnter: x,
+		onEdgeMouseLeave: S,
+		onNodeMouseEnter: C,
+		onNodeMouseLeave: w,
+		onInit: T,
+		nodesDraggable: !1,
+		nodesSelectable: !0,
+		pannable: !0,
+		zoomable: !0,
+		background: a,
+		...n
+	}), t[28] = a, t[29] = u, t[30] = l, t[31] = n, t[32] = v, t[33] = y, t[34] = b, t[35] = x, t[36] = S, t[37] = C, t[38] = w, t[39] = T, t[40] = m, t[41] = h, t[42] = g, t[43] = _, t[44] = E) : E = t[44], E;
+});
+$.displayName = "ProjectsOverviewXY";
+//#endregion
+//#region ../diagram/src/projects-overview/ProjectsOverview.tsx
+function ProjectsOverview({ view: e, onNavigateToProject: t, fitViewPadding: n = {
+	top: "50px",
+	bottom: "32px",
+	left: "32px",
+	right: "32px"
+}, ...r }) {
+	let i = oe(ue, { input: {
+		view: e,
+		fitViewPadding: n
+	} });
+	U(() => {
+		i.send({
+			type: "update.view",
+			view: e
+		});
+	}, [i, e]);
+	let a = E(t);
+	U(() => {
+		let e = [i.on("navigate.to", ({ projectId: e }) => {
+			a.current?.(e);
+		})];
+		return () => {
+			e.forEach((e) => e.unsubscribe());
+		};
+	}, [i]);
+	let o = e.bounds;
+	return /* @__PURE__ */ K(de, {
+		value: i,
+		children: /* @__PURE__ */ q(O, {
+			...W({
+				initialNodes: [],
+				initialEdges: [],
+				initialWidth: o.width,
+				initialHeight: o.height,
+				fitView: !1
+			}).current,
+			children: [/* @__PURE__ */ K(M, {
+				id: i.sessionId,
+				inherit: !1,
+				children: /* @__PURE__ */ K($, { ...r })
+			}), /* @__PURE__ */ K(ProjectsOverviewPanel, {})]
+		})
+	});
+}
+//#endregion
+//#region ../diagram/src/LikeC4ProjectsOverview.tsx
+function LikeC4ProjectsOverview({ view: e, className: t, onNavigateToProject: n, ...r }) {
+	let i = R(), o = T();
+	return n ??= i, /* @__PURE__ */ K(d, { children: /* @__PURE__ */ q(w, { children: [/* @__PURE__ */ K(S, { id: o }), /* @__PURE__ */ K(a, {
+		id: o,
+		className: t,
+		children: /* @__PURE__ */ K(ProjectsOverview, {
+			view: e,
+			onNavigateToProject: n,
+			...r
+		})
+	})] }) });
+}
+//#endregion
+//#region src/pages/ProjectsOverview.tsx
+function ProjectsOverviewPage() {
+	let e = G(3), t = R(), n = le(), r;
+	return e[0] !== t || e[1] !== n ? (r = /* @__PURE__ */ K(LikeC4ProjectsOverview, {
+		view: n,
+		onNavigateToProject: t
+	}), e[0] = t, e[1] = n, e[2] = r) : r = e[2], r;
+}
+//#endregion
+export { ProjectsOverviewPage };