@rapidmx/web-client 0.28.0 → 0.29.0

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

@@ -3,6 +3,7 @@ import { useDraggable, useDroppable } from "@dnd-kit/core";
 import { addDays, eachDayOfInterval, endOfMonth, endOfWeek, format, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
 import { dayDropId, eventDragId } from "../../../../lib/calendar/calendarDragIds.js";
 import { occursOnDay, startsOnDay } from "./allDay.js";
+import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
 import { anchorOf } from "./EventShell.js";
 const MAX_CHIPS_PER_DAY = 3;
 /** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day and all-day
@@ -15,7 +16,12 @@ export default function MonthView({ viewDate, occurrences, folderColors, onSelec
 }
 function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }) {
     const { setNodeRef, isOver } = useDroppable({ id: dayDropId(day) });
-    const visible = occurrences.slice(0, MAX_CHIPS_PER_DAY);
+    const activeKey = useActiveOccurrenceKey();
+    // The search's current result is always shown, even when it would be one of the "+N more".
+    const activeIndex = occurrences.findIndex((occ) => occ.occurrenceKey === activeKey);
+    const visible = activeIndex >= MAX_CHIPS_PER_DAY
+        ? [...occurrences.slice(0, MAX_CHIPS_PER_DAY - 1), occurrences[activeIndex]]
+        : occurrences.slice(0, MAX_CHIPS_PER_DAY);
     const overflowCount = occurrences.length - visible.length;
     return (_jsxs("div", { ref: setNodeRef, onClick: (e) => {
             // Only the empty part of the cell: the day number, the chips and "+N more" have their own clicks.
@@ -34,18 +40,21 @@ function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay,
 function EventChip({ occurrence, color, onSelect, }) {
     const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
     const isFree = occurrence.busyStatus === "free";
-    return (_jsxs("button", { ref: setNodeRef, type: "button", onClick: () => onSelect(occurrence), style: {
+    const marker = occurrenceMarker(useActiveOccurrenceKey(), occurrence);
+    return (_jsxs("button", { ref: setNodeRef, ...marker.attrs, type: "button", onClick: () => onSelect(occurrence), style: {
             ...(transform ? { transform: `translate(${transform.x}px, ${transform.y}px)`, zIndex: 10 } : undefined),
             ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
         }, className: [
             "text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0",
             isFree ? "bg-surface-alt text-text-muted" : "",
             isDragging ? "opacity-50" : "",
+            marker.className,
         ].join(" "), ...listeners, ...attributes, children: [occurrence.allDay ? "" : `${format(new Date(occurrence.startDate), "h:mma")} `, occurrence.title] }));
 }
 /** A multi-day event's chip on a day after its first: clickable, but not draggable (its drag id is
  * already taken by the start day's chip) and without a start-time prefix. */
 function ContinuationChip({ occurrence, color, onSelect, }) {
     const isFree = occurrence.busyStatus === "free";
-    return (_jsx("button", { type: "button", onClick: () => onSelect(occurrence), style: isFree ? undefined : { backgroundColor: color, color: "#fff" }, className: ["text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0", isFree ? "bg-surface-alt text-text-muted" : ""].join(" "), children: occurrence.title }));
+    const marker = occurrenceMarker(useActiveOccurrenceKey(), occurrence);
+    return (_jsx("button", { type: "button", ...marker.attrs, onClick: () => onSelect(occurrence), style: isFree ? undefined : { backgroundColor: color, color: "#fff" }, className: ["text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0", isFree ? "bg-surface-alt text-text-muted" : "", marker.className].join(" "), children: occurrence.title }));
 }

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

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+/** The side a card slides in from: the Previous match's comes from the left, the Next match's from the right. */
+export type SlideFrom = "left" | "right";
+/** How long the card takes to settle, and how far off it starts, in px. */
+export declare const SLIDE_IN_MS = 220;
+/**
+ * Slides what it holds in from `from` (and fades it in) as it mounts - mount it afresh (a `key`) for each card. Without `from` (the card was just
+ * opened, not stepped to) nothing moves. The animation is the Web Animations API's, so nothing is left behind in the styles, and it is skipped
+ * for someone who asked for less motion and where the browser has no `Element.animate()`. `data-slide-from` says which way it came, for tests and
+ * styling. Its own clip (`overflow-x-clip`, which makes no scroller) keeps the sliding card inside the dialog's edges; the dialog itself, the
+ * backdrop and the buttons beside the card are not moved.
+ */
+export default function SlideIn({ from, children }: {
+    from?: SlideFrom;
+    children: ReactNode;
+}): React.JSX.Element;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useLayoutEffect, useRef } from "react";
+import { prefersReducedMotion } from "../../gestures/useEnterSlide.js";
+/** How long the card takes to settle, and how far off it starts, in px. */
+export const SLIDE_IN_MS = 220;
+const SLIDE_IN_OFFSET_PX = 48;
+/**
+ * Slides what it holds in from `from` (and fades it in) as it mounts - mount it afresh (a `key`) for each card. Without `from` (the card was just
+ * opened, not stepped to) nothing moves. The animation is the Web Animations API's, so nothing is left behind in the styles, and it is skipped
+ * for someone who asked for less motion and where the browser has no `Element.animate()`. `data-slide-from` says which way it came, for tests and
+ * styling. Its own clip (`overflow-x-clip`, which makes no scroller) keeps the sliding card inside the dialog's edges; the dialog itself, the
+ * backdrop and the buttons beside the card are not moved.
+ */
+export default function SlideIn({ from, children }) {
+    const ref = useRef(null);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!from || typeof element.animate !== "function" || prefersReducedMotion()) {
+            return;
+        }
+        const offset = from === "left" ? -SLIDE_IN_OFFSET_PX : SLIDE_IN_OFFSET_PX;
+        element.animate([
+            { transform: `translateX(${offset}px)`, opacity: 0 },
+            { transform: "translateX(0)", opacity: 1 },
+        ], { duration: SLIDE_IN_MS, easing: "ease-out" });
+    }, []);
+    return (_jsx("div", { className: "overflow-x-clip", children: _jsx("div", { ref: ref, "data-slide-from": from, children: children }) }));
+}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { addDays, addMinutes, format, startOfDay } from "date-fns";
 import { occursOnDay } from "./allDay.js";
