@remit/ui 0.0.1

package/src/components/brief-sections.stories.tsx

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import type {
+	BriefCategoryFilter,
+	ThreadRowData,
+	ThreadSection,
+} from "./app-shell-types.js";
+import { BriefSections } from "./brief-sections.js";
+import type { FilterSheetSource } from "./filter-sheet.js";
+import { ComfortableRow } from "./message-row.js";
+
+function newsletterRow(i: number): ThreadRowData {
+	return {
+		id: `n${i}`,
+		accountId: "a1",
+		fromName: `Digest ${i}`,
+		fromEmail: `digest${i}@news.example`,
+		subject: `This week, edition ${i}`,
+		snippet: "Stories you might have missed.",
+		timeLabel: "Thu",
+		isRead: true,
+		category: "newsletter",
+	};
+}
+
+const sections: ThreadSection[] = [
+	{
+		id: "flagged",
+		label: "Flagged",
+		threads: [
+			{
+				id: "f1",
+				accountId: "a1",
+				fromName: "Dana Lopez",
+				fromEmail: "dana@example.com",
+				subject: "Offsite logistics",
+				snippet: "Final headcount for the venue.",
+				timeLabel: "Tue",
+				isRead: false,
+				starred: true,
+				category: "personal",
+			},
+		],
+	},
+	{
+		id: "personal",
+		label: "Personal",
+		threads: [
+			{
+				id: "p1",
+				accountId: "a1",
+				fromName: "Priya Nair",
+				fromEmail: "priya@example.com",
+				subject: "Design review tomorrow",
+				snippet: "Can we move it to 2pm? I have a conflict.",
+				timeLabel: "8:15",
+				isRead: false,
+				category: "personal",
+			},
+		],
+	},
+	{
+		id: "transactional",
+		label: "Transactional",
+		threads: [
+			{
+				id: "x1",
+				accountId: "a1",
+				fromName: "Sam Okafor",
+				fromEmail: "sam@example.com",
+				subject: "Contract signed",
+				snippet: "Attaching the countersigned PDF.",
+				timeLabel: "9:01",
+				isRead: false,
+				hasAttachment: true,
+				category: "transactional",
+			},
+		],
+	},
+	{
+		id: "newsletter",
+		label: "Newsletter",
+		threads: Array.from({ length: 14 }, (_, i) => newsletterRow(i + 1)),
+	},
+];
+
+const meta: Meta<typeof BriefSections> = {
+	title: "Screens/Kit/BriefSections",
+	component: BriefSections,
+	parameters: { layout: "fullscreen" },
+	args: {
+		sections,
+		Row: ComfortableRow,
+		briefCategory: "all",
+		onSelectThread: () => undefined,
+		onSelectBriefCategory: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof BriefSections>;
+
+export const Desktop: Story = {
+	render: (args) => (
+		<div className="flex h-screen w-96 flex-col border-r border-line">
+			<BriefSections {...args} />
+		</div>
+	),
+};
+
+export const Mobile: Story = {
+	render: (args) => (
+		<div className="flex h-[844px] w-[390px] flex-col border border-line">
+			<BriefSections {...args} />
+		</div>
+	),
+};
+
+/**
+ * (a) "All" scope: one capped section per category, each with its header. This
+ * is the cross-account aggregate where the section headers earn their keep.
+ */
+export const AllScopeWithHeaders: Story = {
+	args: { briefCategory: "all" },
+	render: (args) => (
+		<div className="flex h-screen w-96 flex-col border-r border-line">
+			<BriefSections {...args} />
+		</div>
+	),
+};
+
+/**
+ * (b) Single-category filter: narrowed to Newsletter, the list renders FLAT with
+ * NO section header — the header would be redundant once a single category is
+ * selected. This is the behavior the live brief now inherits from the kit.
+ */
+export const SingleCategoryFlat: Story = {
+	args: { briefCategory: "newsletter" },
+	render: (args) => (
+		<div className="flex h-screen w-96 flex-col border-r border-line">
+			<BriefSections {...args} />
+		</div>
+	),
+};
+
+const accountSources: FilterSheetSource[] = [
+	{ id: "all", label: "All", active: true },
+	{ id: "a1", label: "work", count: 3 },
+	{ id: "a2", label: "personal", count: 8 },
+];
+
+/**
+ * (c) Account-source filtering (n>1): the cross-account brief exposes an account
+ * pill row above the categories. The row only appears with more than one source.
+ * Selecting a source is single-select (encoded via each source's `active` flag).
+ */
+export const AccountSources: Story = {
+	render: (args) => {
+		const [source, setSource] = useState("all");
+		const [category, setCategory] = useState<BriefCategoryFilter>("all");
+		return (
+			<div className="flex h-screen w-96 flex-col border-r border-line">
+				<BriefSections
+					{...args}
+					briefCategory={category}
+					onSelectBriefCategory={setCategory}
+					sources={accountSources.map((s) => ({
+						...s,
+						active: s.id === source,
+					}))}
+					sourcesNote="+1 muted"
+					onSelectSource={setSource}
+					defaultExpanded
+				/>
+			</div>
+		);
+	},
+};

package/src/components/brief-sections.tsx

@@ -0,0 +1,201 @@
+import { useState } from "react";
+import type {
+	BriefCategoryFilter,
+	ThreadRowData,
+	ThreadSection,
+} from "./app-shell-types.js";
+import { briefCategories, categoryTone } from "./app-shell-types.js";
+import { BriefSection } from "./brief-section.js";
+import {
+	FilterSheet,
+	type FilterSheetCategory,
+	type FilterSheetFilter,
+	type FilterSheetSource,
+} from "./filter-sheet.js";
+import type { BriefRowComponent } from "./message-row.js";
+
+/* Composable brief filters — each is an additive predicate over a thread row. */
+type BriefFilterId = "unread" | "attachment" | "contacts" | "today";
+
+/* "Today" prefers the real `sentDate` timestamp; it falls back to the fixture
+   convention that same-day rows render a HH:MM timeLabel (fixtures carry no
+   sentDate). */
+function isTodayRow(t: ThreadRowData): boolean {
+	if (t.sentDate != null) {
+		return new Date(t.sentDate).toDateString() === new Date().toDateString();
+	}
+	return /^\d{1,2}:\d{2}$/.test(t.timeLabel);
+}
+
+const briefFilterDefs: ReadonlyArray<{
+	id: BriefFilterId;
+	label: string;
+	match: (t: ThreadRowData) => boolean;
+}> = [
+	{ id: "unread", label: "Unread", match: (t) => !t.isRead },
+	{
+		id: "attachment",
+		label: "Has attachment",
+		match: (t) => !!t.hasAttachment,
+	},
+	{
+		id: "contacts",
+		label: "From contacts",
+		match: (t) => t.trust === "vip" || t.trust === "wellknown",
+	},
+	{ id: "today", label: "Today", match: isTodayRow },
+];
+
+/**
+ * The brief's attribute chips as plain `{ id, label }` (no predicates) — the
+ * single source the `briefFilterConfig` preset reuses so the live filter row and
+ * the preset can never diverge.
+ */
+export const briefFilterChips: FilterSheetFilter[] = briefFilterDefs.map(
+	({ id, label }) => ({ id, label }),
+);
+
+export interface BriefSectionsProps {
+	sections: ThreadSection[];
+	briefCategory?: BriefCategoryFilter;
+	selectedThreadId?: string;
+	Row: BriefRowComponent;
+	onSelectThread?: (id: string) => void;
+	onSelectBriefCategory?: (category: BriefCategoryFilter) => void;
+	/**
+	 * Account/source pills, passed straight through to the FilterSheet. Selection
+	 * is encoded per source via `active`; the row only renders when more than one
+	 * source is supplied (the cross-account brief). Single-account views omit it.
+	 */
+	sources?: FilterSheetSource[];
+	/** Note rendered alongside the source pills (e.g. "+1 muted"). */
+	sourcesNote?: string;
+	/** Called when the user selects a source/account pill. */
+	onSelectSource?: (id: string) => void;
+	/** Seeds the filter panel open on first render (stories / deep links). */
+	defaultExpanded?: boolean;
+}
+
+/**
+ * The daily-brief list body: category pills (single-select) + attribute chips
+ * (additive) + one capped section per category (see {@link BriefSection}). Owns
+ * its own filter state; the category axis is controlled via
+ * `briefCategory`/`onSelectBriefCategory`. Consumers pre-filter `sections`
+ * (e.g. by search) and pass a `Row` renderer; the web client reuses this so the
+ * real brief and the Storybook prototype stay in lockstep.
+ */
+export function BriefSections({
+	sections,
+	briefCategory = "all",
+	selectedThreadId,
+	Row,
+	onSelectThread,
+	onSelectBriefCategory,
+	sources,
+	sourcesNote,
+	onSelectSource,
+	defaultExpanded = false,
+}: BriefSectionsProps) {
+	const [active, setActive] = useState<ReadonlySet<BriefFilterId>>(new Set());
+	const [sheetExpanded, setSheetExpanded] = useState(defaultExpanded);
+
+	const toggleFilter = (id: BriefFilterId) => {
+		setActive((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+
+	const predicates = briefFilterDefs.filter((f) => active.has(f.id));
+	const matches = (t: ThreadRowData) =>
+		(briefCategory === "all" || t.category === briefCategory) &&
+		predicates.every((f) => f.match(t));
+
+	// One section per category only earns its keep at the "all" scope. Narrow to
+	// a single category and the headers are redundant: render a plain flat list.
+	const showSections = briefCategory === "all";
+
+	const filtered = sections
+		.map((section) => ({
+			...section,
+			threads: section.threads.filter(matches),
+		}))
+		.filter((section) => section.threads.length > 0);
+
+	const flatRows = sections.flatMap((s) => s.threads).filter(matches);
+
+	const sheetCategories: FilterSheetCategory[] = briefCategories.map((cat) => ({
+		id: cat.id,
+		label: cat.label,
+		tone: cat.id === "all" ? "neutral" : categoryTone[cat.id],
+	}));
+
+	const sheetFilters = briefFilterChips;
+
+	const clearFilters = () => {
+		onSelectBriefCategory?.("all");
+		setActive(new Set());
+	};
+
+	const empty = showSections ? filtered.length === 0 : flatRows.length === 0;
+
+	const listBody = (
+		<>
+			{showSections ? (
+				filtered.map((section) => (
+					<BriefSection
+						key={section.id}
+						section={section}
+						Row={Row}
+						selectedThreadId={selectedThreadId}
+						onSelectThread={onSelectThread}
+					/>
+				))
+			) : (
+				<div className="divide-y divide-line">
+					{flatRows.map((t) => (
+						<Row
+							key={t.id}
+							thread={t}
+							active={t.id === selectedThreadId}
+							onClick={() => onSelectThread?.(t.id)}
+						/>
+					))}
+				</div>
+			)}
+			{empty && (
+				<div className="px-row-inset py-6 text-center text-2xs text-fg-subtle">
+					No threads match these filters.
+				</div>
+			)}
+		</>
+	);
+
+	// One source of truth for both breakpoints: a click-to-expand Filters bar
+	// that pushes the list down. The desktop brief used to render three
+	// permanently-expanded pill rows above the list with two redundant "All"
+	// pills (#783); the FilterSheet renders a single Filters control and one
+	// category scope.
+	return (
+		<FilterSheet
+			categories={sheetCategories}
+			filters={sheetFilters}
+			sources={sources}
+			sourcesNote={sourcesNote}
+			selectedCategory={briefCategory}
+			activeFilters={active}
+			expanded={sheetExpanded}
+			onExpandedChange={setSheetExpanded}
+			onSelectCategory={(id) =>
+				onSelectBriefCategory?.(id as BriefCategoryFilter)
+			}
+			onSelectSource={onSelectSource}
+			onToggleFilter={(id) => toggleFilter(id as BriefFilterId)}
+			onClear={clearFilters}
+		>
+			{listBody}
+		</FilterSheet>
+	);
+}

package/src/components/button.tsx

@@ -0,0 +1,48 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+
+type Variant = "primary" | "secondary" | "ghost" | "danger";
+type Size = "sm" | "md";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: Variant;
+	size?: Size;
+	/** Optional leading icon (lucide-react element). */
+	icon?: ReactNode;
+}
+
+const base =
+	"inline-flex items-center justify-center gap-2 rounded-md font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface disabled:opacity-50 disabled:pointer-events-none";
+
+const variants: Record<Variant, string> = {
+	primary: "bg-accent text-accent-fg hover:bg-accent-hover",
+	secondary:
+		"bg-surface text-fg border border-line hover:bg-surface-sunken hover:border-line-strong",
+	ghost: "text-fg-muted hover:bg-surface-sunken hover:text-fg",
+	danger: "bg-danger text-accent-fg hover:opacity-90",
+};
+
+const sizes: Record<Size, string> = {
+	sm: "h-7 px-2.5 text-xs",
+	md: "h-9 px-3.5 text-sm",
+};
+
+export function Button({
+	variant = "primary",
+	size = "md",
+	icon,
+	className,
+	children,
+	...props
+}: ButtonProps) {
+	return (
+		<button
+			type="button"
+			className={cn(base, variants[variant], sizes[size], className)}
+			{...props}
+		>
+			{icon}
+			{children}
+		</button>
+	);
+}

package/src/components/card.tsx

@@ -0,0 +1,48 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+	/** Slightly lifted surface with a hairline border. */
+	raised?: boolean;
+}
+
+export function Card({ raised, className, ...props }: CardProps) {
+	return (
+		<div
+			className={cn(
+				"rounded-sm border border-line bg-surface",
+				raised ? "bg-surface-raised shadow-sm" : "",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export function CardHeader({
+	className,
+	...props
+}: HTMLAttributes<HTMLDivElement>) {
+	return <div className={cn("px-4 pt-3 pb-2", className)} {...props} />;
+}
+
+export function CardTitle({
+	className,
+	...props
+}: HTMLAttributes<HTMLHeadingElement>) {
+	return (
+		<h3 className={cn("text-md font-semibold text-fg", className)} {...props} />
+	);
+}
+
+export function CardBody({
+	className,
+	...props
+}: HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn("px-4 pb-3 text-sm text-fg-muted", className)}
+			{...props}
+		/>
+	);
+}

package/src/components/category-badge.render.test.ts

@@ -0,0 +1,40 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { CategoryBadge, getCategoryLabel } from "./category-badge.js";
+
+describe("getCategoryLabel", () => {
+	it("returns null for undefined (no badge)", () => {
+		assert.equal(getCategoryLabel(undefined), null);
+	});
+
+	it("returns null for 'personal' (default fallback, no badge)", () => {
+		assert.equal(getCategoryLabel("personal"), null);
+	});
+
+	it("maps each non-personal category to its label", () => {
+		assert.equal(getCategoryLabel("newsletter"), "newsletter");
+		assert.equal(getCategoryLabel("marketing"), "marketing");
+		assert.equal(getCategoryLabel("automated"), "notification");
+		assert.equal(getCategoryLabel("transactional"), "receipt");
+		assert.equal(getCategoryLabel("social"), "social");
+	});
+});
+
+describe("CategoryBadge", () => {
+	it("renders nothing for personal", () => {
+		assert.equal(
+			renderToString(createElement(CategoryBadge, { category: "personal" })),
+			"",
+		);
+	});
+
+	it("renders the label with an accessible category name", () => {
+		const html = renderToString(
+			createElement(CategoryBadge, { category: "newsletter" }),
+		);
+		assert.match(html, /newsletter/);
+		assert.match(html, /aria-label="Category: newsletter"/);
+	});
+});

package/src/components/category-badge.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CategoryBadge, type MessageCategory } from "./category-badge.js";
+
+const meta: Meta<typeof CategoryBadge> = {
+	title: "Mail/CategoryBadge",
+	component: CategoryBadge,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof CategoryBadge>;
+
+const categories: MessageCategory[] = [
+	"newsletter",
+	"marketing",
+	"automated",
+	"transactional",
+	"social",
+];
+
+export const AllCategories: Story = {
+	render: () => (
+		<div className="flex flex-wrap items-center gap-2">
+			{categories.map((category) => (
+				<CategoryBadge key={category} category={category} size="md" />
+			))}
+		</div>
+	),
+};
+
+export const PersonalRendersNothing: Story = {
+	args: { category: "personal", size: "md" },
+};
+
+export const ListRowSize: Story = {
+	args: { category: "newsletter", size: "sm" },
+};

package/src/components/category-badge.tsx

@@ -0,0 +1,71 @@
+import { cn } from "../lib/cn.js";
+
+export type MessageCategory =
+	| "personal"
+	| "newsletter"
+	| "marketing"
+	| "automated"
+	| "transactional"
+	| "social";
+
+/**
+ * Display label for a message category badge.
+ *
+ * Per EDD #232: `personal` is the default fallback and never renders a badge,
+ * so it has no entry here. `transactional` shows as "receipt" and `automated`
+ * shows as "notification" — wording chosen so the badge reads naturally next
+ * to a subject line.
+ */
+const CATEGORY_LABELS: Record<Exclude<MessageCategory, "personal">, string> = {
+	newsletter: "newsletter",
+	marketing: "marketing",
+	automated: "notification",
+	transactional: "receipt",
+	social: "social",
+};
+
+export const getCategoryLabel = (
+	category: MessageCategory | undefined,
+): string | null => {
+	if (!category || category === "personal") return null;
+	return CATEGORY_LABELS[category];
+};
+
+export interface CategoryBadgeProps {
+	category: MessageCategory | undefined;
+	/** Larger size for the open-message header. List rows use the default. */
+	size?: "sm" | "md";
+	className?: string;
+}
+
+/**
+ * Inline category label for non-personal mail. Renders nothing for `personal`
+ * or absent values so the existing list-row layout is unaffected for the
+ * common case.
+ *
+ * Visual style matches the muted, low-emphasis aesthetic of the surrounding
+ * row chrome — no color tabs, no full-width pill backgrounds.
+ */
+export const CategoryBadge = ({
+	category,
+	size = "sm",
+	className,
+}: CategoryBadgeProps) => {
+	const label = getCategoryLabel(category);
+	if (!label) return null;
+
+	return (
+		// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label provides useful context for assistive tech despite generic span role
+		<span
+			className={cn(
+				"inline-flex items-center rounded border border-line bg-surface-sunken/50 font-medium uppercase tracking-wide text-fg-muted shrink-0",
+				size === "sm" && "px-1.5 py-0 text-2xs leading-4",
+				size === "md" && "px-2 py-0.5 text-xs",
+				className,
+			)}
+			aria-label={`Category: ${label}`}
+		>
+			{label}
+		</span>
+	);
+};

package/src/components/checkbox.render.test.ts

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { Checkbox } from "./checkbox.js";
+
+const noop = () => {};
+
+describe("Checkbox", () => {
+	it("renders a real checkbox input", () => {
+		const html = renderToString(
+			createElement(Checkbox, {
+				"aria-label": "Select row",
+				checked: false,
+				onChange: noop,
+			}),
+		);
+		assert.match(html, /type="checkbox"/);
+		assert.match(html, /aria-label="Select row"/);
+	});
+
+	it("reflects the checked state on the input", () => {
+		const checked = renderToString(
+			createElement(Checkbox, {
+				"aria-label": "x",
+				checked: true,
+				onChange: noop,
+			}),
+		);
+		assert.match(checked, /checked=""/);
+
+		const unchecked = renderToString(
+			createElement(Checkbox, {
+				"aria-label": "x",
+				checked: false,
+				onChange: noop,
+			}),
+		);
+		assert.doesNotMatch(unchecked, /checked=""/);
+	});
+
+	it("wraps in a label with the touch target when given label text", () => {
+		const html = renderToString(
+			createElement(Checkbox, {
+				label: "Keep me posted",
+				checked: false,
+				onChange: noop,
+			}),
+		);
+		assert.match(html, /<label/);
+		assert.match(html, /min-h-11/);
+		assert.match(html, /Keep me posted/);
+	});
+
+	it("renders just the control when label and description are omitted", () => {
+		const html = renderToString(
+			createElement(Checkbox, {
+				"aria-label": "bare",
+				checked: false,
+				onChange: noop,
+			}),
+		);
+		assert.doesNotMatch(html, /<label/);
+	});
+});