@remit/ui 0.0.1

package/src/components/search-token-chip.render.test.ts

@@ -0,0 +1,42 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { SearchTokenChip, SearchTokenChips } from "./search-token-chip.js";
+
+const noop = () => {};
+
+describe("SearchTokenChip", () => {
+	it("renders the label and a remove control", () => {
+		const html = renderToString(
+			createElement(SearchTokenChip, {
+				label: "Has attachment",
+				onRemove: noop,
+			}),
+		);
+		assert.match(html, /Has attachment/);
+		assert.match(html, /aria-label="Remove filter: Has attachment"/);
+	});
+});
+
+describe("SearchTokenChips", () => {
+	it("renders nothing for an empty token list", () => {
+		assert.equal(
+			renderToString(createElement(SearchTokenChips, { tokens: [] })),
+			"",
+		);
+	});
+
+	it("renders one chip per token", () => {
+		const html = renderToString(
+			createElement(SearchTokenChips, {
+				tokens: [
+					{ label: "Unread", onRemove: noop },
+					{ label: "From: alice", onRemove: noop },
+				],
+			}),
+		);
+		assert.match(html, /Unread/);
+		assert.match(html, /From: alice/);
+	});
+});

package/src/components/search-token-chip.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { SearchTokenChips } from "./search-token-chip.js";
+
+const meta: Meta<typeof SearchTokenChips> = {
+	title: "Mail/SearchTokenChips",
+	component: SearchTokenChips,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof SearchTokenChips>;
+
+const initialLabels = ["From: dhl.com", "Has attachment", "Unread"];
+
+function Interactive() {
+	const [labels, setLabels] = useState(initialLabels);
+	return (
+		<div className="w-96 rounded-md border border-line">
+			<SearchTokenChips
+				tokens={labels.map((label) => ({
+					label,
+					onRemove: () => setLabels((prev) => prev.filter((l) => l !== label)),
+				}))}
+			/>
+		</div>
+	);
+}
+
+/** Removable filter-token chips under the search field; click × to drop one. */
+export const Tokens: Story = {
+	render: () => <Interactive />,
+};
+
+/** No recognized tokens in the query — the row collapses to nothing. */
+export const Empty: Story = {
+	render: () => (
+		<div className="w-96 rounded-md border border-line">
+			<SearchTokenChips tokens={[]} />
+		</div>
+	),
+};

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

@@ -0,0 +1,66 @@
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+
+export interface SearchTokenChipProps {
+	label: string;
+	onRemove: () => void;
+	className?: string;
+}
+
+/**
+ * One removable filter-token chip (`from:`, `has:attachment`, …) shown under
+ * the search field once the field's typed text parses a recognized token.
+ * Same dismissible-pill treatment as `AddressTag`, generalized to a plain
+ * label since a token chip carries no email identity.
+ */
+export const SearchTokenChip = ({
+	label,
+	onRemove,
+	className,
+}: SearchTokenChipProps) => (
+	<span
+		className={cn(
+			"inline-flex items-center gap-1 rounded-full border border-line bg-surface-sunken px-2 py-0.5 text-2xs text-fg-muted",
+			className,
+		)}
+	>
+		<span>{label}</span>
+		<button
+			type="button"
+			onClick={onRemove}
+			className="shrink-0 rounded-full p-0.5 hover:bg-fg-muted/20 transition-colors"
+			aria-label={`Remove filter: ${label}`}
+		>
+			<X className="size-3" />
+		</button>
+	</span>
+);
+
+export interface SearchTokenChipsProps {
+	tokens: { label: string; onRemove: () => void }[];
+	className?: string;
+}
+
+/** Wraps the active filter-token chips in a row under the search field. */
+export const SearchTokenChips = ({
+	tokens,
+	className,
+}: SearchTokenChipsProps) => {
+	if (tokens.length === 0) return null;
+	return (
+		<div
+			className={cn(
+				"flex flex-wrap items-center gap-1.5 border-b border-line bg-surface px-row-inset py-1.5",
+				className,
+			)}
+		>
+			{tokens.map((token) => (
+				<SearchTokenChip
+					key={token.label}
+					label={token.label}
+					onRemove={token.onRemove}
+				/>
+			))}
+		</div>
+	);
+};

package/src/components/security-select.render.test.ts

@@ -0,0 +1,33 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { SecuritySelect, securityToApi } from "./security-select.js";
+
+describe("securityToApi", () => {
+	it("maps tls to { tls: true, startTls: false }", () => {
+		assert.deepEqual(securityToApi("tls"), { tls: true, startTls: false });
+	});
+
+	it("maps starttls to { tls: false, startTls: true }", () => {
+		assert.deepEqual(securityToApi("starttls"), {
+			tls: false,
+			startTls: true,
+		});
+	});
+
+	it("maps none to { tls: false, startTls: false }", () => {
+		assert.deepEqual(securityToApi("none"), { tls: false, startTls: false });
+	});
+});
+
+describe("SecuritySelect", () => {
+	it("renders all three security options", () => {
+		const html = renderToString(
+			createElement(SecuritySelect, { defaultValue: "tls" }),
+		);
+		assert.match(html, /TLS\/SSL/);
+		assert.match(html, /STARTTLS/);
+		assert.match(html, /None \(insecure\)/);
+	});
+});

package/src/components/security-select.tsx

@@ -0,0 +1,53 @@
+import type { SelectProps } from "./select.js";
+import { Select } from "./select.js";
+
+export type ServerSecurity = "tls" | "starttls" | "none";
+
+export interface SecuritySelectProps
+	extends Omit<
+		SelectProps,
+		"value" | "defaultValue" | "onChange" | "children"
+	> {
+	value?: ServerSecurity;
+	defaultValue?: ServerSecurity;
+	onValueChange?: (value: ServerSecurity) => void;
+}
+
+export function SecuritySelect({
+	value,
+	defaultValue,
+	onValueChange,
+	...props
+}: SecuritySelectProps) {
+	if (onValueChange) {
+		return (
+			<Select
+				value={value}
+				onChange={(e) => onValueChange(e.target.value as ServerSecurity)}
+				{...props}
+			>
+				<option value="tls">TLS/SSL</option>
+				<option value="starttls">STARTTLS</option>
+				<option value="none">None (insecure)</option>
+			</Select>
+		);
+	}
+
+	return (
+		<Select defaultValue={defaultValue ?? value} {...props}>
+			<option value="tls">TLS/SSL</option>
+			<option value="starttls">STARTTLS</option>
+			<option value="none">None (insecure)</option>
+		</Select>
+	);
+}
+
+export function securityToApi(security: ServerSecurity): {
+	tls: boolean;
+	startTls: boolean;
+} {
+	return {
+		tls: security === "tls",
+		startTls: security === "starttls",
+	};
+}

package/src/components/segmented-control.tsx

@@ -0,0 +1,70 @@
+import { cn } from "../lib/cn.js";
+
+export interface SegmentedOption<T extends string> {
+	value: T;
+	label: string;
+}
+
+export interface SegmentedControlProps<T extends string> {
+	name: string;
+	options: SegmentedOption<T>[];
+	value: T;
+	onChange: (value: T) => void;
+	size?: "sm" | "md";
+	"aria-label"?: string;
+}
+
+const sizeClass = {
+	sm: "min-h-9 px-3 text-xs",
+	md: "min-h-11 px-4 text-sm",
+};
+
+export function SegmentedControl<T extends string>({
+	name,
+	options,
+	value,
+	onChange,
+	size = "md",
+	"aria-label": ariaLabel,
+}: SegmentedControlProps<T>) {
+	const activeIndex = options.findIndex((o) => o.value === value);
+	return (
+		<div
+			role="radiogroup"
+			aria-label={ariaLabel}
+			className="inline-flex rounded-md border border-line bg-surface-sunken p-0.5"
+		>
+			{options.map((option, i) => {
+				const selected = option.value === value;
+				// Show a divider on the right edge when neither this segment nor its
+				// right neighbour is active — keeps the line away from the thumb.
+				const showDivider =
+					!selected && i < options.length - 1 && activeIndex !== i + 1;
+				return (
+					<label
+						key={option.value}
+						className={cn(
+							"relative flex cursor-pointer items-center justify-center rounded-[5px] font-medium transition-colors",
+							sizeClass[size],
+							selected
+								? "bg-surface text-fg shadow"
+								: "text-fg-muted hover:text-fg",
+							showDivider &&
+								"after:pointer-events-none after:absolute after:right-0 after:top-1/4 after:h-1/2 after:w-px after:bg-line",
+						)}
+					>
+						<input
+							type="radio"
+							name={name}
+							value={option.value}
+							checked={selected}
+							onChange={() => onChange(option.value)}
+							className="sr-only"
+						/>
+						{option.label}
+					</label>
+				);
+			})}
+		</div>
+	);
+}

package/src/components/select.tsx

@@ -0,0 +1,33 @@
+import { ChevronDown } from "lucide-react";
+import type { ReactNode, SelectHTMLAttributes } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+	/** Optional leading icon (lucide-react element). */
+	icon?: ReactNode;
+}
+
+/**
+ * Native select styled to match Input: same height, hairline border,
+ * sunken surface, focus ring. Options render in <option> children.
+ */
+export function Select({ icon, className, children, ...props }: SelectProps) {
+	return (
+		<div
+			className={cn(
+				"relative flex h-9 items-center gap-2 rounded-md border border-line bg-surface-sunken pl-3 text-sm",
+				"focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30 transition-colors",
+				className,
+			)}
+		>
+			{icon && <span className="shrink-0 text-fg-subtle">{icon}</span>}
+			<select
+				className="min-w-0 flex-1 appearance-none bg-transparent py-0 pr-8 text-fg outline-none"
+				{...props}
+			>
+				{children}
+			</select>
+			<ChevronDown className="pointer-events-none absolute right-2.5 size-4 text-fg-subtle" />
+		</div>
+	);
+}

