@likec4/diagram 1.55.0 → 1.56.0

package/dist/navigationpanel/controls/DetailsControls.js

@@ -1,251 +1,224 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { extractViewTitleFromPath } from '@likec4/core/model';
-import { RichText } from '@likec4/core/types';
-import { cx, css } from '@likec4/styles/css';
-import { HStack, Box, styled } from '@likec4/styles/jsx';
-import { hstack, vstack } from '@likec4/styles/patterns';
-import { Popover, UnstyledButton, Text, Badge } from '@mantine/core';
-import { deepEqual } from 'fast-equals';
-import * as m from 'motion/react-m';
-import { useState } from 'react';
-import { Link } from '../../components/Link.js';
-import { useOnDiagramEvent } from '../../hooks/useDiagram.js';
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
-import { useNavigationActorSnapshot } from '../hooks.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { ElementTag } from '../../base-primitives/element/ElementTags.js';
-import { Markdown } from '../../base-primitives/Markdown.js';
-
-const selector = ({ context }) => {
-  const view = context.view;
-  return {
-    id: view.id,
-    title: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
-    description: context.viewModel?.description ?? RichText.from(view.description),
-    tags: view.tags ?? [],
-    links: view.links ?? []
-  };
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
+import { useNavigationActorSnapshot } from "../hooks.js";
+import { Markdown } from "../../base-primitives/Markdown.js";
+import { ElementTag } from "../../base-primitives/element/ElementTags.js";
+import { Link } from "../../components/Link.js";
+import { css, cx } from "@likec4/styles/css";
+import { IconId, IconLink } from "@tabler/icons-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { deepEqual } from "fast-equals";
+import { Badge, Popover, Text, UnstyledButton } from "@mantine/core";
+import { Box as Box$1, HStack, styled } from "@likec4/styles/jsx";
+import { hstack, vstack } from "@likec4/styles/patterns";
+import * as m from "motion/react-m";
+import { RichText } from "@likec4/core/types";
+import { extractViewTitleFromPath } from "@likec4/core/model";
+//#region src/navigationpanel/controls/DetailsControls.tsx
+var selector = ({ context }) => {
+	const view = context.view;
+	return {
+		id: view.id,
+		title: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
+		description: context.viewModel?.description ?? RichText.from(view.description),
+		tags: view.tags ?? [],
+		links: view.links ?? []
+	};
 };
-const DetailsControls = (props) => {
-  const [opened, setOpened] = useState(false);
-  const data = useNavigationActorSnapshot(selector, deepEqual);
-  const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      position: "bottom-end",
-      shadow: "xl",
-      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      offset: {
-        mainAxis: 4
-      },
-      opened,
-      onChange: setOpened,
-      ...portalProps,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length, onOpen: () => setOpened(true) }),
-        opened && /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data, onClose: () => setOpened(false) })
-      ]
-    }
-  );
+var DetailsControls = (props) => {
+	const [opened, setOpened] = useState(false);
+	const data = useNavigationActorSnapshot(selector, deepEqual);
+	return /* @__PURE__ */ jsxs(Popover, {
+		position: "bottom-end",
+		shadow: "xl",
+		clickOutsideEvents: [
+			"pointerdown",
+			"mousedown",
+			"click"
+		],
+		offset: { mainAxis: 4 },
+		opened,
+		onChange: setOpened,
+		...useMantinePortalProps(),
+		...props,
+		children: [/* @__PURE__ */ jsx(ViewDetailsCardTrigger, {
+			linksCount: data.links.length,
+			onOpen: () => setOpened(true)
+		}), opened && /* @__PURE__ */ jsx(ViewDetailsCardDropdown, {
+			data,
+			onClose: () => setOpened(false)
+		})]
+	});
 };
