@remit/ui 0.0.1

package/src/components/outbox-row.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { OutboxRow } from "./outbox-row.js";
+
+const meta: Meta<typeof OutboxRow> = {
+	title: "Mail/OutboxRow",
+	component: OutboxRow,
+	parameters: { layout: "padded" },
+	args: {
+		recipients: "alex@example.com +2",
+		subject: "Q3 planning notes",
+		time: "9:42",
+		onSelect: () => undefined,
+		onEdit: () => undefined,
+		onDelete: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof OutboxRow>;
+
+export const Queued: Story = { args: { status: "queued" } };
+
+export const Sending: Story = { args: { status: "sending" } };
+
+export const Sent: Story = { args: { status: "sent" } };
+
+export const Failed: Story = {
+	args: {
+		status: "failed",
+		error: "SMTP connection refused",
+		onRetry: () => undefined,
+	},
+};
+
+export const Blocked: Story = {
+	args: {
+		status: "blocked",
+		error: "SMTP not configured for this account",
+	},
+};
+
+export const Selected: Story = {
+	args: { status: "queued", selected: true },
+};
+
+export const Empty: Story = {
+	name: "Empty list",
+	render: () => (
+		<div className="flex h-32 items-center justify-center text-sm text-fg-muted">
+			No outbox messages
+		</div>
+	),
+};

package/src/components/outbox-row.tsx

@@ -0,0 +1,120 @@
+import { RotateCcw, Send, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import type { OutboxStatus } from "./outbox-status-badge.js";
+import { OutboxStatusBadge } from "./outbox-status-badge.js";
+import { RowActions } from "./row-actions.js";
+
+export interface OutboxRowProps {
+	recipients: string;
+	subject: string;
+	/** Pre-formatted timestamp shown at the row's trailing edge. */
+	time: string;
+	status: OutboxStatus;
+	/** Surfaced after the status label for failed/blocked rows. */
+	error?: string;
+	selected?: boolean;
+	onSelect: () => void;
+	/** Retry sending — present only for the `failed` status. */
+	onRetry?: () => void;
+	retrying?: boolean;
+	onEdit: () => void;
+	onDelete: () => void;
+	deleting?: boolean;
+}
+
+const tintForStatus = (status: OutboxStatus, selected?: boolean): string => {
+	if (selected) return "bg-accent-2-soft";
+	if (status === "failed") return "bg-danger-soft";
+	if (status === "blocked") return "bg-warning/10";
+	return "";
+};
+
+/**
+ * Status-tinted outbox message row composing OutboxStatusBadge and the shared
+ * RowActions cluster. Presentational — the live route wires the callbacks to
+ * mutations.
+ */
+export function OutboxRow({
+	recipients,
+	subject,
+	time,
+	status,
+	error,
+	selected,
+	onSelect,
+	onRetry,
+	retrying,
+	onEdit,
+	onDelete,
+	deleting,
+}: OutboxRowProps) {
+	const showActions = status === "failed" || status === "blocked";
+
+	return (
+		<div
+			className={cn(
+				"flex items-start gap-3 border-b border-line px-4 py-3 transition-colors hover:bg-surface-raised",
+				tintForStatus(status, selected),
+			)}
+		>
+			<button
+				type="button"
+				onClick={onSelect}
+				className="flex flex-1 min-w-0 items-start gap-3 text-left"
+			>
+				<div className="mt-0.5 shrink-0">
+					<OutboxStatusBadge status={status} iconOnly />
+				</div>
+				<div className="min-w-0 flex-1">
+					<div className="flex items-center justify-between gap-2">
+						<span className="truncate text-sm font-medium">{recipients}</span>
+						<span className="shrink-0 text-xs text-fg-muted">{time}</span>
+					</div>
+					<div className="truncate text-sm">{subject || "No subject"}</div>
+					<div className="mt-1 flex items-center gap-2">
+						<OutboxStatusBadge status={status} />
+						{error && (
+							<span className="truncate text-xs text-fg-muted">— {error}</span>
+						)}
+					</div>
+				</div>
+			</button>
+			{showActions && (
+				<div className="shrink-0">
+					<RowActions
+						actions={[
+							...(status === "failed" && onRetry
+								? [
+										{
+											label: "Retry sending",
+											iconOnly: true,
+											icon: <RotateCcw className="size-3.5" />,
+											busy: retrying,
+											onClick: onRetry,
+										} as const,
+									]
+								: []),
+							{
+								label: "Edit as draft",
+								iconOnly: true,
+								icon: <Send className="size-3.5" />,
+								onClick: onEdit,
+							},
+						]}
+						destructive={{
+							label: "Delete message",
+							iconOnly: true,
+							icon: <Trash2 className="size-3.5" />,
+							busy: deleting,
+							confirm: {
+								prompt: "Delete this message?",
+								confirmLabel: "Delete",
+							},
+							onClick: onDelete,
+						}}
+					/>
+				</div>
+			)}
+		</div>
+	);
+}

package/src/components/outbox-status-badge.tsx

@@ -0,0 +1,60 @@
+import {
+	AlertCircle,
+	AlertTriangle,
+	CheckCircle,
+	Clock,
+	Loader2,
+} from "lucide-react";
+import { cn } from "../lib/cn.js";
+
+/** The non-draft outbox lifecycle states (drafts live in a separate view). */
+export type OutboxStatus = "queued" | "sending" | "sent" | "failed" | "blocked";
+
+interface StatusConfig {
+	icon: typeof Clock;
+	label: string;
+	className: string;
+	spin?: boolean;
+}
+
+export const outboxStatusConfig: Record<OutboxStatus, StatusConfig> = {
+	queued: { icon: Clock, label: "Queued", className: "text-warning" },
+	sending: {
+		icon: Loader2,
+		label: "Sending…",
+		className: "text-accent-2",
+		spin: true,
+	},
+	sent: { icon: CheckCircle, label: "Sent", className: "text-positive" },
+	failed: { icon: AlertCircle, label: "Failed", className: "text-danger" },
+	blocked: { icon: AlertTriangle, label: "Blocked", className: "text-warning" },
+};
+
+export interface OutboxStatusBadgeProps {
+	status: OutboxStatus;
+	/** Hide the text label, leaving only the tinted icon. */
+	iconOnly?: boolean;
+	className?: string;
+}
+
+/** Status-tinted icon + label for an outbox message row. */
+export function OutboxStatusBadge({
+	status,
+	iconOnly,
+	className,
+}: OutboxStatusBadgeProps) {
+	const config = outboxStatusConfig[status];
+	const Icon = config.icon;
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-1.5 text-xs font-medium",
+				config.className,
+				className,
+			)}
+		>
+			<Icon className={cn("size-4", config.spin && "animate-spin")} />
+			{!iconOnly && config.label}
+		</span>
+	);
+}

