@adobe/data-lit 0.10.30 → 0.10.32

package/src/hooks/use-drag-generator.test.ts

@@ -0,0 +1,67 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from "vitest";
+import { useDragGenerator } from "./use-drag-generator.js";
+import type { DragState } from "./use-drag-observe.js";
+import { createHost, pointerCancel, pointerDown, pointerMove, pointerUp, render, unmount } from "./test-host.test-utils.js";
+
+async function collectTypes(generator: AsyncGenerator<DragState>): Promise<DragState["type"][]> {
+    const types: DragState["type"][] = [];
+    for await (const value of generator) types.push(value.type);
+    return types;
+}
+
+describe("useDragGenerator", () => {
+    it("calls back once per drag with the start event and a generator that ends with the drag", async () => {
+        const host = createHost();
+        const callback = vi.fn();
+        render(host, () => useDragGenerator({}, [], callback));
+        pointerDown(host);
+        pointerMove(20);
+        pointerUp(30);
+
+        expect(callback).toHaveBeenCalledTimes(1);
+        const [generator, startEvent] = callback.mock.calls[0];
+        expect(startEvent).toBeInstanceOf(PointerEvent);
+        expect((startEvent as PointerEvent).clientX).toBe(20);
+        expect(await collectTypes(generator)).toEqual(expect.arrayContaining(["move", "end"]));
+        unmount(host);
+    });
+
+    it("ends the generator when the drag is cancelled", async () => {
+        const host = createHost();
+        const callback = vi.fn();
+        render(host, () => useDragGenerator({}, [], callback));
+        pointerDown(host);
+        pointerMove(20);
+        pointerCancel();
+
+        const types = await collectTypes(callback.mock.calls[0][0]);
+        expect(types.at(-1)).toBe("cancel");
+        unmount(host);
+    });
+
+    it("starts a new generator for each drag", () => {
+        const host = createHost();
+        const callback = vi.fn();
+        render(host, () => useDragGenerator({}, [], callback));
+        for (const x of [20, 40]) {
+            pointerDown(host);
+            pointerMove(x);
+            pointerUp(x);
+        }
+        expect(callback).toHaveBeenCalledTimes(2);
+        expect(callback.mock.calls[0][0]).not.toBe(callback.mock.calls[1][0]);
+        unmount(host);
+    });
+
+    it("stops calling back after unmount", () => {
+        const host = createHost();
+        const callback = vi.fn();
+        render(host, () => useDragGenerator({}, [], callback));
+        unmount(host);
+        pointerDown(host);
+        pointerMove(20);
+        expect(callback).not.toHaveBeenCalled();
+    });
+});

package/src/hooks/use-drag-observe.test.ts

@@ -0,0 +1,74 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import { useDragObserve, type DragState } from "./use-drag-observe.js";
+import { createHost, pointerCancel, pointerDown, pointerMove, pointerUp, render, unmount } from "./test-host.test-utils.js";
+
+describe("useDragObserve", () => {
+    it("emits start, move, and end with positions and deltas", () => {
+        const host = createHost();
+        const events: DragState[] = [];
+        render(host, () => useDragObserve({}, []))(event => events.push(event));
+        pointerDown(host);
+        pointerMove(20);
+        pointerUp(30);
+
+        expect(events.map(event => event.type)).toEqual(["start", "move", "end"]);
+        expect(events[0].type === "start" && events[0].event).toBeInstanceOf(PointerEvent);
+        expect(events[1]).toEqual({ type: "move", position: [20, 0], delta: [20, 0] });
+        expect(events[2]).toEqual({ type: "end", position: [30, 0], delta: [30, 0] });
+        unmount(host);
+    });
+
+    it("emits cancel when the pointer is cancelled", () => {
+        const host = createHost();
+        const types: DragState["type"][] = [];
+        render(host, () => useDragObserve({}, []))(event => types.push(event.type));
+        pointerDown(host);
+        pointerMove(20);
+        pointerCancel();
+        expect(types).toEqual(["start", "move", "cancel"]);
+        unmount(host);
+    });
+
+    it("returns the same stream across renders and delivers drag events to it", () => {
+        const host = createHost();
+        const first = render(host, () => useDragObserve({}, []));
+        const second = render(host, () => useDragObserve({}, []));
+        expect(second).toBe(first);
+
+        const types: DragState["type"][] = [];
+        second(event => types.push(event.type));
+        pointerDown(host);
+        pointerMove(20);
+        pointerUp(20);
+        expect(types).toEqual(["start", "move", "end"]);
+        unmount(host);
+    });
+
+    it("returns a new stream when dependencies change", () => {
+        const host = createHost();
+        const first = render(host, () => useDragObserve({}, [1]));
+        const second = render(host, () => useDragObserve({}, [2]));
+        expect(second).not.toBe(first);
+
+        const types: DragState["type"][] = [];
+        second(event => types.push(event.type));
+        pointerDown(host);
+        pointerMove(20);
+        pointerUp(20);
+        expect(types).toEqual(["start", "move", "end"]);
+        unmount(host);
+    });
+
+    it("applies minDragDistance", () => {
+        const host = createHost();
+        const types: DragState["type"][] = [];
+        render(host, () => useDragObserve({ minDragDistance: 50 }, []))(event => types.push(event.type));
+        pointerDown(host);
+        pointerMove(20);
+        pointerUp(20);
+        expect(types).toEqual([]);
+        unmount(host);
+    });
+});

