@remit/ui 0.0.14 → 0.0.15

package/package.json

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

package/src/components/button.render.test.ts

@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { Button } from "./button.js";
+
+describe("Button", () => {
+	it("defaults to the md size", () => {
+		const html = renderToString(createElement(Button, {}, "Save"));
+		assert.match(html, /h-9/);
+		assert.doesNotMatch(html, /h-11/);
+	});
+
+	it("renders the sm size at 28px", () => {
+		const html = renderToString(createElement(Button, { size: "sm" }, "Save"));
+		assert.match(html, /h-7/);
+	});
+
+	it("renders the touch size at 44px square", () => {
+		const html = renderToString(
+			createElement(Button, {
+				size: "touch",
+				"aria-label": "Delete",
+			}),
+		);
+		assert.match(html, /h-11/);
+		assert.match(html, /w-11/);
+	});
+});

package/src/components/button.tsx

@@ -2,7 +2,7 @@ import type { ButtonHTMLAttributes, ReactNode } from "react";
 import { cn } from "../lib/cn.js";
 
 type Variant = "primary" | "secondary" | "ghost" | "danger";
-type Size = "sm" | "md";
+type Size = "sm" | "md" | "touch";
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	variant?: Variant;
@@ -25,6 +25,10 @@ const variants: Record<Variant, string> = {
 const sizes: Record<Size, string> = {
 	sm: "h-7 px-2.5 text-xs",
 	md: "h-9 px-3.5 text-sm",
+	/** 44px square — the touch-target floor (HIG 44 / Material 48-ish). For an
+	 *  icon-only control; a control carrying a text label should size itself
+	 *  with `md` plus an explicit `min-h-11` instead of stretching to square. */
+	touch: "h-11 w-11 text-sm",
 };
 
 export function Button({

package/src/components/primitives.stories.tsx

@@ -30,6 +30,12 @@ export const Buttons: Story = {
 			<Button variant="primary" disabled>
 				Disabled
 			</Button>
+			<Button
+				variant="ghost"
+				size="touch"
+				icon={<Mail className="size-4" />}
+				aria-label="Touch-sized icon button"
+			/>
 		</div>
 	),
 };

package/src/components/progress-bar.render.test.ts

@@ -0,0 +1,46 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ProgressBar } from "./progress-bar.js";
+
+describe("ProgressBar", () => {
+	it("renders progressbar role with the aria value triad", () => {
+		const html = renderToString(
+			createElement(ProgressBar, { value: 1200, max: 3412 }),
+		);
+		assert.match(html, /role="progressbar"/);
+		assert.match(html, /aria-valuenow="1200"/);
+		assert.match(html, /aria-valuemin="0"/);
+		assert.match(html, /aria-valuemax="3412"/);
+	});
+
+	it("computes the fill width as a percentage of value/max", () => {
+		const html = renderToString(
+			createElement(ProgressBar, { value: 25, max: 100 }),
+		);
+		assert.match(html, /width:25%/);
+	});
+
+	it("clamps the fill at 100% when value exceeds max", () => {
+		const html = renderToString(
+			createElement(ProgressBar, { value: 500, max: 100 }),
+		);
+		assert.match(html, /width:100%/);
+	});
+
+	it("omits the aria value triad when indeterminate", () => {
+		const html = renderToString(
+			createElement(ProgressBar, { value: 0, max: 0, indeterminate: true }),
+		);
+		assert.doesNotMatch(html, /aria-valuenow/);
+		assert.doesNotMatch(html, /aria-valuemax/);
+	});
+
+	it("applies the tone's fill color", () => {
+		const html = renderToString(
+			createElement(ProgressBar, { value: 1, max: 2, tone: "danger" }),
+		);
+		assert.match(html, /bg-danger/);
+	});
+});

package/src/components/progress-bar.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProgressBar } from "./progress-bar.js";
+
+const meta: Meta<typeof ProgressBar> = {
+	title: "Components/ProgressBar",
+	component: ProgressBar,
+	parameters: { layout: "padded" },
+	render: (args) => (
+		<div className="w-80">
+			<ProgressBar {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof ProgressBar>;
+
+export const Started: Story = { args: { value: 340, max: 3412 } };
+
+export const Halfway: Story = { args: { value: 1706, max: 3412 } };
+
+export const NearlyDone: Story = { args: { value: 3072, max: 3412 } };
+
+export const Success: Story = {
+	args: { value: 3412, max: 3412, tone: "success" },
+};
+
+export const Danger: Story = {
+	args: { value: 1200, max: 3412, tone: "danger" },
+};
+
+/** Total is unknown — a paging search count, before the first page resolves. */
+export const Indeterminate: Story = {
+	args: { value: 0, max: 0, indeterminate: true },
+};

package/src/components/progress-bar.tsx

@@ -0,0 +1,62 @@
+import { cn } from "../lib/cn.js";
+import type { BannerTone } from "./banner.js";
+
+export interface ProgressBarProps {
+	/** Units completed so far. Ignored when `indeterminate`. */
+	value: number;
+	/** Total units. Ignored when `indeterminate`. */
+	max: number;
+	tone?: BannerTone;
+	/** Unknown total (or unknown rate) — an animated fill with no fixed end. */
+	indeterminate?: boolean;
+	className?: string;
+}
+
+const tones: Record<BannerTone, string> = {
+	info: "bg-accent-2",
+	success: "bg-positive",
+	warning: "bg-warning",
+	danger: "bg-danger",
+};
+
+/**
+ * Determinate (or indeterminate) progress meter for a bulk operation, e.g. a
+ * multi-thousand-message delete running in batches. A bare running count
+ * gives no sense of rate over a long operation; a filling bar answers "is
+ * this stuck?" pre-attentively.
+ */
+export function ProgressBar({
+	value,
+	max,
+	tone = "info",
+	indeterminate = false,
+	className,
+}: ProgressBarProps) {
+	const pct = indeterminate
+		? 100
+		: max <= 0
+			? 0
+			: Math.min(100, Math.max(0, (value / max) * 100));
+
+	return (
+		<div
+			role="progressbar"
+			aria-valuenow={indeterminate ? undefined : value}
+			aria-valuemin={indeterminate ? undefined : 0}
+			aria-valuemax={indeterminate ? undefined : max}
+			className={cn(
+				"h-1.5 w-full overflow-hidden rounded-full bg-surface-sunken",
+				className,
+			)}
+		>
+			<div
+				className={cn(
+					"h-full rounded-full transition-[width] duration-300 ease-out",
+					tones[tone],
+					indeterminate && "w-1/3 animate-pulse",
+				)}
+				style={indeterminate ? undefined : { width: `${pct}%` }}
+			/>
+		</div>
+	);
+}

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

@@ -9,9 +9,15 @@ const handlers = {
 	onDelete: () => undefined,
 };
 
-/** SSR interleaves `<!-- -->` markers between interpolated text nodes; strip
- *  tags/comments so copy assertions match the rendered words. */
-const text = (html: string) => html.replace(/<[^>]*>/g, "");
+/** SSR interleaves `<!-- -->` markers between interpolated text nodes and
+ *  HTML-encodes entities; strip tags/comments and decode the handful of
+ *  entities copy assertions actually hit, so they match the rendered words. */
+const text = (html: string) =>
+	html
+		.replace(/<[^>]*>/g, "")
+		.replace(/&quot;/g, '"')
+		.replace(/&#x27;/g, "'")
+		.replace(/&amp;/g, "&");
 
 describe("SelectionTopBar", () => {
 	it("renders singular copy for one message", () => {
@@ -28,12 +34,41 @@ describe("SelectionTopBar", () => {
 		assert.match(text(html), /3 messages selected/);
 	});
 
+	it("applies thousands separators to the default count copy", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 3412 }),
+		);
+		assert.match(text(html), /3,412 messages selected/);
+	});
+
 	it("renders cancel and delete controls", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, { ...handlers, count: 2 }),
 		);
 		assert.match(html, /aria-label="Cancel selection"/);
-		assert.match(html, /aria-label="Delete selected messages"/);
+		assert.match(html, /aria-label="Move selected messages to Trash"/);
+	});
+
+	it("renders cancel, mark-read and delete at the 44px touch size", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				onMarkRead: () => undefined,
+			}),
+		);
+		const buttonCount = (html.match(/h-11 w-11/g) ?? []).length;
+		assert.equal(buttonCount, 3, "cancel, mark-read and delete are all 44px");
+	});
+
+	it("spaces delete at least 16px from its preceding sibling", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.match(
+			html,
+			/class="[^"]*\bml-4\b[^"]*"[^>]*aria-label="Move selected messages to Trash"/,
+		);
 	});
 
 	it("renders mark-read control when onMarkRead is provided", () => {
@@ -54,15 +89,27 @@ describe("SelectionTopBar", () => {
 		assert.doesNotMatch(html, /aria-label="Mark as read"/);
 	});
 
-	it("renders moveDisabledHint when provided", () => {
+	it("hides mark-read while busy instead of disabling it", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
 				count: 2,
-				moveDisabledHint: "Cross-account moves are not supported",
+				onMarkRead: () => undefined,
+				isBusy: true,
 			}),
 		);
-		assert.match(html, /Cross-account moves are not supported/);
+		assert.doesNotMatch(html, /aria-label="Mark as read"/);
+	});
+
+	it("hides delete while counting", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 0,
+				isCounting: true,
+			}),
+		);
+		assert.doesNotMatch(html, /aria-label="Move selected messages to Trash"/);
 	});
 
 	it("renders statusLabel in place of the count copy when provided", () => {
@@ -74,7 +121,7 @@ describe("SelectionTopBar", () => {
 			}),
 		);
 		assert.match(text(html), /Deleting 1,200 of 3,412…/);
-		assert.doesNotMatch(text(html), /3412 messages selected/);
+		assert.doesNotMatch(text(html), /3,412 messages selected/);
 	});
 
 	it("falls back to the count copy when statusLabel is absent", () => {
@@ -84,15 +131,14 @@ describe("SelectionTopBar", () => {
 		assert.match(text(html), /2 messages selected/);
 	});
 
-	it("renders failureHint when provided", () => {
+	it("marks the count/status line as a polite live region", () => {
 		const html = renderToString(
-			createElement(SelectionTopBar, {
-				...handlers,
-				count: 2,
-				failureHint: "340 failed to delete — retry?",
-			}),
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.match(
+			html,
+			/role="status"[^>]*aria-live="polite"[^>]*>2 messages selected/,
 		);
-		assert.match(html, /340 failed to delete — retry\?/);
 	});
 
 	it("omits the select-all control when selectAll is absent", () => {
@@ -141,7 +187,111 @@ describe("SelectionTopBar", () => {
 		);
 	});
 
-	it("omitting every new prop renders exactly the pre-existing bar", () => {
+	it("names the loaded scope by default once select-all is checked", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 47,
+				selectAll: {
+					checked: true,
+					indeterminate: false,
+					onChange: () => undefined,
+				},
+			}),
+		);
+		assert.match(text(html), /All 47 loaded selected/);
+		assert.doesNotMatch(text(html), /^47 messages selected/);
+	});
+
+	it("lets statusLabel override the scoped default for an escalated selection", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 3412,
+				selectAll: { checked: true, onChange: () => undefined },
+				statusLabel: 'All 3,412 matching "npm" selected',
+			}),
+		);
+		assert.match(text(html), /All 3,412 matching "npm" selected/);
+	});
+
+	it("gives the select-all checkbox a 44px hit area", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				selectAll: {
+					checked: false,
+					onChange: () => undefined,
+				},
+			}),
+		);
+		assert.match(html, /<label[^>]*size-11[^>]*>/);
+	});
+
+	it("renders the notice text and tone", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				notice: {
+					tone: "warning",
+					text: "Move only works within one account",
+				},
+			}),
+		);
+		assert.match(text(html), /Move only works within one account/);
+		assert.match(html, /role="status"/);
+	});
+
+	it("renders the notice's action as a real button, not prose", () => {
+		const onRetry = () => undefined;
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 340,
+				notice: {
+					tone: "danger",
+					text: "3,072 moved to Trash. 340 couldn't be deleted.",
+					action: { label: "Retry 340", onClick: onRetry },
+				},
+			}),
+		);
+		assert.match(html, /<button[^>]*>Retry 340<\/button>/);
+	});
+
+	it("omits the notice when absent", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		// Only the count/status line carries role="status" — no second one for
+		// an absent notice.
+		const statusRoles = (html.match(/role="status"/g) ?? []).length;
+		assert.equal(statusRoles, 1);
+	});
+
+	it("renders a determinate progress bar when progress is provided", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 3412,
+				statusLabel: "Deleting 1,200 of 3,412…",
+				isBusy: true,
+				progress: { value: 1200, max: 3412 },
+			}),
+		);
+		assert.match(html, /role="progressbar"/);
+		assert.match(html, /aria-valuenow="1200"/);
+	});
+
+	it("omits the progress bar when progress is absent", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.doesNotMatch(html, /role="progressbar"/);
+	});
+
+	it("omitting every new prop renders exactly the pre-existing bar shape", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, { ...handlers, count: 2 }),
 		);
