@likec4/diagram 1.55.0 → 1.56.0

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

@@ -1,144 +1,159 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { nameFromFqn } from '@likec4/core';
-import { Stack, Group, Box, ThemeIcon, Text, ActionIcon, Paper, Tooltip as Tooltip$1 } from '@mantine/core';
-import { useSelector } from '@xstate/react';
-import { useCallback } from 'react';
-import { unique } from 'remeda';
-import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser.js';
-import { useElementDetailsActorRef } from './actorContext.js';
-import { fqn, xyflow, relationshipStat } from './TabPanelRelationships.css.js';
-import { useDiagram } from '../../hooks/safeContext.js';
-import 'fast-equals';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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 IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
-
-const Tooltip = Tooltip$1.withProps({
-  color: "dark",
-  fz: "xs",
-  openDelay: 600,
-  closeDelay: 120,
-  label: "",
-  children: null,
-  offset: 8,
-  withinPortal: false
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useElementDetailsActorRef } from "./actorContext.js";
+import { RelationshipsBrowser } from "../relationships-browser/RelationshipsBrowser.js";
+import { fqn, relationshipStat, xyflow } from "./TabPanelRelationships.css.js";
+import { IconArrowRight, IconExternalLink, IconInfoCircle } from "@tabler/icons-react";
+import { useCallback } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { unique } from "remeda";
+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
+var Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 600,
+	closeDelay: 120,
+	label: "",
+	children: null,
+	offset: 8,
+	withinPortal: false
 });
