@remit/ui 0.0.1

package/src/index.ts

@@ -0,0 +1,378 @@
+export {
+	AddressDisplay,
+	type AddressDisplayProps,
+	AddressList,
+	type AddressListProps,
+	type EnvelopeAddress,
+} from "./components/address-display.js";
+export { AddressTag, type AddressTagProps } from "./components/address-tag.js";
+export {
+	AppPasswordHint,
+	type AppPasswordHintProps,
+} from "./components/app-password-hint.js";
+export { AppShell } from "./components/app-shell.js";
+export {
+	type AppShellLayoutContext,
+	AppShellSlotted,
+	type AppShellSlottedProps,
+	useAppShellLayout,
+} from "./components/app-shell-slotted.js";
+export {
+	type AppShellProps,
+	type BriefCategoryFilter,
+	briefCategories,
+	categoryTone,
+	type Density,
+	INTELLIGENCE_MIN_WIDTH,
+	type NarrowView,
+	type NavAccount,
+	type NavAccountStatus,
+	type NavLinkComponent,
+	type NavLinkRenderProps,
+	type NavMailbox,
+	type NavMailboxRole,
+	type PaneLayout,
+	READING_PANE_MIN_WIDTH,
+	resolvePaneLayout,
+	type ThreadCategory,
+	type ThreadData,
+	type ThreadMessageData,
+	type ThreadRowData,
+	type ThreadSection,
+	type TouchSeed,
+	useContainerWidth,
+} from "./components/app-shell-types.js";
+export { AuthCard, type AuthCardProps } from "./components/auth-card.js";
+export {
+	AuthFooter,
+	type AuthFooterProps,
+	COGNITO_FOOTER_NOTE,
+} from "./components/auth-footer.js";
+export { AuthHero, type AuthHeroProps } from "./components/auth-hero.js";
+export {
+	AutoMovedBadge,
+	type AutoMovedBadgeProps,
+} from "./components/auto-moved-badge.js";
+export { Avatar, type AvatarProps } from "./components/avatar.js";
+export { Badge, type BadgeProps } from "./components/badge.js";
+export {
+	Banner,
+	type BannerProps,
+	type BannerTone,
+	type BannerVariant,
+} from "./components/banner.js";
+export {
+	BottomSheet,
+	type BottomSheetProps,
+} from "./components/bottom-sheet.js";
+export {
+	BriefSection,
+	type BriefSectionProps,
+	SECTION_ROW_CAP,
+} from "./components/brief-section.js";
+export {
+	BriefSections,
+	type BriefSectionsProps,
+} from "./components/brief-sections.js";
+export { Button, type ButtonProps } from "./components/button.js";
+export {
+	Card,
+	CardBody,
+	CardHeader,
+	type CardProps,
+	CardTitle,
+} from "./components/card.js";
+export {
+	CategoryBadge,
+	type CategoryBadgeProps,
+	getCategoryLabel,
+	type MessageCategory,
+} from "./components/category-badge.js";
+export { Checkbox, type CheckboxProps } from "./components/checkbox.js";
+export {
+	ComposeActionBar,
+	type ComposeActionBarProps,
+	type ComposeSaveStatus,
+} from "./components/compose-action-bar.js";
+export {
+	ComposeFormShell,
+	type ComposeFormShellProps,
+	type ComposeMode,
+	composeModeLabels,
+} from "./components/compose-form-shell.js";
+export {
+	DangerZoneSection,
+	type DangerZoneSectionProps,
+} from "./components/danger-zone-section.js";
+export { Dialog, type DialogProps } from "./components/dialog.js";
+export type { EmailFrameVariant } from "./components/email-frame-css.js";
+export {
+	FieldLabel,
+	type FieldLabelProps,
+} from "./components/field-label.js";
+export {
+	FilterSheet,
+	type FilterSheetCategory,
+	type FilterSheetFilter,
+	type FilterSheetProps,
+	type FilterSheetSource,
+} from "./components/filter-sheet.js";
+export {
+	canonicalRoleLabel,
+	type FolderRole,
+	providerLeaf,
+	roleIcon,
+} from "./components/folder-role.js";
+export {
+	Input,
+	type InputProps,
+	type InputVariant,
+} from "./components/input.js";
+export {
+	type AuthenticityIntel,
+	type IntelligenceData,
+	IntelligencePanel,
+	type IntelligencePanelProps,
+	type IntelligenceQuickActions,
+	type MatchedChunk,
+	type SenderFlagsIntel,
+	type SenderIntel,
+	type SenderTrustLevel,
+	type SimilarMessageIntel,
+	type SimilarMessageLinkComponent,
+	type SimilarMessageLinkProps,
+	type SimilarState,
+} from "./components/intelligence-panel.js";
+export {
+	IsolatedEmailFrame,
+	type IsolatedEmailFrameProps,
+	measureContentAxis,
+} from "./components/isolated-email-frame.js";
+export { Kbd, type KbdProps } from "./components/kbd.js";
+export {
+	defaultKeyboardHints,
+	type KeyboardHint,
+	KeyboardHintBar,
+	type KeyboardHintBarProps,
+} from "./components/keyboard-hint-bar.js";
+export { ListItem, type ListItemProps } from "./components/list-item.js";
+export {
+	type MailAction,
+	MailActionToolbar,
+	type MailActionToolbarProps,
+} from "./components/mail-action-toolbar.js";
+export {
+	MailHeader,
+	type MailHeaderProps,
+} from "./components/mail-header.js";
+export {
+	type EmailRenderCategory,
+	MessageBodyView,
+	type MessageBodyViewProps,
+} from "./components/message-body-view.js";
+export {
+	MessageHeader,
+	type MessageHeaderProps,
+} from "./components/message-header.js";
+export { MessageListPane } from "./components/message-list-pane.js";
+export {
+	type ListState,
+	MessageListEmpty,
+	MessageListError,
+	MessageListLoading,
+} from "./components/message-list-state.js";
+export {
+	type BriefRowComponent,
+	ComfortableRow,
+	ComfortableRowBody,
+	ComfortableRowTextContent,
+	CompactRow,
+	CompactRowBody,
+	comfortableRowClass,
+	compactRowClass,
+} from "./components/message-row.js";
+export {
+	type MobileMessageAction,
+	MobileMessageActionBar,
+	type MobileMessageActionBarProps,
+} from "./components/mobile-message-action-bar.js";
+export {
+	type MobileReadingMessageActions,
+	MobileReadingPane,
+	type MobileReadingPaneProps,
+} from "./components/mobile-reading-pane.js";
+export {
+	MobileSearchView,
+	type MobileSearchViewProps,
+} from "./components/mobile-search-view.js";
+export {
+	type MoveMailboxOption,
+	MoveMailboxPicker,
+	type MoveMailboxPickerLabels,
+	type MoveMailboxPickerProps,
+} from "./components/move-mailbox-picker.js";
+export {
+	NavSidebar,
+	type NavSidebarProps,
+} from "./components/nav-sidebar.js";
+export { OutboxRow, type OutboxRowProps } from "./components/outbox-row.js";
+export {
+	type OutboxStatus,
+	OutboxStatusBadge,
+	type OutboxStatusBadgeProps,
+	outboxStatusConfig,
+} from "./components/outbox-status-badge.js";
+export {
+	PopoverMenu,
+	type PopoverMenuItem,
+	type PopoverMenuProps,
+} from "./components/popover-menu.js";
+export {
+	PullToRefresh,
+	type PullToRefreshProps,
+} from "./components/pull-to-refresh.js";
+export {
+	QuotedText,
+	type QuotedTextProps,
+} from "./components/quoted-text.js";
+export {
+	CollapsedMessage,
+	ExpandedMessage,
+	ReadingPane,
+} from "./components/reading-pane.js";
+export {
+	ReadingPaneEmpty,
+	type ReadingPaneEmptyProps,
+} from "./components/reading-pane-empty.js";
+export {
+	RescueBanner,
+	type RescueBannerProps,
+} from "./components/rescue-banner.js";
+export {
+	type RescueCandidate,
+	RescueCandidateRow,
+	type RescueCandidateRowProps,
+} from "./components/rescue-candidate-row.js";
+export {
+	RescueFromSpamFlow,
+	type RescueFromSpamFlowProps,
+	rescueMoveConsequence,
+} from "./components/rescue-from-spam-flow.js";
+export {
+	type PanelGroupProps,
+	type PanelProps,
+	type PanelResizeHandleProps,
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from "./components/resizable.js";
+export {
+	APPOINTABLE_ROLES,
+	type CandidateFolder,
+	RoleAppointmentList,
+	type RoleAppointmentListProps,
+} from "./components/role-appointment-list.js";
+export {
+	type RowAction,
+	RowActions,
+	type RowActionsProps,
+	type RowDestructiveAction,
+} from "./components/row-actions.js";
+export { SearchBar, type SearchBarProps } from "./components/search-bar.js";
+export {
+	type SearchResult,
+	SearchResultRow,
+	type SearchResultRowProps,
+	type SearchResultTone,
+} from "./components/search-result-row.js";
+export {
+	type SearchResultSection,
+	SearchResults,
+	type SearchResultsProps,
+} from "./components/search-results.js";
+export {
+	SearchTokenChip,
+	type SearchTokenChipProps,
+	SearchTokenChips,
+	type SearchTokenChipsProps,
+} from "./components/search-token-chip.js";
+export {
+	SecuritySelect,
+	type SecuritySelectProps,
+	type ServerSecurity,
+	securityToApi,
+} from "./components/security-select.js";
+export {
+	SegmentedControl,
+	type SegmentedControlProps,
+	type SegmentedOption,
+} from "./components/segmented-control.js";
+export { Select, type SelectProps } from "./components/select.js";
+export {
+	SelectionTopBar,
+	type SelectionTopBarProps,
+} from "./components/selection-top-bar.js";
+export {
+	type SenderGroupOption,
+	SenderGroupSwitch,
+	type SenderGroupSwitchProps,
+} from "./components/sender-group-switch.js";
+export {
+	type SenderTrust,
+	SenderTrustIndicator,
+	type SenderTrustIndicatorProps,
+	type SenderTrustVariant,
+	selectSenderTrustVariant,
+} from "./components/sender-trust-indicator.js";
+export {
+	AccountHealthCard,
+	type AccountHealthCardProps,
+	SenderFlagRow,
+	type SenderFlagRowProps,
+	type SettingsNavItem,
+	SettingsShell,
+	type SettingsShellProps,
+} from "./components/settings-screen.js";
+export {
+	commitPeek,
+	SwipeableRow,
+	type SwipeableRowOpenProps,
+	type SwipePeek,
+} from "./components/swipeable-row.js";
+export { TouchListBody } from "./components/touch-list.js";
+export {
+	CheckRow,
+	type CheckRowProps,
+	ConnectorTile,
+	type ConnectorTileProps,
+	ServerFields,
+	type ServerFieldsProps,
+	WizardShell,
+	type WizardShellProps,
+} from "./components/wizard.js";
+export {
+	briefFilterConfig,
+	type FilterAccount,
+	type FilterPreset,
+	flaggedFilterConfig,
+	inboxFilterConfig,
+} from "./filter-presets.js";
+export {
+	buildCidResolver,
+	type CidResolvableBodyPart,
+	type CidResolver,
+} from "./lib/cid-resolver.js";
+export { cn } from "./lib/cn.js";
+export { generateLayoutClampCSS } from "./lib/email-layout-clamp.js";
+export {
+	classifyEmailRenderTreatment,
+	type EmailRenderTreatment,
+} from "./lib/email-render-treatment.js";
+export {
+	createEmailSanitizer,
+	detectAuthorBackground,
+	type SanitizedEmail,
+	type SanitizeOptions,
+	sanitizeInlineStyle,
+	sanitizeStyleElementCss,
+} from "./lib/email-sanitizer.js";

package/src/lib/cid-resolver.ts

@@ -0,0 +1,35 @@
+/**
+ * Resolver function for `cid:CONTENT_ID` references found in HTML bodies.
+ * Returns the CloudFront URL (`BodyPartResponse.contentUrl`) for the part
+ * with the matching `contentId`, or `undefined` when no matching part
+ * exists — letting the broken-image render through is the intentional
+ * fail-loud behaviour (#feedback_never_hide_failure).
+ *
+ * Lives in its own module so tests can import the pure function without
+ * loading `email-sanitizer.ts`, which evaluates `DOMPurify()` at import
+ * time and crashes outside a browser/JSDOM context.
+ */
+export type CidResolver = (contentId: string) => string | undefined;
+
+export interface CidResolvableBodyPart {
+	contentId?: string;
+	contentUrl: string;
+}
+
+/**
+ * Index a list of body parts by their (angle-bracket-stripped) `contentId`
+ * and return a resolver. Calling the resolver with a `cid:` value's
+ * Content-ID returns the corresponding `contentUrl`. Pure function — safe
+ * to memoise on the body-parts reference.
+ */
+export const buildCidResolver = (
+	bodyParts: readonly CidResolvableBodyPart[],
+): CidResolver => {
+	const byContentId = new Map<string, string>();
+	for (const part of bodyParts) {
+		if (!part.contentId || part.contentUrl.length === 0) continue;
+		const stripped = part.contentId.replace(/^<|>$/g, "");
+		byContentId.set(stripped, part.contentUrl);
+	}
+	return (contentId) => byContentId.get(contentId.replace(/^<|>$/g, ""));
+};

package/src/lib/cn.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge conditional class names, de-duplicating conflicting Tailwind utilities. */
+export function cn(...inputs: ClassValue[]): string {
+	return twMerge(clsx(inputs));
+}

package/src/lib/email-layout-clamp.test.ts

@@ -0,0 +1,109 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import { generateLayoutClampCSS } from "./email-layout-clamp.js";
+
+/**
+ * Layout-clamp CSS injected alongside sanitized email HTML. Asserts on
+ * substrings — the goal is to lock in the rules that close #374 / #727 (mobile
+ * horizontal overflow when author markup is wider than the viewport). If any of
+ * these get dropped, wide tables / images / long URLs would start unlocking
+ * horizontal page scroll again.
+ *
+ * The sanitizer drops the email body straight into the iframe with no
+ * `.email-content` wrapper, so the rules target the document's own
+ * `html`/`body` and bare element selectors — a wrapper-scoped selector would
+ * never match and the clamp would silently do nothing (the original #727 bug).
+ *
+ * Pure string assertions — no DOM required, intentionally separate from
+ * `email-sanitizer.test.ts` because importing `email-sanitizer.ts` in plain
+ * Node fails on its eager `DOMPurify()` call at module load.
+ */
+describe("generateLayoutClampCSS (#374 / #727)", () => {
+	const css = generateLayoutClampCSS();
+
+	test("targets the document body directly, not a wrapper that never exists", () => {
+		// The sanitized email has no `.email-content` element — scoping there
+		// was the #727 bug (dead CSS). Rules must hit bare element selectors.
+		assert.ok(
+			!css.includes(".email-content"),
+			"clamp rules must not be scoped to a non-existent .email-content wrapper",
+		);
+	});
+
+	test("zeros UA default html/body margin so iframe content fills edge-to-edge", () => {
+		assert.ok(
+			/html\s*,\s*body\s*\{[^}]*margin\s*:\s*0/.test(css),
+			"html, body margin must be reset to 0",
+		);
+		assert.ok(
+			/html\s*,\s*body\s*\{[^}]*padding\s*:\s*0/.test(css),
+			"html, body padding must be reset to 0",
+		);
+	});
+
+	test("clamps the document to the iframe width and wraps long tokens", () => {
+		assert.ok(css.includes("max-width: 100%"));
+		assert.ok(css.includes("overflow-wrap: anywhere"));
+		assert.ok(css.includes("word-break: break-word"));
+	});
+
+	test("forces wide media (img/video/iframe) to fit the frame", () => {
+		assert.ok(/(^|\s)img\s*,/.test(css) || /\bimg\b/.test(css));
+		assert.ok(/\bvideo\b/.test(css));
+		assert.ok(/\biframe\b/.test(css));
+		// Author markup often sets `width="900"` — without !important we lose
+		// the cascade and the image overflows again.
+		assert.ok(
+			css.includes("max-width: 100% !important"),
+			"images need !important to override author width attributes",
+		);
+	});
+
+	test("clamps fixed-width newsletter tables", () => {
+		assert.ok(/\btable\b/.test(css));
+		assert.ok(
+			css.includes("max-width: 100% !important"),
+			"author <table width='600'> must be capped to the frame width",
+		);
+		assert.ok(css.includes("table-layout: auto"));
+	});
+
+	test("clamps fixed-width table cells (the real width carriers in newsletters)", () => {
+		// Newsletters pin widths on `<td width="600">`, not just the table.
+		assert.ok(
+			/\btd\s*,\s*th\b/.test(css),
+			"td, th must be capped to the frame",
+		);
+		assert.ok(
+			/td\s*,\s*th\s*\{[^}]*max-width:\s*100%\s*!important/.test(css),
+			"cell widths need !important to override author width attributes",
+		);
+	});
+
+	test("zeros min-width so children can shrink below their intrinsic width", () => {
+		// `max-width` alone can't override an inline `min-width`; flex/grid/table
+		// children won't collapse without this.
+		assert.ok(
+			/\*\s*\{[^}]*min-width:\s*0/.test(css),
+			"a universal min-width:0 must let wide children shrink to the clamp",
+		);
+	});
+
+	test("wraps long unbroken lines in pre/code blocks", () => {
+		assert.ok(/\bpre\b/.test(css));
+		assert.ok(/\bcode\b/.test(css));
+		assert.ok(css.includes("white-space: pre-wrap"));
+	});
+
+	test("does not touch colors or backgrounds (layout-only, by design)", () => {
+		// If any of these slip in, this stylesheet starts overlapping with
+		// the dark-mode / smart-invert CSS and the rule set is no longer
+		// scoped to the bug we're fixing. Keep it laser-focused on width/wrap.
+		assert.ok(!/\bcolor\s*:/.test(css), "no color rules in layout clamp");
+		assert.ok(
+			!/\bbackground(-color)?\s*:/.test(css),
+			"no background rules in layout clamp",
+		);
+		assert.ok(!/\bfont-/.test(css), "no font rules in layout clamp");
+	});
+});

package/src/lib/email-layout-clamp.ts

@@ -0,0 +1,64 @@
+/**
+ * Layout-clamp CSS injected into rendered email bodies.
+ *
+ * Author markup commonly sets explicit pixel widths via `<table width="600">`,
+ * `<img width="900">`, oversized inline styles, or long unbroken URLs. On a
+ * narrow viewport these push the body past the iframe's width and unlock
+ * horizontal page scroll, dragging the surrounding app chrome with them (#727).
+ * We clamp the body and its media + tables to the viewport width and wrap long
+ * unbroken tokens so the rendered email fits the frame on a phone.
+ *
+ * The sanitizer prepends this block to the raw (DOMPurify'd) email and drops it
+ * into the iframe with no `.email-content` wrapper, so the rules target the
+ * iframe's own `html`/`body` and the document's media/table/code elements
+ * directly — a wrapper-scoped selector would never match.
+ *
+ * Layout-only: colors, backgrounds and typography are untouched (that is the
+ * dark-mode / smart-invert CSS's job in `IsolatedEmailFrame`). Uses
+ * `!important` because author width attributes win the cascade otherwise; the
+ * cascade win is the entire point on mobile. Not wrapped in a media query —
+ * natural content width still affects parent layout on desktop if it's wider
+ * than the column.
+ *
+ * In its own module so tests can import it without triggering the eager
+ * `DOMPurify()` call at the bottom of `email-sanitizer.ts` (which needs a DOM).
+ */
+export const generateLayoutClampCSS = (): string => `
+/* Zero the UA default body margin and clamp the document to the iframe width so
+   wide author markup can't push the body (and the page) past the viewport. */
+html, body {
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+}
+body {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+/* Media never wider than the frame; keep aspect ratio when width is capped. */
+img, video, iframe, svg, canvas {
+  max-width: 100% !important;
+  height: auto;
+}
+/* Fixed-width author tables (\`<table width="600">\`) collapse to fit. */
+table {
+  max-width: 100% !important;
+  table-layout: auto;
+}
+/* Cells carry the fixed widths in real newsletters (\`<td width="600">\`);
+   cap them too or the table can't actually shrink. */
+td, th {
+  max-width: 100% !important;
+}
+/* \`max-width\` alone can't beat an inline \`min-width\`; zeroing the min lets
+   flex / grid / table children actually collapse to the clamped width. */
+* {
+  min-width: 0;
+}
+/* Long unbroken strings (URLs, tokens) wrap instead of forcing a wide line. */
+pre, code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+`;

package/src/lib/email-render-treatment.test.ts

@@ -0,0 +1,82 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import { classifyEmailRenderTreatment } from "./email-render-treatment.js";
+
+/**
+ * Render-treatment classification (#424). Locks the framed-vs-plain decision
+ * that drives the owner's dark-mode fix: misclassifying a plain personal email
+ * as `framed` would skip the theme-aware base CSS and reintroduce
+ * black-text-on-dark.
+ */
+describe("classifyEmailRenderTreatment (#424)", () => {
+	test("newsletter category → framed (designed mail, colors preserved)", () => {
+		const t = classifyEmailRenderTreatment("newsletter", false);
+		assert.strictEqual(t.framed, true);
+		assert.strictEqual(t.isPlain, false);
+	});
+
+	test("marketing category → framed", () => {
+		const t = classifyEmailRenderTreatment("marketing", false);
+		assert.strictEqual(t.framed, true);
+		assert.strictEqual(t.isPlain, false);
+	});
+
+	test("author background detected → framed even for a personal category", () => {
+		const t = classifyEmailRenderTreatment("personal", true);
+		assert.strictEqual(t.framed, true);
+		assert.strictEqual(t.isPlain, false);
+	});
+
+	test("plain personal mail (no background) → isPlain (theme CSS applied)", () => {
+		// Mirrors the `<p style="color:#000">…</p>` case: text-color only, no
+		// background — the sanitizer returns hasAuthorBackground=false, so this
+		// must classify as plain and receive the theme-aware base CSS.
+		const t = classifyEmailRenderTreatment("personal", false);
+		assert.strictEqual(t.framed, false);
+		assert.strictEqual(t.isPlain, true);
+	});
+
+	test("undefined category, no background → isPlain (safe default for weak markup)", () => {
+		const t = classifyEmailRenderTreatment(undefined, false);
+		assert.strictEqual(t.framed, false);
+		assert.strictEqual(t.isPlain, true);
+	});
+
+	test("undefined category WITH author background → framed", () => {
+		const t = classifyEmailRenderTreatment(undefined, true);
+		assert.strictEqual(t.framed, true);
+		assert.strictEqual(t.isPlain, false);
+	});
+
+	test("automated/transactional/social categories with no background → isPlain", () => {
+		for (const category of ["automated", "transactional", "social"] as const) {
+			const t = classifyEmailRenderTreatment(category, false);
+			assert.strictEqual(
+				t.isPlain,
+				true,
+				`${category} with no background should be plain`,
+			);
+		}
+	});
+
+	test("framed and isPlain are always mutually exclusive", () => {
+		const cases: Array<
+			[Parameters<typeof classifyEmailRenderTreatment>[0], boolean]
+		> = [
+			["newsletter", false],
+			["marketing", true],
+			["personal", false],
+			["personal", true],
+			[undefined, false],
+			[undefined, true],
+		];
+		for (const [category, bg] of cases) {
+			const t = classifyEmailRenderTreatment(category, bg);
+			assert.notStrictEqual(
+				t.framed,
+				t.isPlain,
+				`framed and isPlain must differ for (${category}, ${bg})`,
+			);
+		}
+	});
+});