@remit/ui 0.0.99 → 0.0.101

package/src/components/rich-text-markdown.ts

@@ -0,0 +1,155 @@
+import {
+	$convertFromMarkdownString,
+	$convertToMarkdownString,
+	type ElementTransformer,
+	isTableRowDivider,
+	TRANSFORMERS,
+	type Transformer,
+} from "@lexical/markdown";
+import {
+	$createTableCellNode,
+	$createTableNode,
+	$createTableRowNode,
+	$isTableCellNode,
+	$isTableNode,
+	$isTableRowNode,
+	TableCellHeaderStates,
+	TableCellNode,
+	TableNode,
+	TableRowNode,
+} from "@lexical/table";
+import { $isTextNode, type ElementNode, type LexicalNode } from "lexical";
+
+const TABLE_ROW = /^\|(.+)\|\s*$/;
+
+/**
+ * A cell is a document of its own, so its content goes through the same
+ * transformers. A newline or a bare pipe inside one would end the row early,
+ * which is the difference between a table and a wall of broken syntax.
+ */
+const exportCell = (cell: TableCellNode): string =>
+	$convertToMarkdownString(COMPOSE_TRANSFORMERS, cell)
+		.replace(/\n+/g, " ")
+		.replace(/\|/g, "\\|")
+		.trim();
+
+const splitRow = (line: string): string[] => {
+	const inner = line.trim().replace(/^\|/, "").replace(/\|$/, "");
+	const cells: string[] = [];
+	let current = "";
+	for (let index = 0; index < inner.length; index++) {
+		const character = inner[index];
+		if (character === "\\" && inner[index + 1] === "|") {
+			current += "|";
+			index++;
+			continue;
+		}
+		if (character === "|") {
+			cells.push(current);
+			current = "";
+			continue;
+		}
+		current += character;
+	}
+	cells.push(current);
+	return cells;
+};
+
+const $createCell = (text: string): TableCellNode => {
+	const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+	$convertFromMarkdownString(text.trim(), COMPOSE_TRANSFORMERS, cell);
+	return cell;
+};
+
+const $createRow = (texts: string[], columns: number): TableRowNode => {
+	const row = $createTableRowNode();
+	for (let index = 0; index < columns; index++) {
+		row.append($createCell(texts[index] ?? ""));
+	}
+	return row;
+};
+
+const columnsOf = (table: TableNode): number => {
+	const first = table.getFirstChild();
+	return $isTableRowNode(first) ? first.getChildrenSize() : 0;
+};
+
+const $markFirstRowAsHeader = (table: TableNode): void => {
+	const first = table.getFirstChild();
+	if (!$isTableRowNode(first)) return;
+	for (const cell of first.getChildren()) {
+		if (!$isTableCellNode(cell)) continue;
+		cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+	}
+};
+
+/**
+ * `@lexical/markdown` 0.49 exports `isTableRowDivider` but no table
+ * transformer, so the composer supplies one over `@lexical/table` nodes. One
+ * list drives Markdown export, Markdown import and the cell round trip, which
+ * is what keeps a table that left as pipes coming back as a table.
+ *
+ * Import runs a line at a time, each line arriving as a paragraph. A row
+ * appended to the table its predecessor left behind is how the rows join up.
+ * A divider carries no content of its own: it says the row above is a header.
+ */
+export const TABLE: ElementTransformer = {
+	dependencies: [TableNode, TableRowNode, TableCellNode],
+	export: (node: LexicalNode): string | null => {
+		if (!$isTableNode(node)) return null;
+		const lines: string[] = [];
+		for (const row of node.getChildren()) {
+			if (!$isTableRowNode(row)) continue;
+			const cells = row.getChildren().filter($isTableCellNode);
+			if (cells.length === 0) continue;
+			lines.push(`| ${cells.map(exportCell).join(" | ")} |`);
+			// GFM only reads a block of pipe rows as a table when a divider follows
+			// the first one, so it is written whether or not that row was a header.
+			// Without it a recipient sees the pipes and no table.
+			if (lines.length === 1) {
+				lines.push(`| ${cells.map(() => "---").join(" | ")} |`);
+			}
+		}
+		return lines.length === 0 ? null : lines.join("\n");
+	},
+	regExp: TABLE_ROW,
+	replace: (parentNode: ElementNode, children, match): void => {
+		const line = match[0].trimEnd();
+		const previous = parentNode.getPreviousSibling();
+
+		if (isTableRowDivider(line)) {
+			if ($isTableNode(previous)) {
+				$markFirstRowAsHeader(previous);
+				parentNode.remove();
+				return;
+			}
+			// A divider with no rows above it is not a table. The import emptied
+			// this line's text node before calling here, so declining the match
+			// would drop the characters rather than leave them alone.
+			const first = children[0];
+			if ($isTextNode(first)) first.setTextContent(line);
+			return;
+		}
+
+		const texts = splitRow(line);
+		if ($isTableNode(previous)) {
+			previous.append($createRow(texts, columnsOf(previous)));
+			parentNode.remove();
+			return;
+		}
+
+		const table = $createTableNode();
+		table.append($createRow(texts, texts.length));
+		parentNode.replace(table);
+	},
+	type: "element",
+};
+
+/**
+ * The composer's own transformer set. Everything that reads or writes Markdown
+ * in compose uses this one list — the plain alternative on a rich send, the
+ * body of a plain send, the down-conversion of a paste, and both directions of
+ * the mode switch — so the conversions are inverses rather than four
+ * independent best efforts.
+ */
+export const COMPOSE_TRANSFORMERS: Transformer[] = [TABLE, ...TRANSFORMERS];

