likec4 0.44.1 → 0.45.0

package/dist/@likec4/diagrams/components/primitives/fullscreen/FullscreenDiagram.js

@@ -12,23 +12,24 @@ const StyleOverlay = {
   left: 0,
   right: 0,
   bottom: 0,
-  backgroundColor: "var(--likec4-browser-overlay-bg, rgba(18,18,18,0.8))",
+  backgroundColor: "var(--likec4-browser-overlay-bg, rgba(18,18,18,0.9))",
   backdropFilter: "var(--likec4-browser-backdrop, blur(4px))",
   zIndex: "var(--likec4-overlay-z-index, 100)",
-  display: "flex",
-  placeContent: "strech",
-  placeItems: "strech",
-  touchAction: "pan-x pan-y pinch-zoom",
   boxSizing: "border-box",
   margin: 0,
   padding: 0,
   border: "0 solid transparent"
 };
 const StyleContainer = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   margin: 0,
   padding: 0,
-  flex: "1 1 100%",
-  overflow: "hidden"
+  overflow: "hidden",
+  touchAction: "pan-x pan-y pinch-zoom"
 };
 export function FullscreenDiagram({
   diagram,

package/dist/@likec4/diagrams/diagram/Diagram.js

@@ -8,7 +8,7 @@ import { AnimatedStage, Layer } from "../konva.js";
 import { Edges } from "./Edges.js";
 import { createUseGesture, dragAction, pinchAction } from "@use-gesture/react";
 import { Nodes } from "./Nodes.js";
-import { DiagramGesture } from "./state/index.js";
+import { DiagramGesture, useResetHoveredStates } from "./state/index.js";
 const useGesture = createUseGesture([dragAction, pinchAction]);
 const useSyncedRef = (value) => {
   const ref = useRef(value);
@@ -42,6 +42,8 @@ export const Diagram = /* @__PURE__ */ forwardRef(
     onStageContextMenu,
     width: _width,
     height: _height,
+    minZoom = 0.2,
+    maxZoom = 1.1,
     ...props
   }, ref) => {
     const immediate = !animate;
@@ -62,7 +64,7 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       const viewRect = {
         width: Math.min(container?.clientWidth ?? width, width) - paddingLeft - paddingRight,
         height: Math.min(container?.clientHeight ?? height, height) - paddingTop - paddingBottom
-      }, viewScale = Math.min(viewRect.width / centerTo.width, viewRect.height / centerTo.height), scale = clamp(0.1, 1.1, viewScale), centeringAjustment = {
+      }, viewScale = Math.min(viewRect.width / centerTo.width, viewRect.height / centerTo.height), scale = clamp(minZoom, maxZoom, viewScale), centeringAjustment = {
         x: ((width - centerTo.width) * scale + viewRect.width) / 2,
         y: ((height - centerTo.height) * scale + viewRect.height) / 2
       }, finalPosition = {
@@ -147,6 +149,10 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       }),
       [refs, id, stageRef]
     );
+    const resetHoveredStates = useResetHoveredStates();
+    useUpdateEffect(() => {
+      resetHoveredStates();
+    }, [id]);
     useUpdateEffect(() => {
       refs.current.centerAndFit(80, 650);
     }, [id, height, width]);
@@ -213,21 +219,26 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       {
         target: containerRef,
         drag: {
+          target: containerRef,
           enabled: pannable,
           threshold: 4,
           from: () => [stageProps.x.get(), stageProps.y.get()],
           pointer: {
             buttons: -1,
-            keys: false
+            keys: false,
+            touch: true,
+            capture: true
           }
         },
         pinch: {
+          target: containerRef,
           pointer: {
             touch: true
           },
           enabled: zoomable,
-          scaleBounds: { min: 0.1, max: 1.4 },
-          rubberband: 0.05,
+          // eventOptions
+          scaleBounds: { min: minZoom, max: maxZoom + 0.4 },
+          rubberband: 0.04,
           pinchOnWheel: true
         }
       }

package/dist/@likec4/diagrams/diagram/Edges.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { DefaultRelationshipColor } from "@likec4/core";
+import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
 import { useTransition } from "@react-spring/konva";
 import { scale, toHex } from "khroma";
 import { memoize } from "rambdax";
-import { useCallback } from "react";
-import { Group } from "../konva.js";
-import { EdgeShape } from "./shapes/Edge.js";
+import { memo, useCallback } from "react";
+import { AnimatedGroup } from "../konva.js";
+import { Edge } from "./shapes/Edge.js";
 import { mouseDefault, mousePointer } from "./shapes/utils.js";
 import { DiagramGesture, useHoveredEdgeId, useSetHoveredEdge } from "./state/index.js";
 const edgeColors = memoize((colors, isHovered) => {
@@ -13,13 +14,13 @@ const edgeColors = memoize((colors, isHovered) => {
     return {
       lineColor: toHex(
         scale(colors.lineColor, {
-          l: 25,
-          s: -5
+          l: 30
         })
       ),
       labelColor: toHex(
         scale(colors.labelColor, {
-          l: 40
+          l: 40,
+          s: 5
         })
       ),
       labelBgColor: toHex(
@@ -34,7 +35,6 @@ const edgeColors = memoize((colors, isHovered) => {
 });
 export function Edges({ animate, theme, diagram, onEdgeClick }) {
   const hoveredEdgeId = useHoveredEdgeId();
-  const setHoveredEdge = useSetHoveredEdge();
   const edgeSprings = useCallback(
     (edge, isHovered = false) => {
       return {
@@ -83,9 +83,25 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
     // to avoid any issues with diagram-to-diagram transitions
     keys: (e) => e.id + diagram.id
   });
-  return edgeTransitions((springs, edge, { key }) => /* @__PURE__ */ jsx(
-    Group,
+  return edgeTransitions((_, edge, { key, ctrl }) => /* @__PURE__ */ jsx(
+    EdgeShape,
+    {
+      animate,
+      edge,
+      isHovered: hoveredEdgeId === edge.id,
+      theme,
+      ctrl,
+      onEdgeClick
+    },
+    key
+  ));
+}
+const EdgeShape = memo(({ animate, edge, ctrl, theme, isHovered, onEdgeClick }) => {
+  const setHoveredEdge = useSetHoveredEdge();
+  return /* @__PURE__ */ jsx(
+    AnimatedGroup,
     {
+      opacity: ctrl.springs.opacity,
       onPointerClick: (e) => {
         if (!onEdgeClick || DiagramGesture.isDragging || e.evt.button !== 0) {
           return;
@@ -104,16 +120,16 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
         mouseDefault(e);
       },
       children: /* @__PURE__ */ jsx(
-        EdgeShape,
+        Edge,
         {
           animate,
           edge,
-          isHovered: hoveredEdgeId === edge.id,
+          isHovered,
           theme,
-          springs
+          springs: ctrl.springs
         }
       )
-    },
-    key
-  ));
-}
+    }
+  );
+}, isEqualSimple);
+EdgeShape.displayName = "EdgeShape";

package/dist/@likec4/diagrams/diagram/Nodes.js

@@ -1,7 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
+import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
 import { useTransition } from "@react-spring/konva";
-import { useRef } from "react";
+import { memo, useRef } from "react";
 import { AnimatedGroup } from "../konva.js";
 import { Portal } from "../konva-portal.js";
 import { ZoomInIcon } from "./icons/index.js";
@@ -115,7 +116,7 @@ export function Nodes({ animate, theme, diagram, onNodeClick }) {
     keys: keyOf
   });
   return nodeTransitions((_, node, { key, ctrl, expired }) => /* @__PURE__ */ jsx(
-    NodeSnape,
+    NodeShape,
     {
       animate,
       node,
@@ -128,81 +129,78 @@ export function Nodes({ animate, theme, diagram, onNodeClick }) {
     key
   ));
 }
-function NodeSnape({
-  animate,
-  node,
-  ctrl,
-  theme,
-  isHovered,
-  expired,
-  onNodeClick
-}) {
-  const setHoveredNode = useSetHoveredNode();
-  const _isCompound = isCompound(node);
-  const isNavigatable = !!node.navigateTo && !!onNodeClick;
-  const Shape = nodeShape(node);
-  const springs = ctrl.springs;
-  return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !_isCompound, children: /* @__PURE__ */ jsxs(
-    AnimatedGroup,
-    {
-      name: node.id,
-      visible: expired !== true,
-      ...animate && {
-        onPointerEnter: (e) => {
-          setHoveredNode(node);
-          if (isNavigatable) {
-            mousePointer(e);
+const NodeShape = memo(
+  ({ animate, node, ctrl, theme, isHovered, expired, onNodeClick }) => {
+    const setHoveredNode = useSetHoveredNode();
+    const _isCompound = isCompound(node);
+    const isNavigatable = !!node.navigateTo && !!onNodeClick;
+    const Shape = nodeShape(node);
+    const springs = ctrl.springs;
+    let zoomInIconY;
+    switch (node.shape) {
+      case "browser":
+      case "mobile":
+        zoomInIconY = node.size.height - 20;
+        break;
+      default:
+        zoomInIconY = node.size.height - 16;
+    }
+    return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !_isCompound, children: /* @__PURE__ */ jsxs(
+      AnimatedGroup,
+      {
+        name: node.id,
+        visible: expired !== true,
+        ...animate && {
+          onPointerEnter: (e) => {
+            setHoveredNode(node);
+            if (isNavigatable) {
+              mousePointer(e);
+            }
+          },
+          onPointerLeave: (e) => {
+            setHoveredNode(null);
+            mouseDefault(e);
           }
         },
-        onPointerLeave: (e) => {
-          setHoveredNode(null);
-          mouseDefault(e);
-        }
-      },
-      ...onNodeClick && {
-        onPointerClick: (e) => {
-          if (DiagramGesture.isDragging || e.evt.button !== 0) {
-            return;
-          }
-          e.cancelBubble = true;
-          onNodeClick(node, e);
-        }
-      },
-      x: springs.x,
-      y: springs.y,
-      offsetX: springs.offsetX,
-      offsetY: springs.offsetY,
-      width: springs.width,
-      height: springs.height,
-      scaleX: springs.scaleX,
-      scaleY: springs.scaleY,
-      opacity: springs.opacity,
-      children: [
-        _isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            CompoundShape,
-            {
-              node,
-              theme,
-              springs,
-              labelOffsetX: isNavigatable ? -12 : 4
+        ...onNodeClick && {
+          onPointerClick: (e) => {
+            if (DiagramGesture.isDragging || e.evt.button !== 0) {
+              return;
             }
-          ),
-          isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { fill: "#BABABA", opacity: 0.9, size: 16, x: 16, y: 17 })
-        ] }),
-        !_isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered }),
-          isNavigatable && /* @__PURE__ */ jsx(
-            ZoomInIcon,
-            {
-              fill: "#BABABA",
-              size: 16,
-              x: node.size.width / 2,
-              y: node.size.height - 20
-            }
-          )
-        ] })
-      ]
-    }
-  ) });
-}
+            e.cancelBubble = true;
+            onNodeClick(node, e);
+          }
+        },
+        x: springs.x,
+        y: springs.y,
+        offsetX: springs.offsetX,
+        offsetY: springs.offsetY,
+        width: springs.width,
+        height: springs.height,
+        scaleX: springs.scaleX,
+        scaleY: springs.scaleY,
+        opacity: springs.opacity,
+        children: [
+          _isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              CompoundShape,
+              {
+                node,
+                theme,
+                springs,
+                labelOffsetX: isNavigatable ? -18 : 0
+              }
+            ),
+            isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { opacity: 0.9, size: 18, x: 18, y: 22 })
+          ] }),
+          !_isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered }),
+            isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { size: 16, x: node.size.width / 2, y: zoomInIconY })
+          ] })
+        ]
+      }
+    ) });
+  },
+  isEqualSimple
+);
+NodeShape.displayName = "NodeShape";

