@remit/web-client 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/auth/auth-interceptor.test.ts

@@ -1,5 +1,6 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
+import { AuthTokenError } from "./better-auth-config";
 import { type AuthProvider, noneAuthProvider } from "./provider";
 
 type RequestFn = (req: Request) => Promise<Request>;
@@ -47,7 +48,28 @@ describe("installAuthInterceptor", () => {
 		assert.equal(out.headers.get("Authorization"), "Bearer ID-TOKEN-123");
 	});
 
-	test("omits Authorization header when the provider returns no token", async () => {
+	test("abandons the request when the token cannot be minted — never sends it unauthenticated", async () => {
+		const mod = await loadInterceptor();
+		mod.installAuthInterceptor(
+			providerWithToken(async () => {
+				throw new AuthTokenError("Could not mint a session token: 429", 429);
+			}),
+		);
+		const fn = globalThis.__REMIT_CLIENT_MOCKS__?.requestFns[0];
+		assert.ok(fn);
+		const req = new Request("https://api.example.com/thing");
+		await assert.rejects(
+			() => fn(req),
+			(error: unknown) => {
+				assert.ok(error instanceof AuthTokenError);
+				assert.equal(error.status, 429);
+				return true;
+			},
+		);
+		assert.equal(req.headers.get("Authorization"), null);
+	});
+
+	test("omits Authorization header when the deployment presents no identity", async () => {
 		const mod = await loadInterceptor();
 		mod.installAuthInterceptor(providerWithToken(async () => null));
 		const fn = globalThis.__REMIT_CLIENT_MOCKS__?.requestFns[0];

package/src/auth/auth-interceptor.ts

@@ -7,6 +7,11 @@ let installed = false;
  * Attach the composed provider's bearer token to every API request. Called once
  * from `mountApp` with the app's chosen provider, so the token source is the
  * same `AuthProvider` the shell and screens read — no separate seam.
+ *
+ * A provider that cannot produce a token throws, and that throw is left to
+ * propagate: the request is abandoned rather than sent without an Authorization
+ * header. Only the deployments that present no identity at all resolve to null,
+ * and for those an unauthenticated request is the intended one.
  */
 export const installAuthInterceptor = (authProvider: AuthProvider): void => {
 	if (installed) return;

package/src/auth/better-auth-config.ts

@@ -51,11 +51,32 @@ const decodeExp = (token: string): number => {
 	}
 };
 
-const requestToken = async (): Promise<string | null> => {
+/**
+ * A session exists but no bearer token could be produced for it. Distinct from
+ * "signed out": there is nothing to fall back to, so the request that needed the
+ * token must not be sent. Carries the mint's HTTP status where there was one, so
+ * the shared classifier reads it like any other API failure.
+ */
+export class AuthTokenError extends Error {
+	readonly status: number | undefined;
+
+	constructor(message: string, status?: number) {
+		super(message);
+		this.name = "AuthTokenError";
+		this.status = status;
+	}
+}
+
+const requestToken = async (): Promise<string> => {
 	const res = await taggedFetch("/api/auth/token", {
 		credentials: "include",
 	});
-	if (!res.ok) return null;
+	if (!res.ok) {
+		throw new AuthTokenError(
+			`Could not mint a session token: ${res.status} ${res.statusText}`,
+			res.status,
+		);
+	}
 	const body: unknown = await res.json();
 	if (
 		body &&
@@ -65,7 +86,29 @@ const requestToken = async (): Promise<string | null> => {
 	) {
 		return (body as { token: string }).token;
 	}
-	return null;
+	throw new AuthTokenError("The token endpoint returned no token");
+};
+
+let inFlight: Promise<string> | null = null;
+
+/**
+ * One mint at a time. A cold load renders many screens at once and each of their
+ * requests needs the same token; without this every one of them mints its own,
+ * and the burst is large enough to spend the auth tier's rate-limit budget. The
+ * slot is released once the mint settles, so a failure is not replayed to later
+ * callers — they mint again.
+ */
+const mint = (): Promise<string> => {
+	if (inFlight) return inFlight;
+	inFlight = requestToken()
+		.then((token) => {
+			cached = { value: token, expiresAt: decodeExp(token) };
+			return token;
+		})
+		.finally(() => {
+			inFlight = null;
+		});
+	return inFlight;
 };
 
 /**
@@ -73,14 +116,16 @@ const requestToken = async (): Promise<string | null> => {
  * when the cached token is missing or within the skew window of expiry. The API
  * interceptor attaches it as a Bearer token; the backend verifies it against the
  * JWKS.
+ *
+ * Never resolves to null: a failed mint throws. Returning null would put the
+ * request on the wire without an Authorization header, and the backend answers
+ * that with a 401 that names a missing token rather than the mint that failed.
  */
-export const fetchBetterAuthToken = async (): Promise<string | null> => {
+export const fetchBetterAuthToken = async (): Promise<string> => {
 	if (cached && cached.expiresAt - EXPIRY_SKEW_SECONDS > nowSeconds()) {
 		return cached.value;
 	}
-	const token = await requestToken();
-	cached = token ? { value: token, expiresAt: decodeExp(token) } : null;
-	return token;
+	return mint();
 };
 
 export const resetBetterAuthTokenCache = (): void => {

package/src/auth/better-auth-token.test.ts

@@ -0,0 +1,152 @@
+import assert from "node:assert";
+import { afterEach, describe, test } from "node:test";
+import {
+	AuthTokenError,
+	fetchBetterAuthToken,
+	resetBetterAuthTokenCache,
+} from "./better-auth-config";
+
+const base64url = (value: string): string =>
+	Buffer.from(value, "utf8")
+		.toString("base64")
+		.replace(/\+/g, "-")
+		.replace(/\//g, "_")
+		.replace(/=+$/, "");
+
+/** A token shaped like the one better-auth mints, valid for an hour. */
+const jwt = (label: string): string =>
+	`header.${base64url(
+		JSON.stringify({ exp: Math.floor(Date.now() / 1000) + 3600, label }),
+	)}.signature`;
+
+const realFetch = globalThis.fetch;
+
+interface Stub {
+	calls: number;
+	release: () => void;
+}
+
+/** Stand in for the token endpoint, holding every request open until released. */
+const stubTokenEndpoint = (respond: (call: number) => Response): Stub => {
+	let open: () => void = () => {};
+	const gate = new Promise<void>((resolve) => {
+		open = resolve;
+	});
+	const stub: Stub = { calls: 0, release: () => open() };
+	globalThis.fetch = (async (input: RequestInfo | URL) => {
+		assert.match(String(input), /\/api\/auth\/token$/);
+		stub.calls += 1;
+		const call = stub.calls;
+		await gate;
+		return respond(call);
+	}) as typeof fetch;
+	return stub;
+};
+
+const tokenResponse = (token: string): Response =>
+	new Response(JSON.stringify({ token }), {
+		status: 200,
+		headers: { "Content-Type": "application/json" },
+	});
+
+afterEach(() => {
+	globalThis.fetch = realFetch;
+	resetBetterAuthTokenCache();
+});
+
+describe("fetchBetterAuthToken", () => {
+	test("concurrent callers share one mint instead of each firing their own", async () => {
+		const stub = stubTokenEndpoint((call) => tokenResponse(jwt(`t${call}`)));
+
+		const pending = Array.from({ length: 12 }, () => fetchBetterAuthToken());
+		stub.release();
+		const tokens = await Promise.all(pending);
+
+		assert.equal(stub.calls, 1);
+		assert.equal(new Set(tokens).size, 1);
+	});
+
+	test("a token minted once is reused from cache, without a second request", async () => {
+		const stub = stubTokenEndpoint(() => tokenResponse(jwt("cached")));
+		stub.release();
+
+		const first = await fetchBetterAuthToken();
+		const second = await fetchBetterAuthToken();
+
+		assert.equal(stub.calls, 1);
+		assert.equal(second, first);
+	});
+
+	test("a rejected mint throws with its status rather than resolving to null", async () => {
+		const stub = stubTokenEndpoint(
+			() => new Response("", { status: 429, statusText: "Too Many Requests" }),
+		);
+		stub.release();
+
+		await assert.rejects(
+			() => fetchBetterAuthToken(),
+			(error: unknown) => {
+				assert.ok(error instanceof AuthTokenError);
+				assert.equal(error.status, 429);
+				return true;
+			},
+		);
+	});
+
+	test("a response carrying no token throws rather than resolving to null", async () => {
+		const stub = stubTokenEndpoint(
+			() =>
+				new Response(JSON.stringify({}), {
+					status: 200,
+					headers: { "Content-Type": "application/json" },
+				}),
+		);
+		stub.release();
+
+		await assert.rejects(() => fetchBetterAuthToken(), AuthTokenError);
+	});
+
+	test("every caller sharing a failed mint sees the failure", async () => {
+		const stub = stubTokenEndpoint(
+			() => new Response("", { status: 429, statusText: "Too Many Requests" }),
+		);
+
+		const pending = Array.from({ length: 5 }, () =>
+			fetchBetterAuthToken().then(
+				() => "resolved",
+				(error: unknown) =>
+					error instanceof AuthTokenError ? "threw" : "other",
+			),
+		);
+		stub.release();
+		const outcomes = await Promise.all(pending);
+
+		assert.equal(stub.calls, 1);
+		assert.deepEqual(new Set(outcomes), new Set(["threw"]));
+	});
+
+	test("a failed mint is not replayed — the next caller mints again", async () => {
+		const failing = stubTokenEndpoint(() => new Response("", { status: 500 }));
+		failing.release();
+		await assert.rejects(() => fetchBetterAuthToken());
+
+		const succeeding = stubTokenEndpoint(() =>
+			tokenResponse(jwt("after-failure")),
+		);
+		succeeding.release();
+
+		assert.ok(await fetchBetterAuthToken());
+		assert.equal(succeeding.calls, 1);
+	});
+
+	test("a network failure propagates instead of yielding a tokenless request", async () => {
+		globalThis.fetch = (async () => {
+			throw new TypeError("Failed to fetch");
+		}) as typeof fetch;
+
+		await assert.rejects(
+			() => fetchBetterAuthToken(),
+			/could not be completed|Failed to fetch/i,
+		);
+	});
+});

package/src/auth/provider.tsx

@@ -22,9 +22,14 @@ export interface AuthProvider {
 	/** Called once at boot, before render, to initialize the identity SDK. */
 	configure(): void;
 	/**
-	 * The current session's bearer token, or `null` when signed out. The API
-	 * interceptor and the raw content fetch read it through here, so the identity
-	 * SDK stays inside the provider.
+	 * The current session's bearer token. The API interceptor and the raw content
+	 * fetch read it through here, so the identity SDK stays inside the provider.
+	 *
+	 * `null` means this deployment has no identity to present — no identity system
+	 * is composed, or none is configured — and the request is expected to travel
+	 * unauthenticated. It never means the token could not be produced: a provider
+	 * that holds a session and fails to mint a token throws, because a request
+	 * that cannot be authenticated must not be sent.
 	 */
 	getToken(): Promise<string | null>;
 	/** Drop any cached token so the next `getToken` re-mints. */

package/src/components/mail/MessageListItem.tsx

@@ -7,14 +7,15 @@ import {
 	comfortableRowClass,
 	compactRowClass,
 	type Density,
+	mergeProps,
 	type SenderTrustLevel,
 	type ThreadRowData,
+	useLongPress,
 } from "@remit/ui";
 import { useQueryClient } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { Check } from "lucide-react";
 import { type MouseEvent, memo, useCallback } from "react";
-import { useLongPress } from "@/hooks/useLongPress";
 import type { SelectionModifiers } from "@/hooks/useSelection";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
@@ -125,16 +126,27 @@ const MessageListItemComponent = ({
 
 	// Desktop mouse selection semantics. Plain click falls through to the Link's
 	// navigation; shift / cmd / ctrl click is routed to selection and the
-	// navigation is suppressed. On mobile this is a no-op so taps still open.
+	// navigation is suppressed.
 	//
 	// A modified click must preventDefault: the router skips navigation for any
 	// modified click and leaves the anchor's own default in place, which in a
 	// browser means shift-click opens a new window and cmd-click a new tab.
 	// Shift-click also drags a native text selection across the rows it spans,
 	// so drop it — the row highlight is the selection the user asked for.
+	//
+	// On mobile, once selection mode is active (#92) a plain tap toggles the
+	// row instead of opening it — the same tap-to-toggle contract every
+	// reference mail client uses once you're mid-selection. Outside selection
+	// mode a short tap still falls through to the Link's native navigation.
 	const handleRowClick = useCallback(
 		(e: MouseEvent) => {
-			if (!isDesktop) return;
+			if (!isDesktop) {
+				if (!isMultiSelectMode) return;
+				e.preventDefault();
+				e.stopPropagation();
+				onToggleCheck(messageId);
+				return;
+			}
 			const modifiers = {
 				shiftKey: e.shiftKey,
 				metaKey: e.metaKey,
@@ -148,7 +160,7 @@ const MessageListItemComponent = ({
 				window.getSelection()?.removeAllRanges();
 			}
 		},
-		[isDesktop, onRowSelect, messageId],
+		[isDesktop, isMultiSelectMode, onToggleCheck, onRowSelect, messageId],
 	);
 
 	// Shift-click starts a native text selection on mousedown; suppressing it
@@ -165,9 +177,10 @@ const MessageListItemComponent = ({
 		onLongPress?.(messageId);
 	}, [onLongPress, messageId]);
 
-	const longPressHandlers = useLongPress({
+	const { longPressProps } = useLongPress({
 		onLongPress: handleLongPress,
 		delayMs: 500,
+		accessibilityDescription: isChecked ? "Deselect message" : "Select message",
 	});
 
 	// Intent-based prefetch: by the time the user clicks, the body is in
@@ -185,18 +198,25 @@ const MessageListItemComponent = ({
 		onFocusRow?.(messageId);
 	}, [prefetchMessage, onFocusRow, messageId]);
 
-	// Listbox semantics + roving tabindex, shared by both densities.
-	const rowInteractionProps = {
-		"data-message-row": true,
-		"data-message-id": messageId,
-		role: "option" as const,
-		"aria-selected": isChecked,
-		tabIndex: isTabStop ? 0 : -1,
-		onClick: handleRowClick,
-		onMouseDown: handleRowMouseDown,
-		onMouseEnter: prefetchMessage,
-		onFocus: handleRowFocus,
-	};
+	// Listbox semantics + roving tabindex, shared by both densities. Merged
+	// (not spread) with the mobile long-press props: react-aria's pressProps
+	// carries its own onClick for its internal press bookkeeping, and a plain
+	// object spread would silently drop whichever onClick landed second
+	// instead of running both.
+	const rowInteractionProps = mergeProps(
+		{
+			"data-message-row": true,
+			"data-message-id": messageId,
+			role: "option" as const,
+			"aria-selected": isChecked,
+			tabIndex: isTabStop ? 0 : -1,
+			onClick: handleRowClick,
+			onMouseDown: handleRowMouseDown,
+			onMouseEnter: prefetchMessage,
+			onFocus: handleRowFocus,
+		},
+		isDesktop ? {} : longPressProps,
+	);
 
 	const unread = !thread.isRead;
 
@@ -210,12 +230,16 @@ const MessageListItemComponent = ({
 					selectedMessageId: thread.messageId,
 				})}
 				{...rowInteractionProps}
-				{...(!isDesktop && longPressHandlers.handlers)}
 				className={cn(
 					compactRowClass({ active: isSelected, focused: isFocused }),
 					"outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
 					isChecked && "bg-accent-soft",
-					!isDesktop && "min-h-11",
+					// 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.
+					!isDesktop && "min-h-11 select-none [-webkit-touch-callout:none]",
 				)}
 			>
 				<CompactRowBody thread={rowData} />
@@ -235,13 +259,13 @@ const MessageListItemComponent = ({
 				selectedMessageId: thread.messageId,
 			})}
 			{...rowInteractionProps}
-			{...(!isDesktop && longPressHandlers.handlers)}
 			className={cn(
 				"group",
 				comfortableRowClass({ active: isSelected, focused: isFocused }),
 				"outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
 				isChecked && "bg-accent-soft",
-				!isDesktop && "min-h-11",
+				// See the compact-density Link above for why both are required.
+				!isDesktop && "min-h-11 select-none [-webkit-touch-callout:none]",
 			)}
 		>
 			{/* Absolute unread dot — 6px gutter from the left pane hairline */}

package/src/hooks/useVisualViewport.test.ts

@@ -3,8 +3,7 @@ import { beforeEach, describe, test } from "node:test";
 
 /**
  * Unit test for useVisualViewport hook logic.
- * Tests the core behaviour without React — mirrors the pattern used
- * by useLongPress.test.ts in this project.
+ * Tests the core behaviour without React.
  */
 
 const KEYBOARD_THRESHOLD = 150;

package/src/hooks/useLongPress.test.ts

@@ -1,291 +0,0 @@
-import assert from "node:assert";
-import { beforeEach, describe, mock, test } from "node:test";
-
-/**
- * Test harness for useLongPress. Since we can't use React Testing Library,
- * we test the handler logic directly by simulating pointer events and timers.
- */
-
-interface MockPointerEvent {
-	clientX: number;
-	clientY: number;
-}
-
-const createPointerEvent = (x: number, y: number): MockPointerEvent => ({
-	clientX: x,
-	clientY: y,
-});
-
-/**
- * Minimal implementation of useLongPress logic for testing.
- * Matches the hook's behavior without React dependencies.
- */
-class LongPressSimulator {
-	private timer: ReturnType<typeof setTimeout> | null = null;
-	private startPos: { x: number; y: number } | null = null;
-	private readonly MOVEMENT_THRESHOLD = 8;
-
-	constructor(
-		private readonly onLongPress: () => void,
-		private readonly delayMs: number = 500,
-	) {}
-
-	onPointerDown(e: MockPointerEvent): void {
-		this.clearTimer();
-		this.startPos = { x: e.clientX, y: e.clientY };
-		this.timer = setTimeout(() => {
-			this.onLongPress();
-			this.clearTimer();
-		}, this.delayMs);
-	}
-
-	onPointerMove(e: MockPointerEvent): void {
-		if (!this.startPos) return;
-
-		const dx = e.clientX - this.startPos.x;
-		const dy = e.clientY - this.startPos.y;
-		const distance = Math.sqrt(dx * dx + dy * dy);
-
-		if (distance > this.MOVEMENT_THRESHOLD) {
-			this.clearTimer();
-		}
-	}
-
-	onPointerUp(): void {
-		this.clearTimer();
-	}
-
-	onPointerCancel(): void {
-		this.clearTimer();
-	}
-
-	private clearTimer(): void {
-		if (this.timer) {
-			clearTimeout(this.timer);
-			this.timer = null;
-		}
-		this.startPos = null;
-	}
-
-	/** Test helper: check if timer is active */
-	hasActiveTimer(): boolean {
-		return this.timer !== null;
-	}
-
-	/** Test helper: cleanup */
-	cleanup(): void {
-		this.clearTimer();
-	}
-}
-
-describe("useLongPress", () => {
-	beforeEach(() => {
-		// Reset any timers between tests
-		mock.restoreAll();
-	});
-
-	test("fires callback after delay with no movement", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Wait for the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(onLongPress.mock.calls.length, 1);
-		sim.cleanup();
-	});
-
-	test("does not fire if pointer moves more than 8px", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Move 10 pixels (more than threshold of 8)
-		sim.onPointerMove(createPointerEvent(110, 100));
-
-		// Wait beyond the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"callback should not fire after moving > threshold",
-		);
-		sim.cleanup();
-	});
-
-	test("does not fire on early pointerup", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Release before delay completes
-		await new Promise((resolve) => setTimeout(resolve, 100));
-		sim.onPointerUp();
-
-		// Wait beyond the original delay
-		await new Promise((resolve) => setTimeout(resolve, 500));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"callback should not fire after early pointerup",
-		);
-		sim.cleanup();
-	});
-
-	test("does not fire on pointercancel", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Cancel before delay completes
-		await new Promise((resolve) => setTimeout(resolve, 100));
-		sim.onPointerCancel();
-
-		// Wait beyond the original delay
-		await new Promise((resolve) => setTimeout(resolve, 500));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"callback should not fire after pointercancel",
-		);
-		sim.cleanup();
-	});
-
-	test("respects custom delayMs", async () => {
-		const onLongPress = mock.fn();
-		const customDelay = 200;
-		const sim = new LongPressSimulator(onLongPress, customDelay);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Wait less than custom delay
-		await new Promise((resolve) => setTimeout(resolve, 150));
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"should not fire before custom delay",
-		);
-
-		// Wait past custom delay
-		await new Promise((resolve) => setTimeout(resolve, 100));
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"should fire after custom delay",
-		);
-		sim.cleanup();
-	});
-
-	test("allows movement within 8px threshold", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Move 7 pixels (within threshold)
-		sim.onPointerMove(createPointerEvent(107, 100));
-
-		// Wait for the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"callback should fire when movement is within threshold",
-		);
-		sim.cleanup();
-	});
-
-	test("calculates diagonal movement correctly", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Move 6px in both x and y (diagonal distance ~8.48px > 8px threshold)
-		sim.onPointerMove(createPointerEvent(106, 106));
-
-		// Wait beyond the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"callback should not fire when diagonal movement exceeds threshold",
-		);
-		sim.cleanup();
-	});
-
-	test("ignores pointer move before pointer down", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		// Move without pressing down first
-		sim.onPointerMove(createPointerEvent(200, 200));
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Wait for the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"callback should fire - earlier move should be ignored",
-		);
-		sim.cleanup();
-	});
-
-	test("resets on new pointer down", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		// First press
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Wait a bit
-		await new Promise((resolve) => setTimeout(resolve, 200));
-
-		// New press at different location (should reset timer)
-		sim.onPointerDown(createPointerEvent(200, 200));
-
-		// Wait for delay from second press
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		// Should only fire once (from second press)
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"callback should fire once from second press",
-		);
-		sim.cleanup();
-	});
-
-	test("exact 8px movement does not cancel", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Move exactly 8 pixels
-		sim.onPointerMove(createPointerEvent(108, 100));
-
-		// Wait for the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"callback should fire - movement exactly at threshold is allowed",
-		);
-		sim.cleanup();
-	});
-});

