likec4 1.59.4 → 1.61.0

package/__app__/src/chunks/ProjectsOverview.mjs

@@ -1,537 +0,0 @@
-import "./rolldown-runtime.mjs";
-import { D as e, j as t } from "./hooks.mjs";
-import { A as n, D as r, F as i, I as a, O as o, Q as s, a as c, c as l, d as u, f as d, h as f, i as p, l as m, mt as h, n as g, nt as _, o as v, ot as y, r as b, s as x, t as S, tt as C, u as w, x as T, z as E } from "./LikeC4Styles.mjs";
-import { fn as ee } from "./libs/@mantine.mjs";
-import { I as te } from "./styled-system.mjs";
-import { C as ne, c as re, d as ie, g as ae, u as oe } from "./libs/@xyflow/react.mjs";
-import { n as D } from "./libs/fast-equals.mjs";
-import { _ as O, g as k, o as A, p as j, v as M, y as N } from "./libs/framer.mjs";
-import { a as P, i as F, l as I, n as L, r as R, t as z } from "./libs/@xstate/react.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: _.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: _.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 }) => {
-	R(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 }) => (R(t, "xyflow.applyNodeChanges"), { xynodes: ie(t.changes, e.xynodes) })), xyflowApplyEdgeChanges = () => Z.assign(({ context: e, event: t }) => (R(t, "xyflow.applyEdgeChanges"), { xyedges: oe(t.changes, e.xyedges) })), onMouseEnterOrLeave = () => Z.assign(({ context: e, event: t }) => {
-	R(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 ? a.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 ? a.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(), l = Math.max(1, c[2]), u = ne(r, a, o, C, l, t.fitViewPadding);
-	u.x = Math.round(u.x), u.y = Math.round(u.y);
-	let d = i > 0 ? {
-		duration: i,
-		interpolate: "smooth"
-	} : void 0;
-	s?.setViewport(u, d).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: e, xyflow: t, xystore: n }, self: r }) => {
-					se(t && e, "Invalid state, xyflow is undefined");
-					let { width: i, domNode: a } = J(n).getState(), o = h(Math.min(i * 7 / 9 / e.data.width), {
-						min: C,
-						max: 2.5
-					}), s = {
-						x: Math.round(-o * e.position.x + (i - o * e.data.width) / 2),
-						y: Math.round(-o * e.position.y) + 50
-					}, c = t.getViewport(), l = a.querySelectorAll(`.react-flow__node-project:not([data-id="${e.id}"]) > *`), u = A(l, {
-						opacity: 0,
-						scale: .9
-					}, {
-						visualDuration: .25,
-						delay: O(.08, { from: "center" })
-					}), d = N(1), f = k(d, [1, 0], [`translate(${c.x}px, ${c.y}px) scale(${c.zoom})`, `translate(${s.x}px, ${s.y}px) scale(${o})`]), p = M(a.querySelector(".xyflow__viewport"), { transform: f }), m = M(a.querySelector(`.react-flow__node-project:is([data-id="${e.id}"]) > *`), { opacity: d }), g = A(d, 0, {
-						delay: l.length > 3 ? .25 : 0,
-						type: "spring",
-						stiffness: 350,
-						damping: 40,
-						mass: 1.5,
-						visualDuration: .55
-					});
-					Promise.race([g.finished, sleep(750)]).then(() => {
-						p(), m(), g.stop(), u.stop(), r.send({
-							type: "emit.navigate.to",
-							projectId: e.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(g.Root, { children: /* @__PURE__ */ q(g.Body, { children: [/* @__PURE__ */ K(g.Logo, {}), /* @__PURE__ */ K(g.Label, { children: "Projects Overview" })] }) }), e[0] = t) : t = e[0], t;
-}, fe = p((e) => {
-	let t = E(e.data.points);
-	return /* @__PURE__ */ q(d, {
-		...e,
-		children: [/* @__PURE__ */ K(m, {
-			edgeProps: e,
-			svgPath: t
-		}), /* @__PURE__ */ K(w, {
-			edgeProps: e,
-			children: /* @__PURE__ */ K(u, { edgeProps: e })
-		})]
-	});
-});
-//#endregion
-//#region ../diagram/src/projects-overview/custom/nodeTypes.tsx
-function ProjectNode(e) {
-	let t = G(19), n = useProjectsOverviewActor(), t0;
-	t[0] !== n || t[1] !== e.data.id || t[2] !== e.data.projectId ? (t0 = (t) => {
-		t.stopPropagation(), n.send({
-			type: "navigate.to",
-			fromNode: e.data.id,
-			projectId: e.data.projectId
-		});
-	}, t[0] = n, t[1] = e.data.id, t[2] = e.data.projectId, t[3] = t0) : t0 = t[3];
-	let r = ee(t0), i, a;
-	t[4] === e ? (i = t[5], a = t[6]) : (i = /* @__PURE__ */ K(c, { ...e }), a = /* @__PURE__ */ K(x, { ...e }), t[4] = e, t[5] = i, t[6] = a);
-	let o;
-	t[7] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ K(y, {}), t[7] = o) : o = t[7];
-	let s;
-	t[8] === r ? s = t[9] : (s = [{
-		key: "navigate",
-		icon: o,
-		onClick: r
-	}], t[8] = r, t[9] = s);
-	let u;
-	t[10] !== e || t[11] !== s ? (u = /* @__PURE__ */ K(l, {
-		...e,
-		buttons: s
-	}), t[10] = e, t[11] = s, t[12] = u) : u = t[12];
-	let d;
-	t[13] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ K(b, {}), t[13] = d) : d = t[13];
-	let f;
-	return t[14] !== e || t[15] !== i || t[16] !== a || t[17] !== u ? (f = /* @__PURE__ */ q(v, {
-		layout: !0,
-		nodeProps: e,
-		children: [
-			i,
-			a,
-			u,
-			d
-		]
-	}, e.id), t[14] = e, t[15] = i, t[16] = a, 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 ? D : t, r = useProjectsOverviewActor();
-	return L(r, e, n);
-}
-function useProjectsOverviewXYStoreApi() {
-	return ae();
-}
-//#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 && D(e.nodes, t.nodes) && D(e.edges, t.edges), $ = V((e) => {
-	let t = G(45), n, r;
-	t[0] === e ? (n = t[1], r = t[2]) : ({background: r, ...n} = e, t[0] = e, t[1] = n, t[2] = r);
-	let a = r === void 0 ? "dots" : r, o = useProjectsOverviewActor(), { isActive: c, nodes: l, edges: u } = useProjectsOverviewState(selector, selectorEq), d = useProjectsOverviewXYStoreApi(), f = c ? "initialized" : "not-initialized", p;
-	t[3] === f ? p = t[4] : (p = te(f, "projects-overview"), t[3] = f, t[4] = p);
-	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 m = s(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 h = s(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 g = s(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 _ = s(t10), t12;
-	t[13] === o ? t12 = t[14] : (t12 = (e) => {
-		o.send({
-			type: "xyflow.applyNodeChanges",
-			changes: e
-		});
-	}, t[13] = o, t[14] = t12);
-	let v = s(t12), t14;
-	t[15] === o ? t14 = t[16] : (t14 = (e) => {
-		o.send({
-			type: "xyflow.applyEdgeChanges",
-			changes: e
-		});
-	}, t[15] = o, t[16] = t14);
-	let y = s(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 b = s(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 x = s(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 S = s(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 C = s(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 w = s(t24), T;
-	return t[28] !== a || t[29] !== u || t[30] !== l || t[31] !== n || t[32] !== _ || t[33] !== v || t[34] !== y || t[35] !== b || t[36] !== x || t[37] !== S || t[38] !== C || t[39] !== w || t[40] !== p || t[41] !== m || t[42] !== h || t[43] !== g ? (T = /* @__PURE__ */ K(i, {
-		nodes: l,
-		edges: u,
-		className: p,
-		nodeTypes: pe,
-		edgeTypes: me,
-		fitView: !1,
-		onNodeClick: m,
-		onEdgeClick: h,
-		onPaneClick: g,
-		onDoubleClick: _,
-		onNodesChange: v,
-		onEdgesChange: y,
-		onEdgeMouseEnter: b,
-		onEdgeMouseLeave: x,
-		onNodeMouseEnter: S,
-		onNodeMouseLeave: C,
-		onInit: w,
-		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] = _, t[33] = v, t[34] = y, t[35] = b, t[36] = x, t[37] = S, t[38] = C, t[39] = w, t[40] = p, t[41] = m, t[42] = h, t[43] = g, t[44] = T) : T = t[44], T;
-});
-$.displayName = "ProjectsOverviewXY";
-//#endregion
-//#region ../diagram/src/projects-overview/ProjectsOverview.tsx
-function ProjectsOverview({ view: t, onNavigateToProject: n, fitViewPadding: r = {
-	top: "50px",
-	bottom: "32px",
-	left: "32px",
-	right: "32px"
-}, ...i }) {
-	let a = z(ue, { input: {
-		view: t,
-		fitViewPadding: r
-	} });
-	U(() => {
-		a.send({
-			type: "update.view",
-			view: t
-		});
-	}, [a, t]);
-	let o = e(n);
-	U(() => {
-		let e = [a.on("navigate.to", ({ projectId: e }) => {
-			o.current?.(e);
-		})];
-		return () => {
-			e.forEach((e) => e.unsubscribe());
-		};
-	}, [a]);
-	let s = t.bounds, c = W({
-		initialNodes: [],
-		initialEdges: [],
-		initialWidth: s.width,
-		initialHeight: s.height,
-		fitView: !1
-	});
-	return /* @__PURE__ */ K(de, {
-		value: a,
-		children: /* @__PURE__ */ q(re, {
-			...c.current,
-			children: [/* @__PURE__ */ K(j, {
-				id: a.sessionId,
-				inherit: !1,
-				children: /* @__PURE__ */ K($, { ...i })
-			}), /* @__PURE__ */ K(ProjectsOverviewPanel, {})]
-		})
-	});
-}
-//#endregion
-//#region ../diagram/src/LikeC4ProjectsOverview.tsx
-function LikeC4ProjectsOverview({ view: e, className: t, onNavigateToProject: i, ...a }) {
-	let s = f(), c = T();
-	return i ??= s, /* @__PURE__ */ K(o, { children: /* @__PURE__ */ q(r, { children: [/* @__PURE__ */ K(S, { rootSelector: `#${c}` }), /* @__PURE__ */ K(n, {
-		id: c,
-		className: t,
-		children: /* @__PURE__ */ K(ProjectsOverview, {
-			view: e,
-			onNavigateToProject: i,
-			...a
-		})
-	})] }) });
-}
-//#endregion
-//#region src/pages/ProjectsOverview.tsx
-function ProjectsOverviewPage() {
-	let e = G(3), t = f(), 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 };