-function TabPanelRelationships({
-  node,
-  element
-}) {
-  const diagram = useDiagram();
-  const delailsActor = useElementDetailsActorRef();
-  const relationshipsBrowserActor = useSelector(
-    delailsActor,
-    useCallback((s) => s.children[`${delailsActor.id}-relationships`], [delailsActor.id])
-  );
-  const incoming = [...element.incoming()].map((r) => r.id);
-  const outgoing = [...element.outgoing()].map((r) => r.id);
-  const incomingInView = node ? unique([...node.incoming()].flatMap((e) => e.$edge.relations)) : [];
-  const outgoingInView = node ? unique([...node.outgoing()].flatMap((e) => e.$edge.relations)) : [];
-  const notIncludedRelations = [
-    ...incoming,
-    ...outgoing
-  ].filter((r) => !incomingInView.includes(r) && !outgoingInView.includes(r)).length;
-  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", pos: "relative", w: "100%", h: "100%", children: [
-    incoming.length + outgoing.length > 0 && /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Group, { gap: 8, mb: 4, wrap: "nowrap", children: [
-        /* @__PURE__ */ jsx(
-          RelationshipsStat,
-          {
-            title: "incoming",
-            total: incoming.length,
-            included: incomingInView.length
-          }
-        ),
-        /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", c: "dimmed", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } }) }),
-        /* @__PURE__ */ jsx(Text, { className: fqn, children: nameFromFqn(element.id) }),
-        /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", c: "dimmed", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } }) }),
-        /* @__PURE__ */ jsx(
-          RelationshipsStat,
-          {
-            title: "outgoing",
-            total: outgoing.length,
-            included: outgoingInView.length
-          }
-        )
-      ] }) }),
-      notIncludedRelations > 0 && /* @__PURE__ */ jsx(Tooltip, { label: "Current view does not include some relationships", children: /* @__PURE__ */ jsxs(
-        Group,
-        {
-          mt: "xs",
-          gap: 6,
-          c: "orange",
-          style: { cursor: "pointer" },
-          children: [
-            /* @__PURE__ */ jsx(IconInfoCircle, { style: { width: 14 } }),
-            /* @__PURE__ */ jsxs(Text, { fz: "sm", children: [
-              notIncludedRelations,
-              " relationship",
-              notIncludedRelations > 1 ? "s are" : " is",
-              " hidden"
-            ] })
-          ]
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { className: xyflow, children: relationshipsBrowserActor && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor }),
-      /* @__PURE__ */ jsx(Box, { pos: "absolute", top: 12, right: 12, children: /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          size: "md",
-          variant: "default",
-          radius: "sm",
-          onClick: (e) => {
-            e.stopPropagation();
-            const {
-              subject,
-              scope,
-              viewId
-            } = relationshipsBrowserActor.getSnapshot().context;
-            diagram.overlays().send({
-              type: "open.relationshipsBrowser",
-              subject,
-              scope,
-              viewId
-            });
-          },
-          children: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.6, style: { width: "70%" } })
-        }
-      ) })
-    ] }) })
-  ] });
+function TabPanelRelationships({ node, element }) {
+	const diagram = useDiagram();
+	const delailsActor = useElementDetailsActorRef();
+	const relationshipsBrowserActor = useSelector(delailsActor, useCallback((s) => s.children[`${delailsActor.id}-relationships`], [delailsActor.id]));
+	const incoming = [...element.incoming()].map((r) => r.id);
+	const outgoing = [...element.outgoing()].map((r) => r.id);
+	const incomingInView = node ? unique([...node.incoming()].flatMap((e) => e.$edge.relations)) : [];
+	const outgoingInView = node ? unique([...node.outgoing()].flatMap((e) => e.$edge.relations)) : [];
+	const notIncludedRelations = [...incoming, ...outgoing].filter((r) => !incomingInView.includes(r) && !outgoingInView.includes(r)).length;
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "xs",
+		pos: "relative",
+		w: "100%",
+		h: "100%",
+		children: [incoming.length + outgoing.length > 0 && /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			wrap: "nowrap",
+			align: "center",
+			children: [/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Group, {
+				gap: 8,
+				mb: 4,
+				wrap: "nowrap",
+				children: [
+					/* @__PURE__ */ jsx(RelationshipsStat, {
+						title: "incoming",
+						total: incoming.length,
+						included: incomingInView.length
+					}),
+					/* @__PURE__ */ jsx(ThemeIcon, {
+						size: "sm",
+						variant: "transparent",
+						c: "dimmed",
+						children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } })
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						className: fqn,
+						children: nameFromFqn(element.id)
+					}),
+					/* @__PURE__ */ jsx(ThemeIcon, {
+						size: "sm",
+						variant: "transparent",
+						c: "dimmed",
+						children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } })
+					}),
+					/* @__PURE__ */ jsx(RelationshipsStat, {
+						title: "outgoing",
+						total: outgoing.length,
+						included: outgoingInView.length
+					})
+				]
+			}) }), notIncludedRelations > 0 && /* @__PURE__ */ jsx(Tooltip$1, {
+				label: "Current view does not include some relationships",
+				children: /* @__PURE__ */ jsxs(Group, {
+					mt: "xs",
+					gap: 6,
+					c: "orange",
+					style: { cursor: "pointer" },
+					children: [/* @__PURE__ */ jsx(IconInfoCircle, { style: { width: 14 } }), /* @__PURE__ */ jsxs(Text, {
+						fz: "sm",
+						children: [
+							notIncludedRelations,
+							" relationship",
+							notIncludedRelations > 1 ? "s are" : " is",
+							" hidden"
+						]
+					})]
+				})
+			})]
+		}), /* @__PURE__ */ jsx(Box, {
+			className: xyflow,
+			children: relationshipsBrowserActor && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor }), /* @__PURE__ */ jsx(Box, {
+				pos: "absolute",
+				top: 12,
+				right: 12,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "md",
+					variant: "default",
+					radius: "sm",
+					onClick: (e) => {
+						e.stopPropagation();
+						const { subject, scope, viewId } = relationshipsBrowserActor.getSnapshot().context;
+						diagram.overlays().send({
+							type: "open.relationshipsBrowser",
+							subject,
+							scope,
+							viewId
+						});
+					},
+					children: /* @__PURE__ */ jsx(IconExternalLink, {
+						stroke: 1.6,
+						style: { width: "70%" }
+					})
+				})
+			})] })
+		})]
+	});
 }
