@likec4/diagram 1.59.3 → 1.60.0

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

@@ -0,0 +1,346 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconAlertTriangle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.mjs";
+import IconCheck from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs";
+import IconChevronLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.mjs";
+import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import IconLink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.mjs";
+import IconX from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
+import { BaseXYFlow } from "../../base/BaseXYFlow.mjs";
+import { useRelationshipsView } from "./layout.mjs";
+import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.mjs";
+import { RelationshipEdge } from "./custom/edgeTypes.mjs";
+import { EmptyNode } from "./custom/EmptyNode.mjs";
+import { CompoundNode, ElementNode } from "./custom/nodeTypes.mjs";
+import { SelectElement } from "./SelectElement.mjs";
+import { cx } from "@likec4/styles/css";
+import { memo, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import { ActionIcon, Group, Tooltip } from "@mantine/core";
+import { AnimatePresence, LayoutGroup, m } from "motion/react";
+import { useClipboard, useStateHistory } from "@mantine/hooks";
+
+//#region src/overlays/relationships-browser/RelationshipsBrowser.tsx
+const nodeTypes = {
+	element: ElementNode,
+	compound: CompoundNode,
+	empty: EmptyNode
+};
+const edgeTypes = { relationship: RelationshipEdge };
+function RelationshipsBrowser({ actorRef }) {
+	const initialRef = useRef(null);
+	if (initialRef.current == null) initialRef.current = {
+		initialNodes: [],
+		initialEdges: []
+	};
+	return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, {
+		value: actorRef,
+		children: /* @__PURE__ */ jsx(ReactFlowProvider, {
+			...initialRef.current,
+			children: /* @__PURE__ */ jsx(LayoutGroup, {
+				id: actorRef.sessionId,
+				inherit: false,
+				children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) })
+			})
+		})
+	});
+}
+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 RelationshipsBrowserXYFlow = memo(() => {
+	const browser = useRelationshipsBrowser();
+	const { isActive, nodes, edges } = useRelationshipsBrowserState(selector, selectorEq);
+	return /* @__PURE__ */ jsx(BaseXYFlow, {
+		id: browser.rootElementId,
+		nodes,
+		edges,
+		className: cx(isActive ? "initialized" : "not-initialized", "relationships-browser"),
+		nodeTypes,
+		edgeTypes,
+		fitView: false,
+		onNodeClick: useCallbackRef$1((_e, node) => {
+			_e.stopPropagation();
+			browser.send({
+				type: "xyflow.nodeClick",
+				node
+			});
+		}),
+		onEdgeClick: useCallbackRef$1((_e, edge) => {
+			_e.stopPropagation();
+			browser.send({
+				type: "xyflow.edgeClick",
+				edge
+			});
+		}),
+		onPaneClick: useCallbackRef$1((_e) => {
+			_e.stopPropagation();
+			browser.send({ type: "xyflow.paneClick" });
+		}),
+		onDoubleClick: useCallbackRef$1((_e) => {
+			browser.send({ type: "xyflow.paneDblClick" });
+		}),
+		onViewportResize: useCallbackRef$1(() => {
+			browser.send({ type: "xyflow.resized" });
+		}),
+		onNodesChange: useCallbackRef$1((changes) => {
+			browser.send({
+				type: "xyflow.applyNodeChanges",
+				changes
+			});
+		}),
+		onEdgesChange: useCallbackRef$1((changes) => {
+			browser.send({
+				type: "xyflow.applyEdgeChanges",
+				changes
+			});
+		}),
+		onEdgeMouseEnter: useCallbackRef$1((_event, edge) => {
+			if (!edge.data.hovered) browser.send({
+				type: "xyflow.edgeMouseEnter",
+				edge
+			});
+		}),
+		onEdgeMouseLeave: useCallbackRef$1((_event, edge) => {
+			if (edge.data.hovered) browser.send({
+				type: "xyflow.edgeMouseLeave",
+				edge
+			});
+		}),
+		onSelectionChange: useCallbackRef$1((params) => {
+			browser.send({
+				type: "xyflow.selectionChange",
+				...params
+			});
+		}),
+		nodesDraggable: false,
+		nodesSelectable: true,
+		pannable: true,
+		zoomable: true,
+		children: /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})
+	});
+});
+const selector2 = (state) => ({
+	subjectId: state.context.subject,
+	viewId: state.context.viewId,
+	scope: state.context.scope,
+	closeable: state.context.closeable
+});
+const RelationshipsBrowserInner = memo(() => {
+	const browser = useRelationshipsBrowser();
+	const { subjectId, viewId, scope, closeable } = useRelationshipsBrowserState(selector2);
+	const store = useStoreApi();
+	const instance = useReactFlow();
+	useEffect(() => {
+		if (instance.viewportInitialized) browser.send({
+			type: "xyflow.init",
+			instance,
+			store
+		});
+	}, [
+		store,
+		instance.viewportInitialized,
+		browser
+	]);
+	const layouted = useRelationshipsView(subjectId, viewId, scope);
+	const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
+	useEffect(() => {
+		if (historySubjectId !== subjectId) historyOps.set(subjectId);
+	}, [subjectId]);
+	useEffect(() => {
+		if (historySubjectId !== subjectId) browser.navigateTo(historySubjectId);
+	}, [historySubjectId, browser]);
+	useEffect(() => {
+		browser.updateView(layouted);
+	}, [layouted, browser]);
+	const hasStepBack = current > 0;
+	const hasStepForward = current + 1 < history.length;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TopLeftPanel, {
+		hasStepBack,
+		hasStepForward,
+		onStepBack: () => historyOps.back(),
+		onStepForward: () => historyOps.forward()
+	}), closeable && /* @__PURE__ */ jsx(Panel, {
+		position: "top-right",
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: 4,
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsx(CopyLinkButton, {
+				subjectId,
+				scope
+			}), /* @__PURE__ */ jsx(ActionIcon, {
+				variant: "default",
+				color: "gray",
+				onClick: (e) => {
+					e.stopPropagation();
+					browser.close();
+				},
+				children: /* @__PURE__ */ jsx(IconX, {})
+			})]
+		})
+	})] });
+});
+const TopLeftPanel = ({ hasStepBack, hasStepForward, onStepBack, onStepForward }) => {
+	return /* @__PURE__ */ jsx(Panel, {
+		position: "top-left",
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: 4,
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsxs(AnimatePresence, {
+				mode: "popLayout",
+				children: [hasStepBack && /* @__PURE__ */ jsx(m.div, {
+					layout: true,
+					initial: {
+						opacity: .05,
+						transform: "translateX(-5px)"
+					},
+					animate: {
+						opacity: 1,
+						transform: "translateX(0)"
+					},
+					exit: {
+						opacity: .05,
+						transform: "translateX(-10px)"
+					},
+					children: /* @__PURE__ */ jsx(ActionIcon, {
+						variant: "default",
+						color: "gray",
+						onClick: (e) => {
+							e.stopPropagation();
+							onStepBack();
+						},
+						children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+					})
+				}, "back"), hasStepForward && /* @__PURE__ */ jsx(m.div, {
+					layout: true,
+					initial: {
+						opacity: .05,
+						transform: "translateX(5px)"
+					},
+					animate: {
+						opacity: 1,
+						transform: "translateX(0)"
+					},
+					exit: {
+						opacity: 0,
+						transform: "translateX(5px)"
+					},
+					children: /* @__PURE__ */ jsx(ActionIcon, {
+						variant: "default",
+						color: "gray",
+						onClick: (e) => {
+							e.stopPropagation();
+							onStepForward();
+						},
+						children: /* @__PURE__ */ jsx(IconChevronRight, {})
+					})
+				}, "forward")]
+			}), /* @__PURE__ */ jsx(SelectElement, {})]
+		})
+	});
+};
+const Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 400,
+	closeDelay: 150,
+	label: "",
+	children: null,
+	offset: 4,
+	withinPortal: false
+});
+/**
+* Builds a shareable URL with the relationships parameter.
+* Handles both browser history routing and hash-based routing.
+* Preserves base paths when app is hosted under a sub-path.
+*/
+function buildRelationshipUrl(subjectId, scope) {
+	const currentUrl = new URL(window.location.href);
+	if (currentUrl.hash.startsWith("#/")) {
+		const hashUrl = new URL(currentUrl.hash.substring(1), currentUrl.origin);
+		hashUrl.searchParams.set("relationships", subjectId);
+		hashUrl.searchParams.set("relationshipsScope", scope);
+		const cleanPath = hashUrl.pathname.replace(/\/$/, "");
+		return `${currentUrl.origin}${currentUrl.pathname}${currentUrl.search}#${cleanPath}${hashUrl.search}`;
+	}
+	currentUrl.searchParams.set("relationships", subjectId);
+	currentUrl.searchParams.set("relationshipsScope", scope);
+	return currentUrl.href;
+}
+/**
+* Button that copies a direct link to the current relationship view.
+* Shows visual feedback for both success and failure states.
+* Note: Clipboard API requires HTTPS or localhost. This is a browser security restriction, not a code issue.
+*/
+const CopyLinkButton = ({ subjectId, scope }) => {
+	const clipboard = useClipboard({ timeout: 2e3 });
+	const [copyError, setCopyError] = useState(false);
+	const errorTimeoutRef = useRef(null);
+	const handleCopy = async (e) => {
+		e.stopPropagation();
+		setCopyError(false);
+		if (errorTimeoutRef.current) {
+			clearTimeout(errorTimeoutRef.current);
+			errorTimeoutRef.current = null;
+		}
+		const url = buildRelationshipUrl(subjectId, scope);
+		if (!window.isSecureContext) {
+			setCopyError(true);
+			errorTimeoutRef.current = window.setTimeout(() => {
+				setCopyError(false);
+			}, 2e3);
+			return;
+		}
+		clipboard.copy(url);
+	};
+	useEffect(() => {
+		if (clipboard.error) {
+			setCopyError(true);
+			if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current);
+			errorTimeoutRef.current = window.setTimeout(() => {
+				setCopyError(false);
+			}, 2e3);
+		}
+	}, [clipboard.error]);
+	useEffect(() => {
+		return () => {
+			if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current);
+		};
+	}, []);
+	const getButtonState = () => {
+		if (clipboard.copied) return {
+			icon: /* @__PURE__ */ jsx(IconCheck, {}),
+			tooltip: "Link copied!"
+		};
+		if (copyError) return {
+			icon: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+			tooltip: "Copy failed - Clipboard requires HTTPS or localhost"
+		};
+		return {
+			icon: /* @__PURE__ */ jsx(IconLink, {}),
+			tooltip: "Copy link to this relationship view"
+		};
+	};
+	const buttonState = getButtonState();
+	return /* @__PURE__ */ jsx(Tooltip$1, {
+		label: buttonState.tooltip,
+		withArrow: true,
+		position: "top",
+		withinPortal: false,
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			variant: "default",
+			color: "gray",
+			onClick: handleCopy,
+			"aria-label": "Copy relationship URL",
+			children: buttonState.icon
+		})
+	});
+};
+
+//#endregion
+export { RelationshipsBrowser, buildRelationshipUrl };

