@remit/ui 0.0.69 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "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.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/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/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/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.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";
@@ -354,7 +351,6 @@ export function SelectionSample({
 }
 
 export interface FooterNavProps {
-	backLabel?: string;
 	onBack: () => void;
 	nextLabel: string;
 	onNext: () => void;
@@ -372,7 +368,6 @@ export interface FooterNavProps {
  * carries the two ways that reason reaches the user.
  */
 export function FooterNav({
-	backLabel = "Back",
 	onBack,
 	nextLabel,
 	onNext,
@@ -399,7 +394,7 @@ export function FooterNav({
 					icon={<ArrowLeft className="size-4" />}
 					className="shrink-0"
 				>
-					{backLabel}
+					Back
 				</Button>
 				<Button
 					variant={nextVariant}
@@ -651,7 +646,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 +659,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 +673,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 +692,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…",
 					}}
 				/>