@remit/ui 0.0.1

package/src/lib/email-sanitizer.ts

@@ -0,0 +1,298 @@
+import DOMPurify from "dompurify";
+import type { CidResolver } from "./cid-resolver.js";
+import { generateLayoutClampCSS } from "./email-layout-clamp.js";
+
+export type { CidResolver } from "./cid-resolver.js";
+export { buildCidResolver } from "./cid-resolver.js";
+export { generateLayoutClampCSS } from "./email-layout-clamp.js";
+
+export interface SanitizeOptions {
+	allowExternalImages?: boolean;
+	/**
+	 * Resolve a `cid:CONTENT_ID` reference to a fetchable URL. The renderer
+	 * looks up the body part with a matching `contentId` and returns its
+	 * CloudFront `contentUrl` (#224 PR 2). When the resolver returns
+	 * `undefined`, the original `cid:` URL is left in place so the failure
+	 * is visible (broken image icon) — never silently substitute a blocked-
+	 * placeholder, that would mask a real backend mismatch.
+	 */
+	resolveCid?: CidResolver;
+}
+
+/**
+ * Output of the sanitize pipeline. `hasAuthorBackground` tells the renderer
+ * whether the email author specified its own background — either via an
+ * inline `style="background…"`, a legacy `bgcolor="…"` attribute, or inside
+ * a `<style>` block. When true, the renderer pins the subtree to light-mode
+ * so author colors survive (newsletter / designed mail). When false, the
+ * subtree inherits the app theme so plain mail blends with dark chrome
+ * instead of becoming a bright slab (#375).
+ */
+export interface SanitizedEmail {
+	html: string;
+	hasAuthorBackground: boolean;
+}
+
+/**
+ * CSS values that represent "no background" — finding `background[-color]:`
+ * set to one of these in a `<style>` block does NOT constitute an author
+ * background. Values are matched case-insensitively.
+ */
+const NO_BACKGROUND_VALUES = /^(none|transparent|inherit|initial|unset)\s*$/i;
+
+/**
+ * Extract all `<style>…</style>` block contents from the raw HTML string.
+ */
+const extractStyleBlocks = (html: string): string[] => {
+	const blocks: string[] = [];
+	const re = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+	let match: RegExpExecArray | null;
+	match = re.exec(html);
+	while (match !== null) {
+		blocks.push(match[1]);
+		match = re.exec(html);
+	}
+	return blocks;
+};
+
+/**
+ * Return true if the CSS text contains a `background` or `background-color`
+ * declaration with a value that is not one of the "no-op" keywords
+ * (`none`, `transparent`, `inherit`, `initial`, `unset`). A light
+ * declaration scan — no full CSS parser needed.
+ *
+ * Note: this intentionally matches any selector (including class selectors
+ * like `.foo { background: red }`). Determining whether a given rule is
+ * "applied" to any element requires DOM access and a full cascade, which is
+ * beyond the scope of a pre-sanitization heuristic. The main fixes this
+ * closes are reset stylesheets (`background: none / transparent`) and
+ * `background: inherit` resets that were spuriously triggering the framed
+ * treatment (#483). A class rule with a real color value is treated as an
+ * author background on the conservative side.
+ */
+const styleBlockHasBackground = (css: string): boolean => {
+	// Match `background:` or `background-color:` followed by its value
+	// (everything up to the next `;`, `}`, or end of string).
+	const re = /background(?:-color)?\s*:\s*([^;}\n]+)/gi;
+	let match: RegExpExecArray | null;
+	match = re.exec(css);
+	while (match !== null) {
+		const value = match[1].trim();
+		if (!NO_BACKGROUND_VALUES.test(value)) {
+			return true;
+		}
+		match = re.exec(css);
+	}
+	return false;
+};
+
+/**
+ * Detect whether the input HTML contains an author-specified background.
+ * Runs over the raw HTML string before sanitization — a real CSS parser is
+ * overkill here because the false-positive surface is "the literal word
+ * 'background' inside a `<style>` block or a `style=` attribute", and that's
+ * exactly the content we'd parse anyway. Match on:
+ *   - any `style="…background…"` (or `style='…'`)
+ *   - any `bgcolor=` attribute
+ *   - any `<style>` block that contains a `background[-color]:` declaration
+ *     with a non-trivial value (not `none`, `transparent`, `inherit`,
+ *     `initial`, or `unset`) — tightened from the bare substring match that
+ *     was over-matching reset stylesheets and `background: none` rules (#483)
+ *
+ * Author *text* colour alone (no background) does not trigger — that's the
+ * point: a plain `<p style="color:#666">…</p>` mail still blends with the
+ * app theme.
+ */
+export const detectAuthorBackground = (html: string): boolean => {
+	if (/\bstyle\s*=\s*["'][^"']*background/i.test(html)) return true;
+	if (/\bbgcolor\s*=/i.test(html)) return true;
+	for (const block of extractStyleBlocks(html)) {
+		if (styleBlockHasBackground(block)) return true;
+	}
+	return false;
+};
+
+const FORBIDDEN_TAGS = [
+	"script",
+	"iframe",
+	"object",
+	"embed",
+	"form",
+	"input",
+	"button",
+	"textarea",
+	"select",
+	"meta",
+	"link",
+	"base",
+];
+
+const FORBIDDEN_ATTR = [
+	// Event handlers
+	"onerror",
+	"onload",
+	"onclick",
+	"onmouseover",
+	"onmouseout",
+	"onfocus",
+	"onblur",
+	"onsubmit",
+	"onkeydown",
+	"onkeyup",
+	// Dangerous attributes
+	"formaction",
+	"xlink:href",
+	"data-bind",
+];
+
+// Placeholder for blocked images
+const PLACEHOLDER_IMAGE =
+	"data:image/svg+xml," +
+	encodeURIComponent(`
+  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+    <rect fill="#f0f0f0" width="100" height="100"/>
+    <text x="50" y="50" text-anchor="middle" dy=".3em" fill="#999" font-size="12">
+      Image blocked
+    </text>
+  </svg>
+`);
+
+/**
+ * Strip CSS constructs that double as injection vectors from an inline
+ * `style="..."` value:
+ *   - `url(...)` — author can reference remote backgrounds, which leaks the
+ *     read event the same way an `<img>` would. Privacy.
+ *   - `expression(...)` — legacy IE CSS-as-JS escape hatch. XSS.
+ *   - `-moz-binding: ...` — legacy Firefox CSS-to-XBL escape hatch. XSS.
+ *
+ * Author colors/backgrounds pass through unchanged — the email body is
+ * rendered as a light-mode island (see `IsolatedEmailFrame`'s
+ * `color-scheme: light`), so author CSS can stand on its own.
+ */
+export const sanitizeInlineStyle = (style: string): string => {
+	return style
+		.replace(/url\s*\([^)]*\)/gi, "none")
+		.replace(/expression\s*\([^)]*\)/gi, "")
+		.replace(/-moz-binding\s*:[^;]*/gi, "");
+};
+
+/**
+ * Same security scrub as `sanitizeInlineStyle`, plus `@import` neutering for
+ * `<style>` block contents — `@import` can pull in remote stylesheets and
+ * leaks the read event.
+ *
+ * Crucially, this does NOT wrap the author's CSS in a media query: the email
+ * subtree is pinned to light-mode at the wrapper level, so author CSS that
+ * targets `body { background: white; color: black; }` keeps applying.
+ */
+export const sanitizeStyleElementCss = (css: string): string => {
+	return css
+		.replace(/@import[^;]*;/gi, "/* @import blocked */")
+		.replace(/url\s*\([^)]*\)/gi, "none")
+		.replace(/expression\s*\([^)]*\)/gi, "")
+		.replace(/-moz-binding\s*:[^;]*/gi, "");
+};
+
+// ============================================
+// Main Sanitizer
+// ============================================
+
+export const createEmailSanitizer = (options: SanitizeOptions = {}) => {
+	const purify = DOMPurify();
+
+	const config = {
+		FORBID_TAGS: FORBIDDEN_TAGS,
+		FORBID_ATTR: FORBIDDEN_ATTR,
+		ALLOW_DATA_ATTR: false,
+		ALLOW_UNKNOWN_PROTOCOLS: false,
+	};
+
+	// Hook: Process elements after attribute sanitization
+	purify.addHook("afterSanitizeAttributes", (node) => {
+		// Handle images
+		if (node.tagName === "IMG") {
+			const src = node.getAttribute("src") || "";
+
+			if (src.startsWith("data:")) {
+				// Allow data URIs (inline images)
+				return;
+			}
+
+			if (src.startsWith("cid:")) {
+				// `cid:` references inline body parts. Look up the matching
+				// body part by Content-ID and rewrite to the CloudFront
+				// `contentUrl` (#224 PR 2). The Content-ID in the URL may
+				// or may not be wrapped in angle brackets — strip them so
+				// the comparison is consistent across mail clients.
+				const raw = src.slice(4);
+				const stripped = raw.replace(/^<|>$/g, "");
+				const resolved = options.resolveCid?.(stripped);
+				if (resolved) {
+					node.setAttribute("src", resolved);
+					node.classList.add("inline-content");
+				}
+				return;
+			}
+
+			if (!options.allowExternalImages) {
+				// Store original src for "load images" feature
+				node.setAttribute("data-blocked-src", src);
+				node.setAttribute("src", PLACEHOLDER_IMAGE);
+				node.setAttribute("alt", "[Blocked image]");
+				node.classList.add("blocked-image");
+			}
+		}
+
+		// Handle links
+		if (node.tagName === "A") {
+			const href = node.getAttribute("href") || "";
+
+			// Block javascript: and data: URLs
+			if (/^(javascript|data):/i.test(href)) {
+				node.removeAttribute("href");
+				return;
+			}
+
+			// Make external links safe
+			node.setAttribute("target", "_blank");
+			node.setAttribute("rel", "noopener noreferrer nofollow");
+
+			// Add visual indicator for external links
+			node.classList.add("external-link");
+		}
+
+		// Sanitize inline styles — security only, colors pass through.
+		if (node.hasAttribute("style")) {
+			const style = node.getAttribute("style") || "";
+			node.setAttribute("style", sanitizeInlineStyle(style));
+		}
+	});
+
+	// Hook: Process style elements
+	purify.addHook("uponSanitizeElement", (node, data) => {
+		if (data.tagName === "style") {
+			const css = node.textContent || "";
+			node.textContent = sanitizeStyleElementCss(css);
+		}
+	});
+
+	return (html: string): SanitizedEmail => {
+		// Detect BEFORE sanitization: DOMPurify keeps `style=` / `bgcolor=` /
+		// author `<style>` content for us (we deliberately preserve them in
+		// #375), but running the detector on the raw input is simpler and
+		// not sensitive to any future hook rewrites.
+		const hasAuthorBackground = detectAuthorBackground(html);
+
+		const sanitized = purify.sanitize(html, config);
+
+		// Layout clamp always applies — it keeps wide author markup (fixed-width
+		// tables, oversized images, long URLs) from breaking out of the column
+		// and unlocking horizontal page scroll on mobile (#374). Independent of
+		// any color concerns because it touches layout only.
+		const layoutCss = generateLayoutClampCSS();
+		return {
+			html: `<style>${layoutCss}</style>${sanitized}`,
+			hasAuthorBackground,
+		};
+	};
+};

