@remit/ui 0.0.1

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@remit/ui",
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./tokens.css": "./src/tokens.css"
+  },
+  "scripts": {
+    "test": "npm run test:typecheck && npm run test:run",
+    "test:typecheck": "tsgo --noEmit",
+    "test:run": "node --import tsx --test 'src/**/*.test.ts'"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist": "^5",
+    "@fontsource-variable/hanken-grotesk": "^5",
+    "@fontsource-variable/inter": "^5",
+    "clsx": "^2",
+    "dompurify": "^3.4.7",
+    "lucide-react": "^0.468",
+    "react-resizable-panels": "^2.1.9",
+    "react-simple-pull-to-refresh": "^1.3.4",
+    "tailwind-merge": "^2"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@storybook/react": "^9",
+    "@types/dompurify": "*",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "*"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/remit-mail/reader.git",
+    "directory": "packages/ui"
+  }
+}

package/src/components/address-display.render.test.ts

@@ -0,0 +1,93 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	AddressDisplay,
+	AddressList,
+	type EnvelopeAddress,
+} from "./address-display.js";
+
+const named: EnvelopeAddress = {
+	displayName: "Ada Lovelace",
+	normalizedEmail: "ada@example.com",
+};
+const bare: EnvelopeAddress = { normalizedEmail: "grace@example.com" };
+
+describe("AddressDisplay", () => {
+	it("renders display name with the address in angle brackets", () => {
+		const html = renderToString(
+			createElement(AddressDisplay, { address: named }),
+		);
+		assert.match(html, /Ada Lovelace/);
+		assert.match(html, /ada@example.com/);
+	});
+
+	it("falls back to the bare email when no display name", () => {
+		const html = renderToString(
+			createElement(AddressDisplay, { address: bare }),
+		);
+		assert.match(html, /grace@example.com/);
+	});
+
+	it("shows the trusted badge only when asked", () => {
+		assert.match(
+			renderToString(
+				createElement(AddressDisplay, {
+					address: named,
+					showTrustedBadge: true,
+				}),
+			),
+			/data-testid="trusted-sender-badge"/,
+		);
+		assert.doesNotMatch(
+			renderToString(createElement(AddressDisplay, { address: named })),
+			/trusted-sender-badge/,
+		);
+	});
+});
+
+describe("AddressList", () => {
+	it("renders nothing for an empty list", () => {
+		assert.equal(
+			renderToString(
+				createElement(AddressList, { label: "To", addresses: [] }),
+			),
+			"",
+		);
+	});
+
+	it("shows the expand control only when there are more than three addresses", () => {
+		const three = [bare, bare, bare];
+		const four = [bare, bare, bare, bare];
+		assert.doesNotMatch(
+			renderToString(
+				createElement(AddressList, { label: "To", addresses: three }),
+			),
+			/aria-label="Expand"/,
+		);
+		assert.match(
+			renderToString(
+				createElement(AddressList, { label: "To", addresses: four }),
+			),
+			/aria-label="Expand"/,
+		);
+	});
+
+	it("renders the trusted badge for trusted From addresses when enabled", () => {
+		const trusted: EnvelopeAddress = {
+			...named,
+			flags: { trusted: { value: true } },
+		};
+		assert.match(
+			renderToString(
+				createElement(AddressList, {
+					label: "From",
+					addresses: [trusted],
+					showTrustedBadge: true,
+				}),
+			),
+			/trusted-sender-badge/,
+		);
+	});
+});

