@remit/web-client 0.0.230 → 0.0.232

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.230",
+  "version": "0.0.232",
   "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,115 @@
+import type { CalendarDescriptor, EventDraft } from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { CalendarComposePane } from "./CalendarComposePane";
+
+/**
+ * `/calendar/{view}/{date}/new`, and the same form reopened over an event being
+ * edited.
+ *
+ * It holds no draft of its own, so a story drives it with local state and gets
+ * the surface the app renders. What the stories are for is what the markup
+ * cannot answer: whether a refusal reads as something to fix rather than as
+ * something broken, and whether an edit scoped to one occurrence makes clear
+ * that the rule is not up for changing.
+ */
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "cal_work",
+		accountId: "acct_work",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: "cal_home",
+		accountId: "acct_work",
+		accountLabel: "Work",
+		name: "Personal",
+		color: "cal-4",
+	},
+];
+
+const draft: EventDraft = {
+	title: "Roadmap review",
+	date: "2026-06-10",
+	startTime: "10:00",
+	endTime: "11:30",
+	allDay: false,
+	calendarId: "cal_work",
+	location: "Room Zuid",
+	guests: "",
+	notes: "",
+	repeat: "",
+};
+
+const meta: Meta<typeof CalendarComposePane> = {
+	title: "App/Calendar/Compose pane",
+	component: CalendarComposePane,
+	parameters: { layout: "fullscreen" },
+	args: {
+		title: "New event",
+		subtitle: "2026-06-10",
+		calendars,
+		draft,
+		problem: "",
+		saveLabel: "Add",
+		isSaving: false,
+		onSave: () => {},
+		onCancel: () => {},
+	},
+	render: function Render(args) {
+		const [current, setCurrent] = useState(args.draft);
+		return (
+			<div className="h-dvh max-w-2xl border-l border-line bg-canvas">
+				<CalendarComposePane {...args} draft={current} onChange={setCurrent} />
+			</div>
+		);
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarComposePane>;
+
+export const NewEvent: Story = {};
+
+/** A refusal says what was wrong and what to do, where the reader is looking. */
+export const Refused: Story = {
+	args: {
+		draft: { ...draft, title: "" },
+		problem: "Give the event a title before saving it.",
+	},
+};
+
+/** The write is out; the button says so rather than looking unpressed. */
+export const Saving: Story = { args: { isSaving: true } };
+
+/**
+ * Editing one morning of a series. The rule belongs to the series, so it reads
+ * back rather than offering itself for change.
+ */
+export const EditingOneOccurrence: Story = {
+	args: {
+		title: "Edit event",
+		subtitle: "This occurrence only",
+		saveLabel: "Save",
+		repeatEditable: false,
+		draft: {
+			...draft,
+			title: "Standup",
+			startTime: "09:15",
+			endTime: "09:30",
+			repeat: "Every weekday, 09:15",
+		},
+	},
+};
+
+/** The version on screen was replaced elsewhere. Nothing is overwritten. */
+export const Conflicted: Story = {
+	args: {
+		title: "Edit event",
+		saveLabel: "Save",
+		problem:
+			"This event changed somewhere else — over CalDAV, or in another tab. Nothing was saved. Close it and open it again to see the version that's stored now.",
+	},
+};

package/src/components/calendar/CalendarComposePane.tsx

@@ -0,0 +1,94 @@
+import {
+	type CalendarDescriptor,
+	type EventDraft,
+	EventEditor,
+	EventEditorPane,
+} from "@remit/ui";
+import { AlertCircle } from "lucide-react";
+
+/**
+ * Writing an event, and editing one.
+ *
+ * Presentational, like the pane it sits beside: it holds no draft of its own
+ * and saves nothing. The route owns the draft and the write, so this renders
+ * the same form whichever of the two the address named.
+ *
+ * Guests are left out because the calendar store has nowhere to put them yet,
+ * which is the kit's default. A field that takes names and drops them is worse
+ * than no field: the reader only finds out afterwards, from an event with
+ * nobody on it.
+ */
+export interface CalendarComposePaneProps {
+	/** What the pane is doing: "New event", "Edit event". */
+	title: string;
+	/** The one line of context the title cannot carry — which day, which series. */
+	subtitle?: string;
+	calendars: CalendarDescriptor[];
+	draft: EventDraft;
+	onChange: (draft: EventDraft) => void;
+	/**
+	 * Why the last save did not happen, in the words the reader needs: what was
+	 * refused and what to do about it. Empty when nothing has been refused.
+	 */
+	problem: string;
+	saveLabel: string;
+	isSaving: boolean;
+	/**
+	 * The rule belongs to the series rather than to one morning of it, so an
+	 * edit scoped to a single occurrence reads it back instead of offering it.
+	 */
+	repeatEditable?: boolean;
+	/**
+	 * Whether the event can still be sent to a different calendar. Writing one
+	 * chooses; editing one cannot, because the collection a resource lives in is
+	 * part of its address and the patch has no field for it.
+	 */
+	calendarEditable?: boolean;
+	onSave: () => void;
+	onCancel: () => void;
+}
+
+export function CalendarComposePane({
+	title,
+	subtitle,
+	calendars,
+	draft,
+	onChange,
+	problem,
+	saveLabel,
+	isSaving,
+	repeatEditable = true,
+	calendarEditable = true,
+	onSave,
+	onCancel,
+}: CalendarComposePaneProps) {
+	return (
+		<EventEditorPane title={title} subtitle={subtitle} onClose={onCancel}>
+			<EventEditor
+				draft={draft}
+				onChange={onChange}
+				calendars={calendars}
+				layout="pane"
+				repeatEditable={repeatEditable}
+				calendarEditable={calendarEditable}
+				saveLabel={isSaving ? "Saving…" : saveLabel}
+				onSave={onSave}
+				onCancel={onCancel}
+				header={
+					problem === "" ? undefined : (
+						<div
+							role="alert"
+							className="flex items-start gap-2 rounded-md border border-danger/40 bg-danger-soft px-3 py-2 text-sm"
+						>
+							<AlertCircle
+								className="mt-0.5 size-4 shrink-0 text-danger"
+								aria-hidden="true"
+							/>
+							<p className="min-w-0 flex-1 break-words text-fg">{problem}</p>
+						</div>
+					)
+				}
+			/>
+		</EventEditorPane>
+	);
+}

package/src/components/calendar/CalendarComposeSeed.tsx

@@ -0,0 +1,35 @@
+import type { CalendarSlotPick } from "@remit/ui";
+import { createContext, type ReactNode, useContext } from "react";
+
+/**
+ * The slot a reader dragged out of the grid, handed to the composer the click
+ * opened.
+ *
+ * It is not in the address on purpose. What a half-written event says is not a
+ * fact about where the reader is, and a link to a composer pre-filled with
+ * somebody else's Tuesday afternoon is not an address worth being able to send.
+ * The composer opened without one starts on the day the calendar is showing.
+ *
+ * It lives in a module reached through the `@/` alias for the same reason
+ * `CalendarShell`'s context does: the generated route tree imports route files
+ * relatively, so a context declared inside one resolves to a second module
+ * instance and hands the consumer an empty default.
+ */
+const CalendarComposeSeedCtx = createContext<CalendarSlotPick | undefined>(
+	undefined,
+);
+
+export const CalendarComposeSeedProvider = ({
+	pick,
+	children,
+}: {
+	pick: CalendarSlotPick | undefined;
+	children?: ReactNode;
+}) => (
+	<CalendarComposeSeedCtx.Provider value={pick}>
+		{children}
+	</CalendarComposeSeedCtx.Provider>
+);
+
+export const useCalendarComposeSeed = (): CalendarSlotPick | undefined =>
+	useContext(CalendarComposeSeedCtx);

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

@@ -0,0 +1,110 @@
+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,
+		problem: "",
+		onEdit: () => {},
+		onDelete: () => {},
+		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 },
+};
+
+/**
+ * The event was replaced somewhere else — over CalDAV, or in another tab —
+ * between it being read and the write going out. Nothing was overwritten, and
+ * the pane says so where the reader is looking rather than anywhere else.
+ */
+export const ChangedElsewhere: Story = {
+	args: {
+		problem:
+			"This event changed somewhere else — over CalDAV, or in another tab. Nothing was saved. Close it and open it again to see the version that's stored now.",
+	},
+};
+
+/**
+ * The resource has not been read yet, so there is no version to write against.
+ * The controls stay off until there is: a write with no etag is one that can
+ * quietly overwrite somebody.
+ */
+export const NotWritableYet: Story = {
+	args: { onEdit: undefined, onDelete: undefined },
+};

