@rapidmx/web-client 0.28.0 → 0.30.0

package/dist/apps/shared/components/mail/compose/quotedBody.js

@@ -3,7 +3,9 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { apiUrl } from "../../../../../lib/util/api.js";
-import { getMessageRawContent } from "../../../../../lib/mail/mailApi.js";
+import { attachmentContentUrl, getMessageRawContent, listAttachments } from "../../../../../lib/mail/mailApi.js";
+import { MAX_QUOTED_IMAGE_BYTES, embedQuotedImages } from "../../../../../lib/mail/compose/quotedImages.js";
+import { EMBEDDED_IMAGE_TYPES, findInlineAttachment, toDataUri } from "../../../../../lib/mail/inlineImages.js";
 import { decodeHeaderText, extractDisplayBody, parseMimeEntity } from "../../../../../lib/crypto/mime.js";
 import { parseRecipientList } from "./recipients.js";
 /** How long a reply waits for the original's body before it goes ahead with the preview - a slow or hung request must not
@@ -75,6 +77,37 @@ function headerRecipients(value, type) {
         .filter((recipient) => recipient.address.includes("@"))
         .map((recipient) => ({ address: recipient.address, ...(recipient.displayName ? { displayName: recipient.displayName } : {}), type }));
 }
+/** The `data:` URI of the picture a quoted image of `message` stands for - one of the message's own attachments, fetched with the session -
+ * or `undefined` when there is none, it is not a raster image, it is too large or it could not be had. Never rejects. */
+function serverImageResolver(message) {
+    let attachments;
+    return async (reference) => {
+        try {
+            attachments ?? (attachments = listAttachments(message.folderUid, message.uid));
+            const attachment = findInlineAttachment(await attachments, reference);
+            const type = attachment?.mimeType.split(";")[0].trim().toLowerCase();
+            if (!attachment || !type || !EMBEDDED_IMAGE_TYPES.test(type) || attachment.sizeBytes > MAX_QUOTED_IMAGE_BYTES) {
+                return undefined;
+            }
+            const res = await fetch(attachmentContentUrl(attachment.uid), { credentials: "include" });
+            const bytes = res.ok ? new Uint8Array(await res.arrayBuffer()) : undefined;
+            return bytes && bytes.length <= MAX_QUOTED_IMAGE_BYTES ? toDataUri(type, bytes) : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    };
+}
+/** As `serverImageResolver()`, for the parts of a message this browser decrypted or verified (`MessageSecurityResult.attachments`). */
+function partImageResolver(parts) {
+    const candidates = parts.map((part, index) => ({ uid: String(index), filename: part.filename ?? "", mimeType: part.contentType, contentId: part.contentId }));
+    return async (reference) => {
+        const found = findInlineAttachment(candidates, reference);
+        const part = found ? parts[Number(found.uid)] : undefined;
+        const bytes = part && EMBEDDED_IMAGE_TYPES.test(part.contentType) ? part.decode() : undefined;
+        return part && bytes && bytes.length <= MAX_QUOTED_IMAGE_BYTES ? toDataUri(part.contentType, bytes) : undefined;
+    };
+}
 /**
  * Loads what a Reply/Reply All/Forward needs from `message`: the full body to quote - the same content
  * `MessageDetailPane` shows, never the truncated `bodyPreview` unless nothing else can be had - and, with
@@ -96,6 +129,9 @@ function headerRecipients(value, type) {
  * `message.recipients` alone would reduce every Reply All to a plain reply. Unprotected headers are the sender's own
  * claim, exactly as in every other mail client's Reply All.
  *
+ * The original's embedded images (`cid:`) are replaced by `data:` URIs of the pictures themselves - fetched from the message's
+ * attachments, or taken from the decrypted entity - so the quote shows them and the new message can carry them (see `quotedImages.ts`).
+ *
  * The quote builders sanitize whatever HTML this returns (`sanitizeQuotedHtml()`), whichever source it came from.
  */
 export async function loadOriginalMessage(message, security, options = {}) {
@@ -137,5 +173,11 @@ export async function loadOriginalMessage(message, security, options = {}) {
         // Whatever was loaded before the failure stands: the quote falls back to the preview, Reply All to the
         // message's own recipients.
     }
+    if (result.body.html !== undefined) {
+        const resolver = recovered ? partImageResolver(security?.attachments ?? []) : serverImageResolver(message);
+        const html = result.body.html;
+        // Bounded like the body's own request: a picture that will not arrive is left out of the quote, not waited for.
+        result.body = { html: await withTimeout(embedQuotedImages(html, resolver), QUOTE_FETCH_TIMEOUT_MS).catch(() => html) };
+    }
     return result;
 }

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

@@ -89,9 +89,11 @@ export interface LabelMenuButtonProps extends Omit<LabelSectionsOptions, "state"
     disabled?: boolean;
     title?: string;
     className?: string;
+    /** The trigger is just its icon (`className` then styles all of it) - `aria-label` and `title` name it. */
+    iconOnly?: boolean;
     /** With `onLabelCreated`, adds a "New label" row that opens this component's own dialog. */
     mailboxUid?: string;
     onLabelCreated?: (label: Label) => void;
 }
 /** The label list as a menu button of its own - the bulk Apply label action and the reading pane's Labels. */
