@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -0,0 +1,90 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useRef } from "react";
+/** The least distance that commits a swipe, and how far the finger must move before its direction is decided. */
+export const MIN_SWIPE_DISTANCE = 80;
+export const SWIPE_SLOP = 10;
+/** A quicker flick than this (px per ms) commits after `FLING_MIN_DISTANCE` alone. */
+export const FLING_VELOCITY = 0.5;
+export const FLING_MIN_DISTANCE = 40;
+/**
+ * A horizontal swipe by one finger, for the touch screens the app's phone layout is for: mouse and pen are left alone.
+ *
+ * Spread the handlers on the element and give it `touch-action: pan-y` (`style`), so the browser keeps scrolling vertically and leaves
+ * the horizontal movement to this. A gesture that starts out mostly vertical is a scroll and is never a swipe, however far it later
+ * strays sideways; one that starts out horizontal is a swipe, and stays one.
+ */
+export function useSwipe({ enabled = true, directions = ["left", "right"], distance, onDrag, onSwipe }) {
+    const start = useRef(null);
+    const offset = useRef(0);
+    const latest = useRef({ directions, distance, onDrag, onSwipe });
+    latest.current = { directions, distance, onDrag, onSwipe };
+    function clamp(dx) {
+        const allowed = latest.current.directions;
+        return (dx < 0 && !allowed.includes("left")) || (dx > 0 && !allowed.includes("right")) ? 0 : dx;
+    }
+    function onTouchStart(event) {
+        if (!enabled || event.touches.length !== 1) {
+            start.current = null;
+            return;
+        }
+        const touch = event.touches[0];
+        start.current = { x: touch.clientX, y: touch.clientY, time: Date.now(), width: event.currentTarget.clientWidth };
+        offset.current = 0;
+    }
+    function onTouchMove(event) {
+        const gesture = start.current;
+        if (!gesture || gesture.mode === "scroll") {
+            return;
+        }
+        if (event.touches.length !== 1) {
+            cancel();
+            return;
+        }
+        const dx = event.touches[0].clientX - gesture.x;
+        const dy = event.touches[0].clientY - gesture.y;
+        if (!gesture.mode) {
+            if (Math.max(Math.abs(dx), Math.abs(dy)) < SWIPE_SLOP) {
+                return;
+            }
+            gesture.mode = Math.abs(dx) > Math.abs(dy) * 1.5 ? "swipe" : "scroll";
+            if (gesture.mode === "scroll") {
+                return;
+            }
+        }
+        offset.current = clamp(dx);
+        latest.current.onDrag?.(offset.current);
+    }
+    function onTouchEnd() {
+        const gesture = start.current;
+        start.current = null;
+        if (!gesture || gesture.mode !== "swipe") {
+            return;
+        }
+        const dx = offset.current;
+        offset.current = 0;
+        const travelled = Math.abs(dx);
+        const velocity = travelled / Math.max(1, Date.now() - gesture.time);
+        const needed = latest.current.distance ?? Math.max(MIN_SWIPE_DISTANCE, gesture.width / 3);
+        const committed = dx !== 0 && (travelled >= needed || (velocity >= FLING_VELOCITY && travelled >= FLING_MIN_DISTANCE));
+        if (committed) {
+            latest.current.onSwipe(dx < 0 ? "left" : "right");
+        }
+        latest.current.onDrag?.(0);
+    }
+    function cancel() {
+        const moved = start.current?.mode === "swipe";
+        start.current = null;
+        offset.current = 0;
+        if (moved) {
+            latest.current.onDrag?.(0);
+        }
+    }
+    return {
+        handlers: enabled ? { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: cancel } : {},
+        /** Leaves vertical panning to the browser. */
+        style: enabled ? { touchAction: "pan-y" } : undefined,
+    };
+}

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