package/dist/overlays/relationships-browser/SelectElement.css.mjs

@@ -0,0 +1,15 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { css } from "@likec4/styles/css";
+
+//#region src/overlays/relationships-browser/SelectElement.css.ts
+var SelectElement_css_exports = /* @__PURE__ */ __exportAll({
+	label: () => label,
+	node: () => node,
+	scrollArea: () => scrollArea
+});
+const node = css({ margin: "0" });
+const label = css({ _hover: { backgroundColor: "surface.hover" } });
+const scrollArea = css({ maxHeight: ["[70vh]", "[calc(100cqh - 70px)]"] });
+
+//#endregion
+export { SelectElement_css_exports, label, node, scrollArea };

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

@@ -0,0 +1,202 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import IconSelector from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.mjs";
+import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.mjs";
+import { useLikeC4ElementsTree } from "../../hooks/useLikeC4ElementsTree.mjs";
+import { SelectElement_css_exports, scrollArea } from "./SelectElement.css.mjs";
+import { memo, useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ancestorsFqn } from "@likec4/core";
+import { ActionIcon, Box, Button, Group, Popover, PopoverDropdown, PopoverTarget, ScrollAreaAutosize, SegmentedControl, Text, Tooltip, Tree, useTree } from "@mantine/core";
+
+//#region src/overlays/relationships-browser/SelectElement.tsx
+const selector2 = (state) => {
+	const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;
+	return {
+		subjectId: state.context.subject,
+		viewId: state.context.viewId,
+		scope: state.context.scope,
+		subjectExistsInScope,
+		enableSelectSubject: state.context.enableSelectSubject,
+		enableChangeScope: state.context.enableChangeScope
+	};
+};
+const SelectElement = memo(() => {
+	const browser = useRelationshipsBrowser();
+	const { onRelationshipBrowserScopeChange } = useDiagramEventHandlers();
+	const { subjectId, viewId, scope, subjectExistsInScope, enableSelectSubject, enableChangeScope } = useRelationshipsBrowserState(selector2);
+	const root = useRef(null);
+	const viewport = useRef(null);
+	const subject = useLikeC4Model().findElement(subjectId);
+	const data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0);
+	const tree = useTree({ multiple: false });
+	useEffect(() => {
+		ancestorsFqn(subjectId).reverse().forEach((id) => {
+			tree.expand(id);
+		});
+		tree.select(subjectId);
+	}, [subjectId]);
+	return /* @__PURE__ */ jsxs(Group, {
+		ref: root,
+		gap: "xs",
+		pos: "relative",
+		children: [enableSelectSubject && /* @__PURE__ */ jsxs(Group, {
+			gap: 4,
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsx(Box, {
+				fz: "xs",
+				fw: "500",
+				style: {
+					whiteSpace: "nowrap",
+					userSelect: "none"
+				},
+				children: "Relationships of"
+			}), /* @__PURE__ */ jsx(Box, {
+				pos: "relative",
+				children: /* @__PURE__ */ jsxs(Popover, {
+					position: "bottom-start",
+					shadow: "md",
+					keepMounted: false,
+					withinPortal: false,
+					closeOnClickOutside: true,
+					clickOutsideEvents: [
+						"pointerdown",
+						"mousedown",
+						"click"
+					],
+					offset: 4,
+					onOpen: () => {
+						setTimeout(() => {
+							(viewport.current?.querySelector(`[data-value="${subjectId}"]`))?.scrollIntoView({
+								behavior: "instant",
+								block: "nearest"
+							});
+						}, 100);
+					},
+					children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "default",
+						maw: 250,
+						rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
+						children: /* @__PURE__ */ jsx(Text, {
+							fz: "xs",
+							fw: "500",
+							truncate: true,
+							children: subject?.title ?? "???"
+						})
+					}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
+						p: 0,
+						miw: 250,
+						maw: 400,
+						children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+							scrollbars: "y",
+							type: "never",
+							viewportRef: viewport,
+							className: scrollArea,
+							children: /* @__PURE__ */ jsx(Tree, {
+								allowRangeSelection: false,
+								selectOnClick: false,
+								tree,
+								data,
+								classNames: SelectElement_css_exports,
+								levelOffset: 8,
+								styles: {
+									root: {
+										maxWidth: 400,
+										overflow: "hidden"
+									},
+									label: {
+										paddingTop: 5,
+										paddingBottom: 6
+									}
+								},
+								renderNode: ({ node, selected, expanded, elementProps }) => /* @__PURE__ */ jsxs(Group, {
+									gap: 2,
+									wrap: "nowrap",
+									...elementProps,
+									py: "3",
+									children: [/* @__PURE__ */ jsx(ActionIcon, {
+										variant: "subtle",
+										size: 18,
+										c: "dimmed",
+										style: { visibility: node.hasChildren ? "visible" : "hidden" },
+										children: /* @__PURE__ */ jsx(IconChevronRight, {
+											stroke: 3.5,
+											style: {
+												transition: "transform 150ms ease",
+												transform: `rotate(${expanded ? "90deg" : "0"})`,
+												width: "80%"
+											}
+										})
+									}), /* @__PURE__ */ jsx(Box, {
+										flex: "1 1 100%",
+										w: "100%",
+										onClick: (e) => {
+											e.stopPropagation();
+											tree.select(node.value);
+											tree.expand(node.value);
+											browser.navigateTo(node.value);
+										},
+										children: /* @__PURE__ */ jsx(Text, {
+											fz: "sm",
+											fw: selected ? "600" : "400",
+											truncate: "end",
+											children: node.label
+										})
+									})]
+								})
+							})
+						})
+					})]
+				})
+			})]
+		}), enableChangeScope && /* @__PURE__ */ jsxs(Group, {
+			gap: 4,
+			wrap: "nowrap",
+			children: [enableSelectSubject && /* @__PURE__ */ jsx(Box, {
+				fz: "xs",
+				fw: "500",
+				...!subjectExistsInScope && { c: "dimmed" },
+				style: {
+					whiteSpace: "nowrap",
+					userSelect: "none"
+				},
+				children: "Scope"
+			}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
+				color: "orange",
+				label: /* @__PURE__ */ jsxs(Fragment$1, { children: ["This element does not exist in the current view", scope === "view" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("br", {}), "Scope is set to global"] })] }),
+				position: "bottom-start",
+				disabled: subjectExistsInScope,
+				portalProps: { target: root.current },
+				children: /* @__PURE__ */ jsx(SegmentedControl, {
+					flex: "1 0 auto",
+					size: "xs",
+					withItemsBorders: false,
+					value: scope,
+					styles: { label: {
+						paddingLeft: 8,
+						paddingRight: 8
+					} },
+					onChange: (value) => {
+						const nextScope = value;
+						browser.changeScope(nextScope);
+						onRelationshipBrowserScopeChange?.(nextScope);
+					},
+					data: [{
+						label: "Global",
+						value: "global"
+					}, {
+						label: /* @__PURE__ */ jsx("span", { children: "Current view" }),
+						value: "view",
+						disabled: !subjectExistsInScope
+					}]
+				})
+			}) })]
+		})]
+	});
+});
+
+//#endregion
+export { SelectElement };

