@remit/web-client 0.0.297 → 0.0.299

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.297",
+  "version": "0.0.299",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/calendar/CalendarEventPane.stories.tsx

@@ -83,6 +83,22 @@ export const Occurrence: Story = {
 	},
 };
 
+/**
+ * An all-day event is a civil date, so the pane names that day on every
+ * device — a reader west of UTC does not see it on the day before.
+ */
+export const AllDay: Story = {
+	args: {
+		event: {
+			...event,
+			title: "Audit day",
+			start: "2026-06-12",
+			end: "2026-06-13",
+			allDay: true,
+		},
+	},
+};
+
 /** An old link, or a week the event is not in. Never a blank pane. */
 export const NotOnThisWeek: Story = {
 	args: { event: undefined, calendar: undefined },

package/src/components/calendar/OpenCalendarEvent.tsx

@@ -9,11 +9,15 @@ import { CalendarEventPane } from "@/components/calendar/CalendarEventPane";
 import {
 	type CalendarWriteOutcome,
 	calendarInstanceId,
+	deviceTimeZone,
 	draftFromEvent,
 	emptyDraft,
+	isoOnClock,
+	moveRule,
 	patchFromDrafts,
 	rruleFromIcalData,
 	type ScopedWrite,
+	storedAnchorZone,
 	textFromIcalData,
 	textFromRrule,
 	UNZONED_CALENDAR,
@@ -87,8 +91,22 @@ export function OpenCalendarEvent({
 	const stored = resource ? textFromIcalData(resource.icalData) : undefined;
 	const rrule = resource ? rruleFromIcalData(resource.icalData) : "";
 	const startTime = event && !event.allDay ? event.start.slice(11, 16) : "";
+	const anchor = resource
+		? storedAnchorZone(
+				resource.icalData,
+				timeZoneByCalendarId[event?.calendarId ?? ""] ?? UNZONED_CALENDAR,
+			)
+		: UNZONED_CALENDAR;
+	const shownRule =
+		event && !event.allDay
+			? moveRule(
+					rrule,
+					isoOnClock(event.start, anchor === "" ? "UTC" : anchor).slice(0, 10),
+					event.start.slice(0, 10),
+				)
+			: rrule;
 	const repeat =
-		rrule === "" ? "" : (textFromRrule(rrule, startTime) ?? "Repeats");
+		rrule === "" ? "" : (textFromRrule(shownRule, startTime) ?? "Repeats");
 
 	// Scoping needs the occurrence to anchor at, so it is offered only where the
 	// address names one. A series opened by itself has one honest answer, which
@@ -141,11 +159,10 @@ export function OpenCalendarEvent({
 
 	const saveEdit = () => {
 		if (!editing || !draft) return;
-		const patch = patchFromDrafts(
-			editing.before,
-			draft,
-			timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR,
-		);
+		const patch = patchFromDrafts(editing.before, draft, {
+			clock: deviceTimeZone(),
+			anchor,
+		});
 		if (!patch.ok) {
 			setProblem(patch.problem);
 			return;

package/src/components/calendar/WriteCalendarEvent.tsx

@@ -3,7 +3,9 @@ import { useEffect, useState } from "react";
 import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
 import { useCalendarComposeSeed } from "@/components/calendar/CalendarComposeSeed";
 import {
+	anchorZoneFor,
 	createInputFromDraft,
+	deviceTimeZone,
 	emptyDraft,
 	UNZONED_CALENDAR,
 	useCalendars,
@@ -59,10 +61,12 @@ export function WriteCalendarEvent({ onClose }: WriteCalendarEventProps) {
 	}, [firstCalendarId]);
 
 	const save = () => {
-		const built = createInputFromDraft(
-			draft,
-			timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR,
-		);
+		const built = createInputFromDraft(draft, {
+			clock: deviceTimeZone(),
+			anchor: anchorZoneFor(
+				timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR,
+			),
+		});
 		if (!built.ok) {
 			setProblem(built.problem);
 			return;

package/src/components/calendar/calendar-write-flow.render.test.ts

@@ -296,30 +296,47 @@ describe("deleting an event from the event route", () => {
 	});
 });
 
-describe("editing one morning of a repeating event", () => {
-	it("asks what the change applies to before opening the form", async () => {
-		await mount(
-			`${WEEK}/${OBJECT}/${RECURRENCE}`,
-			answering(() => ({}), [occurrence], series),
-		);
+const askedOnDevice = async (clock: string): Promise<void> => {
+	await mount(
+		`${WEEK}/${OBJECT}/${RECURRENCE}`,
+		answering(() => ({}), [occurrence], series),
+	);
+
+	assert.doesNotMatch(
+		harness?.text() ?? "",
+		/What should the change apply to/,
+		"the question is asked when Edit is pressed, not before",
+	);
+	harness?.click(harness.byText("button", "Edit"));
+	await settle();
 
-		assert.doesNotMatch(
-			harness?.text() ?? "",
-			/What should the change apply to/,
-			"the question is asked when Edit is pressed, not before",
-		);
-		harness?.click(harness.byText("button", "Edit"));
-		await settle();
+	const asked = harness?.text() ?? "";
+	assert.match(asked, /Standup repeats/);
+	assert.match(asked, /What should the change apply to/);
+	assert.match(
+		asked,
+		new RegExp(`Every weekday, ${clock}`),
+		"the rule is read back in words, not as an RRULE",
+	);
+};
 
-		const asked = harness?.text() ?? "";
-		assert.match(asked, /Standup repeats/);
-		assert.match(asked, /What should the change apply to/);
-		assert.match(
-			asked,
-			/Every weekday, 09:15/,
-			"the rule is read back in words, not as an RRULE",
-		);
-	});
+describe("editing one morning of a repeating event", () => {
+	for (const [zone, clock] of [
+		["UTC", "07:15"],
+		["Europe/Amsterdam", "09:15"],
+		["America/New_York", "03:15"],
+	]) {
+		it(`asks what the change applies to before opening the form, on ${zone}`, async () => {
+			const runner = process.env.TZ;
+			process.env.TZ = zone;
+			try {
+				await askedOnDevice(clock);
+			} finally {
+				if (runner === undefined) Reflect.deleteProperty(process.env, "TZ");
+				else process.env.TZ = runner;
+			}
+		});
+	}
 
 	it("sends the answer with the edit, naming the occurrence it meant", async () => {
 		await mount(

package/src/components/compose/ComposeForm.tsx

@@ -11,6 +11,7 @@ import type {
 import {
 	Banner,
 	ComposeActionBar,
+	ComposeAttachments,
 	ComposeBodySkeleton,
 	ComposeFormShell,
 	ComposeHeader,
@@ -41,6 +42,10 @@ import {
 	useRef,
 	useState,
 } from "react";
+import {
+	type DraftForAttachment,
+	useComposeAttachments,
+} from "../../hooks/useComposeAttachments";
 import { useMessageBodyContent } from "../../hooks/useMessageBodyContent";
 import { useSaveDraft } from "../../hooks/useSaveDraft";
 import { useSignature } from "../../hooks/useSignature.js";
@@ -228,6 +233,13 @@ const QUOTE_LOADING_MESSAGE = "Loading the message you're quoting.";
 const QUOTE_FAILED_MESSAGE =
 	"The message you're quoting couldn't be loaded, so it won't be included.";
 
+/**
+ * A file needs a draft to hang from, and a draft is created against its To
+ * address, so a message with none cannot take a file yet.
+ */
+const ATTACH_NEEDS_TO_ADDRESS =
+	"Add a To address before attaching a file — the draft the file is kept with is saved against it.";
+
 /** A field holding text that is not an address, and which field it is. */
 interface UnparsedField {
 	label: string;
@@ -763,6 +775,92 @@ export const ComposeForm = ({
 			onDraftCreated: adoptCreatedDraft,
 		});
 
+	const ensureDraftForAttachment =
+		useCallback(async (): Promise<DraftForAttachment> => {
+			if (outboxMessageId) return { outcome: "ready", outboxMessageId };
+			if (!selectedAccountId) {
+				return {
+					outcome: "refused",
+					reason: "Choose an account to send from before attaching a file.",
+				};
+			}
+			if (toAddresses.length === 0) {
+				return { outcome: "refused", reason: ATTACH_NEEDS_TO_ADDRESS };
+			}
+			const { htmlBody, textBody } = outgoingBody(
+				bodyMode,
+				body,
+				composeLanguage,
+				quotedBlock,
+			);
+			const saved = await saveImmediately({
+				accountId: selectedAccountId,
+				toAddresses: toAddresses.map((a) => a.email),
+				ccAddresses:
+					ccAddresses.length > 0 ? ccAddresses.map((a) => a.email) : undefined,
+				bccAddresses:
+					bccAddresses.length > 0
+						? bccAddresses.map((a) => a.email)
+						: undefined,
+				subject: subject || undefined,
+				textBody,
+				htmlBody,
+				...(sourceMessage && (mode === "reply" || mode === "reply-all")
+					? getReferences(sourceMessage)
+					: {}),
+			});
+			if (saved.outcome === "failed") {
+				return {
+					outcome: "refused",
+					reason: `The draft could not be saved, so the file was not attached: ${formatErrorDetail(saved.error) ?? "the request failed"}.`,
+				};
+			}
+			return { outcome: "ready", outboxMessageId: saved.outboxMessageId };
+		}, [
+			outboxMessageId,
+			selectedAccountId,
+			toAddresses,
+			ccAddresses,
+			bccAddresses,
+			subject,
+			body,
+			bodyMode,
+			composeLanguage,
+			quotedBlock,
+			sourceMessage,
+			mode,
+			saveImmediately,
+		]);
+
+	const {
+		items: attachmentItems,
+		attach,
+		retry: retryAttachment,
+		remove: removeAttachment,
+		load: loadAttachments,
+		reset: resetAttachments,
+		blockingReason: attachmentBlockingReason,
+	} = useComposeAttachments({
+		ensureDraft: ensureDraftForAttachment,
+	});
+
+	const attachmentDocumentRef = useRef(outboxMessageId);
+	useEffect(() => {
+		const previous = attachmentDocumentRef.current;
+		if (previous === outboxMessageId) return;
+		attachmentDocumentRef.current = outboxMessageId;
+		if (previous === undefined) return;
+		resetAttachments(outboxMessageId);
+	}, [outboxMessageId, resetAttachments]);
+
+	const attachmentsLoadedForRef = useRef<string | undefined>(undefined);
+	useEffect(() => {
+		if (!draftData || draftData.outboxMessageId !== outboxMessageId) return;
+		if (attachmentsLoadedForRef.current === draftData.outboxMessageId) return;
+		attachmentsLoadedForRef.current = draftData.outboxMessageId;
+		loadAttachments(draftData.outboxMessageId, draftData.attachments);
+	}, [draftData, outboxMessageId, loadAttachments]);
+
 	// Auto-save runs on a debounce, so a failure has no inline call site to
 	// surface it. Push the real error detail to a banner instead of leaving only
 	// the muted "Save failed" status dot. A fatal 5xx also hits the global
@@ -850,6 +948,9 @@ export const ComposeForm = ({
 			if (quoteIsLoading || quoteSourceIsLoading) {
 				return { status: "blocked", reason: QUOTE_LOADING_MESSAGE };
 			}
+			if (attachmentBlockingReason) {
+				return { status: "blocked", reason: attachmentBlockingReason };
+			}
 			if (unparsed) {
 				return { status: "blocked", reason: unparsedRefusal(unparsed) };
 			}
@@ -874,6 +975,7 @@ export const ComposeForm = ({
 			selectedAccountMissingSmtp,
 			quoteIsLoading,
 			quoteSourceIsLoading,
+			attachmentBlockingReason,
 			nothingToForward,
 		],
 	);
@@ -1187,6 +1289,17 @@ export const ComposeForm = ({
 					/>
 				) : undefined
 			}
+			attachments={
+				<ComposeAttachments
+					items={attachmentItems}
+					onRemove={(key) => {
+						void removeAttachment(key);
+					}}
+					onRetry={(key) => {
+						void retryAttachment(key);
+					}}
+				/>
+			}
 			actionBar={
 				<ComposeActionBar
 					send={sendState}
@@ -1194,6 +1307,9 @@ export const ComposeForm = ({
 					onBlocked={reportBlocked}
 					onDiscard={handleDiscard}
 					save={saveState}
+					onAttach={(files) => {
+						void attach(files);
+					}}
 				/>
 			}
 		>

package/src/components/compose/attachment-only-source.render.test.ts

@@ -76,6 +76,7 @@ const outboxEntry = () => ({
 	accountId: ACCOUNT_ID,
 	fromAddress: account.email,
 	toAddresses: ["dana@example.com"],
+	attachments: [],
 	ccAddresses: [],
 	bccAddresses: [],
 	references: [],

package/src/components/compose/compose-send-stops-autosave.render.test.ts

@@ -72,6 +72,7 @@ const outboxEntry = (status: string) => ({
 	accountId: ACCOUNT_ID,
 	fromAddress: account.email,
 	toAddresses: ["them@example.com"],
+	attachments: [],
 	ccAddresses: [],
 	bccAddresses: [],
 	references: [],

package/src/components/compose/compose-starts-a-second-message.render.test.ts

@@ -46,6 +46,7 @@ const draft = {
 	accountId: ACCOUNT_ID,
 	fromAddress: account.email,
 	toAddresses: ["them@example.com"],
+	attachments: [],
 	ccAddresses: [],
 	bccAddresses: [],
 	references: [],

package/src/components/compose/forward-autosave-is-not-fatal.render.test.ts

@@ -69,6 +69,7 @@ const outboxEntry = () => ({
 	accountId: ACCOUNT_ID,
 	fromAddress: account.email,
 	toAddresses: ["them@example.com"],
+	attachments: [],
 	ccAddresses: [],
 	bccAddresses: [],
 	references: [],

package/src/components/compose/quote-leaves-with-the-send.render.test.ts

@@ -68,6 +68,7 @@ const outboxEntry = () => ({
 	accountId: ACCOUNT_ID,
 	fromAddress: account.email,
 	toAddresses: ["dana@example.com"],
+	attachments: [],
 	ccAddresses: [],
 	bccAddresses: [],
 	references: [],

package/src/components/compose/reopened-draft-writes-nothing.render.test.ts

@@ -46,6 +46,7 @@ const failedEntry = {
 	accountId: ACCOUNT_ID,
 	fromAddress: account.email,
 	toAddresses: ["typo@exmaple.com"],
+	attachments: [],
 	ccAddresses: [],
 	bccAddresses: [],
 	references: [],

package/src/components/compose/reply-all-on-resumed-draft.render.test.ts

@@ -68,6 +68,7 @@ const draft = {
 	accountId: ACCOUNT_ID,
 	fromAddress: account.email,
 	toAddresses: ["them@example.com"],
+	attachments: [],
 	ccAddresses: [],
 	bccAddresses: [],
 	references: [],

package/src/hooks/calendar/calendar-collections.render.test.ts

@@ -1,5 +1,5 @@
 import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
+import { after, afterEach, before, describe, it } from "node:test";
 import type {
 	RemitImapCalendarEventInstance,
 	RemitImapCalendarResponse,
@@ -203,6 +203,28 @@ const clashesFor = async (
 };
 
 describe("the clashes a draft runs into", () => {
+	const runner = process.env.TZ;
+	before(() => {
+		process.env.TZ = "UTC";
+	});
+	after(() => {
+		if (runner === undefined) Reflect.deleteProperty(process.env, "TZ");
+		else process.env.TZ = runner;
+	});
+
+	it("reads the draft on the device's clock, not the calendar's", async () => {
+		process.env.TZ = "Europe/Amsterdam";
+		try {
+			const found = await clashesFor(
+				draft({ startTime: "12:00", endTime: "13:00" }),
+				[instance({})],
+			);
+			assert.equal(found?.length, 1);
+		} finally {
+			process.env.TZ = "UTC";
+		}
+	});
+
 	it("names an event the span overlaps", async () => {
 		const found = await clashesFor(draft({}), [instance({})]);
 		assert.equal(found?.length, 1);