@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -4,11 +4,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
-import { HiOutlineBars3 } from "react-icons/hi2";
+import { HiOutlineBars3, HiOutlinePencilSquare } from "react-icons/hi2";
 import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
+import FloatingActionButton from "../../layout/FloatingActionButton.js";
 import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
@@ -17,7 +18,11 @@ import LocalIndexLifecycle from "../../../search/LocalIndexLifecycle.js";
 import { NO_LIVE_UPDATES } from "../../../mail/useMailLiveUpdates.js";
 import { MAILBOX_LIST_LIMIT, MailConnectionContext, useMailConnection } from "../../../mail/useMailConnection.js";
 import { folderRows } from "../../../mail/folderTree.js";
-import { badgeFor, badgeLabel, countOfFolder, inboxUnreadTotal, } from "../../../mail/folderCounts.js";
+import { primaryMailboxUid } from "../../../mail/primaryMailbox.js";
+import { badgeFor, countOfFolder, inboxUnreadTotal, unreadBadgeTotal, } from "../../../mail/folderCounts.js";
+import { ALL_MAILBOXES_SECTION, useSidebarSections } from "../../../mail/useCollapsedSections.js";
+import FolderBadgeChip from "./FolderBadgeChip.js";
+import SidebarSection from "./SidebarSection.js";
 import { useUnreadTitle } from "../../../mail/useUnreadTitle.js";
 import { pendingCountFor, usePendingSends } from "../../../mail/outbox/pendingSends.js";
 import OutboxBadge from "../OutboxBadge.js";
@@ -42,6 +47,7 @@ const MailShellContext = createContext({
     noteFolderUids: () => undefined,
     live: NO_LIVE_UPDATES,
     trackMessageChange: () => NO_TRACKER,
+    mobileSearchSlot: null,
 });
 /** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
 export function useMailShell() {
@@ -65,13 +71,6 @@ function aggregateBadge(mailboxFolders, type, counts) {
     }, { unread: 0, total: 0 });
     return badgeFor(type, sum);
 }
-/** A folder's badge: an accent pill with the unread count, or - for the folders that show how many they hold - plain muted text. */
-function FolderBadgeChip({ badge }) {
-    return (_jsxs("span", { className: [
-            "text-xs rounded-pill py-0.5 px-1.5",
-            badge.kind === "unread" ? "font-bold bg-primary/15 text-primary-dark" : "font-medium text-text-muted",
-        ].join(" "), children: [_jsx("span", { "aria-hidden": "true", children: badge.value }), _jsxs("span", { className: "sr-only", children: [" ", badgeLabel(badge)] })] }));
-}
 export { MAILBOX_LIST_LIMIT };
 /**
  * A separate component (not inlined into `MailShell`'s own render) so `useCompose()` resolves against
@@ -91,6 +90,14 @@ function ComposeButton({ mailboxUid }) {
     const env = useKeyEnvironment();
     return (_jsx("button", { type: "button", title: withHint("Compose", SHORTCUTS.mail.create, env), "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.mail.create, env), onClick: () => openCompose({ mailboxUid }), onPointerEnter: prefetchComposeWindow, onFocus: prefetchComposeWindow, className: "block text-center w-full py-2.5 px-4 rounded-sm font-semibold text-sm bg-primary text-white hover:bg-primary-dark", children: "Compose" }));
 }
+/**
+ * A small round Compose button floating at the bottom right on a phone, just above the bottom tab bar (which is `h-14`, fixed), for the
+ * layout where the sidebar's Compose button is behind the folders drawer. Opens the same window, for the same mailbox, as that button.
+ */
+function MobileComposeButton({ mailboxUid }) {
+    const { openCompose } = useCompose();
+    return (_jsx(FloatingActionButton, { label: "New message", icon: HiOutlinePencilSquare, onClick: () => openCompose({ mailboxUid }), onPointerEnter: prefetchComposeWindow, onFocus: prefetchComposeWindow }));
+}
 /**
  * Mail's keyboard shortcuts that don't belong to a list or a message: "New message". A component of its own for the reason `ComposeButton`
  * is - `useCompose()` only resolves below `ComposeProvider`, i.e. inside the `AppShell` this shell renders - and mounted once, whatever number
@@ -116,6 +123,11 @@ function MailShortcuts({ mailboxUid }) {
  * behavior change from before this, and a multi-mailbox user sees every mailbox's folders (and the new
  * aggregate section) simultaneously, matching the shared-mailbox feature's own "display as a separate set
  * of folders" requirement.
+ *
+ * An address that names nothing opens "All Mailboxes > Inbox" when there is more than one mailbox (that is when the section exists), and
+ * the one mailbox's own Inbox otherwise; a `?mailboxUid=`, `?folderUid=` or `?aggregate=` always wins. Nothing is selected until the address
+ * has been read. What needs a single mailbox while an all-mailboxes view is open (Compose, the new-message shortcut, key unlocking) uses the
+ * primary mailbox.
  */
 export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }) {
     // The mailboxes, their folders and the live connection come from the persistent app frame when there is one (`AppChrome` owns them, so
@@ -131,6 +143,8 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
     const [requestedFolderUid, setRequestedFolderUid] = useState(null);
     const [requestedAggregateType, setRequestedAggregateType] = useState(null);
     const [drawerOpen, setDrawerOpen] = useState(false);
+    // Whether the URL has been read yet (see below): until then the selection is not known, and the sidebar sections have nothing to open for.
+    const [selectionRead, setSelectionRead] = useState(false);
     // The selection lives in the URL, and the router (`AppRouter`) changes the URL without a page load when a folder link is
     // clicked - so it is read from the router's location, which updates, rather than once from `window.location`. Still read
     // in an effect, never during the first render, so the server render and the hydrating render agree.
@@ -140,36 +154,51 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
         setRequestedMailboxUid(params.get("mailboxUid"));
         setRequestedFolderUid(params.get("folderUid"));
         setRequestedAggregateType(params.get("aggregate"));
+        setSelectionRead(true);
     }, [search]);
     // Choosing a folder (or mailbox) changes the URL without a page load now, so the drawer that held the choice - which used to go
     // with the page - is closed here.
     useEffect(() => {
         setDrawerOpen(false);
     }, [search]);