@@ -0,0 +1,40 @@
+import { type CSSProperties } from "react";
+import { SwipeDirection } from "./useSwipe.js";
+/** How long the current contents take to leave, and the new ones to arrive - or the current ones to snap back. */
+export declare const SLIDE_MS = 200;
+export interface UseSwipeSlideOptions {
+    /** Nothing is tracked while this is `false`. */
+    enabled: boolean;
+    /** Changes what is shown to the period the swipe went to - called once the old contents have left, while the new ones wait off-screen. */
+    onShift: (direction: SwipeDirection) => void;
+}
+/**
+ * A swipe between pages of content that visibly moves them, the way a phone calendar does: the contents follow the finger, and once
+ * the swipe commits they carry on out of view in the direction it went while the next ones - `onShift()` changes what is shown at
+ * that moment - slide in from the other side. A swipe that stops short slides back. The animation is timed here (`SLIDE_MS`) rather than
+ * left to `transitionend`, so it can't stall if the browser skips a transition.
+ *
+ * Put `handlers` and `style` on a clipping element (`overflow-hidden`, so the contents don't widen the page while they are off to
+ * the side), the contents inside it in an element of their own with `contentStyle`, and `ref` on the clipping element.
+ */
+export declare function useSwipeSlide({ enabled, onShift }: UseSwipeSlideOptions): {
+    handlers: {
+        onTouchStart: (event: import("react").TouchEvent<HTMLElement>) => void;
+        onTouchMove: (event: import("react").TouchEvent<HTMLElement>) => void;
+        onTouchEnd: () => void;
+        onTouchCancel: () => void;
+    } | {
+        onTouchStart?: undefined;
+        onTouchMove?: undefined;
+        onTouchEnd?: undefined;
+        onTouchCancel?: undefined;
+    };
+    /** For the clipping element: `touch-action: pan-y`, and no overflow. */
+    style: {
+        readonly touchAction: "pan-y";
+    } | undefined;
+    contentStyle: CSSProperties;
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    /** For a test or a style hook: `"idle"`, `"dragging"` or `"sliding"`. */
+    phase: string;
+};

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

