@remit/ui 0.0.122 → 0.0.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.122",
+  "version": "0.0.123",
   "type": "module",
   "files": [
     "src"

package/src/components/app-shell-slotted.tsx

@@ -9,6 +9,7 @@ import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
+	WholePixelWidth,
 } from "./resizable.js";
 
 /* ------------------------------------------------------------------ */
@@ -250,7 +251,10 @@ export function AppShellSlotted({
 						minSize={29}
 						className="min-w-0"
 					>
-						{reading}
+						{/* The email inside this pane is laid out against the pane's own
+						    width, so the pane is the last place a fractional box is
+						    allowed. */}
+						<WholePixelWidth className="h-full">{reading}</WholePixelWidth>
 					</ResizablePanel>
 				</>
 			)}

package/src/components/compose-body.language.test.ts

@@ -0,0 +1,236 @@
+/**
+ * The language of a message a Dutch writer types on an English browser, all the
+ * way through the surface: the chip, the tag on the writing surface, and the
+ * dictionary the checker is opened for.
+ *
+ * The account that has never been to the language setting is the ordinary case,
+ * and what it falls back on has to be a set detection can choose inside — a set
+ * of one is detection switched off, and the message then goes out tagged `en`
+ * with every Dutch word underlined.
+ *
+ * React is imported after the jsdom globals are installed so its DOM bindings
+ * bind to jsdom's prototypes.
+ */
+
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import type {
+	act as reactAct,
+	createElement as reactCreateElement,
+} from "react";
+import type { Root, createRoot as reactCreateRoot } from "react-dom/client";
+import { defaultComposeLanguages } from "../lib/compose-language.js";
+import type { ComposeBody as ComposeBodyType } from "./compose-body.js";
+import type {
+	SpellcheckOptions,
+	SpellProvider,
+} from "./rich-text-spellcheck.js";
+
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+let act: typeof reactAct;
+let createElement: typeof reactCreateElement;
+let createRoot: typeof reactCreateRoot;
+let ComposeBody: typeof ComposeBodyType;
+
+/** What the published image stages, per `REMIT_SPELLCHECK_LANGUAGES`. */
+const BUILT = ["en", "en-GB", "nl"];
+
+/** An English browser, which is what a Dutch writer routinely reads mail on. */
+const BROWSER = ["en-US", "en"];
+
+const DUTCH = "OK nou dank je wel hoor flapsigaar";
+
+class Marks {
+	readonly ranges: Range[] = [];
+	add(range: Range): void {
+		this.ranges.push(range);
+	}
+}
+
+const recordingSpellcheck = (): {
+	options: SpellcheckOptions;
+	asked: string[];
+} => {
+	const asked: string[] = [];
+	const options: SpellcheckOptions = {
+		provider: (language) => {
+			asked.push(language);
+			const provider: SpellProvider = {
+				language,
+				onStatus: (listener) => {
+					listener({ state: "ready", language });
+					return () => {};
+				},
+				check: (request) =>
+					Promise.resolve({
+						requestId: request.requestId,
+						revision: request.revision,
+						findings: [],
+					}),
+				suggest: (request) =>
+					Promise.resolve({
+						requestId: request.requestId,
+						word: request.word,
+						suggestions: [],
+					}),
+				close: () => {},
+			};
+			return Promise.resolve(provider);
+		},
+	};
+	return { options, asked };
+};
+
+const settle = async (): Promise<void> => {
+	await act(async () => {
+		await Promise.resolve();
+	});
+	await act(async () => {
+		await Promise.resolve();
+	});
+};
+
+/** Past the detection debounce, which is what the chip waits on. */
+const detected = async (): Promise<void> => {
+	await act(async () => {
+		await new Promise((resolve) => setTimeout(resolve, 600));
+	});
+	await settle();
+};
+
+const editable = (): HTMLElement => {
+	const surface = container.querySelector<HTMLElement>(
+		"[data-testid=compose-body]",
+	);
+	if (!surface) throw new Error("the writing surface is not mounted");
+	return surface;
+};
+
+const chip = (): HTMLElement => {
+	const control = container.querySelector<HTMLElement>(
+		"[data-testid=compose-language-chip]",
+	);
+	if (!control) throw new Error("the language chip is not mounted");
+	return control;
+};
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.Node = dom.window.Node;
+	globalThis.Event = dom.window.Event;
+	globalThis.MouseEvent = dom.window.MouseEvent;
+	globalThis.DOMParser = dom.window.DOMParser;
+	globalThis.MutationObserver = dom.window.MutationObserver;
+	globalThis.Range = dom.window.Range;
+	globalThis.AbortController = dom.window.AbortController;
+	globalThis.AbortSignal = dom.window.AbortSignal;
+	globalThis.getComputedStyle = dom.window.getComputedStyle.bind(dom.window);
+	globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(
+		dom.window,
+	);
+	globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(
+		dom.window,
+	);
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	// The marks are drawn through the CSS Custom Highlight registry, which jsdom
+	// has neither half of, and without it no checker is opened at all.
+	Object.defineProperty(globalThis, "CSS", {
+		value: { highlights: new Map<string, Marks>() },
+		configurable: true,
+	});
+	Object.defineProperty(globalThis, "Highlight", {
+		value: Marks,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+
+	({ act, createElement } = await import("react"));
+	({ createRoot } = await import("react-dom/client"));
+	({ ComposeBody } = await import("./compose-body.js"));
+});
+
+beforeEach(() => {
+	container = dom.window.document.createElement("div");
+	dom.window.document.body.append(container);
+});
+
+afterEach(async () => {
+	await act(async () => {
+		root.unmount();
+	});
+	container.remove();
+});
+
+after(() => {
+	dom.window.close();
+});
+
+const mount = async (
+	text: string,
+	languages: readonly string[],
+	spellcheck?: SpellcheckOptions,
+): Promise<void> => {
+	await act(async () => {
+		root = createRoot(container);
+		root.render(
+			createElement(ComposeBody, {
+				mode: "rich",
+				onModeChange: () => undefined,
+				initialHtml: `<p>${text}</p>`,
+				initialText: text,
+				onChange: () => undefined,
+				onConversionError: () => undefined,
+				onLanguageChange: () => undefined,
+				languages,
+				spellcheck,
+			}),
+		);
+	});
+	await settle();
+};
+
+describe("the language a message is written in", () => {
+	it("reads Dutch off the body of an account that never chose a language", async () => {
+		const { options, asked } = recordingSpellcheck();
+
+		await mount(DUTCH, defaultComposeLanguages(BROWSER, BUILT), options);
+		await detected();
+
+		assert.equal(chip().dataset.language, "nl");
+		assert.equal(chip().dataset.languageSource, "detected");
+		assert.equal(chip().textContent, "NL");
+		assert.equal(editable().getAttribute("lang"), "nl");
+		assert.equal(
+			asked.at(-1),
+			"nl",
+			"the checker follows the language, so the underlines are Dutch ones",
+		);
+	});
+
+	it("stays on the account default while the body is English", async () => {
+		await mount(
+			"Thanks a lot, I will send you a new proposal tomorrow.",
+			defaultComposeLanguages(BROWSER, BUILT),
+		);
+		await detected();
+
+		assert.equal(chip().dataset.language, "en");
+		assert.equal(editable().getAttribute("lang"), "en");
+	});
+});

