@remit/web-client 0.0.230 → 0.0.231

package/package.json

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CalendarComposePane } from "./CalendarComposePane";
+
+/**
+ * `/calendar/{view}/{date}/new`. The address is real and the editor is not
+ * written yet, so the pane says which it is and offers the way back — the one
+ * thing worse than an unfinished surface is one that looks finished and does
+ * nothing.
+ */
+const meta: Meta<typeof CalendarComposePane> = {
+	title: "App/Calendar/Compose pane",
+	component: CalendarComposePane,
+	parameters: { layout: "fullscreen" },
+	args: { onClose: () => {} },
+	render: (args) => (
+		<div className="h-dvh max-w-xl border-l border-line bg-canvas">
+			<CalendarComposePane {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarComposePane>;
+
+export const NotBuiltYet: Story = {};

package/src/components/calendar/CalendarComposePane.tsx

@@ -0,0 +1,34 @@
+import { CalendarPlus } from "lucide-react";
+
+/**
+ * Writing a new event.
+ *
+ * A sibling of the open event rather than a child, so navigating here unmatches
+ * whatever the calendar had open in the same transition and a composer over an
+ * open event cannot be addressed — the move `compose` makes over a thread.
+ *
+ * The editor itself needs somewhere to save to, so it arrives with the calendar
+ * API. The route says that rather than rendering an empty pane.
+ */
+export interface CalendarComposePaneProps {
+	onClose: () => void;
+}
+
+export function CalendarComposePane({ onClose }: CalendarComposePaneProps) {
+	return (
+		<div className="flex h-full flex-col items-center justify-center gap-2 bg-surface p-8 text-center">
+			<CalendarPlus 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">
+				Writing an event arrives with the calendar API.
+			</p>
+			<button
+				type="button"
+				onClick={onClose}
+				className="rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg outline-none hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring"
+			>
+				Back to the calendar
+			</button>
+		</div>
+	);
+}

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

@@ -0,0 +1,81 @@
+import type { CalendarDescriptor, CalendarEventData } from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CalendarEventPane } from "./CalendarEventPane";
+
+/**
+ * The calendar's reading pane, at the three states the routes below the view
+ * can put it in: the event, one occurrence of a repeating one, and an address
+ * naming an event the calendar does not have on screen.
+ */
+const calendar: CalendarDescriptor = {
+	id: "cal_work",
+	accountId: "acct_work",
+	accountLabel: "Work",
+	name: "Northwind",
+	color: "cal-1",
+};
+
+const event: CalendarEventData = {
+	id: "evt_roadmap",
+	calendarId: calendar.id,
+	title: "Roadmap review",
+	start: "2026-06-10T10:00:00+02:00",
+	end: "2026-06-10T11:30:00+02:00",
+	allDay: false,
+	location: "Room Zuid",
+	notes: "Bring the staffing numbers.",
+	attendees: [
+		{
+			name: "Priya Natarajan",
+			email: "priya@northwind.example",
+			rsvp: "accepted",
+			role: "organizer",
+		},
+	],
+	myRsvp: "accepted",
+	threadId: "",
+	threadSubject: "",
+	timeZone: "Europe/Amsterdam",
+	zoneCertainty: "explicit",
+	recurrenceRule: "",
+	seriesId: "",
+	seriesException: false,
+	status: "confirmed",
+};
+
+const meta: Meta<typeof CalendarEventPane> = {
+	title: "App/Calendar/Event pane",
+	component: CalendarEventPane,
+	parameters: { layout: "fullscreen" },
+	args: { event, calendar, isOccurrence: false, onClose: () => {} },
+	render: (args) => (
+		<div className="h-dvh max-w-xl border-l border-line bg-canvas">
+			<CalendarEventPane {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarEventPane>;
+
+export const Event: Story = {};
+
+/** The series is what the address names; the occurrence is the segment below. */
+export const Occurrence: Story = {
+	args: {
+		event: {
+			...event,
+			title: "Standup",
+			start: "2026-06-11T09:15:00+02:00",
+			end: "2026-06-11T09:30:00+02:00",
+			recurrenceRule: "Every weekday, 09:15",
+			seriesId: "ser_standup",
+		},
+		isOccurrence: 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/CalendarEventPane.tsx

@@ -0,0 +1,67 @@
+import type { CalendarDescriptor, CalendarEventData } from "@remit/ui";
+import { EventDetail } from "@remit/ui";
+import { CalendarDays } from "lucide-react";
+import { formatEventWhen } from "@/lib/calendar-format";
+
+/**
+ * The event the address has open.
+ *
+ * Presentational, like the workspace beside it: the route resolves the event
+ * and turns closing into a navigation, so this renders what it is handed and
+ * nothing else. Editing and deleting arrive with the calendar API, and until
+ * then the header offers neither — a control that leads nowhere is worse than
+ * no control.
+ */
+export interface CalendarEventPaneProps {
+	/** Absent when the address names an event the calendar does not have. */
+	event: CalendarEventData | undefined;
+	calendar: CalendarDescriptor | undefined;
+	/** Whether the address names one occurrence rather than the series. */
+	isOccurrence: boolean;
+	onClose: () => void;
+}
+
+export function CalendarEventPane({
+	event,
+	calendar,
+	isOccurrence,
+	onClose,
+}: CalendarEventPaneProps) {
+	if (!event || !calendar) {
+		return (
+			<div className="flex h-full flex-col items-center justify-center gap-2 bg-surface p-8 text-center">
+				<CalendarDays className="size-8 text-fg-subtle" aria-hidden="true" />
+				<p className="text-sm font-medium text-fg">
+					That event isn't on this week
+				</p>
+				<p className="max-w-xs text-sm text-fg-muted">
+					The address names an event the calendar doesn't have here.
+				</p>
+				<button
+					type="button"
+					onClick={onClose}
+					className="rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg outline-none hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring"
+				>
+					Back to the calendar
+				</button>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex h-full min-h-0 flex-col bg-surface">
+			{isOccurrence && (
+				<p className="shrink-0 border-b border-line bg-surface-sunken px-row-inset py-1.5 text-2xs uppercase tracking-wider text-fg-subtle">
+					One occurrence of a repeating event
+				</p>
+			)}
+			<EventDetail
+				event={event}
+				calendar={calendar}
+				whenText={formatEventWhen(event)}
+				onClose={onClose}
+				className="min-h-0 flex-1"
+			/>
+		</div>
+	);
+}

package/src/components/calendar/CalendarShell.tsx

@@ -0,0 +1,83 @@
+import { AppShellSlotted } from "@remit/ui";
+import { createContext, type ReactNode, useContext } from "react";
+import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
+
+/**
+ * The chrome the calendar shares with mail, published by the `/calendar` layout
+ * and consumed by the view route that mounts the shell.
+ *
+ * It lives in a module reached only through the `@/` alias for the same reason
+ * `lib/mail-context.ts` does: the generated route tree imports route files
+ * relatively, so a context declared inside one would resolve to a second module
+ * instance and hand the consumer an empty default.
+ */
+export interface CalendarShellChrome {
+	/** Below the reading boundary the shell shows one pane, as mail's does. */
+	isSinglePane: boolean;
+	isLoading: boolean;
+	nav: ReactNode;
+	navOpen: boolean;
+	onOpenNav: () => void;
+	onCloseNav: () => void;
+}
+
+const CalendarShellCtx = createContext<CalendarShellChrome | null>(null);
+
+export const CalendarShellProvider = ({
+	chrome,
+	children,
+}: {
+	chrome: CalendarShellChrome;
+	children: ReactNode;
+}) => (
+	<CalendarShellCtx.Provider value={chrome}>
+		{children}
+	</CalendarShellCtx.Provider>
+);
+
+export interface CalendarShellProps {
+	/** The grid, or whatever the current zoom draws. */
+	workspace: ReactNode;
+	/** The open event, from the route below this one. */
+	reading: ReactNode;
+	/** Whether the address has an event or the composer open. */
+	hasOpenEvent: boolean;
+}
+
+/**
+ * The shell the calendar mounts around its own panes.
+ *
+ * `listBias="list"` because the grid is the work rather than an index into it:
+ * a week of columns costs width it cannot give back when a detail opens, which
+ * is the opposite of the split a message list wants.
+ *
+ * Below the reading boundary there is one pane, so the open event replaces the
+ * grid in it — the same swap mail makes, read off the address rather than
+ * decided here.
+ */
+export function CalendarShell({
+	workspace,
+	reading,
+	hasOpenEvent,
+}: CalendarShellProps) {
+	const chrome = useContext(CalendarShellCtx);
+	if (!chrome) return <AppShellSkeleton />;
+
+	const shared = {
+		nav: chrome.nav,
+		skeleton: <AppShellSkeleton />,
+		isLoading: chrome.isLoading,
+		navOpen: chrome.navOpen,
+		onOpenNav: chrome.onOpenNav,
+		onCloseNav: chrome.onCloseNav,
+		listBias: "list" as const,
+	};
+
+	if (chrome.isSinglePane) {
+		return (
+			<AppShellSlotted {...shared} list={hasOpenEvent ? reading : workspace} />
+		);
+	}
+
+	return <AppShellSlotted {...shared} list={workspace} reading={reading} />;
+}

package/src/components/calendar/CalendarViewPlaceholder.tsx

@@ -0,0 +1,37 @@
+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 three 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 {
+	view: CalendarViewId;
+}
+
+export function CalendarViewPlaceholder({
+	view,
+}: CalendarViewPlaceholderProps) {
+	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}`}
+		>
+			<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.
+			</p>
+		</div>
+	);
+}

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

@@ -0,0 +1,197 @@
+import {
+	type CalendarColorId,
+	type CalendarEventData,
+	type CalendarViewId,
+	type Density,
+	NavSidebar,
+} from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { CalendarWorkspace } from "./CalendarWorkspace";
+
+/**
+ * The calendar pane the `/calendar/{view}/{date}` route mounts, at every state
+ * the shipping shell can be in.
+ *
+ * It is presentational: the toolbar's moves leave through callbacks and the
+ * route turns each one into an address, so a story can drive them with local
+ * 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.
+ */
+const TIME_ZONE = "Europe/Amsterdam";
+const DATE = "2026-06-10";
+const NOW = `${DATE}T09:30:00+02:00`;
+
+const WORK = "cal_work";
+const TEAM = "cal_team";
+const HOME = "cal_home";
+
+const colorByCalendarId: Record<string, CalendarColorId> = {
+	[WORK]: "cal-1",
+	[TEAM]: "cal-6",
+	[HOME]: "cal-4",
+};
+
+const template: CalendarEventData = {
+	id: "",
+	calendarId: WORK,
+	title: "",
+	start: "",
+	end: "",
+	allDay: false,
+	location: "",
+	notes: "",
+	attendees: [],
+	myRsvp: "accepted",
+	threadId: "",
+	threadSubject: "",
+	timeZone: TIME_ZONE,
+	zoneCertainty: "explicit",
+	recurrenceRule: "",
+	seriesId: "",
+	seriesException: false,
+	status: "confirmed",
+};
+
+const at = (
+	id: string,
+	title: string,
+	day: string,
+	from: string,
+	to: string,
+	over: Partial<CalendarEventData> = {},
+): CalendarEventData => ({
+	...template,
+	...over,
+	id,
+	title,
+	start: `2026-06-${day}T${from}:00+02:00`,
+	end: `2026-06-${day}T${to}:00+02:00`,
+});
+
+const week: CalendarEventData[] = [
+	at("standup-mon", "Standup", "08", "09:15", "09:30", {
+		recurrenceRule: "Every weekday, 09:15",
+		seriesId: "ser_standup",
+	}),
+	at("roadmap", "Roadmap review", "08", "11:00", "12:00", {
+		calendarId: TEAM,
+	}),
+	at("standup-tue", "Standup", "09", "09:15", "09:30", {
+		recurrenceRule: "Every weekday, 09:15",
+		seriesId: "ser_standup",
+	}),
+	at("supplier", "Supplier call", "09", "14:00", "15:00", {
+		calendarId: TEAM,
+		zoneCertainty: "ambiguous",
+	}),
+	at("standup-wed", "Standup", "10", "09:15", "09:30", {
+		recurrenceRule: "Every weekday, 09:15",
+		seriesId: "ser_standup",
+	}),
+	at("design", "Design review", "10", "10:00", "12:00", {
+		calendarId: TEAM,
+	}),
+	at("dentist", "Dentist", "10", "11:00", "12:00", {
+		calendarId: HOME,
+		location: "Kerkstraat 4",
+	}),
+	at("one-to-one", "One to one", "11", "15:00", "16:00"),
+	at("retro", "Retro", "12", "16:00", "17:00", { calendarId: TEAM }),
+	at("climbing", "Climbing", "13", "10:00", "12:00", { calendarId: HOME }),
+];
+
+/** The shell drives view and date through the router; a story drives its own. */
+function Workspace({
+	initialView,
+	events,
+}: {
+	initialView: CalendarViewId;
+	events: CalendarEventData[];
+}) {
+	const [view, setView] = useState<CalendarViewId>(initialView);
+	const [density, setDensity] = useState<Density>("comfortable");
+	const [selected, setSelected] = useState("");
+	return (
+		<CalendarWorkspace
+			view={view}
+			date={DATE}
+			events={events}
+			colorByCalendarId={colorByCalendarId}
+			density={density}
+			selectedEventId={selected}
+			timeZone={TIME_ZONE}
+			now={NOW}
+			onChangeView={setView}
+			onToday={() => undefined}
+			onStep={() => undefined}
+			onChangeDensity={setDensity}
+			onSelectEvent={setSelected}
+			onPickSlot={() => undefined}
+		/>
+	);
+}
+
+const meta: Meta<typeof Workspace> = {
+	title: "App/Calendar/Workspace",
+	component: Workspace,
+	parameters: { layout: "fullscreen" },
+	args: { initialView: "week", events: week },
+	render: (args) => (
+		<div className="h-dvh bg-canvas">
+			<Workspace {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof Workspace>;
+
+export const Week: Story = {};
+
+export const Day: Story = { args: { initialView: "day" } };
+
+/** Nothing scheduled is still a grid, never a "nothing here" surface. */
+export const EmptyWeek: Story = { args: { events: [] } };
+
+/**
+ * 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.
+ */
+export const YearNotBuiltYet: Story = { args: { initialView: "year" } };
+
+export const MonthNotBuiltYet: Story = { args: { initialView: "month" } };
+
+export const AgendaNotBuiltYet: Story = { args: { initialView: "agenda" } };
+
+/**
+ * The calendar beside the nav it is reached from. The entry sits under the
+ * daily brief, which is where the shipping sidebar puts it.
+ */
+export const WithTheNav: Story = {
+	render: (args) => (
+		<div className="flex h-dvh bg-canvas">
+			<div className="w-64 shrink-0">
+				<NavSidebar
+					accounts={[
+						{
+							id: "acct_work",
+							label: "Work",
+							email: "work@example.invalid",
+							mailboxes: [
+								{ id: "mb_inbox", name: "Inbox", role: "inbox", unseen: 3 },
+								{ id: "mb_sent", name: "Sent", role: "sent" },
+							],
+						},
+					]}
+					selectedNavId="calendar"
+					calendarNav="shown"
+				/>
+			</div>
+			<div className="min-w-0 flex-1">
+				<Workspace {...args} />
+			</div>
+		</div>
+	),
+};

package/src/components/calendar/CalendarWorkspace.tsx

@@ -0,0 +1,162 @@
+import {
+	type CalendarColorId,
+	CalendarDateNav,
+	type CalendarEventData,
+	CalendarGrid,
+	type CalendarSlotPick,
+	type CalendarViewId,
+	CalendarViewSwitch,
+	type Density,
+	segmentClassName,
+} from "@remit/ui";
+import { useId, useState } from "react";
+import { CalendarViewPlaceholder } from "@/components/calendar/CalendarViewPlaceholder";
+import { NavMenuButton } from "@/components/mail/NavMenuButton";
+import { calendarViewMountsGrid } from "@/lib/calendar-route";
+
+/**
+ * The calendar's own pane: the toolbar that moves it and whatever the current
+ * zoom draws.
+ *
+ * Presentational, like everything in `@remit/ui` it is built from. It holds no
+ * events, reads no clock and knows no router: prev, next, today and the zoom
+ * switch all leave through callbacks, and the route turns each one into an
+ * address. That is what keeps "which view" and "which day" facts of the URL
+ * rather than of this component's state.
+ */
+
+const DENSITY_OPTIONS: { value: Density; label: string }[] = [
+	{ value: "comfortable", label: "Detail" },
+	{ value: "compact", label: "Glance" },
+];
+
+export interface CalendarWorkspaceProps {
+	view: CalendarViewId;
+	/** The day the view is centred on, `YYYY-MM-DD`. */
+	date: string;
+	events: CalendarEventData[];
+	colorByCalendarId: Record<string, CalendarColorId>;
+	density: Density;
+	/** The event the reading pane has open, empty for none. */
+	selectedEventId: string;
+	timeZone: string;
+	/** The instant the grid calls now. */
+	now: string;
+	onChangeView: (view: CalendarViewId) => void;
+	onToday: () => void;
+	onChangeDensity: (density: Density) => void;
+	onSelectEvent: (eventId: string) => void;
+	onPickSlot: (pick: CalendarSlotPick) => void;
+	onStep: (direction: -1 | 1) => void;
+}
+
+/**
+ * The range the toolbar names before the grid has measured one, and the whole
+ * answer at a zoom that draws no grid.
+ */
+function fallbackRangeTitle(view: CalendarViewId, date: string): string {
+	const instant = new Date(`${date}T00:00:00`);
+	if (view === "year")
+		return new Intl.DateTimeFormat(undefined, { year: "numeric" }).format(
+			instant,
+		);
+	if (view === "day")
+		return new Intl.DateTimeFormat(undefined, {
+			weekday: "short",
+			day: "numeric",
+			month: "long",
+			year: "numeric",
+		}).format(instant);
+	return new Intl.DateTimeFormat(undefined, {
+		month: "long",
+		year: "numeric",
+	}).format(instant);
+}
+
+export function CalendarWorkspace({
+	view,
+	date,
+	events,
+	colorByCalendarId,
+	density,
+	selectedEventId,
+	timeZone,
+	now,
+	onChangeView,
+	onToday,
+	onChangeDensity,
+	onSelectEvent,
+	onPickSlot,
+	onStep,
+}: CalendarWorkspaceProps) {
+	const densityGroup = useId();
+	// The grid computes the range it drew, which is the only honest title for a
+	// week — it knows where the week starts. Held against the address it was
+	// measured for, so leaving a view does not carry its title into the next one.
+	const [measured, setMeasured] = useState({ key: "", title: "" });
+	const addressKey = `${view}/${date}`;
+	const title =
+		measured.key === addressKey
+			? measured.title
+			: fallbackRangeTitle(view, date);
+
+	return (
+		<div className="flex h-full min-h-0 flex-col bg-surface">
+			<div className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-2">
+				{/* Below the nav pane the sidebar is a slide-over with nothing to open
+				    it: the calendar is a whole surface of its own, so without this
+				    the reader has no way back to their mail. */}
+				<NavMenuButton />
+				<CalendarDateNav
+					title={title}
+					onPrev={() => onStep(-1)}
+					onNext={() => onStep(1)}
+					onToday={onToday}
+				>
+					<fieldset className="inline-flex items-center gap-0.5">
+						<legend className="sr-only">Calendar density</legend>
+						{DENSITY_OPTIONS.map((option) => (
+							<label
+								key={option.value}
+								className={`${segmentClassName(density === option.value)} h-7 text-xs`}
+							>
+								<input
+									type="radio"
+									name={densityGroup}
+									value={option.value}
+									checked={density === option.value}
+									onChange={() => onChangeDensity(option.value)}
+									className="sr-only"
+								/>
+								{option.label}
+							</label>
+						))}
+					</fieldset>
+					<CalendarViewSwitch value={view} onChange={onChangeView} />
+				</CalendarDateNav>
+			</div>
+
+			<div className="min-h-0 flex-1">
+				{calendarViewMountsGrid(view) ? (
+					<CalendarGrid
+						view={view}
+						date={date}
+						events={events}
+						colorByCalendarId={colorByCalendarId}
+						density={density}
+						selectedEventId={selectedEventId}
+						timeZone={timeZone}
+						now={now}
+						onSelectEvent={onSelectEvent}
+						onPickSlot={onPickSlot}
+						onRangeChange={(measuredTitle) =>
+							setMeasured({ key: addressKey, title: measuredTitle })
+						}
+					/>
+				) : (
+					<CalendarViewPlaceholder view={view} />
+				)}
+			</div>
+		</div>
+	);
+}