@likec4/diagram 1.59.4 → 1.61.0

package/dist/overlays/types.d.mts

@@ -0,0 +1,21 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ElementDetailsActorRef, ElementDetailsInput, ElementDetailsLogic } from "./element-details/actor.mjs";
+import { Input, RelationshipDetailsActorRef, RelationshipDetailsLogic } from "./relationship-details/actor.mjs";
+import { Input as Input$1, RelationshipsBrowserActorRef, RelationshipsBrowserLogic } from "./relationships-browser/actor.mjs";
+export declare namespace Overlays {
+  namespace ElementDetails {
+    interface Input extends ElementDetailsInput {}
+    interface Logic extends ElementDetailsLogic {}
+    interface ActorRef extends ElementDetailsActorRef {}
+  }
+  namespace RelationshipDetails {
+    type Input = Input;
+    interface Logic extends RelationshipDetailsLogic {}
+    interface ActorRef extends RelationshipDetailsActorRef {}
+  }
+  namespace RelationshipsBrowser {
+    interface Input extends Input$1 {}
+    interface Logic extends RelationshipsBrowserLogic {}
+    interface ActorRef extends RelationshipsBrowserActorRef {}
+  }
+}

package/dist/projects-overview/ProjectsOverview.d.mts

@@ -0,0 +1,13 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ViewPadding } from "../LikeC4Diagram.props.mjs";
+import { ProjectsOverviewXYProps } from "./ProjectsOverviewXY.mjs";
+import { ProjectId } from "@likec4/core";
+import { LayoutedProjectsView } from "@likec4/core/compute-view";
+export type ProjectsOverviewProps = {
+  view: LayoutedProjectsView;
+  /**
+   * Callback when project is selected (e.g. clicked)
+   */
+  onNavigateToProject?: undefined | ((projectId: ProjectId) => void);
+  fitViewPadding?: ViewPadding | undefined;
+} & ProjectsOverviewXYProps;

package/dist/projects-overview/ProjectsOverview.mjs

@@ -0,0 +1,60 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { projectOverviewLogic } from "./actor.mjs";
+import { ProjectsOverviewActorContextProvider } from "./context.mjs";
+import { ProjectsOverviewPanel } from "./panel/ProjectsOverviewPanel.mjs";
+import { ProjectsOverviewXY } from "./ProjectsOverviewXY.mjs";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSyncedRef } from "@react-hookz/web";
+import { ReactFlowProvider } from "@xyflow/react";
+import { LayoutGroup } from "motion/react";
+import { useActorRef } from "@xstate/react";
+
+// 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, {})]
+		})
+	});
+}
+
+export { ProjectsOverview };

package/dist/projects-overview/ProjectsOverviewXY.d.mts

@@ -0,0 +1,12 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+export type ProjectsOverviewXYProps = {
+  /**
+   * Background pattern
+   * @default 'dots'
+   */
+  background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
+  /**
+   * @default - determined by the user's system preferences.
+   */
+  colorScheme?: 'light' | 'dark' | undefined;
+};

package/dist/projects-overview/ProjectsOverviewXY.mjs

@@ -0,0 +1,110 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { BaseXYFlow } from "../base/BaseXYFlow.mjs";
+import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
+import { useProjectsOverviewActor } from "./context.mjs";
+import { ProjectNode } from "./custom/nodeTypes.mjs";
+import { RelationshipEdge } from "./custom/edgeTypes.mjs";
+import { useProjectsOverviewState, useProjectsOverviewXYStoreApi } from "./hooks.mjs";
+import { cx } from "@likec4/styles/css";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { shallowEqual } from "fast-equals";
+
+// src/projects-overview/ProjectsOverviewXY.tsx
+const nodeTypes = { project: ProjectNode };
+const edgeTypes = { relationship: RelationshipEdge };
+const selector = (state) => ({
+	isActive: state.hasTag("active"),
+	nodes: state.context.xynodes,
+	edges: state.context.xyedges
+});
+const selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
+const ProjectsOverviewXY = memo(({ background = "dots", ...props }) => {
+	const actorRef = useProjectsOverviewActor();
+	const { isActive, nodes, edges } = useProjectsOverviewState(selector, selectorEq);
+	const xystore = useProjectsOverviewXYStoreApi();
+	return /* @__PURE__ */ jsx(BaseXYFlow, {
+		nodes,
+		edges,
+		className: cx(isActive ? "initialized" : "not-initialized", "projects-overview"),
+		nodeTypes,
+		edgeTypes,
+		fitView: false,
+		onNodeClick: useCallbackRef((_e, node) => {
+			_e.stopPropagation();
+			actorRef.send({
+				type: "xyflow.click.node",
+				node
+			});
+		}),
+		onEdgeClick: useCallbackRef((_e, edge) => {
+			_e.stopPropagation();
+			actorRef.send({
+				type: "xyflow.click.edge",
+				edge
+			});
+		}),
+		onPaneClick: useCallbackRef((_e) => {
+			_e.stopPropagation();
+			actorRef.send({ type: "xyflow.click.pane" });
+		}),
+		onDoubleClick: useCallbackRef((_e) => {
+			_e.stopPropagation();
+			actorRef.send({ type: "xyflow.click.double" });
+		}),
+		onNodesChange: useCallbackRef((changes) => {
+			actorRef.send({
+				type: "xyflow.applyNodeChanges",
+				changes
+			});
+		}),
+		onEdgesChange: useCallbackRef((changes) => {
+			actorRef.send({
+				type: "xyflow.applyEdgeChanges",
+				changes
+			});
+		}),
+		onEdgeMouseEnter: useCallbackRef((event, edge) => {
+			actorRef.send({
+				type: "xyflow.mouse.enter.edge",
+				edge,
+				event
+			});
+		}),
+		onEdgeMouseLeave: useCallbackRef((event, edge) => {
+			actorRef.send({
+				type: "xyflow.mouse.leave.edge",
+				edge,
+				event
+			});
+		}),
+		onNodeMouseEnter: useCallbackRef((event, node) => {
+			actorRef.send({
+				type: "xyflow.mouse.enter.node",
+				node
+			});
+		}),
+		onNodeMouseLeave: useCallbackRef((event, node) => {
+			actorRef.send({
+				type: "xyflow.mouse.leave.node",
+				node
+			});
+		}),
+		onInit: useCallbackRef((xyflow) => {
+			actorRef.send({
+				type: "xyflow.init",
+				xyflow,
+				xystore
+			});
+		}),
+		nodesDraggable: false,
+		nodesSelectable: true,
+		pannable: true,
+		zoomable: true,
+		background,
+		...props
+	});
+});
+ProjectsOverviewXY.displayName = "ProjectsOverviewXY";
+
+export { ProjectsOverviewXY };

