@remit/ui 0.0.122 → 0.0.124

package/src/components/message-body-view.tsx

@@ -55,6 +55,35 @@ const EmptyBody = () => (
 	</p>
 );
 
+/**
+ * The message-body region of a reading pane. The sandboxed email frame — and
+ * only it — leaves the message's gutter, so mail renders on its own ground with
+ * its own margins and no app canvas shows down either side of it (#763).
+ * Everything else in the region is app chrome (the blocked-images notice, a
+ * plain-text body, an error, the attachment list) and keeps the inset the
+ * header has.
+ *
+ * The rule lives here, next to the `message-body-frame` marker it moves, so the
+ * pane and Storybook cannot drift apart on it. The negative margins mirror the
+ * message block's own `px-2 lg:px-4`.
+ */
+export const MessageBodyRegion = ({
+	className,
+	children,
+}: {
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div
+		className={cn(
+			"[&_.message-body-frame]:-mx-2 lg:[&_.message-body-frame]:-mx-4",
+			className,
+		)}
+	>
+		{children}
+	</div>
+);
+
 /**
  * Render an email body the way the app does: sanitize the raw HTML
  * (DOMPurify + privacy/XSS scrubbing), classify it as framed (designed mail —
@@ -92,6 +121,16 @@ export const MessageBodyView = ({
 		sanitized?.hasAuthorBackground ?? false,
 	);
 
+	// Stable across renders: the frame rebuilds its srcDoc — and so reloads the
+	// iframe — whenever this changes identity.
+	const declares = useMemo(
+		() => ({
+			background: sanitized?.hasAuthorBackground ?? false,
+			spacing: sanitized?.hasAuthorSpacing ?? false,
+		}),
+		[sanitized?.hasAuthorBackground, sanitized?.hasAuthorSpacing],
+	);
+
 	const blockedImageCount = useMemo(() => {
 		if (!sanitizedHtml || allowImages) return 0;
 		return (sanitizedHtml.match(/data-blocked-src/g) || []).length;
@@ -107,46 +146,56 @@ export const MessageBodyView = ({
 
 	return (
 		<div className={cn("message-body", className)}>
-			{/* `message-body-notice` is a styling hook, not a style: a container
-			    that drops the body's horizontal inset (the mobile reading pane)
-			    uses it to give the gutter back to this notice, which is app
-			    chrome rather than part of the email. */}
+			{/* The notice keeps the container's gutter: it is app chrome, not part
+			    of the email, and only `message-body-frame` below leaves the
+			    gutter. */}
 			{blockedImageCount > 0 && (
-				<div className="message-body-notice">
-					{renderBlockedNotice?.(blockedImageCount)}
-				</div>
+				<div>{renderBlockedNotice?.(blockedImageCount)}</div>
 			)}
 
 			{sanitizedHtml ? (
 				// Email HTML renders inside a sandboxed iframe so its own CSS and any
 				// (already-DOMPurify'd) markup cannot bleed into the app chrome. The
-				// frame sizes itself to its content; its sandbox omits `allow-scripts`
-				// so even a hypothetical sanitizer escape can't execute.
-				framed ? (
-					// Full-width wrapper so a fluid newsletter fills the reading column;
-					// max-w-full + overflow-x-auto trap any residual wide content inside
-					// this box rather than dragging the page on mobile. No border,
-					// padding or background — the email renders flush (#727).
-					<div className="w-full max-w-full overflow-x-auto">
-						<IsolatedEmailFrame
-							html={sanitizedHtml}
-							variant="framed"
-							isDark={isDark}
-						/>
-					</div>
-				) : (
-					// `lg:max-w-2xl` caps the reading column on desktop; `max-w-full`
-					// keeps the box within the viewport on mobile. `overflow-x-auto`
-					// traps residual wide content INSIDE this box on a phone (#727).
-					<div className="max-w-full overflow-x-auto lg:max-w-2xl">
-						<IsolatedEmailFrame
-							html={sanitizedHtml}
-							variant={isPlain ? "plain" : "framed"}
-							isDark={isDark}
-						/>
-					</div>
-				)
+				// frame is the width of this box and never the width of the mail —
+				// content that cannot wrap scrolls inside the frame's own document —
+				// and its sandbox omits `allow-scripts` so even a hypothetical
+				// sanitizer escape can't execute.
+				//
+				// `message-body-frame` marks the box the gutter cancel moves, and it
+				// carries no width of its own: a block with both a width and a margin
+				// is over-constrained, and the browser resolves that by dropping the
+				// right margin — which left a strip of app canvas down one side of
+				// every email. The width lives on the child instead.
+				<div className="message-body-frame">
+					{framed ? (
+						// Full-width wrapper so a fluid newsletter fills the reading
+						// column. No border, padding or background — the email renders
+						// flush (#727).
+						<div className="w-full max-w-full">
+							<IsolatedEmailFrame
+								html={sanitizedHtml}
+								variant="framed"
+								isDark={isDark}
+								declares={declares}
+							/>
+						</div>
+					) : (
+						// `lg:max-w-2xl` caps the reading column on desktop; `max-w-full`
+						// keeps the box within the viewport on mobile.
+						<div className="max-w-full lg:max-w-2xl">
+							<IsolatedEmailFrame
+								html={sanitizedHtml}
+								variant={isPlain ? "plain" : "framed"}
+								isDark={isDark}
+								declares={declares}
+							/>
+						</div>
+					)}
+				</div>
 			) : text ? (
+				// Plain text is not an email document: it has no ground of its own and
+				// no layout to respect, so it keeps the message's gutter rather than
+				// running to the pane edge like the sandboxed frame does.
 				<pre className="email-text whitespace-pre-wrap text-sm leading-relaxed">
 					{text}
 				</pre>

package/src/components/mobile-reading-pane.tsx

@@ -134,8 +134,9 @@ export function MobileReadingPane({
 				style={touchHandlers ? { touchAction: "pan-y" } : undefined}
 				{...touchHandlers}
 			>
+				{/* Newest first, as on the wide pane. */}
 				{children ??
-					thread.messages.map((message) => {
+					[...thread.messages].reverse().map((message) => {
 						const bind = (handler?: (id: string) => void) =>
 							handler ? () => handler(message.id) : undefined;
 

package/src/components/reading-pane.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Paperclip, Star } from "lucide-react";
 import { useState } from "react";
+import { expect } from "storybook/test";
 import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
 import {
 	type AttachmentDownloadState,
@@ -42,7 +43,7 @@ const thread: ThreadData = {
 };
 
 // A designed (framed) newsletter so the Screens story exercises the REAL
-// renderer — sanitized + sandboxed iframe, flush layout, #727 scale-to-fit —
+// renderer — sanitized + sandboxed iframe, flush layout, in-document overflow —
 // rather than a plain inline paragraph (#940). The fixed 600px table is the
 // kind of markup that overflowed a phone before #727.
 const newsletterThread: ThreadData = {
@@ -72,6 +73,40 @@ const newsletterThread: ThreadData = {
 	],
 };
 
+// Formatted HTML mail that declares no background, no padding and no width —
+// the ordinary case. The app supplies the ground and the breathing room, so the
+// email must read as one surface with the pane rather than a card inside it: no
+// border, no accent line down the side, no gutter of app canvas beside it.
+const bareThread: ThreadData = {
+	subject: "Repetitie donderdag",
+	messages: [
+		{
+			id: "bare-1",
+			fromName: "Ingrid Bakker",
+			fromEmail: "ingrid@koor.example",
+			toLabel: "you",
+			dateLabel: "Today, 11:24",
+			snippet: "De repetitie van donderdag gaat door…",
+			expanded: true,
+			bodyHtml: `<div>
+	<p>Hoi allemaal,</p>
+	<p>De repetitie van donderdag gaat door. We beginnen met het nieuwe stuk en
+	repeteren om 20.00 uur verder aan het programma voor het najaarsconcert.</p>
+	<p><b>Neem je eigen partituur mee</b> — er zijn geen reservekopie&euml;n.</p>
+	<p>Groeten,<br>Ingrid</p>
+</div>`,
+		},
+	],
+};
+
+const PLAIN_TEXT_BODY = `Hoi allemaal,
+
+De repetitie van donderdag gaat door. We beginnen met het nieuwe stuk en
+repeteren om 20.00 uur verder aan het programma voor het najaarsconcert.
+
+Groeten,
+Ingrid`;
+
 const meta: Meta<typeof ReadingPane> = {
 	title: "Screens/Kit/ReadingPane",
 	component: ReadingPane,
@@ -89,9 +124,29 @@ type Story = StoryObj<typeof ReadingPane>;
 export const WithThread: Story = { args: { thread } };
 
 /** A designed newsletter rendered through the real sanitize → sandboxed-iframe
- *  pipeline — the same rendering the live app shows (#940). */
+ *  pipeline — the same rendering the live app shows (#940). It brings its own
+ *  background and its own 24px padding and keeps both, undoubled. */
 export const Newsletter: Story = { args: { thread: newsletterThread } };
 
+/** The same newsletter on the dark pane: darkened as authored, not repainted. */
+export const NewsletterDark: Story = {
+	args: { thread: newsletterThread },
+	parameters: { theme: "dark" },
+};
+
+/** Ordinary formatted mail that declares nothing of its own. The sender header
+ *  keeps its inset; below it the email is one surface with the pane — no card
+ *  edge, no accent line, no app gutter beside it — with the breathing room
+ *  inside the email's own ground. */
+export const BareHtmlMail: Story = { args: { thread: bareThread } };
+
+/** The same on the dark pane, where a lighter app-supplied ground used to show
+ *  as a rectangle seamed into the pane. */
+export const BareHtmlMailDark: Story = {
+	args: { thread: bareThread },
+	parameters: { theme: "dark" },
+};
+
 export const Empty: Story = { args: { thread: undefined } };
 
 export const WithIntelligenceToggle: Story = {
@@ -252,7 +307,7 @@ const ThreadAttachments = () => {
 
 	return (
 		<AttachmentList
-			className="mt-4 px-2 lg:px-0"
+			className="mt-4"
 			attachments={rows}
 			onDownload={(attachmentId) => {
 				setStatus(attachmentId, { status: "downloading" });
@@ -293,3 +348,83 @@ export const ExpandedRowWithAttachments: StoryObj<typeof ExpandedMessage> = {
 		</div>
 	),
 };
+
+/**
+ * The email sits square in the pane: the frame leaves the message gutter on
+ * both sides, not just the left.
+ *
+ * A block box cannot have both a width and two margins — the browser resolves
+ * the over-constraint by throwing the right margin away — so a gutter cancel on
+ * a `w-full` box moved the mail left and left a strip of app canvas down its
+ * right-hand side. Bare mail hides that (it paints the pane's own colour); a
+ * newsletter with a ground of its own shows it plainly, which is why this
+ * measures a framed message.
+ */
+const framedRow: ThreadMessageData = {
+	...newsletterThread.messages[0],
+	id: "symmetry-1",
+};
+
+const paneGutters = (canvasElement: HTMLElement) => {
+	const pane = canvasElement.querySelector<HTMLElement>("[data-pane]");
+	const frame = pane?.querySelector<HTMLElement>(".message-body-frame");
+	if (!pane || !frame) throw new Error("no framed message body in the pane");
+	const paneBox = pane.getBoundingClientRect();
+	const frameBox = frame.getBoundingClientRect();
+	return {
+		left: frameBox.left - paneBox.left,
+		right: paneBox.right - frameBox.right,
+	};
+};
+
+const assertSymmetric = async (canvasElement: HTMLElement) => {
+	const { left, right } = paneGutters(canvasElement);
+	await expect(Math.abs(left - right)).toBeLessThan(1);
+	await expect(Math.abs(left)).toBeLessThan(1);
+};
+
+/** A designed newsletter on a desktop reading column. */
+export const FramedBodySitsSquareInThePane: StoryObj<typeof ExpandedMessage> = {
+	render: () => (
+		<div data-pane className="w-[900px] bg-canvas">
+			<ExpandedMessage message={framedRow} />
+		</div>
+	),
+	play: async ({ canvasElement }) => {
+		await assertSymmetric(canvasElement);
+	},
+};
+
+/** The same at a phone width, where the gutter is half as wide and a lost
+ *  right margin is half the pane's breathing room. */
+export const FramedBodySitsSquareOnAPhone: StoryObj<typeof ExpandedMessage> = {
+	render: () => (
+		<div data-pane className="w-[390px] bg-canvas">
+			<ExpandedMessage message={framedRow} />
+		</div>
+	),
+	play: async ({ canvasElement }) => {
+		await assertSymmetric(canvasElement);
+	},
+};
+
+/**
+ * A message with no HTML part. The two body paths side by side: an email
+ * document runs flush on its own ground, while plain text — which has neither —
+ * keeps the message gutter and stays off the pane edge.
+ */
+export const PlainTextMessage: StoryObj<typeof ExpandedMessage> = {
+	render: () => (
+		<div className="max-w-3xl bg-canvas">
+			<ExpandedMessage
+				message={{ ...row, fromName: "Ingrid Bakker" }}
+				to={<>to the choir list</>}
+				body={
+					<div className="mt-3">
+						<MessageBodyView text={PLAIN_TEXT_BODY} />
+					</div>
+				}
+			/>
+		</div>
+	),
+};

package/src/components/reading-pane.tsx

@@ -6,7 +6,7 @@ import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
 import { IntelligenceToggle } from "./intelligence-toggle.js";
 import { MailActionToolbar } from "./mail-action-toolbar.js";
-import { MessageBodyView } from "./message-body-view.js";
+import { MessageBodyRegion, MessageBodyView } from "./message-body-view.js";
 import { ReadingPaneEmpty } from "./reading-pane-empty.js";
 
 /* ------------------------------------------------------------------ */
@@ -133,6 +133,11 @@ export function ExpandedMessage({
 	warning?: string;
 	/** Collapse handler on the sender block. Omit for a static row. */
 	onHeaderClick?: () => void;
+	/**
+	 * Keyboard cursor. Rings the sender row, the way it rings a collapsed row —
+	 * never the message, which would draw an accent line down both sides of the
+	 * email and read as a card edge around mail that carries its own.
+	 */
 	isFocused?: boolean;
 	/** Rendered after the sender name (e.g. a trusted-sender badge). */
 	senderBadge?: ReactNode;
@@ -177,13 +182,17 @@ export function ExpandedMessage({
 	);
 
 	return (
-		<div
-			className={cn(
-				"px-2 py-3 lg:px-4",
-				isFocused && "ring-1 ring-inset ring-accent/30",
-			)}
-		>
-			<div className="flex items-start gap-3">
+		<div className="px-2 py-3 lg:px-4">
+			{/* The cursor rings the sender row, not the message. Around the message
+			    it drew an accent line down both sides of every open email, which
+			    reads as a card edge on mail that brings its own. The negative
+			    margins hold the row exactly where it sits unringed. */}
+			<div
+				className={cn(
+					"-mx-2 -my-1 flex items-start gap-3 rounded-sm px-2 py-1",
+					isFocused && "ring-1 ring-inset ring-accent/30",
+				)}
+			>
 				{/* The chevron is the disclosure control, not a picture of one: it is
 				    what a reader aims at to put a message away, so it carries the
 				    collapse itself rather than sitting beside the sender block that
@@ -240,12 +249,7 @@ export function ExpandedMessage({
 			    exactly what the app renders, not a divergent inline-HTML mock
 			    (#940). `framed` fixtures map to the newsletter treatment (author
 			    colors preserved); the rest render plain. */}
-			{/* On a phone the email runs edge to edge: the negative margin cancels
-			    this block's `px-2` so no app canvas shows beside the body and the
-			    email doesn't read as sitting in a tinted frame (#763). The header
-			    keeps its inset. The blocked-images notice is app chrome, not part
-			    of the email, so it takes the gutter back. Desktop is unchanged. */}
-			<div className="-mx-2 [&_.message-body-notice]:px-2 lg:mx-0 lg:[&_.message-body-notice]:px-0">
+			<MessageBodyRegion>
 				{body ?? (
 					<MessageBodyView
 						className="mt-3"
@@ -254,7 +258,7 @@ export function ExpandedMessage({
 						allowImages
 					/>
 				)}
-			</div>
+			</MessageBodyRegion>
 		</div>
 	);
 }
@@ -332,17 +336,22 @@ export function ReadingPane({
 						</p>
 					</div>
 
-					{thread.messages.map((message) =>
-						message.expanded ? (
-							<ExpandedMessage
-								key={message.id}
-								message={message}
-								warning={thread.warning}
-							/>
-						) : (
-							<CollapsedMessage key={message.id} message={message} />
-						),
-					)}
+					{/* Newest first. A thread arrives in the order it happened; the
+					    turn a reader opened it for is the last one, and reading it
+					    should not cost a scroll past everything that led there. */}
+					{[...thread.messages]
+						.reverse()
+						.map((message) =>
+							message.expanded ? (
+								<ExpandedMessage
+									key={message.id}
+									message={message}
+									warning={thread.warning}
+								/>
+							) : (
+								<CollapsedMessage key={message.id} message={message} />
+							),
+						)}
 				</div>
 			)}
 		</article>

package/src/components/resizable.tsx

@@ -1,3 +1,4 @@
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import {
 	Panel,
 	PanelGroup,
@@ -52,4 +53,45 @@ export function ResizableHandle({
 	);
 }
 
+/**
+ * Gives everything inside it a whole-pixel box. `react-resizable-panels` sizes a
+ * pane with a fractional `flexGrow`, so a pane lands on 712.5px and every box
+ * under it inherits the fraction — and a fraction is where the DOM's whole-pixel
+ * measurements start disagreeing with each other. Floor rather than round, so
+ * the box is never a hair wider than the pane holding it.
+ */
+export function WholePixelWidth({
+	className,
+	children,
+}: {
+	className?: string;
+	children: ReactNode;
+}) {
+	const ref = useRef<HTMLDivElement>(null);
+	const [width, setWidth] = useState<number | null>(null);
+
+	useEffect(() => {
+		const pane = ref.current?.parentElement;
+		if (!pane || typeof ResizeObserver === "undefined") return;
+		const measure = () => {
+			const next = Math.floor(pane.getBoundingClientRect().width);
+			setWidth((prev) => (prev === next ? prev : next));
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(pane);
+		return () => observer.disconnect();
+	}, []);
+
+	return (
+		<div
+			ref={ref}
+			className={className}
+			style={width === null ? undefined : { width: `${width}px` }}
+		>
+			{children}
+		</div>
+	);
+}
+
 export type { PanelGroupProps, PanelProps, PanelResizeHandleProps };

package/src/components/slide-panel.tsx

@@ -54,7 +54,7 @@ export function SlidePanel({
 
 			<div
 				className={cn(
-					"safe-area-frame fixed top-0 right-0 z-50 h-full w-full border-l border-line bg-canvas shadow-xl sm:w-[400px] sm:max-w-[90vw]",
+					"safe-area-frame fixed top-0 right-0 z-50 flex h-full w-full flex-col border-l border-line bg-canvas shadow-xl sm:w-[400px] sm:max-w-[90vw]",
 					"transform transition-transform duration-200 ease-out",
 					isOpen ? "translate-x-0" : "pointer-events-none translate-x-full",
 				)}
@@ -64,7 +64,7 @@ export function SlidePanel({
 				inert={!isOpen}
 				aria-labelledby="slide-panel-title"
 			>
-				<div className="flex h-14 items-center justify-between border-b border-line px-4">
+				<div className="flex h-14 shrink-0 items-center justify-between border-b border-line px-4">
 					<h2 id="slide-panel-title" className="font-semibold">
 						{title}
 					</h2>
@@ -78,7 +78,11 @@ export function SlidePanel({
 					</button>
 				</div>
 
-				<div className="flex h-[calc(100%-3.5rem)] flex-col">
+				{/* The body takes what the header leaves, from the layout rather than
+				    from arithmetic over the header's height: a computed height puts
+				    the box on a fractional pixel and drifts the moment the header
+				    does. */}
+				<div className="flex min-h-0 flex-1 flex-col">
 					<div className="flex-1 overflow-auto p-4">{children}</div>
 					{footer && (
 						<div className="flex justify-end gap-3 border-t border-line bg-canvas p-4">

package/src/index.ts

@@ -179,6 +179,7 @@ export {
 	ComposeFormShell,
 	type ComposeFormShellProps,
 	type ComposeMode,
+	type ComposeShellLayout,
 	composeModeLabels,
 } from "./components/compose-form-shell.js";
 export {
@@ -218,7 +219,10 @@ export {
 	DialogBackdrop,
 	type DialogBackdropProps,
 } from "./components/dialog-backdrop.js";
-export type { EmailFrameVariant } from "./components/email-frame-css.js";
+export type {
+	AuthorDeclarations,
+	EmailFrameVariant,
+} from "./components/email-frame-css.js";
 export {
 	EventDetail,
 	type EventDetailProps,
@@ -408,6 +412,7 @@ export {
 } from "./components/mail-header.js";
 export {
 	type EmailRenderCategory,
+	MessageBodyRegion,
 	MessageBodyView,
 	type MessageBodyViewProps,
 } from "./components/message-body-view.js";
@@ -569,6 +574,7 @@ export {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
+	WholePixelWidth,
 } from "./components/resizable.js";
 export {
 	EMPTY_RICH_TEXT,
@@ -819,6 +825,7 @@ export {
 export {
 	createEmailSanitizer,
 	detectAuthorBackground,
+	detectAuthorSpacing,
 	type SanitizedEmail,
 	type SanitizeOptions,
 	sanitizeInlineStyle,

package/src/lib/compose-language.test.ts

@@ -13,6 +13,9 @@ import {
 	wrapWithLanguage,
 } from "./compose-language.js";
 
+/** The dictionaries the published image stages, per `REMIT_SPELLCHECK_LANGUAGES`. */
+const BUILT = ["en", "en-GB", "nl"];
+
 before(() => {
 	const dom = new JSDOM("");
 	globalThis.DOMParser = dom.window.DOMParser;
@@ -66,6 +69,20 @@ describe("defaultComposeLanguages", () => {
 	it("falls back to English when the browser offers nothing usable", () => {
 		assert.deepEqual(defaultComposeLanguages([]), ["en"]);
 	});
+
+	it("offers what the build can spellcheck, not the browser alone", () => {
+		assert.deepEqual(defaultComposeLanguages(["en-US", "en"], BUILT), [
+			"en",
+			"nl",
+		]);
+	});
+
+	it("keeps the browser's own language first, so it stays the default", () => {
+		assert.deepEqual(defaultComposeLanguages(["nl-NL", "nl"], BUILT), [
+			"nl",
+			"en",
+		]);
+	});
 });
 
 describe("browserSpellcheckHelp", () => {

package/src/lib/compose-language.ts

@@ -10,6 +10,8 @@
  * message the recipient's client can read the language off. See issue #686.
  */
 
+import { spellcheckLanguages } from "../components/rich-text-spellcheck-languages.js";
+
 /**
  * A language the composer offers, and the ISO 639-3 code `franc-min` knows it
  * by. The two are separate alphabets: the tag is what goes on the document and
@@ -111,16 +113,25 @@ export const languageLabel = (tag: string): string => {
 };
 
 /**
- * The languages an account writes in when it has not said. The browser already
- * holds an ordered answer; `en` follows it, so a browser set to one language
- * nothing can detect still leaves the chip something to show.
+ * The languages an account writes in when it has not said: the browser's own
+ * ordered answer first, then the dictionaries this build carries, then `en`.
+ *
+ * The dictionaries are in there because the browser routinely names one
+ * language and the writer uses another — Dutch mail written on an English
+ * browser is the ordinary case, not the exception. A candidate set of one turns
+ * detection off, since there is nothing to choose between, and every message
+ * then keeps the default tag and is checked against the wrong dictionary. What
+ * the deployment staged is the other statement about which languages are
+ * written here, and it is a short list, which is what keeps detection accurate.
  */
 export const defaultComposeLanguages = (
 	locales: readonly string[],
+	built: readonly string[] = spellcheckLanguages(),
 ): string[] => {
-	const known = locales.filter((locale) => detectionCodeFor(locale) !== null);
-	const tags = known.map(primaryLanguageSubtag);
-	const unique = [...new Set(tags)];
+	const known = [...locales, ...built].filter(
+		(locale) => detectionCodeFor(locale) !== null,
+	);
+	const unique = [...new Set(known.map(primaryLanguageSubtag))];
 	if (!unique.includes("en")) unique.push("en");
 	return unique;
 };

package/src/lib/detect-compose-language.test.ts

@@ -5,6 +5,7 @@
  */
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import { defaultComposeLanguages } from "./compose-language.js";
 import { detectComposeLanguage } from "./detect-compose-language.js";
 
 const DUTCH =
@@ -45,6 +46,23 @@ describe("detectComposeLanguage", () => {
 		assert.equal(detectComposeLanguage(DUTCH, ["nl", "ja", "en"]), "nl");
 	});
 
+	it("reads a Dutch line written on an English browser", () => {
+		// The account has never been to the language setting, and the browser it is
+		// read on says English and nothing else. A candidate set built from that
+		// alone has nothing to choose between, and every Dutch message goes out
+		// tagged `en` with the English dictionary underlining all of it.
+		const candidates = defaultComposeLanguages(
+			["en-US", "en"],
+			["en", "en-GB", "nl"],
+		);
+		assert.equal(
+			detectComposeLanguage("OK nou dank je wel hoor flapsigaar", candidates),
+			"nl",
+		);
+		assert.equal(detectComposeLanguage(DUTCH, candidates), "nl");
+		assert.equal(detectComposeLanguage(ENGLISH, candidates), "en");
+	});
+
 	it("resolves a regional tag through its language", () => {
 		assert.equal(detectComposeLanguage(ENGLISH, ["nl", "en-GB"]), "en-GB");
 	});