@remit/ui 0.0.11 → 0.0.13

package/package.json

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

package/src/components/app-shell-types.ts

@@ -308,6 +308,13 @@ export interface AppShellProps {
 	 * fits or when the message view is showing.
 	 */
 	initialTouchState?: TouchSeed;
+	/**
+	 * Replaces the narrow-width list pane header when a selection is active —
+	 * forwarded to `MessageListPane`'s `selectionBar` slot. The caller owns
+	 * selection state and toolbar actions; when omitted, `initialTouchState`
+	 * still drives the pane's own built-in touch-triage bar.
+	 */
+	selectionBar?: ReactNode;
 	intelligence?: IntelligenceData;
 	/** Pane 4 visible. Defaults to true when intelligence is present. */
 	intelligenceOpen?: boolean;

package/src/components/app-shell.render.test.ts

@@ -300,9 +300,7 @@ describe("AppShell touch-state seeds (story/SSR affordance)", () => {
 			/aria-label="Cancel selection"/,
 			"the selection bar is shown",
 		);
-		// SSR splits interpolated text with comment markers, so match the parts.
-		assert.match(html, /messages<!-- --> selected/, "selection wording shown");
-		assert.match(html, />2<!-- -->/, "the seeded count of 2 is shown");
+		assert.match(html, /2 messages selected/, "selection wording shown");
 		// Selection mode is not a swipe — no action zones revealed.
 		assert.equal(
 			count(html, trailingAction),
@@ -345,6 +343,23 @@ describe("AppShell touch-state seeds (story/SSR affordance)", () => {
 		);
 	});
 
+	it("selectionBar overrides the built-in bar and forwards to the list pane", () => {
+		const html = render({
+			...touchBase,
+			selectionBar: createElement(
+				"div",
+				{ "data-testid": "custom-bar" },
+				"Deleting 1,200 of 3,412…",
+			),
+		});
+		assert.match(html, /Deleting 1,200 of 3,412…/, "the override renders");
+		assert.doesNotMatch(
+			html,
+			/aria-label="Cancel selection"/,
+			"the built-in bar is not also rendered",
+		);
+	});
+
 	it("ignores the touch seed at/above 1024 (desktop list)", () => {
 		const html = render({
 			...touchBase,

package/src/components/app-shell.tsx

@@ -70,6 +70,7 @@ export function AppShell({
 	thread,
 	initialNarrowView = "list",
 	initialTouchState,
+	selectionBar,
 	intelligence,
 	intelligenceOpen = true,
 	density,
@@ -126,6 +127,7 @@ export function AppShell({
 			}}
 			onSelectBriefCategory={selectCategory}
 			initialTouchState={initialTouchState}
+			selectionBar={selectionBar}
 		/>
 	);
 
@@ -185,6 +187,7 @@ function AppShellList({
 	onSelectThread,
 	onSelectBriefCategory,
 	initialTouchState,
+	selectionBar,
 }: Pick<
 	AppShellProps,
 	| "thread"
@@ -202,6 +205,7 @@ function AppShellList({
 	| "density"
 	| "onSelectThread"
 	| "initialTouchState"
+	| "selectionBar"
 > & {
 	narrowView: NarrowView;
 	onBackToList: () => void;
@@ -244,6 +248,7 @@ function AppShellList({
 			onOpenNav={showNavPane ? undefined : layout?.openNav}
 			isDesktop={showReadingPane}
 			initialTouchState={initialTouchState}
+			selectionBar={selectionBar}
 		/>
 	);
 }

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

@@ -51,7 +51,25 @@ const Actions = () => (
 
 const SCOPE: SearchChip = { id: "in:spam", label: "in:spam", tone: "scope" };
 
-const Bar = ({ initialChips = [] }: { initialChips?: SearchChip[] }) => {
+/**
+ * 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 [value, setValue] = useState("");
 	return (
@@ -71,7 +89,7 @@ const Bar = ({ initialChips = [] }: { initialChips?: SearchChip[] }) => {
 					}}
 					onClearQuery={() => setValue("")}
 					globalFocusKey={false}
-					placeholder="Search all mail"
+					placeholder={placeholder}
 				/>
 			}
 		/>
@@ -96,24 +114,67 @@ const WithPanes = ({ children }: { children: React.ReactNode }) => (
 	</div>
 );
 
-/** The daily brief's state: search unscoped, nothing narrowing it. */
+/**
+ * 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.
+ * 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]} />,
+	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 = {
+	render: () => (
+		<Bar
+			initialChips={[{ id: "is:starred", label: "is:starred", tone: "scope" }]}
+			placeholder={PLACEHOLDER.scoped}
+		/>
+	),
+};
+
+export const ScopedToOutbox: Story = {
+	render: () => (
+		<Bar
+			initialChips={[{ id: "in:outbox", label: "in:outbox", tone: "scope" }]}
+			placeholder={PLACEHOLDER.scoped}
+		/>
+	),
 };
 
 /** The arrangement: one bar over the nav, the list, and the message pane. */
 export const OverTheLayout: Story = {
 	render: () => (
 		<WithPanes>
-			<Bar initialChips={[SCOPE]} />
+			<Bar initialChips={[SCOPE]} placeholder={PLACEHOLDER.scoped} />
 		</WithPanes>
 	),
 };

package/src/components/mail-header.stories.tsx

@@ -59,6 +59,7 @@ function MailScreen({
 	initialExpanded = false,
 	initialSearchOpen = false,
 	initialSearchValue = "",
+	showSearch = true,
 }: {
 	title: string;
 	unreadCount: number;
@@ -66,6 +67,7 @@ function MailScreen({
 	initialExpanded?: boolean;
 	initialSearchOpen?: boolean;
 	initialSearchValue?: string;
+	showSearch?: boolean;
 }) {
 	const [searchValue, setSearchValue] = useState(initialSearchValue);
 	const [searchOpen, setSearchOpen] = useState(initialSearchOpen);
@@ -85,6 +87,7 @@ function MailScreen({
 				title={title}
 				unreadCount={unreadCount}
 				isDesktop={false}
+				showSearch={showSearch}
 				onMenuClick={() => undefined}
 				searchValue={searchValue}
 				onSearchChange={setSearchValue}
@@ -188,6 +191,43 @@ export const InboxFilterExpanded: Story = {
 	),
 };
 
+/**
+ * `showSearch={false}` — the header on desktop, where the app's top bar owns
+ * the search field for the whole shell. Title and unread count only: no
+ * magnifier, nothing to expand. Two search inputs on one page would compete
+ * for focus and for the "/" shortcut, so the header yields.
+ *
+ * This is what a desktop mail pane renders. Every story below it is the
+ * below-desktop case, where there is no top bar and the header keeps its own
+ * compact field.
+ */
+export const SearchOwnedByTopBar: Story = {
+	render: () => (
+		<MailScreen
+			title="Daily brief"
+			unreadCount={15338}
+			preset={briefFilterConfig(accounts)}
+			showSearch={false}
+		/>
+	),
+};
+
+/**
+ * The same header for a mailbox rather than the brief — still no search
+ * affordance, because whether the header owns one is a property of the layout,
+ * not of which list is under it.
+ */
+export const SearchOwnedByTopBarInbox: Story = {
+	render: () => (
+		<MailScreen
+			title="Inbox"
+			unreadCount={42}
+			preset={inboxFilterConfig()}
+			showSearch={false}
+		/>
+	),
+};
+
 /** Mobile search collapsed to a magnifier in the header top row. */
 export const MobileSearchCollapsed: Story = {
 	render: () => (

package/src/components/message-list-pane.stories.tsx

@@ -212,8 +212,15 @@ export const CustomListBody: Story = {
 	decorators: [desktopFrame],
 };
 
-/** External `selectionBar` slot — the pane delegates the header to the caller
- *  when a selection is active. */
+/**
+ * External `selectionBar` slot mechanism, exercised at desktop width with
+ * `SelectionTopBar` as a convenient stand-in node — any slot content works
+ * here, the point is that the pane header is replaced. This is NOT a
+ * production composition: the live desktop toolbar is `SelectionToolbar`
+ * (web-client only, not in this kit); `MessageList.tsx` only ever puts
+ * `SelectionTopBar` in this slot when `!isDesktop` — see `NarrowExternalSelectionBar`
+ * below for that production-accurate case.
+ */
 export const ExternalSelectionBar: Story = {
 	args: {
 		isDesktop: true,
@@ -230,6 +237,27 @@ export const ExternalSelectionBar: Story = {
 	decorators: [desktopFrame],
 };
 
+/**
+ * The production composition (`MessageList.tsx:798` gates on `!isDesktop`):
+ * `SelectionTopBar` in the `selectionBar` slot at narrow width. Desktop never
+ * renders this component in the slot — only `NarrowTouchList`'s width does.
+ */
+export const NarrowExternalSelectionBar: Story = {
+	args: {
+		isDesktop: false,
+		flatList: true,
+		selectionBar: (
+			<SelectionTopBar
+				count={2}
+				onCancel={() => undefined}
+				onMarkRead={() => undefined}
+				onDelete={() => undefined}
+			/>
+		),
+	},
+	decorators: [narrowFrame],
+};
+
 /** Fail-loud error state — the specific failure detail is surfaced under the
  *  headline (not a bare "something went wrong"), with a way back (Retry) and a
  *  place for the failure to go (Report a problem). */

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

@@ -64,4 +64,93 @@ describe("SelectionTopBar", () => {
 		);
 		assert.match(html, /Cross-account moves are not supported/);
 	});
+
+	it("renders statusLabel in place of the count copy when provided", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 3412,
+				statusLabel: "Deleting 1,200 of 3,412…",
+			}),
+		);
+		assert.match(text(html), /Deleting 1,200 of 3,412…/);
+		assert.doesNotMatch(text(html), /3412 messages selected/);
+	});
+
+	it("falls back to the count copy when statusLabel is absent", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.match(text(html), /2 messages selected/);
+	});
+
+	it("renders failureHint when provided", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				failureHint: "340 failed to delete — retry?",
+			}),
+		);
+		assert.match(html, /340 failed to delete — retry\?/);
+	});
+
+	it("omits the select-all control when selectAll is absent", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.doesNotMatch(html, /aria-label="Select all"/);
+	});
+
+	it("renders the select-all control, unchecked, in the some-selected state", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				selectAll: {
+					checked: false,
+					indeterminate: true,
+					onChange: () => undefined,
+				},
+			}),
+		);
+		assert.match(html, /aria-label="Select all"/);
+		assert.doesNotMatch(
+			html,
+			/aria-label="Select all"[^>]*checked=""/,
+			"some-selected is not the checked state",
+		);
+	});
+
+	it("renders the select-all control checked in the all-selected state", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 12,
+				selectAll: {
+					checked: true,
+					indeterminate: false,
+					onChange: () => undefined,
+				},
+			}),
+		);
+		assert.match(
+			html,
+			/aria-label="Select all"[^>]*checked=""/,
+			"all-selected renders the checkbox checked",
+		);
+	});
+
+	it("omitting every new prop renders exactly the pre-existing bar", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.doesNotMatch(
+			html,
+			/aria-label="Select all"/,
+			"no select-all control",
+		);
+		assert.match(text(html), /2 messages selected/, "default count copy");
+		assert.doesNotMatch(html, /role="status"/, "no status line rendered");
+	});
 });

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

