@remit/ui 0.0.1

package/src/components/dialog.tsx

@@ -0,0 +1,104 @@
+import { type ReactNode, useCallback, useEffect, useRef } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface DialogProps {
+	open: boolean;
+	onClose: () => void;
+	title: string;
+	/** Unique ID for aria-labelledby. Defaults to "dialog-title". */
+	titleId?: string;
+	children?: ReactNode;
+	className?: string;
+	/**
+	 * Anchor. `"center"` (default) is the centered modal card. `"left"`/`"right"`
+	 * are full-height slide-over panels pinned to that edge — same backdrop,
+	 * escape and click-away dismissal. `"left"` is the nav drawer at narrow
+	 * widths; `"right"` is the mobile intelligence drawer (#854).
+	 */
+	anchor?: "center" | "left" | "right";
+}
+
+export function Dialog({
+	open,
+	onClose,
+	title,
+	titleId = "dialog-title",
+	children,
+	className,
+	anchor = "center",
+}: DialogProps) {
+	const dialogRef = useRef<HTMLDivElement>(null);
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				onClose();
+			}
+		},
+		[onClose],
+	);
+
+	useEffect(() => {
+		if (!open) return;
+		window.addEventListener("keydown", handleKeyDown, true);
+		return () => window.removeEventListener("keydown", handleKeyDown, true);
+	}, [open, handleKeyDown]);
+
+	useEffect(() => {
+		if (!open) return;
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		const focusable = dialog.querySelectorAll<HTMLElement>(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+		);
+		focusable[0]?.focus();
+	}, [open]);
+
+	if (!open) return null;
+
+	const isLeft = anchor === "left";
+	const isRight = anchor === "right";
+	const isSlideOver = isLeft || isRight;
+
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: outer overlay closes dialog on click; role=presentation lets inner role=dialog own the AT semantics
+		<div
+			className={cn(
+				"fixed inset-0 z-50 flex",
+				isLeft
+					? "items-stretch justify-start"
+					: isRight
+						? "items-stretch justify-end"
+						: "items-center justify-center px-4",
+			)}
+			role="presentation"
+			onClick={onClose}
+		>
+			<div className={cn("absolute inset-0", !isSlideOver && "bg-canvas/80")} />
+			<div
+				ref={dialogRef}
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby={titleId}
+				className={cn(
+					"relative z-10 overflow-hidden border-line bg-surface shadow-xl",
+					isLeft
+						? "h-full w-72 max-w-[85vw] border-r"
+						: isRight
+							? "h-full w-[80vw] max-w-[320px] border-l"
+							: "w-full max-w-lg rounded-md border",
+					className,
+				)}
+				onClick={(e) => e.stopPropagation()}
+				onKeyDown={(e) => e.stopPropagation()}
+			>
+				<h2 id={titleId} className="sr-only">
+					{title}
+				</h2>
+				{children}
+			</div>
+		</div>
+	);
+}

package/src/components/email-frame-css.ts

