@rapidmx/web-client 0.9.0 → 0.11.0

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

@@ -1,5 +1,16 @@
 import React, { PropsWithChildren } from "react";
 import { DraftThreading } from "@rapidmx/react-shared/mail/mailApi.js";
+import { ResumeCompose } from "../../../mail/outbox/composeBridge.js";
+/** The CSS variable (on `<html>`) that holds how far down the screen the open compose windows start, in px. */
+export declare const COMPOSE_TOP_VAR = "--rr-compose-top";
+/**
+ * Starts downloading the compose window's code without opening one - on hover/focus of a Compose or Reply button and when
+ * the browser is idle after the inbox has loaded - so that clicking it finds the chunk already in memory. Safe to call
+ * any number of times, and never rejects: a failed download is retried by the click itself.
+ */
+export declare function prefetchComposeWindow(): void;
+/** Test seam: forgets the loaded compose window chunk, as a fresh page load would. */
+export declare function resetComposeWindowLoader(): void;
 export interface ComposeSession {
     id: string;
     /** The initial sending mailbox - absent means "the caller's own mailbox" (see `ComposeWindow`). */
@@ -20,8 +31,23 @@ export interface ComposeSession {
     signatureContext: "new" | "reply_forward";
     /** See `OpenComposeInput.suppressSigning`'s own doc comment. */
     suppressSigning?: boolean;
+    /** The window opened before its quoted original was known (see `OpenComposeInput.pending`): the body waits for it. */
+    quotePending?: boolean;
+    /** What `OpenComposeInput.pending` resolved with, once it has - see `ComposeLateInput`. */
+    late?: ComposeLateInput;
+    /** See `OpenComposeInput.resume`. */
+    resume?: ResumeCompose;
     minimized: boolean;
 }
+/** What a reply or forward could only work out after its window was already open (see `OpenComposeInput.pending`). */
+export interface ComposeLateInput {
+    /** The quoted original - see `OpenComposeInput.quotedHtml`. */
+    quotedHtml?: string;
+    /** A better To than the one the window opened with - applied only if the To field is still exactly what it opened with. */
+    to?: string;
+    /** A better Cc, under the same rule as `to`. */
+    cc?: string;
+}
 export interface OpenComposeInput {
     /** The sending mailbox to start with. Omit for a fresh message (defaults to the caller's own mailbox);
      * a reply/forward passes the original message's mailbox so a shared mailbox's mail replies from it.
@@ -53,6 +79,18 @@ export interface OpenComposeInput {
      * `In-Reply-To`/`References` at all and every mail system - the sender's own Sent Items included - files it
      * as a new conversation rather than part of the thread. Absent for a fresh compose, which starts one. */
     threading?: DraftThreading;
+    /**
+     * Something the window shouldn't wait for before appearing: a reply or forward opens at once from what is already in
+     * memory (the message's own subject and sender), and this settles with what needed the network - the original's body
+     * to quote, and for Reply All the recipients its headers name. The compose window shows meanwhile, its body area
+     * waiting, and fills the body in when this resolves; `to`/`cc` replace the opened-with values only if the user hasn't
+     * touched those fields. Must never reject (resolve `undefined` for "nothing more"); when set, `quotedHtml` is ignored
+     * until it resolves.
+     */
+    pending?: Promise<ComposeLateInput | undefined>;
+    /** Re-opens a message that was already composed - a failed send's "Open draft": the window continues that server draft, with every field
+     * exactly as it was typed, instead of starting a new one. */
+    resume?: ResumeCompose;
 }
 export interface ComposeContextValue {
     /** Opens a new compose window, stacked alongside any already open (Gmail allows several at once). */

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

@@ -3,9 +3,70 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
-import ComposeWindow from "./ComposeWindow.js";
+import { registerComposeOpener } from "../../../mail/outbox/composeBridge.js";
+import { markComposePhase } from "./composePerf.js";
+import ComposeWindowPlaceholder from "./ComposeWindowPlaceholder.js";
+/** The CSS variable (on `<html>`) that holds how far down the screen the open compose windows start, in px. */
+export const COMPOSE_TOP_VAR = "--rr-compose-top";
+let loadedComposeWindow;
+let loadingComposeWindow;
+/**
+ * The compose window - with the rich-text editor (TipTap/ProseMirror), the recipient inputs and the send pipeline - is
+ * the largest piece of the mail app and most page loads never open it, so it is a separate chunk, loaded here once. Not
+ * `React.lazy()`: a chunk that failed to download (offline, a deploy that replaced it) must be retryable, and `lazy()` keeps
+ * the rejection for good.
+ */
+function loadComposeWindow() {
+    loadingComposeWindow ?? (loadingComposeWindow = import("./ComposeWindow.js").then((module) => (loadedComposeWindow = module.default), (err) => {
+        loadingComposeWindow = undefined;
+        throw err;
+    }));
+    return loadingComposeWindow;
+}
+/**
+ * Starts downloading the compose window's code without opening one - on hover/focus of a Compose or Reply button and when
+ * the browser is idle after the inbox has loaded - so that clicking it finds the chunk already in memory. Safe to call
+ * any number of times, and never rejects: a failed download is retried by the click itself.
+ */
+export function prefetchComposeWindow() {
+    loadComposeWindow().catch(() => undefined);
+}
+/** Test seam: forgets the loaded compose window chunk, as a fresh page load would. */
+export function resetComposeWindowLoader() {
+    loadedComposeWindow = undefined;
+    loadingComposeWindow = undefined;
+}
+/** The compose window component once its chunk is in, else `undefined` (while loading, or `failed`), and a way to retry. */
+function useComposeWindowComponent(wanted) {
+    const [loaded, setComponent] = useState();
+    // Also read straight from the module: a prefetch that finished after this provider mounted has no state update to
+    // announce it, and the first click must not flash the placeholder for a chunk that is already here.
+    const Component = loaded ?? loadedComposeWindow;
+    const [failed, setFailed] = useState(false);
+    const [attempt, setAttempt] = useState(0);
+    useEffect(() => {
+        if (!wanted || Component) {
+            return;
+        }
+        let cancelled = false;
+        setFailed(false);
+        loadComposeWindow().then((component) => {
+            if (!cancelled) {
+                setComponent(() => component);
+            }
+        }, () => {
+            if (!cancelled) {
+                setFailed(true);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [wanted, Component, attempt]);
+    return { Component, failed, retry: () => setAttempt((n) => n + 1) };
+}
 const ComposeContext = createContext({ openCompose: () => undefined });
 /** Opens the floating Compose window from anywhere inside `AppShell` (any of the four webmail apps). */
 export function useCompose() {
@@ -21,11 +82,33 @@ export function useCompose() {
 export default function ComposeProvider({ children, userUid, trusted }) {
     const [sessions, setSessions] = useState([]);
     const isMobile = useIsMobile();
-    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning, encrypt, threading, }) {
+    const { Component: ComposeWindow, failed, retry: retryLoad } = useComposeWindowComponent(sessions.length > 0);
+    // The top edge of the compose windows, published as `--rr-compose-top` so the pop-up stack (`NotificationCenter`) can keep clear of them.
+    const windowsRef = useRef(null);
+    const hasSessions = sessions.length > 0;
+    useEffect(() => {
+        const element = windowsRef.current;
+        if (!element) {
+            return;
+        }
+        const publish = () => document.documentElement.style.setProperty(COMPOSE_TOP_VAR, `${Math.round(element.getBoundingClientRect().top)}px`);
+        publish();
+        const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(publish);
+        observer?.observe(element);
+        window.addEventListener("resize", publish);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener("resize", publish);
+            document.documentElement.style.removeProperty(COMPOSE_TOP_VAR);
+        };
+    }, [hasSessions]);
+    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning, encrypt, threading, pending, resume, }) {
+        const id = crypto.randomUUID();
+        markComposePhase(id, "click");
         setSessions((prev) => [
             ...prev,
             {
-                id: crypto.randomUUID(),
+                id,
                 mailboxUid,
                 initialTo: to,
                 initialCc: cc,
@@ -35,9 +118,15 @@ export default function ComposeProvider({ children, userUid, trusted }) {
                 threading,
                 signatureContext,
                 suppressSigning,
+                quotePending: !!pending,
+                resume,
                 minimized: false,
             },
         ]);
+        // A window closed before this settles is simply not in the list any more - nothing to update.
+        void pending
+            ?.catch(() => undefined)
+            .then((late) => setSessions((prev) => prev.map((s) => s.id === id ? { ...s, quotePending: false, late, initialQuotedHtml: late?.quotedHtml ?? s.initialQuotedHtml } : s)));
     }
     function closeCompose(id) {
         setSessions((prev) => prev.filter((s) => s.id !== id));
@@ -46,6 +135,8 @@ export default function ComposeProvider({ children, userUid, trusted }) {
         setSessions((prev) => prev.map((s) => (s.id === id ? { ...s, minimized: !s.minimized } : s)));
     }
     const value = useMemo(() => ({ openCompose }), []);
+    // Code with no React context - a failed send's "Open draft" pop-up - opens windows through this.
+    useEffect(() => registerComposeOpener((input) => value.openCompose(input)), [value]);
     // On mobile, a non-minimized `ComposeWindow` renders full-screen (see that component's own doc
     // comment) — Gmail-style stacking of several full-screen overlays at once makes no sense there, so
     // at most one non-minimized session is ever shown: the most recently opened one. Minimized
@@ -54,8 +145,8 @@ export default function ComposeProvider({ children, userUid, trusted }) {
     // non-minimized one) once whatever's currently "on top" is closed or minimized. The others stay
     // mounted, just hidden: unmounting them would throw away everything typed into them.
     const lastNonMinimizedId = isMobile ? [...sessions].reverse().find((s) => !s.minimized)?.id : undefined;
-    return (_jsxs(ComposeContext.Provider, { value: value, children: [children, sessions.length > 0 && (_jsx("div", { className: "fixed bottom-0 right-6 flex items-end gap-3 z-50", children: sessions.map((session) => {
+    return (_jsxs(ComposeContext.Provider, { value: value, children: [children, sessions.length > 0 && (_jsx("div", { ref: windowsRef, className: "fixed bottom-0 right-6 flex items-end gap-3 z-50", children: sessions.map((session) => {
                     const hidden = isMobile && !session.minimized && session.id !== lastNonMinimizedId;
-                    return (_jsx("div", { hidden: hidden, className: hidden ? "hidden" : "contents", children: _jsx(ComposeWindow, { session: session, userUid: userUid, trusted: trusted, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) }) }, session.id));
+                    return (_jsx("div", { hidden: hidden, className: hidden ? "hidden" : "contents", children: ComposeWindow ? (_jsx(ComposeWindow, { session: session, userUid: userUid, trusted: trusted, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) })) : (_jsx(ComposeWindowPlaceholder, { session: session, failed: failed, onRetry: retryLoad, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) })) }, session.id));
                 }) }))] }));
 }

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

@@ -3,10 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useRef, useState } from "react";
+import { Suspense, lazy, useRef, useState } from "react";
 import { BsArrowClockwise, BsArrowCounterclockwise, BsEraser, BsHighlighter, BsImage, BsIndent, BsJustify, BsLink45Deg, BsListOl, BsListUl, BsPaletteFill, BsTable, BsTextCenter, BsTextLeft, BsTextRight, BsTypeBold, BsTypeItalic, BsTypeStrikethrough, BsTypeUnderline, BsUnindent, } from "react-icons/bs";
-import EmojiPicker from "./EmojiPicker.js";
 import GifPicker from "./GifPicker.js";
+/** Loaded when the picker is first opened: the emoji list is a half-megabyte JSON file that nothing else needs. */
+const EmojiPicker = lazy(() => import("./EmojiPicker.js"));
 const FONT_FAMILIES = [
     { label: "Default", value: "" },
     { label: "Sans Serif", value: "Arial, Helvetica, sans-serif" },
@@ -84,5 +85,5 @@ export default function ComposeToolbar({ editor, onUploadImage }) {
                             ? ed.chain().focus().setFontFamily(e.target.value).run()
                             : ed.chain().focus().unsetFontFamily().run()), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface disabled:opacity-40", children: FONT_FAMILIES.map((f) => (_jsx("option", { value: f.value, children: f.label }, f.label))) }), _jsx("select", { "aria-label": "Font size", disabled: disabled, value: editor?.getAttributes("textStyle").fontSize ?? "", onChange: (e) => run((ed) => e.target.value
                             ? ed.chain().focus().setFontSize(e.target.value).run()
-                            : ed.chain().focus().unsetFontSize().run()), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface disabled:opacity-40", children: FONT_SIZES.map((f) => (_jsx("option", { value: f.value, children: f.label }, f.label))) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bold", icon: BsTypeBold, disabled: disabled, active: editor?.isActive("bold"), onClick: () => run((e) => e.chain().focus().toggleBold().run()) }), _jsx(ToolbarButton, { label: "Italic", icon: BsTypeItalic, disabled: disabled, active: editor?.isActive("italic"), onClick: () => run((e) => e.chain().focus().toggleItalic().run()) }), _jsx(ToolbarButton, { label: "Underline", icon: BsTypeUnderline, disabled: disabled, active: editor?.isActive("underline"), onClick: () => run((e) => e.chain().focus().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: "Strikethrough", icon: BsTypeStrikethrough, disabled: disabled, active: editor?.isActive("strike"), onClick: () => run((e) => e.chain().focus().toggleStrike().run()) }), _jsx(Divider, {}), _jsxs("label", { className: "w-8 h-8 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(BsPaletteFill, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Text color" }), _jsx("input", { type: "color", disabled: disabled, value: editor?.getAttributes("textStyle").color ?? "#000000", onChange: (e) => run((ed) => ed.chain().focus().setColor(e.target.value).run()), className: "sr-only" })] }), _jsx(ToolbarButton, { label: "Highlight", icon: BsHighlighter, disabled: disabled, active: editor?.isActive("highlight"), onClick: () => run((e) => e.chain().focus().toggleHighlight().run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Align left", icon: BsTextLeft, disabled: disabled, active: editor?.isActive({ textAlign: "left" }), onClick: () => run((e) => e.chain().focus().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: "Align center", icon: BsTextCenter, disabled: disabled, active: editor?.isActive({ textAlign: "center" }), onClick: () => run((e) => e.chain().focus().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: "Align right", icon: BsTextRight, disabled: disabled, active: editor?.isActive({ textAlign: "right" }), onClick: () => run((e) => e.chain().focus().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: "Justify", icon: BsJustify, disabled: disabled, active: editor?.isActive({ textAlign: "justify" }), onClick: () => run((e) => e.chain().focus().setTextAlign("justify").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bulleted list", icon: BsListUl, disabled: disabled, active: editor?.isActive("bulletList"), onClick: () => run((e) => e.chain().focus().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: "Numbered list", icon: BsListOl, disabled: disabled, active: editor?.isActive("orderedList"), onClick: () => run((e) => e.chain().focus().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: "Decrease indent", icon: BsUnindent, disabled: disabled, onClick: () => run((e) => e.chain().focus().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: "Increase indent", icon: BsIndent, disabled: disabled, onClick: () => run((e) => e.chain().focus().sinkListItem("listItem").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Insert link", icon: BsLink45Deg, disabled: disabled, active: editor?.isActive("link"), onClick: openLinkPrompt }), _jsx(ToolbarButton, { label: "Insert image", icon: BsImage, disabled: disabled, onClick: () => imageInputRef.current?.click() }), _jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", onChange: handleImageFileSelected, className: "sr-only", "aria-label": "Insert image file" }), _jsx(ToolbarButton, { label: "Insert table", icon: BsTable, disabled: disabled, onClick: () => run((e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()) }), _jsx("button", { ref: emojiButtonRef, type: "button", "aria-label": "Insert emoji", title: "Insert emoji", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "emoji" ? null : "emoji")), className: "w-8 h-8 flex items-center justify-center text-base rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "\uD83D\uDE00" }), openPopup === "emoji" && (_jsx(EmojiPicker, { anchorRef: emojiButtonRef, onSelect: handleInsertEmoji, onClose: () => setOpenPopup(null) })), _jsx("button", { ref: gifButtonRef, type: "button", "aria-label": "Insert GIF", title: "Insert GIF", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "gif" ? null : "gif")), className: "w-8 h-8 flex items-center justify-center text-[10px] font-extrabold tracking-tight rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "GIF" }), openPopup === "gif" && _jsx(GifPicker, { anchorRef: gifButtonRef, onSelect: handleInsertGif, onClose: () => setOpenPopup(null) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Clear formatting", icon: BsEraser, disabled: disabled, onClick: () => run((e) => e.chain().focus().unsetAllMarks().clearNodes().run()) }), _jsx(ToolbarButton, { label: "Undo", icon: BsArrowCounterclockwise, disabled: disabled || !editor?.can().undo(), onClick: () => run((e) => e.chain().focus().undo().run()) }), _jsx(ToolbarButton, { label: "Redo", icon: BsArrowClockwise, disabled: disabled || !editor?.can().redo(), onClick: () => run((e) => e.chain().focus().redo().run()) })] }), linkPrompt] }));
+                            : ed.chain().focus().unsetFontSize().run()), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface disabled:opacity-40", children: FONT_SIZES.map((f) => (_jsx("option", { value: f.value, children: f.label }, f.label))) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bold", icon: BsTypeBold, disabled: disabled, active: editor?.isActive("bold"), onClick: () => run((e) => e.chain().focus().toggleBold().run()) }), _jsx(ToolbarButton, { label: "Italic", icon: BsTypeItalic, disabled: disabled, active: editor?.isActive("italic"), onClick: () => run((e) => e.chain().focus().toggleItalic().run()) }), _jsx(ToolbarButton, { label: "Underline", icon: BsTypeUnderline, disabled: disabled, active: editor?.isActive("underline"), onClick: () => run((e) => e.chain().focus().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: "Strikethrough", icon: BsTypeStrikethrough, disabled: disabled, active: editor?.isActive("strike"), onClick: () => run((e) => e.chain().focus().toggleStrike().run()) }), _jsx(Divider, {}), _jsxs("label", { className: "w-8 h-8 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(BsPaletteFill, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Text color" }), _jsx("input", { type: "color", disabled: disabled, value: editor?.getAttributes("textStyle").color ?? "#000000", onChange: (e) => run((ed) => ed.chain().focus().setColor(e.target.value).run()), className: "sr-only" })] }), _jsx(ToolbarButton, { label: "Highlight", icon: BsHighlighter, disabled: disabled, active: editor?.isActive("highlight"), onClick: () => run((e) => e.chain().focus().toggleHighlight().run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Align left", icon: BsTextLeft, disabled: disabled, active: editor?.isActive({ textAlign: "left" }), onClick: () => run((e) => e.chain().focus().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: "Align center", icon: BsTextCenter, disabled: disabled, active: editor?.isActive({ textAlign: "center" }), onClick: () => run((e) => e.chain().focus().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: "Align right", icon: BsTextRight, disabled: disabled, active: editor?.isActive({ textAlign: "right" }), onClick: () => run((e) => e.chain().focus().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: "Justify", icon: BsJustify, disabled: disabled, active: editor?.isActive({ textAlign: "justify" }), onClick: () => run((e) => e.chain().focus().setTextAlign("justify").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bulleted list", icon: BsListUl, disabled: disabled, active: editor?.isActive("bulletList"), onClick: () => run((e) => e.chain().focus().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: "Numbered list", icon: BsListOl, disabled: disabled, active: editor?.isActive("orderedList"), onClick: () => run((e) => e.chain().focus().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: "Decrease indent", icon: BsUnindent, disabled: disabled, onClick: () => run((e) => e.chain().focus().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: "Increase indent", icon: BsIndent, disabled: disabled, onClick: () => run((e) => e.chain().focus().sinkListItem("listItem").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Insert link", icon: BsLink45Deg, disabled: disabled, active: editor?.isActive("link"), onClick: openLinkPrompt }), _jsx(ToolbarButton, { label: "Insert image", icon: BsImage, disabled: disabled, onClick: () => imageInputRef.current?.click() }), _jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", onChange: handleImageFileSelected, className: "sr-only", "aria-label": "Insert image file" }), _jsx(ToolbarButton, { label: "Insert table", icon: BsTable, disabled: disabled, onClick: () => run((e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()) }), _jsx("button", { ref: emojiButtonRef, type: "button", "aria-label": "Insert emoji", title: "Insert emoji", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "emoji" ? null : "emoji")), className: "w-8 h-8 flex items-center justify-center text-base rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "\uD83D\uDE00" }), openPopup === "emoji" && (_jsx(Suspense, { fallback: null, children: _jsx(EmojiPicker, { anchorRef: emojiButtonRef, onSelect: handleInsertEmoji, onClose: () => setOpenPopup(null) }) })), _jsx("button", { ref: gifButtonRef, type: "button", "aria-label": "Insert GIF", title: "Insert GIF", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "gif" ? null : "gif")), className: "w-8 h-8 flex items-center justify-center text-[10px] font-extrabold tracking-tight rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "GIF" }), openPopup === "gif" && _jsx(GifPicker, { anchorRef: gifButtonRef, onSelect: handleInsertGif, onClose: () => setOpenPopup(null) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Clear formatting", icon: BsEraser, disabled: disabled, onClick: () => run((e) => e.chain().focus().unsetAllMarks().clearNodes().run()) }), _jsx(ToolbarButton, { label: "Undo", icon: BsArrowCounterclockwise, disabled: disabled || !editor?.can().undo(), onClick: () => run((e) => e.chain().focus().undo().run()) }), _jsx(ToolbarButton, { label: "Redo", icon: BsArrowClockwise, disabled: disabled || !editor?.can().redo(), onClick: () => run((e) => e.chain().focus().redo().run()) })] }), linkPrompt] }));
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ComposeSession } from "./ComposeContext.js";
+import { type ComposeSession } from "./ComposeContext.js";
 export interface ComposeWindowProps {
     session: ComposeSession;
     onClose: () => void;
@@ -18,7 +18,8 @@ export interface ComposeWindowProps {
 }
 /** Debounce between the last edit and the draft autosave. */
 export declare const DEFAULT_AUTOSAVE_DELAY_MS = 2000;
-/** Automatic retries of a failed mailbox/encryption-policy load; after the last one only "Retry" tries again. */
+/** Automatic, silent retries of a failed mailbox/encryption-policy (or recipient key) load, one entry per retry - a flapping gateway is waited out
+ * in the background, without a word to the user. */
 export declare const DEFAULT_CRYPTO_RETRY_DELAYS_MS: number[];
 /**
  * A floating, Gmail-style compose window — overlays whatever app is currently showing instead of