@likec4/diagram 1.59.3 → 1.60.0

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

@@ -1,218 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { css } from "@likec4/styles/css";
-import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
-import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Flex, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
-//#region src/overlays/element-details/MetadataValue.tsx
-function MetadataProvider({ children }) {
-	return /* @__PURE__ */ jsx(Fragment$1, { children });
-}
-function TruncatedValue({ value, isExpanded }) {
-	const [isTruncated, setIsTruncated] = useState(false);
-	const textRef = useRef(null);
-	useEffect(() => {
-		if (textRef.current) setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth);
-	}, [value]);
-	return /* @__PURE__ */ jsx(Tooltip, {
-		label: isTruncated && !isExpanded ? value : null,
-		multiline: true,
-		w: 300,
-		withinPortal: true,
-		children: /* @__PURE__ */ jsx(Text, {
-			ref: textRef,
-			component: "div",
-			className: css({
-				fontSize: "sm",
-				padding: "xs",
-				userSelect: "all",
-				color: "text",
-				lineHeight: 1.4,
-				whiteSpace: isExpanded ? "pre-wrap" : "nowrap",
-				overflow: isExpanded ? "visible" : "hidden",
-				textOverflow: isExpanded ? "unset" : "ellipsis",
-				wordBreak: isExpanded ? "break-word" : "normal",
-				minWidth: 0,
-				width: "100%"
-			}),
-			children: value
-		})
-	});
-}
-function MultiValueDisplay({ values, isExpanded }) {
-	if (isExpanded) return /* @__PURE__ */ jsx(Stack, {
-		gap: "xs",
-		children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, {
-			align: "center",
-			gap: "xs",
-			children: [/* @__PURE__ */ jsx(Text, {
-				className: css({
-					fontSize: "xs",
-					color: "mantine.gray[5]",
-					fontWeight: "medium",
-					flexShrink: 0,
-					_dark: { color: "mantine.dark[3]" }
-				}),
-				children: "•"
-			}), /* @__PURE__ */ jsx(Box, {
-				className: css({
-					minHeight: "32px",
-					display: "flex",
-					alignItems: "center",
-					flex: 1
-				}),
-				children: /* @__PURE__ */ jsx(TruncatedValue, {
-					value,
-					isExpanded: true
-				})
-			})]
-		}, index))
-	});
-	return /* @__PURE__ */ jsx(Box, {
-		className: css({
-			minHeight: "32px",
-			display: "flex",
-			alignItems: "center",
-			padding: "xs",
-			gap: "xs",
-			flexWrap: "wrap",
-			minWidth: 0,
-			overflow: "hidden"
-		}),
-		children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, {
-			align: "center",
-			gap: "xs",
-			style: { minWidth: 0 },
-			children: [/* @__PURE__ */ jsx(Text, {
-				className: css({
-					fontSize: "sm",
-					padding: "[4px 8px]",
-					backgroundColor: "white",
-					color: "text",
-					borderRadius: "sm",
-					border: "1px solid",
-					borderColor: "mantine.gray[3]",
-					whiteSpace: "nowrap",
-					overflow: "hidden",
-					textOverflow: "ellipsis",
-					maxWidth: "min(200px, 100%)",
-					minWidth: "60px",
-					flex: "0 1 auto",
-					userSelect: "all",
-					_dark: {
-						backgroundColor: "mantine.dark[9]",
-						borderColor: "mantine.dark[4]"
-					}
-				}),
-				title: value,
-				children: value
-			}), index < values.length - 1 && /* @__PURE__ */ jsx(Text, {
-				className: css({
-					fontSize: "xs",
-					color: "mantine.gray[5]",
-					fontWeight: "medium",
-					flexShrink: 0,
-					_dark: { color: "mantine.dark[3]" }
-				}),
-				children: "•"
-			})]
-		}, index))
-	});
-}
-function MetadataValue({ label, value }) {
-	const elements = Array.isArray(value) ? value : typeof value === "string" && value.includes("\n") ? value.split("\n").map((s) => s.trim()).filter(Boolean) : [value];
-	const hasMultipleElements = elements.length > 1;
-	const [isExpanded, setIsExpanded] = useState(false);
-	const handleToggle = () => {
-		setIsExpanded(!isExpanded);
-	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [hasMultipleElements ? /* @__PURE__ */ jsx(UnstyledButton, {
-		onClick: handleToggle,
-		className: css({
-			fontSize: "xs",
-			color: "text.dimmed",
-			justifySelf: "end",
-			textAlign: "right",
-			userSelect: "none",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "flex-end",
-			gap: "xs",
-			padding: "[4px 8px]",
-			borderRadius: "sm",
-			whiteSpace: "nowrap",
-			transition: "all 150ms ease",
-			_hover: {
-				backgroundColor: "mantine.gray[1]",
-				color: "mantine.primary[6]",
-				_dark: {
-					backgroundColor: "mantine.dark[7]",
-					color: "mantine.primary[4]"
-				}
-			}
-		}),
-		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"
-		}),
-		children: hasMultipleElements ? /* @__PURE__ */ jsx(MultiValueDisplay, {
-			values: elements,
-			isExpanded
-		}) : /* @__PURE__ */ jsx(Box, {
-			className: css({
-				minHeight: "32px",
-				display: "flex",
-				alignItems: "center"
-			}),
-			children: /* @__PURE__ */ jsx(TruncatedValue, {
-				value: elements[0] || "",
-				isExpanded
-			})
-		})
-	})] });
-}
-//#endregion
-export { MetadataProvider, MetadataValue };

