@furystack/shades-nipple 7.0.35 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [8.0.0] - 2026-02-09
+
+### ⬆️ Dependencies
+
+- Updated peer dependency `@furystack/shades` to latest minor version
+- Updated `@furystack/shades` dependency with microtask-based batched rendering
+- Peer dependency on `@furystack/shades` bumped to new major version
+- Updated `@furystack/shades` dependency
+
+### 💥 Breaking Changes
+
+### Requires `@furystack/shades` v3
+
+This package now depends on the new major version of `@furystack/shades` which removed the `constructed` callback.
+
+### Migrated from `element` to `useRef` for Zone Management
+
+The `NippleComponent` no longer uses the `element` render option as the nipplejs zone. Instead, it uses `useRef` to reference a dedicated container `<div>`, which is passed to `nipplejs.create()` as the zone.
+
+**Impact:** The nipplejs manager is now attached to a child `<div>` inside the component rather than the host custom element itself. This should be transparent for most consumers.
+
+### ♻️ Refactoring
+
+- Migrated `NippleComponent` from async `constructed` callback to `useDisposable()` in `render` for nipplejs manager initialization and cleanup
+- Replaced `element` parameter with `useRef('zone')` and a container `<div>` for nipplejs initialization
+- Nipple manager creation now deferred via `queueMicrotask` to ensure the ref is available after the first render
+
+### 🧪 Tests
+
+- Refactored `Nipple` component tests to use `usingAsync` for proper `Injector` disposal
+
+## [7.0.36] - 2026-02-01
+
+### ⬆️ Dependencies
+
+- Updated peer dependency `@furystack/shades` to include new CSS styling features
+
 ## [7.0.35] - 2026-01-26
 
 ### 🔧 Chores

package/esm/nipple.d.ts

@@ -9,5 +9,7 @@ export interface NippleComponentProps {
 }
 export declare const NippleComponent: (props: NippleComponentProps & Omit<Partial<HTMLElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
 }, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
 //# sourceMappingURL=nipple.d.ts.map

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;;sEA2B1B,CAAA"}
+{"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"}

package/esm/nipple.js