-function RelationshipsStat({
-  title,
-  total,
-  included
-}) {
-  return /* @__PURE__ */ jsx(
-    Paper,
-    {
-      withBorder: true,
-      shadow: "none",
-      className: relationshipStat,
-      px: "md",
-      py: "xs",
-      radius: "md",
-      mod: {
-        zero: total === 0,
-        missing: total !== included
-      },
-      children: /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "flex-end", children: [
-        /* @__PURE__ */ jsx(Text, { component: "div", c: total !== included ? "orange" : "dimmed", tt: "uppercase", fw: 600, fz: 10, lh: 1, children: title }),
-        /* @__PURE__ */ jsx(Text, { fw: 600, fz: "xl", component: "div", lh: 1, children: total !== included ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          included,
-          " / ",
-          total
-        ] }) : /* @__PURE__ */ jsx(Fragment, { children: total }) })
-      ] })
-    }
-  );
+function RelationshipsStat({ title, total, included }) {
+	return /* @__PURE__ */ jsx(Paper, {
+		withBorder: true,
+		shadow: "none",
+		className: relationshipStat,
+		px: "md",
+		py: "xs",
+		radius: "md",
+		mod: {
+			zero: total === 0,
+			missing: total !== included
+		},
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			align: "flex-end",
+			children: [/* @__PURE__ */ jsx(Text, {
+				component: "div",
+				c: total !== included ? "orange" : "dimmed",
+				tt: "uppercase",
+				fw: 600,
+				fz: 10,
+				lh: 1,
+				children: title
+			}), /* @__PURE__ */ jsx(Text, {
+				fw: 600,
+				fz: "xl",
+				component: "div",
+				lh: 1,
+				children: total !== included ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					included,
+					" / ",
+					total
+				] }) : /* @__PURE__ */ jsx(Fragment$1, { children: total })
+			})]
+		})
+	});
 }
-
+//#endregion
 export { TabPanelRelationships };

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

