@remit/web-client 0.0.325 → 0.0.326

package/dist/src/components/calendar/CalendarWaiting.d.ts

@@ -0,0 +1,25 @@
+import { type CalendarSuggestionIntel } from "@remit/ui";
+import type { ReactNode } from "react";
+/**
+ * What the mail is still asking about time, beside the calendar it would land
+ * on. One reading at a time, as a deck: each is a decision, and the reader
+ * makes it with the week in view rather than from a list of them.
+ *
+ * Presentational. The readings, the answer on its way and the refusal all come
+ * in from the host, which reads them off the server.
+ */
+export interface CalendarWaitingProps {
+    suggestions: CalendarSuggestionIntel[];
+    /** An answer to the top reading is on its way. */
+    busy: boolean;
+    /** Why the last answer did not land. Empty when it did. */
+    failure: string;
+    /** A prefilled issue report for the failure above. */
+    reportHref?: string;
+    /** Why nothing can be added yet, with the way past it; holds Add. */
+    addBlocked?: ReactNode;
+    onAdd: (suggestionId: string) => void;
+    onChangeFirst?: (suggestionId: string) => void;
+    onDismiss: (suggestionId: string) => void;
+}
+export declare function CalendarWaiting({ suggestions, busy, failure, reportHref, addBlocked, onAdd, onChangeFirst, onDismiss, }: CalendarWaitingProps): import("react").JSX.Element;

package/dist/src/components/calendar/CalendarWaiting.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarFailureNote, CalendarSuggestionDeck, EventSuggestionCard, settleZone, ZONE_UNSETTLED_REASON, } from "@remit/ui";
+import { Sparkles } from "lucide-react";
+export function CalendarWaiting({ suggestions, busy, failure, reportHref, addBlocked, onAdd, onChangeFirst, onDismiss, }) {
+    const top = suggestions[0];
+    const settlement = top ? settleZone(top.suggestion, "") : undefined;
+    return (_jsxs("aside", { "aria-label": "Waiting for you", className: "hidden w-72 shrink-0 flex-col gap-2 overflow-y-auto border-r border-line bg-surface-sunken py-3 lg:flex", children: [_jsxs("h3", { className: "flex items-center gap-1.5 px-row-inset text-2xs font-semibold uppercase tracking-wider text-fg-subtle", children: [_jsx(Sparkles, { className: "size-3", "aria-hidden": true }), "Waiting for you"] }), failure !== "" && (_jsx(CalendarFailureNote, { text: failure, reportHref: reportHref, className: "mx-row-inset" })), addBlocked !== undefined && (_jsx("div", { className: "mx-row-inset rounded-md border border-warning/40 bg-warning-soft p-2 text-xs text-fg", children: addBlocked })), _jsx(CalendarSuggestionDeck, { className: "px-row-inset", hasCard: top !== undefined, remaining: suggestions.length, blocked: settlement !== undefined && !settlement.settled, blockedReason: ZONE_UNSETTLED_REASON, onConfirm: () => {
+                    if (top && !busy && addBlocked === undefined)
+                        onAdd(top.suggestion.id);
+                }, onReject: () => {
+                    if (top && !busy)
+                        onDismiss(top.suggestion.id);
+                }, children: top && (_jsx(EventSuggestionCard, { suggestion: top.suggestion, whenText: top.whenText, onAdd: () => onAdd(top.suggestion.id), onReview: onChangeFirst && (() => onChangeFirst(top.suggestion.id)), onDismiss: () => onDismiss(top.suggestion.id), addLabel: "Add to calendar", busy: busy, addBlocked: addBlocked !== undefined })) }), _jsx("p", { className: "px-row-inset text-2xs text-fg-subtle", children: "None of this is on your calendar until you add it. Adding sends the organiser nothing." })] }));
+}

package/dist/src/components/calendar/CalendarWorkspace.d.ts