package/src/components/address-display.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AddressList, type EnvelopeAddress } from "./address-display.js";
+
+const meta: Meta<typeof AddressList> = {
+	title: "Mail/AddressList",
+	component: AddressList,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AddressList>;
+
+const named = (name: string, email: string): EnvelopeAddress => ({
+	displayName: name,
+	normalizedEmail: email,
+});
+
+const trusted: EnvelopeAddress = {
+	...named("Ada Lovelace", "ada@example.com"),
+	flags: { trusted: { value: true } },
+};
+
+export const SingleFromTrusted: Story = {
+	name: "From — trusted",
+	args: {
+		label: "From",
+		addresses: [trusted],
+		showTrustedBadge: true,
+	},
+};
+
+export const FewRecipients: Story = {
+	args: {
+		label: "To",
+		addresses: [
+			named("Grace Hopper", "grace@example.com"),
+			named("Alan Turing", "alan@example.com"),
+		],
+	},
+};
+
+export const ManyRecipientsCollapsed: Story = {
+	name: "Many recipients (expandable)",
+	args: {
+		label: "To",
+		addresses: [
+			named("Grace Hopper", "grace@example.com"),
+			named("Alan Turing", "alan@example.com"),
+			named("Katherine Johnson", "katherine@example.com"),
+			named("Dorothy Vaughan", "dorothy@example.com"),
+			named("Mary Jackson", "mary@example.com"),
+			{ normalizedEmail: "no-name@example.com" },
+		],
+	},
+};

package/src/components/address-display.tsx

@@ -0,0 +1,132 @@
+import { BadgeCheck, ChevronDown, ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+/**
+ * Minimal address shape the display needs. Structurally compatible with the
+ * generated `RemitImapEnvelopeAddressResponse` so call sites can pass envelope
+ * addresses straight through, but the kit owns no app types.
+ */
+export interface EnvelopeAddress {
+	displayName?: string;
+	normalizedEmail: string;
+	flags?: {
+		trusted?: { value: boolean };
+	};
+}
+
+export interface AddressDisplayProps {
+	address: EnvelopeAddress;
+	/**
+	 * When true, render a small "trusted sender" checkmark next to the
+	 * address. Driven by `address.flags?.trusted?.value === true` upstream
+	 * so the check is centralized in the parent that knows the role
+	 * (e.g. only From-addresses get the indicator).
+	 */
+	showTrustedBadge?: boolean;
+}
+
+export const AddressDisplay = ({
+	address,
+	showTrustedBadge = false,
+}: AddressDisplayProps) => {
+	const badge = showTrustedBadge ? (
+		<BadgeCheck
+			className="inline-block size-4 ml-1 -mt-0.5 text-positive"
+			aria-label="Trusted sender"
+			data-testid="trusted-sender-badge"
+		/>
+	) : null;
+
+	if (address.displayName) {
+		return (
+			<span>
+				<span className="text-fg">{address.displayName}</span>
+				<span className="text-fg-muted">
+					{" "}
+					&lt;{address.normalizedEmail}&gt;
+				</span>
+				{badge}
+			</span>
+		);
+	}
+	return (
+		<span className="text-fg">
+			{address.normalizedEmail}
+			{badge}
+		</span>
+	);
+};
+
+export interface AddressListProps {
+	label: string;
+	addresses: EnvelopeAddress[];
+	/**
+	 * When true, addresses with `flags.trusted.value === true` render a
+	 * green checkmark. Only set this for the From row; trusted-status of
+	 * To/Cc senders is irrelevant to the current viewer.
+	 */
+	showTrustedBadge?: boolean;
+}
+
+export const AddressList = ({
+	label,
+	addresses,
+	showTrustedBadge = false,
+}: AddressListProps) => {
+	const [expanded, setExpanded] = useState(false);
+
+	if (addresses.length === 0) return null;
+
+	const hasMany = addresses.length > 3;
+
+	const renderAddress = (addr: EnvelopeAddress) => {
+		const isTrusted = showTrustedBadge && addr.flags?.trusted?.value === true;
+		return <AddressDisplay address={addr} showTrustedBadge={isTrusted} />;
+	};
+
+	return (
+		<div className="flex gap-2 text-sm">
+			<span className="text-fg-muted shrink-0 w-12">{label}:</span>
+			<div className="flex-1 min-w-0">
+				{expanded ? (
+					<div className="flex flex-wrap gap-1">
+						{addresses.map((addr, idx) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: list is static, no stable id
+							<span key={idx}>
+								{renderAddress(addr)}
+								{idx < addresses.length - 1 && ", "}
+							</span>
+						))}
+					</div>
+				) : (
+					<div className="truncate">
+						{addresses.map((addr, idx) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: list is static, no stable id
+							<span key={idx}>
+								{renderAddress(addr)}
+								{idx < addresses.length - 1 && ", "}
+							</span>
+						))}
+					</div>
+				)}
+			</div>
+			{hasMany && (
+				<button
+					type="button"
+					onClick={(e) => {
+						e.stopPropagation();
+						setExpanded(!expanded);
+					}}
+					className="shrink-0 text-fg-muted hover:text-fg transition-colors"
+					aria-label={expanded ? "Collapse" : "Expand"}
+				>
+					{expanded ? (
+						<ChevronDown className="h-4 w-4" />
+					) : (
+						<ChevronRight className="h-4 w-4" />
+					)}
+				</button>
+			)}
+		</div>
+	);
+};

