@neo4j-nvl/react 1.2.1 → 2.0.0-1e695738

package/CHANGELOG.md

@@ -2,6 +2,72 @@
 
 All notable changes to NVL will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [Unreleased]
+
+This release adds keyboard actions for moving nodes, ships an agent skill for NVL, and makes all packages loadable as ESM in Node.js without a bundler.
+
+### Added
+
+* Keyboard interaction handler actions for moving nodes with the arrow keys, with a new `onNodeMove` callback.
+* Agent skill files for NVL, shipped with `@neo4j-nvl/base`.
+
+### Changed
+
+* `@neo4j-nvl/react` and `@neo4j-nvl/interaction-handlers` are now spec-compliant ESM with `"type": "module"` and an `exports` map. Note that deep imports into `lib/` will no longer work.
+* Replaced `lodash` with `lodash-es` in `@neo4j-nvl/react` and `@neo4j-nvl/interaction-handlers` (Jest users transforming `@neo4j-nvl/*` also need to transform `lodash-es`).
+* Type declarations of `@neo4j-nvl/base` now resolve correctly with `moduleResolution: "nodenext"`.
+* Container resizing uses the native `ResizeObserver` instead of the `resizelistener` dependency.
+* Default `height` and `outline` styles of NVL containers can now be overridden by stylesheets.
+
+### Fixed
+
+* `fit()` zooms out beyond `minZoom` when `allowDynamicMinZoom` is `true` and the graph does not fit the viewport.
+* `onHover` callback's `element` parameter is now typed as possibly `undefined`, matching the runtime behaviour.
+* Added missing caret for the React 18 peer dependency range in `@neo4j-nvl/react`.
+
+## [2.0.0] - 2026-09-15
+
+This 2.0.0 major release upgrades NVL to WebGL2 for both the renderer and physics engine, unlocking major performance improvements. It also adds new clustering capabilities with visual decorations to the force directed and hierarchical layouts.
+
+### Added
+
+* `clusterBy` layout option for both force-directed and hierarchical layouts.
+* Cluster interaction API for handling events on clustered elements.
+* Support for rendering icons and arrowheads in the WebGL renderer.
+* Configurable minimum and maximum FPS caps for the rendering loop.
+* Circle seeding option for the physics layout.
+
+### Changed
+
+* Upgraded the WebGL renderer and physics engine to use WebGL2.
+* Migrated the hierarchical layout engine dependency to `@dagrejs/dagre` 3.1.1.
+* Greatly optimized physics layout performance and stabalisation speed.
+* Improved rendering performance.
+
+### Fixed
+
+* Added safety guards to harden the renderer against missing X/Y coordinate data.
+
+### Removed
+
+* **BREAKING:** Removed deprecated Cytoscape support settings.
+* **BREAKING:** Removed deprecated standalone `layout` and `layoutOptions` props from the React wrappers in favour of the same props inside `NvlOptions`.
+* **BREAKING:** Removed deprecated `intelWorkaround` layout setting APIs.
+* **BREAKING:** Removed deprecated `onZoom` callback in favour of `onZoomAndPan`.
+
+## [1.2.2] - 2026-09-11
+
+This 1.2.2 patch release adds migration warnings for breaking changes planned for the next major release.
+
+### Added
+* `styling.overlayLineColor` for overlay UI stroke color (e.g. minimap viewport box).
+* Note in documentation on changes to client/screen coordinates on `NVL.getNodes()` and `onLayoutStep` `x`/`y`, moving screen coordinates to `clientPosition`.
+
+### Deprecated
+* `styling.minimapViewportBoxColor` in favour of `styling.overlayLineColor` (old option still works as a fallback).
+* `ForceDirectedOptions.intelWorkaround` (upgrade to WebGL2 in the next major release removes the need for it).
+* Top-level React wrapper `layout` / `layoutOptions` props in favour of `nvlOptions.layout` / `nvlOptions.layoutOptions`.
+
 ## [1.2.1] - 2026-07-28
 
 This 1.2.1 patch release contains several fixes and accessibility improvements.

package/README.md

@@ -47,7 +47,7 @@ const nvlRef = useRef<NVL>()
     rels={[{ from: '0', to: '1', id: '10' }]}
     ref={nvlRef}
   />
