@remit/ui 0.0.1

package/src/components/banner.tsx

@@ -0,0 +1,81 @@
+import { X } from "lucide-react";
+import type { HTMLAttributes } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+
+export type BannerTone = "info" | "success" | "warning" | "danger";
+export type BannerVariant = "framed" | "soft";
+
+export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+	tone?: BannerTone;
+	variant?: BannerVariant;
+	onDismiss?: () => void;
+}
+
+const framedTones: Record<BannerTone, string> = {
+	info: "bg-accent-2/15 text-accent-2 border-accent-2/40",
+	success: "bg-positive/15 text-positive border-positive/40",
+	warning: "bg-warning/15 text-warning border-warning/40",
+	danger: "bg-danger/15 text-danger border-danger/40",
+};
+
+const softTones: Record<BannerTone, string> = {
+	info: "bg-surface-sunken text-fg-muted",
+	success: "bg-positive/10 text-positive",
+	warning: "bg-warning/10 text-warning",
+	danger: "bg-danger-soft text-danger",
+};
+
+const roles: Record<BannerTone, "status" | "alert"> = {
+	info: "status",
+	success: "status",
+	warning: "alert",
+	danger: "alert",
+};
+
+export function Banner({
+	tone = "info",
+	variant = "framed",
+	onDismiss,
+	role,
+	className,
+	children,
+	...props
+}: BannerProps) {
+	const soft = variant === "soft";
+	return (
+		<div
+			role={role ?? roles[tone]}
+			className={cn(
+				"flex gap-2 px-3 py-2 text-sm",
+				soft
+					? cn("items-start rounded-md", softTones[tone])
+					: cn("items-center border", framedTones[tone]),
+				className,
+			)}
+			{...props}
+		>
+			<div className="flex-1 min-w-0">{children}</div>
+			{onDismiss &&
+				(soft ? (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<X className="size-3.5" />}
+						onClick={onDismiss}
+						aria-label="Dismiss"
+						className="-mr-1 shrink-0"
+					/>
+				) : (
+					<button
+						type="button"
+						onClick={onDismiss}
+						aria-label="Dismiss"
+						className="shrink-0 rounded-md p-1 hover:bg-fg/10 transition-colors"
+					>
+						<X className="size-4" aria-hidden="true" />
+					</button>
+				))}
+		</div>
+	);
+}

package/src/components/bottom-sheet.render.test.ts

@@ -0,0 +1,48 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { BottomSheet } from "./bottom-sheet.js";
+
+const noop = () => {};
+
+describe("BottomSheet", () => {
+	it("renders its children and a drag-to-dismiss grabber when open", () => {
+		const html = renderToString(
+			createElement(BottomSheet, {
+				open: true,
+				onClose: noop,
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: "Sheet body",
+			}),
+		);
+		assert.match(html, /Sheet body/);
+		assert.match(html, /role="slider"/);
+		assert.match(html, /Drag down to dismiss/);
+	});
+
+	it("uses the provided dismiss label on the scrim", () => {
+		const html = renderToString(
+			createElement(BottomSheet, {
+				open: true,
+				onClose: noop,
+				dismissLabel: "Close rescue",
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: "x",
+			}),
+		);
+		assert.match(html, /aria-label="Close rescue"/);
+	});
+
+	it("renders translated off-screen when closed", () => {
+		const html = renderToString(
+			createElement(BottomSheet, {
+				open: false,
+				onClose: noop,
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: "x",
+			}),
+		);
+		assert.match(html, /pointer-events-none/);
+	});
+});

