@likec4/diagram 1.43.0 → 1.44.0

package/dist/LikeC4Diagram.d.ts

@@ -8,4 +8,4 @@ export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4Di
  *
  * Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
  */
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onInitialized, view, className, readonly, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onLayoutTypeChange, onInitialized, view, className, readonly, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesDraggable, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCustomCompareMemo } from '@react-hookz/web';
 import { ReactFlowProvider } from '@xyflow/react';
-import { deepEqual } from 'fast-equals';
 import { useRef } from 'react';
 import { isPlainObject, mapValues } from 'remeda';
 import { RootContainer } from './components/RootContainer.js';
@@ -11,7 +10,7 @@ import { LikeC4DiagramUI } from './likec4diagram/DiagramUI.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
 import { DiagramActorProvider } from './likec4diagram/state/DiagramActorProvider.js';
 import { LikeC4Styles } from './LikeC4Styles.js';
-import { getViewBounds } from './utils/get-view-bounds.js';
+import { pickViewBounds } from './utils/view-bounds.js';
 import { MinZoom, MaxZoom, FitViewPaddings } from './base/const.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
@@ -31,6 +30,7 @@ function LikeC4Diagram({
   onNodeContextMenu,
   onOpenSource,
   onBurgerMenuClick,
+  onLayoutTypeChange,
   onInitialized,
   view,
   className,
@@ -46,6 +46,7 @@ function LikeC4Diagram({
   enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = false,
+  enableCompareWithLatest = !!onLayoutTypeChange,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
   enableNotations = false,
@@ -55,7 +56,6 @@ function LikeC4Diagram({
   enableSearch = false,
   initialWidth,
   initialHeight,
-  experimentalEdgeEditing = !readonly,
   reduceGraphics = "auto",
   renderIcon,
   where,
@@ -65,7 +65,7 @@ function LikeC4Diagram({
 }) {
   const id = useId();
   const initialRef = useRef(null);
-  const bounds = getViewBounds(view, dynamicViewVariant);
+  const bounds = pickViewBounds(view, dynamicViewVariant);
   const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
   if (initialRef.current == null) {
     initialRef.current = {
@@ -101,11 +101,11 @@ function LikeC4Diagram({
             enableSearch,
             enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
             enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
-            enableEdgeEditing: experimentalEdgeEditing,
             enableNotations,
             enableVscode: !!onOpenSource,
             enableControls: controls,
-            enableElementTags
+            enableElementTags,
+            enableCompareWithLatest: enableCompareWithLatest && !!onLayoutTypeChange
           },
           children: /* @__PURE__ */ jsxs(
             DiagramEventHandlers,
@@ -122,7 +122,8 @@ function LikeC4Diagram({
                 onNodeContextMenu,
                 onOpenSource,
                 onBurgerMenuClick,
-                onInitialized
+                onInitialized,
+                onLayoutTypeChange
               },
               children: [
                 /* @__PURE__ */ jsx(LikeC4Styles, { id }),
@@ -138,6 +139,7 @@ function LikeC4Diagram({
                         zoomable,
                         pannable,
                         fitViewPadding,
+                        nodesDraggable,
                         nodesSelectable,
                         where: where ?? null,
                         dynamicViewVariant,
@@ -145,8 +147,6 @@ function LikeC4Diagram({
                           /* @__PURE__ */ jsx(
                             LikeC4DiagramXYFlow,
                             {
-                              nodesDraggable,
-                              nodesSelectable,
                               background,
                               reactFlowProps,
                               renderNodes,
@@ -182,8 +182,11 @@ function useNormalizedViewPadding(raw) {
       return toLiteralPaddingWithUnit(raw);
     },
     [raw],
-    deepEqual
+    compareViewPaddingObject
   );
 }
+const compareViewPaddingObject = ([a], [b]) => {
+  return a === b || isPlainObject(a) && isPlainObject(b) && a.bottom == b.bottom && a.left == b.left && a.right == b.right && a.top == b.top;
+};
 
 export { LikeC4Diagram };

package/dist/LikeC4Diagram.props.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, LayoutType, ViewChange, WhereOperator } from '@likec4/core/types';
 import { ReactFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { CamelCasedProperties, SetRequired } from 'type-fest';
@@ -174,6 +174,11 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default false
      */
     enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Enable "Compare with auto layout" action when view was manually modified and out of sync with latest model
+     * @default true if `onLayoutTypeChange` is set, false otherwise
+     */
+    enableCompareWithLatest?: boolean | undefined;
     /**
      * Default dynamic view display variant
      * @default 'diagram'
@@ -184,11 +189,6 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default false
      */
     enableElementTags?: boolean | undefined;
-    /**
-     * Experimental feature to enable edge editing
-     * @default false
-     */
-    experimentalEdgeEditing?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      * Enable it if you have a large or static view
@@ -240,6 +240,7 @@ export type OnEdgeClick<A extends Any = Unknown> = (edge: DiagramEdge<A>, event:
  * On pane/canvas click (not on any node or edge)
  */
 export type OnCanvasClick = (event: ReactMouseEvent) => void;
+export type OnCanvasContextMenu = (event: ReactMouseEvent | MouseEvent) => void;
 export type ChangeEvent = {
     change: ViewChange;
 };
@@ -248,12 +249,13 @@ export type OnInitialized = (params: {
     diagram: DiagramApi;
     xyflow: XYFlowInstance;
 }) => void;
+export type OnLayoutTypeChange = (layoutType: LayoutType) => void;
 export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
     onChange?: OnChange | null | undefined;
     onNavigateTo?: OnNavigateTo<A> | null | undefined;
     onNodeClick?: OnNodeClick<A> | null | undefined;
     onNodeContextMenu?: OnNodeClick<A> | null | undefined;
-    onCanvasContextMenu?: OnCanvasClick | null | undefined;
+    onCanvasContextMenu?: OnCanvasContextMenu | null | undefined;
     onEdgeClick?: OnEdgeClick<A> | null | undefined;
     onEdgeContextMenu?: OnEdgeClick<A> | null | undefined;
     onCanvasClick?: OnCanvasClick | null | undefined;
@@ -261,4 +263,11 @@ export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
     onBurgerMenuClick?: null | undefined | (() => void);
     onOpenSource?: OnOpenSource<A> | null | undefined;
     onInitialized?: OnInitialized | null | undefined;
+    /**
+     * Triggered when user changes layout type (e.g. from 'manual' to 'auto')
+     * Expected another `view` to be passed to the diagram
+     *
+     * @param layoutType new layout type
+     */
+    onLayoutTypeChange?: OnLayoutTypeChange | null | undefined;
 }

package/dist/LikeC4ProjectsProvider.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { useCallbackRef } from '@mantine/hooks';
 import { useCustomCompareMemo } from '@react-hookz/web';
 import { shallowEqual } from 'fast-equals';
 import { useContext } from 'react';
 import { LikeC4ProjectsContext } from './context/LikeC4ProjectsContext.js';
+import { useCallbackRef } from './hooks/useCallbackRef.js';
 
 function LikeC4ProjectsProvider({
   children,

package/dist/LikeC4View.d.ts

@@ -230,6 +230,11 @@ export interface LikeC4BrowserProps {
      * @default true
      */
     enableNotations?: boolean | undefined;
+    /**
+     * Enable "Compare with auto layout" action when view was manually modified and out of sync with latest model
+     * @default true
+     */
+    enableCompareWithLatest?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      *

package/dist/LikeC4View.js

@@ -1,18 +1,19 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
-import { Box, ActionIcon } from '@mantine/core';
-import { useCallbackRef } from '@mantine/hooks';
+import { Box } from '@likec4/styles/jsx';
+import { ActionIcon } from '@mantine/core';
 import { useState } from 'react';
 import { isBoolean } from 'remeda';
 import { FitViewPaddings } from './base/const.js';
 import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
+import { useCallbackRef } from './hooks/useCallbackRef.js';
 import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
 import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { Overlay } from './overlays/overlay/Overlay.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
-import { getViewBounds } from './utils/get-view-bounds.js';
-import IconX from './node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import { pickViewBounds } from './utils/view-bounds.js';
+import IconX from './node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 const cssInteractive = css({
   cursor: "pointer",
@@ -49,14 +50,21 @@ function LikeC4View({
   ...props
 }) {
   const likec4model = useOptionalLikeC4Model();
-  const [browserViewId, onNavigateTo] = useState(null);
+  const [layoutType, setLayoutType] = useState("manual");
+  const [browserViewId, _onNavigateTo] = useState(null);
+  const onNavigateTo = useCallbackRef((viewId2) => {
+    if (viewId2 && viewId2 !== browserViewId) {
+      setLayoutType("manual");
+    }
+    _onNavigateTo(viewId2);
+  });
   const onNavigateToThisView = useCallbackRef(() => {
     onNavigateTo(viewId);
   });
   if (!likec4model) {
     return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
   }
-  const view = likec4model.findView(viewId)?.$view;
+  const view = likec4model.findView(viewId)?.$layouted;
   if (!view) {
     return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
   }
@@ -67,12 +75,13 @@ function LikeC4View({
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
-  const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
+  const browserViewModel = browserViewId ? likec4model.findView(browserViewId) : null;
+  const browserView = layoutType === "manual" ? browserViewModel?.$layouted : browserViewModel?.$view;
   const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
   const browserViewHasNotations = (browserView?.notation?.nodes?.length ?? 0) > 0;
   const isBrowserEnabled = browser !== false;
   const browserProps = isBoolean(browser) ? {} : browser;
-  const bounds = getViewBounds(view, props.dynamicViewVariant);
+  const bounds = pickViewBounds(view, props.dynamicViewVariant);
   return /* @__PURE__ */ jsx(
     ShadowRoot,
     {
@@ -100,7 +109,7 @@ function LikeC4View({
             enableNotations: hasNotations,
             enableDynamicViewWalkthrough,
             showNavigationButtons,
-            experimentalEdgeEditing: false,
+            enableCompareWithLatest: false,
             enableFocusMode,
             enableRelationshipDetails,
             enableElementDetails,
@@ -141,6 +150,7 @@ function LikeC4View({
               enableRelationshipDetails: true,
               enableSearch: true,
               enableElementTags: true,
+              enableCompareWithLatest: true,
               controls: true,
               readonly: true,
               nodesDraggable: false,
@@ -149,10 +159,11 @@ function LikeC4View({
               fitViewPadding: FitViewPaddings.withControls,
               ...browserProps,
               enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
-              renderNodes
+              renderNodes,
+              onLayoutTypeChange: setLayoutType
             }
           ),
-          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "4", right: "4", zIndex: "999", children: /* @__PURE__ */ jsx(
             ActionIcon,
             {
               variant: "default",

package/dist/ReactLikeC4.js

@@ -4,7 +4,7 @@ import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
 import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
 import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
-import { getViewBounds } from './utils/get-view-bounds.js';
+import { pickViewBounds } from './utils/view-bounds.js';
 
 function ReactLikeC4({
   viewId,
@@ -33,7 +33,7 @@ function ReactLikeC4({
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
-  const bounds = getViewBounds(view, props.dynamicViewVariant);
+  const bounds = pickViewBounds(view, props.dynamicViewVariant);
   const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
   return /* @__PURE__ */ jsx(
     ShadowRoot,

package/dist/StaticLikeC4Diagram.js

@@ -30,7 +30,7 @@ function StaticLikeC4Diagram({
       enableRelationshipBrowser,
       enableDynamicViewWalkthrough: false,
       showNavigationButtons: false,
-      experimentalEdgeEditing: false,
+      enableCompareWithLatest: false,
       enableFocusMode: false,
       enableSearch: false,
       nodesSelectable: false,

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,3 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+export { commonjsGlobal };

package/dist/_virtual/assign-dea9f7c8.cjs.js

@@ -0,0 +1,3 @@
+var assignDea9f7c8_cjs = {};
+
+export { assignDea9f7c8_cjs as __exports };

package/dist/_virtual/log-ec8d4df4.cjs.js

@@ -0,0 +1,3 @@
+var logEc8d4df4_cjs = {};
+
+export { logEc8d4df4_cjs as __exports };

package/dist/_virtual/raise-da5b247f.cjs.js

@@ -0,0 +1,3 @@
+var raiseDa5b247f_cjs = {};
+
+export { raiseDa5b247f_cjs as __exports };

package/dist/_virtual/xstate-actions.cjs.js

@@ -0,0 +1,5 @@
+import { __require as requireXstateActions_cjs } from '../node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/actions/dist/xstate-actions.cjs.js';
+
+var xstateActions_cjsExports = requireXstateActions_cjs();
+
+export { xstateActions_cjsExports as x };

package/dist/_virtual/xstate-actions.cjs2.js

@@ -0,0 +1,3 @@
+var xstateActions_cjs = {};
+
+export { xstateActions_cjs as __exports };

package/dist/_virtual/xstate-dev.cjs.js

@@ -0,0 +1,3 @@
+var xstateDev_cjs = {};
+
+export { xstateDev_cjs as __exports };

package/dist/_virtual/xstate-guards.cjs.js

@@ -0,0 +1,5 @@
+import { __require as requireXstateGuards_cjs } from '../node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/guards/dist/xstate-guards.cjs.js';
+
+var xstateGuards_cjsExports = requireXstateGuards_cjs();
+
+export { xstateGuards_cjsExports as x };

package/dist/_virtual/xstate-guards.cjs2.js

@@ -0,0 +1,3 @@
+var xstateGuards_cjs = {};
+
+export { xstateGuards_cjs as __exports };

package/dist/base/Background.d.ts

@@ -1,7 +1,8 @@
 import { BackgroundProps } from '@xyflow/react';
+import { NamedExoticComponent } from 'react';
 export type XYBackgroundVariant = 'dots' | 'lines' | 'cross';
 export type XYBackground = XYBackgroundVariant | BackgroundProps;
 export type XYBackgroundProps = {
     background: XYBackground;
 };
-export declare function Background({ background }: XYBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export declare const Background: NamedExoticComponent<XYBackgroundProps>;

package/dist/base/Background.js

@@ -1,6 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
 import { Background as Background$1, BackgroundVariant } from '@xyflow/react';
+import { deepEqual } from 'fast-equals';
+import { memo } from 'react';
 
 function literalToEnum(value) {
   switch (value) {
@@ -14,11 +16,18 @@ function literalToEnum(value) {
       nonexhaustive(value);
   }
 }
-function Background({ background }) {
+const compareProps = (prev, next) => {
+  if (typeof prev.background === "string" && typeof next.background === "string") {
+    return prev.background === next.background;
+  }
+  return deepEqual(prev.background, next.background);
+};
+const Background = memo(({ background }) => {
   if (typeof background === "string") {
     return /* @__PURE__ */ jsx(Background$1, { variant: literalToEnum(background), size: 2, gap: 20 });
   }
   return /* @__PURE__ */ jsx(Background$1, { ...background });
-}
+}, compareProps);
+Background.displayName = "Background";
 
 export { Background };

package/dist/base/Base.d.ts

@@ -0,0 +1,28 @@
+type WithDimmed = {
+    data: {
+        dimmed?: Base.Dimmed;
+    };
+};
+type WithHovered = {
+    data: {
+        hovered?: boolean;
+    };
+};
+declare function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
+declare function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
+declare function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
+declare function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+type WithData<D> = {
+    data: D;
+};
+declare function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
+declare function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
+export declare const Base: {
+    setDimmed: typeof setDimmed;
+    setHovered: typeof setHovered;
+    setData: typeof setData;
+};
+export declare namespace Base {
+    type Dimmed = 'immediate' | boolean;
+}
+export {};

package/dist/base/BaseXYFlow.d.ts

@@ -4,12 +4,12 @@ import { ViewPadding } from '../LikeC4Diagram.props';
 import { XYBackground } from './Background';
 import { BaseEdge, BaseNode } from './types';
 export type BaseXYFlowProps<NodeType extends BaseNode, EdgeType extends BaseEdge> = Simplify<{
-    pannable?: boolean;
-    zoomable?: boolean;
-    nodesSelectable?: boolean;
-    nodesDraggable?: boolean;
+    pannable: boolean;
+    zoomable: boolean;
+    nodesSelectable: boolean;
+    nodesDraggable: boolean;
     background?: 'transparent' | 'solid' | XYBackground;
     fitViewPadding?: ViewPadding | undefined;
     onViewportResize?: undefined | (() => void);
-} & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
+} & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'fitViewOptions' | 'nodesSelectable' | 'nodesDraggable'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
 export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -1,15 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { useMantineColorScheme } from '@mantine/core';
-import { useCallbackRef } from '@mantine/hooks';
 import { ReactFlow, useStore } from '@xyflow/react';
+import { useMemo } from 'react';
+import { useCallbackRef } from '../hooks/useCallbackRef.js';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
 import { roundDpr } from '../utils/roundDpr.js';
 import { stopPropagation } from '../utils/xyflow.js';
 import { Background } from './Background.js';
+import { Base } from './Base.js';
 import { MinZoom, MaxZoom } from './const.js';
-import { Base } from './types.js';
 
 function BaseXYFlow({
   nodes,
@@ -35,6 +36,12 @@ function BaseXYFlow({
   onEdgeMouseLeave,
   ...props
 }) {
+  const fitViewOptions = useMemo(() => ({
+    minZoom: MinZoom,
+    maxZoom: 1,
+    padding: fitViewPadding,
+    includeHiddenNodes: false
+  }), [fitViewPadding]);
   const isBgWithPattern = background !== "transparent" && background !== "solid";
   const isZoomTooSmall = useIsZoomTooSmall();
   const xystore = useXYStoreApi();
@@ -64,12 +71,7 @@ function BaseXYFlow({
       maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
-      fitViewOptions: {
-        minZoom: MinZoom,
-        maxZoom: 1,
-        padding: fitViewPadding,
-        includeHiddenNodes: false
-      },
+      fitViewOptions,
       preventScrolling: zoomable || pannable,
       defaultMarkerColor: "var(--xy-edge-stroke)",
       noDragClassName: "nodrag",
@@ -99,57 +101,49 @@ function BaseXYFlow({
         }
         onMoveEnd?.(event, { x: roundedX, y: roundedY, zoom });
       }),
-      onNodeMouseEnter: useCallbackRef((_event, node) => {
+      onNodeMouseEnter: useCallbackRef((event, node) => {
         if (onNodeMouseEnter) {
-          onNodeMouseEnter(_event, node);
+          onNodeMouseEnter(event, node);
           return;
         }
-        if (!node.data.hovered) {
-          onNodesChange([{
-            id: node.id,
-            type: "replace",
-            item: Base.setHovered(node, true)
-          }]);
-        }
+        onNodesChange([{
+          id: node.id,
+          type: "replace",
+          item: Base.setHovered(node, true)
+        }]);
       }),
-      onNodeMouseLeave: useCallbackRef((_event, node) => {
+      onNodeMouseLeave: useCallbackRef((event, node) => {
         if (onNodeMouseLeave) {
-          onNodeMouseLeave(_event, node);
+          onNodeMouseLeave(event, node);
           return;
         }
-        if (node.data.hovered) {
-          onNodesChange([{
-            id: node.id,
-            type: "replace",
-            item: Base.setHovered(node, false)
-          }]);
-        }
+        onNodesChange([{
+          id: node.id,
+          type: "replace",
+          item: Base.setHovered(node, false)
+        }]);
       }),
-      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+      onEdgeMouseEnter: useCallbackRef((event, edge) => {
         if (onEdgeMouseEnter) {
-          onEdgeMouseEnter(_event, edge);
+          onEdgeMouseEnter(event, edge);
           return;
         }
-        if (!edge.data.hovered) {
-          onEdgesChange([{
-            id: edge.id,
-            type: "replace",
-            item: Base.setHovered(edge, true)
-          }]);
-        }
+        onEdgesChange([{
+          id: edge.id,
+          type: "replace",
+          item: Base.setHovered(edge, true)
+        }]);
       }),
-      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+      onEdgeMouseLeave: useCallbackRef((event, edge) => {
         if (onEdgeMouseLeave) {
-          onEdgeMouseLeave(_event, edge);
+          onEdgeMouseLeave(event, edge);
           return;
         }
-        if (edge.data.hovered) {
-          onEdgesChange([{
-            id: edge.id,
-            type: "replace",
-            item: Base.setHovered(edge, false)
-          }]);
-        }
+        onEdgesChange([{
+          id: edge.id,
+          type: "replace",
+          item: Base.setHovered(edge, false)
+        }]);
       }),
       onNodeDoubleClick: stopPropagation,
       onEdgeDoubleClick: stopPropagation,

package/dist/base/index.d.ts

@@ -1,3 +1,7 @@
-export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
-export * from './types';
+export { Background, type XYBackground, type XYBackgroundProps, type XYBackgroundVariant, } from './Background';
+export { BaseXYFlow, type BaseXYFlowProps, } from './BaseXYFlow';
+export * from './Base';
 export * from './const';
+export * from './types';
+export { updateEdges } from './updateEdges';
+export { updateNodes } from './updateNodes';

package/dist/base/types.d.ts

@@ -1,5 +1,6 @@
 import { Edge, EdgeProps, Node, NodeProps } from '@xyflow/react';
 import { OptionalKeysOf, SetRequired, Simplify } from 'type-fest';
+import { Base } from './Base';
 export type BaseNodeData = {
     /**
      * Whether the cursor is hovering over the node
@@ -41,33 +42,6 @@ export type BaseNodePropsWithData<Data extends Record<string, unknown>> = BaseNo
 export interface BaseEdgeProps<E extends BaseEdge = BaseEdge> extends EdgeProps<E> {
 }
 export type BaseEdgePropsWithData<Data extends Record<string, unknown>> = BaseEdgeProps<BaseEdge<Data>>;
-type WithDimmed = {
-    data: {
-        dimmed?: Base.Dimmed;
-    };
-};
-type WithHovered = {
-    data: {
-        hovered?: boolean;
-    };
-};
-declare function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
-declare function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
-declare function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
-declare function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
-type WithData<D> = {
-    data: D;
-};
-declare function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
-declare function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
-export declare const Base: {
-    setDimmed: typeof setDimmed;
-    setHovered: typeof setHovered;
-    setData: typeof setData;
-};
-export declare namespace Base {
-    type Dimmed = 'immediate' | boolean;
-}
 /**
  * To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
  *
@@ -90,4 +64,3 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 } & {
     [P in Keys]-?: T[P] | undefined;
 }>;
-export {};