-  <button onClick={() => nvlRef.current?.zoomToNodes([0, 1])}>Zoom to Nodes</button>
+  <button onClick={() => nvlRef.current?.fit(['0', '1'])}>Zoom to Nodes</button>
 </div>
 ```
 
@@ -59,18 +59,18 @@ Events can be turned on and off by passing a callback function or a boolean valu
 `mouseEventCallbacks` prop. The callback function will be called with the event's arguments when the event is triggered. If a boolean value is passed, the event will be turned on or off accordingly.
 
 ```tsx
-const [multiSelect, setMultiSelect] = useState(false)
+const [boxSelect, setBoxSelect] = useState(false)
 <>
-  <button onClick={() => setMultiSelect(!multiSelect)}>
-    {multiSelect ? 'Disable' : 'Enable'} multi-select
+  <button onClick={() => setBoxSelect(!boxSelect)}>
+    {boxSelect ? 'Disable' : 'Enable'} box select
   </button>
   <InteractiveNvlWrapper
     nodes={nodes}
     rels={relationships}
     mouseEventCallbacks={{
-      onHover: (element) => console.log(element),
+      onHover: (element, hitElements) => console.log(element, hitElements),
       onNodeClick: (node) => console.log(node),
-      onMultiSelect: multiSelect
+      onBoxSelect: boxSelect
    }}
   />
 </>

package/lib/basic-wrapper/BasicNvlWrapper.d.ts

