likec4 1.60.0 → 1.61.0

package/__app__/src/chunks/ProjectsOverview.mjs

@@ -1,827 +0,0 @@
-import "./rolldown-runtime.mjs";
-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(view) {
-	return {
-		xynodes: t(view.nodes, projectNodeToXY),
-		xyedges: t(view.edges, projectEdgeToXY)
-	};
-}
-function projectNodeToXY({ id, x, y, width, height, ...node }) {
-	return {
-		id,
-		position: {
-			x,
-			y
-		},
-		type: "project",
-		initialWidth: width,
-		initialHeight: height,
-		draggable: false,
-		deletable: false,
-		zIndex: ZIndexes.Element,
-		style: {
-			width,
-			height
-		},
-		data: {
-			id,
-			width,
-			height,
-			...node
-		}
-	};
-}
-function projectEdgeToXY({ id, source, target, ...edge }) {
-	return {
-		id,
-		source,
-		target,
-		type: "relationship",
-		zIndex: ZIndexes.Edge,
-		deletable: false,
-		data: {
-			id,
-			technology: null,
-			labelBBox: null,
-			...edge
-		}
-	};
-}
-//#endregion
-//#region ../diagram/src/projects-overview/persistence.ts
-var key = `likec4:projects-overview:lastViewport`;
-var ProjectsOverviewViewportPersistence = {
-	read() {
-		try {
-			let fromStorage = sessionStorage.getItem(key);
-			if (fromStorage) return JSON.parse(fromStorage);
-			return null;
-		} catch (e) {
-			console.error(`Error reading fromStorage ${key}:`, e);
-			return null;
-		}
-	},
-	write(viewport) {
-		if (!viewport) {
-			sessionStorage.removeItem(key);
-			return;
-		}
-		sessionStorage.setItem(key, JSON.stringify(viewport));
-	}
-};
-//#endregion
-//#region ../diagram/src/projects-overview/actor.ts
-var machine = setup({
-	types: {
-		context: {},
-		tags: "",
-		input: {},
-		events: {},
-		emitted: {}
-	},
-	guards: {
-		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;
-		}
-	}
-});
-var updateView = () => machine.assign(({ event }) => {
-	assertEvent(event, "update.view");
-	const { xynodes, xyedges } = layoutedProjectsViewToXYFlow(event.view);
-	return {
-		view: event.view,
-		xynodes,
-		xyedges
-	};
-});
-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"
-	]);
-	const isEnter = event.type.startsWith("xyflow.mouse.enter");
-	switch (event.type) {
-		case "xyflow.mouse.enter.edge":
-		case "xyflow.mouse.leave.edge": {
-			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": {
-			const nodeId = event.node.id;
-			return { xynodes: context.xynodes.map((n) => {
-				if (n.id === nodeId) return Base.setHovered(n, isEnter);
-				return n;
-			}) };
-		}
-		default: nonexhaustive(event);
-	}
-});
-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;
-	}
-});
-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;
-	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;
-	}
-	enqueue(fitDiagram({ duration: 0 }));
-});
-var dispose = () => machine.assign({
-	xyflow: null,
-	xystore: null,
-	initialized: {
-		xyflow: false,
-		xydata: false
-	},
-	xyedges: [],
-	xynodes: []
-});
-var assignNavigateTo = () => machine.assign(({ event, context }) => {
-	let navigateTo;
-	switch (event.type) {
-		case "xyflow.click.node":
-			navigateTo = event.node;
-			break;
-		case "navigate.to":
-			navigateTo = nonNullable(context.xynodes.find((n) => n.id === event.fromNode), `Node ${event.fromNode} not found`);
-			break;
-		default:
-			console.warn(`Unexpected event ${event.type} in assignNavigateTo`);
-			return {};
-	}
-	return { navigateTo };
-});
-var projectOverviewLogic = machine.createMachine({
-	id: "projects-overview",
-	context: ({ input }) => ({
-		...input,
-		initialized: {
-			xydata: false,
-			xyflow: false
-		},
-		xyflow: null,
-		xystore: null,
-		xynodes: [],
-		xyedges: []
-	}),
-	initial: "init",
-	on: { "close": { target: ".closed" } },
-	states: {
-		init: { on: {
-			"update.view": {
-				actions: [updateView(), assign(({ context }) => ({ initialized: {
-					...context.initialized,
-					xydata: true
-				} }))],
-				target: "isReady"
-			},
-			"xyflow.init": {
-				actions: [assign(({ context, event }) => ({
-					initialized: {
-						...context.initialized,
-						xyflow: true
-					},
-					xyflow: event.xyflow,
-					xystore: event.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(),
-				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
-					});
-					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: 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([targetAnimation.finished, sleep(750)]).then(() => {
-						cancelViewportAnimation();
-						cancelOpacityAnimation();
-						targetAnimation.stop();
-						otherNodesAnimation.stop();
-						self.send({
-							type: "emit.navigate.to",
-							projectId: navigateTo.data.projectId
-						});
-					});
-				}
-			],
-			on: { "emit.navigate.to": { actions: emit(({ event }) => ({
-				...event,
-				type: "navigate.to"
-			})) } }
-		},
-		closed: {
-			id: "closed",
-			type: "final",
-			entry: dispose()
-		}
-	}
-});
-function sleep(ms) {
-	return new Promise((resolve) => setTimeout(resolve, ms));
-}
-//#endregion
-//#region ../diagram/src/projects-overview/context.ts
-var ProjectsOverviewActorContext = createContext(null);
-var ProjectsOverviewActorContextProvider = ProjectsOverviewActorContext.Provider;
-function useProjectsOverviewActor() {
-	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 = () => {
-	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(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
-		});
-		$[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(selector, t0) {
-	const compare = t0 === void 0 ? shallowEqual : t0;
-	const actor = useProjectsOverviewActor();
-	return useSelector(actor, selector, compare);
-}
-function useProjectsOverviewXYStoreApi() {
-	return useStoreApi();
-}
-//#endregion
-//#region ../diagram/src/projects-overview/ProjectsOverviewXY.tsx
-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;
-	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
-		});
-		$[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;
-});
-ProjectsOverviewXY.displayName = "ProjectsOverviewXY";
-//#endregion
-//#region ../diagram/src/projects-overview/ProjectsOverview.tsx
-function ProjectsOverview({ view, onNavigateToProject, fitViewPadding = {
-	top: "50px",
-	bottom: "32px",
-	left: "32px",
-	right: "32px"
-}, ...props }) {
-	const actorRef = useActorRef(projectOverviewLogic, { input: {
-		view,
-		fitViewPadding
-	} });
-	useEffect(() => {
-		actorRef.send({
-			type: "update.view",
-			view
-		});
-	}, [actorRef, view]);
-	const onNavigateToProjectRef = useSyncedRef(onNavigateToProject);
-	useEffect(() => {
-		const subs = [actorRef.on("navigate.to", ({ projectId }) => {
-			onNavigateToProjectRef.current?.(projectId);
-		})];
-		return () => {
-			subs.forEach((sub) => sub.unsubscribe());
-		};
-	}, [actorRef]);
-	const bounds = view.bounds;
-	const initialRef = useRef({
-		initialNodes: [],
-		initialEdges: [],
-		initialWidth: bounds.width,
-		initialHeight: bounds.height,
-		fitView: false
-	});
-	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, 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() {
-	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 };