likec4 0.49.0 → 0.51.0

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

@@ -2,13 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { nonNullable, defaultTheme as theme } from "@likec4/core";
 import { useHookableRef, useUpdateEffect } from "@react-hookz/web/esm";
 import { useSpring } from "@react-spring/konva";
-import { clamp } from "rambdax";
+import { clamp, isNil } from "rambdax";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 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, useResetHoveredStates } from "./state/index.js";
+import { DiagramGesture, DiagramStateProvider, useResetHoveredStates } from "./state/index.js";
+import { isNumber } from "./utils.js";
 const useGesture = createUseGesture([dragAction, pinchAction]);
 const useSyncedRef = (value) => {
   const ref = useRef(value);
@@ -27,7 +28,7 @@ function diagramNodeId(konvaNode) {
   }
   return null;
 }
-export const Diagram = /* @__PURE__ */ forwardRef(
+const DiagramKonva = /* @__PURE__ */ forwardRef(
   ({
     diagram,
     padding = NoPadding,
@@ -56,15 +57,17 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       }
       return value;
     });
-    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = Array.isArray(padding) ? padding : [padding, padding, padding, padding];
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isNumber(padding) ? [padding, padding, padding, padding] : padding;
     const width = _width ?? diagram.width + paddingLeft + paddingRight;
     const height = _height ?? diagram.height + paddingTop + paddingBottom;
-    const toCenterOnRect = (centerTo) => {
+    const toCenterOnRect = (centerTo, opts) => {
+      const keepZoom = opts?.keepZoom ?? false;
       const container = containerRef.current;
+      const _maxZoom = keepZoom === true && !isNil(stageRef.current) ? stageRef.current.scaleX() : maxZoom;
       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(minZoom, maxZoom, 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 = {
@@ -88,18 +91,21 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       },
       []
     );
-    const centerOnRect = (centerTo) => {
+    const centerOnRect = (centerTo, opts) => {
       stageSpringApi.start({
-        to: toCenterOnRect(centerTo),
-        immediate
+        to: toCenterOnRect(centerTo, {
+          keepZoom: opts?.keepZoom ?? true
+        }),
+        delay: opts?.delay ?? 0,
+        immediate: immediate || (opts?.immediate ?? false)
       });
       return;
     };
-    const centerAndFit = (delay = 0) => {
+    const centerAndFit = (opts) => {
       stageSpringApi.start({
         to: toFitDiagram(),
-        delay,
-        immediate
+        delay: opts?.delay ?? 0,
+        immediate: immediate || (opts?.immediate ?? false)
       });
       return;
     };
@@ -137,25 +143,31 @@ export const Diagram = /* @__PURE__ */ forwardRef(
         resetStageZoom: (_immediate) => {
           refs.current.resetStageZoom(_immediate);
         },
-        centerOnNode: (node) => refs.current.centerOnRect({
-          x: node.position[0],
-          y: node.position[1],
-          width: node.size.width,
-          height: node.size.height
-        }),
-        centerAndFit: () => refs.current.centerAndFit()
+        centerOnNode: (node, opts) => refs.current.centerOnRect(
+          {
+            x: node.position[0],
+            y: node.position[1],
+            width: node.size.width,
+            height: node.size.height
+          },
+          opts
+        ),
+        centerOnRect: (rect, opts) => refs.current.centerOnRect(rect, opts),
+        centerAndFit: (opts) => refs.current.centerAndFit(opts)
       }),
       [refs, stageRef]
     );
     const resetHoveredStates = useResetHoveredStates();
     useUpdateEffect(() => {
       resetHoveredStates();
+      refs.current.centerAndFit({
+        delay: 200
+      });
     }, [id]);
     useUpdateEffect(() => {
-      refs.current.centerAndFit(200);
-    }, [id]);
-    useUpdateEffect(() => {
-      refs.current.centerAndFit(50);
+      refs.current.centerAndFit({
+        keepZoom: true
+      });
     }, [height, width]);
     useEffect(() => {
       if (!zoomable) {
@@ -259,9 +271,12 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       theme,
       diagram
     };
+    const layerCenterX = diagram.width / 2;
+    const layerCenterY = diagram.height / 2;
     return /* @__PURE__ */ jsxs(
       AnimatedStage,
       {
+        _useStrictMode: true,
         ref: stageRef,
         width,
         height,
@@ -316,14 +331,27 @@ export const Diagram = /* @__PURE__ */ forwardRef(
         },
         ...props,
         children: [
-          /* @__PURE__ */ jsxs(Layer, { children: [
-            /* @__PURE__ */ jsx(Nodes, { ...sharedProps, onNodeClick }),
-            /* @__PURE__ */ jsx(Edges, { ...sharedProps, onEdgeClick })
-          ] }),
+          /* @__PURE__ */ jsxs(
+            Layer,
+            {
+              x: layerCenterX,
+              offsetX: layerCenterX,
+              y: layerCenterY,
+              offsetY: layerCenterY,
+              scaleX: 1,
+              scaleY: 1,
+              children: [
+                /* @__PURE__ */ jsx(Nodes, { ...sharedProps, onNodeClick }),
+                /* @__PURE__ */ jsx(Edges, { ...sharedProps, onEdgeClick })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(Layer, { name: "top" })
         ]
       }
     );
   }
 );
+DiagramKonva.displayName = "DiagramKonva";
+export const Diagram = /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ jsx(DiagramStateProvider, { children: /* @__PURE__ */ jsx(DiagramKonva, { ...props, ref }) }));
 Diagram.displayName = "Diagram";

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

@@ -102,23 +102,26 @@ const EdgeShape = memo(({ animate, edge, ctrl, theme, isHovered, onEdgeClick })
     AnimatedGroup,
     {
       opacity: ctrl.springs.opacity,
-      onPointerClick: (e) => {
-        if (!onEdgeClick || DiagramGesture.isDragging || e.evt.button !== 0) {
-          return;
+      ...onEdgeClick && {
+        onPointerClick: (e) => {
+          if (DiagramGesture.isDragging || e.evt.button !== 0) {
+            return;
+          }
+          e.cancelBubble = true;
+          onEdgeClick(edge, e);
         }
-        e.cancelBubble = true;
-        onEdgeClick(edge, e);
       },
-      onPointerEnter: (e) => {
-        if (animate) {
+      ...animate && {
+        onPointerEnter: (e) => {
           setHoveredEdge(edge);
           mousePointer(e);
+          e.cancelBubble = true;
+        },
+        onPointerLeave: (e) => {
+          setHoveredEdge(null);
+          mouseDefault(e);
         }
       },
-      onPointerLeave: (e) => {
-        setHoveredEdge(null);
-        mouseDefault(e);
-      },
       children: /* @__PURE__ */ jsx(
         Edge,
         {

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

@@ -1,9 +1,11 @@
 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 { useToggle } from "@react-hookz/web/esm";
+import { useSpring, useTransition } from "@react-spring/konva";
+import { mix, toHex, lighten } from "khroma";
 import { memo, useRef } from "react";
-import { AnimatedGroup } from "../konva.js";
+import { AnimatedCircle, AnimatedGroup, Rect } from "../konva.js";
 import { Portal } from "../konva-portal.js";
 import { ZoomInIcon } from "./icons/index.js";
 import { CylinderShape, MobileShape, PersonShape, QueueShape, RectangleShape } from "./shapes/index.js";
@@ -12,6 +14,7 @@ import { CompoundShape } from "./shapes/Compound.js";
 import { mouseDefault, mousePointer } from "./shapes/utils.js";
 import { isCompound, useNodeSpringsFn } from "./springs.js";
 import { DiagramGesture, useHoveredEdge, useHoveredNodeId, useSetHoveredNode } from "./state/index.js";
+import { Group } from "react-konva";
 function nodeShape({ shape }) {
   switch (shape) {
     case "cylinder":
@@ -136,37 +139,29 @@ const NodeShape = memo(
     const isNavigatable = animate && !!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,
-        onPointerEnter: (e) => {
-          setHoveredNode(node);
-          if (isNavigatable) {
-            mousePointer(e);
+        ...animate && {
+          onPointerEnter: (_) => {
+            setHoveredNode(node);
+          },
+          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);
+            if (!isNavigatable) {
+              onNodeClick(node, e);
+            }
           }
         },
         x: springs.x,
@@ -186,14 +181,46 @@ const NodeShape = memo(
                 node,
                 theme,
                 springs,
-                labelOffsetX: isNavigatable ? -20 : 0
+                labelOffsetX: isNavigatable ? -22 : 0
               }
             ),
-            isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { opacity: 0.9, size: 20, x: 18, y: 21 })
+            isNavigatable && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Rect,
+                {
+                  x: 0,
+                  y: 0,
+                  width: node.size.width,
+                  height: Math.min(node.size.height, 150),
+                  perfectDrawEnabled: false
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CompoundZoomBtn,
+                {
+                  animate,
+                  node,
+                  ctrl,
+                  theme,
+                  isHovered,
+                  onNodeClick
+                }
+              )
+            ] })
           ] }),
           !_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 })
+            isNavigatable && /* @__PURE__ */ jsx(
+              NodeZoomBtn,
+              {
+                animate,
+                node,
+                ctrl,
+                theme,
+                isHovered,
+                onNodeClick
+              }
+            )
           ] })
         ]
       }
@@ -202,3 +229,165 @@ const NodeShape = memo(
   isEqualSimple
 );
 NodeShape.displayName = "NodeShape";
+const NodeZoomBtn = ({ animate, node, theme, isHovered: _isHovered, onNodeClick }) => {
+  const size = 30;
+  const halfSize = size / 2;
+  const colors = theme.elements[node.color];
+  let zoomInIconY;
+  switch (node.shape) {
+    case "browser":
+    case "mobile":
+      zoomInIconY = node.size.height - 20;
+      break;
+    default:
+      zoomInIconY = node.size.height - 16;
+  }
+  const fill = toHex(mix(colors.fill, colors.stroke, 65));
+  const onOver = toHex(mix(colors.fill, colors.stroke, 75));
+  const [isOver, toggleOver] = useToggle(false);
+  const isHovered = _isHovered || isOver;
+  const props = useSpring({
+    to: {
+      fill: isOver ? onOver : fill,
+      opacity: isOver ? 1 : 0,
+      y: zoomInIconY + (isOver ? 2 : 0),
+      scale: isOver ? 1.38 : 1,
+      // shadowBlur: isOver ? 6 : 4,
+      shadowOpacity: isOver ? 0.3 : 0.15
+      // shadowOffsetY: isOver ? 8 : 6
+    },
+    delay: isHovered && !isOver ? 100 : 0,
+    immediate: !animate
+  });
+  return /* @__PURE__ */ jsxs(
+    AnimatedGroup,
+    {
+      x: node.size.width / 2,
+      y: props.y,
+      offsetX: halfSize,
+      offsetY: halfSize,
+      scaleX: props.scale,
+      scaleY: props.scale,
+      width: size,
+      height: size,
+      onPointerEnter: (e) => {
+        toggleOver(true);
+        mousePointer(e);
+      },
+      onPointerLeave: (e) => {
+        toggleOver(false);
+        mouseDefault(e);
+      },
+      onPointerClick: (e) => {
+        if (DiagramGesture.isDragging || e.evt.button !== 0) {
+          return;
+        }
+        e.cancelBubble = true;
+        onNodeClick(node, e);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          AnimatedCircle,
+          {
+            x: halfSize,
+            y: halfSize,
+            radius: halfSize,
+            fill: props.fill,
+            shadowBlur: 4,
+            shadowOpacity: props.shadowOpacity,
+            shadowOffsetX: 2,
+            shadowOffsetY: 6,
+            shadowColor: theme.shadow,
+            shadowEnabled: isHovered,
+            perfectDrawEnabled: false,
+            opacity: props.opacity,
+            hitStrokeWidth: halfSize
+          }
+        ),
+        /* @__PURE__ */ jsx(ZoomInIcon, { size: 16, x: halfSize, y: halfSize })
+      ]
+    }
+  );
+};
+const CompoundZoomBtn = ({
+  animate,
+  node,
+  theme,
+  ctrl,
+  isHovered: _isHovered,
+  onNodeClick
+}) => {
+  const size = 28;
+  const [isOver, toggleOver] = useToggle(false);
+  const halfSize = size / 2;
+  const fill = toHex(lighten(ctrl.springs.fill.get(), 10));
+  const isHovered = _isHovered || isOver;
+  const props = useSpring({
+    to: {
+      opacity: isOver ? 1 : 0,
+      x: halfSize + 4 - (isOver ? 4 : 0),
+      y: halfSize + 6 - (isOver ? 4 : 0),
+      scale: isOver ? 1.35 : 1,
+      // shadowBlur: isOver ? 6 : 4,
+      shadowOpacity: isOver ? 0.3 : 0.15
+      // shadowOffsetY: isOver ? 8 : 6
+    },
+    delay: isHovered && !isOver ? 100 : 0,
+    // delay: isOver ? 150 : (isHovered ? 70 : 0),
+    immediate: !animate
+  });
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      onPointerEnter: (e) => {
+        toggleOver(true);
+        mousePointer(e);
+      },
+      onPointerLeave: (e) => {
+        toggleOver(false);
+        mouseDefault(e);
+      },
+      onPointerClick: (e) => {
+        if (DiagramGesture.isDragging || e.evt.button !== 0) {
+          return;
+        }
+        e.cancelBubble = true;
+        onNodeClick(node, e);
+      },
+      children: /* @__PURE__ */ jsxs(
+        AnimatedGroup,
+        {
+          x: props.x,
+          y: props.y,
+          offsetX: halfSize,
+          offsetY: halfSize,
+          scaleX: props.scale,
+          scaleY: props.scale,
+          width: size,
+          height: size,
+          children: [
+            /* @__PURE__ */ jsx(
+              AnimatedCircle,
+              {
+                x: halfSize,
+                y: halfSize,
+                radius: halfSize,
+                fill,
+                shadowBlur: 4,
+                shadowOpacity: props.shadowOpacity,
+                shadowOffsetX: 2,
+                shadowOffsetY: 6,
+                shadowColor: theme.shadow,
+                shadowEnabled: isHovered,
+                perfectDrawEnabled: false,
+                opacity: props.opacity,
+                hitStrokeWidth: halfSize
+              }
+            ),
+            /* @__PURE__ */ jsx(ZoomInIcon, { size: 16, x: halfSize, y: halfSize })
+          ]
+        }
+      )
+    }
+  );
+};

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