@@ -1,47 +1,36 @@
-import type { ExternalCallbacks, Layout, LayoutOptions, Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
-import NVL from '@neo4j-nvl/base';
-import { type HTMLProps } from 'react';
+import NVL, { ExternalCallbacks, Node, NvlOptions, Relationship } from "@neo4j-nvl/base";
+import { HTMLProps } from "react";
 /**
  * The properties that can be passed to the {@link BasicNvlWrapper} component.
  */
 export interface BasicReactWrapperProps {
-    /** The nodes of the graph of type Node[] */
-    nodes: Node[];
-    /** The rels of the graph of type Relationship[] */
-    rels: Relationship[];
-    /**
-     * The layout, can be 'forceDirected' or 'hierarchical'
-     * @deprecated Use the layout property in nvlOptions instead. This property will be removed in a future version.
-     */
-    layout?: Layout;
-    /**
-     * Options for the current layout
-     * @deprecated Use the layoutOptions property in nvlOptions instead. This property will be removed in a future version.
-     */
-    layoutOptions?: LayoutOptions;
-    /** an Object containing functions for callbacks on certain actions */
-    nvlCallbacks?: ExternalCallbacks;
-    /** An object containing options for the Nvl instance */
-    nvlOptions?: NvlOptions;
-    /** Sets the positions of the nodes in the graph using the setNodePositions method. */
-    positions?: Node[];
-    /**
-     * Sets the zoom level of the viewport using the setZoom method.
-     * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
-     */
-    zoom?: number;
-    /**
-     * Sets the pan coordinates of the viewport using the setPan method.
-     * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
-     */
-    pan?: {
-        /** The x coordinate of the pan. */
-        x: number;
-        /** The y coordinate of the pan. */
-        y: number;
-    };
-    /** A callback to handle any errors that happen during NVL initialization */
-    onInitializationError?: (error: unknown) => void;
+  /** The nodes of the graph of type Node[] */
+  nodes: Node[];
+  /** The rels of the graph of type Relationship[] */
+  rels: Relationship[];
+  /** an Object containing functions for callbacks on certain actions */
+  nvlCallbacks?: ExternalCallbacks;
+  /** An object containing options for the Nvl instance */
+  nvlOptions?: NvlOptions;
+  /** Sets the positions of the nodes in the graph using the setNodePositions method. */
+  positions?: Node[];
+  /**
+   * Sets the zoom level of the viewport using the setZoom method.
+   * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
+   */
+  zoom?: number;
+  /**
+   * Sets the pan coordinates of the viewport using the setPan method.
+   * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
+   */
+  pan?: {
+    /** The x coordinate of the pan. */
+    x: number;
+    /** The y coordinate of the pan. */
+    y: number;
+  };
+  /** A callback to handle any errors that happen during NVL initialization */
+  onInitializationError?: (error: unknown) => void;
 }
 /**
  *
@@ -51,4 +40,4 @@ export interface BasicReactWrapperProps {
  *
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
  */
-export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<Partial<Pick<NVL, "restart" | "destroy" | "addAndUpdateElementsInGraph" | "getSelectedNodes" | "getSelectedRelationships" | "removeNodesWithIds" | "removeRelationshipsWithIds" | "getNodes" | "getRelationships" | "getNodeById" | "getRelationshipById" | "getPositionById" | "getCurrentOptions" | "deselectAll" | "fit" | "resetZoom" | "setRenderer" | "setDisableWebGL" | "pinNode" | "unPinNode" | "setLayout" | "setLayoutOptions" | "getNodesOnScreen" | "getNodePositions" | "setNodePositions" | "isLayoutMoving" | "saveToFile" | "saveToSvg" | "getImageDataUrl" | "getSvgDataUrl" | "saveFullGraphToLargeFile" | "getZoomLimits" | "setZoom" | "getScale" | "getPan" | "getHits" | "getContainer">>>>>;
+export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<Partial<Pick<NVL, "restart" | "addAndUpdateElementsInGraph" | "getSelectedNodes" | "getSelectedRelationships" | "removeNodesWithIds" | "removeRelationshipsWithIds" | "getNodes" | "getRelationships" | "getNodeById" | "getRelationshipById" | "getPositionById" | "getCurrentOptions" | "destroy" | "deselectAll" | "fit" | "resetZoom" | "setRenderer" | "setDisableWebGL" | "pinNode" | "unPinNode" | "setLayout" | "setLayoutOptions" | "getNodesOnScreen" | "getNodePositions" | "setNodePositions" | "isLayoutMoving" | "saveToFile" | "saveToSvg" | "getImageDataUrl" | "getSvgDataUrl" | "saveFullGraphToLargeFile" | "getZoomLimits" | "setZoom" | "getScale" | "getPan" | "getHits" | "getContainer">>>>>;

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -1,151 +1,118 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import NVL from '@neo4j-nvl/base';
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { BASIC_WRAPPER_ID } from '../utils/constants';
-import { getMapDifferences, getNodeAttributeDifferences } from '../utils/graph-comparison';
-import { useDeepCompareEffect } from '../utils/hooks';
+import { BASIC_WRAPPER_ID } from "../utils/constants.js";
+import { getMapDifferences, getNodeAttributeDifferences } from "../utils/graph-comparison.js";
+import { useDeepCompareEffect } from "../utils/hooks.js";
+import NVL from "@neo4j-nvl/base";
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/basic-wrapper/BasicNvlWrapper.tsx
 /**
- *
- * A basic React wrapper that wraps the NVL base library within a React component.
- * It takes the class' arguments as properties, which are passed to the NVL constructor.
- * Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
- */
-export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, positions = [], zoom, pan, onInitializationError, ...nvlEvents }, ref) => {
-    const nvlRef = useRef(null);
-    const prevZoomRef = useRef(undefined);
-    const prevPanRef = useRef(undefined);
-    useImperativeHandle(ref, () => {
-        const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
-        return nvlMethods.reduce((current, method) => ({
-            ...current,
-            [method]: (...args) => {
-                if (nvlRef.current === null) {
-                    return null;
-                }
-                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                return nvlRef.current[method](...args);
-            }
-        }), {});
-    });
-    const containerRef = useRef(null);
-    const [currentNodes, setCurrentNodes] = useState(nodes);
-    const [currentRels, setCurrentRels] = useState(rels);
-    useEffect(() => {
-        return () => {
-            nvlRef.current?.destroy();
-            nvlRef.current = null;
-            prevZoomRef.current = undefined;
-            prevPanRef.current = undefined;
-        };
-    }, []);
-    useEffect(() => {
-        let newNvl = null;
-        const hasMinimap = 'minimapContainer' in nvlOptions;
-        const minimapContainerIsReady = hasMinimap ? nvlOptions.minimapContainer !== null : true;
-        const mainContainerIsReady = containerRef.current !== null;
-        if (mainContainerIsReady && minimapContainerIsReady) {
-            if (nvlRef.current === null) {
-                const combinedOptions = { ...nvlOptions, layoutOptions };
-                if (layout !== undefined) {
-                    combinedOptions.layout = layout;
-                }
-                try {
-                    newNvl = new NVL(containerRef.current, currentNodes, currentRels, combinedOptions, nvlCallbacks);
-                    nvlRef.current = newNvl;
-                    setCurrentRels(rels);
-                    setCurrentNodes(nodes);
-                }
-                catch (e) {
-                    if (typeof onInitializationError === 'function') {
-                        onInitializationError(e);
-                    }
-                    else {
-                        throw e;
-                    }
-                }
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [containerRef.current, nvlOptions.minimapContainer]);
-    useEffect(() => {
-        if (nvlRef.current === null) {
-            return;
-        }
-        const nodeChanges = getMapDifferences(currentNodes, nodes);
-        const nodeDiff = getNodeAttributeDifferences(currentNodes, nodes);
-        const relChanges = getMapDifferences(currentRels, rels);
-        const graphIsUnchanged = nodeChanges.added.length === 0 &&
-            nodeChanges.removed.length === 0 &&
-            nodeDiff.length === 0 &&
-            relChanges.added.length === 0 &&
-            relChanges.removed.length === 0 &&
-            relChanges.updated.length === 0;
-        if (graphIsUnchanged) {
-            return;
-        }
-        setCurrentRels(rels);
-        setCurrentNodes(nodes);
-        const nodesToAddAndUpdate = [...nodeChanges.added, ...nodeDiff];
-        const relsToAddAndUpdate = [...relChanges.added, ...relChanges.updated];
-        nvlRef.current.addAndUpdateElementsInGraph(nodesToAddAndUpdate, relsToAddAndUpdate);
-        const relationshipsToRemove = relChanges.removed.map((r) => r.id);
-        const nodesToRemove = nodeChanges.removed.map((n) => n.id);
-        nvlRef.current.removeRelationshipsWithIds(relationshipsToRemove);
-        nvlRef.current.removeNodesWithIds(nodesToRemove);
-    }, [currentNodes, currentRels, nodes, rels]);
-    useEffect(() => {
-        const updatedLayout = layout ?? nvlOptions.layout;
-        if (nvlRef.current === null || updatedLayout === undefined) {
-            return;
-        }
-        nvlRef.current.setLayout(updatedLayout);
-    }, [layout, nvlOptions.layout]);
-    useDeepCompareEffect(() => {
-        const updatedLayoutOptions = layoutOptions ?? nvlOptions?.layoutOptions;
-        if (nvlRef.current === null || updatedLayoutOptions === undefined) {
-            return;
-        }
-        nvlRef.current.setLayoutOptions(updatedLayoutOptions);
-    }, [layoutOptions, nvlOptions.layoutOptions]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.renderer === undefined) {
-            return;
-        }
-        nvlRef.current.setRenderer(nvlOptions.renderer);
-    }, [nvlOptions.renderer]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.disableWebGL === undefined) {
-            return;
-        }
-        nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
-    }, [nvlOptions.disableWebGL]);
-    useEffect(() => {
-        if (nvlRef.current === null || positions.length === 0) {
-            return;
-        }
-        nvlRef.current.setNodePositions(positions);
-    }, [positions]);
-    useEffect(() => {
-        if (nvlRef.current === null) {
-            return;
-        }
-        const currentZoom = prevZoomRef.current;
-        const currentPan = prevPanRef.current;
-        const zoomHasChanged = zoom !== undefined && zoom !== currentZoom;
-        const panHasChanged = pan !== undefined && (pan.x !== currentPan?.x || pan.y !== currentPan.y);
-        if (zoomHasChanged && panHasChanged) {
-            nvlRef.current.setZoomAndPan(zoom, pan.x, pan.y);
-        }
-        else if (zoomHasChanged) {
-            nvlRef.current.setZoom(zoom);
-        }
-        else if (panHasChanged) {
-            nvlRef.current.setPan(pan.x, pan.y);
-        }
-        prevZoomRef.current = zoom;
-        prevPanRef.current = pan;
-    }, [zoom, pan]);
-    return _jsx("div", { id: BASIC_WRAPPER_ID, ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
+*
+* A basic React wrapper that wraps the NVL base library within a React component.
+* It takes the class' arguments as properties, which are passed to the NVL constructor.
+* Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
+*
+* For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
+*/
+const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, nvlCallbacks = {}, nvlOptions = {}, positions = [], zoom, pan, onInitializationError, ...nvlEvents }, ref) => {
+	const nvlRef = useRef(null);
+	const prevZoomRef = useRef(void 0);
+	const prevPanRef = useRef(void 0);
+	useImperativeHandle(ref, () => {
+		return Object.getOwnPropertyNames(NVL.prototype).reduce((current, method) => ({
+			...current,
+			[method]: (...args) => {
+				if (nvlRef.current === null) return null;
+				return nvlRef.current[method](...args);
+			}
+		}), {});
+	});
+	const containerRef = useRef(null);
+	const [currentNodes, setCurrentNodes] = useState(nodes);
+	const [currentRels, setCurrentRels] = useState(rels);
+	useEffect(() => {
+		return () => {
+			nvlRef.current?.destroy();
+			nvlRef.current = null;
+			prevZoomRef.current = void 0;
+			prevPanRef.current = void 0;
+		};
+	}, []);
+	useEffect(() => {
+		let newNvl = null;
+		const minimapContainerIsReady = "minimapContainer" in nvlOptions ? nvlOptions.minimapContainer !== null : true;
+		if (containerRef.current !== null && minimapContainerIsReady) {
+			if (nvlRef.current === null) try {
+				newNvl = new NVL(containerRef.current, currentNodes, currentRels, nvlOptions, nvlCallbacks);
+				nvlRef.current = newNvl;
+				setCurrentRels(rels);
+				setCurrentNodes(nodes);
+			} catch (e) {
+				if (typeof onInitializationError === "function") onInitializationError(e);
+				else throw e;
+			}
+		}
+	}, [containerRef.current, nvlOptions.minimapContainer]);
+	useEffect(() => {
+		if (nvlRef.current === null) return;
+		const nodeChanges = getMapDifferences(currentNodes, nodes);
+		const nodeDiff = getNodeAttributeDifferences(currentNodes, nodes);
+		const relChanges = getMapDifferences(currentRels, rels);
+		if (nodeChanges.added.length === 0 && nodeChanges.removed.length === 0 && nodeDiff.length === 0 && relChanges.added.length === 0 && relChanges.removed.length === 0 && relChanges.updated.length === 0) return;
+		setCurrentRels(rels);
+		setCurrentNodes(nodes);
+		const nodesToAddAndUpdate = [...nodeChanges.added, ...nodeDiff];
+		const relsToAddAndUpdate = [...relChanges.added, ...relChanges.updated];
+		nvlRef.current.addAndUpdateElementsInGraph(nodesToAddAndUpdate, relsToAddAndUpdate);
+		const relationshipsToRemove = relChanges.removed.map((r) => r.id);
+		const nodesToRemove = nodeChanges.removed.map((n) => n.id);
+		nvlRef.current.removeRelationshipsWithIds(relationshipsToRemove);
+		nvlRef.current.removeNodesWithIds(nodesToRemove);
+	}, [
+		currentNodes,
+		currentRels,
+		nodes,
+		rels
+	]);
+	useEffect(() => {
+		if (nvlRef.current === null || nvlOptions.layout === void 0) return;
+		nvlRef.current.setLayout(nvlOptions.layout);
+	}, [nvlOptions.layout]);
+	useDeepCompareEffect(() => {
+		if (nvlRef.current === null || nvlOptions.layoutOptions === void 0) return;
+		nvlRef.current.setLayoutOptions(nvlOptions.layoutOptions);
+	}, [nvlOptions.layoutOptions]);
+	useEffect(() => {
+		if (nvlRef.current === null || nvlOptions.renderer === void 0) return;
+		nvlRef.current.setRenderer(nvlOptions.renderer);
+	}, [nvlOptions.renderer]);
+	useEffect(() => {
+		if (nvlRef.current === null || nvlOptions.disableWebGL === void 0) return;
+		nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
+	}, [nvlOptions.disableWebGL]);
+	useEffect(() => {
+		if (nvlRef.current === null || positions.length === 0) return;
+		nvlRef.current.setNodePositions(positions);
+	}, [positions]);
+	useEffect(() => {
+		if (nvlRef.current === null) return;
+		const currentZoom = prevZoomRef.current;
+		const currentPan = prevPanRef.current;
+		const zoomHasChanged = zoom !== void 0 && zoom !== currentZoom;
+		const panHasChanged = pan !== void 0 && (pan.x !== currentPan?.x || pan.y !== currentPan.y);
+		if (zoomHasChanged && panHasChanged) nvlRef.current.setZoomAndPan(zoom, pan.x, pan.y);
+		else if (zoomHasChanged) nvlRef.current.setZoom(zoom);
+		else if (panHasChanged) nvlRef.current.setPan(pan.x, pan.y);
+		prevZoomRef.current = zoom;
+		prevPanRef.current = pan;
+	}, [zoom, pan]);
+	return /* @__PURE__ */ jsx("div", {
+		id: BASIC_WRAPPER_ID,
+		ref: containerRef,
+		style: {
+			height: "100%",
+			outline: "0"
+		},
+		...nvlEvents
+	});
 }));
