@rapidmx/web-client 0.14.1 → 0.16.0

package/dist/apps/shared/components/calendar/TimeGridView.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { EventAnchor } from "./EventShell.js";
 export interface TimeGridViewProps {
     /** One day for the Day view, seven for the Week view, five for the Work Week view. */
     days: Date[];
@@ -8,8 +9,9 @@ export interface TimeGridViewProps {
     /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
     folderColors: Record<string, string>;
     onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. */
-    onSelectSlot: (start: Date, end: Date) => void;
+    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. `anchor` is the slot, for the
+     * quick-create popover to open beside. */
+    onSelectSlot: (start: Date, end: Date, anchor: EventAnchor) => void;
 }
 /** An hourly time grid (Week, Work Week, or Day view — they share all their rendering/drag logic and
  * differ only in how many day columns are shown), with a day-header row and all-day events in a

package/dist/apps/shared/components/calendar/TimeGridView.js

@@ -3,6 +3,7 @@ import { useDraggable, useDroppable } from "@dnd-kit/core";
 import { addDays, addMinutes, format, isToday, startOfDay } from "date-fns";
 import { eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
 import { occursOnDay, startsOnDay } from "./allDay.js";
+import { anchorOf } from "./EventShell.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
 const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
@@ -13,7 +14,7 @@ const HOURS = Array.from({ length: 24 }, (_, h) => h);
 export default function TimeGridView({ days, occurrences, folderColors, onSelectEvent, onSelectSlot }) {
     const allDayEvents = occurrences.filter((occ) => occ.allDay);
     const timedEvents = occurrences.filter((occ) => !occ.allDay);
-    return (_jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: ["flex-1 min-w-0 py-1 text-center text-xs font-semibold border-l border-border", isToday(day) ? "text-primary-dark" : ""].join(" "), children: format(day, "EEE d") }, day.toISOString())))] }), allDayEvents.length > 0 && (_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: "flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border", children: allDayEvents
+    return (_jsxs("div", { "data-calendar-scroller": true, className: "flex-1 flex flex-col min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: ["flex-1 min-w-0 py-1 text-center text-xs font-semibold border-l border-border", isToday(day) ? "text-primary-dark" : ""].join(" "), children: format(day, "EEE d") }, day.toISOString())))] }), allDayEvents.length > 0 && (_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: "flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border", children: allDayEvents
                             .filter((occ) => occursOnDay(occ, day))
                             .map((occ) => (_jsx("button", { type: "button", onClick: () => onSelectEvent(occ), style: { backgroundColor: folderColors[occ.folderUid], color: "#fff" }, className: "text-xs text-left truncate rounded-sm px-1.5 py-0.5", children: occ.title }, occ.occurrenceKey))) }, day.toISOString())))] })), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), days.map((day) => (_jsx(DayColumn, { day: day, occurrences: timedEvents.filter((occ) => occursOnDay(occ, day)), folderColors: folderColors, onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, day.toISOString())))] })] }));
 }
@@ -26,7 +27,7 @@ function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot
 }
 function TimeSlot({ start, onSelectSlot }) {
     const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
-    return (_jsx("button", { ref: setNodeRef, type: "button", onClick: () => onSelectSlot(start, addMinutes(start, SLOT_MINUTES)), style: { height: HOUR_HEIGHT_PX / 2 }, className: ["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" "), "aria-label": `New event at ${format(start, "h:mm a, MMM d")}` }));
+    return (_jsx("button", { ref: setNodeRef, type: "button", onClick: (e) => onSelectSlot(start, addMinutes(start, SLOT_MINUTES), anchorOf(e.currentTarget)), style: { height: HOUR_HEIGHT_PX / 2 }, className: ["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" "), "aria-label": `New event at ${format(start, "h:mm a, MMM d")}` }));
 }
 /** A block's position within its day column. A multi-day event is drawn in every day column it
  * overlaps, clipped to that day. */

package/dist/apps/shared/components/calendar/eventDialogFields.d.ts

@@ -0,0 +1,28 @@
+import { EventVisibility } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { EventFormValues } from "./eventForm.js";
+/** The event dialog's own fields of a `CalendarEventInput` - only the ones that differ from what the event has, so saving an event no one touched these on
+ * says nothing about them (and asks for no new invitations). */
+export interface EventDialogFields {
+    /** `null` clears. */
+    description?: string | null;
+    descriptionHtml?: string | null;
+    visibility?: EventVisibility;
+    guestsCanModify?: boolean;
+    guestsCanInviteOthers?: boolean;
+    guestsCanSeeGuestList?: boolean;
+}
+/** Whether the editor's HTML holds any text (an emptied editor writes `<p></p>`). */
+export declare function hasDescriptionText(html: string): boolean;
+/** A plain-text description as the paragraphs the editor starts from: one for each line (an event whose description has no HTML). */
+export declare function plainTextToHtml(text: string): string;
+/** What the description editor starts with for `occurrence`: its HTML, else its plain text as paragraphs, else nothing. */
+export declare function initialDescriptionHtml(occurrence: Pick<CalendarOccurrence, "description" | "descriptionHtml"> | null): string;
+/** Why the description cannot be saved as it is - too long for the server (400) - or `undefined`. */
+export declare function descriptionProblem(descriptionHtml: string): string | undefined;
+/**
+ * What the form says about the description, visibility and guest permissions that differs from `occurrence` (`null` for a new event, which starts from the
+ * defaults: no description, default visibility, guests cannot modify, can invite, can see the list). A description is sent as both its sanitized HTML and the
+ * plain text derived from it, or as `null` twice when it was emptied; one the user did not change is not sent.
+ */
+export declare function dialogFields(values: EventFormValues, occurrence: CalendarOccurrence | null): EventDialogFields;

package/dist/apps/shared/components/calendar/eventDialogFields.js

@@ -0,0 +1,59 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { guestPermissionsOf, visibilityOf } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { MAX_EVENT_DESCRIPTION_HTML_LENGTH, MAX_EVENT_DESCRIPTION_LENGTH, htmlToPlainText, sanitizeEventDescriptionHtml, } from "@rapidmx/react-shared/calendar/eventDescription.js";
+function escapeHtml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/** Whether the editor's HTML holds any text (an emptied editor writes `<p></p>`). */
+export function hasDescriptionText(html) {
+    return html.replace(/<[^>]*>/g, "").trim() !== "";
+}
+/** A plain-text description as the paragraphs the editor starts from: one for each line (an event whose description has no HTML). */
+export function plainTextToHtml(text) {
+    return text
+        .split(/\r\n|\r|\n/)
+        .map((line) => `<p>${escapeHtml(line)}</p>`)
+        .join("");
+}
+/** What the description editor starts with for `occurrence`: its HTML, else its plain text as paragraphs, else nothing. */
+export function initialDescriptionHtml(occurrence) {
+    if (occurrence?.descriptionHtml) {
+        return occurrence.descriptionHtml;
+    }
+    return occurrence?.description ? plainTextToHtml(occurrence.description) : "";
+}
+/** Why the description cannot be saved as it is - too long for the server (400) - or `undefined`. */
+export function descriptionProblem(descriptionHtml) {
+    const html = sanitizeEventDescriptionHtml(descriptionHtml);
+    return html.length > MAX_EVENT_DESCRIPTION_HTML_LENGTH || htmlToPlainText(html).length > MAX_EVENT_DESCRIPTION_LENGTH
+        ? "The description is too long."
+        : undefined;
+}
+/**
+ * What the form says about the description, visibility and guest permissions that differs from `occurrence` (`null` for a new event, which starts from the
+ * defaults: no description, default visibility, guests cannot modify, can invite, can see the list). A description is sent as both its sanitized HTML and the
+ * plain text derived from it, or as `null` twice when it was emptied; one the user did not change is not sent.
+ */
+export function dialogFields(values, occurrence) {
+    const fields = {};
+    const initial = initialDescriptionHtml(occurrence);
+    const html = sanitizeEventDescriptionHtml(values.descriptionHtml);
+    if (values.descriptionHtml !== initial && html !== sanitizeEventDescriptionHtml(initial)) {
+        const plain = htmlToPlainText(html);
+        fields.description = plain || null;
+        fields.descriptionHtml = plain ? html : null;
+    }
+    if (values.visibility !== (occurrence ? visibilityOf(occurrence) : "default")) {
+        fields.visibility = values.visibility;
+    }
+    const permissions = guestPermissionsOf(occurrence ?? {});
+    for (const key of ["guestsCanModify", "guestsCanInviteOthers", "guestsCanSeeGuestList"]) {
+        if (values[key] !== permissions[key]) {
+            fields[key] = values[key];
+        }
+    }
+    return fields;
+}

package/dist/apps/shared/components/calendar/eventForm.d.ts

@@ -0,0 +1,98 @@
+import { FormEvent } from "react";
+import { Attendee, BusyStatus, EventVisibility, RecurrenceRule, WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+/** Which occurrences of a recurring event an edit applies to. */
+export type EditScope = "occurrence" | "series";
+/**
+ * Everything the event form edits. The quick-create popover and the full form are two faces of the same values, so a title typed in the
+ * one is still there when "More options" opens the other.
+ */
+export interface EventFormValues {
+    title: string;
+    location: string;
+    /** `YYYY-MM-DDTHH:mm` on the wall clock of `formZone` (for an all-day event only the date part matters). */
+    start: string;
+    end: string;
+    allDay: boolean;
+    /** The zone `start` and `end` are read in: the device's own until the user picks another. */
+    formZone: string;
+    /** The IANA zone the event is stored with. */
+    timezone: string;
+    attendees: Attendee[];
+    /** What has been typed into the guests field but not added yet. */
+    guestDraft: string;
+    /** What was committed to the guests field (Enter, a comma, leaving it) but is not an address: kept there, flagged, until it is fixed or removed. */
+    guestInvalid: string[];
+    recurrenceRule: RecurrenceRule | null;
+    /** Minutes before the start, as typed; blank means no reminder. */
+    reminderMinutes: string;
+    busyStatus: BusyStatus;
+    /** Who may see the event's details. */
+    visibility: EventVisibility;
+    /** The description as the editor last wrote it: HTML, `""` when there is none (an emptied editor writes `<p></p>`, which counts as none). */
+    descriptionHtml: string;
+    /** What guests may do: ask for the event to change, ask for guests to be added, see who else is invited. */
+    guestsCanModify: boolean;
+    guestsCanInviteOthers: boolean;
+    guestsCanSeeGuestList: boolean;
+    autoReplyEnabled: boolean;
+    autoReplyMessage: string;
+    videoEnabled: boolean;
+    targetMailboxUid: string;
+    targetFolderUid: string;
+}
+/** What `EventEditor` hands both faces of the form: the values, and every action and derived fact they need. */
+export interface EventFormController {
+    /** The event being edited, `null` for a new one. */
+    occurrence: CalendarOccurrence | null;
+    values: EventFormValues;
+    update: (patch: Partial<EventFormValues>) => void;
+    setStart: (next: string) => void;
+    setEnd: (next: string) => void;
+    onAllDayChange: (allDay: boolean) => void;
+    onTimeZoneChange: (zone: string) => void;
+    timeZones: string[];
+    startWeekday: WeekdayCode | undefined;
+    /** "This event only" of a recurring event: the copy it detaches has no rule of its own. */
+    editingSingleOccurrence: boolean;
+    /** The address the event is organized from (the chosen mailbox's, for a new event). */
+    organizerAddress: string;
+    deviceZone: string;
+    updateAttendee: (index: number, patch: Partial<Attendee>) => void;
+    removeAttendee: (index: number) => void;
+    addResource: (mailbox: Mailbox) => void;
+    /** Addresses already on the list (lowercased), for the room/equipment picker to leave out. */
+    guestAddresses: string[];
+    mailboxOptions: {
+        mailbox: Mailbox;
+        calendars: {
+            uid: string;
+            name: string;
+        }[];
+    }[] | undefined;
+    onMailboxChange: (mailboxUid: string) => void;
+    /** The calendars to choose between when creating; `undefined` for an existing event, which keeps its own. */
+    calendarChoices: {
+        uid: string;
+        name: string;
+    }[] | undefined;
+    calendarName: string | undefined;
+    calendarColor: string | undefined;
+    videoMeetingUid: string | undefined;
+    /** The organizer's own join link once it is known and safe to open. */
+    joinUrl: string | undefined;
+    /** `undefined` while it is being fetched, `null` once it is known there is none. */
+    organizerJoinUrl: string | null | undefined;
+    videoError: string | null;
+    editScope: EditScope;
+    setEditScope: (scope: EditScope) => void;
+    /** Whether the "Apply changes to" choice is offered (editing an occurrence of a recurring event). */
+    showEditScope: boolean;
+    error: string | null;
+    saving: boolean;
+    /** Submits the form. */
+    onSubmit: (event: FormEvent) => void;
+    /** The X / Cancel: leaves the form (back to the details for an existing event). */
+    onCancel: () => void;
+}

package/dist/apps/shared/components/calendar/eventForm.js

@@ -0,0 +1 @@
+export {};

package/dist/apps/shared/components/calendar/eventFormat.d.ts

@@ -0,0 +1,80 @@
+import { Attendee, AttendeeResponseStatus, BusyStatus, EventVisibility, GuestPermissions } from "@rapidmx/react-shared/calendar/calendarApi.js";
+/** What the event form and the read-only event view both need to say about a busy status / an answer. */
+export declare const BUSY_STATUSES: BusyStatus[];
+export declare const BUSY_STATUS_LABEL: Record<BusyStatus, string>;
+/** Who may see an event's details, in the order the form lists them. */
+export declare const VISIBILITIES: EventVisibility[];
+export declare const VISIBILITY_LABEL: Record<EventVisibility, string>;
+/** What each visibility means here, where a reader of a shared calendar sees only a busy block for a private or confidential event. */
+export declare const VISIBILITY_HELP: Record<EventVisibility, string>;
+/** What guests may do, as a sentence: "Guests can modify the event, invite others and see the guest list." (or, when they can do none of it, what they cannot). */
+export declare function describeGuestPermissions(permissions: GuestPermissions): string;
+export declare const RESPONSE_STATUS_LABEL: Record<AttendeeResponseStatus, string>;
+/** The units a reminder's lead time can be entered in - the event itself stores only minutes. */
+export declare const REMINDER_UNITS: readonly [{
+    readonly unit: "minutes";
+    readonly singular: "minute";
+    readonly factor: 1;
+}, {
+    readonly unit: "hours";
+    readonly singular: "hour";
+    readonly factor: 60;
+}, {
+    readonly unit: "days";
+    readonly singular: "day";
+    readonly factor: 1440;
+}, {
+    readonly unit: "weeks";
+    readonly singular: "week";
+    readonly factor: 10080;
+}];
+export type ReminderUnit = (typeof REMINDER_UNITS)[number]["unit"];
+/** The unit a stored reminder reads best in: the largest that divides it evenly (`0` and odd values stay in minutes). */
+export declare function bestReminderUnit(minutes: number): (typeof REMINDER_UNITS)[number];
+/** "Notify 30 minutes before" / "Notify 1 hour before" / "Notify at the start" for a stored reminder, or "No notification". */
+export declare function describeReminder(minutes: number | undefined): string;
+/** An attendee as the guests field adds one. */
+export declare function newGuest(address: string, displayName?: string): Attendee;
+/** A guest as the guests field shows it: `Name <address>`, or the bare address for one without a name (the form compose's recipient fields use). */
+export declare function guestChip(guest: {
+    address: string;
+    displayName?: string;
+}): string;
+/**
+ * The guests the guests field's chips name, given the guests `current`ly on the list: a chip for someone already there keeps that guest as
+ * they are (their role and answer, whatever the case of the address), a chip for a new address adds a required guest with the chip's name, and
+ * an address twice (or one of `skipAddresses` - the organizer's, or the people already invited) is added once. The chips are the field's whole
+ * list, so a guest without a chip is removed. What is not an address comes back as `invalid`, to stay in the field flagged; several addresses
+ * separated by white space in one chip ("a@x.com b@x.com", as a paste can be) are taken as several.
+ */
+export declare function applyGuestChips(current: Attendee[], chips: string[], skipAddresses?: string[]): {
+    attendees: Attendee[];
+    invalid: string[];
+};
+/** The wall-clock string a form input holds ("YYYY-MM-DDTHH:mm") read as `zone`'s clock, as an instant. `deviceZone` is the zone the browser
+ * itself parses such a string in, which needs no conversion. */
+export declare function wallStringToMs(value: string, zone: string, deviceZone: string): number;
+/** Inverse of `wallStringToMs()`. */
+export declare function msToWallString(ms: number, zone: string, deviceZone: string): string;
+/** A local `Date` for a `YYYY-MM-DD` key (a plain `new Date(key)` would read it as UTC). */
+export declare function localDateFromKey(key: string): Date;
+/**
+ * "Thursday, September 24   2:00pm – 3:00pm" for a timed event ("Thursday, September 24 – Friday, September 25" style, with both
+ * days, when it crosses midnight), or "Thursday, September 24" (and the last day, when it spans several) for an all-day one. `start`
+ * and `end` are local wall-clock `Date`s - for an all-day event the first and the (inclusive) last day. The year is left out for
+ * the current one.
+ */
+export declare function formatWhen(start: Date, end: Date, allDay: boolean, now?: Date): string;
+/** `formatWhen()` for a stored event: instants for a timed one, the date-only keys (with the exclusive end) for an all-day one. */
+export declare function formatStoredWhen(startDate: string, endDate: string, allDay: boolean, now?: Date): string;
+/** Adds the guests typed or pasted into the guests field to `current` - recipients separated by commas or semicolons, each an address or
+ * `Name <address>` (see `applyGuestChips()`, which keeps who is already there): an address already on the list (in any case) or in
+ * `skipAddresses` is skipped, and what is not an address comes back as `invalid` for the field to keep. */
+export declare function mergeGuests(current: Attendee[], text: string, skipAddresses?: string[]): {
+    attendees: Attendee[];
+    invalid: string[];
+};
+/** `formatWhen()` for the form's own wall-clock strings (an all-day event's `end` is its inclusive last day); a message while either is empty. */
+export declare function formatFormWhen(start: string, end: string, allDay: boolean, now?: Date): string;
+/** A reminder as the form holds it (minutes, as typed; blank meaning none) as the number of minutes, or `undefined` for none. */
+export declare function reminderOf(text: string): number | undefined;

package/dist/apps/shared/components/calendar/eventFormat.js

@@ -0,0 +1,190 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { fromEventWallClock, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { formatRecipient, isValidRecipientAddress, parseRecipient, splitRecipientList } from "../mail/compose/recipients.js";
+import { addDaysToKey, allDayDateKey } from "./allDay.js";
+/** What the event form and the read-only event view both need to say about a busy status / an answer. */
+export const BUSY_STATUSES = ["busy", "free", "tentative", "oof"];
+export const BUSY_STATUS_LABEL = { busy: "Busy", free: "Free", tentative: "Tentative", oof: "Out of office" };
+/** Who may see an event's details, in the order the form lists them. */
+export const VISIBILITIES = ["default", "public", "private", "confidential"];
+export const VISIBILITY_LABEL = {
+    default: "Default visibility",
+    public: "Public",
+    private: "Private",
+    confidential: "Confidential",
+};
+/** What each visibility means here, where a reader of a shared calendar sees only a busy block for a private or confidential event. */
+export const VISIBILITY_HELP = {
+    default: "People who can see this calendar see the event's details, as the calendar's sharing allows.",
+    public: "Everyone who can see this calendar sees the event's details.",
+    private: "Only you and people who can edit this calendar see the details. Everyone else who can see the calendar sees a busy block.",
+    confidential: "Shown like a private event on your calendar: only you and people who can edit it see the details. The invitation marks the event confidential for other calendar programs.",
+};
+/** What guests may do, as a sentence: "Guests can modify the event, invite others and see the guest list." (or, when they can do none of it, what they cannot). */
+export function describeGuestPermissions(permissions) {
+    const can = [
+        permissions.guestsCanModify && "modify the event",
+        permissions.guestsCanInviteOthers && "invite others",
+        permissions.guestsCanSeeGuestList && "see the guest list",
+    ].filter((text) => !!text);
+    if (can.length === 0) {
+        return "Guests can't modify the event, invite others or see the guest list.";
+    }
+    return `Guests can ${can.length === 1 ? can[0] : `${can.slice(0, -1).join(", ")} and ${can[can.length - 1]}`}.`;
+}
+export const RESPONSE_STATUS_LABEL = {
+    needsAction: "Awaiting response",
+    accepted: "Accepted",
+    declined: "Declined",
+    tentative: "Tentative",
+};
+/** The units a reminder's lead time can be entered in - the event itself stores only minutes. */
+export const REMINDER_UNITS = [
+    { unit: "minutes", singular: "minute", factor: 1 },
+    { unit: "hours", singular: "hour", factor: 60 },
+    { unit: "days", singular: "day", factor: 1440 },
+    { unit: "weeks", singular: "week", factor: 10080 },
+];
+/** The unit a stored reminder reads best in: the largest that divides it evenly (`0` and odd values stay in minutes). */
+export function bestReminderUnit(minutes) {
+    for (let i = REMINDER_UNITS.length - 1; i > 0; i--) {
+        if (minutes > 0 && minutes % REMINDER_UNITS[i].factor === 0) {
+            return REMINDER_UNITS[i];
+        }
+    }
+    return REMINDER_UNITS[0];
+}
+/** "Notify 30 minutes before" / "Notify 1 hour before" / "Notify at the start" for a stored reminder, or "No notification". */
+export function describeReminder(minutes) {
+    if (minutes === undefined || !Number.isFinite(minutes) || minutes < 0) {
+        return "No notification";
+    }
+    if (minutes === 0) {
+        return "Notify at the start";
+    }
+    const unit = bestReminderUnit(minutes);
+    const amount = minutes / unit.factor;
+    return `Notify ${amount} ${amount === 1 ? unit.singular : unit.unit} before`;
+}
+/** An attendee as the guests field adds one. */
+export function newGuest(address, displayName) {
+    return { address, ...(displayName ? { displayName } : {}), role: "required", responseStatus: "needsAction", isOrganizer: false };
+}
+/** A guest as the guests field shows it: `Name <address>`, or the bare address for one without a name (the form compose's recipient fields use). */
+export function guestChip(guest) {
+    return formatRecipient({ address: guest.address, displayName: guest.displayName });
+}
+/**
+ * The guests the guests field's chips name, given the guests `current`ly on the list: a chip for someone already there keeps that guest as
+ * they are (their role and answer, whatever the case of the address), a chip for a new address adds a required guest with the chip's name, and
+ * an address twice (or one of `skipAddresses` - the organizer's, or the people already invited) is added once. The chips are the field's whole
+ * list, so a guest without a chip is removed. What is not an address comes back as `invalid`, to stay in the field flagged; several addresses
+ * separated by white space in one chip ("a@x.com b@x.com", as a paste can be) are taken as several.
+ */
+export function applyGuestChips(current, chips, skipAddresses = []) {
+    const skip = new Set(skipAddresses.map((address) => address.toLowerCase()));
+    const attendees = [];
+    const invalid = [];
+    const known = (address) => current.find((guest) => guest.address.toLowerCase() === address.toLowerCase());
+    const listed = (address) => attendees.some((guest) => guest.address.toLowerCase() === address.toLowerCase());
+    function add(address, displayName) {
+        const existing = known(address);
+        if (existing) {
+            if (!listed(address)) {
+                attendees.push(existing);
+            }
+        }
+        else if (!skip.has(address.toLowerCase()) && !listed(address)) {
+            attendees.push(newGuest(address, displayName));
+        }
+    }
+    for (const chip of chips) {
+        const { address, displayName } = parseRecipient(chip);
+        const parts = chip.trim().split(/\s+/);
+        if (isValidRecipientAddress(address) || known(address)) {
+            add(address, displayName);
+        }
+        else if (parts.length > 1 && parts.every(isValidRecipientAddress)) {
+            parts.forEach((part) => add(part));
+        }
+        else if (!invalid.includes(chip.trim())) {
+            invalid.push(chip.trim());
+        }
+    }
+    return { attendees, invalid };
+}
+/** The wall-clock string a form input holds ("YYYY-MM-DDTHH:mm") read as `zone`'s clock, as an instant. `deviceZone` is the zone the browser
+ * itself parses such a string in, which needs no conversion. */
+export function wallStringToMs(value, zone, deviceZone) {
+    if (zone === deviceZone) {
+        return new Date(value).getTime();
+    }
+    const wall = Date.parse(`${value.slice(0, 16)}:00Z`);
+    return Number.isNaN(wall) ? Number.NaN : fromEventWallClock(wall, zone, false);
+}
+/** Inverse of `wallStringToMs()`. */
+export function msToWallString(ms, zone, deviceZone) {
+    if (zone === deviceZone) {
+        return toDatetimeLocal(new Date(ms).toISOString());
+    }
+    return new Date(toEventWallClock(ms, zone, false)).toISOString().slice(0, 16);
+}
+/** A local `Date` for a `YYYY-MM-DD` key (a plain `new Date(key)` would read it as UTC). */
+export function localDateFromKey(key) {
+    const [year, month, day] = key.split("-").map(Number);
+    return new Date(year, month - 1, day);
+}
+function dayLabel(day, now) {
+    return format(day, day.getFullYear() === now.getFullYear() ? "EEEE, MMMM d" : "EEEE, MMMM d, yyyy");
+}
+/**
+ * "Thursday, September 24   2:00pm – 3:00pm" for a timed event ("Thursday, September 24 – Friday, September 25" style, with both
+ * days, when it crosses midnight), or "Thursday, September 24" (and the last day, when it spans several) for an all-day one. `start`
+ * and `end` are local wall-clock `Date`s - for an all-day event the first and the (inclusive) last day. The year is left out for
+ * the current one.
+ */
+export function formatWhen(start, end, allDay, now = new Date()) {
+    const first = dayLabel(start, now);
+    if (allDay) {
+        return end.getTime() > start.getTime() ? `${first} – ${dayLabel(end, now)}` : first;
+    }
+    const startTime = format(start, "h:mmaaa");
+    const endTime = format(end, "h:mmaaa");
+    if (format(start, "yyyy-MM-dd") === format(end, "yyyy-MM-dd")) {
+        return `${first}   ${startTime} – ${endTime}`;
+    }
+    return `${first} ${startTime} – ${dayLabel(end, now)} ${endTime}`;
+}
+/** `formatWhen()` for a stored event: instants for a timed one, the date-only keys (with the exclusive end) for an all-day one. */
+export function formatStoredWhen(startDate, endDate, allDay, now = new Date()) {
+    if (allDay) {
+        const startKey = allDayDateKey(startDate);
+        const lastKey = addDaysToKey(allDayDateKey(endDate), -1);
+        return formatWhen(localDateFromKey(startKey), localDateFromKey(lastKey < startKey ? startKey : lastKey), true, now);
+    }
+    return formatWhen(new Date(startDate), new Date(endDate), false, now);
+}
+/** Adds the guests typed or pasted into the guests field to `current` - recipients separated by commas or semicolons, each an address or
+ * `Name <address>` (see `applyGuestChips()`, which keeps who is already there): an address already on the list (in any case) or in
+ * `skipAddresses` is skipped, and what is not an address comes back as `invalid` for the field to keep. */
+export function mergeGuests(current, text, skipAddresses = []) {
+    return applyGuestChips(current, [...current.map(guestChip), ...splitRecipientList(text)], skipAddresses);
+}
+/** `formatWhen()` for the form's own wall-clock strings (an all-day event's `end` is its inclusive last day); a message while either is empty. */
+export function formatFormWhen(start, end, allDay, now = new Date()) {
+    const first = allDay ? localDateFromKey(start.slice(0, 10)) : new Date(start);
+    const last = allDay ? localDateFromKey(end.slice(0, 10)) : new Date(end);
+    if (Number.isNaN(first.getTime()) || Number.isNaN(last.getTime())) {
+        return "Pick a date and time";
+    }
+    return formatWhen(first, last, allDay, now);
+}
+/** A reminder as the form holds it (minutes, as typed; blank meaning none) as the number of minutes, or `undefined` for none. */
+export function reminderOf(text) {
+    return text.trim() === "" ? undefined : Number(text);
+}

package/dist/apps/shared/components/calendar/findTimeGrid.d.ts

@@ -0,0 +1,30 @@
+import { AvailabilitySummary } from "@rapidmx/react-shared/calendar/freeBusyApi.js";
+/** How many days, from the one on show, one look-up covers: the grid's own day and the days the suggested times are found in. */
+export declare const SEARCH_DAYS = 7;
+/** The working day suggestions are found in, in the hours of the zone the event is being set in. */
+export declare const WORK_START_HOUR = 8;
+export declare const WORK_END_HOUR = 18;
+/** Whether `value` is a `YYYY-MM-DD` key. */
+export declare function isDayKey(value: string): boolean;
+/** The instant a `YYYY-MM-DD` day starts in `zone` (`deviceZone` is the zone the browser itself parses a wall clock in). */
+export declare function dayStartMs(dayKey: string, zone: string, deviceZone: string): number;
+/** The stretches suggestions may fall in: each of the `SEARCH_DAYS` days from `dayKey`, 8:00 to 18:00 in `zone` - the first day always, the others only when
+ * they are a weekday. */
+export declare function workingWindows(dayKey: string, zone: string, deviceZone: string): {
+    startMs: number;
+    endMs: number;
+}[];
+/**
+ * Where an instant falls on the grid of `dayKey`, as minutes since that day's midnight on `zone`'s clock (so it lines up with the hour labels, whatever a
+ * daylight-saving change did to the day's length): 0 for anything before the day, 1440 for anything after it.
+ */
+export declare function minuteOfDay(ms: number, dayKey: string, zone: string, deviceZone: string): number;
+/** "9:00am" for an instant on `zone`'s clock. */
+export declare function clockLabel(ms: number, zone: string, deviceZone: string): string;
+/** What a failed look-up says: the wait for a rate limit, the server's own reason, or a plain failure. */
+export declare function freeBusyErrorMessage(err: unknown): string;
+/**
+ * The one line under the grid about the proposed time. "Everyone is free" is only ever said when every person could be checked and none is busy: someone
+ * whose availability is unknown (an external guest, or somebody who hides their calendar) is said so, never counted as free.
+ */
+export declare function summaryLine(summary: AvailabilitySummary): string;

package/dist/apps/shared/components/calendar/findTimeGrid.js

@@ -0,0 +1,83 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { addDaysToKey } from "./allDay.js";
+import { msToWallString, wallStringToMs } from "./eventFormat.js";
+/** How many days, from the one on show, one look-up covers: the grid's own day and the days the suggested times are found in. */
+export const SEARCH_DAYS = 7;
+/** The working day suggestions are found in, in the hours of the zone the event is being set in. */
+export const WORK_START_HOUR = 8;
+export const WORK_END_HOUR = 18;
+/** Whether `value` is a `YYYY-MM-DD` key. */
+export function isDayKey(value) {
+    return /^\d{4}-\d{2}-\d{2}$/.test(value);
+}
+/** The instant a `YYYY-MM-DD` day starts in `zone` (`deviceZone` is the zone the browser itself parses a wall clock in). */
+export function dayStartMs(dayKey, zone, deviceZone) {
+    return wallStringToMs(`${dayKey}T00:00`, zone, deviceZone);
+}
+/** The stretches suggestions may fall in: each of the `SEARCH_DAYS` days from `dayKey`, 8:00 to 18:00 in `zone` - the first day always, the others only when
+ * they are a weekday. */
+export function workingWindows(dayKey, zone, deviceZone) {
+    const windows = [];
+    for (let offset = 0; offset < SEARCH_DAYS; offset++) {
+        const key = addDaysToKey(dayKey, offset);
+        const weekday = new Date(`${key}T12:00:00Z`).getUTCDay();
+        if (offset === 0 || (weekday >= 1 && weekday <= 5)) {
+            windows.push({
+                startMs: wallStringToMs(`${key}T${String(WORK_START_HOUR).padStart(2, "0")}:00`, zone, deviceZone),
+                endMs: wallStringToMs(`${key}T${String(WORK_END_HOUR).padStart(2, "0")}:00`, zone, deviceZone),
+            });
+        }
+    }
+    return windows;
+}
+/**
+ * Where an instant falls on the grid of `dayKey`, as minutes since that day's midnight on `zone`'s clock (so it lines up with the hour labels, whatever a
+ * daylight-saving change did to the day's length): 0 for anything before the day, 1440 for anything after it.
+ */
+export function minuteOfDay(ms, dayKey, zone, deviceZone) {
+    const wall = msToWallString(ms, zone, deviceZone);
+    const date = wall.slice(0, 10);
+    if (date < dayKey) {
+        return 0;
+    }
+    if (date > dayKey) {
+        return 1440;
+    }
+    return Number(wall.slice(11, 13)) * 60 + Number(wall.slice(14, 16));
+}
+/** "9:00am" for an instant on `zone`'s clock. */
+export function clockLabel(ms, zone, deviceZone) {
+    return format(new Date(msToWallString(ms, zone, deviceZone)), "h:mmaaa");
+}
+/** What a failed look-up says: the wait for a rate limit, the server's own reason, or a plain failure. */
+export function freeBusyErrorMessage(err) {
+    if (err instanceof ApiRequestError) {
+        return err.status === 429 ? "Too many availability look-ups just now. Wait a moment and try again." : err.message;
+    }
+    return "Couldn't load availability. Check your connection and try again.";
+}
+/**
+ * The one line under the grid about the proposed time. "Everyone is free" is only ever said when every person could be checked and none is busy: someone
+ * whose availability is unknown (an external guest, or somebody who hides their calendar) is said so, never counted as free.
+ */
+export function summaryLine(summary) {
+    const parts = [];
+    if (summary.conflicts > 0) {
+        parts.push(`${summary.conflicts} ${summary.conflicts === 1 ? "conflict" : "conflicts"}${summary.tentative > 0 ? ` (${summary.tentative} tentative)` : ""}`);
+    }
+    else if (summary.unknown === 0) {
+        parts.push("Everyone is free");
+    }
+    else {
+        parts.push("No conflicts found");
+    }
+    if (summary.unknown > 0) {
+        parts.push(`${summary.unknown} ${summary.unknown === 1 ? "person's availability is" : "people's availability is"} unknown`);
+    }
+    return parts.join(" · ");
+}