package/dist/overlays/relationships-browser/_types.d.mts

@@ -0,0 +1,65 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from "../../base/types.mjs";
+import { FunctionComponent } from "react";
+import { Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from "@likec4/core/types";
+import { Simplify } from "type-fest";
+//#region src/overlays/relationships-browser/_types.d.ts
+export declare namespace RelationshipsBrowserTypes {
+  type Column = 'incomers' | 'subjects' | 'outgoers';
+  /**
+   * The node's incoming and outgoing ports
+   */
+  type Ports = {
+    in: string[];
+    out: string[];
+  };
+  type ElementNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'tags' | 'navigateTo'>> & {
+    column: Column;
+    fqn: Fqn;
+    icon: string | null;
+    ports: Ports;
+    existsInCurrentView: boolean;
+  }>;
+  type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style'>> & {
+    column: Column;
+    fqn: Fqn;
+    depth: number;
+    icon: IconUrl;
+    ports: Ports;
+    existsInCurrentView: boolean;
+  }>;
+  type EmptyNodeData = BaseNodeData & {
+    column: Column;
+  };
+  type ElementNode = BaseNode<ElementNodeData, 'element'>;
+  type CompoundNode = BaseNode<CompoundNodeData, 'compound'>;
+  type EmptyNode = BaseNode<EmptyNodeData, 'empty'>;
+  type AnyNode = ElementNode | CompoundNode | EmptyNode;
+  type NodeType = AnyNode['type'];
+  type Node<T extends NodeType = NodeType> = Extract<AnyNode, {
+    type: T;
+  }>;
+  type NodeProps<T extends NodeType = NodeType> = BaseNodeProps<Node<T>>;
+  type NodeData = ExclusiveUnion<{
+    ElementNodeData: ElementNodeData;
+    CompoundNodeData: CompoundNodeData;
+    EmptyNodeData: EmptyNodeData;
+  }>;
+  type NodeRenderer<T extends NodeType = NodeType> = FunctionComponent<NodeProps<T>>;
+  type NodeRenderers = { [T in NodeType]: NodeRenderer<T>; };
+  type EdgeData = Simplify<BaseEdgeData & {
+    sourceFqn: Fqn;
+    targetFqn: Fqn;
+    relations: NonEmptyArray<RelationId>;
+    color: Color;
+    label: string | null;
+    navigateTo: ViewId | null;
+    line: RelationshipLineType;
+    head?: RelationshipArrowType;
+    tail?: RelationshipArrowType;
+    existsInCurrentView: boolean;
+  }>;
+  type Edge = BaseEdge<EdgeData, 'relationship'>;
+  type EdgeProps = BaseEdgeProps<Edge>;
+}
+//#endregion