@likec4/diagram 1.59.4 → 1.61.0

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

@@ -0,0 +1,125 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { css } from "@likec4/styles/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge, UnstyledButton } from "@mantine/core";
+
+// src/overlays/element-details/MetadataValue.tsx
+function MetadataProvider({ children }) {
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+/**
+* Splits a metadata value into separate values:
+* arrays as is, multiline strings by line.
+*/
+function metadataValues(value) {
+	if (typeof value !== "string") return [...value];
+	return value.includes("\n") ? value.split("\n").map((s) => s.trim()).filter(Boolean) : [value];
+}
+const list = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "2.5",
+	width: "100%"
+});
+const row = css({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "baseline",
+	columnGap: "2",
+	rowGap: "1"
+});
+const keyButton = css({
+	maxWidth: "[160px]",
+	borderRadius: "sm",
+	fontSize: "xs",
+	fontWeight: "medium",
+	color: "text/55",
+	whiteSpace: "nowrap",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	transition: "fast",
+	_hover: {
+		color: "text.link",
+		backgroundColor: "surface.hover"
+	}
+});
+const values = css({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: "1",
+	minWidth: "0"
+});
+const chip = css({
+	minHeight: "[24px]",
+	maxWidth: "100%",
+	backgroundColor: {
+		base: "transparent",
+		_hover: {
+			base: "mantine.gray[1]",
+			_dark: "mantine.dark[5]"
+		}
+	}
+});
+const chipLabel = css({
+	overflow: "hidden",
+	textOverflow: "ellipsis"
+});
+const chipButton = css({
+	fontSize: "[inherit]",
+	fontWeight: "[inherit]",
+	lineHeight: "[inherit]",
+	maxWidth: "100%",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	color: "[var(--badge-color)]",
+	opacity: {
+		base: "0.9",
+		_hover: "1"
+	},
+	transition: "fast"
+});
+/**
+* Metadata as compact rows: key followed by its values.
+* Keys and values are clickable, to find other elements with the same metadata.
+*/
+function MetadataList({ entries, onSearch }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: list,
+		children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+			className: row,
+			children: [/* @__PURE__ */ jsx(UnstyledButton, {
+				className: keyButton,
+				title: `Find elements with "${key}"`,
+				onClick: (e) => {
+					e.stopPropagation();
+					onSearch(key);
+				},
+				children: key
+			}), /* @__PURE__ */ jsx("div", {
+				className: values,
+				children: metadataValues(value).map((v, i) => /* @__PURE__ */ jsx(Badge, {
+					variant: "default",
+					radius: "sm",
+					size: "sm",
+					tt: "none",
+					classNames: {
+						root: chip,
+						label: chipLabel
+					},
+					children: /* @__PURE__ */ jsx(UnstyledButton, {
+						className: chipButton,
+						title: `Find elements with ${key}: ${v}`,
+						onClick: (e) => {
+							e.stopPropagation();
+							onSearch(key, v);
+						},
+						children: v
+					})
+				}, i))
+			})]
+		}, key))
+	});
+}
+
+export { MetadataList, MetadataProvider, metadataValues };

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

