@likec4/diagram 1.59.3 → 1.60.0

package/dist/overlays/element-details/MetadataValue.mjs

@@ -0,0 +1,232 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconChevronDown from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.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 { css } from "@likec4/styles/css";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Flex, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
+
+//#region src/overlays/element-details/MetadataValue.tsx
+function MetadataProvider({ children }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+function TruncatedValue({ value, isExpanded }) {
+	const [isTruncated, setIsTruncated] = useState(false);
+	const [portalTarget, setPortalTarget] = useState(null);
+	const textRef = useRef(null);
+	useEffect(() => {
+		const textElement = textRef.current;
+		if (!textElement) return;
+		setPortalTarget(textElement.closest("dialog"));
+		const observer = new ResizeObserver(() => {
+			setIsTruncated(textElement.scrollWidth > textElement.clientWidth);
+		});
+		observer.observe(textElement);
+		return () => observer.disconnect();
+	}, [value]);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: isTruncated && !isExpanded ? value : null,
+		multiline: true,
+		w: 300,
+		portalProps: portalTarget ? { target: portalTarget } : {},
+		children: /* @__PURE__ */ jsx(Text, {
+			ref: textRef,
+			component: "div",
+			className: css({
+				fontSize: "sm",
+				padding: "xs",
+				userSelect: "all",
+				color: "text",
+				lineHeight: "md",
+				whiteSpace: isExpanded ? "pre-wrap" : "nowrap",
+				overflow: isExpanded ? "visible" : "hidden",
+				textOverflow: isExpanded ? "unset" : "ellipsis",
+				wordBreak: isExpanded ? "break-word" : "normal",
+				minWidth: "0",
+				width: "100%"
+			}),
+			children: value
+		})
+	});
+}
+function MultiValueDisplay({ values, isExpanded }) {
+	if (isExpanded) return /* @__PURE__ */ jsx(Stack, {
+		gap: "xs",
+		children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: "xs",
+			children: [/* @__PURE__ */ jsx(Text, {
+				className: css({
+					fontSize: "xs",
+					color: "mantine.gray[5]",
+					fontWeight: "medium",
+					flexShrink: "0",
+					_dark: { color: "mantine.dark[3]" }
+				}),
+				children: "•"
+			}), /* @__PURE__ */ jsx(Box, {
+				className: css({
+					minHeight: "[32px]",
+					display: "flex",
+					alignItems: "center",
+					flex: "1"
+				}),
+				children: /* @__PURE__ */ jsx(TruncatedValue, {
+					value,
+					isExpanded: true
+				})
+			})]
+		}, index))
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		className: css({
+			minHeight: "[32px]",
+			display: "flex",
+			alignItems: "center",
+			padding: "xs",
+			gap: "xs",
+			flexWrap: "wrap",
+			minWidth: "0",
+			overflow: "hidden"
+		}),
+		children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: "xs",
+			style: { minWidth: 0 },
+			children: [/* @__PURE__ */ jsx(Text, {
+				className: css({
+					fontSize: "sm",
+					padding: "[4px 8px]",
+					backgroundColor: "white",
+					color: "text",
+					borderRadius: "sm",
+					borderWidth: "default",
+					borderStyle: "solid",
+					borderColor: "mantine.gray[3]",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					maxWidth: "[min(200px, 100%)]",
+					minWidth: "[60px]",
+					flex: "[0 1 auto]",
+					userSelect: "all",
+					_dark: {
+						backgroundColor: "mantine.dark[9]",
+						borderColor: "mantine.dark[4]"
+					}
+				}),
+				title: value,
+				children: value
+			}), index < values.length - 1 && /* @__PURE__ */ jsx(Text, {
+				className: css({
+					fontSize: "xs",
+					color: "mantine.gray[5]",
+					fontWeight: "medium",
+					flexShrink: "0",
+					_dark: { color: "mantine.dark[3]" }
+				}),
+				children: "•"
+			})]
+		}, index))
+	});
+}
+function MetadataValue({ label, value }) {
+	const elements = Array.isArray(value) ? value : typeof value === "string" && value.includes("\n") ? value.split("\n").map((s) => s.trim()).filter(Boolean) : [value];
+	const hasMultipleElements = elements.length > 1;
+	const [isExpanded, setIsExpanded] = useState(false);
+	const handleToggle = () => {
+		setIsExpanded(!isExpanded);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [hasMultipleElements ? /* @__PURE__ */ jsx(UnstyledButton, {
+		onClick: handleToggle,
+		className: css({
+			fontSize: "xs",
+			color: "text.dimmed",
+			justifySelf: "end",
+			textAlign: "right",
+			userSelect: "none",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "flex-end",
+			gap: "xs",
+			padding: "[4px 8px]",
+			borderRadius: "sm",
+			whiteSpace: "nowrap",
+			transitionProperty: "common",
+			transition: "medium",
+			_hover: {
+				backgroundColor: "mantine.gray[1]",
+				color: "primary.body",
+				_dark: {
+					backgroundColor: "mantine.dark[7]",
+					color: "primary.body.hover"
+				}
+			}
+		}),
+		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: "xs",
+			children: [
+				/* @__PURE__ */ jsxs(Text, {
+					component: "span",
+					size: "xs",
+					fw: 700,
+					children: [label, ":"]
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					component: "span",
+					className: css({
+						fontSize: "xs",
+						fontWeight: "medium",
+						color: "mantine.gray[6]",
+						backgroundColor: "mantine.gray[1]",
+						padding: "[1px 4px]",
+						borderRadius: "xs",
+						_dark: {
+							color: "mantine.dark[2]",
+							backgroundColor: "mantine.dark[6]"
+						}
+					}),
+					children: elements.length
+				}),
+				isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 12 })
+			]
+		})
+	}) : /* @__PURE__ */ jsxs(Text, {
+		component: "div",
+		className: css({
+			fontSize: "xs",
+			color: "text.dimmed",
+			justifySelf: "end",
+			textAlign: "right",
+			userSelect: "none",
+			whiteSpace: "nowrap",
+			padding: "[4px 8px]",
+			fontWeight: "[700]"
+		}),
+		children: [label, ":"]
+	}), /* @__PURE__ */ jsx(Box, {
+		className: css({
+			justifySelf: "stretch",
+			alignSelf: "start",
+			minWidth: "0"
+		}),
+		children: hasMultipleElements ? /* @__PURE__ */ jsx(MultiValueDisplay, {
+			values: elements,
+			isExpanded
+		}) : /* @__PURE__ */ jsx(Box, {
+			className: css({
+				minHeight: "[32px]",
+				display: "flex",
+				alignItems: "center"
+			}),
+			children: /* @__PURE__ */ jsx(TruncatedValue, {
+				value: elements[0] || "",
+				isExpanded
+			})
+		})
+	})] });
+}
+
+//#endregion
+export { MetadataProvider, MetadataValue };