package/src/lib/row-keyboard.test.ts

@@ -0,0 +1,41 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { isSelfRowActivation } from "./row-keyboard.js";
+
+// Two distinct nodes standing in for the row (currentTarget) and a nested
+// control such as the trailing star / Clear button (a descendant target).
+const row = { id: "row" } as unknown as EventTarget;
+const innerButton = { id: "star" } as unknown as EventTarget;
+
+describe("isSelfRowActivation (#1232 keyboard twin-action guard)", () => {
+	it("activates on Enter/Space that originate on the row itself", () => {
+		for (const key of ["Enter", " "]) {
+			assert.equal(
+				isSelfRowActivation({ key, target: row, currentTarget: row }),
+				true,
+			);
+		}
+	});
+
+	it("ignores Enter/Space bubbled up from a nested control (no twin action)", () => {
+		for (const key of ["Enter", " "]) {
+			assert.equal(
+				isSelfRowActivation({
+					key,
+					target: innerButton,
+					currentTarget: row,
+				}),
+				false,
+			);
+		}
+	});
+
+	it("ignores other keys even on the row itself", () => {
+		for (const key of ["Tab", "a", "ArrowDown", "Escape"]) {
+			assert.equal(
+				isSelfRowActivation({ key, target: row, currentTarget: row }),
+				false,
+			);
+		}
+	});
+});

