@remit/ui 0.0.48 → 0.0.50

package/package.json

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

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

@@ -55,7 +55,10 @@ function LiveEditor({
 }: {
 	initialRule: FilterRule;
 	semanticAvailable?: boolean;
-	onCreateFolder?: (name: string) => Promise<FolderOption>;
+	onCreateFolder?: (
+		name: string,
+		signal?: AbortSignal,
+	) => Promise<FolderOption>;
 }) {
 	const [rule, setRule] = useState<FilterRule>(initialRule);
 	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>();
@@ -170,6 +173,182 @@ export const WithNewFolderOption: Story = {
 	),
 };
 
+/**
+ * Drive the destination field into its create sub-form: pick "＋ New folder…",
+ * type a name, and press "Create folder". Used by the pending and error stories
+ * below so each lands in the state it documents without a manual click-through.
+ */
+async function openCreateAndSubmit(
+	canvasElement: HTMLElement,
+	folderName: string,
+) {
+	const setSelectValue = Object.getOwnPropertyDescriptor(
+		HTMLSelectElement.prototype,
+		"value",
+	)?.set;
+	const setInputValue = Object.getOwnPropertyDescriptor(
+		HTMLInputElement.prototype,
+		"value",
+	)?.set;
+	const select = canvasElement.querySelector<HTMLSelectElement>(
+		'select[aria-label="Destination folder"]',
+	);
+	if (!select) return;
+	setSelectValue?.call(select, CREATE_FOLDER_STORY_VALUE);
+	select.dispatchEvent(new Event("change", { bubbles: true }));
+	const input = canvasElement.querySelector<HTMLInputElement>(
+		'input[aria-label="New folder name"]',
+	);
+	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?.trim() === "Create folder");
+	createButton?.click();
+}
+
+/** Matches the internal CREATE_FOLDER_VALUE option in the destination select. */
+const CREATE_FOLDER_STORY_VALUE = "__filter_create_folder__";
+
+/** 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<FolderOption> =>
+	new Promise<FolderOption>(() => undefined);
+
+const rejectingCreateFolder = (message: string) => (): Promise<FolderOption> =>
+	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<FolderOption> => {
+		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<FolderOption> =>
+	new Promise<FolderOption>((_resolve, reject) => {
+		signal?.addEventListener("abort", () =>
+			reject(new DOMException("Aborted", "AbortError")),
+		);
+	});
+
+/**
+ * The folder is a dependent write for the filter, so creating it waits for the
+ * mail server to confirm the folder before it can be picked as the destination.
+ * The wait shows as "Creating folder…" — held for the whole confirmation, not
+ * just a fast optimistic round-trip.
+ */
+export const NewFolderCreating: Story = {
+	name: "New folder — creating (waiting for the server)",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={neverResolvesCreateFolder}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+	},
+};
+
+/**
+ * The folder create failed on the mail server. The rule is not committed against
+ * a folder that does not exist: the error is surfaced inline with the create form
+ * still open, so the create can be retried or cancelled.
+ */
+export const NewFolderCreateFailed: Story = {
+	name: "New folder — create failed (retry / cancel)",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={rejectingCreateFolder(
+				"The folder couldn't be created on the mail server. Please try again.",
+			)}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+	},
+};
+
+/**
+ * The folder create was never confirmed within the wait bound. Distinct from a
+ * hard failure — the message names the timeout — and, like a failure, leaves no
+ * folder selected, so no filter is written against it.
+ */
+export const NewFolderCreateTimedOut: Story = {
+	name: "New folder — create timed out (retry / cancel)",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={rejectingCreateFolder(TIMEOUT_MESSAGE)}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+	},
+};
+
+/**
+ * Retry is a resume: the first attempt times out (the folder was made but not yet
+ * confirmed), and pressing "Create folder" again with the same name resolves —
+ * the hook re-waits on the folder it already made rather than re-creating it, so
+ * the retry the failure message points at actually works.
+ */
+export const NewFolderCreateRetrySucceeds: Story = {
+	name: "New folder — retry resumes and succeeds",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={failThenSucceedCreateFolder()}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+		await tick();
+		const retry = Array.from(
+			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
+		).find((button) => button.textContent?.trim() === "Create folder");
+		retry?.click();
+	},
+};
+
+/**
+ * Cancelling while "Creating folder…" is in flight aborts the wait: the create
+ * promise rejects with an AbortError the field swallows, so no destination binds
+ * after the user backed out — the sub-form just closes.
+ */
+export const NewFolderCreateCancelledMidWait: Story = {
+	name: "New folder — cancel aborts the wait",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={abortAwareCreateFolder}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+		await tick();
+		const cancel = Array.from(
+			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
+		).find((button) => button.textContent?.trim() === "Cancel");
+		cancel?.click();
+	},
+};
+
 /** Literal clauses joined with "or", including the ticket-B ListId and FromDomain fields. */
 export const AnyOfTheseClauses: Story = {
 	render: () => <LiveEditor initialRule={demoVocabularyRule} />,
@@ -254,11 +433,13 @@ export const DegradedStandingWiden: Story = {
 };
 
 /**
- * Editing a persisted filter (RFC 038 D6): scope and expiry render read-only,
- * with a note that they — and the semantic anchor — are fixed at creation. The
- * name and the literal clauses stay editable; the widen chip is display-only.
+ * Editing a persisted filter (RFC 038 D6, reader #266): scope and expiry stay
+ * live and editable — a standing filter can move to "until a date" and back,
+ * or its date can change. The semantic anchor is the one thing fixed at
+ * creation: the widen chip renders display-only with a one-line note, and
+ * "Just once" drops out of the scope toggle since no saved filter can hold it.
  */
-export const LifecycleLocked: Story = {
+export const AnchorLocked: Story = {
 	args: {
 		rule: {
 			...demoRule,
@@ -269,7 +450,7 @@ export const LifecycleLocked: Story = {
 		folders: demoFolders,
 		preview: READY(31),
 		semanticAvailable: false,
-		lifecycleLocked: true,
+		anchorLocked: true,
 	},
 };
 

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

@@ -1,4 +1,12 @@
-import { Fragment, type ReactNode, useMemo, useState } from "react";
+import {
+	Fragment,
+	type ReactNode,
+	useEffect,
+	useMemo,
+	useRef,
+	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";
@@ -56,14 +64,20 @@ export interface FilterRuleEditorProps {
 	 */
 	clauseFields?: ClauseField[];
 	/**
-	 * Render the scope and expiry read-only (RFC 038 D6). A persisted filter's
-	 * scope, expiry, and semantic anchor are fixed at creation — the update
-	 * endpoint carries none of them — so editing a filter shows them as a static
-	 * summary with a note rather than live controls that would silently discard
-	 * the change (reader #266 tracks lifting this). The name and the literal
-	 * predicate stay editable.
+	 * Whether the semantic anchor is fixed and cannot be added, removed, or
+	 * repointed (RFC 038 D6, reader #266). True for an existing, persisted
+	 * filter — the update endpoint carries no anchor field at all, so
+	 * repointing one would silently change what a saved filter matches with
+	 * nothing visible changing, and that deserves a new filter instead. The
+	 * widen chip renders display-only (no remove affordance regardless of
+	 * `onRemoveWiden`) and carries a one-line note explaining why.
+	 *
+	 * Scope and expiry are NOT covered by this flag — they stay editable even
+	 * on an existing filter (reader #266). The only other thing this locks is
+	 * the "Just once" scope option, meaningless for an already-persisted
+	 * filter, which is dropped from the scope toggle.
 	 */
-	lifecycleLocked?: boolean;
+	anchorLocked?: boolean;
 	/** The inline clause form, when adding or editing a clause. */
 	clauseEdit?: ClauseEditState;
 	onStartAddClause?: () => void;
@@ -78,12 +92,16 @@ export interface FilterRuleEditorProps {
 	onChangeMatchOperator?: (operator: MatchOperator) => void;
 	onChangeMove?: (mailboxId: string) => void;
 	/**
-	 * Create a new destination folder from within the editor. Given a folder
-	 * name, resolves to the created folder once the backend has queued it. When
-	 * absent, the "New folder…" option is not offered — the editor stays
-	 * data-agnostic, so stories and consumers without wiring render unchanged.
+	 * Create a new destination folder from within the editor. Given a folder name
+	 * and an abort signal, resolves to the created folder once the mail server
+	 * confirms it. The editor aborts the signal on unmount or cancel. When absent,
+	 * the "New folder…" option is not offered — the editor stays data-agnostic, so
+	 * stories and consumers without wiring render unchanged.
 	 */
-	onCreateFolder?: (name: string) => Promise<FolderOption>;
+	onCreateFolder?: (
+		name: string,
+		signal?: AbortSignal,
+	) => Promise<FolderOption>;
 	onChangeScope?: (scope: RuleScope) => void;
 	onChangeName?: (name: string) => void;
 	onChangeUntil?: (date: string) => void;
@@ -110,6 +128,13 @@ const CREATE_FOLDER_VALUE = "__filter_create_folder__";
  * name field; on resolve the new folder is added to the local option set (so it
  * is selectable even before the caller's folder list refetches) and picked as
  * the destination. Without `onCreateFolder` this is the bare select.
+ *
+ * The destination is a dependent write: the filter this editor commits binds to
+ * the folder, so `onCreateFolder` resolves only once the folder is confirmed on
+ * the mail server, not when the create is merely queued. The pending state holds
+ * "Creating folder…" for that whole wait, and a create that fails or never
+ * confirms rejects with its own message here — the folder is never selected, so
+ * the caller cannot commit a filter against a folder that does not exist.
  */
 function MoveDestinationField({
 	folders,
@@ -120,13 +145,21 @@ function MoveDestinationField({
 	folders: FolderOption[];
 	value: string;
 	onChangeMove?: (mailboxId: string) => void;
-	onCreateFolder?: (name: string) => Promise<FolderOption>;
+	onCreateFolder?: (
+		name: string,
+		signal?: AbortSignal,
+	) => Promise<FolderOption>;
 }) {
 	const [creating, setCreating] = useState(false);
 	const [name, setName] = useState("");
 	const [pending, setPending] = useState(false);
 	const [error, setError] = useState<string>();
 	const [createdFolders, setCreatedFolders] = useState<FolderOption[]>([]);
+	// The create waits for the mail server to confirm the folder; abort it on
+	// unmount or cancel so a late confirmation never binds the destination after
+	// the editor is gone or the sub-form dismissed.
+	const createAbort = useRef<AbortController | null>(null);
+	useEffect(() => () => createAbort.current?.abort(), []);
 
 	const options = useMemo(() => {
 		const known = new Set(folders.map((folder) => folder.id));
@@ -151,7 +184,10 @@ function MoveDestinationField({
 		if (trimmed === "") return;
 		setPending(true);
 		setError(undefined);
-		onCreateFolder(trimmed)
+		createAbort.current?.abort();
+		const controller = new AbortController();
+		createAbort.current = controller;
+		onCreateFolder(trimmed, controller.signal)
 			.then((folder) => {
 				setCreatedFolders((prev) =>
 					prev.some((entry) => entry.id === folder.id)
@@ -164,6 +200,7 @@ function MoveDestinationField({
 				setPending(false);
 			})
 			.catch((error: unknown) => {
+				if (isAbortError(error)) return;
 				setError(
 					error instanceof Error
 						? error.message
@@ -174,9 +211,11 @@ function MoveDestinationField({
 	};
 
 	const cancel = () => {
+		createAbort.current?.abort();
 		setCreating(false);
 		setName("");
 		setError(undefined);
+		setPending(false);
 	};
 
 	return (
@@ -228,7 +267,7 @@ function MoveDestinationField({
 							onClick={submit}
 							disabled={pending || name.trim() === ""}
 						>
-							{pending ? "Creating…" : "Create folder"}
+							{pending ? "Creating folder…" : "Create folder"}
 						</Button>
 						<Button
 							variant="ghost"
@@ -252,7 +291,7 @@ export function FilterRuleEditor({
 	notice,
 	semanticAvailable = false,
 	clauseFields,
-	lifecycleLocked = false,
+	anchorLocked = false,
 	clauseEdit,
 	onStartAddClause,
 	onStartEditClause,
@@ -278,6 +317,12 @@ export function FilterRuleEditor({
 	const join = matchJoinWord(rule.matchOperator);
 	const blockedReason = commitBlockedReason(rule, preview);
 	const needsName = rule.scope === "standing" || rule.scope === "until";
+	// A persisted filter is always Standing or Temporary — "once" was never a
+	// scope a saved row could hold, so an existing filter's editor never offers
+	// it (reader #266).
+	const availableScopeOptions = anchorLocked
+		? scopeOptions.filter((option) => option.value !== "once")
+		: scopeOptions;
 
 	return (
 		<div className="flex min-h-0 flex-col">
@@ -314,16 +359,22 @@ export function FilterRuleEditor({
 										{join}
 									</span>
 								)}
-								<WidenChip widen={rule.widen} onRemove={onRemoveWiden} />
+								<WidenChip
+									widen={rule.widen}
+									onRemove={anchorLocked ? undefined : onRemoveWiden}
+								/>
 							</>
 						)}
 
 						{!clauseEdit && (
 							<AddChipButton label="Add clause" onClick={onStartAddClause} />
 						)}
-						{!rule.widen && semanticAvailable && !clauseEdit && (
-							<AddChipButton label="…and similar" onClick={onAddWiden} />
-						)}
+						{!rule.widen &&
+							!anchorLocked &&
+							semanticAvailable &&
+							!clauseEdit && (
+								<AddChipButton label="…and similar" onClick={onAddWiden} />
+							)}
 					</div>
 
 					{clauseEdit && (
@@ -338,6 +389,13 @@ export function FilterRuleEditor({
 						/>
 					)}
 
+					{anchorLocked && rule.widen && (
+						<p className="text-2xs text-fg-subtle">
+							This filter's similar-mail match is fixed to the message it was
+							created from — create a new filter to change it.
+						</p>
+					)}
+
 					{showOperator && (
 						<div className="flex items-center gap-2">
 							<span className="text-xs text-fg-muted">Match</span>
@@ -374,22 +432,14 @@ export function FilterRuleEditor({
 
 				<section className="space-y-2">
 					<p className="text-xs font-medium text-fg-muted">How long</p>
-					{lifecycleLocked ? (
-						<p className="text-xs text-fg">
-							{rule.scope === "until"
-								? `Until ${rule.until ?? ""}`
-								: "Always — runs on matching mail"}
-						</p>
-					) : (
-						<SegmentedControl
-							name="rule-scope"
-							size="sm"
-							aria-label="Rule scope"
-							options={scopeOptions}
-							value={rule.scope}
-							onChange={(value) => onChangeScope?.(value)}
-						/>
-					)}
+					<SegmentedControl
+						name="rule-scope"
+						size="sm"
+						aria-label="Rule scope"
+						options={availableScopeOptions}
+						value={rule.scope}
+						onChange={(value) => onChangeScope?.(value)}
+					/>
 					{needsName && (
 						<Input
 							value={rule.name ?? ""}
@@ -399,7 +449,7 @@ export function FilterRuleEditor({
 							className="w-full"
 						/>
 					)}
-					{!lifecycleLocked && rule.scope === "until" && (
+					{rule.scope === "until" && (
 						<div className="flex items-center gap-2 text-xs text-fg-muted">
 							<span>Until</span>
 							<Input
@@ -411,13 +461,6 @@ export function FilterRuleEditor({
 							/>
 						</div>
 					)}
-					{lifecycleLocked && (
-						<p className="text-2xs text-fg-subtle">
-							{rule.widen
-								? "The scope, expiry, and similar-mail match are set when a filter is created."
-								: "The scope and expiry are set when a filter is created."}
-						</p>
-					)}
 				</section>
 
 				<div className="border-t border-line pt-3">

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

@@ -555,35 +555,48 @@ describe("FilterRuleEditor", () => {
 		assert.match(editor(), /47 messages match/);
 	});
 
-	it("renders scope and expiry read-only when the lifecycle is locked", () => {
+	it("keeps scope and expiry live and editable on an anchor-locked (existing) filter (reader #266)", () => {
 		const html = editor({
 			rule: { ...demoRule, scope: "until", until: "2027-09-01" },
-			lifecycleLocked: true,
+			anchorLocked: true,
 		});
-		// No live scope toggle, no editable date input — a static summary and a note.
-		assert.doesNotMatch(html, /aria-label="Rule scope"/);
-		assert.doesNotMatch(html, /aria-label="Expiry date"/);
-		assert.match(html, /Until 2027-09-01/);
-		assert.match(html, /set when a filter is created/);
-		// The name stays editable.
+		assert.match(html, /aria-label="Rule scope"/);
+		assert.match(html, /aria-label="Expiry date"/);
 		assert.match(html, /aria-label="Rule name"/);
 	});
 
-	it("names the similar-mail match in the locked note only when a widen is present", () => {
+	it("drops the once option from the scope toggle on an anchor-locked filter", () => {
+		const locked = editor({ anchorLocked: true });
+		assert.doesNotMatch(locked, />Just once</);
+		const unlocked = editor({ anchorLocked: false });
+		assert.match(unlocked, />Just once</);
+	});
+
+	it("locks the widen chip and explains why only when one is present", () => {
 		const withWiden = editor({
 			rule: { ...demoRule, widen: { anchorCount: 2 } },
-			lifecycleLocked: true,
+			anchorLocked: true,
 		});
-		assert.match(
+		assert.doesNotMatch(
 			withWiden,
-			/similar-mail match are set when a filter is created/,
+			/aria-label="Remove the similar-mail widen"/,
 		);
+		assert.match(withWiden, /similar-mail match is fixed to the message/);
+
 		const literal = editor({
 			rule: { ...demoRule, widen: undefined },
-			lifecycleLocked: true,
+			anchorLocked: true,
+		});
+		assert.doesNotMatch(literal, /similar-mail match is fixed/);
+	});
+
+	it("never offers to add a widen on an anchor-locked filter, even when the deployment can serve it", () => {
+		const html = editor({
+			rule: { ...demoRule, widen: undefined },
+			anchorLocked: true,
+			semanticAvailable: true,
 		});
-		assert.match(literal, /scope and expiry are set when a filter is created/);
-		assert.doesNotMatch(literal, /similar-mail match/);
+		assert.doesNotMatch(html, /…and similar/);
 	});
 });
 

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

@@ -112,3 +112,202 @@ 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

@@ -7,6 +7,7 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { isAbortError } from "../lib/abort.js";
 import { cn } from "../lib/cn.js";
 import { Input } from "./input.js";
 
@@ -60,10 +61,15 @@ export interface MoveMailboxPickerProps {
 	/**
 	 * 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 yields the new folder, which is selected
-	 * (moved into) immediately. Absent means no create affordance renders.
+	 * 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) => Promise<MoveMailboxOption>;
+	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
@@ -153,6 +159,11 @@ export const MoveMailboxPicker = ({
 	);
 	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();
@@ -206,12 +217,16 @@ export const MoveMailboxPicker = ({
 		if (name === "") return;
 		setCreating(true);
 		setCreateError(undefined);
-		onCreateFolder(name)
+		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,
 				);

package/src/lib/abort.ts

@@ -0,0 +1,11 @@
+/**
+ * True for the rejection an aborted `AbortSignal` produces (a `DOMException`
+ * named `AbortError`, or any error carrying that name). A create affordance that
+ * is unmounted or cancelled aborts its in-flight folder create; the rejection is
+ * expected, not a failure to show — the surface is already gone.
+ */
+export const isAbortError = (error: unknown): boolean =>
+	typeof error === "object" &&
+	error !== null &&
+	"name" in error &&
+	(error as { name?: unknown }).name === "AbortError";