+import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
 import { anchorOf } from "./EventShell.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
@@ -22,6 +23,7 @@ export default function SplitDayView({ day, columns, occurrences, onSelectEvent,
     return (_jsxs("div", { role: "region", "aria-label": "Split view", "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" }), columns.map((col) => (_jsxs("div", { className: "flex-1 min-w-0 py-1 flex items-center justify-center gap-1.5 border-l border-border", children: [_jsx("span", { "aria-hidden": "true", className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: col.color } }), _jsx("span", { className: "text-xs font-semibold truncate", children: col.name })] }, col.folderUid)))] }), _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))) }), columns.map((col) => (_jsx(SplitColumn, { column: col, dayStart: dayStart, occurrences: dayOccurrences.filter((occ) => occ.folderUid === col.folderUid), onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, col.folderUid)))] })] }));
 }
 function SplitColumn({ column, dayStart, occurrences, onSelectEvent, onSelectSlot, }) {
+    const activeKey = useActiveOccurrenceKey();
     return (_jsxs("div", { className: "flex-1 min-w-0 relative border-l border-border", children: [Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
                 const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
                 return (_jsx("button", { type: "button", onClick: (e) => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget)), style: { height: HOUR_HEIGHT_PX / 2 }, className: "block w-full border-b border-border/50 text-left", "aria-label": `New event at ${format(slotStart, "h:mm a")} in ${column.name}` }, i));
@@ -36,7 +38,8 @@ function SplitColumn({ column, dayStart, occurrences, onSelectEvent, onSelectSlo
                 const top = ((visibleStart - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
                 const height = Math.max(((visibleEnd - visibleStart) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
                 const isFree = occurrence.busyStatus === "free";
-                return (_jsxs("div", { onClick: () => onSelectEvent(occurrence), style: {
+                const marker = occurrenceMarker(activeKey, occurrence);
+                return (_jsxs("div", { ...marker.attrs, onClick: () => onSelectEvent(occurrence), style: {
                         position: "absolute",
                         top,
                         height,
@@ -46,6 +49,7 @@ function SplitColumn({ column, dayStart, occurrences, onSelectEvent, onSelectSlo
                     }, className: [
                         "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
                         isFree ? "bg-surface-alt text-text-muted" : "",
+                        marker.className,
                     ].join(" "), children: [_jsx("div", { className: "font-medium truncate", children: occurrence.title }), _jsx("div", { className: "truncate", children: format(start, "h:mma") })] }, occurrence.occurrenceKey));
             })] }));
 }

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 "../../../../lib/calendar/calendarDragIds.js";
 import { occursOnDay, startsOnDay } from "./allDay.js";
+import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
 import { anchorOf } from "./EventShell.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
@@ -14,9 +15,13 @@ 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);
+    const activeKey = useActiveOccurrenceKey();
     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: "relative -top-1.5 text-[10px] text-text-muted text-right pr-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())))] })] }));
+                            .map((occ) => {
+                            const marker = occurrenceMarker(activeKey, occ);
+                            return (_jsx("button", { type: "button", ...marker.attrs, onClick: () => onSelectEvent(occ), style: { backgroundColor: folderColors[occ.folderUid], color: "#fff" }, className: ["text-xs text-left truncate rounded-sm px-1.5 py-0.5", marker.className].join(" "), 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: "relative -top-1.5 text-[10px] text-text-muted text-right pr-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())))] })] }));
 }
 function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }) {
     const dayStart = startOfDay(day);
@@ -44,7 +49,8 @@ function blockGeometry(occurrence, dayStart) {
 function ContinuationBlock({ occurrence, color, dayStart, onSelect, }) {
     const isFree = occurrence.busyStatus === "free";
     const { top, height } = blockGeometry(occurrence, dayStart);
-    return (_jsx("div", { onClick: () => onSelect(occurrence), style: { position: "absolute", top, height, left: 2, right: 2, ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }) }, className: ["rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer", isFree ? "bg-surface-alt text-text-muted" : ""].join(" "), children: _jsx("div", { className: "font-medium truncate", children: occurrence.title }) }));
+    const marker = occurrenceMarker(useActiveOccurrenceKey(), occurrence);
+    return (_jsx("div", { ...marker.attrs, onClick: () => onSelect(occurrence), style: { position: "absolute", top, height, left: 2, right: 2, ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }) }, className: ["rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer", isFree ? "bg-surface-alt text-text-muted" : "", marker.className].join(" "), children: _jsx("div", { className: "font-medium truncate", children: occurrence.title }) }));
 }
 function EventBlock({ occurrence, color, dayStart, onSelect, }) {
     const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
@@ -54,11 +60,12 @@ function EventBlock({ occurrence, color, dayStart, onSelect, }) {
     const isFree = occurrence.busyStatus === "free";
     const start = new Date(occurrence.startDate);
     const { top, height } = blockGeometry(occurrence, dayStart);
+    const marker = occurrenceMarker(useActiveOccurrenceKey(), occurrence);
     // The resize handle's own drag position has no live pixel preview (it only applies its ns-resize
     // affordance) — the actual new end time is computed from whichever slot it's dropped onto (see
     // `resolveDragAction`'s "resize" case), snapped to the grid rather than following the pointer
     // continuously. Simpler, and avoids a visual preview that could disagree with the snapped result.
-    return (_jsxs("div", { ref: setNodeRef, onClick: () => onSelect(occurrence), style: {
+    return (_jsxs("div", { ref: setNodeRef, ...marker.attrs, onClick: () => onSelect(occurrence), style: {
             position: "absolute",
             top,
             height,
@@ -71,5 +78,6 @@ function EventBlock({ occurrence, color, dayStart, onSelect, }) {
             "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
             isFree ? "bg-surface-alt text-text-muted" : "",
             isDragging ? "opacity-50" : "",
+            marker.className,
         ].join(" "), ...listeners, ...attributes, children: [_jsx("div", { className: "font-medium truncate", children: occurrence.title }), _jsx("div", { className: "truncate", children: format(start, "h:mma") }), _jsx("div", { ref: setResizeRef, className: "absolute bottom-0 left-0 right-0 h-1.5 cursor-ns-resize", "aria-label": `Resize "${occurrence.title}"`, ...resizeListeners, ...resizeAttributes })] }));
 }

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

@@ -0,0 +1,15 @@
+import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
+/** The `occurrenceKey` of the search result the calendar is pointing at (`null`: none), for the views to mark - a context, so the month, week and split
+ * views and their many kinds of chip need no prop threaded through each. */
+export declare const ActiveOccurrenceContext: import("react").Context<string | null>;
+/** The key of the occurrence the calendar's search is on. */
+export declare function useActiveOccurrenceKey(): string | null;
+/** What an occurrence's chip or block spreads on itself: `data-occurrence-key` (how the page finds it to scroll to) and, when it is the
+ * `activeKey` one, a ring and `data-active-match`. */
+export declare function occurrenceMarker(activeKey: string | null, occurrence: CalendarOccurrence): {
+    attrs: {
+        "data-occurrence-key": string;
+        "data-active-match"?: "true";
+    };
+    className: string;
+};

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

@@ -0,0 +1,21 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { createContext, useContext } from "react";
+/** The `occurrenceKey` of the search result the calendar is pointing at (`null`: none), for the views to mark - a context, so the month, week and split
+ * views and their many kinds of chip need no prop threaded through each. */
+export const ActiveOccurrenceContext = createContext(null);
+/** The key of the occurrence the calendar's search is on. */
+export function useActiveOccurrenceKey() {
+    return useContext(ActiveOccurrenceContext);
+}
+/** What an occurrence's chip or block spreads on itself: `data-occurrence-key` (how the page finds it to scroll to) and, when it is the
+ * `activeKey` one, a ring and `data-active-match`. */
+export function occurrenceMarker(activeKey, occurrence) {
+    const active = activeKey === occurrence.occurrenceKey;
+    return {
+        attrs: { "data-occurrence-key": occurrence.occurrenceKey, ...(active ? { "data-active-match": "true" } : undefined) },
+        className: active ? "ring-2 ring-text ring-offset-1 ring-offset-surface" : "",
+    };
+}

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

@@ -44,6 +44,10 @@ export declare function startWeekdayCode(start: string, allDay: boolean, timezon
  * each day rather than only on its start day.
  */
 export declare function occursOnDay(occurrence: CalendarOccurrence, day: Date): boolean;
+/** Whether `occurrence` is on show on `today` (a local day) or later: it ends after that day begins, so one still running today counts and one that ended is not. */
+export declare function isUpcoming(occurrence: CalendarOccurrence, today: Date): boolean;
+/** The local calendar day (midnight) `occurrence` starts on - the day a view shows to bring it into sight. */
+export declare function occurrenceDay(occurrence: CalendarOccurrence): Date;
 /**
  * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
  * draggable — a drag id must be unique, so the continuation copies on later days are display-only.

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

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { format } from "date-fns";
+import { format, parseISO, startOfDay } from "date-fns";
 import { toEventWallClock } from "../../../../lib/calendar/recurrence.js";
 const MS_PER_DAY = 86400000;
 /**
@@ -99,6 +99,19 @@ export function occursOnDay(occurrence, day) {
     }
     return start < dayEnd && end > dayStart;
 }
+/** Whether `occurrence` is on show on `today` (a local day) or later: it ends after that day begins, so one still running today counts and one that ended is not. */
+export function isUpcoming(occurrence, today) {
+    if (occurrence.allDay) {
+        const key = localDateKey(today);
+        return allDayDateKey(occurrence.endDate) > key || allDayDateKey(occurrence.startDate) >= key;
+    }
+    const dayStart = startOfDay(today);
+    return new Date(occurrence.endDate) > dayStart || new Date(occurrence.startDate) >= dayStart;
+}
+/** The local calendar day (midnight) `occurrence` starts on - the day a view shows to bring it into sight. */
+export function occurrenceDay(occurrence) {
+    return occurrence.allDay ? parseISO(allDayDateKey(occurrence.startDate)) : startOfDay(new Date(occurrence.startDate));
+}
 /**
  * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
  * draggable — a drag id must be unique, so the continuation copies on later days are display-only.

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

@@ -0,0 +1,16 @@
+/**
+ * The calendar's views, and the one the reader last chose - kept in `localStorage` so coming back to the Calendar from elsewhere in the app (or
+ * reopening it) lands on the same view, the way the mail list remembers its own arrangement (see `listPreferences.ts`). Per device, not synced.
+ * A read that finds nothing, something this client doesn't know or a blocked store gives `null`, and a write that fails is swallowed: the
+ * choice then only doesn't outlive the page.
+ */
+/** The views, in the order the switcher lists them: the List sits left of the Month. */
+export type CalendarView = "list" | "month" | "week" | "workWeek" | "day" | "split";
+export declare const CALENDAR_VIEWS: CalendarView[];
+/** Whether `value` names a view. */
+export declare function isCalendarView(value: unknown): value is CalendarView;
+/** The view last chosen, or `null` when none was (or it cannot be read). The calendar page does not restore a stored `"list"`: that view is the phone's
+ * default and is never written by a desktop. */
+export declare function getStoredCalendarView(): CalendarView | null;
+/** Remembers `view` as the one to open the Calendar on. */
+export declare function storeCalendarView(view: CalendarView): void;

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

@@ -0,0 +1,36 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The calendar's views, and the one the reader last chose - kept in `localStorage` so coming back to the Calendar from elsewhere in the app (or
+ * reopening it) lands on the same view, the way the mail list remembers its own arrangement (see `listPreferences.ts`). Per device, not synced.
+ * A read that finds nothing, something this client doesn't know or a blocked store gives `null`, and a write that fails is swallowed: the
+ * choice then only doesn't outlive the page.
+ */
+export const CALENDAR_VIEWS = ["list", "month", "week", "workWeek", "day", "split"];
+const STORAGE_KEY = "rapidmx:calendar-view";
+/** Whether `value` names a view. */
+export function isCalendarView(value) {
+    return CALENDAR_VIEWS.includes(value);
+}
+/** The view last chosen, or `null` when none was (or it cannot be read). The calendar page does not restore a stored `"list"`: that view is the phone's
+ * default and is never written by a desktop. */
+export function getStoredCalendarView() {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        return isCalendarView(stored) ? stored : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** Remembers `view` as the one to open the Calendar on. */
+export function storeCalendarView(view) {
+    try {
+        localStorage.setItem(STORAGE_KEY, view);
+    }
+    catch {
+        // A blocked store only means the choice does not outlive the page.
+    }
+}

package/dist/apps/shared/components/layout/AppShell.js

@@ -17,6 +17,7 @@ import ComposeProvider from "../mail/compose/ComposeContext.js";
 import ContactCardProvider from "../contacts/ContactCardProvider.js";
 import { flushComposeDrafts, markSigningOut } from "../mail/compose/composeFlushRegistry.js";
 import BottomTabBar from "../../../../lib/components/navigation/BottomTabBar.js";
+import NavBadge, { navItemLabel } from "../../../../lib/components/navigation/NavBadge.js";
 import { FrameBrandingFooter, FrameBrandingHeader, useBrandingHtml } from "./BrandingChrome.js";
 import RailIcon from "./RailIcon.js";
 import AppearanceProvider from "../../appearance/AppearanceProvider.js";
@@ -237,13 +238,16 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
     }, [fetchedBranding?.title, inFrame]);
     // The router sets the document's title to the page's own whenever the page changes, which drops the unread count this puts in front
     // of it, so a new pathname is what puts the count back. (A folder change is shallow and keeps the title.)
-    useUnreadTitle(inboxUnreadTotal(mail.mailboxFolders, mail.folderCounts.counts), { enabled: inFrame, resetKey: pathname });
+    // The same count is the chip on the Mail icon (rail and bottom tab bar). It is zero - no chip - until the folders are listed, with no
+    // mailbox, and wherever the connection is off, so nothing shows when mail isn't available.
+    const unreadTotal = inboxUnreadTotal(mail.mailboxFolders, mail.folderCounts.counts);
+    useUnreadTitle(unreadTotal, { enabled: inFrame, resetKey: pathname });
     // Plugin rail entries that depend on the user (the meet plugin's personal room) are asked for once they are signed in.
     const resolvedRail = useResolvedRailItems(pluginNav?.appRail, userUid);
     if (!userUid) {
         return _jsx("div", { className: "min-h-screen" });
     }
-    const apps = appRailItems(pluginNav, resolvedRail);
+    const apps = appRailItems(pluginNav, resolvedRail).map((app) => (app.id === "mail" ? { ...app, badge: unreadTotal } : app));
     // The header title: "settings" has no rail item, everything else is labelled by its own rail item.
     const activeLabel = active === "settings" ? "Settings" : apps.find((app) => app.id === active)?.label;
     // A custom header (`Branding.headerHtml`) replaces the app's own title bar and the icon at the top of the rail: it is the top of the app, and the
@@ -259,12 +263,12 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
                                                             "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center gap-1",
                                                             // Under a custom header the rail starts with the app icons; without one its own icon is flush with the top of the window.
                                                             customHeader ? "py-3" : "pb-3",
-                                                        ].join(" "), children: [!customHeader && (_jsx(RailIcon, { src: iconSrc })), apps.map(({ id, href, label, icon: Icon }) => (_jsx("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: label, className: [
+                                                        ].join(" "), children: [!customHeader && (_jsx(RailIcon, { src: iconSrc })), apps.map(({ id, href, label, icon: Icon, badge }) => (_jsx("a", { href: href, "aria-label": navItemLabel(label, badge), "aria-current": id === active ? "page" : undefined, title: navItemLabel(label, badge), className: [
                                                                     "w-10 h-10 flex items-center justify-center rounded-sm",
                                                                     id === active
                                                                         ? "bg-primary/10 text-primary-dark"
                                                                         : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                                                ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && !customHeader && (_jsxs("header", { ref: headerRef, className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), renderUserMenu("down")] })), _jsx(NotificationCenter, {}), _jsx("div", { id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), !hideChrome && _jsx(FrameBrandingFooter, { parsed: footer, userMenu: menuInFooter ? renderUserMenu("up") : undefined, appTitle: activeLabel })] }) }) })] }), _jsx(NotificationHistoryDialog, { open: historyOpen, onClose: () => setHistoryOpen(false) })] }) }) }));
+                                                                ].join(" "), children: _jsxs("span", { className: "relative inline-flex", children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), _jsx(NavBadge, { count: badge })] }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && !customHeader && (_jsxs("header", { ref: headerRef, className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), renderUserMenu("down")] })), _jsx(NotificationCenter, {}), _jsx("div", { id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), !hideChrome && _jsx(FrameBrandingFooter, { parsed: footer, userMenu: menuInFooter ? renderUserMenu("up") : undefined, appTitle: activeLabel })] }) }) })] }), _jsx(NotificationHistoryDialog, { open: historyOpen, onClose: () => setHistoryOpen(false) })] }) }) }));
 }
 /**
  * What a page's own shell (`MailShell`, `CalendarShell`, ...) renders around its content. Outside the client-side router it

package/dist/apps/shared/components/mail/ConversationList.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { Message } from "../../../../lib/mail/mailApi.js";
 import { ConversationSummary } from "../../../../lib/mail/conversationsApi.js";
+import { ClickModifiers } from "../../mail/rangeSelection.js";
 /** A conversation row of the list. `mailboxUid` is set only by a view that merges several mailboxes ("All Mailboxes"), whose rows are
  * each from a different one; a list of one mailbox's own leaves it out and every row is that mailbox's. */
 export type ListedConversation = ConversationSummary & {
@@ -33,6 +34,13 @@ export interface ConversationListProps {
     /** The `conversationRowKey()`s currently ticked. */
     selectedConversationIds?: Set<string>;
     onToggleSelected?: (conversation: ListedConversation) => void;
+    /**
+     * A Shift, Ctrl or Cmd click on a parent row (or on its checkbox): the caller extends or toggles the selection instead of this list opening or
+     * ticking the row itself (`onOpenMessage` / `onToggleSelected` are not called for it). Absent, those clicks behave as plain ones.
+     */
+    onSelectWithModifier?: (conversation: ListedConversation, modifiers: ClickModifiers) => void;
+    /** The `conversationRowKey()`s of rows on their way out of the list (moved, deleted): drawn non-interactive and hidden from assistive technology while the page collapses them. */
+    exitingKeys?: Set<string>;
     /**
      * What swiping a parent row does on a phone: right to left archives the conversation (resolving whether it went through), left
      * to right asks where to move it. Absent, or `enabled: false` (a desktop), rows don't follow a finger.
@@ -62,4 +70,4 @@ export interface ConversationListProps {
  * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
  * its own name.
  */
-export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, swipe, newestFirst, }: ConversationListProps): React.JSX.Element;
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, onSelectWithModifier, exitingKeys, swipe, newestFirst, }: ConversationListProps): React.JSX.Element;

