@remit/web-client 0.0.319 → 0.0.321

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.319",
+  "version": "0.0.321",
   "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/components/calendar/CalendarShell.stories.tsx

@@ -115,6 +115,8 @@ function Shell({
 							onChangeView={() => undefined}
 							onToday={() => undefined}
 							onStep={() => undefined}
+							dayHref={(day) => `#${day}`}
+							onZoomDay={() => undefined}
 							onChangeDensity={setDensity}
 							onSelectEvent={() => undefined}
 							onPickSlot={() => undefined}

package/src/components/calendar/CalendarViewPlaceholder.stories.tsx

@@ -5,7 +5,7 @@ import { CalendarViewPlaceholder } from "./CalendarViewPlaceholder";
 /**
  * A zoom the ladder offers and does not draw yet.
  *
- * The route is addressable at all five zooms, so two of them land on this. What
+ * The route is addressable at all five zooms, so one of them lands on this. What
  * it has to do is say which of the two things it is: a view that rendered
  * nothing would be indistinguishable from a month with nothing booked in it,
  * and the reader would plan around an empty screen.
@@ -14,9 +14,9 @@ const meta: Meta<typeof CalendarViewPlaceholder> = {
 	title: "Playground/Shipped/Calendar/Not built yet",
 	component: CalendarViewPlaceholder,
 	parameters: { layout: "fullscreen" },
-	render: (args) => (
+	render: () => (
 		<div className="h-dvh bg-canvas">
-			<CalendarViewPlaceholder {...args} />
+			<CalendarViewPlaceholder />
 		</div>
 	),
 };
@@ -24,9 +24,8 @@ export default meta;
 
 type Story = StoryObj<typeof CalendarViewPlaceholder>;
 
-/** It names the zoom it is waiting on, and the three that work today. */
+/** It names the zoom it is waiting on, and the four that work today. */
 export const Year: Story = {
-	args: { view: "year" },
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		await expect(
@@ -36,19 +35,7 @@ export const Year: Story = {
 		);
 		await expect(canvas.getByText("Not built yet")).toBeVisible();
 		await expect(
-			canvas.getByText(/Week, Day and Agenda work now\./),
+			canvas.getByText(/Month, Week, Day and Agenda work now\./),
 		).toBeVisible();
 	},
 };
-
-export const Month: Story = {
-	args: { view: "month" },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			canvas.getByTestId("calendar-placeholder-month"),
-		).toHaveTextContent(
-			"The month grid arrives with the rest of the zoom ladder.",
-		);
-	},
-};

package/src/components/calendar/CalendarViewPlaceholder.tsx

@@ -1,34 +1,15 @@
-import type { CalendarViewId } from "@remit/ui";
 import { CalendarRange } from "lucide-react";
 
