@remit/ui 0.0.101 → 0.0.103

package/src/lib/compose-mode.ts

@@ -0,0 +1,50 @@
+import type { ComposeBodyMode } from "../components/compose-mode-toggle.js";
+
+/**
+ * Which surface a draft reopens in, with no field of its own. `htmlBody` a
+ * non-empty string is a rich draft; anything else is plain.
+ *
+ * Not "falsy": the rich editor serializes an empty document to `<p><br></p>`,
+ * so a rich draft's `htmlBody` is never absent, and a plain draft clears the
+ * column to the empty string rather than omitting it — absent means "leave
+ * alone" at every layer below this one.
+ */
+export const modeOfDraft = (htmlBody: string | undefined): ComposeBodyMode =>
+	typeof htmlBody === "string" && htmlBody.length > 0 ? "rich" : "plain";
+
+/**
+ * Whether switching to plain text destroys something. True for any node type or
+ * text format the document holds that plain text cannot carry.
+ */
+export const switchNeedsWarning = (
+	target: ComposeBodyMode,
+	formatting: readonly string[],
+): boolean => target === "plain" && formatting.length > 0;
+
+export type ConversionOutcome =
+	| { outcome: "switch" }
+	| { outcome: "blocked"; title: string; detail: string };
+
+const BLOCKED_TITLES: Record<ComposeBodyMode, string> = {
+	plain: "Couldn't switch to plain text",
+	rich: "Couldn't switch to rich text",
+};
+
+/**
+ * A conversion that empties a written message does not happen. Autosave would
+ * persist the blank body a moment later, so the draft would be gone with
+ * nothing said. An empty body converting to an empty body is not this case.
+ */
+export const conversionOutcome = (
+	target: ComposeBodyMode,
+	source: string,
+	converted: string,
+): ConversionOutcome => {
+	if (source.trim() === "" || converted.trim() !== "")
+		return { outcome: "switch" };
+	return {
+		outcome: "blocked",
+		title: BLOCKED_TITLES[target],
+		detail: "The conversion came back empty, so your message is unchanged.",
+	};
+};

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

@@ -0,0 +1,51 @@
+/**
+ * Detection restricted to the account's own languages. The restriction is the
+ * whole reason a 53 kB trigram table is good enough: `franc` scores 87.1% on
+ * one sentence over all 414 languages and 97.3% over six.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { detectComposeLanguage } from "./detect-compose-language.js";
+
+const DUTCH =
+	"Beste Anna, de vergadering van donderdag gaat niet door. Ik stuur je morgen een nieuw voorstel.";
+const ENGLISH =
+	"Hi Anna, Thursday's meeting is off. I will send you a new proposal tomorrow.";
+const GERMAN =
+	"Hallo Anna, die Besprechung am Donnerstag fällt aus. Ich schicke dir morgen einen neuen Vorschlag.";
+const FRENCH =
+	"Bonjour Anna, la réunion de jeudi est annulée. Je vous enverrai une nouvelle proposition demain.";
+
+const CANDIDATES = ["nl", "en", "de"];
+
+describe("detectComposeLanguage", () => {
+	it("picks each candidate out of the others", () => {
+		assert.equal(detectComposeLanguage(DUTCH, CANDIDATES), "nl");
+		assert.equal(detectComposeLanguage(ENGLISH, CANDIDATES), "en");
+		assert.equal(detectComposeLanguage(GERMAN, CANDIDATES), "de");
+	});
+
+	it("stays inside the candidate set", () => {
+		const detected = detectComposeLanguage(FRENCH, CANDIDATES);
+		assert.ok(detected === null || CANDIDATES.includes(detected));
+	});
+
+	it("declines a greeting line", () => {
+		assert.equal(detectComposeLanguage("Hoi Anna,", CANDIDATES), null);
+		assert.equal(detectComposeLanguage("   ", CANDIDATES), null);
+	});
+
+	it("declines when there is nothing to choose between", () => {
+		assert.equal(detectComposeLanguage(DUTCH, ["nl"]), null);
+		assert.equal(detectComposeLanguage(DUTCH, []), null);
+	});
+
+	it("ignores a configured language nothing can detect", () => {
+		assert.equal(detectComposeLanguage(DUTCH, ["nl", "ja"]), null);
+		assert.equal(detectComposeLanguage(DUTCH, ["nl", "ja", "en"]), "nl");
+	});
+
+	it("resolves a regional tag through its language", () => {
+		assert.equal(detectComposeLanguage(ENGLISH, ["nl", "en-GB"]), "en-GB");
+	});
+});

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

@@ -0,0 +1,42 @@
+import { franc } from "franc-min";
+import { detectionCodeFor } from "./compose-language.js";
+
+/**
+ * Below this, detection is a coin toss — `franc-min` scores 90.7% at 20 to 45
+ * characters and drops off a cliff under that. A greeting line holds the
+ * account default instead.
+ */
+export const DETECTION_MIN_LENGTH = 20;
+
+/**
+ * The language of a body, chosen inside the account's own candidate set.
+ *
+ * The restriction is what makes a 53 kB trigram table good enough: `franc`
+ * scores 87.1% on one sentence over all 414 languages and 97.3% over six.
+ * Returns null when the text is too short, when there is nothing to choose
+ * between, or when the detector declines to answer.
+ *
+ * Kept apart from the hook that calls it so `franc-min` stays out of every
+ * chunk that only wants a language tag, and so this is testable as the pure
+ * function it is.
+ */
+export const detectComposeLanguage = (
+	text: string,
+	candidates: readonly string[],
+): string | null => {
+	const trimmed = text.trim();
+	if (trimmed.length < DETECTION_MIN_LENGTH) return null;
+
+	const tagByCode = new Map<string, string>();
+	for (const tag of candidates) {
+		const code = detectionCodeFor(tag);
+		if (code && !tagByCode.has(code)) tagByCode.set(code, tag);
+	}
+	if (tagByCode.size < 2) return null;
+
+	const detected = franc(trimmed, {
+		only: [...tagByCode.keys()],
+		minLength: DETECTION_MIN_LENGTH,
+	});
+	return tagByCode.get(detected) ?? null;
+};

