@rapidmx/web-client 0.14.1 → 0.16.0

package/dist/apps/shared/components/mail/invite/InviteTimeline.js

@@ -0,0 +1,120 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { validDate } from "./inviteFormat.js";
+/** How tall one hour is drawn, in px. */
+const HOUR_HEIGHT = 36;
+/** The room the hour labels take at the left, as a CSS length. */
+const LABEL_WIDTH = "3.25rem";
+/** The hours of context shown before the invitation and after it, and the least the day view is tall (in hours). */
+const CONTEXT_HOURS = 2;
+const MIN_HOURS = 5;
+const MINUTE_MS = 60000;
+/**
+ * Lays overlapping blocks side by side: blocks that overlap (directly or through a chain of others) form a cluster, and each block takes the first
+ * column of the cluster that is free where it starts. `blocks` must be sorted by start; the result is in the same order.
+ */
+export function placeBlocks(blocks) {
+    const placed = [];
+    let cluster = [];
+    let columnEnds = [];
+    let clusterEnd = -Infinity;
+    const close = () => {
+        for (const member of cluster) {
+            placed[member.index] = { column: member.column, columns: columnEnds.length };
+        }
+        cluster = [];
+        columnEnds = [];
+    };
+    blocks.forEach((block, index) => {
+        if (block.start >= clusterEnd) {
+            close();
+        }
+        let column = columnEnds.findIndex((end) => end <= block.start);
+        if (column === -1) {
+            column = columnEnds.length;
+        }
+        columnEnds[column] = block.end;
+        cluster.push({ index, column });
+        clusterEnd = Math.max(clusterEnd, block.end);
+    });
+    close();
+    return placed;
+}
+/** The hours the day view spans: the invitation's own, with `CONTEXT_HOURS` either side (at least `MIN_HOURS`), kept inside the invitation's day. */
+function hourWindow(start, end) {
+    const sameDay = start.toDateString() === end.toDateString();
+    const endHour = sameDay ? Math.ceil(end.getHours() + end.getMinutes() / 60) : 24;
+    let from = Math.max(0, start.getHours() - CONTEXT_HOURS);
+    let to = Math.min(24, endHour + CONTEXT_HOURS);
+    if (to - from < MIN_HOURS) {
+        to = Math.min(24, from + MIN_HOURS);
+        from = Math.max(0, to - MIN_HOURS);
+    }
+    return { from, to };
+}
+const BLOCK_CLASS = {
+    invite: "bg-primary/20 border-primary text-text font-semibold",
+    conflict: "bg-danger-bg border-danger text-danger",
+    busy: "bg-surface border-border text-text",
+    free: "bg-transparent border-border text-text-muted",
+};
+const CLOCK = new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" });
+const HOUR = new Intl.DateTimeFormat(undefined, { hour: "numeric" });
+/**
+ * A small day agenda around an invitation, as Outlook draws it in its RSVP card: hour rows for the invitation's day (from a couple of hours before it
+ * to a couple after), the invitation itself as a highlighted block, and the reader's other events as blocks - the ones that overlap it marked in red
+ * (and named as conflicts to a screen reader). Overlapping blocks stand side by side. All-day events are listed above the hours rather than drawn.
+ * Draws nothing when the invitation has no usable time.
+ */
+export default function InviteTimeline({ invite }) {
+    const start = validDate(invite.startDate);
+    const end = validDate(invite.endDate);
+    if (!start || !end || end <= start) {
+        return null;
+    }
+    const { from, to } = hourWindow(start, end);
+    const windowStart = new Date(start.getFullYear(), start.getMonth(), start.getDate(), from).getTime();
+    const windowEnd = new Date(start.getFullYear(), start.getMonth(), start.getDate(), to).getTime();
+    const conflictUids = new Set(invite.conflicts.map((entry) => entry.uid));
+    // A conflict the schedule doesn't list is still drawn.
+    const entries = [...invite.schedule, ...invite.conflicts.filter((c) => !invite.schedule.some((s) => s.uid === c.uid))];
+    const allDay = entries.filter((entry) => entry.allDay);
+    const blocks = [{ key: "invite", title: invite.summary?.trim() || "(no title)", start: start.getTime(), end: end.getTime(), kind: "invite", tentative: false }];
+    for (const entry of entries) {
+        const entryStart = validDate(entry.startDate)?.getTime();
+        const entryEnd = validDate(entry.endDate)?.getTime();
+        if (entry.allDay || entryStart === undefined || entryEnd === undefined) {
+            continue;
+        }
+        blocks.push({
+            key: entry.uid,
+            title: entry.title || "(no title)",
+            start: entryStart,
+            end: entryEnd,
+            kind: conflictUids.has(entry.uid) ? "conflict" : entry.busy ? "busy" : "free",
+            tentative: entry.tentative,
+        });
+    }
+    // Clipped to the hours shown; a block entirely outside them isn't drawn.
+    const visible = blocks
+        .map((block) => ({ ...block, start: Math.max(block.start, windowStart), end: Math.min(block.end, windowEnd), fullStart: block.start, fullEnd: block.end }))
+        .filter((block) => block.end > block.start)
+        .sort((a, b) => a.start - b.start || a.end - b.end);
+    const placed = placeBlocks(visible);
+    const hours = Array.from({ length: to - from }, (_, i) => from + i);
+    return (_jsxs("div", { "aria-label": "Your schedule around this meeting", role: "group", className: "text-xs", children: [allDay.length > 0 && (_jsx("ul", { "aria-label": "All-day events", className: "mb-1 flex flex-col gap-0.5", children: allDay.map((entry) => (_jsxs("li", { className: "px-2 py-0.5 rounded-sm border border-border bg-surface text-text-muted truncate", children: ["All day: ", entry.title || "(no title)"] }, entry.uid))) })), _jsxs("div", { className: "relative border-t border-border", style: { height: hours.length * HOUR_HEIGHT }, children: [hours.map((hour) => (_jsx("div", { "aria-hidden": "true", className: "absolute inset-x-0 border-b border-border text-text-muted", style: { top: (hour - from) * HOUR_HEIGHT, height: HOUR_HEIGHT }, children: _jsx("span", { className: "absolute left-0 top-0 pr-1 leading-none pt-0.5", style: { width: LABEL_WIDTH }, children: HOUR.format(new Date(2000, 0, 1, hour)) }) }, hour))), _jsx("ul", { "aria-label": "Events", children: visible.map((block, index) => {
+                            const { column, columns } = placed[index];
+                            const top = ((block.start - windowStart) / MINUTE_MS / 60) * HOUR_HEIGHT;
+                            const height = Math.max(18, ((block.end - block.start) / MINUTE_MS / 60) * HOUR_HEIGHT - 1);
+                            const range = `${CLOCK.format(block.fullStart)} to ${CLOCK.format(block.fullEnd)}`;
+                            return (_jsxs("li", { title: `${block.title}, ${range}`, "data-kind": block.kind, className: [
+                                    "absolute overflow-hidden rounded-sm border px-1.5 py-0.5 leading-tight",
+                                    BLOCK_CLASS[block.kind],
+                                    block.tentative ? "border-dashed" : "",
+                                ].join(" "), style: {
+                                    top,
+                                    height,
+                                    left: `calc(${LABEL_WIDTH} + (100% - ${LABEL_WIDTH}) * ${column} / ${columns})`,
+                                    width: `calc((100% - ${LABEL_WIDTH}) / ${columns} - 2px)`,
+                                }, children: [_jsx("span", { className: "block truncate", children: block.title }), _jsxs("span", { className: "sr-only", children: [", ", range, block.kind === "invite" ? ", this meeting" : "", block.kind === "conflict" ? ", conflicts with this meeting" : "", block.tentative ? ", tentative" : ""] })] }, block.key));
+                        }) })] })] }));
+}

