@likec4/diagram 1.60.0 → 1.61.0

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

@@ -1,39 +1,40 @@
 import { __name } from "../../_virtual/_rolldown/runtime.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 IconFileSymlink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.mjs";
-import IconStack2 from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.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 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 { stopPropagation } from "../../utils/xyflow.mjs";
-import { DiagramFeatures, IfEnabled } from "../../context/DiagramFeatures.mjs";
-import { useDiagram } from "../../hooks/safeContext.mjs";
 import { useCurrentViewModel } from "../../hooks/useCurrentViewModel.mjs";
-import { Markdown } from "../../base-primitives/Markdown.mjs";
-import { ElementTag } from "../../base-primitives/element/ElementTags.mjs";
-import { Link } from "../../components/Link.mjs";
-import { backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, propertiesGrid, propertyLabel, resizeHandle, tabsList, tabsPanel, tabsRoot, tabsTab, title, viewButton, viewButtonTitle } from "./ElementDetailsCard.css.mjs";
-import { MetadataProvider, MetadataValue } from "./MetadataValue.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 { useCallback, useRef, useState } from "react";
+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, isNullish, map, only, partition, pipe } from "remeda";
-import { ActionIcon, ActionIconGroup, Badge, Box, CloseButton, Divider, Flex, Group, RemoveScroll, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, ThemeIcon, Tooltip, UnstyledButton } from "@mantine/core";
+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 { useSessionStorage, useViewportSize } from "@mantine/hooks";
-import { HStack } from "@likec4/styles/jsx";
+import { useClipboard, useDisclosure, useLocalStorage, useSessionStorage, useViewportSize } from "@mantine/hooks";
+import { HStack, Txt, styled } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
 