@@ -0,0 +1,137 @@
+/**
+ * Base CSS injected into the isolated email iframe, by treatment.
+ *
+ * `IsolatedEmailFrame` owns the full srcDoc, so the "make an untrusted email
+ * readable + theme-aware" decision lives here in one place rather than spread
+ * across the call site. The sanitizer still prepends its own layout-clamp block
+ * (width/wrap rules) ahead of the email body; this module supplies the colour /
+ * font / dark-mode canvas that sits in front of it.
+ *
+ * Two treatments:
+ *
+ * - `plain` — weakly-marked / personal mail with no author background. Gets the
+ *   UI sans-serif + theme-aware colours so black-text-on-dark is readable.
+ * - `framed` — designed mail (newsletter / marketing / author background). Its
+ *   own colours are preserved; in dark mode it is darkened via a K-9-style
+ *   smart-invert unless it opts into its own dark design.
+ */
+
+const FONT_STACK =
+	'"Geist Variable", "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+
+/**
+ * Resolved theme tokens, inlined because CSS custom properties do not cross the
+ * iframe boundary. Keep in sync with `tokens.css`; the unit test pins these
+ * resolved values so token drift fails loudly.
+ *
+ *   --fg       light: oklch(0.3 0.025 235)   dark: oklch(0.88 0.02 90)
+ *   --surface  light: oklch(0.975 0.012 90)  dark: oklch(0.25 0.025 220)
+ *   --accent   light: oklch(0.55 0.14 150)   dark: oklch(0.78 0.16 150)
+ */
+const PLAIN_TOKENS = {
+	light: {
+		fg: "oklch(0.3 0.025 235)",
+		surface: "oklch(0.975 0.012 90)",
+		accent: "oklch(0.55 0.14 150)",
+	},
+	dark: {
+		fg: "oklch(0.88 0.02 90)",
+		surface: "oklch(0.25 0.025 220)",
+		accent: "oklch(0.78 0.16 150)",
+	},
+} as const;
+
+/**
+ * Detects whether a (sanitized) email opts into dark rendering — either via a
+ * `prefers-color-scheme: dark` media query or an explicit `color-scheme: dark`
+ * declaration. Whitespace inside the value is tolerated. When present we honour
+ * the author's intent instead of forcing white or smart-inverting.
+ */
+export const DARK_OPT_IN_RE =
+	/prefers-color-scheme\s*:\s*dark|color-scheme\s*:\s*[^;}"']*\bdark\b/i;
+
+/**
+ * Pin the iframe's layout viewport to its own width so author `width=device-
+ * width` assumptions resolve to the frame, and a wide fixed-layout email lays
+ * out against the frame instead of a desktop-default 980px viewport that would
+ * zoom the whole document out on a phone (#727).
+ */
+export const VIEWPORT_META =
+	'<meta name="viewport" content="width=device-width, initial-scale=1">';
+
+/**
+ * Plain-email base CSS: UI font-stack + theme-aware colours. Strips author
+ * unreadable text colours (`color:#000` on dark) and element backgrounds while
+ * letting font-size / weight variations through, and re-themes links.
+ */
+export const generatePlainEmailBaseCSS = (isDark: boolean): string => {
+	const t = isDark ? PLAIN_TOKENS.dark : PLAIN_TOKENS.light;
+	return `
+/* Plain-email base: UI font-stack + theme-aware colors (#424) */
+html, body {
+  font-family: ${FONT_STACK};
+  font-size: 14px;
+  line-height: 1.6;
+  color: ${t.fg};
+  background-color: ${t.surface};
+  margin: 0;
+  padding: 0;
+}
+/* Strip author unreadable text colors and element backgrounds, scoped to body
+   descendants so the themed html/body surface above survives this reset. */
+body * {
+  color: inherit !important;
+  background-color: transparent !important;
+}
+a, a:visited {
+  color: ${t.accent} !important;
+  text-decoration: underline;
+}
+`;
+};
+
+/**
+ * Framed-email base CSS, mirroring K-9 Mail's dark-reading strategy. Three
+ * cases, driven by app theme + the email's own dark opt-in:
+ *
+ * - App light theme → render as authored on a white canvas (light scheme).
+ * - App dark theme + email opts into its own dark → render as authored.
+ * - App dark theme, no opt-in → CSS smart-invert to darken the email into the
+ *   dark pane: soft charcoal background, light-grey text.
+ *
+ * `invert(0.92)` (not 1.0) lands on soft charcoal + light-grey like K-9 rather
+ * than pure black/white; the white `html` background gives the invert a light
+ * source; `hue-rotate(180deg)` keeps blues blue (links); the media-element rule
+ * re-inverts images / logos / photos back to their natural colours. No
+ * `!important` — this is a default canvas, so the email's own background still
+ * composes. The margin reset zeroes the UA body margin.
+ */
+export const generateFramedEmailBaseCSS = (
+	isDark: boolean,
+	optsIntoDark: boolean,
+): string => {
+	if (!isDark)
+		return "html,body{margin:0;background-color:#ffffff;color-scheme:light}";
+	if (optsIntoDark) return "html,body{margin:0;color-scheme:dark light}";
+	return "html{margin:0;background-color:#ffffff;filter:invert(0.92) hue-rotate(180deg)}body{margin:0}img,picture,video,svg,canvas,[style*='background-image'],[background]{filter:invert(0.92) hue-rotate(180deg)}";
+};
+
+export type EmailFrameVariant = "plain" | "framed";
+
+/**
+ * Assemble the full srcDoc for an isolated email frame: the viewport meta, the
+ * treatment's base CSS, then the (already sanitized, layout-clamped) email
+ * HTML. This is the single place the colour / font / dark-mode decision is
+ * applied — callers pass treatment + theme, never raw CSS.
+ */
+export const buildEmailSrcDoc = (
+	html: string,
+	variant: EmailFrameVariant,
+	isDark: boolean,
+): string => {
+	if (variant === "plain") {
+		return `${VIEWPORT_META}<style>${generatePlainEmailBaseCSS(isDark)}</style>${html}`;
+	}
+	const optsIntoDark = DARK_OPT_IN_RE.test(html);
+	return `${VIEWPORT_META}<style>${generateFramedEmailBaseCSS(isDark, optsIntoDark)}</style>${html}`;
+};

