likec4 1.59.3 → 1.60.0

package/__app__/src/chunks/ProjectsOverview.mjs

@@ -1,84 +1,90 @@
 import "./rolldown-runtime.mjs";
-import { D as e, j as t } from "./hooks.mjs";
-import { A as n, D as r, F as i, H as a, L as o, O as s, R as c, a as l, at as u, c as d, d as f, f as p, h as m, l as h, m as g, n as _, o as v, p as y, pt as b, s as x, t as S, tt as C, u as w, x as T, z as E } from "./LikeC4Styles.mjs";
-import { on as ee } from "./libs/@mantine.mjs";
-import { M 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";
+import { O as t, w as useSyncedRef } from "./hooks.mjs";
+import { $ as useCallbackRef, D as EnsureMantine, E as FramerMotionConfig, F as Base, P as BaseXYFlow, R as bezierPath, a as ElementNodeContainer, b as useId$1, c as EdgePath, d as EdgeContainer, f as Logo$1, ht as t$1, i as ElementShape, k as RootContainer, l as EdgeLabelContainer, m as useChangeLikeC4Project, n as DefaultHandles, nt as MinZoom, o as ElementData, p as LogoIcon, r as memoEdge, rt as ZIndexes, s as ElementActionButtons, st as IconZoomScan, t as LikeC4Styles, u as EdgeLabel } from "./LikeC4Styles.mjs";
+import { fn as useCallbackRef$1 } from "./libs/@mantine.mjs";
+import { A as createStyleContext, I as cx, M as isCssProperty, t as navigationPanel } from "./styled-system.mjs";
+import { C as getViewportForBounds, c as ReactFlowProvider, d as applyNodeChanges, g as useStoreApi, u as applyEdgeChanges } from "./libs/@xyflow/react.mjs";
+import { n as shallowEqual } from "./libs/fast-equals.mjs";
+import { _ as stagger, d as isValidMotionProp, g as mapValue, i as m, o as animate, p as LayoutGroup, v as styleEffect, y as motionValue } from "./libs/framer.mjs";
+import { a as emit, i as setup, l as assign, n as useSelector, r as assertEvent, t as useActorRef } from "./libs/@xstate/react.mjs";
+import { createContext, forwardRef, memo, useContext, useEffect, useRef } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { invariant, nonNullable, nonexhaustive } from "@likec4/core";
+import { useLikeC4ProjectsOverview } from "likec4:projects-overview";
 //#region ../diagram/src/projects-overview/layouted-to-xyflow.ts
-function layoutedProjectsViewToXYFlow(e) {
+function layoutedProjectsViewToXYFlow(view) {
 	return {
-		xynodes: t(e.nodes, projectNodeToXY),
-		xyedges: t(e.edges, projectEdgeToXY)
+		xynodes: t(view.nodes, projectNodeToXY),
+		xyedges: t(view.edges, projectEdgeToXY)
 	};
 }
-function projectNodeToXY({ id: e, x: t, y: n, width: r, height: i, ...a }) {
+function projectNodeToXY({ id, x, y, width, height, ...node }) {
 	return {
-		id: e,
+		id,
 		position: {
-			x: t,
-			y: n
+			x,
+			y
 		},
 		type: "project",
-		initialWidth: r,
-		initialHeight: i,
-		draggable: !1,
-		deletable: !1,
-		zIndex: c.Element,
+		initialWidth: width,
+		initialHeight: height,
+		draggable: false,
+		deletable: false,
+		zIndex: ZIndexes.Element,
 		style: {
-			width: r,
-			height: i
+			width,
+			height
 		},
 		data: {
-			id: e,
-			width: r,
-			height: i,
-			...a
+			id,
+			width,
+			height,
+			...node
 		}
 	};
 }
-function projectEdgeToXY({ id: e, source: t, target: n, ...r }) {
+function projectEdgeToXY({ id, source, target, ...edge }) {
 	return {
-		id: e,
-		source: t,
-		target: n,
+		id,
+		source,
+		target,
 		type: "relationship",
-		zIndex: c.Edge,
-		deletable: !1,
+		zIndex: ZIndexes.Edge,
+		deletable: false,
 		data: {
-			id: e,
+			id,
 			technology: null,
 			labelBBox: null,
-			...r
+			...edge
 		}
 	};
 }
 //#endregion
 //#region ../diagram/src/projects-overview/persistence.ts
-var Y = "likec4:projects-overview:lastViewport", X = {
+var key = `likec4:projects-overview:lastViewport`;
+var ProjectsOverviewViewportPersistence = {
 	read() {
 		try {
-			let e = sessionStorage.getItem(Y);
-			return e ? JSON.parse(e) : null;
+			let fromStorage = sessionStorage.getItem(key);
+			if (fromStorage) return JSON.parse(fromStorage);
+			return null;
 		} catch (e) {
-			return console.error(`Error reading fromStorage ${Y}:`, e), null;
+			console.error(`Error reading fromStorage ${key}:`, e);
+			return null;
 		}
 	},
-	write(e) {
-		if (!e) {
-			sessionStorage.removeItem(Y);
+	write(viewport) {
+		if (!viewport) {
+			sessionStorage.removeItem(key);
 			return;
 		}
-		sessionStorage.setItem(Y, JSON.stringify(e));
+		sessionStorage.setItem(key, JSON.stringify(viewport));
 	}
-}, Z = F({
+};
+//#endregion
+//#region ../diagram/src/projects-overview/actor.ts
+var machine = setup({
 	types: {
 		context: {},
 		tags: "",
@@ -87,93 +93,132 @@ var Y = "likec4:projects-overview:lastViewport", X = {
 		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
+		isReady: ({ context }) => context.initialized.xydata && context.initialized.xyflow && !!context.xystore && !!context.xyflow,
+		"click: selected node": ({ event }) => {
+			return event.type === "xyflow.click.node" && event.node.selected === true;
+		}
 	}
-}), updateView = () => Z.assign(({ event: e }) => {
-	R(e, "update.view");
-	let { xynodes: t, xyedges: n } = layoutedProjectsViewToXYFlow(e.view);
+});
+var updateView = () => machine.assign(({ event }) => {
+	assertEvent(event, "update.view");
+	const { xynodes, xyedges } = layoutedProjectsViewToXYFlow(event.view);
 	return {
-		view: e.view,
-		xynodes: t,
-		xyedges: n
+		view: event.view,
+		xynodes,
+		xyedges
 	};
-}), 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, [
+});
+var xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyNodeChanges");
+	return { xynodes: applyNodeChanges(event.changes, context.xynodes) };
+});
+var xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyEdgeChanges");
+	return { xyedges: applyEdgeChanges(event.changes, context.xyedges) };
+});
+var onMouseEnterOrLeave = () => machine.assign(({ context, event }) => {
+	assertEvent(event, [
 		"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) {
+	const isEnter = event.type.startsWith("xyflow.mouse.enter");
+	switch (event.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 ? E.setHovered(e, n) : e) };
+			const edgeId = event.edge.id;
+			return { xyedges: context.xyedges.map((e) => {
+				if (e.id === edgeId) return Base.setHovered(e, isEnter);
+				return 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 ? E.setHovered(e, n) : e) };
+			const nodeId = event.node.id;
+			return { xynodes: context.xynodes.map((n) => {
+				if (n.id === nodeId) return Base.setHovered(n, isEnter);
+				return n;
+			}) };
 		}
-		default: ce(t);
+		default: nonexhaustive(event);
 	}
-}), 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());
+});
+var saveViewport = () => machine.createAction(({ context }) => {
+	const xyflow = context.xyflow;
+	if (xyflow) ProjectsOverviewViewportPersistence.write(xyflow.getViewport());
+});
+var handleClick = () => machine.enqueueActions(({ event, enqueue }) => {
+	if (event.type === "xyflow.click.double") {
+		enqueue(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: s, panZoom: c, transform: l } = J(t.xystore).getState(), u = Math.max(1, l[2]), d = ne(r, a, s, o, u, t.fitViewPadding);
-	d.x = Math.round(d.x), d.y = Math.round(d.y);
-	let f = i > 0 ? {
-		duration: i,
+});
+var fitDiagram = (params) => machine.enqueueActions(({ context, event }) => {
+	let bounds = context.view.bounds;
+	let duration;
+	if (params) {
+		bounds = params.bounds ?? context.view.bounds;
+		duration = params.duration;
+	} else if (event.type === "xyflow.fitDiagram") {
+		bounds = event.bounds ?? context.view.bounds;
+		duration = event.duration;
+	}
+	duration ??= 450;
+	const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
+	const maxZoom = Math.max(1, transform[2]);
+	const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
+	viewport.x = Math.round(viewport.x);
+	viewport.y = Math.round(viewport.y);
+	const animationProps = duration > 0 ? {
+		duration,
 		interpolate: "smooth"
 	} : void 0;
-	c?.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 });
+	panZoom?.setViewport(viewport, animationProps).catch((err) => {
+		console.error("Error during fitDiagram panZoom setViewport", { err });
+	});
+	ProjectsOverviewViewportPersistence.write(null);
+});
+var restoreViewport = () => machine.enqueueActions(({ context, enqueue }) => {
+	const viewport = ProjectsOverviewViewportPersistence.read();
+	if (viewport) {
+		nonNullable(context.xyflow).setViewport(viewport, { duration: 0 });
 		return;
 	}
-	t(fitDiagram({ duration: 0 }));
-}), dispose = () => Z.assign({
+	enqueue(fitDiagram({ duration: 0 }));
+});
+var dispose = () => machine.assign({
 	xyflow: null,
 	xystore: null,
 	initialized: {
-		xyflow: !1,
-		xydata: !1
+		xyflow: false,
+		xydata: false
 	},
 	xyedges: [],
 	xynodes: []
-}), assignNavigateTo = () => Z.assign(({ event: e, context: t }) => {
-	let n;
-	switch (e.type) {
+});
+var assignNavigateTo = () => machine.assign(({ event, context }) => {
+	let navigateTo;
+	switch (event.type) {
 		case "xyflow.click.node":
-			n = e.node;
+			navigateTo = event.node;
 			break;
 		case "navigate.to":
-			n = J(t.xynodes.find((t) => t.id === e.fromNode), `Node ${e.fromNode} not found`);
+			navigateTo = nonNullable(context.xynodes.find((n) => n.id === event.fromNode), `Node ${event.fromNode} not found`);
 			break;
-		default: return console.warn(`Unexpected event ${e.type} in assignNavigateTo`), {};
+		default:
+			console.warn(`Unexpected event ${event.type} in assignNavigateTo`);
+			return {};
 	}
-	return { navigateTo: n };
-}), ue = Z.createMachine({
+	return { navigateTo };
+});
+var projectOverviewLogic = machine.createMachine({
 	id: "projects-overview",
-	context: ({ input: e }) => ({
-		...e,
+	context: ({ input }) => ({
+		...input,
 		initialized: {
-			xydata: !1,
-			xyflow: !1
+			xydata: false,
+			xyflow: false
 		},
 		xyflow: null,
 		xystore: null,
@@ -181,24 +226,24 @@ var Y = "likec4:projects-overview:lastViewport", X = {
 		xyedges: []
 	}),
 	initial: "init",
-	on: { close: { target: ".closed" } },
+	on: { "close": { target: ".closed" } },
 	states: {
 		init: { on: {
 			"update.view": {
-				actions: [updateView(), I(({ context: e }) => ({ initialized: {
-					...e.initialized,
-					xydata: !0
+				actions: [updateView(), assign(({ context }) => ({ initialized: {
+					...context.initialized,
+					xydata: true
 				} }))],
 				target: "isReady"
 			},
 			"xyflow.init": {
-				actions: [I(({ context: e, event: t }) => ({
+				actions: [assign(({ context, event }) => ({
 					initialized: {
-						...e.initialized,
-						xyflow: !0
+						...context.initialized,
+						xyflow: true
 					},
-					xyflow: t.xyflow,
-					xystore: t.xystore
+					xyflow: event.xyflow,
+					xystore: event.xystore
 				}))],
 				target: "isReady"
 			}
@@ -231,39 +276,53 @@ var Y = "likec4:projects-overview:lastViewport", X = {
 			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(), s = b(Math.min(i * 7 / 9 / e.data.width), {
-						min: o,
+				assign({ xyedges: [] }),
+				({ context: { navigateTo, xyflow, xystore }, self }) => {
+					invariant(xyflow && navigateTo, "Invalid state, xyflow is undefined");
+					const { width, domNode } = nonNullable(xystore).getState();
+					const nextZoom = t$1(Math.min(width * 7 / 9 / navigateTo.data.width), {
+						min: MinZoom,
 						max: 2.5
-					}), c = {
-						x: Math.round(-s * e.position.x + (i - s * e.data.width) / 2),
-						y: Math.round(-s * e.position.y) + 50
-					}, l = t.getViewport(), u = a.querySelectorAll(`.react-flow__node-project:not([data-id="${e.id}"]) > *`), d = A(u, {
+					});
+					const next = {
+						x: Math.round(-nextZoom * navigateTo.position.x + (width - nextZoom * navigateTo.data.width) / 2),
+						y: Math.round(-nextZoom * navigateTo.position.y) + 50
+					};
+					const current = xyflow.getViewport();
+					const otherNodes = domNode.querySelectorAll(`.react-flow__node-project:not([data-id="${navigateTo.id}"]) > *`);
+					const otherNodesAnimation = animate(otherNodes, {
 						opacity: 0,
 						scale: .9
 					}, {
 						visualDuration: .25,
-						delay: O(.08, { from: "center" })
-					}), f = N(1), p = k(f, [1, 0], [`translate(${l.x}px, ${l.y}px) scale(${l.zoom})`, `translate(${c.x}px, ${c.y}px) scale(${s})`]), m = M(a.querySelector(".xyflow__viewport"), { transform: p }), h = M(a.querySelector(`.react-flow__node-project:is([data-id="${e.id}"]) > *`), { opacity: f }), g = A(f, 0, {
-						delay: u.length > 3 ? .25 : 0,
+						delay: stagger(.08, { from: "center" })
+					});
+					const v = motionValue(1);
+					const transform = mapValue(v, [1, 0], [`translate(${current.x}px, ${current.y}px) scale(${current.zoom})`, `translate(${next.x}px, ${next.y}px) scale(${nextZoom})`]);
+					const cancelViewportAnimation = styleEffect(domNode.querySelector(".xyflow__viewport"), { transform });
+					const cancelOpacityAnimation = styleEffect(domNode.querySelector(`.react-flow__node-project:is([data-id="${navigateTo.id}"]) > *`), { opacity: v });
+					const targetAnimation = animate(v, 0, {
+						delay: otherNodes.length > 3 ? .25 : 0,
 						type: "spring",
 						stiffness: 350,
 						damping: 40,
 						mass: 1.5,
 						visualDuration: .55
 					});
-					Promise.race([g.finished, sleep(750)]).then(() => {
-						m(), h(), g.stop(), d.stop(), r.send({
+					Promise.race([targetAnimation.finished, sleep(750)]).then(() => {
+						cancelViewportAnimation();
+						cancelOpacityAnimation();
+						targetAnimation.stop();
+						otherNodesAnimation.stop();
+						self.send({
 							type: "emit.navigate.to",
-							projectId: e.data.projectId
+							projectId: navigateTo.data.projectId
 						});
 					});
 				}
 			],
-			on: { "emit.navigate.to": { actions: P(({ event: e }) => ({
-				...e,
+			on: { "emit.navigate.to": { actions: emit(({ event }) => ({
+				...event,
 				type: "navigate.to"
 			})) } }
 		},
@@ -274,264 +333,495 @@ var Y = "likec4:projects-overview:lastViewport", X = {
 		}
 	}
 });
-function sleep(e) {
-	return new Promise((t) => setTimeout(t, e));
+function sleep(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
 }
 //#endregion
 //#region ../diagram/src/projects-overview/context.ts
-var Q = B(null), de = Q.Provider;
+var ProjectsOverviewActorContext = createContext(null);
+var ProjectsOverviewActorContextProvider = ProjectsOverviewActorContext.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;
+	const $ = c(2);
+	const t0 = useContext(ProjectsOverviewActorContext);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = nonNullable(t0, "No ProjectsOverviewActorContext");
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
 }
 //#endregion
+//#region ../diagram/src/components/NavigationPanel.tsx
+var { withProvider, withContext } = createStyleContext(navigationPanel);
+var shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop));
+var LogoButton = forwardRef((t0, ref) => {
+	const $ = c(11);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cx("mantine-active", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(LogoIcon, { "data-logo-icon": true });
+		t3 = /* @__PURE__ */ jsx(Logo$1, { "data-logo-full": true });
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t2 = $[5];
+		t3 = $[6];
+	}
+	let t4;
+	if ($[7] !== props || $[8] !== ref || $[9] !== t1) {
+		t4 = /* @__PURE__ */ jsxs("button", {
+			...props,
+			ref,
+			className: t1,
+			children: [t2, t3]
+		});
+		$[7] = props;
+		$[8] = ref;
+		$[9] = t1;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+});
+var NavigationPanel = {
+	Root: withProvider(m.div, "root", { shouldForwardProp }),
+	Body: withContext(m.div, "body", { shouldForwardProp }),
+	Logo: withContext(LogoButton, "logo", { shouldForwardProp }),
+	Label: withContext(m.div, "label", { shouldForwardProp }),
+	Dropdown: withContext(m.div, "dropdown", { shouldForwardProp })
+};
+//#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(_.Root, { children: /* @__PURE__ */ q(_.Body, { children: [/* @__PURE__ */ K(_.Logo, {}), /* @__PURE__ */ K(_.Label, { children: "Projects Overview" })] }) }), e[0] = t) : t = e[0], t;
-}, fe = v((e) => {
-	let t = a(e.data.points);
-	return /* @__PURE__ */ q(g, {
-		...e,
-		children: [/* @__PURE__ */ K(f, {
-			edgeProps: e,
-			svgPath: t
-		}), /* @__PURE__ */ K(p, {
-			edgeProps: e,
-			children: /* @__PURE__ */ K(y, { edgeProps: e })
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(NavigationPanel.Root, { children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [/* @__PURE__ */ jsx(NavigationPanel.Logo, {}), /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "Projects Overview" })] }) });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+//#endregion
+//#region ../diagram/src/projects-overview/custom/edgeTypes.tsx
+var RelationshipEdge = memoEdge((edgeProps) => {
+	const path = bezierPath(edgeProps.data.points);
+	return /* @__PURE__ */ jsxs(EdgeContainer, {
+		...edgeProps,
+		children: [/* @__PURE__ */ jsx(EdgePath, {
+			edgeProps,
+			svgPath: path
+		}), /* @__PURE__ */ jsx(EdgeLabelContainer, {
+			edgeProps,
+			children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps })
 		})]
 	});
 });
 //#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
+function ProjectNode(props) {
+	const $ = c(19);
+	const actor = useProjectsOverviewActor();
+	let t0;
+	if ($[0] !== actor || $[1] !== props.data.id || $[2] !== props.data.projectId) {
+		t0 = (e) => {
+			e.stopPropagation();
+			actor.send({
+				type: "navigate.to",
+				fromNode: props.data.id,
+				projectId: props.data.projectId
+			});
+		};
+		$[0] = actor;
+		$[1] = props.data.id;
+		$[2] = props.data.projectId;
+		$[3] = t0;
+	} else t0 = $[3];
+	const navigateTo = useCallbackRef$1(t0);
+	let t1;
+	let t2;
+	if ($[4] !== props) {
+		t1 = /* @__PURE__ */ jsx(ElementShape, { ...props });
+		t2 = /* @__PURE__ */ jsx(ElementData, { ...props });
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		t1 = $[5];
+		t2 = $[6];
+	}
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(IconZoomScan, {});
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== navigateTo) {
+		t4 = [{
+			key: "navigate",
+			icon: t3,
+			onClick: navigateTo
+		}];
+		$[8] = navigateTo;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== props || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ElementActionButtons, {
+			...props,
+			buttons: t4
 		});
-	}, 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(x, { ...e }), a = /* @__PURE__ */ K(h, { ...e }), t[4] = e, t[5] = i, t[6] = a);
-	let o;
-	t[7] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ K(u, {}), 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 c;
-	t[10] !== e || t[11] !== s ? (c = /* @__PURE__ */ K(w, {
-		...e,
-		buttons: s
-	}), t[10] = e, t[11] = s, t[12] = c) : c = t[12];
-	let f;
-	t[13] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ K(l, {}), t[13] = f) : f = t[13];
-	let p;
-	return t[14] !== e || t[15] !== i || t[16] !== a || t[17] !== c ? (p = /* @__PURE__ */ q(d, {
-		layout: !0,
-		nodeProps: e,
-		children: [
-			i,
-			a,
-			c,
-			f
-		]
-	}, e.id), t[14] = e, t[15] = i, t[16] = a, t[17] = c, t[18] = p) : p = t[18], p;
+		$[10] = props;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(DefaultHandles, {});
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== props || $[15] !== t1 || $[16] !== t2 || $[17] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(ElementNodeContainer, {
+			layout: true,
+			nodeProps: props,
+			children: [
+				t1,
+				t2,
+				t5,
+				t6
+			]
+		}, props.id);
+		$[14] = props;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t5;
+		$[18] = t7;
+	} else t7 = $[18];
+	return t7;
 }
 //#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 useProjectsOverviewState(selector, t0) {
+	const compare = t0 === void 0 ? shallowEqual : t0;
+	const actor = useProjectsOverviewActor();
+	return useSelector(actor, selector, compare);
 }
 function useProjectsOverviewXYStoreApi() {
-	return ae();
+	return useStoreApi();
 }
 //#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: s, nodes: c, edges: l } = useProjectsOverviewState(selector, selectorEq), u = useProjectsOverviewXYStoreApi(), d = s ? "initialized" : "not-initialized", f;
-	t[3] === d ? f = t[4] : (f = te(d, "projects-overview"), t[3] = d, t[4] = f);
+var nodeTypes = { project: ProjectNode };
+var edgeTypes = { relationship: RelationshipEdge };
+var selector = (state) => ({
+	isActive: state.hasTag("active"),
+	nodes: state.context.xynodes,
+	edges: state.context.xyedges
+});
+var selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
+var ProjectsOverviewXY = memo((t0) => {
+	const $ = c(45);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({background: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const background = t1 === void 0 ? "dots" : t1;
+	const actorRef = useProjectsOverviewActor();
+	const { isActive, nodes, edges } = useProjectsOverviewState(selector, selectorEq);
+	const xystore = useProjectsOverviewXYStoreApi();
+	const t2 = isActive ? "initialized" : "not-initialized";
+	let t3;
+	if ($[3] !== t2) {
+		t3 = cx(t2, "projects-overview");
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
 	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 p = C(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 m = C(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 h = C(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 g = C(t10), t12;
-	t[13] === o ? t12 = t[14] : (t12 = (e) => {
-		o.send({
-			type: "xyflow.applyNodeChanges",
-			changes: e
-		});
-	}, t[13] = o, t[14] = t12);
-	let _ = C(t12), t14;
-	t[15] === o ? t14 = t[16] : (t14 = (e) => {
-		o.send({
-			type: "xyflow.applyEdgeChanges",
-			changes: e
-		});
-	}, t[15] = o, t[16] = t14);
-	let v = C(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 y = C(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 b = C(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 x = C(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 S = C(t22), t24;
-	t[25] !== o || t[26] !== u ? (t24 = (e) => {
-		o.send({
-			type: "xyflow.init",
-			xyflow: e,
-			xystore: u
+	if ($[5] !== actorRef) {
+		t4 = (_e, node) => {
+			_e.stopPropagation();
+			actorRef.send({
+				type: "xyflow.click.node",
+				node
+			});
+		};
+		$[5] = actorRef;
+		$[6] = t4;
+	} else t4 = $[6];
+	const t5 = useCallbackRef(t4);
+	let t6;
+	if ($[7] !== actorRef) {
+		t6 = (_e_0, edge) => {
+			_e_0.stopPropagation();
+			actorRef.send({
+				type: "xyflow.click.edge",
+				edge
+			});
+		};
+		$[7] = actorRef;
+		$[8] = t6;
+	} else t6 = $[8];
+	const t7 = useCallbackRef(t6);
+	let t8;
+	if ($[9] !== actorRef) {
+		t8 = (_e_1) => {
+			_e_1.stopPropagation();
+			actorRef.send({ type: "xyflow.click.pane" });
+		};
+		$[9] = actorRef;
+		$[10] = t8;
+	} else t8 = $[10];
+	const t9 = useCallbackRef(t8);
+	let t10;
+	if ($[11] !== actorRef) {
+		t10 = (_e_2) => {
+			_e_2.stopPropagation();
+			actorRef.send({ type: "xyflow.click.double" });
+		};
+		$[11] = actorRef;
+		$[12] = t10;
+	} else t10 = $[12];
+	const t11 = useCallbackRef(t10);
+	let t12;
+	if ($[13] !== actorRef) {
+		t12 = (changes) => {
+			actorRef.send({
+				type: "xyflow.applyNodeChanges",
+				changes
+			});
+		};
+		$[13] = actorRef;
+		$[14] = t12;
+	} else t12 = $[14];
+	const t13 = useCallbackRef(t12);
+	let t14;
+	if ($[15] !== actorRef) {
+		t14 = (changes_0) => {
+			actorRef.send({
+				type: "xyflow.applyEdgeChanges",
+				changes: changes_0
+			});
+		};
+		$[15] = actorRef;
+		$[16] = t14;
+	} else t14 = $[16];
+	const t15 = useCallbackRef(t14);
+	let t16;
+	if ($[17] !== actorRef) {
+		t16 = (event, edge_0) => {
+			actorRef.send({
+				type: "xyflow.mouse.enter.edge",
+				edge: edge_0,
+				event
+			});
+		};
+		$[17] = actorRef;
+		$[18] = t16;
+	} else t16 = $[18];
+	const t17 = useCallbackRef(t16);
+	let t18;
+	if ($[19] !== actorRef) {
+		t18 = (event_0, edge_1) => {
+			actorRef.send({
+				type: "xyflow.mouse.leave.edge",
+				edge: edge_1,
+				event: event_0
+			});
+		};
+		$[19] = actorRef;
+		$[20] = t18;
+	} else t18 = $[20];
+	const t19 = useCallbackRef(t18);
+	let t20;
+	if ($[21] !== actorRef) {
+		t20 = (event_1, node_0) => {
+			actorRef.send({
+				type: "xyflow.mouse.enter.node",
+				node: node_0
+			});
+		};
+		$[21] = actorRef;
+		$[22] = t20;
+	} else t20 = $[22];
+	const t21 = useCallbackRef(t20);
+	let t22;
+	if ($[23] !== actorRef) {
+		t22 = (event_2, node_1) => {
+			actorRef.send({
+				type: "xyflow.mouse.leave.node",
+				node: node_1
+			});
+		};
+		$[23] = actorRef;
+		$[24] = t22;
+	} else t22 = $[24];
+	const t23 = useCallbackRef(t22);
+	let t24;
+	if ($[25] !== actorRef || $[26] !== xystore) {
+		t24 = (xyflow) => {
+			actorRef.send({
+				type: "xyflow.init",
+				xyflow,
+				xystore
+			});
+		};
+		$[25] = actorRef;
+		$[26] = xystore;
+		$[27] = t24;
+	} else t24 = $[27];
+	const t25 = useCallbackRef(t24);
+	let t26;
+	if ($[28] !== background || $[29] !== edges || $[30] !== nodes || $[31] !== props || $[32] !== t11 || $[33] !== t13 || $[34] !== t15 || $[35] !== t17 || $[36] !== t19 || $[37] !== t21 || $[38] !== t23 || $[39] !== t25 || $[40] !== t3 || $[41] !== t5 || $[42] !== t7 || $[43] !== t9) {
+		t26 = /* @__PURE__ */ jsx(BaseXYFlow, {
+			nodes,
+			edges,
+			className: t3,
+			nodeTypes,
+			edgeTypes,
+			fitView: false,
+			onNodeClick: t5,
+			onEdgeClick: t7,
+			onPaneClick: t9,
+			onDoubleClick: t11,
+			onNodesChange: t13,
+			onEdgesChange: t15,
+			onEdgeMouseEnter: t17,
+			onEdgeMouseLeave: t19,
+			onNodeMouseEnter: t21,
+			onNodeMouseLeave: t23,
+			onInit: t25,
+			nodesDraggable: false,
+			nodesSelectable: true,
+			pannable: true,
+			zoomable: true,
+			background,
+			...props
 		});
-	}, t[25] = o, t[26] = u, t[27] = t24) : t24 = t[27];
-	let w = C(t24), T;
-	return t[28] !== a || t[29] !== l || t[30] !== c || t[31] !== n || t[32] !== g || t[33] !== _ || t[34] !== v || t[35] !== y || t[36] !== b || t[37] !== x || t[38] !== S || t[39] !== w || t[40] !== f || t[41] !== p || t[42] !== m || t[43] !== h ? (T = /* @__PURE__ */ K(i, {
-		nodes: c,
-		edges: l,
-		className: f,
-		nodeTypes: pe,
-		edgeTypes: me,
-		fitView: !1,
-		onNodeClick: p,
-		onEdgeClick: m,
-		onPaneClick: h,
-		onDoubleClick: g,
-		onNodesChange: _,
-		onEdgesChange: v,
-		onEdgeMouseEnter: y,
-		onEdgeMouseLeave: b,
-		onNodeMouseEnter: x,
-		onNodeMouseLeave: S,
-		onInit: w,
-		nodesDraggable: !1,
-		nodesSelectable: !0,
-		pannable: !0,
-		zoomable: !0,
-		background: a,
-		...n
-	}), t[28] = a, t[29] = l, t[30] = c, t[31] = n, t[32] = g, t[33] = _, t[34] = v, t[35] = y, t[36] = b, t[37] = x, t[38] = S, t[39] = w, t[40] = f, t[41] = p, t[42] = m, t[43] = h, t[44] = T) : T = t[44], T;
+		$[28] = background;
+		$[29] = edges;
+		$[30] = nodes;
+		$[31] = props;
+		$[32] = t11;
+		$[33] = t13;
+		$[34] = t15;
+		$[35] = t17;
+		$[36] = t19;
+		$[37] = t21;
+		$[38] = t23;
+		$[39] = t25;
+		$[40] = t3;
+		$[41] = t5;
+		$[42] = t7;
+		$[43] = t9;
+		$[44] = t26;
+	} else t26 = $[44];
+	return t26;
 });
-$.displayName = "ProjectsOverviewXY";
+ProjectsOverviewXY.displayName = "ProjectsOverviewXY";
 //#endregion
 //#region ../diagram/src/projects-overview/ProjectsOverview.tsx
-function ProjectsOverview({ view: t, onNavigateToProject: n, fitViewPadding: r = {
+function ProjectsOverview({ view, onNavigateToProject, fitViewPadding = {
 	top: "50px",
 	bottom: "32px",
 	left: "32px",
 	right: "32px"
-}, ...i }) {
-	let a = z(ue, { input: {
-		view: t,
-		fitViewPadding: r
+}, ...props }) {
+	const actorRef = useActorRef(projectOverviewLogic, { input: {
+		view,
+		fitViewPadding
 	} });
-	U(() => {
-		a.send({
+	useEffect(() => {
+		actorRef.send({
 			type: "update.view",
-			view: t
+			view
 		});
-	}, [a, t]);
-	let o = e(n);
-	U(() => {
-		let e = [a.on("navigate.to", ({ projectId: e }) => {
-			o.current?.(e);
+	}, [actorRef, view]);
+	const onNavigateToProjectRef = useSyncedRef(onNavigateToProject);
+	useEffect(() => {
+		const subs = [actorRef.on("navigate.to", ({ projectId }) => {
+			onNavigateToProjectRef.current?.(projectId);
 		})];
 		return () => {
-			e.forEach((e) => e.unsubscribe());
+			subs.forEach((sub) => sub.unsubscribe());
 		};
-	}, [a]);
-	let s = t.bounds, c = W({
+	}, [actorRef]);
+	const bounds = view.bounds;
+	const initialRef = useRef({
 		initialNodes: [],
 		initialEdges: [],
-		initialWidth: s.width,
-		initialHeight: s.height,
-		fitView: !1
+		initialWidth: bounds.width,
+		initialHeight: bounds.height,
+		fitView: false
 	});
-	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, {})]
+	return /* @__PURE__ */ jsx(ProjectsOverviewActorContextProvider, {
+		value: actorRef,
+		children: /* @__PURE__ */ jsxs(ReactFlowProvider, {
+			...initialRef.current,
+			children: [/* @__PURE__ */ jsx(LayoutGroup, {
+				id: actorRef.sessionId,
+				inherit: false,
+				children: /* @__PURE__ */ jsx(ProjectsOverviewXY, { ...props })
+			}), /* @__PURE__ */ jsx(ProjectsOverviewPanel, {})]
 		})
 	});
 }
 //#endregion
 //#region ../diagram/src/LikeC4ProjectsOverview.tsx
-function LikeC4ProjectsOverview({ view: e, className: t, onNavigateToProject: i, ...a }) {
-	let o = m(), c = T();
-	return i ??= o, /* @__PURE__ */ K(s, { children: /* @__PURE__ */ q(r, { children: [/* @__PURE__ */ K(S, { id: c }), /* @__PURE__ */ K(n, {
-		id: c,
-		className: t,
-		children: /* @__PURE__ */ K(ProjectsOverview, {
-			view: e,
-			onNavigateToProject: i,
-			...a
+function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }) {
+	const onChangeLikeC4Project = useChangeLikeC4Project();
+	const id = useId$1();
+	onNavigateToProject ??= onChangeLikeC4Project;
+	return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [/* @__PURE__ */ jsx(LikeC4Styles, { rootSelector: `#${id}` }), /* @__PURE__ */ jsx(RootContainer, {
+		id,
+		className,
+		children: /* @__PURE__ */ jsx(ProjectsOverview, {
+			view,
+			onNavigateToProject,
+			...props
 		})
 	})] }) });
 }
 //#endregion
 //#region src/pages/ProjectsOverview.tsx
 function ProjectsOverviewPage() {
-	let e = G(3), t = m(), 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;
+	const $ = c(3);
+	const changeProject = useChangeLikeC4Project();
+	const projectsOverview = useLikeC4ProjectsOverview();
+	let t0;
+	if ($[0] !== changeProject || $[1] !== projectsOverview) {
+		t0 = /* @__PURE__ */ jsx(LikeC4ProjectsOverview, {
+			view: projectsOverview,
+			onNavigateToProject: changeProject
+		});
+		$[0] = changeProject;
+		$[1] = projectsOverview;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
 }
 //#endregion
 export { ProjectsOverviewPage };