package/dist/overlays/element-details/TabPanelDeployments.css.mjs

@@ -0,0 +1,37 @@
+import { css, cx } from "@likec4/styles/css";
+
+//#region src/overlays/element-details/TabPanelDeployments.css.ts
+const treeNode = css({ [`&[data-level='1']`]: { marginBottom: "sm" } });
+const treeNodeLabel = css({
+	cursor: "default",
+	marginTop: "0",
+	marginBottom: "0"
+});
+const label = css({
+	transition: "fast",
+	color: "mantine.gray[7]",
+	_dark: { color: "mantine.dark[1]" },
+	"& > *": { transition: "fast" }
+});
+const nodeLabel = cx(label);
+const instanceLabel = cx(label, css({
+	cursor: "pointer",
+	width: "100%",
+	justifyContent: "stretch",
+	flexWrap: "nowrap",
+	height: "[36px]",
+	paddingInlineStart: "[16px]",
+	paddingInlineEnd: "2.5",
+	borderRadius: "sm",
+	alignItems: "center",
+	color: "text.default",
+	_hover: { background: "surface.hover" },
+	"& .tabler-icon": {
+		transition: "fast",
+		boxSize: "[90%]",
+		opacity: "[0.65]"
+	}
+}));
+
+//#endregion
+export { instanceLabel, nodeLabel, treeNode, treeNodeLabel };

package/dist/overlays/element-details/TabPanelDeployments.mjs

