@remit/web-client 0.0.298 → 0.0.300

package/src/hooks/calendar/instance.ts

@@ -15,26 +15,29 @@ import type {
 	CalendarEventData,
 	ZoneCertainty,
 } from "@remit/ui";
+import { isoOnClock } from "./window";
 
 /** The device's own clock, the only zone a browser can honestly draw in. */
 export const deviceTimeZone = (): string =>
 	Intl.DateTimeFormat().resolvedOptions().timeZone;
 
+/** A collection that names no zone of its own, spelled the way the API spells it. */
+export const UNZONED_CALENDAR = "";
+
 /**
- * A collection that names no zone of its own, spelled the way the API spells
- * it: an empty string, which both ends read as UTC.
- *
- * There is deliberately no substitute value. The server checks a TZID against
- * `Intl.supportedValuesOf("timeZone")`, which is the canonical zone list and so
- * holds no spelling of UTC at all — not `UTC`, not `Etc/UTC` — and refuses
- * anything else. Sending nothing is what the API asks for, and it is the only
- * thing it accepts.
- *
- * The device's zone is not the fallback either. The listing returns this
- * collection's occurrences on its own clock, so answering with the reader's
- * would rewrite every time they saved by the difference between the two.
+ * The zone a write anchors an event in: the collection's, or where it names
+ * none, the device's — a weekly 09:00 written from New York into an unzoned
+ * calendar would otherwise be stored in UTC and meet at 10:00 once the clocks
+ * change. UTC itself has no name the server takes as a TZID, so a device on it
+ * sends nothing, which the server reads as UTC.
  */