-export default function LabelMenuButton({ applied, partial, onCommit, labels, commit, clear, emptyNote, note, busy, label, "aria-label": ariaLabel, disabled, title, className, mailboxUid, onLabelCreated, }: LabelMenuButtonProps): React.JSX.Element;
+export default function LabelMenuButton({ applied, partial, onCommit, labels, commit, clear, emptyNote, note, busy, label, "aria-label": ariaLabel, disabled, title, className, iconOnly, mailboxUid, onLabelCreated, }: LabelMenuButtonProps): React.JSX.Element;

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

@@ -119,11 +119,11 @@ export function NewLabelDialog({ open, onClose, mailboxUid, onCreated }) {
     return (_jsxs(Modal, { open: open, onClose: onClose, title: "New label", children: [error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Name", htmlFor: "new-label-name", children: _jsx("input", { id: "new-label-name", type: "text", value: name, onChange: (e) => setName(e.target.value), className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface" }) }), _jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: saving, disabled: saving || !name.trim(), onClick: () => void save(), children: "Create" })] })] }));
 }
 /** The label list as a menu button of its own - the bulk Apply label action and the reading pane's Labels. */
-export default function LabelMenuButton({ applied, partial = [], onCommit, labels, commit, clear, emptyNote, note, busy, label, "aria-label": ariaLabel, disabled, title, className, mailboxUid, onLabelCreated, }) {
+export default function LabelMenuButton({ applied, partial = [], onCommit, labels, commit, clear, emptyNote, note, busy, label, "aria-label": ariaLabel, disabled, title, className, iconOnly, mailboxUid, onLabelCreated, }) {
     const [open, setOpen] = useState(false);
     const [creating, setCreating] = useState(false);
     const state = useLabelDraft(applied, partial, open);
-    return (_jsxs(_Fragment, { children: [_jsx(MenuButton, { "aria-label": ariaLabel, label: label, icon: _jsx(HiOutlineTag, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), disabled: disabled, title: title, className: className, onOpenChange: setOpen, sections: labelSections({
+    return (_jsxs(_Fragment, { children: [_jsx(MenuButton, { "aria-label": ariaLabel, label: label, icon: _jsx(HiOutlineTag, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), disabled: disabled, title: title, className: className, iconOnly: iconOnly, onOpenChange: setOpen, sections: labelSections({
                     labels,
                     state,
                     commit: { ...commit, disabled: commit.disabled || !state.dirty, onSelect: () => onCommit(state.draft, state.mixed) },

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

@@ -31,6 +31,12 @@ import { ariaKeyShortcuts, withHint } from "../../../keyboard/format.js";
 import { SHORTCUTS } from "../../../keyboard/keymap.js";
 import { useKeyEnvironment } from "../../../keyboard/ShortcutProvider.js";
 import { useShortcut } from "../../../keyboard/useShortcut.js";
+/**
+ * From `md` up the sidebar and the content beside it are each exactly as tall as the window under the title bar, so each scrolls by itself (the frame's
+ * own height is open-ended - `min-h-screen` - so a column's `overflow` would otherwise never apply and the whole page would scroll instead). On a phone
+ * the page scrolls as a whole, as it always did. The same height the Contacts page uses; `--rr-header-h` is the title bar's (or branding header's) height.
+ */
+const DESKTOP_PANE_HEIGHT = "md:h-[calc(100dvh_-_var(--rr-header-h,4rem))]";
 /** The well-known mail folder types an "aggregate" pseudo-folder can merge across every accessible
  * mailbox - a fixed, small set: `outbox` is deliberately excluded (transient per-mailbox send-queue
  * state, not a "merge across mailboxes" concept), and there's no aggregate concept for `calendar`/
@@ -239,7 +245,7 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
                                     ].join(" "), children: [_jsxs("span", { className: ["flex items-center gap-2.5 min-w-0", badge?.kind === "unread" ? "font-semibold" : ""].join(" "), children: [_jsx(FolderTypeIcon, { type: folder.type }), _jsx("span", { className: "truncate", children: FOLDER_LABELS[folder.type] ?? folder.name })] }), badge &&
                                             (folder.type === "outbox" ? (_jsx(OutboxBadge, { total: badge.value, status: outboxStatuses[folder.uid], pendingHere: pendingCountFor(mailbox.uid, pendingSends) })) : (_jsx(FolderBadgeChip, { badge: badge })))] }, folder.uid));
                             }) }, mailbox.uid)))] }))] }));
-        inner = (_jsxs(_Fragment, { children: [_jsx(MailShortcuts, { mailboxUid: defaultMailboxUid }), _jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", fullScreen: true, children: _jsx("div", { className: "flex flex-col", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsxs("div", { className: "md:hidden flex items-center gap-2 p-3", children: [_jsx("button", { type: "button", className: "shrink-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("div", { ref: setMobileSearchSlot, className: "flex-1 min-w-0" })] }), _jsx(MobileComposeButton, { mailboxUid: defaultMailboxUid }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx(MailShortcuts, { mailboxUid: defaultMailboxUid }), _jsx("aside", { className: ["hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", DESKTOP_PANE_HEIGHT].join(" "), children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", fullScreen: true, children: _jsx("div", { className: "flex flex-col", children: sidebarContent("mobile") }) }), _jsxs("main", { className: ["flex-1 min-w-0 overflow-y-auto", DESKTOP_PANE_HEIGHT].join(" "), children: [_jsxs("div", { className: "md:hidden flex items-center gap-2 p-3", children: [_jsx("button", { type: "button", className: "shrink-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("div", { ref: setMobileSearchSlot, className: "flex-1 min-w-0" })] }), _jsx(MobileComposeButton, { mailboxUid: defaultMailboxUid }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     // Wraps AppShell unconditionally, at a stable tree position regardless of whether mailboxUid has
     // resolved yet - KeyEnrollmentGate itself passes `children` through untouched until a real

package/dist/apps/shared/components/mail/reading/MessageBody.js

@@ -78,7 +78,7 @@ function HtmlBody({ messageUid, title, html, remoteAvailable, attachments, inlin
     const theme = useResolvedTheme();
     const surface = useThemeSurface(theme);
     // Keyed on what the resolver reads rather than on the arrays, which a caller may rebuild on every render.
-    const inlineKey = [...(attachments ?? []).map((a) => `${a.uid}:${a.contentId ?? ""}`), inlineParts ? `parts:${inlineParts.length}` : ""].join("|");
+    const inlineKey = [...(attachments ?? []).map((a) => `${a.uid}:${a.contentId ?? ""}:${a.filename}:${a.mimeType}`), inlineParts ? `parts:${inlineParts.length}` : ""].join("|");
     const resolveCid = useMemo(() => makeCidResolver(attachments, inlineParts), [inlineKey]);
     const prepared = useMemo(() => prepareBodyHtml(html, { resolveCid }), [html, resolveCid]);
     const mode = prepared.declaresDarkSupport ? "native" : original ? "original" : "adapt";

package/dist/apps/shared/components/mail/reading/bodyContent.d.ts

@@ -34,5 +34,9 @@ export declare function attachmentSource(): string;
  * How an inline `cid:` image is resolved to something the frame may load: for a message shown from the server, the attachment whose
  * `Content-ID` matches (its URL on this server); for a decrypted or verified one, the part inside the signed/encrypted entity, embedded
  * as a `data:` URI (raster and SVG images up to `MAX_INLINE_IMAGE_BYTES`). Anything else has no source, so the image is not shown.
+ *
+ * The `Content-ID` is matched without regard to angle brackets, percent-encoding or case. An image that names no part (`contentId`
+ * undefined: the server left it with only its `alt`, as it does for a picture a sender attached without a `Content-ID`) is matched to the
+ * one image attachment of the same file name, when `alt` says it.
  */
-export declare function makeCidResolver(attachments: InlineCapable[] | undefined, parts: MimeAttachment[] | undefined): (contentId: string) => string | undefined;
+export declare function makeCidResolver(attachments: InlineCapable[] | undefined, parts: MimeAttachment[] | undefined): (contentId: string | undefined, alt?: string) => string | undefined;

package/dist/apps/shared/components/mail/reading/bodyContent.js

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import { ApiRequestError, apiUrl } from "../../../../../lib/util/api.js";
 import { attachmentContentUrl } from "../../../../../lib/mail/mailApi.js";
+import { findInlineAttachment, toDataUri } from "../../../../../lib/mail/inlineImages.js";
 /** How many bodies are remembered for the session - a thread that is expanded, collapsed and expanded again does not ask the server twice. */
 const CACHE_LIMIT = 40;
 /** What the pane asks `/content` for. */
@@ -51,13 +52,6 @@ export async function fetchBodyContent(uid, version, signal) {
 /** The largest inline image embedded into a body from a signed or encrypted message. */
 export const MAX_INLINE_IMAGE_BYTES = 5000000;
 const INLINE_IMAGE_TYPES = /^image\/(?:png|jpe?g|gif|webp|avif|bmp|svg\+xml)$/;
-function base64(bytes) {
-    let binary = "";
-    for (let i = 0; i < bytes.length; i += 0x8000) {
-        binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
-    }
-    return btoa(binary);
-}
 /** The absolute URL of an attachment - the frame is a document of its own, where a relative URL would not mean what it does here. */
 export function absoluteAttachmentUrl(uid) {
     return new URL(attachmentContentUrl(uid), window.location.href).href;
@@ -70,15 +64,21 @@ export function attachmentSource() {
  * How an inline `cid:` image is resolved to something the frame may load: for a message shown from the server, the attachment whose
  * `Content-ID` matches (its URL on this server); for a decrypted or verified one, the part inside the signed/encrypted entity, embedded
  * as a `data:` URI (raster and SVG images up to `MAX_INLINE_IMAGE_BYTES`). Anything else has no source, so the image is not shown.
+ *
+ * The `Content-ID` is matched without regard to angle brackets, percent-encoding or case. An image that names no part (`contentId`
+ * undefined: the server left it with only its `alt`, as it does for a picture a sender attached without a `Content-ID`) is matched to the
+ * one image attachment of the same file name, when `alt` says it.
  */
 export function makeCidResolver(attachments, parts) {
-    return (contentId) => {
+    return (contentId, alt) => {
         if (parts) {
-            const part = parts.find((candidate) => candidate.contentId === contentId);
+            const candidates = parts.map((part, index) => ({ uid: String(index), filename: part.filename ?? "", mimeType: part.contentType, contentId: part.contentId }));
+            const found = findInlineAttachment(candidates, { cid: contentId, alt });
+            const part = found ? parts[Number(found.uid)] : undefined;
             const bytes = part && INLINE_IMAGE_TYPES.test(part.contentType) ? part.decode() : undefined;
-            return part && bytes && bytes.length <= MAX_INLINE_IMAGE_BYTES ? `data:${part.contentType};base64,${base64(bytes)}` : undefined;
+            return part && bytes && bytes.length <= MAX_INLINE_IMAGE_BYTES ? toDataUri(part.contentType, bytes) : undefined;
         }
-        const attachment = attachments?.find((candidate) => candidate.contentId === contentId);
+        const attachment = findInlineAttachment(attachments, { cid: contentId, alt });
         return attachment ? absoluteAttachmentUrl(attachment.uid) : undefined;
     };
 }

package/dist/apps/shared/components/mail/reading/bodyHtml.d.ts

@@ -29,8 +29,9 @@ export interface PreparedBody {
 }
 export interface PrepareOptions {
     /** The URL an inline image's `cid:` reference stands for, or `undefined` when there is no such part. Only `data:` URIs of an
-     * image type and `http(s)` URLs are accepted; anything else is treated as unresolved. */
-    resolveCid?: (contentId: string) => string | undefined;
+     * image type and `http(s)` URLs are accepted; anything else is treated as unresolved. An image with no source at all (the
+     * server removes one it could not point at a part) is asked for with no `contentId` and its `alt`. */
+    resolveCid?: (contentId: string | undefined, alt?: string) => string | undefined;
 }
 /** CSS with the constructs above neutralised. */
 export declare function sanitizeCss(css: string): string;

package/dist/apps/shared/components/mail/reading/bodyHtml.js

@@ -189,10 +189,14 @@ function hardenLink(element) {
         element.removeAttribute("target");
     }
 }
+/** Whether the image ends up pointing at a part of the message (so the frame's CSP must allow this server's attachment URLs). */
 function hardenImage(element, options) {
     const src = (element.getAttribute("src") ?? "").trim();
-    const inline = /^cid:/i.test(src);
-    const target = inline ? options.resolveCid?.(src.slice(4).replace(/^<|>$/g, "")) : src;
+    const cid = /^cid:/i.test(src);
+    // A picture the server could not tie to a part keeps its `alt` and loses its `src`: the message's own attachment of that name, if any.
+    const inline = cid || src === "";
+    const alt = element.getAttribute("alt") ?? undefined;
+    const target = cid ? options.resolveCid?.(src.slice(4).replace(/^<|>$/g, ""), alt) : inline ? options.resolveCid?.(undefined, alt) : src;
     // Remote images are never fetched (they would tell the sender the message was read); an inline image resolves to an embedded
     // image or to this server's own attachment URL, and one that doesn't resolve has nothing to show.
     if (target !== undefined && (IMAGE_DATA_URI.test(target) || (inline && /^https?:\/\//i.test(target)))) {
@@ -201,6 +205,7 @@ function hardenImage(element, options) {
     else {
         element.removeAttribute("src");
     }
+    return cid || (inline && element.hasAttribute("src"));
 }
 /**
  * The second, structural pass over already-sanitized markup: everything a mail body has no use for is removed or unwrapped, every
@@ -235,10 +240,9 @@ function harden(body, options) {
             hardenLink(element);
         }
         else if (tag === "img") {
-            if (/^cid:/i.test(element.getAttribute("src") ?? "")) {
+            if (hardenImage(element, options)) {
                 inlineImages++;
             }
-            hardenImage(element, options);
         }
     }
     return { elements: all.length, inlineImages };

package/dist/apps/shared/gestures/useEnterSlide.d.ts

@@ -1,6 +1,8 @@
 import { type CSSProperties } from "react";
 /** How long the new contents take to settle. Short, so a run of steps (a wheel kept turning) never waits on the last one. */
 export declare const ENTER_SLIDE_MS = 140;
+/** Whether the user asked their device for less motion. */
+export declare function prefersReducedMotion(): boolean;
 /**
  * The look of a page that has just been swapped for the next or previous one by a vertical step (the wheel): the new contents start
  * a little way off in the direction the step went - below for `1` (the next), above for `-1` - and faded, and settle into place.

package/dist/apps/shared/gestures/useEnterSlide.js

@@ -11,7 +11,7 @@ const ENTER_START_OPACITY = 0.35;
 /** The pause that lets the browser draw the contents at their starting place before they move. */
 const ENTER_SETTLE_MS = 20;
 /** Whether the user asked their device for less motion. */
-function prefersReducedMotion() {
+export function prefersReducedMotion() {
     return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 /**

package/dist/apps/shared/gestures/useLongPress.d.ts

@@ -0,0 +1,41 @@
+import { type MouseEvent, type TouchEvent } from "react";
+export interface UseLongPressOptions {
+    /** Nothing starts while this is `false` (a desktop pointer, select mode); a press already held out is still seen through. Default `true`. */
+    enabled?: boolean;
+    /** How long a finger has to stay down, in ms. Default `LONG_PRESS_MS`. */
+    delay?: number;
+    /** How far it may wander meanwhile, in px. Default `LONG_PRESS_SLOP`. */
+    tolerance?: number;
+    /** Called once when the press has been held for `delay`. */
+    onLongPress: () => void;
+}
+/** How long a finger holds still to count as a press and hold, and how far it may drift (an unsteady hand) before it is a scroll or a swipe instead. */
+export declare const LONG_PRESS_MS = 480;
+export declare const LONG_PRESS_SLOP = 8;
+/**
+ * Press and hold by one finger, for the touch screens the app's phone layout is for: mouse and pen are left alone.
+ *
+ * Spread the handlers on the element. The press is given up the moment the finger moves more than `tolerance`, a second finger lands, the touch is
+ * cancelled (the browser took it over to scroll) or something scrolls, so it never fights vertical scrolling or `useSwipe()`: a swipe has to travel
+ * further than the tolerance to be one. Once it fires, the finger lifting must not also be a click on whatever is under it (the click that follows is
+ * swallowed once), and the browser's own long-press (the context menu, the text selection and the callout of a link) is suppressed.
+ *
+ * The handlers stay on even while `enabled` is `false`, because the row that was pressed usually makes itself disabled in answer (select mode),
+ * and the click that ends the press still has to be swallowed after that.
+ */
+export declare function useLongPress({ enabled, delay, tolerance, onLongPress }: UseLongPressOptions): {
+    handlers: {
+        onTouchStart: (event: TouchEvent<HTMLElement>) => void;
+        onTouchMove: (event: TouchEvent<HTMLElement>) => void;
+        onTouchEnd: (event: TouchEvent<HTMLElement>) => void;
+        onTouchCancel: () => void;
+        onClickCapture: (event: MouseEvent<HTMLElement>) => void;
+        onContextMenu: (event: MouseEvent<HTMLElement>) => void;
+    };
+    /** No text selection and no callout on what is pressed, while a press can start: the page's text stays selectable elsewhere. */
+    style: {
+        readonly WebkitTouchCallout: "none";
+        readonly WebkitUserSelect: "none";
+        readonly userSelect: "none";
+    } | undefined;
+};

package/dist/apps/shared/gestures/useLongPress.js

@@ -0,0 +1,112 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef } from "react";
+/** How long a finger holds still to count as a press and hold, and how far it may drift (an unsteady hand) before it is a scroll or a swipe instead. */
+export const LONG_PRESS_MS = 480;
+export const LONG_PRESS_SLOP = 8;
+/** How long after the finger lifts the click it would make is still swallowed; a press that makes none (the browser took it as a context menu) must not eat a later one. */
+const CLICK_WINDOW_MS = 500;
+/**
+ * Press and hold by one finger, for the touch screens the app's phone layout is for: mouse and pen are left alone.
+ *
+ * Spread the handlers on the element. The press is given up the moment the finger moves more than `tolerance`, a second finger lands, the touch is
+ * cancelled (the browser took it over to scroll) or something scrolls, so it never fights vertical scrolling or `useSwipe()`: a swipe has to travel
+ * further than the tolerance to be one. Once it fires, the finger lifting must not also be a click on whatever is under it (the click that follows is
+ * swallowed once), and the browser's own long-press (the context menu, the text selection and the callout of a link) is suppressed.
+ *
+ * The handlers stay on even while `enabled` is `false`, because the row that was pressed usually makes itself disabled in answer (select mode),
+ * and the click that ends the press still has to be swallowed after that.
+ */
+export function useLongPress({ enabled = true, delay = LONG_PRESS_MS, tolerance = LONG_PRESS_SLOP, onLongPress }) {
+    const timer = useRef(null);
+    const start = useRef({ x: 0, y: 0 });
+    /** The press fired and its click has not come yet. */
+    const fired = useRef(false);
+    const clickWindow = useRef(null);
+    const latest = useRef(onLongPress);
+    latest.current = onLongPress;
+    // One function for the life of the row: it is also the scroll listener, which has to be removed with the very function it was added with.
+    const forget = useRef(() => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+            window.removeEventListener("scroll", forget, true);
+        }
+    }).current;
+    function clearClickWindow() {
+        if (clickWindow.current !== null) {
+            clearTimeout(clickWindow.current);
+            clickWindow.current = null;
+        }
+    }
+    // A timer left running would fire into a row that is gone.
+    useEffect(() => () => {
+        forget();
+        if (clickWindow.current !== null) {
+            clearTimeout(clickWindow.current);
+        }
+    }, [forget]);
+    function onTouchStart(event) {
+        forget();
+        clearClickWindow();
+        fired.current = false;
+        if (!enabled || event.touches.length !== 1) {
+            return;
+        }
+        start.current = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+        // Scroll events don't bubble: only a capturing listener hears the list (or the page) moving under a finger that hasn't moved.
+        window.addEventListener("scroll", forget, { capture: true, passive: true });
+        timer.current = setTimeout(() => {
+            timer.current = null;
+            window.removeEventListener("scroll", forget, true);
+            fired.current = true;
+            navigator.vibrate?.(10);
+            latest.current();
+        }, delay);
+    }
+    function onTouchMove(event) {
+        if (timer.current === null) {
+            return;
+        }
+        const touch = event.touches[0];
+        if (event.touches.length !== 1 || Math.hypot(touch.clientX - start.current.x, touch.clientY - start.current.y) >= tolerance) {
+            forget();
+        }
+    }
+    function onTouchEnd(event) {
+        forget();
+        if (fired.current) {
+            // No click of the browser's own after this; the one that comes anyway (older browsers) is swallowed by `onClickCapture`.
+            event.preventDefault();
+            clearClickWindow();
+            clickWindow.current = setTimeout(() => {
+                clickWindow.current = null;
+                fired.current = false;
+            }, CLICK_WINDOW_MS);
+        }
+    }
+    function onTouchCancel() {
+        forget();
+        fired.current = false;
+    }
+    function onClickCapture(event) {
+        if (fired.current) {
+            fired.current = false;
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    function onContextMenu(event) {
+        // The long-press menu of a touch screen comes while the finger is still down (Android) or just after it fired.
+        if (timer.current !== null || fired.current) {
+            event.preventDefault();
+        }
+    }
+    return {
+        handlers: { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onClickCapture, onContextMenu },
+        /** No text selection and no callout on what is pressed, while a press can start: the page's text stays selectable elsewhere. */
+        style: enabled ? { WebkitTouchCallout: "none", WebkitUserSelect: "none", userSelect: "none" } : undefined,
+    };
+}

package/dist/apps/shared/keyboard/keymap.d.ts

@@ -268,6 +268,18 @@ export declare const SHORTCUTS: {
             label: string;
             scope: "calendar";
         };
+        readonly list: {
+            id: string;
+            keys: string[];
+            label: string;
+            scope: "calendar";
+        };
+        readonly search: {
+            id: string;
+            keys: string[];
+            label: string;
+            scope: "calendar";
+        };
     };
     readonly contacts: {
         readonly create: {

package/dist/apps/shared/keyboard/keymap.js

@@ -67,6 +67,8 @@ export const SHORTCUTS = {
         workWeek: def({ id: "calendar.workWeek", keys: ["ctrl+alt+2"], label: "Work week view", scope: "calendar" }),
         week: def({ id: "calendar.week", keys: ["ctrl+alt+3"], label: "Week view", scope: "calendar" }),
         month: def({ id: "calendar.month", keys: ["ctrl+alt+4"], label: "Month view", scope: "calendar" }),
+        list: def({ id: "calendar.list", keys: ["ctrl+alt+5"], label: "List view", scope: "calendar" }),
+        search: def({ id: "calendar.search", keys: ["/", "mod+e"], label: "Search events", scope: "calendar" }),
     },
     contacts: {
         create: def({ id: "contacts.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New contact", scope: "contacts" }),

package/dist/apps/shared/mail/rangeSelection.d.ts

@@ -0,0 +1,20 @@
+/** The modifier keys of a click - what a mouse event, or the native event behind a checkbox's change, carries. */
+export interface ClickModifiers {
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+}
+/** Whether a click is a multi-select click (Shift, Ctrl, or Cmd on a Mac) rather than the plain click that opens a row. */
+export declare function isSelectionClick(modifiers: ClickModifiers | undefined): boolean;
+/** Ctrl (or Cmd on a Mac): toggle just the clicked row. */
+export declare function isToggleClick(modifiers: ClickModifiers | undefined): boolean;
+/**
+ * The anchor of a Shift+click range, as Explorer and Outlook have it: the row last clicked (or opened) - `anchor` - while it is still in
+ * the list, else the row open in the reading pane (`open`), else nothing (the range is then just the clicked row).
+ */
+export declare function resolveAnchor(keys: readonly string[], anchor: string | null, open: string | null): string | null;
+/**
+ * Every key from `anchor` to `target` inclusive, in the order `keys` has them - the order the list is displayed in, whichever end of the
+ * range was clicked first. With no usable anchor the range is `target` alone.
+ */
+export declare function rangeBetween(keys: readonly string[], anchor: string | null, target: string): string[];

package/dist/apps/shared/mail/rangeSelection.js

@@ -0,0 +1,34 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** Whether a click is a multi-select click (Shift, Ctrl, or Cmd on a Mac) rather than the plain click that opens a row. */
+export function isSelectionClick(modifiers) {
+    return !!modifiers && !!(modifiers.shiftKey || modifiers.ctrlKey || modifiers.metaKey);
+}
+/** Ctrl (or Cmd on a Mac): toggle just the clicked row. */
+export function isToggleClick(modifiers) {
+    return !!modifiers && !!(modifiers.ctrlKey || modifiers.metaKey);
+}
+/**
+ * The anchor of a Shift+click range, as Explorer and Outlook have it: the row last clicked (or opened) - `anchor` - while it is still in
+ * the list, else the row open in the reading pane (`open`), else nothing (the range is then just the clicked row).
+ */
+export function resolveAnchor(keys, anchor, open) {
+    if (anchor !== null && keys.includes(anchor)) {
+        return anchor;
+    }
+    return open !== null && keys.includes(open) ? open : null;
+}
+/**
+ * Every key from `anchor` to `target` inclusive, in the order `keys` has them - the order the list is displayed in, whichever end of the
+ * range was clicked first. With no usable anchor the range is `target` alone.
+ */
+export function rangeBetween(keys, anchor, target) {
+    const from = anchor === null ? -1 : keys.indexOf(anchor);
+    const to = keys.indexOf(target);
+    if (from === -1 || to === -1) {
+        return [target];
+    }
+    return keys.slice(Math.min(from, to), Math.max(from, to) + 1);
+}

package/dist/apps/shared/mail/rowExit.d.ts

@@ -0,0 +1,12 @@
+/** How long a row that leaves the list (moved, deleted, archived) takes to collapse. The list drops it from its data after this long. */
+export declare const ROW_EXIT_MS = 200;
+/**
+ * Whether a row that leaves should collapse rather than vanish: the browser can animate an element (`Element.animate()` - every current one
+ * can) and the reader has not asked for less motion (`prefers-reduced-motion`). Otherwise the row is removed at once.
+ */
+export declare function canAnimateRowExit(): boolean;
+/**
+ * Collapses a row that is leaving: its height and opacity run to zero over `ROW_EXIT_MS`, so the rows below slide up into the gap, and it
+ * stays collapsed (`fill: forwards`) until the list drops it. The row is marked so a second call for the same element does nothing.
+ */
+export declare function collapseRow(row: HTMLElement): void;

package/dist/apps/shared/mail/rowExit.js

@@ -0,0 +1,33 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** How long a row that leaves the list (moved, deleted, archived) takes to collapse. The list drops it from its data after this long. */
+export const ROW_EXIT_MS = 200;
+/**
+ * Whether a row that leaves should collapse rather than vanish: the browser can animate an element (`Element.animate()` - every current one
+ * can) and the reader has not asked for less motion (`prefers-reduced-motion`). Otherwise the row is removed at once.
+ */
+export function canAnimateRowExit() {
+    // Only called from event handlers, i.e. in a browser.
+    if (typeof Element.prototype.animate !== "function") {
+        return false;
+    }
+    return !(typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}
+/**
+ * Collapses a row that is leaving: its height and opacity run to zero over `ROW_EXIT_MS`, so the rows below slide up into the gap, and it
+ * stays collapsed (`fill: forwards`) until the list drops it. The row is marked so a second call for the same element does nothing.
+ */
+export function collapseRow(row) {
+    if (row.dataset.collapsing) {
+        return;
+    }
+    row.dataset.collapsing = "true";
+    const height = row.getBoundingClientRect().height;
+    row.style.overflow = "hidden";
+    row.animate([
+        { height: `${height}px`, opacity: 1 },
+        { height: "0px", opacity: 0, borderBottomWidth: "0px" },
+    ], { duration: ROW_EXIT_MS, easing: "ease-out", fill: "forwards" });
+}