package/src/components/pane-layout.render.test.ts

@@ -0,0 +1,105 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { type PaneLayout, resolvePaneLayout } from "./app-shell-types.js";
+
+/**
+ * The single responsive surface reflows by its own width. These cases pin the
+ * pane-count-by-width rule the AppShell render obeys (both read the same
+ * READING_PANE_MIN_WIDTH / INTELLIGENCE_MIN_WIDTH constants):
+ *   phone + tablet PORTRAIT (<1024) → list ALONE, no reading pane
+ *   tablet landscape / desktop (1024–1279) → list + reading
+ *   widest (≥1280) → + intelligence rail
+ */
+const paneCount = (l: PaneLayout) =>
+	Number(l.nav) + 1 + Number(l.reading) + Number(l.intelligence);
+
+describe("resolvePaneLayout — pane count by width", () => {
+	it("phone (390): list alone, one pane", () => {
+		const l = resolvePaneLayout(390);
+		assert.equal(l.reading, false, "no reading pane on phone");
+		assert.equal(l.intelligence, false);
+		assert.equal(paneCount(l), 1, "single pane");
+	});
+
+	it("tablet portrait (768): list alone, no reading pane", () => {
+		const l = resolvePaneLayout(768);
+		assert.equal(l.reading, false, "portrait tablet collapses to the list");
+		assert.equal(paneCount(l), 1);
+	});
+
+	it("tablet portrait (834, iPad): still list alone", () => {
+		const l = resolvePaneLayout(834);
+		assert.equal(l.reading, false);
+		assert.equal(paneCount(l), 1);
+	});
+
+	it("just below the reading boundary (1023): still list alone", () => {
+		assert.equal(resolvePaneLayout(1023).reading, false);
+	});
+
+	it("tablet landscape / desktop floor (1024): list + reading + nav", () => {
+		const l = resolvePaneLayout(1024);
+		assert.equal(l.reading, true, "reading pane appears at 1024");
+		assert.equal(l.nav, true, "nav becomes a persistent pane");
+		assert.equal(l.intelligence, false, "rail not yet — only at the widest");
+		assert.equal(paneCount(l), 3);
+	});
+
+	it("iPad landscape (1112): two content panes, no rail", () => {
+		const l = resolvePaneLayout(1112);
+		assert.equal(l.reading, true);
+		assert.equal(l.intelligence, false);
+	});
+
+	it("just below the rail boundary (1279): no rail", () => {
+		assert.equal(resolvePaneLayout(1279).intelligence, false);
+	});
+
+	it("widest (1280): + intelligence rail, four panes", () => {
+		const l = resolvePaneLayout(1280);
+		assert.equal(l.reading, true);
+		assert.equal(l.intelligence, true);
+		assert.equal(paneCount(l), 4);
+	});
+
+	it("monotonic: panes only ever appear as width grows", () => {
+		const widths = [320, 768, 834, 1024, 1112, 1280, 1920];
+		const counts = widths.map((w) => paneCount(resolvePaneLayout(w)));
+		const sorted = [...counts].sort((a, b) => a - b);
+		assert.deepEqual(counts, sorted, "pane count is non-decreasing in width");
+	});
+});
+
+describe("resolvePaneLayout — configurable thresholds (#900/#901)", () => {
+	it("respects a custom reading-pane boundary", () => {
+		assert.equal(
+			resolvePaneLayout(767, 768, 1280).reading,
+			false,
+			"just below custom reading boundary",
+		);
+		assert.equal(
+			resolvePaneLayout(768, 768, 1280).reading,
+			true,
+			"at the custom reading boundary",
+		);
+	});
+
+	it("respects a custom intelligence boundary", () => {
+		assert.equal(
+			resolvePaneLayout(1023, 1024, 1024).intelligence,
+			false,
+			"just below custom intelligence boundary",
+		);
+		assert.equal(
+			resolvePaneLayout(1024, 1024, 1024).intelligence,
+			true,
+			"at the custom intelligence boundary",
+		);
+	});
+
+	it("defaults still match the module constants when no overrides given", () => {
+		const withDefaults = resolvePaneLayout(1024);
+		const withExplicit = resolvePaneLayout(1024, 1024, 1280);
+		assert.deepEqual(withDefaults, withExplicit, "defaults are identical");
+	});
+});