@@ -0,0 +1,192 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
+import IconTarget from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.mjs";
+import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { instanceLabel, nodeLabel, treeNode, treeNodeLabel } from "./TabPanelDeployments.css.mjs";
+import { memo, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, Group, Menu, Text, ThemeIcon, Tree, rem, useTree } from "@mantine/core";
+
+//#region src/overlays/element-details/TabPanelDeployments.tsx
+const DeploymentNodeRenderer = ({ node }) => /* @__PURE__ */ jsxs(Group, {
+	className: nodeLabel,
+	gap: 6,
+	align: "baseline",
+	wrap: "nowrap",
+	children: [/* @__PURE__ */ jsxs(Text, {
+		component: "div",
+		fz: 11,
+		c: "dimmed",
+		children: [node.kind, ":"]
+	}), /* @__PURE__ */ jsx(Text, {
+		component: "div",
+		fz: "sm",
+		fw: "500",
+		children: node.title
+	})]
+});
+const zoomIcon = /* @__PURE__ */ jsx(ThemeIcon, {
+	size: "sm",
+	variant: "transparent",
+	color: "gray",
+	children: /* @__PURE__ */ jsx(IconZoomScan, {
+		stroke: 1.8,
+		opacity: .65
+	})
+});
+const DeployedInstanceRenderer = ({ instance }) => {
+	const diagram = useDiagram();
+	const currentViewId = diagram.currentView.id;
+	const views = [...instance.views()];
+	return /* @__PURE__ */ jsxs(Group, {
+		className: instanceLabel,
+		gap: 4,
+		children: [
+			/* @__PURE__ */ jsx(ThemeIcon, {
+				color: "gray",
+				variant: "transparent",
+				size: "xs",
+				flex: 0,
+				children: /* @__PURE__ */ jsx(IconTarget, { stroke: 1.2 })
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				component: "div",
+				fz: "sm",
+				fw: "500",
+				flex: "1 1 100%",
+				children: instance.title
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				onClick: stopPropagation,
+				pos: "relative",
+				"data-no-transform": true,
+				flex: 0,
+				children: [views.length === 0 && /* @__PURE__ */ jsx(Button, {
+					size: "compact-xs",
+					variant: "transparent",
+					color: "gray",
+					disabled: true,
+					children: "no views"
+				}), views.length > 0 && /* @__PURE__ */ jsxs(Menu, {
+					shadow: "md",
+					withinPortal: false,
+					position: "bottom-start",
+					offset: 0,
+					closeOnClickOutside: true,
+					clickOutsideEvents: [
+						"pointerdown",
+						"mousedown",
+						"click"
+					],
+					closeOnEscape: true,
+					trapFocus: true,
+					children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(Button, {
+						size: "compact-xs",
+						variant: "subtle",
+						color: "gray",
+						children: [
+							views.length,
+							" view",
+							views.length > 1 ? "s" : ""
+						]
+					}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: views.map((view) => /* @__PURE__ */ jsx(Menu.Item, {
+						px: "xs",
+						py: 4,
+						disabled: view.id === currentViewId,
+						leftSection: zoomIcon,
+						styles: { itemSection: { marginInlineEnd: rem(8) } },
+						onClick: (e) => {
+							e.stopPropagation();
+							diagram.navigateTo(view.id);
+						},
+						children: view.title
+					}, view.id)) })]
+				})]
+			})
+		]
+	});
+};
+const infoIcon = /* @__PURE__ */ jsx(IconInfoCircle, {});
+const TabPanelDeployments = memo(({ elementFqn }) => {
+	const element = useLikeC4Model().element(elementFqn);
+	const deployments = [...element.deployments()];
+	const tree = useTree({ multiple: false });
+	const data = useMemo(() => {
+		let roots = [];
+		let treeItems = /* @__PURE__ */ new Map();
+		for (const instance of element.deployments()) {
+			let instanceNode = {
+				label: /* @__PURE__ */ jsx(DeployedInstanceRenderer, { instance }),
+				value: instance.id,
+				type: "instance",
+				children: []
+			};
+			treeItems.set(instance.id, instanceNode);
+			let ancestor = instance.parent;
+			while (ancestor) {
+				let ancestorNode = treeItems.get(ancestor.id);
+				if (ancestorNode) {
+					ancestorNode.children.push(instanceNode);
+					break;
+				}
+				ancestorNode = {
+					label: /* @__PURE__ */ jsx(DeploymentNodeRenderer, { node: ancestor }),
+					value: ancestor.id,
+					type: "node",
+					children: [instanceNode]
+				};
+				treeItems.set(ancestor.id, ancestorNode);
+				instanceNode = ancestorNode;
+				ancestor = ancestor.parent;
+			}
+			if (!ancestor && !roots.includes(instanceNode)) roots.push(instanceNode);
+		}
+		return roots;
+	}, [element]);
+	useEffect(() => {
+		tree.expandAllNodes();
+	}, [data]);
+	if (deployments.length === 0) return /* @__PURE__ */ jsx(Alert, {
+		variant: "light",
+		color: "gray",
+		icon: infoIcon,
+		children: "This element does not have any deployments"
+	});
+	return /* @__PURE__ */ jsx(Tree, {
+		levelOffset: "sm",
+		allowRangeSelection: false,
+		classNames: {
+			node: treeNode,
+			label: treeNodeLabel
+		},
+		styles: { root: {
+			position: "relative",
+			width: "min-content",
+			minWidth: 300
+		} },
+		data,
+		tree,
+		renderNode: ({ node, selected, elementProps, hasChildren }) => /* @__PURE__ */ jsx(Box, {
+			...elementProps,
+			style: { ...!hasChildren && { marginBottom: rem(4) } },
+			children: hasChildren ? /* @__PURE__ */ jsx(Button, {
+				fullWidth: true,
+				color: "gray",
+				variant: selected ? "transparent" : "subtle",
+				size: "xs",
+				justify: "flex-start",
+				styles: { root: {
+					position: "unset",
+					paddingInlineStart: rem(16)
+				} },
+				children: node.label
+			}) : node.label
+		})
+	});
+});
+
+//#endregion
+export { TabPanelDeployments };