-//#region src/overlays/element-details/ElementDetailsCard.tsx
-const Divider$1 = Divider.withProps({
-	mb: 8,
-	labelPosition: "left",
-	variant: "dashed"
-});
+// src/overlays/element-details/ElementDetailsCard.tsx
 const Tooltip$1 = Tooltip.withProps({
 	color: "dark",
 	fz: "xs",
@@ -44,20 +45,26 @@ const Tooltip$1 = Tooltip.withProps({
 	offset: 4,
 	withinPortal: false
 });
-const SmallLabel = Text.withProps({
-	component: "div",
-	fz: 11,
-	fw: 500,
-	c: "dimmed",
-	lh: 1
-});
-const PropertyLabel = Text.withProps({
-	component: "div",
-	fz: "xs",
-	c: "dimmed",
-	className: propertyLabel
-});
-const MIN_PADDING = 24;
+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",
@@ -65,27 +72,63 @@ const TABS = [
 	"Structure",
 	"Deployments"
 ];
-function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
-	const [opened, setOpened] = useState(false);
+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: `likec4:element-details:active-tab`,
-		defaultValue: "Properties"
+		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) : viewModel.findNodeWithElement(fqn);
-	const elementModel = viewModel.$model.element(fqn);
-	const [viewsOf, otherViews] = pipe([...elementModel.views()], map((v) => v.$view), partition((v) => v._type === "element" && v.viewOf === fqn));
-	let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null;
-	if (defaultView?.id === viewId) defaultView = null;
+	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 _width = Math.min(700, windowWidth - 48);
-	const _height = Math.min(650, windowHeight - 48);
+	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)
@@ -103,23 +146,89 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 		max: windowHeight - _height - MIN_PADDING
 	}));
 	const originX = clamp((fromPosition.x - left) / _width, {
-		min: .1,
-		max: .9
+		min: .01,
+		max: .99
 	});
 	const originY = clamp((fromPosition.y - top) / _height, {
-		min: .1,
-		max: .9
+		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 handleDrag = useCallback((_, info) => {
-		width.set(Math.max(width.get() + info.delta.x, 320));
-		height.set(Math.max(height.get() + info.delta.y, 300));
-	}, [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) => {
@@ -129,7 +238,7 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 	const notation = nodeModel?.$node.notation ?? null;
 	const elementIcon$1 = IconRenderer({
 		element: {
-			id: fqn,
+			id: elementModel.id,
 			title: elementModel.title,
 			icon: nodeModel?.icon ?? elementModel.icon
 		},
@@ -144,24 +253,14 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 	*/
 	useTimeoutEffect(() => {
 		setOpened(true);
-	}, 220);
+	}, !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,
-		initial: {
-			[backdropBlur]: "0px",
-			[backdropOpacity]: "5%"
-		},
-		animate: {
-			[backdropBlur]: "3px",
-			[backdropOpacity]: "60%"
-		},
-		exit: {
-			[backdropBlur]: "0px",
-			[backdropOpacity]: "0%",
-			transition: { duration: .1 }
-		},
+		...motionProps,
 		onClick: (e) => {
 			e.stopPropagation();
 			if (e.target?.nodeName?.toUpperCase() === "DIALOG") ref.current?.close();
@@ -180,6 +279,7 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 				dragElastic: 0,
 				dragMomentum: false,
 				dragListener: false,
+				onDragEnd: keepInViewport,
 				"data-likec4-color": nodeModel?.color ?? elementModel.color,
 				className: card,
 				initial: {
@@ -194,7 +294,9 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 				},
 				animate: {
 					opacity: 1,
-					scale: 1
+					scale: 1,
+					originX,
+					originY
 				},
 				exit: {
 					opacity: 0,
@@ -204,17 +306,26 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 				},
 				style: {
 					width,
-					height
+					height,
+					x,
+					y
 				},
 				children: [
-					/* @__PURE__ */ jsxs("div", {
+					/* @__PURE__ */ jsx("div", {
 						className: cardHeader,
-						onPointerDown: (e) => controls.start(e),
-						children: [/* @__PURE__ */ jsxs(HStack, {
+						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",
-							mb: "sm",
 							flexWrap: "nowrap",
 							children: [/* @__PURE__ */ jsxs(HStack, {
 								alignItems: "start",
@@ -230,58 +341,32 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 										minWidth: 0,
 										overflow: "hidden"
 									},
-									children: [/* @__PURE__ */ jsx(Tooltip$1, {
-										label: elementModel.title,
-										openDelay: 600,
-										position: "bottom-start",
-										children: /* @__PURE__ */ jsx(Text, {
-											component: "div",
-											className: title,
-											children: elementModel.title
+									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)
 										})
-									}), notation && /* @__PURE__ */ jsx(Text, {
-										component: "div",
-										c: "dimmed",
-										fz: "sm",
-										fw: 500,
-										lh: 1.3,
-										lineClamp: 1,
-										children: notation
-									})]
+									]
 								})]
-							}), /* @__PURE__ */ jsx(CloseButton, {
-								size: "lg",
-								onClick: triggerClose
-							})]
-						}), /* @__PURE__ */ jsxs(HStack, {
-							alignItems: "baseline",
-							gap: "sm",
-							flexWrap: "nowrap",
-							children: [
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SmallLabel, { children: "kind" }), /* @__PURE__ */ jsx(Badge, {
-									radius: "sm",
-									size: "sm",
-									fw: 600,
-									color: "gray",
-									style: { cursor: "pointer" },
-									onClick: (e) => {
-										e.stopPropagation();
-										diagram.openSearch(`kind:${elementModel.kind}`);
-									},
-									children: elementModel.kind
-								})] }),
-								/* @__PURE__ */ jsxs("div", {
-									style: {
-										flex: 1,
-										minWidth: 0,
-										overflow: "hidden"
-									},
-									children: [/* @__PURE__ */ jsx(SmallLabel, { children: "tags" }), /* @__PURE__ */ jsx(ElementTags, {
-										tags: elementModel.tags,
-										onClick: (tag) => diagram.openSearch(`#${tag}`)
-									})]
-								}),
-								/* @__PURE__ */ jsxs(ActionIconGroup, {
+							}), /* @__PURE__ */ jsxs(HStack, {
+								gap: "xs",
+								flexWrap: "nowrap",
+								style: { flex: "none" },
+								children: [/* @__PURE__ */ jsxs(ActionIconGroup, {
 									style: { alignSelf: "flex-start" },
 									children: [
 										defaultLink && /* @__PURE__ */ jsx(ActionIcon, {
@@ -306,7 +391,7 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 													radius: "sm",
 													onClick: (e) => {
 														e.stopPropagation();
-														diagram.openSource({ element: elementModel.id });
+														diagram.openSource(subject.type === "deployment" ? { deployment: subject.deployment } : { element: subject.element });
 													},
 													children: /* @__PURE__ */ jsx(IconFileSymlink, {
 														stroke: 1.8,
@@ -315,7 +400,7 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 												})
 											})
 										}),
-										defaultView && /* @__PURE__ */ jsx(Tooltip$1, {
+										defaultViewId && /* @__PURE__ */ jsx(Tooltip$1, {
 											label: "Open default view",
 											children: /* @__PURE__ */ jsx(ActionIcon, {
 												size: "lg",
@@ -323,61 +408,81 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 												radius: "sm",
 												onClick: (e) => {
 													e.stopPropagation();
-													diagram.navigateTo(defaultView.id, fromNode ?? void 0);
+													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: {
-							root: tabsRoot,
-							list: tabsList,
-							tab: tabsTab,
-							panel: tabsPanel
-						},
+						classNames: tabs(),
 						children: [
-							/* @__PURE__ */ jsx(TabsList, { children: TABS.map((tab) => /* @__PURE__ */ jsx(TabsTab, {
+							/* @__PURE__ */ jsx(TabsList, { children: tabs$1.map((tab) => /* @__PURE__ */ jsx(TabsTab, {
 								value: tab,
 								children: tab
 							}, tab)) }),
 							/* @__PURE__ */ jsx(TabsPanel, {
 								value: "Properties",
-								children: /* @__PURE__ */ jsx(ScrollArea, {
-									scrollbars: "y",
-									type: "scroll",
-									offsetScrollbars: true,
-									children: /* @__PURE__ */ jsxs(Box, {
-										className: propertiesGrid,
-										pt: "xs",
-										children: [
-											elementModel.hasSummary && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: "summary" }), /* @__PURE__ */ jsx(Markdown, { value: elementModel.summary })] }),
-											/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: "description" }), /* @__PURE__ */ jsx(Markdown, {
-												value: elementModel.description,
-												emptyText: "no description"
-											})] }),
-											elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, {
-												title: "technology",
-												children: elementModel.technology
-											}),
-											elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: "links" }), /* @__PURE__ */ jsx(HStack, {
-												gap: "xs",
-												flexWrap: "wrap",
-												children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i))
-											})] }),
-											elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetadata, { value: elementModel.$element.metadata })
-										]
-									})
+								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
 								})
 							}),
-							/* @__PURE__ */ jsx(TabsPanel, {
+							logicalElement && /* @__PURE__ */ jsx(TabsPanel, {
 								value: "Relationships",
 								children: /* @__PURE__ */ jsx(DiagramFeatures, {
 									overrides: {
@@ -385,32 +490,16 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 										enableNavigateTo: false
 									},
 									children: opened && activeTab === "Relationships" && /* @__PURE__ */ jsx(TabPanelRelationships, {
-										element: elementModel,
+										element: logicalElement,
 										node: nodeModel ?? null
 									})
 								})
 							}),
 							/* @__PURE__ */ jsx(TabsPanel, {
 								value: "Views",
-								children: /* @__PURE__ */ jsx(ScrollArea, {
-									scrollbars: "y",
-									type: "auto",
-									children: /* @__PURE__ */ jsxs(Stack, {
-										gap: "lg",
-										children: [viewsOf.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Divider$1, { label: "views of the element (scoped)" }), /* @__PURE__ */ jsx(Stack, {
-											gap: "sm",
-											children: viewsOf.map((view) => /* @__PURE__ */ jsx(ViewButton, {
-												view,
-												onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
-											}, view.id))
-										})] }), otherViews.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Divider$1, { label: "views including this element" }), /* @__PURE__ */ jsx(Stack, {
-											gap: "sm",
-											children: otherViews.map((view) => /* @__PURE__ */ jsx(ViewButton, {
-												view,
-												onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
-											}, view.id))
-										})] })]
-									})
+								children: /* @__PURE__ */ jsx(TabPanelViews, {
+									elementModel,
+									onNavigateTo: (viewId) => diagram.navigateTo(viewId, fromNode ?? void 0)
 								})
 							}),
 							/* @__PURE__ */ jsx(TabsPanel, {
@@ -421,22 +510,55 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 									children: /* @__PURE__ */ jsx(TabPanelStructure, { element: elementModel })
 								})
 							}),