package/src/components/popover-menu.render.test.ts

@@ -0,0 +1,32 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { PopoverMenu } from "./popover-menu.js";
+
+const item = {
+	key: "read",
+	label: "Mark as read",
+	onSelect: () => undefined,
+};
+
+describe("PopoverMenu", () => {
+	it("renders the trigger with its accessible label and menu semantics", () => {
+		const html = renderToString(
+			createElement(PopoverMenu, {
+				triggerLabel: "More actions",
+				items: [item],
+			}),
+		);
+		assert.match(html, /aria-label="More actions"/);
+		assert.match(html, /aria-haspopup="menu"/);
+		assert.match(html, /aria-expanded="false"/);
+	});
+
+	it("renders nothing when there are no items", () => {
+		const html = renderToString(
+			createElement(PopoverMenu, { triggerLabel: "More actions", items: [] }),
+		);
+		assert.equal(html, "");
+	});
+});

package/src/components/popover-menu.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Mail, MailOpen, Tag } from "lucide-react";
+import { PopoverMenu } from "./popover-menu.js";
+
+const meta: Meta<typeof PopoverMenu> = {
+	title: "Kit/PopoverMenu",
+	component: PopoverMenu,
+	parameters: { layout: "centered" },
+	render: (args) => (
+		<div className="flex h-64 w-72 items-start justify-end p-4">
+			<PopoverMenu {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof PopoverMenu>;
+
+export const Default: Story = {
+	args: {
+		triggerLabel: "More actions",
+		items: [
+			{
+				key: "read",
+				label: "Mark as read",
+				icon: <MailOpen className="size-4" />,
+				onSelect: () => undefined,
+			},
+			{
+				key: "label",
+				label: "Add label",
+				icon: <Tag className="size-4" />,
+				onSelect: () => undefined,
+			},
+		],
+	},
+};
+
+export const SingleItem: Story = {
+	args: {
+		triggerLabel: "More actions",
+		items: [
+			{
+				key: "unread",
+				label: "Mark as unread",
+				icon: <Mail className="size-4" />,
+				onSelect: () => undefined,
+			},
+		],
+	},
+};
+
+/** With no items the kebab is dead weight, so it renders nothing rather than a
+ *  disabled control. */
+export const Empty: Story = {
+	args: { triggerLabel: "More actions", items: [] },
+};

package/src/components/popover-menu.tsx

@@ -0,0 +1,110 @@
+import { EllipsisVertical } from "lucide-react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+
+export interface PopoverMenuItem {
+	/** Stable key, also the accessible text of the row. */
+	key: string;
+	label: string;
+	icon?: ReactNode;
+	onSelect: () => void;
+}
+
+export interface PopoverMenuProps {
+	/** Accessible label for the trigger button. */
+	triggerLabel: string;
+	/** Trigger glyph. Defaults to the vertical ellipsis (kebab). */
+	triggerIcon?: ReactNode;
+	items: PopoverMenuItem[];
+	/** Which edge the menu aligns to. Defaults to "end" (right). */
+	align?: "start" | "end";
+	/** Touch-sizes the trigger to ≥44px. Defaults to true. */
+	touch?: boolean;
+	className?: string;
+}
+
+/**
+ * A small touch dropdown menu: a kebab trigger over a list of action rows,
+ * dismissed on outside-click or Escape. Built on the kit `Button` for the
+ * trigger; rows are ≥44px for touch ergonomics. The home for the secondary
+ * actions an overflow menu collects (mark read/unread, …) so the live client
+ * stops hand-rolling the same popover. Renders nothing when `items` is empty —
+ * an empty kebab is dead weight, not a disabled control.
+ */
+export function PopoverMenu({
+	triggerLabel,
+	triggerIcon,
+	items,
+	align = "end",
+	touch = true,
+	className,
+}: PopoverMenuProps) {
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!open) return;
+		const onPointer = (event: MouseEvent) => {
+			if (
+				containerRef.current &&
+				!containerRef.current.contains(event.target as Node)
+			) {
+				setOpen(false);
+			}
+		};
+		const onKey = (event: KeyboardEvent) => {
+			if (event.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("mousedown", onPointer);
+		document.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("mousedown", onPointer);
+			document.removeEventListener("keydown", onKey);
+		};
+	}, [open]);
+
+	if (items.length === 0) return null;
+
+	return (
+		<div ref={containerRef} className={cn("relative", className)}>
+			<Button
+				variant="ghost"
+				size="sm"
+				icon={triggerIcon ?? <EllipsisVertical className="size-5" />}
+				onClick={() => setOpen((value) => !value)}
+				aria-label={triggerLabel}
+				aria-haspopup="menu"
+				aria-expanded={open}
+				className={cn(touch && "min-h-11 min-w-11 px-0")}
+			/>
+			{open && (
+				<div
+					role="menu"
+					className={cn(
+						"absolute top-full z-50 mt-1 flex min-w-44 flex-col rounded-md border border-line bg-surface py-1 shadow-lg",
+						align === "end" ? "right-0" : "left-0",
+					)}
+				>
+					{items.map((item) => (
+						<button
+							key={item.key}
+							type="button"
+							role="menuitem"
+							onClick={() => {
+								setOpen(false);
+								item.onSelect();
+							}}
+							className="flex min-h-11 items-center gap-3 px-4 py-2.5 text-left text-sm text-fg transition-colors hover:bg-surface-sunken"
+						>
+							{item.icon && (
+								<span className="shrink-0 text-fg-subtle">{item.icon}</span>
+							)}
+							{item.label}
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}