package/dist/apps/shared/components/mail/ConversationList.js

@@ -15,6 +15,7 @@ import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
 import SwipeRow from "./SwipeRow.js";
 import InviteRowChip from "./invite/InviteRowChip.js";
+import { isSelectionClick } from "../../mail/rangeSelection.js";
 /** What tells a row apart from the others: the same conversation id in two mailboxes (a message sent to both) is two rows. */
 export function conversationRowKey(conversation) {
     return conversation.mailboxUid ? `${conversation.mailboxUid}\u0000${conversation.conversationId}` : conversation.conversationId;
@@ -36,7 +37,7 @@ function participantList(conversation) {
  * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
  * its own name.
  */
-export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, swipe, newestFirst, }) {
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, onSelectWithModifier, exitingKeys, swipe, newestFirst, }) {
     const client = useApiClient();
     // What this device has decrypted of the encrypted messages on screen: their real subjects and previews.
     const decrypted = useDecryptedMessages();
@@ -105,7 +106,14 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
             const panelId = `conversation-messages-${conversation.mailboxUid ? `${conversation.mailboxUid}-` : ""}${conversation.conversationId}`;
             const ticked = selectedConversationIds?.has(id) ?? false;
-            return (_jsxs("li", { children: [_jsxs(SwipeRow, { as: "div", enabled: !!swipe?.enabled && !selectMode, onArchive: () => swipe.onArchive(conversation), onMove: () => swipe.onMove(conversation), "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: () => onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: ["shrink-0 px-2 text-text-muted hover:text-text", ROW_FOCUS_CLASS].join(" "), children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["w-full text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: unread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: ["flex-1", senderClass(unread)].join(" ") }), conversation.participants.length > 1 && (_jsxs("span", { className: "text-xs text-text-muted shrink-0 font-normal", title: participantList(conversation), children: ["+", conversation.participants.length - 1, _jsxs("span", { className: "sr-only", children: [" more: ", participantList(conversation)] })] })), _jsx("span", { className: ["text-xs shrink-0", dateClass(unread)].join(" "), children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: ["text-sm truncate", subjectClass(unread)].join(" "), children: decrypted[conversation.latestMessageUid]?.subject || displaySubject(conversation.subject) || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? decrypted[conversation.latestMessageUid]?.preview || _jsx(EncryptedPreview, {}) : conversation.latestPreview }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/15 text-primary-dark font-bold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: {
+            const exiting = exitingKeys?.has(id) ?? false;
+            return (_jsxs("li", { "data-exiting": exiting ? "true" : undefined, "aria-hidden": exiting ? "true" : undefined, inert: exiting, className: exiting ? "pointer-events-none" : undefined, children: [_jsxs(SwipeRow, { as: "div", enabled: !!swipe?.enabled && !selectMode, onArchive: () => swipe.onArchive(conversation), onMove: () => swipe.onMove(conversation), "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: (event) => 
+                                    // The change of a checkbox is caused by a click (or the Space key, which makes one): its modifiers are that event's.
+                                    onSelectWithModifier && isSelectionClick(event.nativeEvent)
+                                        ? onSelectWithModifier(conversation, event.nativeEvent)
+                                        : onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: ["shrink-0 px-2 text-text-muted hover:text-text", ROW_FOCUS_CLASS].join(" "), children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("button", { type: "button", "data-row-open": true, onClick: (event) => onSelectWithModifier && isSelectionClick(event)
+                                            ? onSelectWithModifier(conversation, event)
+                                            : onOpenMessage(conversation, conversation.latestMessageUid), className: ["w-full text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: unread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: ["flex-1", senderClass(unread)].join(" ") }), conversation.participants.length > 1 && (_jsxs("span", { className: "text-xs text-text-muted shrink-0 font-normal", title: participantList(conversation), children: ["+", conversation.participants.length - 1, _jsxs("span", { className: "sr-only", children: [" more: ", participantList(conversation)] })] })), _jsx("span", { className: ["text-xs shrink-0", dateClass(unread)].join(" "), children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: ["text-sm truncate", subjectClass(unread)].join(" "), children: decrypted[conversation.latestMessageUid]?.subject || displaySubject(conversation.subject) || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? decrypted[conversation.latestMessageUid]?.preview || _jsx(EncryptedPreview, {}) : conversation.latestPreview }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/15 text-primary-dark font-bold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: {
                                             uid: conversation.latestMessageUid,
                                             meetingMethod: conversation.latestMeetingMethod ?? undefined,
                                             meetingResponse: answers[conversation.latestMessageUid] ??

package/dist/apps/shared/components/mail/ConversationThreadPane.js

@@ -15,6 +15,7 @@ import { ENCRYPTED_SUBJECT_PLACEHOLDER, EncryptedPreview, displaySubject } from
 import { useDecryptedMessages } from "../../mail/decryptedMessages.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import PendingMessageCard from "./reading/PendingMessageCard.js";
+import { InlineComposeSlot, useInlineCompose } from "./compose/ComposeContext.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
 import { adoptedOutgoing, belongsToThread, settleOutgoing, useOutgoingReplies } from "../../mail/outbox/outgoingReplies.js";
@@ -137,6 +138,9 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     const [error, setError] = useState(null);
     /** The message to scroll to and focus once it has rendered, or `null` once that has happened. */
     const [pendingFocusUid, setPendingFocusUid] = useState(null);
+    // The Reply / Reply all / Forward compose windows of this thread's messages, drawn as cards at the top of the list; the thread's messages are
+    // what makes the compose provider open a reply here rather than floating at the bottom right.
+    const inlineSessions = useInlineCompose(messages.map((message) => message.uid));
     // Bumped on every conversation switch - an in-flight load/attachments/mark-read response carrying an
     // older generation belongs to a superseded conversation and is dropped rather than applied.
     const generationRef = useRef(0);
@@ -436,7 +440,11 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                         : undefined
                     : error
                         ? undefined
-                        : `${messages.length + pendingCards.length} message${messages.length + pendingCards.length === 1 ? "" : "s"}`, children: truncated && !loading && !error && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] })) }), loading ? (_jsx(SkeletonCards, { messageCount: conversation.messageCount })) : error ? (_jsx("div", { className: "p-2 sm:p-3", children: _jsx(Alert, { children: error }) })) : (_jsxs("ul", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: [pendingCards.map((reply) => (_jsx("li", { ref: (node) => {
+                        : `${messages.length + pendingCards.length} message${messages.length + pendingCards.length === 1 ? "" : "s"}`, children: truncated && !loading && !error && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] })) }), loading ? (_jsx(SkeletonCards, { messageCount: conversation.messageCount })) : error ? (_jsx("div", { className: "p-2 sm:p-3", children: _jsx(Alert, { children: error }) })) : (_jsxs("ul", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: [inlineSessions.map((session) => (_jsx(InlineComposeSlot, { id: session.id, onPlaced: (slot) => {
+                            // Brought into view like a message that has just been sent: the same scroll, inside the list.
+                            rowRefs.current[session.id] = slot;
+                            setPendingFocusUid(session.id);
+                        } }, session.id))), pendingCards.map((reply) => (_jsx("li", { ref: (node) => {
                             rowRefs.current[reply.uid] = node;
                         }, "data-outgoing": "true", children: _jsx(PendingMessageCard, { reply: reply, headerRef: (node) => {
                                 headerRefs.current[reply.uid] = node;

package/dist/apps/shared/components/mail/MailSelectionBar.js

@@ -4,13 +4,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
+import { HiOutlineArchiveBox, HiOutlineCheckCircle, HiOutlineEnvelope, HiOutlineEnvelopeOpen, HiOutlineFlag, HiOutlineFolderArrowDown, HiOutlineMinusCircle, HiOutlineNoSymbol, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
 import LabelMenuButton from "./labelMenu.js";
 import MoveToFolderDialog, { MOVE_TARGET_TYPES } from "./MoveToFolderDialog.js";
 import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
 import { SHORTCUTS } from "../../keyboard/keymap.js";
 import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
-function actionClassName(destructive = false) {
-    return `px-2 py-1 rounded-md text-sm ${destructive ? "text-danger font-semibold" : "text-text"} hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent`;
+/** The look of the bar's icon buttons - the reading pane's own command row (`ICON_BUTTON_CLASS` in `MessageDetailPane`), without its border, which nine of them in a row don't need. */
+function iconClassName(destructive = false) {
+    return `inline-flex items-center justify-center p-1.5 rounded-md text-sm ${destructive ? "text-danger" : "text-text"} hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent`;
+}
+/** One of the bar's actions as an icon button: the action's name is its `aria-label` (so it has the accessible name its text button had) and its tooltip,
+ * unless there is a `reason` it is unavailable, or a keyboard shortcut to name (`title` and `aria-keyshortcuts` from `hint()`). */
+function BarAction({ icon, label, onClick, disabled, reason, destructive, hint, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, onClick: onClick, disabled: disabled, className: iconClassName(destructive), ...hint, title: reason ?? hint?.title ?? label, children: icon }));
 }
 /**
  * The header that replaces the list's own toolbar while select mode is on: how many rows are selected,
@@ -47,7 +54,7 @@ export default function MailSelectionBar({ selected, listed, totals, onSelectAll
     // partially applied, and is left exactly as it is unless the reader touches that row.
     const appliedToAll = labels.filter((label) => !none && selected.every((m) => m.labelUids?.includes(label.uid)));
     const appliedToSome = labels.filter((label) => selected.some((m) => m.labelUids?.includes(label.uid)) && !appliedToAll.includes(label));
-    return (_jsxs("div", { className: "border-b border-border", children: [_jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: mailboxUid, folders: folders, currentFolderUid: currentFolderUid, count: selected.length, onMove: onMoveTo, onFolderCreated: onFolderCreated }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-surface-alt", children: [_jsxs("span", { "aria-live": "polite", className: "text-sm font-semibold text-text", children: [selectedCount, totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : "", " selected"] }), _jsx("button", { type: "button", onClick: onSelectAll, disabled: allSelected || listedCount === 0, className: actionClassName(), children: "Select all" }), _jsx("button", { type: "button", onClick: onClearSelection, disabled: selectedCount === 0, className: actionClassName(), children: "Clear" }), _jsx("button", { type: "button", onClick: onCancel, className: `${actionClassName()} ml-auto`, children: "Cancel" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-0.5 px-1.5 py-1", children: [_jsx("button", { type: "button", onClick: () => onSetRead(true), disabled: none || busy, className: actionClassName(), ...hint("Mark read", SHORTCUTS.mail.markRead), children: "Mark read" }), _jsx("button", { type: "button", onClick: () => onSetRead(false), disabled: none || busy, className: actionClassName(), ...hint("Mark unread", SHORTCUTS.mail.markUnread), children: "Mark unread" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(true), disabled: none || busy, className: actionClassName(), ...hint("Flag", SHORTCUTS.mail.flag), children: "Flag" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(false), disabled: none || busy, className: actionClassName(), children: "Unflag" }), _jsx("button", { type: "button", onClick: onArchive, disabled: none || busy || !!archiveReason, title: archiveReason, className: actionClassName(), children: "Archive" }), _jsx(LabelMenuButton, { "aria-label": "Apply label", label: "Apply label", className: "text-sm", labels: labels, mailboxUid: mailboxUid, onLabelCreated: onLabelCreated, applied: appliedToAll.map((label) => label.uid), partial: appliedToSome.map((label) => label.uid), onCommit: onApplyLabels, busy: busy, disabled: none || busy || !!labelsDisabledReason, title: labelsDisabledReason, note: selected.length === 1
+    return (_jsxs("div", { className: "border-b border-border", children: [_jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: mailboxUid, folders: folders, currentFolderUid: currentFolderUid, count: selected.length, onMove: onMoveTo, onFolderCreated: onFolderCreated }), _jsxs("div", { className: "flex items-center gap-1 px-3 py-1.5 bg-surface-alt", children: [_jsxs("span", { "aria-live": "polite", className: "text-sm font-semibold text-text mr-auto", children: [selectedCount, totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : "", " selected"] }), _jsx(BarAction, { icon: _jsx(HiOutlineCheckCircle, { size: 16, "aria-hidden": "true" }), label: "Select all", onClick: onSelectAll, disabled: allSelected || listedCount === 0 }), _jsx(BarAction, { icon: _jsx(HiOutlineMinusCircle, { size: 16, "aria-hidden": "true" }), label: "Clear", onClick: onClearSelection, disabled: selectedCount === 0 }), _jsx(BarAction, { icon: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }), label: "Cancel", onClick: onCancel })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-0.5 px-1.5 py-1", children: [_jsx(BarAction, { icon: _jsx(HiOutlineEnvelopeOpen, { size: 16, "aria-hidden": "true" }), label: "Mark read", onClick: () => onSetRead(true), disabled: none || busy, hint: hint("Mark read", SHORTCUTS.mail.markRead) }), _jsx(BarAction, { icon: _jsx(HiOutlineEnvelope, { size: 16, "aria-hidden": "true" }), label: "Mark unread", onClick: () => onSetRead(false), disabled: none || busy, hint: hint("Mark unread", SHORTCUTS.mail.markUnread) }), _jsx(BarAction, { icon: _jsx(HiOutlineFlag, { size: 16, "aria-hidden": "true" }), label: "Flag", onClick: () => onSetFlagged(true), disabled: none || busy, hint: hint("Flag", SHORTCUTS.mail.flag) }), _jsx(BarAction, { icon: _jsxs("span", { className: "relative inline-flex", "aria-hidden": "true", children: [_jsx(HiOutlineFlag, { size: 16 }), _jsx("span", { className: "absolute left-1/2 top-[-1px] h-[18px] w-[1.5px] -translate-x-1/2 rotate-45 rounded bg-current" })] }), label: "Unflag", onClick: () => onSetFlagged(false), disabled: none || busy }), _jsx(BarAction, { icon: _jsx(HiOutlineArchiveBox, { size: 16, "aria-hidden": "true" }), label: "Archive", onClick: onArchive, disabled: none || busy || !!archiveReason, reason: archiveReason }), _jsx(LabelMenuButton, { "aria-label": "Apply label", label: "Apply label", iconOnly: true, className: iconClassName(), labels: labels, mailboxUid: mailboxUid, onLabelCreated: onLabelCreated, applied: appliedToAll.map((label) => label.uid), partial: appliedToSome.map((label) => label.uid), onCommit: onApplyLabels, busy: busy, disabled: none || busy || !!labelsDisabledReason, title: labelsDisabledReason ?? "Apply label", note: selected.length === 1
                             ? "Ticked labels are applied, unticked ones removed."
-                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx("button", { type: "button", onClick: () => setMovePrompt(true), disabled: none || busy || !!moveDisabledReason, title: moveDisabledReason, className: actionClassName(), children: "Move to" }), _jsx("button", { type: "button", onClick: onReportJunk, disabled: none || busy || !!junkReason, title: junkReason, className: actionClassName(), children: "Report junk" }), _jsx("button", { type: "button", onClick: onDelete, disabled: none || busy, className: actionClassName(deletesPermanently), ...hint(deleteLabel, SHORTCUTS.mail.delete), children: deleteLabel })] })] }));
+                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx(BarAction, { icon: _jsx(HiOutlineFolderArrowDown, { size: 16, "aria-hidden": "true" }), label: "Move to", onClick: () => setMovePrompt(true), disabled: none || busy || !!moveDisabledReason, reason: moveDisabledReason }), _jsx(BarAction, { icon: _jsx(HiOutlineNoSymbol, { size: 16, "aria-hidden": "true" }), label: "Report junk", onClick: onReportJunk, disabled: none || busy || !!junkReason, reason: junkReason }), _jsx(BarAction, { icon: _jsx(HiOutlineTrash, { size: 16, "aria-hidden": "true" }), label: deleteLabel, onClick: onDelete, disabled: none || busy, destructive: deletesPermanently, hint: hint(deleteLabel, SHORTCUTS.mail.delete) })] })] }));
 }

package/dist/apps/shared/components/mail/MessageDetailPane.js

@@ -569,6 +569,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                     mailboxUid: message.mailboxUid,
                     subject: forwardSubject(message.subject),
                     signatureContext: "reply_forward",
+                    inlineFor: message.uid,
                     encrypt,
                     threading,
                     pending: late,
@@ -583,6 +584,8 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                     subject: replySubject(message.subject),
                     signatureContext: "reply_forward",
                     suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
+                    // A card above this message in the reading pane when it is in one, else the floating window (see `OpenComposeInput.inlineFor`).
+                    inlineFor: message.uid,
                     encrypt,
                     threading,
                     pending: late,