@likec4/diagram 1.55.1 → 1.56.0

package/dist/overlays/relationship-details/SelectEdge.css.js

@@ -1,82 +1,70 @@
-import { css, cx } from '@likec4/styles/css';
-
-const edgeEnpoint = css.raw({
-  display: "inline-flex",
-  alignItems: "center",
-  padding: "[6px 2px 0 2px]",
-  "& .mantine-Text-root": {
-    color: "text/90",
-    fontSize: "xs",
-    fontWeight: "medium",
-    lineHeight: "1.2"
-  }
+import { css, cx } from "@likec4/styles/css";
+//#region src/overlays/relationship-details/SelectEdge.css.ts
+var edgeEnpoint = css.raw({
+	display: "inline-flex",
+	alignItems: "center",
+	padding: "[6px 2px 0 2px]",
+	"& .mantine-Text-root": {
+		color: "text/90",
+		fontSize: "xs",
+		fontWeight: "medium",
+		lineHeight: "1.2"
+	}
 });
-const edgeSource = css({
-  paddingLeft: "1",
-  gridColumn: 1
+var edgeSource = css({
+	paddingLeft: "1",
+	gridColumn: 1
 }, edgeEnpoint);
-const edgeArrow = css({
-  gridColumn: 2
+var edgeArrow = css({ gridColumn: 2 }, edgeEnpoint);
+var edgeTarget = css({
+	gridColumn: 3,
+	paddingRight: "1"
 }, edgeEnpoint);
-const edgeTarget = css({
-  gridColumn: 3,
-  paddingRight: "1"
-}, edgeEnpoint);
-const edgeLabelclass = "likec4-edge-label";
-const edgeLabel = cx(
-  edgeLabelclass,
-  css({
-    display: "grid",
-    gridColumnStart: 1,
-    gridColumnEnd: 4,
-    borderBottom: `1px solid`,
-    borderBottomColor: "default.border",
-    marginBottom: "0",
-    padding: "[0 4px 5px 4px]",
-    width: "100%",
-    "& .mantine-Text-root": {
-      fontSize: "xxs",
-      fontWeight: "normal",
-      lineHeight: "xs",
-      color: "text.dimmed"
-    }
-  })
-);
-const edgeRow = css({
-  display: "contents",
-  [`&:last-child .${edgeLabelclass}`]: {
-    borderBottom: "none",
-    marginBottom: "0"
-  },
-  "& > *": {
-    transition: "all 0.15s ease-in"
-  },
-  "&:is(:hover, [data-selected=true]) > *": {
-    transition: "all 0.15s ease-out",
-    cursor: "pointer",
-    backgroundColor: "default.hover"
-  }
+var edgeLabelclass = "likec4-edge-label";
+var edgeLabel = cx(edgeLabelclass, css({
+	display: "grid",
+	gridColumnStart: 1,
+	gridColumnEnd: 4,
+	borderBottom: `1px solid`,
+	borderBottomColor: "default.border",
+	marginBottom: "0",
+	padding: "[0 4px 5px 4px]",
+	width: "100%",
+	"& .mantine-Text-root": {
+		fontSize: "xxs",
+		fontWeight: "normal",
+		lineHeight: "xs",
+		color: "text.dimmed"
+	}
+}));
+var edgeRow = css({
+	display: "contents",
+	[`&:last-child .${edgeLabelclass}`]: {
+		borderBottom: "none",
+		marginBottom: "0"
+	},
+	"& > *": { transition: "all 0.15s ease-in" },
+	"&:is(:hover, [data-selected=true]) > *": {
+		transition: "all 0.15s ease-out",
+		cursor: "pointer",
+		backgroundColor: "default.hover"
+	}
 });
-const edgeGrid = css({
-  display: "grid",
-  gridTemplateColumns: "1fr 30px 1fr",
-  gridAutoRows: "min-content max-content",
-  gap: "0",
-  alignItems: "stretch"
+var edgeGrid = css({
+	display: "grid",
+	gridTemplateColumns: "1fr 30px 1fr",
+	gridAutoRows: "min-content max-content",
+	gap: "0",
+	alignItems: "stretch"
 });
 css({
-  display: "grid",
-  gridTemplateColumns: "min-content 1fr",
-  gridAutoRows: "min-content max-content",
-  gap: "[10px 12px]",
-  alignItems: "baseline",
-  justifyItems: "start"
-});
-const scrollArea = css({
-  maxHeight: [
-    "70vh",
-    "calc(100cqh - 70px)"
-  ]
+	display: "grid",
+	gridTemplateColumns: "min-content 1fr",
+	gridAutoRows: "min-content max-content",
+	gap: "[10px 12px]",
+	alignItems: "baseline",
+	justifyItems: "start"
 });
-
+var scrollArea = css({ maxHeight: ["70vh", "calc(100cqh - 70px)"] });
+//#endregion
 export { edgeArrow, edgeGrid, edgeLabel, edgeRow, edgeSource, edgeTarget, scrollArea };

package/dist/overlays/relationship-details/SelectEdge.js

@@ -1,128 +1,148 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from '@mantine/core';
-import { useRef } from 'react';
-import { useRelationshipDetails } from './hooks.js';
-import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-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 IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-
-const SelectEdge = ({
-  edge,
-  view
-}) => {
-  const browser = useRelationshipDetails();
-  const viewport = useRef(null);
-  const edgeSource$1 = view.nodes.find((n) => n.id === edge.source);
-  const edgeTarget$1 = view.nodes.find((n) => n.id === edge.target);
-  const edges = view.edges.flatMap((edge2) => {
-    const source = view.nodes.find((n) => n.id === edge2.source);
-    const target = view.nodes.find((n) => n.id === edge2.target);
-    if (source && target) {
-      return {
-        id: edge2.id,
-        source,
-        target,
-        label: edge2.label
-      };
-    }
-    return [];
-  });
-  if (!edgeSource$1 || !edgeTarget$1 || edges.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      position: "bottom-start",
-      shadow: "md",
-      keepMounted: true,
-      withinPortal: false,
-      closeOnClickOutside: true,
-      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      onOpen: () => {
-        setTimeout(() => {
-          const item = viewport.current?.querySelector(`[data-edge-id="${edge.id}"]`);
-          item?.scrollIntoView({ behavior: "instant", block: "nearest" });
-        }, 100);
-      },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            size: "xs",
-            variant: "default",
-            fw: "500",
-            style: { padding: "0.25rem 0.75rem" },
-            rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
-            children: [
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  className: edgeSource,
-                  maw: 160,
-                  p: 0,
-                  mod: {
-                    "likec4-color": edgeSource$1.color
-                  },
-                  children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: edgeSource$1.title })
-                }
-              ),
-              /* @__PURE__ */ jsx(ThemeIcon, { color: "dark", variant: "transparent", size: "xs", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } }) }),
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  className: edgeTarget,
-                  maw: 160,
-                  p: 0,
-                  mod: {
-                    "likec4-color": edgeTarget$1.color
-                  },
-                  children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: edgeTarget$1.title })
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { className: scrollArea, scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box, { className: edgeGrid, p: "xs", maw: 400, children: edges.map((e) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: edgeRow,
-            "data-selected": e.id === edge.id,
-            onClick: (event) => {
-              event.stopPropagation();
-              browser.navigateTo(e.id);
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  className: edgeSource,
-                  mod: {
-                    "edge-id": e.id,
-                    "likec4-color": e.source.color
-                  },
-                  children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: e.source.title })
-                }
-              ),
-              /* @__PURE__ */ jsx(Box, { className: edgeArrow, children: /* @__PURE__ */ jsx(ThemeIcon, { color: "dark", variant: "transparent", size: "xs", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } }) }) }),
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  className: edgeTarget,
-                  mod: {
-                    "likec4-color": e.target.color
-                  },
-                  children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: e.target.title })
-                }
-              ),
-              /* @__PURE__ */ jsx(Box, { className: edgeLabel, children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: e.label || "untitled" }) })
-            ]
-          },
-          e.id
-        )) }) }) })
-      ]
-    }
-  );
+import "../../_virtual/_rolldown/runtime.js";
+import { useRelationshipDetails } from "./hooks.js";
+import { edgeArrow, edgeGrid, edgeLabel, edgeRow, edgeSource, edgeTarget, scrollArea } from "./SelectEdge.css.js";
+import { IconArrowRight, IconSelector } from "@tabler/icons-react";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, Popover, PopoverDropdown, PopoverTarget, ScrollAreaAutosize, Text, ThemeIcon } from "@mantine/core";
+//#region src/overlays/relationship-details/SelectEdge.tsx
+var SelectEdge = ({ edge, view }) => {
+	const browser = useRelationshipDetails();
+	const viewport = useRef(null);
+	const edgeSource$1 = view.nodes.find((n) => n.id === edge.source);
+	const edgeTarget$1 = view.nodes.find((n) => n.id === edge.target);
+	const edges = view.edges.flatMap((edge) => {
+		const source = view.nodes.find((n) => n.id === edge.source);
+		const target = view.nodes.find((n) => n.id === edge.target);
+		if (source && target) return {
+			id: edge.id,
+			source,
+			target,
+			label: edge.label
+		};
+		return [];
+	});
+	if (!edgeSource$1 || !edgeTarget$1 || edges.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Popover, {
+		position: "bottom-start",
+		shadow: "md",
+		keepMounted: true,
+		withinPortal: false,
+		closeOnClickOutside: true,
+		clickOutsideEvents: [
+			"pointerdown",
+			"mousedown",
+			"click"
+		],
+		onOpen: () => {
+			setTimeout(() => {
+				(viewport.current?.querySelector(`[data-edge-id="${edge.id}"]`))?.scrollIntoView({
+					behavior: "instant",
+					block: "nearest"
+				});
+			}, 100);
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsxs(Button, {
+			size: "xs",
+			variant: "default",
+			fw: "500",
+			style: { padding: "0.25rem 0.75rem" },
+			rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
+			children: [
+				/* @__PURE__ */ jsx(Box, {
+					className: edgeSource,
+					maw: 160,
+					p: 0,
+					mod: { "likec4-color": edgeSource$1.color },
+					children: /* @__PURE__ */ jsx(Text, {
+						component: "span",
+						truncate: true,
+						children: edgeSource$1.title
+					})
+				}),
+				/* @__PURE__ */ jsx(ThemeIcon, {
+					color: "dark",
+					variant: "transparent",
+					size: "xs",
+					children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } })
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					className: edgeTarget,
+					maw: 160,
+					p: 0,
+					mod: { "likec4-color": edgeTarget$1.color },
+					children: /* @__PURE__ */ jsx(Text, {
+						component: "span",
+						truncate: true,
+						children: edgeTarget$1.title
+					})
+				})
+			]
+		}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
+			p: 0,
+			miw: 250,
+			maw: 400,
+			children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+				className: scrollArea,
+				scrollbars: "y",
+				type: "never",
+				viewportRef: viewport,
+				children: /* @__PURE__ */ jsx(Box, {
+					className: edgeGrid,
+					p: "xs",
+					maw: 400,
+					children: edges.map((e) => /* @__PURE__ */ jsxs("div", {
+						className: edgeRow,
+						"data-selected": e.id === edge.id,
+						onClick: (event) => {
+							event.stopPropagation();
+							browser.navigateTo(e.id);
+						},
+						children: [
+							/* @__PURE__ */ jsx(Box, {
+								className: edgeSource,
+								mod: {
+									"edge-id": e.id,
+									"likec4-color": e.source.color
+								},
+								children: /* @__PURE__ */ jsx(Text, {
+									component: "span",
+									truncate: true,
+									children: e.source.title
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								className: edgeArrow,
+								children: /* @__PURE__ */ jsx(ThemeIcon, {
+									color: "dark",
+									variant: "transparent",
+									size: "xs",
+									children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } })
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								className: edgeTarget,
+								mod: { "likec4-color": e.target.color },
+								children: /* @__PURE__ */ jsx(Text, {
+									component: "span",
+									truncate: true,
+									children: e.target.title
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								className: edgeLabel,
+								children: /* @__PURE__ */ jsx(Text, {
+									component: "span",
+									truncate: true,
+									children: e.label || "untitled"
+								})
+							})
+						]
+					}, e.id))
+				})
+			})
+		})]
+	});
 };
-
+//#endregion
 export { SelectEdge };