@@ -0,0 +1,49 @@
+import { type CalendarColorId, type CalendarEventData, type CalendarSlotPick, type CalendarViewId, type Density } from "@remit/ui";
+import { type ReactNode } from "react";
+export interface CalendarWorkspaceProps {
+    view: CalendarViewId;
+    /** The day the view is centred on, `YYYY-MM-DD`. */
+    date: string;
+    events: CalendarEventData[];
+    colorByCalendarId: Record<string, CalendarColorId>;
+    /**
+     * The strip, at the one zoom that draws it. A slot rather than something
+     * built here because it loads its own days over a rolling range, and this
+     * pane holds no events and knows no router.
+     */
+    agenda: ReactNode;
+    /**
+     * What the mail is still asking about time, beside whichever zoom is drawn.
+     * A slot for the reason the strip is one: it reads its own data.
+     */
+    waiting?: ReactNode;
+    /** The first read of this window is still out; the grid has nothing yet. */
+    isLoading?: boolean;
+    /**
+     * A refusal the calendar states in place of the grid. A week drawn empty
+     * because the read failed is indistinguishable from a week with nothing in
+     * it, which is the one thing this must never look like.
+     */
+    error?: unknown;
+    onRetry?: () => void;
+    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;
+    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.
+     */
+    touch?: boolean;
+}
+export declare function CalendarWorkspace({ view, date, events, colorByCalendarId, agenda, waiting, isLoading, error, onRetry, density, selectedEventId, timeZone, now, onChangeView, onToday, onChangeDensity, onSelectEvent, onPickSlot, onStep, dayHref, onZoomDay, touch, }: CalendarWorkspaceProps): import("react").JSX.Element;

package/dist/src/components/calendar/CalendarWorkspace.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDateNav, CalendarGrid, CalendarViewSwitch, ErrorState, Segmented, } from "@remit/ui";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import { calendarViewMountsAgenda, calendarViewMountsGrid, } from "../../lib/calendar-route";
+import { NavMenuButton } from "../mail/NavMenuButton";
+import { CalendarViewPlaceholder } from "./CalendarViewPlaceholder";
+/**
+ * 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 PHONE_VIEWS = ["month", "week", "day", "agenda"];
+const DENSITY_OPTIONS = [
+    { value: "comfortable", label: "Detail", shortLabel: "Detail" },
+    { value: "compact", label: "Glance", shortLabel: "Glance" },
+];
+/**
+ * The range the toolbar names before the grid has measured one, and the whole
+ * answer for a week and at a zoom that draws no grid.
+ */
+function fallbackRangeTitle(view, date) {
+    const instant = new Date(`${date}T00:00:00`);
+    if (view === "year")
+        return new Intl.DateTimeFormat(undefined, { year: "numeric" }).format(instant);
+    if (view === "week") {
+        const monday = new Date(instant);
+        monday.setDate(instant.getDate() - ((instant.getDay() + 6) % 7));
+        const sunday = new Date(monday);
+        sunday.setDate(monday.getDate() + 6);
+        return new Intl.DateTimeFormat(undefined, {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+        }).formatRange(monday, sunday);
+    }
+    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, agenda, waiting, isLoading = false, error, onRetry, density, selectedEventId, timeZone, now, onChangeView, onToday, onChangeDensity, onSelectEvent, onPickSlot, onStep, dayHref, onZoomDay, touch = false, }) {
+    // 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 = view !== "week" && measured.key === addressKey
+        ? measured.title
+        : fallbackRangeTitle(view, date);
+    const dateNav = (_jsx(CalendarDateNav, { title: title, onPrev: () => onStep(-1), onNext: () => onStep(1), onToday: onToday, touch: touch }));
+    const densitySwitch = (_jsx(Segmented, { ariaLabel: "Calendar density", options: DENSITY_OPTIONS, value: density, onChange: onChangeDensity, touch: touch, className: "shrink-0" }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col bg-surface", children: [touch ? (_jsxs("div", { className: "flex shrink-0 flex-col gap-1 border-b border-line px-2 pb-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(NavMenuButton, {}), _jsx("div", { className: "min-w-0 flex-1", children: dateNav })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CalendarViewSwitch, { value: view, onChange: onChangeView, views: PHONE_VIEWS, touch: true, className: "flex-1" }), densitySwitch] })] })) : (_jsxs("div", { className: "flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-2", children: [_jsx(NavMenuButton, {}), _jsx("div", { className: "min-w-0 flex-1", children: dateNav }), densitySwitch, _jsx(CalendarViewSwitch, { value: view, onChange: onChangeView })] })), _jsxs("div", { className: "flex min-h-0 flex-1", children: [waiting, calendarViewMountsAgenda(view) ? (_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: agenda })) : (_jsx("div", { className: "min-h-0 min-w-0 flex-1", children: error !== undefined && error !== null ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(ErrorState, { title: "Couldn't load this week", error: error, onRetry: onRetry }) })) : isLoading ? (_jsx("div", { role: "status", "aria-label": "Loading the calendar", className: "flex h-full items-center justify-center bg-surface", children: _jsx(Loader2, { className: "size-6 animate-spin text-fg-subtle" }) })) : calendarViewMountsGrid(view) ? (_jsx(CalendarGrid, { view: view, date: date, events: events, colorByCalendarId: colorByCalendarId, density: density, selectedEventId: selectedEventId, timeZone: timeZone, now: now, onSelectEvent: onSelectEvent, onPickSlot: onPickSlot, dayHref: dayHref, onZoomDay: onZoomDay, onRangeChange: (measuredTitle) => setMeasured({ key: addressKey, title: measuredTitle }) })) : (_jsx(CalendarViewPlaceholder, {})) }))] })] }));
+}

