@remit/ui 0.0.1

package/src/components/swipeable-row.tsx

@@ -0,0 +1,268 @@
+import { Check, Mail, MailOpen, Trash2 } from "lucide-react";
+import { useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import type { ThreadRowData } from "./app-shell-types.js";
+import {
+	ComfortableRowBody,
+	ComfortableRowTextContent,
+	comfortableRowClass,
+} from "./message-row.js";
+
+export type SwipePeek = "none" | "leading" | "trailing";
+
+/** Width a peeked row settles at to reveal its action; also the drag distance
+ *  past which a release commits the peek rather than snapping back. */
+const SWIPE_ACTION_WIDTH = 72;
+/** Movement (px) before a pointer drag claims the horizontal (swipe) axis; below
+ *  this a press is still a tap / long-press and vertical scroll wins. */
+const SWIPE_AXIS_THRESHOLD = 10;
+
+function peekOffset(peek: SwipePeek): number {
+	if (peek === "leading") return SWIPE_ACTION_WIDTH;
+	if (peek === "trailing") return -SWIPE_ACTION_WIDTH;
+	return 0;
+}
+
+/** Which peek a released drag commits to: past half the action width on a side
+ *  settles open to that side, otherwise it snaps back. Pure, so the
+ *  drag-release rule is unit-testable without a DOM. */
+export function commitPeek(offset: number): SwipePeek {
+	if (offset >= SWIPE_ACTION_WIDTH / 2) return "leading";
+	if (offset <= -SWIPE_ACTION_WIDTH / 2) return "trailing";
+	return "none";
+}
+
+/**
+ * Props the row's interactive (open) element must receive — the swipe gesture
+ * handlers, the transform/transition style, the row body, plus an onClick that
+ * suppresses navigation when the row is peeked. A consumer passes `linkComponent`
+ * to render these on a real anchor (e.g. a router Link) so the open affordance is
+ * a true `<a href>` — keeping open-in-new-tab, middle-click, deep-link and a11y
+ * — instead of the default JS-only `<button onOpen>`.
+ */
+export interface SwipeableRowOpenProps {
+	className: string;
+	style: React.CSSProperties;
+	onPointerDown: (e: React.PointerEvent) => void;
+	onPointerMove: (e: React.PointerEvent) => void;
+	onPointerUp: () => void;
+	onPointerCancel: () => void;
+	/** Wire to the anchor's onClick. When the row is peeked it calls
+	 *  preventDefault so a tap closes the peek instead of navigating; otherwise
+	 *  it is a no-op and the anchor's native navigation proceeds. */
+	onOpenClick: (e: { preventDefault: () => void }) => void;
+	children: React.ReactNode;
+}
+
+export function SwipeableRow({
+	thread,
+	selectionMode,
+	checked,
+	active,
+	peek,
+	onPeek,
+	onToggleCheck,
+	onLongPress,
+	onOpen,
+	onAct,
+	linkComponent,
+}: {
+	thread: ThreadRowData;
+	selectionMode: boolean;
+	checked: boolean;
+	active: boolean;
+	peek: SwipePeek;
+	onPeek: (next: SwipePeek) => void;
+	onToggleCheck: () => void;
+	onLongPress: () => void;
+	onOpen: () => void;
+	/** Tapping a revealed action performs it: "leading" = toggle read,
+	 *  "trailing" = delete. */
+	onAct: (side: "leading" | "trailing") => void;
+	/** Render the open affordance as a real anchor (router Link / `<a href>`)
+	 *  instead of the default `<button onOpen>`. Receives the gesture handlers,
+	 *  style, peek-aware onClickCapture and row body to spread onto the anchor.
+	 *  When provided, a plain tap navigates via the anchor's native click (so
+	 *  deep-link/middle-click work); onOpen is not called for the tap. */
+	linkComponent?: (props: SwipeableRowOpenProps) => React.ReactNode;
+}) {
+	const pressTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
+		undefined,
+	);
+	const gesture = useRef<{
+		startX: number;
+		startY: number;
+		axis: "none" | "horizontal" | "vertical";
+		moved: boolean;
+	} | null>(null);
+	const [dragX, setDragX] = useState<number | null>(null);
+
+	const cancelLongPress = () => clearTimeout(pressTimer.current);
+
+	const onPointerDown = (e: React.PointerEvent) => {
+		gesture.current = {
+			startX: e.clientX,
+			startY: e.clientY,
+			axis: "none",
+			moved: false,
+		};
+		// selection mode is tap-to-toggle only — no long-press, no swipe drag
+		if (selectionMode) return;
+		pressTimer.current = setTimeout(() => {
+			gesture.current = null;
+			setDragX(null);
+			onLongPress();
+		}, 500);
+	};
+
+	const onPointerMove = (e: React.PointerEvent) => {
+		if (selectionMode) return;
+		const g = gesture.current;
+		if (!g) return;
+		const dx = e.clientX - g.startX;
+		const dy = e.clientY - g.startY;
+		if (g.axis === "none") {
+			if (Math.abs(dy) > SWIPE_AXIS_THRESHOLD && Math.abs(dy) > Math.abs(dx)) {
+				// vertical scroll wins: abandon the swipe + long-press, let the list scroll
+				g.axis = "vertical";
+				cancelLongPress();
+				gesture.current = null;
+				return;
+			}
+			if (Math.abs(dx) > SWIPE_AXIS_THRESHOLD) {
+				g.axis = "horizontal";
+				g.moved = true;
+				cancelLongPress();
+				e.currentTarget.setPointerCapture(e.pointerId);
+			}
+		}
+		if (g.axis !== "horizontal") return;
+		const base = peekOffset(peek);
+		const next = Math.max(
+			-SWIPE_ACTION_WIDTH,
+			Math.min(SWIPE_ACTION_WIDTH, base + dx),
+		);
+		setDragX(next);
+	};
+
+	const onPointerUp = () => {
+		cancelLongPress();
+		const g = gesture.current;
+		gesture.current = null;
+		const offset = dragX;
+		setDragX(null);
+		// g is null when the gesture was already consumed (long-press fired, or
+		// a vertical scroll took over) — those handle themselves, so do nothing.
+		if (!g) return;
+		if (g.axis === "horizontal" && offset !== null) {
+			onPeek(commitPeek(offset));
+			return;
+		}
+		// a tap: no axis claimed
+		if (selectionMode) {
+			onToggleCheck();
+			return;
+		}
+		if (peek !== "none") {
+			onPeek("none");
+			return;
+		}
+		// A real anchor handles the open via its native click — don't double-fire.
+		if (linkComponent) return;
+		onOpen();
+	};
+
+	// A tap on a peeked anchor must close the peek, not navigate; suppress the
+	// native click in that case. onPointerUp already snapped it closed.
+	const onOpenClick = (e: { preventDefault: () => void }) => {
+		if (peek !== "none") e.preventDefault();
+	};
+
+	const offset = dragX ?? peekOffset(peek);
+	const revealed: SwipePeek =
+		offset > 0 ? "leading" : offset < 0 ? "trailing" : "none";
+
+	const interactiveClassName = cn(
+		// opaque bg so the row occludes the action behind it until peeked
+		"relative touch-pan-y bg-surface",
+		comfortableRowClass({ active: checked || active }),
+	);
+	const interactiveStyle: React.CSSProperties = {
+		transform: offset !== 0 ? `translateX(${offset}px)` : undefined,
+		transition: dragX === null ? "transform 150ms ease" : "none",
+		minHeight: 44,
+	};
+	const body = selectionMode ? (
+		<>
+			<span
+				className={cn(
+					"inline-flex size-7 shrink-0 items-center justify-center rounded-full border",
+					checked
+						? "border-accent bg-accent text-accent-fg"
+						: "border-line-strong bg-canvas",
+				)}
+			>
+				{checked && <Check className="size-3.5" />}
+			</span>
+			<ComfortableRowTextContent thread={thread} />
+		</>
+	) : (
+		<ComfortableRowBody thread={thread} />
+	);
+
+	return (
+		<div className="relative overflow-hidden">
+			{revealed === "leading" && (
+				<button
+					type="button"
+					onClick={() => onAct("leading")}
+					aria-label={thread.isRead ? "Mark as unread" : "Mark as read"}
+					className="absolute inset-y-0 left-0 flex items-center justify-start bg-accent-2 px-6 text-accent-fg"
+				>
+					{thread.isRead ? (
+						<Mail className="size-6" />
+					) : (
+						<MailOpen className="size-6" />
+					)}
+				</button>
+			)}
+			{revealed === "trailing" && (
+				<button
+					type="button"
+					onClick={() => onAct("trailing")}
+					aria-label="Delete message"
+					className="absolute inset-y-0 right-0 flex items-center justify-end bg-danger px-6 text-canvas"
+				>
+					<Trash2 className="size-6" />
+				</button>
+			)}
+
+			{/* In selection mode the row is tap-to-toggle, never a navigation link —
+			    keep the button so a checkbox tap can't open a thread. */}
+			{linkComponent && !selectionMode ? (
+				linkComponent({
+					className: interactiveClassName,
+					style: interactiveStyle,
+					onPointerDown,
+					onPointerMove,
+					onPointerUp,
+					onPointerCancel: onPointerUp,
+					onOpenClick,
+					children: body,
+				})
+			) : (
+				<button
+					type="button"
+					onPointerDown={onPointerDown}
+					onPointerMove={onPointerMove}
+					onPointerUp={onPointerUp}
+					onPointerCancel={onPointerUp}
+					className={interactiveClassName}
+					style={interactiveStyle}
+				>
+					{body}
+				</button>
+			)}
+		</div>
+	);
+}

