@likec4/diagram 1.55.1 → 1.56.0

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

@@ -1,258 +1,218 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { UnstyledButton, Flex, Text, Box, Stack, Tooltip } from '@mantine/core';
-import { useState, useRef, useEffect } from 'react';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-
+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, { 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
-        }
-      )
-    }
-  );
+	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.colors.gray[5]",
-            fontWeight: "medium",
-            flexShrink: 0,
-            _dark: {
-              color: "mantine.colors.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,
-        // Allow shrinking
-        overflow: "hidden"
-        // Prevent overflow
-      }),
-      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.colors.gray[3]",
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              maxWidth: "min(200px, 100%)",
-              minWidth: "60px",
-              flex: "0 1 auto",
-              userSelect: "all",
-              _dark: {
-                backgroundColor: "mantine.colors.dark[9]",
-                borderColor: "mantine.colors.dark[4]"
-              }
-            }),
-            title: value,
-            children: value
-          }
-        ),
-        index < values.length - 1 && /* @__PURE__ */ jsx(
-          Text,
-          {
-            className: css({
-              fontSize: "xs",
-              color: "mantine.colors.gray[5]",
-              fontWeight: "medium",
-              flexShrink: 0,
-              _dark: {
-                color: "mantine.colors.dark[3]"
-              }
-            }),
-            children: "•"
-          }
-        )
-      ] }, index))
-    }
-  );
+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.colors.gray[5]",
+					fontWeight: "medium",
+					flexShrink: 0,
+					_dark: { color: "mantine.colors.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.colors.gray[3]",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					maxWidth: "min(200px, 100%)",
+					minWidth: "60px",
+					flex: "0 1 auto",
+					userSelect: "all",
+					_dark: {
+						backgroundColor: "mantine.colors.dark[9]",
+						borderColor: "mantine.colors.dark[4]"
+					}
+				}),
+				title: value,
+				children: value
+			}), index < values.length - 1 && /* @__PURE__ */ jsx(Text, {
+				className: css({
+					fontSize: "xs",
+					color: "mantine.colors.gray[5]",
+					fontWeight: "medium",
+					flexShrink: 0,
+					_dark: { color: "mantine.colors.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, { 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.colors.gray[1]",
-            color: "mantine.colors.primary[6]",
-            _dark: {
-              backgroundColor: "mantine.colors.dark[7]",
-              color: "mantine.colors.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.colors.gray[6]",
-                backgroundColor: "mantine.colors.gray[1]",
-                padding: "[1px 4px]",
-                borderRadius: "xs",
-                _dark: {
-                  color: "mantine.colors.dark[2]",
-                  backgroundColor: "mantine.colors.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 })
-          }
-        )
-      }
-    )
-  ] });
+	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.colors.gray[1]",
+				color: "mantine.colors.primary[6]",
+				_dark: {
+					backgroundColor: "mantine.colors.dark[7]",
+					color: "mantine.colors.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.colors.gray[6]",
+						backgroundColor: "mantine.colors.gray[1]",
+						padding: "[1px 4px]",
+						borderRadius: "xs",
+						_dark: {
+							color: "mantine.colors.dark[2]",
+							backgroundColor: "mantine.colors.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.js

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