-							/* @__PURE__ */ jsx(TabsPanel, {
+							logicalElement && /* @__PURE__ */ jsx(TabsPanel, {
 								value: "Deployments",
 								children: /* @__PURE__ */ jsx(ScrollArea, {
 									scrollbars: "y",
 									type: "auto",
-									children: /* @__PURE__ */ jsx(TabPanelDeployments, { elementFqn: elementModel.id })
+									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: handleDrag,
+						onDrag: handleResize,
+						onDragEnd: handleResizeEnd,
+						onDoubleClick: resetCard,
 						dragConstraints: {
 							top: 0,
 							left: 0,
@@ -449,86 +571,211 @@ function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
 		})
 	});
 }
-const ViewButton = ({ view, onNavigateTo }) => {
-	return /* @__PURE__ */ jsx(UnstyledButton, {
-		className: viewButton,
-		onClick: (e) => onNavigateTo(view.id, e),
-		children: /* @__PURE__ */ jsxs(Group, {
-			gap: 6,
-			align: "start",
-			wrap: "nowrap",
-			children: [/* @__PURE__ */ jsx(ThemeIcon, {
-				size: "sm",
-				variant: "transparent",
-				children: view._type === "deployment" ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 })
-			}), /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
-				component: "div",
-				className: viewButtonTitle,
-				lineClamp: 1,
-				children: view.title || "untitled"
-			}) })]
-		})
-	});
-};
-function ElementProperty({ title, emptyValue = `undefined`, children, style, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: title }), /* @__PURE__ */ jsx(Text, {
-		component: "div",
-		...isNullish(children) && { c: "dimmed" },
-		fz: "md",
-		style: {
-			whiteSpace: "preserve-breaks",
-			userSelect: "all",
-			...style
-		},
-		...props,
-		children: children || emptyValue
+function Fact({ label, children }) {
+	return /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", {
+		className: factLabel,
+		children: label
+	}), /* @__PURE__ */ jsx("div", {
+		className: factValues,
+		children
 	})] });
 }