+export { BasicNvlWrapper };

package/lib/index.d.ts

@@ -1,8 +1,5 @@
-import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
-import type { BasicReactWrapperProps } from './basic-wrapper/BasicNvlWrapper';
-import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-import type { InteractionOptions, InteractiveNvlWrapperProps, KeyboardEvent, KeyboardEventCallbacks, MouseEvent, MouseEventCallbacks } from './interactive-nvl-wrapper/types';
-import type { StaticPictureWrapperProps } from './static-picture-wrapper/StaticPictureWrapper';
-import { StaticPictureWrapper } from './static-picture-wrapper/StaticPictureWrapper';
-export { BasicNvlWrapper, InteractiveNvlWrapper, StaticPictureWrapper };
-export type { MouseEventCallbacks, KeyboardEventCallbacks, MouseEvent, KeyboardEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps, StaticPictureWrapperProps };
+import { BasicNvlWrapper, BasicReactWrapperProps } from "./basic-wrapper/BasicNvlWrapper.js";
+import { InteractionOptions, InteractiveNvlWrapperProps, KeyboardEvent, KeyboardEventCallbacks, MouseEvent, MouseEventCallbacks } from "./interactive-nvl-wrapper/types.js";
+import { InteractiveNvlWrapper } from "./interactive-nvl-wrapper/InteractiveNvlWrapper.js";
+import { StaticPictureWrapper, StaticPictureWrapperProps } from "./static-picture-wrapper/StaticPictureWrapper.js";
+export { BasicNvlWrapper, type BasicReactWrapperProps, type InteractionOptions, InteractiveNvlWrapper, type InteractiveNvlWrapperProps, type KeyboardEvent, type KeyboardEventCallbacks, type MouseEvent, type MouseEventCallbacks, StaticPictureWrapper, type StaticPictureWrapperProps };

