@remit/web-client 0.0.286 → 0.0.288

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.286",
+  "version": "0.0.288",
   "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/auth/SessionRateLimited.stories.tsx

@@ -7,7 +7,7 @@ import { SessionRateLimited } from "./SessionRateLimited";
  * told everyone behind the address that they had been logged out.
  */
 const meta: Meta<typeof SessionRateLimited> = {
-	title: "Screens/SessionRateLimited",
+	title: "Playground/Shipped/Sign in/Session rate limited",
 	component: SessionRateLimited,
 	parameters: { layout: "fullscreen" },
 	args: {

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

@@ -199,7 +199,7 @@ function Strip({
 }
 
 const meta: Meta<typeof Strip> = {
-	title: "App/Calendar/Agenda",
+	title: "Playground/Shipped/Calendar/Agenda",
 	component: Strip,
 	parameters: { layout: "fullscreen" },
 	args: {

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

@@ -56,7 +56,7 @@ function Agenda({
 }
 
 const meta: Meta<typeof Agenda> = {
-	title: "App/Calendar/Agenda view",
+	title: "Playground/Shipped/Calendar/Agenda view",
 	component: Agenda,
 	parameters: { layout: "fullscreen" },
 	args: {

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

@@ -34,6 +34,7 @@ const draft: EventDraft = {
 	title: "Roadmap review",
 	date: "2026-06-10",
 	startTime: "10:00",
+	endDate: "2026-06-10",
 	endTime: "11:30",
 	allDay: false,
 	calendarId: "cal_work",
@@ -44,7 +45,7 @@ const draft: EventDraft = {
 };
 
 const meta: Meta<typeof CalendarComposePane> = {
-	title: "App/Calendar/Compose pane",
+	title: "Playground/Shipped/Calendar/Compose pane",
 	component: CalendarComposePane,
 	parameters: { layout: "fullscreen" },
 	args: {
@@ -104,6 +105,22 @@ export const EditingOneOccurrence: Story = {
 	},
 };
 
+/** A night shift opens as one night, ending on the next day. */
+export const EditingOvernight: Story = {
+	args: {
+		title: "Edit event",
+		subtitle: "2026-06-10",
+		saveLabel: "Save",
+		draft: {
+			...draft,
+			title: "Night shift handover",
+			startTime: "22:00",
+			endDate: "2026-06-11",
+			endTime: "01:00",
+		},
+	},
+};
+
 /** The version on screen was replaced elsewhere. Nothing is overwritten. */
 export const Conflicted: Story = {
 	args: {

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

@@ -44,7 +44,7 @@ const event: CalendarEventData = {
 };
 
 const meta: Meta<typeof CalendarEventPane> = {
-	title: "App/Calendar/Event pane",
+	title: "Playground/Shipped/Calendar/Event pane",
 	component: CalendarEventPane,
 	parameters: { layout: "fullscreen" },
 	args: {

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

@@ -127,7 +127,7 @@ function Shell({
 }
 
 const meta: Meta<typeof Shell> = {
-	title: "App/Calendar/Shell",
+	title: "Playground/Shipped/Calendar/Shell",
 	component: Shell,
 	parameters: { layout: "fullscreen" },
 };

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

@@ -11,7 +11,7 @@ import { CalendarViewPlaceholder } from "./CalendarViewPlaceholder";
  * and the reader would plan around an empty screen.
  */
 const meta: Meta<typeof CalendarViewPlaceholder> = {
-	title: "App/Calendar/Not built yet",
+	title: "Playground/Shipped/Calendar/Not built yet",
 	component: CalendarViewPlaceholder,
 	parameters: { layout: "fullscreen" },
 	render: (args) => (

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

@@ -151,7 +151,7 @@ function Workspace({
 }
 
 const meta: Meta<typeof Workspace> = {
-	title: "App/Calendar/Workspace",
+	title: "Playground/Shipped/Calendar/Workspace",
 	component: Workspace,
 	parameters: { layout: "fullscreen" },
 	args: { initialView: "week", events: week },

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

@@ -74,7 +74,7 @@ function Opened({
 }
 
 const meta: Meta<typeof Opened> = {
-	title: "App/Calendar/Open event",
+	title: "Playground/Shipped/Calendar/Open event",
 	component: Opened,
 	parameters: { layout: "fullscreen" },
 	args: { calendarObjectId: ROADMAP_OBJECT, server: answering() },

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

@@ -28,6 +28,7 @@ const server: CalendarServer = (request) => {
 
 const slot: CalendarSlotPick = {
 	date: "2026-06-11",
+	endDate: "2026-06-11",
 	startTime: "14:00",
 	endTime: "15:00",
 	allDay: false,
@@ -47,7 +48,7 @@ function Composer({ pick }: { pick?: CalendarSlotPick }) {
 }
 
 const meta: Meta<typeof Composer> = {
-	title: "App/Calendar/Write event",
+	title: "Playground/Shipped/Calendar/Write event",
 	component: Composer,
 	parameters: { layout: "fullscreen" },
 };

package/src/components/calendar/WriteCalendarEvent.tsx

@@ -37,6 +37,7 @@ export function WriteCalendarEvent({ onClose }: WriteCalendarEventProps) {
 			...blank,
 			allDay: seed.allDay,
 			startTime: seed.allDay ? "" : seed.startTime,
+			endDate: seed.endDate,
 			endTime: seed.allDay ? "" : seed.endTime,
 		};
 	});

package/src/components/compose/FromSelector.stories.tsx

@@ -28,7 +28,7 @@ function seededClient(): QueryClient {
 }
 
 const meta: Meta<typeof FromSelector> = {
-	title: "Components/FromSelector",
+	title: "Playground/Shipped/Mail/Compose/FromSelector",
 	component: FromSelector,
 	parameters: { layout: "padded" },
 	decorators: [

package/src/components/config-import/config-import.stories.tsx

@@ -37,7 +37,7 @@ import {
 } from "./steps";
 
 const meta: Meta = {
-	title: "Flows/Config import",
+	title: "Playground/Shipped/Import/Config import",
 	parameters: { layout: "fullscreen" },
 };
 export default meta;

package/src/components/mail/authenticity-warning.stories.tsx

@@ -15,7 +15,7 @@ import { AuthenticityBanner } from "@/components/mail/AuthenticityBanner";
  * body's own size rather than floating off to the right as chrome.
  */
 const meta: Meta<typeof AuthenticityBanner> = {
-	title: "Flows/Reading/Authenticity Warning",
+	title: "Playground/Shipped/Mail/Reading/Authenticity warning",
 	component: AuthenticityBanner,
 	parameters: { layout: "centered" },
 };

package/src/components/mail/blocked-images-notice.stories.tsx

@@ -12,7 +12,7 @@ import { BlockedImagesNotice } from "@/components/mail/BlockedImagesNotice";
  * message that explains nothing is indistinguishable from a broken one.
  */
 const meta: Meta<typeof BlockedImagesNotice> = {
-	title: "Flows/Mail/Blocked Images Notice",
+	title: "Playground/Shipped/Mail/Reading/Blocked images notice",
 	component: BlockedImagesNotice,
 	parameters: { layout: "padded" },
 };

package/src/components/mail/empty-trash-bar.stories.tsx

@@ -13,7 +13,7 @@ import { EmptyTrashBar } from "@/components/mail/EmptyTrashBar";
  * lands under the button and stays there until the user repairs it.
  */
 const meta: Meta<typeof EmptyTrashBar> = {
-	title: "Flows/Mail/Empty Trash",
+	title: "Playground/Shipped/Mail/Empty trash",
 	component: EmptyTrashBar,
 	parameters: { layout: "fullscreen" },
 };

package/src/components/mail/intelligence-drawer.stories.tsx

@@ -27,7 +27,7 @@ import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
  * mid-width panes both run on.
  */
 const meta: Meta = {
-	title: "Flows/Reading/Intelligence Drawer",
+	title: "Playground/Shipped/Mail/Reading/Intelligence drawer",
 	parameters: { layout: "centered" },
 };
 export default meta;

package/src/components/settings/CalendarFeedCard.stories.tsx

@@ -7,7 +7,7 @@ import { CalendarFeedCard } from "./CalendarFeedCard";
  * is legible and the two confirmations that take it away.
  */
 const meta: Meta<typeof CalendarFeedCard> = {
-	title: "Flows/Settings Calendars/Subscription address",
+	title: "Playground/Shipped/Settings/Calendars/Subscription address",
 	component: CalendarFeedCard,
 	parameters: { layout: "padded" },
 	args: {

package/src/components/settings/LabelsList.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { LabelsList } from "./LabelsList";
 
 const meta: Meta<typeof LabelsList> = {
-	title: "Flows/Settings Labels/LabelsList",
+	title: "Playground/Shipped/Settings/Labels/LabelsList",
 	component: LabelsList,
 	parameters: { layout: "padded" },
 	decorators: [

package/src/components/settings/label-delete-confirm.stories.tsx

@@ -10,7 +10,7 @@ import { deleteLabelConfirmCopy } from "@/lib/organize/label-delete-copy";
  * approved surface, not a placeholder for one.
  */
 const meta: Meta<typeof ConfirmDialog> = {
-	title: "Flows/Settings Labels/Delete Confirmation",
+	title: "Playground/Shipped/Settings/Labels/Delete confirmation",
 	component: ConfirmDialog,
 	parameters: { layout: "centered" },
 };

package/src/components/settings/settings-filter.stories.tsx

@@ -103,7 +103,7 @@ function SheetStage({ children }: { children: ReactNode }) {
 }
 
 const meta: Meta = {
-	title: "Flows/Settings Filters",
+	title: "Playground/Shipped/Settings/Filters",
 	parameters: { layout: "fullscreen" },
 };
 export default meta;

package/src/components/ui/ErrorBanner.stories.tsx

@@ -12,7 +12,7 @@ import { ErrorBanner } from "./ErrorBanner";
  * builds from build-time constants Storybook has no `define` for.
  */
 const meta: Meta<typeof ErrorBanner> = {
-	title: "Components/ErrorBanner",
+	title: "Playground/Shipped/Mail/ErrorBanner",
 	component: ErrorBanner,
 	parameters: { layout: "padded" },
 	args: {

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

@@ -9,10 +9,16 @@
  */
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import type { EventDraft } from "@remit/ui";
+import {
+	type CalendarEventData,
+	type EventDraft,
+	withAllDay,
+	withStartDate,
+} from "@remit/ui";
 import {
 	type CreateInput,
 	createInputFromDraft,
+	draftFromEvent,
 	emptyDraft,
 	patchFromDrafts,
 	type UpdatePatch,
@@ -28,6 +34,30 @@ const draft = (over: Partial<EventDraft> = {}): EventDraft => ({
 	...over,
 });
 
+const STORED = { repeat: "", location: "", notes: "" };
+
+const event = (over: Partial<CalendarEventData>): CalendarEventData => ({
+	id: "evt_1",
+	calendarId: CALENDAR,
+	title: "Roadmap review",
+	start: "2026-06-10T09:00:00+02:00",
+	end: "2026-06-10T10:00:00+02:00",
+	allDay: false,
+	location: "",
+	notes: "",
+	attendees: [],
+	myRsvp: "accepted",
+	threadId: "",
+	threadSubject: "",
+	timeZone: AMSTERDAM,
+	zoneCertainty: "explicit",
+	recurrenceRule: "",
+	seriesId: "",
+	seriesException: false,
+	status: "confirmed",
+	...over,
+});
+
 const refusal = (result: CreateInput | UpdatePatch): string => {
 	assert.ok(
 		!result.ok,
@@ -57,6 +87,31 @@ describe("creating an event", () => {
 		assert.equal(built.input.end, "2026-06-11");
 	});
 
+	it("ends a night that runs past midnight on the next day", () => {
+		const built = createInputFromDraft(
+			draft({ startTime: "22:00", endDate: "2026-06-11", endTime: "01:00" }),
+			AMSTERDAM,
+		);
+		assert.ok(built.ok);
+		assert.equal(built.input.start, "2026-06-10T22:00:00+02:00");
+		assert.equal(built.input.end, "2026-06-11T01:00:00+02:00");
+	});
+
+	it("ends an all-day event the day after the last day it covers", () => {
+		const built = createInputFromDraft(
+			draft({
+				allDay: true,
+				startTime: "",
+				endTime: "",
+				endDate: "2026-06-12",
+			}),
+			AMSTERDAM,
+		);
+		assert.ok(built.ok);
+		assert.equal(built.input.start, "2026-06-10");
+		assert.equal(built.input.end, "2026-06-13");
+	});
+
 	it("turns a picked repeat sentence into the rule it means", () => {
 		const built = createInputFromDraft(
 			draft({ repeat: "Every weekday, 09:00" }),
@@ -86,7 +141,24 @@ describe("a refusal", () => {
 					AMSTERDAM,
 				),
 			),
-			/end time is not after the start time/i,
+			/end is not after the start/i,
+		);
+	});
+
+	it("names a last day before the first on an all-day event", () => {
+		assert.match(
+			refusal(
+				createInputFromDraft(
+					draft({
+						allDay: true,
+						startTime: "",
+						endTime: "",
+						endDate: "2026-06-09",
+					}),
+					AMSTERDAM,
+				),
+			),
+			/last day is before the first/i,
 		);
 	});
 
@@ -153,6 +225,41 @@ describe("editing an event", () => {
 		assert.equal(patch.patch.recurrenceRule, "");
 	});
 
+	it("saves another field of a night that runs past midnight", () => {
+		const before = draftFromEvent(
+			event({
+				start: "2026-06-10T22:00:00+02:00",
+				end: "2026-06-11T01:00:00+02:00",
+			}),
+			STORED,
+		);
+		assert.equal(before.endDate, "2026-06-11");
+		const patch = patchFromDrafts(
+			before,
+			{ ...before, title: "Night shift" },
+			AMSTERDAM,
+		);
+		assert.ok(patch.ok);
+		assert.deepEqual(patch.patch, { summary: "Night shift" });
+	});
+
+	it("keeps every day of an all-day event it opens", () => {
+		const before = draftFromEvent(
+			event({ allDay: true, start: "2026-06-10", end: "2026-06-13" }),
+			STORED,
+		);
+		assert.equal(before.date, "2026-06-10");
+		assert.equal(before.endDate, "2026-06-12");
+		const patch = patchFromDrafts(
+			before,
+			{ ...before, date: "2026-06-17", endDate: "2026-06-19" },
+			AMSTERDAM,
+		);
+		assert.ok(patch.ok);
+		assert.equal(patch.patch.start, "2026-06-17");
+		assert.equal(patch.patch.end, "2026-06-20");
+	});
+
 	it("changes nothing when nothing was touched", () => {
 		const before = draft();
 		const patch = patchFromDrafts(before, { ...before }, AMSTERDAM);
@@ -185,7 +292,7 @@ describe("an event anchored somewhere other than the device", () => {
 		const before = draft();
 		const patch = patchFromDrafts(
 			before,
-			{ ...before, date: "2026-06-17" },
+			{ ...before, date: "2026-06-17", endDate: "2026-06-17" },
 			AMSTERDAM,
 		);
 		assert.ok(patch.ok);
@@ -200,7 +307,7 @@ describe("an event anchored somewhere other than the device", () => {
 
 	it("reads the zone's own winter offset rather than one it saw in June", () => {
 		const built = createInputFromDraft(
-			draft({ date: "2026-01-14" }),
+			draft({ date: "2026-01-14", endDate: "2026-01-14" }),
 			AMSTERDAM,
 		);
 		assert.ok(built.ok);
@@ -231,7 +338,7 @@ describe("an event anchored somewhere other than the device", () => {
 		const before = draft();
 		const patch = patchFromDrafts(
 			before,
-			{ ...before, date: "2026-06-17" },
+			{ ...before, date: "2026-06-17", endDate: "2026-06-17" },
 			"",
 		);
 		assert.ok(patch.ok);
@@ -239,3 +346,43 @@ describe("an event anchored somewhere other than the device", () => {
 		assert.equal(patch.patch.start, "2026-06-17T09:00:00+00:00");
 	});
 });
+
+describe("the form moving its own dates", () => {
+	const weekend = draft({
+		allDay: true,
+		startTime: "",
+		endTime: "",
+		date: "2026-06-12",
+		endDate: "2026-06-14",
+	});
+
+	it("carries the last day along when the first day moves", () => {
+		const moved = withStartDate(weekend, "2026-06-19");
+		assert.equal(moved.date, "2026-06-19");
+		assert.equal(moved.endDate, "2026-06-21");
+	});
+
+	it("keeps the last day while the start date is cleared and retyped", () => {
+		const cleared = withStartDate(weekend, "");
+		assert.equal(cleared.endDate, "2026-06-14");
+		const retyped = withStartDate(cleared, "2026-06-12");
+		assert.equal(retyped.date, "2026-06-12");
+		assert.equal(retyped.endDate, "2026-06-14");
+	});
+
+	it("makes a night that runs past midnight one all-day date", () => {
+		const night = draft({
+			startTime: "22:00",
+			endDate: "2026-06-11",
+			endTime: "01:00",
+		});
+		const allDay = withAllDay(night, true);
+		assert.equal(allDay.allDay, true);
+		assert.equal(allDay.endDate, "2026-06-10");
+	});
+
+	it("keeps the days of a timed event that spans them when made all day", () => {
+		const span = draft({ endDate: "2026-06-12", endTime: "17:00" });
+		assert.equal(withAllDay(span, true).endDate, "2026-06-12");
+	});
+});

package/src/hooks/calendar/draft.ts

@@ -13,7 +13,7 @@ import type {
 	RemitImapCreateCalendarEventInput,
 	RemitImapUpdateCalendarEventInput,
 } from "@remit/api-http-client/types.gen.ts";
-import type { CalendarEventData, EventDraft } from "@remit/ui";
+import { type CalendarEventData, type EventDraft, lastDayOf } from "@remit/ui";
 import { rruleFromText } from "./recurrence-rule";
 import { addDays, isoAtInZone } from "./window";
 
@@ -33,6 +33,7 @@ export function emptyDraft(date: string, calendarId: string): EventDraft {
 		title: "",
 		date,
 		startTime: "09:00",
+		endDate: date,
 		endTime: "10:00",
 		allDay: false,
 		calendarId,
@@ -56,6 +57,7 @@ export function draftFromEvent(
 		title: event.title,
 		date: event.start.slice(0, 10),
 		startTime: event.allDay ? "" : event.start.slice(11, 16),
+		endDate: lastDayOf(event),
 		endTime: event.allDay ? "" : event.end.slice(11, 16),
 		allDay: event.allDay,
 		calendarId: event.calendarId,
@@ -79,10 +81,11 @@ function timesFor(
 	draft: EventDraft,
 	timeZone: string,
 ): { start: string; end: string } {
-	if (draft.allDay) return { start: draft.date, end: addDays(draft.date, 1) };
+	if (draft.allDay)
+		return { start: draft.date, end: addDays(draft.endDate, 1) };
 	return {
 		start: isoAtInZone(draft.date, draft.startTime, timeZone),
-		end: isoAtInZone(draft.date, draft.endTime, timeZone),
+		end: isoAtInZone(draft.endDate, draft.endTime, timeZone),
 	};
 }
 
@@ -95,11 +98,17 @@ function refuse(draft: EventDraft, checkRepeat: boolean): string {
 	if (draft.title.trim() === "")
 		return "Give the event a title before saving it.";
 	if (draft.date === "") return "Pick the day the event is on.";
+	if (draft.endDate === "") return "Pick the day the event ends on.";
 	if (draft.calendarId === "") return "Pick the calendar to save the event in.";
 	if (!draft.allDay && (draft.startTime === "" || draft.endTime === ""))
 		return "Set a start and an end time, or mark the event all day.";
-	if (!draft.allDay && draft.endTime <= draft.startTime)
-		return "The end time is not after the start time. Move one of them.";
+	if (draft.allDay && draft.endDate < draft.date)
+		return "The last day is before the first. Move one of them.";
+	if (
+		!draft.allDay &&
+		`${draft.endDate}T${draft.endTime}` <= `${draft.date}T${draft.startTime}`
+	)
+		return "The end is not after the start. Move one of them.";
 	if (checkRepeat && rruleFromText(draft.repeat) === undefined)
 		return "This calendar can't store that repeat rule. Pick one of the offered rules, or turn the repeat off.";
 	return "";
@@ -149,6 +158,7 @@ export function patchFromDrafts(
 	const moved =
 		after.date !== before.date ||
 		after.startTime !== before.startTime ||
+		after.endDate !== before.endDate ||
 		after.endTime !== before.endTime ||
 		after.allDay !== before.allDay;
 	if (moved) {