@remit/ui 0.0.1

package/src/components/checkbox.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Checkbox } from "./checkbox.js";
+
+const meta: Meta<typeof Checkbox> = {
+	title: "Components/Checkbox",
+	component: Checkbox,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<div className="mx-auto max-w-sm rounded-xl border border-line bg-surface p-4">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Labelled: Story = {
+	render: () => {
+		const [checked, setChecked] = useState(true);
+		return (
+			<Checkbox
+				label="Move these out of Spam"
+				description="You can undo this later"
+				checked={checked}
+				onChange={(e) => setChecked(e.target.checked)}
+			/>
+		);
+	},
+};
+
+export const Unchecked: Story = {
+	render: () => {
+		const [checked, setChecked] = useState(false);
+		return (
+			<Checkbox
+				label="Keep me posted"
+				checked={checked}
+				onChange={(e) => setChecked(e.target.checked)}
+			/>
+		);
+	},
+};
+
+export const Indeterminate: Story = {
+	render: () => (
+		<Checkbox
+			label="Some selected"
+			description="Tri-state, e.g. a select-all header"
+			indeterminate
+			checked={false}
+			onChange={() => {}}
+		/>
+	),
+};
+
+export const BareControl: Story = {
+	name: "Bare control (no label)",
+	render: () => {
+		const [checked, setChecked] = useState(true);
+		return (
+			<div className="flex items-center gap-3">
+				<Checkbox
+					aria-label="Select row"
+					checked={checked}
+					onChange={(e) => setChecked(e.target.checked)}
+				/>
+				<span className="text-sm text-fg-muted">
+					Embedded in a row that owns the touch target
+				</span>
+			</div>
+		);
+	},
+};

package/src/components/checkbox.tsx

@@ -0,0 +1,78 @@
+import { Check, Minus } from "lucide-react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface CheckboxProps
+	extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+	/** Visible label; when set, the whole row is the ~44px touch target. */
+	label?: ReactNode;
+	/** Secondary line under the label. */
+	description?: ReactNode;
+	/** Tri-state tick: renders a dash. The input stays a real checkbox. */
+	indeterminate?: boolean;
+}
+
+const box =
+	"peer relative size-5 shrink-0 cursor-pointer appearance-none rounded-md border border-line-strong bg-surface outline-none transition-colors checked:border-positive checked:bg-positive indeterminate:border-positive indeterminate:bg-positive focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface";
+
+const mark =
+	"pointer-events-none absolute inset-0 m-auto size-3.5 text-accent-fg";
+
+export function Checkbox({
+	label,
+	description,
+	indeterminate = false,
+	checked,
+	onChange,
+	className,
+	...props
+}: CheckboxProps) {
+	const ref = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		if (ref.current) ref.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+
+	const control = (
+		<span className="relative inline-flex">
+			<input
+				ref={ref}
+				type="checkbox"
+				checked={checked}
+				onChange={onChange}
+				className={box}
+				{...props}
+			/>
+			<Check className={cn(mark, "hidden peer-checked:block")} aria-hidden />
+			<Minus
+				className={cn(mark, "hidden peer-indeterminate:block")}
+				aria-hidden
+			/>
+		</span>
+	);
+
+	if (label === undefined && description === undefined) {
+		return <span className={className}>{control}</span>;
+	}
+
+	return (
+		// biome-ignore lint/a11y/noLabelWithoutControl: label wraps a custom component that handles focus
+		<label
+			className={cn(
+				"flex min-h-11 cursor-pointer items-center gap-3 text-left",
+				className,
+			)}
+		>
+			{control}
+			<span className="flex min-w-0 flex-col">
+				{label !== undefined && (
+					<span className="text-sm text-fg">{label}</span>
+				)}
+				{description !== undefined && (
+					<span className="text-xs text-fg-subtle">{description}</span>
+				)}
+			</span>
+		</label>
+	);
+}

package/src/components/compose-action-bar.render.test.ts

@@ -0,0 +1,47 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ComposeActionBar } from "./compose-action-bar.js";
+
+const baseProps = {
+	onSend: () => undefined,
+	onDiscard: () => undefined,
+	sending: false,
+	canSend: true,
+};
+
+describe("ComposeActionBar", () => {
+	it("renders Send and Discard, never disabled", () => {
+		const html = renderToString(createElement(ComposeActionBar, baseProps));
+		assert.match(html, /Send/);
+		assert.match(html, /aria-label="Discard"/);
+		assert.doesNotMatch(html, /disabled=""/);
+	});
+
+	it("keeps Send pressable (no disabled) when it cannot send", () => {
+		const html = renderToString(
+			createElement(ComposeActionBar, {
+				...baseProps,
+				canSend: false,
+				unavailableReason: "SMTP not configured",
+			}),
+		);
+		assert.match(html, /Send/);
+		assert.doesNotMatch(html, /disabled=""/);
+		assert.match(html, /SMTP not configured/);
+	});
+
+	it("uses aria-busy while sending", () => {
+		const html = renderToString(
+			createElement(ComposeActionBar, { ...baseProps, sending: true }),
+		);
+		assert.match(html, /aria-busy="true"/);
+		assert.doesNotMatch(html, /disabled=""/);
+	});
+
+	it("keeps the Send pill at a fixed min-height so it does not clip", () => {
+		const html = renderToString(createElement(ComposeActionBar, baseProps));
+		assert.match(html, /min-h-11/);
+	});
+});

