@astryxdesign/lab 0.4.2-canary.10bcaa1 → 0.4.2-canary.255e810

package/dist/BottomSheet/useSheetGestures.d.ts

@@ -22,7 +22,7 @@
  * - /packages/lab/src/BottomSheet/useSheetGestures.doc.mjs
  * - /packages/lab/src/BottomSheet/useSheetGestures.test.ts
  */
-import { type CSSProperties, type PointerEvent as ReactPointerEvent } from 'react';
+import { type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent } from 'react';
 export interface UseSheetGesturesOptions {
     /** Whether the owning sheet is open. Drag state resets when it closes. */
     isOpen: boolean;
@@ -59,6 +59,8 @@ export interface SheetContentProps {
 }
 export interface SheetHandleProps {
     style: CSSProperties;
+    onContextMenu: (event: ReactMouseEvent) => void;
+    onLostPointerCapture: (event: ReactPointerEvent) => void;
     onPointerDown: (event: ReactPointerEvent) => void;
     onPointerMove: (event: ReactPointerEvent) => void;
     onPointerUp: (event: ReactPointerEvent) => void;
@@ -66,6 +68,8 @@ export interface SheetHandleProps {
 }
 export interface SheetBodyProps {
     ref: (node: HTMLElement | null) => void;
+    onContextMenu: (event: ReactMouseEvent) => void;
+    onLostPointerCapture: (event: ReactPointerEvent) => void;
     onPointerDown: (event: ReactPointerEvent) => void;
     onPointerMove: (event: ReactPointerEvent) => void;
     onPointerUp: (event: ReactPointerEvent) => void;

package/dist/BottomSheet/useSheetGestures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,YAAY,IAAI,iBAAiB,EACvC,MAAM,OAAO,CAAC;AAgEf,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gFAAgF;IAChF,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,0EAA0E;IAC1E,YAAY,EAAE,iBAAiB,CAAC;IAChC,gEAAgE;IAChE,WAAW,EAAE,gBAAgB,CAAC;IAC9B;;;;OAIG;IACH,SAAS,EAAE,cAAc,CAAC;IAC1B,kFAAkF;IAClF,UAAU,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,UAAU,EAAE,OAAO,CAAC;CACrB;AASD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,UAAiB,EACjB,SAAS,EACT,WAAW,EACX,MAAM,EACN,cAAc,GACf,EAAE,uBAAuB,GAAG,sBAAsB,CAgflD"}
+{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACvC,MAAM,OAAO,CAAC;AAgEf,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gFAAgF;IAChF,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,0EAA0E;IAC1E,YAAY,EAAE,iBAAiB,CAAC;IAChC,gEAAgE;IAChE,WAAW,EAAE,gBAAgB,CAAC;IAC9B;;;;OAIG;IACH,SAAS,EAAE,cAAc,CAAC;IAC1B,kFAAkF;IAClF,UAAU,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,UAAU,EAAE,OAAO,CAAC;CACrB;AASD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,UAAiB,EACjB,SAAS,EACT,WAAW,EACX,MAAM,EACN,cAAc,GACf,EAAE,uBAAuB,GAAG,sBAAsB,CAolBlD"}

package/dist/BottomSheet/useSheetGestures.js

@@ -188,6 +188,44 @@ export function useSheetGestures({
   const detentOffsets = useCallback(height => {
     return computeDetentOffsets(height, snapHeightsRef.current?.() ?? []);
   }, []);
+  const cancelDrag = useCallback(target => {
+    const state = dragStateRef.current;
+    if (state == null) {
+      return;
+    }
+
+    // Clear first: releasePointerCapture() may synchronously dispatch
+    // lostpointercapture, which must observe that this drag is already done.
+    dragStateRef.current = null;
+    if (target?.hasPointerCapture?.(state.pointerId)) {
+      target.releasePointerCapture(state.pointerId);
+    }
+    setDragOffset(state.baseOffset);
+    setIsDragging(false);
+
+    // An interrupted drag returns to its previous resting detent. Restore
+    // the matching scrim opacity as well so the modal shell cannot remain
+    // dimmed with its sheet translated out of view.
+    const offsets = detentOffsets(state.height);
+    const maxOffset = offsets[offsets.length - 1];
+    const shortestDetentHeight = state.height - maxOffset;
+    const dismissOffset = maxOffset + shortestDetentHeight * DISMISS_OVERSHOOT_RATIO;
+    onScrimOpacityRef.current?.(scrimOpacityForOffset(state.baseOffset, offsets, dismissOffset));
+  }, [detentOffsets]);
+  useEffect(() => {
+    const handleWindowBlur = () => cancelDrag();
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        cancelDrag();
+      }
+    };
+    window.addEventListener('blur', handleWindowBlur);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      window.removeEventListener('blur', handleWindowBlur);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [cancelDrag]);
   const settleFromDrag = useCallback((offset, velocity, height, dir, travel, baseOffset) => {
     const offsets = detentOffsets(height);
     const maxOffset = offsets[offsets.length - 1];
@@ -255,12 +293,27 @@ export function useSheetGestures({
     setIsDragging(true);
   }, [settledOffset]);
   const handlePointerDown = useCallback(event => {
+    if (event.button !== 0 || !event.isPrimary) {
+      return;
+    }
     // The handle has no native focus action. Prevent pointer-down from
     // moving focus off a form control on a tap; once the pointer actually
     // moves, BottomSheet dismisses the keyboard as sheet travel begins.
     event.preventDefault();
     beginDrag(event, measureHeight());
   }, [beginDrag, measureHeight]);
+  const handleContextMenu = useCallback(event => {
+    if (dragStateRef.current == null) {
+      return;
+    }
+    event.preventDefault();
+    cancelDrag(event.currentTarget);
+  }, [cancelDrag]);
+  const handleLostPointerCapture = useCallback(event => {
+    if (dragStateRef.current?.pointerId === event.pointerId) {
+      cancelDrag();
+    }
+  }, [cancelDrag]);
   const handlePointerMove = useCallback(event => {
     const state = dragStateRef.current;
     if (!state || state.pointerId !== event.pointerId) {
@@ -303,11 +356,11 @@ export function useSheetGestures({
       return;
     }
     const target = event.currentTarget;
-    target.releasePointerCapture?.(event.pointerId);
     const delta = event.clientY - state.startCoord;
     const offset = Math.max(0, state.baseOffset + delta);
     const dir = delta === 0 ? 0 : delta > 0 ? 1 : -1;
     dragStateRef.current = null;
+    target.releasePointerCapture?.(event.pointerId);
     setIsDragging(false);
     settleFromDrag(offset, state.velocity, state.height || 1, dir, Math.abs(delta), state.baseOffset);
   }, [settleFromDrag]);
@@ -317,6 +370,9 @@ export function useSheetGestures({
   // native pan starts.
   const armedBodyRef = useRef(null);
   const handleBodyPointerDown = useCallback(event => {
+    if (event.button !== 0 || !event.isPrimary) {
+      return;
+    }
     const scroller = event.currentTarget;
     if (scroller.scrollTop > 0) {
       armedBodyRef.current = null;
@@ -363,11 +419,13 @@ export function useSheetGestures({
   const touchDragRef = useRef(null);
   const previousTouchHandlersRef = useRef(null);
   const beginDragRef = useRef(beginDrag);
+  const cancelDragRef = useRef(cancelDrag);
   const pointerMoveRef = useRef(handlePointerMove);
   const endDragRef = useRef(endDrag);
   const measureHeightRef = useRef(measureHeight);
   useEffect(() => {
     beginDragRef.current = beginDrag;
+    cancelDragRef.current = cancelDrag;
     pointerMoveRef.current = handlePointerMove;
     endDragRef.current = endDrag;
     measureHeightRef.current = measureHeight;
@@ -443,11 +501,18 @@ export function useSheetGestures({
     };
     const onTouchEnd = event => {
       touchDragRef.current = null;
-      if (dragStateRef.current) {
-        const t = event.changedTouches[0];
-        if (t) {
-          endDragRef.current(asPointer(t, event.currentTarget));
-        }
+      const pointerId = dragStateRef.current?.pointerId;
+      if (pointerId == null) {
+        return;
+      }
+      const t = [...event.changedTouches].find(touch => touch.identifier === pointerId);
+      const target = event.currentTarget;
+      if (t) {
+        endDragRef.current(asPointer(t, target));
+      } else if (event.touches.length === 0) {
+        // Some interrupted multi-touch sequences omit the active touch from
+        // changedTouches. If no fingers remain, the drag cannot finish later.
+        cancelDragRef.current(target);
       }
     };
     const prev = bodyNodeRef.current;
@@ -498,18 +563,22 @@ export function useSheetGestures({
       touchAction: 'none',
       cursor: 'grab'
     },
+    onContextMenu: handleContextMenu,
+    onLostPointerCapture: handleLostPointerCapture,
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,
     onPointerUp: endDrag,
     onPointerCancel: endDrag
-  }), [handlePointerDown, handlePointerMove, endDrag]);
+  }), [endDrag, handleContextMenu, handleLostPointerCapture, handlePointerDown, handlePointerMove]);
   const bodyProps = useMemo(() => ({
     ref: bodyRef,
+    onContextMenu: handleContextMenu,
+    onLostPointerCapture: handleLostPointerCapture,
     onPointerDown: handleBodyPointerDown,
     onPointerMove: handleBodyPointerMove,
     onPointerUp: handleBodyEnd,
     onPointerCancel: handleBodyEnd
-  }), [bodyRef, handleBodyPointerDown, handleBodyPointerMove, handleBodyEnd]);
+  }), [bodyRef, handleBodyEnd, handleBodyPointerDown, handleBodyPointerMove, handleContextMenu, handleLostPointerCapture]);
   return {
     sheetRef,
     contentProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.4.2-canary.10bcaa1",
+  "version": "0.4.2-canary.255e810",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.4.2-canary.10bcaa1",
+    "@astryxdesign/core": "0.4.2-canary.255e810",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -55,7 +55,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.4.2-canary.10bcaa1",
+    "@astryxdesign/cli": "0.4.2-canary.255e810",
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",

package/src/BottomSheet/BottomSheet.test.tsx

@@ -185,7 +185,12 @@ function getHandle(): HTMLElement {
 // clientY, so dispatch plain events with the coords the handlers read.
 function drag(handle: HTMLElement, points: {y: number}[]) {
   const [down, ...rest] = points;
-  fireEvent.pointerDown(handle, {pointerId: 1, clientY: down.y});
+  fireEvent.pointerDown(handle, {
+    pointerId: 1,
+    clientY: down.y,
+    button: 0,
+    isPrimary: true,
+  });
   for (const p of rest) {
     fireEvent.pointerMove(handle, {pointerId: 1, clientY: p.y});
   }
@@ -216,7 +221,9 @@ function fireTimedPointer(
 ) {
   const event = new Event(type, {bubbles: true, cancelable: true});
   Object.defineProperties(event, {
+    button: {value: 0},
     clientY: {value: y},
+    isPrimary: {value: true},
     pointerId: {value: 1},
     timeStamp: {value: time},
   });
@@ -534,6 +541,32 @@ describe('BottomSheet', () => {
       drag(getHandle(), [{y: 0}, {y: 40}, {y: 120}]);
       expect(onOpenChange).toHaveBeenCalledWith(false);
     });
+
+    it('restores the sheet when a context menu interrupts an active drag', () => {
+      const onOpenChange = vi.fn();
+      render(
+        <BottomSheet isOpen onOpenChange={onOpenChange} label="Filters">
+          Content
+        </BottomSheet>,
+      );
+      const handle = getHandle();
+      const dialog = screen.getByRole('dialog');
+
+      fireEvent.pointerDown(handle, {
+        pointerId: 1,
+        clientY: 0,
+        button: 0,
+        isPrimary: true,
+      });
+      fireEvent.pointerMove(handle, {pointerId: 1, clientY: 300});
+      expect(getSheet().style.transform).toBe('translateY(300px)');
+
+      expect(fireEvent.contextMenu(handle)).toBe(false);
+
+      expect(getSheet().style.transform).toBe('');
+      expect(dialog).toHaveStyle({'--_sheet-scrim-opacity': '1'});
+      expect(onOpenChange).not.toHaveBeenCalled();
+    });
   });
 
   describe('height', () => {
@@ -1122,6 +1155,8 @@ describe('BottomSheet', () => {
       const pointerDownAllowed = fireEvent.pointerDown(getHandle(), {
         pointerId: 1,
         clientY: 0,
+        button: 0,
+        isPrimary: true,
       });
       expect(pointerDownAllowed).toBe(false);
       expect(document.activeElement).toBe(input);

package/src/BottomSheet/BottomSheetSwitcher.test.tsx

@@ -484,6 +484,8 @@ describe('BottomSheetSwitcher', () => {
       pointerId: 1,
       clientY: 100,
       timeStamp: 0,
+      button: 0,
+      isPrimary: true,
     });
     fireEvent.pointerMove(handle, {
       pointerId: 1,
@@ -665,7 +667,12 @@ describe('BottomSheetSwitcher', () => {
     }
 
     fireEvent.click(dialog);
-    fireEvent.pointerDown(handle, {pointerId: 1, clientY: 0});
+    fireEvent.pointerDown(handle, {
+      pointerId: 1,
+      clientY: 0,
+      button: 0,
+      isPrimary: true,
+    });
     fireEvent.pointerMove(handle, {pointerId: 1, clientY: 120});
     fireEvent.pointerUp(handle, {pointerId: 1, clientY: 120});
 
@@ -704,7 +711,12 @@ describe('BottomSheetSwitcher', () => {
     fireEvent.click(dialog);
     fireEvent.keyDown(dialog, {key: 'Escape'});
     fireEvent(dialog, new Event('cancel', {cancelable: true}));
-    fireEvent.pointerDown(handle, {pointerId: 1, clientY: 0});
+    fireEvent.pointerDown(handle, {
+      pointerId: 1,
+      clientY: 0,
+      button: 0,
+      isPrimary: true,
+    });
     fireEvent.pointerMove(handle, {pointerId: 1, clientY: 120});
     fireEvent.pointerUp(handle, {pointerId: 1, clientY: 120});
 
@@ -712,6 +724,40 @@ describe('BottomSheetSwitcher', () => {
     expect(dialog).toHaveStyle({'--_sheet-scrim-opacity': '1'});
   });
 
+  it('restores the active sheet when a context menu interrupts its drag', () => {
+    const onActiveSheetChange = vi.fn();
+    render(
+      <BottomSheetSwitcher
+        activeSheet="details"
+        onActiveSheetChange={onActiveSheetChange}>
+        <BottomSheet sheetId="details" label="Details">
+          Content
+        </BottomSheet>
+      </BottomSheetSwitcher>,
+    );
+    const dialog = getSharedDialog();
+    const panel = getSheetPanel(dialog);
+    const handle = panel.firstElementChild;
+    if (!(handle instanceof HTMLElement)) {
+      throw new Error('sheet handle not found');
+    }
+
+    fireEvent.pointerDown(handle, {
+      pointerId: 1,
+      clientY: 0,
+      button: 0,
+      isPrimary: true,
+    });
+    fireEvent.pointerMove(handle, {pointerId: 1, clientY: 300});
+    expect(panel.style.transform).toBe('translateY(300px)');
+
+    expect(fireEvent.contextMenu(handle)).toBe(false);
+
+    expect(panel.style.transform).toBe('');
+    expect(dialog).toHaveStyle({'--_sheet-scrim-opacity': '1'});
+    expect(onActiveSheetChange).not.toHaveBeenCalled();
+  });
+
   it('ignores Escape while an IME composition is active', () => {
     const onActiveSheetChange = vi.fn();
     render(

package/src/BottomSheet/useSheetGestures.test.ts

@@ -26,9 +26,13 @@ function pointerEvent(
   timeStamp: number,
   target: HTMLElement,
   pointerId = 1,
+  button = 0,
+  isPrimary = true,
 ) {
   return {
     pointerId,
+    button,
+    isPrimary,
     clientY,
     timeStamp,
     currentTarget: target,
@@ -288,6 +292,62 @@ describe('useSheetGestures', () => {
     );
   });
 
+  it('returns to the settled detent when a context menu interrupts a drag', () => {
+    const onScrimOpacity = vi.fn();
+    const {hook, onDismiss} = setup({
+      snapHeights: () => [200, 300],
+      onScrimOpacity,
+    });
+    const target = makeTarget();
+    down(hook, 0, 0, target);
+    move(hook, 300, 1000, target);
+
+    const preventDefault = vi.fn();
+    act(() =>
+      hook.result.current.handleProps.onContextMenu({
+        currentTarget: target,
+        preventDefault,
+      } as unknown as React.MouseEvent),
+    );
+
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(hook.result.current.isDragging).toBe(false);
+    expect(hook.result.current.contentProps.style.transform).toBeUndefined();
+    expect(onScrimOpacity).toHaveBeenLastCalledWith(1);
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  it('returns to the settled detent when pointer capture is lost', () => {
+    const {hook, onDismiss} = setup({snapHeights: () => [200]});
+    const target = makeTarget();
+    down(hook, 0, 0, target);
+    move(hook, 300, 1000, target);
+
+    act(() =>
+      hook.result.current.handleProps.onLostPointerCapture(
+        pointerEvent(300, 1000, target),
+      ),
+    );
+
+    expect(hook.result.current.isDragging).toBe(false);
+    expect(hook.result.current.contentProps.style.transform).toBeUndefined();
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  it('does not start a drag from a secondary pointer button', () => {
+    const {hook} = setup();
+    const target = makeTarget();
+    act(() => hook.result.current.sheetRef(target));
+
+    act(() =>
+      hook.result.current.handleProps.onPointerDown(
+        pointerEvent(0, 0, target, 1, 2),
+      ),
+    );
+
+    expect(hook.result.current.isDragging).toBe(false);
+  });
+
   it('rubber-bands an upward drag past the fully-open position', () => {
     const {hook} = setup({snapHeights: () => [200]});
     const t = makeTarget();
@@ -394,6 +454,12 @@ describe('useSheetGestures', () => {
       Object.defineProperty(ev, 'changedTouches', {
         value: [{identifier: id, clientY: y}],
       });
+      Object.defineProperty(ev, 'touches', {
+        value:
+          type === 'touchend' || type === 'touchcancel'
+            ? []
+            : [{identifier: id, clientY: y}],
+      });
       Object.defineProperty(ev, 'currentTarget', {value: el});
       el.dispatchEvent(ev);
       return ev;
@@ -432,6 +498,36 @@ describe('useSheetGestures', () => {
       expect(hook.result.current.isDragging).toBe(true);
     });
 
+    it('finishes the active drag when another ended touch is listed first', () => {
+      const {hook} = setup({snapHeights: () => [200]});
+      const el = makeScroller({
+        scrollTop: 0,
+        clientHeight: 200,
+        scrollHeight: 800,
+      });
+      act(() => hook.result.current.sheetRef(el));
+      act(() => hook.result.current.bodyProps.ref(el));
+      act(() => {
+        touch(el, 'touchstart', 0, 2);
+        touch(el, 'touchmove', 300, 2);
+
+        const end = new Event('touchend', {
+          bubbles: true,
+          cancelable: true,
+        });
+        Object.defineProperty(end, 'changedTouches', {
+          value: [
+            {identifier: 1, clientY: 100},
+            {identifier: 2, clientY: 300},
+          ],
+        });
+        Object.defineProperty(end, 'touches', {value: []});
+        el.dispatchEvent(end);
+      });
+
+      expect(hook.result.current.isDragging).toBe(false);
+    });
+
     it('leaves native scrolling alone in the middle of the content', () => {
       const {hook} = setup({snapHeights: () => [200]});
       const el = makeScroller({

package/src/BottomSheet/useSheetGestures.ts

@@ -34,6 +34,7 @@ import {
   useRef,
   useState,
   type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
 } from 'react';
 import {
@@ -137,6 +138,8 @@ export interface SheetContentProps {
 
 export interface SheetHandleProps {
   style: CSSProperties;
+  onContextMenu: (event: ReactMouseEvent) => void;
+  onLostPointerCapture: (event: ReactPointerEvent) => void;
   onPointerDown: (event: ReactPointerEvent) => void;
   onPointerMove: (event: ReactPointerEvent) => void;
   onPointerUp: (event: ReactPointerEvent) => void;
@@ -145,6 +148,8 @@ export interface SheetHandleProps {
 
 export interface SheetBodyProps {
   ref: (node: HTMLElement | null) => void;
+  onContextMenu: (event: ReactMouseEvent) => void;
+  onLostPointerCapture: (event: ReactPointerEvent) => void;
   onPointerDown: (event: ReactPointerEvent) => void;
   onPointerMove: (event: ReactPointerEvent) => void;
   onPointerUp: (event: ReactPointerEvent) => void;
@@ -292,6 +297,52 @@ export function useSheetGestures({
     return computeDetentOffsets(height, snapHeightsRef.current?.() ?? []);
   }, []);
 
+  const cancelDrag = useCallback(
+    (target?: HTMLElement) => {
+      const state = dragStateRef.current;
+      if (state == null) {
+        return;
+      }
+
+      // Clear first: releasePointerCapture() may synchronously dispatch
+      // lostpointercapture, which must observe that this drag is already done.
+      dragStateRef.current = null;
+      if (target?.hasPointerCapture?.(state.pointerId)) {
+        target.releasePointerCapture(state.pointerId);
+      }
+      setDragOffset(state.baseOffset);
+      setIsDragging(false);
+
+      // An interrupted drag returns to its previous resting detent. Restore
+      // the matching scrim opacity as well so the modal shell cannot remain
+      // dimmed with its sheet translated out of view.
+      const offsets = detentOffsets(state.height);
+      const maxOffset = offsets[offsets.length - 1];
+      const shortestDetentHeight = state.height - maxOffset;
+      const dismissOffset =
+        maxOffset + shortestDetentHeight * DISMISS_OVERSHOOT_RATIO;
+      onScrimOpacityRef.current?.(
+        scrimOpacityForOffset(state.baseOffset, offsets, dismissOffset),
+      );
+    },
+    [detentOffsets],
+  );
+
+  useEffect(() => {
+    const handleWindowBlur = () => cancelDrag();
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        cancelDrag();
+      }
+    };
+    window.addEventListener('blur', handleWindowBlur);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      window.removeEventListener('blur', handleWindowBlur);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [cancelDrag]);
+
   const settleFromDrag = useCallback(
     (
       offset: number,
@@ -379,6 +430,9 @@ export function useSheetGestures({
 
   const handlePointerDown = useCallback(
     (event: ReactPointerEvent) => {
+      if (event.button !== 0 || !event.isPrimary) {
+        return;
+      }
       // The handle has no native focus action. Prevent pointer-down from
       // moving focus off a form control on a tap; once the pointer actually
       // moves, BottomSheet dismisses the keyboard as sheet travel begins.
@@ -388,6 +442,26 @@ export function useSheetGestures({
     [beginDrag, measureHeight],
   );
 
+  const handleContextMenu = useCallback(
+    (event: ReactMouseEvent) => {
+      if (dragStateRef.current == null) {
+        return;
+      }
+      event.preventDefault();
+      cancelDrag(event.currentTarget as HTMLElement);
+    },
+    [cancelDrag],
+  );
+
+  const handleLostPointerCapture = useCallback(
+    (event: ReactPointerEvent) => {
+      if (dragStateRef.current?.pointerId === event.pointerId) {
+        cancelDrag();
+      }
+    },
+    [cancelDrag],
+  );
+
   const handlePointerMove = useCallback(
     (event: ReactPointerEvent) => {
       const state = dragStateRef.current;
@@ -439,11 +513,11 @@ export function useSheetGestures({
         return;
       }
       const target = event.currentTarget as HTMLElement;
-      target.releasePointerCapture?.(event.pointerId);
       const delta = event.clientY - state.startCoord;
       const offset = Math.max(0, state.baseOffset + delta);
       const dir = delta === 0 ? 0 : delta > 0 ? 1 : -1;
       dragStateRef.current = null;
+      target.releasePointerCapture?.(event.pointerId);
       setIsDragging(false);
       settleFromDrag(
         offset,
@@ -467,6 +541,9 @@ export function useSheetGestures({
   } | null>(null);
 
   const handleBodyPointerDown = useCallback((event: ReactPointerEvent) => {
+    if (event.button !== 0 || !event.isPrimary) {
+      return;
+    }
     const scroller = event.currentTarget as HTMLElement;
     if (scroller.scrollTop > 0) {
       armedBodyRef.current = null;
@@ -531,11 +608,13 @@ export function useSheetGestures({
   } | null>(null);
 
   const beginDragRef = useRef(beginDrag);
+  const cancelDragRef = useRef(cancelDrag);
   const pointerMoveRef = useRef(handlePointerMove);
   const endDragRef = useRef(endDrag);
   const measureHeightRef = useRef(measureHeight);
   useEffect(() => {
     beginDragRef.current = beginDrag;
+    cancelDragRef.current = cancelDrag;
     pointerMoveRef.current = handlePointerMove;
     endDragRef.current = endDrag;
     measureHeightRef.current = measureHeight;
@@ -624,11 +703,20 @@ export function useSheetGestures({
 
     const onTouchEnd = (event: TouchEvent) => {
       touchDragRef.current = null;
-      if (dragStateRef.current) {
-        const t = event.changedTouches[0];
-        if (t) {
-          endDragRef.current(asPointer(t, event.currentTarget as HTMLElement));
-        }
+      const pointerId = dragStateRef.current?.pointerId;
+      if (pointerId == null) {
+        return;
+      }
+      const t = [...event.changedTouches].find(
+        touch => touch.identifier === pointerId,
+      );
+      const target = event.currentTarget as HTMLElement;
+      if (t) {
+        endDragRef.current(asPointer(t, target));
+      } else if (event.touches.length === 0) {
+        // Some interrupted multi-touch sequences omit the active touch from
+        // changedTouches. If no fingers remain, the drag cannot finish later.
+        cancelDragRef.current(target);
       }
     };
 
@@ -677,23 +765,40 @@ export function useSheetGestures({
   const handleProps = useMemo<SheetHandleProps>(
     () => ({
       style: {touchAction: 'none', cursor: 'grab'},
+      onContextMenu: handleContextMenu,
+      onLostPointerCapture: handleLostPointerCapture,
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: endDrag,
       onPointerCancel: endDrag,
     }),
-    [handlePointerDown, handlePointerMove, endDrag],
+    [
+      endDrag,
+      handleContextMenu,
+      handleLostPointerCapture,
+      handlePointerDown,
+      handlePointerMove,
+    ],
   );
 
   const bodyProps = useMemo<SheetBodyProps>(
     () => ({
       ref: bodyRef,
+      onContextMenu: handleContextMenu,
+      onLostPointerCapture: handleLostPointerCapture,
       onPointerDown: handleBodyPointerDown,
       onPointerMove: handleBodyPointerMove,
       onPointerUp: handleBodyEnd,
       onPointerCancel: handleBodyEnd,
     }),
-    [bodyRef, handleBodyPointerDown, handleBodyPointerMove, handleBodyEnd],
+    [
+      bodyRef,
+      handleBodyEnd,
+      handleBodyPointerDown,
+      handleBodyPointerMove,
+      handleContextMenu,
+      handleLostPointerCapture,
+    ],
   );
 
   return {

package/src/ListInput/ListInput.doc.mjs

@@ -241,6 +241,14 @@ export const docs = {
       },
     ],
   },
+  theming: {
+    targets: [
+      {
+        className: 'astryx-list-input',
+        visualProps: ['state', 'reorderable'],
+      },
+    ],
+  },
   examples: [
     {
       label: 'Controlled guest list',