@remit/ui 0.0.77 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "type": "module",
   "files": [
     "src"

package/src/components/app-top-bar.stories.tsx

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Bug, SquarePen } from "lucide-react";
 import { useState } from "react";
 import { AppTopBar } from "./app-top-bar.js";
-import { Avatar } from "./avatar.js";
-import { Button } from "./button.js";
-import { type SearchChip, SearchChipInput } from "./search-chip-input.js";
+import { SearchChipInput } from "./search-chip-input.js";
 
+/**
+ * The bar's geometry. What fills it — which actions, in what order, with what
+ * wording — is `ShellTopBar`, which is what the app and the shell prototype
+ * both mount; these stories show only the row the slots sit in.
+ */
 const meta: Meta<typeof AppTopBar> = {
 	title: "Mail/AppTopBar",
 	component: AppTopBar,
@@ -15,169 +17,64 @@ export default meta;
 
 type Story = StoryObj<typeof AppTopBar>;
 
-const Actions = () => (
-	<>
-		<Button
-			variant="ghost"
-			size="sm"
-			icon={<SquarePen className="size-4" />}
-			title="Compose"
-			aria-label="Compose"
-		/>
-		<Button
-			variant="ghost"
-			size="sm"
-			icon={<Bug className="size-4" />}
-			title="Report a bug"
-			aria-label="Report a bug"
-		/>
-		<Avatar name="Matthijs van Henten" email="mvh@example.com" size="sm" />
-	</>
+const Slot = ({ label }: { label: string }) => (
+	<div className="rounded border border-dashed border-line px-2 py-1 text-2xs text-fg-subtle">
+		{label}
+	</div>
 );
 
-const SCOPE: SearchChip = { id: "in:spam", label: "in:spam", tone: "scope" };
-
-/**
- * The placeholders the app pairs with each scope state. Only the unscoped brief
- * may claim to search all mail; a scoped view says so, and a mailbox route
- * whose name has not loaded yet gets neutral wording rather than a placeholder
- * asserting the wrong scope.
- */
-const PLACEHOLDER = {
-	global: "Search all mail",
-	pending: "Search mail",
-	scoped: "Search this folder",
-} as const;
-
-const Bar = ({
-	initialChips = [],
-	placeholder = PLACEHOLDER.global,
-}: {
-	initialChips?: SearchChip[];
-	placeholder?: string;
-}) => {
-	const [chips, setChips] = useState<SearchChip[]>(initialChips);
+const Field = () => {
 	const [value, setValue] = useState("");
 	return (
-		<AppTopBar
-			actions={<Actions />}
-			search={
-				<SearchChipInput
-					size="lg"
-					chips={chips}
-					onRemoveChip={(id) => setChips((cs) => cs.filter((c) => c.id !== id))}
-					value={value}
-					onChange={setValue}
-					onClear={() => {
-						setValue("");
-						setChips([]);
-					}}
-					onClearQuery={() => setValue("")}
-					globalFocusKey={false}
-					placeholder={placeholder}
-				/>
-			}
+		<SearchChipInput
+			size="lg"
+			value={value}
+			onChange={setValue}
+			onClear={() => setValue("")}
+			onClearQuery={() => setValue("")}
+			globalFocusKey={false}
+			placeholder="Search all mail"
 		/>
 	);
 };
 
-/** Over the panes it spans, so the arrangement reads the way it will in the app. */
-const WithPanes = ({ children }: { children: React.ReactNode }) => (
-	<div className="flex h-96 flex-col bg-canvas">
-		{children}
-		<div className="flex min-h-0 flex-1">
-			<div className="w-56 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
-				Nav — under the bar, like every other pane
-			</div>
-			<div className="w-72 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
-				Message list
-			</div>
-			<div className="min-w-0 flex-1 p-3 text-xs text-fg-muted">
-				Message pane — its own toolbar lives here, under the bar
-			</div>
-		</div>
-	</div>
-);
-
-/**
- * The daily brief's state: search unscoped, nothing narrowing it. No chip, and
- * the only placeholder allowed to claim it searches all mail — which it now
- * genuinely does, across every folder of every account.
- */
-export const Unscoped: Story = {
-	render: () => <Bar />,
-};
-
-/**
- * A narrowing scope in the bar, tinted to mark it as the view the user is in
- * rather than a filter they typed. Removing it widens the search again — a
- * navigation back to the brief, not an edit of the text, because the chip
- * mirrors the route.
- *
- * The placeholder narrows with the chip. A scoped bar reading "Search all mail"
- * is a state the app never produces.
- */
-export const Scoped: Story = {
-	render: () => <Bar initialChips={[SCOPE]} placeholder={PLACEHOLDER.scoped} />,
-};
-
-/**
- * The third scope state: a mailbox route whose name has not resolved yet. The
- * list underneath is already narrowed, so the bar must not claim to search
- * everything — but a chip reading a raw uuid is worse than no chip, so it shows
- * none and falls back to neutral wording until the name arrives.
- */
-export const ScopePending: Story = {
-	render: () => <Bar placeholder={PLACEHOLDER.pending} />,
-};
-
-/**
- * The virtual collections scope the bar too, and their chips read as whatever
- * describes the collection. Flagged is a marker on the mail rather than a
- * place, so it chips `is:starred`; the outbox is a place mail sits in and keeps
- * the `in:` form.
- */
-export const ScopedToFlagged: Story = {
+/** Leading · search · actions. The field is the only slot that grows. */
+export const Slots: Story = {
 	render: () => (
-		<Bar
-			initialChips={[{ id: "is:starred", label: "is:starred", tone: "scope" }]}
-			placeholder={PLACEHOLDER.scoped}
+		<AppTopBar
+			leading={<Slot label="leading" />}
+			search={<Field />}
+			actions={<Slot label="actions" />}
 		/>
 	),
 };
 
-export const ScopedToOutbox: Story = {
-	render: () => (
-		<Bar
-			initialChips={[{ id: "in:outbox", label: "in:outbox", tone: "scope" }]}
-			placeholder={PLACEHOLDER.scoped}
-		/>
-	),
+/** With nothing but the field, the bar is still the page's one search surface. */
+export const SearchOnly: Story = {
+	render: () => <AppTopBar search={<Field />} />,
 };
 
-/** The arrangement: one bar across the top of the shell, over the nav, the list
- *  and the message pane alike. */
+/** One row across the top of the shell, over the nav, the list and the message
+ *  pane alike. */
 export const OverTheLayout: Story = {
 	render: () => (
-		<WithPanes>
-			<Bar initialChips={[SCOPE]} placeholder={PLACEHOLDER.scoped} />
-		</WithPanes>
-	),
-};
-
-export const SearchOnly: Story = {
-	render: () => (
-		<AppTopBar
-			search={
-				<SearchChipInput
-					size="lg"
-					value=""
-					onChange={() => undefined}
-					onClear={() => undefined}
-					globalFocusKey={false}
-					placeholder="Search all mail"
-				/>
-			}
-		/>
+		<div className="flex h-96 flex-col bg-canvas">
+			<AppTopBar
+				leading={<Slot label="leading" />}
+				search={<Field />}
+				actions={<Slot label="actions" />}
+			/>
+			<div className="flex min-h-0 flex-1">
+				<div className="w-56 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
+					Nav — under the bar, like every other pane
+				</div>
+				<div className="w-72 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
+					Message list
+				</div>
+				<div className="min-w-0 flex-1 p-3 text-xs text-fg-muted">
+					Message pane — its own toolbar lives here, under the bar
+				</div>
+			</div>
+		</div>
 	),
 };

package/src/components/shell-top-bar.render.test.ts

@@ -0,0 +1,95 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	ShellTopBar,
+	type ShellTopBarProps,
+	type ShellTopBarSearch,
+} from "./shell-top-bar.js";
+
+const search = (
+	overrides: Partial<ShellTopBarSearch> = {},
+): ShellTopBarSearch => ({
+	value: "",
+	scope: "global",
+	onChange: () => undefined,
+	onClear: () => undefined,
+	onClearQuery: () => undefined,
+	...overrides,
+});
+
+const render = (overrides: Partial<ShellTopBarProps> = {}): string =>
+	renderToString(
+		createElement(ShellTopBar, {
+			search: search(),
+			onCompose: () => undefined,
+			onReportBug: () => undefined,
+			onOpenSettings: () => undefined,
+			account: createElement("div", { "data-testid": "account" }, "account"),
+			...overrides,
+		}),
+	);
+
+describe("ShellTopBar", () => {
+	it("carries compose, bug report, settings and the account, in that order", () => {
+		const html = render();
+		const compose = html.indexOf('aria-label="Compose"');
+		const bug = html.indexOf('aria-label="Report a bug"');
+		const settings = html.indexOf('aria-label="Settings"');
+		const account = html.indexOf('data-testid="account"');
+		assert.ok(compose > -1 && bug > -1 && settings > -1 && account > -1);
+		assert.ok(
+			compose < bug && bug < settings && settings < account,
+			"actions render in reading order",
+		);
+	});
+
+	it("carries exactly the four actions and nothing else", () => {
+		const labels = [...render().matchAll(/aria-label="([^"]+)"/g)].map(
+			(match) => match[1],
+		);
+		assert.deepEqual(labels, [
+			"Search mail",
+			"Compose",
+			"Report a bug",
+			"Settings",
+		]);
+	});
+
+	it("words the compose tooltip around the host's bare key", () => {
+		assert.match(render({ composeShortcut: "c" }), /title="Compose \(c\)"/);
+	});
+
+	it("names the action alone when the host binds no key to it", () => {
+		assert.match(render(), /title="Compose"/);
+	});
+
+	it("only claims to search all mail when nothing narrows it", () => {
+		assert.match(render(), /placeholder="Search all mail"/);
+	});
+
+	it("says which folder a scoped view searches", () => {
+		assert.match(
+			render({ search: search({ scope: "scoped" }) }),
+			/placeholder="Search this folder"/,
+		);
+	});
+
+	it("carries the route's scope as a chip and drops the claim to search all mail", () => {
+		const html = render({
+			search: search({
+				scope: "scoped",
+				chips: [{ id: "in:spam", label: "in:spam", tone: "scope" }],
+			}),
+		});
+		assert.match(html, /in:spam/);
+		assert.doesNotMatch(html, /Search all mail/);
+	});
+
+	it("falls back to neutral wording while a mailbox name is still loading", () => {
+		const html = render({ search: search({ scope: "pending" }) });
+		assert.match(html, /placeholder="Search mail"/);
+		assert.doesNotMatch(html, /Search all mail/);
+	});
+});

package/src/components/shell-top-bar.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Avatar } from "./avatar.js";
+import type { SearchChip } from "./search-chip-input.js";
+import { type ShellSearchScope, ShellTopBar } from "./shell-top-bar.js";
+
+const meta: Meta<typeof ShellTopBar> = {
+	title: "Mail/ShellTopBar",
+	component: ShellTopBar,
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof ShellTopBar>;
+
+const SCOPE: SearchChip = { id: "in:spam", label: "in:spam", tone: "scope" };
+
+const Account = () => (
+	<button type="button" aria-label="Account">
+		<Avatar name="Matthijs van Henten" email="mvh@example.com" size="sm" />
+	</button>
+);
+
+const Bar = ({
+	initialChips,
+	scope = "global",
+}: {
+	initialChips?: SearchChip[];
+	scope?: ShellSearchScope;
+}) => {
+	const [chips, setChips] = useState<SearchChip[] | undefined>(initialChips);
+	const [value, setValue] = useState("");
+	return (
+		<ShellTopBar
+			search={{
+				value,
+				scope: chips?.length ? scope : "global",
+				chips,
+				onChange: setValue,
+				onClear: () => {
+					setValue("");
+					setChips(undefined);
+				},
+				onClearQuery: () => setValue(""),
+				onRemoveChip: () => setChips(undefined),
+			}}
+			onCompose={() => undefined}
+			onReportBug={() => undefined}
+			onOpenSettings={() => undefined}
+			composeShortcut="c"
+			account={<Account />}
+		/>
+	);
+};
+
+/**
+ * The daily brief's state: search unscoped, nothing narrowing it, and the only
+ * placeholder allowed to claim it searches all mail — which it genuinely does,
+ * across every folder of every account.
+ */
+export const Unscoped: Story = {
+	render: () => <Bar />,
+};
+
+/**
+ * A narrowing scope in the bar, tinted to mark it as the view the user is in
+ * rather than a filter they typed. Removing it widens the search again — a
+ * navigation back to the brief, not an edit of the text, because the chip
+ * mirrors the route. The placeholder narrows with the chip.
+ */
+export const Scoped: Story = {
+	render: () => <Bar initialChips={[SCOPE]} scope="scoped" />,
+};
+
+/**
+ * A mailbox route whose name has not resolved yet. The list underneath is
+ * already narrowed, so the bar must not claim to search everything — and a chip
+ * reading a raw uuid is worse than no chip, so it shows none and falls back to
+ * neutral wording until the name arrives.
+ */
+export const ScopePending: Story = {
+	render: () => (
+		<ShellTopBar
+			search={{
+				value: "",
+				scope: "pending",
+				onChange: () => undefined,
+				onClear: () => undefined,
+				onClearQuery: () => undefined,
+			}}
+			onCompose={() => undefined}
+			onReportBug={() => undefined}
+			onOpenSettings={() => undefined}
+			composeShortcut="c"
+			account={<Account />}
+		/>
+	),
+};
+
+/**
+ * The virtual collections scope the bar too, and their chips read as whatever
+ * describes the collection. Flagged is a marker on the mail rather than a
+ * place, so it chips `is:starred`.
+ */
+export const ScopedToFlagged: Story = {
+	render: () => (
+		<Bar
+			initialChips={[{ id: "is:starred", label: "is:starred", tone: "scope" }]}
+			scope="scoped"
+		/>
+	),
+};
+
+/** The arrangement: one bar across the top of the shell, over every pane. */
+export const OverTheLayout: Story = {
+	render: () => (
+		<div className="flex h-96 flex-col bg-canvas">
+			<Bar initialChips={[SCOPE]} scope="scoped" />
+			<div className="flex min-h-0 flex-1">
+				<div className="w-56 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
+					Nav — under the bar, like every other pane
+				</div>
+				<div className="w-72 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
+					Message list
+				</div>
+				<div className="min-w-0 flex-1 p-3 text-xs text-fg-muted">
+					Message pane — its own toolbar lives here, under the bar
+				</div>
+			</div>
+		</div>
+	),
+};

package/src/components/shell-top-bar.tsx

@@ -0,0 +1,127 @@
+/**
+ * ShellTopBar — the app's one search surface and its global actions, composed.
+ *
+ * `AppTopBar` is geometry; this is what fills it. It spans the whole layout —
+ * the nav column, the list, the reading pane and the intelligence rail — and
+ * carries the actions that belong to the app rather than to whatever is
+ * currently listed or open: the nav toggle, compose, bug report, settings,
+ * account. Reply, delete, move and the rest stay on the reading pane's own
+ * toolbar, under this bar.
+ *
+ * It is the app's search, not the list's: the list header drops its own field
+ * wherever this bar is mounted, so exactly one search input exists on the page
+ * and the "/" shortcut has one target.
+ *
+ * The field carries one chip: the scope of the view the user navigated into
+ * (`in:spam` in Spam, nothing on the brief). Removing it goes to the brief and
+ * searches everything. Typed `in:`/`from:` terms are not chipped here — they
+ * are already visible as the text the user typed, and chipping them would show
+ * the same term twice in one field; they render as chips over the result
+ * sections instead, where the text is not repeated.
+ *
+ * Which actions, in what order, with what wording lives here and only here, so
+ * the bar the prototype shows is the bar the app shows.
+ */
+import { Bug, Settings, SquarePen } from "lucide-react";
+import type { ReactNode } from "react";
+import { AppTopBar } from "./app-top-bar.js";
+import { Button } from "./button.js";
+import { NavToggleButton } from "./nav-toggle-button.js";
+import { SearchBar } from "./search-bar.js";
+import type { SearchChip } from "./search-chip-input.js";
+
+/**
+ * How narrowed the search already is. Only the unscoped brief may claim to
+ * search all mail; a mailbox route whose name has not loaded yet is already
+ * narrowed but has no chip to show, so it gets neutral wording rather than a
+ * placeholder that asserts the wrong scope.
+ */
+export type ShellSearchScope = "global" | "pending" | "scoped";
+
+const SEARCH_PLACEHOLDER: Record<ShellSearchScope, string> = {
+	global: "Search all mail",
+	pending: "Search mail",
+	scoped: "Search this folder",
+};
+
+export interface ShellTopBarSearch {
+	value: string;
+	scope: ShellSearchScope;
+	chips?: readonly SearchChip[];
+	onChange: (value: string) => void;
+	onClear: () => void;
+	onClearQuery: () => void;
+	onRemoveChip?: (id: string) => void;
+}
+
+export interface ShellTopBarProps {
+	search: ShellTopBarSearch;
+	onCompose: () => void;
+	onReportBug: () => void;
+	onOpenSettings: () => void;
+	/**
+	 * The key that composes, as the host's keymap reads it — `c`, `⌘N`,
+	 * `g then b`. The tooltip's wording around it is this component's.
+	 */
+	composeShortcut?: string;
+	/**
+	 * The account control at the bar's trailing edge. An element rather than
+	 * data: the app hangs a signed-in session and its sign-out off it.
+	 */
+	account: ReactNode;
+}
+
+export function ShellTopBar({
+	search,
+	onCompose,
+	onReportBug,
+	onOpenSettings,
+	composeShortcut,
+	account,
+}: ShellTopBarProps) {
+	return (
+		<AppTopBar
+			leading={<NavToggleButton />}
+			search={
+				<SearchBar
+					value={search.value}
+					onChange={search.onChange}
+					onClear={search.onClear}
+					onClearQuery={search.onClearQuery}
+					chips={search.chips}
+					onRemoveChip={search.onRemoveChip}
+					placeholder={SEARCH_PLACEHOLDER[search.scope]}
+				/>
+			}
+			actions={
+				<>
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<SquarePen className="size-4" />}
+						title={composeShortcut ? `Compose (${composeShortcut})` : "Compose"}
+						aria-label="Compose"
+						onClick={onCompose}
+					/>
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Bug className="size-4" />}
+						title="Report a bug"
+						aria-label="Report a bug"
+						onClick={onReportBug}
+					/>
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Settings className="size-4" />}
+						title="Settings"
+						aria-label="Settings"
+						onClick={onOpenSettings}
+					/>
+					{account}
+				</>
+			}
+		/>
+	);
+}

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