package/src/components/compose-body.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { defaultComposeLanguages } from "../lib/compose-language.js";
 import { ComposeBody, type ConversionFailure } from "./compose-body.js";
 import type { RichTextValue } from "./rich-text-value.js";
 
@@ -411,6 +412,31 @@ export const DutchIsDetected: Story = {
 	},
 };
 
+/**
+ * The account that has never opened the language setting, read on an English
+ * browser. Its candidate set is the browser's answer and the dictionaries this
+ * build carries — a set of one would be detection switched off, and a Dutch
+ * message would keep the English tag and the English underlines.
+ */
+export const UnconfiguredAccountStillReadsDutch: Story = {
+	name: "Dutch on an English browser, nothing configured",
+	args: {
+		initialHtml: DUTCH_DOCUMENT,
+		languages: defaultComposeLanguages(["en-US", "en"], ["en", "en-GB", "nl"]),
+	},
+	play: async ({ canvasElement }) => {
+		await waitFor(
+			async () => {
+				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+			},
+			{ timeout: 5000 },
+		);
+		await expect(
+			canvasElement.querySelector("[data-testid=compose-body]"),
+		).toHaveAttribute("lang", "nl");
+	},
+};
+
 /** Under twenty characters detection is a coin toss, so the account default stands. */
 export const TooShortHoldsTheDefault: Story = {
 	name: "Nine characters hold the default",

package/src/components/compose-form-shell.render.test.ts

@@ -45,6 +45,65 @@ describe("ComposeFormShell", () => {
 		assert.doesNotMatch(html, /pb-2/);
 	});
 
+	it("scrolls the body region when it fills the height it is given", () => {
+		const html = renderToString(
+			createElement(ComposeFormShell, {
+				layout: "fill",
+				header: createElement("div", null, "H"),
+				actionBar: createElement("div", null, "B"),
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: createElement("div", null, "BODY"),
+			}),
+		);
+		assert.match(html, /overflow-auto/);
+	});
+
+	it("scrolls nothing when it takes the height of what is written in it", () => {
+		const html = renderToString(
+			createElement(ComposeFormShell, {
+				layout: "flow",
+				header: createElement("div", null, "H"),
+				quoted: createElement("div", null, "QUOTED"),
+				actionBar: createElement("div", null, "B"),
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: createElement("div", null, "BODY"),
+			}),
+		);
+		// A surface opened as a block of a page it did not bring: a scroller here
+		// is a second track in that page's column, with the caret inside it.
+		assert.doesNotMatch(html, /overflow-/);
+		assert.doesNotMatch(html, /h-full/);
+	});
+
+	it("keeps the action bar on the bottom edge while the surface grows", () => {
+		const html = renderToString(
+			createElement(ComposeFormShell, {
+				layout: "flow",
+				header: createElement("div", null, "H"),
+				actionBar: createElement("div", null, "B"),
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: createElement("div", null, "BODY"),
+			}),
+		);
+		// A draft of a few paragraphs is taller than a phone, and the bar is the
+		// last thing in the surface: without this Send goes off the bottom as it
+		// is written.
+		assert.match(html, /sticky bottom-0/);
+	});
+
+	it("leaves the action bar in the column when the surface fills its pane", () => {
+		const html = renderToString(
+			createElement(ComposeFormShell, {
+				layout: "fill",
+				header: createElement("div", null, "H"),
+				actionBar: createElement("div", null, "B"),
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: createElement("div", null, "BODY"),
+			}),
+		);
+		assert.doesNotMatch(html, /sticky/);
+	});
+
 	it("exposes mode labels for every compose mode", () => {
 		assert.equal(composeModeLabels.new, "New Message");
 		assert.equal(composeModeLabels.reply, "Reply");

package/src/components/compose-form-shell.tsx

@@ -9,6 +9,15 @@ export const composeModeLabels: Record<ComposeMode, string> = {
 	forward: "Forward",
 };
 
+/**
+ * How the surface gets its height. `fill` takes the one its container hands it
+ * and scrolls the body inside that, so the action bar is pinned to the bottom
+ * edge — a window's shape. `flow` takes the height of what is written in it and
+ * has no scroller of its own, so the surface grows downward and whatever it
+ * sits in is the only thing that scrolls.
+ */
+export type ComposeShellLayout = "fill" | "flow";
+
 export interface ComposeFormShellProps {
 	/** Optional banner above the header (e.g. SMTP-missing notice). */
 	banner?: ReactNode;
@@ -20,17 +29,26 @@ export interface ComposeFormShellProps {
 	quoted?: ReactNode;
 	/** The ComposeActionBar. */
 	actionBar: ReactNode;
+	layout?: ComposeShellLayout;
 }
 
 /**
- * Presentational compose layout: banner / header / scrollable body+quote /
- * pinned action bar. Owns the column structure so the action bar always sits
- * at the bottom and never clips below the fold. The live form composes this
- * with its provider-driven slots; stories render it with static slots.
+ * Presentational compose layout: banner / header / body+quote / action bar.
+ *
+ * In `fill` the body region is a column so the editor can claim the space the
+ * quote and the action bar leave — a body slot shorter than the region would
+ * otherwise leave dead, unclickable canvas under it.
+ *
+ * In `flow` nothing here scrolls. A composer that is a block of the page it was
+ * opened on must not bring a second scroller into that pane: two tracks in one
+ * column, with the caret in the inner one, is the reader guessing which of them
+ * a wheel gesture belongs to.
  *
- * The body region is a column so the editor can claim the space the quote and
- * the action bar leave — a body slot shorter than the region would otherwise
- * leave dead, unclickable canvas under it.
+ * A surface that grows with the writing grows past the screen on a phone after
+ * a few paragraphs, and the action bar is the last thing in it — so in `flow`
+ * the bar rides the bottom edge of whatever scrolls the page while the surface
+ * is on it. Send is reachable at every length of draft, and lands back in the
+ * column when the end of the composer comes into view.
  */
 export function ComposeFormShell({
 	banner,
@@ -38,19 +56,27 @@ export function ComposeFormShell({
 	children,
 	quoted,
 	actionBar,
+	layout = "fill",
 }: ComposeFormShellProps) {
+	const fills = layout === "fill";
 	return (
-		<div className="flex h-full min-h-0 flex-col">
+		<div className={fills ? "flex h-full min-h-0 flex-col" : "flex flex-col"}>
 			{banner}
 			{header}
 			<div
-				className="flex min-h-0 flex-1 flex-col overflow-auto"
+				className={
+					fills ? "flex min-h-0 flex-1 flex-col overflow-auto" : "flex flex-col"
+				}
 				data-testid="compose-body-area"
 			>
 				{children}
 				{quoted && <div className="shrink-0 px-3 pb-2">{quoted}</div>}
 			</div>
-			{actionBar}
+			{fills ? (
+				actionBar
+			) : (
+				<div className="sticky bottom-0 z-10 bg-canvas">{actionBar}</div>
+			)}
 		</div>
 	);
 }

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

@@ -24,23 +24,79 @@ const FONT_STACK =
  * 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)
+ * `canvas` is the reading pane's own ground, not `surface`: whenever the app
+ * supplies the background the frame must be indistinguishable from the pane
+ * around it, or the email reads as a lighter rectangle sitting inside the pane.
+ *
+ *   --fg      light: oklch(0.3 0.025 235)  dark: oklch(0.88 0.02 90)
+ *   --canvas  light: oklch(0.96 0.015 90)  dark: oklch(0.22 0.025 220)
+ *   --accent  light: oklch(0.55 0.14 150)  dark: oklch(0.78 0.16 150)
  */
-const PLAIN_TOKENS = {
+const FRAME_TOKENS = {
 	light: {
 		fg: "oklch(0.3 0.025 235)",
-		surface: "oklch(0.975 0.012 90)",
+		canvas: "oklch(0.96 0.015 90)",
 		accent: "oklch(0.55 0.14 150)",
 	},
 	dark: {
 		fg: "oklch(0.88 0.02 90)",
-		surface: "oklch(0.25 0.025 220)",
+		canvas: "oklch(0.22 0.025 220)",
 		accent: "oklch(0.78 0.16 150)",
 	},
 } as const;
 
+/**
+ * What the mail declares about its own presentation. Both facts are read off
+ * the raw author markup by the sanitizer, and both decide whether the app
+ * supplies something or stands back:
+ *
+ * - `background` — the mail paints its own ground, so it renders as authored.
+ *   When it declares none, the app's ground is the reading pane's own colour.
+ * - `spacing` — the mail lays out its own padding or margin. When it declares
+ *   none, the app injects breathing room INSIDE the background, so the ground
+ *   still runs edge to edge and only the text is inset.
+ */
+export interface AuthorDeclarations {
+	background: boolean;
+	spacing: boolean;
+}
+
+const NOTHING_DECLARED: AuthorDeclarations = {
+	background: false,
+	spacing: false,
+};
+
+/**
+ * The inset between the email's own ground and its text, for mail that lays out
+ * none of its own. Matches the reading pane's desktop gutter, so a bare message
+ * reads with the same rhythm as the chrome above it.
+ */
+const CONTENT_INSET = "16px";
+
+/**
+ * Breathing room for a mail that brings none, painted inside the element that
+ * carries the background rather than around it. Emitted LAST in the document so
+ * it beats the layout clamp's `padding: 0` reset; `border-box` keeps the padded
+ * body inside the frame instead of pushing 32px of content past its right edge.
+ */
+export const generateContentInsetCSS = (): string =>
+	`html{padding:0}body{padding:${CONTENT_INSET};box-sizing:border-box}`;
+
+/**
+ * The document is its own scrollport. The frame is exactly as wide as the pane
+ * and is never widened to fit the mail, so content that genuinely cannot wrap —
+ * a fixed-width table, an image with its own `min-width`, a `pre` the author
+ * pinned — has to be reachable from inside the document rather than by handing
+ * the app a wider box to hold.
+ *
+ * `body` only becomes a scroll container once `html` stops being `visible`:
+ * overflow set on the body propagates to the viewport otherwise, which would put
+ * the scrollbar back on the frame itself. Pinning `html` first is what keeps the
+ * scroll where the content is.
+ */
+export const generateScrollportCSS = (): string =>
+	"html{overflow:hidden}body{overflow-x:auto}";
+
 /**
  * Detects whether a (sanitized) email opts into dark rendering — either via a
  * `prefers-color-scheme: dark` media query or an explicit `color-scheme: dark`
@@ -65,7 +121,7 @@ export const VIEWPORT_META =
  * 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;
+	const t = isDark ? FRAME_TOKENS.dark : FRAME_TOKENS.light;
 	return `
 /* Plain-email base: UI font-stack + theme-aware colors (#424) */
 html, body {
@@ -73,7 +129,7 @@ html, body {
   font-size: 14px;
   line-height: 1.6;
   color: ${t.fg};
-  background-color: ${t.surface};
+  background-color: ${t.canvas};
   margin: 0;
   padding: 0;
 }
@@ -90,48 +146,73 @@ a, a:visited {
 `;
 };
 
+const SMART_INVERT = "invert(0.92) hue-rotate(180deg)";
+const RE_INVERT_MEDIA = `img,picture,video,svg,canvas,[style*='background-image'],[background]{filter:${SMART_INVERT}}`;
+
 /**
- * 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:
+ * Framed-email base CSS, mirroring K-9 Mail's dark-reading strategy, split
+ * first on whether the mail brought a ground of its own.
+ *
+ * The mail declared one — render it as authored: white canvas in light, and in
+ * dark either the author's own dark design or the smart-invert that darkens a
+ * white-assuming email into the pane.
  *
- * - 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.
+ * The mail declared none — the app supplies the ground, and an app-supplied
+ * ground is the reading pane's own colour, so the email is one surface with the
+ * pane rather than a rectangle inside it. In dark the invert moves off `html`
+ * onto `body`: the author's colours still darken, but the canvas behind them is
+ * the pane's and is never inverted into a white-turned-charcoal slab.
  *
  * `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.
+ * than pure black/white; `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,
+	hasAuthorBackground: boolean,
 ): string => {
+	const canvas = isDark ? FRAME_TOKENS.dark.canvas : FRAME_TOKENS.light.canvas;
+	if (!hasAuthorBackground) {
+		if (!isDark)
+			return `html,body{margin:0;background-color:${canvas};color-scheme:light}`;
+		if (optsIntoDark)
+			return `html,body{margin:0;background-color:${canvas};color-scheme:dark light}`;
+		return `html{margin:0;background-color:${canvas}}body{margin:0;filter:${SMART_INVERT}}${RE_INVERT_MEDIA}`;
+	}
 	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)}";
+	if (optsIntoDark)
+		return `html,body{margin:0;background-color:${canvas};color-scheme:dark light}`;
+	return `html{margin:0;background-color:#ffffff;filter:${SMART_INVERT}}body{margin:0}${RE_INVERT_MEDIA}`;
 };
 
 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.
+ * treatment's base CSS, the (already sanitized, layout-clamped) email HTML, and
+ * last — where they outrank the clamp's own resets — the scrollport and, for
+ * mail that lays out none of its own, the content inset. This is the single
+ * place the colour / font / dark-mode / spacing decision is applied; callers
+ * pass treatment, theme and what the mail declares, never raw CSS.
  */
 export const buildEmailSrcDoc = (
 	html: string,
 	variant: EmailFrameVariant,
 	isDark: boolean,
+	declares: AuthorDeclarations = NOTHING_DECLARED,
 ): 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}`;
+	const base =
+		variant === "plain"
+			? generatePlainEmailBaseCSS(isDark)
+			: generateFramedEmailBaseCSS(
+					isDark,
+					DARK_OPT_IN_RE.test(html),
+					declares.background,
+				);
+	const inset = declares.spacing ? "" : generateContentInsetCSS();
+	return `${VIEWPORT_META}<style>${base}</style>${html}<style>${generateScrollportCSS()}${inset}</style>`;
 };