@@ -37,3 +37,69 @@ export const CrossAccountHint: Story = {
 			"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
+ *  `Checkbox` tri-state dash, not the box or the tick. */
+export const SelectAll: Story = {
+	args: {
+		count: 3,
+		selectAll: {
+			checked: false,
+			indeterminate: true,
+			onChange: () => undefined,
+		},
+	},
+};
+
+/** Every row checked: the select-all control renders as a plain checked box. */
+export const AllSelected: Story = {
+	args: {
+		count: 12,
+		selectAll: {
+			checked: true,
+			indeterminate: false,
+			onChange: () => 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. */
+export const Counting: Story = {
+	args: {
+		count: 0,
+		statusLabel: "Counting matching messages…",
+	},
+};
+
+/** A bulk delete in progress reports a running total via `statusLabel`, and
+ *  the delete button shows its busy spinner (never disables). */
+export const DeletingWithProgress: Story = {
+	args: {
+		count: 3412,
+		statusLabel: "Deleting 1,200 of 3,412…",
+		isBusy: true,
+	},
+};
+
+/** 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. */
+export const PartialFailure: Story = {
+	args: {
+		count: 3412,
+		failureHint: "3,072 deleted, 340 failed to delete — retry?",
+	},
+};
+
+/**
+ * count === 0 is unreachable in production: both the kit
+ * (`message-list-pane.tsx`'s `toggleCheck`) and the web-client
+ * (`MessageList.tsx`'s multi-select effect) auto-exit selection mode the
+ * instant the last checked row is unchecked. `SelectionTopBar` itself has no
+ * floor on `count` — this story pins the contract that no caller should ever
+ * leave it mounted here.
+ */
+export const ZeroSelected: Story = {
+	args: { count: 0 },
+};

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

@@ -1,6 +1,7 @@
 import { Loader2, MailOpen, Trash2, X } from "lucide-react";
 import type { ReactNode } from "react";
 import { Button } from "./button.js";
+import { Checkbox } from "./checkbox.js";
 
 export interface SelectionTopBarProps {
 	count: number;
@@ -23,6 +24,30 @@ export interface SelectionTopBarProps {
 	 * shows a spinner; other actions no-op. Never disables controls.
 	 */
 	isBusy?: 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.
+	 */
+	selectAll?: {
+		checked: boolean;
+		indeterminate?: boolean;
+		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.
+	 */
+	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.
+	 */
+	failureHint?: string;
 }
 
 /**
@@ -37,6 +62,9 @@ export function SelectionTopBar({
 	moveSlot,
 	moveDisabledHint,
 	isBusy = false,
+	selectAll,
+	statusLabel,
+	failureHint,
 }: SelectionTopBarProps) {
 	return (
 		<header className="flex shrink-0 flex-col border-b border-line bg-surface-sunken">
@@ -49,8 +77,18 @@ export function SelectionTopBar({
 					aria-label="Cancel selection"
 					className="-ml-1 shrink-0"
 				/>
+				{selectAll && (
+					<Checkbox
+						aria-label="Select all"
+						checked={selectAll.checked}
+						indeterminate={selectAll.indeterminate}
+						onChange={selectAll.onChange}
+						className="shrink-0"
+					/>
+				)}
 				<span className="min-w-0 flex-1 truncate text-sm font-medium text-fg">
-					{count} {count === 1 ? "message" : "messages"} selected
+					{statusLabel ??
+						`${count} ${count === 1 ? "message" : "messages"} selected`}
 				</span>
 				{onMarkRead && (
 					<Button
@@ -90,6 +128,16 @@ export function SelectionTopBar({
 					{moveDisabledHint}
 				</p>
 			)}
+			{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"
+					role="status"
+					aria-live="polite"
+				>
+					{failureHint}
+				</p>
+			)}
 		</header>
 	);
 }

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

@@ -55,6 +55,20 @@ export const PeekedLeading: Story = { args: { peek: "leading" } };
 
 export const PeekedTrailing: Story = { args: { peek: "trailing" } };
 
+/**
+ * In selection mode the leading avatar is REPLACED by a checkbox affordance
+ * — unchecked below, checked in the next story. `baseArgs` never flips
+ * `selectionMode`/`checked`, so this row-level toggle had zero coverage.
+ */
+export const SelectionUnchecked: Story = {
+	args: { peek: "none", selectionMode: true, checked: false },
+};
+
+/** Selection mode, row checked: the circle fills accent and shows a tick. */
+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

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

@@ -74,3 +74,22 @@ export const Refreshing: Story = { args: { refreshing: true } };
 export const SelectionMode: Story = {
 	args: { selectionMode: true, checkedIds: new Set(["t1", "t3"]) },
 };
+
+/** Every row checked — the ceiling a select-all control drives toward. */
+export const SelectionModeAllChecked: Story = {
+	args: {
+		selectionMode: true,
+		checkedIds: new Set(
+			sections.flatMap((section) => section.threads.map((t) => t.id)),
+		),
+	},
+};
+
+/**
+ * Selection mode with nothing checked. `TouchListBody` itself has no floor —
+ * the auto-exit-at-zero contract belongs to the caller (`MessageListPane`,
+ * production `MessageList.tsx`), which this component doesn't own.
+ */
+export const SelectionModeNoneChecked: Story = {
+	args: { selectionMode: true, checkedIds: new Set<string>() },
+};