@remit/ui 0.0.70 → 0.0.72

package/package.json

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

package/src/components/auto-moved-badge.tsx

@@ -17,7 +17,6 @@ export interface AutoMovedBadgeProps {
 	 * way to reach the filter that keeps moving mail. Omit for a classifier move.
 	 */
 	filtersHref?: string;
-	manageLabel?: string;
 	className?: string;
 }
 
@@ -34,7 +33,6 @@ export function AutoMovedBadge({
 	onUndo,
 	undoLabel = "Undo",
 	filtersHref,
-	manageLabel = "Manage filter",
 	className,
 }: AutoMovedBadgeProps) {
 	return (
@@ -61,7 +59,7 @@ export function AutoMovedBadge({
 					}}
 					className="font-semibold underline decoration-dotted underline-offset-2 hover:decoration-solid"
 				>
-					{manageLabel}
+					Manage filter
 				</a>
 			)}
 		</Badge>

package/src/components/brief-sections.tsx

@@ -75,17 +75,6 @@ export interface BriefSectionsProps {
 	onSelectSource?: (id: string) => void;
 	/** Seeds the filter panel open on first render (stories / deep links). */
 	defaultExpanded?: boolean;
-	/**
-	 * Whether this component owns arrow-key traversal and the roving tabindex
-	 * over its rows. On by default so a consumer that only passes rows (the
-	 * Storybook prototype) still has a keyboard.
-	 *
-	 * The web client turns it off: its triage layer routes ↑/↓/Home/End through
-	 * one window-level dispatcher, and a container handler here would swallow
-	 * them first — taking Shift+↑/↓ with them, which the dispatcher needs for
-	 * range selection and `rovingNextIndex` ignores.
-	 */
-	manageFocus?: boolean;
 }
 
 /**
@@ -107,7 +96,6 @@ export function BriefSections({
 	sourcesNote,
 	onSelectSource,
 	defaultExpanded = false,
-	manageFocus = true,
 }: BriefSectionsProps) {
 	const [active, setActive] = useState<ReadonlySet<BriefFilterId>>(new Set());
 	const [sheetExpanded, setSheetExpanded] = useState(defaultExpanded);
@@ -115,7 +103,6 @@ export function BriefSections({
 	useRovingFocus({
 		containerRef: listRef,
 		itemSelector: LIST_ROW_SELECTOR,
-		enabled: manageFocus,
 	});
 
 	const toggleFilter = (id: BriefFilterId) => {

package/src/components/dialog.tsx

@@ -5,8 +5,6 @@ export interface DialogProps {
 	open: boolean;
 	onClose: () => void;
 	title: string;
-	/** Unique ID for aria-labelledby. Defaults to "dialog-title". */
-	titleId?: string;
 	children?: ReactNode;
 	className?: string;
 	/**
@@ -22,7 +20,6 @@ export function Dialog({
 	open,
 	onClose,
 	title,
-	titleId = "dialog-title",
 	children,
 	className,
 	anchor = "center",
@@ -86,7 +83,7 @@ export function Dialog({
 				ref={dialogRef}
 				role="dialog"
 				aria-modal="true"
-				aria-labelledby={titleId}
+				aria-labelledby="dialog-title"
 				className={cn(
 					"relative z-10 overflow-hidden border-line bg-surface shadow-xl",
 					isLeft
@@ -99,7 +96,7 @@ export function Dialog({
 				onClick={(e) => e.stopPropagation()}
 				onKeyDown={(e) => e.stopPropagation()}
 			>
-				<h2 id={titleId} className="sr-only">
+				<h2 id="dialog-title" className="sr-only">
 					{title}
 				</h2>
 				{children}

package/src/components/filter-rule-editor.tsx

@@ -7,9 +7,7 @@ import {
 	useState,
 } from "react";
 import { isAbortError } from "../lib/abort.js";
-import { BottomSheet } from "./bottom-sheet.js";
 import { Button } from "./button.js";
-import { Dialog } from "./dialog.js";
 import {
 	AddChipButton,
 	ClauseChip,
@@ -699,44 +697,3 @@ export function FilterRuleEditor({
 		</div>
 	);
 }
-
-export interface FilterRuleDialogProps extends FilterRuleEditorProps {
-	open: boolean;
-	onClose: () => void;
-}
-
-/** Desktop home for the rule editor — the centered modal (RFC 038 D1). */
-export function FilterRuleDialog({
-	open,
-	onClose,
-	...editor
-}: FilterRuleDialogProps) {
-	if (!open) return null;
-	return (
-		<Dialog open={open} onClose={onClose} title="Filter rule">
-			<FilterRuleEditor {...editor} onCancel={onClose} />
-		</Dialog>
-	);
-}
-
-export interface FilterRuleSheetProps extends FilterRuleEditorProps {
-	open: boolean;
-	onClose: () => void;
-}
-
-/** Mobile home for the rule editor — the bottom sheet (RFC 038 D1). */
-export function FilterRuleSheet({
-	open,
-	onClose,
-	...editor
-}: FilterRuleSheetProps): ReactNode {
-	return (
-		<BottomSheet
-			open={open}
-			onClose={onClose}
-			dismissLabel="Dismiss filter rule"
-		>
-			<FilterRuleEditor {...editor} onCancel={onClose} />
-		</BottomSheet>
-	);
-}