package/dist/overlays/element-details/TabPanelDeployments.css.d.ts

@@ -1,4 +0,0 @@
-export declare const treeNode: string;
-export declare const treeNodeLabel: string;
-export declare const nodeLabel: string;
-export declare const instanceLabel: string;

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

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

package/dist/overlays/element-details/TabPanelDeployments.d.ts

@@ -1,7 +0,0 @@
-import { Fqn } from '@likec4/core/types';
-import { NamedExoticComponent } from 'react';
-type TabPanelDeploymentsProps = {
-    elementFqn: Fqn;
-};
-export declare const TabPanelDeployments: NamedExoticComponent<TabPanelDeploymentsProps>;
-export {};

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

@@ -1,188 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
-import { instanceLabel, nodeLabel, treeNode, treeNodeLabel } from "./TabPanelDeployments.css.js";
-import { IconInfoCircle, IconTarget, IconZoomScan } from "@tabler/icons-react";
-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
-var 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
-	})]
-});
-var zoomIcon = /* @__PURE__ */ jsx(ThemeIcon, {
-	size: "sm",
-	variant: "transparent",
-	color: "gray",
-	children: /* @__PURE__ */ jsx(IconZoomScan, {
-		stroke: 1.8,
-		opacity: .65
-	})
-});
-var 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)) })]
-				})]
-			})
-		]
-	});
-};
-var infoIcon = /* @__PURE__ */ jsx(IconInfoCircle, {});
-var TabPanelDeployments = memo(({ elementFqn }) => {
-	const element = useLikeC4Model().element(elementFqn);
-	const deployments = [...element.deployments()];
-	const tree = useTree({ multiple: false });
-	const data = useMemo(() => {
-		let roots = [];
-		let treeItems = /* @__PURE__ */ new Map();
-		for (const instance of element.deployments()) {
-			let instanceNode = {
-				label: /* @__PURE__ */ jsx(DeployedInstanceRenderer, { instance }),
-				value: instance.id,
-				type: "instance",
-				children: []
-			};
-			treeItems.set(instance.id, instanceNode);
-			let ancestor = instance.parent;
-			while (ancestor) {
-				let ancestorNode = treeItems.get(ancestor.id);
-				if (ancestorNode) {
-					ancestorNode.children.push(instanceNode);
-					break;
-				}
-				ancestorNode = {
-					label: /* @__PURE__ */ jsx(DeploymentNodeRenderer, { node: ancestor }),
-					value: ancestor.id,
-					type: "node",
-					children: [instanceNode]
-				};
-				treeItems.set(ancestor.id, ancestorNode);
-				instanceNode = ancestorNode;
-				ancestor = ancestor.parent;
-			}
-			if (!ancestor && !roots.includes(instanceNode)) roots.push(instanceNode);
-		}
-		return roots;
-	}, [element]);
-	useEffect(() => {
-		tree.expandAllNodes();
-	}, [data]);
-	if (deployments.length === 0) return /* @__PURE__ */ jsx(Alert, {
-		variant: "light",
-		color: "gray",
-		icon: infoIcon,
-		children: "This element does not have any deployments"
-	});
-	return /* @__PURE__ */ jsx(Tree, {
-		levelOffset: "sm",
-		allowRangeSelection: false,
-		classNames: {
-			node: treeNode,
-			label: treeNodeLabel
-		},
-		styles: { root: {
-			position: "relative",
-			width: "min-content",
-			minWidth: 300
-		} },
-		data,
-		tree,
-		renderNode: ({ node, selected, elementProps, hasChildren }) => /* @__PURE__ */ jsx(Box, {
-			...elementProps,
-			style: { ...!hasChildren && { marginBottom: rem(4) } },
-			children: hasChildren ? /* @__PURE__ */ jsx(Button, {
-				fullWidth: true,
-				color: "gray",
-				variant: selected ? "transparent" : "subtle",
-				size: "xs",
-				justify: "flex-start",
-				styles: { root: {
-					position: "unset",
-					paddingInlineStart: rem(16)
-				} },
-				children: node.label
-			}) : node.label
-		})
-	});
-});
-//#endregion
-export { TabPanelDeployments };