package/src/lib/row-keyboard.ts

@@ -0,0 +1,20 @@
+/**
+ * A `role="button"` row that holds its own nested controls (a star toggle, a
+ * Clear button) can't be a native `<button>` — button-in-button is invalid HTML
+ * (#1232). The row wires Enter/Space by hand, but a keydown on a focused inner
+ * button bubbles up to the row's `onKeyDown`. Without a guard the row would
+ * activate too, firing two actions from one keypress (a native `<button>`
+ * ancestor never did this).
+ *
+ * Act only on keys that originate on the row itself (`target === currentTarget`),
+ * so a key bubbled from a descendant control is ignored. This is the row-level
+ * twin of the child button's `stopPropagation()` on click.
+ */
+export function isSelfRowActivation(e: {
+	key: string;
+	target: EventTarget | null;
+	currentTarget: EventTarget | null;
+}): boolean {
+	if (e.target !== e.currentTarget) return false;
+	return e.key === "Enter" || e.key === " ";
+}

package/src/tokens.css

@@ -0,0 +1,217 @@
+@import "tailwindcss";
+
+/* Self-hosted variable fonts (no CDN). Swap the active UI font in ONE
+   line below: change --font-ui to one of the three @theme aliases. */
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/hanken-grotesk";
+@import "@fontsource-variable/inter";
+
+/* Tailwind v4 dark variant: dark: utilities apply when any ancestor
+   carries the .dark class. The workbench theme decorator toggles
+   .dark on a wrapper; an app would toggle it on <html>. */
+@custom-variant dark (&:is(.dark *));
+
+/* @theme inline aliases Tailwind utilities (bg-surface, text-fg, etc.)
+   to the semantic CSS variables declared on :root / .dark below. The
+   :root / .dark blocks MUST come after this @theme block — otherwise
+   Tailwind hoists them and the dark scope collapses. */
+@theme inline {
+	/* font candidates — A/B by repointing --font-ui */
+	--font-geist: "Geist Variable", system-ui, sans-serif;
+	--font-hanken: "Hanken Grotesk Variable", system-ui, sans-serif;
+	--font-inter: "Inter Variable", system-ui, sans-serif;
+
+	/* the single active-font token — change this one line to swap */
+	--font-ui: var(--font-geist);
+	--font-sans: var(--font-ui);
+
+	/* surfaces & text */
+	--color-canvas: var(--canvas);
+	--color-surface: var(--surface);
+	--color-surface-raised: var(--surface-raised);
+	--color-surface-sunken: var(--surface-sunken);
+	--color-fg: var(--fg);
+	--color-fg-muted: var(--fg-muted);
+	--color-fg-subtle: var(--fg-subtle);
+
+	/* lines */
+	--color-line: var(--line);
+	--color-line-strong: var(--line-strong);
+
+	/* brand accent (phosphor green): primary actions, links, unread */
+	--color-accent: var(--accent);
+	--color-accent-hover: var(--accent-hover);
+	--color-accent-fg: var(--accent-fg);
+	--color-accent-soft: var(--accent-soft);
+
+	/* secondary accent (cyan): selection states & informational chips */
+	--color-accent-2: var(--accent-2);
+	--color-accent-2-soft: var(--accent-2-soft);
+
+	/* status */
+	--color-positive: var(--positive);
+	--color-warning: var(--warning);
+	--color-danger: var(--danger);
+	--color-danger-soft: var(--danger-soft);
+
+	/* focus ring */
+	--color-ring: var(--ring);
+
+	/* radii — slight rounding only: hairline borders + subtle radius */
+	--radius-xs: 2px;
+	--radius-sm: 3px;
+	--radius-md: 5px;
+	--radius-lg: 7px;
+	--radius-xl: 10px;
+
+	/* vertical rhythm: 4px base unit, modular 1:2:3:5 scale.
+	   Allowed vertical spacing steps: 4 / 8 / 12 / 20px (32px = 8 units
+	   as the one outlier for big section breaks). In Tailwind terms:
+	   py-1 / py-2 / py-3 / py-5 (py-8). Row heights land on the 4px
+	   grid: compact row 32px, pane header 40px, section/expando row 48px,
+	   comfortable message row 72px (section:message = 2:3). */
+
+	/* shared pane-header datum: every pane's first header row (mail list,
+	   reading pane, intelligence, settings nav/content/help) is exactly
+	   this tall so one continuous hairline runs across all panes.
+	   40px = 10 grid units. */
+	--spacing-pane-header: 2.5rem;
+
+	/* section-row: the fixed height for section headers and expandos in
+	   the inbox list. 48px = 2/3 of the 72px comfortable message row,
+	   establishing the 2:3 rhythm. 12 grid units. */
+	--spacing-section-row: 3rem;
+
+	/* shared horizontal inset for dense list rows (mail list, brief,
+	   senders table): content is inset (12px = 3 units), hover/active
+	   highlight bleeds to the full pane width. */
+	--spacing-row-inset: 0.75rem;
+
+	/* type scale (1.20 minor third off 14px base) */
+	--text-2xs: 0.6875rem;
+	--text-xs: 0.75rem;
+	--text-sm: 0.8125rem;
+	--text-base: 0.875rem;
+	--text-md: 0.9375rem;
+	--text-lg: 1.0625rem;
+	--text-xl: 1.3125rem;
+	--text-2xl: 1.625rem;
+
+	/* spacing rhythm leans on Tailwind defaults; density is "calm" */
+}
+
+/* ------------------------------------------------------------------ */
+/* "Hipster modern retro" (2026), balanced for tired eyes.            */
+/* Solarized-inspired tinted neutrals with deliberately better text   */
+/* contrast than actual Solarized: warm cream paper in light, deep    */
+/* slate-teal in dark, cream-on-teal text pairing, phosphor-green     */
+/* accent, cyan secondary for selection/info. Danger stays the ONLY   */
+/* warm color in the UI so phishing banners are the loudest thing on  */
+/* screen. No pure white, no pure black anywhere.                     */
+/* ------------------------------------------------------------------ */
+
+/* ---------- LIGHT: warm paper ---------- */
+:root {
+	/* warm cream, base3 direction but less yellow */
+	--canvas: oklch(0.96 0.015 90);
+	--surface: oklch(0.975 0.012 90);
+	--surface-raised: oklch(0.985 0.009 90);
+	--surface-sunken: oklch(0.935 0.018 90);
+
+	/* cool dark ink, never black (~12:1 on canvas) */
+	--fg: oklch(0.3 0.025 235);
+	--fg-muted: oklch(0.45 0.022 235);
+	--fg-subtle: oklch(0.55 0.02 235);
+
+	/* warm-tinted hairlines */
+	--line: oklch(0.89 0.015 90);
+	--line-strong: oklch(0.82 0.018 90);
+
+	/* desaturated-neon phosphor green, darkened for cream */
+	--accent: oklch(0.55 0.14 150);
+	--accent-hover: oklch(0.49 0.14 150);
+	--accent-fg: oklch(0.975 0.012 90);
+	--accent-soft: oklch(0.91 0.05 150);
+
+	/* slightly saturated cyan: selection & informational chips */
+	--accent-2: oklch(0.55 0.1 205);
+	--accent-2-soft: oklch(0.91 0.045 205);
+
+	/* positive converges toward the green family */
+	--positive: oklch(0.55 0.12 155);
+	/* muted amber, used sparingly */
+	--warning: oklch(0.65 0.13 80);
+	/* muted coral — the only warm color in the UI */
+	--danger: oklch(0.56 0.16 25);
+	--danger-soft: oklch(0.93 0.04 25);
+
+	--ring: oklch(0.55 0.14 150);
+}
+
+/* ---------- DARK: deep slate-teal, lifted off black ---------- */
+.dark {
+	/* base03 direction */
+	--canvas: oklch(0.22 0.025 220);
+	--surface: oklch(0.25 0.025 220);
+	--surface-raised: oklch(0.28 0.025 220);
+	--surface-sunken: oklch(0.19 0.025 220);
+
+	/* warm off-white: cream text on teal slate (~12:1 on canvas) */
+	--fg: oklch(0.88 0.02 90);
+	--fg-muted: oklch(0.72 0.02 95);
+	--fg-subtle: oklch(0.58 0.022 110);
+
+	--line: oklch(0.3 0.025 220);
+	--line-strong: oklch(0.38 0.025 220);
+
+	/* phosphor green, brighter on slate */
+	--accent: oklch(0.78 0.16 150);
+	--accent-hover: oklch(0.83 0.15 150);
+	--accent-fg: oklch(0.2 0.04 150);
+	--accent-soft: oklch(0.32 0.06 150);
+
+	--accent-2: oklch(0.75 0.1 200);
+	--accent-2-soft: oklch(0.32 0.05 205);
+
+	--positive: oklch(0.74 0.13 155);
+	--warning: oklch(0.75 0.12 80);
+	--danger: oklch(0.68 0.15 25);
+	--danger-soft: oklch(0.32 0.07 25);
+
+	--ring: oklch(0.78 0.16 150);
+}
+
+html {
+	color-scheme: light;
+}
+
+html.dark,
+.dark {
+	color-scheme: dark;
+}
+
+body {
+	margin: 0;
+	background-color: var(--color-canvas);
+	color: var(--color-fg);
+	font-family: var(--font-ui);
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizeLegibility;
+}
+
+/* thin, unobtrusive scrollbars — calm density */
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--color-line-strong) transparent;
+}
+*::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+*::-webkit-scrollbar-thumb {
+	background-color: var(--color-line-strong);
+	border-radius: 9999px;
+}
+*::-webkit-scrollbar-track {
+	background: transparent;
+}