@@ -2,30 +2,36 @@ import { Shade, createComponent } from '@furystack/shades';
 import nipplejs from 'nipplejs';
 export const NippleComponent = Shade({
     shadowDomName: 'shade-nipple',
-    constructed: async ({ element, props }) => {
-        const manager = nipplejs.create({
-            zone: element,
-            ...props.managerOptions,
+    render: ({ children, props, useDisposable, useRef }) => {
+        const zoneRef = useRef('zone');
+        useDisposable('nipple-init', () => {
+            let manager;
+            queueMicrotask(() => {
+                if (!zoneRef.current)
+                    return;
+                manager = nipplejs.create({
+                    zone: zoneRef.current,
+                    ...props.managerOptions,
+                });
+                if (props.onStart) {
+                    manager.on('start', props.onStart);
+                }
+                if (props.onEnd) {
+                    manager.on('end', props.onEnd);
+                }
+                if (props.onDir) {
+                    manager.on('dir', props.onDir);
+                }
+                if (props.onMove) {
+                    manager.on('move', props.onMove);
+                }
+            });
+            return { [Symbol.dispose]: () => manager?.destroy() };
         });
-        if (props.onStart) {
-            manager.on('start', props.onStart);
-        }
-        if (props.onEnd) {
-            manager.on('end', props.onEnd);
-        }
-        if (props.onDir) {
-            manager.on('dir', props.onDir);
-        }
-        if (props.onMove) {
-            manager.on('move', props.onMove);
-        }
-        return () => manager.destroy();
-    },
-    render: ({ children }) => {
         if (children) {
-            return createComponent(createComponent, null, children);
+            return createComponent("div", { ref: zoneRef }, children);
         }
-        return createComponent("div", null);
+        return createComponent("div", { ref: zoneRef });
     },
 });
 //# sourceMappingURL=nipple.js.map

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,aAAa,EAAE,cAAc;IAC7B,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QACxC,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC;YAC9B,IAAI,EAAE,OAAO;YACb,GAAG,KAAK,CAAC,cAAc;SACxB,CAAC,CAAA;QACF,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;QACpC,CAAC;QACD,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;QAChC,CAAC;QACD,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;QAChC,CAAC;QACD,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QAClC,CAAC;QACD,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAA;IAChC,CAAC;IACD,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;QACvB,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,uCAAG,QAAQ,CAAI,CAAA;QACxB,CAAC;QACD,OAAO,4BAAO,CAAA;IAChB,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;AAE1D,OAAO,QAAQ,MAAM,UAAU,CAAA;AAW/B,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAuB;IACzD,aAAa,EAAE,cAAc;IAC7B,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"}

package/esm/nipple.spec.js

@@ -1,7 +1,8 @@
 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 { NippleComponent } from './nipple.js';
-import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest';
 describe('Nipple', () => {
     beforeEach(() => {
         document.body.innerHTML = '<div id="root"></div>';
@@ -9,35 +10,37 @@ describe('Nipple', () => {
     afterEach(() => {
         document.body.innerHTML = '';
     });
-    it('Should render with the default settings', () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(NippleComponent, { managerOptions: {} }),
+    it('Should render with the default settings', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(NippleComponent, { managerOptions: {} }),
+            });
+            expect(document.body.innerHTML).toBe('<div id="root"><shade-nipple></shade-nipple></div>');
         });
-        expect(document.body.innerHTML).toBe('<div id="root"><shade-nipple></shade-nipple></div>');
     });
     it('Should attach event properties', async () => {
-        const injector = new Injector();
-        const rootElement = document.getElementById('root');
-        const onStart = vi.fn();
-        const onDir = vi.fn();
-        const onMove = vi.fn();
-        const onEnd = vi.fn();
-        initializeShadeRoot({
-            injector,
-            rootElement,
-            jsxElement: createComponent(NippleComponent, { onStart: onStart, onDir: onDir, onMove: onMove, onEnd: onEnd, managerOptions: {} }),
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const onStart = vi.fn();
+            const onDir = vi.fn();
+            const onMove = vi.fn();
+            const onEnd = vi.fn();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent(NippleComponent, { onStart: onStart, onDir: onDir, onMove: onMove, onEnd: onEnd, managerOptions: {} })),
+            });
+            expect(document.body.innerHTML).toBe('<div id="root"><shade-nipple></shade-nipple></div>');
+            const nipple = document.querySelector('shade-nipple');
+            expect(nipple.props.onDir).toBe(onDir);
+            expect(nipple.props.onEnd).toBe(onEnd);
+            expect(nipple.props.onMove).toBe(onMove);
+            expect(nipple.props.onStart).toBe(onStart);
+            // TODO: Check for pointer events
         });
-        expect(document.body.innerHTML).toBe('<div id="root"><shade-nipple></shade-nipple></div>');
-        const nipple = document.querySelector('shade-nipple');
-        expect(nipple.props.onDir).toBe(onDir);
-        expect(nipple.props.onEnd).toBe(onEnd);
-        expect(nipple.props.onMove).toBe(onMove);
-        expect(nipple.props.onStart).toBe(onStart);
-        // TODO: Check for pointer events
     });
 });
 //# sourceMappingURL=nipple.spec.js.map

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;AAExE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAExE,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,GAAG,EAAE;QACjD,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAA;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;QAErE,mBAAmB,CAAC;YAClB,QAAQ;YACR,WAAW;YACX,UAAU,EAAE,gBAAC,eAAe,IAAC,cAAc,EAAE,EAAE,GAAI;SACpD,CAAC,CAAA;QACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAA;IAC5F,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAA;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;QAErE,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QACvB,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QACrB,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QACtB,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QAErB,mBAAmB,CAAC;YAClB,QAAQ;YACR,WAAW;YACX,UAAU,EAAE,gBAAC,eAAe,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,GAAI;SAClH,CAAC,CAAA;QACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAA;QAC1F,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAsC,CAAA;QAE1F,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACtC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACtC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACxC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAE1C,iCAAiC;IACnC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"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,oDAAoD,CAAC,CAAA;QAC5F,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,oDAAoD,CAAC,CAAA;YAC1F,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-nipple",
-  "version": "7.0.35",
+  "version": "8.0.0",
   "description": "A Nipple component wrapper for FuryStack Shades",
   "type": "module",
   "scripts": {
@@ -38,12 +38,12 @@
   },
   "homepage": "https://github.com/furystack/furystack",
   "devDependencies": {
-    "@furystack/inject": "^12.0.28",
+    "@furystack/inject": "^12.0.29",
     "typescript": "^5.9.3",
     "vitest": "^4.0.17"
   },
   "dependencies": {
-    "@furystack/shades": "^11.0.35",
+    "@furystack/shades": "^12.0.0",
     "nipplejs": "^0.10.2"
   },
   "engines": {

package/src/nipple.spec.tsx

@@ -1,8 +1,9 @@
 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 { NippleComponent } from './nipple.js'
-import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest'
 
 describe('Nipple', () => {
   beforeEach(() => {
@@ -11,40 +12,44 @@ describe('Nipple', () => {
   afterEach(() => {
     document.body.innerHTML = ''
   })
-  it('Should render with the default settings', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+  it('Should render with the default settings', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <NippleComponent managerOptions={{}} />,
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <NippleComponent managerOptions={{}} />,
+      })
+      expect(document.body.innerHTML).toBe('<div id="root"><shade-nipple></shade-nipple></div>')
     })
-    expect(document.body.innerHTML).toBe('<div id="root"><shade-nipple></shade-nipple></div>')
   })
 
   it('Should attach event properties', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    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 = vi.fn()
+      const onDir = vi.fn()
+      const onMove = vi.fn()
+      const onEnd = vi.fn()
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <NippleComponent onStart={onStart} onDir={onDir} onMove={onMove} onEnd={onEnd} managerOptions={{}} />,
-    })
-    expect(document.body.innerHTML).toBe('<div id="root"><shade-nipple></shade-nipple></div>')
-    const nipple = document.querySelector('shade-nipple') as JSX.Element<NippleComponentProps>
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <NippleComponent onStart={onStart} onDir={onDir} onMove={onMove} onEnd={onEnd} managerOptions={{}} />
+        ),
+      })
+      expect(document.body.innerHTML).toBe('<div id="root"><shade-nipple></shade-nipple></div>')
+      const nipple = document.querySelector('shade-nipple') as JSX.Element<NippleComponentProps>
 
