@likec4/diagram 1.60.0 → 1.61.0

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

@@ -1,232 +1,125 @@
 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";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge, UnstyledButton } from "@mantine/core";
 
-//#region src/overlays/element-details/MetadataValue.tsx
+// src/overlays/element-details/MetadataValue.tsx
 function MetadataProvider({ children }) {
-	return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(Fragment, { 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
-		})
-	});
+/**
+* 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];
 }
-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: "•"
+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))
 			})]
-		}, index))
+		}, key))
 	});
 }
-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 };
+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

@@ -1,6 +1,6 @@
 import { css, cx } from "@likec4/styles/css";
 
-//#region src/overlays/element-details/TabPanelDeployments.css.ts
+// src/overlays/element-details/TabPanelDeployments.css.ts
 const treeNode = css({ [`&[data-level='1']`]: { marginBottom: "sm" } });
 const treeNodeLabel = css({
 	cursor: "default",
@@ -33,5 +33,4 @@ const instanceLabel = cx(label, css({
 	}
 }));
 
-//#endregion
 export { instanceLabel, nodeLabel, treeNode, treeNodeLabel };

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

@@ -1,16 +1,16 @@
 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 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";
 
-//#region src/overlays/element-details/TabPanelDeployments.tsx
+// src/overlays/element-details/TabPanelDeployments.tsx
 const DeploymentNodeRenderer = ({ node }) => /* @__PURE__ */ jsxs(Group, {
 	className: nodeLabel,
 	gap: 6,
@@ -188,5 +188,4 @@ const TabPanelDeployments = memo(({ elementFqn }) => {
 	});
 });
 
-//#endregion
 export { TabPanelDeployments };

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

@@ -1,6 +1,6 @@
 import { css } from "@likec4/styles/css";
 
-//#region src/overlays/element-details/TabPanelRelationships.css.ts
+// src/overlays/element-details/TabPanelRelationships.css.ts
 const fqn = css({
 	display: "inline-block",
 	fontSize: "sm",
@@ -65,5 +65,4 @@ const edgeNum = css({
 	}
 });
 
-//#endregion
 export { fqn, relationshipStat, xyflow };

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

@@ -1,11 +1,11 @@
 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 IconArrowRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/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.1/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.1/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 { useElementDetailsActorRef } from "./actorContext.mjs";
+import { fqn, relationshipStat, xyflow } from "./TabPanelRelationships.css.mjs";
 import { useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { unique } from "remeda";
@@ -13,7 +13,7 @@ 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
+// src/overlays/element-details/TabPanelRelationships.tsx
 const Tooltip$1 = Tooltip.withProps({
 	color: "dark",
 	fz: "xs",
@@ -159,5 +159,4 @@ function RelationshipsStat({ title, total, included }) {
 	});
 }
 
-//#endregion
 export { TabPanelRelationships };

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

@@ -1,6 +1,6 @@
 import { css } from "@likec4/styles/css";
 
-//#region src/overlays/element-details/TabPanelStructure.css.ts
+// src/overlays/element-details/TabPanelStructure.css.ts
 const treeNodeLabel = css({
 	marginTop: "sm",
 	marginBottom: "sm"
@@ -26,5 +26,4 @@ const elementLabel = css({
 	}
 });
 
-//#endregion
 export { elementLabel, treeNodeLabel };

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

@@ -1,11 +1,11 @@
 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 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 { elementLabel, treeNodeLabel } from "./TabPanelStructure.css.mjs";
 import { useEffect, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Alert, Anchor, Box, Pill, Text, Tree, useTree } from "@mantine/core";
 
-//#region src/overlays/element-details/TabPanelStructure.tsx
+// src/overlays/element-details/TabPanelStructure.tsx
 const ElementLabel = ({ element }) => /* @__PURE__ */ jsx(Box, {
 	className: elementLabel,
 	children: /* @__PURE__ */ jsx(Text, {
@@ -34,7 +34,7 @@ function TabPanelStructure({ element }) {
 			value: element.id,
 			element,
 			type: "current",
-			children: [...element.children()].map((child) => ({
+			children: ("children" in element ? [...element.children()] : []).map((child) => ({
 				label: /* @__PURE__ */ jsx(ElementLabel, {
 					type: "descedant",
 					element: child
@@ -92,5 +92,4 @@ function TabPanelStructure({ element }) {
 	})] });
 }
 
-//#endregion
 export { ElementLabel, TabPanelStructure };