@rapidmx/web-client 0.10.0 → 0.12.0

package/dist/apps/www/settings/signatures/[uid].js

@@ -13,6 +13,7 @@ import RichTextEditor from "../../../shared/components/mail/compose/RichTextEdit
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
 const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /** Signatures aren't backed by a draft/attachment record the way Compose's own inline images are — see
  * `settings/signatures/new/index.tsx`'s identical stub for the full reasoning. */
@@ -78,7 +79,8 @@ function SignatureDetailContent({ uid }) {
             setSaved(true);
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this signature.");
+            // A pop-up: `error` is only this form's own validation (and the load failure above).
+            notifyApiError(err, "Couldn't save the signature");
         }
         finally {
             setSaving(false);

package/dist/apps/www/settings/signatures/new/index.js

@@ -6,7 +6,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { routedPage } from "../../../_routedPage.js";
 import { useNavigate } from "../../../../shared/navigation/AppRouter.js";
 import { useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { createMailSignature, listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
 import { clearPreviousDefaults } from "../signatureDefaults.js";
 import SettingsShell, { useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
@@ -14,6 +13,7 @@ import RichTextEditor from "../../../../shared/components/mail/compose/RichTextE
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import { notifyApiError } from "../../../../shared/notifications/apiErrors.js";
 const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 function NewSignaturePage(props) {
     return (_jsx(SettingsShell, { ...props, active: "signatures", children: _jsx(NewSignatureForm, {}) }));
@@ -56,7 +56,8 @@ function NewSignatureForm() {
             navigate(`/settings/signatures/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`);
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the signature.");
+            // A pop-up: `error` above is only the form's own validation.
+            notifyApiError(err, "Couldn't create the signature");
         }
         finally {
             setSaving(false);

package/dist/apps/www/tasks/index.js

@@ -21,6 +21,7 @@ import { LIST_PAGE_SIZE, MAX_LIST_PAGES, listAllPages } from "../../shared/mail/
 import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
+import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 const INPUT_CLASS = "text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 function TasksPage(props) {
     return (_jsx(TasksShell, { ...props, children: _jsx(TasksContent, {}) }));
@@ -172,7 +173,6 @@ function TasksContent() {
         }
     }
     async function handleToggle(task) {
-        setError(null);
         const nextCompleted = !task.completed;
         setTasks((prev) => prev.map((t) => (t.uid === task.uid ? { ...t, completed: nextCompleted } : t)));
         try {
@@ -181,17 +181,16 @@ function TasksContent() {
         }
         catch (err) {
             setTasks((prev) => prev.map((t) => (t.uid === task.uid ? task : t)));
-            setError(err instanceof ApiRequestError ? err.message : "Could not update this task.");
+            notifyApiError(err, "Couldn't update the task");
         }
     }
     async function handleDelete(task) {
-        setError(null);
         try {
             await deleteTask(task.uid, task.version);
             setTasks((prev) => prev.filter((t) => t.uid !== task.uid));
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not delete this task.");
+            notifyApiError(err, "Couldn't delete the task");
         }
     }
     function handleSelectView(next) {
@@ -229,47 +228,42 @@ function TasksContent() {
         }
     }, [tasks, view, userUid]);
     const checkedTasks = viewFiltered.filter((t) => checkedUids.has(t.uid));
+    // The bulk handlers try every task and report each failure: the same failure repeated is one pop-up with a count.
     async function handleBulkComplete() {
-        let bulkError = null;
         for (const task of checkedTasks) {
             try {
                 await setTaskCompleted(task, true);
             }
             catch (err) {
-                bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more tasks.";
+                notifyApiError(err, "Couldn't update some of the tasks");
             }
         }
         setCheckedUids(new Set());
         await reload();
-        setError(bulkError);
     }
     async function handleBulkAddToMyDay() {
-        let bulkError = null;
         for (const task of checkedTasks) {
             try {
                 await setTaskMyDay(task, true);
             }
             catch (err) {
-                bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more tasks.";
+                notifyApiError(err, "Couldn't update some of the tasks");
             }
         }
         setCheckedUids(new Set());
         await reload();
-        setError(bulkError);
     }
     async function handleBulkDelete() {
-        let bulkError = null;
         for (const task of checkedTasks) {
             try {
                 await deleteTask(task.uid, task.version);
             }
             catch (err) {
-                bulkError = err instanceof ApiRequestError ? err.message : "Could not delete one or more tasks.";
+                notifyApiError(err, "Couldn't delete some of the tasks");
             }
         }
         setCheckedUids(new Set());
         await reload();
-        setError(bulkError);
     }
     function requestDelete(task) {
         setPendingDelete({ type: "single", task });
@@ -296,7 +290,7 @@ function TasksContent() {
         return map;
     }, [viewFiltered]);
     const completedTasks = viewFiltered.filter((t) => t.completed);
-    return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx(TasksSidebar, { mailboxUid: mailboxUid, tasks: tasks, userUid: userUid, active: view, onSelect: handleSelectView }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-y-auto", children: [_jsx(TasksToolbar, { viewMode: viewMode, onViewModeChange: setViewMode, selectedCount: checkedTasks.length, onComplete: handleBulkComplete, onDelete: () => setPendingDelete({ type: "bulk" }), onAddToMyDay: handleBulkAddToMyDay }), _jsxs("div", { role: "region", "aria-label": "Tasks list", className: "max-w-2xl mx-auto w-full flex flex-col gap-6 p-6", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Tasks" }), error && _jsx(Alert, { children: error }), truncated && view.type !== "flagged" && (_jsxs(Alert, { children: ["This folder has more tasks than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] })), view.type === "flagged" ? (_jsx(FlaggedEmailList, { loading: flaggedLoading, error: flaggedError, messages: flaggedMessages })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: handleCreate, className: "flex items-center gap-2 bg-surface border border-border rounded-md p-2", children: [_jsx("input", { ref: addTaskRef, type: "text", "aria-label": "Add a task", ...addTaskHint, className: `${INPUT_CLASS} flex-1`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Add a task" }), _jsx("input", { type: "date", "aria-label": "Due date", className: INPUT_CLASS, value: dueDate, onChange: (e) => setDueDate(e.target.value) }), _jsxs("select", { "aria-label": "Priority", className: INPUT_CLASS, value: priority, onChange: (e) => setPriority(e.target.value), children: [_jsx("option", { value: "low", children: "Low" }), _jsx("option", { value: "normal", children: "Normal" }), _jsx("option", { value: "high", children: "High" })] }), writableMailboxes.length > 1 && (_jsx("select", { "aria-label": "Task mailbox", className: `${INPUT_CLASS} max-w-40`, 
+    return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row", children: [_jsx(TasksSidebar, { mailboxUid: mailboxUid, tasks: tasks, userUid: userUid, active: view, onSelect: handleSelectView }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-y-auto", children: [_jsx(TasksToolbar, { viewMode: viewMode, onViewModeChange: setViewMode, selectedCount: checkedTasks.length, onComplete: handleBulkComplete, onDelete: () => setPendingDelete({ type: "bulk" }), onAddToMyDay: handleBulkAddToMyDay }), _jsxs("div", { role: "region", "aria-label": "Tasks list", className: "max-w-2xl mx-auto w-full flex flex-col gap-6 p-6", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Tasks" }), error && _jsx(Alert, { children: error }), truncated && view.type !== "flagged" && (_jsxs(Alert, { children: ["This folder has more tasks than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] })), view.type === "flagged" ? (_jsx(FlaggedEmailList, { loading: flaggedLoading, error: flaggedError, messages: flaggedMessages })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: handleCreate, className: "flex flex-wrap items-center gap-2 bg-surface border border-border rounded-md p-2", children: [_jsx("input", { ref: addTaskRef, type: "text", "aria-label": "Add a task", ...addTaskHint, className: `${INPUT_CLASS} min-w-40 basis-40 flex-1`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Add a task" }), _jsx("input", { type: "date", "aria-label": "Due date", className: INPUT_CLASS, value: dueDate, onChange: (e) => setDueDate(e.target.value) }), _jsxs("select", { "aria-label": "Priority", className: INPUT_CLASS, value: priority, onChange: (e) => setPriority(e.target.value), children: [_jsx("option", { value: "low", children: "Low" }), _jsx("option", { value: "normal", children: "Normal" }), _jsx("option", { value: "high", children: "High" })] }), writableMailboxes.length > 1 && (_jsx("select", { "aria-label": "Task mailbox", className: `${INPUT_CLASS} max-w-40`, 
                                                 // `writableMailboxes` only has entries once `mailboxUid` has resolved.
                                                 value: targetMailboxUid ?? mailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: writableMailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid === userUid ? "" : " (shared)"] }, mb.uid))) })), _jsx(Button, { type: "submit", loading: creating, disabled: creating, className: "!w-auto shrink-0", children: "Add" })] }), createError && _jsx(Alert, { children: createError }), addedElsewhere && (_jsxs("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["\u201C", addedElsewhere.title, "\u201D was added to", " ", mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`, className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s tasks" })] })), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : viewFiltered.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No tasks yet." })) : viewMode === "grid" ? (_jsx(TaskTable, { tasks: viewFiltered, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: requestDelete })) : (_jsxs(_Fragment, { children: [BUCKET_ORDER.map((bucket) => {
                                                 const items = grouped.get(bucket);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",