package/src/hooks/useLongPress.ts

@@ -1,87 +0,0 @@
-import { useCallback, useRef } from "react";
-
-interface UseLongPressOptions {
-	onLongPress: () => void;
-	delayMs?: number;
-}
-
-interface LongPressHandlers {
-	onPointerDown: (e: PointerEvent | React.PointerEvent) => void;
-	onPointerMove: (e: PointerEvent | React.PointerEvent) => void;
-	onPointerUp: () => void;
-	onPointerCancel: () => void;
-}
-
-const MOVEMENT_THRESHOLD = 8; // pixels
-
-/**
- * Hook for detecting long-press gestures on touch/pointer devices.
- *
- * @param onLongPress - Callback fired after the delay if the pointer hasn't moved
- * @param delayMs - How long to wait before firing (default 500ms)
- *
- * @returns Pointer event handlers to spread onto your element
- *
- * @example
- * const { handlers } = useLongPress({ onLongPress: () => console.log('long press!') });
- * return <div {...handlers}>Press and hold me</div>;
- */
-export const useLongPress = ({
-	onLongPress,
-	delayMs = 500,
-}: UseLongPressOptions): { handlers: LongPressHandlers } => {
-	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-	const startPosRef = useRef<{ x: number; y: number } | null>(null);
-
-	const clearTimer = useCallback(() => {
-		if (timerRef.current) {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		}
-		startPosRef.current = null;
-	}, []);
-
-	const onPointerDown = useCallback(
-		(e: PointerEvent | React.PointerEvent) => {
-			clearTimer();
-			startPosRef.current = { x: e.clientX, y: e.clientY };
-			timerRef.current = setTimeout(() => {
-				onLongPress();
-				clearTimer();
-			}, delayMs);
-		},
-		[onLongPress, delayMs, clearTimer],
-	);
-
-	const onPointerMove = useCallback(
-		(e: PointerEvent | React.PointerEvent) => {
-			if (!startPosRef.current) return;
-
-			const dx = e.clientX - startPosRef.current.x;
-			const dy = e.clientY - startPosRef.current.y;
-			const distance = Math.sqrt(dx * dx + dy * dy);
-
-			if (distance > MOVEMENT_THRESHOLD) {
-				clearTimer();
-			}
-		},
-		[clearTimer],
-	);
-
-	const onPointerUp = useCallback(() => {
-		clearTimer();
-	}, [clearTimer]);
-
-	const onPointerCancel = useCallback(() => {
-		clearTimer();
-	}, [clearTimer]);
-
-	return {
-		handlers: {
-			onPointerDown,
-			onPointerMove,
-			onPointerUp,
-			onPointerCancel,
-		},
-	};
-};