package/dist/apps/shared/components/mail/invite/ProposeTimeForm.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { MessageInvite, ProposedTime } from "@rapidmx/react-shared/calendar/inviteApi.js";
+export interface ProposeTimeFormProps {
+    /** The invitation being answered: its own time (in the reader's zone) is what the fields start out as. */
+    invite: Pick<MessageInvite, "startDate" | "endDate">;
+    /** A proposal is on its way: the form is off. */
+    busy?: boolean;
+    /** Called with the proposed instants once the fields are valid. The caller reports a failure and closes the form on success. */
+    onSubmit: (proposal: ProposedTime) => void;
+    onCancel: () => void;
+}
+/**
+ * The small form behind "Propose new time": a date and a start and end time - in the reader's own time zone, prefilled with the invitation's own
+ * time - and an optional note to the organizer. It validates what it can (all three fields, and an end after the start) before anything is sent.
+ * The end is on the start's day: a proposal spans one day, as Outlook's does from a list.
+ */
+export default function ProposeTimeForm({ invite, busy, onSubmit, onCancel }: ProposeTimeFormProps): React.JSX.Element;

package/dist/apps/shared/components/mail/invite/ProposeTimeForm.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useId, useState } from "react";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { isoDay, validDate } from "./inviteFormat.js";
+const INPUT_CLASS = "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text";
+/** `HH:MM` of an instant in the reader's zone, the value of a time input. */
+function clock(date) {
+    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+/**
+ * The small form behind "Propose new time": a date and a start and end time - in the reader's own time zone, prefilled with the invitation's own
+ * time - and an optional note to the organizer. It validates what it can (all three fields, and an end after the start) before anything is sent.
+ * The end is on the start's day: a proposal spans one day, as Outlook's does from a list.
+ */
+export default function ProposeTimeForm({ invite, busy = false, onSubmit, onCancel }) {
+    const start = validDate(invite.startDate);
+    const end = validDate(invite.endDate);
+    const [date, setDate] = useState(start ? isoDay(start) : "");
+    const [startTime, setStartTime] = useState(start ? clock(start) : "");
+    const [endTime, setEndTime] = useState(end ? clock(end) : "");
+    const [comment, setComment] = useState("");
+    const [error, setError] = useState(null);
+    const id = useId();
+    function submit(event) {
+        event.preventDefault();
+        if (!date || !startTime || !endTime) {
+            setError("Choose a date and a start and end time.");
+            return;
+        }
+        const proposedStart = new Date(`${date}T${startTime}:00`);
+        const proposedEnd = new Date(`${date}T${endTime}:00`);
+        if (proposedEnd <= proposedStart) {
+            setError("The end time must be after the start time.");
+            return;
+        }
+        setError(null);
+        const note = comment.trim();
+        onSubmit({ startDate: proposedStart.toISOString(), endDate: proposedEnd.toISOString(), ...(note ? { comment: note } : {}) });
+    }
+    return (_jsxs("form", { "aria-label": "Propose a new time", onSubmit: submit, noValidate: true, className: "flex flex-col gap-2 text-sm", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs("div", { className: "flex-1 min-w-[9rem]", children: [_jsx("label", { htmlFor: `${id}-date`, className: "block text-xs text-text-muted mb-0.5", children: "Date" }), _jsx("input", { id: `${id}-date`, type: "date", value: date, disabled: busy, onChange: (e) => setDate(e.target.value), className: INPUT_CLASS })] }), _jsxs("div", { className: "flex-1 min-w-[6rem]", children: [_jsx("label", { htmlFor: `${id}-start`, className: "block text-xs text-text-muted mb-0.5", children: "Start" }), _jsx("input", { id: `${id}-start`, type: "time", value: startTime, disabled: busy, onChange: (e) => setStartTime(e.target.value), className: INPUT_CLASS })] }), _jsxs("div", { className: "flex-1 min-w-[6rem]", children: [_jsx("label", { htmlFor: `${id}-end`, className: "block text-xs text-text-muted mb-0.5", children: "End" }), _jsx("input", { id: `${id}-end`, type: "time", value: endTime, disabled: busy, onChange: (e) => setEndTime(e.target.value), className: INPUT_CLASS })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: `${id}-comment`, className: "block text-xs text-text-muted mb-0.5", children: "Comment (optional)" }), _jsx("textarea", { id: `${id}-comment`, rows: 2, value: comment, disabled: busy, onChange: (e) => setComment(e.target.value), className: `${INPUT_CLASS} resize-y` })] }), error && (_jsx("p", { role: "alert", className: "text-danger", children: error })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "submit", className: "!w-auto", loading: busy, disabled: busy, "aria-busy": busy || undefined, children: "Send proposal" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: onCancel, children: "Cancel" })] })] }));
+}

