@remit/ui 0.0.113 → 0.0.115

package/src/lib/recurrence.test.ts

@@ -0,0 +1,141 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	type CustomRecurrence,
+	dayOfMonthLabel,
+	defaultCustomRecurrence,
+	defaultEndDate,
+	formatCustomRecurrence,
+	ordinalWeekdayLabel,
+	readCustomRecurrence,
+	repeatChoices,
+} from "./recurrence.js";
+
+/** Thursday 11 June 2026. */
+const DATE = "2026-06-11";
+
+const rule = (patch: Partial<CustomRecurrence> = {}): CustomRecurrence => ({
+	...defaultCustomRecurrence(DATE),
+	...patch,
+});
+
+describe("repeatChoices", () => {
+	it("derives the monthly choice from the date's own weekday", () => {
+		assert.ok(
+			repeatChoices(DATE, "").includes("Every month on the second Thursday"),
+		);
+	});
+
+	it("appends the hour when there is one", () => {
+		assert.ok(repeatChoices(DATE, "09:15").includes("Every day, 09:15"));
+	});
+
+	it("offers weekdays only when the date is one", () => {
+		assert.ok(!repeatChoices("2026-06-13", "").includes("Every weekday"));
+	});
+});
+
+describe("defaultCustomRecurrence", () => {
+	it("starts on the event's own weekday", () => {
+		assert.deepEqual(defaultCustomRecurrence(DATE).weekdays, [4]);
+	});
+
+	it("survives a date it cannot read", () => {
+		assert.deepEqual(defaultCustomRecurrence("").weekdays, []);
+	});
+});
+
+describe("formatCustomRecurrence", () => {
+	it("reads a rule in words, never as an RRULE", () => {
+		const text = formatCustomRecurrence(
+			rule({
+				interval: 2,
+				weekdays: [1, 4],
+				ends: { kind: "onDate", date: "2026-10-03" },
+			}),
+			DATE,
+			"",
+		);
+		assert.equal(text, "Every 2 weeks on Monday and Thursday, until 3 October");
+	});
+
+	it("drops the interval when it is one", () => {
+		assert.equal(
+			formatCustomRecurrence(rule({ weekdays: [4] }), DATE, ""),
+			"Every week on Thursday",
+		);
+	});
+
+	it("counts an ending that is counted", () => {
+		assert.equal(
+			formatCustomRecurrence(
+				rule({ unit: "day", ends: { kind: "afterCount", count: 13 } }),
+				DATE,
+				"",
+			),
+			"Every day, 13 times",
+		);
+	});
+
+	it("says which of the two monthly readings is meant", () => {
+		assert.equal(
+			formatCustomRecurrence(rule({ unit: "month" }), DATE, ""),
+			"Every month on day 11",
+		);
+		assert.equal(
+			formatCustomRecurrence(
+				rule({ unit: "month", monthlyMode: "weekdayOfMonth" }),
+				DATE,
+				"",
+			),
+			"Every month on the second Thursday",
+		);
+	});
+
+	it("carries the hour", () => {
+		assert.equal(
+			formatCustomRecurrence(rule({ unit: "year" }), DATE, "09:15"),
+			"Every year on 11 June, 09:15",
+		);
+	});
+});
+
+describe("readCustomRecurrence", () => {
+	for (const seed of [
+		rule({ interval: 2, weekdays: [1, 4] }),
+		rule({ interval: 3, unit: "day" }),
+		rule({ unit: "month", monthlyMode: "weekdayOfMonth" }),
+		rule({ unit: "year" }),
+		rule({ weekdays: [0, 2, 6], ends: { kind: "afterCount", count: 13 } }),
+		rule({ ends: { kind: "onDate", date: "2026-10-03" } }),
+	])
+		it(`reopens on "${formatCustomRecurrence(seed, DATE, "")}"`, () => {
+			const text = formatCustomRecurrence(seed, DATE, "09:15");
+			const read = readCustomRecurrence(text, DATE);
+			assert.ok(read);
+			assert.equal(formatCustomRecurrence(read, DATE, "09:15"), text);
+		});
+
+	it("declines a sentence it did not write", () => {
+		assert.equal(readCustomRecurrence("Every weekday, 09:15", DATE), undefined);
+		assert.equal(
+			readCustomRecurrence("whenever Jane is free", DATE),
+			undefined,
+		);
+		assert.equal(
+			readCustomRecurrence("Every week on Blursday", DATE),
+			undefined,
+		);
+	});
+});
+
+describe("labels", () => {
+	it("offers an end date a year out", () => {
+		assert.equal(defaultEndDate(DATE), "2027-06-11");
+	});
+
+	it("names the two readings of the same day", () => {
+		assert.equal(dayOfMonthLabel(DATE), "day 11");
+		assert.equal(ordinalWeekdayLabel(DATE), "the second Thursday");
+	});
+});