@@ -21,7 +21,8 @@ export const ZoomInIcon = ({ fill = "#BABABA", opacity = 1, size = 20, x, y }) =
       height: originalSize,
       opacity,
       perfectDrawEnabled: false,
-      globalCompositeOperation: "luminosity"
+      globalCompositeOperation: "luminosity",
+      listening: false
     }
   );
 };

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

@@ -36,7 +36,8 @@ export function CompoundShape({ node, theme, springs, labelOffsetX = 0 }) {
         wrap: "none",
         ellipsis: true,
         perfectDrawEnabled: false,
-        globalCompositeOperation: "luminosity"
+        globalCompositeOperation: "luminosity",
+        listening: false
       },
       i
     ))

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

@@ -54,7 +54,7 @@ function EdgeLabelBg({
       fill: springs.labelBgColor,
       cornerRadius: 2,
       globalCompositeOperation: "lighten",
-      hitStrokeWidth: 5
+      hitStrokeWidth: 20
     }
   );
 }

package/dist/@likec4/diagrams/diagram/state/atoms.js

@@ -3,92 +3,67 @@ import { equals } from "rambdax";
 import { selectAtom } from "jotai/utils";
 const currentHoveredNodeAtom = atom(null);
 const nodeTimeoutAtom = atom(void 0);
