@likec4/diagram 1.48.0 → 1.50.0

package/dist/likec4diagram/DiagramXYFlow.js

@@ -3,12 +3,11 @@ import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useTimeout, useDebouncedCallback } from '@mantine/hooks';
 import { useCustomCompareMemo } from '@react-hookz/web';
-import { shallowEqual } from 'fast-equals';
 import { isEmpty } from 'remeda';
 import { memoNode } from '../base-primitives/memoNode.js';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
 import { useIsReducedGraphics, usePanningAtom } from '../context/RootContainerContext.js';
-import { useDiagramActorSnapshot } from '../hooks/useDiagram.js';
+import { useDiagramSnapshot, selectDiagramActor } from '../hooks/useDiagram.js';
 import { depsShallowEqual, useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { BuiltinEdges, BuiltinNodes } from './custom/index.js';
 import { deriveToggledFeatures } from './state/machine.setup.js';
@@ -53,7 +52,7 @@ const viewportToTopLeft = (ctx) => {
     zoom: 1
   };
 };
-const selectXYProps = ({ context: ctx, children }) => {
+const selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
   const { enableReadOnly } = deriveToggledFeatures(ctx);
   const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing !== "edge";
   let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
@@ -75,8 +74,7 @@ const selectXYProps = ({ context: ctx, children }) => {
       viewport: viewportToTopLeft(ctx)
     }
   };
