@remit/ui 0.0.70 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.70",
+  "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/primitives.stories.tsx

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

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

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

package/src/components/selection-wizard.tsx

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

package/src/index.ts

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

package/src/components/list-item.tsx

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

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

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

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

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

package/src/components/message-header.tsx

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