+const scheduleHoveredNode = (set, node = null, timeout = 175) => {
+  if (timeout <= 0) {
+    set(currentHoveredNodeAtom, node);
+    return;
+  }
+  set(
+    nodeTimeoutAtom,
+    setTimeout(() => {
+      set(currentHoveredNodeAtom, node);
+    }, timeout)
+  );
+};
 export const hoveredNodeAtom = atom(
   (get) => get(currentHoveredNodeAtom),
   (get, set, update) => {
     clearTimeout(get(nodeTimeoutAtom));
-    clearTimeout(get(edgeTimeoutAtom));
     const _prev = get(currentHoveredNodeAtom);
     const _next = typeof update === "function" ? update(_prev) : update;
     if (equals(_prev, _next)) {
       return false;
     }
-    if (_next != null && _prev == null) {
-      set(
-        nodeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredNodeAtom, _next);
-          set(currentHoveredEdgeAtom, null);
-        }, 200)
-      );
-      return true;
-    }
-    if (_next != null && _prev != null) {
-      set(
-        nodeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredNodeAtom, _next);
-          set(currentHoveredEdgeAtom, null);
-        }, 150)
-      );
-      return true;
-    }
-    if (_next == null && _prev != null) {
-      set(
-        nodeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredNodeAtom, null);
-        }, 150)
-      );
-      return true;
+    const timeout = !!_next && !!_prev ? 120 : 175;
+    if (_next != null) {
+      clearTimeout(get(edgeTimeoutAtom));
+      scheduleHoveredEdge(set, null, timeout);
     }