-const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
-  UnstyledButton,
-  {
-    component: m.button,
-    layout: "position",
-    whileTap: {
-      scale: 0.95,
-      translateY: 1
-    },
-    onClick: (e) => {
-      e.stopPropagation();
-      onOpen();
-    },
-    className: cx(
-      "group",
-      hstack({
-        gap: "2",
-        paddingInline: "2",
-        paddingBlock: "1",
-        rounded: "sm",
-        userSelect: "none",
-        cursor: "pointer",
-        color: {
-          base: "likec4.panel.action",
-          _hover: "likec4.panel.action.hover"
-        },
-        backgroundColor: {
-          _hover: "likec4.panel.action.bg.hover"
-        },
-        display: {
-          base: "none",
-          "@/xs": "flex"
-        }
-      }),
-      ``
-    ),
-    children: [
-      /* @__PURE__ */ jsx(IconId, { size: 16, stroke: 1.8 }),
-      linksCount > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "[1px]", children: [
-        /* @__PURE__ */ jsx(IconLink, { size: 14, stroke: 2 }),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            css: {
-              fontSize: "11px",
-              fontWeight: "bold",
-              lineHeight: 1,
-              opacity: 0.8
-            },
-            children: linksCount
-          }
-        )
-      ] })
-    ]
-  }
-) });
-const SectionHeader = styled("div", {
-  base: {
-    fontSize: "xs",
-    color: "text.dimmed",
-    fontWeight: "medium",
-    userSelect: "none",
-    mb: "xxs"
-  }
-});
-const ViewDetailsCardDropdown = ({
-  data: {
-    id,
-    title,
-    description,
-    tags,
-    links
-  },
-  onClose
-}) => {
-  const diagram = useDiagram();
-  useOnDiagramEvent("paneClick", onClose);
-  useOnDiagramEvent("nodeClick", onClose);
-  return /* @__PURE__ */ jsxs(
-    Popover.Dropdown,
-    {
-      className: cx(
-        "nowheel nopan nodrag",
-        vstack({
-          margin: "xs",
-          layerStyle: "likec4.dropdown",
-          gap: "md",
-          padding: "md",
-          paddingBottom: "lg",
-          pointerEvents: "all",
-          maxWidth: "calc(100cqw - 52px)",
-          minWidth: "200px",
-          maxHeight: "calc(100cqh - 100px)",
-          width: "max-content",
-          cursor: "default",
-          overflow: "auto",
-          overscrollBehavior: "contain",
-          "@/sm": {
-            minWidth: 400,
-            maxWidth: 550
-          },
-          "@/lg": {
-            maxWidth: 700
-          }
-        })
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("section", { children: [
-          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", lh: "sm", children: title }),
-          /* @__PURE__ */ jsxs(HStack, { alignItems: "flex-start", mt: "1", children: [
-            /* @__PURE__ */ jsx(ViewBadge, { label: "id", value: id }),
-            /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: tags.map((tag) => /* @__PURE__ */ jsx(
-              ElementTag,
-              {
-                tag,
-                cursor: "pointer",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.openSearch(`#${tag}`);
-                }
-              },
-              tag
-            )) })
-          ] })
-        ] }),
-        links.length > 0 && /* @__PURE__ */ jsxs("section", { className: hstack({ alignItems: "baseline" }), children: [
-          /* @__PURE__ */ jsx(SectionHeader, { children: "Links" }),
-          /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)) })
-        ] }),
-        description.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", style: { userSelect: "none" }, children: "No description" }),
-        description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
-          /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
-          /* @__PURE__ */ jsx(
-            Markdown,
-            {
-              value: description,
-              fontSize: "sm",
-              emptyText: "No description",
-              className: css({
-                userSelect: "all"
-              })
-            }
-          )
-        ] })
-      ]
-    }
-  );
+var ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, {
+	component: m.button,
+	layout: "position",
+	whileTap: {
+		scale: .95,
+		translateY: 1
+	},
+	onClick: (e) => {
+		e.stopPropagation();
+		onOpen();
+	},
+	className: cx("group", hstack({
+		gap: "2",
+		paddingInline: "2",
+		paddingBlock: "1",
+		rounded: "sm",
+		userSelect: "none",
+		cursor: "pointer",
+		color: {
+			base: "likec4.panel.action",
+			_hover: "likec4.panel.action.hover"
+		},
+		backgroundColor: { _hover: "likec4.panel.action.bg.hover" },
+		display: {
+			base: "none",
+			"@/xs": "flex"
+		}
+	}), ``),
+	children: [/* @__PURE__ */ jsx(IconId, {
+		size: 16,
+		stroke: 1.8
+	}), linksCount > 0 && /* @__PURE__ */ jsxs(HStack, {
+		gap: "[1px]",
+		children: [/* @__PURE__ */ jsx(IconLink, {
+			size: 14,
+			stroke: 2
+		}), /* @__PURE__ */ jsx(Box$1, {
+			css: {
+				fontSize: "11px",
+				fontWeight: "bold",
+				lineHeight: 1,
+				opacity: .8
+			},
+			children: linksCount
+		})]
+	})]
+}) });
+var SectionHeader = styled("div", { base: {
+	fontSize: "xs",
+	color: "text.dimmed",
+	fontWeight: "medium",
+	userSelect: "none",
+	mb: "xxs"
+} });
+var ViewDetailsCardDropdown = ({ data: { id, title, description, tags, links }, onClose }) => {
+	const diagram = useDiagram();
+	useOnDiagramEvent("paneClick", onClose);
+	useOnDiagramEvent("nodeClick", onClose);
+	return /* @__PURE__ */ jsxs(Popover.Dropdown, {
+		className: cx("nowheel nopan nodrag", vstack({
+			margin: "xs",
+			layerStyle: "likec4.dropdown",
+			gap: "md",
+			padding: "md",
+			paddingBottom: "lg",
+			pointerEvents: "all",
+			maxWidth: "calc(100cqw - 52px)",
+			minWidth: "200px",
+			maxHeight: "calc(100cqh - 100px)",
+			width: "max-content",
+			cursor: "default",
+			overflow: "auto",
+			overscrollBehavior: "contain",
+			"@/sm": {
+				minWidth: 400,
+				maxWidth: 550
+			},
+			"@/lg": { maxWidth: 700 }
+		})),
+		children: [
+			/* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(Text, {
+				component: "div",
+				fw: 500,
+				size: "xl",
+				lh: "sm",
+				children: title
+			}), /* @__PURE__ */ jsxs(HStack, {
+				alignItems: "flex-start",
+				mt: "1",
+				children: [/* @__PURE__ */ jsx(ViewBadge, {
+					label: "id",
+					value: id
+				}), /* @__PURE__ */ jsx(HStack, {
+					gap: "xs",
+					flexWrap: "wrap",
+					children: tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, {
+						tag,
+						cursor: "pointer",
+						onClick: (e) => {
+							e.stopPropagation();
+							diagram.openSearch(`#${tag}`);
+						}
+					}, tag))
+				})]
+			})] }),
+			links.length > 0 && /* @__PURE__ */ jsxs("section", {
+				className: hstack({ alignItems: "baseline" }),
+				children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Links" }), /* @__PURE__ */ jsx(HStack, {
+					gap: "xs",
+					flexWrap: "wrap",
+					children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`))
+				})]
+			}),
+			description.isEmpty && /* @__PURE__ */ jsx(Text, {
+				component: "div",
+				fw: 500,
+				size: "xs",
+				c: "dimmed",
+				style: { userSelect: "none" },
+				children: "No description"
+			}),
+			description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Description" }), /* @__PURE__ */ jsx(Markdown, {
+				value: description,
+				fontSize: "sm",
+				emptyText: "No description",
+				className: css({ userSelect: "all" })
+			})] })
+		]
+	});
 };
-const ViewBadge = ({
-  label,
-  value
-}) => {
-  return /* @__PURE__ */ jsxs(HStack, { gap: "0.5", children: [
-    /* @__PURE__ */ jsx(ViewBadgeLabel, { children: label }),
-    /* @__PURE__ */ jsx(
-      Badge,
-      {
-        size: "sm",
-        radius: "sm",
-        variant: "light",
-        color: "gray",
-        tt: "none",
-        fw: 500,
-        classNames: {
-          root: css({
-            width: "max-content",
-            overflow: "visible",
-            px: "1",
-            color: {
-              _dark: "mantine.colors.gray[4]",
-              _light: "mantine.colors.gray[8]"
-            }
-          }),
-          label: css({
-            overflow: "visible"
-          }),
-          section: css({
-            opacity: 0.5,
-            userSelect: "none",
-            marginInlineEnd: "0.5"
-          })
-        },
-        children: value
-      }
-    )
-  ] });
+var ViewBadge = ({ label, value }) => {
+	return /* @__PURE__ */ jsxs(HStack, {
+		gap: "0.5",
+		children: [/* @__PURE__ */ jsx(ViewBadgeLabel, { children: label }), /* @__PURE__ */ jsx(Badge, {
+			size: "sm",
+			radius: "sm",
+			variant: "light",
+			color: "gray",
+			tt: "none",
+			fw: 500,
+			classNames: {
+				root: css({
+					width: "max-content",
+					overflow: "visible",
+					px: "1",
+					color: {
+						_dark: "mantine.colors.gray[4]",
+						_light: "mantine.colors.gray[8]"
+					}
+				}),
+				label: css({ overflow: "visible" }),
+				section: css({
+					opacity: .5,
+					userSelect: "none",
+					marginInlineEnd: "0.5"
+				})
+			},
+			children: value
+		})]
+	});
 };
-const ViewBadgeLabel = styled("div", {
-  base: {
-    color: "text.dimmed",
-    fontWeight: "medium",
-    fontSize: "xxs",
-    userSelect: "none"
-  }
-});
-
+var ViewBadgeLabel = styled("div", { base: {
+	color: "text.dimmed",
+	fontWeight: "medium",
+	fontSize: "xxs",
+	userSelect: "none"
+} });
+//#endregion
 export { DetailsControls };