package/dist/overlays/element-details/TabPanelRelationships.css.d.ts

@@ -1,5 +0,0 @@
-export declare const fqn: string;
-export declare const relationshipStat: string;
-export declare const xyflow: string;
-export declare const panelScope: string;
-export declare const edgeNum: string;

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

@@ -1,71 +0,0 @@
-import { css } from "@likec4/styles/css";
-//#region src/overlays/element-details/TabPanelRelationships.css.ts
-var 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)"
-});
-var 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]" }
-	}
-});
-var xyflow = css({
-	flex: "1 1 100%",
-	position: "relative",
-	width: "100%",
-	height: "100%",
-	background: "body",
-	border: "default",
-	borderRadius: "sm",
-	_light: {
-		borderColor: "mantine.gray[3]",
-		background: "mantine.gray[1]"
-	}
-});
-css({
-	_before: {
-		content: "\"scope:\"",
-		position: "absolute",
-		top: "0",
-		left: "2",
-		fontSize: "xxs",
-		fontWeight: "medium",
-		lineHeight: "1",
-		color: "text.dimmed",
-		opacity: .85,
-		transform: "translateY(-100%) translateY(-2px)"
-	},
-	_light: { "& .mantine-SegmentedControl-root": { background: "mantine.gray[3]" } }
-});
-css({
-	display: "inline-block",
-	fontSize: "xl",
-	fontWeight: "bold",
-	padding: "[1px 5px]",
-	minWidth: "24px",
-	textAlign: "center",
-	borderRadius: "sm",
-	background: "mantine.dark[7]",
-	color: "default.color",
-	[`&[data-zero]`]: { color: "text.dimmed" },
-	[`&[data-missing]`]: {
-		color: "mantine.orange[4]",
-		background: `mantine.orange[8]/20`
-	}
-});
-//#endregion
-export { fqn, relationshipStat, xyflow };

package/dist/overlays/element-details/TabPanelRelationships.d.ts

@@ -1,7 +0,0 @@
-import { LikeC4Model } from '@likec4/core/model';
-type RelationshipsTabPanelProps = {
-    node: LikeC4Model.Node | null;
-    element: LikeC4Model.Element;
-};
-export declare function TabPanelRelationships({ node, element, }: RelationshipsTabPanelProps): import("react").JSX.Element;
-export {};