package/lib/index.js

@@ -1,4 +1,4 @@
-import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
-import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-import { StaticPictureWrapper } from './static-picture-wrapper/StaticPictureWrapper';
+import { BasicNvlWrapper } from "./basic-wrapper/BasicNvlWrapper.js";
+import { InteractiveNvlWrapper } from "./interactive-nvl-wrapper/InteractiveNvlWrapper.js";
+import { StaticPictureWrapper } from "./static-picture-wrapper/StaticPictureWrapper.js";
 export { BasicNvlWrapper, InteractiveNvlWrapper, StaticPictureWrapper };

package/lib/interactive-nvl-wrapper/InteractionHandlers.d.ts

@@ -1,11 +1,11 @@
-import type NVL from '@neo4j-nvl/base';
-import type { MutableRefObject } from 'react';
-import type { InteractionOptions, KeyboardEventCallbacks, MouseEventCallbacks } from './types';
+import { InteractionOptions, KeyboardEventCallbacks, MouseEventCallbacks } from "./types.js";
+import NVL from "@neo4j-nvl/base";
+import { MutableRefObject } from "react";
 interface InteractionHandlersProps {
-    nvlRef: MutableRefObject<NVL | null>;
-    mouseEventCallbacks: MouseEventCallbacks;
-    keyboardEventCallbacks: KeyboardEventCallbacks;
-    interactionOptions: InteractionOptions;
+  nvlRef: MutableRefObject<NVL | null>;
+  mouseEventCallbacks: MouseEventCallbacks;
+  keyboardEventCallbacks: KeyboardEventCallbacks;
+  interactionOptions: InteractionOptions;
 }
 export declare const InteractionHandlers: React.FC<InteractionHandlersProps>;
-export {};
+export {};