package/src/components/calendar/CalendarEventPane.tsx

@@ -0,0 +1,90 @@
+import type { CalendarDescriptor, CalendarEventData } from "@remit/ui";
+import { EventDetail } from "@remit/ui";
+import { AlertCircle, 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, editing and deleting into things it does, so this renders
+ * what it is handed and nothing else. Each control appears only when the route
+ * gave it somewhere to go — a control that leads nowhere is worse than none.
+ */
+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;
+	/**
+	 * A write that did not happen, stated where the reader is looking. Empty
+	 * when the last one did.
+	 */
+	problem?: string;
+	onEdit?: () => void;
+	onDelete?: () => void;
+	onClose: () => void;
+}
+
+export function CalendarEventPane({
+	event,
+	calendar,
+	isOccurrence,
+	problem = "",
+	onEdit,
+	onDelete,
+	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>
+			)}
+			{problem !== "" && (
+				<div
+					role="alert"
+					className="flex shrink-0 items-start gap-2 border-b border-danger/40 bg-danger-soft px-row-inset py-2 text-sm"
+				>
+					<AlertCircle
+						className="mt-0.5 size-4 shrink-0 text-danger"
+						aria-hidden="true"
+					/>
+					<p className="min-w-0 flex-1 break-words text-fg">{problem}</p>
+				</div>
+			)}
+			<EventDetail
+				event={event}
+				calendar={calendar}
+				whenText={formatEventWhen(event)}
+				onEdit={onEdit}
+				onDelete={onDelete}
+				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>
+	);
+}