package/src/components/filter-rule.render.test.ts

@@ -31,10 +31,8 @@ import {
 	widenChipLabel,
 } from "./filter-rule.js";
 import {
-	FilterRuleDialog,
 	FilterRuleEditor,
 	type FilterRuleEditorProps,
-	FilterRuleSheet,
 } from "./filter-rule-editor.js";
 
 /** SSR splits interpolations with comment markers; sentences read across them. */
@@ -671,50 +669,3 @@ describe("FilterRuleEditor", () => {
 		assert.doesNotMatch(html, /…and similar/);
 	});
 });
-
-describe("FilterRuleDialog", () => {
-	it("renders the editor when open", () => {
-		const html = render(
-			createElement(FilterRuleDialog, {
-				open: true,
-				onClose: () => {},
-				rule: demoRule,
-				folders: FOLDERS,
-				preview: READY,
-			}),
-		);
-		assert.match(html, /role="dialog"/);
-		assert.match(html, /Filter rule/);
-	});
-
-	it("renders nothing when closed", () => {
-		assert.equal(
-			renderToString(
-				createElement(FilterRuleDialog, {
-					open: false,
-					onClose: () => {},
-					rule: demoRule,
-					folders: FOLDERS,
-					preview: READY,
-				}),
-			),
-			"",
-		);
-	});
-});
-
-describe("FilterRuleSheet", () => {
-	it("renders the editor inside a dismissible sheet", () => {
-		const html = render(
-			createElement(FilterRuleSheet, {
-				open: true,
-				onClose: () => {},
-				rule: demoRule,
-				folders: FOLDERS,
-				preview: READY,
-			}),
-		);
-		assert.match(html, /Dismiss filter rule/);
-		assert.match(html, /Filter rule/);
-	});
-});

package/src/components/folder-tree-picker.create.test.ts

@@ -158,6 +158,31 @@ const typeName = async (value: string) => {
 	});
 };
 
+const filterField = (): HTMLInputElement | null =>
+	container.querySelector('input[type="search"]');
+
+const typeFilter = async (value: string) => {
+	const input = filterField();
+	assert.ok(input, "filter field not rendered");
+	const setter = Object.getOwnPropertyDescriptor(
+		dom.window.HTMLInputElement.prototype,
+		"value",
+	)?.set;
+	await act(async () => {
+		setter?.call(input, value);
+		input.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
+	});
+};
+
+const press = async (target: Element | null | undefined, key: string) => {
+	assert.ok(target, "control not rendered");
+	await act(async () => {
+		target.dispatchEvent(
+			new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
+		);
+	});
+};
+
 const open = async (...labels: string[]) => {
 	for (const label of labels) {
 		await click(byAriaLabel(`Move to ${label}`));
@@ -529,32 +554,131 @@ describe("create wait", () => {
 	});
 });
 
