@remit/ui 0.0.69 → 0.0.71

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,
@@ -330,12 +321,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/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>
-	);
-};

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"/);
-	});
-});