@rapidmx/web-client 0.33.0 → 0.35.0

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import useIsMobile from "../../../../lib/util/useIsMobile.js";
-import { HiOutlineArrowRightOnRectangle, HiOutlineArrowUturnLeft, HiOutlineBell, HiOutlineBellAlert, HiOutlineClock, HiOutlineCog6Tooth, HiOutlineCommandLine, HiOutlineShieldCheck, HiOutlineUserCircle, } from "react-icons/hi2";
+import { HiOutlineArrowRightOnRectangle, HiOutlineArrowUturnLeft, HiOutlineBell, HiOutlineBellAlert, HiOutlineSpeakerWave, HiOutlineClock, HiOutlineCog6Tooth, HiOutlineCommandLine, HiOutlineShieldCheck, HiOutlineUserCircle, } from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, profileInitials } from "../../../../lib/auth/profileApi.js";
 import { listMailboxes } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
@@ -20,7 +20,7 @@ import { MailConnectionContext } from "../../mail/useMailConnection.js";
 import { ownMailboxes } from "../../mail/primaryMailbox.js";
 import ThemeSwitch from "./ThemeSwitch.js";
 import { desktopPermission, requestDesktopPermission, setDesktopOfferDismissed, } from "../../mail/newMailNotifications.js";
-import { getNotificationsEnabled, setNotificationsEnabled } from "../../notifications/preferences.js";
+import { getNotificationSoundsEnabled, getNotificationsEnabled, setNotificationSoundsEnabled, setNotificationsEnabled, } from "../../notifications/preferences.js";
 import { dismissAll } from "../../notifications/store.js";
 function Avatar({ profile, initials, large }) {
     const sizeClass = large ? "w-10 h-10 text-base" : "w-8 h-8 text-sm";
@@ -53,6 +53,7 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     const menuRef = useRef(null);
     const [detectedAdmin, setDetectedAdmin] = useState(false);
     const [popups, setPopups] = useState(true);
+    const [sounds, setSounds] = useState(true);
     const [permission, setPermission] = useState("unsupported");
     const [profile, setProfile] = useState(undefined);
     // Whether the profile lookup has answered, with a profile or without: the fallback names are only worth asking for after that.
@@ -140,9 +141,14 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     useEffect(() => {
         if (open && showNotificationSettings) {
             setPopups(getNotificationsEnabled());
+            setSounds(getNotificationSoundsEnabled());
             setPermission(desktopPermission());
         }
     }, [open, showNotificationSettings]);
+    function toggleSounds() {
+        setNotificationSoundsEnabled(!sounds);
+        setSounds(!sounds);
+    }
     function togglePopups() {
         setNotificationsEnabled(!popups);
         setPopups(!popups);
@@ -206,7 +212,7 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     const accountUrl = accountUrlOf(authServerUrl);
     return (_jsxs("div", { className: "relative", ref: containerRef, children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "true", "aria-expanded": open, "aria-label": "Account menu", className: "relative flex items-center gap-1.5 rounded-pill py-1 pl-1 pr-2 hover:bg-surface-alt", children: [_jsx(Avatar, { profile: profile, initials: initials }), unseenErrors > 0 && (_jsx("span", { "data-testid": "unseen-errors-dot", "aria-hidden": "true", className: "absolute right-0.5 top-0.5 h-2.5 w-2.5 rounded-full border-2 border-surface bg-danger" })), _jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: `text-text-muted transition-transform ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: _jsx("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open &&
                 anchor &&
-                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), showMailLink && (_jsxs("a", { role: "menuitem", href: APP_HREFS.mail, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Back to mail"] })), _jsx(ThemeSwitch, {}), accountUrl && (_jsxs("a", { role: "menuitem", href: accountUrl, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineUserCircle, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Account"] })), showSettingsLink && (_jsxs("a", { role: "menuitem", href: SETTINGS_HREF, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineCog6Tooth, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Settings"] })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(HiOutlineBell, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Notifications"] }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "flex w-full items-center gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineBellAlert, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Turn on desktop notifications"] })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
+                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), showMailLink && (_jsxs("a", { role: "menuitem", href: APP_HREFS.mail, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Back to mail"] })), _jsx(ThemeSwitch, {}), accountUrl && (_jsxs("a", { role: "menuitem", href: accountUrl, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineUserCircle, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Account"] })), showSettingsLink && (_jsxs("a", { role: "menuitem", href: SETTINGS_HREF, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineCog6Tooth, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Settings"] })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(HiOutlineBell, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Notifications"] }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": sounds, type: "button", onClick: toggleSounds, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(HiOutlineSpeakerWave, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Notification sounds"] }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: sounds ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "flex w-full items-center gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineBellAlert, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Turn on desktop notifications"] })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
                                 setOpen(false);
                                 onShowNotifications();
                             }, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(HiOutlineClock, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Recent notifications"] }), unseenErrors > 0 && (_jsxs("span", { className: "rounded-pill bg-danger px-1.5 text-xs font-bold text-white", children: [_jsx("span", { "aria-hidden": "true", children: unseenErrors }), _jsxs("span", { className: "sr-only", children: [unseenErrors, " unseen ", unseenErrors === 1 ? "error" : "errors"] })] }))] })), onShowShortcuts && !isMobile && (_jsxs("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {

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

@@ -143,6 +143,21 @@ function downloadFromUrl(url, filename) {
     a.click();
     a.remove();
 }
+/** How long an attachment saved through an explicit client keeps its object URL: the download has started well before this. */
+const DOWNLOAD_URL_LIFETIME_MS = 60000;
+/**
+ * Saves the file at `path` through `client` (its origin and token, which a link's `href` cannot carry): its bytes become an object URL handed to
+ * `downloadFromUrl()`. The URL stays in `urls` until it is revoked - after `DOWNLOAD_URL_LIFETIME_MS`, or when the pane unmounts.
+ */
+async function downloadThroughClient(client, path, filename, urls) {
+    const url = URL.createObjectURL(await client.fetchBlob(path));
+    urls.add(url);
+    downloadFromUrl(url, filename);
+    setTimeout(() => {
+        urls.delete(url);
+        URL.revokeObjectURL(url);
+    }, DOWNLOAD_URL_LIFETIME_MS);
+}
 /** Saves one attachment recovered from inside a signed/encrypted entity. Always handed to the browser as an
  * opaque download (`application/octet-stream`), never rendered in this origin. */
 function downloadMimeAttachment(attachment) {
@@ -290,6 +305,17 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
     const { mailboxes, trackMessageChange } = useMailShell();
     const { requestUnlock } = useUnlockPrompt();
     const client = useApiClient();
+    // Object URLs of attachments saved through `client`, revoked when they have been left to lapse or when this pane unmounts.
+    const downloadUrls = useRef(new Set());
+    useEffect(() => {
+        const urls = downloadUrls.current;
+        return () => {
+            for (const url of urls) {
+                URL.revokeObjectURL(url);
+            }
+            urls.clear();
+        };
+    }, []);
     // Bumped after a successful on-demand unlock to re-run the effect below - it's not a dependency the
     // effect could read reactively otherwise (getUnlockedKeys() is a plain module-level read, not React
     // state; see keySession.ts's own doc comment).
@@ -526,11 +552,20 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         const mailbox = readerMailbox ?? (await getMailbox(message.mailboxUid, {}, client).catch(() => undefined));
         return mailbox ? [mailbox.primarySmtpAddress, ...(mailbox.aliasAddresses ?? [])] : [];
     }
+    /** Saves a listed attachment: through the explicit client when there is one (failures are reported, the file is an object URL), else as the
+     * cookie link always did. */
+    function saveAttachment(attachment) {
+        if (client) {
+            downloadThroughClient(client, `/mail/attachments/${encodeURIComponent(attachment.uid)}/content`, attachment.filename, downloadUrls.current).catch((err) => notifyApiError(err, "Couldn't download this attachment"));
+            return;
+        }
+        downloadFromUrl(attachmentContentUrl(attachment.uid), attachment.filename);
+    }
     /** Starts fetching what Reply/Reply All/Forward will need (the compose window's code, the original's body) as the
      * pointer or keyboard reaches one of their buttons, so the click itself finds it already on its way or here. */
     function prefetchReply() {
         prefetchComposeWindow();
-        prefetchOriginalMessage(message);
+        prefetchOriginalMessage(message, client);
     }
     /**
      * Opens the compose window at once from what is already in memory - the message's own subject and sender, and the
@@ -554,7 +589,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
             // Never rejects: loadOriginalMessage() and ownAddresses() don't, and the rest is pure.
             const late = (async () => {
                 const [original, own] = await Promise.all([
-                    loadOriginalMessage(message, security, { recipients: kind === "replyAll" }),
+                    loadOriginalMessage(message, security, { recipients: kind === "replyAll" }, client),
                     kind === "forward" ? [] : (knownOwn ?? ownAddresses()),
                 ]);
                 if (kind === "forward") {
@@ -842,10 +877,10 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
      * sanitized body - in a frame of its own; see `printMessage.ts`. */
     async function handlePrint() {
         try {
-            const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version));
+            const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version, undefined, client));
             const older = await olderConversationMessages(message, client).catch(() => []);
             // A few at a time: a long conversation is hundreds of messages, each of them several requests.
-            const earlier = await mapWithConcurrency(older, PRINT_CONCURRENCY, (other) => printableOlderMessage(other).catch(() => ({
+            const earlier = await mapWithConcurrency(older, PRINT_CONCURRENCY, (other) => printableOlderMessage(other, client).catch(() => ({
                 subject: other.subject || "(no subject)",
                 headers: printHeaders(other, formatMailAddress(other.from)),
                 content: { kind: "text", text: "This message could not be loaded, so it is not printed." },
@@ -955,6 +990,6 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                         .filter((type) => (type === "delivery" ? message.deliveryReceiptPending : message.readReceiptPending))
                         .map((type) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2 py-2 px-3 rounded-sm bg-surface-alt text-sm", children: [_jsxs("span", { children: [senderLabel, " requested a ", type, " receipt for this message."] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: receiptBusy === type, disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "approve"), children: "Send receipt" }), _jsx(Button, { type: "button", variant: "text", disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "decline"), children: "Decline" })] }, type))), receiptError && _jsx(Alert, { children: receiptError }), mayHoldInvite && _jsx(InviteCard, { messageUid: message.uid, headingLevel: inThread ? 3 : 2 }), security?.state === "signature_failed" && innerAttachments && innerAttachments.length > 0 && (_jsx("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: "These attachments come from a message whose signature couldn\u2019t be verified. Open them only if you trust the sender." })), innerAttachments
                         ? innerAttachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2", children: innerAttachments.map((attachment, index) => (_jsx("li", { children: isVCardAttachment({ filename: attachment.filename, mimeType: attachment.contentType }) ? (_jsx(VCardAttachmentChip, { label: attachment.filename ?? `Unnamed ${attachment.contentType} attachment`, message: message, loadText: async () => new TextDecoder().decode(attachment.decode() ?? new Uint8Array(0)), onDownload: () => downloadMimeAttachment(attachment) })) : (_jsx("button", { type: "button", onClick: () => downloadMimeAttachment(attachment), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: attachment.filename ?? `Unnamed ${attachment.contentType} attachment` })) }, `${index}:${attachment.filename ?? ""}`))) }))
-                        : listedAttachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2", children: listedAttachments.map((attachment) => (_jsx("li", { children: isVCardAttachment(attachment) ? (_jsx(VCardAttachmentChip, { label: `${attachment.filename} (${formatBytes(attachment.sizeBytes)})`, message: message, loadText: () => fetchVCardText(attachment.uid), onDownload: () => downloadFromUrl(attachmentContentUrl(attachment.uid), attachment.filename) })) : (_jsxs("a", { href: attachmentContentUrl(attachment.uid), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: [attachment.filename, " (", formatBytes(attachment.sizeBytes), ")"] })) }, attachment.uid))) })), _jsx("div", { ref: bodyRegionRef, tabIndex: -1, className: "outline-none", children: message.encrypted && security === null ? (_jsx(BodySkeleton, {})) : security?.decryptError !== undefined ? (_jsx(EncryptedBody, { locked: lockedRef.current, reason: security.decryptError, unlocking: unlocking, onUnlock: () => void handleUnlockToView() })) : (_jsx(MessageBody, { messageUid: message.uid, messageVersion: message.version, title: bodyTitle, content: bodyContent, attachments: attachments, inlineParts: innerAttachments, original: viewOriginal, onAdaptable: setAdaptable })) })] }), showFooter && (_jsxs("div", { className: "flex flex-wrap gap-2 px-4 py-3 border-t border-border print:hidden", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Reply to this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("reply"), children: "Reply" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Reply all to this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("replyAll"), children: "Reply All" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Forward this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("forward"), children: "Forward" })] }))] }));
+                        : listedAttachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2", children: listedAttachments.map((attachment) => (_jsx("li", { children: isVCardAttachment(attachment) ? (_jsx(VCardAttachmentChip, { label: `${attachment.filename} (${formatBytes(attachment.sizeBytes)})`, message: message, loadText: () => fetchVCardText(attachment.uid, client), onDownload: () => saveAttachment(attachment) })) : client ? (_jsxs("button", { type: "button", onClick: () => saveAttachment(attachment), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: [attachment.filename, " (", formatBytes(attachment.sizeBytes), ")"] })) : (_jsxs("a", { href: attachmentContentUrl(attachment.uid), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: [attachment.filename, " (", formatBytes(attachment.sizeBytes), ")"] })) }, attachment.uid))) })), _jsx("div", { ref: bodyRegionRef, tabIndex: -1, className: "outline-none", children: message.encrypted && security === null ? (_jsx(BodySkeleton, {})) : security?.decryptError !== undefined ? (_jsx(EncryptedBody, { locked: lockedRef.current, reason: security.decryptError, unlocking: unlocking, onUnlock: () => void handleUnlockToView() })) : (_jsx(MessageBody, { messageUid: message.uid, messageVersion: message.version, title: bodyTitle, content: bodyContent, attachments: attachments, inlineParts: innerAttachments, original: viewOriginal, onAdaptable: setAdaptable })) })] }), showFooter && (_jsxs("div", { className: "flex flex-wrap gap-2 px-4 py-3 border-t border-border print:hidden", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Reply to this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("reply"), children: "Reply" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Reply all to this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("replyAll"), children: "Reply All" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Forward this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("forward"), children: "Forward" })] }))] }));
     return (_jsxs("div", { className: inThread ? "min-w-0" : "flex-1 min-w-0 min-h-0 flex flex-col h-full", children: [inThread ? (card) : (_jsxs(_Fragment, { children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block px-4 pt-3", children: "\u2190 Back to messages" })), _jsx(SubjectCard, { subject: shownSubject }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: card })] })), _jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: message.mailboxUid, folders: folders ?? [], currentFolderUid: message.folderUid, onMove: handleMove, onFolderCreated: onFolderCreated }), messageActions.dialog, _jsx(MessageSourceDialog, { open: sourceView !== null, onClose: closeSource, mode: sourceView?.mode ?? "source", source: sourceView?.source ?? { status: "loading" }, encrypted: !!message.encrypted }), _jsxs(Modal, { open: confirming, onClose: () => setConfirming(false), title: "Recall this message?", children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: "This asks every original recipient's mail system to delete their copy, but only if it's still unread there \u2014 there's no way to guarantee it, and no confirmation once it either succeeds or fails. Recipients who already read the message will keep it." }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", loading: recalling, disabled: recalling, onClick: handleRecall, className: "!w-auto", children: "Recall message" }), _jsx(Button, { type: "button", variant: "secondary", disabled: recalling, onClick: () => setConfirming(false), className: "!w-auto", children: "Cancel" })] })] }), _jsx(Modal, { open: trustConfirmOpen && !!trustableCertificate, onClose: () => !trusting && setTrustConfirmOpen(false), title: "Trust this signer?", children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("p", { children: ["Mail from ", _jsx("span", { className: "font-medium", children: senderAddress }), " signed with this certificate will show as verified."] }), _jsxs("dl", { className: "flex flex-col gap-1", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "Certificate issued to" }), _jsx("dd", { children: security?.signerEmails?.length ? security.signerEmails.join(", ") : "No email address" }), _jsx("dt", { className: "text-xs text-text-muted", children: "Fingerprint" }), _jsx("dd", { className: "font-mono text-xs break-all", children: security?.signerFingerprint ? formatFingerprint(security.signerFingerprint) : "Unknown" })] }), _jsx("p", { className: "text-text-muted", children: "Anyone can create a certificate naming any address. Before trusting it, confirm this fingerprint with the sender through another channel, such as a phone call." }), trustError && _jsx(Alert, { children: trustError }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", className: "!w-auto", loading: trusting, disabled: trusting, onClick: () => handleTrustSigner(senderAddress, trustableCertificate), children: "Trust" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: trusting, onClick: () => setTrustConfirmOpen(false), children: "Cancel" })] })] }) })] }));
 }

package/dist/apps/shared/components/mail/compose/quotedBody.d.ts

@@ -1,3 +1,4 @@
+import { type ApiClient } from "../../../../../lib/util/api.js";
 import { Message, Recipient } from "../../../../../lib/mail/mailApi.js";
 import type { QuotedBody } from "../../../../../lib/mail/compose/composeQuoting.js";
 import type { MessageSecurityResult } from "../../../../../lib/crypto/messageSecurity.js";
@@ -19,7 +20,7 @@ export declare const QUOTE_CACHE_MS = 30000;
  * keyboard reaches a Reply/Reply All/Forward button - so the request is usually already answered when it is clicked.
  * Nothing to fetch for an encrypted message (`loadOriginalMessage()` never asks the server for one's body).
  */
-export declare function prefetchOriginalMessage(message: Message): void;
+export declare function prefetchOriginalMessage(message: Message, client?: ApiClient): void;
 /** Forgets every remembered body (the sign-out and test seam). */
 export declare function clearOriginalMessageCache(): void;
 /**
@@ -50,4 +51,4 @@ export declare function clearOriginalMessageCache(): void;
  */
 export declare function loadOriginalMessage(message: Message, security: MessageSecurityResult | null, options?: {
     recipients?: boolean;
-}): Promise<OriginalMessage>;
+}, client?: ApiClient): Promise<OriginalMessage>;

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

@@ -28,9 +28,9 @@ const contentCache = new Map();
 /**
  * The server's sanitized HTML body of a message (`GET /mail/messages/:id/content`), or `undefined` when it has none (a
  * `text/plain` message is answered with its preview instead) or the request failed or timed out. Never rejects. Remembered
- * for `QUOTE_CACHE_MS` - except a failure, which is asked again the next time.
+ * for `QUOTE_CACHE_MS` - except a failure, which is asked again the next time. Through `client` when given, else the cookie request.
  */
-function fetchContentHtml(uid) {
+function fetchContentHtml(uid, client) {
     const cached = contentCache.get(uid);
     if (cached && Date.now() - cached.at < QUOTE_CACHE_MS) {
         return cached.promise;
@@ -39,6 +39,10 @@ function fetchContentHtml(uid) {
     const timer = setTimeout(() => controller.abort(), QUOTE_FETCH_TIMEOUT_MS);
     const promise = (async () => {
         try {
+            if (client) {
+                const blob = await client.fetchBlob(`/mail/messages/${encodeURIComponent(uid)}/content`, { signal: controller.signal });
+                return blob.type.toLowerCase().includes("text/html") ? await blob.text() : undefined;
+            }
             const res = await fetch(apiUrl(`/mail/messages/${encodeURIComponent(uid)}/content`), { credentials: "include", signal: controller.signal });
             return res.ok && (res.headers.get("content-type") ?? "").includes("text/html") ? await res.text() : undefined;
         }
@@ -76,9 +80,9 @@ function withTimeout(promise, ms) {
  * keyboard reaches a Reply/Reply All/Forward button - so the request is usually already answered when it is clicked.
  * Nothing to fetch for an encrypted message (`loadOriginalMessage()` never asks the server for one's body).
  */
-export function prefetchOriginalMessage(message) {
+export function prefetchOriginalMessage(message, client) {
     if (!message.encrypted) {
-        void fetchContentHtml(message.uid);
+        void fetchContentHtml(message.uid, client);
     }
 }
 /** Forgets every remembered body (the sign-out and test seam). */
@@ -97,18 +101,26 @@ function headerRecipients(value, 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) {
+function serverImageResolver(message, client) {
     let attachments;
     return async (reference, signal) => {
         try {
-            attachments ?? (attachments = listAttachments(message.folderUid, message.uid));
+            attachments ?? (attachments = listAttachments(message.folderUid, message.uid, client));
             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", signal });
-            const bytes = res.ok ? new Uint8Array(await res.arrayBuffer()) : undefined;
+            let bytes;
+            if (client) {
+                // A failed response rejects here, which the catch below turns into no picture - as an `!res.ok` answer always was.
+                const blob = await client.fetchBlob(`/mail/attachments/${encodeURIComponent(attachment.uid)}/content`, { signal });
+                bytes = new Uint8Array(await blob.arrayBuffer());
+            }
+            else {
+                const res = await fetch(attachmentContentUrl(attachment.uid), { credentials: "include", signal });
+                bytes = res.ok ? new Uint8Array(await res.arrayBuffer()) : undefined;
+            }
             return bytes && bytes.length <= MAX_QUOTED_IMAGE_BYTES ? toDataUri(type, bytes) : undefined;
         }
         catch {
@@ -152,7 +164,7 @@ function partImageResolver(parts) {
  *
  * The quote builders sanitize whatever HTML this returns (`sanitizeQuotedHtml()`), whichever source it came from.
  */
-export async function loadOriginalMessage(message, security, options = {}) {
+export async function loadOriginalMessage(message, security, options = {}, client) {
     const recovered = security?.text !== undefined ? { text: security.text } : security?.html !== undefined ? { html: security.html } : undefined;
     // Headers inside an unsigned (or badly signed) encrypted message are whatever its encrypter chose to write, so only a
     // verified signature makes them a source of recipients.
@@ -168,7 +180,7 @@ export async function loadOriginalMessage(message, security, options = {}) {
     if (!recovered) {
         // Never rejects; nothing (a plain-text message, a failure, a timeout) leaves the raw message below as the other way
         // to the body.
-        const html = await fetchContentHtml(message.uid);
+        const html = await fetchContentHtml(message.uid, client);
         if (html !== undefined) {
             result.body = { html };
         }
@@ -178,7 +190,7 @@ export async function loadOriginalMessage(message, security, options = {}) {
     }
     try {
         if (needsRaw) {
-            const entity = parseMimeEntity(await withTimeout(getMessageRawContent(message.uid), QUOTE_FETCH_TIMEOUT_MS));
+            const entity = parseMimeEntity(await withTimeout(getMessageRawContent(message.uid, client), QUOTE_FETCH_TIMEOUT_MS));
             if (!recovered && result.body.html === undefined) {
                 const body = extractDisplayBody(entity);
                 result.body = body.html !== undefined ? { html: body.html } : body.text !== undefined ? { text: body.text } : {};
@@ -194,7 +206,7 @@ export async function loadOriginalMessage(message, security, options = {}) {
         // message's own recipients.
     }
     if (result.body.html !== undefined) {
-        const resolver = recovered ? partImageResolver(security?.attachments ?? []) : serverImageResolver(message);
+        const resolver = recovered ? partImageResolver(security?.attachments ?? []) : serverImageResolver(message, client);
         const html = result.body.html;
         // Bounded like the body's own request: a picture that has not arrived by then is cancelled and left out of the quote, not waited for -
         // the ones that have arrived stay.

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

@@ -8,6 +8,7 @@ import { ApiRequestError, apiUrl } from "../../../../../lib/util/api.js";
 import Alert from "../../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Skeleton from "../../../../../lib/components/feedback/Skeleton.js";
+import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
 import { useResolvedTheme } from "../../../appearance/resolvedTheme.js";
 import { attachmentSource, cachedBodyContent, fetchBodyContent, makeCidResolver } from "./bodyContent.js";
 import { prepareBodyHtml } from "./bodyHtml.js";
@@ -43,6 +44,8 @@ export default function MessageBody({ messageUid, messageVersion, title, content
     });
     const [attempt, setAttempt] = useState(0);
     const supplied = content !== undefined;
+    // The explicit ApiClient this body is rendered under, if any - undefined for the cookie-based web app.
+    const client = useApiClient();
     useEffect(() => {
         if (supplied) {
             return;
@@ -59,7 +62,7 @@ export default function MessageBody({ messageUid, messageVersion, title, content
         if (!revalidating) {
             setRemote({ status: "loading" });
         }
-        fetchBodyContent(messageUid, messageVersion, controller.signal).then((loaded) => setRemote({ status: "ready", content: loaded, uid: messageUid }), (err) => {
+        fetchBodyContent(messageUid, messageVersion, controller.signal, client).then((loaded) => setRemote({ status: "ready", content: loaded, uid: messageUid }), (err) => {
             if (!controller.signal.aborted && !revalidating) {
                 setRemote({ status: "error", message: err instanceof ApiRequestError ? err.message : "Could not load this message." });
             }

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

@@ -1,3 +1,4 @@
+import { type ApiClient } from "../../../../../lib/util/api.js";
 import { Attachment } from "../../../../../lib/mail/mailApi.js";
 import type { MimeAttachment } from "../../../../../lib/crypto/mime.js";
 /** What a message's body is: server-sanitized HTML, or plain text (a message with no HTML part, or the server's plain-text fallback). */
@@ -17,9 +18,10 @@ export declare function cachedBodyContent(uid: string, version: number): BodyCon
 /**
  * The message's body from the server's `GET /mail/messages/:id/content`: the HTML the server sanitized when it ingested the message
  * (`sanitizedHtmlBlobKey`), or - for a message with none - the plain-text preview. A request that fails throws an `ApiRequestError`.
- * Successful answers are remembered per uid and version.
+ * Successful answers are remembered per uid and version. With an explicit `client` the request goes through it (its origin and token) instead of
+ * the `jwt` cookie; without one it is the cookie request it always was.
  */
-export declare function fetchBodyContent(uid: string, version: number, signal?: AbortSignal): Promise<BodyContent>;
+export declare function fetchBodyContent(uid: string, version: number, signal?: AbortSignal, client?: ApiClient): Promise<BodyContent>;
 /** The largest inline image embedded into a body from a signed or encrypted message. */
 export declare const MAX_INLINE_IMAGE_BYTES = 5000000;
 /** A server attachment record as it may really arrive: the model carries the part's `Content-ID`, though the client type doesn't list it. */

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

@@ -23,28 +23,39 @@ export function cachedBodyContent(uid, version) {
 /**
  * The message's body from the server's `GET /mail/messages/:id/content`: the HTML the server sanitized when it ingested the message
  * (`sanitizedHtmlBlobKey`), or - for a message with none - the plain-text preview. A request that fails throws an `ApiRequestError`.
- * Successful answers are remembered per uid and version.
+ * Successful answers are remembered per uid and version. With an explicit `client` the request goes through it (its origin and token) instead of
+ * the `jwt` cookie; without one it is the cookie request it always was.
  */
-export async function fetchBodyContent(uid, version, signal) {
+export async function fetchBodyContent(uid, version, signal, client) {
     const cached = cachedBodyContent(uid, version);
     if (cached) {
         return cached;
     }
-    // Says what it can show, as a document request would: the server answers with the sanitized HTML, or its plain-text fallback.
-    const res = await fetch(apiUrl(`/mail/messages/${encodeURIComponent(uid)}/content`), {
-        credentials: "include",
-        headers: { Accept: ACCEPT },
-        signal,
-    });
-    if (!res.ok) {
-        const contentType = res.headers.get("content-type") ?? "";
-        const body = contentType.includes("application/json") ? await res.json().catch(() => undefined) : undefined;
-        throw new ApiRequestError((body && (body.message || body.error)) || res.statusText || "Could not load this message.", res.status, body?.code, body);
+    const path = `/mail/messages/${encodeURIComponent(uid)}/content`;
+    let text;
+    let contentType;
+    if (client) {
+        // `fetchBlob()` rejects with the same `ApiRequestError` a failed response gives, and its blob carries the response's own type.
+        const blob = await client.fetchBlob(path, { headers: { Accept: ACCEPT }, signal });
+        text = await blob.text();
+        contentType = blob.type;
     }
-    const text = await res.text();
-    const content = (res.headers.get("content-type") ?? "").toLowerCase().includes("text/html")
-        ? { kind: "html", html: text }
-        : { kind: "text", text };
+    else {
+        // Says what it can show, as a document request would: the server answers with the sanitized HTML, or its plain-text fallback.
+        const res = await fetch(apiUrl(path), {
+            credentials: "include",
+            headers: { Accept: ACCEPT },
+            signal,
+        });
+        if (!res.ok) {
+            const resType = res.headers.get("content-type") ?? "";
+            const body = resType.includes("application/json") ? await res.json().catch(() => undefined) : undefined;
+            throw new ApiRequestError((body && (body.message || body.error)) || res.statusText || "Could not load this message.", res.status, body?.code, body);
+        }
+        text = await res.text();
+        contentType = res.headers.get("content-type") ?? "";
+    }
+    const content = contentType.toLowerCase().includes("text/html") ? { kind: "html", html: text } : { kind: "text", text };
     if (cache.size >= CACHE_LIMIT) {
         cache.delete(cache.keys().next().value);
     }

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

@@ -10,6 +10,7 @@ export declare function printHeaders(message: Message, from: string): PrintableM
 export declare function olderConversationMessages(message: Message, client?: ApiClient): Promise<Message[]>;
 /**
  * One earlier message of a conversation as it prints: the body the reading pane would show. An encrypted one is decrypted here when this device has
- * its mailbox's keys unlocked; when it can't be, it prints a line saying so rather than the ciphertext.
+ * its mailbox's keys unlocked; when it can't be, it prints a line saying so rather than the ciphertext. `client` is the explicit `ApiClient` every
+ * request goes through when given (see `useApiClient()`); without one they are the cookie requests they always were.
  */
-export declare function printableOlderMessage(message: Message): Promise<PrintableMessage>;
+export declare function printableOlderMessage(message: Message, client?: ApiClient): Promise<PrintableMessage>;

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

@@ -34,15 +34,16 @@ export async function olderConversationMessages(message, client) {
 }
 /**
  * One earlier message of a conversation as it prints: the body the reading pane would show. An encrypted one is decrypted here when this device has
- * its mailbox's keys unlocked; when it can't be, it prints a line saying so rather than the ciphertext.
+ * its mailbox's keys unlocked; when it can't be, it prints a line saying so rather than the ciphertext. `client` is the explicit `ApiClient` every
+ * request goes through when given (see `useApiClient()`); without one they are the cookie requests they always were.
  */
-export async function printableOlderMessage(message) {
-    const attachments = await listAttachments(message.folderUid, message.uid).catch(() => []);
+export async function printableOlderMessage(message, client) {
+    const attachments = await listAttachments(message.folderUid, message.uid, client).catch(() => []);
     if (message.encrypted) {
         const unlocked = getUnlockedKeys(message.mailboxUid);
         if (unlocked) {
             const { evaluateMessageSecurity } = await import("../../../../../lib/crypto/messageSecurity.js");
-            const security = await evaluateMessageSecurity(await getMessageRawContent(message.uid), unlocked);
+            const security = await evaluateMessageSecurity(await getMessageRawContent(message.uid, client), unlocked);
             const content = security.text !== undefined ? { kind: "text", text: security.text } : security.html !== undefined ? { kind: "html", html: security.html } : undefined;
             if (content) {
                 return {
@@ -63,7 +64,8 @@ export async function printableOlderMessage(message) {
     return {
         subject: message.subject || "(no subject)",
         headers: printHeaders(message, formatMailAddress(message.from)),
-        content: await fetchBodyContent(message.uid, message.version),
+        // Without a client this is exactly the cookie request it always was.
+        content: await (client ? fetchBodyContent(message.uid, message.version, undefined, client) : fetchBodyContent(message.uid, message.version)),
         attachments,
     };
 }

package/dist/apps/shared/live/useFolderLiveUpdates.d.ts

@@ -0,0 +1,19 @@
+import { type PushEvent } from "../../../lib/mail/pushClient.js";
+/** An item a push event says was created, changed or deleted: its uid, and whether it is gone. */
+export interface FolderItemChange {
+    uid: string;
+    deleted: boolean;
+}
+/**
+ * The item a push event says was created, changed or deleted, when the event's `type` - the published model class name (`ContactMongo`,
+ * `TaskSQL`, ...) - matches `model`, or `undefined` for anything else the shared push connection delivers. Only the uid is taken: the payload
+ * is whatever every subscriber of the folder may see (a private calendar event's busy block), so a page fetches the item again by its uid.
+ */
+export declare function changedItemOf(event: PushEvent, model: RegExp): FolderItemChange | undefined;
+/**
+ * Keeps a page's folders live: while the page is mounted the tab's push connection is subscribed to `folderUids` (under the page's own
+ * `group` - see `PushClient.setChannels()`; Mail's connection subscribes to mail folders only, so nothing else asks for a calendar,
+ * contacts or tasks folder), and `onChange` is called with every item `parse` recognizes - created, changed or deleted anywhere: another
+ * tab, a phone over ActiveSync, the server itself. `onChange` may change between renders; the latest is called.
+ */
+export declare function useFolderLiveUpdates(group: string, folderUids: readonly string[], parse: (event: PushEvent) => FolderItemChange | undefined, onChange: (change: FolderItemChange) => void): void;

package/dist/apps/shared/live/useFolderLiveUpdates.js

@@ -0,0 +1,41 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef } from "react";
+import { getPushClient } from "../../../lib/mail/pushClient.js";
+/**
+ * The item a push event says was created, changed or deleted, when the event's `type` - the published model class name (`ContactMongo`,
+ * `TaskSQL`, ...) - matches `model`, or `undefined` for anything else the shared push connection delivers. Only the uid is taken: the payload
+ * is whatever every subscriber of the folder may see (a private calendar event's busy block), so a page fetches the item again by its uid.
+ */
+export function changedItemOf(event, model) {
+    if (!model.test(event.type) || (event.action !== "create" && event.action !== "update" && event.action !== "delete")) {
+        return undefined;
+    }
+    const data = event.data;
+    return typeof data?.uid === "string" ? { uid: data.uid, deleted: event.action === "delete" } : undefined;
+}
+/**
+ * Keeps a page's folders live: while the page is mounted the tab's push connection is subscribed to `folderUids` (under the page's own
+ * `group` - see `PushClient.setChannels()`; Mail's connection subscribes to mail folders only, so nothing else asks for a calendar,
+ * contacts or tasks folder), and `onChange` is called with every item `parse` recognizes - created, changed or deleted anywhere: another
+ * tab, a phone over ActiveSync, the server itself. `onChange` may change between renders; the latest is called.
+ */
+export function useFolderLiveUpdates(group, folderUids, parse, onChange) {
+    const key = [...new Set(folderUids)].sort().join(",");
+    useEffect(() => {
+        const client = getPushClient();
+        client.setChannels(key ? key.split(",") : [], group);
+        client.start();
+        return () => client.setChannels([], group);
+    }, [group, key]);
+    const latest = useRef({ parse, onChange });
+    latest.current = { parse, onChange };
+    useEffect(() => getPushClient().onEvent((event) => {
+        const change = latest.current.parse(event);
+        if (change) {
+            latest.current.onChange(change);
+        }
+    }), []);
+}

package/dist/apps/shared/mail/outbox/sendOutcomes.js

@@ -57,9 +57,7 @@ async function openFailedDraft(event, client) {
             });
             return;
         }
-        // loadOriginalMessage() (quotedBody.ts) does not yet accept an explicit ApiClient itself - out of scope here (that module is not one of
-        // this task's files); it still falls back to the default global session even under an ApiClientContext.Provider.
-        const original = await loadOriginalMessage(moved, null);
+        const original = await loadOriginalMessage(moved, null, {}, client);
         const attachments = await listAttachments(moved.folderUid, moved.uid, client).catch(() => []);
         const byType = (type) => moved.recipients.filter((recipient) => recipient.type === type).map(formatRecipient).join(", ");
         openComposeFromOutside({

package/dist/apps/shared/notifications/preferences.d.ts

@@ -11,3 +11,11 @@ export declare const NOTIFICATIONS_ENABLED_KEY = "rapidmx-new-mail-popups";
 /** Whether pop-up notifications are on (the default). */
 export declare function getNotificationsEnabled(): boolean;
 export declare function setNotificationsEnabled(enabled: boolean): void;
+/**
+ * `localStorage` key of the switch for the sounds that go with notifications (a chime for new mail, a bell for a calendar alarm, a buzz for an
+ * error). Absent means on; `"off"` means the user turned them off. Independent of the pop-ups themselves.
+ */
+export declare const NOTIFICATION_SOUNDS_KEY = "rapidmx-notification-sounds";
+/** Whether notification sounds are on (the default). */
+export declare function getNotificationSoundsEnabled(): boolean;
+export declare function setNotificationSoundsEnabled(enabled: boolean): void;

package/dist/apps/shared/notifications/preferences.js

@@ -34,3 +34,30 @@ export function setNotificationsEnabled(enabled) {
         // Storage blocked or full: the choice lasts until the page is reloaded, no longer.
     }
 }
+/**
+ * `localStorage` key of the switch for the sounds that go with notifications (a chime for new mail, a bell for a calendar alarm, a buzz for an
+ * error). Absent means on; `"off"` means the user turned them off. Independent of the pop-ups themselves.
+ */
+export const NOTIFICATION_SOUNDS_KEY = "rapidmx-notification-sounds";
+/** Whether notification sounds are on (the default). */
+export function getNotificationSoundsEnabled() {
+    try {
+        return localStorage.getItem(NOTIFICATION_SOUNDS_KEY) !== "off";
+    }
+    catch {
+        return true;
+    }
+}
+export function setNotificationSoundsEnabled(enabled) {
+    try {
+        if (enabled) {
+            localStorage.removeItem(NOTIFICATION_SOUNDS_KEY);
+        }
+        else {
+            localStorage.setItem(NOTIFICATION_SOUNDS_KEY, "off");
+        }
+    }
+    catch {
+        // Storage blocked or full: the choice lasts until the page is reloaded, no longer.
+    }
+}

package/dist/apps/shared/notifications/sounds.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The sounds that go with the app's notifications: a chime for new mail, a bell for a calendar alarm and a low double buzz for an error. They are
+ * made with the Web Audio API as they are played - no audio files to download, cache or ship - so they work offline and cost nothing until used.
+ *
+ * Browsers only let a page make sound after the person has interacted with it; until then the audio context stays suspended and a sound is silently
+ * skipped (it is resumed, and plays from then on, as soon as the page has had a click or a key press). A sound is never an error: whatever
+ * goes wrong with the audio is swallowed. The same sound is not played twice within `MIN_GAP_MS`, so a burst of notifications is one sound, not a clatter.
+ */
+export type NotificationSound = "mail" | "calendar" | "error";
+/** The shortest time between two plays of the same sound. */
+export declare const MIN_GAP_MS = 750;
+/** Plays `sound`, unless the person turned notification sounds off, the same sound just played, or the browser won't make sound yet. Never throws. */
+export declare function playNotificationSound(sound: NotificationSound, now?: number): void;
+/** Forgets the audio context and what was played when - for tests. */
+export declare function resetNotificationSounds(): void;