package/dist/@likec4/diagrams/diagram/icons/ZoomIn.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Path } from "../../konva.js";
-export const ZoomInIcon = ({ fill, opacity = 1, size = 20, x, y }) => {
+export const ZoomInIcon = ({ fill = "#BABABA", opacity = 1, size = 20, x, y }) => {
   const originalSize = 15;
   const scale = size / originalSize;
   const offsetIcon = originalSize / 2;
@@ -20,8 +20,7 @@ export const ZoomInIcon = ({ fill, opacity = 1, size = 20, x, y }) => {
       width: originalSize,
       height: originalSize,
       opacity,
-      globalCompositeOperation: "luminosity",
-      hitStrokeWidth: 5
+      globalCompositeOperation: "luminosity"
     }
   );
 };

package/dist/@likec4/diagrams/diagram/shapes/Browser.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatedCircle, AnimatedRect } from "../../konva.js";
 import { useShadowSprings } from "../springs.js";
-import { AnimatedRect, Circle } from "../../konva.js";
+import { NodeIcon } from "./NodeIcon.js";
 import { NodeLabels } from "./NodeLabel.js";
 export function BrowserShape({ node, theme, springs, isHovered }) {
-  const colors = theme.elements[node.color];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       AnimatedRect,
@@ -13,12 +13,43 @@ export function BrowserShape({ node, theme, springs, isHovered }) {
         strokeEnabled: false,
         width: springs.width,
         height: springs.height,
-        fill: springs.stroke
+        fill: springs.stroke,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnimatedCircle,
+      {
+        x: 16,
+        y: 15,
+        radius: 7,
+        fill: springs.fill,
+        listening: false,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnimatedCircle,
+      {
+        x: 36,
+        y: 15,
+        radius: 7,
+        fill: springs.fill,
+        listening: false,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnimatedCircle,
+      {
+        x: 56,
+        y: 15,
+        radius: 7,
+        fill: springs.fill,
+        listening: false,
+        perfectDrawEnabled: false
       }
     ),
-    /* @__PURE__ */ jsx(Circle, { x: 16, y: 15, radius: 7, fill: colors.fill, listening: false }),
-    /* @__PURE__ */ jsx(Circle, { x: 36, y: 15, radius: 7, fill: colors.fill, listening: false }),
-    /* @__PURE__ */ jsx(Circle, { x: 56, y: 15, radius: 7, fill: colors.fill, listening: false }),
     /* @__PURE__ */ jsx(
       AnimatedRect,
       {
@@ -28,7 +59,8 @@ export function BrowserShape({ node, theme, springs, isHovered }) {
         width: springs.width.to((w) => w - 80),
         height: 16,
         fill: springs.fill,
-        listening: false
+        listening: false,
+        perfectDrawEnabled: false
       }
     ),
     /* @__PURE__ */ jsx(
@@ -40,9 +72,11 @@ export function BrowserShape({ node, theme, springs, isHovered }) {
         width: springs.width.to((w) => w - 18),
         height: springs.height.to((h) => h - 40),
         fill: springs.fill,
-        listening: false
+        listening: false,
+        perfectDrawEnabled: false
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetY: -8 })
+    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetY: -6 }),
+    /* @__PURE__ */ jsx(NodeIcon, { node, paddingY: 42 })
   ] });
 }