-    const aggregateFolderType = isAggregateFolderType(requestedAggregateType)
-        ? requestedAggregateType
-        : undefined;
-    const mailboxUid = aggregateFolderType
-        ? undefined
-        : (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-            mailboxes[0]?.uid;
+    // What the address asks for. Nothing is selected until it has been read (the first render, before the effect above): choosing a
+    // default then would list a folder - the most expensive being every mailbox's - only to throw it away for the one the address names.
+    const requestedAggregate = selectionRead && isAggregateFolderType(requestedAggregateType) ? requestedAggregateType : undefined;
+    const requestedMailbox = selectionRead && requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined;
+    // The mailbox the caller has not chosen: their own, never a shared one that merely sorts first. It is what compose, the new-message
+    // shortcut and everything else that needs a single mailbox use while an all-mailboxes view (which has none) is open.
+    const defaultMailboxUid = primaryMailboxUid(mailboxes, userUid);
+    // With several mailboxes the address that names nothing opens "All Mailboxes > Inbox", the merged Inbox; with one there is no such
+    // section, so it opens that mailbox's own Inbox. A mailbox, a folder or an all-mailboxes view in the address wins over either.
+    const aggregateByDefault = selectionRead && !requestedAggregate && !requestedMailbox && requestedFolderUid === null && mailboxes.length > 1;
+    const aggregateFolderType = requestedAggregate ?? (aggregateByDefault ? "inbox" : undefined);
+    const mailboxUid = aggregateFolderType || !selectionRead ? undefined : (requestedMailbox ?? defaultMailboxUid);
     const selectedMailboxFolders = mailboxFolders.find((mf) => mf.mailbox.uid === mailboxUid)?.folders ?? [];
     const folderUid = aggregateFolderType
         ? undefined
         : (requestedFolderUid && selectedMailboxFolders.some((f) => f.uid === requestedFolderUid) ? requestedFolderUid : undefined) ??
             selectedMailboxFolders.find((f) => f.type === "inbox")?.uid;
     // The mailbox `KeyEnrollmentGate`/`LocalIndexLifecycle`/`ComposeButton` treat as "the" mailbox when
-    // there's no single selected one to use (aggregate mode) - the caller's own owned mailbox if they
-    // have one, else whichever accessible mailbox happens to be first. See MailShell's own doc comment on
+    // there's no single selected one to use (aggregate mode) - the caller's primary mailbox (`primaryMailbox()`). See MailShell's own doc comment on
     // this being an accepted limitation: an aggregate-view message from a *different*, not-yet-visited
     // mailbox may still need that mailbox's own folder view opened directly to unlock/decrypt it.
-    const defaultMailboxUid = mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
     const activeMailboxUid = mailboxUid ?? defaultMailboxUid;
+    // Which sidebar sections are open: "All mailboxes" and the primary mailbox unless the reader chose otherwise. Any of them can be collapsed;
+    // a change of the open folder into another section opens that one (see `useSidebarSections()`); the first selection, once the address has been read
+    // and the mailboxes are here, is where a load lands, not a navigation. A lone mailbox has nothing to collapse, so its section is never a toggle.
+    const sections = useSidebarSections({
+        userUid,
+        primaryUid: defaultMailboxUid,
+        activeId: aggregateFolderType ? ALL_MAILBOXES_SECTION : mailboxUid,
+    });
+    const collapsible = mailboxes.length > 1;
     const counts = folderCounts.counts;
     const trackMessageChange = folderCounts.track;
     // `(3) Acme: Mail` in the tab strip while there is unread mail in an Inbox - kept by the frame when there is one.
     useUnreadTitle(inboxUnreadTotal(mailboxFolders, counts), { enabled: !hosted });
-    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange]);
+    // A state rather than a ref: the page reads it during its render, so it has to re-render once the row it names is in the document.
+    const [mobileSearchSlot, setMobileSearchSlot] = useState(null);
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot]);
     // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else for a
     // mailbox-less caller to do here yet, so the icon rail/header/folder tree don't render at all. Checks
     // `mailboxes.length` directly (not `!mailboxUid`) since `mailboxUid` is legitimately undefined in
