@remit/ui 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "files": [
     "src"
@@ -18,9 +18,11 @@
     "@fontsource-variable/geist": "^5",
     "@fontsource-variable/hanken-grotesk": "^5",
     "@fontsource-variable/inter": "^5",
+    "@react-types/shared": "^3.36.0",
     "clsx": "^2",
     "dompurify": "^3.4.7",
     "lucide-react": "^0.468",
+    "react-aria": "^3.50.0",
     "react-resizable-panels": "^2.1.9",
     "react-simple-pull-to-refresh": "^1.3.4",
     "tailwind-merge": "^2",
@@ -33,7 +35,9 @@
   },
   "devDependencies": {
     "@storybook/react": "^9",
+    "@types/jsdom": "^28.0.3",
     "@types/react-dom": "^19",
+    "jsdom": "^29.1.1",
     "react": "^19",
     "react-dom": "^19",
     "typescript": "*"

package/src/components/quarantine-fixtures.ts

@@ -15,7 +15,7 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		mailboxRole: "inbox",
 		mailboxPath: "INBOX",
 		failureStage: "BodyParse",
-		failureCode: "UnterminatedMultipartBoundary",
+		failureCode: "UnreadableBody",
 		failureMessage: "multipart boundary was never closed",
 		failurePartPath: undefined,
 		quarantinedAt: Date.parse("2026-07-18T09:12:00Z"),
@@ -67,7 +67,7 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		mailboxRole: undefined,
 		mailboxPath: "Clients/Acme Holdings",
 		failureStage: "BodyParse",
-		failureCode: "TruncatedBody",
+		failureCode: "UnreadableBody",
 		failureMessage: "stream ended before the declared body length",
 		failurePartPath: undefined,
 		quarantinedAt: Date.parse("2026-07-19T06:03:00Z"),
@@ -92,7 +92,7 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		mailboxRole: "inbox",
 		mailboxPath: "INBOX",
 		failureStage: "BodyParse",
-		failureCode: "TruncatedBody",
+		failureCode: "UnreadableBody",
 		failureMessage: "connection closed mid-body",
 		failurePartPath: undefined,
 		quarantinedAt: Date.parse("2026-07-19T11:27:00Z"),

package/src/components/quarantine-report.test.ts

@@ -20,7 +20,7 @@ describe("formatQuarantineReport", () => {
 	it("names the stage, the code and the build that failed", () => {
 		const report = formatQuarantineReport(entry);
 		assert.match(report, /BodyParse/);
-		assert.match(report, /UnterminatedMultipartBoundary/);
+		assert.match(report, /UnreadableBody/);
 		assert.match(report, /worker 1\.0\.0/);
 	});
 
@@ -186,7 +186,7 @@ describe("quarantineReportSections", () => {
 describe("quarantineIssueTitle", () => {
 	it("carries only the closed vocabulary", () => {
 		const title = quarantineIssueTitle(entry);
-		assert.match(title, /UnterminatedMultipartBoundary/);
+		assert.match(title, /UnreadableBody/);
 		assert.match(title, /BodyParse/);
 		assert.doesNotMatch(title, /joan@/);
 	});

package/src/components/quarantine-report.ts

@@ -3,31 +3,17 @@ import type { FolderRole } from "./folder-role.js";
 /**
  * The pipeline step that refused the message.
  *
- * One member, because **no catch site on the sync path can currently tell a
- * parse failure from an infrastructure failure**. The per-message frame in
- * `body-sync.ts` wraps the S3 body write, the parsed-body cache write, the
- * body-part `pMap` and DynamoDB upsert, the placement move (SQS + DynamoDB)
- * and the label and counter writes, alongside the `simpleParser` call; only
- * connection drops are filtered out of it.
+ * One member, behind a real narrowing rather than a promise of one: the body
+ * parse has its own try block around the parse call and nothing else, so an
+ * error out of it can only be the message. S3, queue and database failures
+ * propagate and never become a record here — quarantining one would set a
+ * message aside for an outage, tell the user it was unreadable, and invite a
+ * public GitHub issue about it.
  *
- * **Precondition on Phase 3**: narrow the try block to the parse call before
- * quarantining anything. Quarantining at the frame as it stands would set a
- * message aside for a DynamoDB throttle, tell the user it was unreadable, and
- * invite a public GitHub issue for an outage — the same defect as naming an
- * S3 write `AttachmentExtract`, one layer up.
- *
- * There are three distinct parse sites, and a quarantine would have to
- * attribute them differently: the fresh-fetch path, `backfillClassification`
- * (its own parse over a different result list), and the header parse in
- * `imapflow-connection.ts`, which is swallowed and treated as "no thread
- * parent". Stages are added as those sites are separated — never ahead of it.
- *
- * The stages this replaced could not fire at all: an unparseable Date falls
- * back to INTERNALDATE, and an unrecognized MIME type maps to a safe default
- * rather than throwing. Unparseable addresses are dropped with a `continue`
- * and the message is written anyway — so that defect is reached but discarded,
- * never raised, which is a reason to have no `AddressParse` stage but not the
- * reason that it cannot happen.
+ * A message that arrives with no ENVELOPE is deliberately not a member:
+ * nothing can tell that apart from the FETCH row glitching, and the IMAP
+ * client is far more often the cause than the message. The sync path holds its
+ * cursor and retries instead.
  */
 export type QuarantineFailureStage = "BodyParse";
 
@@ -36,13 +22,15 @@ export type QuarantineFailureStage = "BodyParse";
  *
  * Closed, because `quarantineIssueTitle` interpolates it into a public issue
  * title: a `string` here would make the one field whose publishability is
- * asserted rather than derived into free text. Grows with the narrowing
- * described on `QuarantineFailureStage`, and no faster.
+ * asserted rather than derived into free text.
+ *
+ * Total and small. The body parser reports its refusals as free text with no
+ * stable type or code, so a member exists only where the writer can identify
+ * the defect without reading parser prose; anything it cannot name is
+ * `UnreadableBody`, and the parser's own words stay in `failureMessage`, which
+ * is shown on screen and never published.
  */
-export type QuarantineFailureCode =
-	| "UnterminatedMultipartBoundary"
-	| "UnknownCharset"
-	| "TruncatedBody";
+export type QuarantineFailureCode = "UnknownCharset" | "UnreadableBody";
 
 /**
  * One node of the message's MIME tree, in a pre-order walk.

package/src/components/quarantine-section.render.test.ts

@@ -61,7 +61,7 @@ describe("QuarantineBugDialog", () => {
 				issueUrl: ISSUE_URL,
 			}),
 		);
-		assert.match(html, /UnterminatedMultipartBoundary/);
+		assert.match(html, /UnreadableBody/);
 		assert.match(html, /attachment names, or the parser's own error text/);
 		assert.match(html, /Copy report/);
 	});

package/src/components/swipeable-row.gesture.test.ts

@@ -0,0 +1,258 @@
+/**
+ * SwipeableRow — jsdom gesture tests against the real react-aria long-press
+ * wiring interacting with axis arbitration.
+ *
+ * The one this guards against: react-aria's `useLongPress` dispatches its
+ * own synthetic `pointercancel` right before calling `onLongPress` (to
+ * preempt other pointer consumers). SwipeableRow's `onPointerCancel` was
+ * originally aliased straight to `onPointerUp`, whose "no axis claimed"
+ * branch reads as a tap and calls `onOpen`/`onToggleCheck` — so a clean long
+ * press would fire onLongPress AND a spurious onOpen in the same gesture.
+ * The fix tags SwipeableRow's own axis-abort cancel so it can tell the two
+ * apart; these tests exercise both paths against the real hook, not a
+ * description of the fix.
+ */
+
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { ThreadRowData } from "./app-shell-types.js";
+import { SwipeableRow, type SwipePeek } from "./swipeable-row.js";
+
+const THRESHOLD_WAIT = 560; // default react-aria threshold (500ms) + margin
+
+const thread: ThreadRowData = {
+	id: "thread-1",
+	accountId: "account-1",
+	fromName: "Alex Rivera",
+	fromEmail: "alex@example.com",
+	subject: "Q3 planning notes",
+	snippet: "Notes from the planning session.",
+	timeLabel: "9:42",
+	isRead: false,
+};
+
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.SVGElement = dom.window.SVGElement;
+	globalThis.PointerEvent = dom.window.PointerEvent;
+	// jsdom does not implement the pointer-capture methods at all (not even
+	// as no-ops) — SwipeableRow calls setPointerCapture once it claims the
+	// horizontal axis, so an unpolyfilled call throws mid-gesture.
+	dom.window.Element.prototype.setPointerCapture = () => undefined;
+	dom.window.Element.prototype.releasePointerCapture = () => undefined;
+	dom.window.Element.prototype.hasPointerCapture = () => false;
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+after(() => {
+	dom.window.close();
+});
+
+beforeEach(() => {
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+
+afterEach(() => {
+	act(() => {
+		root.unmount();
+	});
+});
+
+interface Handlers {
+	onLongPress: () => void;
+	onOpen: () => void;
+	onPeek: (next: SwipePeek) => void;
+}
+
+function mount(handlers: Handlers) {
+	act(() => {
+		root.render(
+			createElement(SwipeableRow, {
+				thread,
+				selectionMode: false,
+				checked: false,
+				active: false,
+				peek: "none",
+				onPeek: handlers.onPeek,
+				onToggleCheck: () => undefined,
+				onLongPress: handlers.onLongPress,
+				onOpen: handlers.onOpen,
+				onAct: () => undefined,
+			}),
+		);
+	});
+	// The open affordance is the one button with no aria-label — the
+	// leading/trailing action buttons ("Mark as read" etc.) only render once
+	// peeked, but querying by absence of aria-label is stable at rest too.
+	const row = [...dom.window.document.querySelectorAll("button")].find(
+		(b) => !b.hasAttribute("aria-label"),
+	);
+	assert.ok(row, "open-affordance button did not mount");
+	return row;
+}
+
+// Each dispatch is wrapped in a synchronous act() so React commits the
+// resulting state update before the next call reads it. Without this, a
+// handler in the next dispatch can close over a stale pre-commit value (a
+// real gap we hit developing this test: an unwrapped dispatch sequence read
+// a stale `null` dragX in onPointerUp and mistook the just-completed swipe
+// commit for a bare tap, firing a spurious onOpen).
+function pointerDown(row: Element, x = 10, y = 10) {
+	act(() => {
+		row.dispatchEvent(
+			new dom.window.PointerEvent("pointerdown", {
+				bubbles: true,
+				pointerType: "touch",
+				pointerId: 1,
+				clientX: x,
+				clientY: y,
+			}),
+		);
+	});
+}
+
+function pointerMove(row: Element, x: number, y: number) {
+	act(() => {
+		row.dispatchEvent(
+			new dom.window.PointerEvent("pointermove", {
+				bubbles: true,
+				pointerType: "touch",
+				pointerId: 1,
+				clientX: x,
+				clientY: y,
+			}),
+		);
+	});
+}
+
+function pointerUp(row: Element) {
+	// Dispatched on the row, not document: SwipeableRow's own onPointerUp is a
+	// React prop on the row element, delegated via React's root-container
+	// listener — an event whose target is `document` (an ancestor of the
+	// root, not a descendant) never bubbles into that delegated listener.
+	// A real browser routes pointerup to the pointer-capturing element
+	// regardless of finger position once setPointerCapture has been called
+	// (the horizontal-swipe case here), so this also matches real behavior.
+	act(() => {
+		row.dispatchEvent(
+			new dom.window.PointerEvent("pointerup", {
+				bubbles: true,
+				pointerType: "touch",
+				pointerId: 1,
+			}),
+		);
+	});
+}
+
+function wait(ms: number) {
+	return act(() => new Promise((resolve) => setTimeout(resolve, ms)));
+}
+
+describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)", () => {
+	it("fires onLongPress on an unmoved press, with no spurious onOpen", async () => {
+		let longPressed = 0;
+		let opened = 0;
+		const row = mount({
+			onLongPress: () => longPressed++,
+			onOpen: () => opened++,
+			onPeek: () => undefined,
+		});
+
+		pointerDown(row);
+		await wait(THRESHOLD_WAIT);
+		pointerUp(row);
+
+		assert.equal(longPressed, 1);
+		assert.equal(
+			opened,
+			0,
+			"react-aria's own pointercancel (dispatched right before onLongPress) must not be read as a tap-to-open",
+		);
+	});
+
+	it("a horizontal drag past the axis threshold cancels the long press and commits a swipe peek, not onOpen", async () => {
+		let longPressed = 0;
+		let opened = 0;
+		let committed: SwipePeek | undefined;
+		const row = mount({
+			onLongPress: () => longPressed++,
+			onOpen: () => opened++,
+			onPeek: (next) => {
+				committed = next;
+			},
+		});
+
+		pointerDown(row);
+		pointerMove(row, 50, 10); // dx=40, past SWIPE_AXIS_THRESHOLD(10) and >= half SWIPE_ACTION_WIDTH(36)
+		pointerUp(row);
+		await wait(THRESHOLD_WAIT);
+
+		assert.equal(
+			longPressed,
+			0,
+			"long press must be cancelled once the horizontal axis is claimed",
+		);
+		assert.equal(opened, 0);
+		assert.equal(committed, "leading");
+	});
+
+	it("a vertical drag past the axis threshold cancels the long press and lets scroll win (no peek, no open)", async () => {
+		let longPressed = 0;
+		let opened = 0;
+		let peeked = 0;
+		const row = mount({
+			onLongPress: () => longPressed++,
+			onOpen: () => opened++,
+			onPeek: () => peeked++,
+		});
+
+		pointerDown(row);
+		pointerMove(row, 10, 50); // dy=40, past SWIPE_AXIS_THRESHOLD(10), vertical wins
+		pointerUp(row);
+		await wait(THRESHOLD_WAIT);
+
+		assert.equal(longPressed, 0);
+		assert.equal(opened, 0);
+		assert.equal(peeked, 0, "vertical scroll must not commit or reset a peek");
+	});
+
+	it("a small move within the axis threshold still allows the long press to fire", async () => {
+		let longPressed = 0;
+		const row = mount({
+			onLongPress: () => longPressed++,
+			onOpen: () => undefined,
+			onPeek: () => undefined,
+		});
+
+		pointerDown(row);
+		pointerMove(row, 13, 12); // dx=3, dy=2 — within SWIPE_AXIS_THRESHOLD(10)
+		await wait(THRESHOLD_WAIT);
+
+		assert.equal(longPressed, 1);
+	});
+});

package/src/components/swipeable-row.tsx

@@ -1,6 +1,9 @@
+import type { DOMAttributes } from "@react-types/shared";
 import { Check, Mail, MailOpen, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
+import { mergeProps } from "react-aria";
 import { cn } from "../lib/cn.js";
+import { useLongPress } from "../lib/use-long-press.js";
 import type { ThreadRowData } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
 import {
@@ -17,6 +20,19 @@ const SWIPE_ACTION_WIDTH = 72;
  *  this a press is still a tap / long-press and vertical scroll wins. */
 const SWIPE_AXIS_THRESHOLD = 10;
 
+/**
+ * Tags a pointercancel dispatched by this component's own axis arbitration
+ * (see `cancelLongPress` below) so `onPointerCancel` can tell it apart from
+ * one react-aria dispatches itself when its own long press fires, or a
+ * genuine browser-triggered cancel. Both of those arrive with no axis
+ * claimed yet and must reset gesture state silently; a tagged one arrives
+ * *because* `onPointerMove` just claimed an axis and is already handling
+ * gesture state inline, so `onPointerCancel` must ignore it — otherwise it
+ * re-reads a gesture with no axis claimed and mistakes the abort for a tap,
+ * firing a spurious onOpen/onToggleCheck.
+ */
+const AXIS_CANCEL = "__swipeableRowAxisCancel";
+
 function peekOffset(peek: SwipePeek): number {
 	if (peek === "leading") return SWIPE_ACTION_WIDTH;
 	if (peek === "trailing") return -SWIPE_ACTION_WIDTH;
@@ -34,19 +50,17 @@ export function commitPeek(offset: number): SwipePeek {
 
 /**
  * Props the row's interactive (open) element must receive — the swipe gesture
- * handlers, the transform/transition style, the row body, plus an onClick that
- * suppresses navigation when the row is peeked. A consumer passes `linkComponent`
- * to render these on a real anchor (e.g. a router Link) so the open affordance is
- * a true `<a href>` — keeping open-in-new-tab, middle-click, deep-link and a11y
- * — instead of the default JS-only `<button onOpen>`.
+ * handlers (merged with react-aria's long-press props: pointer handlers,
+ * `aria-describedby`, and friends), the transform/transition style, the row
+ * body, plus an onClick that suppresses navigation when the row is peeked. A
+ * consumer passes `linkComponent` to render these on a real anchor (e.g. a
+ * router Link) so the open affordance is a true `<a href>` — keeping
+ * open-in-new-tab, middle-click, deep-link and a11y — instead of the default
+ * JS-only `<button onOpen>`.
  */
-export interface SwipeableRowOpenProps {
+export interface SwipeableRowOpenProps extends DOMAttributes {
 	className: string;
 	style: React.CSSProperties;
-	onPointerDown: (e: React.PointerEvent) => void;
-	onPointerMove: (e: React.PointerEvent) => void;
-	onPointerUp: () => void;
-	onPointerCancel: () => void;
 	/** Wire to the anchor's onClick. When the row is peeked it calls
 	 *  preventDefault so a tap closes the peek instead of navigating; otherwise
 	 *  it is a no-op and the anchor's native navigation proceeds. */
@@ -86,9 +100,6 @@ export function SwipeableRow({
 	 *  deep-link/middle-click work); onOpen is not called for the tap. */
 	linkComponent?: (props: SwipeableRowOpenProps) => React.ReactNode;
 }) {
-	const pressTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
-		undefined,
-	);
 	const gesture = useRef<{
 		startX: number;
 		startY: number;
@@ -97,7 +108,23 @@ export function SwipeableRow({
 	} | null>(null);
 	const [dragX, setDragX] = useState<number | null>(null);
 
-	const cancelLongPress = () => clearTimeout(pressTimer.current);
+	// Long-press timing/threshold and contextmenu/text-selection suppression
+	// are owned by react-aria; this component only arbitrates the swipe axis.
+	const { longPressProps } = useLongPress({
+		onLongPress,
+		isDisabled: selectionMode,
+		accessibilityDescription: "Select message",
+	});
+
+	// react-aria's usePress has no imperative "cancel" — a synthetic
+	// pointercancel is the mechanism it uses itself to abort other pointer
+	// consumers when its own long press fires. Reused here in reverse, tagged
+	// so onPointerCancel below can recognize it as ours (see AXIS_CANCEL).
+	const cancelLongPress = (e: React.PointerEvent) => {
+		const event = new PointerEvent("pointercancel", { bubbles: true });
+		(event as PointerEvent & Record<string, boolean>)[AXIS_CANCEL] = true;
+		e.currentTarget.dispatchEvent(event);
+	};
 
 	const onPointerDown = (e: React.PointerEvent) => {
 		gesture.current = {
@@ -106,13 +133,6 @@ export function SwipeableRow({
 			axis: "none",
 			moved: false,
 		};
-		// selection mode is tap-to-toggle only — no long-press, no swipe drag
-		if (selectionMode) return;
-		pressTimer.current = setTimeout(() => {
-			gesture.current = null;
-			setDragX(null);
-			onLongPress();
-		}, 500);
 	};
 
 	const onPointerMove = (e: React.PointerEvent) => {
@@ -125,14 +145,14 @@ export function SwipeableRow({
 			if (Math.abs(dy) > SWIPE_AXIS_THRESHOLD && Math.abs(dy) > Math.abs(dx)) {
 				// vertical scroll wins: abandon the swipe + long-press, let the list scroll
 				g.axis = "vertical";
-				cancelLongPress();
+				cancelLongPress(e);
 				gesture.current = null;
 				return;
 			}
 			if (Math.abs(dx) > SWIPE_AXIS_THRESHOLD) {
 				g.axis = "horizontal";
 				g.moved = true;
-				cancelLongPress();
+				cancelLongPress(e);
 				e.currentTarget.setPointerCapture(e.pointerId);
 			}
 		}
@@ -146,7 +166,6 @@ export function SwipeableRow({
 	};
 
 	const onPointerUp = () => {
-		cancelLongPress();
 		const g = gesture.current;
 		gesture.current = null;
 		const offset = dragX;
@@ -172,6 +191,28 @@ export function SwipeableRow({
 		onOpen();
 	};
 
+	// A genuine cancel — react-aria's own dispatch when its long press fires,
+	// or a real browser-triggered interruption — always resets silently, never
+	// as a tap-to-open/toggle/peek-commit. An axis-claim cancel (tagged, see
+	// AXIS_CANCEL) is a no-op here: onPointerMove already handled that gesture
+	// inline, either continuing to track it (horizontal) or nulling it itself
+	// (vertical) — see the comment there.
+	const onPointerCancel = (e: React.PointerEvent) => {
+		const tagged = (e.nativeEvent as unknown as Record<string, boolean>)[
+			AXIS_CANCEL
+		];
+		if (tagged) return;
+		gesture.current = null;
+		setDragX(null);
+	};
+
+	const gestureProps = mergeProps(longPressProps, {
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel,
+	});
+
 	// A tap on a peeked anchor must close the peek, not navigate; suppress the
 	// native click in that case. onPointerUp already snapped it closed.
 	const onOpenClick = (e: { preventDefault: () => void }) => {
@@ -185,6 +226,12 @@ export function SwipeableRow({
 	const interactiveClassName = cn(
 		// opaque bg so the row occludes the action behind it until peeked
 		"relative touch-pan-y bg-surface",
+		// This row's long press enters selection mode; without these, Android
+		// Chrome opens the link context menu / starts text selection and iOS
+		// Safari fires the callout, racing the app's handler. react-aria
+		// suppresses contextmenu/text-selection but not iOS's callout — it
+		// fires no cancelable event, so CSS is the only lever.
+		"select-none [-webkit-touch-callout:none]",
 		comfortableRowClass({ active: checked || active }),
 	);
 	const interactiveStyle: React.CSSProperties = {
@@ -278,12 +325,9 @@ export function SwipeableRow({
 			    keep the button so a checkbox tap can't open a thread. */}
 			{linkComponent && !selectionMode ? (
 				linkComponent({
+					...gestureProps,
 					className: interactiveClassName,
 					style: interactiveStyle,
-					onPointerDown,
-					onPointerMove,
-					onPointerUp,
-					onPointerCancel: onPointerUp,
 					onOpenClick,
 					children: body,
 				})
@@ -293,10 +337,7 @@ export function SwipeableRow({
 					type="button"
 					role={selectionMode ? "checkbox" : undefined}
 					aria-checked={selectionMode ? checked : undefined}
-					onPointerDown={onPointerDown}
-					onPointerMove={onPointerMove}
-					onPointerUp={onPointerUp}
-					onPointerCancel={onPointerUp}
+					{...gestureProps}
 					className={interactiveClassName}
 					style={interactiveStyle}
 				>

package/src/index.ts

@@ -1,3 +1,8 @@
+// Re-exported so a consumer can compose useLongPress's longPressProps with its
+// own DOM props (its pressProps include an onClick react-aria uses for its
+// own bookkeeping; a plain object spread silently drops one side's handler
+// instead of chaining them) without importing react-aria directly.
+export { mergeProps } from "react-aria";
 export {
 	AddressDisplay,
 	type AddressDisplayProps,
@@ -446,3 +451,8 @@ export {
 	sanitizeInlineStyle,
 	sanitizeStyleElementCss,
 } from "./lib/email-sanitizer.js";
+export {
+	type UseLongPressOptions,
+	type UseLongPressResult,
+	useLongPress,
+} from "./lib/use-long-press.js";

package/src/lib/use-long-press.test.ts

@@ -0,0 +1,220 @@
+/**
+ * use-long-press — exercises the real hook (react-aria's `useLongPress`)
+ * against a jsdom-mounted element, not a reimplementation of its logic. The
+ * hook this replaces (`packages/web-client/src/hooks/useLongPress.ts`) had a
+ * decoy test that reimplemented the timer/threshold logic locally and so
+ * gave zero regression coverage on the actual hook; these tests dispatch
+ * real PointerEvents at a real mounted node and assert on the callback and
+ * the DOM side effects react-aria owns (contextmenu suppression).
+ *
+ * jsdom is a devDependency scoped to this one test — react-aria's
+ * pointerdown → threshold timer → onLongPress path, its global
+ * pointerup/pointercancel listeners, and its contextmenu suppression all
+ * need a real `document`/`window`/`PointerEvent`, which `renderToString`
+ * (the pattern used elsewhere in this repo for presentational components)
+ * cannot exercise.
+ */
+
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { useLongPress } from "./use-long-press.js";
+
+const THRESHOLD = 40;
+
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+
+function Row(props: {
+	onLongPress: () => void;
+	isDisabled?: boolean;
+	accessibilityDescription?: string;
+}) {
+	const { longPressProps } = useLongPress({
+		onLongPress: props.onLongPress,
+		isDisabled: props.isDisabled,
+		delayMs: THRESHOLD,
+		accessibilityDescription: props.accessibilityDescription,
+	});
+	return createElement(
+		"a",
+		{ id: "row", href: "/thread/1", ...longPressProps },
+		"row",
+	);
+}
+
+function mount(props: {
+	onLongPress: () => void;
+	isDisabled?: boolean;
+	accessibilityDescription?: string;
+}) {
+	act(() => {
+		root.render(createElement(Row, props));
+	});
+	const row = dom.window.document.getElementById("row");
+	assert.ok(row, "row did not mount");
+	return row;
+}
+
+function pointerDown(row: Element) {
+	row.dispatchEvent(
+		new dom.window.PointerEvent("pointerdown", {
+			bubbles: true,
+			pointerType: "touch",
+			pointerId: 1,
+			clientX: 10,
+			clientY: 10,
+		}),
+	);
+}
+
+function pointerUp() {
+	dom.window.document.dispatchEvent(
+		new dom.window.PointerEvent("pointerup", {
+			bubbles: true,
+			pointerType: "touch",
+			pointerId: 1,
+			clientX: 10,
+			clientY: 10,
+		}),
+	);
+}
+
+function pointerCancel(row: Element) {
+	row.dispatchEvent(
+		new dom.window.PointerEvent("pointercancel", { bubbles: true }),
+	);
+}
+
+function wait(ms: number) {
+	return act(() => new Promise((resolve) => setTimeout(resolve, ms)));
+}
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.SVGElement = dom.window.SVGElement;
+	globalThis.PointerEvent = dom.window.PointerEvent;
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+after(() => {
+	dom.window.close();
+});
+
+beforeEach(() => {
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+
+afterEach(() => {
+	act(() => {
+		root.unmount();
+	});
+});
+
+describe("useLongPress (react-aria wrapper)", () => {
+	it("fires onLongPress after the threshold with no interruption", async () => {
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++ });
+
+		pointerDown(row);
+		await wait(THRESHOLD + 40);
+
+		assert.equal(fired, 1);
+	});
+
+	it("does not fire when released before the threshold", async () => {
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++ });
+
+		pointerDown(row);
+		await wait(THRESHOLD / 2);
+		pointerUp();
+		await wait(THRESHOLD + 40);
+
+		assert.equal(fired, 0);
+	});
+
+	it("does not fire when cancelled via a pointercancel before the threshold", async () => {
+		// This is the mechanism SwipeableRow's axis arbitration relies on: it
+		// dispatches a synthetic pointercancel to abort a pending long press
+		// once a horizontal or vertical drag claims the gesture.
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++ });
+
+		pointerDown(row);
+		await wait(THRESHOLD / 2);
+		pointerCancel(row);
+		await wait(THRESHOLD + 40);
+
+		assert.equal(fired, 0);
+	});
+
+	it("does not fire while isDisabled", async () => {
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++, isDisabled: true });
+
+		pointerDown(row);
+		await wait(THRESHOLD + 40);
+
+		assert.equal(fired, 0);
+	});
+
+	it("suppresses the native contextmenu that follows a touch long press", async () => {
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++ });
+
+		pointerDown(row);
+		await wait(THRESHOLD + 40);
+		assert.equal(
+			fired,
+			1,
+			"long press must have fired for this to be meaningful",
+		);
+
+		const contextMenuEvent = new dom.window.MouseEvent("contextmenu", {
+			bubbles: true,
+			cancelable: true,
+		});
+		row.dispatchEvent(contextMenuEvent);
+
+		assert.equal(
+			contextMenuEvent.defaultPrevented,
+			true,
+			"react-aria suppresses the link context menu that Android/Chrome fires after a touch long press",
+		);
+	});
+
+	it("does not suppress contextmenu when no long press occurred", async () => {
+		mount({ onLongPress: () => undefined });
+		const row = dom.window.document.getElementById("row") as Element;
+
+		const contextMenuEvent = new dom.window.MouseEvent("contextmenu", {
+			bubbles: true,
+			cancelable: true,
+		});
+		row.dispatchEvent(contextMenuEvent);
+
+		assert.equal(contextMenuEvent.defaultPrevented, false);
+	});
+});

package/src/lib/use-long-press.ts

@@ -0,0 +1,50 @@
+import type { DOMAttributes } from "@react-types/shared";
+import { useLongPress as useAriaLongPress } from "react-aria";
+
+export interface UseLongPressOptions {
+	/** Called once the threshold elapses while the press stays over the target. */
+	onLongPress: () => void;
+	/** Long press is a no-op while true (e.g. a row already in selection mode). */
+	isDisabled?: boolean;
+	/** @default 500 */
+	delayMs?: number;
+	/**
+	 * Announced to assistive technology as the long-press action, e.g.
+	 * "Select message". TalkBack/VoiceOver have no gesture equivalent for a
+	 * timed hold, so this description — not the gesture itself — is what
+	 * makes the action discoverable to a screen reader user.
+	 */
+	accessibilityDescription?: string;
+}
+
+export interface UseLongPressResult {
+	/** Spread onto the pressable element (anchor, button, or row container). */
+	longPressProps: DOMAttributes;
+}
+
+/**
+ * Long-press detection backed by react-aria's `useLongPress`. Owns
+ * `contextmenu` suppression and iOS text-selection suppression, and treats
+ * `<a href>` targets specially so link navigation and middle-click survive
+ * outside the press. It does not, and cannot, suppress iOS's native callout
+ * (share sheet) on an anchor — that still requires
+ * `-webkit-touch-callout: none` in CSS at the call site, since iOS fires no
+ * cancelable event for it.
+ *
+ * Single source of truth for the app's long-press threshold — both mobile
+ * row consumers (the plain row and the swipeable row) go through this hook
+ * so their timing can't drift apart again.
+ */
+export function useLongPress({
+	onLongPress,
+	isDisabled,
+	delayMs = 500,
+	accessibilityDescription,
+}: UseLongPressOptions): UseLongPressResult {
+	return useAriaLongPress({
+		isDisabled,
+		threshold: delayMs,
+		accessibilityDescription,
+		onLongPress,
+	});
+}