@likec4/diagram 1.59.4 → 1.60.0

package/dist/overlays/relationships-browser/useViewToNodesEdges.mjs

@@ -0,0 +1,146 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { ZIndexes } from "../../base/const.mjs";
+import { LayoutRelationshipsViewResult } from "./layout.mjs";
+import "@react-hookz/web";
+import { hasAtLeast } from "remeda";
+import { GroupElementKind, Queue, invariant, nonNullable } from "@likec4/core";
+
+//#region src/overlays/relationships-browser/useViewToNodesEdges.ts
+function viewToNodesEdge(view) {
+	const xynodes = [];
+	const xyedges = [];
+	const nodeLookup = /* @__PURE__ */ new Map();
+	const queue = Queue.from(view.nodes.reduce((acc, node) => {
+		nodeLookup.set(node.id, node);
+		if (!node.parent) acc.push({
+			node,
+			parent: null
+		});
+		return acc;
+	}, []));
+	const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+	let next;
+	while (next = queue.dequeue()) {
+		const { node, parent } = next;
+		const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind;
+		if (isCompound) for (const child of node.children) queue.enqueue({
+			node: nodeById(child),
+			parent: node
+		});
+		const position = {
+			x: node.x,
+			y: node.y
+		};
+		if (parent) {
+			position.x -= parent.x;
+			position.y -= parent.y;
+		}
+		const id = node.id;
+		const base = {
+			id,
+			position,
+			zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+			style: {
+				width: node.width,
+				height: node.height
+			},
+			initialWidth: node.width,
+			initialHeight: node.height,
+			...parent && { parentId: parent.id }
+		};
+		const fqn = node.modelRef ?? null;
+		const navigateTo = { navigateTo: node.navigateTo ?? null };
+		switch (true) {
+			case node.kind === LayoutRelationshipsViewResult.Empty:
+				xynodes.push({
+					...base,
+					type: "empty",
+					data: { column: node.column }
+				});
+				break;
+			case isCompound && !!fqn:
+				xynodes.push({
+					...base,
+					type: "compound",
+					data: {
+						id,
+						column: node.column,
+						title: node.title,
+						color: node.color,
+						shape: node.shape,
+						style: node.style,
+						depth: node.depth ?? 0,
+						icon: node.icon ?? "none",
+						ports: node.ports,
+						existsInCurrentView: node.existsInCurrentView,
+						fqn,
+						...navigateTo
+					}
+				});
+				break;
+			default:
+				invariant(fqn, "Element should have either modelRef or deploymentRef");
+				xynodes.push({
+					...base,
+					type: "element",
+					data: {
+						id,
+						column: node.column,
+						fqn,
+						title: node.title,
+						technology: node.technology,
+						description: node.description,
+						height: node.height,
+						width: node.width,
+						color: node.color,
+						shape: node.shape,
+						icon: node.icon ?? "none",
+						ports: node.ports,
+						style: node.style,
+						existsInCurrentView: node.existsInCurrentView,
+						tags: node.tags,
+						...navigateTo
+					}
+				});
+		}
+	}
+	for (const edge of view.edges) {
+		const source = edge.source;
+		const target = edge.target;
+		const id = edge.id;
+		if (!hasAtLeast(edge.points, 2)) {
+			console.error("edge should have at least 2 points", edge);
+			continue;
+		}
+		if (!hasAtLeast(edge.relations, 1)) {
+			console.error("edge should have at least 1 relation", edge);
+			continue;
+		}
+		xyedges.push({
+			id,
+			type: "relationship",
+			source,
+			target,
+			sourceHandle: edge.sourceHandle,
+			targetHandle: edge.targetHandle,
+			data: {
+				sourceFqn: edge.sourceFqn,
+				targetFqn: edge.targetFqn,
+				relations: edge.relations,
+				color: edge.color ?? "gray",
+				label: edge.label,
+				navigateTo: edge.navigateTo ?? null,
+				line: edge.line ?? "dashed",
+				existsInCurrentView: edge.existsInCurrentView
+			},
+			interactionWidth: 20
+		});
+	}
+	return {
+		xynodes,
+		xyedges
+	};
+}
+
+//#endregion
+export { viewToNodesEdge };

package/dist/overlays/types.d.mts

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

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

@@ -0,0 +1,15 @@
+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";
+//#region src/projects-overview/ProjectsOverview.d.ts
+export type ProjectsOverviewProps = {
+  view: LayoutedProjectsView;
+  /**
+   * Callback when project is selected (e.g. clicked)
+   */
+  onNavigateToProject?: undefined | ((projectId: ProjectId) => void);
+  fitViewPadding?: ViewPadding | undefined;
+} & ProjectsOverviewXYProps;
+//#endregion

package/dist/projects-overview/ProjectsOverview.mjs

@@ -0,0 +1,61 @@
+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";
+
+//#region 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
+export { ProjectsOverview };

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

@@ -0,0 +1,14 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+//#region src/projects-overview/ProjectsOverviewXY.d.ts
+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;
+};
+//#endregion

package/dist/projects-overview/ProjectsOverviewXY.mjs

@@ -0,0 +1,111 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
+import { BaseXYFlow } from "../base/BaseXYFlow.mjs";
+import { useProjectsOverviewActor } from "./context.mjs";
+import { RelationshipEdge } from "./custom/edgeTypes.mjs";
+import { ProjectNode } from "./custom/nodeTypes.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";
+
+//#region 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";
+
+//#endregion
+export { ProjectsOverviewXY };

package/dist/projects-overview/actor.mjs

@@ -0,0 +1,269 @@
+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";
+
+//#region 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));
+}
+
+//#endregion
+export { fitDiagram, onMouseEnterOrLeave, projectOverviewLogic, restoreViewport };

package/dist/projects-overview/context.mjs

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

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

@@ -0,0 +1,26 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { bezierPath } from "../../utils/xyflow.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 { jsx, jsxs } from "react/jsx-runtime";
+
+//#region 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 })
+		})]
+	});
+});
+
+//#endregion
+export { RelationshipEdge };