-};
-const equalsXYProps = (a, b) => a.enableReadOnly === b.enableReadOnly && a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.nodesDraggable === b.nodesDraggable && a.nodesSelectable === b.nodesSelectable && a.enableFitView === b.enableFitView && shallowEqual(a.fitViewPadding, b.fitViewPadding) && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
+});
 function LikeC4DiagramXYFlow({
   background = "dots",
   reactFlowProps = {},
@@ -93,7 +91,7 @@ function LikeC4DiagramXYFlow({
     nodesDraggable,
     nodesSelectable,
     ...props
-  } = useDiagramActorSnapshot(selectXYProps, equalsXYProps);
+  } = useDiagramSnapshot(selectXYProps);
   const {
     onNodeContextMenu,
     onCanvasContextMenu,
@@ -108,7 +106,7 @@ function LikeC4DiagramXYFlow({
   }, isReducedGraphics ? 200 : 800), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
     $isPanning.set(false);
-  }, { delay: 200 }), onMove = useCallbackRef((event) => {
+  }, 200), onMove = useCallbackRef((event) => {
     if (!event) {
       isPanning.clear();
       return;

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -217,8 +217,7 @@ const RelationshipEdge = memoEdge((props) => {
         onStartMove: onControlPointerStartMove,
         onCancelMove: onControlPointerCancelMove,
         onFinishMove: onControlPointerFinishMove,
-        onDelete: onControlPointerDelete,
-        zIndex: 9999
+        onDelete: onControlPointerDelete
       }
     )
   ] });
@@ -232,35 +231,35 @@ function ControlPoints({
   onStartMove,
   onCancelMove,
   onFinishMove,
-  onDelete,
-  zIndex
+  onDelete
 }) {
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
   const edgeId = edgeProps.data.id;
+  const controlPointsRef = useRef(controlPoints);
+  controlPointsRef.current = controlPoints;
   const onLmbControlPointerDown = (index, e, domNode) => {
     let hasMoved = false;
-    let pointer = { x: e.clientX, y: e.clientY };
+    let initialPoint = { x: e.clientX, y: e.clientY };
+    let clientPoint = { ...initialPoint };
     let animationFrameId = null;
-    let cp = controlPoints;
+    let cp = [...controlPointsRef.current];
     const onPointerMove = (e2) => {
-      const clientPoint = {
-        x: e2.clientX,
-        y: e2.clientY
-      };
-      if (!isSamePoint(pointer, clientPoint)) {
+      clientPoint.x = e2.clientX;
+      clientPoint.y = e2.clientY;
+      const isDragging = !isSamePoint(initialPoint, clientPoint);
+      if (isDragging) {
         if (!hasMoved) {
           hasMoved = true;
           onStartMove();
         }
-        pointer = clientPoint;
         animationFrameId ??= requestAnimationFrame(() => {
           animationFrameId = null;
-          cp = cp.slice();
-          const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false });
+          const { x, y } = xyflow.screenToFlowPosition(clientPoint, { snapToGrid: false });
+          cp = [...cp];
           cp[index] = {
-            x: Math.round(x),
-            y: Math.round(y)
+            x: Math.trunc(x),
+            y: Math.trunc(y)
           };
           onMove(cp);
         });
@@ -275,6 +274,9 @@ function ControlPoints({
       domNode.removeEventListener("click", stopAndPrevent, {
         capture: true
       });
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+      }
       if (hasMoved) {
         onFinishMove(cp);
       } else {
@@ -294,11 +296,11 @@ function ControlPoints({
     });
   };
   const onRmbControlPointerDown = (index, e) => {
-    if (controlPoints.length <= 1 || index >= controlPoints.length) {
+    const newControlPoints = [...controlPointsRef.current];
+    if (newControlPoints.length <= 1 || index >= newControlPoints.length) {
       return;
     }
     stopAndPrevent(e);
-    const newControlPoints = controlPoints.slice();
     newControlPoints.splice(index, 1);
     setTimeout(() => {
       onDelete(newControlPoints);
@@ -329,12 +331,12 @@ function ControlPoints({
     }
   });
   const onControlPointerDblClick = useCallbackRef((e) => {
-    const { domNode } = xyflowStore.getState();
-    if (!domNode || e.pointerType !== "mouse") {
+    if (e.pointerType !== "mouse") {
       return;
     }
     const index = parseFloat(e.currentTarget.getAttribute("data-control-point-index") || "");
     if (isNaN(index)) {
+      console.error(e.currentTarget);
       throw new Error("data-control-point-index is not a number");
     }
     onRmbControlPointerDown(index, e);
@@ -345,10 +347,6 @@ function ControlPoints({
       component: "svg",
       className: controlPointsContainer,
       ...edgeProps,
-      style: {
-        ...edgeProps.style,
-        zIndex
-      },
       children: /* @__PURE__ */ jsx(
         "g",
         {

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -9,7 +9,8 @@ const controlPointsContainer = css({
   mixBlendMode: {
     _dark: "screen",
     _light: "multiply"
-  }
+  },
+  zIndex: "[100]"
 });
 const controlPoint = css({
   fill: `[var(--xy-edge-stroke)]`,

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.js

@@ -1,13 +1,14 @@
-import { nonNullable, vector } from '@likec4/core';
+import { vector } from '@likec4/core/geometry';
+import { nonNullable } from '@likec4/core/utils';
 import { getNodeDimensions } from '@xyflow/system';
 import { line, curveCatmullRomOpen } from 'd3-shape';
 import { shallowEqual } from 'fast-equals';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { isTruthy, first, last } from 'remeda';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
 import { bezierPath, getNodeIntersectionFromCenterToPoint } from '../../../utils/xyflow.js';
 
-const curve = line().curve(curveCatmullRomOpen.alpha(0.7)).x((d) => Math.round(d.x)).y((d) => Math.round(d.y));
+const curve = line().curve(curveCatmullRomOpen.alpha(0.7)).x((d) => Math.trunc(d.x)).y((d) => Math.trunc(d.y));
 function useRelationshipEdgePath({
   props: {
     sourceX,
@@ -31,63 +32,47 @@ function useRelationshipEdgePath({
       const sourceNode = getNodeDimensions(nonNullable(nodeLookup.get(source), `source node ${source} not found`));
       const targetNode = getNodeDimensions(nonNullable(nodeLookup.get(target), `target node ${target} not found`));
       return [
-        Math.round(sourceNode.width),
-        Math.round(sourceNode.height),
-        Math.round(targetNode.width),
-        Math.round(targetNode.height)
+        Math.ceil(sourceNode.width),
+        Math.ceil(sourceNode.height),
+        Math.ceil(targetNode.width),
+        Math.ceil(targetNode.height)
       ];
     }, [source, target]),
     shallowEqual
   );
   const isModified = isTruthy(data.controlPoints) || isControlPointDragging;
-  return useMemo(
-    () => {
-      if (!isModified) {
-        return bezierPath(data.points);
-      }
-      const sourceCenterPos = { x: sourceX, y: sourceY };
-      const targetCenterPos = { x: targetX, y: targetY };
-      const sourceNd = {
-        ...vector(sourceX, sourceY).subtract(vector(sourceNodeWidth, sourceNodeHeight).divide(2)).round().toObject(),
-        width: sourceNodeWidth,
-        height: sourceNodeHeight
-      };
-      const targetNd = {
-        ...vector(targetX, targetY).subtract(vector(targetNodeWidth, targetNodeHeight).divide(2)).round().toObject(),
-        width: targetNodeWidth,
-        height: targetNodeHeight
-      };
-      const nodeMargin = 6;
-      const points = data.dir === "back" ? [
-        targetCenterPos,
-        getNodeIntersectionFromCenterToPoint(targetNd, first(controlPoints) ?? sourceCenterPos, nodeMargin),
-        ...controlPoints,
-        getNodeIntersectionFromCenterToPoint(sourceNd, last(controlPoints) ?? targetCenterPos, nodeMargin),
-        sourceCenterPos
-      ] : [
-        sourceCenterPos,
-        getNodeIntersectionFromCenterToPoint(sourceNd, first(controlPoints) ?? targetCenterPos, nodeMargin),
-        ...controlPoints,
-        getNodeIntersectionFromCenterToPoint(targetNd, last(controlPoints) ?? sourceCenterPos, nodeMargin),
-        targetCenterPos
-      ];
-      return nonNullable(curve(points));
-    },
-    [
-      data.points,
-      isModified,
-      isModified ? sourceX : void 0,
-      isModified ? sourceY : void 0,
-      isModified ? targetX : void 0,
-      isModified ? targetY : void 0,
-      isModified ? sourceNodeWidth : void 0,
-      isModified ? sourceNodeHeight : void 0,
-      isModified ? targetNodeWidth : void 0,
-      isModified ? targetNodeHeight : void 0,
-      isModified ? data.dir : void 0,
-      isModified ? controlPoints : void 0
-    ]
-  );
+  if (!isModified) {
+    return bezierPath(data.points);
+  }
+  const sourceCenterPos = vector(sourceX, sourceY).trunc();
+  const targetCenterPos = vector(targetX, targetY).trunc();
+  const sourceNd = {
+    // Calculate node top-left from center position
+    ...sourceCenterPos.subtract(vector(sourceNodeWidth, sourceNodeHeight).divide(2)).trunc().toObject(),
+    width: sourceNodeWidth,
+    height: sourceNodeHeight
+  };
+  const targetNd = {
+    // Calculate node top-left from center position
+    ...targetCenterPos.subtract(vector(targetNodeWidth, targetNodeHeight).divide(2)).trunc().toObject(),
+    width: targetNodeWidth,
+    height: targetNodeHeight
+  };
+  const nodeMargin = 6;
+  const points = data.dir === "back" ? [
+    targetCenterPos,
+    getNodeIntersectionFromCenterToPoint(targetNd, first(controlPoints) ?? sourceCenterPos, nodeMargin),
+    ...controlPoints,
+    getNodeIntersectionFromCenterToPoint(sourceNd, last(controlPoints) ?? targetCenterPos, nodeMargin),
+    sourceCenterPos
+  ] : [
+    sourceCenterPos,
+    getNodeIntersectionFromCenterToPoint(sourceNd, first(controlPoints) ?? targetCenterPos, nodeMargin),
+    ...controlPoints,
+    getNodeIntersectionFromCenterToPoint(targetNd, last(controlPoints) ?? sourceCenterPos, nodeMargin),
+    targetCenterPos
+  ];
+  return nonNullable(curve(points));
 }
 
 export { useRelationshipEdgePath };

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

@@ -5,8 +5,8 @@ import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 function ElementActions({

package/dist/likec4diagram/custom/nodes/NodeDrifts.d.ts

@@ -1,6 +1,5 @@
 import { Types } from '../../types';
 export type NodeDriftsProps = {
     nodeProps: Types.NodeProps;
-    position?: 'top' | 'bottom';
 };
-export declare function NodeDrifts({ nodeProps: { data }, position, }: NodeDriftsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NodeDrifts({ nodeProps: { data }, }: NodeDriftsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,17 +1,13 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { Box } from '@likec4/styles/jsx';
-import { Notification, Text } from '@mantine/core';
-import { Position, NodeToolbar } from '@xyflow/react';
 
 function NodeDrifts({
-  nodeProps: { data },
-  position = "bottom"
+  nodeProps: { data }
 }) {
   const drifts = data.drifts;
   if (!drifts || drifts.length === 0) {
     return null;
   }
-  const toolbarPosition = position === "top" ? Position.Top : Position.Bottom;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -24,20 +20,7 @@ function NodeDrifts({
           outlineStyle: "dashed",
           outlineOffset: "1.5"
         }
-      },
-      children: /* @__PURE__ */ jsx(NodeToolbar, { isVisible: data.hovered === true, align: "start", position: toolbarPosition, children: /* @__PURE__ */ jsx(
-        Notification,
-        {
-          color: "orange",
-          withBorder: false,
-          withCloseButton: false,
-          title: "Changes:",
-          children: drifts.map((drift) => /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
-            "- ",
-            drift
-          ] }, drift))
-        }
-      ) })
+      }
     }
   );
 }

package/dist/likec4diagram/custom/nodes/NodeNotes.d.ts

@@ -0,0 +1,6 @@
+import { BaseNodePropsWithData } from '../../../base/types';
+import { Types } from '../../types';
+type RequiredData = Pick<Types.NodeData, 'id' | 'notes' | 'width' | 'height' | 'x' | 'y'>;
+export type NodeNotesProps = BaseNodePropsWithData<RequiredData>;
+export declare function NodeNotes({ data }: NodeNotesProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,286 @@
+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';
+
+function NodeNotes({ 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();
+}
+function NodeNotesInternal2({ 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 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%"
+};
+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)"
+    }
+  }
+};
+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");
+}
+
+export { NodeNotes };

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

@@ -6,6 +6,7 @@ import { isTruthy } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { ElementActions } from './ElementActions.js';
 import { NodeDrifts } from './NodeDrifts.js';
+import { NodeNotes } from './NodeNotes.js';
 import { ElementDetailsButtonWithHandler } from './nodes.js';
 import { ElementToolbar } from './toolbar/ElementToolbar.js';
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
@@ -70,7 +71,7 @@ const ActorStepPort = ({
 };
 const hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
 function SequenceActorNode(props) {
-  const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
   const data = props.data;
   const {
     id,
@@ -114,7 +115,8 @@ function SequenceActorNode(props) {
         /* @__PURE__ */ jsx(ElementActions, { ...props }),
         enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { id, data }),
         !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props })
-      ] })
+      ] }),
+      enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props })
     ] }),
     ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, { port: p, data: props.data }, p.id))
   ] });