package/src/components/selection-top-bar.render.test.ts

@@ -0,0 +1,67 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { SelectionTopBar } from "./selection-top-bar.js";
+
+const handlers = {
+	onCancel: () => undefined,
+	onDelete: () => undefined,
+};
+
+/** SSR interleaves `<!-- -->` markers between interpolated text nodes; strip
+ *  tags/comments so copy assertions match the rendered words. */
+const text = (html: string) => html.replace(/<[^>]*>/g, "");
+
+describe("SelectionTopBar", () => {
+	it("renders singular copy for one message", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 1 }),
+		);
+		assert.match(text(html), /1 message selected/);
+	});
+
+	it("renders plural copy for many messages", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 3 }),
+		);
+		assert.match(text(html), /3 messages selected/);
+	});
+
+	it("renders cancel and delete controls", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.match(html, /aria-label="Cancel selection"/);
+		assert.match(html, /aria-label="Delete selected messages"/);
+	});
+
+	it("renders mark-read control when onMarkRead is provided", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				onMarkRead: () => undefined,
+			}),
+		);
+		assert.match(html, /aria-label="Mark as read"/);
+	});
+
+	it("omits mark-read control when onMarkRead is absent", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.doesNotMatch(html, /aria-label="Mark as read"/);
+	});
+
+	it("renders moveDisabledHint when provided", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				moveDisabledHint: "Cross-account moves are not supported",
+			}),
+		);
+		assert.match(html, /Cross-account moves are not supported/);
+	});
+});