package/dist/projects-overview/actor.mjs

@@ -0,0 +1,268 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { MinZoom } from "../base/const.mjs";
+import { Base } from "../base/Base.mjs";
+import { layoutedProjectsViewToXYFlow } from "./layouted-to-xyflow.mjs";
+import { ProjectsOverviewViewportPersistence } from "./persistence.mjs";
+import { applyEdgeChanges, applyNodeChanges, getViewportForBounds } from "@xyflow/react";
+import { clamp } from "remeda";
+import { BBox, invariant, nonNullable, nonexhaustive } from "@likec4/core";
+import { animate, mapValue, motionValue, stagger, styleEffect } from "motion";
+import { assertEvent, setup } from "xstate";
+import { assign as assign$1, emit } from "xstate/actions";
+
+// src/projects-overview/actor.ts
+const 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;
+		}
+	}
+});
+const updateView = () => machine.assign(({ event }) => {
+	assertEvent(event, "update.view");
+	const { xynodes, xyedges } = layoutedProjectsViewToXYFlow(event.view);
+	return {
+		view: event.view,
+		xynodes,
+		xyedges
+	};
+});
+const xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyNodeChanges");
+	return { xynodes: applyNodeChanges(event.changes, context.xynodes) };
+});
+const xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyEdgeChanges");
+	return { xyedges: applyEdgeChanges(event.changes, context.xyedges) };
+});
+const 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);
+	}
+});
+const saveViewport = () => machine.createAction(({ context }) => {
+	const xyflow = context.xyflow;
+	if (xyflow) ProjectsOverviewViewportPersistence.write(xyflow.getViewport());
+});
+const handleClick = () => machine.enqueueActions(({ event, enqueue }) => {
+	if (event.type === "xyflow.click.double") {
+		enqueue(fitDiagram());
+		return;
+	}
+});
+const 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);
+});
+const restoreViewport = () => machine.enqueueActions(({ context, enqueue }) => {
+	const viewport = ProjectsOverviewViewportPersistence.read();
+	if (viewport) {
+		nonNullable(context.xyflow).setViewport(viewport, { duration: 0 });
+		return;
+	}
+	enqueue(fitDiagram({ duration: 0 }));
+});
+const dispose = () => machine.assign({
+	xyflow: null,
+	xystore: null,
+	initialized: {
+		xyflow: false,
+		xydata: false
+	},
+	xyedges: [],
+	xynodes: []
+});
+const 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 };
+});
+const _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$1(({ context }) => ({ initialized: {
+					...context.initialized,
+					xydata: true
+				} }))],
+				target: "isReady"
+			},
+			"xyflow.init": {
+				actions: [assign$1(({ 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$1({ xyedges: [] }),
+				({ context: { navigateTo, xyflow, xystore }, self }) => {
+					invariant(xyflow && navigateTo, "Invalid state, xyflow is undefined");
+					const { width, domNode } = nonNullable(xystore).getState();
+					const nextZoom = clamp(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()
+		}
+	}
+});
+const projectOverviewLogic = _projectOverviewLogic;
+function sleep(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export { fitDiagram, onMouseEnterOrLeave, projectOverviewLogic, restoreViewport };

package/dist/projects-overview/context.mjs

@@ -0,0 +1,12 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+import { nonNullable } from "@likec4/core";
+
+// src/projects-overview/context.ts
+const ProjectsOverviewActorContext = createContext(null);
+const ProjectsOverviewActorContextProvider = ProjectsOverviewActorContext.Provider;
+function useProjectsOverviewActor() {
+	return nonNullable(useContext(ProjectsOverviewActorContext), "No ProjectsOverviewActorContext");
+}
+
+export { ProjectsOverviewActorContextProvider, useProjectsOverviewActor };

package/dist/projects-overview/custom/edgeTypes.mjs

@@ -0,0 +1,25 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { EdgeContainer } from "../../base-primitives/edge/EdgeContainer.mjs";
+import { EdgeLabel } from "../../base-primitives/edge/EdgeLabel.mjs";
+import { EdgeLabelContainer } from "../../base-primitives/edge/EdgeLabelContainer.mjs";
+import { EdgePath } from "../../base-primitives/edge/EdgePath.mjs";
+import { memoEdge } from "../../base-primitives/memoEdge.mjs";
+import { bezierPath } from "../../utils/xyflow.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/projects-overview/custom/edgeTypes.tsx
+const 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 })
+		})]
+	});
+});
+
+export { RelationshipEdge };