package/dist/@likec4/diagrams/diagram/shapes/Compound.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedRect, AnimatedText } from "../../konva.js";
-export function CompoundShape({ node, theme, springs, labelOffsetX = 4 }) {
+import { AnimatedRect, Text } from "../../konva.js";
+export function CompoundShape({ node, theme, springs, labelOffsetX = 0 }) {
   const { labels } = node;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -21,25 +21,23 @@ export function CompoundShape({ node, theme, springs, labelOffsetX = 4 }) {
       }
     ),
     labels.map(({ pt: [x, y], ...label }, i) => /* @__PURE__ */ jsx(
-      AnimatedText,
+      Text,
       {
-        x,
-        y: y - 4,
+        x: x - 6,
+        y: y - 8,
         offsetX: labelOffsetX,
-        offsetY: label.fontSize / 2,
-        width: springs.width.to((v) => v - x - 4),
+        width: node.size.width - x - 8 - 6 + labelOffsetX,
         fill: "#BABABA",
         fontFamily: theme.font,
         fontSize: label.fontSize,
         fontStyle: label.fontStyle ?? "normal",
-        letterSpacing: 0.8,
+        letterSpacing: 0.75,
         align: label.align,
         text: label.text,
         wrap: "none",
         ellipsis: true,
         perfectDrawEnabled: false,
-        padding: 6,
-        hitStrokeWidth: 3,
+        padding: 8,
         globalCompositeOperation: "luminosity"
       },
       i

package/dist/@likec4/diagrams/diagram/shapes/Cylinder.js

@@ -3,6 +3,7 @@ import { useSpring } from "@react-spring/konva";
 import { AnimatedEllipse, AnimatedPath } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
 import { useShadowSprings } from "../springs.js";
+import { NodeIcon } from "./NodeIcon.js";
 function cylinderSVGPath(diameter, height, tilt = 0.0825) {
   const radius = Math.round(diameter / 2);
   const rx = radius;
@@ -51,6 +52,7 @@ export function CylinderShape({ node, theme, springs, isHovered }) {
         fill: springs.stroke
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, offsetY: -ry * (node.icon ? 1.5 : 0.5), theme })
+    /* @__PURE__ */ jsx(NodeLabels, { node, offsetY: -4 - ry * (node.icon ? 1 : 0), theme }),
+    /* @__PURE__ */ jsx(NodeIcon, { node, paddingY: ry + 4, offsetY: -ry - 8 })
   ] });
 }

