@remit/web-client 0.0.319 → 0.0.320

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.319",
+  "version": "0.0.320",
   "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/CalendarShell.stories.tsx

@@ -115,6 +115,8 @@ function Shell({
 							onChangeView={() => undefined}
 							onToday={() => undefined}
 							onStep={() => undefined}
+							dayHref={(day) => `#${day}`}
+							onZoomDay={() => undefined}
 							onChangeDensity={setDensity}
 							onSelectEvent={() => undefined}
 							onPickSlot={() => undefined}

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

@@ -5,7 +5,7 @@ import { CalendarViewPlaceholder } from "./CalendarViewPlaceholder";
 /**
  * A zoom the ladder offers and does not draw yet.
  *
- * The route is addressable at all five zooms, so two of them land on this. What
+ * The route is addressable at all five zooms, so one of them lands on this. What
  * it has to do is say which of the two things it is: a view that rendered
  * nothing would be indistinguishable from a month with nothing booked in it,
  * and the reader would plan around an empty screen.
@@ -14,9 +14,9 @@ const meta: Meta<typeof CalendarViewPlaceholder> = {
 	title: "Playground/Shipped/Calendar/Not built yet",
 	component: CalendarViewPlaceholder,
 	parameters: { layout: "fullscreen" },
-	render: (args) => (
+	render: () => (
 		<div className="h-dvh bg-canvas">
-			<CalendarViewPlaceholder {...args} />
+			<CalendarViewPlaceholder />
 		</div>
 	),
 };
@@ -24,9 +24,8 @@ export default meta;
 
 type Story = StoryObj<typeof CalendarViewPlaceholder>;
 
-/** It names the zoom it is waiting on, and the three that work today. */
+/** It names the zoom it is waiting on, and the four that work today. */
 export const Year: Story = {
-	args: { view: "year" },
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		await expect(
@@ -36,19 +35,7 @@ export const Year: Story = {
 		);
 		await expect(canvas.getByText("Not built yet")).toBeVisible();
 		await expect(
-			canvas.getByText(/Week, Day and Agenda work now\./),
+			canvas.getByText(/Month, Week, Day and Agenda work now\./),
 		).toBeVisible();
 	},
 };
-
-export const Month: Story = {
-	args: { view: "month" },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			canvas.getByTestId("calendar-placeholder-month"),
-		).toHaveTextContent(
-			"The month grid arrives with the rest of the zoom ladder.",
-		);
-	},
-};

package/src/components/calendar/CalendarViewPlaceholder.tsx

@@ -1,34 +1,15 @@
-import type { CalendarViewId } from "@remit/ui";
 import { CalendarRange } from "lucide-react";
 