package/dist/apps/shared/components/mail/invite/inviteFormat.d.ts

@@ -0,0 +1,28 @@
+import type { Attachment } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { InviteResponse, MessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+/** Whether an attachment is a calendar file - what tells the pane a message may carry an invitation worth asking the server about. By type
+ * or by name, since mail clients disagree about which one they set (`text/calendar`, `application/ics`, or a bare `.ics` as octet-stream). */
+export declare function isCalendarAttachment(attachment: Pick<Attachment, "filename" | "mimeType">): boolean;
+/** `zone` if the browser knows it, else UTC - an all-day date is a calendar day, and needs a fixed zone to stay the same day for every reader. */
+export declare function allDayZone(zone: string | undefined): string;
+/** The instant an ISO string names, or `undefined` when it is missing or unparseable. */
+export declare function validDate(iso: string | undefined): Date | undefined;
+/**
+ * When the meeting is, in the reader's own locale and time zone: one date and a time range for a same-day event, both ends in full for
+ * one that spans days, and dates only for an all-day event (drawn in the organizer's zone, since a calendar day is not an instant). `undefined`
+ * when the invitation names no usable start. A missing or unusable end shows the start alone.
+ */
+export declare function formatInviteWhen(invite: Pick<MessageInvite, "startDate" | "endDate" | "allDay" | "timezone">): string | undefined;
+/** The meeting's start the way a list row writes it - `Thu 9/24/2026 1:00 PM` (dates only for an all-day event), in the reader's zone. */
+export declare function formatRowStart(invite: Pick<MessageInvite, "startDate" | "allDay" | "timezone">): string | undefined;
+/** `YYYY-MM-DD` of an instant in the reader's zone, or in `timeZone` when given (`en-CA` writes a date that way). */
+export declare function isoDay(date: Date, timeZone?: string): string;
+/** Where "Open in Calendar" goes: the day view of the day the meeting starts (the `date`/`view` the calendar page reads), or the calendar itself
+ * when the invitation names no usable start. An all-day event's day is the organizer's; any other is the reader's. */
+export declare function calendarHref(invite: Pick<MessageInvite, "startDate" | "allDay" | "timezone">): string;
+/** The reader's answer as a list row says it. */
+export declare const ANSWER_LABEL: Record<InviteResponse, string>;
+/** The titles of the events an invitation conflicts with, as "A, B and 2 more". */
+export declare function conflictSummary(conflicts: {
+    title: string;
+}[]): string;

package/dist/apps/shared/components/mail/invite/inviteFormat.js

@@ -0,0 +1,94 @@
+import { APP_HREFS } from "../../../navigation/appHrefs.js";
+/** Whether an attachment is a calendar file - what tells the pane a message may carry an invitation worth asking the server about. By type
+ * or by name, since mail clients disagree about which one they set (`text/calendar`, `application/ics`, or a bare `.ics` as octet-stream). */
+export function isCalendarAttachment(attachment) {
+    const type = (attachment.mimeType ?? "").split(";")[0].trim().toLowerCase();
+    return type === "text/calendar" || type === "application/ics" || (attachment.filename ?? "").trim().toLowerCase().endsWith(".ics");
+}
+const DAY_FORMAT = { weekday: "short", year: "numeric", month: "short", day: "numeric" };
+const CLOCK_FORMAT = { hour: "numeric", minute: "2-digit" };
+/** `zone` if the browser knows it, else UTC - an all-day date is a calendar day, and needs a fixed zone to stay the same day for every reader. */
+export function allDayZone(zone) {
+    try {
+        new Intl.DateTimeFormat(undefined, { timeZone: zone });
+        return zone ?? "UTC";
+    }
+    catch {
+        return "UTC";
+    }
+}
+/** The instant an ISO string names, or `undefined` when it is missing or unparseable. */
+export function validDate(iso) {
+    const date = iso ? new Date(iso) : undefined;
+    return date && !isNaN(date.getTime()) ? date : undefined;
+}
+/**
+ * When the meeting is, in the reader's own locale and time zone: one date and a time range for a same-day event, both ends in full for
+ * one that spans days, and dates only for an all-day event (drawn in the organizer's zone, since a calendar day is not an instant). `undefined`
+ * when the invitation names no usable start. A missing or unusable end shows the start alone.
+ */
+export function formatInviteWhen(invite) {
+    const start = validDate(invite.startDate);
+    if (!start) {
+        return undefined;
+    }
+    const parsedEnd = validDate(invite.endDate);
+    const end = parsedEnd && parsedEnd > start ? parsedEnd : undefined;
+    if (invite.allDay) {
+        const day = new Intl.DateTimeFormat(undefined, { ...DAY_FORMAT, timeZone: allDayZone(invite.timezone) });
+        const first = day.format(start);
+        // An all-day event's end is the midnight after its last day (iCalendar's DTEND is exclusive), so the last day is a moment before it.
+        const last = end ? day.format(new Date(end.getTime() - 1)) : first;
+        return last === first ? first : `${first} - ${last}`;
+    }
+    const date = new Intl.DateTimeFormat(undefined, DAY_FORMAT);
+    const time = new Intl.DateTimeFormat(undefined, CLOCK_FORMAT);
+    // The zone is named once, after the last time shown: the times are the reader's own, not the organizer's.
+    const timeAndZone = new Intl.DateTimeFormat(undefined, { ...CLOCK_FORMAT, timeZoneName: "short" });
+    const startDay = date.format(start);
+    if (!end) {
+        return `${startDay}, ${timeAndZone.format(start)}`;
+    }
+    return startDay === date.format(end)
+        ? `${startDay}, ${time.format(start)} - ${timeAndZone.format(end)}`
+        : `${startDay}, ${time.format(start)} - ${date.format(end)}, ${timeAndZone.format(end)}`;
+}
+/** The meeting's start the way a list row writes it - `Thu 9/24/2026 1:00 PM` (dates only for an all-day event), in the reader's zone. */
+export function formatRowStart(invite) {
+    const start = validDate(invite.startDate);
+    if (!start) {
+        return undefined;
+    }
+    const zone = invite.allDay ? allDayZone(invite.timezone) : undefined;
+    const weekday = new Intl.DateTimeFormat(undefined, { weekday: "short", timeZone: zone }).format(start);
+    const date = new Intl.DateTimeFormat(undefined, { year: "numeric", month: "numeric", day: "numeric", timeZone: zone }).format(start);
+    return invite.allDay ? `${weekday} ${date}` : `${weekday} ${date} ${new Intl.DateTimeFormat(undefined, CLOCK_FORMAT).format(start)}`;
+}
+/** `YYYY-MM-DD` of an instant in the reader's zone, or in `timeZone` when given (`en-CA` writes a date that way). */
+export function isoDay(date, timeZone) {
+    return new Intl.DateTimeFormat("en-CA", { year: "numeric", month: "2-digit", day: "2-digit", timeZone }).format(date);
+}
+/** Where "Open in Calendar" goes: the day view of the day the meeting starts (the `date`/`view` the calendar page reads), or the calendar itself
+ * when the invitation names no usable start. An all-day event's day is the organizer's; any other is the reader's. */
+export function calendarHref(invite) {
+    const start = validDate(invite.startDate);
+    if (!start) {
+        return APP_HREFS.calendar;
+    }
+    return `${APP_HREFS.calendar}?date=${isoDay(start, invite.allDay ? allDayZone(invite.timezone) : undefined)}&view=day`;
+}
+/** The reader's answer as a list row says it. */
+export const ANSWER_LABEL = {
+    accepted: "Accepted",
+    tentative: "Tentative",
+    declined: "Declined",
+};
+/** The most conflicting events that are named; more are counted. */
+const MAX_NAMED_CONFLICTS = 3;
+/** The titles of the events an invitation conflicts with, as "A, B and 2 more". */
+export function conflictSummary(conflicts) {
+    const titles = conflicts.map((c) => c.title.trim() || "(no title)");
+    return titles.length <= MAX_NAMED_CONFLICTS
+        ? titles.join(", ")
+        : `${titles.slice(0, MAX_NAMED_CONFLICTS).join(", ")} and ${titles.length - MAX_NAMED_CONFLICTS} more`;
+}

package/dist/apps/shared/components/mail/invite/inviteStore.d.ts

@@ -0,0 +1,28 @@
+import { MessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+/**
+ * A per-message cache of the calendar invitation the server reads out of a message, shared by everything that draws one: the reading pane's
+ * card, the list row's RSVP chip and its popover. They ask for the same message a moment apart (the row's chip, then the pane once it is
+ * opened), and an answer given in one has to show in the others, so a lookup is made once and every answer goes through `storeInvite()`.
+ *
+ * A message with no invitation (`null`, the server's 404) is remembered too. A lookup that fails is not - nothing is cached and the next
+ * thing to ask (a remount, another row) tries again - but nothing retries on its own. An entry goes stale after `INVITE_TTL_MS`, because the
+ * calendar it describes can change elsewhere (the meeting deleted, another device answering); it is refetched when next asked for.
+ */
+/** How long a looked-up invitation is trusted before the next ask reads it again. */
+export declare const INVITE_TTL_MS = 30000;
+/** Reads a message's invitation, from the cache when it is fresh. Rejects when the lookup fails. */
+export declare function loadInvite(uid: string): Promise<MessageInvite | null>;
+/** Records the invitation as it now stands after an answer, so the pane, the chip and the popover all show it. */
+export declare function storeInvite(uid: string, invite: MessageInvite): void;
+/** Forgets everything - for tests, and for a sign-out. */
+export declare function clearInviteCache(): void;
+/**
+ * A message's invitation, looked up once (shared with every other user of the same message) when `enabled`. `invite` is `null` until it is
+ * known, and stays `null` for a message with none or a lookup that failed - nothing to draw either way. `settled` says the lookup is over.
+ * Nothing is asked while disabled, and a failure is never retried from here.
+ */
+export declare function useMessageInvite(uid: string, enabled?: boolean): {
+    invite: MessageInvite | null;
+    settled: boolean;
+    setInvite: (invite: MessageInvite) => void;
+};

package/dist/apps/shared/components/mail/invite/inviteStore.js

@@ -0,0 +1,95 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useCallback, useEffect, useReducer } from "react";
+import { getMessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+/**
+ * A per-message cache of the calendar invitation the server reads out of a message, shared by everything that draws one: the reading pane's
+ * card, the list row's RSVP chip and its popover. They ask for the same message a moment apart (the row's chip, then the pane once it is
+ * opened), and an answer given in one has to show in the others, so a lookup is made once and every answer goes through `storeInvite()`.
+ *
+ * A message with no invitation (`null`, the server's 404) is remembered too. A lookup that fails is not - nothing is cached and the next
+ * thing to ask (a remount, another row) tries again - but nothing retries on its own. An entry goes stale after `INVITE_TTL_MS`, because the
+ * calendar it describes can change elsewhere (the meeting deleted, another device answering); it is refetched when next asked for.
+ */
+/** How long a looked-up invitation is trusted before the next ask reads it again. */
+export const INVITE_TTL_MS = 30000;
+const entries = new Map();
+const listeners = new Map();
+function notify(uid) {
+    listeners.get(uid)?.forEach((listener) => listener());
+}
+/** Older servers, or a partial answer, may leave a list out: a card must never fail to draw over one. */
+function normalize(invite) {
+    if (!invite) {
+        return null;
+    }
+    const partial = invite;
+    return { ...invite, attendees: partial.attendees ?? [], conflicts: partial.conflicts ?? [], schedule: partial.schedule ?? [] };
+}
+/** Reads a message's invitation, from the cache when it is fresh. Rejects when the lookup fails. */
+export function loadInvite(uid) {
+    const existing = entries.get(uid);
+    if (existing && (existing.value === undefined || Date.now() - existing.at < INVITE_TTL_MS)) {
+        return existing.promise;
+    }
+    const entry = {
+        at: Date.now(),
+        promise: getMessageInvite(uid).then((invite) => {
+            entry.value = normalize(invite);
+            entry.at = Date.now();
+            notify(uid);
+            return entry.value;
+        }, (err) => {
+            if (entries.get(uid) === entry) {
+                entries.delete(uid);
+            }
+            throw err;
+        }),
+    };
+    entries.set(uid, entry);
+    return entry.promise;
+}
+/** Records the invitation as it now stands after an answer, so the pane, the chip and the popover all show it. */
+export function storeInvite(uid, invite) {
+    const value = normalize(invite);
+    entries.set(uid, { promise: Promise.resolve(value), value, at: Date.now() });
+    notify(uid);
+}
+/** Forgets everything - for tests, and for a sign-out. */
+export function clearInviteCache() {
+    entries.clear();
+}
+/**
+ * A message's invitation, looked up once (shared with every other user of the same message) when `enabled`. `invite` is `null` until it is
+ * known, and stays `null` for a message with none or a lookup that failed - nothing to draw either way. `settled` says the lookup is over.
+ * Nothing is asked while disabled, and a failure is never retried from here.
+ */
+export function useMessageInvite(uid, enabled = true) {
+    const [, rerender] = useReducer((n) => n + 1, 0);
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        let cancelled = false;
+        const update = () => {
+            if (!cancelled) {
+                rerender();
+            }
+        };
+        const set = listeners.get(uid) ?? new Set();
+        set.add(update);
+        listeners.set(uid, set);
+        loadInvite(uid).then(update, () => {
+            // Nothing to show, and nothing worth interrupting the reader with: the message reads the same without it.
+        });
+        return () => {
+            cancelled = true;
+            set.delete(update);
+        };
+    }, [uid, enabled]);
+    const setInvite = useCallback((invite) => storeInvite(uid, invite), [uid]);
+    const value = enabled ? entries.get(uid)?.value : undefined;
+    return { invite: value ?? null, settled: value !== undefined, setInvite };
+}

