@likec4/diagram 1.26.2 → 1.27.0

package/dist/hooks/useDiagram.js

@@ -1,10 +1,11 @@
-import "@likec4/core";
-import { useCallbackRef } from "@mantine/hooks";
-import { useSelector } from "@xstate/react";
-import { shallowEqual } from "fast-equals";
-import { useTransition, useMemo } from "react";
-import { findDiagramEdge, findDiagramNode } from "../state/utils.js";
-import { useDiagramActorRef } from "./safeContext.js";
+import '@likec4/core';
+import { useCallbackRef } from '@mantine/hooks';
+import { useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { useTransition, useMemo } from 'react';
+import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
+import { useDiagramActorRef } from './safeContext.js';
+
 function useDiagram() {
   const actor = useDiagramActorRef();
   const [, startTransition] = useTransition();
@@ -66,8 +67,7 @@ function useDiagram() {
      * @returns true if there was pending request to save layout
      */
     cancelSaveManualLayout: () => {
-      var _a;
-      const syncState = (_a = actor.getSnapshot().children.syncLayout) == null ? void 0 : _a.getSnapshot().value;
+      const syncState = actor.getSnapshot().children.syncLayout?.getSnapshot().value;
       actor.send({ type: "saveManualLayout.cancel" });
       return syncState === "pending" || syncState === "paused";
     },
@@ -129,12 +129,8 @@ function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
   return useSelector(syncLayoutActorRef, useCallbackRef(selector), compare);
 }
 function useDiagramContext(selector, compare = shallowEqual) {
-  return useDiagramActorSnapshot(useCallbackRef((s) => selector(s.context)), compare);
+  const actorRef = useDiagramActorRef();
+  return useSelector(actorRef, useCallbackRef((s) => selector(s.context)), compare);
 }
-export {
-  useDiagram,
-  useDiagramActorRef,
-  useDiagramActorSnapshot,
-  useDiagramContext,
-  useDiagramSyncLayoutState
-};
+
+export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useDiagramSyncLayoutState };

package/dist/hooks/useMantinePortalProps.js

@@ -1,9 +1,9 @@
-import { useMemo } from "react";
-import { useRootContainer } from "../context/RootContainer.js";
+import { useMemo } from 'react';
+import { useRootContainer } from '../context/RootContainer.js';
+
 function useMantinePortalProps() {
   const target = useRootContainer();
   return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
 }
-export {
-  useMantinePortalProps
-};
+
+export { useMantinePortalProps };

package/dist/hooks/useOverlaysActor.d.ts

@@ -0,0 +1,2 @@
+import { OverlaysActorRef } from '../overlays/overlaysActor';
+export declare function useOverlaysActorRef(): OverlaysActorRef;

package/dist/hooks/useOverlaysActor.js

@@ -0,0 +1,10 @@
+import { useDiagramActorSnapshot } from './useDiagram.js';
+
+const select = (s) => {
+  return s.children.overlays;
+};
+function useOverlaysActorRef() {
+  return useDiagramActorSnapshot(select, Object.is);
+}
+
+export { useOverlaysActorRef };

package/dist/hooks/useReducedGraphics.d.ts

@@ -1 +1 @@
-export { useIsReducedGraphics, useLooseReducedGraphics } from '../context/ReduceGraphics';
+export { useIsPanning, useIsReducedGraphics } from '../context/ReduceGraphics';

package/dist/hooks/useSetState.js

@@ -1,5 +1,6 @@
-import { shallowEqual } from "fast-equals";
-import { useState, useCallback } from "react";
+import { shallowEqual } from 'fast-equals';
+import { useState, useCallback } from 'react';
+
 function useSetState(initialState) {
   const [state, _setState] = useState(initialState);
   const setState = useCallback(
@@ -14,6 +15,5 @@ function useSetState(initialState) {
   );
   return [state, setState];
 }
-export {
-  useSetState
-};
+
+export { useSetState };

package/dist/hooks/useUpdateEffect.js

@@ -1,6 +1,7 @@
-import { useFirstMountState, useCustomCompareEffect } from "@react-hookz/web";
-import { shallowEqual } from "fast-equals";
-import "react";
+import { useFirstMountState, useCustomCompareEffect } from '@react-hookz/web';
+import { shallowEqual } from 'fast-equals';
+import 'react';
+
 const noop = () => {
 };
 const depsShallowEqual = (d1, d2) => {
@@ -26,7 +27,5 @@ function useUpdateEffect(callback, deps, equalityFn, effectHook) {
     effectHook
   );
 }
-export {
-  depsShallowEqual,
-  useUpdateEffect
-};
+
+export { depsShallowEqual, useUpdateEffect };

package/dist/hooks/useXYFlow.d.ts

@@ -2,7 +2,7 @@ import { ReactFlowState, ReactFlowInstance, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
 import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
-import { EdgeId, NonEmptyArray, Point, Color, ViewId, RelationshipArrowType, RelationshipLineType, BBox } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
 export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
     source: string;
@@ -36,13 +36,13 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
         points: NonEmptyArray<Point>;
         technology: string | undefined;
         color: Color | undefined;
-        navigateTo: ViewId<string> | undefined;
+        labelBBox: BBox | null | undefined;
         dir: "forward" | "back" | "both" | undefined;
+        line: RelationshipLineType | undefined;
         head: RelationshipArrowType | undefined;
         tail: RelationshipArrowType | undefined;
-        line: RelationshipLineType | undefined;
+        navigateTo: ViewId<string> | undefined;
         notes: string | undefined;
-        labelBBox: BBox | null | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
         hovered?: boolean;
@@ -85,13 +85,13 @@ export declare const useXYStoreApi: () => {
             points: NonEmptyArray<Point>;
             technology: string | undefined;
             color: Color | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
             dir: "forward" | "back" | "both" | undefined;
+            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
             tail: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
+            navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
-            labelBBox: BBox | null | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
             hovered?: boolean;
@@ -132,13 +132,13 @@ export declare const useXYStoreApi: () => {
             points: NonEmptyArray<Point>;
             technology: string | undefined;
             color: Color | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
             dir: "forward" | "back" | "both" | undefined;
+            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
             tail: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
+            navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
-            labelBBox: BBox | null | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
             hovered?: boolean;
@@ -178,13 +178,13 @@ export declare const useXYStoreApi: () => {
             points: NonEmptyArray<Point>;
             technology: string | undefined;
             color: Color | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
             dir: "forward" | "back" | "both" | undefined;
+            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
             tail: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
+            navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
-            labelBBox: BBox | null | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
             hovered?: boolean;
@@ -224,13 +224,13 @@ export declare const useXYStoreApi: () => {
             points: NonEmptyArray<Point>;
             technology: string | undefined;
             color: Color | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
             dir: "forward" | "back" | "both" | undefined;
+            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
             tail: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
+            navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
-            labelBBox: BBox | null | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
             hovered?: boolean;
@@ -270,13 +270,13 @@ export declare const useXYStoreApi: () => {
             points: NonEmptyArray<Point>;
             technology: string | undefined;
             color: Color | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
             dir: "forward" | "back" | "both" | undefined;
+            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
             tail: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
+            navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
-            labelBBox: BBox | null | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
             hovered?: boolean;
@@ -316,13 +316,13 @@ export declare const useXYStoreApi: () => {
             points: NonEmptyArray<Point>;
             technology: string | undefined;
             color: Color | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
             dir: "forward" | "back" | "both" | undefined;
+            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
             tail: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
+            navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
-            labelBBox: BBox | null | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
             hovered?: boolean;
@@ -363,13 +363,13 @@ export declare const useXYStoreApi: () => {
             points: NonEmptyArray<Point>;
             technology: string | undefined;
             color: Color | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
             dir: "forward" | "back" | "both" | undefined;
+            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
             tail: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
+            navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
-            labelBBox: BBox | null | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
             hovered?: boolean;
@@ -409,13 +409,13 @@ export declare const useXYStoreApi: () => {
             points: NonEmptyArray<Point>;
             technology: string | undefined;
             color: Color | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
             dir: "forward" | "back" | "both" | undefined;
+            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
             tail: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
+            navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
-            labelBBox: BBox | null | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
             hovered?: boolean;

package/dist/hooks/useXYFlow.js

@@ -1,6 +1,7 @@
-import { useCallbackRef } from "@mantine/hooks";
-import { useStoreApi, useStore, useReactFlow, useInternalNode } from "@xyflow/react";
-import { shallowEqual } from "fast-equals";
+import { useCallbackRef } from '@mantine/hooks';
+import { useStoreApi, useStore, useReactFlow, useInternalNode } from '@xyflow/react';
+import { shallowEqual } from 'fast-equals';
+
 const useXYFlow = useReactFlow;
 function useXYStore(selector, equalityFn) {
   return useStore(
@@ -10,14 +11,9 @@ function useXYStore(selector, equalityFn) {
 }
 const useXYStoreApi = useStoreApi;
 const useXYInternalNode = useInternalNode;
-const selectZoom = (state) => state.transform[2] < 0.25;
+const selectZoom = (state) => state.transform[2] < 0.2;
 function useIsZoomTooSmall() {
   return useStore(selectZoom);
 }
-export {
-  useIsZoomTooSmall,
-  useXYFlow,
-  useXYInternalNode,
-  useXYStore,
-  useXYStoreApi
-};
+
+export { useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi };

package/dist/index.d.ts

@@ -8,7 +8,6 @@ export { useLikeC4ElementsTree, useLikeC4Model, } from './likec4model';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider';
 export { useSetState } from './hooks/useSetState';
 export { useUpdateEffect } from './hooks/useUpdateEffect';
-export { vars, xyvars } from './theme-vars';
 export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, WhereOperator, } from './LikeC4Diagram.props';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram';

package/dist/index.js

@@ -1,26 +1,10 @@
-/* empty css                                                                                                                                                   */
-import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
-import { IconRendererProvider } from "./context/IconRenderer.js";
-import { LikeC4Diagram } from "./LikeC4Diagram.js";
-import { Overlay } from "./overlays/overlay/Overlay.js";
-import { LikeC4ModelProvider } from "./LikeC4ModelProvider.js";
-import { useSetState } from "./hooks/useSetState.js";
-import { useUpdateEffect } from "./hooks/useUpdateEffect.js";
-import { StaticLikeC4Diagram } from "./StaticLikeC4Diagram.js";
-import { useLikeC4ElementsTree } from "./likec4model/useLikeC4ElementsTree.js";
-import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
-import { vars, xyvars } from "./theme-vars.css.js";
-export {
-  FramerMotionConfig,
-  IconRendererProvider,
-  LikeC4Diagram,
-  LikeC4ModelProvider,
-  Overlay,
-  StaticLikeC4Diagram,
-  useLikeC4ElementsTree,
-  useLikeC4Model,
-  useSetState,
-  useUpdateEffect,
-  vars,
-  xyvars
-};
+export { FramerMotionConfig } from './context/FramerMotionConfig.js';
+export { IconRendererProvider } from './context/IconRenderer.js';
+export { LikeC4Diagram } from './LikeC4Diagram.js';
+export { Overlay } from './overlays/overlay/Overlay.js';
+export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
+export { useSetState } from './hooks/useSetState.js';
+export { useUpdateEffect } from './hooks/useUpdateEffect.js';
+export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
+export { useLikeC4ElementsTree } from './likec4model/useLikeC4ElementsTree.js';
+export { useLikeC4Model } from './likec4model/useLikeC4Model.js';

package/dist/likec4diagram/DiagramUI.js

@@ -1,19 +1,20 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { useDiagramActorSnapshot } from "../hooks/useDiagram.js";
-import { Overlays } from "../overlays/Overlays.js";
-import { useEnabledFeatures } from "../context/DiagramFeatures.js";
-import { Controls } from "./ui/controls/Controls.js";
-import { DiagramTitlePanel } from "./ui/diagram-title/DiagramTitlePanel.js";
-import { NotationPanel } from "./ui/notation/NotationPanel.js";
-import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
+import { Overlays } from '../overlays/Overlays.js';
+import { useEnabledFeatures } from '../context/DiagramFeatures.js';
+import { Controls } from './ui/controls/Controls.js';
+import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
+import { NotationPanel } from './ui/notation/NotationPanel.js';
+import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough.js';
+
 const DiagramUI = memo(() => {
   const {
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough
   } = useEnabledFeatures();
-  const overlaysActorRef = useDiagramActorSnapshot((s) => s.children.overlays, Object.is);
+  const overlaysActorRef = useOverlaysActorRef();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
@@ -23,6 +24,5 @@ const DiagramUI = memo(() => {
   ] });
 });
 DiagramUI.displayName = "DiagramUI";
-export {
-  DiagramUI
-};
+
+export { DiagramUI };

package/dist/likec4diagram/DiagramXYFlow.d.ts

@@ -1,7 +1,4 @@
 import { PropsWithChildren, NamedExoticComponent } from 'react';
-import { EnforceOptional } from 'type-fest/source/enforce-optional';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-type Picked = EnforceOptional<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable'>>;
-export type LikeC4DiagramXYFlowProps = PropsWithChildren<Required<Picked>>;
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable' | 'reactFlowProps'>>;
 export declare const LikeC4DiagramXYFlow: NamedExoticComponent<LikeC4DiagramXYFlowProps>;
-export {};

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,16 +1,17 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { nonNullable } from "@likec4/core";
-import { useCallbackRef } from "@mantine/hooks";
-import clsx from "clsx";
-import { shallowEqual } from "fast-equals";
-import { memo } from "react";
-import { BaseXYFlow } from "../base/BaseXYFlow.js";
-import { ReduceGraphicsViewportListener } from "../context/ReduceGraphics.js";
-import { useDiagram, useDiagramContext } from "../hooks/useDiagram.js";
-import { edgeTypes, nodeTypes } from "./custom/index.js";
-import { DiagramUI } from "./DiagramUI.js";
-import { useLayoutConstraints } from "./useLayoutConstraints.js";
-import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { nonNullable } from '@likec4/core';
+import { cx } from '@likec4/styles/css';
+import { useTimeout, useCallbackRef } from '@mantine/hooks';
+import { deepEqual, shallowEqual } from 'fast-equals';
+import { memo } from 'react';
+import { BaseXYFlow } from '../base/BaseXYFlow.js';
+import { usePanningAtom } from '../context/ReduceGraphics.js';
+import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
+import { edgeTypes, nodeTypes } from './custom/index.js';
+import { DiagramUI } from './DiagramUI.js';
+import { useLayoutConstraints } from './useLayoutConstraints.js';
+import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+
 const selectXYProps = (ctx) => ({
   initialized: ctx.initialized,
   nodes: ctx.xynodes,
@@ -28,11 +29,13 @@ const selectXYProps = (ctx) => ({
     }
   }
 });
-const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport, b.viewport);
+const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
+const compareProps = (a, b) => a.nodesDraggable === b.nodesDraggable && a.nodesSelectable === b.nodesSelectable && deepEqual(a.background, b.background) && deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {});
 const LikeC4DiagramXYFlow = memo(({
-  background,
-  nodesDraggable,
-  nodesSelectable,
+  background = "dots",
+  nodesDraggable = false,
+  nodesSelectable = false,
+  reactFlowProps = {},
   children
 }) => {
   const diagram = useDiagram();
@@ -53,9 +56,26 @@ const LikeC4DiagramXYFlow = memo(({
     onCanvasClick,
     onCanvasDblClick
   } = useDiagramEventHandlers();
-  const notReadOnly = !enableReadOnly;
-  const layoutConstraints = useLayoutConstraints();
-  const onViewportResize = useCallbackRef(() => {
+  const notReadOnly = !enableReadOnly, layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
+    $isPanning.set(true);
+  }, 160), notPanning = useTimeout(() => {
+    isPanning.clear();
+    if ($isPanning.get()) {
+      $isPanning.set(false);
+    }
+  }, 120), onMove = useCallbackRef((event) => {
+    if (!event) {
+      return;
+    }
+    if (!$isPanning.get()) {
+      isPanning.start();
+    }
+    notPanning.clear();
+    notPanning.start();
+  }), onMoveEnd = useCallbackRef((event, viewport) => {
+    notPanning.start();
+    diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+  }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   });
   return /* @__PURE__ */ jsxs(
@@ -63,7 +83,7 @@ const LikeC4DiagramXYFlow = memo(({
     {
       nodes,
       edges,
-      className: clsx(initialized ? "initialized" : "not-initialized"),
+      className: cx(initialized ? "initialized" : "not-initialized"),
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {
@@ -77,27 +97,52 @@ const LikeC4DiagramXYFlow = memo(({
       onNodeClick: useCallbackRef((e, node) => {
         e.stopPropagation();
         diagram.send({ type: "xyflow.nodeClick", node });
-        onNodeClick == null ? void 0 : onNodeClick(diagram.findDiagramNode(node.id), e);
+        onNodeClick?.(diagram.findDiagramNode(node.id), e);
       }),
       onEdgeClick: useCallbackRef((e, edge) => {
         e.stopPropagation();
         diagram.send({ type: "xyflow.edgeClick", edge });
-        onEdgeClick == null ? void 0 : onEdgeClick(diagram.findDiagramEdge(edge.id), e);
+        onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
       }),
       onPaneClick: useCallbackRef((e) => {
         e.stopPropagation();
         diagram.send({ type: "xyflow.paneClick" });
-        onCanvasClick == null ? void 0 : onCanvasClick(e);
+        onCanvasClick?.(e);
       }),
       onDoubleClick: useCallbackRef((e) => {
         e.stopPropagation();
         e.preventDefault();
         diagram.send({ type: "xyflow.paneDblClick" });
-        onCanvasDblClick == null ? void 0 : onCanvasDblClick(e);
+        onCanvasDblClick?.(e);
+      }),
+      onNodeMouseEnter: useCallbackRef((_event, node) => {
+        _event.stopPropagation();
+        if (!node.data.hovered) {
+          diagram.send({ type: "xyflow.nodeMouseEnter", node });
+        }
       }),
-      onMoveEnd: useCallbackRef((event, viewport) => {
-        diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+      onNodeMouseLeave: useCallbackRef((_event, node) => {
+        _event.stopPropagation();
+        if (node.data.hovered) {
+          diagram.send({ type: "xyflow.nodeMouseLeave", node });
+        }
       }),
+      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+        _event.stopPropagation();
+        if (!edge.data.hovered) {
+          diagram.send({ type: "xyflow.edgeMouseEnter", edge });
+        }
+      }),
+      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+        _event.stopPropagation();
+        if (edge.data.hovered) {
+          diagram.send({ type: "xyflow.edgeMouseLeave", edge });
+        }
+      }),
+      ...props.pannable && {
+        onMove
+      },
+      onMoveEnd,
       onInit: useCallbackRef((instance) => {
         diagram.send({ type: "xyflow.init", instance });
       }),
@@ -106,17 +151,17 @@ const LikeC4DiagramXYFlow = memo(({
           diagram.findDiagramNode(node.id),
           `diagramNode ${node.id} not found`
         );
-        onNodeContextMenu == null ? void 0 : onNodeContextMenu(diagramNode, event);
+        onNodeContextMenu?.(diagramNode, event);
       }),
       onEdgeContextMenu: useCallbackRef((event, edge) => {
         const diagramEdge = nonNullable(
           diagram.findDiagramEdge(edge.id),
           `diagramEdge ${edge.id} not found`
         );
-        onEdgeContextMenu == null ? void 0 : onEdgeContextMenu(diagramEdge, event);
+        onEdgeContextMenu?.(diagramEdge, event);
       }),
       onPaneContextMenu: useCallbackRef((event) => {
-        onCanvasContextMenu == null ? void 0 : onCanvasContextMenu(event);
+        onCanvasContextMenu?.(event);
       }),
       ...enableFitView && {
         onViewportResize
@@ -125,14 +170,14 @@ const LikeC4DiagramXYFlow = memo(({
       nodesSelectable,
       ...notReadOnly && nodesDraggable && layoutConstraints,
       ...props,
+      ...reactFlowProps,
       children: [
-        /* @__PURE__ */ jsx(ReduceGraphicsViewportListener, {}),
-        /* @__PURE__ */ jsx(DiagramUI, {}),
+        /* @__PURE__ */ jsx(DiagramUI, {}, "DiagramUI"),
         children
       ]
     }
   );
-}, shallowEqual);
-export {
-  LikeC4DiagramXYFlow
-};
+}, compareProps);
+LikeC4DiagramXYFlow.displayName = "LikeC4DiagramXYFlow";
+
+export { LikeC4DiagramXYFlow };

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

@@ -1,7 +1,21 @@
-/* empty css                               */
-var edgeNoteCloseButton = "_1xfux2o0";
-var edgeNoteText = "_1xfux2o1";
-export {
-  edgeNoteCloseButton,
-  edgeNoteText
-};
+import { css } from '@likec4/styles/css';
+
+const edgeNoteCloseButton = css({
+  position: "absolute",
+  top: 1,
+  right: 1,
+  zIndex: 9
+});
+const edgeNoteText = css({
+  userSelect: "all",
+  textAlign: "left",
+  whiteSpaceCollapse: "preserve-breaks",
+  textWrap: "pretty",
+  lineHeight: 1.25,
+  "--text-fz": "{fontSizes.sm}",
+  md: {
+    "--text-fz": "{fontSizes.md}"
+  }
+});
+
+export { edgeNoteCloseButton, edgeNoteText };