-/**
- * A zoom level that is named but not drawn yet.
- *
- * The ladder is five steps and two of them arrive later, so the route stays
- * addressable and says what it is waiting on. A view that silently rendered
- * nothing would be indistinguishable from a week with nothing in it.
- */
-const WAITING_ON: Record<string, string> = {
-	year: "The year grid arrives with the rest of the zoom ladder.",
-	month: "The month grid arrives with the rest of the zoom ladder.",
-};
-
-export interface CalendarViewPlaceholderProps {
-	view: CalendarViewId;
-}
-
-export function CalendarViewPlaceholder({
-	view,
-}: CalendarViewPlaceholderProps) {
+export function CalendarViewPlaceholder() {
 	return (
 		<div
 			className="flex h-full flex-col items-center justify-center gap-2 bg-surface p-8 text-center"
-			data-testid={`calendar-placeholder-${view}`}
+			data-testid="calendar-placeholder-year"
 		>
 			<CalendarRange className="size-8 text-fg-subtle" aria-hidden="true" />
 			<p className="text-sm font-medium text-fg">Not built yet</p>
 			<p className="max-w-xs text-sm text-fg-muted">
-				{WAITING_ON[view] ?? "This view arrives in a later stage."} Week, Day
+				The year grid arrives with the rest of the zoom ladder. Month, Week, Day
 				and Agenda work now.
 			</p>
 		</div>

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

@@ -8,6 +8,8 @@ import {
 } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { stepCalendarDate } from "@/lib/calendar-route";
 import { CalendarWaiting } from "./CalendarWaiting";
 import { CalendarWorkspace } from "./CalendarWorkspace";
 
@@ -206,12 +208,13 @@ function Workspace({
 	waiting?: "none" | "some" | "refused";
 }) {
 	const [view, setView] = useState<CalendarViewId>(initialView);
+	const [date, setDate] = useState(DATE);
 	const [density, setDensity] = useState<Density>("comfortable");
 	const [selected, setSelected] = useState("");
 	return (
 		<CalendarWorkspace
 			view={view}
-			date={DATE}
+			date={date}
 			events={events}
 			colorByCalendarId={colorByCalendarId}
 			// The strip loads its own days and is storied on its own; here it
@@ -235,7 +238,14 @@ function Workspace({
 			now={NOW}
 			onChangeView={setView}
 			onToday={() => undefined}
-			onStep={() => undefined}
+			onStep={(direction) =>
+				setDate((current) => stepCalendarDate(current, view, direction))
+			}
+			dayHref={(day) => `/calendar/day/${day}`}
+			onZoomDay={(day) => {
+				setView("day");
+				setDate(day);
+			}}
 			onChangeDensity={setDensity}
 			onSelectEvent={setSelected}
 			onPickSlot={() => undefined}
@@ -263,6 +273,33 @@ export const Week: Story = {};
 
 export const Day: Story = { args: { initialView: "day" } };
 
+export const Month: Story = {
+	args: { initialView: "month" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await waitFor(() =>
+			expect(canvas.getAllByText("Roadmap review").length).toBeGreaterThan(0),
+		);
+		await userEvent.click(canvas.getByRole("button", { name: "Next" }));
+		await waitFor(() =>
+			expect(canvas.getByRole("heading", { level: 2 })).toHaveTextContent(
+				/July 2026/,
+			),
+		);
+		const day = await canvas.findByRole("link", {
+			name: /15 July 2026$/,
+		});
+		await expect(day).toHaveAttribute("href", "/calendar/day/2026-07-15");
+		await userEvent.click(day);
+		await waitFor(() =>
+			expect(canvas.getByRole("radio", { name: "Day" })).toBeChecked(),
+		);
+		await expect(canvas.getByRole("heading", { level: 2 })).toHaveTextContent(
+			/15 July 2026|July 15, 2026/,
+		);
+	},
+};
+
 /** A phone: two rows of thumb-sized controls, and no year on the ladder. */
 export const Phone: Story = {
 	args: { touch: true },
@@ -288,13 +325,11 @@ export const CouldNotLoad: Story = {
 };
 
 /**
- * The three zooms that are named but not drawn yet. Each says what it is
- * waiting on, so the route is addressable without pretending to be finished.
+ * The zoom that is named but not drawn yet. It says what it is waiting on, so
+ * the route is addressable without pretending to be finished.
  */
 export const YearNotBuiltYet: Story = { args: { initialView: "year" } };
 
-export const MonthNotBuiltYet: Story = { args: { initialView: "month" } };
-
 /**
  * Invitations the mail is still asking about, beside the week they would land
  * in. One at a time, as a deck; nothing here is on the calendar until added.

package/src/components/calendar/CalendarWorkspace.tsx

@@ -76,6 +76,8 @@ export interface CalendarWorkspaceProps {
 	onSelectEvent: (eventId: string) => void;
 	onPickSlot: (pick: CalendarSlotPick) => void;
 	onStep: (direction: -1 | 1) => void;
+	dayHref: (date: string) => string;
+	onZoomDay: (date: string) => void;
 	/**
 	 * A phone: the toolbar splits into two rows of thumb-sized controls, because
 	 * one row of them is wider than the screen and pushes the grid off it.
@@ -137,6 +139,8 @@ export function CalendarWorkspace({
 	onSelectEvent,
 	onPickSlot,
 	onStep,
+	dayHref,
+	onZoomDay,
 	touch = false,
 }: CalendarWorkspaceProps) {
 	// Held against the address it was measured for, so leaving a view does not
@@ -237,12 +241,14 @@ export function CalendarWorkspace({
 								now={now}
 								onSelectEvent={onSelectEvent}
 								onPickSlot={onPickSlot}
+								dayHref={dayHref}
+								onZoomDay={onZoomDay}
 								onRangeChange={(measuredTitle) =>
 									setMeasured({ key: addressKey, title: measuredTitle })
 								}
 							/>
 						) : (
-							<CalendarViewPlaceholder view={view} />
+							<CalendarViewPlaceholder />
 						)}
 					</div>
 				)}

package/src/components/calendar/calendar-workspace.render.test.ts

@@ -70,6 +70,8 @@ const workspaceProps = (
 	onChangeView: noop,
 	onToday: noop,
 	onStep: noop,
+	dayHref: (day) => `/calendar/day/${day}`,
+	onZoomDay: noop,
 	onChangeDensity: noop,
 	onSelectEvent: noop,
 	onPickSlot: noop,
@@ -103,8 +105,8 @@ const render = (
 	renderQuietly(createElement(CalendarWorkspace, workspaceProps(view, events)));
 
 describe("the zoom the address names", () => {
-	it("draws the grid for the week and the day", () => {
-		for (const view of ["week", "day"] as const) {
+	it("draws the grid for the month, the week and the day", () => {
+		for (const view of ["month", "week", "day"] as const) {
 			const html = render(view);
 			assert.ok(
 				html.includes("Roadmap review"),
@@ -122,15 +124,10 @@ describe("the zoom the address names", () => {
 	});
 
 	it("says so for a zoom that is not drawn yet", () => {
-		for (const view of ["year", "month"] as const) {
-			const html = render(view);
-			assert.ok(
-				html.includes(`calendar-placeholder-${view}`),
-				`${view} rendered no placeholder`,
-			);
-			assert.ok(html.includes("Not built yet"));
-			assert.ok(html.includes("Week, Day and Agenda work now."));
-		}
+		const html = render("year");
+		assert.ok(html.includes("calendar-placeholder-year"));
+		assert.ok(html.includes("Not built yet"));
+		assert.ok(html.includes("Month, Week, Day and Agenda work now."));
 	});
 });
 
@@ -143,7 +140,7 @@ describe("the toolbar", () => {
 	});
 
 	it("offers back, forward and today at a zoom that draws no grid", () => {
-		const html = render("month");
+		const html = render("year");
 		assert.ok(html.includes('aria-label="Previous"'));
 		assert.ok(html.includes('aria-label="Next"'));
 		assert.ok(html.includes(">Today<"));

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

@@ -47,14 +47,27 @@ describe("the window a view covers", () => {
 		assert.equal(day(window.to), "2026-06-11");
 	});
 
-	it("takes the calendar month, ending on the first of the next", () => {
-		const window = calendarWindow("month", "2026-06-10");
-		assert.equal(day(window.from), "2026-06-01");
-		assert.equal(day(window.to), "2026-07-01");
+	it("takes every week the month touches, so the grid's edge days are read", () => {
+		const window = calendarWindow("month", "2026-07-10");
+		assert.equal(day(window.from), "2026-06-29");
+		assert.equal(day(window.to), "2026-08-03");
+	});
+
+	it("takes exactly the month when it starts on a Monday and ends on a Sunday", () => {
+		const window = calendarWindow("month", "2027-02-14");
+		assert.equal(day(window.from), "2027-02-01");
+		assert.equal(day(window.to), "2027-03-01");
+	});
+
+	it("gives every day of one month the same window", () => {
+		const first = calendarWindow("month", "2026-06-01");
+		for (const date of ["2026-06-15", "2026-06-30"]) {
+			assert.deepEqual(calendarWindow("month", date), first);
+		}
 	});
 
 	it("rolls a December month into the next year", () => {
-		assert.equal(day(calendarWindow("month", "2026-12-31").to), "2027-01-01");
+		assert.equal(day(calendarWindow("month", "2026-12-31").to), "2027-01-04");
 	});
 
 	it("takes the calendar year", () => {

package/src/hooks/calendar/window.ts

@@ -154,7 +154,7 @@ function bounds(view: CalendarViewId, date: string): [string, string] {
 		const first = `${year}-${pad(month)}-01`;
 		const next =
 			month === 12 ? `${year + 1}-01-01` : `${year}-${pad(month + 1)}-01`;
-		return [first, next];
+		return [weekStart(first), addDays(weekStart(addDays(next, -1)), 7)];
 	}
 	if (view === "day") return [date, addDays(date, 1)];
 	const start = weekStart(date);

package/src/lib/calendar-route.test.ts

@@ -85,14 +85,14 @@ describe("canonicalCalendarParams", () => {
 });
 
 describe("calendarViewMountsGrid", () => {
-	it("draws the week and the day", () => {
+	it("draws the month, the week and the day", () => {
+		assert.equal(calendarViewMountsGrid("month"), true);
 		assert.equal(calendarViewMountsGrid("week"), true);
 		assert.equal(calendarViewMountsGrid("day"), true);
 	});
 
-	it("leaves the agenda to the strip and the other two to a later stage", () => {
+	it("leaves the agenda to the strip and the year to a later stage", () => {
 		assert.equal(calendarViewMountsGrid("year"), false);
-		assert.equal(calendarViewMountsGrid("month"), false);
 		assert.equal(calendarViewMountsGrid("agenda"), false);
 	});
 });

package/src/lib/calendar-route.ts

@@ -32,11 +32,11 @@ const calendarViewSchema = z.enum(calendarViews);
 export const DEFAULT_CALENDAR_VIEW: CalendarViewId = "week";
 
 /**
- * The views the grid draws. Year and month are named surfaces that arrive in
- * later stages, and they say so on screen rather than matching a route that
- * renders nothing.
+ * The views the grid draws. The year is a named surface that arrives in a later
+ * stage, and it says so on screen rather than matching a route that renders
+ * nothing.
  */
-const GRID_VIEWS = new Set<CalendarViewId>(["week", "day"]);
+const GRID_VIEWS = new Set<CalendarViewId>(["month", "week", "day"]);
 
 export const calendarViewMountsGrid = (view: CalendarViewId): boolean =>
 	GRID_VIEWS.has(view);

package/src/routes/calendar/$view.$date.tsx

@@ -93,6 +93,8 @@ function CalendarView({ isPhone }: { isPhone: boolean }) {
 		openEvent,
 		openComposer,
 		changeSuggestionFirst,
+		zoomToDay,
+		dayHref,
 	} = useCalendarNavigation();
 	const openedEvent = useOpenCalendarEvent();
 	const isWriting = useIsWritingEvent();
@@ -147,6 +149,8 @@ function CalendarView({ isPhone }: { isPhone: boolean }) {
 			onChangeView={goToView}
 			onToday={goToToday}
 			onStep={step}
+			dayHref={dayHref}
+			onZoomDay={zoomToDay}
 			onChangeDensity={changeDensity}
 			onSelectEvent={selectEvent}
 			onPickSlot={pickSlot}

package/src/routing/calendar.ts

@@ -1,5 +1,10 @@
 import type { CalendarViewId } from "@remit/ui";
-import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
+import {
+	useNavigate,
+	useParams,
+	useRouter,
+	useSearch,
+} from "@tanstack/react-router";
 import { useCallback, useMemo } from "react";
 import {
 	canonicalCalendarParams,
@@ -101,6 +106,7 @@ export interface CalendarNavigation {
 	setAnchorDate: (date: string) => void;
 	/** Out of the list and into the grid for one day. */
 	zoomToDay: (date: string) => void;
+	dayHref: (date: string) => string;
 	/**
 	 * One occurrence names the series it belongs to and the instance under it;
 	 * a resource that does not recur names only itself.
@@ -121,6 +127,7 @@ export interface CalendarNavigation {
  */
 export function useCalendarNavigation(): CalendarNavigation {
 	const navigate = useNavigate();
+	const router = useRouter();
 	const retainPanels = useRetainOpenPanels();
 	const { view, date } = useCalendarAddress();
 
@@ -136,6 +143,17 @@ export function useCalendarNavigation(): CalendarNavigation {
 		[navigate, retainPanels],
 	);
 
+	const dayHref = useCallback(
+		(next: string) =>
+			router.buildLocation({
+				to: VIEW_ROUTE,
+				params: { view: "day", date: next },
+				search: true,
+				hash: retainPanels,
+			}).href,
+		[router, retainPanels],
+	);
+
 	return useMemo(
 		() => ({
 			goToView: (next: CalendarViewId) => goTo({ view: next, date }),
@@ -150,7 +168,8 @@ export function useCalendarNavigation(): CalendarNavigation {
 					hash: retainPanels,
 					replace: true,
 				}),
-			zoomToDay: (next: string) => goTo({ view: "day", date: next }),
+			zoomToDay: (next: string) => navigate({ href: dayHref(next) }),
+			dayHref,
 			openEvent: (calendarObjectId: string, recurrenceId?: string) =>
 				recurrenceId === undefined || recurrenceId === ""
 					? navigate({
@@ -181,7 +200,7 @@ export function useCalendarNavigation(): CalendarNavigation {
 					hash: retainPanels,
 				}),
 		}),
-		[goTo, navigate, retainPanels, view, date],
+		[goTo, navigate, dayHref, retainPanels, view, date],
 	);
 }