package/src/lib/recurrence.ts

@@ -0,0 +1,266 @@
+/**
+ * Repeat rules in the words a person would say them.
+ *
+ * A rule is carried and shown as that sentence — "Every weekday, 09:15" — and
+ * never as an RRULE the reader has to decode. The picker offers the handful of
+ * rules a date can plausibly repeat by, worked out from the date itself, so
+ * "every month" means the second Wednesday when that is the Wednesday you
+ * clicked rather than a number nobody chose.
+ */
+
+const WEEKDAY_NAMES = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday",
+];
+
+const MONTH_NAMES = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December",
+];
+
+const ORDINALS = ["first", "second", "third", "fourth", "last"];
+
+/** No repeat at all — the value a one-off carries. */
+export const NO_REPEAT = "";
+
+/**
+ * The rules on offer for a date, widest interval last. `startTime` is appended
+ * when there is one, because "every weekday" without an hour is only half a
+ * rule.
+ */
+export function repeatChoices(date: string, startTime: string): string[] {
+	if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) return [];
+	const [year, month, dayOfMonth] = date.split("-").map(Number);
+	const when = new Date(Date.UTC(year, month - 1, dayOfMonth));
+	const weekday = WEEKDAY_NAMES[when.getUTCDay()];
+	const ordinal = ORDINALS[Math.min(Math.floor((dayOfMonth - 1) / 7), 4)];
+	const clock = startTime === "" ? "" : `, ${startTime}`;
+	const onWeekdays = when.getUTCDay() >= 1 && when.getUTCDay() <= 5;
+
+	return [
+		`Every day${clock}`,
+		...(onWeekdays ? [`Every weekday${clock}`] : []),
+		`Every week on ${weekday}${clock}`,
+		`Every month on the ${ordinal} ${weekday}${clock}`,
+		`Every year on ${dayOfMonth} ${MONTH_NAMES[month - 1]}${clock}`,
+	];
+}
+
+/* ------------------------------------------------------------------ */
+/* A rule the offered ones do not cover                                */
+/* ------------------------------------------------------------------ */
+
+export type RecurrenceUnit = "day" | "week" | "month" | "year";
+
+/**
+ * A monthly rule can mean two different things about the same date, and which
+ * one is meant is never derivable — the 14th and the second Tuesday coincide
+ * this month and diverge the next.
+ */
+export type MonthlyMode = "dayOfMonth" | "weekdayOfMonth";
+
+export type RecurrenceEnd =
+	| { kind: "never" }
+	| { kind: "onDate"; date: string }
+	| { kind: "afterCount"; count: number };
+
+export interface CustomRecurrence {
+	/** How many units between occurrences. One means every one. */
+	interval: number;
+	unit: RecurrenceUnit;
+	/** Weekday indexes, Sunday first. Read only when the unit is a week. */
+	weekdays: number[];
+	/** Read only when the unit is a month. */
+	monthlyMode: MonthlyMode;
+	ends: RecurrenceEnd;
+}
+
+/** Single-letter weekday labels, Sunday first, for a row of toggles. */
+export const WEEKDAY_INITIALS = ["S", "M", "T", "W", "T", "F", "S"];
+
+export const weekdayName = (index: number): string => WEEKDAY_NAMES[index];
+
+function parseDate(date: string): Date | undefined {
+	if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) return undefined;
+	const [year, month, day] = date.split("-").map(Number);
+	return new Date(Date.UTC(year, month - 1, day));
+}
+
+/** The event's own day is what a custom rule starts from. */
+export function defaultCustomRecurrence(date: string): CustomRecurrence {
+	const when = parseDate(date);
+	return {
+		interval: 1,
+		unit: "week",
+		weekdays: when ? [when.getUTCDay()] : [],
+		monthlyMode: "dayOfMonth",
+		ends: { kind: "never" },
+	};
+}
+
+/**
+ * What the "on" ending offers before anyone picks a day: a year out, so the
+ * field reads as a date rather than as an empty box.
+ */
+export function defaultEndDate(date: string): string {
+	const when = parseDate(date);
+	if (!when) return date;
+	when.setUTCFullYear(when.getUTCFullYear() + 1);
+	return when.toISOString().slice(0, 10);
+}
+
+/** "the second Tuesday", derived from the date the event sits on. */
+export function ordinalWeekdayLabel(date: string): string {
+	const when = parseDate(date);
+	if (!when) return "";
+	const dayOfMonth = when.getUTCDate();
+	return `the ${ORDINALS[Math.min(Math.floor((dayOfMonth - 1) / 7), 4)]} ${
+		WEEKDAY_NAMES[when.getUTCDay()]
+	}`;
+}
+
+/** "day 14", the other reading of the same date. */
+export function dayOfMonthLabel(date: string): string {
+	const when = parseDate(date);
+	return when ? `day ${when.getUTCDate()}` : "";
+}
+
+/** "3 October" — an end date read the way the rule reads it back. */
+export function endDateLabel(date: string): string {
+	const when = parseDate(date);
+	return when
+		? `${when.getUTCDate()} ${MONTH_NAMES[when.getUTCMonth()]}`
+		: date;
+}
+
+function joinWords(parts: string[]): string {
+	if (parts.length <= 1) return parts.join("");
+	return `${parts.slice(0, -1).join(", ")} and ${parts[parts.length - 1]}`;
+}
+
+/**
+ * The rule as a sentence. Everything the editor can express reads back in
+ * words — an RRULE is never shown, and never typed.
+ */
+export function formatCustomRecurrence(
+	rule: CustomRecurrence,
+	date: string,
+	startTime: string,
+): string {
+	const every =
+		rule.interval <= 1
+			? `Every ${rule.unit}`
+			: `Every ${rule.interval} ${rule.unit}s`;
+
+	let on = "";
+	if (rule.unit === "week" && rule.weekdays.length > 0)
+		on = ` on ${joinWords(
+			[...rule.weekdays].sort((a, b) => a - b).map(weekdayName),
+		)}`;
+	if (rule.unit === "month")
+		on = ` on ${
+			rule.monthlyMode === "dayOfMonth"
+				? dayOfMonthLabel(date)
+				: ordinalWeekdayLabel(date)
+		}`;
+	if (rule.unit === "year") {
+		const when = parseDate(date);
+		if (when)
+			on = ` on ${when.getUTCDate()} ${MONTH_NAMES[when.getUTCMonth()]}`;
+	}
+
+	const clock = startTime === "" ? "" : `, ${startTime}`;
+	const ends =
+		rule.ends.kind === "onDate"
+			? `, until ${endDateLabel(rule.ends.date)}`
+			: rule.ends.kind === "afterCount"
+				? `, ${rule.ends.count} times`
+				: "";
+
+	return `${every}${on}${clock}${ends}`;
+}
+
+/**
+ * The inverse of `formatCustomRecurrence`, so reopening the editor shows the
+ * rule the event already carries. A sentence it did not write — one of the
+ * offered choices, or a rule read out of a mail — returns nothing, and the
+ * editor starts from the event's own day instead.
+ */
+export function readCustomRecurrence(
+	text: string,
+	date: string,
+): CustomRecurrence | undefined {
+	let rest = text.trim();
+	let ends: RecurrenceEnd = { kind: "never" };
+
+	const times = rest.match(/,\s*(\d+) times$/);
+	if (times) {
+		ends = { kind: "afterCount", count: Number(times[1]) };
+		rest = rest.slice(0, times.index);
+	}
+
+	const until = rest.match(/,\s*until (\d{1,2}) ([A-Z][a-z]+)$/);
+	if (until) {
+		const endDate = isoForDayMonth(Number(until[1]), until[2], date);
+		if (endDate === "") return undefined;
+		ends = { kind: "onDate", date: endDate };
+		rest = rest.slice(0, until.index);
+	}
+
+	rest = rest.replace(/,\s*\d{2}:\d{2}$/, "");
+
+	const head = rest.match(
+		/^Every (?:(\d+) )?(day|week|month|year)s?(?: on (.+))?$/,
+	);
+	if (!head) return undefined;
+
+	const interval = head[1] === undefined ? 1 : Number(head[1]);
+	const unit = head[2] as RecurrenceUnit;
+	const on = head[3] ?? "";
+	const base = { ...defaultCustomRecurrence(date), interval, unit, ends };
+
+	if (unit === "week") {
+		if (on === "") return base;
+		const names = on.split(/,\s*|\s+and\s+/);
+		const weekdays = names.map((name) => WEEKDAY_NAMES.indexOf(name));
+		if (weekdays.some((index) => index === -1)) return undefined;
+		return { ...base, weekdays };
+	}
+
+	if (unit === "month") {
+		if (/^day \d{1,2}$/.test(on)) return { ...base, monthlyMode: "dayOfMonth" };
+		if (/^the \w+ [A-Z][a-z]+$/.test(on))
+			return { ...base, monthlyMode: "weekdayOfMonth" };
+		return on === "" ? base : undefined;
+	}
+
+	return base;
+}
+
+/** "3 October" against the event's own year, rolling forward if it has passed. */
+function isoForDayMonth(day: number, month: string, from: string): string {
+	const index = MONTH_NAMES.indexOf(month);
+	const start = parseDate(from);
+	if (index === -1 || !start) return "";
+	const sameYear = new Date(Date.UTC(start.getUTCFullYear(), index, day));
+	const when =
+		sameYear < start
+			? new Date(Date.UTC(start.getUTCFullYear() + 1, index, day))
+			: sameYear;
+	return when.toISOString().slice(0, 10);
+}

