@furystack/shades-nipple 9.0.2 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # Changelog
 
+## [10.0.0] - 2026-03-27
+
+### ✨ Features
+
+- Normalized joystick callbacks to receive a single `event` object with a `data` payload (`onStart`, `onMove`, `onDir`, `onEnd`), aligning the component API with the current runtime event shape.
+
+### 📚 Documentation
+
+- Updated README examples and prop documentation to use the new callback signature and `NippleManagerOptions` type.
+
+### 🧪 Tests
+
+- Updated component tests to use the exported `NippleManagerEventHandler` type for callback mocks.
+
+### ⬆️ Dependencies
+
+- Upgraded `nipplejs` from `^0.10.2` to `^1.0.1` to use the latest upstream manager and event behavior.
+- Updated `@furystack/shades` dependency
+
+### 💥 Breaking Changes
+
+### Callback Signatures Now Receive A Single Event Object
+
+Joystick callback props no longer receive positional `(evt, data)` arguments.  
+All callback props now receive a single `event` object, and joystick payload values are available under `event.data`.
+
+**Before / After:**
+
+```tsx
+// ❌ Before
+<NippleComponent
+  managerOptions={{ mode: 'static', position: { left: '50%', top: '50%' } }}
+  onMove={(_evt, data) => {
+    console.log(data.direction?.angle)
+    console.log(data.force)
+  }}
+/>
+
+// ✅ After
+<NippleComponent
+  managerOptions={{ mode: 'static', position: { left: '50%', top: '50%' } }}
+  onMove={(event) => {
+    console.log(event.data.direction?.angle)
+    console.log(event.data.force)
+  }}
+/>
+```
+
+**Impact:** Consumers using `onStart`, `onMove`, `onDir`, or `onEnd` with `(evt, data)` parameters must update handlers to use a single `event` parameter.
+
+**Migration steps:**
+
+1. Find all `NippleComponent` callback usages in your app.
+2. Replace handler signatures from `(evt, data)` (or similar two-argument forms) to `(event)`.
+3. Replace direct `data` references with `event.data`.
+4. Run type-check and tests to verify all joystick interactions still compile and behave as expected.
+
+## [9.0.3] - 2026-03-25
+
+### 📦 Build
+
+- Removed deprecated `baseUrl` from tsconfig.json for TypeScript 6 compatibility
+
+### ⬆️ Dependencies
+
+- Upgraded `typescript` from ^5.9.3 to ^6.0.2
+- Upgraded `vitest` from ^4.1.0 to ^4.1.1
+
 ## [9.0.2] - 2026-03-19
 
 ### ✨ Features

package/README.md

@@ -28,20 +28,20 @@ const GameControls = Shade({
         color: 'blue',
       }}
       style={{ width: '200px', height: '200px', position: 'relative' }}
