@remit/ui 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.12",
+  "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/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>() },
+};