@likec4/diagram 1.55.1 → 1.57.0

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

@@ -1,181 +1,188 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useTree, Alert, Tree, Box, Button, rem, Group, Text, ThemeIcon, Menu } from '@mantine/core';
-import { memo, useMemo, useEffect } from 'react';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
-import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-
-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: 0.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 setHoveredNode = () => {
+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)) })]
+				})]
+			})
+		]
+	});
 };
-const TabPanelDeployments = memo(({ elementFqn }) => {
-  const element = useLikeC4Model().element(elementFqn);
-  const deployments = [...element.deployments()];
-  const tree = useTree({
-    multiple: false
-  });
-  tree.setHoveredNode = setHoveredNode;
-  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 (
-    // <Box></Box>
-    /* @__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
-          }
-        )
-      }
-    )
-  );
+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.js

@@ -1,79 +1,71 @@
-import { css } from '@likec4/styles/css';
-
-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)"
+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)"
 });
-const relationshipStat = css({
-  _light: {
-    background: "mantine.colors.gray[1]",
-    "&[data-missing": {}
-  },
-  [`&[data-missing]`]: {
-    color: "mantine.colors.orange[4]",
-    background: `mantine.colors.orange[8]/15`,
-    borderColor: `mantine.colors.orange[5]/20`,
-    _light: {
-      color: "mantine.colors.orange[8]"
-    }
-  }
+var relationshipStat = css({
+	_light: {
+		background: "mantine.colors.gray[1]",
+		"&[data-missing": {}
+	},
+	[`&[data-missing]`]: {
+		color: "mantine.colors.orange[4]",
+		background: `mantine.colors.orange[8]/15`,
+		borderColor: `mantine.colors.orange[5]/20`,
+		_light: { color: "mantine.colors.orange[8]" }
+	}
 });
-const xyflow = css({
-  flex: "1 1 100%",
-  position: "relative",
-  width: "100%",
-  height: "100%",
-  background: "body",
-  border: "default",
-  borderRadius: "sm",
-  _light: {
-    borderColor: "mantine.colors.gray[3]",
-    background: "mantine.colors.gray[1]"
-  }
+var xyflow = css({
+	flex: "1 1 100%",
+	position: "relative",
+	width: "100%",
+	height: "100%",
+	background: "body",
+	border: "default",
+	borderRadius: "sm",
+	_light: {
+		borderColor: "mantine.colors.gray[3]",
+		background: "mantine.colors.gray[1]"
+	}
 });
 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.colors.gray[3]"
-    }
-  }
+	_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.colors.gray[3]" } }
 });
 css({
-  display: "inline-block",
-  fontSize: "xl",
-  fontWeight: "bold",
-  padding: "[1px 5px]",
-  minWidth: "24px",
-  textAlign: "center",
-  borderRadius: "sm",
-  background: "mantine.colors.dark[7]",
-  color: "default.color",
-  [`&[data-zero]`]: {
-    color: "text.dimmed"
-  },
-  [`&[data-missing]`]: {
-    color: "mantine.colors.orange[4]",
-    background: `mantine.colors.orange[8]/20`
-  }
+	display: "inline-block",
+	fontSize: "xl",
+	fontWeight: "bold",
+	padding: "[1px 5px]",
+	minWidth: "24px",
+	textAlign: "center",
+	borderRadius: "sm",
+	background: "mantine.colors.dark[7]",
+	color: "default.color",
+	[`&[data-zero]`]: { color: "text.dimmed" },
+	[`&[data-missing]`]: {
+		color: "mantine.colors.orange[4]",
+		background: `mantine.colors.orange[8]/20`
+	}
 });
-
+//#endregion
 export { fqn, relationshipStat, xyflow };