package/src/components/selection-top-bar.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SelectionTopBar } from "./selection-top-bar.js";
+
+const meta: Meta<typeof SelectionTopBar> = {
+	title: "Screens/Kit/SelectionTopBar",
+	component: SelectionTopBar,
+	parameters: { layout: "padded" },
+	args: {
+		onCancel: () => undefined,
+		onMarkRead: () => undefined,
+		onDelete: () => undefined,
+	},
+	render: (args) => (
+		<div className="w-[390px] rounded-md border border-line">
+			<SelectionTopBar {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof SelectionTopBar>;
+
+export const One: Story = { args: { count: 1 } };
+
+export const Many: Story = { args: { count: 3 } };
+
+export const WithoutMarkRead: Story = {
+	args: { count: 2, onMarkRead: undefined },
+};
+
+export const Busy: Story = { args: { count: 2, isBusy: true } };
+
+export const CrossAccountHint: Story = {
+	args: {
+		count: 4,
+		moveDisabledHint:
+			"Move only works within one account — clear selection or pick messages from a single account",
+	},
+};

package/src/components/selection-top-bar.tsx

@@ -0,0 +1,95 @@
+import { Loader2, MailOpen, Trash2, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { Button } from "./button.js";
+
+export interface SelectionTopBarProps {
+	count: number;
+	onCancel: () => void;
+	onDelete: () => void;
+	/** Optional — hide the mark-read button when omitted. */
+	onMarkRead?: () => void;
+	/**
+	 * Slot for a move-to-folder trigger. Rendered between mark-read and delete.
+	 * Kept as a render prop so the caller controls API dependencies.
+	 */
+	moveSlot?: ReactNode;
+	/**
+	 * Cross-account hint surfaced below the action row. When set, Move is
+	 * expected to be suppressed by the caller (via moveSlot).
+	 */
+	moveDisabledHint?: string;
+	/**
+	 * True while a delete or move mutation is in flight. The delete button
+	 * shows a spinner; other actions no-op. Never disables controls.
+	 */
+	isBusy?: boolean;
+}
+
+/**
+ * Replaces the list header in narrow-width multi-select: a count plus the bulk
+ * verbs (cancel, mark read, move, delete). Real Buttons that never disable.
+ */
+export function SelectionTopBar({
+	count,
+	onCancel,
+	onMarkRead,
+	onDelete,
+	moveSlot,
+	moveDisabledHint,
+	isBusy = false,
+}: SelectionTopBarProps) {
+	return (
+		<header className="flex shrink-0 flex-col border-b border-line bg-surface-sunken">
+			<div className="flex h-pane-header items-center gap-2 px-row-inset">
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<X className="size-4" />}
+					onClick={onCancel}
+					aria-label="Cancel selection"
+					className="-ml-1 shrink-0"
+				/>
+				<span className="min-w-0 flex-1 truncate text-sm font-medium text-fg">
+					{count} {count === 1 ? "message" : "messages"} selected
+				</span>
+				{onMarkRead && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<MailOpen className="size-4" />}
+						onClick={isBusy ? undefined : onMarkRead}
+						aria-label="Mark as read"
+						aria-busy={isBusy || undefined}
+						className="shrink-0"
+					/>
+				)}
+				{moveSlot}
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={
+						isBusy ? (
+							<Loader2 className="size-4 animate-spin" />
+						) : (
+							<Trash2 className="size-4 text-danger" />
+						)
+					}
+					onClick={isBusy ? undefined : onDelete}
+					aria-label="Delete selected messages"
+					aria-busy={isBusy || undefined}
+					className="shrink-0"
+				/>
+			</div>
+			{moveDisabledHint && (
+				// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
+				<p
+					className="px-row-inset pb-2 text-xs text-fg-muted"
+					role="status"
+					aria-live="polite"
+				>
+					{moveDisabledHint}
+				</p>
+			)}
+		</header>
+	);
+}

package/src/components/sender-group-switch.tsx

@@ -0,0 +1,63 @@
+import { cn } from "../lib/cn.js";
+
+export interface SenderGroupOption<T extends string> {
+	id: T;
+	label: string;
+	count: number | null;
+}
+
+export interface SenderGroupSwitchProps<T extends string> {
+	options: SenderGroupOption<T>[];
+	active: T;
+	onSelect: (id: T) => void;
+}
+
+/**
+ * VIP / Muted / Blocked selector for Senders & Rules. A vertical rail on
+ * desktop; a horizontal tab strip below it so the dense table can own the
+ * full width on phone and tablet.
+ */
+export function SenderGroupSwitch<T extends string>({
+	options,
+	active,
+	onSelect,
+}: SenderGroupSwitchProps<T>) {
+	return (
+		<div
+			role="tablist"
+			className={cn(
+				"flex shrink-0 gap-1 overflow-x-auto border-b border-line p-2",
+				"lg:w-44 lg:flex-col lg:gap-0 lg:overflow-visible lg:border-r lg:border-b-0 lg:py-2 lg:pr-2 lg:pl-3",
+			)}
+		>
+			{options.map((option) => {
+				const selected = option.id === active;
+				return (
+					<button
+						key={option.id}
+						type="button"
+						role="tab"
+						aria-selected={selected}
+						onClick={() => onSelect(option.id)}
+						className={cn(
+							"flex min-h-11 shrink-0 items-center gap-2 rounded-md px-3 text-left text-sm transition-colors lg:min-h-0 lg:px-2 lg:py-1",
+							selected
+								? "bg-accent-2-soft font-medium text-accent-2"
+								: "text-fg-muted hover:bg-surface-sunken hover:text-fg",
+						)}
+					>
+						<span className="flex-1 truncate">{option.label}</span>
+						<span
+							className={cn(
+								"text-2xs tabular-nums",
+								selected ? "text-accent-2" : "text-fg-subtle",
+							)}
+						>
+							{option.count ?? "—"}
+						</span>
+					</button>
+				);
+			})}
+		</div>
+	);
+}

package/src/components/sender-trust-indicator.render.test.ts

@@ -0,0 +1,67 @@
+import assert from "node:assert/strict";
+import { describe, it, test } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	SenderTrustIndicator,
+	selectSenderTrustVariant,
+} from "./sender-trust-indicator.js";
+
+describe("selectSenderTrustVariant", () => {
+	test("vip renders sparkles at every size", () => {
+		assert.equal(selectSenderTrustVariant("vip", "sm"), "vip");
+		assert.equal(selectSenderTrustVariant("vip", "md"), "vip");
+	});
+
+	test("wellknown is hidden at every size", () => {
+		assert.equal(selectSenderTrustVariant("wellknown", "sm"), "hidden");
+		assert.equal(selectSenderTrustVariant("wellknown", "md"), "hidden");
+	});
+
+	test("unknown is hidden on inbox rows (sm) — most senders default to unknown post-rollout, so a per-row pill would be noise", () => {
+		assert.equal(selectSenderTrustVariant("unknown", "sm"), "hidden");
+	});
+
+	test("unknown shows the pill only at md (open-message header) where it flags first-message-from-this-sender", () => {
+		assert.equal(selectSenderTrustVariant("unknown", "md"), "unknown-pill");
+	});
+});
+
+describe("SenderTrustIndicator", () => {
+	it("renders the VIP sparkles", () => {
+		const html = renderToString(
+			createElement(SenderTrustIndicator, { senderTrust: "vip" }),
+		);
+		assert.match(html, /aria-label="VIP sender"/);
+	});
+
+	it("renders the new-sender pill only at md", () => {
+		assert.match(
+			renderToString(
+				createElement(SenderTrustIndicator, {
+					senderTrust: "unknown",
+					size: "md",
+				}),
+			),
+			/First message from this sender/,
+		);
+		assert.equal(
+			renderToString(
+				createElement(SenderTrustIndicator, {
+					senderTrust: "unknown",
+					size: "sm",
+				}),
+			),
+			"",
+		);
+	});
+
+	it("renders nothing for wellknown", () => {
+		assert.equal(
+			renderToString(
+				createElement(SenderTrustIndicator, { senderTrust: "wellknown" }),
+			),
+			"",
+		);
+	});
+});