package/dist/src/components/calendar/ChangeCalendarSuggestion.d.ts

@@ -0,0 +1,5 @@
+export interface ChangeCalendarSuggestionProps {
+    suggestionId: string;
+    onClose: () => void;
+}
+export declare function ChangeCalendarSuggestion({ suggestionId, onClose, }: ChangeCalendarSuggestionProps): import("react").JSX.Element;

package/dist/src/components/calendar/ChangeCalendarSuggestion.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CalendarFailureNote, EmptyState, EventEditorPane, } from "@remit/ui";
+import { useEffect, useState } from "react";
+import { acceptEditedInputFromDrafts, anchorZoneFor, deviceTimeZone, draftFromSuggestion, UNZONED_CALENDAR, useCalendarSuggestionAnswers, useCalendars, useDraftClashes, usePendingCalendarSuggestion, } from "../../hooks/calendar";
+import { calendarReportHref } from "../../lib/calendar-report";
+import { suggestionWhen } from "../../lib/calendar-suggestion";
+import { CalendarComposePane } from "./CalendarComposePane";
+const TITLE = "Add from mail";
+const AMBIGUOUS_NOTICE = "The invitation named a time zone nothing could resolve. The time below is as the mail wrote it — check it before adding.";
+export function ChangeCalendarSuggestion({ suggestionId, onClose, }) {
+    const { suggestion: pending, isLoading, error, } = usePendingCalendarSuggestion(suggestionId);
+    const found = pending ?? undefined;
+    const [held, setHeld] = useState(undefined);
+    if (found !== undefined && held === undefined)
+        setHeld(found);
+    const suggestion = held ?? found;
+    if (suggestion !== undefined)
+        return (_jsx(SuggestionEditor, { suggestion: suggestion, onClose: onClose }, suggestion.suggestionId));
+    if (error !== null) {
+        const text = "Couldn't read what your mail is waiting on.";
+        return (_jsx(EventEditorPane, { title: TITLE, onClose: onClose, children: _jsx(CalendarFailureNote, { text: `${text} Close this and try again.`, reportHref: calendarReportHref(text), className: "m-row-inset" }) }));
+    }
+    return (_jsx(EventEditorPane, { title: TITLE, onClose: onClose, children: _jsx(EmptyState, { message: isLoading
+                ? "Reading the suggestion…"
+                : "This suggestion is no longer waiting on you. It was answered, or a later message replaced it." }) }));
+}
+function SuggestionEditor({ suggestion, onClose }) {
+    const { calendars: held, defaultCalendarId, timeZoneByCalendarId, } = useCalendars();
+    const calendars = held.filter((calendar) => !calendar.readOnly);
+    const answers = useCalendarSuggestionAnswers();
+    const [seed] = useState(() => draftFromSuggestion(suggestion, "", deviceTimeZone()));
+    const [draft, setDraft] = useState(seed);
+    const [problem, setProblem] = useState("");
+    const clashes = useDraftClashes(draft);
+    const initialCalendarId = calendars.some((calendar) => calendar.id === defaultCalendarId)
+        ? defaultCalendarId
+        : (calendars[0]?.id ?? "");
+    useEffect(() => {
+        if (initialCalendarId === "")
+            return;
+        setDraft((current) => current.calendarId === ""
+            ? { ...current, calendarId: initialCalendarId }
+            : current);
+    }, [initialCalendarId]);
+    const save = () => {
+        const built = acceptEditedInputFromDrafts(suggestion, seed, draft, {
+            clock: deviceTimeZone(),
+            anchor: anchorZoneFor(timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR),
+        });
+        if (!built.ok) {
+            setProblem(built.problem);
+            return;
+        }
+        setProblem("");
+        void answers
+            .acceptEdited(suggestion.suggestionId, built.input)
+            .then((answer) => {
+            if (answer.kind === "answered") {
+                onClose();
+                return;
+            }
+            setProblem(`Couldn't add this to your calendar: ${answer.message}`);
+        });
+    };
+    return (_jsx(CalendarComposePane, { title: TITLE, subtitle: suggestionWhen(suggestion), notice: suggestion.zoneCertainty === "Ambiguous" ? AMBIGUOUS_NOTICE : "", calendars: calendars, draft: draft, onChange: setDraft, problem: problem, saveLabel: "Add", isSaving: answers.isAnswering, repeatEditable: false, clashes: clashes, onSave: save, onCancel: onClose }));
+}

