@neo4j-nvl/interaction-handlers 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -2,7 +2,31 @@
 
 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/).
 
-## [2.0.0] - 2026-09-11
+## [2.1.0] - 2026-11-10
+
+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`.
+* Several dependency updates
+
+## [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.
 

package/README.md

@@ -33,4 +33,12 @@ clickInteraction.updateCallback('onNodeClick', (node) => {
 
 If you are using React and want to add interactivity to your graph, you can also make use of the InteractiveNvlWrapper.
 
+### Agent skills
+
+The agent skill for NVL (`neo4j-nvl-skill`) ships with `@neo4j-nvl/base`, which this package depends on. To make it available to your AI coding assistant, run the following with a recent version of the `skills` CLI:
+
+```bash
+npx skills experimental_sync
+```
+
 You can find more instructions and examples on how to use NVL interaction handlers in the [docs](https://neo4j.com/docs/nvl/current/interaction-handlers/) and [API docs](https://neo4j.com/docs/api/nvl/current/modules/_neo4j_nvl_interaction_handlers.html), as well as in these [NVL code examples](https://neo4j.com/docs/api/nvl/current/examples.html?tab=plain-interaction-module).

package/lib/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const NODE_EDGE_WIDTH = 10;
-export declare const DRAG_THRESHOLD = 10;
+export declare const DRAG_THRESHOLD = 10;

package/lib/constants.js

@@ -1,2 +1,4 @@
-export const NODE_EDGE_WIDTH = 10;
-export const DRAG_THRESHOLD = 10;
+// src/constants.ts
+const NODE_EDGE_WIDTH = 10;
+const DRAG_THRESHOLD = 10;
+export { DRAG_THRESHOLD, NODE_EDGE_WIDTH };

package/lib/index.d.ts

@@ -1,20 +1,10 @@
-import type { BoxSelectInteractionCallbacks, BoxSelectInteractionOptions } from './interaction-handlers/box-select-interaction';
-import { BoxSelectInteraction } from './interaction-handlers/box-select-interaction';
-import type { ClickInteractionCallbacks, ClickInteractionOptions } from './interaction-handlers/click-interaction';
-import { ClickInteraction } from './interaction-handlers/click-interaction';
-import { DragNodeInteraction } from './interaction-handlers/drag-node-interaction';
-import type { DragNodeInteractionCallbacks } from './interaction-handlers/drag-node-interaction';
-import { DrawInteraction } from './interaction-handlers/draw-interaction';
-import type { DrawInteractionCallbacks, DrawInteractionOptions } from './interaction-handlers/draw-interaction';
-import type { HoverInteractionCallbacks, HoverInteractionOptions } from './interaction-handlers/hover-interaction';
-import { HoverInteraction } from './interaction-handlers/hover-interaction';
-import type { KeyboardInteractionCallbacks, KeyboardInteractionOptions } from './interaction-handlers/keyboard-interaction';
-import { KeyboardInteraction } from './interaction-handlers/keyboard-interaction';
-import { LassoInteraction } from './interaction-handlers/lasso-interaction';
-import type { LassoInteractionCallbacks, LassoInteractionOptions } from './interaction-handlers/lasso-interaction';
-import type { PanInteractionCallbacks, PanInteractionOptions } from './interaction-handlers/pan-interaction';
-import { PanInteraction } from './interaction-handlers/pan-interaction';
-import type { ZoomInteractionCallbacks, ZoomInteractionOptions } from './interaction-handlers/zoom-interaction';
-import { ZoomInteraction } from './interaction-handlers/zoom-interaction';
-export type { BoxSelectInteractionOptions, BoxSelectInteractionCallbacks, ClickInteractionOptions, HoverInteractionOptions, HoverInteractionCallbacks, DragNodeInteractionCallbacks, ClickInteractionCallbacks, KeyboardInteractionCallbacks, KeyboardInteractionOptions, PanInteractionCallbacks, DrawInteractionCallbacks, PanInteractionOptions, ZoomInteractionCallbacks, ZoomInteractionOptions, LassoInteractionOptions, LassoInteractionCallbacks, DrawInteractionOptions };
-export { ZoomInteraction, PanInteraction, BoxSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction, LassoInteraction, KeyboardInteraction };
+import { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions } from "./interaction-handlers/box-select-interaction.js";
+import { ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions } from "./interaction-handlers/click-interaction.js";
+import { DragNodeInteraction, DragNodeInteractionCallbacks } from "./interaction-handlers/drag-node-interaction.js";
+import { DrawInteraction, DrawInteractionCallbacks, DrawInteractionOptions } from "./interaction-handlers/draw-interaction.js";
+import { HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions } from "./interaction-handlers/hover-interaction.js";
+import { KeyboardInteraction, KeyboardInteractionCallbacks, KeyboardInteractionOptions } from "./interaction-handlers/keyboard-interaction.js";
+import { LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions } from "./interaction-handlers/lasso-interaction.js";
+import { PanInteraction, PanInteractionCallbacks, PanInteractionOptions } from "./interaction-handlers/pan-interaction.js";
+import { ZoomInteraction, ZoomInteractionCallbacks, ZoomInteractionOptions } from "./interaction-handlers/zoom-interaction.js";
+export { BoxSelectInteraction, type BoxSelectInteractionCallbacks, type BoxSelectInteractionOptions, ClickInteraction, type ClickInteractionCallbacks, type ClickInteractionOptions, DragNodeInteraction, type DragNodeInteractionCallbacks, DrawInteraction, type DrawInteractionCallbacks, type DrawInteractionOptions, HoverInteraction, type HoverInteractionCallbacks, type HoverInteractionOptions, KeyboardInteraction, type KeyboardInteractionCallbacks, type KeyboardInteractionOptions, LassoInteraction, type LassoInteractionCallbacks, type LassoInteractionOptions, PanInteraction, type PanInteractionCallbacks, type PanInteractionOptions, ZoomInteraction, type ZoomInteractionCallbacks, type ZoomInteractionOptions };

package/lib/index.js

@@ -1,10 +1,10 @@
-import { BoxSelectInteraction } from './interaction-handlers/box-select-interaction';
-import { ClickInteraction } from './interaction-handlers/click-interaction';
-import { DragNodeInteraction } from './interaction-handlers/drag-node-interaction';
-import { DrawInteraction } from './interaction-handlers/draw-interaction';
-import { HoverInteraction } from './interaction-handlers/hover-interaction';
-import { KeyboardInteraction } from './interaction-handlers/keyboard-interaction';
-import { LassoInteraction } from './interaction-handlers/lasso-interaction';
-import { PanInteraction } from './interaction-handlers/pan-interaction';
-import { ZoomInteraction } from './interaction-handlers/zoom-interaction';
-export { ZoomInteraction, PanInteraction, BoxSelectInteraction, ClickInteraction, HoverInteraction, DragNodeInteraction, DrawInteraction, LassoInteraction, KeyboardInteraction };
+import { BoxSelectInteraction } from "./interaction-handlers/box-select-interaction.js";
+import { ClickInteraction } from "./interaction-handlers/click-interaction.js";
+import { DragNodeInteraction } from "./interaction-handlers/drag-node-interaction.js";
+import { DrawInteraction } from "./interaction-handlers/draw-interaction.js";
+import { HoverInteraction } from "./interaction-handlers/hover-interaction.js";
+import { KeyboardInteraction } from "./interaction-handlers/keyboard-interaction.js";
+import { LassoInteraction } from "./interaction-handlers/lasso-interaction.js";
+import { PanInteraction } from "./interaction-handlers/pan-interaction.js";
+import { ZoomInteraction } from "./interaction-handlers/zoom-interaction.js";
+export { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, KeyboardInteraction, LassoInteraction, PanInteraction, ZoomInteraction };

package/lib/interaction-handlers/base.d.ts

@@ -1,4 +1,4 @@
-import type { NVL } from '@neo4j-nvl/base';
+import { NVL } from "@neo4j-nvl/base";
 /**
  * Base class for all interactions.
  * @abstract
@@ -6,70 +6,70 @@ import type { NVL } from '@neo4j-nvl/base';
  * @hidden
  */
 declare abstract class BaseInteraction<P extends Record<string, unknown>> {
-    private readonly nvl;
-    private readonly options;
-    private readonly container;
-    /**
-     * @internal
-     * @hidden
-     */
-    callbackMap: Map<string, ((...args: unknown[]) => void) | boolean>;
-    /**
-     * @internal
-     * @hidden
-     */
-    constructor(nvl: NVL, options: P);
-    /**
-     * @internal
-     * @hidden
-     */
-    get nvlInstance(): NVL;
-    /**
-     * Returns the current options of the interaction.
-     * @returns The current options of the interaction.
-     */
-    get currentOptions(): P;
-    /**
-     * @internal
-     * @hidden
-     */
-    get containerInstance(): HTMLElement;
-    /**
-     * @internal
-     * @hidden
-     */
-    addEventListener: (type: keyof HTMLElementEventMap, listener: (event: Event) => void, options?: boolean | AddEventListenerOptions) => void;
-    /**
-     * @internal
-     * @hidden
-     */
-    removeEventListener: (type: keyof HTMLElementEventMap, listener: (event: Event) => void, options?: boolean | EventListenerOptions) => void;
-    /**
-     * @internal
-     * @hidden
-     */
-    callCallbackIfRegistered: (name: string, ...args: unknown[]) => void;
-    /**
-     * Add or update a callback for a given event of type.
-     * @param name - The name of the event.
-     * @param callback - The callback to be called when the event is triggered.
-     */
-    updateCallback: (name: string, callback: ((...args: unknown[]) => void) | boolean) => void;
-    /**
-     * Remove a callback for a given event of type.
-     * @param name - The name of the event.
-     */
-    removeCallback: (name: string) => void;
-    /**
-     * Enables or disables global text selection during a drag or pan operation.
-     * @param enable - Whether to enable or disable global text selection.
-     * @param eventFunction - The event function to be added/removed when text selection is disabled/enabled.
-     */
-    toggleGlobalTextSelection: (enable: boolean, eventFunction?: (this: HTMLElement, ev: MouseEvent) => void) => void;
-    /**
-     * @internal
-     * @hidden
-     */
-    abstract destroy(): void;
+  private readonly nvl;
+  private readonly options;
+  private readonly container;
+  /**
+   * @internal
+   * @hidden
+   */
+  callbackMap: Map<string, ((...args: unknown[]) => void) | boolean>;
+  /**
+   * @internal
+   * @hidden
+   */
+  constructor(nvl: NVL, options: P);
+  /**
+   * @internal
+   * @hidden
+   */
+  get nvlInstance(): NVL;
+  /**
+   * Returns the current options of the interaction.
+   * @returns The current options of the interaction.
+   */
+  get currentOptions(): P;
+  /**
+   * @internal
+   * @hidden
+   */
+  get containerInstance(): HTMLElement;
+  /**
+   * @internal
+   * @hidden
+   */
+  addEventListener: (type: keyof HTMLElementEventMap, listener: (event: Event) => void, options?: boolean | AddEventListenerOptions) => void;
+  /**
+   * @internal
+   * @hidden
+   */
+  removeEventListener: (type: keyof HTMLElementEventMap, listener: (event: Event) => void, options?: boolean | EventListenerOptions) => void;
+  /**
+   * @internal
+   * @hidden
+   */
+  callCallbackIfRegistered: (name: string, ...args: unknown[]) => void;
+  /**
+   * Add or update a callback for a given event of type.
+   * @param name - The name of the event.
+   * @param callback - The callback to be called when the event is triggered.
+   */
+  updateCallback: (name: string, callback: ((...args: unknown[]) => void) | boolean) => void;
+  /**
+   * Remove a callback for a given event of type.
+   * @param name - The name of the event.
+   */
+  removeCallback: (name: string) => void;
+  /**
+   * Enables or disables global text selection during a drag or pan operation.
+   * @param enable - Whether to enable or disable global text selection.
+   * @param eventFunction - The event function to be added/removed when text selection is disabled/enabled.
+   */
+  toggleGlobalTextSelection: (enable: boolean, eventFunction?: (this: HTMLElement, ev: MouseEvent) => void) => void;
+  /**
+   * @internal
+   * @hidden
+   */
+  abstract destroy(): void;
 }
-export { BaseInteraction };
+export { BaseInteraction };

package/lib/interaction-handlers/base.js

@@ -1,106 +1,100 @@
+// src/interaction-handlers/base.ts
 /**
- * Base class for all interactions.
- * @abstract
- * @internal
- * @hidden
- */
-class BaseInteraction {
-    nvl;
-    options;
-    container;
-    /**
-     * @internal
-     * @hidden
-     */
-    callbackMap;
-    /**
-     * @internal
-     * @hidden
-     */
-    constructor(nvl, options) {
-        this.nvl = nvl;
-        this.options = options;
-        this.container = this.nvl.getContainer();
-        this.callbackMap = new Map();
-    }
-    /**
-     * @internal
-     * @hidden
-     */
-    get nvlInstance() {
-        return this.nvl;
-    }
-    /**
-     * Returns the current options of the interaction.
-     * @returns The current options of the interaction.
-     */
-    get currentOptions() {
-        return this.options;
-    }
-    /**
-     * @internal
-     * @hidden
-     */
-    get containerInstance() {
-        return this.container;
-    }
-    /**
-     * @internal
-     * @hidden
-     */
-    addEventListener = (type, listener, options) => {
-        this.container?.addEventListener(type, listener, options);
-    };
-    /**
-     * @internal
-     * @hidden
-     */
-    removeEventListener = (type, listener, options) => {
-        this.container?.removeEventListener(type, listener, options);
-    };
-    /**
-     * @internal
-     * @hidden
-     */
-    callCallbackIfRegistered = (name, ...args) => {
-        const callback = this.callbackMap.get(name);
-        if (typeof callback === 'function') {
-            callback(...args);
-        }
-    };
-    /**
-     * Add or update a callback for a given event of type.
-     * @param name - The name of the event.
-     * @param callback - The callback to be called when the event is triggered.
-     */
-    updateCallback = (name, callback) => {
-        this.callbackMap.set(name, callback);
-    };
-    /**
-     * Remove a callback for a given event of type.
-     * @param name - The name of the event.
-     */
-    removeCallback = (name) => {
-        this.callbackMap.delete(name);
-    };
-    /**
-     * Enables or disables global text selection during a drag or pan operation.
-     * @param enable - Whether to enable or disable global text selection.
-     * @param eventFunction - The event function to be added/removed when text selection is disabled/enabled.
-     */
-    toggleGlobalTextSelection = (enable, eventFunction) => {
-        if (enable) {
-            document.body.style.removeProperty('user-select');
-            if (eventFunction) {
-                document.body.removeEventListener('mouseup', eventFunction);
-            }
-        }
-        else {
-            document.body.style.setProperty('user-select', 'none', 'important');
-            if (eventFunction) {
-                document.body.addEventListener('mouseup', eventFunction);
-            }
-        }
-    };
-}
+* Base class for all interactions.
+* @abstract
+* @internal
+* @hidden
+*/
+var BaseInteraction = class {
+	nvl;
+	options;
+	container;
+	/**
+	* @internal
+	* @hidden
+	*/
+	callbackMap;
+	/**
+	* @internal
+	* @hidden
+	*/
+	constructor(nvl, options) {
+		this.nvl = nvl;
+		this.options = options;
+		this.container = this.nvl.getContainer();
+		this.callbackMap = /* @__PURE__ */ new Map();
+	}
+	/**
+	* @internal
+	* @hidden
+	*/
+	get nvlInstance() {
+		return this.nvl;
+	}
+	/**
+	* Returns the current options of the interaction.
+	* @returns The current options of the interaction.
+	*/
+	get currentOptions() {
+		return this.options;
+	}
+	/**
+	* @internal
+	* @hidden
+	*/
+	get containerInstance() {
+		return this.container;
+	}
+	/**
+	* @internal
+	* @hidden
+	*/
+	addEventListener = (type, listener, options) => {
+		this.container?.addEventListener(type, listener, options);
+	};
+	/**
+	* @internal
+	* @hidden
+	*/
+	removeEventListener = (type, listener, options) => {
+		this.container?.removeEventListener(type, listener, options);
+	};
+	/**
+	* @internal
+	* @hidden
+	*/
+	callCallbackIfRegistered = (name, ...args) => {
+		const callback = this.callbackMap.get(name);
+		if (typeof callback === "function") callback(...args);
+	};
+	/**
+	* Add or update a callback for a given event of type.
+	* @param name - The name of the event.
+	* @param callback - The callback to be called when the event is triggered.
+	*/
+	updateCallback = (name, callback) => {
+		this.callbackMap.set(name, callback);
+	};
+	/**
+	* Remove a callback for a given event of type.
+	* @param name - The name of the event.
+	*/
+	removeCallback = (name) => {
+		this.callbackMap.delete(name);
+	};
+	/**
+	* Enables or disables global text selection during a drag or pan operation.
+	* @param enable - Whether to enable or disable global text selection.
+	* @param eventFunction - The event function to be added/removed when text selection is disabled/enabled.
+	*/
+	toggleGlobalTextSelection = (enable, eventFunction) => {
+		if (enable) {
+			document.body.style.removeProperty("user-select");
+			if (eventFunction) document.body.removeEventListener("mouseup", eventFunction);
+		} else {
+			document.body.style.setProperty("user-select", "none", "important");
+			if (eventFunction) document.body.addEventListener("mouseup", eventFunction);
+		}
+	};
+};
 export { BaseInteraction };

package/lib/interaction-handlers/box-select-interaction.d.ts

@@ -1,33 +1,33 @@
-import type { NVL, Node, Relationship } from '@neo4j-nvl/base';
-import { BaseInteraction } from './base';
+import { BaseInteraction } from "./base.js";
+import { NVL, Node, Relationship } from "@neo4j-nvl/base";
 /**
  * Options for the multi-select interaction handler to customize its behavior.
  */
 export type BoxSelectInteractionOptions = {
-    /**
-     * If true, the selection will be applied when the mouse is released.
-     * @default false
-     */
-    selectOnRelease?: boolean;
+  /**
+   * If true, the selection will be applied when the mouse is released.
+   * @default false
+   */
+  selectOnRelease?: boolean;
 };
 /**
  * Callbacks for the box select interaction handler.
  */
 export type BoxSelectInteractionCallbacks = {
-    /**
-     * Called once when the user presses the mouse on the canvas, starting the box selection.
-     * @param event - The original mouse event.
-     */
-    onBoxStarted?: ((event: MouseEvent) => void) | boolean;
-    /**
-     * Called once the user releases the mouse after multi-selecting.
-     * @param selectionObject - The selected nodes and relationships.
-     * @param event - The original mouse event.
-     */
-    onBoxSelect?: (({ nodes, rels }: {
-        nodes: Node[];
-        rels: Relationship[];
-    }, event: MouseEvent) => void) | boolean;
+  /**
+   * Called once when the user presses the mouse on the canvas, starting the box selection.
+   * @param event - The original mouse event.
+   */
+  onBoxStarted?: ((event: MouseEvent) => void) | boolean;
+  /**
+   * Called once the user releases the mouse after multi-selecting.
+   * @param selectionObject - The selected nodes and relationships.
+   * @param event - The original mouse event.
+   */
+  onBoxSelect?: (({ nodes, rels }: {
+    nodes: Node[];
+    rels: Relationship[];
+  }, event: MouseEvent) => void) | boolean;
 };
 /**
  * An interaction handler for multi-selecting nodes and relationships.
@@ -36,26 +36,26 @@ export type BoxSelectInteractionCallbacks = {
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_boxselectinteraction Box Select Interaction documentation page}.
  */
 export declare class BoxSelectInteraction extends BaseInteraction<BoxSelectInteractionOptions> {
-    private mousePosition;
-    private startWorldPosition;
-    private startClientPosition;
-    private overlayRenderer;
-    private isBoxSelecting;
-    private boxSelectPending;
-    /**
-     * Creates a new instance of the multi-select interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to.
-     * @param options - Options for the multi-select interaction handler to customize its behavior.
-     */
-    constructor(nvl: NVL, options?: BoxSelectInteractionOptions);
-    private handleMouseDown;
-    private handleDrag;
-    private getHitsInBox;
-    private endBoxSelect;
-    /**
-     * Removes all related event listeners and the overlay renderer for the box.
-     */
-    destroy(): void;
-    private activateBoxSelect;
-    private turnOnBoxSelect;
-}
+  private mousePosition;
+  private startWorldPosition;
+  private startClientPosition;
+  private overlayRenderer;
+  private isBoxSelecting;
+  private boxSelectPending;
+  /**
+   * Creates a new instance of the multi-select interaction handler.
+   * @param nvl - The NVL instance to attach the interaction handler to.
+   * @param options - Options for the multi-select interaction handler to customize its behavior.
+   */
+  constructor(nvl: NVL, options?: BoxSelectInteractionOptions);
+  private handleMouseDown;
+  private handleDrag;
+  private getHitsInBox;
+  private endBoxSelect;
+  /**
+   * Removes all related event listeners and the overlay renderer for the box.
+   */
+  destroy(): void;
+  private activateBoxSelect;
+  private turnOnBoxSelect;
+}