package/dist/@likec4/diagrams/diagram/shapes/Edge.js

@@ -16,7 +16,6 @@ function EdgeArrow({
   return /* @__PURE__ */ jsx(
     AnimatedLine,
     {
-      opacity: springs.opacity,
       points: points.flat(),
       closed: true,
       fill: isOutline ? void 0 : springs.lineColor,
@@ -25,6 +24,7 @@ function EdgeArrow({
       hitStrokeWidth: 5,
       lineCap: "round",
       lineJoin: "miter",
+      perfectDrawEnabled: false,
       globalCompositeOperation
     }
   );
@@ -42,7 +42,7 @@ function EdgeLabelBg({
       y: labelBBox.y - padding,
       width: labelBBox.width + padding * 2,
       height: labelBBox.height + padding * 2,
-      opacity: isHovered ? 0.25 : 0.1
+      opacity: isHovered ? 0.5 : 0.12
     },
     immediate: !animate
   });
@@ -50,6 +50,7 @@ function EdgeLabelBg({
     AnimatedRect,
     {
       ...props,
+      perfectDrawEnabled: false,
       fill: springs.labelBgColor,
       cornerRadius: 2,
       globalCompositeOperation: "darken",
@@ -57,7 +58,7 @@ function EdgeLabelBg({
     }
   );
 }
-export function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
+export function Edge({ animate = true, edge, theme, isHovered, springs }) {
   const {
     points,
     head,
@@ -82,7 +83,6 @@ export function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
     /* @__PURE__ */ jsx(
       AnimatedLine,
       {
-        opacity: springs.opacity,
         bezier: true,
         dashEnabled: isDashed,
         dashOffset: 1,
@@ -93,6 +93,7 @@ export function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
         hitStrokeWidth: 20,
         lineCap: "round",
         lineJoin: "round",
+        perfectDrawEnabled: false,
         globalCompositeOperation
       }
     ),
@@ -129,14 +130,13 @@ export function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
       AnimatedText,
       {
         x: label.pt[0],
-        y: label.pt[1],
-        offsetY: label.fontSize / 2,
-        opacity: springs.opacity,
+        y: label.pt[1] - label.fontSize,
         fill: springs.labelColor,
         fontFamily: theme.font,
         fontSize: label.fontSize,
         fontStyle: label.fontStyle ?? "normal",
         text: label.text,
+        perfectDrawEnabled: false,
         listening: false,
         globalCompositeOperation,
         shadowEnabled: springs.opacity.to((o) => o > 0.5),

package/dist/@likec4/diagrams/diagram/shapes/Mobile.js

@@ -1,9 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedRect, Circle } from "../../konva.js";
+import { AnimatedCircle, AnimatedRect } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
 import { useShadowSprings } from "../springs.js";
+import { NodeIcon } from "./NodeIcon.js";
 export function MobileShape({ node, theme, springs, isHovered }) {
   const colors = theme.elements[node.color];
+  const maxWidth = node.size.width - 40 - 30;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       AnimatedRect,
@@ -12,10 +14,21 @@ export function MobileShape({ node, theme, springs, isHovered }) {
         cornerRadius: 6,
         width: springs.width,
         height: springs.height,
-        fill: springs.stroke
+        fill: springs.stroke,
+        perfectDrawEnabled: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnimatedCircle,
+      {
+        x: 16,
+        y: node.size.height / 2,
+        radius: 10,
+        fill: springs.fill,
+        listening: false,
+        perfectDrawEnabled: false
       }
     ),
-    /* @__PURE__ */ jsx(Circle, { x: 16, y: node.size.height / 2, radius: 10, fill: colors.fill, listening: false }),
     /* @__PURE__ */ jsx(
       AnimatedRect,
       {
@@ -25,9 +38,11 @@ export function MobileShape({ node, theme, springs, isHovered }) {
         width: springs.width.to((w) => w - 43),
         height: springs.height.to((h) => h - 24),
         fill: springs.fill,
+        perfectDrawEnabled: false,
         listening: false
       }
     ),
-    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetX: -6 })
+    /* @__PURE__ */ jsx(NodeLabels, { node, theme, offsetX: -10, maxWidth }),
+    /* @__PURE__ */ jsx(NodeIcon, { node, offsetX: -10, maxWidth })
   ] });
 }