package/src/rich-text.ts

@@ -3,6 +3,18 @@
  * 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 {
+	ComposeBody,
+	type ComposeBodyProps,
+	type ComposeConversions,
+	type ConversionFailure,
+	DEFAULT_COMPOSE_CONVERSIONS,
+} from "./components/compose-body.js";
+export {
+	ComposeLanguageChip,
+	type ComposeLanguageChipProps,
+} from "./components/compose-language-chip.js";
 export {
 	type ComposeBodyMode,
 	ComposeModeToggle,
@@ -25,3 +37,13 @@ export {
 	EMPTY_RICH_TEXT,
 	type RichTextValue,
 } from "./components/rich-text-value.js";
+export {
+	type ComposeLanguageControl,
+	type ComposeLanguageSource,
+	type ComposeLanguageState,
+	useComposeLanguage,
+} from "./components/use-compose-language.js";
+export {
+	DETECTION_MIN_LENGTH,
+	detectComposeLanguage,
+} from "./lib/detect-compose-language.js";

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

@@ -1,96 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ComposeActionBar } from "./compose-action-bar.js";
-import { ComposeFormShell, composeModeLabels } from "./compose-form-shell.js";
-
-const meta: Meta<typeof ComposeFormShell> = {
-	title: "Mail/ComposeForm",
-	component: ComposeFormShell,
-	parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj<typeof ComposeFormShell>;
-
-const Header = ({ title }: { title: string }) => (
-	<div className="space-y-1 border-b border-line px-3 py-2">
-		<div className="text-xs font-semibold text-fg-muted">{title}</div>
-		<div className="flex items-center gap-2 text-sm">
-			<span className="w-12 text-fg-muted">To</span>
-			<span>alex@example.com</span>
-		</div>
-		<div className="flex items-center gap-2 text-sm">
-			<span className="w-12 text-fg-muted">Subject</span>
-			<span>Q3 planning notes</span>
-		</div>
-	</div>
-);
-
-const Body = () => (
-	<div className="min-h-[120px] px-3 py-2 text-sm">
-		Hi Alex, here are the notes from today…
-	</div>
-);
-
-const bar = (
-	<ComposeActionBar
-		onSend={() => undefined}
-		onDiscard={() => undefined}
-		sending={false}
-		canSend={true}
-		saveStatus="saved"
-	/>
-);
-
-export const DesktopFull: Story = {
-	name: "Desktop — full compose",
-	render: () => (
-		<div className="h-[560px] w-[560px] border border-line bg-canvas">
-			<ComposeFormShell
-				header={<Header title={composeModeLabels.new} />}
-				actionBar={bar}
-			>
-				<Body />
-			</ComposeFormShell>
-		</div>
-	),
-};
-
-export const InlineReply: Story = {
-	name: "Inline reply",
-	render: () => (
-		<div className="flex h-[400px] w-[640px] max-h-[400px] flex-col border-t border-line bg-canvas">
-			<ComposeFormShell
-				header={<Header title={composeModeLabels.reply} />}
-				quoted={
-					<div className="border-l-2 border-line pl-3 text-xs text-fg-muted">
-						On Tuesday, Alex wrote: …
-					</div>
-				}
-				actionBar={bar}
-			>
-				<Body />
-			</ComposeFormShell>
-		</div>
-	),
-};
-
-export const MobileSheet: Story = {
-	name: "Mobile sheet — Send within viewport",
-	globals: { viewport: { value: "mobile" } },
-	render: () => (
-		<div className="flex h-[95dvh] w-[390px] flex-col rounded-t-lg border border-line bg-canvas">
-			<div className="mx-auto mt-2 mb-1 h-1.5 w-12 rounded-full bg-fg-muted/30" />
-			<div className="border-b border-line px-4 py-2 text-base font-semibold">
-				{composeModeLabels.new}
-			</div>
-			<div className="min-h-0 flex-1">
-				<ComposeFormShell
-					header={<Header title={composeModeLabels.new} />}
-					actionBar={bar}
-				>
-					<Body />
-				</ComposeFormShell>
-			</div>
-		</div>
-	),
-};