package/src/components/address-tag.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 { AddressTag } from "./address-tag.js";
+
+describe("AddressTag", () => {
+	it("renders the display name when present", () => {
+		const html = renderToString(
+			createElement(AddressTag, {
+				email: "alex@example.com",
+				displayName: "Alex Rivera",
+				onRemove: () => {},
+			}),
+		);
+		assert.match(html, /Alex Rivera/);
+	});
+
+	it("falls back to the bare address when no display name", () => {
+		const html = renderToString(
+			createElement(AddressTag, {
+				email: "sam@example.com",
+				onRemove: () => {},
+			}),
+		);
+		assert.match(html, /sam@example\.com/);
+	});
+
+	it("labels the remove button with the address", () => {
+		const html = renderToString(
+			createElement(AddressTag, {
+				email: "alex@example.com",
+				displayName: "Alex Rivera",
+				onRemove: () => {},
+			}),
+		);
+		assert.match(html, /aria-label="Remove alex@example\.com"/);
+	});
+});

package/src/components/address-tag.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AddressTag } from "./address-tag.js";
+
+const meta: Meta<typeof AddressTag> = {
+	title: "Compose/AddressTag",
+	component: AddressTag,
+	parameters: { layout: "centered" },
+	args: { onRemove: () => {} },
+};
+export default meta;
+
+type Story = StoryObj<typeof AddressTag>;
+
+export const EmailOnly: Story = {
+	args: { email: "alex@example.com" },
+};
+
+export const WithDisplayName: Story = {
+	args: { email: "alex@example.com", displayName: "Alex Rivera" },
+};
+
+export const LongAddress: Story = {
+	args: { email: "very.long.recipient.address@really-long-domain.example.com" },
+};
+
+export const Removable: Story = {
+	render: () => (
+		<div className="flex flex-wrap items-center gap-1">
+			<AddressTag
+				email="alex@example.com"
+				displayName="Alex Rivera"
+				onRemove={() => {}}
+			/>
+			<AddressTag email="sam@example.com" onRemove={() => {}} />
+			<AddressTag
+				email="very.long.recipient.address@really-long-domain.example.com"
+				onRemove={() => {}}
+			/>
+		</div>
+	),
+};

package/src/components/address-tag.tsx

@@ -0,0 +1,38 @@
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+
+export interface AddressTagProps {
+	email: string;
+	displayName?: string;
+	onRemove: () => void;
+	className?: string;
+}
+
+/**
+ * Dismissible recipient chip for compose fields and filter UIs. Shows the
+ * display name when present, falling back to the bare address, and truncates
+ * to keep long addresses from breaking the field layout.
+ */
+export const AddressTag = ({
+	email,
+	displayName,
+	onRemove,
+	className,
+}: AddressTagProps) => (
+	<span
+		className={cn(
+			"inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-accent-2-soft text-sm max-w-[200px]",
+			className,
+		)}
+	>
+		<span className="truncate">{displayName || email}</span>
+		<button
+			type="button"
+			onClick={onRemove}
+			className="shrink-0 p-0.5 rounded-full hover:bg-fg-muted/20 transition-colors"
+			aria-label={`Remove ${email}`}
+		>
+			<X className="size-3" />
+		</button>
+	</span>
+);

package/src/components/app-password-hint.render.test.ts

@@ -0,0 +1,23 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { AppPasswordHint } from "./app-password-hint.js";
+
+describe("AppPasswordHint", () => {
+	it("renders a deep link when a url is provided", () => {
+		const html = renderToString(
+			createElement(AppPasswordHint, {
+				url: "https://support.apple.com/en-us/102654",
+			}),
+		);
+		assert.match(html, /href="https:\/\/support\.apple\.com\/en-us\/102654"/);
+		assert.match(html, /How to create an app password/);
+	});
+
+	it("renders the generic fallback when no url is provided", () => {
+		const html = renderToString(createElement(AppPasswordHint, {}));
+		assert.doesNotMatch(html, /<a /);
+		assert.match(html, /Check your provider.*help for app password/);
+	});
+});