package/src/lib/use-match-media.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+/**
+ * A media query read from JS and kept in step with the browser's answer. The
+ * same conditions the CSS gates on — the desktop query above all — decide
+ * behaviour that has no CSS form: which surface a menu opens in, whether a
+ * gesture is bound at all.
+ */
+export const useMatchMedia = (query: string): boolean => {
+	const [matches, setMatches] = useState(() => {
+		if (typeof window === "undefined" || !window.matchMedia) return false;
+		return window.matchMedia(query).matches;
+	});
+
+	useEffect(() => {
+		if (typeof window === "undefined" || !window.matchMedia) return;
+		const media = window.matchMedia(query);
+		setMatches(media.matches);
+		const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
+		media.addEventListener("change", handler);
+		return () => media.removeEventListener("change", handler);
+	}, [query]);
+
+	return matches;
+};

package/src/rich-text.ts

@@ -24,6 +24,11 @@ export {
 	PlainTextEditor,
 	type PlainTextEditorProps,
 } from "./components/plain-text-editor.js";
+export {
+	type CorrectionMenuAnchor,
+	RichTextCorrectionMenu,
+	type RichTextCorrectionMenuProps,
+} from "./components/rich-text-correction-menu.js";
 export {
 	htmlToMarkdown,
 	markdownToHtml,
@@ -42,11 +47,18 @@ export type {
 	ProviderStatus,
 	SpellcheckOptions,
 	SpellProvider,
+	SuggestRequest,
+	SuggestResponse,
 } from "./components/rich-text-spellcheck.js";
 export {
 	openSpellProvider,
 	type SpellWorkerPort,
 } from "./components/rich-text-spellcheck-provider.js";
+export {
+	normaliseWord,
+	SUGGESTION_LIMIT,
+	suggestionsFor,
+} from "./components/rich-text-spellcheck-words.js";
 export {
 	type ComposeCaret,
 	EMPTY_RICH_TEXT,

package/src/tokens.css

@@ -75,6 +75,26 @@
 	/* focus ring */
 	--color-ring: var(--ring);
 
+	/* Per-calendar identity. One calendar owns one hue, and the hue is the
+	   only way two calendars are told apart on a grid, so these are the one
+	   place the UI needs colour the semantic palette cannot supply. Six hues,
+	   spaced far enough apart to survive a 4px event chip, each steering clear
+	   of the accent green, the cyan and the danger coral so a calendar never
+	   reads as a status. `-soft` is the chip fill; the base is the marker and
+	   the text on that fill. */
+	--color-cal-1: var(--cal-1);
+	--color-cal-1-soft: var(--cal-1-soft);
+	--color-cal-2: var(--cal-2);
+	--color-cal-2-soft: var(--cal-2-soft);
+	--color-cal-3: var(--cal-3);
+	--color-cal-3-soft: var(--cal-3-soft);
+	--color-cal-4: var(--cal-4);
+	--color-cal-4-soft: var(--cal-4-soft);
+	--color-cal-5: var(--cal-5);
+	--color-cal-5-soft: var(--cal-5-soft);
+	--color-cal-6: var(--cal-6);
+	--color-cal-6-soft: var(--cal-6-soft);
+
 	/* radii — slight rounding only: hairline borders + subtle radius */
 	--radius-xs: 2px;
 	--radius-sm: 3px;
@@ -169,6 +189,20 @@
 	--spell-mark: oklch(0.52 0.19 320);
 
 	--ring: oklch(0.55 0.14 150);
+
+	/* calendar hues: blue, teal, pink, orange, moss, violet */
+	--cal-1: oklch(0.53 0.13 250);
+	--cal-1-soft: oklch(0.925 0.04 250);
+	--cal-2: oklch(0.53 0.1 175);
+	--cal-2-soft: oklch(0.925 0.035 175);
+	--cal-3: oklch(0.53 0.14 320);
+	--cal-3-soft: oklch(0.925 0.04 320);
+	--cal-4: oklch(0.53 0.13 45);
+	--cal-4-soft: oklch(0.925 0.04 45);
+	--cal-5: oklch(0.53 0.11 130);
+	--cal-5-soft: oklch(0.925 0.04 130);
+	--cal-6: oklch(0.53 0.14 285);
+	--cal-6-soft: oklch(0.925 0.04 285);
 }
 
 /* ---------- DARK: deep slate-teal, lifted off black ---------- */
@@ -205,6 +239,21 @@
 	--spell-mark: oklch(0.76 0.16 320);
 
 	--ring: oklch(0.78 0.16 150);
+
+	/* same six hues, lifted for the slate ground and desaturated so a full
+	   week of chips does not glow */
+	--cal-1: oklch(0.79 0.11 250);
+	--cal-1-soft: oklch(0.33 0.055 250);
+	--cal-2: oklch(0.79 0.09 175);
+	--cal-2-soft: oklch(0.33 0.05 175);
+	--cal-3: oklch(0.79 0.12 320);
+	--cal-3-soft: oklch(0.33 0.055 320);
+	--cal-4: oklch(0.79 0.11 45);
+	--cal-4-soft: oklch(0.33 0.055 45);
+	--cal-5: oklch(0.79 0.1 130);
+	--cal-5-soft: oklch(0.33 0.05 130);
+	--cal-6: oklch(0.79 0.12 285);
+	--cal-6-soft: oklch(0.33 0.055 285);
 }
 
 html {
@@ -229,6 +278,20 @@ html.dark,
 	padding-left: env(safe-area-inset-left, 0px);
 }
 
+/* A number field that carries its own steppers still gets the browser's, and
+   two sets of arrows on one field is a field nobody trusts. */
+@utility own-steppers {
+	& input[type="number"] {
+		appearance: textfield;
+	}
+
+	& input[type="number"]::-webkit-outer-spin-button,
+	& input[type="number"]::-webkit-inner-spin-button {
+		appearance: none;
+		margin: 0;
+	}
+}
+
 body {
 	margin: 0;
 	background-color: var(--color-canvas);