package/dist/src/components/calendar/OpenCalendarEvent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The event the address names, resolved — and everything a reader can do to it.
+ *
+ * The two event routes differ only in what the address says, so the lookup, the
+ * scope question and the way back live here once rather than in each of them.
+ *
+ * An edit or a delete on a repeating event asks which occurrences it means
+ * before the form opens, not on the way out: which instances it reaches changes
+ * what the change is, so it is settled while it can still be answered.
+ *
+ * Every write carries the etag of the version on screen. A 412 means somebody
+ * replaced the event in between, and it is said out loud rather than resolved
+ * by overwriting them.
+ */
+export interface OpenCalendarEventProps {
+    calendarObjectId: string;
+    /** One occurrence of a series, absent on the series itself. */
+    recurrenceId?: string;
+}
+export declare function OpenCalendarEvent({ calendarObjectId, recurrenceId, }: OpenCalendarEventProps): import("react").JSX.Element;

package/dist/src/components/calendar/OpenCalendarEvent.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RecurrenceScopePrompt, } from "@remit/ui";
+import { Navigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { SignInAgain } from "../../auth/SignInAgain";
+import { calendarInstanceId, deviceTimeZone, draftFromEvent, emptyDraft, isoOnClock, moveRule, patchFromDrafts, rruleFromIcalData, seriesOccurrenceOf, storedAnchorZone, textFromIcalData, textFromRrule, UNZONED_CALENDAR, useCalendarEvent, useCalendarJump, useCalendars, useCalendarWrites, useDraftClashes, } from "../../hooks/calendar";
+import { useCalendarData } from "../../hooks/useCalendarData";
+import { formatEventWhen } from "../../lib/calendar-format";
+import { calendarEventReportHref } from "../../lib/calendar-report";
+import { subscriptionReadOnlyNote } from "../../lib/calendar-subscription";
+import { useCalendarAddress, useCalendarNavigation } from "../../routing";
+import { CalendarComposePane } from "./CalendarComposePane";
+import { CalendarEventPane, } from "./CalendarEventPane";
+const CONFLICT = "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.";
+const absenceOf = (search, loading) => {
+    switch (search.kind) {
+        case "Deleted":
+        case "NoOccurrenceFound":
+            return { kind: search.kind };
+        case "SignedOut":
+            return { kind: "SignedOut", signIn: _jsx(SignInAgain, {}) };
+        case "Failed":
+            return {
+                kind: "Failed",
+                reason: search.reason,
+                reportHref: calendarEventReportHref(`opening an event failed: ${search.reason}`),
+            };
+        case "Searching":
+            return { kind: "Finding" };
+        default:
+            return { kind: loading ? "Finding" : "NotInView" };
+    }
+};
+export function OpenCalendarEvent({ calendarObjectId, recurrenceId, }) {
+    const { view, date, calendarIds } = useCalendarAddress();
+    const { events, isLoading } = useCalendarData({ view, date, calendarIds });
+    const { calendars, collections, timeZoneByCalendarId } = useCalendars();
+    const { closeEvent } = useCalendarNavigation();
+    const { updateEvent, deleteEvent, isWriting } = useCalendarWrites();
+    const event = events.find((candidate) => candidate.id === calendarInstanceId(calendarObjectId, recurrenceId ?? ""));
+    const seriesOnly = recurrenceId === undefined && event === undefined;
+    const occurrence = seriesOnly
+        ? seriesOccurrenceOf(events, calendarObjectId, new Date().toISOString())
+        : undefined;
+    const search = useCalendarJump(calendarObjectId, seriesOnly && !isLoading && occurrence === undefined);
+    const calendar = calendars.find((candidate) => candidate.id === event?.calendarId);
+    const { resource } = useCalendarEvent(calendarObjectId, event?.calendarId ?? "");
+    const [asking, setAsking] = useState(undefined);
+    const [editing, setEditing] = useState(undefined);
+    const [draft, setDraft] = useState(undefined);
+    const [problem, setProblem] = useState("");
+    const clashes = useDraftClashes(draft ?? emptyDraft("", ""), calendarObjectId);
+    const stored = resource ? textFromIcalData(resource.icalData) : undefined;
+    const rrule = resource ? rruleFromIcalData(resource.icalData) : "";
+    const startTime = event && !event.allDay ? event.start.slice(11, 16) : "";
+    const anchor = resource
+        ? storedAnchorZone(resource.icalData, timeZoneByCalendarId[event?.calendarId ?? ""] ?? UNZONED_CALENDAR)
+        : UNZONED_CALENDAR;
+    const shownRule = event && !event.allDay
+        ? moveRule(rrule, isoOnClock(event.start, anchor === "" ? "UTC" : anchor).slice(0, 10), event.start.slice(0, 10))
+        : rrule;
+    const repeat = rrule === "" ? "" : (textFromRrule(shownRule, startTime) ?? "Repeats");
+    // Scoping needs the occurrence to anchor at, so it is offered only where the
+    // address names one. A series opened by itself has one honest answer, which
+    // is the whole of it.
+    const canScope = event !== undefined &&
+        event.seriesId !== "" &&
+        recurrenceId !== undefined &&
+        recurrenceId !== "";
+    // Until the resource is read there is no etag, and a write with no etag is a
+    // write that can silently overwrite somebody.
+    const writable = event !== undefined && resource !== undefined && !calendar?.readOnly;
+    const settle = (outcome, done) => {
+        if (outcome.kind === "written") {
+            setProblem("");
+            done();
+            return;
+        }
+        setProblem(outcome.kind === "conflict" ? CONFLICT : outcome.message);
+    };
+    const write = (scope) => ({
+        calendarObjectId,
+        calendarId: event?.calendarId ?? "",
+        recurrenceId: recurrenceId ?? "",
+        scope,
+        etag: resource?.etag ?? "",
+    });
+    const startEdit = (scope) => {
+        if (!event)
+            return;
+        const before = draftFromEvent(event, {
+            repeat,
+            location: stored?.location ?? "",
+            notes: stored?.description ?? "",
+        });
+        setAsking(undefined);
+        setEditing({ before, scope });
+        setDraft(before);
+        setProblem("");
+    };
+    const removeEvent = (scope) => {
+        setAsking(undefined);
+        void deleteEvent(write(scope)).then((outcome) => settle(outcome, closeEvent));
+    };
+    const saveEdit = () => {
+        if (!editing || !draft)
+            return;
+        const patch = patchFromDrafts(editing.before, draft, {
+            clock: deviceTimeZone(),
+            anchor,
+        });
+        if (!patch.ok) {
+            setProblem(patch.problem);
+            return;
+        }
+        void updateEvent(write(editing.scope), patch.patch).then((outcome) => settle(outcome, () => {
+            setEditing(undefined);
+            setDraft(undefined);
+        }));
+    };
+    if (occurrence) {
+        return (_jsx(Navigate, { to: "/calendar/$view/$date/$calendarObjectId/$recurrenceId", params: {
+                view,
+                date,
+                calendarObjectId,
+                recurrenceId: occurrence.recurrenceId,
+            }, search: true, hash: true, replace: true }));
+    }
+    const jump = search.kind === "Found" ? search.jump : undefined;
+    const hidden = jump !== undefined &&
+        calendarIds.length > 0 &&
+        !calendarIds.includes(jump.calendarId);
+    if (jump && (jump.date !== date || hidden)) {
+        const shown = hidden
+            ? (previous) => ({
+                ...previous,
+                calendarId: [...calendarIds, jump.calendarId],
+            })
+            : true;
+        return jump.recurrenceId === "" ? (_jsx(Navigate, { to: "/calendar/$view/$date/$calendarObjectId", params: { view, date: jump.date, calendarObjectId }, search: shown, hash: true, replace: true })) : (_jsx(Navigate, { to: "/calendar/$view/$date/$calendarObjectId/$recurrenceId", params: {
+                view,
+                date: jump.date,
+                calendarObjectId,
+                recurrenceId: jump.recurrenceId,
+            }, search: shown, hash: true, replace: true }));
+    }
+    if (asking !== undefined && event) {
+        return (_jsx("div", { className: "flex h-full flex-col justify-center bg-surface px-row-inset", children: _jsx(RecurrenceScopePrompt, { className: "mx-auto w-full max-w-md", title: event.title, ruleText: repeat === "" ? "It repeats" : repeat, instanceText: formatEventWhen(event), onChoose: asking === "edit" ? startEdit : removeEvent, onCancel: () => setAsking(undefined) }) }));
+    }
+    if (editing && draft) {
+        return (_jsx(CalendarComposePane, { title: "Edit event", subtitle: editing.scope === "this" ? "This occurrence only" : draft.date, calendars: calendars, draft: draft, onChange: setDraft, problem: problem, saveLabel: "Save", isSaving: isWriting, repeatEditable: editing.scope === undefined || editing.scope === "all", calendarEditable: false, clashes: clashes, onSave: saveEdit, onCancel: () => {
+                setEditing(undefined);
+                setDraft(undefined);
+                setProblem("");
+            } }));
+    }
+    return (_jsx(CalendarEventPane, { event: event && {
+            ...event,
+            location: stored?.location ?? "",
+            notes: stored?.description ?? "",
+            recurrenceRule: repeat,
+        }, calendar: calendar, readOnlyNote: calendar?.readOnly
+            ? subscriptionReadOnlyNote(collections.find((collection) => collection.calendarId === calendar.id)?.subscriptionUrl ?? "")
+            : "", isOccurrence: recurrenceId !== undefined, absence: absenceOf(search, seriesOnly && isLoading), problem: problem, onEdit: writable
+            ? () => (canScope ? setAsking("edit") : startEdit(undefined))
+            : undefined, onDelete: writable
+            ? () => (canScope ? setAsking("delete") : removeEvent(undefined))
+            : undefined, onClose: closeEvent }));
+}

package/dist/src/components/calendar/PendingSuggestions.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Every reading still waiting on the reader, read off the server and answered
+ * through it. Nothing is drawn when nothing is waiting: an empty column beside
+ * the grid is width the week could have had.
+ */
+export interface PendingSuggestionsProps {
+    onChangeFirst: (suggestionId: string, date: string) => void;
+}
+export declare function PendingSuggestions({ onChangeFirst }: PendingSuggestionsProps): import("react").JSX.Element | null;

package/dist/src/components/calendar/PendingSuggestions.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useCalendarSuggestionAnswers, useCalendars, usePendingCalendarSuggestions, } from "../../hooks/calendar";
+import { calendarReportHref } from "../../lib/calendar-report";
+import { suggestionDate, suggestionWhen, toEventSuggestion, } from "../../lib/calendar-suggestion";
+import { calendarUnavailable, calendarWriteGate } from "./CalendarUnavailable";
+import { CalendarWaiting } from "./CalendarWaiting";
+const refusal = (what, answer) => answer.kind === "refused" ? `Couldn't ${what}: ${answer.message}` : "";
+export function PendingSuggestions({ onChangeFirst }) {
+    const { suggestions, error } = usePendingCalendarSuggestions();
+    const calendars = useCalendars();
+    const { defaultCalendarId } = calendars;
+    const answers = useCalendarSuggestionAnswers();
+    const [failure, setFailure] = useState("");
+    const deck = suggestions.map((suggestion) => ({
+        suggestion: toEventSuggestion(suggestion, {
+            threadId: "",
+            threadSubject: "",
+            calendarId: defaultCalendarId,
+            sender: suggestion.organizer === "" ? "From your mail" : suggestion.organizer,
+        }),
+        whenText: suggestionWhen(suggestion),
+    }));
+    const readFailure = error === null ? "" : "Couldn't read what your mail is waiting on.";
+    if (deck.length === 0 && readFailure === "" && failure === "")
+        return null;
+    const reportHref = calendarReportHref(readFailure || failure || "pending invitations could not be answered");
+    const changeFirst = (suggestionId) => {
+        const suggestion = suggestions.find((candidate) => candidate.suggestionId === suggestionId);
+        if (suggestion)
+            onChangeFirst(suggestionId, suggestionDate(suggestion));
+    };
+    const unplaced = (suggestionId) => {
+        const suggestion = suggestions.find((candidate) => candidate.suggestionId === suggestionId);
+        return (suggestion?.zoneCertainty === "Ambiguous" &&
+            suggestion.method !== "Cancel");
+    };
+    const topIsCancellation = suggestions[0]?.method === "Cancel";
+    const answer = (what, request) => {
+        setFailure("");
+        void request().then((result) => setFailure(refusal(what, result)));
+    };
+    return (_jsx(CalendarWaiting, { suggestions: deck, busy: answers.isAnswering, failure: readFailure || failure, reportHref: reportHref, addBlocked: calendarUnavailable(calendarWriteGate(calendars), reportHref), onAdd: (suggestionId) => {
+            if (unplaced(suggestionId)) {
+                changeFirst(suggestionId);
+                return;
+            }
+            answer("add this to your calendar", () => answers.accept(suggestionId, defaultCalendarId));
+        }, onChangeFirst: topIsCancellation ? undefined : changeFirst, onDismiss: (suggestionId) => answer("dismiss this", () => answers.dismiss(suggestionId, false)) }));
+}