package/src/components/app-password-hint.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AppPasswordHint } from "./app-password-hint.js";
+
+const meta: Meta<typeof AppPasswordHint> = {
+	title: "Onboarding/AppPasswordHint",
+	component: AppPasswordHint,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AppPasswordHint>;
+
+export const KnownProvider: Story = {
+	args: { url: "https://support.apple.com/en-us/102654" },
+};
+
+export const UnknownProvider: Story = {
+	args: {},
+};

package/src/components/app-password-hint.tsx

@@ -0,0 +1,24 @@
+export interface AppPasswordHintProps {
+	/** Resolved provider deep link; omit for the generic fallback. */
+	url?: string;
+}
+
+export function AppPasswordHint({ url }: AppPasswordHintProps) {
+	return (
+		<p className="text-2xs text-fg-subtle">
+			Stored encrypted, used only to connect to your mail server.{" "}
+			{url ? (
+				<a
+					href={url}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="text-accent underline"
+				>
+					How to create an app password
+				</a>
+			) : (
+				<span>Check your provider's help for app password instructions.</span>
+			)}
+		</p>
+	);
+}

package/src/components/app-shell-slotted.render.test.ts

@@ -0,0 +1,128 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { AppShellSlottedProps } from "./app-shell-slotted.js";
+import { AppShellSlotted } from "./app-shell-slotted.js";
+
+const render = (overrides: Partial<AppShellSlottedProps> = {}) =>
+	renderToString(
+		createElement(AppShellSlotted, {
+			nav: createElement("div", { "data-testid": "nav" }, "Nav"),
+			list: createElement("div", { "data-testid": "list" }, "List"),
+			...overrides,
+		}),
+	);
+
+describe("AppShellSlotted slot rendering", () => {
+	it("renders the list slot unconditionally", () => {
+		const html = render({ initialWidth: 800 });
+		assert.match(html, /data-testid="list"/, "list slot is always rendered");
+	});
+
+	it("renders the reading slot at/above 1024px", () => {
+		const html = render({
+			initialWidth: 1100,
+			reading: createElement("div", { "data-testid": "reading" }, "Reading"),
+		});
+		assert.match(
+			html,
+			/data-testid="reading"/,
+			"reading pane appears at 1024px",
+		);
+	});
+
+	it("hides the reading slot below 1024px", () => {
+		const html = render({
+			initialWidth: 800,
+			reading: createElement("div", { "data-testid": "reading" }, "Reading"),
+		});
+		assert.doesNotMatch(
+			html,
+			/data-testid="reading"/,
+			"reading pane is absent below 1024px",
+		);
+	});
+
+	it("renders the intelligence slot at/above 1280px when intelligenceOpen", () => {
+		const html = render({
+			initialWidth: 1400,
+			reading: createElement("div", { "data-testid": "reading" }, "Reading"),
+			intelligence: createElement(
+				"div",
+				{ "data-testid": "intelligence" },
+				"Intel",
+			),
+			intelligenceOpen: true,
+		});
+		assert.match(
+			html,
+			/data-testid="intelligence"/,
+			"intelligence pane appears at 1280px",
+		);
+	});
+
+	it("hides the intelligence slot when intelligenceOpen is false", () => {
+		const html = render({
+			initialWidth: 1400,
+			reading: createElement("div", { "data-testid": "reading" }, "Reading"),
+			intelligence: createElement(
+				"div",
+				{ "data-testid": "intelligence" },
+				"Intel",
+			),
+			intelligenceOpen: false,
+		});
+		assert.doesNotMatch(
+			html,
+			/data-testid="intelligence"/,
+			"intelligence pane is hidden when closed",
+		);
+	});
+
+	it("renders the nav as a pane at/above 1024px (no folders trigger)", () => {
+		const html = render({ initialWidth: 1100 });
+		assert.match(html, /data-testid="nav"/, "nav is in the pane");
+	});
+
+	it("shows the header slot only below 1024px", () => {
+		const headerEl = createElement(
+			"div",
+			{ "data-testid": "header" },
+			"Header",
+		);
+		const narrowHtml = render({ initialWidth: 800, header: headerEl });
+		const wideHtml = render({ initialWidth: 1100, header: headerEl });
+		assert.match(
+			narrowHtml,
+			/data-testid="header"/,
+			"header shows on narrow widths",
+		);
+		assert.doesNotMatch(
+			wideHtml,
+			/data-testid="header"/,
+			"header is hidden at/above 1024px",
+		);
+	});
+
+	it("renders the overlay regardless of width", () => {
+		const overlayEl = createElement("div", { "data-testid": "overlay" }, "FAB");
+		const narrowHtml = render({ initialWidth: 800, overlay: overlayEl });
+		const wideHtml = render({ initialWidth: 1100, overlay: overlayEl });
+		assert.match(narrowHtml, /data-testid="overlay"/, "overlay on narrow");
+		assert.match(wideHtml, /data-testid="overlay"/, "overlay on desktop");
+	});
+
+	it("renders the skeleton when isLoading is true", () => {
+		const html = render({
+			isLoading: true,
+			skeleton: createElement("div", { "data-testid": "skeleton" }, "Loading"),
+		});
+		assert.match(html, /data-testid="skeleton"/, "skeleton is rendered");
+		assert.doesNotMatch(
+			html,
+			/data-testid="list"/,
+			"list is hidden while loading",
+		);
+	});
+});