@likec4/diagram 1.55.1 → 1.57.0

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,218 +1,187 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { Tooltip, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
-import { AnimatePresence, m } from 'motion/react';
-import { memo, useState } from 'react';
-import { ceil, isNonNullish } from 'remeda';
-import { useDiagramContext } from '../../../hooks/useDiagram.js';
-import { useXYStore } from '../../../hooks/useXYFlow.js';
-import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
-import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
-import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
-import { useDiagram } from '../../../hooks/safeContext.js';
-import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
-
-const ElementNotation = ({ value }) => {
-  const {
-    title,
-    color = "primary",
-    shape = "rectangle"
-  } = value;
-  const [onlyKind, setOnlyKind] = useState(null);
-  const diagram = useDiagram();
-  const w = 300;
-  const h = 200;
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      shadow: "none",
-      px: "xs",
-      py: "sm",
-      className: cx(
-        elementNotation
-      ),
-      "data-likec4-color": color,
-      onMouseEnter: () => {
-        setOnlyKind(null);
-        diagram.highlightNotation(value);
-      },
-      onMouseLeave: () => {
-        setOnlyKind(null);
-        diagram.unhighlightNotation();
-      },
-      children: /* @__PURE__ */ jsxs(
-        Group,
-        {
-          gap: "sm",
-          align: "stretch",
-          wrap: "nowrap",
-          children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                flex: "0 0 70px",
-                style: {
-                  position: "relative",
-                  width: 70,
-                  height: ceil(70 * (h / w), 0)
-                },
-                children: /* @__PURE__ */ jsx(
-                  ElementShape,
-                  {
-                    data: {
-                      shape,
-                      width: w,
-                      height: h
-                    }
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(Stack, { gap: 4, flex: 1, children: [
-              /* @__PURE__ */ jsx(Group, { gap: 4, flex: "0 0 auto", children: value.kinds.map((kind) => /* @__PURE__ */ jsx(
-                Badge,
-                {
-                  className: cx(
-                    shapeBadge
-                  ),
-                  onMouseEnter: () => {
-                    setOnlyKind(kind);
-                    diagram.highlightNotation(value, kind);
-                  },
-                  onMouseLeave: () => {
-                    setOnlyKind(null);
-                    diagram.highlightNotation(value);
-                  },
-                  opacity: isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1,
-                  children: kind
-                },
-                kind
-              )) }),
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  component: "div",
-                  fz: "sm",
-                  fw: 500,
-                  lh: "1.25",
-                  style: {
-                    textWrap: "pretty"
-                  },
-                  children: title
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
+import "../../../_virtual/_rolldown/runtime.js";
+import { useXYStore } from "../../../hooks/useXYFlow.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { useDiagramContext } from "../../../hooks/useDiagram.js";
+import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
+import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
+import { card, container, elementNotation, icon, shapeBadge, tabPanel } from "./NotationPanel.css.js";
+import { cx } from "@likec4/styles/css";
+import { IconArrowDownRight, IconHelpCircle } from "@tabler/icons-react";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ceil, isNonNullish } from "remeda";
+import { ActionIcon, Badge, Box, Card, Group, Paper, ScrollAreaAutosize, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, Tooltip } from "@mantine/core";
+import { AnimatePresence, m } from "motion/react";
+import { useLocalStorage } from "@mantine/hooks";
+//#region src/likec4diagram/ui/notation/NotationPanel.tsx
+var ElementNotation = ({ value }) => {
+	const { title, color = "primary", shape = "rectangle" } = value;
+	const [onlyKind, setOnlyKind] = useState(null);
+	const diagram = useDiagram();
+	const w = 300;
+	const h = 200;
+	return /* @__PURE__ */ jsx(Card, {
+		shadow: "none",
+		px: "xs",
+		py: "sm",
+		className: cx(elementNotation),
+		"data-likec4-color": color,
+		onMouseEnter: () => {
+			setOnlyKind(null);
+			diagram.highlightNotation(value);
+		},
+		onMouseLeave: () => {
+			setOnlyKind(null);
+			diagram.unhighlightNotation();
+		},
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: "sm",
+			align: "stretch",
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsx(Box, {
+				flex: "0 0 70px",
+				style: {
+					position: "relative",
+					width: 70,
+					height: ceil(70 * (h / w), 0)
+				},
+				children: /* @__PURE__ */ jsx(ElementShape, { data: {
+					shape,
+					width: w,
+					height: h
+				} })
+			}), /* @__PURE__ */ jsxs(Stack, {
+				gap: 4,
+				flex: 1,
+				children: [/* @__PURE__ */ jsx(Group, {
+					gap: 4,
+					flex: "0 0 auto",
+					children: value.kinds.map((kind) => /* @__PURE__ */ jsx(Badge, {
+						className: cx(shapeBadge),
+						onMouseEnter: () => {
+							setOnlyKind(kind);
+							diagram.highlightNotation(value, kind);
+						},
+						onMouseLeave: () => {
+							setOnlyKind(null);
+							diagram.highlightNotation(value);
+						},
+						opacity: isNonNullish(onlyKind) && onlyKind !== kind ? .25 : 1,
+						children: kind
+					}, kind))
+				}), /* @__PURE__ */ jsx(Text, {
+					component: "div",
+					fz: "sm",
+					fw: 500,
+					lh: "1.25",
+					style: { textWrap: "pretty" },
+					children: title
+				})]
+			})]
+		})
+	});
 };
-const selector = (s) => ({
-  id: s.view.id,
-  notations: s.view.notation?.nodes ?? []
+var selector = (s) => ({
+	id: s.view.id,
+	notations: s.view.notation?.nodes ?? []
 });
-const NotationPanel = memo(() => {
-  const height = useXYStore((s) => s.height);
-  const {
-    id,
-    notations
-  } = useDiagramContext(selector);
-  const [isCollapsed, setCollapsed] = useLocalStorage({
-    key: "notation-webview-collapsed",
-    defaultValue: true
-  });
-  const hasNotations = notations.length > 0;
-  const portalProps = useMantinePortalProps();
-  if (!hasNotations) return null;
-  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    isCollapsed && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        initial: { opacity: 0.75, translateX: "50%" },
-        animate: { opacity: 1, translateX: 0 },
-        exit: {
-          translateX: "100%",
-          opacity: 0.6
-        },
-        className: container,
-        children: /* @__PURE__ */ jsx(Tooltip, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            size: "lg",
-            variant: "default",
-            color: "gray",
-            className: icon,
-            onClick: () => setCollapsed(false),
-            children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
-          }
-        ) })
-      },
-      "collapsed"
-    ),
-    !isCollapsed && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        initial: {
-          opacity: 0.75,
-          // translateX: '50%',
-          scale: 0.2
-        },
-        animate: { opacity: 1, scale: 1 },
-        exit: {
-          opacity: 0,
-          scale: 0.25
-        },
-        className: cx("react-flow__panel", container),
-        style: {
-          transformOrigin: "bottom right"
-        },
-        children: /* @__PURE__ */ jsx(
-          Paper,
-          {
-            radius: "sm",
-            withBorder: true,
-            shadow: "lg",
-            className: card,
-            children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "first", radius: "xs", children: [
-              /* @__PURE__ */ jsxs(TabsList, { children: [
-                /* @__PURE__ */ jsx(
-                  ActionIcon,
-                  {
-                    size: "md",
-                    variant: "subtle",
-                    color: "gray",
-                    ml: 2,
-                    style: {
-                      alignSelf: "center"
-                    },
-                    onClick: () => setCollapsed(true),
-                    children: /* @__PURE__ */ jsx(IconArrowDownRight, { stroke: 2 })
-                  }
-                ),
-                /* @__PURE__ */ jsx(TabsTab, { value: "first", fz: "xs", children: "Elements" }),
-                /* @__PURE__ */ jsx(TabsTab, { value: "second", fz: "xs", disabled: true, children: "Relationships" })
-              ] }),
-              /* @__PURE__ */ jsx(TabsPanel, { value: "first", className: tabPanel, hidden: isCollapsed, children: /* @__PURE__ */ jsx(
-                ScrollAreaAutosize,
-                {
-                  viewportProps: {
-                    style: {
-                      maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)`
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(Stack, { gap: 0, children: notations.map((n, i) => /* @__PURE__ */ jsx(ElementNotation, { value: n }, i)) })
-                }
-              ) })
-            ] })
-          }
-        )
-      },
-      id
-    )
-  ] });
+var NotationPanel = memo(() => {
+	const height = useXYStore((s) => s.height);
+	const { id, notations } = useDiagramContext(selector);
+	const [isCollapsed, setCollapsed] = useLocalStorage({
+		key: "notation-webview-collapsed",
+		defaultValue: true
+	});
+	const hasNotations = notations.length > 0;
+	const portalProps = useMantinePortalProps();
+	if (!hasNotations) return null;
+	return /* @__PURE__ */ jsxs(AnimatePresence, { children: [isCollapsed && /* @__PURE__ */ jsx(m.div, {
+		initial: {
+			opacity: .75,
+			translateX: "50%"
+		},
+		animate: {
+			opacity: 1,
+			translateX: 0
+		},
+		exit: {
+			translateX: "100%",
+			opacity: .6
+		},
+		className: container,
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			label: "Show notation",
+			color: "dark",
+			fz: "xs",
+			...portalProps,
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				size: "lg",
+				variant: "default",
+				color: "gray",
+				className: icon,
+				onClick: () => setCollapsed(false),
+				children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
+			})
+		})
+	}, "collapsed"), !isCollapsed && /* @__PURE__ */ jsx(m.div, {
+		initial: {
+			opacity: .75,
+			scale: .2
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .25
+		},
+		className: cx("react-flow__panel", container),
+		style: { transformOrigin: "bottom right" },
+		children: /* @__PURE__ */ jsx(Paper, {
+			radius: "sm",
+			withBorder: true,
+			shadow: "lg",
+			className: card,
+			children: /* @__PURE__ */ jsxs(Tabs, {
+				defaultValue: "first",
+				radius: "xs",
+				children: [/* @__PURE__ */ jsxs(TabsList, { children: [
+					/* @__PURE__ */ jsx(ActionIcon, {
+						size: "md",
+						variant: "subtle",
+						color: "gray",
+						ml: 2,
+						style: { alignSelf: "center" },
+						onClick: () => setCollapsed(true),
+						children: /* @__PURE__ */ jsx(IconArrowDownRight, { stroke: 2 })
+					}),
+					/* @__PURE__ */ jsx(TabsTab, {
+						value: "first",
+						fz: "xs",
+						children: "Elements"
+					}),
+					/* @__PURE__ */ jsx(TabsTab, {
+						value: "second",
+						fz: "xs",
+						disabled: true,
+						children: "Relationships"
+					})
+				] }), /* @__PURE__ */ jsx(TabsPanel, {
+					value: "first",
+					className: tabPanel,
+					hidden: isCollapsed,
+					children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+						viewportProps: { style: { maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)` } },
+						children: /* @__PURE__ */ jsx(Stack, {
+							gap: 0,
+							children: notations.map((n, i) => /* @__PURE__ */ jsx(ElementNotation, { value: n }, i))
+						})
+					})
+				})]
+			})
+		})
+	}, id)] });
 });
-
+//#endregion
 export { NotationPanel };