@@ -190,32 +219,33 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
         // A function, not a plain JSX constant — it's rendered twice (desktop `<aside>` + mobile
         // `Drawer`), possibly *simultaneously* mounted (the aside is only CSS-hidden below `md`, not
         // unmounted).
-        const sidebarContent = () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-3", children: _jsx(ComposeButton, { mailboxUid: defaultMailboxUid }) }), foldersLoading ? (_jsx("div", { className: "flex-1 overflow-y-auto px-3 pb-3", children: _jsx(SkeletonList, { count: 6, className: "pt-1" }) })) : (_jsxs("nav", { className: "flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-3", children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5", children: "All Mailboxes" }), _jsx("div", { className: "flex flex-col gap-0.5", children: AGGREGATE_FOLDER_TYPES.map((type) => {
-                                        const badge = aggregateBadge(mailboxFolders, type, counts);
-                                        return (_jsxs("a", { href: `/?aggregate=${encodeURIComponent(type)}`, className: [
-                                                "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
-                                                aggregateFolderType === type
-                                                    ? "bg-primary/10 text-primary-dark font-semibold"
-                                                    : "text-text hover:bg-surface-alt",
-                                            ].join(" "), children: [_jsx("span", { className: badge?.kind === "unread" ? "font-semibold" : undefined, children: FOLDER_LABELS[type] }), badge && _jsx(FolderBadgeChip, { badge: badge })] }, type));
-                                    }) })] })), mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate", children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }), mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), _jsx("div", { className: "flex flex-col gap-0.5", children: folderRows(folders, pendingCountFor(mailbox.uid, pendingSends)).map((row) => {
-                                        if (row.kind === "placeholder") {
-                                            // A folder the server has not made (or told us about) yet - the Outbox and Sent Items are made with the first message
-                                            // sent - shown the moment a message is on its way. Nothing to open; the real folder replaces it when it arrives.
-                                            const sending = pendingCountFor(mailbox.uid, pendingSends);
-                                            return (_jsxs("div", { "data-folder-placeholder": row.type, className: "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5 text-text-muted", children: [_jsx("span", { children: FOLDER_LABELS[row.type] }), row.type === "outbox" && _jsx(OutboxBadge, { total: sending, pendingHere: sending })] }, `placeholder-${row.type}`));
-                                        }
-                                        const folder = row.folder;
-                                        const badge = badgeFor(folder.type, countOfFolder(folder, counts));
-                                        return (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`, className: [
-                                                "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
-                                                folder.uid === folderUid
-                                                    ? "bg-primary/10 text-primary-dark font-semibold"
-                                                    : "text-text hover:bg-surface-alt",
-                                            ].join(" "), children: [_jsx("span", { className: badge?.kind === "unread" ? "font-semibold" : undefined, children: FOLDER_LABELS[folder.type] ?? folder.name }), badge &&
-                                                    (folder.type === "outbox" ? (_jsx(OutboxBadge, { total: badge.value, status: outboxStatuses[folder.uid], pendingHere: pendingCountFor(mailbox.uid, pendingSends) })) : (_jsx(FolderBadgeChip, { badge: badge })))] }, folder.uid));
-                                    }) })] }, mailbox.uid)))] }))] }));
-        inner = (_jsxs(_Fragment, { children: [_jsx(MailShortcuts, { mailboxUid: defaultMailboxUid }), _jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent() }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", children: _jsx("div", { className: "flex flex-col", children: sidebarContent() }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
+        // `idPrefix` keeps each section's folder list's id (which its heading's `aria-controls` names) unique between the two.
+        const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-3", children: _jsx(ComposeButton, { mailboxUid: defaultMailboxUid }) }), foldersLoading ? (_jsx("div", { className: "flex-1 overflow-y-auto px-3 pb-3", children: _jsx(SkeletonList, { count: 6, className: "pt-1" }) })) : (_jsxs("nav", { className: "flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-3", children: [mailboxes.length > 1 && (_jsx(SidebarSection, { domId: `${idPrefix}-mail-section-${ALL_MAILBOXES_SECTION}`, label: "All Mailboxes", collapsible: collapsible, expanded: sections.isExpanded(ALL_MAILBOXES_SECTION), onToggle: () => sections.toggle(ALL_MAILBOXES_SECTION), unread: unreadBadgeTotal(mailboxFolders.flatMap((mf) => mf.folders), counts), children: AGGREGATE_FOLDER_TYPES.map((type) => {
+                                const badge = aggregateBadge(mailboxFolders, type, counts);
+                                return (_jsxs("a", { href: `/?aggregate=${encodeURIComponent(type)}`, className: [
+                                        "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
+                                        aggregateFolderType === type
+                                            ? "bg-primary/10 text-primary-dark font-semibold"
+                                            : "text-text hover:bg-surface-alt",
+                                    ].join(" "), children: [_jsx("span", { className: badge?.kind === "unread" ? "font-semibold" : undefined, children: FOLDER_LABELS[type] }), badge && _jsx(FolderBadgeChip, { badge: badge })] }, type));
+                            }) })), mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (_jsx(SidebarSection, { domId: `${idPrefix}-mail-section-${mailbox.uid}`, label: _jsxs(_Fragment, { children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }), collapsible: collapsible, expanded: sections.isExpanded(mailbox.uid), onToggle: () => sections.toggle(mailbox.uid), unread: unreadBadgeTotal(folders, counts), notice: mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), children: folderRows(folders, pendingCountFor(mailbox.uid, pendingSends)).map((row) => {
+                                if (row.kind === "placeholder") {
+                                    // A folder the server has not made (or told us about) yet - the Outbox and Sent Items are made with the first message
+                                    // sent - shown the moment a message is on its way. Nothing to open; the real folder replaces it when it arrives.
+                                    const sending = pendingCountFor(mailbox.uid, pendingSends);
+                                    return (_jsxs("div", { "data-folder-placeholder": row.type, className: "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5 text-text-muted", children: [_jsx("span", { children: FOLDER_LABELS[row.type] }), row.type === "outbox" && _jsx(OutboxBadge, { total: sending, pendingHere: sending })] }, `placeholder-${row.type}`));
+                                }
+                                const folder = row.folder;
+                                const badge = badgeFor(folder.type, countOfFolder(folder, counts));
+                                return (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`, className: [
+                                        "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
+                                        folder.uid === folderUid
+                                            ? "bg-primary/10 text-primary-dark font-semibold"
+                                            : "text-text hover:bg-surface-alt",
+                                    ].join(" "), children: [_jsx("span", { className: badge?.kind === "unread" ? "font-semibold" : undefined, children: FOLDER_LABELS[folder.type] ?? folder.name }), badge &&
+                                            (folder.type === "outbox" ? (_jsx(OutboxBadge, { total: badge.value, status: outboxStatuses[folder.uid], pendingHere: pendingCountFor(mailbox.uid, pendingSends) })) : (_jsx(FolderBadgeChip, { badge: badge })))] }, folder.uid));
+                            }) }, mailbox.uid)))] }))] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx(MailShortcuts, { mailboxUid: defaultMailboxUid }), _jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", fullScreen: true, children: _jsx("div", { className: "flex flex-col", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsxs("div", { className: "md:hidden flex items-center gap-2 p-3", children: [_jsx("button", { type: "button", className: "shrink-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("div", { ref: setMobileSearchSlot, className: "flex-1 min-w-0" })] }), _jsx(MobileComposeButton, { mailboxUid: defaultMailboxUid }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     // Wraps AppShell unconditionally, at a stable tree position regardless of whether mailboxUid has
     // resolved yet - KeyEnrollmentGate itself passes `children` through untouched until a real

package/dist/apps/shared/components/mail/layout/SidebarSection.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+export interface SidebarSectionProps {
+    /** Unique per rendering of the sidebar (it is on screen twice on a phone: beside the list and in the drawer): names the folder list the heading controls. */
+    domId: string;
+    /** The heading's text. */
+    label: ReactNode;
+    /** Whether the heading is a toggle at all. Not for a lone mailbox, whose section has nothing to be hidden for. */
+    collapsible: boolean;
+    expanded: boolean;
+    onToggle: () => void;
+    /** The unread mail in the section's folders that carry an unread count (see `unreadBadgeTotal()`), shown on the heading while it is collapsed (and only when there is some) so new mail in a hidden section is still noticed. */
+    unread?: number;
+    /** Shown between the heading and the folders, collapsed or not: a failure to load the section's folders is not something to hide. */
+    notice?: ReactNode;
+    /** The section's folder rows. */
+    children: ReactNode;
+}
+/**
+ * One section of Mail's sidebar ("All mailboxes", or one mailbox): a heading over a list of folders. When `collapsible` the heading is a
+ * disclosure button (`aria-expanded`, `aria-controls` the list, a chevron that turns) and the list is `hidden` while it is collapsed -
+ * kept in the document, so the button's `aria-controls` always names something and nothing is fetched or rebuilt on opening it.
+ */
+export default function SidebarSection({ domId, label, collapsible, expanded, onToggle, unread, notice, children }: SidebarSectionProps): React.JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiChevronDown } from "react-icons/hi2";
+import FolderBadgeChip from "./FolderBadgeChip.js";
+/**
+ * One section of Mail's sidebar ("All mailboxes", or one mailbox): a heading over a list of folders. When `collapsible` the heading is a
+ * disclosure button (`aria-expanded`, `aria-controls` the list, a chevron that turns) and the list is `hidden` while it is collapsed -
+ * kept in the document, so the button's `aria-controls` always names something and nothing is fetched or rebuilt on opening it.
+ */
+export default function SidebarSection({ domId, label, collapsible, expanded, onToggle, unread = 0, notice, children }) {
+    const shown = !collapsible || expanded;
+    return (_jsxs("div", { children: [collapsible ? (_jsx("h2", { className: "mb-1", children: _jsxs("button", { type: "button", "aria-expanded": expanded, "aria-controls": domId, onClick: onToggle, className: [
+                        "flex w-full items-center gap-1 rounded-sm px-2.5 py-0.5 text-left text-xs font-bold uppercase tracking-wide text-text-muted",
+                        "focus-visible:outline-2 focus-visible:outline-primary",
+                        "hover:bg-surface-alt hover:text-text",
+                    ].join(" "), children: [_jsx(HiChevronDown, { size: 14, "aria-hidden": "true", className: ["shrink-0 transition-transform", expanded ? "" : "-rotate-90"].join(" ") }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), !expanded && unread > 0 && _jsx(FolderBadgeChip, { badge: { kind: "unread", value: unread } })] }) })) : (_jsx("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate", children: label })), notice, _jsx("div", { id: domId, hidden: !shown, className: shown ? "flex flex-col gap-0.5" : "hidden", children: children })] }));
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { OutgoingReply } from "../../../mail/outbox/outgoingReplies.js";
+/**
+ * A reply or forward that has just been sent, drawn where its message will be once the server has filed it: the sender, who it went to, its body as
+ * it was composed, and one line saying where it is - "Sending...", "Sent", or, when it did not go, "Not sent: <why>" with the same ways out the
+ * pop-up offers (Retry, Open draft ...). It reads like the message's own card, so the real message replaces it without the thread rearranging.
+ *
+ * The body goes through the reading pane's own sanitizing frame (`MessageBody`), exactly as a received message's does.
+ */
+export default function PendingMessageCard({ reply, headerRef, }: {
+    reply: OutgoingReply;
+    /** Registered so the pane can put the focus here when the message first appears. Focusable, but not in the tab order. */
+    headerRef: (node: HTMLHeadingElement | null) => void;
+}): React.JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import MailAddress, { RecipientLine } from "../MailAddress.js";
+import MessageBody from "./MessageBody.js";
+import { BODY_FONT_STYLE, CardShell, SenderAvatar } from "./MessageCard.js";
+/**
+ * A reply or forward that has just been sent, drawn where its message will be once the server has filed it: the sender, who it went to, its body as
+ * it was composed, and one line saying where it is - "Sending...", "Sent", or, when it did not go, "Not sent: <why>" with the same ways out the
+ * pop-up offers (Retry, Open draft ...). It reads like the message's own card, so the real message replaces it without the thread rearranging.
+ *
+ * The body goes through the reading pane's own sanitizing frame (`MessageBody`), exactly as a received message's does.
+ */
+export default function PendingMessageCard({ reply, headerRef, }) {
+    const failed = reply.state === "failed";
+    return (_jsxs(CardShell, { children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx(SenderAvatar, { from: reply.sender }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-2 text-sm", children: [_jsx("h2", { ref: headerRef, tabIndex: -1, style: BODY_FONT_STYLE, className: "flex-1 min-w-[13rem] font-semibold outline-none focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(MailAddress, { recipient: reply.sender }) }), _jsxs("div", { role: failed ? "alert" : "status", "data-testid": "pending-message-status", "data-state": reply.state, className: ["flex items-center gap-1.5 text-xs shrink-0", failed ? "font-semibold text-danger" : "text-text-muted"].join(" "), children: [reply.state === "sending" && _jsx("span", { "aria-hidden": "true", className: "rr-sending-dot h-1.5 w-1.5 shrink-0 rounded-full bg-primary" }), _jsx("span", { children: failed ? `Not sent: ${reply.failure}` : reply.state === "sending" ? "Sending…" : "Sent" })] }, failed ? "failed" : "progress")] }), _jsx(RecipientLine, { label: "To", recipients: reply.to }), _jsx(RecipientLine, { label: "Cc", recipients: reply.cc }), _jsx(RecipientLine, { label: "Bcc", recipients: reply.bcc })] })] }), failed && (_jsx("div", { className: "flex flex-wrap gap-2 px-4 pb-3", children: reply.actions.map((action) => (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: action.onClick, children: action.label }, action.label))) })), _jsx("div", { className: "px-4 pb-4", children: _jsx(MessageBody, { messageUid: reply.uid, messageVersion: 0, title: `Message: ${reply.subject}`, content: { kind: "html", html: reply.html } }) })] }));
+}

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -13,9 +13,11 @@ import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedbac
 import AppShell from "../../layout/AppShell.js";
 import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 import { mergePluginNavItems } from "../../../plugins/pluginNav.js";
 /** Every settings section with its own sidebar entry. */
 export const SETTINGS_SECTIONS = [
+    { id: "profile", href: "/settings/profile", label: "Profile" },
     { id: "appearance", href: "/settings/appearance", label: "Appearance" },
     { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies" },
     { id: "filters", href: "/settings/filters", label: "Mail Filters" },
@@ -72,7 +74,7 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
         }
         listMailboxes({ limit: 100 })
             .then((result) => {
-            setMailboxes(result);
+            setMailboxes(orderMailboxes(result, userUid));
             setStatus("ready");
         })
             .catch((err) => {
@@ -81,7 +83,7 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
         });
     }, [userUid]);
     const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-        mailboxes[0]?.uid;