package/src/components/rich-text-toolbar.tsx

@@ -38,7 +38,7 @@ const ToolbarButton = ({
 		title={title}
 		aria-label={title}
 		aria-pressed={isActive}
-		className={`p-1.5 rounded transition-colors ${
+		className={`inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded transition-colors ${
 			isActive
 				? "text-fg bg-accent-2-soft"
 				: "text-fg-muted hover:text-fg hover:bg-surface-raised"
@@ -66,7 +66,16 @@ const INITIAL_STATE: ToolbarState = {
 	canRedo: false,
 };
 
-export const RichTextToolbar = () => {
+export interface RichTextToolbarProps {
+	/**
+	 * Pinned to the right of the strip, outside the part that scrolls. The mode
+	 * toggle rides here, and it is the last element in the toolbar's DOM so one
+	 * Shift+Tab out of the body reaches it.
+	 */
+	trailing?: React.ReactNode;
+}
+
+export const RichTextToolbar = ({ trailing }: RichTextToolbarProps) => {
 	const [editor] = useLexicalComposerContext();
 	const [state, setState] = useState<ToolbarState>(INITIAL_STATE);
 	const [linkDraft, setLinkDraft] = useState<string | null>(null);
@@ -146,51 +155,64 @@ export const RichTextToolbar = () => {
 	};
 
 	return (
-		<div className="border-b border-line">
-			<div className="flex items-center gap-0.5 px-3 py-1">
-				<ToolbarButton
-					isActive={state.bold}
-					onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")}
-					title="Bold (Ctrl+B)"
-				>
-					<Bold className="size-4" />
-				</ToolbarButton>
-				<ToolbarButton
-					isActive={state.italic}
-					onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")}
-					title="Italic (Ctrl+I)"
-				>
-					<Italic className="size-4" />
-				</ToolbarButton>
-				<ToolbarButton
-					isActive={state.link !== null}
-					onClick={() => setLinkDraft(state.link ?? "https://")}
-					title="Link (Ctrl+K)"
-				>
-					<Link className="size-4" />
-				</ToolbarButton>
-				<ToolbarButton
-					isActive={state.quote}
-					onClick={toggleQuote}
-					title="Blockquote"
-				>
-					<Quote className="size-4" />
-				</ToolbarButton>
-				<div className="mx-1.5 h-4 w-px bg-line" />
-				<ToolbarButton
-					isActive={false}
-					onClick={() => editor.dispatchCommand(UNDO_COMMAND, undefined)}
-					title="Undo (Ctrl+Z)"
-				>
-					<Undo2 className={`size-4 ${state.canUndo ? "" : "opacity-40"}`} />
-				</ToolbarButton>
-				<ToolbarButton
-					isActive={false}
-					onClick={() => editor.dispatchCommand(REDO_COMMAND, undefined)}
-					title="Redo (Ctrl+Y)"
+		// The toolbar and the body share one scroller, so twenty lines of typing
+		// would carry the toolbar off the top of the compose window with them.
+		<div className="sticky top-0 z-10 border-b border-line bg-canvas">
+			<div className="flex items-center gap-2 px-3 py-1">
+				{/* `min-w-0`, without which a flex child refuses to shrink below its
+				    content and pushes the trailing control off the edge instead of
+				    scrolling. */}
+				<div
+					data-testid="compose-format-cluster"
+					className="flex min-w-0 items-center gap-0.5 overflow-x-auto"
 				>
-					<Redo2 className={`size-4 ${state.canRedo ? "" : "opacity-40"}`} />
-				</ToolbarButton>
+					<ToolbarButton
+						isActive={state.bold}
+						onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")}
+						title="Bold (Ctrl+B)"
+					>
+						<Bold className="size-4" />
+					</ToolbarButton>
+					<ToolbarButton
+						isActive={state.italic}
+						onClick={() =>
+							editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
+						}
+						title="Italic (Ctrl+I)"
+					>
+						<Italic className="size-4" />
+					</ToolbarButton>
+					<ToolbarButton
+						isActive={state.link !== null}
+						onClick={() => setLinkDraft(state.link ?? "https://")}
+						title="Link (Ctrl+K)"
+					>
+						<Link className="size-4" />
+					</ToolbarButton>
+					<ToolbarButton
+						isActive={state.quote}
+						onClick={toggleQuote}
+						title="Blockquote"
+					>
+						<Quote className="size-4" />
+					</ToolbarButton>
+					<div className="mx-1.5 h-4 w-px shrink-0 bg-line" />
+					<ToolbarButton
+						isActive={false}
+						onClick={() => editor.dispatchCommand(UNDO_COMMAND, undefined)}
+						title="Undo (Ctrl+Z)"
+					>
+						<Undo2 className={`size-4 ${state.canUndo ? "" : "opacity-40"}`} />
+					</ToolbarButton>
+					<ToolbarButton
+						isActive={false}
+						onClick={() => editor.dispatchCommand(REDO_COMMAND, undefined)}
+						title="Redo (Ctrl+Y)"
+					>
+						<Redo2 className={`size-4 ${state.canRedo ? "" : "opacity-40"}`} />
+					</ToolbarButton>
+				</div>
+				{trailing && <div className="ml-auto shrink-0">{trailing}</div>}
 			</div>
 			{linkDraft !== null && (
 				<div className="flex items-center gap-2 border-t border-line px-3 py-1.5">

package/src/components/rich-text-value.ts

@@ -3,12 +3,22 @@
  * not the editor's own JSON, which changes shape between Lexical versions.
  * `text` is the plain alternative, as Markdown over the same document.
  *
+ * `formatting` is the inventory of node types and text formats in the document
+ * that plain text cannot carry, sorted, empty for a document of ordinary
+ * paragraphs. It is reported rather than reduced to a flag so the caller can
+ * both decide and say what is at stake.
+ *
  * Kept apart from the editor so a caller can name the shape without pulling
  * the editor, and its dependencies, out of their own chunk.
  */
 export interface RichTextValue {
 	html: string;
 	text: string;
+	formatting: readonly string[];
 }
 
-export const EMPTY_RICH_TEXT: RichTextValue = { html: "", text: "" };
+export const EMPTY_RICH_TEXT: RichTextValue = {
+	html: "",
+	text: "",
+	formatting: [],
+};

package/src/index.ts

@@ -51,6 +51,12 @@ export {
 	useContainerWidth,
 } from "./components/app-shell-types.js";
 export { AppTopBar, type AppTopBarProps } from "./components/app-top-bar.js";
+export {
+	type AttachmentDownloadState,
+	type AttachmentItem,
+	AttachmentList,
+	type AttachmentListProps,
+} from "./components/attachment-list.js";
 export { AuthCard, type AuthCardProps } from "./components/auth-card.js";
 export {
 	AuthFooter,
@@ -641,6 +647,11 @@ export {
 	sanitizeAdoptedHtml,
 	sanitizeQuotedHtml,
 } from "./lib/adopted-html.js";
+export {
+	DEFAULT_ATTACHMENT_FILENAME,
+	formatByteSize,
+	sanitizeAttachmentFilename,
+} from "./lib/attachment-file.js";
 export {
 	buildCidResolver,
 	type CidResolvableBodyPart,

package/src/lib/attachment-file.test.ts

@@ -0,0 +1,162 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	formatByteSize,
+	sanitizeAttachmentFilename,
+} from "./attachment-file.js";
+
+const RLO = "\u202e";
+const LRI = "\u2066";
+const PDI = "\u2069";
+const ZWSP = "\u200b";
+const BOM = "\ufeff";
+
+describe("sanitizeAttachmentFilename", () => {
+	it("leaves an ordinary filename alone", () => {
+		assert.equal(
+			sanitizeAttachmentFilename("Quarterly report.pdf"),
+			"Quarterly report.pdf",
+		);
+	});
+
+	it("keeps only the last segment of a POSIX path", () => {
+		assert.equal(sanitizeAttachmentFilename("../../../etc/passwd"), "passwd");
+	});
+
+	it("keeps only the last segment of a Windows path", () => {
+		assert.equal(
+			sanitizeAttachmentFilename("..\\..\\Windows\\System32\\evil.dll"),
+			"evil.dll",
+		);
+	});
+
+	it("falls back when the name is nothing but traversal", () => {
+		assert.equal(sanitizeAttachmentFilename("../../"), "attachment");
+	});
+
+	it("uses the caller's fallback when nothing usable survives", () => {
+		assert.equal(
+			sanitizeAttachmentFilename("   ", "attachment.pdf"),
+			"attachment.pdf",
+		);
+	});
+
+	it("strips the right-to-left override that disguises an extension", () => {
+		assert.equal(
+			sanitizeAttachmentFilename(`invoice${RLO}gnp.exe`),
+			"invoicegnp.exe",
+		);
+	});
+
+	it("strips bidi isolates, zero-width and BOM characters", () => {
+		assert.equal(
+			sanitizeAttachmentFilename(`${LRI}re${ZWSP}port${PDI}${BOM}.pdf`),
+			"report.pdf",
+		);
+	});
+
+	it("strips control characters that would break a header line", () => {
+		assert.equal(
+			sanitizeAttachmentFilename("note\r\n\tX-Evil 1.txt"),
+			"noteX-Evil 1.txt",
+		);
+	});
+
+	it("replaces characters that are illegal in a path", () => {
+		assert.equal(
+			sanitizeAttachmentFilename('re<po>rt|"?*.txt'),
+			"re_po_rt____.txt",
+		);
+	});
+
+	it("drops a leading dot so the file cannot land hidden", () => {
+		assert.equal(sanitizeAttachmentFilename(".bashrc"), "bashrc");
+	});
+
+	it("drops trailing dots and spaces", () => {
+		assert.equal(sanitizeAttachmentFilename("report.pdf. . "), "report.pdf");
+	});
+
+	it("guards a reserved Windows device name", () => {
+		assert.equal(sanitizeAttachmentFilename("NUL.txt"), "_NUL.txt");
+		assert.equal(sanitizeAttachmentFilename("com1"), "_com1");
+	});
+
+	it("does not guard a name that merely starts with a device name", () => {
+		assert.equal(sanitizeAttachmentFilename("console.log"), "console.log");
+	});
+
+	it("clamps an overlong name and keeps its extension", () => {
+		const result = sanitizeAttachmentFilename(`${"a".repeat(400)}.pdf`);
+		assert.equal(result.length, 120);
+		assert.ok(result.endsWith(".pdf"));
+	});
+
+	it("clamps an overlong name that has no extension", () => {
+		assert.equal(sanitizeAttachmentFilename("b".repeat(400)), "b".repeat(120));
+	});
+
+	it("clamps an overlong trailing segment rather than treating it as an extension", () => {
+		assert.equal(
+			sanitizeAttachmentFilename(`${"c".repeat(200)}.${"d".repeat(40)}`),
+			"c".repeat(120),
+		);
+	});
+
+	it("clamps an overlong fallback too", () => {
+		const result = sanitizeAttachmentFilename(
+			"",
+			`attachment.${"x".repeat(400)}`,
+		);
+		assert.equal(result.length, 120);
+	});
+
+	it("clamps on characters, never splitting a surrogate pair", () => {
+		const result = sanitizeAttachmentFilename(`${"😀".repeat(200)}.pdf`);
+		assert.equal([...result].length, 120);
+		assert.ok(result.endsWith(".pdf"));
+		assert.equal(/[\ud800-\udfff]/.test(result.replaceAll("😀", "")), false);
+	});
+});
+
+describe("formatByteSize", () => {
+	it("counts small payloads in bytes", () => {
+		assert.equal(formatByteSize(0), "0 bytes");
+		assert.equal(formatByteSize(1), "1 byte");
+		assert.equal(formatByteSize(1023), "1023 bytes");
+	});
+
+	it("switches to kilobytes at 1024", () => {
+		assert.equal(formatByteSize(1024), "1 KB");
+		assert.equal(formatByteSize(1536), "1.5 KB");
+		assert.equal(formatByteSize(1024 * 999), "999 KB");
+	});
+
+	it("switches to megabytes, gigabytes and terabytes", () => {
+		assert.equal(formatByteSize(1024 * 1024), "1 MB");
+		assert.equal(formatByteSize(1024 * 1024 * 2.5), "2.5 MB");
+		assert.equal(formatByteSize(1024 ** 3), "1 GB");
+		assert.equal(formatByteSize(1024 ** 4), "1 TB");
+	});
+
+	it("promotes at the point one decimal would round up to 1024", () => {
+		assert.equal(formatByteSize(1024 * 1023), "1023 KB");
+		assert.equal(formatByteSize(1024 * 1024 - 6), "1 MB");
+		assert.equal(formatByteSize(1024 ** 3 - 1), "1 GB");
+		assert.equal(formatByteSize(1024 ** 4 - 1), "1 TB");
+	});
+
+	it("stays in terabytes rather than inventing a larger unit", () => {
+		assert.equal(formatByteSize(1024 ** 5), "1024 TB");
+	});
+
+	it("drops the decimal once the value no longer needs it", () => {
+		assert.equal(formatByteSize(1024 * 1024 * 14.04), "14 MB");
+	});
+
+	it("reads as unknown for a size that was never declared", () => {
+		assert.equal(formatByteSize(Number.NaN), "unknown size");
+		assert.equal(formatByteSize(-1), "unknown size");
+		assert.equal(formatByteSize(Number.POSITIVE_INFINITY), "unknown size");
+	});
+});

package/src/lib/attachment-file.ts

@@ -0,0 +1,94 @@
+/**
+ * Filename and size presentation for a mail attachment.
+ *
+ * An attachment filename is attacker-controlled: it arrives verbatim in a
+ * `Content-Disposition` header written by whoever sent the mail. Two things
+ * downstream trust it — the browser's save dialog (`<a download>`) and the
+ * rendered list — so one sanitizer serves both. What the list shows is exactly
+ * what the file is saved as; a name that reads one way and saves another is the
+ * whole point of the attack.
+ */
+
+/**
+ * Control characters, zero-width joiners, line/paragraph separators and the
+ * bidirectional overrides. A RIGHT-TO-LEFT OVERRIDE placed inside
+ * `report<RLO>gnp.exe` makes it render as `reportexe.png`: the extension a
+ * user reads is not the extension that executes. Stripping rather than
+ * escaping keeps the displayed name and the saved name identical.
+ */
+const INVISIBLE_CHARACTERS =
+	// biome-ignore lint/suspicious/noControlCharactersInRegex: stripping C0/C1 controls out of an attacker-supplied filename is the point
+	/[\u0000-\u001f\u007f-\u009f\u061c\u200b-\u200f\u2028\u2029\u202a-\u202e\u2066-\u2069\ufeff]/g;
+
+/** Illegal in a Windows path, and `:` is a separator on classic macOS. */
+const UNSAFE_CHARACTERS = /[<>:"|?*]/g;
+
+/** Reserved device names on Windows — saving to one has no defined outcome. */
+const RESERVED_DEVICE_NAME = /^(con|prn|aux|nul|com[1-9]|lpt[1-9])(\.|$)/i;
+
+const MAX_FILENAME_LENGTH = 120;
+const MAX_EXTENSION_LENGTH = 12;
+
+export const DEFAULT_ATTACHMENT_FILENAME = "attachment";
+
+const clampLength = (name: string): string => {
+	// Code points, not UTF-16 units: slicing units splits a surrogate pair and
+	// leaves a lone half in the saved name.
+	const characters = [...name];
+	if (characters.length <= MAX_FILENAME_LENGTH) return name;
+	const dot = name.lastIndexOf(".");
+	const extension =
+		dot > 0 && [...name.slice(dot)].length <= MAX_EXTENSION_LENGTH
+			? name.slice(dot)
+			: "";
+	const budget = MAX_FILENAME_LENGTH - [...extension].length;
+	return characters.slice(0, budget).join("") + extension;
+};
+
+/**
+ * Reduce an attacker-supplied attachment filename to a name that is safe to
+ * both display and save: the final path segment only, no invisible characters,
+ * no leading dot (a hidden file the user never sees land), and bounded length.
+ * Falls back to `fallback` when nothing usable survives.
+ */
+export const sanitizeAttachmentFilename = (
+	raw: string,
+	fallback: string = DEFAULT_ATTACHMENT_FILENAME,
+): string => {
+	const visible = raw.replace(INVISIBLE_CHARACTERS, "");
+	const segments = visible.split(/[/\\]/);
+	const basename = segments[segments.length - 1] ?? "";
+	const trimmed = basename
+		.replace(UNSAFE_CHARACTERS, "_")
+		.replace(/^[.\s]+/, "")
+		.replace(/[.\s]+$/, "");
+	if (trimmed.length === 0) return clampLength(fallback);
+	const guarded = RESERVED_DEVICE_NAME.test(trimmed) ? `_${trimmed}` : trimmed;
+	return clampLength(guarded);
+};
+
+const SIZE_UNITS = ["KB", "MB", "GB", "TB"] as const;
+
+/**
+ * Human-readable byte size, 1024-based, at most one decimal. A negative or
+ * non-finite size reads as unknown rather than as a number, so a broken
+ * BODYSTRUCTURE never presents itself as a measurement.
+ *
+ * The promotion threshold is the point where one decimal would round up to
+ * `1024`, not `1024` itself — `1048570 B` is `1 MB`, never `1024 KB`.
+ */
+export const formatByteSize = (bytes: number): string => {
+	if (!Number.isFinite(bytes) || bytes < 0) return "unknown size";
+	const octets = Math.round(bytes);
+	if (octets < 1024) return octets === 1 ? "1 byte" : `${octets} bytes`;
+
+	const promoteAt = 1023.95;
+	let value = octets / 1024;
+	let unit = 0;
+	while (value >= promoteAt && unit < SIZE_UNITS.length - 1) {
+		value /= 1024;
+		unit += 1;
+	}
+	const rendered = value.toFixed(1).replace(/\.0$/, "");
+	return `${rendered} ${SIZE_UNITS[unit]}`;
+};

package/src/rich-text.ts

@@ -1,12 +1,26 @@
 /**
- * The rich-text editor and nothing else. Its own entry point so an app can load
- * it on demand: reached through the package barrel it would land in whichever
- * chunk already imports `@remit/ui`, which is every screen.
+ * The compose writing surfaces and nothing else. Their own entry point so an
+ * app can load them on demand: reached through the package barrel they would
+ * land in whichever chunk already imports `@remit/ui`, which is every screen.
  */
+export {
+	type ComposeBodyMode,
+	ComposeModeToggle,
+	type ComposeModeToggleProps,
+} from "./components/compose-mode-toggle.js";
+export {
+	PlainTextEditor,
+	type PlainTextEditorProps,
+} from "./components/plain-text-editor.js";
+export {
+	htmlToMarkdown,
+	markdownToHtml,
+} from "./components/rich-text-document.js";
 export {
 	RichTextEditor,
 	type RichTextEditorProps,
 } from "./components/rich-text-editor.js";
+export { COMPOSE_TRANSFORMERS } from "./components/rich-text-markdown.js";
 export {
 	EMPTY_RICH_TEXT,
 	type RichTextValue,

package/src/tokens.css

@@ -38,6 +38,10 @@
 	--font-ui: var(--font-geist);
 	--font-sans: var(--font-ui);
 
+	/* The plain compose surface promises the characters that will be sent, and a
+	   pipe table in a proportional face is unaligned bars. Nothing downloaded. */
+	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+
 	/* surfaces & text */
 	--color-canvas: var(--canvas);
 	--color-surface: var(--surface);