@@ -151,6 +301,6 @@ describe("SelectionTopBar", () => {
 			"no select-all control",
 		);
 		assert.match(text(html), /2 messages selected/, "default count copy");
-		assert.doesNotMatch(html, /role="status"/, "no status line rendered");
+		assert.doesNotMatch(html, /role="progressbar"/, "no progress bar");
 	});
 });

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

@@ -10,8 +10,10 @@ const meta: Meta<typeof SelectionTopBar> = {
 		onMarkRead: () => undefined,
 		onDelete: () => undefined,
 	},
+	// Full viewport width — a fixed w-[390px] wrapper inside a 390px Storybook
+	// viewport clipped the delete button off-screen in every story here.
 	render: (args) => (
-		<div className="w-[390px] rounded-md border border-line">
+		<div className="w-full rounded-md border border-line">
 			<SelectionTopBar {...args} />
 		</div>
 	),
@@ -33,12 +35,14 @@ export const Busy: Story = { args: { count: 2, isBusy: true } };
 export const CrossAccountHint: Story = {
 	args: {
 		count: 4,
-		moveDisabledHint:
-			"Move only works within one account — clear selection or pick messages from a single account",
+		notice: {
+			tone: "warning",
+			text: "Move only works within one account — clear selection or pick messages from a single account",
+		},
 	},
 };
 