@@ -0,0 +1,162 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconChevronLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/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.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import { css } from "@likec4/styles/css";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip, UnstyledButton } from "@mantine/core";
+import { Txt } from "@likec4/styles/jsx";
+import { Group as Group$1, Panel, Separator, useDefaultLayout, usePanelRef } from "react-resizable-panels";
+
+// src/overlays/element-details/PropertiesSplit.tsx
+const group = css({
+	height: "100%",
+	minHeight: "0"
+});
+const pane = css({
+	height: "100%",
+	minWidth: "0"
+});
+const separator = css({
+	position: "relative",
+	width: "[16px]",
+	outline: "none",
+	_before: {
+		content: "\"\"",
+		position: "absolute",
+		top: "0",
+		bottom: "0",
+		left: "[7.5px]",
+		width: "[1px]",
+		backgroundColor: "transparent",
+		transition: "fast"
+	},
+	"&:is([data-separator=\"hover\"], :focus-visible)": { _before: { backgroundColor: "border.default" } },
+	"&[data-separator=\"active\"]": { _before: {
+		left: "[7px]",
+		width: "[2px]",
+		backgroundColor: "primary.border"
+	} }
+});
+const toggle = css({
+	position: "absolute",
+	top: "1",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	borderRadius: "sm",
+	color: "text.dimmed",
+	cursor: "pointer",
+	transition: "fast",
+	height: "icon.xl",
+	":where([data-separator=\"active\"]) &": {
+		transitionDelay: "fast",
+		visibility: "hidden"
+	},
+	_expanded: {
+		left: "[50%]",
+		width: "icon.xl",
+		transform: "translateX(-50%)"
+	},
+	"&:is([aria-expanded=\"false\"])": {
+		right: "0",
+		gap: "1",
+		px: "1"
+	},
+	_hover: {
+		color: "text",
+		backgroundColor: "surface.hover"
+	}
+});
+const layoutStorage = typeof localStorage !== "undefined" ? localStorage : {
+	getItem: () => null,
+	setItem: () => {}
+};
+/**
+* Two panes: main content and a resizable, collapsible sidebar on the right.
+* The layout (including collapsed state) is remembered across sessions.
+*/
+function PropertiesSplit({ main, sidebar }) {
+	if (sidebar === null) return /* @__PURE__ */ jsx("div", {
+		className: pane,
+		children: main
+	});
+	return /* @__PURE__ */ jsx(Split, {
+		main,
+		sidebar
+	});
+}
+function Split({ main, sidebar }) {
+	const layout = useDefaultLayout({
+		id: "likec4-element-details-properties",
+		storage: layoutStorage
+	});
+	const sidebarRef = usePanelRef();
+	const [collapsed, setCollapsed] = useState(false);
+	const toggleSidebar = () => {
+		const panel = sidebarRef.current;
+		if (!panel) return;
+		if (panel.isCollapsed()) {
+			panel.expand();
+			setCollapsed(false);
+		} else {
+			panel.collapse();
+			setCollapsed(true);
+		}
+	};
+	const label = collapsed ? "Show Properties" : "Hide Properties";
+	return /* @__PURE__ */ jsxs(Group$1, {
+		className: group,
+		orientation: "horizontal",
+		defaultLayout: layout.defaultLayout,
+		onLayoutChanged: layout.onLayoutChanged,
+		children: [
+			/* @__PURE__ */ jsx(Panel, {
+				id: "main",
+				className: pane,
+				minSize: 280,
+				children: main
+			}),
+			/* @__PURE__ */ jsx(Separator, {
+				className: separator,
+				children: /* @__PURE__ */ jsx(Tooltip, {
+					label,
+					position: "left",
+					disabled: collapsed,
+					withinPortal: false,
+					children: /* @__PURE__ */ jsx(UnstyledButton, {
+						className: toggle,
+						"aria-label": label,
+						"aria-expanded": !collapsed,
+						onPointerDown: (e) => e.stopPropagation(),
+						onClick: toggleSidebar,
+						children: collapsed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconChevronLeft, {
+							size: 14,
+							stroke: 2
+						}), /* @__PURE__ */ jsx(Txt, {
+							size: "xs",
+							cursor: "inherit",
+							children: "Properties"
+						})] }) : /* @__PURE__ */ jsx(IconChevronRight, {
+							size: 14,
+							stroke: 2
+						})
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Panel, {
+				id: "sidebar",
+				className: pane,
+				panelRef: sidebarRef,
+				defaultSize: 260,
+				minSize: 120,
+				collapsible: true,
+				collapsedSize: 0,
+				onResize: (size) => setCollapsed(size.inPixels === 0),
+				children: sidebar
+			})
+		]
+	});
+}
+
+export { PropertiesSplit };

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

@@ -0,0 +1,36 @@
+import { css, cx } from "@likec4/styles/css";
+
+// 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]"
+	}
+}));
+
+export { instanceLabel, nodeLabel, treeNode, treeNodeLabel };

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

@@ -0,0 +1,191 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/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.1/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.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { stopPropagation } from "../../utils/xyflow.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";
+
+// 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
+		})
+	});
+});
+
+export { TabPanelDeployments };

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

@@ -0,0 +1,68 @@
+import { css } from "@likec4/styles/css";
+
+// 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`
+	}
+});
+
+export { fqn, relationshipStat, xyflow };