@rapidmx/web-client 0.15.1 → 0.17.0

package/apps/shared/components/mail/compose/RecipientInput.tsx

@@ -46,6 +46,28 @@ export interface RecipientInputProps {
     disabled?: boolean;
     /** Focuses the input when it mounts - a new message starts in To. */
     autoFocus?: boolean;
+
+    // The rest are for fields other than To/Cc/Bcc that reuse the input (the event dialog's guests); compose leaves them all out.
+    /** Called whenever the field's entries change: every committed entry (chips - a picked suggestion, a finished or
+     * pasted one, or a typed one committed by Enter or leaving the field) and the text still being typed (`""` after a
+     * commit). Lets a field that keeps its entries as something other than text (attendees) read them without parsing
+     * `value` and guessing which part of it is still being typed. */
+    onEdit?: (chips: string[], pending: string) => void;
+    /** Text being typed already when the input mounts (the last recipient of `value`), so a field that is remounted
+     * (a popover growing into a form) keeps it in the input instead of turning it into a chip. */
+    initialPending?: string;
+    /** Chips this returns true for are not drawn (they stay in the value, and out of the suggestions): a field that
+     * lists some entries itself. Backspace in an empty input removes the last chip that is drawn. */
+    hideChip?: (chip: string) => boolean;
+    placeholder?: string;
+    /** The input's accessible name, for a field without a `<label htmlFor>`. */
+    ariaLabel?: string;
+    /** The chip list's accessible name; `${label} recipients` by default. */
+    listLabel?: string;
+    /** Classes for the field's outer element, after its own (a border, padding). */
+    className?: string;
+    /** The suggestions' `z-index`, for a field inside an overlay that stacks above the default's (`z-[60]`). */
+    dropdownZIndex?: number;
 }
 
 interface DropdownPosition {
@@ -92,8 +114,16 @@ export default function RecipientInput({
     debounceMs = RECIPIENT_SUGGESTION_DEBOUNCE_MS,
     disabled,
     autoFocus,
+    onEdit,
+    initialPending = "",
+    hideChip,
+    placeholder,
+    ariaLabel,
+    listLabel,
+    className,
+    dropdownZIndex,
 }: RecipientInputProps) {
-    const [pending, setPending] = useState("");
+    const [pending, setPending] = useState(initialPending);
     const [suggestions, setSuggestions] = useState<RecipientSuggestion[]>([]);
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
@@ -110,6 +140,8 @@ export default function RecipientInput({
     const chips = pendingActive ? tokens.slice(0, -1) : tokens;
     const inputValue = pendingActive ? pending : "";
     const query = pendingActive ? pendingText : "";
+    const drawn = chips.map((chip, index) => ({ chip, index })).filter(({ chip }) => !hideChip?.(chip));
+    const lastDrawn = drawn.length > 0 ? drawn[drawn.length - 1].index : -1;
     const listboxId = `${id}-suggestions`;
     const optionId = (index: number) => `${id}-suggestion-${index}`;
 
@@ -174,6 +206,7 @@ export default function RecipientInput({
 
     function emit(nextChips: string[], nextPending: string) {
         onChange([...nextChips, nextPending.trim()].filter((part) => part.length > 0).join(", "));
+        onEdit?.(nextChips, nextPending.trim());
     }
 
     function handleInputChange(e: ChangeEvent<HTMLInputElement>) {
@@ -185,18 +218,23 @@ export default function RecipientInput({
     }
 
     function commitPending(): string {
-        const next = [...chips, pendingText].filter((part) => part.length > 0).join(", ");
+        const committed = [...chips, pendingText].filter((part) => part.length > 0);
         setPending("");
         setOpen(false);
-        return next;
+        if (pendingText) {
+            onEdit?.(committed, "");
+        }
+        return committed.join(", ");
     }
 
     function select(suggestion: RecipientSuggestion) {
-        const next = [...chips, formatRecipient({ address: suggestion.address, displayName: suggestion.displayName || undefined })].join(", ");
+        const committed = [...chips, formatRecipient({ address: suggestion.address, displayName: suggestion.displayName || undefined })];
+        const next = committed.join(", ");
         setPending("");
         setOpen(false);
         setSuggestions([]);
         onChange(next);
+        onEdit?.(committed, "");
         onCommit?.(next);
     }
 
@@ -249,9 +287,12 @@ export default function RecipientInput({
                 }
                 return;
             case "Backspace":
-                if (inputValue === "" && chips.length > 0) {
+                if (inputValue === "" && lastDrawn >= 0) {
                     e.preventDefault();
-                    emit(chips.slice(0, -1), "");
+                    emit(
+                        chips.filter((_, i) => i !== lastDrawn),
+                        "",
+                    );
                 }
                 return;
         }
@@ -263,10 +304,10 @@ export default function RecipientInput({
     }
 
     return (
-        <div ref={anchorRef} className="flex-1 min-w-0 flex flex-wrap items-center gap-1">
-            {chips.length > 0 && (
-                <ul role="list" aria-label={`${label} recipients`} className="contents">
-                    {chips.map((chip, index) => {
+        <div ref={anchorRef} className={`flex-1 min-w-0 flex flex-wrap items-center gap-1${className ? ` ${className}` : ""}`}>
+            {drawn.length > 0 && (
+                <ul role="list" aria-label={listLabel ?? `${label} recipients`} className="contents">
+                    {drawn.map(({ chip, index }) => {
                         const recipient = parseRecipient(chip);
                         const valid = isValidRecipientAddress(recipient.address);
                         const name = recipient.displayName || recipient.address;
@@ -303,6 +344,8 @@ export default function RecipientInput({
                 role="combobox"
                 autoComplete="off"
                 aria-autocomplete="list"
+                aria-label={ariaLabel}
+                placeholder={placeholder}
                 aria-expanded={expanded}
                 aria-controls={listboxId}
                 aria-activedescendant={expanded ? optionId(active) : undefined}
@@ -325,7 +368,7 @@ export default function RecipientInput({
                         role="listbox"
                         aria-label={`${label} suggestions`}
                         onMouseDown={(e) => e.preventDefault()}
-                        style={{ position: "fixed", left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight }}
+                        style={{ position: "fixed", left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight, zIndex: dropdownZIndex }}
                         className="z-[60] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1"
                     >
                         {visible.map((suggestion, index) => (

package/apps/shared/components/mail/compose/RichTextEditor.tsx

@@ -1,147 +1,147 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useRef, useState } from "react";
-import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { TextStyleKit } from "@tiptap/extension-text-style";
-import TextAlign from "@tiptap/extension-text-align";
-import Highlight from "@tiptap/extension-highlight";
-import Image from "@tiptap/extension-image";
-import { TableKit } from "@tiptap/extension-table";
-import Placeholder from "@tiptap/extension-placeholder";
-import ComposeToolbar from "./ComposeToolbar.js";
-
-export interface RichTextEditorProps {
-    value: string;
-    onChange: (value: string) => void;
-    height?: string;
-    /** When true, the editor fills its parent's height via flexbox instead of a fixed `height` — for
-     * embedding inside a flex-column container of variable height (the floating Compose window) where
-     * a literal pixel height can't be computed up front. `height` is ignored when this is set. */
-    fill?: boolean;
-    /** Passed straight through to `ComposeToolbar` — see its own doc comment on this prop. */
-    onUploadImage: (file: File) => Promise<string | null>;
-    /** Focuses the editor with the caret at the very start of the document once it mounts - a reply or forward, whose
-     * body starts with an empty paragraph above the signature and quote, so typing goes above them. Only read when
-     * the editor is created. */
-    autoFocusStart?: boolean;
-    /** Called once the editor is ready, with `value` as the editor itself serializes it: TipTap drops what its schema
-     * doesn't hold (e.g. a blockquote's `style`) and adds an empty paragraph after a trailing non-paragraph node (a
-     * quote). That normalization happens on the editor's first transaction - even one that only moves the caret -
-     * and isn't reported through `onChange`, so a caller can compare later edits against this instead of `value`. */
-    onInitialized?: (value: string) => void;
-    /**
-     * HTML to add at the end of the document, once, as soon as there is some (it may be undefined when the editor is created and
-     * defined later). A reply opens its editor before the quoted original has been fetched and hands the quote in through this when
-     * it arrives - so whatever has been typed above stays, and the quote lands where it always did, under the signature.
-     */
-    appendHtml?: string;
-    /** Called with the document as the editor serializes it, right after `appendHtml` was added. */
-    onAppended?: (value: string) => void;
-}
-
-/**
- * A WYSIWYG rich-text editor for the Compose window's message body — replaces `MonacoHtmlEditor` (an HTML
- * *source* editor) with a real Outlook-Home-tab-style formatting experience, built on TipTap/ProseMirror.
- * Used by `ComposeWindow` (the floating overlay, not a dedicated page — see `ComposeContext.tsx`'s doc
- * comment).
- *
- * `value` seeds the editor's initial content only — like `MonacoHtmlEditor`, this never re-syncs from a
- * later `value` prop change; TipTap owns its own document once created. Live edits flow out as HTML (via
- * `editor.getHTML()`) through `onChange`.
- *
- * `immediatelyRender: false` is required for this framework's SSR: the page embedding `ComposeWindow` is
- * rendered server-side under plain Node before hydration (see `ReactRoute`), and TipTap's default
- * (`immediatelyRender: true`) tries to mount its ProseMirror view during that very first render, which
- * both can't work without a real DOM and produces a hydration mismatch. With it `false`, `useEditor`
- * returns `null` until the editor actually mounts client-side after hydration — `ComposeToolbar`/
- * `EditorContent` both already handle a `null` editor by rendering their disabled/empty state, so this
- * needs no extra loading-placeholder logic here. Unlike `MonacoHtmlEditor`, no dynamic `import()` is
- * needed to defer loading TipTap's modules off the SSR path — `immediatelyRender: false` alone is
- * sufficient here since TipTap (unlike Monaco) never touches the DOM at module-evaluation time, only when
- * an editor view actually mounts.
- */
-export default function RichTextEditor({
-    value,
-    onChange,
-    height = "360px",
-    fill = false,
-    onUploadImage,
-    autoFocusStart = false,
-    onInitialized,
-    appendHtml,
-    onAppended,
-}: RichTextEditorProps) {
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-    const onInitializedRef = useRef(onInitialized);
-    onInitializedRef.current = onInitialized;
-    const onAppendedRef = useRef(onAppended);
-    onAppendedRef.current = onAppended;
-    const appendedRef = useRef<string | undefined>(undefined);
-    // Transactions before `create` (the autofocus, and the normalizing one below) aren't edits.
-    const initializedRef = useRef(false);
-    // Held for this editor's lifetime: TipTap focuses a tick after creating the editor, and a re-render passing a
-    // different value in between would replace the option (via `setOptions`) before it's read.
-    const [autofocus] = useState<"start" | false>(autoFocusStart ? "start" : false);
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit.configure({ link: { openOnClick: false } }),
-            TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
-            TextAlign.configure({ types: ["heading", "paragraph"] }),
-            Highlight,
-            Image,
-            TableKit.configure({ table: { resizable: true } }),
-            Placeholder.configure({ placeholder: "Write your message…" }),
-        ],
-        content: value,
-        autofocus,
-        immediatelyRender: false,
-        editorProps: {
-            // Ctrl/Cmd+Enter is the compose window's Send. TipTap binds it to a hard break, and a key it handles never reaches the
-            // window's shortcut (which skips what a widget already took), so it inserted a line break and sent nothing. Returning true here
-            // stops ProseMirror handling it without preventing the event, which goes on to the shortcut. Shift+Enter is still the hard break.
-            handleDOMEvents: { keydown: (_view, event) => event.key === "Enter" && (event.ctrlKey || event.metaKey) },
-        },
-        onCreate: ({ editor: created }) => {
-            // An empty transaction runs the schema's append-transaction normalization now, before any edit.
-            created.view.dispatch(created.state.tr);
-            initializedRef.current = true;
-            onInitializedRef.current?.(created.getHTML());
-        },
-        onUpdate: ({ editor: updated }) => {
-            if (initializedRef.current) {
-                onChangeRef.current(updated.getHTML());
-            }
-        },
-    });
-
-    // Added once, at the end, whatever the reader has typed meanwhile (the caret stays where it is).
-    useEffect(() => {
-        if (!editor || appendHtml === undefined || appendedRef.current === appendHtml) {
-            return;
-        }
-        appendedRef.current = appendHtml;
-        editor.commands.insertContentAt(editor.state.doc.content.size, appendHtml);
-        onAppendedRef.current?.(editor.getHTML());
-    }, [editor, appendHtml]);
-
-    return (
-        <div className={["border border-border rounded-sm overflow-hidden", fill ? "h-full flex flex-col" : ""].filter(Boolean).join(" ")}>
-            <ComposeToolbar editor={editor} onUploadImage={onUploadImage} />
-            <EditorContent
-                editor={editor}
-                style={fill ? undefined : { height }}
-                className={[
-                    "overflow-y-auto px-3 py-2 text-sm [&_.tiptap]:outline-none [&_.tiptap]:h-full",
-                    fill ? "flex-1 min-h-0" : "",
-                ]
-                    .filter(Boolean)
-                    .join(" ")}
-            />
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useRef, useState } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { TextStyleKit } from "@tiptap/extension-text-style";
+import TextAlign from "@tiptap/extension-text-align";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import { TableKit } from "@tiptap/extension-table";
+import Placeholder from "@tiptap/extension-placeholder";
+import ComposeToolbar from "./ComposeToolbar.js";
+
+export interface RichTextEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    height?: string;
+    /** When true, the editor fills its parent's height via flexbox instead of a fixed `height` — for
+     * embedding inside a flex-column container of variable height (the floating Compose window) where
+     * a literal pixel height can't be computed up front. `height` is ignored when this is set. */
+    fill?: boolean;
+    /** Passed straight through to `ComposeToolbar` — see its own doc comment on this prop. */
+    onUploadImage: (file: File) => Promise<string | null>;
+    /** Focuses the editor with the caret at the very start of the document once it mounts - a reply or forward, whose
+     * body starts with an empty paragraph above the signature and quote, so typing goes above them. Only read when
+     * the editor is created. */
+    autoFocusStart?: boolean;
+    /** Called once the editor is ready, with `value` as the editor itself serializes it: TipTap drops what its schema
+     * doesn't hold (e.g. a blockquote's `style`) and adds an empty paragraph after a trailing non-paragraph node (a
+     * quote). That normalization happens on the editor's first transaction - even one that only moves the caret -
+     * and isn't reported through `onChange`, so a caller can compare later edits against this instead of `value`. */
+    onInitialized?: (value: string) => void;
+    /**
+     * HTML to add at the end of the document, once, as soon as there is some (it may be undefined when the editor is created and
+     * defined later). A reply opens its editor before the quoted original has been fetched and hands the quote in through this when
+     * it arrives - so whatever has been typed above stays, and the quote lands where it always did, under the signature.
+     */
+    appendHtml?: string;
+    /** Called with the document as the editor serializes it, right after `appendHtml` was added. */
+    onAppended?: (value: string) => void;
+}
+
+/**
+ * A WYSIWYG rich-text editor for the Compose window's message body — replaces `MonacoHtmlEditor` (an HTML
+ * *source* editor) with a real Outlook-Home-tab-style formatting experience, built on TipTap/ProseMirror.
+ * Used by `ComposeWindow` (the floating overlay, not a dedicated page — see `ComposeContext.tsx`'s doc
+ * comment).
+ *
+ * `value` seeds the editor's initial content only — like `MonacoHtmlEditor`, this never re-syncs from a
+ * later `value` prop change; TipTap owns its own document once created. Live edits flow out as HTML (via
+ * `editor.getHTML()`) through `onChange`.
+ *
+ * `immediatelyRender: false` is required for this framework's SSR: the page embedding `ComposeWindow` is
+ * rendered server-side under plain Node before hydration (see `ReactRoute`), and TipTap's default
+ * (`immediatelyRender: true`) tries to mount its ProseMirror view during that very first render, which
+ * both can't work without a real DOM and produces a hydration mismatch. With it `false`, `useEditor`
+ * returns `null` until the editor actually mounts client-side after hydration — `ComposeToolbar`/
+ * `EditorContent` both already handle a `null` editor by rendering their disabled/empty state, so this
+ * needs no extra loading-placeholder logic here. Unlike `MonacoHtmlEditor`, no dynamic `import()` is
+ * needed to defer loading TipTap's modules off the SSR path — `immediatelyRender: false` alone is
+ * sufficient here since TipTap (unlike Monaco) never touches the DOM at module-evaluation time, only when
+ * an editor view actually mounts.
+ */
+export default function RichTextEditor({
+    value,
+    onChange,
+    height = "360px",
+    fill = false,
+    onUploadImage,
+    autoFocusStart = false,
+    onInitialized,
+    appendHtml,
+    onAppended,
+}: RichTextEditorProps) {
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onInitializedRef = useRef(onInitialized);
+    onInitializedRef.current = onInitialized;
+    const onAppendedRef = useRef(onAppended);
+    onAppendedRef.current = onAppended;
+    const appendedRef = useRef<string | undefined>(undefined);
+    // Transactions before `create` (the autofocus, and the normalizing one below) aren't edits.
+    const initializedRef = useRef(false);
+    // Held for this editor's lifetime: TipTap focuses a tick after creating the editor, and a re-render passing a
+    // different value in between would replace the option (via `setOptions`) before it's read.
+    const [autofocus] = useState<"start" | false>(autoFocusStart ? "start" : false);
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({ link: { openOnClick: false } }),
+            TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
+            TextAlign.configure({ types: ["heading", "paragraph"] }),
+            Highlight,
+            Image,
+            TableKit.configure({ table: { resizable: true } }),
+            Placeholder.configure({ placeholder: "Write your message…" }),
+        ],
+        content: value,
+        autofocus,
+        immediatelyRender: false,
+        editorProps: {
+            // Ctrl/Cmd+Enter is the compose window's Send. TipTap binds it to a hard break, and a key it handles never reaches the
+            // window's shortcut (which skips what a widget already took), so it inserted a line break and sent nothing. Returning true here
+            // stops ProseMirror handling it without preventing the event, which goes on to the shortcut. Shift+Enter is still the hard break.
+            handleDOMEvents: { keydown: (_view, event) => event.key === "Enter" && (event.ctrlKey || event.metaKey) },
+        },
+        onCreate: ({ editor: created }) => {
+            // An empty transaction runs the schema's append-transaction normalization now, before any edit.
+            created.view.dispatch(created.state.tr);
+            initializedRef.current = true;
+            onInitializedRef.current?.(created.getHTML());
+        },
+        onUpdate: ({ editor: updated }) => {
+            if (initializedRef.current) {
+                onChangeRef.current(updated.getHTML());
+            }
+        },
+    });
+
+    // Added once, at the end, whatever the reader has typed meanwhile (the caret stays where it is).
+    useEffect(() => {
+        if (!editor || appendHtml === undefined || appendedRef.current === appendHtml) {
+            return;
+        }
+        appendedRef.current = appendHtml;
+        editor.commands.insertContentAt(editor.state.doc.content.size, appendHtml);
+        onAppendedRef.current?.(editor.getHTML());
+    }, [editor, appendHtml]);
+
+    return (
+        <div className={["border border-border rounded-sm overflow-hidden", fill ? "h-full flex flex-col" : ""].filter(Boolean).join(" ")}>
+            <ComposeToolbar editor={editor} onUploadImage={onUploadImage} />
+            <EditorContent
+                editor={editor}
+                style={fill ? undefined : { height }}
+                className={[
+                    "overflow-y-auto px-3 py-2 text-sm [&_.tiptap]:outline-none [&_.tiptap]:h-full",
+                    fill ? "flex-1 min-h-0" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ")}
+            />
+        </div>
+    );
+}

package/apps/shared/components/mail/compose/composeFlushRegistry.ts

@@ -1,60 +1,60 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-
-/** Saves a compose window's unsaved edits (or waits for a save already on the wire), resolving to `false` when
- * something the window holds is still unsaved afterwards (any other value counts as saved). Never rejects. */
-export type ComposeFlush = () => Promise<unknown>;
-
-const flushers = new Set<ComposeFlush>();
-let signingOut = false;
-
-/**
- * Marks the app as signing out (explicitly, or forced by a sign-out in another tab), so compose windows stop
- * asking the browser to confirm leaving the page - the "Leave site?" prompt would otherwise let the user cancel
- * the sign-out's own navigation and stay on a page whose session is being ended. Call it before flushing drafts
- * and navigating. `clearSigningOut()` undoes it (a sign-out that didn't leave the page after all).
- */
-export function markSigningOut(): void {
-    signingOut = true;
-}
-
-/** Undoes `markSigningOut()`. */
-export function clearSigningOut(): void {
-    signingOut = false;
-}
-
-/** Whether `markSigningOut()` has been called (and not cleared). */
-export function isSigningOut(): boolean {
-    return signingOut;
-}
-
-/**
- * Registers an open compose window's draft flush, so leaving the app on purpose (Sign Out) can save the
- * last edits still waiting on the autosave debounce before the session ends. Returns the unregister
- * function. Module-level rather than React context: `AppShell` (the sign-out handler) renders the
- * `ComposeProvider` itself, so it can't read that provider's context.
- */
-export function registerComposeFlush(flush: ComposeFlush): () => void {
-    flushers.add(flush);
-    return () => {
-        flushers.delete(flush);
-    };
-}
-
-/**
- * Runs every registered flush and waits for all of them, but no longer than `timeoutMs`. Resolves to `true`
- * only when every window reported its content saved in time (a window whose save failed also shows the user
- * why, with Discard / Keep editing). Never rejects.
- */
-export async function flushComposeDrafts(timeoutMs: number): Promise<boolean> {
-    let timer: ReturnType<typeof setTimeout> | undefined;
-    const timeout = new Promise<boolean>((resolve) => {
-        timer = setTimeout(() => resolve(false), timeoutMs);
-    });
-    const all = Promise.all([...flushers].map((flush) => flush().catch(() => false))).then((results) => results.every((result) => result !== false));
-    const saved = await Promise.race([all, timeout]);
-    clearTimeout(timer);
-    return saved;
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** Saves a compose window's unsaved edits (or waits for a save already on the wire), resolving to `false` when
+ * something the window holds is still unsaved afterwards (any other value counts as saved). Never rejects. */
+export type ComposeFlush = () => Promise<unknown>;
+
+const flushers = new Set<ComposeFlush>();
+let signingOut = false;
+
+/**
+ * Marks the app as signing out (explicitly, or forced by a sign-out in another tab), so compose windows stop
+ * asking the browser to confirm leaving the page - the "Leave site?" prompt would otherwise let the user cancel
+ * the sign-out's own navigation and stay on a page whose session is being ended. Call it before flushing drafts
+ * and navigating. `clearSigningOut()` undoes it (a sign-out that didn't leave the page after all).
+ */
+export function markSigningOut(): void {
+    signingOut = true;
+}
+
+/** Undoes `markSigningOut()`. */
+export function clearSigningOut(): void {
+    signingOut = false;
+}
+
+/** Whether `markSigningOut()` has been called (and not cleared). */
+export function isSigningOut(): boolean {
+    return signingOut;
+}
+
+/**
+ * Registers an open compose window's draft flush, so leaving the app on purpose (Sign Out) can save the
+ * last edits still waiting on the autosave debounce before the session ends. Returns the unregister
+ * function. Module-level rather than React context: `AppShell` (the sign-out handler) renders the
+ * `ComposeProvider` itself, so it can't read that provider's context.
+ */
+export function registerComposeFlush(flush: ComposeFlush): () => void {
+    flushers.add(flush);
+    return () => {
+        flushers.delete(flush);
+    };
+}
+
+/**
+ * Runs every registered flush and waits for all of them, but no longer than `timeoutMs`. Resolves to `true`
+ * only when every window reported its content saved in time (a window whose save failed also shows the user
+ * why, with Discard / Keep editing). Never rejects.
+ */
+export async function flushComposeDrafts(timeoutMs: number): Promise<boolean> {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const timeout = new Promise<boolean>((resolve) => {
+        timer = setTimeout(() => resolve(false), timeoutMs);
+    });
+    const all = Promise.all([...flushers].map((flush) => flush().catch(() => false))).then((results) => results.every((result) => result !== false));
+    const saved = await Promise.race([all, timeout]);
+    clearTimeout(timer);
+    return saved;
+}