@likec4/diagram 1.55.1 → 1.57.0

package/dist/likec4diagram/custom/nodes/NodeNotes.js

@@ -1,286 +1,228 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { hasProp, RichText } from '@likec4/core';
-import { stringHash } from '@likec4/core/utils';
-import { cx, css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { nodeNotes } from '@likec4/styles/recipes';
-import { ScrollAreaAutosize } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { ViewportPortal } from '@xyflow/react';
-import { AnimatePresence, m } from 'motion/react';
-import { isEmptyish, clamp } from 'remeda';
-import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
-import { Markdown } from '../../../base-primitives/Markdown.js';
-import { useOnDiagramEvent } from '../../../hooks/useDiagram.js';
-
+import "../../../_virtual/_rolldown/runtime.js";
+import { useCallbackRef as useCallbackRef$1 } from "../../../hooks/useCallbackRef.js";
+import { useOnDiagramEvent } from "../../../hooks/useDiagram.js";
+import { Markdown } from "../../../base-primitives/Markdown.js";
+import { css, cx } from "@likec4/styles/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ViewportPortal } from "@xyflow/react";
+import { clamp, isEmptyish } from "remeda";
+import { RichText, hasProp } from "@likec4/core";
+import { ScrollAreaAutosize } from "@mantine/core";
+import { stringHash } from "@likec4/core/utils";
+import { AnimatePresence, m } from "motion/react";
+import { useDisclosure } from "@mantine/hooks";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { nodeNotes } from "@likec4/styles/recipes";
+//#region src/likec4diagram/custom/nodes/NodeNotes.tsx
 function NodeNotes({ data }) {
-  if (!hasProp(data, "notes") || isEmptyish(data.notes.md || data.notes.txt)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(NodeNotesInternal2, { data });
+	if (!hasProp(data, "notes") || isEmptyish(data.notes.md || data.notes.txt)) return null;
+	return /* @__PURE__ */ jsx(NodeNotesInternal2, { data });
 }
 function stopPropagation(e) {
-  e.nativeEvent.stopImmediatePropagation();
-  e.stopPropagation();
+	e.nativeEvent.stopImmediatePropagation();
+	e.stopPropagation();
 }
 function NodeNotesInternal2({ data }) {
-  return /* @__PURE__ */ jsx(NodeNotesInternal, { data });
+	return /* @__PURE__ */ jsx(NodeNotesInternal, { data });
 }
 function NodeNotesInternal({ data }) {
-  const markdown = data.notes;
-  const width = clamp(data.width ?? 0, {
-    min: 250,
-    max: 500
-  });
-  clamp(data.height ?? 0, {
-    min: 200,
-    max: 600
-  });
-  const [expanded, handlers] = useDisclosure(false, {});
-  const id = stringHash(data.id + (markdown.md ?? markdown.txt));
-  const onClickCapture = useCallbackRef((e) => {
-    if (e) {
-      e.preventDefault();
-      if ("nativeEvent" in e) {
-        e.nativeEvent.stopImmediatePropagation();
-      }
-      e.stopPropagation();
-    }
-    handlers.toggle();
-  });
-  const hovered = data.hovered ?? false;
-  const layoutDependency = expanded;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-      /* @__PURE__ */ jsxs(
-        m.div,
-        {
-          className: cx(
-            "nopan nodrag",
-            nodeNotes({ opened: expanded })
-          ),
-          variants: variants.root,
-          initial: "initial",
-          animate: expanded ? "expanded" : hovered ? "hovered" : "initial",
-          whileHover: "whileHover",
-          exit: "exit",
-          ...!expanded && { onPointerDownCapture: onClickCapture },
-          onMouseDownCapture: onClickCapture,
-          onClickCapture,
-          onClick: stopPropagation,
-          "data-state": expanded ? "expanded" : "collapsed",
-          children: [
-            /* @__PURE__ */ jsx(
-              m.div,
-              {
-                variants: variants.paper1,
-                className: "__paper __paper-back"
-              },
-              "paper-back"
-            ),
-            !expanded && /* @__PURE__ */ jsx(
-              m.div,
-              {
-                layout: true,
-                layoutId: id,
-                variants: variants.paper2,
-                "data-state": expanded ? "expanded" : "collapsed",
-                className: "__paper __paper-front"
-              },
-              id
-            )
-          ]
-        },
-        `node-notes-${id}`
-      ),
-      expanded && /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(
-        m.div,
-        {
-          layout: true,
-          layoutDependency,
-          layoutId: id,
-          className: css({
-            position: "absolute",
-            zIndex: 300,
-            top: "0",
-            left: "0",
-            display: "flex",
-            pointerEvents: "all",
-            rounded: "sm",
-            backgroundColor: "likec4.overlay.body",
-            padding: "0",
-            alignItems: "stretch",
-            justifyContent: "stretch",
-            overflow: "hidden",
-            width: "fit-content",
-            height: "fit-content",
-            maxHeight: "70cqh",
-            maxWidth: "50cqw"
-            // minHeight: '60cqh',
-          }),
-          "data-likec4-notes": id,
-          style: {
-            top: data.y + 20,
-            left: data.x + 10,
-            maxWidth: `min(calc(${width}px * 2), 50cqw)`
-            // minHeight: `max(${height}px, 60cqh)`,
-            // maxHeight: height,
-          },
-          onMouseDownCapture: stopPropagation,
-          onClickCapture: stopPropagation,
-          onClick: stopPropagation,
-          children: /* @__PURE__ */ jsx(
-            ScrollAreaAutosize,
-            {
-              component: m.div,
-              className: cx(
-                "nowheel",
-                css({
-                  flex: "1",
-                  padding: "xs",
-                  paddingRight: "xxs"
-                })
-              ),
-              children: /* @__PURE__ */ jsx(
-                Markdown,
-                {
-                  className: css({
-                    paddingRight: "xxs"
-                  }),
-                  value: RichText.from(markdown)
-                }
-              )
-            }
-          )
-        },
-        id
-      ) }, "portal")
-    ] }),
-    expanded && /* @__PURE__ */ jsx(
-      Catch,
-      {
-        data,
-        onCatchClick: onClickCapture
-      }
-    )
-  ] });
+	const markdown = data.notes;
+	const width = clamp(data.width ?? 0, {
+		min: 250,
+		max: 500
+	});
+	clamp(data.height ?? 0, {
+		min: 200,
+		max: 600
+	});
+	const [expanded, handlers] = useDisclosure(false, {});
+	const id = stringHash(data.id + (markdown.md ?? markdown.txt));
+	const onClickCapture = useCallbackRef$1((e) => {
+		if (e) {
+			e.preventDefault();
+			if ("nativeEvent" in e) e.nativeEvent.stopImmediatePropagation();
+			e.stopPropagation();
+		}
+		handlers.toggle();
+	});
+	const hovered = data.hovered ?? false;
+	const layoutDependency = expanded;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsxs(m.div, {
+		className: cx("nopan nodrag", nodeNotes({ opened: expanded })),
+		variants: variants.root,
+		initial: "initial",
+		animate: expanded ? "expanded" : hovered ? "hovered" : "initial",
+		whileHover: "whileHover",
+		exit: "exit",
+		...!expanded && { onPointerDownCapture: onClickCapture },
+		onMouseDownCapture: onClickCapture,
+		onClickCapture,
+		onClick: stopPropagation,
+		"data-state": expanded ? "expanded" : "collapsed",
+		children: [/* @__PURE__ */ jsx(m.div, {
+			variants: variants.paper1,
+			className: "__paper __paper-back"
+		}, "paper-back"), !expanded && /* @__PURE__ */ jsx(m.div, {
+			layout: true,
+			layoutId: id,
+			variants: variants.paper2,
+			"data-state": expanded ? "expanded" : "collapsed",
+			className: "__paper __paper-front"
+		}, id)]
+	}, `node-notes-${id}`), expanded && /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(m.div, {
+		layout: true,
+		layoutDependency,
+		layoutId: id,
+		className: css({
+			position: "absolute",
+			zIndex: 300,
+			top: "0",
+			left: "0",
+			display: "flex",
+			pointerEvents: "all",
+			rounded: "sm",
+			backgroundColor: "likec4.overlay.body",
+			padding: "0",
+			alignItems: "stretch",
+			justifyContent: "stretch",
+			overflow: "hidden",
+			width: "fit-content",
+			height: "fit-content",
+			maxHeight: "70cqh",
+			maxWidth: "50cqw"
+		}),
+		"data-likec4-notes": id,
+		style: {
+			top: data.y + 20,
+			left: data.x + 10,
+			maxWidth: `min(calc(${width}px * 2), 50cqw)`
+		},
+		onMouseDownCapture: stopPropagation,
+		onClickCapture: stopPropagation,
+		onClick: stopPropagation,
+		children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+			component: m.div,
+			className: cx("nowheel", css({
+				flex: "1",
+				padding: "xs",
+				paddingRight: "xxs"
+			})),
+			children: /* @__PURE__ */ jsx(Markdown, {
+				className: css({ paddingRight: "xxs" }),
+				value: RichText.from(markdown)
+			})
+		})
+	}, id) }, "portal")] }), expanded && /* @__PURE__ */ jsx(Catch, {
+		data,
+		onCatchClick: onClickCapture
+	})] });
 }