package/src/components/field-label.render.test.ts

@@ -0,0 +1,16 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { FieldLabel } from "./field-label.js";
+
+describe("FieldLabel", () => {
+	it("renders a real label element wired to a control via htmlFor", () => {
+		const html = renderToString(
+			createElement(FieldLabel, { htmlFor: "host" }, "Host"),
+		);
+		assert.match(html, /<label/);
+		assert.match(html, /for="host"/);
+		assert.match(html, />Host</);
+	});
+});

package/src/components/field-label.tsx

@@ -0,0 +1,19 @@
+import type { LabelHTMLAttributes } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+	/** Associates the label with its control via the control's id. */
+	htmlFor: string;
+}
+
+export function FieldLabel({ className, children, ...props }: FieldLabelProps) {
+	return (
+		// biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is always provided via the required props spread
+		<label
+			className={cn("mb-1 block text-xs font-medium text-fg-muted", className)}
+			{...props}
+		>
+			{children}
+		</label>
+	);
+}

package/src/components/filter-sheet.render.test.ts

@@ -0,0 +1,76 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { FilterSheet, type FilterSheetProps } from "./filter-sheet.js";
+
+const categories = [
+	{ id: "all", label: "All", tone: "neutral" as const },
+	{ id: "personal", label: "Personal", tone: "positive" as const },
+];
+
+const filters = [
+	{ id: "unread", label: "Unread" },
+	{ id: "today", label: "Today" },
+];
+
+const sources = [
+	{ id: "all", label: "All", active: true },
+	{ id: "work", label: "work@acme.com", count: 12 },
+];
+
+function render(overrides: Partial<FilterSheetProps> = {}): string {
+	return renderToString(
+		createElement(FilterSheet, {
+			categories,
+			filters,
+			sources,
+			selectedCategory: "all",
+			activeFilters: new Set<string>(),
+			onSelectCategory: () => undefined,
+			onSelectSource: () => undefined,
+			onToggleFilter: () => undefined,
+			onClear: () => undefined,
+			onExpandedChange: () => undefined,
+			...overrides,
+		}),
+	);
+}
+
+describe("FilterSheet", () => {
+	it("collapsed shows the Filters bar and an expand caret", () => {
+		const html = render({ expanded: false });
+		assert.match(html, /Filters/);
+		assert.match(html, /aria-label="Expand filters"/);
+		assert.match(html, /aria-expanded="false"/);
+	});
+
+	it("collapsed does not render the filter rows", () => {
+		const html = render({ expanded: false });
+		assert.doesNotMatch(html, /work@acme\.com/);
+		assert.doesNotMatch(html, /Today/);
+	});
+
+	it("expanded renders category, filter, and source rows", () => {
+		const html = render({ expanded: true });
+		assert.match(html, /aria-label="Collapse filters"/);
+		assert.match(html, /Personal/);
+		assert.match(html, /Today/);
+		assert.match(html, /work@acme\.com/);
+	});
+
+	it("renders a clear control when a filter is active", () => {
+		const html = render({
+			expanded: true,
+			activeFilters: new Set(["unread"]),
+		});
+		assert.match(html, /aria-label="Clear filters"/);
+	});
+
+	it("is flat: no overlay, scrim, shadow, or rounded-corner chrome", () => {
+		const html = render({ expanded: true });
+		assert.doesNotMatch(html, /shadow-/);
+		assert.doesNotMatch(html, /rounded-b-2xl/);
+		assert.doesNotMatch(html, /role="slider"/);
+	});
+});