@@ -39,7 +39,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@journeyapps/wa-sqlite": "^2.0.4",
     "@peculiar/x509": "^2.1.0",
-    "@rapidmx/react-shared": "^0.10.0",
+    "@rapidmx/react-shared": "^0.12.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",

package/apps/shared/components/mail/NewMailToasts.tsx

@@ -1,141 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useRef, useState } from "react";
-import { HiOutlineXMark } from "react-icons/hi2";
-import type { NewMailNotice } from "../../mail/newMailNotifications.js";
-import { TOAST_DURATION_MS } from "../../mail/useNewMailNotifications.js";
-
-export interface NewMailToastsProps {
-    /** The pop-ups to show, oldest first. */
-    toasts: NewMailNotice[];
-    onDismiss: (uid: string) => void;
-    /** Show the "Turn on desktop notifications" offer in the first pop-up. */
-    offerDesktop: boolean;
-    onEnableDesktop: () => void;
-    onDeclineDesktop: () => void;
-}
-
-/** Whether the tab is out of view - a pop-up's clock stops meanwhile, so it is still there when the reader comes back. */
-function useTabHidden(): boolean {
-    const [hidden, setHidden] = useState(false);
-    useEffect(() => {
-        const update = () => setHidden(document.visibilityState === "hidden");
-        update();
-        document.addEventListener("visibilitychange", update);
-        return () => document.removeEventListener("visibilitychange", update);
-    }, []);
-    return hidden;
-}
-
-interface ToastItemProps {
-    toast: NewMailNotice;
-    tabHidden: boolean;
-    onDismiss: (uid: string) => void;
-    offer?: { onEnable: () => void; onDecline: () => void };
-}
-
-/** One pop-up. Its 8 seconds only run while it is neither hovered nor holding keyboard focus, and the tab is in view. */
-function ToastItem({ toast, tabHidden, onDismiss, offer }: ToastItemProps) {
-    const [hovered, setHovered] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const remainingRef = useRef(TOAST_DURATION_MS);
-    const paused = tabHidden || hovered || focused;
-
-    useEffect(() => {
-        if (paused) {
-            return;
-        }
-        const startedAt = Date.now();
-        const timer = setTimeout(() => onDismiss(toast.uid), remainingRef.current);
-        return () => {
-            clearTimeout(timer);
-            remainingRef.current = Math.max(0, remainingRef.current - (Date.now() - startedAt));
-        };
-    }, [paused, toast.uid, onDismiss]);
-
-    const sender = toast.senderName || toast.senderAddress;
-    return (
-        <div
-            data-testid="new-mail-toast"
-            onMouseEnter={() => setHovered(true)}
-            onMouseLeave={() => setHovered(false)}
-            onFocus={() => setFocused(true)}
-            onBlur={(event) => {
-                // Focus moving between this pop-up's own controls is not leaving it.
-                if (!event.currentTarget.contains(event.relatedTarget)) {
-                    setFocused(false);
-                }
-            }}
-            className="rr-toast-in pointer-events-auto relative rounded-md border border-border border-l-4 border-l-primary bg-surface text-text shadow-modal"
-        >
-            <a
-                href={toast.href}
-                onClick={() => onDismiss(toast.uid)}
-                className="block rounded-md p-3 pr-10 hover:bg-surface-alt focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary"
-            >
-                <span className="block text-xs font-semibold uppercase tracking-wide text-primary-dark">New message</span>
-                <span className="mt-0.5 flex min-w-0 items-baseline gap-1.5 text-sm">
-                    <span className="truncate font-bold">{sender}</span>
-                    {toast.senderName && <span className="truncate text-xs text-text-muted">&lt;{toast.senderAddress}&gt;</span>}
-                </span>
-                <span className="block truncate text-sm font-semibold">{toast.subject}</span>
-                {toast.preview && <span className="mt-0.5 block text-xs text-text-muted [overflow-wrap:anywhere]">{toast.preview}</span>}
-            </a>
-            <button
-                type="button"
-                onClick={() => onDismiss(toast.uid)}
-                aria-label={`Dismiss notification: ${toast.subject}`}
-                className="absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text focus-visible:outline-2 focus-visible:outline-primary"
-            >
-                <HiOutlineXMark size={16} aria-hidden="true" />
-            </button>
-            {offer && (
-                <div className="flex flex-wrap items-center gap-2 border-t border-border px-3 py-2 text-xs text-text-muted">
-                    <span className="basis-full">Get a desktop notification when mail arrives while this tab is in the background.</span>
-                    <button
-                        type="button"
-                        onClick={offer.onEnable}
-                        className="rounded-sm bg-primary px-2.5 py-1 text-xs font-semibold text-text-on-primary hover:bg-primary-dark"
-                    >
-                        Turn on desktop notifications
-                    </button>
-                    <button type="button" onClick={offer.onDecline} className="rounded-sm px-2 py-1 text-xs font-medium hover:bg-surface-alt hover:text-text">
-                        Not now
-                    </button>
-                </div>
-            )}
-        </div>
-    );
-}
-
-/**
- * The new-mail pop-ups, stacked at the top right (`fixed`, above everything). The container is always rendered - a live region
- * has to exist before its content changes to be announced - and is a polite `status` region, so an arrival is read out without
- * interrupting. Each pop-up shows the sender's name and address, the subject and a short preview, as text; clicking it opens the
- * message; it has a dismiss button and goes by itself after a few seconds (see `ToastItem`). Motion is CSS-only and switched off
- * by `prefers-reduced-motion` (`.rr-toast-in` in `app.css`).
- */
-export default function NewMailToasts({ toasts, onDismiss, offerDesktop, onEnableDesktop, onDeclineDesktop }: NewMailToastsProps) {
-    const tabHidden = useTabHidden();
-    return (
-        <div
-            role="status"
-            aria-live="polite"
-            aria-label="New mail"
-            data-testid="new-mail-toasts"
-            className="pointer-events-none fixed right-4 top-4 z-50 flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col gap-2"
-        >
-            {toasts.map((toast, index) => (
-                <ToastItem
-                    key={toast.uid}
-                    toast={toast}
-                    tabHidden={tabHidden}
-                    onDismiss={onDismiss}
-                    offer={offerDesktop && index === 0 ? { onEnable: onEnableDesktop, onDecline: onDeclineDesktop } : undefined}
-                />
-            ))}
-        </div>
-    );
-}

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