-/**
- * A zoom level that is named but not drawn yet.
- *
- * The ladder is five steps and two of them arrive later, so the route stays
- * addressable and says what it is waiting on. A view that silently rendered
- * nothing would be indistinguishable from a week with nothing in it.
- */
-const WAITING_ON: Record<string, string> = {
-	year: "The year grid arrives with the rest of the zoom ladder.",
-	month: "The month grid arrives with the rest of the zoom ladder.",
-};
-
-export interface CalendarViewPlaceholderProps {
-	view: CalendarViewId;
-}
-
-export function CalendarViewPlaceholder({
-	view,
-}: CalendarViewPlaceholderProps) {
+export function CalendarViewPlaceholder() {
 	return (
 		<div
 			className="flex h-full flex-col items-center justify-center gap-2 bg-surface p-8 text-center"
-			data-testid={`calendar-placeholder-${view}`}
+			data-testid="calendar-placeholder-year"
 		>
 			<CalendarRange className="size-8 text-fg-subtle" aria-hidden="true" />
 			<p className="text-sm font-medium text-fg">Not built yet</p>
 			<p className="max-w-xs text-sm text-fg-muted">
-				{WAITING_ON[view] ?? "This view arrives in a later stage."} Week, Day
+				The year grid arrives with the rest of the zoom ladder. Month, Week, Day
 				and Agenda work now.
 			</p>
 		</div>

package/src/components/calendar/CalendarWorkspace.stories.tsx

@@ -8,6 +8,8 @@ import {
 } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { stepCalendarDate } from "@/lib/calendar-route";
 import { CalendarWaiting } from "./CalendarWaiting";
 import { CalendarWorkspace } from "./CalendarWorkspace";
 
@@ -206,12 +208,13 @@ function Workspace({
 	waiting?: "none" | "some" | "refused";
 }) {
 	const [view, setView] = useState<CalendarViewId>(initialView);
+	const [date, setDate] = useState(DATE);
 	const [density, setDensity] = useState<Density>("comfortable");
 	const [selected, setSelected] = useState("");
 	return (
 		<CalendarWorkspace
 			view={view}
-			date={DATE}
+			date={date}
 			events={events}
 			colorByCalendarId={colorByCalendarId}
 			// The strip loads its own days and is storied on its own; here it
@@ -235,7 +238,14 @@ function Workspace({
 			now={NOW}
 			onChangeView={setView}
 			onToday={() => undefined}
-			onStep={() => undefined}
+			onStep={(direction) =>
+				setDate((current) => stepCalendarDate(current, view, direction))
+			}
+			dayHref={(day) => `/calendar/day/${day}`}
+			onZoomDay={(day) => {
+				setView("day");
+				setDate(day);
+			}}
 			onChangeDensity={setDensity}
 			onSelectEvent={setSelected}
 			onPickSlot={() => undefined}
@@ -263,6 +273,33 @@ export const Week: Story = {};
 
 export const Day: Story = { args: { initialView: "day" } };
 
+export const Month: Story = {
+	args: { initialView: "month" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await waitFor(() =>
+			expect(canvas.getAllByText("Roadmap review").length).toBeGreaterThan(0),
+		);
+		await userEvent.click(canvas.getByRole("button", { name: "Next" }));
+		await waitFor(() =>
+			expect(canvas.getByRole("heading", { level: 2 })).toHaveTextContent(
+				/July 2026/,
+			),
+		);
+		const day = await canvas.findByRole("link", {
+			name: /15 July 2026$/,
+		});
+		await expect(day).toHaveAttribute("href", "/calendar/day/2026-07-15");
+		await userEvent.click(day);
+		await waitFor(() =>
+			expect(canvas.getByRole("radio", { name: "Day" })).toBeChecked(),
+		);
+		await expect(canvas.getByRole("heading", { level: 2 })).toHaveTextContent(
+			/15 July 2026|July 15, 2026/,
+		);
+	},
+};
+
 /** A phone: two rows of thumb-sized controls, and no year on the ladder. */
 export const Phone: Story = {
 	args: { touch: true },
@@ -288,13 +325,11 @@ export const CouldNotLoad: Story = {
 };
 
 /**
- * The three zooms that are named but not drawn yet. Each says what it is
- * waiting on, so the route is addressable without pretending to be finished.
+ * The zoom that is named but not drawn yet. It says what it is waiting on, so
+ * the route is addressable without pretending to be finished.
  */
 export const YearNotBuiltYet: Story = { args: { initialView: "year" } };
 
-export const MonthNotBuiltYet: Story = { args: { initialView: "month" } };
-
 /**
  * Invitations the mail is still asking about, beside the week they would land
  * in. One at a time, as a deck; nothing here is on the calendar until added.

package/src/components/calendar/CalendarWorkspace.tsx

@@ -76,6 +76,8 @@ export interface CalendarWorkspaceProps {
 	onSelectEvent: (eventId: string) => void;
 	onPickSlot: (pick: CalendarSlotPick) => void;
 	onStep: (direction: -1 | 1) => void;
+	dayHref: (date: string) => string;
+	onZoomDay: (date: string) => void;
 	/**
 	 * A phone: the toolbar splits into two rows of thumb-sized controls, because
 	 * one row of them is wider than the screen and pushes the grid off it.
@@ -137,6 +139,8 @@ export function CalendarWorkspace({
 	onSelectEvent,
 	onPickSlot,
 	onStep,
+	dayHref,
+	onZoomDay,
 	touch = false,
 }: CalendarWorkspaceProps) {
 	// Held against the address it was measured for, so leaving a view does not
@@ -237,12 +241,14 @@ export function CalendarWorkspace({
 								now={now}
 								onSelectEvent={onSelectEvent}
 								onPickSlot={onPickSlot}
+								dayHref={dayHref}
+								onZoomDay={onZoomDay}
 								onRangeChange={(measuredTitle) =>
 									setMeasured({ key: addressKey, title: measuredTitle })
 								}
 							/>
 						) : (
-							<CalendarViewPlaceholder view={view} />
+							<CalendarViewPlaceholder />
 						)}
 					</div>
 				)}

package/src/components/calendar/calendar-workspace.render.test.ts

@@ -70,6 +70,8 @@ const workspaceProps = (
 	onChangeView: noop,
 	onToday: noop,
 	onStep: noop,
+	dayHref: (day) => `/calendar/day/${day}`,
+	onZoomDay: noop,
 	onChangeDensity: noop,
 	onSelectEvent: noop,
 	onPickSlot: noop,
@@ -103,8 +105,8 @@ const render = (
 	renderQuietly(createElement(CalendarWorkspace, workspaceProps(view, events)));
 
 describe("the zoom the address names", () => {
-	it("draws the grid for the week and the day", () => {
-		for (const view of ["week", "day"] as const) {
+	it("draws the grid for the month, the week and the day", () => {
+		for (const view of ["month", "week", "day"] as const) {
 			const html = render(view);
 			assert.ok(
 				html.includes("Roadmap review"),
@@ -122,15 +124,10 @@ describe("the zoom the address names", () => {
 	});
 
 	it("says so for a zoom that is not drawn yet", () => {
-		for (const view of ["year", "month"] as const) {
-			const html = render(view);
-			assert.ok(
-				html.includes(`calendar-placeholder-${view}`),
-				`${view} rendered no placeholder`,
-			);
-			assert.ok(html.includes("Not built yet"));
-			assert.ok(html.includes("Week, Day and Agenda work now."));
-		}
+		const html = render("year");
+		assert.ok(html.includes("calendar-placeholder-year"));
+		assert.ok(html.includes("Not built yet"));
+		assert.ok(html.includes("Month, Week, Day and Agenda work now."));
 	});
 });
 
@@ -143,7 +140,7 @@ describe("the toolbar", () => {
 	});
 
 	it("offers back, forward and today at a zoom that draws no grid", () => {
-		const html = render("month");
+		const html = render("year");
 		assert.ok(html.includes('aria-label="Previous"'));
 		assert.ok(html.includes('aria-label="Next"'));
 		assert.ok(html.includes(">Today<"));

package/src/components/mail/ConversationView.tsx

@@ -10,7 +10,6 @@ import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useMarkAsRead } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
-import { useSwipeNavigation } from "@/hooks/useSwipeNavigation";
 import { useToggleStar } from "@/hooks/useToggleStar";
 import { type ReplyMode, useOpenReply, useReplySurface } from "@/routing";
 import { AuthenticityBanner } from "./AuthenticityBanner";
@@ -98,10 +97,6 @@ export const ConversationView = ({
 	listOnScreen = false,
 }: ConversationViewProps) => {
 	const isDesktop = useIsDesktop();
-	const { handlers: swipeHandlers } = useSwipeNavigation({
-		onSwipeLeft: onSwipeNext,
-		onSwipeRight: onSwipePrevious,
-	});
 	const { accountId: mailboxAccountId } = useMailboxAccount(mailboxId);
 	const {
 		data: messagesResponse,
@@ -482,8 +477,7 @@ export const ConversationView = ({
 	// Mobile: the kit MobileReadingPane owns the chrome — a top app bar with
 	// back, the email subject and the intelligence toggle (the host owns the
 	// drawer). Each expanded card owns its per-message action bar; there is no
-	// thread-level reply footer. The phishing warning leads the scroll content;
-	// horizontal swipe between messages is wired through touchHandlers (#693).
+	// thread-level reply footer. The phishing warning leads the scroll content.
 	if (!isDesktop) {
 		return (
 			<MobileReadingPane
@@ -491,7 +485,8 @@ export const ConversationView = ({
 				onBack={onBack ?? (() => undefined)}
 				intelligenceOpen={mobileIntelligenceOpen}
 				onToggleIntelligence={onOpenIntelligence}
-				touchHandlers={swipeHandlers}
+				onSwipeNext={onSwipeNext}
+				onSwipePrevious={onSwipePrevious}
 			>
 				{authenticity?.dkimMismatch && (
 					<AuthenticityBanner

package/src/components/mail/MessageRow.tsx

@@ -188,10 +188,8 @@ const MessageRowComponent = ({
 	}, [prefetchMessage, onFocusRow, messageId]);
 
 	// 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.
+	// spread) with the mobile long-press props, so the gesture's pointer
+	// handlers chain with the row's own instead of replacing them.
 	const interactionProps = mergeProps(
 		{
 			"data-list-row": "",

package/src/components/mail/SwipeableMessageRow.modifier-select.test.ts

@@ -117,6 +117,7 @@ const press = (
 	const event = new PointerEvent("pointerdown", {
 		bubbles: true,
 		cancelable: true,
+		buttons: 1,
 		pointerId: 1,
 		clientX: 10,
 		clientY: 10,

package/src/hooks/calendar/window.test.ts

@@ -47,14 +47,27 @@ describe("the window a view covers", () => {
 		assert.equal(day(window.to), "2026-06-11");
 	});
 
-	it("takes the calendar month, ending on the first of the next", () => {
-		const window = calendarWindow("month", "2026-06-10");
-		assert.equal(day(window.from), "2026-06-01");
-		assert.equal(day(window.to), "2026-07-01");
+	it("takes every week the month touches, so the grid's edge days are read", () => {
+		const window = calendarWindow("month", "2026-07-10");
+		assert.equal(day(window.from), "2026-06-29");
+		assert.equal(day(window.to), "2026-08-03");
+	});
+
+	it("takes exactly the month when it starts on a Monday and ends on a Sunday", () => {
+		const window = calendarWindow("month", "2027-02-14");
+		assert.equal(day(window.from), "2027-02-01");
+		assert.equal(day(window.to), "2027-03-01");
+	});
+
+	it("gives every day of one month the same window", () => {
+		const first = calendarWindow("month", "2026-06-01");
+		for (const date of ["2026-06-15", "2026-06-30"]) {
+			assert.deepEqual(calendarWindow("month", date), first);
+		}
 	});
 
 	it("rolls a December month into the next year", () => {
-		assert.equal(day(calendarWindow("month", "2026-12-31").to), "2027-01-01");
+		assert.equal(day(calendarWindow("month", "2026-12-31").to), "2027-01-04");
 	});
 
 	it("takes the calendar year", () => {

package/src/hooks/calendar/window.ts

@@ -154,7 +154,7 @@ function bounds(view: CalendarViewId, date: string): [string, string] {
 		const first = `${year}-${pad(month)}-01`;
 		const next =
 			month === 12 ? `${year + 1}-01-01` : `${year}-${pad(month + 1)}-01`;
-		return [first, next];
+		return [weekStart(first), addDays(weekStart(addDays(next, -1)), 7)];
 	}
 	if (view === "day") return [date, addDays(date, 1)];
 	const start = weekStart(date);

package/src/lib/calendar-route.test.ts

@@ -85,14 +85,14 @@ describe("canonicalCalendarParams", () => {
 });
 
 describe("calendarViewMountsGrid", () => {
-	it("draws the week and the day", () => {
+	it("draws the month, the week and the day", () => {
+		assert.equal(calendarViewMountsGrid("month"), true);
 		assert.equal(calendarViewMountsGrid("week"), true);
 		assert.equal(calendarViewMountsGrid("day"), true);
 	});
 
-	it("leaves the agenda to the strip and the other two to a later stage", () => {
+	it("leaves the agenda to the strip and the year to a later stage", () => {
 		assert.equal(calendarViewMountsGrid("year"), false);
-		assert.equal(calendarViewMountsGrid("month"), false);
 		assert.equal(calendarViewMountsGrid("agenda"), false);
 	});
 });

package/src/lib/calendar-route.ts

@@ -32,11 +32,11 @@ const calendarViewSchema = z.enum(calendarViews);
 export const DEFAULT_CALENDAR_VIEW: CalendarViewId = "week";
 
 /**
- * The views the grid draws. Year and month are named surfaces that arrive in
- * later stages, and they say so on screen rather than matching a route that
- * renders nothing.
+ * The views the grid draws. The year is a named surface that arrives in a later
+ * stage, and it says so on screen rather than matching a route that renders
+ * nothing.
  */
-const GRID_VIEWS = new Set<CalendarViewId>(["week", "day"]);
+const GRID_VIEWS = new Set<CalendarViewId>(["month", "week", "day"]);
 
 export const calendarViewMountsGrid = (view: CalendarViewId): boolean =>
 	GRID_VIEWS.has(view);

package/src/mocks/story-frame/touch.ts

@@ -5,6 +5,7 @@ const touch = (target: HTMLElement, type: string) => {
 	target.dispatchEvent(
 		new PointerEvent(type, {
 			bubbles: true,
+			buttons: type === "pointerup" ? 0 : 1,
 			pointerType: "touch",
 			pointerId: 1,
 			isPrimary: true,

package/src/routes/calendar/$view.$date.tsx

@@ -93,6 +93,8 @@ function CalendarView({ isPhone }: { isPhone: boolean }) {
 		openEvent,
 		openComposer,
 		changeSuggestionFirst,
+		zoomToDay,
+		dayHref,
 	} = useCalendarNavigation();
 	const openedEvent = useOpenCalendarEvent();
 	const isWriting = useIsWritingEvent();
@@ -147,6 +149,8 @@ function CalendarView({ isPhone }: { isPhone: boolean }) {
 			onChangeView={goToView}
 			onToday={goToToday}
 			onStep={step}
+			dayHref={dayHref}
+			onZoomDay={zoomToDay}
 			onChangeDensity={changeDensity}
 			onSelectEvent={selectEvent}
 			onPickSlot={pickSlot}

package/src/routing/calendar.ts

@@ -1,5 +1,10 @@
 import type { CalendarViewId } from "@remit/ui";
-import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
+import {
+	useNavigate,
+	useParams,
+	useRouter,
+	useSearch,
+} from "@tanstack/react-router";
 import { useCallback, useMemo } from "react";
 import {
 	canonicalCalendarParams,
@@ -101,6 +106,7 @@ export interface CalendarNavigation {
 	setAnchorDate: (date: string) => void;
 	/** Out of the list and into the grid for one day. */
 	zoomToDay: (date: string) => void;
+	dayHref: (date: string) => string;
 	/**
 	 * One occurrence names the series it belongs to and the instance under it;
 	 * a resource that does not recur names only itself.
@@ -121,6 +127,7 @@ export interface CalendarNavigation {
  */
 export function useCalendarNavigation(): CalendarNavigation {
 	const navigate = useNavigate();
+	const router = useRouter();
 	const retainPanels = useRetainOpenPanels();
 	const { view, date } = useCalendarAddress();
 
@@ -136,6 +143,17 @@ export function useCalendarNavigation(): CalendarNavigation {
 		[navigate, retainPanels],
 	);
 
+	const dayHref = useCallback(
+		(next: string) =>
+			router.buildLocation({
+				to: VIEW_ROUTE,
+				params: { view: "day", date: next },
+				search: true,
+				hash: retainPanels,
+			}).href,
+		[router, retainPanels],
+	);
+
 	return useMemo(
 		() => ({
 			goToView: (next: CalendarViewId) => goTo({ view: next, date }),
@@ -150,7 +168,8 @@ export function useCalendarNavigation(): CalendarNavigation {
 					hash: retainPanels,
 					replace: true,
 				}),
-			zoomToDay: (next: string) => goTo({ view: "day", date: next }),
+			zoomToDay: (next: string) => navigate({ href: dayHref(next) }),
+			dayHref,
 			openEvent: (calendarObjectId: string, recurrenceId?: string) =>
 				recurrenceId === undefined || recurrenceId === ""
 					? navigate({
@@ -181,7 +200,7 @@ export function useCalendarNavigation(): CalendarNavigation {
 					hash: retainPanels,
 				}),
 		}),
-		[goTo, navigate, retainPanels, view, date],
+		[goTo, navigate, dayHref, retainPanels, view, date],
 	);
 }
 

package/src/hooks/useSwipeNavigation.test.ts

@@ -1,35 +0,0 @@
-import assert from "node:assert";
-import { describe, test } from "node:test";
-import { resolveSwipe } from "./useSwipeNavigation.js";
-
-const THRESHOLD = 60;
-
-describe("resolveSwipe", () => {
-	test("classifies a left swipe (next) when dragging right→left", () => {
-		assert.strictEqual(resolveSwipe(-80, 0, THRESHOLD).direction, "left");
-	});
-
-	test("classifies a right swipe (previous) when dragging left→right", () => {
-		assert.strictEqual(resolveSwipe(80, 0, THRESHOLD).direction, "right");
-	});
-
-	test("ignores a gesture shorter than the threshold", () => {
-		assert.strictEqual(resolveSwipe(-40, 0, THRESHOLD).direction, null);
-		assert.strictEqual(resolveSwipe(59, 0, THRESHOLD).direction, null);
-	});
-
-	test("ignores a mostly-vertical gesture so it never hijacks scroll", () => {
-		// Long horizontal travel but even longer vertical travel: this is a scroll.
-		assert.strictEqual(resolveSwipe(70, 200, THRESHOLD).direction, null);
-		assert.strictEqual(resolveSwipe(-70, -200, THRESHOLD).direction, null);
-	});
-
-	test("accepts a horizontal swipe with mild vertical drift", () => {
-		assert.strictEqual(resolveSwipe(-100, 20, THRESHOLD).direction, "left");
-	});
-
-	test("rejects a diagonal gesture that is not horizontally dominant", () => {
-		// dx 70, dy 60: not 1.5x dominant, so treated as ambiguous → no swipe.
-		assert.strictEqual(resolveSwipe(70, 60, THRESHOLD).direction, null);
-	});
-});

package/src/hooks/useSwipeNavigation.ts

@@ -1,99 +0,0 @@
-import { useCallback, useRef } from "react";
-
-export type SwipeDirection = "left" | "right";
-
-interface UseSwipeNavigationOptions {
-	/**
-	 * Swipe left (content advances, finger moves right→left): go to the NEXT
-	 * item — the platform convention for paging through content (photos, mail).
-	 */
-	onSwipeLeft?: () => void;
-	/** Swipe right: go to the PREVIOUS item. */
-	onSwipeRight?: () => void;
-	/** Minimum horizontal travel (px) before a swipe registers. */
-	thresholdPx?: number;
-}
-
-interface SwipeHandlers {
-	onPointerDown: (e: React.PointerEvent) => void;
-	onPointerMove: (e: React.PointerEvent) => void;
-	onPointerUp: (e: React.PointerEvent) => void;
-	onPointerCancel: () => void;
-}
-
-const DEFAULT_THRESHOLD = 60;
-/**
- * A gesture only counts as a horizontal swipe when its horizontal travel
- * dominates the vertical. Anything more vertical than this is the user
- * scrolling the message body, and we leave it alone.
- */
-const HORIZONTAL_DOMINANCE = 1.5;
-
-export interface SwipeResolution {
-	direction: SwipeDirection | null;
-}
-
-/**
- * Pure swipe classifier. Returns the swipe direction, or `null` when the
- * gesture is too short or too vertical to count as a horizontal swipe (so it
- * never hijacks vertical scrolling).
- */
-export const resolveSwipe = (
-	dx: number,
-	dy: number,
-	thresholdPx: number,
-): SwipeResolution => {
-	const absX = Math.abs(dx);
-	const absY = Math.abs(dy);
-	if (absX < thresholdPx) return { direction: null };
-	if (absX < absY * HORIZONTAL_DOMINANCE) return { direction: null };
-	return { direction: dx < 0 ? "left" : "right" };
-};
-
-/**
- * Detects horizontal swipe gestures from pointer events and routes them to
- * next/previous callbacks. Only reacts to touch/pen pointers so mouse drags on
- * desktop never trigger navigation. Vertical scroll is left untouched: a
- * gesture must travel mostly sideways to register.
- */
-export const useSwipeNavigation = ({
-	onSwipeLeft,
-	onSwipeRight,
-	thresholdPx = DEFAULT_THRESHOLD,
-}: UseSwipeNavigationOptions): { handlers: SwipeHandlers } => {
-	const startRef = useRef<{ x: number; y: number } | null>(null);
-
-	const onPointerDown = useCallback((e: React.PointerEvent) => {
-		if (e.pointerType === "mouse") {
-			startRef.current = null;
-			return;
-		}
-		startRef.current = { x: e.clientX, y: e.clientY };
-	}, []);
-
-	const onPointerMove = useCallback(() => {}, []);
-
-	const onPointerUp = useCallback(
-		(e: React.PointerEvent) => {
-			const start = startRef.current;
-			startRef.current = null;
-			if (!start) return;
-			const { direction } = resolveSwipe(
-				e.clientX - start.x,
-				e.clientY - start.y,
-				thresholdPx,
-			);
-			if (direction === "left") onSwipeLeft?.();
-			if (direction === "right") onSwipeRight?.();
-		},
-		[onSwipeLeft, onSwipeRight, thresholdPx],
-	);
-
-	const onPointerCancel = useCallback(() => {
-		startRef.current = null;
-	}, []);
-
-	return {
-		handlers: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel },
-	};
-};