-/** Some but not all rows checked: the select-all control renders the
+/** Some but not all loaded rows checked: the select-all control renders the
  *  `Checkbox` tri-state dash, not the box or the tick. */
 export const SelectAll: Story = {
 	args: {
@@ -51,44 +55,130 @@ export const SelectAll: Story = {
 	},
 };
 
-/** Every row checked: the select-all control renders as a plain checked box. */
+/**
+ * Every loaded row checked. The count line names its scope by default —
+ * "All 47 loaded selected" — instead of a bare "47 messages selected" next
+ * to a fully ticked box, which reads as "everything" to anyone who has used
+ * a select-all checkbox before.
+ */
 export const AllSelected: Story = {
 	args: {
-		count: 12,
+		count: 47,
+		selectAll: {
+			checked: true,
+			indeterminate: false,
+			onChange: () => undefined,
+		},
+	},
+};
+
+/**
+ * The search has more matches than are loaded: an escalation notice offers a
+ * real button (not prose) naming the total. Tapping it is what flips the
+ * selection's identity from an id set to the search query (out of scope for
+ * this kit — the caller supplies the count once paging resolves it).
+ */
+export const EscalationAvailable: Story = {
+	args: {
+		count: 47,
 		selectAll: {
 			checked: true,
 			indeterminate: false,
 			onChange: () => undefined,
 		},
+		notice: {
+			tone: "info",
+			text: "",
+			action: {
+				label: 'Select all 3,412 matching "npm"',
+				onClick: () => undefined,
+			},
+		},
 	},
 };
 
-/** While a search result set is still paging, the exact count isn't known yet —
- *  `statusLabel` replaces the "{count} selected" text with a counting message. */
+/**
+ * Selection has been escalated to the search query: the count names the
+ * query's total, not a materialized id count, and the notice offers a way
+ * back to the bounded selection.
+ */
+export const Escalated: Story = {
+	args: {
+		count: 3412,
+		statusLabel: 'All 3,412 matching "npm" selected',
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Clear selection", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * While a search result set is still paging, the exact count isn't known
+ * yet — a running total instead of a static "Counting…", delete hidden
+ * (nothing to act on with an unknown total), and an explicit Stop rather
+ * than overloading the X (which still means "cancel selection").
+ */
 export const Counting: Story = {
 	args: {
 		count: 0,
-		statusLabel: "Counting matching messages…",
+		isCounting: true,
+		statusLabel: "Counting… 1,900 so far",
+		selectAll: {
+			checked: true,
+			indeterminate: false,
+			onChange: () => undefined,
+		},
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Stop", onClick: () => undefined },
+		},
 	},
 };
 
-/** A bulk delete in progress reports a running total via `statusLabel`, and
- *  the delete button shows its busy spinner (never disables). */
+/** Past ~10s the counting state says so, rather than looking stuck. */
+export const CountingLargeResultSet: Story = {
+	args: {
+		count: 0,
+		isCounting: true,
+		statusLabel: "Counting… 12,400 so far. This is a big result set.",
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Stop", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * A bulk delete in progress reports a running total via `statusLabel` and a
+ * determinate `ProgressBar`; the delete button shows its busy spinner (never
+ * disables) and mark-read is hidden — nothing here can act mid-delete.
+ */
 export const DeletingWithProgress: Story = {
 	args: {
 		count: 3412,
 		statusLabel: "Deleting 1,200 of 3,412…",
 		isBusy: true,
+		progress: { value: 1200, max: 3412 },
 	},
 };
 
-/** After a bulk delete finishes with some batches failed, `failureHint`
- *  surfaces the shortfall in danger tone — independent of `moveDisabledHint`,
- *  which is muted and cross-account-specific. */
+/**
+ * After a bulk delete finishes with some batches failed: the count reflects
+ * only what's still selected — the failures — not the original selection,
+ * and Retry is a real button naming how many.
+ */
 export const PartialFailure: Story = {
 	args: {
-		count: 3412,
-		failureHint: "3,072 deleted, 340 failed to delete — retry?",
+		count: 340,
+		notice: {
+			tone: "danger",
+			text: "3,072 moved to Trash. 340 couldn't be deleted.",
+			action: { label: "Retry 340", onClick: () => undefined },
+		},
 	},
 };
 

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

@@ -1,34 +1,51 @@
 import { Loader2, MailOpen, Trash2, X } from "lucide-react";
 import type { ReactNode } from "react";
+import { Banner, type BannerTone } from "./banner.js";
 import { Button } from "./button.js";
 import { Checkbox } from "./checkbox.js";
+import { ProgressBar } from "./progress-bar.js";
+
+const formatCount = (n: number): string => n.toLocaleString();
+
+export interface SelectionTopBarNoticeAction {
+	label: string;
+	onClick: () => void;
+}
+
+export interface SelectionTopBarNotice {
+	tone: BannerTone;
+	text: string;
+	action?: SelectionTopBarNoticeAction;
+}
 
 export interface SelectionTopBarProps {
 	count: number;
 	onCancel: () => void;
 	onDelete: () => void;
-	/** Optional — hide the mark-read button when omitted. */
+	/** Optional — hide the mark-read button when omitted, or while `isBusy`. */
 	onMarkRead?: () => void;
 	/**
 	 * Slot for a move-to-folder trigger. Rendered between mark-read and delete.
 	 * Kept as a render prop so the caller controls API dependencies.
 	 */
 	moveSlot?: ReactNode;
-	/**
-	 * Cross-account hint surfaced below the action row. When set, Move is
-	 * expected to be suppressed by the caller (via moveSlot).
-	 */
-	moveDisabledHint?: string;
 	/**
 	 * True while a delete or move mutation is in flight. The delete button
-	 * shows a spinner; other actions no-op. Never disables controls.
+	 * shows a spinner and mark-read is hidden (never disabled — nothing here
+	 * disables, states that can't act are hidden instead).
 	 */
 	isBusy?: boolean;
+	/**
+	 * True while a search result set is still paging to find its total. Hides
+	 * delete — the count it would act on isn't known yet.
+	 */
+	isCounting?: boolean;
 	/**
 	 * Select-all control rendered between cancel and the count label. Presence
 	 * of this prop is what renders the checkbox — omit it for a bar with no
 	 * select-all affordance. `indeterminate` renders the some-selected tri-state
-	 * (`Checkbox`'s dash), `checked` is the all-selected state.
+	 * (`Checkbox`'s dash), `checked` is the all-selected state. The checkbox
+	 * itself stays visually small; a wrapping 44px hit area makes it tappable.
 	 */
 	selectAll?: {
 		checked: boolean;
@@ -36,18 +53,31 @@ export interface SelectionTopBarProps {
 		onChange: () => void;
 	};
 	/**
-	 * Overrides the "{count} messages selected" text. For states where the
-	 * count itself isn't the useful thing to show yet — "Counting…" while a
-	 * search result set is still paging, or "Deleting 1,200 of 3,412…" progress
-	 * during a bulk delete.
+	 * Overrides the default "{count} messages selected" text. Required once the
+	 * count's scope is anything other than "every loaded row is selected" —
+	 * an escalated selection ("All 3,412 matching \"npm\" selected"), a
+	 * counting state ("Counting… 1,900 so far"), or bulk-delete progress
+	 * ("Deleting 1,200 of 3,412…"). When `selectAll.checked` is true and this
+	 * is omitted, the default text names the loaded-scope itself ("All 47
+	 * loaded selected") rather than a bare count — a ticked select-all box
+	 * next to a bare number reads as "everything", which is only true for the
+	 * escalated case.
 	 */
 	statusLabel?: string;
 	/**
-	 * Danger-toned status line below the action row, for a partial failure
-	 * after a bulk operation (e.g. some batches failed to delete). Independent
-	 * of `moveDisabledHint` — a caller shows one or the other, never both.
+	 * Determinate progress for a bulk operation in flight (e.g. a chunked
+	 * delete). Renders a `ProgressBar` below the action row. Independent of
+	 * `notice` — a caller can show progress and a notice at the same time.
+	 */
+	progress?: { value: number; max: number; tone?: BannerTone };
+	/**
+	 * Toned status line below the action row, sometimes carrying an action
+	 * button — a cross-account move restriction, a "Select all N matching…"
+	 * escalation, a "Stop" during counting, or a partial-failure "Retry N".
+	 * Replaces the old `moveDisabledHint`/`failureHint` pair: a caller shows
+	 * at most one notice at a time.
 	 */
-	failureHint?: string;
+	notice?: SelectionTopBarNotice;
 }
 
 /**
@@ -60,83 +90,106 @@ export function SelectionTopBar({
 	onMarkRead,
 	onDelete,
 	moveSlot,
-	moveDisabledHint,
 	isBusy = false,
+	isCounting = false,
 	selectAll,
 	statusLabel,
-	failureHint,
+	progress,
+	notice,
 }: SelectionTopBarProps) {
+	const defaultLabel = selectAll?.checked
+		? `All ${formatCount(count)} loaded selected`
+		: `${formatCount(count)} ${count === 1 ? "message" : "messages"} selected`;
+
 	return (
 		<header className="flex shrink-0 flex-col border-b border-line bg-surface-sunken">
 			<div className="flex h-pane-header items-center gap-2 px-row-inset">
 				<Button
 					variant="ghost"
-					size="sm"
+					size="touch"
 					icon={<X className="size-4" />}
 					onClick={onCancel}
 					aria-label="Cancel selection"
-					className="-ml-1 shrink-0"
+					className="-ml-2 shrink-0"
 				/>
 				{selectAll && (
-					<Checkbox
-						aria-label="Select all"
-						checked={selectAll.checked}
-						indeterminate={selectAll.indeterminate}
-						onChange={selectAll.onChange}
-						className="shrink-0"
-					/>
+					// biome-ignore lint/a11y/noLabelWithoutControl: label wraps Checkbox's own input, giving the 20px control a real 44px hit area
+					<label className="-ml-1.5 flex size-11 shrink-0 cursor-pointer items-center justify-center">
+						<Checkbox
+							aria-label="Select all"
+							checked={selectAll.checked}
+							indeterminate={selectAll.indeterminate}
+							onChange={selectAll.onChange}
+						/>
+					</label>
 				)}
-				<span className="min-w-0 flex-1 truncate text-sm font-medium text-fg">
-					{statusLabel ??
-						`${count} ${count === 1 ? "message" : "messages"} selected`}
+				<span
+					className="min-w-0 flex-1 truncate text-sm font-medium text-fg"
+					role="status"
+					aria-live="polite"
+				>
+					{statusLabel ?? defaultLabel}
 				</span>
-				{onMarkRead && (
+				{onMarkRead && !isBusy && (
 					<Button
 						variant="ghost"
-						size="sm"
+						size="touch"
 						icon={<MailOpen className="size-4" />}
-						onClick={isBusy ? undefined : onMarkRead}
+						onClick={onMarkRead}
 						aria-label="Mark as read"
-						aria-busy={isBusy || undefined}
 						className="shrink-0"
 					/>
 				)}
 				{moveSlot}
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={
-						isBusy ? (
-							<Loader2 className="size-4 animate-spin" />
-						) : (
-							<Trash2 className="size-4 text-danger" />
-						)
-					}
-					onClick={isBusy ? undefined : onDelete}
-					aria-label="Delete selected messages"
-					aria-busy={isBusy || undefined}
-					className="shrink-0"
-				/>
+				{!isCounting && (
+					<Button
+						variant="ghost"
+						size="touch"
+						icon={
+							isBusy ? (
+								<Loader2 className="size-4 animate-spin" />
+							) : (
+								<Trash2 className="size-4 text-danger" />
+							)
+						}
+						onClick={isBusy ? undefined : onDelete}
+						aria-label="Move selected messages to Trash"
+						aria-busy={isBusy || undefined}
+						className="ml-4 shrink-0"
+					/>
+				)}
 			</div>
-			{moveDisabledHint && (
-				// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
-				<p
-					className="px-row-inset pb-2 text-xs text-fg-muted"
-					role="status"
-					aria-live="polite"
-				>
-					{moveDisabledHint}
-				</p>
+			{progress && (
+				<div className="px-row-inset pb-2">
+					<ProgressBar
+						value={progress.value}
+						max={progress.max}
+						tone={progress.tone}
+					/>
+				</div>
 			)}
-			{failureHint && (
-				// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
-				<p
-					className="px-row-inset pb-2 text-xs text-danger"
+			{notice && (
+				<Banner
+					tone={notice.tone}
+					variant="soft"
 					role="status"
 					aria-live="polite"
+					className="mx-row-inset mb-2"
 				>
-					{failureHint}
-				</p>
+					<div className="flex items-center justify-between gap-2">
+						{notice.text && <span>{notice.text}</span>}
+						{notice.action && (
+							<Button
+								variant="ghost"
+								size="md"
+								onClick={notice.action.onClick}
+								className="-my-1 min-h-11 shrink-0"
+							>
+								{notice.action.label}
+							</Button>
+						)}
+					</div>
+				</Banner>
 			)}
 		</header>
 	);

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

@@ -103,4 +103,33 @@ describe("SwipeableRow", () => {
 		assert.doesNotMatch(html, /<a /);
 		assert.match(html, /<button[^>]*>/);
 	});
+
+	it("gives the row checkbox semantics while in selection mode", () => {
+		const checked = render("none", { selectionMode: true, checked: true });
+		assert.match(checked, /role="checkbox"/);
+		assert.match(checked, /aria-checked="true"/);
+
+		const unchecked = render("none", { selectionMode: true, checked: false });
+		assert.match(unchecked, /aria-checked="false"/);
+	});
+
+	it("does not put checkbox semantics on the outer row outside selection mode", () => {
+		// Outside selection mode the row's own open control (the outer button)
+		// stays a plain button — only the nested leading-avatar toggle carries
+		// checkbox semantics, asserted separately below.
+		const html = render("none");
+		const outerTag = html.match(
+			/^<div class="relative overflow-hidden"><button type="button"[^>]*>/,
+		)?.[0];
+		assert.ok(outerTag, "outer row button found");
+		assert.doesNotMatch(outerTag as string, /role="checkbox"/);
+	});
+
+	it("renders the leading avatar as a focusable checkbox-role toggle outside selection mode", () => {
+		const html = render("none");
+		assert.match(
+			html,
+			/role="checkbox"[^>]*aria-label="Select message from Alex Rivera"/,
+		);
+	});
 });

package/src/components/swipeable-row.tsx

@@ -2,8 +2,8 @@ import { Check, Mail, MailOpen, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import type { ThreadRowData } from "./app-shell-types.js";
+import { Avatar } from "./avatar.js";
 import {
-	ComfortableRowBody,
 	ComfortableRowTextContent,
 	comfortableRowClass,
 } from "./message-row.js";
@@ -192,6 +192,14 @@ export function SwipeableRow({
 		transition: dragX === null ? "transform 150ms ease" : "none",
 		minHeight: 44,
 	};
+	const unread = !thread.isRead;
+
+	// Stops the row's own pointer-gesture handlers (long-press, swipe axis
+	// detection) from also firing for a tap that started on the nested avatar
+	// toggle — the row and the toggle are two separate controls sharing the
+	// same leading 28px slot.
+	const stopRowGesture = (e: React.PointerEvent) => e.stopPropagation();
+
 	const body = selectionMode ? (
 		<>
 			<span
@@ -207,7 +215,36 @@ export function SwipeableRow({
 			<ComfortableRowTextContent thread={thread} />
 		</>
 	) : (
-		<ComfortableRowBody thread={thread} />
+		<>
+			{unread && (
+				<span className="absolute left-1.5 top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent" />
+			)}
+			{/*
+			 * 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.
+			 */}
+			{/* 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"
+				role="checkbox"
+				aria-checked={checked}
+				aria-label={`Select message from ${thread.fromName}`}
+				onPointerDown={stopRowGesture}
+				onPointerMove={stopRowGesture}
+				onPointerUp={stopRowGesture}
+				onClick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					onLongPress();
+				}}
+				className="inline-flex size-7 shrink-0 items-center justify-center rounded-full"
+			>
+				<Avatar name={thread.fromName} email={thread.fromEmail} size="sm" />
+			</button>
+			<ComfortableRowTextContent thread={thread} />
+		</>
 	);
 
 	return (
@@ -251,8 +288,11 @@ export function SwipeableRow({
 					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}
 					onPointerDown={onPointerDown}
 					onPointerMove={onPointerMove}
 					onPointerUp={onPointerUp}

package/src/components/touch-list-body.render.test.ts

@@ -63,4 +63,29 @@ describe("TouchListBody", () => {
 		const html = renderToString(createElement(TouchListBody, baseProps));
 		assert.match(html, /Pull to refresh/);
 	});
+
+	it("dims and suppresses taps on every row while busy", () => {
+		const html = renderToString(
+			createElement(TouchListBody, {
+				...baseProps,
+				selectionMode: true,
+				checkedIds: new Set(["t1", "t2"]),
+				busy: true,
+			}),
+		);
+		const dimmed = (html.match(/pointer-events-none opacity-50/g) ?? []).length;
+		assert.equal(dimmed, 2, "both seeded rows are dimmed");
+	});
+
+	it("hides pull to refresh while busy", () => {
+		const html = renderToString(
+			createElement(TouchListBody, { ...baseProps, busy: true }),
+		);
+		assert.doesNotMatch(html, /Pull to refresh/);
+	});
+
+	it("renders rows undimmed when not busy", () => {
+		const html = renderToString(createElement(TouchListBody, baseProps));
+		assert.doesNotMatch(html, /pointer-events-none/);
+	});
 });

package/src/components/touch-list-body.stories.tsx

@@ -93,3 +93,18 @@ export const SelectionModeAllChecked: Story = {
 export const SelectionModeNoneChecked: Story = {
 	args: { selectionMode: true, checkedIds: new Set<string>() },
 };
+
+/**
+ * A bulk delete is running against the checked rows: they stay checked but
+ * dim, and stop responding to taps — no more opening a message that's
+ * mid-delete. Pairs with `SelectionTopBar`'s `DeletingWithProgress` story.
+ */
+export const SelectionModeBusy: Story = {
+	args: {
+		selectionMode: true,
+		checkedIds: new Set(
+			sections.flatMap((section) => section.threads.map((t) => t.id)),
+		),
+		busy: true,
+	},
+};

package/src/components/touch-list.tsx

@@ -14,6 +14,7 @@ export function TouchListBody({
 	onOpenThread,
 	onRefresh,
 	refreshing,
+	busy = false,
 }: {
 	sections: ThreadSection[];
 	selectedThreadId?: string;
@@ -25,6 +26,12 @@ export function TouchListBody({
 	onOpenThread: (id: string) => void;
 	onRefresh: () => void;
 	refreshing: boolean;
+	/**
+	 * A bulk operation (e.g. delete) is running against the checked set. Rows
+	 * dim and stop responding to taps instead of sitting normal, undimmed and
+	 * still tappable while a count above them claims they're being deleted.
+	 */
+	busy?: boolean;
 }) {
 	// Local copy so the mock can act on a swipe: delete removes the row,
 	// toggle-read flips its state. The live client owns real mutation.
@@ -56,24 +63,28 @@ export function TouchListBody({
 			)}
 			<div className="divide-y divide-line">
 				{items.map((thread) => (
-					<SwipeableRow
+					<div
 						key={thread.id}
-						thread={thread}
-						selectionMode={selectionMode}
-						checked={checkedIds.has(thread.id)}
-						active={thread.id === selectedThreadId}
-						peek={peek?.id === thread.id ? peek.side : "none"}
-						onPeek={(next) =>
-							setPeek(next === "none" ? null : { id: thread.id, side: next })
-						}
-						onToggleCheck={() => onToggleCheck(thread.id)}
-						onLongPress={() => onEnterSelection(thread.id)}
-						onOpen={() => onOpenThread(thread.id)}
-						onAct={(side) => act(thread.id, side)}
-					/>
+						className={busy ? "pointer-events-none opacity-50" : undefined}
+					>
+						<SwipeableRow
+							thread={thread}
+							selectionMode={selectionMode}
+							checked={checkedIds.has(thread.id)}
+							active={thread.id === selectedThreadId}
+							peek={peek?.id === thread.id ? peek.side : "none"}
+							onPeek={(next) =>
+								setPeek(next === "none" ? null : { id: thread.id, side: next })
+							}
+							onToggleCheck={() => onToggleCheck(thread.id)}
+							onLongPress={() => onEnterSelection(thread.id)}
+							onOpen={() => onOpenThread(thread.id)}
+							onAct={(side) => act(thread.id, side)}
+						/>
+					</div>
 				))}
 			</div>
-			{!selectionMode && !refreshing && (
+			{!selectionMode && !refreshing && !busy && (
 				<button
 					type="button"
 					onClick={onRefresh}

package/src/index.ts

@@ -235,6 +235,10 @@ export {
 	type PopoverMenuItem,
 	type PopoverMenuProps,
 } from "./components/popover-menu.js";
+export {
+	ProgressBar,
+	type ProgressBarProps,
+} from "./components/progress-bar.js";
 export {
 	PullToRefresh,
 	type PullToRefreshProps,
@@ -336,6 +340,8 @@ export {
 export { Select, type SelectProps } from "./components/select.js";
 export {
 	SelectionTopBar,
+	type SelectionTopBarNotice,
+	type SelectionTopBarNoticeAction,
 	type SelectionTopBarProps,
 } from "./components/selection-top-bar.js";
 export {