package/src/components/filter-sheet.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+	FilterSheet,
+	type FilterSheetCategory,
+	type FilterSheetFilter,
+	type FilterSheetSource,
+} from "./filter-sheet.js";
+
+const CATEGORIES: FilterSheetCategory[] = [
+	{ id: "all", label: "All", tone: "neutral" },
+	{ id: "personal", label: "Personal", tone: "positive" },
+	{ id: "newsletters", label: "Newsletters", tone: "accent" },
+	{ id: "marketing", label: "Marketing", tone: "warning" },
+	{ id: "automated", label: "Automated", tone: "neutral" },
+	{ id: "transactional", label: "Transactional", tone: "danger" },
+];
+
+const FILTERS: FilterSheetFilter[] = [
+	{ id: "unread", label: "Unread" },
+	{ id: "attachment", label: "Has attachment" },
+	{ id: "contacts", label: "From contacts" },
+	{ id: "today", label: "Today" },
+];
+
+const SOURCES: FilterSheetSource[] = [
+	{ id: "all", label: "All", active: true },
+	{ id: "work", label: "work@acme.com", count: 12 },
+	{ id: "personal", label: "me@home.net", count: 3 },
+];
+
+const meta: Meta<typeof FilterSheet> = {
+	title: "FilterSheet",
+	component: FilterSheet,
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof FilterSheet>;
+
+function SampleList() {
+	return (
+		<ul className="divide-y divide-line">
+			{Array.from({ length: 12 }, (_, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: list is static, no stable id
+				<li key={i} className="px-row-inset py-3 text-sm text-fg-muted">
+					Message {i + 1}
+				</li>
+			))}
+		</ul>
+	);
+}
+
+function ControlledShell({
+	initialCategory = "all",
+	initialFilters = new Set<string>(),
+	initialExpanded = true,
+	initialSource = "all",
+	withSources = true,
+	singleAccount = false,
+	sourcesNote,
+}: {
+	initialCategory?: string;
+	initialFilters?: Set<string>;
+	initialExpanded?: boolean;
+	initialSource?: string;
+	withSources?: boolean;
+	singleAccount?: boolean;
+	sourcesNote?: string;
+}) {
+	const [category, setCategory] = useState(initialCategory);
+	const [activeFilters, setActiveFilters] =
+		useState<Set<string>>(initialFilters);
+	const [expanded, setExpanded] = useState(initialExpanded);
+	const [source, setSource] = useState(initialSource);
+
+	const sourcePool = singleAccount ? SOURCES.slice(0, 1) : SOURCES;
+	const sources = withSources
+		? sourcePool.map((s) => ({ ...s, active: s.id === source }))
+		: undefined;
+
+	return (
+		<div className="h-[600px] w-[390px]">
+			<FilterSheet
+				categories={CATEGORIES}
+				filters={FILTERS}
+				sources={sources}
+				sourcesNote={sourcesNote}
+				selectedCategory={category}
+				activeFilters={activeFilters}
+				expanded={expanded}
+				onSelectCategory={setCategory}
+				onSelectSource={setSource}
+				onToggleFilter={(id) =>
+					setActiveFilters((prev) => {
+						const next = new Set(prev);
+						if (next.has(id)) next.delete(id);
+						else next.add(id);
+						return next;
+					})
+				}
+				onClear={() => {
+					setCategory("all");
+					setActiveFilters(new Set());
+				}}
+				onExpandedChange={setExpanded}
+			>
+				<SampleList />
+			</FilterSheet>
+		</div>
+	);
+}
+
+export const Expanded: Story = {
+	render: () => <ControlledShell initialExpanded={true} />,
+};
+
+export const CollapsedWithActiveFilters: Story = {
+	render: () => (
+		<ControlledShell
+			initialExpanded={false}
+			initialCategory="personal"
+			initialFilters={new Set(["unread", "today"])}
+		/>
+	),
+};
+
+export const CollapsedEmpty: Story = {
+	render: () => <ControlledShell initialExpanded={false} />,
+};
+
+export const ExpandedSourceSelected: Story = {
+	render: () => <ControlledShell initialSource="work" sourcesNote="+2 muted" />,
+};
+
+export const CollapsedWithSourceSelected: Story = {
+	render: () => (
+		<ControlledShell initialExpanded={false} initialSource="work" />
+	),
+};
+
+export const SingleAccount: Story = {
+	render: () => <ControlledShell singleAccount />,
+};