package/dist/apps/shared/components/mail/layout/FolderBadgeChip.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { FolderBadge } from "../../../mail/folderCounts.js";
+/** A folder's badge: an accent pill with the unread count, or - for the folders that show how many they hold - plain muted text. */
+export default function FolderBadgeChip({ badge }: {
+    badge: FolderBadge;
+}): React.JSX.Element;

package/dist/apps/shared/components/mail/layout/FolderBadgeChip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { badgeLabel } from "../../../mail/folderCounts.js";
+/** A folder's badge: an accent pill with the unread count, or - for the folders that show how many they hold - plain muted text. */
+export default function FolderBadgeChip({ badge }) {
+    return (_jsxs("span", { className: [
+            "text-xs rounded-pill py-0.5 px-1.5",
+            badge.kind === "unread" ? "font-bold bg-primary/15 text-primary-dark" : "font-medium text-text-muted",
+        ].join(" "), children: [_jsx("span", { "aria-hidden": "true", children: badge.value }), _jsxs("span", { className: "sr-only", children: [" ", badgeLabel(badge)] })] }));
+}

package/dist/apps/shared/components/mail/layout/MailShell.d.ts

@@ -59,6 +59,11 @@ export interface MailShellContextValue {
      * context value, which is only ever read outside a real shell.
      */
     trackMessageChange: (previous: Message, next: Message | null) => CountTracker;
+    /**
+     * The phone layout's header row beside the folders button, for the page to put its search box in (`createPortal()`): the shell
+     * owns the row, the page owns the search state. `null` until the row has rendered, and on the default context value.
+     */
+    mobileSearchSlot: HTMLElement | null;
 }
 /** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
 export declare function useMailShell(): MailShellContextValue;
@@ -78,5 +83,10 @@ export { MAILBOX_LIST_LIMIT };
  * behavior change from before this, and a multi-mailbox user sees every mailbox's folders (and the new
  * aggregate section) simultaneously, matching the shared-mailbox feature's own "display as a separate set
  * of folders" requirement.
+ *
+ * An address that names nothing opens "All Mailboxes > Inbox" when there is more than one mailbox (that is when the section exists), and
+ * the one mailbox's own Inbox otherwise; a `?mailboxUid=`, `?folderUid=` or `?aggregate=` always wins. Nothing is selected until the address
+ * has been read. What needs a single mailbox while an all-mailboxes view is open (Compose, the new-message shortcut, key unlocking) uses the
+ * primary mailbox.
  */
 export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }: PropsWithChildren<MailShellProps>): React.JSX.Element;