package/src/hooks/use-drag-observe.ts

@@ -2,6 +2,7 @@
 
 import { DraggableProps, useDraggable } from './use-draggable.js';
 import { useElement } from './use-element.js';
+import { useMemo } from './use-memo.js';
 import { Observe } from '@adobe/data/observe';
 import { Vec2 } from '@adobe/data/math';
 
@@ -37,7 +38,7 @@ export type DragState = DragStart | DragMove | DragEnd;
  * @returns
  */
 export function useDragObserve(props: DragObserveProps, dependencies: unknown[]) {
-    const [dragState, setDragState] = Observe.createEvent<DragState>();
+    const [dragState, setDragState] = useMemo(() => Observe.createEvent<DragState>(), dependencies);
     const element = useElement();
     useDraggable(element,
         {

package/src/hooks/use-drag-transaction.test.ts

@@ -0,0 +1,109 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import type { AsyncArgsProvider } from "@adobe/data/ecs";
+import { useDragTransaction } from "./use-drag-transaction.js";
+import type { DragEnd, DragMove } from "./use-drag-observe.js";
+import { createHost, pointerCancel, pointerDown, pointerMove, pointerUp, render, unmount } from "./test-host.test-utils.js";
+
+type Args = { x: number };
+
+function mountTransaction(update: (drag: DragMove | DragEnd) => Args | void = drag => ({ x: drag.position[0] })) {
+    const host = createHost();
+    const providers: AsyncArgsProvider<Args>[] = [];
+    render(host, () => useDragTransaction<Args>({ transaction: provider => { providers.push(provider); }, update }, []));
+    const args = (index = 0) => providers[index]() as AsyncGenerator<Args>;
+    return { host, providers, args };
+}
+
+async function collect(generator: AsyncGenerator<Args>): Promise<Args[]> {
+    const values: Args[] = [];
+    for await (const value of generator) values.push(value);
+    return values;
+}
+
+describe("useDragTransaction", () => {
+    it("yields move and end arguments and completes at the end", async () => {
+        const { host, args } = mountTransaction();
+        pointerDown(host);
+        pointerMove(20);
+        pointerUp(50);
+        expect(await collect(args())).toEqual([{ x: 20 }, { x: 50 }]);
+        unmount(host);
+    });
+
+    it("skips drags for which update returns nothing and still completes", async () => {
+        const { host, args } = mountTransaction(drag => (drag.type === "move" ? { x: drag.position[0] } : undefined));
+        pointerDown(host);
+        pointerMove(20);
+        pointerUp(50);
+        expect(await collect(args())).toEqual([{ x: 20 }]);
+        unmount(host);
+    });
+
+    it("rejects a pending read when the drag is cancelled", async () => {
+        const { host, args } = mountTransaction();
+        pointerDown(host);
+        pointerMove(20);
+        const generator = args();
+        expect(await generator.next()).toEqual({ done: false, value: { x: 20 } });
+
+        const pending = generator.next();
+        pointerCancel();
+        await expect(pending).rejects.toThrow("Drag cancelled");
+        unmount(host);
+    });
+
+    it("rejects a pending read when unmounted mid-drag", async () => {
+        const { host, args } = mountTransaction();
+        pointerDown(host);
+        pointerMove(20);
+        const generator = args();
+        await generator.next();
+
+        const pending = generator.next();
+        unmount(host);
+        await expect(pending).rejects.toThrow("Drag cancelled");
+    });
+
+    it("starts one transaction per drag", async () => {
+        const { host, providers, args } = mountTransaction();
+        pointerDown(host);
+        pointerMove(20);
+        pointerUp(20);
+        pointerDown(host);
+        pointerMove(40);
+        pointerUp(40);
+        expect(providers).toHaveLength(2);
+        expect(await collect(args(1))).toEqual([{ x: 40 }, { x: 40 }]);
+        unmount(host);
+    });
+
+    it("does not start a transaction for a press below the drag threshold", () => {
+        const { host, providers } = mountTransaction();
+        pointerDown(host);
+        pointerUp(2);
+        expect(providers).toHaveLength(0);
+        unmount(host);
+    });
+
+    it("lets an async transaction settle after cancellation without an unhandled rejection", async () => {
+        const host = createHost();
+        let settled: Promise<void> | undefined;
+        render(host, () => useDragTransaction<Args>({
+            transaction: provider => {
+                settled = (async () => {
+                    for await (const _ of provider() as AsyncGenerator<Args>) { /* consume */ }
+                })();
+                return settled;
+            },
+            update: drag => ({ x: drag.position[0] }),
+        }, []));
+        pointerDown(host);
+        pointerMove(20);
+        pointerCancel();
+        await expect(settled).rejects.toThrow("Drag cancelled");
+        await new Promise(resolve => setTimeout(resolve));
+        unmount(host);
+    });
+});

package/src/hooks/use-drag-transaction.ts

@@ -1,6 +1,6 @@
 // © 2026 Adobe. MIT License. See /LICENSE for details.
 
-import { DragEnd, DragMove, DragObserveProps, useDragObserve } from './use-drag-observe.js';
+import { DragEnd, DragMove, DragObserveProps, DragState, useDragObserve } from './use-drag-observe.js';
 import { useEffect } from "./use-effect.js";
 import type { AsyncArgsProvider } from '@adobe/data/ecs';
 import { Observe } from '@adobe/data/observe';
@@ -10,37 +10,58 @@ export type DragTransactionProps<T extends {} | null> = DragObserveProps & {
     update: (drag: DragMove | DragEnd) => T | void;
 };
 
+// Thrown into a drag's argument generator so the transaction discards its transient state.
+const dragCancelled = new Error('Drag cancelled');
+
+async function* toTransactionArgs<T extends {} | null>(
+    drags: AsyncGenerator<DragState>,
+    update: DragTransactionProps<T>['update'],
+): AsyncGenerator<T> {
+    for await (const drag of drags) {
+        if (drag.type === 'move' || drag.type === 'end') {
+            const args = update(drag);
+            if (args !== undefined) {
+                yield args;
+            }
+        }
+    }
+}
+
+/**
+ * Drives `transaction` with one argument generator per drag: each move or end
+ * yields `update(drag)` as intermediate arguments, the end commits the last
+ * arguments, and a cancellation (including unmount mid-drag) discards them.
+ */
 export function useDragTransaction<T extends {} | null>(props: DragTransactionProps<T>, dependencies: unknown[]) {
-    const { transaction, update } = props;
     const dragObserve = useDragObserve(props, dependencies);
-    const startDragTransaction = () => {
-        let done = false;
-        // we start the transaction by calling it with an async generator that will yield the args asynchronously
-        transaction(
-            // we create the async generator by mapping the dragObserve state changes to transaction args
-            () =>
-                Observe.toAsyncGenerator(
-                    // this uses the withMap function and the provided update and finish functions
-                    // any type 'start' will just be ignored and filtered out
-                    Observe.withFilter(dragObserve, value => {
-                        if (value.type === 'end') {
-                            done = true;
-                            return update(value);
-                        }
-                        if (value.type === 'move') {
-                            return update(value);
-                        }
-                    }),
-                    _value => done
-                )
-        );
-    };
-    // now we will observe the drag state and start a new transaction whenever a drag starts
     useEffect(() => {
-        return dragObserve(value => {
+        const { transaction, update } = props;
+        let active: AsyncGenerator<DragState> | undefined;
+        const cancel = () => {
+            const drags = active;
+            active = undefined;
+            drags?.throw(dragCancelled).catch(() => undefined);
+        };
+        const unobserve = dragObserve(value => {
             if (value.type === 'start') {
-                startDragTransaction();
+                cancel();
+                const drags = active = Observe.toAsyncGenerator(
+                    dragObserve,
+                    v => v.type === 'end' || v.type === 'cancel',
+                );
+                const result: unknown = transaction(() => toTransactionArgs(drags, update));
+                Promise.resolve(result).catch(error => {
+                    if (error !== dragCancelled) throw error;
+                });
+            } else if (value.type === 'end') {
+                active = undefined;
+            } else if (value.type === 'cancel') {
+                cancel();
             }
         });
+        return () => {
+            unobserve();
+            cancel();
+        };
     }, dependencies);
 }

package/src/hooks/use-draggable.test.ts

@@ -0,0 +1,148 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from "vitest";
+import type { Vec2 } from "@adobe/data/math";
+import { useDraggable, type DraggableProps } from "./use-draggable.js";
+import { createHost, pointerCancel, pointerDown, pointerMove, pointerUp, render, unmount } from "./test-host.test-utils.js";
+
+function mountDraggable(options: Partial<DraggableProps> = {}, onDragStart: () => Vec2 | void = () => {}) {
+    const host = createHost();
+    const parent = document.createElement("section");
+    parent.append(host);
+    const props = {
+        onDragStart: vi.fn(onDragStart),
+        onDrag: vi.fn(),
+        onDragEnd: vi.fn(),
+        onDragCancel: vi.fn(),
+        ...options,
+    };
+    render(host, () => useDraggable(host, props, []));
+    return { host, parent, props };
+}
+
+describe("useDraggable", () => {
+    it("offsets the start position from onDragStart and ends at the pointerup coordinates", () => {
+        const { host, props } = mountDraggable({}, () => [100, 200]);
+        pointerDown(host);
+        pointerMove(20);
+        pointerUp(50);
+
+        expect(props.onDrag).toHaveBeenCalledWith(expect.any(PointerEvent), [120, 200], [20, 0]);
+        expect(props.onDragEnd).toHaveBeenCalledWith(expect.any(PointerEvent), [150, 200], [50, 0]);
+        unmount(host);
+    });
+
+    it("starts from the element offset when onDragStart returns nothing", () => {
+        const { host, props } = mountDraggable();
+        Object.defineProperty(host, "offsetLeft", { value: 7 });
+        Object.defineProperty(host, "offsetTop", { value: 3 });
+        pointerDown(host);
+        pointerMove(20);
+        expect(props.onDrag).toHaveBeenCalledWith(expect.any(PointerEvent), [27, 3], [20, 0]);
+        pointerUp(20);
+        unmount(host);
+    });
+
+    it("starts once the pointer has moved at least minDragDistance", () => {
+        const { host, props } = mountDraggable({ minDragDistance: 5 });
+        pointerDown(host);
+        pointerMove(4);
+        expect(props.onDragStart).not.toHaveBeenCalled();
+        pointerMove(5);
+        expect(props.onDragStart).toHaveBeenCalledTimes(1);
+        pointerMove(6);
+        expect(props.onDragStart).toHaveBeenCalledTimes(1);
+        pointerUp(6);
+        unmount(host);
+    });
+
+    it("does not end or cancel a press released before the threshold", () => {
+        const { host, props } = mountDraggable();
+        pointerDown(host);
+        pointerMove(3);
+        pointerUp(3);
+        expect(props.onDragEnd).not.toHaveBeenCalled();
+        expect(props.onDragCancel).not.toHaveBeenCalled();
+        unmount(host);
+        expect(props.onDragCancel).not.toHaveBeenCalled();
+    });
+
+    it("sets the drag cursor and restores the original cursor at the end", () => {
+        const { host } = mountDraggable({ dragCursor: "move" });
+        host.style.cursor = "pointer";
+        pointerDown(host);
+        pointerMove(20);
+        expect(host.style.cursor).toBe("move");
+        pointerUp(20);
+        expect(host.style.cursor).toBe("pointer");
+        unmount(host);
+    });
+
+    it("adds a placeholder to the parent while dragging when requested", () => {
+        const { host, parent } = mountDraggable({ addPlaceholder: true });
+        pointerDown(host);
+        pointerMove(20);
+        expect(parent.children).toHaveLength(2);
+        pointerUp(20);
+        expect(parent.children).toHaveLength(1);
+        unmount(host);
+    });
+
+    it("stops propagation of its pointer events when requested", () => {
+        const { host } = mountDraggable({ stopPropagation: true });
+        const parentListener = vi.fn();
+        host.parentElement!.addEventListener("pointerdown", parentListener);
+        pointerDown(host);
+        expect(parentListener).not.toHaveBeenCalled();
+        pointerUp(0);
+        unmount(host);
+    });
+
+    it("cancels on pointercancel, restores the cursor, and stops delivering moves", () => {
+        const { host, props } = mountDraggable();
+        pointerDown(host);
+        pointerMove(20);
+        expect(host.style.cursor).toBe("grab");
+
+        pointerCancel();
+        pointerMove(30);
+        pointerUp(30);
+
+        expect(props.onDragCancel).toHaveBeenCalledTimes(1);
+        expect(props.onDrag).toHaveBeenCalledTimes(1);
+        expect(props.onDragEnd).not.toHaveBeenCalled();
+        expect(host.style.cursor).toBe("");
+        unmount(host);
+    });
+
+    it("ignores secondary buttons and other pointers", () => {
+        const { host, props } = mountDraggable();
+        pointerDown(host, 0, 1, 2);
+        pointerMove(20);
+        expect(props.onDragStart).not.toHaveBeenCalled();
+
+        pointerDown(host);
+        pointerDown(host, 0, 2);
+        pointerMove(20, 2);
+        pointerUp(20, 2);
+        expect(props.onDragStart).not.toHaveBeenCalled();
+        pointerMove(20);
+        pointerUp(20);
+        expect(props.onDragEnd).toHaveBeenCalledTimes(1);
+        unmount(host);
+    });
+
+    it("cancels an active drag on unmount and stops listening", () => {
+        const { host, props } = mountDraggable();
+        pointerDown(host);
+        pointerMove(20);
+        unmount(host);
+
+        expect(props.onDragCancel).toHaveBeenCalledTimes(1);
+        expect(host.style.cursor).toBe("");
+        pointerMove(30);
+        pointerDown(host);
+        pointerMove(60);
+        expect(props.onDrag).toHaveBeenCalledTimes(1);
+    });
+});

package/src/hooks/use-draggable.ts

@@ -25,86 +25,111 @@ export interface DraggableProps {
 export function useDraggable(element: HTMLElement, props: DraggableProps, dependencies: unknown[]) {
     const { minDragDistance = 10, dragCursor = 'grab', addPlaceholder = false, stopPropagation = false } = props;
     useEffect(() => {
-        let downPosition: Vec2 | null = null;
-        // the bounds of the element when the pointer was first pressed down.
+        const minDragDistanceSquared = minDragDistance * minDragDistance;
+        // The pointer that started the session; other pointers are ignored until it ends.
+        let pointerId: number | null = null;
+        let downPosition: Vec2 = [0, 0];
+        // The element position when the drag started, or null before the threshold is crossed.
         let dragStartOffset: Vec2 | null = null;
         let originalCursor = '';
         let placeholder: HTMLElement | null = null;
-        let movePosition: Vec2 = [0, 0];
-        function notify(e: PointerEvent, dragListener: DraggableProps["onDrag"]) {
-            const delta = Vec2.subtract(movePosition, downPosition!);
-            dragListener(e, Vec2.add(dragStartOffset!, delta), delta);
+
+        function notify(e: PointerEvent, start: Vec2, dragListener: DraggableProps["onDrag"]) {
+            const delta: Vec2 = [e.clientX - downPosition[0], e.clientY - downPosition[1]];
+            dragListener(e, Vec2.add(start, delta), delta);
+        }
+
+        function startDrag(e: PointerEvent): Vec2 {
+            const offset: Vec2 = [element.offsetLeft, element.offsetTop];
+            const start = (props.onDragStart(e) as Vec2 | undefined) ?? offset;
+            dragStartOffset = start;
+            if (dragCursor) {
+                originalCursor = element.style.cursor;
+                element.style.cursor = dragCursor;
+            }
+            // add a placeholder so the parent element doesn't change size when the element is dragged.
+            if (addPlaceholder) {
+                placeholder = document.createElement('div');
+                Object.assign(placeholder.style, {
+                    position: 'absolute',
+                    backgroundColor: 'pink',
+                    left: toCssUnitString(element.offsetLeft),
+                    top: toCssUnitString(element.offsetTop),
+                    width: toCssUnitString(element.offsetWidth),
+                    height: toCssUnitString(element.offsetHeight),
+                    visibility: 'hidden',
+                });
+                element.parentElement?.appendChild(placeholder);
+            }
+            return start;
         }
 
         function onPointerMove(e: PointerEvent) {
-            movePosition = [e.clientX, e.clientY];
-            if (Vec2.length(Vec2.subtract(movePosition, downPosition!)) >= minDragDistance) {
-                if (!dragStartOffset) {
-                    dragStartOffset = [element.offsetLeft, element.offsetTop];
-                    props.onDragStart(e);
-                    if (dragCursor) {
-                        originalCursor = element.style.cursor;
-                        element.style.cursor = dragCursor;
-                    }
-                    // add a placeholder so the parent element doesn't change size when the element is dragged.
-                    if (addPlaceholder) {
-                        placeholder = document.createElement('div');
-                        Object.assign(placeholder.style, {
-                            position: 'absolute',
-                            backgroundColor: 'pink',
-                            left: toCssUnitString(element.offsetLeft),
-                            top: toCssUnitString(element.offsetTop),
-                            width: toCssUnitString(element.offsetWidth),
-                            height: toCssUnitString(element.offsetHeight),
-                            visibility: 'hidden',
-                        });
-                        element.parentElement?.appendChild(placeholder);
-                    }
+            if (e.pointerId !== pointerId) return;
+            let start = dragStartOffset;
+            if (!start) {
+                const dx = e.clientX - downPosition[0];
+                const dy = e.clientY - downPosition[1];
+                if (dx * dx + dy * dy >= minDragDistanceSquared) {
+                    start = startDrag(e);
                 }
             }
-            if (dragStartOffset) {
-                notify(e, props.onDrag);
+            if (start) {
+                notify(e, start, props.onDrag);
             }
             if (stopPropagation) e.stopPropagation();
         }
-        function cleanup() {
+
+        /** Ends the session and restores the element; returns the drag start if a drag had started. */
+        function release(): Vec2 | null {
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             window.removeEventListener('pointerup', onPointerUp);
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            window.removeEventListener('pointercancel', onPointerCancel);
             window.removeEventListener('pointermove', onPointerMove);
-            if (dragCursor) {
+            const start = dragStartOffset;
+            if (start && dragCursor) {
                 element.style.cursor = originalCursor;
             }
-            if (placeholder) {
-                placeholder.remove();
-                placeholder = null;
-            }
+            placeholder?.remove();
+            placeholder = null;
+            pointerId = null;
+            dragStartOffset = null;
+            return start;
         }
+
         function onPointerUp(e: PointerEvent) {
-            cleanup();
-            if (dragStartOffset && props.onDragEnd) {
-                notify(e, props.onDragEnd);
+            if (e.pointerId !== pointerId) return;
+            const start = release();
+            if (start && props.onDragEnd) {
+                notify(e, start, props.onDragEnd);
             }
             if (stopPropagation) e.stopPropagation();
-            downPosition = null;
-            dragStartOffset = null;
         }
+
+        function onPointerCancel(e: PointerEvent) {
+            if (e.pointerId !== pointerId) return;
+            if (release()) {
+                props.onDragCancel?.();
+            }
+        }
+
         function onPointerDown(e: PointerEvent) {
             // Only start drag transaction for left mouse button clicks
-            if (e.button !== 0) return;
+            if (e.button !== 0 || pointerId !== null) return;
 
+            pointerId = e.pointerId;
+            downPosition = [e.clientX, e.clientY];
             window.addEventListener('pointermove', onPointerMove);
             window.addEventListener('pointerup', onPointerUp);
-            downPosition = [e.clientX, e.clientY];
+            window.addEventListener('pointercancel', onPointerCancel);
             if (stopPropagation) e.stopPropagation();
         }
 
         element?.addEventListener('pointerdown', onPointerDown);
         return () => {
             element?.removeEventListener('pointerdown', onPointerDown);
-            if (downPosition) {
-                cleanup();
-            }
-            if (dragStartOffset) {
+            if (pointerId !== null && release()) {
                 props.onDragCancel?.();
             }
         };