@remit/ui 0.0.1

package/src/components/primitives.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Lock, Mail, Search } from "lucide-react";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+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 { SecuritySelect } from "./security-select.js";
+import { Select } from "./select.js";
+
+const meta: Meta = {
+	title: "Primitives",
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Buttons: Story = {
+	render: () => (
+		<div className="flex flex-wrap items-center gap-3 p-8">
+			<Button variant="primary">Primary</Button>
+			<Button variant="secondary">Secondary</Button>
+			<Button variant="ghost">Ghost</Button>
+			<Button variant="danger">Danger</Button>
+			<Button variant="primary" size="sm" icon={<Mail className="size-3.5" />}>
+				Compose
+			</Button>
+			<Button variant="primary" disabled>
+				Disabled
+			</Button>
+		</div>
+	),
+};
+
+export const Badges: Story = {
+	render: () => (
+		<div className="flex flex-wrap items-center gap-3 p-8">
+			<Badge tone="neutral">newsletter</Badge>
+			<Badge tone="accent">personal</Badge>
+			<Badge tone="positive" dot>
+				Known sender
+			</Badge>
+			<Badge tone="warning">social</Badge>
+			<Badge tone="danger">spam</Badge>
+		</div>
+	),
+};
+
+export const Avatars: Story = {
+	render: () => (
+		<div className="flex items-center gap-4 p-8">
+			<Avatar name="Alice Tan" size="sm" />
+			<Avatar name="Priya Natarajan" size="md" />
+			<Avatar name="Marcus Webb" size="lg" />
+			<Avatar name="Remit CI" email="ci@remit.example" size="md" />
+		</div>
+	),
+};
+
+export const Inputs: Story = {
+	render: () => (
+		<div className="max-w-sm space-y-3 p-8">
+			<Input placeholder="Plain input" />
+			<Input icon={<Search className="size-4" />} placeholder="Search mail" />
+		</div>
+	),
+};
+
+export const InlineInputs: Story = {
+	render: () => (
+		<div className="max-w-sm space-y-3 p-8">
+			<div className="border-b border-line px-3 py-2">
+				<Input variant="inline" placeholder="Filter folders" />
+			</div>
+			<div className="border-b border-line px-3 py-2">
+				<Input
+					variant="inline"
+					icon={<Search className="size-4" />}
+					placeholder="Move to…"
+				/>
+			</div>
+		</div>
+	),
+};
+
+export const LabeledFields: Story = {
+	render: () => (
+		<div className="max-w-sm space-y-3 p-8">
+			<div>
+				<FieldLabel htmlFor="host">Host</FieldLabel>
+				<Input id="host" placeholder="imap.example.com" />
+			</div>
+			<div>
+				<FieldLabel htmlFor="security">Security</FieldLabel>
+				<SecuritySelect id="security" defaultValue="tls" />
+			</div>
+		</div>
+	),
+};
+
+export const SecuritySelects: Story = {
+	render: () => (
+		<div className="max-w-sm space-y-3 p-8">
+			<SecuritySelect defaultValue="tls" />
+			<SecuritySelect defaultValue="starttls" />
+			<SecuritySelect defaultValue="none" />
+		</div>
+	),
+};
+
+export const Selects: Story = {
+	render: () => (
+		<div className="max-w-sm space-y-3 p-8">
+			<Select defaultValue="tls">
+				<option value="tls">TLS/SSL</option>
+				<option value="starttls">STARTTLS</option>
+				<option value="none">None (insecure)</option>
+			</Select>
+			<Select icon={<Lock className="size-4" />} defaultValue="starttls">
+				<option value="tls">TLS/SSL</option>
+				<option value="starttls">STARTTLS</option>
+				<option value="none">None (insecure)</option>
+			</Select>
+		</div>
+	),
+};
+
+export const Cards: Story = {
+	render: () => (
+		<div className="max-w-md p-8">
+			<Card raised>
+				<CardHeader>
+					<CardTitle>Card title</CardTitle>
+				</CardHeader>
+				<CardBody>
+					Hairline border, minimal shadow. Surfaces and text are fully
+					token-driven so this flips cleanly between light and dark.
+				</CardBody>
+			</Card>
+		</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/pull-to-refresh.render.test.ts

@@ -0,0 +1,46 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { PullToRefresh } from "./pull-to-refresh.js";
+
+const noop = () => Promise.resolve();
+const list = createElement("ul", null, "messages");
+
+describe("PullToRefresh", () => {
+	it("renders its children inside the pull wrapper", () => {
+		const html = renderToString(
+			createElement(PullToRefresh, {
+				onRefresh: noop,
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: list,
+			}),
+		);
+		assert.match(html, /messages/);
+		assert.match(html, /ptr/);
+	});
+
+	it("keeps the gesture pullable while not refreshing", () => {
+		const html = renderToString(
+			createElement(PullToRefresh, {
+				onRefresh: noop,
+				isRefreshing: false,
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: list,
+			}),
+		);
+		assert.match(html, /ptr/);
+	});
+
+	it("still renders its children while a refresh is in flight", () => {
+		const html = renderToString(
+			createElement(PullToRefresh, {
+				onRefresh: noop,
+				isRefreshing: true,
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: list,
+			}),
+		);
+		assert.match(html, /messages/);
+	});
+});

package/src/components/pull-to-refresh.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PullToRefresh } from "./pull-to-refresh.js";
+
+const rows = Array.from({ length: 20 }, (_, i) => `Message ${i + 1}`);
+
+function MessageList() {
+	return (
+		<ul className="divide-y divide-line bg-surface">
+			{rows.map((row) => (
+				<li key={row} className="px-4 py-3 text-sm text-fg">
+					{row}
+				</li>
+			))}
+		</ul>
+	);
+}
+
+function PhoneFrame({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="h-[480px] max-w-md overflow-y-auto rounded-lg border border-line">
+			{children}
+		</div>
+	);
+}
+
+const meta: Meta<typeof PullToRefresh> = {
+	title: "Primitives/PullToRefresh",
+	component: PullToRefresh,
+	parameters: { layout: "padded" },
+	render: (args) => (
+		<PhoneFrame>
+			<PullToRefresh {...args}>
+				<MessageList />
+			</PullToRefresh>
+		</PhoneFrame>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof PullToRefresh>;
+
+export const Idle: Story = {
+	name: "Idle — pull to refresh",
+	args: {
+		onRefresh: () => new Promise((resolve) => setTimeout(resolve, 1200)),
+	},
+};
+
+export const Refreshing: Story = {
+	name: "Refreshing — gesture suspended",
+	args: {
+		onRefresh: () => Promise.resolve(),
+		isRefreshing: true,
+	},
+};
+
+export const DesktopNoop: Story = {
+	name: "Desktop — gesture inert",
+	parameters: {
+		viewport: { defaultViewport: "desktop" },
+		docs: {
+			description: {
+				story:
+					"At desktop widths (lg, 1024px and up) the gesture is inert and the list renders directly — there is no touch list to pull.",
+			},
+		},
+	},
+	args: {
+		onRefresh: () => Promise.resolve(),
+	},
+};

package/src/components/pull-to-refresh.tsx

@@ -0,0 +1,54 @@
+import type { ReactElement } from "react";
+import { useEffect, useState } from "react";
+import ReactPullToRefresh from "react-simple-pull-to-refresh";
+
+export interface PullToRefreshProps {
+	children: ReactElement;
+	onRefresh: () => Promise<unknown>;
+	isRefreshing?: boolean;
+}
+
+const useMatchMedia = (query: string): boolean => {
+	const [matches, setMatches] = useState(() => {
+		if (typeof window === "undefined" || !window.matchMedia) return false;
+		return window.matchMedia(query).matches;
+	});
+
+	useEffect(() => {
+		if (typeof window === "undefined" || !window.matchMedia) return;
+		const mql = window.matchMedia(query);
+		setMatches(mql.matches);
+		const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	}, [query]);
+
+	return matches;
+};
+
+/**
+ * Wraps a scrollable list with a pull-to-refresh gesture on mobile. Below the
+ * desktop breakpoint (Tailwind `lg`, 1024px) a downward pull at the top of the
+ * list fires `onRefresh`; at desktop widths the gesture is inert and children
+ * render directly, since there is no touch list to pull.
+ *
+ * Presentational: the caller owns what refreshing means via `onRefresh` and
+ * surfaces in-flight state through `isRefreshing`.
+ */
+export const PullToRefresh = ({
+	children,
+	onRefresh,
+	isRefreshing,
+}: PullToRefreshProps): ReactElement => {
+	const isDesktop = useMatchMedia("(min-width: 1024px)");
+
+	if (isDesktop) {
+		return children;
+	}
+
+	return (
+		<ReactPullToRefresh onRefresh={onRefresh} isPullable={!isRefreshing}>
+			{children}
+		</ReactPullToRefresh>
+	);
+};

package/src/components/quoted-text.render.test.ts

@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { QuotedText } from "./quoted-text.js";
+
+describe("QuotedText", () => {
+	it("renders nothing when there is no text or html", () => {
+		assert.equal(renderToString(createElement(QuotedText, { text: "" })), "");
+	});
+
+	it("shows the attribution and a collapse toggle by default", () => {
+		const html = renderToString(
+			createElement(QuotedText, {
+				text: "hello",
+				senderName: "Dana Whitfield",
+				date: "Jun 24, 2026",
+			}),
+		);
+		assert.match(html, /Dana Whitfield on Jun 24, 2026 wrote:/);
+		assert.match(html, /aria-expanded="false"/);
+	});
+
+	it("falls back to a generic label when there is no attribution", () => {
+		const html = renderToString(createElement(QuotedText, { text: "hello" }));
+		assert.match(html, /Show quoted text/);
+	});
+
+	it("keeps the quoted body collapsed initially", () => {
+		const html = renderToString(
+			createElement(QuotedText, {
+				text: "secret quoted line",
+				html: "<p>secret quoted html</p>",
+				senderName: "Dana",
+			}),
+		);
+		assert.doesNotMatch(html, /secret quoted/);
+	});
+});

package/src/components/quoted-text.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { QuotedText } from "./quoted-text.js";
+
+const meta: Meta<typeof QuotedText> = {
+	title: "Mail/QuotedText",
+	component: QuotedText,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof QuotedText>;
+
+const quotedHtml = `
+	<p>Thanks for the quick turnaround on the proposal.</p>
+	<p>A couple of follow-ups before Friday:</p>
+	<ul>
+		<li>Can we confirm the <strong>delivery window</strong>?</li>
+		<li>See the earlier thread for the pricing notes:</li>
+	</ul>
+	<blockquote><p>The original quote stands through end of quarter.</p></blockquote>
+	<p>More context on the <a href="https://example.com/brief">shared brief</a>.</p>
+`;
+
+const quotedPlainText = [
+	"Thanks for the quick turnaround on the proposal.",
+	"",
+	"A couple of follow-ups before Friday:",
+	"- Can we confirm the delivery window?",
+	"- See the earlier thread for the pricing notes.",
+].join("\n");
+
+export const Collapsed: Story = {
+	args: {
+		text: quotedPlainText,
+		html: quotedHtml,
+		senderName: "Dana Whitfield",
+		date: "Jun 24, 2026, 9:14 AM",
+	},
+};
+
+export const ExpandedHtml: Story = {
+	args: {
+		text: quotedPlainText,
+		html: quotedHtml,
+		senderName: "Dana Whitfield",
+		date: "Jun 24, 2026, 9:14 AM",
+	},
+	play: async ({ canvasElement }) => {
+		canvasElement.querySelector("button")?.click();
+	},
+};
+
+export const PlainTextOnly: Story = {
+	args: {
+		text: quotedPlainText,
+		senderName: "Dana Whitfield",
+	},
+	play: async ({ canvasElement }) => {
+		canvasElement.querySelector("button")?.click();
+	},
+};
+
+export const NoAttribution: Story = {
+	args: {
+		text: quotedPlainText,
+	},
+};

package/src/components/quoted-text.tsx

@@ -0,0 +1,67 @@
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+export interface QuotedTextProps {
+	/** Plain-text quote, used when no `html` is supplied. */
+	text: string;
+	/**
+	 * Sanitized quoted HTML. Must already be DOMPurify'd by the caller — this
+	 * component renders it via `dangerouslySetInnerHTML` and never sanitizes.
+	 * Never pass raw, untrusted HTML here.
+	 */
+	html?: string;
+	senderName?: string;
+	date?: string;
+}
+
+/**
+ * Collapsible quoted-message block for reply/forward compose. Renders a muted
+ * attribution toggle ("<sender> on <date> wrote:") that expands to reveal the
+ * quoted body. Presentational and self-contained: collapse state is internal,
+ * sanitization is the caller's responsibility.
+ */
+export const QuotedText = ({
+	text,
+	html,
+	senderName,
+	date,
+}: QuotedTextProps) => {
+	const [isExpanded, setIsExpanded] = useState(false);
+
+	if (!text && !html) return null;
+
+	const attribution = [senderName, date].filter(Boolean).join(" on ");
+
+	return (
+		<div className="mt-2 px-3 pb-2">
+			<button
+				type="button"
+				onClick={() => setIsExpanded(!isExpanded)}
+				aria-expanded={isExpanded}
+				className="flex items-center gap-1 text-xs text-fg-muted hover:text-fg transition-colors"
+			>
+				{isExpanded ? (
+					<ChevronDown className="size-3" />
+				) : (
+					<ChevronRight className="size-3" />
+				)}
+				{attribution ? `${attribution} wrote:` : "Show quoted text"}
+			</button>
+			{isExpanded && (
+				<blockquote className="mt-2 pl-3 border-l-2 border-fg-subtle/30 text-sm text-fg-muted [&_a]:text-accent [&_a]:underline [&_blockquote]:pl-3 [&_blockquote]:border-l-2 [&_blockquote]:border-fg-subtle/30">
+					{html ? (
+						// biome-ignore lint/security/noDangerouslySetInnerHtml: rendering sanitized HTML via email-sanitizer
+						<div dangerouslySetInnerHTML={{ __html: html }} />
+					) : (
+						text.split("\n").map((line, i) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: list is static, no stable id
+							<p key={i} className="min-h-[1.2em]">
+								{line}
+							</p>
+						))
+					)}
+				</blockquote>
+			)}
+		</div>
+	);
+};

package/src/components/reading-pane-empty.tsx

@@ -0,0 +1,44 @@
+import { Inbox } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+import { Kbd } from "./kbd.js";
+
+export interface ReadingPaneEmptyProps {
+	/** Headline. */
+	message?: string;
+	/** Override the centered icon. */
+	icon?: ReactNode;
+	/** Hide the keyboard hint line (e.g. on touch surfaces). */
+	showHints?: boolean;
+	className?: string;
+}
+
+/**
+ * The reading pane's zero-state: a centered Inbox icon, a prompt, and the
+ * j/k/Enter navigation hints. One source of truth for both the brief and the
+ * mailbox routes (they used to drift between a bare text EmptyState and the
+ * designed treatment).
+ */
+export function ReadingPaneEmpty({
+	message = "Select a thread to read",
+	icon,
+	showHints = true,
+	className,
+}: ReadingPaneEmptyProps) {
+	return (
+		<div
+			className={cn(
+				"flex flex-1 flex-col items-center justify-center text-center",
+				className,
+			)}
+		>
+			{icon ?? <Inbox className="size-10 text-fg-subtle" />}
+			<p className="mt-3 text-sm text-fg-muted">{message}</p>
+			{showHints && (
+				<p className="text-2xs text-fg-subtle">
+					<Kbd>j</Kbd> / <Kbd>k</Kbd> to move, <Kbd>Enter</Kbd> to open
+				</p>
+			)}
+		</div>
+	);
+}