-      onStart={(evt, data) => {
-        console.log('Joystick started', data)
+      onStart={(event) => {
+        console.log('Joystick started', event.data)
       }}
-      onMove={(evt, data) => {
-        console.log('Direction:', data.direction?.angle)
-        console.log('Distance:', data.distance)
-        console.log('Force:', data.force)
+      onMove={(event) => {
+        console.log('Direction:', event.data.direction?.angle)
+        console.log('Distance:', event.data.distance)
+        console.log('Force:', event.data.force)
       }}
-      onEnd={(evt, data) => {
+      onEnd={() => {
         console.log('Joystick released')
       }}
-      onDir={(evt, data) => {
+      onDir={(event) => {
         // Fired when direction changes (up, down, left, right)
-        console.log('Direction changed:', data.direction?.angle)
+        console.log('Direction changed:', event.data.direction?.angle)
       }}
     />
   ),
@@ -50,14 +50,14 @@ const GameControls = Shade({
 
 ## Props
 
-| Prop             | Type                     | Description                                  |
-| ---------------- | ------------------------ | -------------------------------------------- |
-| `managerOptions` | `JoystickManagerOptions` | NippleJS manager options (see NippleJS docs) |
-| `style`          | `CSSStyleDeclaration`    | Inline styles for the container              |
-| `onStart`        | `(evt, data) => void`    | Called when the joystick is pressed          |
-| `onEnd`          | `(evt, data) => void`    | Called when the joystick is released         |
-| `onMove`         | `(evt, data) => void`    | Called while the joystick is being moved     |
-| `onDir`          | `(evt, data) => void`    | Called when direction changes                |
+| Prop             | Type                   | Description                                  |
+| ---------------- | ---------------------- | -------------------------------------------- |
+| `managerOptions` | `NippleManagerOptions` | NippleJS options passed to `nipplejs.create` |
+| `style`          | `CSSStyleDeclaration`  | Inline styles for the container              |
+| `onStart`        | `(event) => void`      | Called when the joystick is pressed          |
+| `onEnd`          | `(event) => void`      | Called when the joystick is released         |
+| `onMove`         | `(event) => void`      | Called while the joystick is being moved     |
+| `onDir`          | `(event) => void`      | Called when direction changes                |
 
 ## Manager Options
 
@@ -72,4 +72,6 @@ Common `managerOptions` properties:
 | `threshold` | `number`                          | Minimum distance before triggering events |
 | `fadeTime`  | `number`                          | Fade animation duration                   |
 
-See the [NippleJS documentation](https://yoannmoi.net/nipplejs/) for all available options.
+Event callback props receive a single object that contains at least a `data` field with the joystick payload.
+
+See the [NippleJS documentation](https://yoannmoi.net/nipplejs/) for all available options and event payload details.

package/esm/nipple.d.ts

@@ -1,12 +1,17 @@
-import type { EventData, JoystickManagerOptions, JoystickOutputData } from 'nipplejs';
-export interface NippleComponentProps {
-    managerOptions: JoystickManagerOptions;
+import nipplejs from 'nipplejs';
+export type NippleManagerOptions = Parameters<typeof nipplejs.create>[0];
+export type NippleManagerEvent = {
+    data: unknown;
+};
+export type NippleManagerEventHandler = (evt: NippleManagerEvent) => void;
+export type NippleComponentProps = {
+    managerOptions: NippleManagerOptions;
     style?: Partial<CSSStyleDeclaration>;
-    onStart?: (evt: EventData, data: JoystickOutputData) => void;
-    onEnd?: (evt: EventData, data: JoystickOutputData) => void;
-    onDir?: (evt: EventData, data: JoystickOutputData) => void;
-    onMove?: (evt: EventData, data: JoystickOutputData) => void;
-}
+    onStart?: NippleManagerEventHandler;
+    onEnd?: NippleManagerEventHandler;
+    onDir?: NippleManagerEventHandler;
+    onMove?: NippleManagerEventHandler;
+};
 export declare const NippleComponent: (props: NippleComponentProps & Omit<Partial<HTMLElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
 } & {

package/esm/nipple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nipple.d.ts","sourceRoot":"","sources":["../src/nipple.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGrF,MAAM,WAAW,oBAAoB;IACnC,cAAc,EAAE,sBAAsB,CAAA;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC5D,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC1D,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC1D,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAA;CAC5D;AAED,eAAO,MAAM,eAAe;;;;sEAkC1B,CAAA"}
+{"version":3,"file":"nipple.d.ts","sourceRoot":"","sources":["../src/nipple.tsx"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,UAAU,CAAA;AAG/B,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;AACxE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAA;CACd,CAAA;AACD,MAAM,MAAM,yBAAyB,GAAG,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAA;AAEzE,MAAM,MAAM,oBAAoB,GAAG;IACjC,cAAc,EAAE,oBAAoB,CAAA;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACpC,OAAO,CAAC,EAAE,yBAAyB,CAAA;IACnC,KAAK,CAAC,EAAE,yBAAyB,CAAA;IACjC,KAAK,CAAC,EAAE,yBAAyB,CAAA;IACjC,MAAM,CAAC,EAAE,yBAAyB,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,eAAe;;;;sEAkC1B,CAAA"}

package/esm/nipple.js.map

@@ -1 +1 @@
-{"version":3,"file":"nipple.js","sourceRoot":"","sources":["../src/nipple.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAE1D,OAAO,QAAQ,MAAM,UAAU,CAAA;AAW/B,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAuB;IACzD,iBAAiB,EAAE,cAAc;IACjC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;QACrD,MAAM,OAAO,GAAG,MAAM,CAAiB,MAAM,CAAC,CAAA;QAE9C,aAAa,CAAC,aAAa,EAAE,GAAG,EAAE;YAChC,IAAI,OAAuD,CAAA;YAC3D,cAAc,CAAC,GAAG,EAAE;gBAClB,IAAI,CAAC,OAAO,CAAC,OAAO;oBAAE,OAAM;gBAC5B,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC;oBACxB,IAAI,EAAE,OAAO,CAAC,OAAO;oBACrB,GAAG,KAAK,CAAC,cAAc;iBACxB,CAAC,CAAA;gBACF,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;oBAClB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;gBACpC,CAAC;gBACD,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;oBAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;gBAChC,CAAC;gBACD,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;oBAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;gBAChC,CAAC;gBACD,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;oBACjB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;gBAClC,CAAC;YACH,CAAC,CAAC,CAAA;YACF,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAA;QACvD,CAAC,CAAC,CAAA;QAEF,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,yBAAK,GAAG,EAAE,OAAO,IAAG,QAAQ,CAAO,CAAA;QAC5C,CAAC;QACD,OAAO,yBAAK,GAAG,EAAE,OAAO,GAAI,CAAA;IAC9B,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"nipple.js","sourceRoot":"","sources":["../src/nipple.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,QAAQ,MAAM,UAAU,CAAA;AAkB/B,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAuB;IACzD,iBAAiB,EAAE,cAAc;IACjC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;QACrD,MAAM,OAAO,GAAG,MAAM,CAAiB,MAAM,CAAC,CAAA;QAE9C,aAAa,CAAC,aAAa,EAAE,GAAG,EAAE;YAChC,IAAI,OAAkC,CAAA;YACtC,cAAc,CAAC,GAAG,EAAE;gBAClB,IAAI,CAAC,OAAO,CAAC,OAAO;oBAAE,OAAM;gBAC5B,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC;oBACxB,IAAI,EAAE,OAAO,CAAC,OAAO;oBACrB,GAAG,KAAK,CAAC,cAAc;iBACxB,CAAC,CAAA;gBACF,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;oBAClB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;gBACpC,CAAC;gBACD,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;oBAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;gBAChC,CAAC;gBACD,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;oBAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;gBAChC,CAAC;gBACD,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;oBACjB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;gBAClC,CAAC;YACH,CAAC,CAAC,CAAA;YACF,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAA;QACvD,CAAC,CAAC,CAAA;QAEF,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,yBAAK,GAAG,EAAE,OAAO,IAAG,QAAQ,CAAO,CAAA;QAC5C,CAAC;QACD,OAAO,yBAAK,GAAG,EAAE,OAAO,GAAI,CAAA;IAC9B,CAAC;CACF,CAAC,CAAA"}

package/esm/nipple.spec.js

@@ -3,9 +3,36 @@ import { createComponent, initializeShadeRoot } from '@furystack/shades';
 import { usingAsync } from '@furystack/utils';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { NippleComponent } from './nipple.js';
+const { createMock, managerMock, managerEventHandlers } = vi.hoisted(() => {
+    const handlers = {};
+    const manager = {
+        on: vi.fn((event, handler) => {
+            handlers[event] = handler;
+            return manager;
+        }),
+        destroy: vi.fn(),
+    };
+    return {
+        createMock: vi.fn(() => manager),
+        managerMock: manager,
+        managerEventHandlers: handlers,
+    };
+});
+vi.mock('nipplejs', () => ({
+    default: {
+        create: createMock,
+    },
+}));
 describe('Nipple', () => {
     beforeEach(() => {
         document.body.innerHTML = '<div id="root"></div>';
+        createMock.mockClear();
+        managerMock.on.mockClear();
+        managerMock.destroy.mockClear();
+        delete managerEventHandlers.start;
+        delete managerEventHandlers.end;
+        delete managerEventHandlers.dir;
+        delete managerEventHandlers.move;
     });
     afterEach(() => {
         document.body.innerHTML = '';
@@ -39,7 +66,38 @@ describe('Nipple', () => {
             expect(nipple.props.onEnd).toBe(onEnd);
             expect(nipple.props.onMove).toBe(onMove);
             expect(nipple.props.onStart).toBe(onStart);
-            // TODO: Check for pointer events
+        });
+    });
+    it('Should pass runtime move events as single event payload object', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const onMoveSpy = vi.fn((_) => undefined);
+            const onMove = onMoveSpy;
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(NippleComponent, { managerOptions: {}, onMove: onMove }),
+            });
+            await Promise.resolve();
+            expect(createMock).toHaveBeenCalledTimes(1);
+            expect(managerMock.on).toHaveBeenCalledWith('move', onMove);
+            const moveHandler = managerEventHandlers.move;
+            expect(moveHandler).toBeTypeOf('function');
+            const runtimeEvent = {
+                data: {
+                    direction: { angle: 'up' },
+                    distance: 24,
+                    force: 0.75,
+                },
+            };
+            moveHandler?.(runtimeEvent);
+            expect(onMoveSpy).toHaveBeenCalledTimes(1);
+            expect(onMoveSpy).toHaveBeenCalledWith(runtimeEvent);
+            expect(onMoveSpy).toHaveBeenLastCalledWith(expect.objectContaining({
+                data: expect.objectContaining({
+                    force: 0.75,
+                }),
+            }));
         });
     });
 });

package/esm/nipple.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"nipple.spec.js","sourceRoot":"","sources":["../src/nipple.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAExE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IACF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IACF,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,eAAe,IAAC,cAAc,EAAE,EAAE,GAAI;aACpD,CAAC,CAAA;YACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,+DAA+D,CAAC,CAAA;QACvG,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;YACvB,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;YACrB,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;YACtB,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;YAErB,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,CACV,gBAAC,eAAe,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,GAAI,CACtG;aACF,CAAC,CAAA;YACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,+DAA+D,CAAC,CAAA;YACrG,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAsC,CAAA;YAE1F,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACtC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACtC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YACxC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YAE1C,iCAAiC;QACnC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"nipple.spec.js","sourceRoot":"","sources":["../src/nipple.spec.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-nipple",
-  "version": "9.0.2",
+  "version": "10.0.0",
   "description": "A Nipple component wrapper for FuryStack Shades",
   "type": "module",
   "scripts": {
@@ -38,13 +38,13 @@
   },
   "homepage": "https://github.com/furystack/furystack",
   "devDependencies": {
-    "@furystack/inject": "^12.0.33",
-    "typescript": "^5.9.3",
-    "vitest": "^4.1.0"
+    "@furystack/inject": "^12.0.35",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2"
   },
   "dependencies": {
-    "@furystack/shades": "^13.1.1",
-    "nipplejs": "^0.10.2"
+    "@furystack/shades": "^13.2.0",
+    "nipplejs": "^1.0.1"
   },
   "engines": {
     "node": ">=22.0.0"

package/src/nipple.spec.tsx

@@ -2,12 +2,41 @@ import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
 import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import type { NippleComponentProps } from './nipple.js'
+import type { NippleComponentProps, NippleManagerEvent, NippleManagerEventHandler } from './nipple.js'
 import { NippleComponent } from './nipple.js'
 
+const { createMock, managerMock, managerEventHandlers } = vi.hoisted(() => {
+  const handlers: Partial<Record<'start' | 'end' | 'dir' | 'move', (event: unknown) => void>> = {}
+  const manager = {
+    on: vi.fn((event: 'start' | 'end' | 'dir' | 'move', handler: (event: unknown) => void) => {
+      handlers[event] = handler
+      return manager
+    }),
+    destroy: vi.fn(),
+  }
+  return {
+    createMock: vi.fn(() => manager),
+    managerMock: manager,
+    managerEventHandlers: handlers,
+  }
+})
+
+vi.mock('nipplejs', () => ({
+  default: {
+    create: createMock,
+  },
+}))
+
 describe('Nipple', () => {
   beforeEach(() => {
     document.body.innerHTML = '<div id="root"></div>'
+    createMock.mockClear()
+    managerMock.on.mockClear()
+    managerMock.destroy.mockClear()
+    delete managerEventHandlers.start
+    delete managerEventHandlers.end
+    delete managerEventHandlers.dir
+    delete managerEventHandlers.move
   })
   afterEach(() => {
     document.body.innerHTML = ''
@@ -29,10 +58,10 @@ describe('Nipple', () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
-      const onStart = vi.fn()
-      const onDir = vi.fn()
-      const onMove = vi.fn()
-      const onEnd = vi.fn()
+      const onStart: NippleManagerEventHandler = vi.fn()
+      const onDir: NippleManagerEventHandler = vi.fn()
+      const onMove: NippleManagerEventHandler = vi.fn()
+      const onEnd: NippleManagerEventHandler = vi.fn()
 
       initializeShadeRoot({
         injector,
@@ -48,8 +77,47 @@ describe('Nipple', () => {
       expect(nipple.props.onEnd).toBe(onEnd)
       expect(nipple.props.onMove).toBe(onMove)
       expect(nipple.props.onStart).toBe(onStart)
+    })
+  })
+
+  it('Should pass runtime move events as single event payload object', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onMoveSpy = vi.fn((_: NippleManagerEvent) => undefined)
+      const onMove: NippleManagerEventHandler = onMoveSpy
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <NippleComponent managerOptions={{}} onMove={onMove} />,
+      })
+
+      await Promise.resolve()
+
+      expect(createMock).toHaveBeenCalledTimes(1)
+      expect(managerMock.on).toHaveBeenCalledWith('move', onMove)
+
+      const moveHandler = managerEventHandlers.move
+      expect(moveHandler).toBeTypeOf('function')
+
+      const runtimeEvent = {
+        data: {
+          direction: { angle: 'up' },
+          distance: 24,
+          force: 0.75,
+        },
+      }
+      moveHandler?.(runtimeEvent)
 
-      // TODO: Check for pointer events
+      expect(onMoveSpy).toHaveBeenCalledTimes(1)
+      expect(onMoveSpy).toHaveBeenCalledWith(runtimeEvent)
+      expect(onMoveSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining<NippleManagerEvent>({
+          data: expect.objectContaining({
+            force: 0.75,
+          }),
+        }),
+      )
     })
   })
 })

package/src/nipple.tsx

@@ -1,14 +1,20 @@
 import { Shade, createComponent } from '@furystack/shades'
-import type { EventData, JoystickManagerOptions, JoystickOutputData } from 'nipplejs'
 import nipplejs from 'nipplejs'
 
-export interface NippleComponentProps {
-  managerOptions: JoystickManagerOptions
+type NippleManager = ReturnType<typeof nipplejs.create>
+export type NippleManagerOptions = Parameters<typeof nipplejs.create>[0]
+export type NippleManagerEvent = {
+  data: unknown
+}
+export type NippleManagerEventHandler = (evt: NippleManagerEvent) => void
+
+export type NippleComponentProps = {
+  managerOptions: NippleManagerOptions
   style?: Partial<CSSStyleDeclaration>
-  onStart?: (evt: EventData, data: JoystickOutputData) => void
-  onEnd?: (evt: EventData, data: JoystickOutputData) => void
-  onDir?: (evt: EventData, data: JoystickOutputData) => void
-  onMove?: (evt: EventData, data: JoystickOutputData) => void
+  onStart?: NippleManagerEventHandler
+  onEnd?: NippleManagerEventHandler
+  onDir?: NippleManagerEventHandler
+  onMove?: NippleManagerEventHandler
 }
 
 export const NippleComponent = Shade<NippleComponentProps>({
@@ -17,7 +23,7 @@ export const NippleComponent = Shade<NippleComponentProps>({
     const zoneRef = useRef<HTMLDivElement>('zone')
 
     useDisposable('nipple-init', () => {
-      let manager: ReturnType<typeof nipplejs.create> | undefined
+      let manager: NippleManager | undefined
       queueMicrotask(() => {
         if (!zoneRef.current) return
         manager = nipplejs.create({