-export const UNZONED_CALENDAR = "";
+export function anchorZoneFor(collectionZone: string): string {
+	if (collectionZone !== UNZONED_CALENDAR) return collectionZone;
+	const device = deviceTimeZone();
+	return Intl.supportedValuesOf("timeZone").includes(device)
+		? device
+		: UNZONED_CALENDAR;
+}
 
 const COLORS: Record<string, CalendarColorId> = {
 	Cal1: "cal-1",
@@ -99,17 +102,27 @@ export function toCalendarDescriptor(
  * One occurrence, drawn. `location`, `notes` and the guest list are projections
  * the listing does not carry — the reading pane fetches the resource itself for
  * those, and a grid chip has no room for them anyway.
+ *
+ * A timed occurrence is re-read on `clockZone`, the clock every surface draws
+ * on. An all-day one is a civil date and keeps only its date: midnight with an
+ * offset is an instant, and a device west of it reads that instant as the day
+ * before.
  */
 export function toCalendarEventData(
 	instance: RemitImapCalendarEventInstance,
 	timeZone: string,
+	clockZone: string,
 ): CalendarEventData {
 	return {
 		id: calendarInstanceId(instance.calendarObjectId, instance.recurrenceId),
 		calendarId: instance.calendarId,
 		title: instance.summary,
-		start: instance.start,
-		end: instance.end,
+		start: instance.allDay
+			? instance.start.slice(0, 10)
+			: isoOnClock(instance.start, clockZone),
+		end: instance.allDay
+			? instance.end.slice(0, 10)
+			: isoOnClock(instance.end, clockZone),
 		allDay: instance.allDay,
 		location: "",
 		notes: "",

package/src/hooks/calendar/recurrence-rule.test.ts

@@ -12,7 +12,7 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { repeatChoices } from "@remit/ui";
-import { rruleFromText, textFromRrule } from "./recurrence-rule";
+import { moveRule, rruleFromText, textFromRrule } from "./recurrence-rule";
 
 const DATE = "2026-06-10";
 const TIME = "09:15";
@@ -90,3 +90,45 @@ describe("a rule written by something else", () => {
 		assert.equal(textFromRrule("FREQ=WEEKLY", ""), undefined);
 	});
 });
+
+describe("a rule moved onto the day the event's own zone shows", () => {
+	it("shifts the weekdays of a weekly rule with the day", () => {
+		assert.equal(
+			moveRule("FREQ=WEEKLY;BYDAY=SU", "2026-06-14", "2026-06-15"),
+			"FREQ=WEEKLY;BYDAY=MO",
+		);
+		assert.equal(
+			moveRule("FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR", "2026-06-15", "2026-06-14"),
+			"FREQ=WEEKLY;BYDAY=SU,MO,TU,WE,TH",
+		);
+	});
+
+	it("reads a monthly position off the new date rather than shifting it", () => {
+		assert.equal(
+			moveRule("FREQ=MONTHLY;BYDAY=2WE", "2026-06-10", "2026-06-11"),
+			"FREQ=MONTHLY;BYDAY=2TH",
+		);
+		assert.equal(
+			moveRule("FREQ=MONTHLY;BYDAY=2WE", "2026-07-14", "2026-07-15"),
+			"FREQ=MONTHLY;BYDAY=3WE",
+		);
+	});
+
+	it("moves a yearly date, month and all", () => {
+		assert.equal(
+			moveRule(
+				"FREQ=YEARLY;BYMONTH=5;BYMONTHDAY=31",
+				"2026-05-31",
+				"2026-06-01",
+			),
+			"FREQ=YEARLY;BYMONTH=6;BYMONTHDAY=1",
+		);
+	});
+
+	it("leaves a rule alone on the same day", () => {
+		assert.equal(
+			moveRule("FREQ=WEEKLY;BYDAY=SU", "2026-06-14", "2026-06-14"),
+			"FREQ=WEEKLY;BYDAY=SU",
+		);
+	});
+});

package/src/hooks/calendar/recurrence-rule.ts

@@ -131,3 +131,47 @@ export function textFromRrule(
 
 	return undefined;
 }
+
+const dayNumber = (date: string): number =>
+	Date.parse(`${date}T00:00:00Z`) / 86_400_000;
+
+/**
+ * A rule picked on one civil date, rewritten for the same moment read on
+ * another. The picker offers rules off the day the device shows, and the
+ * server expands them on the day the event's own zone shows; 21:00 on a New
+ * York Sunday is a Tokyo Monday, so "every Sunday" has to be stored as BYDAY=MO
+ * or the series lands on Saturday evenings. Weekdays shift with the day; a
+ * monthly or yearly position is read off the new date itself, because the day
+ * after the second Wednesday is not always the second Thursday.
+ */
+export function moveRule(
+	rule: string,
+	fromDate: string,
+	toDate: string,
+): string {
+	const shift = dayNumber(toDate) - dayNumber(fromDate);
+	if (rule === "" || shift === 0 || Number.isNaN(shift)) return rule;
+	const [year, month, dayOfMonth] = toDate.split("-").map(Number);
+	const weekday = new Date(Date.UTC(year, month - 1, dayOfMonth)).getUTCDay();
+	const frequency = /FREQ=(\w+)/i.exec(rule)?.[1]?.toUpperCase();
+	return rule
+		.split(";")
+		.map((part) => {
+			const [name, value = ""] = part.split("=");
+			const key = name.toUpperCase();
+			if (key === "BYDAY" && frequency === "MONTHLY")
+				return `BYDAY=${ORDINAL_NUMBERS[Math.min(Math.floor((dayOfMonth - 1) / 7), 4)]}${BYDAY[weekday]}`;
+			if (key === "BYDAY")
+				return `BYDAY=${value
+					.split(",")
+					.map((code) => {
+						const index = BYDAY.indexOf(code.toUpperCase());
+						return index === -1 ? code : BYDAY[(index + shift + 7) % 7];
+					})
+					.join(",")}`;
+			if (key === "BYMONTH") return `BYMONTH=${month}`;
+			if (key === "BYMONTHDAY") return `BYMONTHDAY=${dayOfMonth}`;
+			return part;
+		})
+		.join(";");
+}

package/src/hooks/calendar/resource.test.ts

@@ -8,7 +8,11 @@
  */
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import { rruleFromIcalData, textFromIcalData } from "./resource";
+import {
+	rruleFromIcalData,
+	storedAnchorZone,
+	textFromIcalData,
+} from "./resource";
 
 const ics = (...lines: string[]): string =>
 	[
@@ -96,3 +100,42 @@ describe("the text a listing does not carry", () => {
 		});
 	});
 });
