@remit/web-client 0.0.232 → 0.0.233

package/package.json

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

@@ -0,0 +1,263 @@
+import {
+	buildCalendarDay,
+	type CalendarDescriptor,
+	type CalendarEventData,
+	type Density,
+	datesBetween,
+	freeStretchesOn,
+} from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { freeStretchesByDate } from "@/hooks/calendar";
+import { AgendaStrip } from "./AgendaStrip";
+
+/**
+ * The agenda at every state the shipping strip can be in.
+ *
+ * It is presentational — the days it holds and the day it is anchored to are
+ * the address's, and `AgendaView` turns each move here into one — so a story
+ * drives it with local state and gets the surface the app renders. What the
+ * stories answer is what the markup cannot: whether a fortnight with two things
+ * in it reads as a fortnight rather than as a bug, and whether "your Thursday
+ * afternoon is clear" survives being said about a calendar that is switched off.
+ */
+
+const TODAY = "2026-06-10";
+const OFFSET = "+02:00";
+const NOW = `${TODAY}T09:30:00${OFFSET}`;
+
+const WORK = "cal_work";
+const TEAM = "cal_team";
+const HOME = "cal_home";
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: WORK,
+		accountId: "acct_work",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: TEAM,
+		accountId: "acct_work",
+		accountLabel: "Work",
+		name: "Platform",
+		color: "cal-6",
+	},
+	{
+		id: HOME,
+		accountId: "acct_home",
+		accountLabel: "Personal",
+		name: "Home",
+		color: "cal-4",
+	},
+];
+
+const template: CalendarEventData = {
+	id: "",
+	calendarId: WORK,
+	title: "",
+	start: "",
+	end: "",
+	allDay: false,
+	location: "",
+	notes: "",
+	attendees: [],
+	myRsvp: "accepted",
+	threadId: "",
+	threadSubject: "",
+	timeZone: "Europe/Amsterdam",
+	zoneCertainty: "explicit",
+	recurrenceRule: "",
+	seriesId: "",
+	seriesException: false,
+	status: "confirmed",
+};
+
+const at = (
+	id: string,
+	title: string,
+	date: string,
+	from: string,
+	to: string,
+	over: Partial<CalendarEventData> = {},
+): CalendarEventData => ({
+	...template,
+	...over,
+	id,
+	title,
+	start: `${date}T${from}:00${OFFSET}`,
+	end: `${date}T${to}:00${OFFSET}`,
+});
+
+/**
+ * A fortnight that is mostly empty, which is what a real fortnight looks like.
+ * Two busy days, a pile-up on one of them, and a long quiet run in the middle:
+ * the shape the strip exists to draw and a time grid spends five screens on.
+ */
+const fortnight: CalendarEventData[] = [
+	at("standup", "Standup", TODAY, "09:15", "09:30", {
+		recurrenceRule: "Repeats",
+		seriesId: "ser_standup",
+	}),
+	at("roadmap", "Q3 roadmap review", TODAY, "10:00", "11:30", {
+		calendarId: TEAM,
+		location: "Kaap",
+	}),
+	at("incident", "Incident review", TODAY, "10:30", "12:00"),
+	at("dentist", "Dentist", "2026-06-11", "11:00", "12:00", {
+		calendarId: HOME,
+		location: "Kerkstraat 4",
+	}),
+	at("retro", "Retro", "2026-06-18", "16:00", "17:00", { calendarId: TEAM }),
+	at("climbing", "Climbing", "2026-06-20", "10:00", "12:00", {
+		calendarId: HOME,
+	}),
+];
+
+/**
+ * One day with an hour free in it and nothing else: what Detail is for, and the
+ * reading a phone gets when the reader is actually in a day.
+ */
+const denseDay: CalendarEventData[] = [
+	at("s", "Standup", TODAY, "09:00", "09:15"),
+	at("d1", "Design review", TODAY, "09:30", "11:00", { calendarId: TEAM }),
+	at("d2", "Supplier call", TODAY, "11:00", "12:00", { location: "Meet" }),
+	at("d3", "One to one", TODAY, "13:30", "14:00", { location: "Room 2" }),
+	at("d4", "Hiring panel", TODAY, "14:00", "15:30", { calendarId: TEAM }),
+	at("d5", "Board prep", TODAY, "15:30", "17:00"),
+	at("d6", "School run", TODAY, "17:00", "18:00", { calendarId: HOME }),
+];
+
+const dates = datesBetween("2026-06-01", "2026-06-24");
+
+const pendingDates = (
+	loading: "none" | "all" | "week",
+): ReadonlySet<string> => {
+	if (loading === "all") return new Set(dates);
+	if (loading === "week")
+		return new Set(datesBetween("2026-06-15", "2026-06-21"));
+	return new Set();
+};
+
+/** The reader drives density; everything else is the address's in the app. */
+function Strip({
+	events,
+	initialDensity,
+	loading,
+	error,
+	busy,
+}: {
+	events: CalendarEventData[];
+	initialDensity: Density;
+	/** Which days have not answered: "all", "none", or one week of them. */
+	loading: "none" | "all" | "week";
+	error?: unknown;
+	/** Busy time the strip is not drawing, as `/calendar-free-busy` returns it. */
+	busy: { start: string; end: string }[];
+}) {
+	const [density] = useState<Density>(initialDensity);
+	const [selected, setSelected] = useState("");
+	const days = dates.map((date) => buildCalendarDay(date, events, TODAY));
+	const measured = freeStretchesByDate(dates, busy);
+
+	return (
+		<AgendaStrip
+			days={days}
+			calendars={calendars}
+			density={density}
+			today={TODAY}
+			anchorDate={TODAY}
+			now={NOW}
+			selectedEventId={selected}
+			freeOn={(day) =>
+				busy.length === 0
+					? freeStretchesOn(day)
+					: (measured.get(day.date) ?? freeStretchesOn(day))
+			}
+			loadingDates={pendingDates(loading)}
+			error={error}
+			onRetry={() => undefined}
+			onSelectEvent={setSelected}
+			onPickSlot={() => undefined}
+			onZoomDay={() => undefined}
+			onGoToDate={() => undefined}
+			onReachStart={() => undefined}
+			onReachEnd={() => undefined}
+			onVisibleDayChange={() => undefined}
+		/>
+	);
+}
+
+const meta: Meta<typeof Strip> = {
+	title: "App/Calendar/Agenda",
+	component: Strip,
+	parameters: { layout: "fullscreen" },
+	args: {
+		events: fortnight,
+		initialDensity: "comfortable",
+		loading: "none",
+		busy: [],
+	},
+	render: (args) => (
+		<div className="flex h-dvh flex-col bg-canvas">
+			<Strip {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof Strip>;
+
+/** A fortnight: two busy days, a pile-up, and the quiet in between named. */
+export const PopulatedFortnight: Story = {};
+
+/**
+ * Before any week has answered. Every day is a skeleton on the date it will
+ * occupy, so nothing jumps when the answers land — and, crucially, this does
+ * not read as a fortnight with nothing booked.
+ */
+export const Loading: Story = { args: { loading: "all", events: [] } };
+
+/** One week still in flight, with the answered days around it drawn. */
+export const OneWeekStillLoading: Story = { args: { loading: "week" } };
+
+/**
+ * Nothing booked for weeks. The claim this view makes is that one sentence is a
+ * better answer to "am I free" than a fortnight of blank screens.
+ */
+export const EmptyRunCollapsed: Story = { args: { events: [] } };
+
+/** One day, back to back, at the reading that spends a row on each. */
+export const DenseDay: Story = { args: { events: denseDay } };
+
+/** The same dense day at Glance, where a title still has to be readable. */
+export const DenseDayAtAGlance: Story = {
+	args: { events: denseDay, initialDensity: "compact" },
+};
+
+/**
+ * The reader has unticked the calendar those meetings are on, so the strip
+ * draws nothing on the 11th. They are booked all the same, and the free bands
+ * come from the merged busy spans rather than from the rows on screen.
+ */
+export const BusyOnACalendarNotDrawn: Story = {
+	args: {
+		events: [],
+		busy: [
+			{
+				start: `2026-06-11T09:00:00${OFFSET}`,
+				end: `2026-06-11T16:00:00${OFFSET}`,
+			},
+		],
+	},
+};
+
+/** A read that was refused. An empty strip would say the opposite of this. */
+export const CouldNotLoad: Story = {
+	args: {
+		events: [],
+		error: new Error("The window has to be shorter than a year."),
+	},
+};

package/src/components/calendar/AgendaStrip.tsx

@@ -0,0 +1,145 @@
+import {
+	AgendaFlow,
+	type AgendaScrollTarget,
+	type CalendarDay,
+	type CalendarDescriptor,
+	type CalendarSlotPick,
+	type Density,
+	NextUpCard,
+	readNextUp,
+} from "@remit/ui";
+import { useMemo } from "react";
+import { ErrorState } from "@/components/ui/ErrorState";
+import type { FreeLookup } from "@/hooks/calendar";
+import { agendaDensityOf } from "@/lib/calendar-density";
+
+/**
+ * The agenda, drawn.
+ *
+ * Presentational, like the rest of the calendar pane: it takes the days it was
+ * given, says which one is under the header, and asks for more at either end.
+ * What it never does is decide which days those are — the address owns that, and
+ * `AgendaView` turns each answer here into one.
+ *
+ * "What is next" leads today rather than sitting in a rail of its own. It is
+ * the question a strip is for, and putting it above today means the reader
+ * lands on it and scrolls past it, instead of reading it in a column that is
+ * still there when they are three weeks away.
+ */
+
+export interface AgendaStripProps {
+	/** Contiguous and ascending. */
+	days: CalendarDay[];
+	calendars: readonly CalendarDescriptor[];
+	/** The device preference the whole calendar reads. */
+	density: Density;
+	today: string;
+	/** The day the address names; never collapsed into a run. */
+	anchorDate: string;
+	/** The instant "what is next" is measured from. */
+	now: string;
+	selectedEventId: string;
+	/** What is still open on a day, measured off merged busy time. */
+	freeOn: FreeLookup;
+	/**
+	 * Days whose week has not answered yet. They draw as skeletons: a day
+	 * nobody has heard back about and a day with nothing on it are otherwise
+	 * the same picture, and the strip would be claiming a free fortnight it has
+	 * no grounds for.
+	 */
+	loadingDates: ReadonlySet<string>;
+	/**
+	 * A refusal stated in place of the strip. A diary drawn empty because the
+	 * read failed is indistinguishable from a diary with nothing in it, which is
+	 * the one thing this must never look like.
+	 */
+	error?: unknown;
+	onRetry?: () => void;
+	scrollTarget?: AgendaScrollTarget;
+	onSelectEvent: (eventId: string) => void;
+	onPickSlot: (pick: CalendarSlotPick) => void;
+	/** Drops out of the list into the day grid. */
+	onZoomDay: (date: string) => void;
+	onGoToDate: (date: string) => void;
+	onReachStart: () => void;
+	onReachEnd: () => void;
+	/** The day under the sticky header, which the address follows. */
+	onVisibleDayChange: (date: string) => void;
+}
+
+export function AgendaStrip({
+	days,
+	calendars,
+	density,
+	today,
+	anchorDate,
+	now,
+	selectedEventId,
+	freeOn,
+	loadingDates,
+	error,
+	onRetry,
+	scrollTarget,
+	onSelectEvent,
+	onPickSlot,
+	onZoomDay,
+	onGoToDate,
+	onReachStart,
+	onReachEnd,
+	onVisibleDayChange,
+}: AgendaStripProps) {
+	const nextUp = useMemo(() => readNextUp(days, now), [days, now]);
+	/*
+	 * "What is next" is an answer about days that have arrived. Drawn over a
+	 * today whose week is still out it reads "Nothing else booked", which is a
+	 * claim rather than a delay.
+	 */
+	const settledToday = !loadingDates.has(today);
+
+	if (error !== undefined && error !== null)
+		return (
+			<div className="flex h-full items-center justify-center bg-surface">
+				<ErrorState
+					title="Couldn't load these days"
+					error={error}
+					onRetry={onRetry}
+				/>
+			</div>
+		);
+
+	/* No spinner over the whole strip. Days already fetched stay put while their
+	   neighbours arrive, and a day still outstanding says so where it will be
+	   drawn — which is also what stops the rows jumping when it lands. */
+	return (
+		<AgendaFlow
+			days={days}
+			calendars={calendars}
+			density={agendaDensityOf(density)}
+			today={today}
+			focusDate={anchorDate}
+			selectedEventId={selectedEventId}
+			freeOn={freeOn}
+			loadingDates={loadingDates}
+			scrollTarget={scrollTarget}
+			onSelectEvent={onSelectEvent}
+			onPickSlot={onPickSlot}
+			onZoomDay={onZoomDay}
+			onReachStart={onReachStart}
+			onReachEnd={onReachEnd}
+			onVisibleDayChange={onVisibleDayChange}
+			todayLead={
+				settledToday ? (
+					<div className="border-b border-line bg-surface-sunken p-3">
+						<NextUpCard
+							nextUp={nextUp}
+							calendars={calendars}
+							today={today}
+							onSelectEvent={onSelectEvent}
+							onGoTo={onGoToDate}
+						/>
+					</div>
+				) : undefined
+			}
+		/>
+	);
+}

package/src/components/calendar/AgendaView.tsx

@@ -0,0 +1,222 @@
+import {
+	type AgendaScrollTarget,
+	buildCalendarDay,
+	type CalendarDay,
+	type CalendarSlotPick,
+	type Density,
+	freeStretchesOn,
+} from "@remit/ui";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AgendaStrip } from "@/components/calendar/AgendaStrip";
+import {
+	type AgendaRange,
+	calendarInstanceId,
+	datesInRange,
+	extendRangeEnd,
+	extendRangeStart,
+	freeStretchesByDate,
+	rangeAround,
+	rangeCovering,
+	readCalendarInstanceId,
+	useCalendarEventWeeks,
+	useCalendarFreeBusyWeeks,
+	useCalendarSelection,
+	useDrawnEvents,
+	weekKeyOf,
+	weekWindowsOver,
+} from "@/hooks/calendar";
+import { useDebouncedValue } from "@/hooks/useDebouncedValue";
+import { isoDate } from "@/lib/calendar-route";
+import {
+	useCalendarAddress,
+	useCalendarNavigation,
+	useOpenCalendarEvent,
+} from "@/routing";
+
+/**
+ * The agenda, bound to the address.
+ *
+ * The strip is the same continuous run of time the grid draws, at a zoom that
+ * does not spend pixels on empty hours. Two facts of the address drive it and
+ * nothing else does: the day it opened on, which the strip lands on, and the
+ * calendars ticked in the query, which narrow what it draws. Switching to the
+ * week grid and back changes neither, which is what "the grid is a zoom level
+ * you drop into and leave" means in practice.
+ *
+ * The days it holds are fetched a week at a time, on the grid's own cache keys.
+ * That is what makes the range able to grow without limit — a single read may
+ * not cover more than a year, and one request that widened every time the
+ * reader reached an end would eventually be refused and replace the strip with
+ * the refusal — and it is what makes the two zooms share everything they have
+ * already read.
+ *
+ * Scrolling writes the day back to the address, debounced and by `replace`.
+ * Debounced because a flick past a fortnight is one move rather than fourteen,
+ * and `replace` because scrolling is not somewhere a reader went — Back belongs
+ * to the screen they came from, not to the row they scrolled past.
+ */
+
+/** Long enough that a flick lands before the address moves. */
+export const ANCHOR_DEBOUNCE_MS = 400;
+
+export interface AgendaViewProps {
+	/** The device preference the whole calendar reads. */
+	density: Density;
+	/**
+	 * An empty slot the reader picked. The composer is seeded by the route, the
+	 * same way the grid's picks are, so a slot picked off a free band and one
+	 * dragged on the grid open the same form.
+	 */
+	onPickSlot: (pick: CalendarSlotPick) => void;
+}
+
+export function AgendaView({ density, onPickSlot }: AgendaViewProps) {
+	const { date, calendarIds } = useCalendarAddress();
+	const { openEvent, setAnchorDate, zoomToDay } = useCalendarNavigation();
+	const opened = useOpenCalendarEvent();
+
+	// One reading of the clock per mount. A strip that re-decided what "today"
+	// meant on every render would move the day it is anchored to under a reader
+	// who had not touched it.
+	const [clock] = useState(() => new Date());
+	const today = useMemo(() => isoDate(clock), [clock]);
+	const now = useMemo(() => clock.toISOString(), [clock]);
+
+	const [range, setRange] = useState<AgendaRange>(() => rangeAround(date));
+	const [scrollTarget, setScrollTarget] = useState<AgendaScrollTarget>();
+	const [visibleDate, setVisibleDate] = useState(date);
+	const jumps = useRef(0);
+	/*
+	 * The day this view last put in the address. A date arriving that matches it
+	 * is our own write coming back, and landing the strip on that would fight the
+	 * scroll that caused it.
+	 */
+	const written = useRef(date);
+
+	const land = useCallback((day: string) => {
+		written.current = day;
+		setVisibleDate(day);
+		setRange((previous) => rangeCovering(previous, day));
+		jumps.current += 1;
+		setScrollTarget({ date: day, token: jumps.current });
+	}, []);
+
+	useEffect(() => {
+		if (date === written.current) return;
+		land(date);
+	}, [date, land]);
+
+	const anchor = useDebouncedValue(visibleDate, ANCHOR_DEBOUNCE_MS);
+	useEffect(() => {
+		if (anchor === written.current) return;
+		written.current = anchor;
+		setAnchorDate(anchor);
+	}, [anchor, setAnchorDate]);
+
+	const dates = useMemo(() => datesInRange(range), [range]);
+	const windows = useMemo(() => weekWindowsOver(dates), [dates]);
+
+	const {
+		calendars,
+		timeZoneByCalendarId,
+		shown,
+		narrowed,
+		resolved,
+		isLoading: loadingCalendars,
+	} = useCalendarSelection(calendarIds);
+
+	const events = useCalendarEventWeeks(windows, narrowed, resolved);
+	const busy = useCalendarFreeBusyWeeks(windows);
+	const drawn = useDrawnEvents(events.instances, timeZoneByCalendarId, shown);
+
+	const days = useMemo(
+		() => dates.map((day) => buildCalendarDay(day, drawn, today)),
+		[dates, drawn, today],
+	);
+
+	/*
+	 * A day whose week has not answered yet, or whose calendars are not known.
+	 * It draws as a skeleton rather than as a day with nothing on it, because
+	 * those two pictures are otherwise the same one and only one of them is true.
+	 */
+	const loadingDates = useMemo(() => {
+		const pending = new Set<string>();
+		if (loadingCalendars || !resolved) return new Set(dates);
+		for (const day of dates) {
+			if (events.pendingWindows.has(weekKeyOf(day))) pending.add(day);
+		}
+		return pending;
+	}, [dates, events.pendingWindows, loadingCalendars, resolved]);
+
+	/*
+	 * Free time comes from the merged busy spans, which cover every calendar the
+	 * reader holds rather than the ones the strip is drawing. A week whose spans
+	 * have not landed falls back to the gaps between its own rows: calling an
+	 * afternoon clear on the strength of nothing at all is the one mistake this
+	 * view exists to avoid.
+	 */
+	const freeByDate = useMemo(
+		() => freeStretchesByDate(dates, busy.spans),
+		[dates, busy.spans],
+	);
+	const freeOn = useCallback(
+		(day: CalendarDay) =>
+			busy.pendingWindows.has(weekKeyOf(day.date))
+				? freeStretchesOn(day)
+				: (freeByDate.get(day.date) ?? freeStretchesOn(day)),
+		[freeByDate, busy.pendingWindows],
+	);
+
+	const goToDate = useCallback(
+		(day: string) => {
+			land(day);
+			setAnchorDate(day);
+		},
+		[land, setAnchorDate],
+	);
+
+	const selectEvent = useCallback(
+		(eventId: string) => {
+			const instance = readCalendarInstanceId(eventId);
+			openEvent(instance.calendarObjectId, instance.recurrenceId);
+		},
+		[openEvent],
+	);
+
+	/** Whichever read was refused is the one a retry re-sends. */
+	const retry = useCallback(() => {
+		events.refetch();
+		busy.refetch();
+	}, [events.refetch, busy.refetch]);
+
+	return (
+		<AgendaStrip
+			days={days}
+			calendars={calendars}
+			density={density}
+			today={today}
+			anchorDate={date}
+			now={now}
+			selectedEventId={
+				opened
+					? calendarInstanceId(
+							opened.calendarObjectId,
+							opened.recurrenceId ?? "",
+						)
+					: ""
+			}
+			freeOn={freeOn}
+			loadingDates={loadingDates}
+			error={events.error ?? busy.error}
+			onRetry={retry}
+			scrollTarget={scrollTarget}
+			onSelectEvent={selectEvent}
+			onPickSlot={onPickSlot}
+			onZoomDay={zoomToDay}
+			onGoToDate={goToDate}
+			onReachStart={() => setRange(extendRangeStart)}
+			onReachEnd={() => setRange(extendRangeEnd)}
+			onVisibleDayChange={setVisibleDate}
+		/>
+	);
+}

package/src/components/calendar/CalendarViewPlaceholder.tsx

@@ -4,14 +4,13 @@ import { CalendarRange } from "lucide-react";
 /**
  * A zoom level that is named but not drawn yet.
  *
- * The ladder is five steps and three of them arrive later, so the route stays
+ * 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.",
-	agenda: "The agenda arrives with the scrolling day strip.",
 };
 
 export interface CalendarViewPlaceholderProps {
@@ -29,8 +28,8 @@ export function CalendarViewPlaceholder({
 			<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 and Day
-				work now.
+				{WAITING_ON[view] ?? "This view arrives in a later stage."} Week, Day
+				and Agenda work now.
 			</p>
 		</div>
 	);

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

@@ -18,6 +18,9 @@ import { CalendarWorkspace } from "./CalendarWorkspace";
  * state and get the same surface the app renders. What the stories are for is
  * what the markup cannot answer — how a week reads once a day is full, and
  * whether a zoom that is not drawn yet reads as unfinished rather than empty.
+ *
+ * The strip is a slot rather than something this pane builds, so it is storied
+ * under App/Calendar/Agenda and stood in for here.
  */
 const TIME_ZONE = "Europe/Amsterdam";
 const DATE = "2026-06-10";
@@ -123,6 +126,13 @@ function Workspace({
 			date={DATE}
 			events={events}
 			colorByCalendarId={colorByCalendarId}
+			// The strip loads its own days and is storied on its own; here it
+			// stands in for whatever the route mounts at that zoom.
+			agenda={
+				<div className="p-4 text-sm text-fg-muted">
+					The strip, which App/Calendar/Agenda has to itself.
+				</div>
+			}
 			isLoading={isLoading}
 			error={error}
 			onRetry={() => undefined}
@@ -185,7 +195,8 @@ export const YearNotBuiltYet: Story = { args: { initialView: "year" } };
 
 export const MonthNotBuiltYet: Story = { args: { initialView: "month" } };
 
-export const AgendaNotBuiltYet: Story = { args: { initialView: "agenda" } };
+/** The zoom that mounts the strip instead of the grid. */
+export const Agenda: Story = { args: { initialView: "agenda" } };
 
 /**
  * The calendar beside the nav it is reached from. The entry sits under the