-function ElementMetadata({ value: metadata }) {
-	const metadataEntries = entries(metadata).sort(([a], [b]) => a.localeCompare(b));
-	return /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, {
-		style: {
-			justifySelf: "end",
-			textAlign: "right"
-		},
-		children: "metadata"
-	}), /* @__PURE__ */ jsx(Box, {
-		className: css({
-			display: "grid",
-			gridTemplateColumns: "min-content 1fr",
-			gridAutoRows: "[min-content]",
-			gap: `[12px 16px]`,
-			alignItems: "baseline",
-			justifyItems: "stretch"
-		}),
-		children: metadataEntries.map(([key, value]) => /* @__PURE__ */ jsx(MetadataValue, {
-			label: key,
-			value
-		}, key))
-	})] }) });
-}
 function ElementTags({ tags, onClick }) {
-	return /* @__PURE__ */ jsxs(Flex, {
+	return /* @__PURE__ */ jsx(Flex, {
 		gap: 4,
 		flex: 1,
-		mt: 6,
 		wrap: "wrap",
-		children: [tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, {
+		align: "center",
+		children: tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, {
 			tag,
 			cursor: "pointer",
 			onClick: (e) => {
 				e.stopPropagation();
 				onClick(tag);
 			}
-		}, tag)), tags.length === 0 && /* @__PURE__ */ jsx(Badge, {
-			radius: "sm",
-			size: "sm",
-			fw: 600,
-			color: "gray",
-			children: "—"
+		}, 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 })
+		})
+	})] });
+}
 
-//#endregion
-export { ElementDetailsCard };
+export { ElementDetailsCard, fqnPathSegments };