-    set(currentHoveredNodeAtom, _next);
+    scheduleHoveredNode(set, _next, timeout);
     return true;
   }
 );
 export const hoveredNodeIdAtom = selectAtom(hoveredNodeAtom, (node) => node?.id ?? null);
 const currentHoveredEdgeAtom = atom(null);
 const edgeTimeoutAtom = atom(void 0);
+const scheduleHoveredEdge = (set, edge = null, timeout = 175) => {
+  if (timeout <= 0) {
+    set(currentHoveredEdgeAtom, edge);
+    return;
+  }
+  set(
+    edgeTimeoutAtom,
+    setTimeout(() => {
+      set(currentHoveredEdgeAtom, edge);
+    }, timeout)
+  );
+};
 export const hoveredEdgeAtom = atom(
   (get) => get(currentHoveredEdgeAtom),
   (get, set, update) => {
-    clearTimeout(get(nodeTimeoutAtom));
     clearTimeout(get(edgeTimeoutAtom));
     const _prev = get(currentHoveredEdgeAtom);
     const _next = typeof update === "function" ? update(_prev) : update;
     if (equals(_prev, _next)) {
       return false;
     }
-    if (_next != null && _prev == null) {
-      set(
-        edgeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredEdgeAtom, _next);
-          set(currentHoveredNodeAtom, null);
-        }, 400)
-      );
-      return true;
-    }
-    if (_next != null && _prev != null) {
-      set(
-        edgeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredEdgeAtom, _next);
-          set(currentHoveredNodeAtom, null);
-        }, 150)
-      );
-      return true;
-    }
-    if (_next == null && _prev != null) {
-      set(
-        edgeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredEdgeAtom, null);
-        }, 150)
-      );
-      return true;
+    let timeout = 175;
+    if (_next != null) {
+      timeout = _prev != null ? 120 : 300;
+      clearTimeout(get(nodeTimeoutAtom));
+      scheduleHoveredNode(set, null, timeout);
     }