@@ -0,0 +1,95 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { useSwipe } from "./useSwipe.js";
+/** How long the current contents take to leave, and the new ones to arrive - or the current ones to snap back. */
+export const SLIDE_MS = 200;
+/** The pause between the new contents being put off-screen and them starting to slide in, long enough for the browser to draw them there. */
+const SETTLE_MS = 30;
+/** How far a slide goes when the element's width can't be measured. */
+const FALLBACK_WIDTH_PX = 320;
+/** Whether the user asked their device for less motion, in which case the change is made at once instead of slid. */
+function prefersReducedMotion() {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+ * A swipe between pages of content that visibly moves them, the way a phone calendar does: the contents follow the finger, and once
+ * the swipe commits they carry on out of view in the direction it went while the next ones - `onShift()` changes what is shown at
+ * that moment - slide in from the other side. A swipe that stops short slides back. The animation is timed here (`SLIDE_MS`) rather than
+ * left to `transitionend`, so it can't stall if the browser skips a transition.
+ *
+ * Put `handlers` and `style` on a clipping element (`overflow-hidden`, so the contents don't widen the page while they are off to
+ * the side), the contents inside it in an element of their own with `contentStyle`, and `ref` on the clipping element.
+ */
+export function useSwipeSlide({ enabled, onShift }) {
+    const [offset, setOffset] = useState(0);
+    /** Whether a change of `offset` is animated: not while the finger is moving it, yes for everything else. */
+    const [animated, setAnimated] = useState(false);
+    /** A committed slide is under way: further swipes are ignored until it ends. */
+    const [sliding, setSliding] = useState(false);
+    const slidingRef = useRef(false);
+    const ref = useRef(null);
+    const timers = useRef([]);
+    const latest = useRef({ onShift });
+    latest.current = { onShift };
+    useEffect(() => () => {
+        for (const timer of timers.current) {
+            window.clearTimeout(timer);
+        }
+    }, []);
+    function later(work, ms) {
+        timers.current.push(window.setTimeout(work, ms));
+    }
+    const swipe = useSwipe({
+        enabled: enabled && !sliding,
+        onDrag: (dx) => {
+            // `useSwipe()` reports the finger lifting (0) right after a swipe commits: that must not undo the slide out.
+            if (slidingRef.current) {
+                return;
+            }
+            setAnimated(dx === 0);
+            setOffset(dx);
+        },
+        onSwipe: (direction) => {
+            if (prefersReducedMotion()) {
+                latest.current.onShift(direction);
+                return;
+            }
+            const width = ref.current?.clientWidth || FALLBACK_WIDTH_PX;
+            // The finger moved `direction`, so the contents go that way and the next ones come from the opposite side.
+            const out = direction === "left" ? -width : width;
+            slidingRef.current = true;
+            setSliding(true);
+            setAnimated(true);
+            setOffset(out);
+            later(() => {
+                latest.current.onShift(direction);
+                setAnimated(false);
+                setOffset(-out);
+                later(() => {
+                    setAnimated(true);
+                    setOffset(0);
+                    later(() => {
+                        slidingRef.current = false;
+                        setSliding(false);
+                    }, SLIDE_MS);
+                }, SETTLE_MS);
+            }, SLIDE_MS);
+        },
+    });
+    const contentStyle = {
+        transform: offset === 0 ? undefined : `translate3d(${offset}px, 0, 0)`,
+        transition: animated ? `transform ${SLIDE_MS}ms ease-out` : "none",
+    };
+    return {
+        handlers: swipe.handlers,
+        /** For the clipping element: `touch-action: pan-y`, and no overflow. */
+        style: swipe.style,
+        contentStyle,
+        ref,
+        /** For a test or a style hook: `"idle"`, `"dragging"` or `"sliding"`. */
+        phase: sliding ? "sliding" : offset !== 0 && !animated ? "dragging" : "idle",
+    };
+}

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

@@ -0,0 +1,32 @@
+import { type RefObject } from "react";
+/** Wheel movement, in pixels, that steps to the next or previous page when nothing inside scrolls: about one notch of a mouse wheel. */
+export declare const WHEEL_STEP_PX = 100;
+/** Wheel movement, in pixels, pushed against the top or bottom of what scrolls inside before it steps onto the next or previous page. */
+export declare const WHEEL_EDGE_PX = 80;
+/** Movement that isn't followed by more within this long starts from nothing again, so an old nudge doesn't add to a new one. */
+export declare const WHEEL_IDLE_MS = 250;
+/** After a step that starts at an edge, wheel events for this long are left to settle the new page, so one hard push isn't two steps. */
+export declare const WHEEL_SETTLE_MS = 100;
+/** Where the new page's scroll position goes: `"top"` when stepping forward past the bottom, `"bottom"` when stepping back past the top. */
+export type WheelEdge = "top" | "bottom";
+export interface UseWheelPagingOptions {
+    /** Nothing is handled while this is `false` (a phone, an event being dragged, a dialog open). */
+    enabled: boolean;
+    /** The element inside that scrolls vertically, if there is one now: the wheel scrolls it as usual and only steps past its ends.
+     * `null` when nothing inside scrolls (a month grid), and then every wheel movement counts towards a step. */
+    getScroller: () => HTMLElement | null;
+    /** Called for each step: `1` towards the next page (the wheel turned down), `-1` towards the previous. `edge` says where in the new
+     * page's scroller to start, when there is one. */
+    onStep: (direction: 1 | -1, edge: WheelEdge | null) => void;
+}
+/**
+ * Turns the mouse wheel over `ref`'s element into stepping through pages - the months, weeks or days of a calendar - without a limit:
+ * keep turning and it keeps stepping, and nothing waits for an animation to end.
+ *
+ * Where nothing inside scrolls, every `WHEEL_STEP_PX` of movement is a step (a bigger turn is several). Where something does, the
+ * wheel scrolls it as it always did and only what is pushed against its top or bottom counts (`WHEEL_EDGE_PX`), so scrolling on
+ * from the last hour of a day carries into the first hours of the next, and back the other way. The event is only cancelled when it
+ * counts towards a step, so the page and whatever scrolls inside keep their own wheel behaviour everywhere else. Zooming
+ * (Ctrl+wheel) and sideways movement are left alone.
+ */
+export declare function useWheelPaging(ref: RefObject<HTMLElement | null>, { enabled, getScroller, onStep }: UseWheelPagingOptions): void;

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

@@ -0,0 +1,85 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef } from "react";
+/** Wheel movement, in pixels, that steps to the next or previous page when nothing inside scrolls: about one notch of a mouse wheel. */
+export const WHEEL_STEP_PX = 100;
+/** Wheel movement, in pixels, pushed against the top or bottom of what scrolls inside before it steps onto the next or previous page. */
+export const WHEEL_EDGE_PX = 80;
+/** Movement that isn't followed by more within this long starts from nothing again, so an old nudge doesn't add to a new one. */
+export const WHEEL_IDLE_MS = 250;
+/** After a step that starts at an edge, wheel events for this long are left to settle the new page, so one hard push isn't two steps. */
+export const WHEEL_SETTLE_MS = 100;
+/** A wheel event's vertical movement in pixels, whichever unit the browser reports it in. */
+function pixelsOf(event, page) {
+    return event.deltaMode === 1 ? event.deltaY * 16 : event.deltaMode === 2 ? event.deltaY * page : event.deltaY;
+}
+/**
+ * Turns the mouse wheel over `ref`'s element into stepping through pages - the months, weeks or days of a calendar - without a limit:
+ * keep turning and it keeps stepping, and nothing waits for an animation to end.
+ *
+ * Where nothing inside scrolls, every `WHEEL_STEP_PX` of movement is a step (a bigger turn is several). Where something does, the
+ * wheel scrolls it as it always did and only what is pushed against its top or bottom counts (`WHEEL_EDGE_PX`), so scrolling on
+ * from the last hour of a day carries into the first hours of the next, and back the other way. The event is only cancelled when it
+ * counts towards a step, so the page and whatever scrolls inside keep their own wheel behaviour everywhere else. Zooming
+ * (Ctrl+wheel) and sideways movement are left alone.
+ */
+export function useWheelPaging(ref, { enabled, getScroller, onStep }) {
+    const latest = useRef({ getScroller, onStep });
+    latest.current = { getScroller, onStep };
+    /** Movement collected towards the next step, and when it last grew. */
+    const collected = useRef({ pixels: 0, at: 0 });
+    const settledUntil = useRef(0);
+    useEffect(() => {
+        const element = ref.current;
+        if (!enabled || !element) {
+            return;
+        }
+        function onWheel(event) {
+            if (event.ctrlKey || event.defaultPrevented || Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+                return;
+            }
+            const pixels = pixelsOf(event, element.clientHeight || 600);
+            if (pixels === 0) {
+                return;
+            }
+            const scroller = latest.current.getScroller();
+            if (scroller) {
+                const room = scroller.scrollHeight - scroller.clientHeight;
+                const canScroll = pixels > 0 ? scroller.scrollTop < room - 1 : scroller.scrollTop > 0;
+                if (room > 0 && canScroll) {
+                    // Still something to scroll that way: the browser does it, and what was pushed against an end is forgotten.
+                    collected.current = { pixels: 0, at: 0 };
+                    return;
+                }
+            }
+            event.preventDefault();
+            const now = Date.now();
+            if (scroller && now < settledUntil.current) {
+                return;
+            }
+            const state = collected.current;
+            if (now - state.at > WHEEL_IDLE_MS || Math.sign(state.pixels) !== Math.sign(pixels)) {
+                state.pixels = 0;
+            }
+            state.at = now;
+            state.pixels += pixels;
+            const needed = scroller ? WHEEL_EDGE_PX : WHEEL_STEP_PX;
+            while (Math.abs(state.pixels) >= needed) {
+                const direction = state.pixels > 0 ? 1 : -1;
+                state.pixels -= direction * needed;
+                latest.current.onStep(direction, scroller ? (direction > 0 ? "top" : "bottom") : null);
+                if (scroller) {
+                    // One push against an end is one step; the next turn of the wheel scrolls the page it arrived at.
+                    state.pixels = 0;
+                    settledUntil.current = now + WHEEL_SETTLE_MS;
+                    break;
+                }
+            }
+        }
+        // Not passive: the wheel's default (scrolling the page) has to be cancellable for the steps that replace it.
+        element.addEventListener("wheel", onWheel, { passive: false });
+        return () => element.removeEventListener("wheel", onWheel);
+    }, [enabled, ref]);
+}

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