-const base_paper1 = {
-  rotateZ: "-5deg",
-  y: 0,
-  x: 1,
-  scale: 1,
-  originX: "55%",
-  originY: "80%"
+var base_paper1 = {
+	rotateZ: "-5deg",
+	y: 0,
+	x: 1,
+	scale: 1,
+	originX: "55%",
+	originY: "80%"
 };
-const base_paper2 = {
-  rotateZ: "3deg",
-  y: -2,
-  scale: 1,
-  backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 8%, #FFF)",
-  originX: "45%",
-  originY: "80%"
+var base_paper2 = {
+	rotateZ: "3deg",
+	y: -2,
+	scale: 1,
+	backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 8%, #FFF)",
+	originX: "45%",
+	originY: "80%"
 };
-const variants = {
-  root: {
-    initial: {
-      ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
-    },
-    hovered: {},
-    whileHover: {
-      ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)"
-    },
-    exit: {
-      ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
-    }
-  },
-  // PAPER BACK
-  paper1: {
-    initial: {
-      ...base_paper1,
-      rotateZ: "-3.5deg",
-      y: 1,
-      scale: 0.95
-    },
-    hovered: {
-      ...base_paper1
-    },
-    whileHover: {
-      ...base_paper1,
-      ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)",
-      scale: 1.04
-    },
-    expanded: {
-      ...base_paper1,
-      y: [0, 1, 20],
-      scale: 0.95
-    },
-    exit: {
-      ...base_paper1,
-      rotateZ: "-3.5deg",
-      y: 1,
-      scale: 0.95
-    }
-  },
-  // PAPER FRONT
-  paper2: {
-    initial: {
-      ...base_paper2,
-      rotateZ: "2deg",
-      y: 2,
-      scale: 0.95,
-      backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
-    },
-    hovered: {
-      ...base_paper2
-    },
-    whileHover: {
-      ...base_paper2,
-      scale: 1.08
-    },
-    expanded: {
-      ...base_paper2,
-      y: [0, 1, 20],
-      scale: 0.95
-    },
-    exit: {
-      ...base_paper2,
-      rotateZ: "2deg",
-      y: 2,
-      scale: 0.95,
-      backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
-    }
-  }
+var variants = {
+	root: {
+		initial: { ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)" },
+		hovered: {},
+		whileHover: { ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)" },
+		exit: { ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)" }
+	},
+	paper1: {
+		initial: {
+			...base_paper1,
+			rotateZ: "-3.5deg",
+			y: 1,
+			scale: .95
+		},
+		hovered: { ...base_paper1 },
+		whileHover: {
+			...base_paper1,
+			["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)",
+			scale: 1.04
+		},
+		expanded: {
+			...base_paper1,
+			y: [
+				0,
+				1,
+				20
+			],
+			scale: .95
+		},
+		exit: {
+			...base_paper1,
+			rotateZ: "-3.5deg",
+			y: 1,
+			scale: .95
+		}
+	},
+	paper2: {
+		initial: {
+			...base_paper2,
+			rotateZ: "2deg",
+			y: 2,
+			scale: .95,
+			backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
+		},
+		hovered: { ...base_paper2 },
+		whileHover: {
+			...base_paper2,
+			scale: 1.08
+		},
+		expanded: {
+			...base_paper2,
+			y: [
+				0,
+				1,
+				20
+			],
+			scale: .95
+		},
+		exit: {
+			...base_paper2,
+			rotateZ: "2deg",
+			y: 2,
+			scale: .95,
+			backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
+		}
+	}
 };
-function Catch({
-  data,
-  onCatchClick
-}) {
-  useOnDiagramEvent("paneClick", () => {
-    onCatchClick();
-  });
-  return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      css: {
-        display: "block",
-        position: "absolute",
-        zIndex: 200,
-        pointerEvents: "all",
-        left: "0",
-        top: "0",
-        cursor: "zoom-out"
-      },
-      style: {
-        transform: `translate(${data.x - 40}px, ${data.y - 40}px)`,
-        width: (data.width ?? 250) + 80,
-        height: (data.height ?? 200) + 80
-      },
-      onMouseDownCapture: onCatchClick,
-      onClickCapture: onCatchClick,
-      onClick: stopPropagation
-    }
-  ) }, "catch-all");
+function Catch({ data, onCatchClick }) {
+	useOnDiagramEvent("paneClick", () => {
+		onCatchClick();
+	});
+	return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(Box$1, {
+		css: {
+			display: "block",
+			position: "absolute",
+			zIndex: 200,
+			pointerEvents: "all",
+			left: "0",
+			top: "0",
+			cursor: "zoom-out"
+		},
+		style: {
+			transform: `translate(${data.x - 40}px, ${data.y - 40}px)`,
+			width: (data.width ?? 250) + 80,
+			height: (data.height ?? 200) + 80
+		},
+		onMouseDownCapture: onCatchClick,
+		onClickCapture: onCatchClick,
+		onClick: stopPropagation
+	}) }, "catch-all");
 }
-
+//#endregion
 export { NodeNotes };