package/dist/projects-overview/custom/nodeTypes.mjs

@@ -0,0 +1,42 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { DefaultHandles } from "../../base-primitives/NodeHandles.mjs";
+import { ElementActionButtons } from "../../base-primitives/element/ElementActionButtons.mjs";
+import { ElementData } from "../../base-primitives/element/ElementData.mjs";
+import { ElementNodeContainer } from "../../base-primitives/element/ElementNodeContainer.mjs";
+import { ElementShape } from "../../base-primitives/element/ElementShape.mjs";
+import { useProjectsOverviewActor } from "../context.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallbackRef } from "@mantine/hooks";
+
+// src/projects-overview/custom/nodeTypes.tsx
+function ProjectNode(props) {
+	const actor = useProjectsOverviewActor();
+	const navigateTo = useCallbackRef((e) => {
+		e.stopPropagation();
+		actor.send({
+			type: "navigate.to",
+			fromNode: props.data.id,
+			projectId: props.data.projectId
+		});
+	});
+	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
+		layout: true,
+		nodeProps: props,
+		children: [
+			/* @__PURE__ */ jsx(ElementShape, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			/* @__PURE__ */ jsx(ElementActionButtons, {
+				...props,
+				buttons: [{
+					key: "navigate",
+					icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+					onClick: navigateTo
+				}]
+			}),
+			/* @__PURE__ */ jsx(DefaultHandles, {})
+		]
+	}, props.id);
+}
+
+export { ProjectNode };

package/dist/projects-overview/hooks.mjs

@@ -0,0 +1,16 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useProjectsOverviewActor } from "./context.mjs";
+import { useReactFlow, useStoreApi } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import { useSelector } from "@xstate/react";
+
+// src/projects-overview/hooks.ts
+function useProjectsOverviewState(selector, compare = shallowEqual) {
+	const actor = useProjectsOverviewActor();
+	return useSelector(actor, selector, compare);
+}
+function useProjectsOverviewXYStoreApi() {
+	return useStoreApi();
+}
+
+export { useProjectsOverviewState, useProjectsOverviewXYStoreApi };

package/dist/projects-overview/index.d.mts

@@ -0,0 +1,2 @@
+import { ProjectsOverviewProps } from "./ProjectsOverview.mjs";
+export type { ProjectsOverviewProps };

package/dist/projects-overview/layouted-to-xyflow.mjs

@@ -0,0 +1,54 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ZIndexes } from "../base/const.mjs";
+import { map } from "remeda";
+
+// src/projects-overview/layouted-to-xyflow.ts
+function layoutedProjectsViewToXYFlow(view) {
+	return {
+		xynodes: map(view.nodes, projectNodeToXY),
+		xyedges: map(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
+		}
+	};
+}
+
+export { layoutedProjectsViewToXYFlow };

package/dist/projects-overview/panel/ProjectsOverviewPanel.mjs

@@ -0,0 +1,10 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { NavigationPanel } from "../../components/NavigationPanel.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/projects-overview/panel/ProjectsOverviewPanel.tsx
+const ProjectsOverviewPanel = () => {
+	return /* @__PURE__ */ jsx(NavigationPanel.Root, { children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [/* @__PURE__ */ jsx(NavigationPanel.Logo, {}), /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "Projects Overview" })] }) });
+};
+
+export { ProjectsOverviewPanel };

package/dist/projects-overview/persistence.mjs

@@ -0,0 +1,25 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+
+// src/projects-overview/persistence.ts
+const key = `likec4:projects-overview:lastViewport`;
+const 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));
+	}
+};
+
+export { ProjectsOverviewViewportPersistence };