@@ -46,6 +46,16 @@ export declare function badgeLabel(badge: FolderBadge): string;
 export declare function inboxUnreadTotal(mailboxFolders: {
     folders: Folder[];
 }[], counts: Record<string, FolderCount>): number;
+/**
+ * The folder types whose unread count is left out of a collapsed sidebar section's heading badge: Drafts and Outbox (their badges
+ * count messages held, not unread mail), and Sent Items, Deleted Items and Junk Email (an unread count there is noise, not mail
+ * to notice). It matches the folders `badgeFor()` shows no unread badge for; every other type - Inbox, Archive, the user's own
+ * folders - counts, so mail that a rule filed out of the Inbox is not overlooked in a hidden section. Change it here to change that.
+ */
+export declare const UNREAD_BADGE_EXCLUDED_FOLDER_TYPES: readonly FolderType[];
+/** The unread messages in the `folders` that carry an unread count (all but `UNREAD_BADGE_EXCLUDED_FOLDER_TYPES`) - what a collapsed
+ * sidebar section shows on its heading, so new mail in a hidden section is still noticed. */
+export declare function unreadBadgeTotal(folders: readonly Folder[], counts: Record<string, FolderCount>): number;
 /** How long after the last change of this page's own has finished a server-published count is trusted again: one published
  * about an earlier state of the folder could otherwise arrive late and put back what the change just took away. */
 export declare const COUNT_QUIET_MS = 1500;

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