package/dist/overlays/element-details/TabPanelRelationships.css.mjs

@@ -0,0 +1,69 @@
+import { css } from "@likec4/styles/css";
+
+//#region src/overlays/element-details/TabPanelRelationships.css.ts
+const fqn = css({
+	display: "inline-block",
+	fontSize: "sm",
+	fontWeight: "medium",
+	whiteSpace: "nowrap",
+	padding: "[3px 6px]",
+	borderRadius: "xs",
+	background: `var(--likec4-palette-fill)/75`,
+	lineHeight: "[1.2]",
+	color: "var(--likec4-palette-hiContrast)"
+});
+const relationshipStat = css({
+	_light: {
+		background: "mantine.gray[1]",
+		"&[data-missing": {}
+	},
+	[`&[data-missing]`]: {
+		color: "mantine.orange[4]",
+		background: `mantine.orange[8]/15`,
+		borderColor: `mantine.orange[5]/20`,
+		_light: { color: "mantine.orange[8]" }
+	}
+});
+const xyflow = css({
+	flex: "[1 1 100%]",
+	position: "relative",
+	width: "100%",
+	height: "100%",
+	background: "surface.sunken",
+	border: "default",
+	borderRadius: "sm"
+});
+const panelScope = css({
+	_before: {
+		content: "\"scope:\"",
+		position: "absolute",
+		top: "0",
+		left: "2",
+		fontSize: "xxs",
+		fontWeight: "medium",
+		lineHeight: "1",
+		color: "text.dimmed",
+		opacity: "[0.85]",
+		transform: "translateY(-100%) translateY(-2px)"
+	},
+	_light: { "& .mantine-SegmentedControl-root": { background: "mantine.gray[3]" } }
+});
+const edgeNum = css({
+	display: "inline-block",
+	fontSize: "xl",
+	fontWeight: "bold",
+	padding: "[1px 5px]",
+	minWidth: "[24px]",
+	textAlign: "center",
+	borderRadius: "sm",
+	background: "surface.sunken",
+	color: "text.default",
+	[`&[data-zero]`]: { color: "text.dimmed" },
+	[`&[data-missing]`]: {
+		color: "mantine.orange[4]",
+		background: `mantine.orange[8]/20`
+	}
+});
+
+//#endregion
+export { fqn, relationshipStat, xyflow };

package/dist/overlays/element-details/TabPanelRelationships.mjs