package/src/components/touch-list-body.render.test.ts

@@ -0,0 +1,66 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { ThreadSection } from "./app-shell-types.js";
+import { TouchListBody } from "./touch-list.js";
+
+const sections: ThreadSection[] = [
+	{
+		id: "today",
+		label: "Today",
+		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,
+			},
+			{
+				id: "t2",
+				accountId: "a1",
+				fromName: "Alex Rivera",
+				fromEmail: "alex@example.com",
+				subject: "Q3 planning notes",
+				snippet: "Pushed the deck.",
+				timeLabel: "9:42",
+				isRead: true,
+			},
+		],
+	},
+];
+
+const baseProps = {
+	sections,
+	selectionMode: false,
+	checkedIds: new Set<string>(),
+	refreshing: false,
+	onToggleCheck: () => undefined,
+	onEnterSelection: () => undefined,
+	onOpenThread: () => undefined,
+	onRefresh: () => undefined,
+};
+
+describe("TouchListBody", () => {
+	it("renders the rows", () => {
+		const html = renderToString(createElement(TouchListBody, baseProps));
+		assert.match(html, /Priya Nair/);
+		assert.match(html, /Alex Rivera/);
+	});
+
+	it("shows the refreshing affordance when refreshing", () => {
+		const html = renderToString(
+			createElement(TouchListBody, { ...baseProps, refreshing: true }),
+		);
+		assert.match(html, /Checking for new mail/);
+	});
+
+	it("shows pull to refresh when idle and not in selection mode", () => {
+		const html = renderToString(createElement(TouchListBody, baseProps));
+		assert.match(html, /Pull to refresh/);
+	});
+});