+        primaryMailboxUid(mailboxes, userUid);
     const contextValue = useMemo(() => ({ mailboxUid, mailboxes }), [mailboxUid, mailboxes]);
     // A full-screen takeover, not nested inside the rest of the app's chrome — same as ContactsShell/
     // TasksShell, there's nothing else for a mailbox-less caller to configure here yet.
@@ -109,8 +111,8 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
                             }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsx("nav", { "aria-label": "Settings sections", className: "flex flex-col gap-0.5", children: sections.map((section) => (_jsx("a", { 
                         // `inner` (this whole branch) is only ever computed once `status === "ready"`
                         // and `mailboxUid` has already resolved truthy — a falsy `mailboxUid` returns
-                        // `<MailboxProvisioning />` above instead (and TypeScript's own narrowing of
-                        // this `const` already reflects that, no `!` needed) — so no fallback is
+                        // `<MailboxProvisioning />` above instead (which is what the `!` below records,
+                        // `primaryMailboxUid()` being honest that it may find none) — so no fallback is
                         // needed here, matching this plan's established "dead guard the UI
                         // structurally can't trigger" removal precedent (e.g.
                         // `DomainDetailContent.handleVerify`).
@@ -118,7 +120,7 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
                             "block px-2.5 py-1.5 rounded-sm text-sm",
                             section.id === active ? "bg-primary/10 text-primary-dark font-medium" : "text-text hover:bg-surface-alt",
                         ].join(" "), children: section.label }, section.id))) })] }));