package/dist/src/components/calendar/WriteCalendarEvent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Writing a new event.
+ *
+ * The draft starts on the slot the reader dragged out of the grid, or on the
+ * day the calendar is showing when they opened the composer some other way. The
+ * write goes through the same service function every other path uses, so an
+ * event typed here, one accepted from an invitation and one written over CalDAV
+ * are the same bytes stored the same way.
+ */
+export interface WriteCalendarEventProps {
+    onClose: () => void;
+}
+export declare function WriteCalendarEvent({ onClose }: WriteCalendarEventProps): import("react").JSX.Element;

package/dist/src/components/calendar/WriteCalendarEvent.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { anchorZoneFor, createInputFromDraft, deviceTimeZone, emptyDraft, UNZONED_CALENDAR, useCalendars, useCalendarWrites, useDraftClashes, } from "../../hooks/calendar";
+import { useCalendarAddress } from "../../routing";
+import { CalendarComposePane } from "./CalendarComposePane";
+import { useCalendarComposeSeed } from "./CalendarComposeSeed";
+export function WriteCalendarEvent({ onClose }) {
+    const { date } = useCalendarAddress();
+    const seed = useCalendarComposeSeed();
+    const { calendars: held, timeZoneByCalendarId } = useCalendars();
+    const calendars = held.filter((calendar) => !calendar.readOnly);
+    const { createEvent, isWriting } = useCalendarWrites();
+    const [problem, setProblem] = useState("");
+    const [draft, setDraft] = useState(() => {
+        const blank = emptyDraft(seed?.date ?? date, "");
+        if (!seed)
+            return blank;
+        return {
+            ...blank,
+            allDay: seed.allDay,
+            startTime: seed.allDay ? "" : seed.startTime,
+            endDate: seed.endDate,
+            endTime: seed.allDay ? "" : seed.endTime,
+        };
+    });
+    const clashes = useDraftClashes(draft);
+    // The default calendar is provisioned by the listing itself, so the picker
+    // has one the moment the calendars arrive rather than making the reader
+    // choose before they can type anything.
+    const firstCalendarId = calendars[0]?.id ?? "";
+    useEffect(() => {
+        if (firstCalendarId === "")
+            return;
+        setDraft((current) => current.calendarId === ""
+            ? { ...current, calendarId: firstCalendarId }
+            : current);
+    }, [firstCalendarId]);
+    const save = () => {
+        const built = createInputFromDraft(draft, {
+            clock: deviceTimeZone(),
+            anchor: anchorZoneFor(timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR),
+        });
+        if (!built.ok) {
+            setProblem(built.problem);
+            return;
+        }
+        void createEvent(built.input).then((outcome) => {
+            if (outcome.kind === "written") {
+                setProblem("");
+                onClose();
+                return;
+            }
+            setProblem(outcome.kind === "conflict"
+                ? "This calendar changed while you were writing. Close the form and try again."
+                : outcome.message);
+        });
+    };
+    return (_jsx(CalendarComposePane, { title: "New event", subtitle: draft.date, calendars: calendars, draft: draft, onChange: setDraft, problem: problem, saveLabel: "Add", isSaving: isWriting, clashes: clashes, onSave: save, onCancel: onClose }));
+}