@@ -0,0 +1,163 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconArrowRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs";
+import IconExternalLink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { fqn, relationshipStat, xyflow } from "./TabPanelRelationships.css.mjs";
+import { useElementDetailsActorRef } from "./actorContext.mjs";
+import { RelationshipsBrowser } from "../relationships-browser/RelationshipsBrowser.mjs";
+import { useCallback } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { unique } from "remeda";
+import { nameFromFqn } from "@likec4/core";
+import { ActionIcon, Box, Group, Paper, Stack, Text, ThemeIcon, Tooltip } from "@mantine/core";
+import { useSelector } from "@xstate/react";
+
+//#region src/overlays/element-details/TabPanelRelationships.tsx
+const Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 600,
+	closeDelay: 120,
+	label: "",
+	children: null,
+	offset: 8,
+	withinPortal: false
+});
+function TabPanelRelationships({ node, element }) {
+	const diagram = useDiagram();
+	const delailsActor = useElementDetailsActorRef();
+	const relationshipsBrowserActor = useSelector(delailsActor, useCallback((s) => s.children[`${delailsActor.id}-relationships`], [delailsActor.id]));
+	const incoming = [...element.incoming()].map((r) => r.id);
+	const outgoing = [...element.outgoing()].map((r) => r.id);
+	const incomingInView = node ? unique([...node.incoming()].flatMap((e) => e.$edge.relations)) : [];
+	const outgoingInView = node ? unique([...node.outgoing()].flatMap((e) => e.$edge.relations)) : [];
+	const notIncludedRelations = [...incoming, ...outgoing].filter((r) => !incomingInView.includes(r) && !outgoingInView.includes(r)).length;
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "xs",
+		pos: "relative",
+		w: "100%",
+		h: "100%",
+		children: [incoming.length + outgoing.length > 0 && /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			wrap: "nowrap",
+			align: "center",
+			children: [/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Group, {
+				gap: 8,
+				mb: 4,
+				wrap: "nowrap",
+				children: [
+					/* @__PURE__ */ jsx(RelationshipsStat, {
+						title: "incoming",
+						total: incoming.length,
+						included: incomingInView.length
+					}),
+					/* @__PURE__ */ jsx(ThemeIcon, {
+						size: "sm",
+						variant: "transparent",
+						c: "dimmed",
+						children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } })
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						className: fqn,
+						children: nameFromFqn(element.id)
+					}),
+					/* @__PURE__ */ jsx(ThemeIcon, {
+						size: "sm",
+						variant: "transparent",
+						c: "dimmed",
+						children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } })
+					}),
+					/* @__PURE__ */ jsx(RelationshipsStat, {
+						title: "outgoing",
+						total: outgoing.length,
+						included: outgoingInView.length
+					})
+				]
+			}) }), notIncludedRelations > 0 && /* @__PURE__ */ jsx(Tooltip$1, {
+				label: "Current view does not include some relationships",
+				children: /* @__PURE__ */ jsxs(Group, {
+					mt: "xs",
+					gap: 6,
+					c: "orange",
+					style: { cursor: "pointer" },
+					children: [/* @__PURE__ */ jsx(IconInfoCircle, { style: { width: 14 } }), /* @__PURE__ */ jsxs(Text, {
+						fz: "sm",
+						children: [
+							notIncludedRelations,
+							" relationship",
+							notIncludedRelations > 1 ? "s are" : " is",
+							" hidden"
+						]
+					})]
+				})
+			})]
+		}), /* @__PURE__ */ jsx(Box, {
+			className: xyflow,
+			children: relationshipsBrowserActor && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor }), /* @__PURE__ */ jsx(Box, {
+				pos: "absolute",
+				top: 12,
+				right: 12,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "md",
+					variant: "default",
+					radius: "sm",
+					onClick: (e) => {
+						e.stopPropagation();
+						const { subject, scope, viewId } = relationshipsBrowserActor.getSnapshot().context;
+						diagram.overlays().send({
+							type: "open.relationshipsBrowser",
+							subject,
+							scope,
+							viewId
+						});
+					},
+					children: /* @__PURE__ */ jsx(IconExternalLink, {
+						stroke: 1.6,
+						style: { width: "70%" }
+					})
+				})
+			})] })
+		})]
+	});
+}
+function RelationshipsStat({ title, total, included }) {
+	return /* @__PURE__ */ jsx(Paper, {
+		withBorder: true,
+		shadow: "none",
+		className: relationshipStat,
+		px: "md",
+		py: "xs",
+		radius: "md",
+		mod: {
+			zero: total === 0,
+			missing: total !== included
+		},
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			align: "flex-end",
+			children: [/* @__PURE__ */ jsx(Text, {
+				component: "div",
+				c: total !== included ? "orange" : "dimmed",
+				tt: "uppercase",
+				fw: 600,
+				fz: 10,
+				lh: 1,
+				children: title
+			}), /* @__PURE__ */ jsx(Text, {
+				fw: 600,
+				fz: "xl",
+				component: "div",
+				lh: 1,
+				children: total !== included ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					included,
+					" / ",
+					total
+				] }) : /* @__PURE__ */ jsx(Fragment$1, { children: total })
+			})]
+		})
+	});
+}
+
+//#endregion
+export { TabPanelRelationships };