-    expect(nipple.props.onDir).toBe(onDir)
-    expect(nipple.props.onEnd).toBe(onEnd)
-    expect(nipple.props.onMove).toBe(onMove)
-    expect(nipple.props.onStart).toBe(onStart)
+      expect(nipple.props.onDir).toBe(onDir)
+      expect(nipple.props.onEnd).toBe(onEnd)
+      expect(nipple.props.onMove).toBe(onMove)
+      expect(nipple.props.onStart).toBe(onStart)
 
-    // TODO: Check for pointer events
+      // TODO: Check for pointer events
+    })
   })
 })

package/src/nipple.tsx

@@ -13,29 +13,36 @@ export interface NippleComponentProps {
 
 export const NippleComponent = Shade<NippleComponentProps>({
   shadowDomName: 'shade-nipple',
-  constructed: async ({ element, props }) => {
-    const manager = nipplejs.create({
-      zone: element,
-      ...props.managerOptions,
+  render: ({ children, props, useDisposable, useRef }) => {
+    const zoneRef = useRef<HTMLDivElement>('zone')
+
+    useDisposable('nipple-init', () => {
+      let manager: ReturnType<typeof nipplejs.create> | undefined
+      queueMicrotask(() => {
+        if (!zoneRef.current) return
+        manager = nipplejs.create({
+          zone: zoneRef.current,
+          ...props.managerOptions,
+        })
+        if (props.onStart) {
+          manager.on('start', props.onStart)
+        }
+        if (props.onEnd) {
+          manager.on('end', props.onEnd)
+        }
+        if (props.onDir) {
+          manager.on('dir', props.onDir)
+        }
+        if (props.onMove) {
+          manager.on('move', props.onMove)
+        }
+      })
+      return { [Symbol.dispose]: () => manager?.destroy() }
     })
-    if (props.onStart) {
-      manager.on('start', props.onStart)
-    }
-    if (props.onEnd) {
-      manager.on('end', props.onEnd)
-    }
-    if (props.onDir) {
-      manager.on('dir', props.onDir)
-    }
-    if (props.onMove) {
-      manager.on('move', props.onMove)
-    }
-    return () => manager.destroy()
-  },
-  render: ({ children }) => {
+
     if (children) {
-      return <>{children}</>
+      return <div ref={zoneRef}>{children}</div>
     }
-    return <div />
+    return <div ref={zoneRef} />
   },
 })