@remit/ui 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "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/mobile-search-view.render.test.ts

@@ -42,8 +42,7 @@ describe("MobileSearchView search scope", () => {
 		const html = renderToString(
 			createElement(MobileSearchView, {
 				...base,
-				scope: { kind: "global" as const },
-				onScopeToSpam: noop,
+				scope: { kind: "global" as const, onScopeToSpam: noop },
 			}),
 		);
 		assert.doesNotMatch(html, /unknown-vendor/);
@@ -56,7 +55,6 @@ describe("MobileSearchView search scope", () => {
 			createElement(MobileSearchView, {
 				...base,
 				scope: { kind: "folder" as const, role: "inbox" as const },
-				onScopeToSpam: noop,
 			}),
 		);
 		assert.doesNotMatch(html, /unknown-vendor/);
@@ -64,15 +62,14 @@ describe("MobileSearchView search scope", () => {
 		assert.doesNotMatch(html, /Archive/);
 	});
 
-	it("passes a caller-supplied spam total through", () => {
+	it("counts the spam it held out, on the phone tier too", () => {
 		const html = renderToString(
 			createElement(MobileSearchView, {
 				...base,
-				scope: { kind: "global" as const },
-				spamMatchCount: 42,
-				onScopeToSpam: noop,
+				scope: { kind: "global" as const, onScopeToSpam: noop },
 			}),
 		);
-		assert.match(html, />42</);
+		assert.match(html, /from Spam/);
+		assert.match(html, /Go to Spam/);
 	});
 });

package/src/components/mobile-search-view.stories.tsx

@@ -156,8 +156,6 @@ function Harness({
 	sections,
 	preset,
 	scope,
-	spamMatchCount,
-	onScopeToSpam,
 }: {
 	initialValue?: string;
 	initialChips?: SearchChip[];
@@ -165,8 +163,6 @@ function Harness({
 	sections?: SearchResultSection[];
 	preset: Preset;
 	scope?: SearchScope;
-	spamMatchCount?: number;
-	onScopeToSpam?: () => void;
 }) {
 	const [value, setValue] = useState(initialValue);
 	const [chips, setChips] = useState<SearchChip[]>(initialChips);
@@ -240,8 +236,6 @@ function Harness({
 			loading={loading}
 			onSelectResult={setOpened}
 			scope={scope}
-			spamMatchCount={spamMatchCount}
-			onScopeToSpam={onScopeToSpam}
 		/>
 	);
 }
@@ -343,8 +337,7 @@ export const GlobalAcrossFolders: Story = {
 		<Harness
 			initialValue="invoice"
 			sections={acrossFoldersSections}
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			preset="brief"
 		/>
 	),
@@ -362,7 +355,6 @@ export const ScopedToInbox: Story = {
 			initialChips={[{ id: "in:inbox", label: "in:inbox" }]}
 			sections={acrossFoldersSections}
 			scope={{ kind: "folder", role: "inbox" }}
-			onScopeToSpam={() => {}}
 			preset="inbox"
 		/>
 	),
@@ -377,8 +369,25 @@ export const GlobalOnlySpamMatches: Story = {
 		<Harness
 			initialValue="invoice"
 			sections={[{ id: "top", label: "Top matches", results: spamMatches }]}
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
+			preset="brief"
+		/>
+	),
+};
+
+/**
+ * The same rows under a starred search. Starring spans folders, so the rows
+ * keep their provenance labels, and the spam among them stays in the list — the
+ * user starred it themselves, so there is nothing to hold back and no offer to
+ * make.
+ */
+export const StarredCollection: Story = {
+	render: () => (
+		<Harness
+			initialValue="invoice"
+			initialChips={[{ id: "is:starred", label: "is:starred" }]}
+			sections={acrossFoldersSections}
+			scope={{ kind: "collection" }}
 			preset="brief"
 		/>
 	),

package/src/components/mobile-search-view.tsx

@@ -46,10 +46,6 @@ export interface MobileSearchViewProps {
 	onRemoveChip?: (id: string) => void;
 	/** What the search covers; see `SearchResultsProps`. Defaults to global. */
 	scope?: SearchScope;
-	/** Total spam matches found; see `SearchResultsProps`. */
-	spamMatchCount?: number;
-	/** Scope the search to Spam; see `SearchResultsProps`. */
-	onScopeToSpam?: () => void;
 }
 
 /**
@@ -81,8 +77,6 @@ export function MobileSearchView({
 	chips,
 	onRemoveChip,
 	scope,
-	spamMatchCount,
-	onScopeToSpam,
 }: MobileSearchViewProps) {
 	const body = (
 		<SearchResults
@@ -94,8 +88,6 @@ export function MobileSearchView({
 			onSelectResult={onSelectResult}
 			tokens={tokens}
 			scope={scope}
-			spamMatchCount={spamMatchCount}
-			onScopeToSpam={onScopeToSpam}
 		/>
 	);
 

package/src/components/search-results.render.test.ts

@@ -114,8 +114,7 @@ describe("SearchResults spam handling", () => {
 			createElement(SearchResults, {
 				value: "invoice",
 				sections: mixed,
-				scope: { kind: "global" },
-				onScopeToSpam: noop,
+				scope: { kind: "global", onScopeToSpam: noop },
 			}),
 		);
 		assert.doesNotMatch(html, /unknown-vendor/);
@@ -130,8 +129,7 @@ describe("SearchResults spam handling", () => {
 				sections: [
 					{ id: "results", label: "Results", results: [archivedResult] },
 				],
-				scope: { kind: "global" },
-				onScopeToSpam: noop,
+				scope: { kind: "global", onScopeToSpam: noop },
 			}),
 		);
 		assert.doesNotMatch(html, /from Spam/);
@@ -142,8 +140,7 @@ describe("SearchResults spam handling", () => {
 			createElement(SearchResults, {
 				value: "invoice",
 				sections: [{ id: "results", label: "Results", results: [spamResult] }],
-				scope: { kind: "global" },
-				onScopeToSpam: noop,
+				scope: { kind: "global", onScopeToSpam: noop },
 			}),
 		);
 		assert.match(html, /No matches for/);
@@ -156,7 +153,6 @@ describe("SearchResults spam handling", () => {
 				value: "invoice",
 				sections: mixed,
 				scope: { kind: "folder", role: "inbox" },
-				onScopeToSpam: noop,
 			}),
 		);
 		assert.doesNotMatch(html, /unknown-vendor/);
@@ -170,7 +166,6 @@ describe("SearchResults spam handling", () => {
 				value: "invoice",
 				sections: mixed,
 				scope: { kind: "folder", role: "junk" },
-				onScopeToSpam: noop,
 			}),
 		);
 		assert.match(html, /unknown-vendor/);
@@ -187,19 +182,6 @@ describe("SearchResults spam handling", () => {
 		);
 		assert.doesNotMatch(html, /from Spam/);
 	});
-
-	it("prefers a caller-supplied total over the rows held out of this page", () => {
-		const html = renderToString(
-			createElement(SearchResults, {
-				value: "invoice",
-				sections: mixed,
-				scope: { kind: "global" },
-				spamMatchCount: 42,
-				onScopeToSpam: noop,
-			}),
-		);
-		assert.match(html, />42</);
-	});
 });
 
 describe("SearchResults provenance labels", () => {
@@ -268,3 +250,86 @@ describe("SearchResults provenance labels", () => {
 		assert.doesNotMatch(html, /Important/);
 	});
 });
+
+describe("SearchResults scoped to a collection", () => {
+	const spamRow: SearchResult = {
+		id: "s1",
+		sender: "billing@unknown-vendor.test",
+		subject: "URGENT invoice attached",
+		snippet: "Wire the amount below.",
+		date: "Feb 11",
+		folder: { role: "junk" },
+	};
+	const archivedRow: SearchResult = {
+		...result,
+		id: "a1",
+		folder: { role: "archive" },
+	};
+	const collectionSections: SearchResultSection[] = [
+		{ id: "results", label: "Results", results: [archivedRow, spamRow] },
+	];
+
+	it("keeps a starred spam match in the list", () => {
+		const html = renderToString(
+			createElement(SearchResults, {
+				value: "invoice",
+				sections: collectionSections,
+				scope: { kind: "collection" },
+			}),
+		);
+		assert.match(html, /billing@unknown-vendor\.test/);
+		assert.doesNotMatch(html, /from Spam/);
+	});
+
+	it("still names the folder each row came from", () => {
+		const html = renderToString(
+			createElement(SearchResults, {
+				value: "invoice",
+				sections: collectionSections,
+				scope: { kind: "collection" },
+			}),
+		);
+		assert.match(html, /Archive/);
+		assert.match(html, /Spam/);
+	});
+
+	it("holds the same spam row out when the search is scoped to a folder", () => {
+		const html = renderToString(
+			createElement(SearchResults, {
+				value: "invoice",
+				sections: collectionSections,
+				scope: { kind: "folder", role: "inbox" },
+			}),
+		);
+		assert.doesNotMatch(html, /billing@unknown-vendor\.test/);
+	});
+});
+
+describe("SearchResults spam count", () => {
+	const spamIn = (id: string): SearchResult => ({
+		id,
+		sender: "spammer",
+		subject: "Offer",
+		snippet: "",
+		date: "",
+		folder: { role: "junk" },
+	});
+
+	it("counts every held-out row, not just one account's", () => {
+		const html = renderToString(
+			createElement(SearchResults, {
+				value: "invoice",
+				sections: [
+					{
+						id: "results",
+						label: "Results",
+						results: [result, spamIn("a1"), spamIn("b1"), spamIn("b2")],
+					},
+				],
+				scope: { kind: "global", onScopeToSpam: noop },
+			}),
+		);
+		assert.match(html, />3</);
+		assert.match(html, /results from Spam/);
+	});
+});

package/src/components/search-results.stories.tsx

@@ -190,8 +190,7 @@ export const GlobalAcrossFolders: Story = {
 	render: () => (
 		<Harness
 			value="invoice"
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			sections={[
 				{ id: "top", label: "Top matches", results: globalTopMatches },
 				{ id: "related", label: "Related", results: related },
@@ -209,8 +208,7 @@ export const GlobalWithoutSpamMatches: Story = {
 	render: () => (
 		<Harness
 			value="invoice"
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			sections={[
 				{
 					id: "top",
@@ -234,8 +232,7 @@ export const GlobalAccountWithoutSpamFolder: Story = {
 	render: () => (
 		<Harness
 			value="invoice"
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			sections={[
 				{ id: "top", label: "Top matches", results: crossFolderMatches },
 			]}
@@ -252,8 +249,7 @@ export const GlobalOnlySpamMatches: Story = {
 	render: () => (
 		<Harness
 			value="invoice"
-			scope={{ kind: "global" }}
-			onScopeToSpam={() => {}}
+			scope={{ kind: "global", onScopeToSpam: () => {} }}
 			sections={[{ id: "top", label: "Top matches", results: spamMatches }]}
 		/>
 	),
@@ -273,7 +269,6 @@ export const ScopedToInbox: Story = {
 		<Harness
 			value="invoice"
 			scope={{ kind: "folder", role: "inbox" }}
-			onScopeToSpam={() => {}}
 			sections={[
 				{ id: "top", label: "Top matches", results: globalTopMatches },
 				{ id: "related", label: "Related", results: related },
@@ -293,7 +288,6 @@ export const ScopedToSpam: Story = {
 		<Harness
 			value="invoice"
 			scope={{ kind: "folder", role: "junk" }}
-			onScopeToSpam={() => {}}
 			sections={[{ id: "top", label: "Top matches", results: spamMatches }]}
 		/>
 	),
@@ -343,3 +337,23 @@ export const WithFilterTokens: Story = {
 		/>
 	),
 };
+
+/**
+ * Starred search (`is:starred` in the bar), given the same rows as the global
+ * story. Starring is not a folder: the rows come from all over, so each keeps
+ * its provenance label, and the two Spam matches stay in the list rather than
+ * being held out. The user starred them; holding their own mail back from them
+ * would be the surprising behaviour, and there is no offer because nothing was
+ * taken away.
+ */
+export const StarredCollection: Story = {
+	render: () => (
+		<Harness
+			value="invoice"
+			scope={{ kind: "collection" }}
+			sections={[
+				{ id: "top", label: "Top matches", results: globalTopMatches },
+			]}
+		/>
+	),
+};

package/src/components/search-results.tsx

@@ -18,12 +18,22 @@ export interface SearchResultSection {
 }
 
 /**
- * What the search currently covers. `global` is the unscoped search the daily
- * brief runs — every account, every folder, no chip in the bar. `folder` is a
- * search the sidebar narrowed to one place, which the bar shows as a chip.
+ * What the search currently covers.
+ *
+ * - `global` — the unscoped search the daily brief runs: every account, every
+ *   folder, no chip in the bar. It is the only scope that holds spam out, so it
+ *   is the only one that carries a way back to it: without `onScopeToSpam` there
+ *   is nowhere to send the user and no offer is made.
+ * - `folder` — narrowed to one place by the sidebar, which the bar shows as a
+ *   chip.
+ * - `collection` — narrowed by something that is not a folder, `is:starred`
+ *   being the one that exists. It still spans folders, so rows carry their
+ *   provenance; and because the narrowing is the user's own (they starred the
+ *   mail), spam is not held back from them.
  */
 export type SearchScope =
-	| { kind: "global" }
+	| { kind: "global"; onScopeToSpam?: () => void }
+	| { kind: "collection" }
 	| { kind: "folder"; role?: FolderRole };
 
 const GLOBAL_SCOPE: SearchScope = { kind: "global" };
@@ -74,17 +84,6 @@ export interface SearchResultsProps {
 	tokens?: { label: string; onRemove: () => void }[];
 	/** What the search covers. Defaults to the unscoped, global search. */
 	scope?: SearchScope;
-	/**
-	 * Total spam matches the search found, for when the app knows more than the
-	 * rows on this page. Defaults to the number of spam rows held out of
-	 * {@link sections}.
-	 */
-	spamMatchCount?: number;
-	/**
-	 * Scope the search to Spam. Without it there is no offer, so an app that has
-	 * nowhere to navigate simply never makes one.
-	 */
-	onScopeToSpam?: () => void;
 }
 
 /**
@@ -177,12 +176,15 @@ function CollapsibleResultSection({
  *
  * - **Global** — spam rows are held out of the sections and offered instead, as
  *   a count with a way into a Spam-scoped search.
- * - **Scoped to anything else** — spam rows are held out and nothing is offered.
- *   A scoped search shows its own scope and no more.
+ * - **Scoped to a folder** — spam rows are held out and nothing is offered. A
+ *   scoped search shows its own scope and no more.
  * - **Scoped to Spam** — ordinary rows, rendered normally, no offer.
+ * - **A collection** (`is:starred`) — ordinary rows, spam included. The user
+ *   picked this mail out by hand; there is nothing to protect them from.
  *
- * Provenance labels follow the same logic: only a global search names the
- * folder each row came from, because a scoped one would repeat itself.
+ * Provenance labels follow whether the search reaches more than one folder: a
+ * global or collection search names the folder each row came from, a
+ * folder-scoped one would only repeat its own chip.
  */
 export function SearchResults({
 	value,
@@ -193,8 +195,6 @@ export function SearchResults({
 	onSelectResult,
 	tokens,
 	scope = GLOBAL_SCOPE,
-	spamMatchCount,
-	onScopeToSpam,
 }: SearchResultsProps) {
 	const hasQuery = value.trim().length > 0;
 
@@ -249,11 +249,17 @@ export function SearchResults({
 		);
 	}
 
-	const spamScoped = isSpamScope(scope);
 	const isGlobal = scope.kind === "global";
+	// Only a folder search holds spam back. Scoped to Spam there is nothing to
+	// hold back, and a collection is the user's own selection of mail rather than
+	// a place, so a starred spam message stays where the user put it.
+	const spamInline = isSpamScope(scope) || scope.kind === "collection";
+	// A search that reaches more than one folder names the folder each row came
+	// from; one confined to a single folder would repeat its own chip.
+	const spansFolders = isGlobal || scope.kind === "collection";
 
 	const partitioned = (sections ?? []).map((section) => {
-		if (spamScoped) return { section, spam: [] as SearchResult[] };
+		if (spamInline) return { section, spam: [] as SearchResult[] };
 		const { kept, spam } = partitionSpamResults(section.results);
 		return { section: { ...section, results: kept }, spam };
 	});
@@ -263,12 +269,15 @@ export function SearchResults({
 		(total, entry) => total + entry.spam.length,
 		0,
 	);
-	const spamCount = spamMatchCount ?? heldOutSpamCount;
-	const spamOffer = isGlobal &&
-		spamCount > 0 &&
-		onScopeToSpam !== undefined && (
-			<SpamResultsOffer count={spamCount} onScopeToSpam={onScopeToSpam} />
-		);
+	const spamOffer =
+		scope.kind === "global" &&
+		heldOutSpamCount > 0 &&
+		scope.onScopeToSpam !== undefined ? (
+			<SpamResultsOffer
+				count={heldOutSpamCount}
+				onScopeToSpam={scope.onScopeToSpam}
+			/>
+		) : undefined;
 
 	const hasResults = visibleSections.some(
 		(section) => section.results.length > 0,
@@ -302,7 +311,7 @@ export function SearchResults({
 						key={section.id}
 						section={section}
 						query={value}
-						showFolder={isGlobal}
+						showFolder={spansFolders}
 						onSelectResult={onSelectResult}
 					/>
 				))}

package/src/components/spam-results-offer.render.test.ts

@@ -13,7 +13,7 @@ describe("SpamResultsOffer", () => {
 		);
 		assert.match(html, />3</);
 		assert.match(html, /results from Spam/);
-		assert.match(html, /View them/);
+		assert.match(html, /Go to Spam/);
 	});
 
 	it("reads in the singular for one match", () => {

package/src/components/spam-results-offer.tsx

@@ -20,6 +20,12 @@ const plural = (n: number): string => (n === 1 ? "result" : "results");
  * the whole point of the folder is that its contents are unwanted until asked
  * for. Taking the offer scopes the search to Spam.
  *
+ * The count is every match held out; the action opens Spam. It deliberately
+ * does not read "view them", because scope is a single mailbox and a user with
+ * several accounts has several Spam folders — the count would then name more
+ * mail than the click delivers. Saying where the button goes is true whatever
+ * the account setup.
+ *
  * Quiet on purpose: this is an offer, not a warning. Presentational — the
  * caller owns what "scope to spam" does.
  */
@@ -44,7 +50,7 @@ export function SpamResultsOffer({
 					onClick={onScopeToSpam}
 					className="shrink-0 text-accent"
 				>
-					View them
+					Go to Spam
 				</Button>
 			</div>
 		</Banner>

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,
+	});
+}