@remit/ui 0.0.69 → 0.0.70

package/package.json

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

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { type ReactNode, useState } from "react";
 import type { StepId } from "../lib/wizard-steps.js";
 import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
-import { FooterNav, WizardScreen } from "./selection-wizard.js";
+import { FolderStepBody, FooterNav, WizardScreen } from "./selection-wizard.js";
 
 const folders: FolderTreeNode[] = [
 	{ id: "mbx-inbox", label: "Inbox", path: "INBOX", isCurrent: true },
@@ -332,30 +332,17 @@ function WizardFolderStep() {
 				/>
 			}
 		>
-			<div className="flex min-h-0 flex-col gap-3">
-				<p className="px-1 text-xs text-fg-muted">
-					{chosen
-						? `Moving to ${chosen.label}.`
-						: "Tap a folder to open it, or make a new one where you want it."}
-				</p>
-				<div className="flex min-h-0 flex-1 overflow-hidden rounded-lg border border-line bg-surface">
-					<FolderTreePicker
-						folders={known}
-						selectedId={selected}
-						onSelect={setSelected}
-						onCreateFolder={(name, parentPath) =>
-							createFolder(name, parentPath).then((created) => {
-								setKnown((current) => [...current, created]);
-								return created;
-							})
-						}
-						labels={{
-							createPending:
-								"Waiting for the mail server to confirm the folder…",
-						}}
-					/>
-				</div>
-			</div>
+			<FolderStepBody
+				folders={known}
+				mailboxId={selected}
+				onSelect={setSelected}
+				onCreateFolder={(name, parentPath) =>
+					createFolder(name, parentPath).then((created) => {
+						setKnown((current) => [...current, created]);
+						return created;
+					})
+				}
+			/>
 		</WizardScreen>
 	);
 }

package/src/components/rescue-from-spam-flow.render.test.ts

@@ -2,7 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
-import type { MoveMailboxOption } from "./move-mailbox-picker.js";
+import type { FolderTreeNode } from "./folder-tree-picker.js";
 import type { RescueCandidate } from "./rescue-candidate-row.js";
 import {
 	RescueFromSpamFlow,
@@ -34,9 +34,9 @@ const candidates: RescueCandidate[] = [
 	},
 ];
 
-const folders: MoveMailboxOption[] = [
-	{ id: "inbox", label: "Inbox" },
-	{ id: "spam", label: "Spam", isCurrent: true },
+const folders: FolderTreeNode[] = [
+	{ id: "inbox", label: "Inbox", path: "INBOX" },
+	{ id: "spam", label: "Spam", path: "Junk", isCurrent: true },
 ];
 
 const renderFlow = (open: boolean): string =>

package/src/components/rescue-from-spam-flow.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { Button } from "./button.js";
-import type { MoveMailboxOption } from "./move-mailbox-picker.js";
+import type { FolderTreeNode } from "./folder-tree-picker.js";
 import type { RescueCandidate } from "./rescue-candidate-row.js";
 import { RescueFromSpamFlow } from "./rescue-from-spam-flow.js";
 
@@ -54,12 +54,14 @@ const CANDIDATES: RescueCandidate[] = [
 	},
 ];
 