-    set(currentHoveredEdgeAtom, null);
+    scheduleHoveredEdge(set, _next, timeout);
     return true;
   }
 );

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

@@ -0,0 +1,14 @@
+import { is } from "rambdax";
+export function mousePointer(e) {
+  const container = e.target.getStage()?.container();
+  if (container) {
+    container.style.cursor = "pointer";
+  }
+}
+export function mouseDefault(e) {
+  const container = e.target.getStage()?.container();
+  if (container) {
+    container.style.cursor = "";
+  }
+}
+export const isNumber = is(Number);

package/dist/@likec4/diagrams/hooks/useDiagramApi.js

@@ -13,11 +13,10 @@ export function useDiagramApi() {
       get container() {
         return ref.current?.container ?? null;
       },
-      resetStageZoom: (_immediate) => {
-        nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate);
-      },
-      centerOnNode: (node) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node),
-      centerAndFit: () => nonNullable(ref.current, "not mounted, use ref").centerAndFit()
+      resetStageZoom: (_immediate) => nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate),
+      centerOnNode: (node, opts) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node, opts),
+      centerOnRect: (rect, opts) => nonNullable(ref.current, "not mounted, use ref").centerOnRect(rect, opts),
+      centerAndFit: (opts) => nonNullable(ref.current, "not mounted, use ref").centerAndFit(opts)
     })
   );
   return [ref, api];

package/dist/@likec4/diagrams/hooks/useImageLoader.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef, useState } from "react";
-import { useIsMounted } from "@react-hookz/web/esm/useIsMounted";
+import { useIsMounted } from "@react-hookz/web/esm";
 import { invariant } from "@likec4/core";
 const imageElements = /* @__PURE__ */ new Map();
 export default function useImageLoader(url, crossOrigin, referrerpolicy) {