package/src/components/touch-list-body.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ThreadSection } from "./app-shell-types.js";
+import { TouchListBody } from "./touch-list.js";
+
+const sections: ThreadSection[] = [
+	{
+		id: "today",
+		label: "Today",
+		threads: [
+			{
+				id: "t1",
+				accountId: "a1",
+				fromName: "Priya Nair",
+				fromEmail: "priya@example.com",
+				subject: "Design review tomorrow",
+				snippet: "Can we move it to 2pm? I have a conflict in the morning.",
+				timeLabel: "8:15",
+				isRead: false,
+				messageCount: 3,
+			},
+			{
+				id: "t2",
+				accountId: "a1",
+				fromName: "Alex Rivera",
+				fromEmail: "alex@example.com",
+				subject: "Re: Q3 planning notes",
+				snippet: "Sounds good — pushed the deck to the shared drive.",
+				timeLabel: "9:42",
+				isRead: true,
+			},
+			{
+				id: "t3",
+				accountId: "a1",
+				fromName: "Dana Lopez",
+				fromEmail: "dana@example.com",
+				subject: "Invoice for May",
+				snippet: "Please find the attached invoice, due end of month.",
+				timeLabel: "Wed",
+				isRead: true,
+				hasAttachment: true,
+			},
+		],
+	},
+];
+
+const meta: Meta<typeof TouchListBody> = {
+	title: "Screens/Kit/TouchListBody",
+	component: TouchListBody,
+	parameters: { layout: "padded" },
+	args: {
+		sections,
+		selectionMode: false,
+		checkedIds: new Set<string>(),
+		refreshing: false,
+		onToggleCheck: () => undefined,
+		onEnterSelection: () => undefined,
+		onOpenThread: () => undefined,
+		onRefresh: () => undefined,
+	},
+	render: (args) => (
+		<div className="flex h-[700px] w-[390px] flex-col rounded-md border border-line">
+			<TouchListBody {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof TouchListBody>;
+
+export const Default: Story = {};
+
+export const Refreshing: Story = { args: { refreshing: true } };
+
+export const SelectionMode: Story = {
+	args: { selectionMode: true, checkedIds: new Set(["t1", "t3"]) },
+};

package/src/components/touch-list.tsx

@@ -0,0 +1,87 @@
+import { RefreshCw } from "lucide-react";
+import { useState } from "react";
+import type { ThreadSection } from "./app-shell-types.js";
+import { SwipeableRow, type SwipePeek } from "./swipeable-row.js";
+
+export function TouchListBody({
+	sections,
+	selectedThreadId,
+	selectionMode,
+	checkedIds,
+	initialPeek,
+	onToggleCheck,
+	onEnterSelection,
+	onOpenThread,
+	onRefresh,
+	refreshing,
+}: {
+	sections: ThreadSection[];
+	selectedThreadId?: string;
+	selectionMode: boolean;
+	checkedIds: ReadonlySet<string>;
+	initialPeek?: SwipePeek;
+	onToggleCheck: (id: string) => void;
+	onEnterSelection: (id: string) => void;
+	onOpenThread: (id: string) => void;
+	onRefresh: () => void;
+	refreshing: boolean;
+}) {
+	// Local copy so the mock can act on a swipe: delete removes the row,
+	// toggle-read flips its state. The live client owns real mutation.
+	const [items, setItems] = useState(() =>
+		sections.flatMap((section) => section.threads),
+	);
+	const [peek, setPeek] = useState<{ id: string; side: SwipePeek } | null>(
+		initialPeek && initialPeek !== "none" && items[1]
+			? { id: items[1].id, side: initialPeek }
+			: null,
+	);
+	const act = (id: string, side: "leading" | "trailing") => {
+		if (side === "trailing") {
+			setItems((prev) => prev.filter((t) => t.id !== id));
+		} else {
+			setItems((prev) =>
+				prev.map((t) => (t.id === id ? { ...t, isRead: !t.isRead } : t)),
+			);
+		}
+		setPeek(null);
+	};
+	return (
+		<div className="flex-1 overflow-y-auto">
+			{refreshing && (
+				<div className="flex items-center justify-center gap-2 border-b border-line py-3 text-fg-muted">
+					<RefreshCw className="size-4 animate-spin" />
+					<span className="text-xs">Checking for new mail…</span>
+				</div>
+			)}
+			<div className="divide-y divide-line">
+				{items.map((thread) => (
+					<SwipeableRow
+						key={thread.id}
+						thread={thread}
+						selectionMode={selectionMode}
+						checked={checkedIds.has(thread.id)}
+						active={thread.id === selectedThreadId}
+						peek={peek?.id === thread.id ? peek.side : "none"}
+						onPeek={(next) =>
+							setPeek(next === "none" ? null : { id: thread.id, side: next })
+						}
+						onToggleCheck={() => onToggleCheck(thread.id)}
+						onLongPress={() => onEnterSelection(thread.id)}
+						onOpen={() => onOpenThread(thread.id)}
+						onAct={(side) => act(thread.id, side)}
+					/>
+				))}
+			</div>
+			{!selectionMode && !refreshing && (
+				<button
+					type="button"
+					onClick={onRefresh}
+					className="w-full border-t border-line py-2 text-center text-2xs text-fg-subtle transition-colors hover:bg-surface-sunken"
+				>
+					Pull to refresh
+				</button>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ConnectorTile } from "./wizard.js";
+
+// Never-disable tenet (#798): a "coming soon" connector must stay pressable.
+describe("ConnectorTile coming-soon", () => {
+	const markup = (props: Parameters<typeof ConnectorTile>[0]) =>
+		renderToString(createElement(ConnectorTile, props));
+
+	it("renders a comingSoon tile that is not disabled", () => {
+		const html = markup({
+			name: "Gmail",
+			description: "Sign in with Google.",
+			icon: null,
+			comingSoon: true,
+		});
+		assert.doesNotMatch(html, /\sdisabled[\s=>]/, "tile must not be disabled");
+		assert.match(
+			html,
+			/aria-disabled="true"/,
+			"tile signals coming-soon via aria-disabled, not a dead control",
+		);
+		assert.match(html, /<button/, "tile is a pressable button");
+	});
+
+	it("renders a comingSoon tile without a handler as a safe no-op", () => {
+		assert.doesNotThrow(() =>
+			markup({
+				name: "Gmail",
+				description: "Sign in with Google.",
+				icon: null,
+				comingSoon: true,
+			}),
+		);
+	});
+
+	it("renders a normal tile without coming-soon affordances", () => {
+		const html = markup({
+			name: "IMAP / SMTP",
+			description: "Any provider.",
+			icon: null,
+			onSelect: () => undefined,
+		});
+		assert.doesNotMatch(html, /aria-disabled/);
+		assert.doesNotMatch(html, />soon</);
+	});
+});

package/src/components/wizard.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AtSign, Inbox, Server } from "lucide-react";
+import { useState } from "react";
+import type { ServerSecurity } from "./security-select.js";
+import { ConnectorTile, ServerFields } from "./wizard.js";
+
+const meta: Meta = {
+	title: "Components/Wizard",
+};
+export default meta;
+
+type Story = StoryObj;
+
+function TileRow({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="grid max-w-xl grid-cols-1 gap-3 p-6 sm:grid-cols-3">
+			{children}
+		</div>
+	);
+}
+
+/** Selectable connectors: one active, one selected, one "soon". */
+export const Connectors: Story = {
+	render: () => {
+		const [selected, setSelected] = useState("imap");
+		return (
+			<TileRow>
+				<ConnectorTile
+					name="IMAP / SMTP"
+					description="Any mail provider — Fastmail, iCloud, your own server."
+					icon={<Server className="size-5" />}
+					selected={selected === "imap"}
+					onSelect={() => setSelected("imap")}
+				/>
+				<ConnectorTile
+					name="Outlook / Microsoft 365"
+					description="Sign in with Microsoft. Works with Outlook.com and work accounts."
+					icon={<Inbox className="size-5" />}
+					selected={selected === "microsoft"}
+					onSelect={() => setSelected("microsoft")}
+				/>
+				<ConnectorTile
+					name="Gmail"
+					description="Sign in with Google. No app passwords."
+					icon={<AtSign className="size-5" />}
+					comingSoon
+				/>
+			</TileRow>
+		);
+	},
+};
+
+/**
+ * A "soon" tile is muted but never disabled: pressing it surfaces a one-line
+ * explainer instead of going dead (never-disable tenet, #798).
+ */
+export const ComingSoonTilePressable: Story = {
+	render: () => (
+		<TileRow>
+			<ConnectorTile
+				name="Gmail"
+				description="Sign in with Google. No app passwords."
+				icon={<AtSign className="size-5" />}
+				comingSoon
+			/>
+		</TileRow>
+	),
+};
+
+function ServerFieldsDemo() {
+	const [host, setHost] = useState("imap.fastmail.example");
+	const [port, setPort] = useState("993");
+	const [security, setSecurity] = useState<ServerSecurity>("tls");
+	return (
+		<div className="max-w-xl p-6">
+			<ServerFields
+				legend="IMAP — incoming"
+				badge={{ label: "detected", tone: "positive" }}
+				host={host}
+				port={port}
+				security={security}
+				onHostChange={setHost}
+				onPortChange={setPort}
+				onSecurityChange={setSecurity}
+				hostPlaceholder="imap.example.com"
+				portPlaceholder="993"
+			/>
+		</div>
+	);
+}
+
+/** Host / port / security for one protocol. */
+export const ServerFieldsStory: Story = {
+	name: "ServerFields",
+	render: () => <ServerFieldsDemo />,
+};
+
+/** Phone width: the grid stacks so the Security select stays reachable (#780). */
+export const ServerFieldsPhone: Story = {
+	name: "ServerFields — phone",
+	parameters: {
+		viewport: {
+			options: {
+				phone390: {
+					name: "Phone 390",
+					styles: { width: "390px", height: "844px" },
+				},
+			},
+			defaultViewport: "phone390",
+		},
+	},
+	render: () => <ServerFieldsDemo />,
+};