package/dist/src/components/calendar/calendar-story-fixtures.d.ts

@@ -0,0 +1,21 @@
+import type { RemitImapCalendarEventInstance, RemitImapCalendarEventResponse, RemitImapCalendarResponse } from "@remit/api-http-client/types.gen.ts";
+/**
+ * The synthetic account the calendar stories read.
+ *
+ * One collection, on a real zone, with occurrences spelled the way the listing
+ * spells them. Nothing here is anybody's data: the ids are fixed strings and the
+ * week is one the calendar will never be looking at by accident.
+ */
+export declare const WORK_CALENDAR = "11111111-1111-4111-8111-111111111111";
+export declare const ROADMAP_OBJECT = "aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa";
+export declare const STANDUP_OBJECT = "bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb";
+export declare const STANDUP_RECURRENCE = "2026-06-10T07:15:00Z";
+export declare const STORY_DATE = "2026-06-10";
+export declare const STORY_WEEK = "/calendar/week/2026-06-10";
+export declare const calendars: RemitImapCalendarResponse[];
+export declare const roadmap: RemitImapCalendarEventInstance;
+export declare const standup: RemitImapCalendarEventInstance;
+/** A fortnight that is mostly empty, which is what a real fortnight looks like. */
+export declare const fortnight: RemitImapCalendarEventInstance[];
+export declare const roadmapResource: RemitImapCalendarEventResponse;
+export declare const standupResource: RemitImapCalendarEventResponse;