@@ -51,6 +51,18 @@ export function badgeLabel(badge) {
 export function inboxUnreadTotal(mailboxFolders, counts) {
     return mailboxFolders.reduce((total, entry) => total + entry.folders.filter((folder) => folder.type === "inbox").reduce((sum, folder) => sum + countOfFolder(folder, counts).unread, 0), 0);
 }
+/**
+ * The folder types whose unread count is left out of a collapsed sidebar section's heading badge: Drafts and Outbox (their badges
+ * count messages held, not unread mail), and Sent Items, Deleted Items and Junk Email (an unread count there is noise, not mail
+ * to notice). It matches the folders `badgeFor()` shows no unread badge for; every other type - Inbox, Archive, the user's own
+ * folders - counts, so mail that a rule filed out of the Inbox is not overlooked in a hidden section. Change it here to change that.
+ */
+export const UNREAD_BADGE_EXCLUDED_FOLDER_TYPES = ["drafts", "outbox", "sent_items", "deleted_items", "junk"];
+/** The unread messages in the `folders` that carry an unread count (all but `UNREAD_BADGE_EXCLUDED_FOLDER_TYPES`) - what a collapsed
+ * sidebar section shows on its heading, so new mail in a hidden section is still noticed. */
+export function unreadBadgeTotal(folders, counts) {
+    return folders.reduce((total, folder) => (UNREAD_BADGE_EXCLUDED_FOLDER_TYPES.includes(folder.type) ? total : total + countOfFolder(folder, counts).unread), 0);
+}
 /** How long after the last change of this page's own has finished a server-published count is trusted again: one published
  * about an earlier state of the folder could otherwise arrive late and put back what the change just took away. */
 export const COUNT_QUIET_MS = 1500;

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

@@ -1,23 +1,18 @@
 import type { Folder, Mailbox, Message } from "@rapidmx/react-shared/mail/mailApi.js";
 /**
- * What decides whether a new message is announced, what the announcement says, and the two settings behind it (both per
- * browser, in `localStorage`): whether new-mail pop-ups are on at all, and what the user told the "turn on desktop
- * notifications" offer.
+ * What decides whether a new message is announced, what the announcement says, and the setting behind it (per browser, in
+ * `localStorage`): what the user told the "turn on desktop notifications" offer. Whether pop-ups are on at all is the
+ * notifications switch (`notifications/preferences.ts`).
  *
  * The announcement is built only from what the push event carries - the whole `Message`, including `bodyPreview` - and only
  * ever as text: React escapes it on screen and the Notifications API takes plain strings, so nothing here is HTML.
  */
-/** `localStorage` key of the pop-ups switch. Absent means on; `"off"` means the user turned them off. */
-export declare const NEW_MAIL_POPUPS_KEY = "rapidmx-new-mail-popups";
 /** `localStorage` key of the answer to the desktop-notifications offer: `"later"` (not now) or `"asked"` (they were asked). */
 export declare const DESKTOP_OFFER_KEY = "rapidmx-desktop-notifications-offer";
 /** How much of the body an announcement quotes. */
 export declare const PREVIEW_MAX_LENGTH = 140;
 /** A message received longer ago than this is not "new": mail imported or migrated in bulk arrives as `create` events too. */
 export declare const MAX_NEW_AGE_MS: number;
-/** Whether new-mail pop-ups are on (the default). */
-export declare function getNewMailPopupsEnabled(): boolean;
-export declare function setNewMailPopupsEnabled(enabled: boolean): void;
 /** Whether the "turn on desktop notifications" offer has been put away with "Not now" (or answered). */
 export declare function getDesktopOfferDismissed(): boolean;
 export declare function setDesktopOfferDismissed(dismissed: boolean): void;

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

@@ -1,14 +1,12 @@
 import { formatMailAddress, splitMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
 /**
- * What decides whether a new message is announced, what the announcement says, and the two settings behind it (both per
- * browser, in `localStorage`): whether new-mail pop-ups are on at all, and what the user told the "turn on desktop
- * notifications" offer.
+ * What decides whether a new message is announced, what the announcement says, and the setting behind it (per browser, in
+ * `localStorage`): what the user told the "turn on desktop notifications" offer. Whether pop-ups are on at all is the
+ * notifications switch (`notifications/preferences.ts`).
  *
  * The announcement is built only from what the push event carries - the whole `Message`, including `bodyPreview` - and only
  * ever as text: React escapes it on screen and the Notifications API takes plain strings, so nothing here is HTML.
  */
-/** `localStorage` key of the pop-ups switch. Absent means on; `"off"` means the user turned them off. */
-export const NEW_MAIL_POPUPS_KEY = "rapidmx-new-mail-popups";
 /** `localStorage` key of the answer to the desktop-notifications offer: `"later"` (not now) or `"asked"` (they were asked). */
 export const DESKTOP_OFFER_KEY = "rapidmx-desktop-notifications-offer";
 /** How much of the body an announcement quotes. */
@@ -38,13 +36,6 @@ function writeStorage(key, value) {
         // Storage blocked or full: the choice lasts until the page is reloaded, no longer.
     }
 }
-/** Whether new-mail pop-ups are on (the default). */
-export function getNewMailPopupsEnabled() {
-    return readStorage(NEW_MAIL_POPUPS_KEY) !== "off";
-}
-export function setNewMailPopupsEnabled(enabled) {
-    writeStorage(NEW_MAIL_POPUPS_KEY, enabled ? null : "off");
-}
 /** Whether the "turn on desktop notifications" offer has been put away with "Not now" (or answered). */
 export function getDesktopOfferDismissed() {
     return readStorage(DESKTOP_OFFER_KEY) !== null;

package/dist/apps/shared/mail/outbox/outgoingReplies.d.ts

@@ -0,0 +1,80 @@
+import type { Message } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MailAddressLike } from "@rapidmx/react-shared/mail/mailAddress.js";
+import type { NotificationAction } from "../../notifications/store.js";
+import type { SendRequest } from "./sendJob.js";
+/**
+ * A reply (or forward) this tab has sent, as the open conversation shows it until the server's own copy is in the thread.
+ *
+ * This is a *view* of the background send that is already there, not a second state machine: `startSend()` (`sendJob.ts`) opens an entry, and the
+ * places that already report how a send went close it - the client-side failure (`notifyFailure()`), the server's own outcome (`handleSendEvent()`
+ * in `sendOutcomes.ts`: `send-succeeded`, `send-failed`) and a synchronous send. The Outbox indicator, the pop-ups and this entry therefore agree,
+ * because they are all told by the same code at the same moment.
+ *
+ * Why the message has to be shown from here for a while: a message the server accepted is in Outbox, which has no `conversationId` yet - it is
+ * resolved when the message is relayed and filed in Sent Items (`ScheduledSendJob`), keeping the same `uid`. Until then no fetch of the
+ * conversation can return it, so the thread pane draws it from what was composed.
+ *
+ * `sending` covers everything up to the server's answer (assembling, the request, the queue in Outbox); `failed` is a send that did not go and is
+ * the sender's to resolve (`actions` are the very ones the pop-up offers: Retry, Open draft ...); `sent` is a message the server has relayed and
+ * that is waiting for the thread to be read again to find its Sent Items copy.
+ */
+export type OutgoingState = "sending" | "failed" | "sent";
+export interface OutgoingReply {
+    /** The draft's uid - which is also the uid of the message in Outbox and of its Sent Items copy, and so what the real message replaces this by. */
+    uid: string;
+    mailboxUid: string;
+    /** What the message replies to (`Message.inReplyTo` / `references`): how the pane knows which conversation it belongs to. */
+    inReplyTo?: string;
+    references: string[];
+    sender: MailAddressLike;
+    to: MailAddressLike[];
+    cc: MailAddressLike[];
+    bcc: MailAddressLike[];
+    subject: string;
+    /** The composed body, as the editor wrote it. */
+    html: string;
+    startedAt: number;
+    state: OutgoingState;
+    /** `failed`: why. */
+    failure?: string;
+    /** `failed`: what the sender can do about it. */
+    actions: NotificationAction[];
+    /** `sent`: how many times the thread was read without finding the message - see `settleOutgoing()`. */
+    misses: number;
+}
+/** A sent message that a read of its conversation has not found this many times is not part of that conversation (the server filed it elsewhere). */
+export declare const MAX_SETTLE_MISSES = 2;
+/**
+ * Starts showing `request`'s message in the conversation it replies to - or does nothing for a message that replies to nothing (a new message
+ * starts a conversation of its own, it is never part of an open one) and for a send-later message (it is not sent yet). Called again for the same
+ * message - a Retry - it starts over as `sending`.
+ *
+ * The thread is `request.threading` (the compose session's), else what the draft itself records: a draft opened again from "Open draft" is a
+ * session with no threading of its own, but the server kept it on the message.
+ */
+export declare function trackOutgoing(request: SendRequest): void;
+/** The send did not go: `failure` is why, `actions` what can be done (Retry, Open draft ...). */
+export declare function failOutgoing(uid: string, failure: string, actions: NotificationAction[]): void;
+/** A failed send is being tried again. */
+export declare function markOutgoingSending(uid: string): void;
+/** The server has relayed the message: its Sent Items copy is what the conversation shows next. */
+export declare function markOutgoingSent(uid: string): void;
+/** Stops showing a message - it went back to Drafts to be edited. */
+export declare function forgetOutgoing(uid: string): void;
+/** Whether `reply` continues the conversation `messages` are: it answers one of them, or its `References` chain runs through one. */
+export declare function belongsToThread(reply: OutgoingReply, messages: readonly Pick<Message, "messageId">[]): boolean;
+/** The uids of the messages sent from here whose real copy is in `messages`, the thread as it was just read. */
+export declare function adoptedOutgoing(mailboxUid: string, messages: readonly Message[]): string[];
+/**
+ * Called with a mailbox's conversation as it was just read, `messages` being the whole thread: forgets the messages whose real copy is now in it
+ * (`adoptedOutgoing()`), and gives up on a *sent* message that belongs to this thread but that the read did not find `MAX_SETTLE_MISSES` times in a
+ * row - the server filed it in a conversation of its own, and it is not to be shown here. A message of another conversation is left alone.
+ *
+ * A pane draws the messages it has read *before* it calls this, so that there is never a moment with neither the pending card nor the real one.
+ */
+export declare function settleOutgoing(mailboxUid: string, messages: readonly Message[]): void;
+export declare function getOutgoingReplies(): readonly OutgoingReply[];
+/** The messages this tab has sent that a conversation may still need to show, oldest first. */
+export declare function useOutgoingReplies(): readonly OutgoingReply[];
+/** Forgets everything - for a test. */
+export declare function resetOutgoingReplies(): void;