@@ -1,48 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React from "react";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
-
-export interface SendFailureAlertProps {
-    /** The plain, human message - always shown. */
-    message: string;
-    /** The technical facts behind it (`describeSendFailure().lines`): per-recipient SMTP results, a transport error.
-     * With none, only the message is shown. */
-    lines: string[];
-}
-
-/**
- * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
- * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
- * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
- */
-export default function SendFailureAlert({ message, lines }: SendFailureAlertProps) {
-    return (
-        <Alert>
-            <div className="flex-1 min-w-0">
-                <p className="font-semibold break-words">{message}</p>
-                {lines.length > 0 && (
-                    <details className="mt-2">
-                        <summary className="cursor-pointer text-xs font-semibold">Technical details</summary>
-                        <ul
-                            aria-label="Technical details"
-                            className="mt-2 max-h-40 overflow-auto rounded-sm border border-border bg-surface p-2 text-xs font-mono text-text select-text"
-                        >
-                            {lines.map((line, index) => (
-                                <li key={index} className="whitespace-pre-wrap break-words">
-                                    {line}
-                                </li>
-                            ))}
-                        </ul>
-                        <div className="mt-2">
-                            <CopyButton value={lines.join("\n")} label="Copy technical details" />
-                        </div>
-                    </details>
-                )}
-            </div>
-        </Alert>
-    );
-}