+
+describe("the zone an edit writes an event back in", () => {
+	const vevent = (dtstart: string): string =>
+		`BEGIN:VEVENT\r\n${dtstart}\r\nEND:VEVENT`;
+
+	it("is the TZID the stored start names", () => {
+		assert.equal(
+			storedAnchorZone(
+				vevent("DTSTART;TZID=Asia/Tokyo:20340222T080000"),
+				"Europe/Amsterdam",
+			),
+			"Asia/Tokyo",
+		);
+	});
+
+	it("is UTC for a start stored as a UTC instant, whatever the calendar says", () => {
+		assert.equal(
+			storedAnchorZone(vevent("DTSTART:20260615T010000Z"), "Europe/Amsterdam"),
+			"",
+		);
+	});
+
+	it("is the calendar's zone for a floating start", () => {
+		assert.equal(
+			storedAnchorZone(vevent("DTSTART:20260615T010000"), "Europe/Amsterdam"),
+			"Europe/Amsterdam",
+		);
+	});
+
+	it("is the calendar's zone for a TZID nothing can resolve", () => {
+		assert.equal(
+			storedAnchorZone(
+				vevent("DTSTART;TZID=W. Europe Standard Time:20260615T010000"),
+				"Europe/Amsterdam",
+			),
+			"Europe/Amsterdam",
+		);
+	});
+});

package/src/hooks/calendar/resource.ts

@@ -1,3 +1,5 @@
+import { anchorZoneFor } from "./instance";
+
 /**
  * The few properties a reading pane needs that the occurrence listing does not
  * carry, read off the stored resource.
@@ -72,3 +74,31 @@ export const textFromIcalData = (icalData: string): CalendarResourceText => ({
 	location: unescapeText(firstProperty(icalData, "LOCATION")),
 	description: unescapeText(firstProperty(icalData, "DESCRIPTION")),
 });
+
+/**
+ * The zone an edit writes an existing event back in: the one its master's
+ * DTSTART is stored in. A UTC start stays UTC (`""`), a floating one stays in
+ * the collection's zone, and a TZID nothing can resolve is read the way the
+ * server reads it, in the collection's zone. Only a resource with no DTSTART
+ * falls back to where a new event would be anchored.
+ */
+export function storedAnchorZone(
+	icalData: string,
+	collectionZone: string,
+): string {
+	const line = unfold(icalData)
+		.split(/\r?\n/)
+		.find(
+			(candidate) =>
+				candidate.startsWith("DTSTART") &&
+				valueAt(candidate, "DTSTART") !== undefined,
+		);
+	if (line === undefined) return anchorZoneFor(collectionZone);
+	const tzid = /;TZID="?([^;:"]+)"?/i.exec(line)?.[1];
+	if (tzid !== undefined)
+		return Intl.supportedValuesOf("timeZone").includes(tzid)
+			? tzid
+			: collectionZone;
+	if (valueAt(line, "DTSTART")?.toUpperCase().endsWith("Z")) return "";
+	return collectionZone;
+}

package/src/hooks/calendar/selection.ts

