@likec4/diagram 1.59.4 → 1.61.0

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

@@ -0,0 +1,781 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconCaretRightFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCaretRightFilled.mjs";
+import IconCheck from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs";
+import IconExternalLink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.mjs";
+import IconFileSymlink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.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 { ElementTag } from "../../base-primitives/element/ElementTags.mjs";
+import { Link } from "../../components/Link.mjs";
+import { MarkdownWithRefs } from "../../components/markdown/MarkdownWithRefs.mjs";
+import { DiagramFeatures, IfEnabled } from "../../context/DiagramFeatures.mjs";
+import { IconRenderer } from "../../context/IconRenderer.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
+import { useUpdateEffect as useUpdateEffect$1 } from "../../hooks/useUpdateEffect.mjs";
+import { useCurrentViewModel } from "../../hooks/useCurrentViewModel.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { metadataSearchQuery } from "../../search/metadata-search.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { CardFooter, CardFooterSection, ElementTitle, backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, factLabel, factValues, facts, propertiesMain, propertiesSidebar, resizeHandle, tabs, technologyBadge } from "./ElementDetailsCard.css.mjs";
+import { MetadataList, MetadataProvider } from "./MetadataValue.mjs";
+import { PropertiesSplit } from "./PropertiesSplit.mjs";
+import { TabPanelDeployments } from "./TabPanelDeployments.mjs";
+import { TabPanelRelationships } from "./TabPanelRelationships.mjs";
+import { TabPanelStructure } from "./TabPanelStructure.mjs";
+import { TabPanelViews } from "./TabPanelViews.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { Fragment, useCallback, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
+import { clamp, entries, only } from "remeda";
+import { ancestorsFqn, isAncestor, nameFromFqn, nonNullable } from "@likec4/core";
+import { ActionIcon, ActionIconGroup, Badge, Button, CloseButton, Collapse, Flex, RemoveScroll, ScrollArea, Tabs, TabsList, TabsPanel, TabsTab, Tooltip, UnstyledButton } from "@mantine/core";
+import { m, useDragControls, useMotionValue } from "motion/react";
+import { useClipboard, useDisclosure, useLocalStorage, useSessionStorage, useViewportSize } from "@mantine/hooks";
+import { HStack, Txt, styled } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+
+// src/overlays/element-details/ElementDetailsCard.tsx
+const Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 400,
+	closeDelay: 150,
+	label: "",
+	children: null,
+	offset: 4,
+	withinPortal: false
+});
+const diffStatusColor = {
+	added: "green",
+	removed: "red",
+	modified: "orange",
+	orphan: "gray"
+};
+const SmallLabel = styled("div", { base: {
+	textStyle: "fieldLabel",
+	whiteSpace: "nowrap",
+	userSelect: "none"
+} });
+const MIN_PADDING = 16;
+const DEFAULT_SIZE = {
+	width: 700,
+	height: 650
+};
+const MIN_SIZE = {
+	width: 320,
+	height: 300
+};
+const TABS = [
+	"Properties",
+	"Relationships",
+	"Views",
+	"Structure",
+	"Deployments"
+];
+const DEPLOYMENT_TABS = [
+	"Properties",
+	"Views",
+	"Structure"
+];
+const motionProps = {
+	initial: {
+		[backdropBlur]: "0px",
+		[backdropOpacity]: "2%"
+	},
+	animate: {
+		[backdropBlur]: "3px",
+		[backdropOpacity]: "60%"
+	},
+	exit: {
+		[backdropBlur]: "0px",
+		[backdropOpacity]: "0%",
+		transition: { duration: .15 }
+	}
+};
+function ElementDetailsCard({ viewId, fromNode, rectFromNode, subject, onClose }) {
+	const windowSize = useViewportSize();
+	const windowWidth = windowSize.width || window.innerWidth || 1200;
+	const windowHeight = windowSize.height || window.innerHeight || 800;
+	const [activeTab, setActiveTab] = useSessionStorage({
+		key: subject.deployment ? "likec4:deployment-details:active-tab" : "likec4:element-details:active-tab",
+		defaultValue: "Properties",
+		getInitialValueInEffect: false
+	});
+	const [opened, setOpened] = useState(activeTab !== "Relationships");
+	const diagram = useDiagram();
+	const viewModel = useCurrentViewModel();
+	const nodeModel = fromNode ? viewModel.findNode(fromNode) : subject.type === "deployment" ? [...viewModel.nodes()].find((n) => n.$node.deploymentRef === subject.deployment) ?? null : viewModel.findNodeWithElement(subject.element);
+	const logicalElement = subject.type === "element" ? viewModel.$model.findElement(subject.element) : null;
+	const deploymentElement = subject.type === "deployment" ? viewModel.$model.deployment.findElement(subject.deployment) : null;
+	const elementModel = nonNullable(logicalElement ?? deploymentElement, "Details subject not found");
+	const tabs$1 = subject.deployment ? DEPLOYMENT_TABS : TABS;
+	let defaultViewId = nodeModel?.$node.navigateTo ?? logicalElement?.defaultView?.id ?? null;
+	if (defaultViewId === viewId) defaultViewId = null;
+	const defaultLink = only(elementModel.links);
+	const controls = useDragControls();
+	const isCompound = (nodeModel?.$node.children?.length ?? 0) > 0;
+	const [savedSize, setSavedSize] = useLocalStorage({
+		key: "likec4:element-details:size",
+		defaultValue: DEFAULT_SIZE,
+		getInitialValueInEffect: false
+	});
+	const maxWidth = Math.max(MIN_SIZE.width, windowWidth - 32);
+	const maxHeight = Math.max(MIN_SIZE.height, windowHeight - 32);
+	const _width = Math.round(clamp(savedSize.width, {
+		min: MIN_SIZE.width,
+		max: maxWidth
+	}));
+	const _height = Math.round(clamp(savedSize.height, {
+		min: MIN_SIZE.height,
+		max: maxHeight
+	}));
+	const fromPosition = rectFromNode ? {
+		x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
+		y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)
+	} : {
+		x: windowWidth / 2,
+		y: windowHeight / 2
+	};
+	const fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, .9) : 1;
+	const left = Math.round(clamp(fromPosition.x - _width / 2, {
+		min: MIN_PADDING,
+		max: windowWidth - _width - MIN_PADDING
+	}));
+	const top = Math.round(clamp(fromPosition.y - (isCompound ? 0 : 60), {
+		min: MIN_PADDING,
+		max: windowHeight - _height - MIN_PADDING
+	}));
+	const originX = clamp((fromPosition.x - left) / _width, {
+		min: .01,
+		max: .99
+	});
+	const originY = clamp((fromPosition.y - top) / _height, {
+		min: .01,
+		max: .99
+	});
+	const width = useMotionValue(_width);
+	const height = useMotionValue(_height);
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	useUpdateEffect$1(() => {
+		width.set(_width);
+		height.set(_height);
+	}, [_width, _height]);
+	const handleResize = useCallback((_, info) => {
+		width.set(clamp(width.get() + info.delta.x, {
+			min: MIN_SIZE.width,
+			max: maxWidth
+		}));
+		height.set(clamp(height.get() + info.delta.y, {
+			min: MIN_SIZE.height,
+			max: maxHeight
+		}));
+	}, [
+		width,
+		height,
+		maxWidth,
+		maxHeight
+	]);
+	const keepInViewport = useCallback(() => {
+		const rect = ref.current?.querySelector(":scope > [data-likec4-color]")?.getBoundingClientRect();
+		if (!rect) return;
+		const overflow = (start, end, size) => {
+			switch (true) {
+				case start < MIN_PADDING: return MIN_PADDING - start;
+				case end > size - MIN_PADDING: return Math.max(size - MIN_PADDING - end, MIN_PADDING - start);
+				default: return 0;
+			}
+		};
+		const dx = overflow(rect.left, rect.right, windowWidth);
+		const dy = overflow(rect.top, rect.bottom, windowHeight);
+		if (dx !== 0) x.set(x.get() + dx);
+		if (dy !== 0) y.set(y.get() + dy);
+	}, [
+		x,
+		y,
+		windowWidth,
+		windowHeight
+	]);
+	const handleResizeEnd = useCallback(() => {
+		setSavedSize({
+			width: Math.round(width.get()),
+			height: Math.round(height.get())
+		});
+		keepInViewport();
+	}, [
+		width,
+		height,
+		setSavedSize,
+		keepInViewport
+	]);
+	const resetCard = useCallback(() => {
+		width.set(clamp(DEFAULT_SIZE.width, {
+			min: MIN_SIZE.width,
+			max: maxWidth
+		}));
+		height.set(clamp(DEFAULT_SIZE.height, {
+			min: MIN_SIZE.height,
+			max: maxHeight
+		}));
+		x.set(0);
+		y.set(0);
+		setSavedSize(DEFAULT_SIZE);
+	}, [
+		width,
+		height,
+		x,
+		y,
+		maxWidth,
+		maxHeight,
+		setSavedSize
+	]);
+	const ref = useRef(null);
+	const close = useDebouncedCallback(useCallbackRef$1(onClose), [], 50);
+	const triggerClose = useCallbackRef$1((event) => {
+		event?.stopPropagation();
+		close();
+	});
+	const notation = nodeModel?.$node.notation ?? null;
+	const elementIcon$1 = IconRenderer({
+		element: {
+			id: elementModel.id,
+			title: elementModel.title,
+			icon: nodeModel?.icon ?? elementModel.icon
+		},
+		className: elementIcon
+	});
+	useTimeoutEffect(() => {
+		if (!ref.current?.open) ref.current?.showModal();
+	}, 20);
+	/**
+	* This delay improves "enter" animations,
+	* if  current tab is "Relationships"
+	*/
+	useTimeoutEffect(() => {
+		setOpened(true);
+	}, !opened ? 220 : void 0);
+	const technologies = elementModel.technology ? elementModel.technology.split(",").map((t) => t.trim()).filter(Boolean) : [];
+	const hasFacts = technologies.length > 0 || elementModel.links.length > 0 || elementModel.hasMetadata() || !!deploymentElement?.isInstance();
+	return /* @__PURE__ */ jsx(m.dialog, {
+		ref,
+		className: cx(dialog, RemoveScroll.classNames.fullWidth),
+		layout: true,
+		...motionProps,
+		onClick: (e) => {
+			e.stopPropagation();
+			if (e.target?.nodeName?.toUpperCase() === "DIALOG") ref.current?.close();
+		},
+		onDoubleClick: stopPropagation,
+		onPointerDown: stopPropagation,
+		onClose: triggerClose,
+		children: /* @__PURE__ */ jsx(RemoveScroll, {
+			forwardProps: true,
+			removeScrollBar: false,
+			children: /* @__PURE__ */ jsxs(m.div, {
+				layout: true,
+				layoutRoot: true,
+				drag: true,
+				dragControls: controls,
+				dragElastic: 0,
+				dragMomentum: false,
+				dragListener: false,
+				onDragEnd: keepInViewport,
+				"data-likec4-color": nodeModel?.color ?? elementModel.color,
+				className: card,
+				initial: {
+					top,
+					left,
+					width: _width,
+					height: _height,
+					opacity: 0,
+					originX,
+					originY,
+					scale: Math.max(fromScale, .65)
+				},
+				animate: {
+					opacity: 1,
+					scale: 1,
+					originX,
+					originY
+				},
+				exit: {
+					opacity: 0,
+					scale: .9,
+					translateY: -10,
+					transition: { duration: .1 }
+				},
+				style: {
+					width,
+					height,
+					x,
+					y
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: cardHeader,
+						onPointerDown: (e) => {
+							if (!e.target.closest("button, a, input, textarea")) e.preventDefault();
+							controls.start(e);
+						},
+						onDoubleClick: (e) => {
+							if (e.target.closest("button, a")) return;
+							window.getSelection()?.removeAllRanges();
+							resetCard();
+						},
+						children: /* @__PURE__ */ jsxs(HStack, {
+							alignItems: "start",
+							justify: "space-between",
+							gap: "sm",
+							flexWrap: "nowrap",
+							children: [/* @__PURE__ */ jsxs(HStack, {
+								alignItems: "start",
+								gap: "sm",
+								style: {
+									cursor: "default",
+									minWidth: 0,
+									overflow: "hidden"
+								},
+								flexWrap: "nowrap",
+								children: [elementIcon$1, /* @__PURE__ */ jsxs("div", {
+									style: {
+										minWidth: 0,
+										overflow: "hidden"
+									},
+									children: [
+										/* @__PURE__ */ jsx(Tooltip$1, {
+											label: elementModel.title,
+											openDelay: 600,
+											position: "bottom-start",
+											children: /* @__PURE__ */ jsx(ElementTitle, { children: elementModel.title })
+										}),
+										notation && /* @__PURE__ */ jsx(Txt, {
+											dimmed: true,
+											size: "sm",
+											medium: true,
+											lineClamp: 1,
+											mt: "xxs",
+											children: notation
+										}),
+										/* @__PURE__ */ jsx("div", {
+											style: { marginTop: "0.25rem" },
+											children: /* @__PURE__ */ jsx(ElementFqn, { fqn: elementModel.id }, elementModel.id)
+										})
+									]
+								})]
+							}), /* @__PURE__ */ jsxs(HStack, {
+								gap: "xs",
+								flexWrap: "nowrap",
+								style: { flex: "none" },
+								children: [/* @__PURE__ */ jsxs(ActionIconGroup, {
+									style: { alignSelf: "flex-start" },
+									children: [
+										defaultLink && /* @__PURE__ */ jsx(ActionIcon, {
+											component: "a",
+											href: defaultLink.url,
+											target: "_blank",
+											size: "lg",
+											variant: "default",
+											radius: "sm",
+											children: /* @__PURE__ */ jsx(IconExternalLink, {
+												stroke: 1.6,
+												style: { width: "65%" }
+											})
+										}),
+										/* @__PURE__ */ jsx(IfEnabled, {
+											feature: "Vscode",
+											children: /* @__PURE__ */ jsx(Tooltip$1, {
+												label: "Open source",
+												children: /* @__PURE__ */ jsx(ActionIcon, {
+													size: "lg",
+													variant: "default",
+													radius: "sm",
+													onClick: (e) => {
+														e.stopPropagation();
+														diagram.openSource(subject.type === "deployment" ? { deployment: subject.deployment } : { element: subject.element });
+													},
+													children: /* @__PURE__ */ jsx(IconFileSymlink, {
+														stroke: 1.8,
+														style: { width: "62%" }
+													})
+												})
+											})
+										}),
+										defaultViewId && /* @__PURE__ */ jsx(Tooltip$1, {
+											label: "Open default view",
+											children: /* @__PURE__ */ jsx(ActionIcon, {
+												size: "lg",
+												variant: "default",
+												radius: "sm",
+												onClick: (e) => {
+													e.stopPropagation();
+													diagram.navigateTo(defaultViewId, fromNode ?? void 0);
+												},
+												children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "70%" } })
+											})
+										})
+									]
+								}), /* @__PURE__ */ jsx(CloseButton, {
+									size: "lg",
+									onClick: triggerClose
+								})]
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(Tabs, {
+						value: activeTab,
+						onChange: (v) => setActiveTab(v),
+						variant: "none",
+						classNames: tabs(),
+						children: [
+							/* @__PURE__ */ jsx(TabsList, { children: tabs$1.map((tab) => /* @__PURE__ */ jsx(TabsTab, {
+								value: tab,
+								children: tab
+							}, tab)) }),
+							/* @__PURE__ */ jsx(TabsPanel, {
+								value: "Properties",
+								children: /* @__PURE__ */ jsx(PropertiesSplit, {
+									main: /* @__PURE__ */ jsx(ElementDescription, { element: elementModel }),
+									sidebar: hasFacts ? /* @__PURE__ */ jsx(ScrollArea, {
+										className: propertiesSidebar,
+										scrollbars: "y",
+										type: "auto",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: facts,
+											children: [
+												technologies.length > 0 && /* @__PURE__ */ jsx(Fact, {
+													label: "technology",
+													children: technologies.map((technology) => /* @__PURE__ */ jsx(Badge, {
+														variant: "default",
+														radius: "sm",
+														size: "sm",
+														tt: "none",
+														className: technologyBadge,
+														children: technology
+													}, technology))
+												}),
+												elementModel.links.length > 0 && /* @__PURE__ */ jsx(Fact, {
+													label: "links",
+													children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${link.url}-${i}`))
+												}),
+												deploymentElement?.isInstance() && /* @__PURE__ */ jsx(Fact, {
+													label: "logical element",
+													children: /* @__PURE__ */ jsx(Button, {
+														variant: "default",
+														size: "compact-xs",
+														fz: "xxs",
+														onClick: () => diagram.openNodeDetails({
+															type: "element",
+															element: deploymentElement.element.id
+														}),
+														children: deploymentElement.element.title
+													})
+												}),
+												elementModel.hasMetadata() && /* @__PURE__ */ jsx(Fact, {
+													label: "metadata",
+													children: /* @__PURE__ */ jsx(MetadataList, {
+														entries: entries(elementModel.metadata).sort(([a], [b]) => a.localeCompare(b)),
+														onSearch: (key, value) => diagram.openSearch(metadataSearchQuery(key, value))
+													})
+												})
+											]
+										})
+									}) : null
+								})
+							}),
+							logicalElement && /* @__PURE__ */ jsx(TabsPanel, {
+								value: "Relationships",
+								children: /* @__PURE__ */ jsx(DiagramFeatures, {
+									overrides: {
+										enableRelationshipBrowser: false,
+										enableNavigateTo: false
+									},
+									children: opened && activeTab === "Relationships" && /* @__PURE__ */ jsx(TabPanelRelationships, {
+										element: logicalElement,
+										node: nodeModel ?? null
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx(TabsPanel, {
+								value: "Views",
+								children: /* @__PURE__ */ jsx(TabPanelViews, {
+									elementModel,
+									onNavigateTo: (viewId) => diagram.navigateTo(viewId, fromNode ?? void 0)
+								})
+							}),
+							/* @__PURE__ */ jsx(TabsPanel, {
+								value: "Structure",
+								children: /* @__PURE__ */ jsx(ScrollArea, {
+									scrollbars: "y",
+									type: "auto",
+									children: /* @__PURE__ */ jsx(TabPanelStructure, { element: elementModel })
+								})
+							}),
+							logicalElement && /* @__PURE__ */ jsx(TabsPanel, {
+								value: "Deployments",
+								children: /* @__PURE__ */ jsx(ScrollArea, {
+									scrollbars: "y",
+									type: "auto",
+									children: /* @__PURE__ */ jsx(TabPanelDeployments, { elementFqn: logicalElement.id })
+								})
+							})
+						]
+					}) }),
+					/* @__PURE__ */ jsxs(CardFooter, { children: [
+						/* @__PURE__ */ jsxs(CardFooterSection, { children: [/* @__PURE__ */ jsx(SmallLabel, { children: "kind" }), /* @__PURE__ */ jsx(Txt, {
+							size: "sm",
+							layerStyle: "surface.sunken",
+							px: "2",
+							py: "0.5",
+							medium: true,
+							rounded: "sm",
+							cursor: "pointer",
+							onClick: (e) => {
+								e.stopPropagation();
+								diagram.openSearch(`kind:${elementModel.kind}`);
+							},
+							children: elementModel.kind
+						})] }),
+						nodeModel?.$node.diffStatus && /* @__PURE__ */ jsxs(CardFooterSection, { children: [/* @__PURE__ */ jsx(SmallLabel, { children: "diff" }), /* @__PURE__ */ jsx(Badge, {
+							radius: "sm",
+							size: "sm",
+							fw: 600,
+							variant: "light",
+							color: diffStatusColor[nodeModel.$node.diffStatus],
+							children: nodeModel.$node.diffStatus
+						})] }),
+						elementModel.tags.length > 0 && /* @__PURE__ */ jsxs(CardFooterSection, {
+							full: true,
+							children: [/* @__PURE__ */ jsx(SmallLabel, { children: "tags" }), /* @__PURE__ */ jsx(ElementTags, {
+								tags: elementModel.tags,
+								onClick: (tag) => diagram.openSearch(`#${tag}`)
+							})]
+						})
+					] }),
+					/* @__PURE__ */ jsx(m.div, {
+						className: resizeHandle,
+						drag: true,
+						dragElastic: 0,
+						dragMomentum: false,
+						onDrag: handleResize,
+						onDragEnd: handleResizeEnd,
+						onDoubleClick: resetCard,
+						dragConstraints: {
+							top: 0,
+							left: 0,
+							right: 0,
+							bottom: 0
+						}
+					})
+				]
+			})
+		})
+	});
+}
+function Fact({ label, children }) {
+	return /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", {
+		className: factLabel,
+		children: label
+	}), /* @__PURE__ */ jsx("div", {
+		className: factValues,
+		children
+	})] });
+}
+function ElementTags({ tags, onClick }) {
+	return /* @__PURE__ */ jsx(Flex, {
+		gap: 4,
+		flex: 1,
+		wrap: "wrap",
+		align: "center",
+		children: tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, {
+			tag,
+			cursor: "pointer",
+			onClick: (e) => {
+				e.stopPropagation();
+				onClick(tag);
+			}
+		}, tag))
+	});
+}
+const FqnPart = styled("div", { base: {
+	px: "1",
+	paddingTop: "0.5",
+	paddingBottom: "1.5",
+	fontSize: "xs",
+	lineHeight: "snug",
+	fontWeight: "medium",
+	color: "text.dimmed",
+	borderRadius: "sm",
+	cursor: "pointer",
+	"& + &": {
+		ml: "-1",
+		pl: "0"
+	},
+	"&[data-hovered=\"true\"]": {
+		color: "text.bright",
+		backgroundColor: "surface.sunken"
+	}
+} });
+const FqnSegment = styled("button", { base: {
+	px: "1",
+	paddingTop: "0.5",
+	paddingBottom: "1.5",
+	fontFamily: "[inherit]",
+	fontSize: "xs",
+	lineHeight: "snug",
+	fontWeight: "medium",
+	color: "text.dimmed",
+	background: "none",
+	border: "none",
+	borderRadius: "sm",
+	cursor: "pointer",
+	"& + &": {
+		ml: "-1",
+		pl: "0"
+	},
+	"&[data-hovered=\"true\"]": {
+		color: "text.bright",
+		backgroundColor: "surface.sunken"
+	}
+} });
+const fqnCopyStatus = css({
+	display: "inline-flex",
+	alignItems: "center",
+	alignSelf: "center",
+	gap: "1",
+	ml: "1",
+	fontSize: "xxs",
+	color: "text.dimmed",
+	opacity: "0",
+	transition: "fast",
+	pointerEvents: "none",
+	"&[data-copied=\"true\"]": {
+		opacity: "1",
+		color: "[var(--mantine-color-teal-text)]"
+	}
+});
+/**
+* Segments of an FQN, each with the path from the root to it.
+* `cloud.backend.api` → `cloud` (cloud), `backend` (cloud.backend), `api` (cloud.backend.api)
+*/
+function fqnPathSegments(fqn) {
+	return [...ancestorsFqn(fqn).toReversed(), fqn].map((path) => ({
+		name: nameFromFqn(path),
+		path
+	}));
+}
+function ElementFqn({ fqn }) {
+	const [hovered, setHovered] = useState(null);
+	const clipboard = useClipboard({ timeout: 1500 });
+	const isHighlighted = (path) => !!hovered && (path === hovered || isAncestor(path, hovered));
+	const segmentHandlers = (path) => ({
+		onMouseEnter: () => setHovered(path),
+		onMouseLeave: () => setHovered(null),
+		onClick: (e) => {
+			e.stopPropagation();
+			clipboard.copy(path);
+		},
+		onPointerDown: stopEventPropagation,
+		onDoubleClick: stopEventPropagation
+	});
+	const segments = fqnPathSegments(fqn);
+	return /* @__PURE__ */ jsxs(HStack, {
+		className: "group",
+		css: {
+			gap: "0",
+			alignItems: "baseline"
+		},
+		children: [
+			/* @__PURE__ */ jsx(SmallLabel, {
+				color: "text.non-essential",
+				children: "FQN"
+			}),
+			segments.map(({ name, path }, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(FqnPart, {
+				"aria-hidden": true,
+				...segmentHandlers(segments[index - 1].path),
+				"data-hovered": isHighlighted(segments[index - 1].path),
+				children: "."
+			}), /* @__PURE__ */ jsx(FqnSegment, {
+				tabIndex: -1,
+				"data-hovered": isHighlighted(path),
+				onFocus: () => setHovered(path),
+				onBlur: () => setHovered(null),
+				...segmentHandlers(path),
+				children: name
+			})] }, path)),
+			/* @__PURE__ */ jsxs("span", {
+				className: fqnCopyStatus,
+				"data-copied": clipboard.copied,
+				children: [/* @__PURE__ */ jsx(IconCheck, {
+					size: 12,
+					stroke: 2.5
+				}), "Copied"]
+			})
+		]
+	});
+}
+function stopEventPropagation(e) {
+	e.stopPropagation();
+}
+function ElementDescription({ element }) {
+	return /* @__PURE__ */ jsxs(ScrollArea, {
+		className: propertiesMain,
+		scrollbars: "y",
+		type: "auto",
+		offsetScrollbars: true,
+		children: [element.hasSummary && /* @__PURE__ */ jsx(ElementSummary, { element }), /* @__PURE__ */ jsx(styled.div, {
+			css: {
+				paddingX: "1",
+				paddingTop: "2"
+			},
+			children: /* @__PURE__ */ jsx(MarkdownWithRefs, {
+				fontSize: "lg",
+				value: element.description,
+				emptyText: "No description"
+			})
+		})]
+	});
+}
+function ElementSummary({ element }) {
+	const [opened, { toggle }] = useDisclosure();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(UnstyledButton, {
+		className: hstack({
+			gap: "1",
+			fontSize: "xs",
+			layerStyle: opened ? "likec4.panel.action.filled" : "likec4.panel.action",
+			paddingLeft: "1"
+		}),
+		"aria-expanded": opened,
+		onClick: toggle,
+		children: [/* @__PURE__ */ jsx(IconCaretRightFilled, {
+			size: 12,
+			style: {
+				width: 12,
+				opacity: .5,
+				transform: opened ? "rotate(90deg)" : "none"
+			}
+		}), /* @__PURE__ */ jsx("div", { children: "Summary" })]
+	}), /* @__PURE__ */ jsx(Collapse, {
+		expanded: opened,
+		keepMounted: false,
+		children: /* @__PURE__ */ jsx(styled.div, {
+			css: {
+				paddingY: "2",
+				paddingLeft: "4",
+				marginY: "2",
+				position: "relative",
+				_before: {
+					content: "\"\"",
+					position: "absolute",
+					left: "1",
+					top: "0",
+					width: "[2px]",
+					height: "100%",
+					backgroundColor: "border.focus"
+				}
+			},
+			children: /* @__PURE__ */ jsx(MarkdownWithRefs, { value: element.summary })
+		})
+	})] });
+}
+
+export { ElementDetailsCard, fqnPathSegments };