-        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Settings", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [_jsx("button", { type: "button", className: "md:hidden m-3 self-start w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open settings menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(SettingsShellContext.Provider, { value: contextValue, children: children })] })] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Settings", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [_jsx("button", { type: "button", className: "md:hidden m-3 self-start w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open settings menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(SettingsShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     return (_jsx(AppShell, { active: "settings", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }

package/dist/apps/shared/components/tasks/TasksSidebar.js

@@ -79,5 +79,5 @@ export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSel
     // `Drawer` (see `ContactsSidebar` for the identical pattern and the duplicate-id reasoning behind
     // the `idPrefix`).
     const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "My Day", count: myDayCount, active: active.type === "myDay", onClick: () => handleSelect({ type: "myDay" }) }), _jsx(NavItem, { label: "Important", count: importantCount, active: active.type === "important", onClick: () => handleSelect({ type: "important" }) }), _jsx(NavItem, { label: "Planned", count: plannedCount, active: active.type === "planned", onClick: () => handleSelect({ type: "planned" }) }), _jsx(NavItem, { label: "Assigned to me", count: assignedToMeCount, active: active.type === "assignedToMe", onClick: () => handleSelect({ type: "assignedToMe" }) }), _jsx(NavItem, { label: "Flagged email", active: active.type === "flagged", onClick: () => handleSelect({ type: "flagged" }) })] }), _jsx(NavItem, { label: "Tasks", count: tasks.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] })] }));
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "lg:hidden m-3 mb-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open tasks menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Tasks", className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Tasks", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "lg:hidden m-3 mb-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open tasks menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Tasks", className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Tasks", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
 }