package/src/components/compose-action-bar.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ComposeActionBar } from "./compose-action-bar.js";
+
+const meta: Meta<typeof ComposeActionBar> = {
+	title: "Mail/ComposeActionBar",
+	component: ComposeActionBar,
+	parameters: { layout: "padded" },
+	args: {
+		onSend: () => undefined,
+		onDiscard: () => undefined,
+		sending: false,
+		canSend: true,
+		saveStatus: "idle",
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof ComposeActionBar>;
+
+export const Ready: Story = {};
+
+export const Saving: Story = { args: { saveStatus: "saving" } };
+
+export const Saved: Story = { args: { saveStatus: "saved" } };
+
+export const Sending: Story = { args: { sending: true } };
+
+export const CannotSend: Story = {
+	name: "Cannot send — stays pressable",
+	args: {
+		canSend: false,
+		unavailableReason: "SMTP not configured",
+		onUnavailable: () => undefined,
+	},
+};

package/src/components/compose-action-bar.tsx

@@ -0,0 +1,95 @@
+import { Loader2, Send, Trash2 } from "lucide-react";
+import { Button } from "./button.js";
+
+export type ComposeSaveStatus = "idle" | "saving" | "saved" | "error";
+
+export interface ComposeActionBarProps {
+	onSend: () => void;
+	onDiscard: () => void;
+	sending: boolean;
+	canSend: boolean;
+	saveStatus?: ComposeSaveStatus;
+	/**
+	 * Why sending is unavailable (e.g. "SMTP not configured"). Shown on the
+	 * Send button as a tooltip; surfaced to the user on press via
+	 * `onUnavailable` rather than disabling the control.
+	 */
+	unavailableReason?: string;
+	/** Called when Send is pressed while it cannot act — explain, don't disable. */
+	onUnavailable?: (reason: string) => void;
+}
+
+const SaveStatusIndicator = ({ status }: { status: ComposeSaveStatus }) => {
+	if (status === "saving") {
+		return (
+			<span className="animate-pulse text-xs text-fg-muted">Saving...</span>
+		);
+	}
+	if (status === "saved") {
+		return <span className="text-xs text-fg-muted">Draft saved</span>;
+	}
+	if (status === "error") {
+		return <span className="text-xs text-danger">Save failed</span>;
+	}
+	return null;
+};
+
+/**
+ * Compose footer: Send + Discard. Send stays pressable even when it can't act
+ * yet — on press it explains why via `onUnavailable` instead of being
+ * disabled (never-disable). The pill keeps a fixed min-height so it never
+ * clips below the fold on mobile.
+ */
+export function ComposeActionBar({
+	onSend,
+	onDiscard,
+	sending,
+	canSend,
+	saveStatus = "idle",
+	unavailableReason,
+	onUnavailable,
+}: ComposeActionBarProps) {
+	return (
+		<div className="flex items-center justify-between border-t border-line px-3 py-2">
+			<div className="flex items-center gap-3">
+				<Button
+					variant="primary"
+					size="md"
+					aria-busy={sending}
+					title={!canSend ? unavailableReason : undefined}
+					className="min-h-11 rounded-full px-4"
+					icon={
+						sending ? (
+							<Loader2 className="size-4 animate-spin" />
+						) : (
+							<Send className="size-4" />
+						)
+					}
+					onClick={() => {
+						if (sending) return;
+						if (!canSend) {
+							if (unavailableReason) onUnavailable?.(unavailableReason);
+							return;
+						}
+						onSend();
+					}}
+				>
+					Send
+				</Button>
+				<SaveStatusIndicator status={saveStatus} />
+			</div>
+			<Button
+				variant="ghost"
+				size="md"
+				aria-busy={sending}
+				aria-label="Discard"
+				className="min-h-11 min-w-11 px-2 hover:text-danger"
+				icon={<Trash2 className="size-4" />}
+				onClick={() => {
+					if (sending) return;
+					onDiscard();
+				}}
+			/>
+		</div>
+	);
+}

package/src/components/compose-form-shell.render.test.ts

@@ -0,0 +1,54 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ComposeFormShell, composeModeLabels } from "./compose-form-shell.js";
+
+describe("ComposeFormShell", () => {
+	it("renders header, body and action bar slots in order", () => {
+		const html = renderToString(
+			createElement(ComposeFormShell, {
+				header: createElement("div", null, "HEADER"),
+				actionBar: createElement("div", null, "ACTIONBAR"),
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: createElement("div", null, "BODY"),
+			}),
+		);
+		assert.ok(html.indexOf("HEADER") < html.indexOf("BODY"));
+		assert.ok(html.indexOf("BODY") < html.indexOf("ACTIONBAR"));
+	});
+
+	it("renders the banner and quoted slots when supplied", () => {
+		const html = renderToString(
+			createElement(ComposeFormShell, {
+				banner: createElement("div", null, "BANNER"),
+				header: createElement("div", null, "HEADER"),
+				quoted: createElement("div", null, "QUOTED"),
+				actionBar: createElement("div", null, "BAR"),
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: createElement("div", null, "BODY"),
+			}),
+		);
+		assert.match(html, /BANNER/);
+		assert.match(html, /QUOTED/);
+	});
+
+	it("omits the quoted region when not supplied", () => {
+		const html = renderToString(
+			createElement(ComposeFormShell, {
+				header: createElement("div", null, "H"),
+				actionBar: createElement("div", null, "B"),
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: createElement("div", null, "BODY"),
+			}),
+		);
+		assert.doesNotMatch(html, /pb-2/);
+	});
+
+	it("exposes mode labels for every compose mode", () => {
+		assert.equal(composeModeLabels.new, "New Message");
+		assert.equal(composeModeLabels.reply, "Reply");
+		assert.equal(composeModeLabels.reply_all, "Reply All");
+		assert.equal(composeModeLabels.forward, "Forward");
+	});
+});

package/src/components/compose-form-shell.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ComposeActionBar } from "./compose-action-bar.js";
+import { ComposeFormShell, composeModeLabels } from "./compose-form-shell.js";
+
+const meta: Meta<typeof ComposeFormShell> = {
+	title: "Mail/ComposeForm",
+	component: ComposeFormShell,
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof ComposeFormShell>;
+
+const Header = ({ title }: { title: string }) => (
+	<div className="space-y-1 border-b border-line px-3 py-2">
+		<div className="text-xs font-semibold text-fg-muted">{title}</div>
+		<div className="flex items-center gap-2 text-sm">
+			<span className="w-12 text-fg-muted">To</span>
+			<span>alex@example.com</span>
+		</div>
+		<div className="flex items-center gap-2 text-sm">
+			<span className="w-12 text-fg-muted">Subject</span>
+			<span>Q3 planning notes</span>
+		</div>
+	</div>
+);
+
+const Body = () => (
+	<div className="min-h-[120px] px-3 py-2 text-sm">
+		Hi Alex, here are the notes from today…
+	</div>
+);
+
+const bar = (
+	<ComposeActionBar
+		onSend={() => undefined}
+		onDiscard={() => undefined}
+		sending={false}
+		canSend={true}
+		saveStatus="saved"
+	/>
+);
+
+export const DesktopFull: Story = {
+	name: "Desktop — full compose",
+	render: () => (
+		<div className="h-[560px] w-[560px] border border-line bg-canvas">
+			<ComposeFormShell
+				header={<Header title={composeModeLabels.new} />}
+				actionBar={bar}
+			>
+				<Body />
+			</ComposeFormShell>
+		</div>
+	),
+};
+
+export const InlineReply: Story = {
+	name: "Inline reply",
+	render: () => (
+		<div className="flex h-[400px] w-[640px] max-h-[400px] flex-col border-t border-line bg-canvas">
+			<ComposeFormShell
+				header={<Header title={composeModeLabels.reply} />}
+				quoted={
+					<div className="border-l-2 border-line pl-3 text-xs text-fg-muted">
+						On Tuesday, Alex wrote: …
+					</div>
+				}
+				actionBar={bar}
+			>
+				<Body />
+			</ComposeFormShell>
+		</div>
+	),
+};
+
+export const MobileSheet: Story = {
+	name: "Mobile sheet — Send within viewport",
+	parameters: { viewport: { defaultViewport: "mobile1" } },
+	render: () => (
+		<div className="flex h-[95dvh] w-[390px] flex-col rounded-t-lg border border-line bg-canvas">
+			<div className="mx-auto mt-2 mb-1 h-1.5 w-12 rounded-full bg-fg-muted/30" />
+			<div className="border-b border-line px-4 py-2 text-base font-semibold">
+				{composeModeLabels.new}
+			</div>
+			<div className="min-h-0 flex-1">
+				<ComposeFormShell
+					header={<Header title={composeModeLabels.new} />}
+					actionBar={bar}
+				>
+					<Body />
+				</ComposeFormShell>
+			</div>
+		</div>
+	),
+};

package/src/components/compose-form-shell.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+
+export type ComposeMode = "new" | "reply" | "reply_all" | "forward";
+
+export const composeModeLabels: Record<ComposeMode, string> = {
+	new: "New Message",
+	reply: "Reply",
+	reply_all: "Reply All",
+	forward: "Forward",
+};
+
+export interface ComposeFormShellProps {
+	/** Optional banner above the header (e.g. SMTP-missing notice). */
+	banner?: ReactNode;
+	/** Recipient / subject header region. */
+	header: ReactNode;
+	/** The editor body. */
+	children: ReactNode;
+	/** Quoted reply / forwarded content under the body. */
+	quoted?: ReactNode;
+	/** The ComposeActionBar. */
+	actionBar: ReactNode;
+}
+
+/**
+ * Presentational compose layout: banner / header / scrollable body+quote /
+ * pinned action bar. Owns the column structure so the action bar always sits
+ * at the bottom and never clips below the fold. The live form composes this
+ * with its provider-driven slots; stories render it with static slots.
+ */
+export function ComposeFormShell({
+	banner,
+	header,
+	children,
+	quoted,
+	actionBar,
+}: ComposeFormShellProps) {
+	return (
+		<div className="flex h-full min-h-0 flex-col">
+			{banner}
+			{header}
+			<div className="min-h-0 flex-1 overflow-auto">
+				{children}
+				{quoted && <div className="px-3 pb-2">{quoted}</div>}
+			</div>
+			{actionBar}
+		</div>
+	);
+}

package/src/components/danger-zone-section.tsx

@@ -0,0 +1,36 @@
+import { AlertTriangle } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface DangerZoneSectionProps {
+	title: string;
+	description: ReactNode;
+	/** The destructive action control (a danger Button). */
+	action: ReactNode;
+}
+
+/**
+ * GitHub-style red offboarding block. Its own section, never bolted into a
+ * list — keep markup and labels here so the story and the live route can't
+ * drift (#791).
+ */
+export function DangerZoneSection({
+	title,
+	description,
+	action,
+}: DangerZoneSectionProps) {
+	return (
+		<div className="rounded-sm border border-danger/50">
+			<div className="flex items-center gap-2 border-b border-danger/30 bg-danger-soft px-row-inset py-2">
+				<AlertTriangle className="size-4 text-danger" />
+				<h2 className="text-sm font-semibold text-danger">Danger zone</h2>
+			</div>
+			<div className="flex flex-col gap-3 px-row-inset py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+				<div className="min-w-0">
+					<div className="text-sm font-medium text-fg">{title}</div>
+					<p className="text-xs text-fg-muted">{description}</p>
+				</div>
+				<div className="shrink-0">{action}</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,55 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { Dialog } from "./dialog.js";
+
+const render = (props: Partial<Parameters<typeof Dialog>[0]>) =>
+	renderToString(
+		createElement(Dialog, {
+			open: true,
+			onClose: () => {},
+			title: "Folders",
+			// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+			children: createElement("span", null, "nav content"),
+			...props,
+		}),
+	);
+
+describe("Dialog backdrop", () => {
+	it("never frosts the content behind it (no blur, just a dim scrim)", () => {
+		const center = render({});
+		const left = render({ anchor: "left" });
+		assert.doesNotMatch(center, /backdrop-blur/, "center modal has no blur");
+		assert.doesNotMatch(left, /backdrop-blur/, "left drawer has no blur");
+	});
+
+	it("dims with a plain scrim; left slide-over has no background wash", () => {
+		assert.match(render({}), /bg-canvas\/80/, "center modal keeps a dim scrim");
+		assert.doesNotMatch(
+			render({ anchor: "left" }),
+			/bg-canvas/,
+			"left drawer backdrop is transparent (no wash)",
+		);
+	});
+
+	it("right slide-over mirrors left: transparent backdrop, pinned right edge", () => {
+		const right = render({ anchor: "right" });
+		assert.doesNotMatch(right, /backdrop-blur/, "right drawer has no blur");
+		assert.doesNotMatch(
+			right,
+			/bg-canvas\/80/,
+			"right drawer backdrop is transparent (no wash)",
+		);
+		assert.match(right, /justify-end/, "panel is pinned to the right edge");
+		assert.match(right, /border-l/, "right drawer has a left hairline");
+	});
+
+	it("renders nothing when closed, so it never covers the content", () => {
+		assert.equal(
+			render({ open: false }),
+			"",
+			"closed dialog renders no markup",
+		);
+	});
+});