package/dist/apps/shared/components/mail/NewMailToasts.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-import type { NewMailNotice } from "../../mail/newMailNotifications.js";
-export interface NewMailToastsProps {
-    /** The pop-ups to show, oldest first. */
-    toasts: NewMailNotice[];
-    onDismiss: (uid: string) => void;
-    /** Show the "Turn on desktop notifications" offer in the first pop-up. */
-    offerDesktop: boolean;
-    onEnableDesktop: () => void;
-    onDeclineDesktop: () => void;
-}
-/**
- * The new-mail pop-ups, stacked at the top right (`fixed`, above everything). The container is always rendered - a live region
- * has to exist before its content changes to be announced - and is a polite `status` region, so an arrival is read out without
- * interrupting. Each pop-up shows the sender's name and address, the subject and a short preview, as text; clicking it opens the
- * message; it has a dismiss button and goes by itself after a few seconds (see `ToastItem`). Motion is CSS-only and switched off
- * by `prefers-reduced-motion` (`.rr-toast-in` in `app.css`).
- */
-export default function NewMailToasts({ toasts, onDismiss, offerDesktop, onEnableDesktop, onDeclineDesktop }: NewMailToastsProps): React.JSX.Element;

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

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useRef, useState } from "react";
-import { HiOutlineXMark } from "react-icons/hi2";
-import { TOAST_DURATION_MS } from "../../mail/useNewMailNotifications.js";
-/** Whether the tab is out of view - a pop-up's clock stops meanwhile, so it is still there when the reader comes back. */
-function useTabHidden() {
-    const [hidden, setHidden] = useState(false);
-    useEffect(() => {
-        const update = () => setHidden(document.visibilityState === "hidden");
-        update();
-        document.addEventListener("visibilitychange", update);
-        return () => document.removeEventListener("visibilitychange", update);
-    }, []);
-    return hidden;
-}
-/** One pop-up. Its 8 seconds only run while it is neither hovered nor holding keyboard focus, and the tab is in view. */
-function ToastItem({ toast, tabHidden, onDismiss, offer }) {
-    const [hovered, setHovered] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const remainingRef = useRef(TOAST_DURATION_MS);
-    const paused = tabHidden || hovered || focused;
-    useEffect(() => {
-        if (paused) {
-            return;
-        }
-        const startedAt = Date.now();
-        const timer = setTimeout(() => onDismiss(toast.uid), remainingRef.current);
-        return () => {
-            clearTimeout(timer);
-            remainingRef.current = Math.max(0, remainingRef.current - (Date.now() - startedAt));
-        };
-    }, [paused, toast.uid, onDismiss]);
-    const sender = toast.senderName || toast.senderAddress;
-    return (_jsxs("div", { "data-testid": "new-mail-toast", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (event) => {
-            // Focus moving between this pop-up's own controls is not leaving it.
-            if (!event.currentTarget.contains(event.relatedTarget)) {
-                setFocused(false);
-            }
-        }, className: "rr-toast-in pointer-events-auto relative rounded-md border border-border border-l-4 border-l-primary bg-surface text-text shadow-modal", children: [_jsxs("a", { href: toast.href, onClick: () => onDismiss(toast.uid), className: "block rounded-md p-3 pr-10 hover:bg-surface-alt focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", children: [_jsx("span", { className: "block text-xs font-semibold uppercase tracking-wide text-primary-dark", children: "New message" }), _jsxs("span", { className: "mt-0.5 flex min-w-0 items-baseline gap-1.5 text-sm", children: [_jsx("span", { className: "truncate font-bold", children: sender }), toast.senderName && _jsxs("span", { className: "truncate text-xs text-text-muted", children: ["<", toast.senderAddress, ">"] })] }), _jsx("span", { className: "block truncate text-sm font-semibold", children: toast.subject }), toast.preview && _jsx("span", { className: "mt-0.5 block text-xs text-text-muted [overflow-wrap:anywhere]", children: toast.preview })] }), _jsx("button", { type: "button", onClick: () => onDismiss(toast.uid), "aria-label": `Dismiss notification: ${toast.subject}`, className: "absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) }), offer && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-t border-border px-3 py-2 text-xs text-text-muted", children: [_jsx("span", { className: "basis-full", children: "Get a desktop notification when mail arrives while this tab is in the background." }), _jsx("button", { type: "button", onClick: offer.onEnable, className: "rounded-sm bg-primary px-2.5 py-1 text-xs font-semibold text-text-on-primary hover:bg-primary-dark", children: "Turn on desktop notifications" }), _jsx("button", { type: "button", onClick: offer.onDecline, className: "rounded-sm px-2 py-1 text-xs font-medium hover:bg-surface-alt hover:text-text", children: "Not now" })] }))] }));
-}
-/**
- * The new-mail pop-ups, stacked at the top right (`fixed`, above everything). The container is always rendered - a live region
- * has to exist before its content changes to be announced - and is a polite `status` region, so an arrival is read out without
- * interrupting. Each pop-up shows the sender's name and address, the subject and a short preview, as text; clicking it opens the
- * message; it has a dismiss button and goes by itself after a few seconds (see `ToastItem`). Motion is CSS-only and switched off
- * by `prefers-reduced-motion` (`.rr-toast-in` in `app.css`).
- */
-export default function NewMailToasts({ toasts, onDismiss, offerDesktop, onEnableDesktop, onDeclineDesktop }) {
-    const tabHidden = useTabHidden();
-    return (_jsx("div", { role: "status", "aria-live": "polite", "aria-label": "New mail", "data-testid": "new-mail-toasts", className: "pointer-events-none fixed right-4 top-4 z-50 flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col gap-2", children: toasts.map((toast, index) => (_jsx(ToastItem, { toast: toast, tabHidden: tabHidden, onDismiss: onDismiss, offer: offerDesktop && index === 0 ? { onEnable: onEnableDesktop, onDecline: onDeclineDesktop } : undefined }, toast.uid))) }));
-}

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

@@ -1,14 +0,0 @@
-import React from "react";
-export interface SendFailureAlertProps {
-    /** The plain, human message - always shown. */
-    message: string;
-    /** The technical facts behind it (`describeSendFailure().lines`): per-recipient SMTP results, a transport error.
-     * With none, only the message is shown. */
-    lines: string[];
-}
-/**
- * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
- * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
- * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
- */
-export default function SendFailureAlert({ message, lines }: SendFailureAlertProps): React.JSX.Element;

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

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
-/**
- * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
- * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
- * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
- */
-export default function SendFailureAlert({ message, lines }) {
-    return (_jsx(Alert, { children: _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "font-semibold break-words", children: message }), lines.length > 0 && (_jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs font-semibold", children: "Technical details" }), _jsx("ul", { "aria-label": "Technical details", className: "mt-2 max-h-40 overflow-auto rounded-sm border border-border bg-surface p-2 text-xs font-mono text-text select-text", children: lines.map((line, index) => (_jsx("li", { className: "whitespace-pre-wrap break-words", children: line }, index))) }), _jsx("div", { className: "mt-2", children: _jsx(CopyButton, { value: lines.join("\n"), label: "Copy technical details" }) })] }))] }) }));
-}