package/src/components/bottom-sheet.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { BottomSheet } from "./bottom-sheet.js";
+import { Button } from "./button.js";
+
+const meta: Meta<typeof BottomSheet> = {
+	title: "Components/BottomSheet",
+	component: BottomSheet,
+	parameters: { layout: "fullscreen" },
+	decorators: [
+		(Story) => (
+			<div className="relative mx-auto h-dvh w-full shrink-0 overflow-hidden bg-surface sm:my-6 sm:h-[640px] sm:w-[390px] sm:rounded-[2rem] sm:border sm:border-line sm:shadow-sm">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof BottomSheet>;
+
+function Demo() {
+	const [open, setOpen] = useState(true);
+	return (
+		<div className="relative h-full overflow-hidden bg-surface">
+			<div className="divide-y divide-line opacity-50">
+				{Array.from({ length: 9 }).map((_, i) => (
+					<div
+						// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton rows
+						key={i}
+						className="flex items-start gap-3 px-row-inset py-2.5"
+					>
+						<div className="mt-0.5 size-7 shrink-0 rounded-full bg-surface-sunken" />
+						<div className="min-w-0 flex-1 space-y-1">
+							<div className="h-2.5 w-1/3 rounded bg-surface-sunken" />
+							<div className="h-2 w-2/3 rounded bg-surface-sunken" />
+						</div>
+					</div>
+				))}
+			</div>
+			{!open && (
+				<Button
+					variant="primary"
+					onClick={() => setOpen(true)}
+					className="absolute inset-x-0 bottom-0 m-3 h-11 font-semibold"
+				>
+					Open sheet
+				</Button>
+			)}
+			<BottomSheet open={open} onClose={() => setOpen(false)}>
+				<div className="px-row-inset py-6">
+					<h2 className="text-sm font-semibold text-fg">Action sheet</h2>
+					<p className="mt-1 text-xs text-fg-subtle">
+						Drag the grabber down or tap outside to dismiss.
+					</p>
+					<Button
+						variant="primary"
+						onClick={() => setOpen(false)}
+						className="mt-4 h-11 w-full font-semibold"
+					>
+						Got it
+					</Button>
+				</div>
+			</BottomSheet>
+		</div>
+	);
+}
+
+export const Default: Story = {
+	render: () => <Demo />,
+};

package/src/components/bottom-sheet.tsx

@@ -0,0 +1,146 @@
+import type { ReactNode } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+
+const SNAP_MS = 320;
+const SNAP_EASE = "cubic-bezier(0.32, 0.9, 0.3, 1)";
+const FLICK_VELOCITY = 0.5;
+const DISMISS_FRACTION = 0.4;
+const HEIGHT_FALLBACK = 360;
+
+function rubberBand(overshoot: number): number {
+	return Math.sign(overshoot) * Math.sqrt(Math.abs(overshoot)) * 4;
+}
+
+export interface BottomSheetProps {
+	open: boolean;
+	onClose: () => void;
+	children: ReactNode;
+	/** Accessible label for the drag-to-dismiss scrim and grabber. */
+	dismissLabel?: string;
+}
+
+/**
+ * Native-feeling action sheet that slides up from the bottom of its positioned
+ * container. Drag the grabber down (or flick) past ~40% to dismiss; tapping the
+ * scrim closes it too. Sits absolutely inside the nearest positioned ancestor,
+ * so wrap it in a `relative` container (e.g. a phone frame).
+ */
+export function BottomSheet({
+	open,
+	onClose,
+	children,
+	dismissLabel = "Dismiss",
+}: BottomSheetProps) {
+	const sheetRef = useRef<HTMLDivElement>(null);
+	const [height, setHeight] = useState(HEIGHT_FALLBACK);
+	const [drag, setDrag] = useState<number | null>(null);
+
+	useLayoutEffect(() => {
+		const el = sheetRef.current;
+		if (!el) return;
+		const measure = () => setHeight(el.offsetHeight);
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+
+	const pointer = useRef<{
+		startY: number;
+		lastY: number;
+		lastT: number;
+		velocity: number;
+		moved: boolean;
+	} | null>(null);
+
+	const onPointerDown = useCallback((e: React.PointerEvent) => {
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		pointer.current = {
+			startY: e.clientY,
+			lastY: e.clientY,
+			lastT: e.timeStamp,
+			velocity: 0,
+			moved: false,
+		};
+		setDrag(0);
+	}, []);
+
+	const onPointerMove = useCallback((e: React.PointerEvent) => {
+		const p = pointer.current;
+		if (!p) return;
+		const dt = e.timeStamp - p.lastT;
+		if (dt > 0) p.velocity = (e.clientY - p.lastY) / dt;
+		p.lastY = e.clientY;
+		p.lastT = e.timeStamp;
+
+		const delta = e.clientY - p.startY;
+		if (Math.abs(delta) > 4) p.moved = true;
+		const next = delta < 0 ? rubberBand(delta) : delta;
+		setDrag(next);
+	}, []);
+
+	const finishDrag = useCallback(() => {
+		const p = pointer.current;
+		pointer.current = null;
+		if (!p) return;
+		const delta = p.lastY - p.startY;
+		const flick = p.velocity > FLICK_VELOCITY;
+		const dismiss = flick || delta > height * DISMISS_FRACTION;
+		setDrag(null);
+		if (dismiss) onClose();
+	}, [height, onClose]);
+
+	const dragging = drag !== null;
+	const offset = open ? (drag ?? 0) : height;
+	const openness = Math.min(Math.max(1 - offset / height, 0), 1);
+	const transition = dragging ? "none" : `transform ${SNAP_MS}ms ${SNAP_EASE}`;
+
+	return (
+		<div
+			className={cn(
+				"absolute inset-0 z-40 select-none overflow-hidden",
+				open || dragging ? "" : "pointer-events-none",
+			)}
+		>
+			<button
+				type="button"
+				aria-label={dismissLabel}
+				tabIndex={-1}
+				onClick={onClose}
+				className={cn(
+					"absolute inset-0 bg-black/40",
+					openness > 0 ? "pointer-events-auto" : "pointer-events-none",
+				)}
+				style={{
+					opacity: openness * 0.6,
+					transition: transition.replace("transform", "opacity"),
+				}}
+			/>
+			<div
+				ref={sheetRef}
+				className="absolute inset-x-0 bottom-0 flex max-h-[92%] flex-col rounded-t-3xl border-t border-line bg-surface shadow-2xl shadow-black/30"
+				style={{ transform: `translateY(${offset}px)`, transition }}
+			>
+				<div
+					role="slider"
+					aria-label="Drag down to dismiss"
+					aria-valuemin={0}
+					aria-valuemax={100}
+					aria-valuenow={Math.round(openness * 100)}
+					tabIndex={0}
+					onPointerDown={onPointerDown}
+					onPointerMove={onPointerMove}
+					onPointerUp={finishDrag}
+					onPointerCancel={finishDrag}
+					className="flex cursor-grab touch-none justify-center pb-1 pt-2.5 active:cursor-grabbing"
+				>
+					<div className="h-1 w-10 rounded-full bg-fg-subtle/40" />
+				</div>
+				<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/components/brief-section.render.test.ts

@@ -0,0 +1,98 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { ThreadRowData, ThreadSection } from "./app-shell-types.js";
+import { BriefSection, SECTION_ROW_CAP } from "./brief-section.js";
+import { ComfortableRow } from "./message-row.js";
+
+function makeRow(i: number): ThreadRowData {
+	return {
+		id: `t${i}`,
+		accountId: "a1",
+		fromName: `Sender ${i}`,
+		fromEmail: `sender${i}@example.com`,
+		subject: `Subject ${i}`,
+		snippet: "Preview",
+		timeLabel: "9:00",
+		isRead: false,
+		category: "personal",
+	};
+}
+
+function section(count: number): ThreadSection {
+	return {
+		id: "personal",
+		label: "Personal",
+		threads: Array.from({ length: count }, (_, i) => makeRow(i + 1)),
+	};
+}
+
+function render(props: {
+	count: number;
+	initialExpanded?: boolean;
+	initialCollapsed?: boolean;
+}): string {
+	return renderToString(
+		createElement(BriefSection, {
+			section: section(props.count),
+			Row: ComfortableRow,
+			initialExpanded: props.initialExpanded,
+			initialCollapsed: props.initialCollapsed,
+			onSelectThread: () => undefined,
+		}),
+	);
+}
+
+function rowCount(html: string): number {
+	return (html.match(/Subject \d+/g) ?? []).length;
+}
+
+describe("BriefSection", () => {
+	it("renders the section label and a row count", () => {
+		const html = render({ count: 3 });
+		assert.match(html, /Personal/);
+		assert.match(html, />3</);
+	});
+
+	it("shows every row and no expander below the cap", () => {
+		const html = render({ count: SECTION_ROW_CAP });
+		assert.strictEqual(rowCount(html), SECTION_ROW_CAP);
+		assert.doesNotMatch(html, /Show \d+ more/);
+		assert.doesNotMatch(html, /Show less/);
+	});
+
+	it("caps at SECTION_ROW_CAP with a 'Show N more' control over the cap", () => {
+		const html = render({ count: 18 });
+		assert.strictEqual(rowCount(html), SECTION_ROW_CAP);
+		assert.match(html, new RegExp(`Show ${18 - SECTION_ROW_CAP} more`));
+	});
+
+	it("reveals every row and offers 'Show less' when expanded", () => {
+		const html = render({ count: 18, initialExpanded: true });
+		assert.strictEqual(rowCount(html), 18);
+		assert.match(html, /Show less/);
+		assert.doesNotMatch(html, /Show \d+ more/);
+	});
+
+	it("renders rows by default — sections start expanded", () => {
+		const html = render({ count: 3 });
+		assert.strictEqual(rowCount(html), 3);
+	});
+
+	it("shows only the header and count when initially collapsed", () => {
+		const html = render({ count: 18, initialCollapsed: true });
+		assert.match(html, /Personal/);
+		assert.match(html, />18</);
+		assert.strictEqual(rowCount(html), 0);
+		assert.doesNotMatch(html, /Show \d+ more/);
+		assert.doesNotMatch(html, /Show less/);
+	});
+
+	it("makes the header a button with aria-expanded so it toggles the section", () => {
+		const expandedHtml = render({ count: 3 });
+		assert.match(expandedHtml, /<button[^>]*aria-expanded="true"/);
+		const collapsedHtml = render({ count: 3, initialCollapsed: true });
+		assert.match(collapsedHtml, /<button[^>]*aria-expanded="false"/);
+	});
+});

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ThreadRowData, ThreadSection } from "./app-shell-types.js";
+import { BriefSection } from "./brief-section.js";
+import { ComfortableRow } from "./message-row.js";
+
+function makeRow(i: number): ThreadRowData {
+	return {
+		id: `t${i}`,
+		accountId: "a1",
+		fromName: `Sender ${i}`,
+		fromEmail: `sender${i}@example.com`,
+		subject: `Subject line ${i}`,
+		snippet: "A short preview of the message body.",
+		timeLabel: `9:0${i % 10}`,
+		isRead: i % 2 === 0,
+		category: "personal",
+	};
+}
+
+const shortSection: ThreadSection = {
+	id: "transactional",
+	label: "Transactional",
+	threads: Array.from({ length: 3 }, (_, i) => makeRow(i + 1)),
+};
+
+const longSection: ThreadSection = {
+	id: "newsletter",
+	label: "Newsletter",
+	threads: Array.from({ length: 18 }, (_, i) => makeRow(i + 1)),
+};
+
+const meta: Meta<typeof BriefSection> = {
+	title: "Screens/Kit/BriefSection",
+	component: BriefSection,
+	parameters: { layout: "fullscreen" },
+	args: {
+		Row: ComfortableRow,
+		onSelectThread: () => undefined,
+	},
+	render: (args) => (
+		<div className="flex h-screen w-96 flex-col border-r border-line">
+			<BriefSection {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof BriefSection>;
+
+/** Fewer than the cap — no expander. */
+export const Short: Story = {
+	args: { section: shortSection },
+};
+
+/** Over the cap — shows the first 10 rows and a "Show N more" control. */
+export const CollapsedAtCap: Story = {
+	args: { section: longSection },
+};
+
+/** The same section after expanding — every row visible, "Show less" to collapse. */
+export const Expanded: Story = {
+	args: { section: longSection, initialExpanded: true },
+};
+
+/** Section collapsed by its header — only the label + count show, every row hidden. */
+export const SectionCollapsed: Story = {
+	args: { section: longSection, initialCollapsed: true },
+};

package/src/components/brief-section.tsx

@@ -0,0 +1,102 @@
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../lib/cn.js";
+import type { ThreadSection } from "./app-shell-types.js";
+import type { BriefRowComponent } from "./message-row.js";
+
+/** Rows shown before the "Show N more" expander kicks in. */
+export const SECTION_ROW_CAP = 10;
+
+export interface BriefSectionProps {
+	section: ThreadSection;
+	Row: BriefRowComponent;
+	selectedThreadId?: string;
+	/** Seed the in-section "Show N more" state — lets a story / SSR render the expanded view. */
+	initialExpanded?: boolean;
+	/** Seed the section-collapse state — lets a story / SSR render the header-only view. */
+	initialCollapsed?: boolean;
+	onSelectThread?: (id: string) => void;
+}
+
+/**
+ * One brief section: a sticky category label, the first {@link SECTION_ROW_CAP}
+ * rows, and a "Show N more" control that reveals the rest in place (toggling
+ * back to "Show less"). The control is always tappable — it never disables.
+ *
+ * The header is itself a toggle: tapping it collapses the whole section to just
+ * the label + count (hiding every row and the "Show N more" control) and
+ * expands it again. Sections start expanded so the default brief render is
+ * unchanged.
+ *
+ * Owns only its own expand/collapse state; the parent supplies the grouped
+ * section and a `Row` renderer so the live brief and the Storybook prototype
+ * stay in lockstep.
+ */
+export function BriefSection({
+	section,
+	Row,
+	selectedThreadId,
+	initialExpanded = false,
+	initialCollapsed = false,
+	onSelectThread,
+}: BriefSectionProps) {
+	const [expanded, setExpanded] = useState(initialExpanded);
+	const [collapsed, setCollapsed] = useState(initialCollapsed);
+
+	const overCap = section.threads.length > SECTION_ROW_CAP;
+	const capped = !expanded && overCap;
+	const visible = capped
+		? section.threads.slice(0, SECTION_ROW_CAP)
+		: section.threads;
+	const hiddenCount = section.threads.length - visible.length;
+
+	return (
+		<div>
+			{section.label && (
+				<button
+					type="button"
+					aria-expanded={!collapsed}
+					onClick={() => setCollapsed((v) => !v)}
+					className="sticky top-0 z-10 flex h-section-row w-full items-center gap-1.5 border-b border-line bg-surface-sunken px-row-inset text-left transition-colors hover:bg-surface"
+				>
+					<span className="flex-1 text-2xs font-semibold uppercase tracking-wider text-fg-subtle">
+						{section.label}
+					</span>
+					<span className="text-2xs text-fg-subtle tabular-nums">
+						{section.threads.length}
+					</span>
+					<ChevronDown
+						className={cn(
+							"size-3 shrink-0 text-fg-subtle transition-transform duration-200",
+							collapsed ? "rotate-0" : "rotate-180",
+						)}
+					/>
+				</button>
+			)}
+			{!collapsed && (
+				<>
+					<div className="divide-y divide-line">
+						{visible.map((thread) => (
+							<Row
+								key={thread.id}
+								thread={thread}
+								active={thread.id === selectedThreadId}
+								onClick={() => onSelectThread?.(thread.id)}
+							/>
+						))}
+					</div>
+					{overCap && (
+						<button
+							type="button"
+							onClick={() => setExpanded((v) => !v)}
+							className="flex w-full items-center justify-center border-b border-line px-row-inset py-1.5 text-2xs font-medium text-accent transition-colors hover:bg-surface"
+						>
+							{expanded ? "Show less" : `Show ${hiddenCount} more`}
+							{!expanded && <ChevronDown className="ml-1 size-3" />}
+						</button>
+					)}
+				</>
+			)}
+		</div>
+	);
+}

package/src/components/brief-sections.render.test.ts

@@ -0,0 +1,72 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { BriefCategoryFilter, ThreadSection } from "./app-shell-types.js";
+import { BriefSections } from "./brief-sections.js";
+import { ComfortableRow } from "./message-row.js";
+
+const sections: ThreadSection[] = [
+	{
+		id: "personal",
+		label: "Personal",
+		threads: [
+			{
+				id: "t1",
+				accountId: "a1",
+				fromName: "Priya Nair",
+				fromEmail: "priya@example.com",
+				subject: "Design review tomorrow",
+				snippet: "Can we move it to 2pm?",
+				timeLabel: "8:15",
+				isRead: false,
+				category: "personal",
+			},
+		],
+	},
+	{
+		id: "newsletter",
+		label: "Newsletter",
+		threads: [
+			{
+				id: "t2",
+				accountId: "a1",
+				fromName: "The Weekly Brief",
+				fromEmail: "hello@weekly.example",
+				subject: "This week in product",
+				snippet: "Five stories you missed.",
+				timeLabel: "Thu",
+				isRead: true,
+				category: "newsletter",
+			},
+		],
+	},
+];
+
+function render(briefCategory: BriefCategoryFilter) {
+	return renderToString(
+		createElement(BriefSections, {
+			sections,
+			Row: ComfortableRow,
+			briefCategory,
+			onSelectThread: () => undefined,
+			onSelectBriefCategory: () => undefined,
+		}),
+	);
+}
+
+describe("BriefSections", () => {
+	it("renders section labels and rows", () => {
+		const html = render("all");
+		assert.match(html, /Personal/);
+		assert.match(html, /Newsletter/);
+		assert.match(html, /Priya Nair/);
+		assert.match(html, /Weekly Brief/);
+	});
+
+	it("filters rows by briefCategory", () => {
+		const html = render("newsletter");
+		assert.match(html, /Weekly Brief/);
+		assert.doesNotMatch(html, /Priya Nair/);
+	});
+});