@@ -15,9 +15,7 @@
  * The second: a finger held on glass drifts, and it drifts past the distance
  * at which the drag starts tracking. Cancelling the press there meant a real
  * hold on a phone never entered selection mode — the row followed the drift
- * and snapped back, and nothing else happened. The drift cases below run
- * against the anchor (`linkComponent`) row the mailbox list actually renders,
- * which is also where the native link menu has to stay suppressed.
+ * and snapped back, and nothing else happened.
  */
 
 import assert from "node:assert/strict";
@@ -123,36 +121,6 @@ function mount(handlers: Handlers) {
 	return row;
 }
 
-// The mailbox list renders the open affordance as a real anchor via
-// `linkComponent`; the native long-press menu only bites on an `<a href>`.
-function mountAnchor(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,
-				linkComponent: ({ onOpenClick, children, ...rowProps }) =>
-					createElement(
-						"a",
-						{ ...rowProps, id: "row", href: "/thread/1", onClick: onOpenClick },
-						children,
-					),
-			}),
-		);
-	});
-	const row = dom.window.document.getElementById("row");
-	assert.ok(row, "anchor row did not mount");
-	return row;
-}
-
 function contextMenu(row: Element) {
 	const event = new dom.window.MouseEvent("contextmenu", {
 		bubbles: true,
@@ -309,7 +277,7 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 		let longPressed = 0;
 		let opened = 0;
 		const peeks: SwipePeek[] = [];
-		const row = mountAnchor({
+		const row = mount({
 			onLongPress: () => longPressed++,
 			onOpen: () => opened++,
 			onPeek: (next) => peeks.push(next),
@@ -331,7 +299,7 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 	it("a hold that drifts vertically past the axis threshold still enters selection mode", async () => {
 		let longPressed = 0;
 		const peeks: SwipePeek[] = [];
-		const row = mountAnchor({
+		const row = mount({
 			onLongPress: () => longPressed++,
 			onOpen: () => undefined,
 			onPeek: (next) => peeks.push(next),
@@ -349,10 +317,10 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 
 	it("an aborted short drag opens nothing on release", async () => {
 		// The drag claimed the axis but never reached the escape distance, so the
-		// press was still live. react-aria synthesizes a click for an unresolved
-		// press, which on the anchor row is a navigation.
+		// press was still live, and react-aria synthesizes a click for an
+		// unresolved press.
 		let clicks = 0;
-		const row = mountAnchor({
+		const row = mount({
 			onLongPress: () => undefined,
 			onOpen: () => undefined,
 			onPeek: () => undefined,
@@ -367,10 +335,10 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 		assert.equal(clicks, 0);
 	});
 
-	it("suppresses the native link menu raised over a drifting hold", async () => {
-		// Android Chrome raises the anchor's context menu at its own threshold,
-		// which can land mid-drift and ahead of the app's long press.
-		const row = mountAnchor({
+	it("suppresses the native context menu raised over a drifting hold", async () => {
+		// Android Chrome raises its own menu at its own threshold, which can land
+		// mid-drift and ahead of the app's long press.
+		const row = mount({
 			onLongPress: () => undefined,
 			onOpen: () => undefined,
 			onPeek: () => undefined,

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

@@ -3,11 +3,7 @@ import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
 import type { ThreadRowData } from "./app-shell-types.js";
-import {
-	SwipeableRow,
-	type SwipeableRowOpenProps,
-	type SwipePeek,
-} from "./swipeable-row.js";
+import { SwipeableRow, type SwipePeek } from "./swipeable-row.js";
 
 const thread: ThreadRowData = {
 	id: "thread-1",
@@ -63,45 +59,14 @@ describe("SwipeableRow", () => {
 		assert.match(read, /aria-label="Mark as unread"/);
 	});
 
-	it("renders the open affordance as a button by default", () => {
-		const html = render("none");
-		assert.match(html, /<button[^>]*>/);
-		assert.doesNotMatch(html, /<a /);
-	});
-
-	it("renders the open affordance as a real anchor when linkComponent is given", () => {
-		const html = renderToString(
-			createElement(SwipeableRow, {
-				...baseProps,
-				peek: "none",
-				linkComponent: ({ className, children }: SwipeableRowOpenProps) =>
-					createElement(
-						"a",
-						{ href: "/mail/m1?selectedMessageId=t1", className },
-						children,
-					),
-			}),
-		);
-		assert.match(html, /<a [^>]*href="\/mail\/m1\?selectedMessageId=t1"/);
-		assert.match(html, /Q3 planning notes/);
-	});
-
-	it("keeps the button (not the anchor) in selection mode even with a linkComponent", () => {
-		const html = renderToString(
-			createElement(SwipeableRow, {
-				...baseProps,
-				selectionMode: true,
-				peek: "none",
-				linkComponent: ({ className, children }: SwipeableRowOpenProps) =>
-					createElement(
-						"a",
-						{ href: "/should-not-render", className },
-						children,
-					),
-			}),
-		);
-		assert.doesNotMatch(html, /<a /);
-		assert.match(html, /<button[^>]*>/);
+	it("opens through a button, never an anchor (#116)", () => {
+		for (const html of [
+			render("none"),
+			render("none", { selectionMode: true }),
+		]) {
+			assert.match(html, /<button[^>]*data-message-row/);
+			assert.doesNotMatch(html, /<a /);
+		}
 	});
 
 	it("gives the row checkbox semantics while in selection mode", () => {

package/src/components/swipeable-row.stories.tsx

@@ -69,31 +69,6 @@ export const SelectionChecked: Story = {
 	args: { peek: "none", selectionMode: true, checked: true },
 };
 
-/**
- * The open affordance is rendered as a real `<a href>` via `linkComponent`,
- * so deep-link, middle-click and open-in-new-tab work. Consumers pass their
- * router's Link; here a plain anchor stands in. Inspect the DOM: the row is an
- * anchor, not a button.
- */
-export const AsAnchor: Story = {
-	name: "As anchor (linkComponent)",
-	args: {
-		peek: "none",
-		linkComponent: ({ onOpenClick, children, ...rowProps }) => (
-			<a
-				{...rowProps}
-				href="/mail/inbox?selectedMessageId=thread-1"
-				onClick={(e) => {
-					e.preventDefault();
-					onOpenClick(e);
-				}}
-			>
-				{children}
-			</a>
-		),
-	},
-};
-
 export const Acting: Story = {
 	name: "Acting (interactive)",
 	render: () => {
@@ -130,7 +105,7 @@ export const Acting: Story = {
 	},
 };
 
-function AnchorRow({
+function GestureRow({
 	onLongPress,
 	selectionMode,
 	checked,
@@ -147,23 +122,14 @@ function AnchorRow({
 				selectionMode={selectionMode ?? false}
 				checked={checked ?? false}
 				onLongPress={onLongPress ?? (() => undefined)}
-				linkComponent={({ onOpenClick, children, ...rowProps }) => (
-					<a
-						{...rowProps}
-						href="/mail/inbox?selectedMessageId=thread-1"
-						onClick={(e) => {
-							e.preventDefault();
-							onOpenClick(e);
-						}}
-					>
-						{children}
-					</a>
-				)}
 			/>
 		</PhoneFrame>
 	);
 }
 
+const rowElement = (canvasElement: HTMLElement) =>
+	canvasElement.querySelector<HTMLButtonElement>("button[data-message-row]");
+
 /**
  * The long press is the way into multi-select on touch. Press and hold the row
  * (mouse hold works too — react-aria fires the long press for both) and it
@@ -177,7 +143,7 @@ export const LongPressToSelect: Story = {
 		const [selected, setSelected] = useState(false);
 		return (
 			<div className="space-y-2">
-				<AnchorRow
+				<GestureRow
 					selectionMode={selected}
 					checked={selected}
 					onLongPress={() => setSelected((v) => !v)}
@@ -206,7 +172,7 @@ export const LongPressWithDrift: Story = {
 		const [selected, setSelected] = useState(false);
 		return (
 			<div className="space-y-2">
-				<AnchorRow
+				<GestureRow
 					selectionMode={selected}
 					checked={selected}
 					onLongPress={() => setSelected(true)}
@@ -220,10 +186,10 @@ export const LongPressWithDrift: Story = {
 		);
 	},
 	play: async ({ canvasElement }) => {
-		const anchor = canvasElement.querySelector<HTMLAnchorElement>("a[href]");
-		if (!anchor) return;
+		const row = rowElement(canvasElement);
+		if (!row) return;
 		const touch = (type: string, clientX: number, clientY: number) =>
-			anchor.dispatchEvent(
+			row.dispatchEvent(
 				new PointerEvent(type, {
 					bubbles: true,
 					pointerType: "touch",
@@ -247,30 +213,29 @@ export const LongPressWithDrift: Story = {
 };
 
 /**
- * A touch long press over a link row normally raises the browser's own link
- * context menu ("Open in new tab / Copy link address"), which collides with the
- * long-press-to-select gesture above. `useLongPress` suppresses that menu when
- * the press came from touch or pen, while leaving a mouse right-click's menu
- * alone. The play step drives a synthetic touch press then a contextmenu and
- * writes the outcome below.
+ * A touch long press over a row normally raises the browser's own context menu,
+ * which collides with the long-press-to-select gesture above. `useLongPress`
+ * suppresses that menu when the press came from touch or pen, while leaving a
+ * mouse right-click's menu alone. The play step drives a synthetic touch press
+ * then a contextmenu and writes the outcome below.
  */
 export const TouchContextMenuSuppressed: Story = {
 	name: "Touch context menu suppressed",
 	render: () => (
 		<div className="space-y-2">
-			<AnchorRow />
+			<GestureRow />
 			<p data-testid="context-menu-outcome" className="text-xs text-fg-muted">
 				Waiting for a touch press…
 			</p>
 		</div>
 	),
 	play: async ({ canvasElement }) => {
-		const anchor = canvasElement.querySelector<HTMLAnchorElement>("a[href]");
+		const row = rowElement(canvasElement);
 		const outcome = canvasElement.querySelector<HTMLParagraphElement>(
 			'[data-testid="context-menu-outcome"]',
 		);
-		if (!anchor || !outcome) return;
-		anchor.dispatchEvent(
+		if (!row || !outcome) return;
+		row.dispatchEvent(
 			new PointerEvent("pointerdown", {
 				bubbles: true,
 				pointerType: "touch",
@@ -281,7 +246,7 @@ export const TouchContextMenuSuppressed: Story = {
 			bubbles: true,
 			cancelable: true,
 		});
-		anchor.dispatchEvent(menu);
+		row.dispatchEvent(menu);
 		outcome.textContent = menu.defaultPrevented
 			? "Native context menu suppressed on touch."
 			: "Native context menu allowed.";

package/src/components/swipeable-row.tsx

@@ -1,4 +1,3 @@
-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";
@@ -64,26 +63,6 @@ export function commitPeek(offset: number): SwipePeek {
 	return "none";
 }
 
-/**
- * Props the row's interactive (open) element must receive — the swipe gesture
- * 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 extends DOMAttributes {
-	className: string;
-	style: React.CSSProperties;
-	/** 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. */
-	onOpenClick: (e: { preventDefault: () => void }) => void;
-	children: React.ReactNode;
-}
-
 export function SwipeableRow({
 	thread,
 	selectionMode,
@@ -95,7 +74,6 @@ export function SwipeableRow({
 	onLongPress,
 	onOpen,
 	onAct,
-	linkComponent,
 }: {
 	thread: ThreadRowData;
 	selectionMode: boolean;
@@ -109,12 +87,6 @@ export function SwipeableRow({
 	/** Tapping a revealed action performs it: "leading" = toggle read,
 	 *  "trailing" = delete. */
 	onAct: (side: "leading" | "trailing") => void;
-	/** Render the open affordance as a real anchor (router Link / `<a href>`)
-	 *  instead of the default `<button onOpen>`. Receives the gesture handlers,
-	 *  style, peek-aware onClickCapture and row body to spread onto the anchor.
-	 *  When provided, a plain tap navigates via the anchor's native click (so
-	 *  deep-link/middle-click work); onOpen is not called for the tap. */
-	linkComponent?: (props: SwipeableRowOpenProps) => React.ReactNode;
 }) {
 	const gesture = useRef<{
 		startX: number;
@@ -197,9 +169,8 @@ export function SwipeableRow({
 		// or a real cancel arrived) — those handle themselves, so do nothing.
 		if (!g) return;
 		// A drag that claimed an axis but never escaped left react-aria's press
-		// live, and an unresolved press synthesizes a click on release — which on
-		// the anchor row means navigating. The drag was neither a swipe nor a
-		// tap, so end the press with it.
+		// live, and an unresolved press synthesizes a click on release. The drag
+		// was neither a swipe nor a tap, so end the press with it.
 		if (g.axis !== "none" && !g.escaped) cancelLongPress(e);
 		if (g.axis === "horizontal") {
 			if (offset !== null) onPeek(commitPeek(offset));
@@ -216,8 +187,6 @@ export function SwipeableRow({
 			onPeek("none");
 			return;
 		}
-		// A real anchor handles the open via its native click — don't double-fire.
-		if (linkComponent) return;
 		onOpen();
 	};
 
@@ -242,12 +211,6 @@ export function SwipeableRow({
 		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 }) => {
-		if (peek !== "none") e.preventDefault();
-	};
-
 	const offset = dragX ?? peekOffset(peek);
 	const revealed: SwipePeek =
 		offset > 0 ? "leading" : offset < 0 ? "trailing" : "none";
@@ -255,12 +218,9 @@ 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. useLongPress
-		// suppresses the touch-fired contextmenu; the callout fires no
-		// cancelable event, so CSS is the only lever left for it.
-		"select-none [-webkit-touch-callout:none]",
+		// This row's long press enters selection mode; without this, the hold
+		// starts a native text selection across the row's subject and snippet.
+		"select-none",
 		comfortableRowClass({ active: checked || active }),
 	);
 	const interactiveStyle: React.CSSProperties = {
@@ -297,14 +257,14 @@ export function SwipeableRow({
 			)}
 			{/*
 			 * Tappable, focusable entry point into selection mode — long-press is
-			 * never the only way in. Nested inside the row's own open control
-			 * (button or, via linkComponent, an anchor); mirrors the leading-slot
-			 * toggle already shipped in the web client's row.
+			 * never the only way in. A span, not a <button>: it sits inside the
+			 * row's own open button, which may not nest one. The checkbox role and
+			 * label are what the user and the test suite address, so both stay.
 			 */}
-			{/* biome-ignore lint/a11y/useSemanticElements: a native <input type="checkbox"> can't host the Avatar as its visible content; role="checkbox" on a button mirrors the row-checkbox pattern already shipped in MessageListItem.tsx */}
-			<button
-				type="button"
+			{/* biome-ignore lint/a11y/useSemanticElements: a native <input type="checkbox"> can't host the Avatar as its visible content, and a nested <button> inside the row's own button is invalid HTML */}
+			<span
 				role="checkbox"
+				tabIndex={0}
 				aria-checked={checked}
 				aria-label={`Select message from ${thread.fromName}`}
 				onPointerDown={stopRowGesture}
@@ -315,10 +275,16 @@ export function SwipeableRow({
 					e.stopPropagation();
 					onLongPress();
 				}}
+				onKeyDown={(e) => {
+					if (e.key !== "Enter" && e.key !== " ") return;
+					e.preventDefault();
+					e.stopPropagation();
+					onLongPress();
+				}}
 				className="-m-2 inline-flex size-11 shrink-0 items-center justify-center rounded-full"
 			>
 				<Avatar name={thread.fromName} email={thread.fromEmail} size="sm" />
-			</button>
+			</span>
 			<ComfortableRowTextContent thread={thread} />
 		</>
 	);
@@ -350,29 +316,21 @@ export function SwipeableRow({
 				</button>
 			)}
 
-			{/* In selection mode the row is tap-to-toggle, never a navigation link —
-			    keep the button so a checkbox tap can't open a thread. */}
-			{linkComponent && !selectionMode ? (
-				linkComponent({
-					...gestureProps,
-					className: interactiveClassName,
-					style: interactiveStyle,
-					onOpenClick,
-					children: body,
-				})
-			) : (
-				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: role is only ever "checkbox" (aria-checked's owning role) when selectionMode is true; the ternaries are linked, biome can't see that statically
-				<button
-					type="button"
-					role={selectionMode ? "checkbox" : undefined}
-					aria-checked={selectionMode ? checked : undefined}
-					{...gestureProps}
-					className={interactiveClassName}
-					style={interactiveStyle}
-				>
-					{body}
-				</button>
-			)}
+			{/* `data-message-row` is the mail app's row marker: its key dispatcher
+			    reads it to tell a row apart from a control nested inside one, and
+			    the e2e suite locates rows by it. */}
+			{/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: role is only ever "checkbox" (aria-checked's owning role) when selectionMode is true; the ternaries are linked, biome can't see that statically */}
+			<button
+				type="button"
+				role={selectionMode ? "checkbox" : undefined}
+				aria-checked={selectionMode ? checked : undefined}
+				data-message-row
+				{...gestureProps}
+				className={interactiveClassName}
+				style={interactiveStyle}
+			>
+				{body}
+			</button>
 		</div>
 	);
 }

package/src/index.ts

@@ -582,6 +582,12 @@ export {
 	SettingsShell,
 	type SettingsShellProps,
 } from "./components/settings-screen.js";
+export {
+	type ShellSearchScope,
+	ShellTopBar,
+	type ShellTopBarProps,
+	type ShellTopBarSearch,
+} from "./components/shell-top-bar.js";
 export {
 	SlidePanel,
 	type SlidePanelProps,
@@ -598,7 +604,6 @@ export {
 export {
 	commitPeek,
 	SwipeableRow,
-	type SwipeableRowOpenProps,
 	type SwipePeek,
 } from "./components/swipeable-row.js";
 export { TouchListBody } from "./components/touch-list.js";