-describe("filter and keyboard", () => {
-	const filterField = (): HTMLInputElement | null =>
-		container.querySelector('input[type="search"]');
-
-	const typeFilter = async (value: string) => {
-		const input = filterField();
-		assert.ok(input);
-		const setter = Object.getOwnPropertyDescriptor(
-			dom.window.HTMLInputElement.prototype,
-			"value",
-		)?.set;
-		await act(async () => {
-			setter?.call(input, value);
-			input.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
+describe("the form's keys stay in the form", () => {
+	it("takes a space in the name without acting on the tree", async () => {
+		const selected: string[] = [];
+		await mount({
+			onSelect: (id) => selected.push(id),
+			onCreateFolder: resolving,
 		});
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await press(nameField(), " ");
+		assert.deepEqual(selected, ["travel"]);
+		assert.ok(byAriaLabel("Move to Hotels"));
+		assert.ok(createBlockOf("travel")?.querySelector("input"));
+	});
+
+	it("closes the form on Escape and leaves the picker open", async () => {
+		let cancelled = 0;
+		await mount({
+			onCancel: () => {
+				cancelled += 1;
+			},
+			onCreateFolder: resolving,
+		});
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await press(nameField(), "Escape");
+		assert.equal(nameField(), null);
+		assert.equal(cancelled, 0);
+	});
+});
+
+describe("a draft outlives the rows under it", () => {
+	const startDraft = async (props: PickerProps) => {
+		await mount(props);
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await typeName("Car hire");
 	};
 
-	const press = async (target: Element | null | undefined, key: string) => {
-		assert.ok(target, "control not rendered");
+	it("keeps the form and the typed name when another folder opens", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await open("Archive");
+		assert.equal(nameField()?.value, "Car hire");
+		assert.ok(createBlockOf("top")?.querySelector("input"));
+		assert.match(container.textContent ?? "", /Inside\s*Travel/);
+	});
+
+	it("keeps the form when its own folder is closed again", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await open("Travel");
+		assert.equal(byAriaLabel("Move to Hotels"), null);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("keeps the form when the filter empties the list", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await typeFilter("zzz");
+		assert.match(container.textContent ?? "", /No folders match "zzz"/);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("puts the form back among the children when its folder opens again", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await open("Archive");
+		await open("Travel");
+		assert.ok(createBlockOf("travel")?.querySelector("input"));
+		assert.equal(createBlockOf("top")?.querySelector("input"), null);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("states a failure that lands after the folder it was opened in closed", async () => {
+		let fail: ((error: Error) => void) | undefined;
+		await startDraft({
+			onCreateFolder: () =>
+				new Promise<FolderTreeNode>((_resolve, reject) => {
+					fail = reject;
+				}),
+		});
+		await click(byText("Create folder"));
+		await open("Archive");
+		assert.ok(byText("Creating folder…"), "the wait went off screen");
 		await act(async () => {
-			target.dispatchEvent(
-				new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
-			);
+			fail?.(new Error("The mail server refused that name."));
 		});
-	};
+		assert.equal(
+			container.querySelector('[role="alert"]')?.textContent,
+			"The mail server refused that name.",
+		);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("keeps the wait on screen when the filter clears the list", async () => {
+		await startDraft({
+			onCreateFolder: () => new Promise<FolderTreeNode>(() => undefined),
+		});
+		await click(byText("Create folder"));
+		await typeFilter("zzz");
+		assert.ok(byText("Creating folder…"), "the wait went off screen");
+	});
+
+	it("selects what comes back from a form the list moved under", async () => {
+		const selected: string[] = [];
+		let confirm: ((folder: FolderTreeNode) => void) | undefined;
+		await mount({
+			onSelect: (id) => selected.push(id),
+			onCreateFolder: () =>
+				new Promise<FolderTreeNode>((resolve) => {
+					confirm = resolve;
+				}),
+		});
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await typeName("Car hire");
+		await click(byText("Create folder"));
+		await open("Archive");
+		assert.ok(byText("Creating folder…"), "the wait went off screen");
+		await act(async () => {
+			confirm?.(created("Car hire", "Travel"));
+		});
+		assert.deepEqual(selected, ["travel", "archive", "made"]);
+		assert.equal(nameField(), null);
+	});
+});
 
+describe("filter and keyboard", () => {
 	const focused = (): string | null =>
 		dom.window.document.activeElement?.getAttribute("aria-label") ?? null;
 
@@ -587,6 +711,12 @@ describe("filter and keyboard", () => {
 		assert.match(container.textContent ?? "", /No folders match "zzz"/);
 	});
 
+	it("says the list is empty rather than blaming the filter", async () => {
+		await mount({ folders: [] });
+		await typeFilter("zzz");
+		assert.match(container.textContent ?? "", /No folders to show/);
+	});
+
 	it("picks and opens the focused row on Enter", async () => {
 		const selected: string[] = [];
 		await mount({ onSelect: (id) => selected.push(id) });

package/src/components/folder-tree-picker.render.test.ts

@@ -93,9 +93,10 @@ describe("FolderTreePicker render", () => {
 		);
 	});
 
-	it("renders the empty state when no folder matches", () => {
+	it("says the list is empty when there is nothing to list", () => {
 		const html = render({ folders: [] });
-		assert.match(html, /No folders match/);
+		assert.match(html, /No folders to show/);
+		assert.doesNotMatch(html, /No folders match/);
 	});
 
 	it("applies caller-supplied labels", () => {

package/src/components/folder-tree-picker.stories.tsx

@@ -160,6 +160,7 @@ export const LongList: Story = {
 	render: () => <Picker options={longFolders} />,
 };
 
+/** An account with nothing to list: the message states that, not a filter. */
 export const Empty: Story = {
 	name: "No folders",
 	render: () => <Picker options={[]} />,
@@ -309,6 +310,46 @@ export const CreateFailed: Story = {
 	},
 };
 
+/**
+ * Looking somewhere else does not throw the draft away: opening another folder
+ * closes the branch the form was in, and the form is pinned above the tree with
+ * the typed name and the folder it will be made in.
+ */
+export const CreateWhileTheListMoves: Story = {
+	name: "Create — kept while the list moves",
+	render: () => <Picker />,
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+		clickAriaLabel(canvasElement, "New folder inside Travel");
+		await tick();
+		typeFolderName(canvasElement, "Car hire");
+		await tick();
+		await expand(canvasElement, "Finance");
+	},
+};
+
+/** A failure is stated where the user is looking, whatever the list has done. */
+export const CreateFailedAfterTheListMoved: Story = {
+	name: "Create — failed after the list moved",
+	render: () => (
+		<Picker
+			onCreateFolder={rejects(
+				"The mail server refused the folder name. Try another one.",
+			)}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+		clickAriaLabel(canvasElement, "New folder inside Travel");
+		await tick();
+		typeFolderName(canvasElement, "Car hire");
+		await tick();
+		clickText(canvasElement, "Create folder");
+		await tick();
+		await expand(canvasElement, "Finance");
+	},
+};
+
 const wizardSteps: StepId[] = ["match", "folder", "rule", "review"];
 
 function WizardFolderStep() {

package/src/components/folder-tree-picker.tsx

@@ -53,6 +53,8 @@ export interface FolderTreePickerLabels {
 	/** Suffix announced for an ancestor held on screen by a match below it. */
 	contextSuffix?: string;
 	emptyMessage?: (query: string) => string;
+	/** Shown when there is no folder to list at all, filter or no filter. */
+	noFolders?: string;
 	/** Accessible label for a selectable row, e.g. `Move to X`. */
 	optionLabel?: (label: string) => string;
 	newFolder?: string;
@@ -110,6 +112,7 @@ const defaultLabels: Required<FolderTreePickerLabels> = {
 	currentTag: "current",
 	contextSuffix: "(containing folder)",
 	emptyMessage: (query) => `No folders match "${query}"`,
+	noFolders: "No folders to show",
 	optionLabel: (label) => `Move to ${label}`,
 	newFolder: "New folder",
 	newSubfolder: (label) => `New folder inside ${label}`,
@@ -282,6 +285,11 @@ export const FolderTreePicker = ({
 
 	const handleTreeKeyDown = useCallback(
 		(event: ReactKeyboardEvent<HTMLElement>) => {
+			// The create form sits inside the tree, so what is typed into its name
+			// field reaches here too. Only a row's own keys move the tree.
+			const source = event.target;
+			if (!(source instanceof Element)) return;
+			if (!source.closest('[role="treeitem"]')) return;
 			const move = (next: number) => {
 				event.preventDefault();
 				roving.current = true;
@@ -337,6 +345,14 @@ export const FolderTreePicker = ({
 		[rows, focusedIndex, delimiter, activateRow, setExpanded, onCancel],
 	);
 
+	const draftAnchorOnScreen =
+		draft !== null &&
+		draft.anchorId !== null &&
+		(displayRows?.some(
+			(entry) => entry.kind === "create" && entry.parent.id === draft.anchorId,
+		) ??
+			false);
+
 	const draftForm = draft && (
 		<NewFolderForm
 			parentLabel={draft.parentLabel}
@@ -414,8 +430,10 @@ export const FolderTreePicker = ({
 			/>
 
 			{onCreateFolder && (
+				// Closing or filtering away the folder a draft was opened in leaves
+				// the form here instead of unmounting it mid-type or mid-create.
 				<div className="shrink-0 border-b border-line" data-create-anchor="top">
-					{draft?.anchorId === null ? (
+					{draft && !draftAnchorOnScreen ? (
 						draftForm
 					) : (
 						<NewFolderAction
@@ -430,7 +448,7 @@ export const FolderTreePicker = ({
 
 			{rows.length === 0 ? (
 				<p className="px-3 py-3 text-sm text-fg-muted" aria-live="polite">
-					{text.emptyMessage(query)}
+					{folders.length === 0 ? text.noFolders : text.emptyMessage(query)}
 				</p>
 			) : (
 				// A flattened tree: `aria-level` carries the nesting the indentation

package/src/components/primitives.stories.tsx

@@ -6,7 +6,6 @@ import { Button } from "./button.js";
 import { Card, CardBody, CardHeader, CardTitle } from "./card.js";
 import { FieldLabel } from "./field-label.js";
 import { Input } from "./input.js";
-import { ListItem } from "./list-item.js";
 import { PasswordInput } from "./password-input.js";
 import { SecuritySelect } from "./security-select.js";
 import { Select } from "./select.js";
@@ -176,32 +175,3 @@ export const Cards: Story = {
 		</div>
 	),
 };
-
-export const ListItems: Story = {
-	render: () => (
-		<div className="max-w-md divide-y divide-line p-8">
-			<ListItem
-				unread
-				leading={<Avatar name="Priya Natarajan" size="md" />}
-				trailing="08:52"
-			>
-				<div className="text-sm font-semibold text-fg">Priya Natarajan</div>
-				<div className="text-sm text-fg">Q3 roadmap review</div>
-				<p className="line-clamp-1 text-xs text-fg-subtle">
-					Sharing the agenda ahead of Thursday…
-				</p>
-			</ListItem>
-			<ListItem
-				active
-				leading={<Avatar name="Marcus Webb" size="md" />}
-				trailing="Wed"
-			>
-				<div className="text-sm font-medium text-fg-muted">Marcus Webb</div>
-				<div className="text-sm text-fg-muted">Re: Reading pane density</div>
-				<p className="line-clamp-1 text-xs text-fg-subtle">
-					Strong +1 on tightening the rows…
-				</p>
-			</ListItem>
-		</div>
-	),
-};

package/src/components/search-chip-input.tsx

@@ -65,8 +65,6 @@ export interface SearchChipInputProps {
 	 */
 	chips?: readonly SearchChip[];
 	onRemoveChip?: (id: string) => void;
-	/** Opens a chip's own value editor, where the host offers one. */
-	onActivateChip?: (id: string) => void;
 	/** The free text alongside the chips. */
 	value: string;
 	onChange: (value: string) => void;
@@ -105,8 +103,6 @@ export interface SearchChipInputProps {
 	 * when something outside needs to address the field by a stable id.
 	 */
 	inputId?: string;
-	/** Accessible name for the chip grid. */
-	chipsLabel?: string;
 	/**
 	 * Completions for what is being typed. Omit for a field that offers none;
 	 * see {@link SearchFieldSuggest} for what the field and the host each own.
@@ -165,7 +161,6 @@ const isEditableTarget = (target: EventTarget | null): boolean => {
 export const SearchChipInput = ({
 	chips = [],
 	onRemoveChip,
-	onActivateChip,
 	value,
 	onChange,
 	onClear,
@@ -175,7 +170,6 @@ export const SearchChipInput = ({
 	showClearButton = true,
 	size = "sm",
 	inputId,
-	chipsLabel = "Search filters",
 	suggest,
 	className,
 }: SearchChipInputProps) => {
@@ -313,16 +307,13 @@ export const SearchChipInput = ({
 				case "focusInput":
 					moveFocus(null);
 					return;
-				case "activateChip": {
-					const chip = chips[action.index];
-					if (chip && onActivateChip) onActivateChip(chip.id);
+				case "activateChip":
 					return;
-				}
 				case "none":
 					return;
 			}
 		},
-		[chips, removeChipAt, moveFocus, onActivateChip],
+		[chips, removeChipAt, moveFocus],
 	);
 
 	useEffect(() => {
@@ -371,7 +362,7 @@ export const SearchChipInput = ({
 					// biome-ignore lint/a11y/useSemanticElements: see above
 					<div
 						role="grid"
-						aria-label={chipsLabel}
+						aria-label="Search filters"
 						className="flex min-w-0 flex-wrap items-center gap-1"
 					>
 						{chips.map((chip, index) => (
@@ -386,9 +377,6 @@ export const SearchChipInput = ({
 								onFocusLabel={() => setFocusedChip(index)}
 								onKeyDown={handleChipKeyDown(index)}
 								onRemove={() => removeChipAt(index)}
-								onActivate={
-									onActivateChip ? () => onActivateChip(chip.id) : undefined
-								}
 							/>
 						))}
 					</div>

package/src/components/selection-wizard.tsx

@@ -351,7 +351,6 @@ export function SelectionSample({
 }
 
 export interface FooterNavProps {
-	backLabel?: string;
 	onBack: () => void;
 	nextLabel: string;
 	onNext: () => void;
@@ -369,7 +368,6 @@ export interface FooterNavProps {
  * carries the two ways that reason reaches the user.
  */
 export function FooterNav({
-	backLabel = "Back",
 	onBack,
 	nextLabel,
 	onNext,
@@ -396,7 +394,7 @@ export function FooterNav({
 					icon={<ArrowLeft className="size-4" />}
 					className="shrink-0"
 				>
-					{backLabel}
+					Back
 				</Button>
 				<Button
 					variant={nextVariant}

package/src/index.ts

@@ -184,12 +184,8 @@ export {
 } from "./components/filter-rule.js";
 export {
 	type ClauseEditState,
-	FilterRuleDialog,
-	type FilterRuleDialogProps,
 	FilterRuleEditor,
 	type FilterRuleEditorProps,
-	FilterRuleSheet,
-	type FilterRuleSheetProps,
 } from "./components/filter-rule-editor.js";
 export {
 	FilterSheet,
@@ -273,7 +269,6 @@ export {
 	type LabelChipData,
 	type LabelChipProps,
 } from "./components/label-chip.js";
-export { ListItem, type ListItemProps } from "./components/list-item.js";
 export {
 	type MailAction,
 	MailActionToolbar,
@@ -288,10 +283,6 @@ export {
 	MessageBodyView,
 	type MessageBodyViewProps,
 } from "./components/message-body-view.js";
-export {
-	MessageHeader,
-	type MessageHeaderProps,
-} from "./components/message-header.js";
 export { MessageListPane } from "./components/message-list-pane.js";
 export {
 	type FilterReach,

package/src/components/list-item.tsx

@@ -1,39 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-import { cn } from "../lib/cn.js";
-
-export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
-	leading?: ReactNode;
-	trailing?: ReactNode;
-	active?: boolean;
-	unread?: boolean;
-}
-
-export function ListItem({
-	leading,
-	trailing,
-	active,
-	unread,
-	className,
-	children,
-	...props
-}: ListItemProps) {
-	return (
-		<div
-			className={cn(
-				"group relative flex cursor-pointer items-start gap-3 px-4 py-3 transition-colors",
-				active ? "bg-accent-2-soft" : "hover:bg-surface-sunken",
-				className,
-			)}
-			{...props}
-		>
-			{unread && (
-				<span className="absolute left-1.5 top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent" />
-			)}
-			{leading && <div className="shrink-0 pt-0.5">{leading}</div>}
-			<div className="min-w-0 flex-1">{children}</div>
-			{trailing && (
-				<div className="shrink-0 text-2xs text-fg-subtle">{trailing}</div>
-			)}
-		</div>
-	);
-}

package/src/components/message-header.render.test.ts

@@ -1,58 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import type { EnvelopeAddress } from "./address-display.js";
-import { MessageHeader, type MessageHeaderProps } from "./message-header.js";
-
-const ada: EnvelopeAddress = {
-	displayName: "Ada Lovelace",
-	normalizedEmail: "ada@example.com",
-};
-
-const base: MessageHeaderProps = {
-	subject: "Quarterly numbers",
-	from: [ada],
-	to: [{ normalizedEmail: "team@example.com" }],
-	date: "Mon, 23 Jun 2026, 14:00",
-	senderTrust: "wellknown",
-};
-
-describe("MessageHeader", () => {
-	it("renders subject, addresses and the formatted date", () => {
-		const html = renderToString(createElement(MessageHeader, base));
-		assert.match(html, /Quarterly numbers/);
-		assert.match(html, /Ada Lovelace/);
-		assert.match(html, /team@example.com/);
-		assert.match(html, /Mon, 23 Jun 2026, 14:00/);
-	});
-
-	it("shows a fallback for a missing subject", () => {
-		const html = renderToString(
-			createElement(MessageHeader, { ...base, subject: undefined }),
-		);
-		assert.match(html, /\(No subject\)/);
-	});
-
-	it("renders the category badge and trust indicator", () => {
-		const html = renderToString(
-			createElement(MessageHeader, {
-				...base,
-				category: "newsletter",
-				senderTrust: "vip",
-			}),
-		);
-		assert.match(html, /aria-label="Category: newsletter"/);
-		assert.match(html, /aria-label="VIP sender"/);
-	});
-
-	it("renders an actions slot when provided", () => {
-		const html = renderToString(
-			createElement(MessageHeader, {
-				...base,
-				actions: createElement("button", { type: "button" }, "Menu"),
-			}),
-		);
-		assert.match(html, /Menu/);
-	});
-});

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

@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Menu } from "lucide-react";
-import type { EnvelopeAddress } from "./address-display.js";
-import { MessageHeader } from "./message-header.js";
-
-const meta: Meta<typeof MessageHeader> = {
-	title: "Mail/MessageHeader",
-	component: MessageHeader,
-	parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj<typeof MessageHeader>;
-
-const named = (name: string, email: string): EnvelopeAddress => ({
-	displayName: name,
-	normalizedEmail: email,
-});
-
-const trustedFrom: EnvelopeAddress = {
-	...named("Ada Lovelace", "ada@example.com"),
-	flags: { trusted: { value: true } },
-};
-
-const date = "Mon, 23 Jun 2026, 14:00";
-
-export const TrustedSender: Story = {
-	args: {
-		subject: "Quarterly numbers are in",
-		from: [trustedFrom],
-		to: [named("The team", "team@example.com")],
-		date,
-		senderTrust: "wellknown",
-	},
-};
-
-export const NewSenderNewsletter: Story = {
-	name: "New sender + newsletter",
-	args: {
-		subject: "Welcome to the weekly digest",
-		from: [named("Digest", "hello@digest.example.com")],
-		to: [{ normalizedEmail: "you@example.com" }],
-		date,
-		category: "newsletter",
-		senderTrust: "unknown",
-	},
-};
-
-export const VipWithManyRecipients: Story = {
-	name: "VIP + many recipients",
-	args: {
-		subject: "Board meeting follow-up",
-		from: [{ ...named("Grace Hopper", "grace@example.com") }],
-		to: [
-			named("Alan Turing", "alan@example.com"),
-			named("Katherine Johnson", "katherine@example.com"),
-			named("Dorothy Vaughan", "dorothy@example.com"),
-			named("Mary Jackson", "mary@example.com"),
-		],
-		cc: [named("Margaret Hamilton", "margaret@example.com")],
-		date,
-		senderTrust: "vip",
-	},
-};
-
-export const NoSubjectWithActions: Story = {
-	name: "No subject + actions slot",
-	args: {
-		from: [named("Someone", "someone@example.com")],
-		to: [{ normalizedEmail: "you@example.com" }],
-		date,
-		senderTrust: "wellknown",
-		actions: (
-			<button type="button" aria-label="Menu" className="text-fg-muted">
-				<Menu className="size-5" />
-			</button>
-		),
-	},
-};

package/src/components/message-header.tsx

@@ -1,59 +0,0 @@
-import type { ReactNode } from "react";
-import { AddressList, type EnvelopeAddress } from "./address-display.js";
-import { CategoryBadge, type MessageCategory } from "./category-badge.js";
-import {
-	type SenderTrust,
-	SenderTrustIndicator,
-} from "./sender-trust-indicator.js";
-
-export interface MessageHeaderProps {
-	subject?: string;
-	from: EnvelopeAddress[];
-	to: EnvelopeAddress[];
-	cc?: EnvelopeAddress[];
-	/** Pre-formatted, human-readable date. The consumer owns formatting. */
-	date: string;
-	category?: MessageCategory;
-	senderTrust: SenderTrust;
-	/**
-	 * Optional slot for surfaces (hamburger menu, etc) rendered inline on the
-	 * right of the subject line. Kept generic so the header doesn't need to
-	 * know what action set is in play.
-	 */
-	actions?: ReactNode;
-}
-
-export const MessageHeader = ({
-	subject,
-	from,
-	to,
-	cc = [],
-	date,
-	category,
-	senderTrust,
-	actions,
-}: MessageHeaderProps) => {
-	return (
-		<div className="border-b border-line p-4">
-			<div className="flex items-start justify-between gap-2 mb-3">
-				<div className="flex items-center gap-2 min-w-0 flex-1">
-					<h1 className="text-xl font-semibold truncate">
-						{subject || "(No subject)"}
-					</h1>
-					<CategoryBadge category={category} size="md" />
-					<SenderTrustIndicator senderTrust={senderTrust} size="md" />
-				</div>
-				{actions && <div className="shrink-0">{actions}</div>}
-			</div>
-			<div className="space-y-1">
-				<AddressList label="From" addresses={from} showTrustedBadge />
-				<AddressList label="To" addresses={to} />
-				{cc.length > 0 && <AddressList label="Cc" addresses={cc} />}
-				<div className="flex gap-2 text-sm">
-					<span className="text-fg-muted shrink-0 w-12">Date:</span>
-					<span className="text-fg">{date}</span>
-				</div>
-			</div>
-		</div>
-	);
-};