@@ -1,36 +1,32 @@
-import { css } from '@likec4/styles/css';
-
-const treeNodeLabel = css({
-  marginTop: "sm",
-  marginBottom: "sm"
+import { css } from "@likec4/styles/css";
+//#region src/overlays/element-details/TabPanelStructure.css.ts
+var treeNodeLabel = css({
+	marginTop: "sm",
+	marginBottom: "sm"
 });
-const elementLabel = css({
-  display: "inline-flex",
-  transition: "fast",
-  border: `1px dashed`,
-  borderColor: "default.border",
-  borderRadius: "sm",
-  px: "md",
-  py: "xs",
-  alignItems: "center",
-  cursor: "pointer",
-  color: "mantine.colors.gray[7]",
-  _dark: {
-    color: "mantine.colors.dark[1]"
-  },
-  "& > *": {
-    transition: "fast"
-  },
-  _hover: {
-    transitionTimingFunction: "out",
-    borderStyle: "solid",
-    color: "default.color",
-    background: "default.hover",
-    "& > *": {
-      transitionTimingFunction: "out",
-      transform: "translateX(1px)"
-    }
-  }
+var elementLabel = css({
+	display: "inline-flex",
+	transition: "fast",
+	border: `1px dashed`,
+	borderColor: "default.border",
+	borderRadius: "sm",
+	px: "md",
+	py: "xs",
+	alignItems: "center",
+	cursor: "pointer",
+	color: "mantine.colors.gray[7]",
+	_dark: { color: "mantine.colors.dark[1]" },
+	"& > *": { transition: "fast" },
+	_hover: {
+		transitionTimingFunction: "out",
+		borderStyle: "solid",
+		color: "default.color",
+		background: "default.hover",
+		"& > *": {
+			transitionTimingFunction: "out",
+			transform: "translateX(1px)"
+		}
+	}
 });
-
+//#endregion
 export { elementLabel, treeNodeLabel };

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

@@ -1,94 +1,94 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
-import { useMemo, useEffect } from 'react';
-import { treeNodeLabel, elementLabel } from './TabPanelStructure.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';
-
-const ElementLabel = ({
-  element
-}) => /* @__PURE__ */ jsx(Box, { className: elementLabel, children: /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", children: element.title }) });
-const infoIcon = /* @__PURE__ */ jsx(IconInfoCircle, {});
-const setHoveredNode = () => {
-};
-function TabPanelStructure({
-  element
-}) {
-  const tree = useTree({
-    multiple: false
-  });
-  tree.setHoveredNode = setHoveredNode;
-  const data = useMemo(() => {
-    let seq = 1;
-    const messageNode = (label) => ({
-      label,
-      value: `msg${seq++}`,
-      type: "message",
-      children: []
-    });
-    const current = {
-      label: /* @__PURE__ */ jsx(ElementLabel, { type: "current", element }),
-      value: element.id,
-      element,
-      type: "current",
-      children: [...element.children()].map((child) => ({
-        label: /* @__PURE__ */ jsx(ElementLabel, { type: "descedant", element: child }),
-        value: child.id,
-        element: child,
-        type: "descedant",
-        children: []
-      }))
-    };
-    if (current.children.length === 0) {
-      current.children.push(
-        messageNode(/* @__PURE__ */ jsx(Pill, { radius: "sm", children: "no nested" }))
-      );
-    }
-    let ancestor = [...element.ancestors()].reduce((acc, parent) => ({
-      label: /* @__PURE__ */ jsx(ElementLabel, { type: "ancestor", element: parent }),
-      value: parent.id,
-      element: parent,
-      type: "ancestor",
-      children: [acc]
-    }), current);
-    return [
-      ancestor
-    ];
-  }, [element]);
-  useEffect(() => {
-    tree.expandAllNodes();
-  }, [data]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", title: "In development", icon: infoIcon, children: [
-      "We need your feedback. Share your thoughts and ideas -",
-      " ",
-      /* @__PURE__ */ jsx(
-        Anchor,
-        {
-          fz: "sm",
-          fw: 500,
-          underline: "hover",
-          c: "orange",
-          href: "https://github.com/likec4/likec4/discussions/",
-          target: "_blank",
-          children: "GitHub discussions"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      Tree,
-      {
-        levelOffset: "xl",
-        allowRangeSelection: false,
-        expandOnClick: false,
-        expandOnSpace: false,
-        classNames: {
-          label: treeNodeLabel
-        },
-        data,
-        tree
-      }
-    )
-  ] });
+import "../../_virtual/_rolldown/runtime.js";
+import { elementLabel, treeNodeLabel } from "./TabPanelStructure.css.js";
+import { IconInfoCircle } from "@tabler/icons-react";
+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
+var ElementLabel = ({ element }) => /* @__PURE__ */ jsx(Box, {
+	className: elementLabel,
+	children: /* @__PURE__ */ jsx(Text, {
+		component: "div",
+		fz: "sm",
+		fw: "500",
+		children: element.title
+	})
+});
+var infoIcon = /* @__PURE__ */ jsx(IconInfoCircle, {});
+function TabPanelStructure({ element }) {
+	const tree = useTree({ multiple: false });
+	const data = useMemo(() => {
+		let seq = 1;
+		const messageNode = (label) => ({
+			label,
+			value: `msg${seq++}`,
+			type: "message",
+			children: []
+		});
+		const current = {
+			label: /* @__PURE__ */ jsx(ElementLabel, {
+				type: "current",
+				element
+			}),
+			value: element.id,
+			element,
+			type: "current",
+			children: [...element.children()].map((child) => ({
+				label: /* @__PURE__ */ jsx(ElementLabel, {
+					type: "descedant",
+					element: child
+				}),
+				value: child.id,
+				element: child,
+				type: "descedant",
+				children: []
+			}))
+		};
+		if (current.children.length === 0) current.children.push(messageNode(/* @__PURE__ */ jsx(Pill, {
+			radius: "sm",
+			children: "no nested"
+		})));
+		return [[...element.ancestors()].reduce((acc, parent) => ({
+			label: /* @__PURE__ */ jsx(ElementLabel, {
+				type: "ancestor",
+				element: parent
+			}),
+			value: parent.id,
+			element: parent,
+			type: "ancestor",
+			children: [acc]
+		}), current)];
+	}, [element]);
+	useEffect(() => {
+		tree.expandAllNodes();
+	}, [data]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Alert, {
+		variant: "light",
+		color: "orange",
+		title: "In development",
+		icon: infoIcon,
+		children: [
+			"We need your feedback. Share your thoughts and ideas -",
+			" ",
+			/* @__PURE__ */ jsx(Anchor, {
+				fz: "sm",
+				fw: 500,
+				underline: "hover",
+				c: "orange",
+				href: "https://github.com/likec4/likec4/discussions/",
+				target: "_blank",
+				children: "GitHub discussions"
+			})
+		]
+	}), /* @__PURE__ */ jsx(Tree, {
+		levelOffset: "xl",
+		allowRangeSelection: false,
+		expandOnClick: false,
+		expandOnSpace: false,
+		classNames: { label: treeNodeLabel },
+		data,
+		tree
+	})] });
 }
-
-export { ElementLabel, TabPanelStructure };
+//#endregion
+export { TabPanelStructure };