-const FOLDERS: MoveMailboxOption[] = [
-	{ id: "inbox", label: "Inbox" },
-	{ id: "spam", label: "Spam", isCurrent: true },
-	{ id: "receipts", label: "Receipts" },
-	{ id: "family", label: "Family" },
-	{ id: "work", label: "Work", searchValue: "work clients projects" },
+const FOLDERS: FolderTreeNode[] = [
+	{ id: "inbox", label: "Inbox", path: "INBOX" },
+	{ id: "spam", label: "Spam", path: "Junk", isCurrent: true },
+	{ id: "receipts", label: "Receipts", path: "Receipts" },
+	{ id: "family", label: "Family", path: "Family" },
+	{ id: "work", label: "Work", path: "Work" },
+	{ id: "work-clients", label: "Clients", path: "Work/Clients" },
+	{ id: "work-projects", label: "Projects", path: "Work/Projects" },
 ];
 
 function Demo() {

package/src/components/rescue-from-spam-flow.tsx

@@ -3,10 +3,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Banner } from "./banner.js";
 import { BottomSheet } from "./bottom-sheet.js";
 import { Button } from "./button.js";
-import {
-	type MoveMailboxOption,
-	MoveMailboxPicker,
-} from "./move-mailbox-picker.js";
+import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
 import type { RescueCandidate } from "./rescue-candidate-row.js";
 import {
 	groupRescueCandidatesBySender,
@@ -23,7 +20,9 @@ export interface RescueFromSpamFlowProps {
 	/** Where the move lands unless the user picks another folder. */
 	defaultDestinationId: string;
 	/** Folders the user can send the rescued mail to. */
-	availableFolders: MoveMailboxOption[];
+	availableFolders: FolderTreeNode[];
+	/** The account's hierarchy separator, which the tree nests on. */
+	delimiter?: string;
 	/** Run the move. The flow shows the done state right after. */
 	onConfirmMove: (messageIds: string[], destinationId: string) => void;
 	/** Close the sheet without moving anything. */
@@ -42,7 +41,7 @@ export const rescueMoveConsequence = (
 ): string =>
 	`Moves ${count === 1 ? "this message" : `these ${count} ${plural(count)}`} out of Spam to ${destinationLabel} now. Nothing later.`;
 
-const folderLabel = (folders: MoveMailboxOption[], id: string): string =>
+const folderLabel = (folders: FolderTreeNode[], id: string): string =>
 	folders.find((f) => f.id === id)?.label ?? "Inbox";
 
 function ExplainWhy() {
@@ -157,13 +156,15 @@ function ReviewStep({
 function DestinationStep({
 	count,
 	folders,
+	delimiter,
 	destination,
 	onPick,
 	onMove,
 	onBack,
 }: {
 	count: number;
-	folders: MoveMailboxOption[];
+	folders: FolderTreeNode[];
+	delimiter?: string;
 	destination: string;
 	onPick: (id: string) => void;
 	onMove: () => void;
@@ -180,16 +181,17 @@ function DestinationStep({
 				</p>
 			</div>
 
-			<div className="min-h-0 flex-1 overflow-y-auto px-row-inset py-2">
+			<div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-row-inset py-2">
 				{picking ? (
-					<div className="overflow-hidden rounded-xl border border-line bg-surface">
-						<MoveMailboxPicker
-							mailboxes={folders}
-							autoFocus
-							onSelect={(id) => {
-								onPick(id);
-								setPicking(false);
-							}}
+					<div className="flex min-h-0 flex-1 overflow-hidden rounded-xl border border-line bg-surface">
+						{/* Picking a folder also opens it, so the tree stays up: closing
+						    on the first tap would put anything nested out of reach. The
+						    consequence line below states the destination as it changes. */}
+						<FolderTreePicker
+							folders={folders}
+							selectedId={destination}
+							delimiter={delimiter}
+							onSelect={onPick}
 							onCancel={() => setPicking(false)}
 						/>
 					</div>
@@ -277,6 +279,7 @@ export function RescueFromSpamFlow({
 	candidates,
 	defaultDestinationId,
 	availableFolders,
+	delimiter,
 	onConfirmMove,
 	onCancel,
 }: RescueFromSpamFlowProps) {
@@ -345,6 +348,7 @@ export function RescueFromSpamFlow({
 				<DestinationStep
 					count={selectedCount}
 					folders={availableFolders}
+					delimiter={delimiter}
 					destination={destination}
 					onPick={setDestination}
 					onMove={move}

package/src/components/selection-wizard.render.test.ts

@@ -76,14 +76,16 @@ const propertiesProps = {
 };
 
 const folderProps = {
-	mailboxes: [
-		{ id: "mbx-archive", label: "Archive" },
-		{ id: "mbx-travel", label: "Travel" },
-		{ id: "mbx-inbox", label: "Inbox", isCurrent: true },
+	folders: [
+		{ id: "mbx-archive", label: "Archive", path: "Archive" },
+		{ id: "mbx-travel", label: "Travel", path: "Travel" },
+		{ id: "mbx-travel-2026", label: "2026", path: "Travel/2026" },
+		{ id: "mbx-inbox", label: "Inbox", path: "INBOX", isCurrent: true },
 	],
 	mailboxId: "mbx-travel",
 	onSelect: noop,
-	onCreateFolder: () => Promise.resolve({ id: "mbx-new", label: "Hotels" }),
+	onCreateFolder: () =>
+		Promise.resolve({ id: "mbx-new", label: "Hotels", path: "Travel/Hotels" }),
 };
 
 const draft = (over: Partial<WizardDraft> = {}): WizardDraft => ({
@@ -359,11 +361,16 @@ describe("FolderStepBody", () => {
 		assert.match(html, /Inbox \(current folder\)/);
 	});
 
-	it("says how to make a folder when none is chosen yet", () => {
+	it("starts at the top level, with nested folders behind the one holding them", () => {
+		const html = renderToString(createElement(FolderStepBody, folderProps));
+		assert.doesNotMatch(html, /Move to 2026/);
+	});
+
+	it("says how to reach a folder when none is chosen yet", () => {
 		const html = renderToString(
 			createElement(FolderStepBody, { ...folderProps, mailboxId: undefined }),
 		);
-		assert.match(text(html), /type a name that doesn&#x27;t exist yet/);
+		assert.match(text(html), /Tap a folder to open it/);
 	});
 });
 

package/src/components/selection-wizard.tsx

@@ -69,11 +69,8 @@ import {
 	scopeLabel,
 } from "./filter-rule.js";
 import type { ClauseEditState } from "./filter-rule-editor.js";
+import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
 import { Input } from "./input.js";
-import {
-	type MoveMailboxOption,
-	MoveMailboxPicker,
-} from "./move-mailbox-picker.js";
 import { ProgressBar } from "./progress-bar.js";
 import type { SearchConversionNotice } from "./search-conversion.js";
 import { SearchConversionNoticeView } from "./search-conversion-notice.js";
@@ -651,7 +648,7 @@ export interface FolderStepProps {
 	 * (`buildMoveTargets`). The wizard does not reorder them: a second ordering
 	 * beside the one the Move picker already applies would fight it.
 	 */
-	mailboxes: readonly MoveMailboxOption[];
+	folders: readonly FolderTreeNode[];
 	/** The destination chosen so far. */
 	mailboxId?: string;
 	onSelect: (mailboxId: string) => void;
@@ -664,8 +661,11 @@ export interface FolderStepProps {
 	 */
 	onCreateFolder?: (
 		name: string,
+		parentPath: string,
 		signal?: AbortSignal,
-	) => Promise<MoveMailboxOption>;
+	) => Promise<FolderTreeNode>;
+	/** The account's hierarchy separator, which the tree nests on. */
+	delimiter?: string;
 	/**
 	 * Why there is no folder list to choose from — a selection spanning accounts
 	 * has no single account whose folders these could be (#477 5.5). Said here
@@ -675,13 +675,14 @@ export interface FolderStepProps {
 }
 
 export function FolderStepBody({
-	mailboxes,
+	folders,
 	mailboxId,
 	onSelect,
 	onCreateFolder,
+	delimiter,
 	restriction,
 }: FolderStepProps) {
-	const chosen = mailboxes.find((mailbox) => mailbox.id === mailboxId);
+	const chosen = folders.find((folder) => folder.id === mailboxId);
 	return (
 		<div className="flex min-h-0 flex-col gap-3">
 			<p
@@ -693,17 +694,16 @@ export function FolderStepBody({
 				{restriction ??
 					(chosen
 						? `Moving to ${chosen.label}.`
-						: "Search for a folder, or type a name that doesn't exist yet to make one.")}
+						: "Tap a folder to open it, or make a new one where you want it.")}
 			</p>
-			<div className="overflow-hidden rounded-lg border border-line bg-surface">
-				<MoveMailboxPicker
-					mailboxes={mailboxes}
+			<div className="flex min-h-0 flex-1 overflow-hidden rounded-lg border border-line bg-surface">
+				<FolderTreePicker
+					folders={folders}
+					selectedId={mailboxId}
 					onSelect={onSelect}
 					onCreateFolder={onCreateFolder}
-					autoFocus
+					delimiter={delimiter}
 					labels={{
-						searchPlaceholder: "Move to…",
-						optionLabel: (label) => `Move to ${label}`,
 						createPending: "Waiting for the mail server to confirm the folder…",
 					}}
 				/>

package/src/index.ts

@@ -330,12 +330,6 @@ export {
 	MobileSearchView,
 	type MobileSearchViewProps,
 } from "./components/mobile-search-view.js";
-export {
-	type MoveMailboxOption,
-	MoveMailboxPicker,
-	type MoveMailboxPickerLabels,
-	type MoveMailboxPickerProps,
-} from "./components/move-mailbox-picker.js";
 export {
 	NavSidebar,
 	type NavSidebarProps,

package/src/components/move-mailbox-picker.create.test.ts

@@ -1,210 +0,0 @@
-/**
- * The create-and-move affordance: a search that names no existing folder offers
- * a create row only when `onCreateFolder` is wired; resolving it selects the new
- * folder. Mounted against jsdom since it turns on typed search state and an
- * async resolve. React is imported after the jsdom globals are installed so the
- * controlled-input value tracker binds to jsdom's prototypes.
- */
-import assert from "node:assert/strict";
-import { after, afterEach, before, beforeEach, describe, it } from "node:test";
-import type { JSDOM } from "jsdom";
-import type {
-	act as reactAct,
-	createElement as reactCreateElement,
-} from "react";
-import type { Root, createRoot as reactCreateRoot } from "react-dom/client";
-import type {
-	MoveMailboxOption,
-	MoveMailboxPicker as MoveMailboxPickerType,
-} from "./move-mailbox-picker.js";
-
-const mailboxes: MoveMailboxOption[] = [
-	{ id: "archive", label: "Archive" },
-	{ id: "trash", label: "Trash" },
-];
-
-let dom: JSDOM;
-let container: HTMLElement;
-let root: Root;
-let act: typeof reactAct;
-let createElement: typeof reactCreateElement;
-let createRoot: typeof reactCreateRoot;
-let MoveMailboxPicker: typeof MoveMailboxPickerType;
-
-before(async () => {
-	const { JSDOM: JSDOMCtor } = await import("jsdom");
-	dom = new JSDOMCtor(
-		"<!doctype html><html><body><div id=root></div></body></html>",
-		{ url: "http://localhost/", pretendToBeVisual: true },
-	);
-	globalThis.window = dom.window as unknown as typeof globalThis.window;
-	globalThis.document = dom.window.document;
-	globalThis.HTMLElement = dom.window.HTMLElement;
-	globalThis.Element = dom.window.Element;
-	globalThis.Event = dom.window.Event;
-	Object.defineProperty(globalThis, "navigator", {
-		value: dom.window.navigator,
-		configurable: true,
-	});
-	(
-		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
-	).IS_REACT_ACT_ENVIRONMENT = true;
-
-	const react = await import("react");
-	act = react.act;
-	createElement = react.createElement;
-	({ createRoot } = await import("react-dom/client"));
-	({ MoveMailboxPicker } = await import("./move-mailbox-picker.js"));
-});
-
-after(() => {
-	dom.window.close();
-});
-
-beforeEach(() => {
-	container = dom.window.document.getElementById(
-		"root",
-	) as unknown as HTMLElement;
-	container.innerHTML = "";
-	root = createRoot(container);
-});
-
-afterEach(() => {
-	act(() => {
-		root.unmount();
-	});
-});
-
-function typeSearch(value: string) {
-	const input = container.querySelector(
-		'input[aria-label="Filter folders"]',
-	) as HTMLInputElement;
-	const setter = Object.getOwnPropertyDescriptor(
-		dom.window.HTMLInputElement.prototype,
-		"value",
-	)?.set;
-	setter?.call(input, value);
-	act(() => {
-		input.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
-	});
-}
-
-function createRow(): HTMLButtonElement | null {
-	return (
-		Array.from(container.querySelectorAll("button")).find((button) =>
-			button.textContent?.startsWith("Create "),
-		) ?? null
-	);
-}
-
-describe("MoveMailboxPicker create-and-move", () => {
-	it("offers no create row without onCreateFolder, even when nothing matches", () => {
-		act(() => {
-			root.render(
-				createElement(MoveMailboxPicker, {
-					mailboxes,
-					onSelect: () => {},
-				}),
-			);
-		});
-		typeSearch("Taxes");
-		assert.equal(createRow(), null);
-	});
-
-	it("offers a create row when the query names no existing folder", () => {
-		act(() => {
-			root.render(
-				createElement(MoveMailboxPicker, {
-					mailboxes,
-					onSelect: () => {},
-					onCreateFolder: async () => ({ id: "new", label: "Taxes" }),
-				}),
-			);
-		});
-		typeSearch("Taxes");
-		const row = createRow();
-		assert.ok(row, "the create row is present");
-		assert.match(row?.textContent ?? "", /Create "Taxes"/);
-	});
-
-	it("hides the create row when the query exactly names an existing folder", () => {
-		act(() => {
-			root.render(
-				createElement(MoveMailboxPicker, {
-					mailboxes,
-					onSelect: () => {},
-					onCreateFolder: async () => ({ id: "new", label: "Archive" }),
-				}),
-			);
-		});
-		typeSearch("archive");
-		assert.equal(createRow(), null);
-	});
-
-	it("creates the folder and selects it in one step", async () => {
-		const selected: string[] = [];
-		act(() => {
-			root.render(
-				createElement(MoveMailboxPicker, {
-					mailboxes,
-					onSelect: (id: string) => selected.push(id),
-					onCreateFolder: async (name: string) => ({
-						id: "created-taxes",
-						label: name,
-					}),
-				}),
-			);
-		});
-		typeSearch("Taxes");
-		await act(async () => {
-			createRow()?.click();
-		});
-		assert.deepEqual(selected, ["created-taxes"]);
-	});
-
-	it("surfaces a validation rejection message inline without selecting anything", async () => {
-		const selected: string[] = [];
-		act(() => {
-			root.render(
-				createElement(MoveMailboxPicker, {
-					mailboxes,
-					onSelect: (id: string) => selected.push(id),
-					onCreateFolder: async () => {
-						throw new Error('A folder name can\'t contain "/".');
-					},
-				}),
-			);
-		});
-		typeSearch("Work/Receipts");
-		await act(async () => {
-			createRow()?.click();
-		});
-		assert.deepEqual(selected, []);
-		assert.match(
-			container.querySelector('[role="alert"]')?.textContent ?? "",
-			/can't contain/,
-		);
-	});
-
-	it("falls back to the generic message for a non-Error rejection", async () => {
-		act(() => {
-			root.render(
-				createElement(MoveMailboxPicker, {
-					mailboxes,
-					onSelect: () => {},
-					onCreateFolder: async () => {
-						throw "opaque";
-					},
-				}),
-			);
-		});
-		typeSearch("Taxes");
-		await act(async () => {
-			createRow()?.click();
-		});
-		assert.match(
-			container.querySelector('[role="alert"]')?.textContent ?? "",
-			/Couldn't create that folder/,
-		);
-	});
-});

package/src/components/move-mailbox-picker.render.test.ts

@@ -1,113 +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 MoveMailboxOption,
-	MoveMailboxPicker,
-	moveMailboxPickerInternals,
-} from "./move-mailbox-picker.js";
-
-const {
-	findFirstSelectable,
-	findLastSelectable,
-	findNextSelectable,
-	matchesQuery,
-} = moveMailboxPickerInternals;
-
-const options: MoveMailboxOption[] = [
-	{ id: "inbox", label: "Inbox", isCurrent: true },
-	{ id: "archive", label: "Archive" },
-	{ id: "trash", label: "Trash" },
-];
-
-describe("roving-focus selection", () => {
-	it("skips the current folder when finding the first selectable", () => {
-		assert.equal(findFirstSelectable(options), 1);
-	});
-
-	it("finds the last selectable", () => {
-		assert.equal(findLastSelectable(options), 2);
-	});
-
-	it("wraps forward over the non-selectable current folder", () => {
-		assert.equal(findNextSelectable(options, 2, 1), 1);
-	});
-
-	it("wraps backward over the non-selectable current folder", () => {
-		assert.equal(findNextSelectable(options, 1, -1), 2);
-	});
-
-	it("returns -1 when every option is the current folder", () => {
-		const allCurrent: MoveMailboxOption[] = [
-			{ id: "a", label: "A", isCurrent: true },
-		];
-		assert.equal(findFirstSelectable(allCurrent), -1);
-		assert.equal(findNextSelectable(allCurrent, 0, 1), -1);
-	});
-});
-
-describe("query matching", () => {
-	it("matches on the display label, case-insensitively", () => {
-		assert.equal(matchesQuery({ id: "a", label: "Archive" }, "arch"), true);
-	});
-
-	it("matches on the hidden searchValue (nested path)", () => {
-		assert.equal(
-			matchesQuery(
-				{ id: "r", label: "Receipts", searchValue: "finance/receipts" },
-				"finance/",
-			),
-			true,
-		);
-	});
-
-	it("does not match unrelated text", () => {
-		assert.equal(matchesQuery({ id: "a", label: "Archive" }, "spam"), false);
-	});
-});
-
-describe("MoveMailboxPicker render", () => {
-	it("renders each mailbox as a listbox option", () => {
-		const html = renderToString(
-			createElement(MoveMailboxPicker, {
-				mailboxes: options,
-				onSelect: () => {},
-			}),
-		);
-		assert.match(html, /role="listbox"/);
-		const optionCount = html.match(/role="option"/g)?.length ?? 0;
-		assert.equal(optionCount, 3);
-	});
-
-	it("marks the current folder as a non-interactive marker, never a disabled button", () => {
-		const html = renderToString(
-			createElement(MoveMailboxPicker, {
-				mailboxes: options,
-				onSelect: () => {},
-			}),
-		);
-		assert.match(html, /aria-label="Inbox \(current folder\)"/);
-		assert.match(html, /aria-current="true"/);
-		assert.match(html, /aria-label="Move to Archive"/);
-		assert.doesNotMatch(html, /disabled/);
-	});
-
-	it("renders the empty state when there are no mailboxes", () => {
-		const html = renderToString(
-			createElement(MoveMailboxPicker, { mailboxes: [], onSelect: () => {} }),
-		);
-		assert.match(html, /No folders match/);
-	});
-
-	it("applies caller-supplied labels", () => {
-		const html = renderToString(
-			createElement(MoveMailboxPicker, {
-				mailboxes: options,
-				onSelect: () => {},
-				labels: { optionLabel: (label) => `Verplaats naar ${label}` },
-			}),
-		);
-		assert.match(html, /aria-label="Verplaats naar Archive"/);
-	});
-});

package/src/components/move-mailbox-picker.stories.tsx

@@ -1,313 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import {
-	type MoveMailboxOption,
-	MoveMailboxPicker,
-} from "./move-mailbox-picker.js";
-
-const mailboxes: MoveMailboxOption[] = [
-	{ id: "inbox", label: "Inbox", isCurrent: true },
-	{ id: "archive", label: "Archive" },
-	{ id: "trash", label: "Trash" },
-	{ id: "spam", label: "Spam" },
-	{ id: "receipts", label: "Receipts", searchValue: "finance/receipts" },
-	{ id: "travel", label: "Travel", searchValue: "finance/travel" },
-	{ id: "newsletters", label: "Newsletters" },
-];
-
-const manyMailboxes: MoveMailboxOption[] = [
-	{ id: "inbox", label: "Inbox", isCurrent: true },
-	...Array.from({ length: 24 }, (_, i) => ({
-		id: `folder-${i}`,
-		label: `Project ${String(i + 1).padStart(2, "0")}`,
-	})),
-];
-
-const meta: Meta<typeof MoveMailboxPicker> = {
-	title: "Mail/MoveMailboxPicker",
-	component: MoveMailboxPicker,
-	parameters: { layout: "centered" },
-	decorators: [
-		(Story) => (
-			<div className="w-72 max-h-96 overflow-hidden rounded-md border border-line bg-surface shadow-lg">
-				<Story />
-			</div>
-		),
-	],
-};
-export default meta;
-
-type Story = StoryObj<typeof MoveMailboxPicker>;
-
-const Picker = ({ options }: { options: MoveMailboxOption[] }) => {
-	const [moved, setMoved] = useState<string | null>(null);
-	return (
-		<div className="flex flex-col">
-			<MoveMailboxPicker mailboxes={options} onSelect={setMoved} />
-			{moved && (
-				<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
-					Moved to {moved}
-				</p>
-			)}
-		</div>
-	);
-};
-
-export const Default: Story = {
-	name: "Default (current folder marked)",
-	render: () => <Picker options={mailboxes} />,
-};
-
-export const ManyMailboxes: Story = {
-	name: "Many mailboxes (scrolls)",
-	render: () => <Picker options={manyMailboxes} />,
-};
-
-export const Empty: Story = {
-	name: "Empty list",
-	render: () => <Picker options={[]} />,
-};
-
-export const Autofocus: Story = {
-	name: "Autofocus search (mobile sheet)",
-	render: () => (
-		<MoveMailboxPicker mailboxes={mailboxes} onSelect={() => {}} autoFocus />
-	),
-};
-
-let createdSeq = 0;
-const mockCreateFolder = (name: string): Promise<MoveMailboxOption> =>
-	new Promise((resolve) => {
-		createdSeq += 1;
-		setTimeout(
-			() => resolve({ id: `created-${createdSeq}`, label: name }),
-			400,
-		);
-	});
-
-const CreatePicker = () => {
-	const [moved, setMoved] = useState<string | null>(null);
-	return (
-		<div className="flex flex-col">
-			<MoveMailboxPicker
-				mailboxes={mailboxes}
-				onSelect={setMoved}
-				onCreateFolder={mockCreateFolder}
-			/>
-			{moved && (
-				<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
-					Moved to {moved}
-				</p>
-			)}
-		</div>
-	);
-};
-
-/**
- * With `onCreateFolder` wired, a search that names no existing folder offers a
- * create-and-move row at the bottom. Type e.g. "Taxes", then pick the create
- * row — the folder is created and the message moved into it in one step.
- */
-export const CreateAndMove: Story = {
-	name: "Create folder from search",
-	render: () => <CreatePicker />,
-};
-
-/**
- * Type a folder name into the search box and press the create-and-move row —
- * used by the pending and error stories so each lands in its state without a
- * manual click-through.
- */
-async function typeAndCreate(canvasElement: HTMLElement, folderName: string) {
-	const setInputValue = Object.getOwnPropertyDescriptor(
-		HTMLInputElement.prototype,
-		"value",
-	)?.set;
-	const input = canvasElement.querySelector<HTMLInputElement>(
-		'input[type="search"]',
-	);
-	if (!input) return;
-	setInputValue?.call(input, folderName);
-	input.dispatchEvent(new Event("input", { bubbles: true }));
-	const createButton = Array.from(
-		canvasElement.querySelectorAll<HTMLButtonElement>("button"),
-	).find((button) => button.textContent?.includes(`Create "${folderName}"`));
-	createButton?.click();
-}
-
-/** Mirrors the web-client wait's honest timeout copy. */
-const TIMEOUT_MESSAGE =
-	"The folder was created but the mail server hasn't confirmed it yet, so nothing was attached to it. It's in your folder list — try again in a moment.";
-
-const tick = () => new Promise((resolve) => setTimeout(resolve, 60));
-
-const neverResolvesCreateFolder = (): Promise<MoveMailboxOption> =>
-	new Promise<MoveMailboxOption>(() => undefined);
-
-const rejectingCreateFolder =
-	(message: string) => (): Promise<MoveMailboxOption> =>
-		Promise.reject(new Error(message));
-
-/** Rejects the first attempt, resolves the retry — the resume the hook performs. */
-const failThenSucceedCreateFolder = () => {
-	let attempts = 0;
-	return (name: string): Promise<MoveMailboxOption> => {
-		attempts += 1;
-		return attempts === 1
-			? Promise.reject(new Error(TIMEOUT_MESSAGE))
-			: Promise.resolve({ id: "mbx-created", label: name });
-	};
-};
-
-/** Never resolves on its own; rejects with an AbortError when the signal aborts. */
-const abortAwareCreateFolder = (
-	_name: string,
-	signal?: AbortSignal,
-): Promise<MoveMailboxOption> =>
-	new Promise<MoveMailboxOption>((_resolve, reject) => {
-		signal?.addEventListener("abort", () =>
-			reject(new DOMException("Aborted", "AbortError")),
-		);
-	});
-
-/**
- * The move is a dependent write on the folder: the create-and-move row does not
- * resolve until the mail server confirms the folder, so the move never races the
- * folder into existence. The wait shows as "Creating folder…".
- */
-export const CreateFolderInFlight: Story = {
-	name: "Create folder — waiting for the server",
-	render: () => (
-		<MoveMailboxPicker
-			mailboxes={mailboxes}
-			onSelect={() => undefined}
-			onCreateFolder={neverResolvesCreateFolder}
-		/>
-	),
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-	},
-};
-
-/**
- * The folder create failed on the mail server. No move runs; the error is shown
- * inline and the create row can be pressed again to retry.
- */
-export const CreateFolderFailed: Story = {
-	name: "Create folder — failed (retry)",
-	render: () => (
-		<MoveMailboxPicker
-			mailboxes={mailboxes}
-			onSelect={() => undefined}
-			onCreateFolder={rejectingCreateFolder(
-				"The folder couldn't be created on the mail server. Please try again.",
-			)}
-		/>
-	),
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-	},
-};
-
-/**
- * The folder create was never confirmed within the wait bound — the timeout is
- * named distinctly, and no move runs.
- */
-export const CreateFolderTimedOut: Story = {
-	name: "Create folder — timed out (retry)",
-	render: () => (
-		<MoveMailboxPicker
-			mailboxes={mailboxes}
-			onSelect={() => undefined}
-			onCreateFolder={rejectingCreateFolder(TIMEOUT_MESSAGE)}
-		/>
-	),
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-	},
-};
-
-/**
- * Retry is a resume: the first create times out, and pressing the create row
- * again with the same name resolves and moves — the hook re-waits on the folder
- * it already made rather than re-creating it.
- */
-export const CreateFolderRetrySucceeds: Story = {
-	name: "Create folder — retry resumes and moves",
-	render: () => {
-		const RetryStage = () => {
-			const [moved, setMoved] = useState<string | null>(null);
-			return (
-				<div className="flex flex-col">
-					<MoveMailboxPicker
-						mailboxes={mailboxes}
-						onSelect={setMoved}
-						onCreateFolder={failThenSucceedCreateFolder()}
-					/>
-					{moved && (
-						<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
-							Moved to {moved}
-						</p>
-					)}
-				</div>
-			);
-		};
-		return <RetryStage />;
-	},
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-		await tick();
-		const retry = Array.from(
-			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
-		).find((button) => button.textContent?.includes('Create "Taxes"'));
-		retry?.click();
-	},
-};
-
-/**
- * Closing the picker while "Creating folder…" is in flight aborts the wait: the
- * create promise rejects with an AbortError, so a folder that would confirm later
- * never fires the move after the picker is gone. Here "Close picker" unmounts it
- * mid-wait; no "Moved to" line appears.
- */
-export const CreateFolderClosedMidWait: Story = {
-	name: "Create folder — closing aborts the move",
-	render: () => {
-		const AbortStage = () => {
-			const [open, setOpen] = useState(true);
-			const [moved, setMoved] = useState<string | null>(null);
-			return (
-				<div className="flex flex-col">
-					<button
-						type="button"
-						onClick={() => setOpen(false)}
-						className="border-b border-line px-3 py-2 text-left text-xs text-fg-muted"
-					>
-						Close picker
-					</button>
-					{open && (
-						<MoveMailboxPicker
-							mailboxes={mailboxes}
-							onSelect={setMoved}
-							onCreateFolder={abortAwareCreateFolder}
-						/>
-					)}
-					{moved && (
-						<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
-							Moved to {moved}
-						</p>
-					)}
-				</div>
-			);
-		};
-		return <AbortStage />;
-	},
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-		await tick();
-		const close = Array.from(
-			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
-		).find((button) => button.textContent?.trim() === "Close picker");
-		close?.click();
-	},
-};

package/src/components/move-mailbox-picker.tsx

@@ -1,404 +0,0 @@
-import { Search } from "lucide-react";
-import {
-	type KeyboardEvent as ReactKeyboardEvent,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import { isAbortError } from "../lib/abort.js";
-import { cn } from "../lib/cn.js";
-import { Input } from "./input.js";
-
-export interface MoveMailboxOption {
-	/** Stable identity passed back to `onSelect`. */
-	id: string;
-	/** Display label shown in the row and matched against the search query. */
-	label: string;
-	/**
-	 * The message's current folder. Rendered as a non-selectable row so the
-	 * user sees where the message lives but can't move it onto itself.
-	 */
-	isCurrent?: boolean;
-	/**
-	 * Optional secondary string matched alongside `label` (e.g. the full
-	 * folder path so "gmail/" narrows nested folders). Never displayed.
-	 */
-	searchValue?: string;
-}
-
-export interface MoveMailboxPickerLabels {
-	/** Search input placeholder. */
-	searchPlaceholder?: string;
-	/** Accessible label for the search input. */
-	searchAriaLabel?: string;
-	/** Accessible label for the listbox. */
-	listAriaLabel?: string;
-	/** Suffix announced for the current folder, e.g. `(current folder)`. */
-	currentSuffix?: string;
-	/** Inline tag shown on the current folder row. */
-	currentTag?: string;
-	/** Builds the empty-state message for a query that matches nothing. */
-	emptyMessage?: (query: string) => string;
-	/** Builds the accessible label for a selectable row, e.g. `Move to X`. */
-	optionLabel?: (label: string) => string;
-	/** Builds the label for the create-and-move row, e.g. `Create "Receipts"`. */
-	createLabel?: (query: string) => string;
-	/** Shown on the create row while the folder is being created. */
-	createPending?: string;
-	/** Shown when creating the folder fails. */
-	createError?: string;
-}
-
-export interface MoveMailboxPickerProps {
-	/**
-	 * Destinations to show, already filtered, ordered and labeled by the app.
-	 * The kit owns only search, focus and keyboard — never data shaping.
-	 */
-	mailboxes: readonly MoveMailboxOption[];
-	onSelect: (mailboxId: string) => void;
-	/**
-	 * Create a folder named by the current search query. When provided and the
-	 * query names no existing folder, a create-and-move row is offered at the
-	 * bottom of the list; resolving it — once the mail server confirms the folder
-	 * — yields the new folder, which is selected (moved into). The picker aborts
-	 * the passed signal on unmount, so a folder that confirms after the picker is
-	 * closed never fires the move. Absent means no create affordance renders.
-	 */
-	onCreateFolder?: (
-		name: string,
-		signal?: AbortSignal,
-	) => Promise<MoveMailboxOption>;
-	/**
-	 * Called when the user dismisses the picker via Escape. Trigger consumers
-	 * use this to close their popover/drawer; the picker never owns
-	 * presentation, so it cannot close itself without help.
-	 */
-	onCancel?: () => void;
-	/**
-	 * Mobile callers (bottom-sheet) pass `autoFocus` to focus the search input
-	 * as soon as the sheet opens — keyboard accessory + immediate filter typing
-	 * without an extra tap. Desktop dropdowns leave focus on the trigger so
-	 * click-outside dismissal stays predictable.
-	 */
-	autoFocus?: boolean;
-	labels?: MoveMailboxPickerLabels;
-}
-
-const ROW_BASE =
-	"w-full text-left px-3 py-2.5 min-h-11 flex items-center gap-2 transition-colors text-sm rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-canvas";
-
-const defaultLabels: Required<MoveMailboxPickerLabels> = {
-	searchPlaceholder: "Move to…",
-	searchAriaLabel: "Filter folders",
-	listAriaLabel: "Destination folders",
-	currentSuffix: "(current folder)",
-	currentTag: "current",
-	emptyMessage: (query) => `No folders match "${query}"`,
-	optionLabel: (label) => `Move to ${label}`,
-	createLabel: (query) => `Create "${query}"`,
-	createPending: "Creating folder…",
-	createError: "Couldn't create that folder. Please try again.",
-};
-
-const findFirstSelectable = (options: readonly MoveMailboxOption[]): number => {
-	for (let i = 0; i < options.length; i += 1) {
-		if (!options[i]?.isCurrent) return i;
-	}
-	return -1;
-};
-
-const findLastSelectable = (options: readonly MoveMailboxOption[]): number => {
-	for (let i = options.length - 1; i >= 0; i -= 1) {
-		if (!options[i]?.isCurrent) return i;
-	}
-	return -1;
-};
-
-const findNextSelectable = (
-	options: readonly MoveMailboxOption[],
-	from: number,
-	step: 1 | -1,
-): number => {
-	const count = options.length;
-	if (count <= 0) return -1;
-	const start = from < 0 ? (step === 1 ? -1 : count) : from;
-	for (let offset = 1; offset <= count; offset += 1) {
-		const candidate = (((start + step * offset) % count) + count) % count;
-		if (!options[candidate]?.isCurrent) return candidate;
-	}
-	return -1;
-};
-
-const matchesQuery = (option: MoveMailboxOption, query: string): boolean => {
-	if (option.label.toLowerCase().includes(query)) return true;
-	return option.searchValue?.toLowerCase().includes(query) ?? false;
-};
-
-/**
- * Move-to-folder destination picker: an always-on search input over a
- * roving-focus listbox. Data-agnostic — the app supplies pre-shaped,
- * pre-ordered options and performs the move in `onSelect`; the kit owns search
- * filtering, keyboard navigation and ARIA structure.
- */
-export const MoveMailboxPicker = ({
-	mailboxes,
-	onSelect,
-	onCreateFolder,
-	onCancel,
-	autoFocus = false,
-	labels,
-}: MoveMailboxPickerProps) => {
-	const text = { ...defaultLabels, ...labels };
-	const [query, setQuery] = useState("");
-	const [creating, setCreating] = useState(false);
-	const [createError, setCreateError] = useState<string>();
-	const [focusedIndex, setFocusedIndex] = useState<number>(() =>
-		findFirstSelectable(mailboxes),
-	);
-	const inputRef = useRef<HTMLInputElement>(null);
-	const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
-	// The create waits for the mail server to confirm the folder; abort it when
-	// the picker unmounts (its popover/drawer closes) so a late confirmation never
-	// fires the move after the picker is gone.
-	const createAbort = useRef<AbortController | null>(null);
-	useEffect(() => () => createAbort.current?.abort(), []);
-
-	useEffect(() => {
-		if (autoFocus) inputRef.current?.focus();
-	}, [autoFocus]);
-
-	const trimmedQuery = query.trim().toLowerCase();
-	const filtered = useMemo(() => {
-		if (!trimmedQuery) return [...mailboxes];
-		return mailboxes.filter((mailbox) => matchesQuery(mailbox, trimmedQuery));
-	}, [mailboxes, trimmedQuery]);
-
-	useEffect(() => {
-		setFocusedIndex((current) => {
-			if (
-				current >= 0 &&
-				current < filtered.length &&
-				!filtered[current]?.isCurrent
-			) {
-				return current;
-			}
-			return findFirstSelectable(filtered);
-		});
-	}, [filtered]);
-
-	useEffect(() => {
-		if (focusedIndex < 0) return;
-		const node = optionRefs.current[focusedIndex];
-		if (!node) return;
-		// Only steal focus if the user is already navigating the list — moving
-		// focus while they type in the filter input would trap them. The search
-		// input keeps focus until the first ArrowDown.
-		if (document.activeElement === inputRef.current) return;
-		node.focus();
-	}, [focusedIndex]);
-
-	const handleConfirm = useCallback(() => {
-		if (focusedIndex < 0) return;
-		const target = filtered[focusedIndex];
-		if (!target || target.isCurrent) return;
-		onSelect(target.id);
-	}, [focusedIndex, filtered, onSelect]);
-
-	const showCreate =
-		!!onCreateFolder &&
-		trimmedQuery.length > 0 &&
-		!mailboxes.some((mailbox) => mailbox.label.toLowerCase() === trimmedQuery);
-
-	const handleCreate = useCallback(() => {
-		if (!onCreateFolder) return;
-		const name = query.trim();
-		if (name === "") return;
-		setCreating(true);
-		setCreateError(undefined);
-		createAbort.current?.abort();
-		const controller = new AbortController();
-		createAbort.current = controller;
-		onCreateFolder(name, controller.signal)
-			.then((folder) => {
-				onSelect(folder.id);
-				setCreating(false);
-			})
-			.catch((error: unknown) => {
-				if (isAbortError(error)) return;
-				setCreateError(
-					error instanceof Error ? error.message : text.createError,
-				);
-				setCreating(false);
-			});
-	}, [onCreateFolder, query, onSelect, text.createError]);
-
-	const handleListKeyDown = useCallback(
-		(event: ReactKeyboardEvent<HTMLElement>) => {
-			switch (event.key) {
-				case "ArrowDown":
-					event.preventDefault();
-					setFocusedIndex((current) =>
-						findNextSelectable(filtered, current, 1),
-					);
-					return;
-				case "ArrowUp":
-					event.preventDefault();
-					setFocusedIndex((current) =>
-						findNextSelectable(filtered, current, -1),
-					);
-					return;
-				case "Home":
-					event.preventDefault();
-					setFocusedIndex(findFirstSelectable(filtered));
-					return;
-				case "End":
-					event.preventDefault();
-					setFocusedIndex(findLastSelectable(filtered));
-					return;
-				case "Enter":
-				case " ":
-					event.preventDefault();
-					handleConfirm();
-					return;
-				case "Escape":
-					event.preventDefault();
-					onCancel?.();
-					return;
-				default:
-					return;
-			}
-		},
-		[filtered, handleConfirm, onCancel],
-	);
-
-	const handleInputKeyDown = useCallback(
-		(event: ReactKeyboardEvent<HTMLInputElement>) => {
-			if (event.key === "ArrowDown") {
-				event.preventDefault();
-				if (filtered.length === 0) return;
-				const target = optionRefs.current[focusedIndex >= 0 ? focusedIndex : 0];
-				target?.focus();
-				return;
-			}
-			if (event.key === "Escape") {
-				event.preventDefault();
-				onCancel?.();
-			}
-		},
-		[filtered.length, focusedIndex, onCancel],
-	);
-
-	return (
-		<div className="flex flex-col">
-			<Input
-				variant="inline"
-				className="border-b border-line px-3 py-2"
-				icon={<Search className="size-4" aria-hidden="true" />}
-				ref={inputRef}
-				type="search"
-				value={query}
-				onChange={(event) => setQuery(event.target.value)}
-				onKeyDown={handleInputKeyDown}
-				placeholder={text.searchPlaceholder}
-				aria-label={text.searchAriaLabel}
-			/>
-			<div
-				className="flex-1 overflow-y-auto py-1"
-				role="listbox"
-				aria-label={text.listAriaLabel}
-				onKeyDown={handleListKeyDown}
-			>
-				{filtered.length === 0 ? (
-					<div className="px-3 py-3 text-sm text-fg-muted" aria-live="polite">
-						{text.emptyMessage(query)}
-					</div>
-				) : (
-					filtered.map((mailbox, idx) => {
-						const isCurrent = mailbox.isCurrent ?? false;
-						const isFocused = idx === focusedIndex;
-						// The current folder is a "you are here" marker, not a target —
-						// rendered as a static option (never a disabled control) so the
-						// user can see where the message lives without a dead button.
-						// Selectable folders are real <button> options. Each interactive
-						// element IS the listbox option: a role="option" <div> wrapping a
-						// separately-interactive <button> is invalid ARIA.
-						if (isCurrent) {
-							return (
-								<div key={mailbox.id}>
-									{/* biome-ignore lint/a11y/useFocusableInteractive: focus managed by the parent listbox component */}
-									<div
-										role="option"
-										aria-selected={false}
-										aria-current="true"
-										aria-label={`${mailbox.label} ${text.currentSuffix}`}
-										className={cn(ROW_BASE, "opacity-60 bg-surface-sunken/40")}
-									>
-										<span className="truncate flex-1">{mailbox.label}</span>
-										<span className="text-xs text-fg-muted shrink-0">
-											{text.currentTag}
-										</span>
-									</div>
-								</div>
-							);
-						}
-						return (
-							<div key={mailbox.id}>
-								<button
-									ref={(node) => {
-										optionRefs.current[idx] = node;
-									}}
-									type="button"
-									role="option"
-									aria-selected={false}
-									tabIndex={isFocused ? 0 : -1}
-									onClick={() => onSelect(mailbox.id)}
-									onFocus={() => setFocusedIndex(idx)}
-									aria-label={text.optionLabel(mailbox.label)}
-									className={cn(ROW_BASE, "hover:bg-surface-raised")}
-								>
-									<span className="truncate flex-1">{mailbox.label}</span>
-								</button>
-							</div>
-						);
-					})
-				)}
-			</div>
-			{showCreate && (
-				<div className="border-t border-line p-1">
-					<button
-						type="button"
-						onClick={handleCreate}
-						disabled={creating}
-						className={cn(
-							ROW_BASE,
-							"font-medium text-accent-2 hover:bg-surface-raised disabled:opacity-60",
-						)}
-					>
-						<span className="truncate">
-							{creating ? text.createPending : text.createLabel(query.trim())}
-						</span>
-					</button>
-					{createError && (
-						<p className="px-3 py-1 text-xs text-danger" role="alert">
-							{createError}
-						</p>
-					)}
-				</div>
-			)}
-		</div>
-	);
-};
-
-/**
- * Pure selection/filter helpers exposed for unit testing the roving-focus and
- * search logic without a DOM. Component consumers should use
- * {@link MoveMailboxPicker} instead.
- */
-export const moveMailboxPickerInternals = {
-	findFirstSelectable,
-	findLastSelectable,
-	findNextSelectable,
-	matchesQuery,
-};