@@ -15,6 +15,7 @@ import type {
 } from "@remit/ui";
 import { useMemo } from "react";
 import {
+	deviceTimeZone,
 	isDrawnInstance,
 	toCalendarEventData,
 	UNZONED_CALENDAR,
@@ -79,10 +80,10 @@ export function useCalendarSelection(
 }
 
 /**
- * Occurrences as rows: the ones on a calendar being drawn, on the clock their
- * collection keeps. A collection with no zone of its own is sent as unzoned
- * rather than as the reader's — answering with the device's clock would rewrite
- * every time they saved by the difference between the two.
+ * Occurrences as rows: the ones on a calendar being drawn, on the device's
+ * clock, which is the one the grid, the strip and the free time all read. Each
+ * row still carries its collection's zone, unzoned where the collection names
+ * none, because that is the zone a write anchors the event in.
  */
 export function useDrawnEvents(
 	instances: readonly RemitImapCalendarEventInstance[],
@@ -91,6 +92,7 @@ export function useDrawnEvents(
 ): CalendarEventData[] {
 	const shownKey = shown.join(",");
 	return useMemo(() => {
+		const clockZone = deviceTimeZone();
 		const drawn = new Set(shownKey === "" ? [] : shownKey.split(","));
 		return instances
 			.filter(
@@ -101,6 +103,7 @@ export function useDrawnEvents(
 				toCalendarEventData(
 					instance,
 					timeZoneByCalendarId[instance.calendarId] ?? UNZONED_CALENDAR,
+					clockZone,
 				),
 			);
 	}, [instances, timeZoneByCalendarId, shownKey]);

package/src/hooks/calendar/useDraftClashes.ts

@@ -18,6 +18,7 @@ import {
 import { useMemo } from "react";
 import { formatEventWhen } from "@/lib/calendar-format";
 import {
+	deviceTimeZone,
 	isDrawnInstance,
 	toCalendarEventData,
 	UNZONED_CALENDAR,
@@ -53,7 +54,7 @@ export function useDraftClashes(
 		enabled: checkable,
 	});
 
-	const zone = timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR;
+	const zone = deviceTimeZone();
 
 	return useMemo(() => {
 		if (!checkable || isLoading || error) return undefined;
@@ -69,6 +70,7 @@ export function useDraftClashes(
 				toCalendarEventData(
 					instance,
 					timeZoneByCalendarId[instance.calendarId] ?? UNZONED_CALENDAR,
+					zone,
 				),
 			);
 		return clashesWith({ start, end }, others).map((event) => ({

package/src/hooks/calendar/window.test.ts

@@ -20,6 +20,7 @@ import {
 	calendarWindowOfDays,
 	isoAt,
 	isoAtInZone,
+	isoOnClock,
 } from "./window";
 
 const day = (iso: string): string => iso.slice(0, 10);
@@ -146,3 +147,30 @@ describe("a clock time in a named zone", () => {
 		);
 	});
 });
+
+describe("an occurrence re-read on the device's clock", () => {
+	it("moves a Tokyo morning to the New York evening before", () => {
+		assert.equal(
+			isoOnClock("2034-02-22T08:00:00+09:00", "America/New_York"),
+			"2034-02-21T18:00:00-05:00",
+		);
+	});
+
+	it("reads each side of a spring-forward on its own offset", () => {
+		assert.equal(
+			isoOnClock("2034-03-20T08:00:00+00:00", "Europe/Amsterdam"),
+			"2034-03-20T09:00:00+01:00",
+		);
+		assert.equal(
+			isoOnClock("2034-03-27T07:00:00+00:00", "Europe/Amsterdam"),
+			"2034-03-27T09:00:00+02:00",
+		);
+	});
+
+	it("falls back to the device rather than throwing on a zone nothing knows", () => {
+		assert.match(
+			isoOnClock("2034-02-22T08:00:00+09:00", "Mars/Olympus_Mons"),
+			OFFSET,
+		);
+	});
+});

package/src/hooks/calendar/window.ts

@@ -112,6 +112,26 @@ export function isoAtInZone(
 	)}`;
 }
 
+/**
+ * An instant written again as the wall time it reads as on a zone's clock.
+ *
+ * The listing serves each occurrence on its collection's clock, and the grid,
+ * the strip and the form all read the digits. Drawing those digits as they came
+ * puts a Tokyo calendar's 08:00 at 08:00 in New York; re-reading the instant on
+ * the device's clock is what puts it at 18:00 the evening before.
+ */
+export function isoOnClock(iso: string, timeZone: string): string {
+	const instant = Date.parse(iso);
+	const zoned = zoneOffsetAt(timeZone, instant);
+	const offset = Number.isNaN(zoned)
+		? -new Date(instant).getTimezoneOffset()
+		: zoned;
+	const wall = new Date(instant + offset * 60_000);
+	return `${civil(wall)}T${pad(wall.getUTCHours())}:${pad(
+		wall.getUTCMinutes(),
+	)}:${pad(wall.getUTCSeconds())}${formatOffset(offset)}`;
+}
+
 /** Midnight on a civil date, carrying the offset the device is on that day. */
 export const startOfDay = (date: string): string => isoAt(date, "00:00");
 

package/src/hooks/useComposeAttachments.ts

@@ -0,0 +1,103 @@
+import {
+	outboxAttachmentOperationsCompleteOutboxAttachmentMutation,
+	outboxDetailOperationsMintOutboxAttachmentMutation,
+	outboxDetailOperationsUpdateOutboxMessageMutation,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useMutation } from "@tanstack/react-query";
+import { useRef, useState, useSyncExternalStore } from "react";
+import {
+	type AttachmentTransport,
+	ComposeAttachmentController,
+	type DraftForAttachment,
+} from "../lib/compose-attachment-controller";
+import { softErrorMeta } from "../lib/error-classifier";
+
+export type { DraftForAttachment };
+
+const putFile = (
+	uploadUrl: string,
+	file: File,
+	signal: AbortSignal,
+): Promise<void> =>
+	fetch(uploadUrl, { method: "PUT", body: file, signal }).then((response) => {
+		if (!response.ok) {
+			throw new Error(`the server answered ${response.status}`);
+		}
+	});
+
+interface UseComposeAttachmentsOptions {
+	ensureDraft: () => Promise<DraftForAttachment>;
+}
+
+/** The composer's side of `ComposeAttachmentController`, over the app's API. */
+export const useComposeAttachments = ({
+	ensureDraft,
+}: UseComposeAttachmentsOptions) => {
+	const mintMutation = useMutation({
+		...outboxDetailOperationsMintOutboxAttachmentMutation(),
+		meta: softErrorMeta,
+	});
+	const completeMutation = useMutation({
+		...outboxAttachmentOperationsCompleteOutboxAttachmentMutation(),
+		meta: softErrorMeta,
+	});
+	const updateMutation = useMutation({
+		...outboxDetailOperationsUpdateOutboxMessageMutation(),
+		meta: softErrorMeta,
+	});
+
+	const transportRef = useRef<AttachmentTransport | null>(null);
+	transportRef.current = {
+		mint: (outboxMessageId, file) =>
+			mintMutation.mutateAsync({
+				path: { outboxMessageId },
+				body: {
+					filename: file.name,
+					contentType: file.type || "application/octet-stream",
+					sizeBytes: file.size,
+				},
+			}),
+		put: putFile,
+		complete: (outboxMessageId, outboxAttachmentId) =>
+			completeMutation
+				.mutateAsync({ path: { outboxMessageId, outboxAttachmentId } })
+				.then(() => undefined),
+		keep: (outboxMessageId, attachmentIds) =>
+			updateMutation
+				.mutateAsync({
+					path: { outboxMessageId },
+					body: { attachmentIds },
+				})
+				.then(() => undefined),
+	};
+	const ensureDraftRef = useRef(ensureDraft);
+	ensureDraftRef.current = ensureDraft;
+
+	const [controller] = useState(
+		() =>
+			new ComposeAttachmentController({
+				transport: () => {
+					const transport = transportRef.current;
+					if (!transport) throw new Error("attachment transport not ready");
+					return transport;
+				},
+				ensureDraft: () => ensureDraftRef.current(),
+			}),
+	);
+
+	const items = useSyncExternalStore(
+		controller.subscribe,
+		controller.getSnapshot,
+		controller.getSnapshot,
+	);
+
+	return {
+		items,
+		attach: controller.attach,
+		retry: controller.retry,
+		remove: controller.remove,
+		load: controller.load,
+		reset: controller.reset,
+		blockingReason: controller.blockingReason(),
+	};
+};

package/src/hooks/useIntelligenceCalendar.ts

@@ -24,6 +24,7 @@ import {
 } from "@/components/calendar/CalendarUnavailable";
 import {
 	calendarWindowOfDays,
+	deviceTimeZone,
 	isDrawnInstance,
 	readCalendarInstanceId,
 	type SuggestionAnswer,
@@ -214,6 +215,7 @@ export function useIntelligenceCalendar(
 			const event = toCalendarEventData(
 				instance,
 				timeZoneByCalendarId[instance.calendarId] ?? "",
+				deviceTimeZone(),
 			);
 			return {
 				event,

package/src/lib/calendar-format.ts

@@ -42,12 +42,17 @@ export function formatCivilDay(date: string): string {
 /** A span as the kit is handed it: when it starts, when it ends, whether it has hours. */
 export type CalendarSpan = Pick<CalendarEventData, "start" | "end" | "allDay">;
 
-/** "Wed 10 June, 10:00 – 11:00", or the day alone when it runs all of it. */
+/**
+ * "Wed 10 June, 10:00 – 11:00", or the day alone when it runs all of it. An
+ * all-day span is read off its civil date: parsed as an instant, it lands on
+ * the day before anywhere west of UTC.
+ */
 export function formatEventWhen(event: CalendarSpan): string {
+	if (event.allDay)
+		return `${formatCivilDay(event.start.slice(0, 10))}, all day`;
 	const start = new Date(event.start);
 	const end = new Date(event.end);
 	const day = DAY.format(start);
-	if (event.allDay) return `${day}, all day`;
 	const sameDay = DAY.format(end) === day;
 	if (sameDay) return `${day}, ${CLOCK.format(start)} – ${CLOCK.format(end)}`;
 	return `${day}, ${CLOCK.format(start)} – ${DAY.format(end)}, ${CLOCK.format(end)}`;