package/dist/apps/shared/components/tasks/layout/TasksShell.js

@@ -13,6 +13,7 @@ import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedbac
 import AppShell from "../../layout/AppShell.js";
 import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 const TasksShellContext = createContext({ mailboxes: [] });
 /** Reads the mailbox/folder Tasks is currently showing, as resolved by the enclosing `TasksShell`. */
 export function useTasksShell() {
@@ -51,7 +52,7 @@ export default function TasksShell({ userUid, authServerUrl, impersonating, impe
         }
         listMailboxes({ limit: 100 })
             .then((result) => {
-            setMailboxes(result);
+            setMailboxes(orderMailboxes(result, userUid));
             setStatus("ready");
         })
             .catch((err) => {
@@ -60,7 +61,7 @@ export default function TasksShell({ userUid, authServerUrl, impersonating, impe
         });
     }, [userUid]);
     const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-        mailboxes[0]?.uid;
+        primaryMailboxUid(mailboxes, userUid);
     useEffect(() => {
         if (!mailboxUid) {
             setFolders([]);
@@ -98,7 +99,7 @@ export default function TasksShell({ userUid, authServerUrl, impersonating, impe
                             }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), folderError && _jsx(Alert, { children: folderError })] }));
         // With a single mailbox and no error this column would be empty: no 224 px of nothing beside the tasks' own menu.
         const hasSidebar = mailboxes.length > 1 || !!folderError;
-        inner = (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [hasSidebar && (_jsx("button", { type: "button", className: "lg:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(TasksShellContext.Provider, { value: contextValue, children: children })] })] }));
+        inner = (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [hasSidebar && (_jsx("button", { type: "button", className: "lg:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(TasksShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     return (_jsx(AppShell, { active: "tasks", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }

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

@@ -0,0 +1,14 @@
+import { type CSSProperties } from "react";
+/** How long the new contents take to settle. Short, so a run of steps (a wheel kept turning) never waits on the last one. */
+export declare const ENTER_SLIDE_MS = 140;
+/**
+ * The look of a page that has just been swapped for the next or previous one by a vertical step (the wheel): the new contents start
+ * a little way off in the direction the step went - below for `1` (the next), above for `-1` - and faded, and settle into place.
+ * The old contents are not animated out: the swap is immediate, so a run of steps never queues, and a step in the middle of a
+ * settle just starts the next one from its start. Put `style` on the element that holds the contents and call `enter()` as the
+ * contents change. Nothing moves for someone who asked for less motion.
+ */
+export declare function useEnterSlide(): {
+    style: CSSProperties;
+    enter: (direction: 1 | -1) => void;
+};

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

@@ -0,0 +1,47 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+/** How long the new contents take to settle. Short, so a run of steps (a wheel kept turning) never waits on the last one. */
+export const ENTER_SLIDE_MS = 140;
+/** How far off, in pixels, and how faded the new contents start. */
+const ENTER_OFFSET_PX = 56;
+const ENTER_START_OPACITY = 0.35;
+/** The pause that lets the browser draw the contents at their starting place before they move. */
+const ENTER_SETTLE_MS = 20;
+/** Whether the user asked their device for less motion. */
+function prefersReducedMotion() {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+ * The look of a page that has just been swapped for the next or previous one by a vertical step (the wheel): the new contents start
+ * a little way off in the direction the step went - below for `1` (the next), above for `-1` - and faded, and settle into place.
+ * The old contents are not animated out: the swap is immediate, so a run of steps never queues, and a step in the middle of a
+ * settle just starts the next one from its start. Put `style` on the element that holds the contents and call `enter()` as the
+ * contents change. Nothing moves for someone who asked for less motion.
+ */
+export function useEnterSlide() {
+    const [offset, setOffset] = useState(0);
+    const [animated, setAnimated] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => window.clearTimeout(timer.current), []);
+    function enter(direction) {
+        if (prefersReducedMotion()) {
+            return;
+        }
+        window.clearTimeout(timer.current);
+        setAnimated(false);
+        setOffset(direction * ENTER_OFFSET_PX);
+        timer.current = window.setTimeout(() => {
+            setAnimated(true);
+            setOffset(0);
+        }, ENTER_SETTLE_MS);
+    }
+    const style = {
+        transform: offset === 0 ? undefined : `translate3d(0, ${offset}px, 0)`,
+        opacity: offset === 0 ? undefined : ENTER_START_OPACITY,
+        transition: animated ? `transform ${ENTER_SLIDE_MS}ms ease-out, opacity ${ENTER_SLIDE_MS}ms ease-out` : "none",
+    };
+    return { style, enter };
+}

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

@@ -0,0 +1,45 @@
+import { type TouchEvent } from "react";
+/** Which way the finger moved: `"left"` is right to left. */
+export type SwipeDirection = "left" | "right";
+export interface UseSwipeOptions {
+    /** Nothing is tracked while this is `false` (a desktop pointer, select mode). Default `true`. */
+    enabled?: boolean;
+    /** The directions that mean something; a drag the other way doesn't move at all. Default both. */
+    directions?: readonly SwipeDirection[];
+    /** How far the finger has to travel to commit, in px. Default `MIN_SWIPE_DISTANCE`, or a third of the element's width when that is more. */
+    distance?: number;
+    /** Called as the finger moves, with the horizontal offset (the direction filter applied), and with `0` once it lifts. */
+    onDrag?: (offset: number) => void;
+    /** Called once when a swipe commits. `onDrag(0)` follows. */
+    onSwipe: (direction: SwipeDirection) => void;
+}
+/** The least distance that commits a swipe, and how far the finger must move before its direction is decided. */
+export declare const MIN_SWIPE_DISTANCE = 80;
+export declare const SWIPE_SLOP = 10;
+/** A quicker flick than this (px per ms) commits after `FLING_MIN_DISTANCE` alone. */
+export declare const FLING_VELOCITY = 0.5;
+export declare 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 declare function useSwipe({ enabled, directions, distance, onDrag, onSwipe }: UseSwipeOptions): {
+    handlers: {
+        onTouchStart: (event: TouchEvent<HTMLElement>) => void;
+        onTouchMove: (event: TouchEvent<HTMLElement>) => void;
+        onTouchEnd: () => void;
+        onTouchCancel: () => void;
+    } | {
+        onTouchStart?: undefined;
+        onTouchMove?: undefined;
+        onTouchEnd?: undefined;
+        onTouchCancel?: undefined;
+    };
+    /** Leaves vertical panning to the browser. */
+    style: {
+        readonly touchAction: "pan-y";
+    } | undefined;
+};