@rapidmx/web-client 0.28.0 → 0.30.0

package/dist/lib/calendar/eventSearch.js

@@ -0,0 +1,152 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The calendar's search: which events match what was typed, and the chronological list of their occurrences to step through. The calendar page
+ * already holds every event of the checked calendars (`listCalendarEvents()` fetches whole folders - there is no server-side text or range query
+ * to lean on), so this is entirely client-side and covers all time, not just the visible range. A series contributes the occurrences inside a window
+ * of `SEARCH_WINDOW_YEARS` either side of today, at most `SEARCH_MAX_OCCURRENCES_PER_SERIES` of them (the ones nearest today).
+ */
+import { addYears } from "date-fns";
+import { expandOccurrences } from "./recurrence.js";
+/** How far either side of today a recurring event's occurrences are searched. */
+export const SEARCH_WINDOW_YEARS = 5;
+/** The most occurrences one recurring event contributes (the ones nearest today), so a daily series cannot flood the results. */
+export const SEARCH_MAX_OCCURRENCES_PER_SERIES = 500;
+/** Lower-cases `text` and strips its accents, so "cafe" finds "Café". */
+function fold(text) {
+    return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
+/** The words of `query`, folded; an event must match every one of them. Empty for a blank query. */
+export function searchTerms(query) {
+    return fold(query)
+        .split(/\s+/)
+        .filter((term) => term !== "");
+}
+/** The text of `event` a search looks in: title, location, description (plain text), organizer and guests (name and address). */
+function searchableText(event) {
+    const parts = [
+        event.title,
+        event.location,
+        event.description,
+        event.organizer?.displayName,
+        event.organizer?.address,
+    ];
+    for (const attendee of event.attendees ?? []) {
+        parts.push(attendee.displayName, attendee.address);
+    }
+    return fold(parts.filter(Boolean).join("\n"));
+}
+/**
+ * Whether `event` has every one of `terms` (from `searchTerms()`) somewhere in its readable text. A busy block (`redacted`: a private event on a
+ * shared calendar) never matches - its title is a placeholder, not what the event says.
+ */
+export function eventMatchesTerms(event, terms) {
+    if (terms.length === 0 || event.redacted) {
+        return false;
+    }
+    const text = searchableText(event);
+    return terms.every((term) => text.includes(term));
+}
+function byStart(a, b) {
+    return new Date(a.startDate).getTime() - new Date(b.startDate).getTime() || a.title.localeCompare(b.title);
+}
+/**
+ * The occurrences of the events of `events` that match `query`, in chronological order. A single event is one occurrence wherever it falls; a
+ * recurring one contributes those within `SEARCH_WINDOW_YEARS` of `now`, the `SEARCH_MAX_OCCURRENCES_PER_SERIES` nearest to it at most.
+ */
+export function searchOccurrences(events, query, now = new Date()) {
+    const terms = searchTerms(query);
+    return occurrencesOf(events, (event) => eventMatchesTerms(event, terms), now);
+}
+/** Every occurrence of every event, in chronological order, bounded the same way a search is - the calendar's List view shows these. */
+export function allOccurrences(events, now = new Date()) {
+    return occurrencesOf(events, () => true, now);
+}
+/** The chronological occurrences of the `events` that `include` accepts (see `searchOccurrences()` for how a series is bounded). */
+function occurrencesOf(events, include, now) {
+    const from = addYears(now, -SEARCH_WINDOW_YEARS);
+    const to = addYears(now, SEARCH_WINDOW_YEARS);
+    const found = [];
+    for (const event of events) {
+        if (!include(event)) {
+            continue;
+        }
+        if (!event.recurrenceRule) {
+            found.push(...expandOccurrences(event, new Date(new Date(event.startDate).getTime() - 1), new Date(new Date(event.endDate).getTime() + 1)));
+            continue;
+        }
+        const occurrences = expandOccurrences(event, from, to);
+        if (occurrences.length > SEARCH_MAX_OCCURRENCES_PER_SERIES) {
+            const distance = (o) => Math.abs(new Date(o.startDate).getTime() - now.getTime());
+            occurrences.sort((a, b) => distance(a) - distance(b)).length = SEARCH_MAX_OCCURRENCES_PER_SERIES;
+        }
+        found.push(...occurrences);
+    }
+    return found.sort(byStart);
+}
+/** The `occurrences` that overlap `[rangeStart, rangeEnd]` - what `expandOccurrences()` keeps, so a view shows exactly these. */
+export function occurrencesInRange(occurrences, rangeStart, rangeEnd) {
+    return occurrences.filter((o) => new Date(o.startDate) < rangeEnd && new Date(o.endDate) > rangeStart);
+}
+/**
+ * Which of the chronological `matches` to show first for a search: the first one inside the view (`[rangeStart, rangeEnd]`) when there is one,
+ * else the first that ends after `from` (the day being viewed), else the last (the nearest before). `-1` when there are no matches.
+ */
+export function initialMatchIndex(matches, rangeStart, rangeEnd, from) {
+    if (matches.length === 0) {
+        return -1;
+    }
+    const inView = matches.findIndex((o) => new Date(o.startDate) < rangeEnd && new Date(o.endDate) > rangeStart);
+    if (inView >= 0) {
+        return inView;
+    }
+    const after = matches.findIndex((o) => new Date(o.endDate) > from);
+    return after >= 0 ? after : matches.length - 1;
+}
+/**
+ * The index of the occurrence one step from the current one in `sequence` (chronological), or `-1` for none. The current occurrence is found by
+ * `currentKey`; when it is not in the sequence (it was deleted or changed under an open card) the step is from where it started
+ * (`currentStart`): the first after it or the last before it, and from the first or last when that is not known either. Past either end it
+ * wraps round when `wrap`, else there is nothing there (`-1`).
+ */
+export function stepSequenceIndex(sequence, currentKey, currentStart, direction, wrap) {
+    const count = sequence.length;
+    if (count === 0) {
+        return -1;
+    }
+    const edge = direction === 1 ? 0 : count - 1;
+    const index = sequence.findIndex((o) => o.occurrenceKey === currentKey);
+    if (index >= 0) {
+        const target = index + direction;
+        if (target >= 0 && target < count) {
+            return target;
+        }
+        return wrap ? edge : -1;
+    }
+    if (!currentStart) {
+        return edge;
+    }
+    const from = currentStart.getTime();
+    let target = -1;
+    if (direction === 1) {
+        target = sequence.findIndex((o) => new Date(o.startDate).getTime() > from);
+    }
+    else {
+        for (let i = count - 1; i >= 0 && target < 0; i--) {
+            target = new Date(sequence[i].startDate).getTime() < from ? i : -1;
+        }
+    }
+    return target >= 0 ? target : wrap ? edge : -1;
+}
+/** The index one step from `index` (`-1`: none is current) in `direction` through `count` matches, wrapping round at either end. `-1` with none. */
+export function stepMatchIndex(index, count, direction) {
+    if (count === 0) {
+        return -1;
+    }
+    if (index < 0) {
+        return direction === 1 ? 0 : count - 1;
+    }
+    return (index + direction + count) % count;
+}

package/dist/lib/components/navigation/BottomTabBar.d.ts

@@ -8,11 +8,24 @@ export interface NavItem {
     href: string;
     label: string;
     icon: IconType;
+    /** A count drawn as a chip on the icon (unread mail) and named in the link's accessible name; nothing at zero or when absent. */
+    badge?: number;
 }
 export interface BottomTabBarProps {
     apps: NavItem[];
     active: string;
 }
+/** The most entries the bar shows at once: any more and the last slot becomes "More", holding the rest. */
+export declare const MAX_TABS = 5;
+/**
+ * The entries to draw directly on the bar and the ones left for the "More" menu. Up to `MAX_TABS` entries all show. With more, the bar shows the first
+ * `MAX_TABS - 1` and "More" holds the rest - except that the active entry is always on the bar (it takes the last slot when it would otherwise be hidden), so the reader
+ * can see where they are.
+ */
+export declare function splitTabs(apps: NavItem[], active: string): {
+    shown: NavItem[];
+    more: NavItem[];
+};
 /**
  * The mobile counterpart to an icon rail (`AppShell`'s Mail/Calendar/Contacts/Tasks, or `AdminShell`'s
  * Mailboxes/Quarantine/Ingest Queue) — same data, same full-page-nav `<a href>` links (this framework
@@ -20,8 +33,7 @@ export interface BottomTabBarProps {
  * which doesn't fit below the `md` breakpoint. Only ever rendered alongside that rail (`md:hidden` here,
  * `hidden md:flex` there) — never both hidden or both visible at once.
  *
- * A few items share the width equally; a long list (the admin console has ten or so) doesn't fit at a readable size, so each
- * item keeps a minimum width, its label wraps onto a second line rather than running into its neighbour's, and the bar scrolls
- * sideways - opening with the active item in view.
+ * The entries share the width equally and never run off the screen: with more than `MAX_TABS`, the last slot is a "More" (…) button that opens a menu
+ * of the others (see `splitTabs()`). The menu closes on Escape, on a click elsewhere and on choosing an entry.
  */
 export default function BottomTabBar({ apps, active }: BottomTabBarProps): React.JSX.Element;

package/dist/lib/components/navigation/BottomTabBar.js

@@ -3,7 +3,27 @@ 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 } from "react";
+import { useEffect, useRef, useState } from "react";
+import { HiOutlineEllipsisHorizontal } from "react-icons/hi2";
+import NavBadge, { navItemLabel } from "./NavBadge.js";
+/** The most entries the bar shows at once: any more and the last slot becomes "More", holding the rest. */
+export const MAX_TABS = 5;
+/**
+ * The entries to draw directly on the bar and the ones left for the "More" menu. Up to `MAX_TABS` entries all show. With more, the bar shows the first
+ * `MAX_TABS - 1` and "More" holds the rest - except that the active entry is always on the bar (it takes the last slot when it would otherwise be hidden), so the reader
+ * can see where they are.
+ */
+export function splitTabs(apps, active) {
+    if (apps.length <= MAX_TABS) {
+        return { shown: apps, more: [] };
+    }
+    const slots = MAX_TABS - 1;
+    const activeItem = apps.find((app) => app.id === active);
+    const hidden = !!activeItem && apps.indexOf(activeItem) >= slots;
+    const shown = hidden ? [...apps.slice(0, slots - 1), activeItem] : apps.slice(0, slots);
+    return { shown, more: apps.filter((app) => !shown.includes(app)) };
+}
+const TAB_CLASS = "flex-1 min-w-0 overflow-hidden px-1 flex flex-col items-center justify-center gap-0.5 text-[10px] leading-tight text-center font-medium";
 /**
  * The mobile counterpart to an icon rail (`AppShell`'s Mail/Calendar/Contacts/Tasks, or `AdminShell`'s
  * Mailboxes/Quarantine/Ingest Queue) — same data, same full-page-nav `<a href>` links (this framework
@@ -11,22 +31,39 @@ import { useEffect, useRef } from "react";
  * which doesn't fit below the `md` breakpoint. Only ever rendered alongside that rail (`md:hidden` here,
  * `hidden md:flex` there) — never both hidden or both visible at once.
  *
- * A few items share the width equally; a long list (the admin console has ten or so) doesn't fit at a readable size, so each
- * item keeps a minimum width, its label wraps onto a second line rather than running into its neighbour's, and the bar scrolls
- * sideways - opening with the active item in view.
+ * The entries share the width equally and never run off the screen: with more than `MAX_TABS`, the last slot is a "More" (…) button that opens a menu
+ * of the others (see `splitTabs()`). The menu closes on Escape, on a click elsewhere and on choosing an entry.
  */
 export default function BottomTabBar({ apps, active }) {
-    const activeRef = useRef(null);
+    const { shown, more } = splitTabs(apps, active);
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    const buttonRef = useRef(null);
     useEffect(() => {
-        const item = activeRef.current;
-        const bar = item?.parentElement;
-        if (item && bar && bar.scrollWidth > bar.clientWidth) {
-            // Set directly rather than `scrollIntoView()`, which would scroll the page as well.
-            bar.scrollLeft = item.offsetLeft - (bar.clientWidth - item.offsetWidth) / 2;
+        if (!open) {
+            return;
+        }
+        function handlePointer(event) {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        }
+        function handleKey(event) {
+            if (event.key === "Escape") {
+                setOpen(false);
+                buttonRef.current?.focus();
+            }
         }
-    }, [active]);
-    return (_jsx("nav", { "aria-label": "Mobile navigation", className: "md:hidden fixed bottom-0 inset-x-0 z-30 h-14 bg-surface border-t border-border flex items-stretch overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: apps.map(({ id, href, label, icon: Icon }) => (_jsxs("a", { href: href, ref: id === active ? activeRef : undefined, "aria-current": id === active ? "page" : undefined, className: [
-                "flex-1 shrink-0 min-w-[4.75rem] px-1 flex flex-col items-center justify-center gap-0.5 text-[10px] leading-tight text-center font-medium",
-                id === active ? "text-primary-dark" : "text-text-muted",
-            ].join(" "), children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), label] }, id))) }));
+        document.addEventListener("mousedown", handlePointer);
+        document.addEventListener("touchstart", handlePointer);
+        document.addEventListener("keydown", handleKey);
+        return () => {
+            document.removeEventListener("mousedown", handlePointer);
+            document.removeEventListener("touchstart", handlePointer);
+            document.removeEventListener("keydown", handleKey);
+        };
+    }, [open]);
+    // The unread count of an entry that is behind "More" is still worth a dot on it.
+    const hiddenBadge = more.some((app) => (app.badge ?? 0) > 0);
+    return (_jsxs("nav", { "aria-label": "Mobile navigation", className: "md:hidden fixed bottom-0 inset-x-0 z-30 h-14 bg-surface border-t border-border flex items-stretch", children: [shown.map(({ id, href, label, icon: Icon, badge }) => (_jsxs("a", { href: href, "aria-label": badge ? navItemLabel(label, badge) : undefined, "aria-current": id === active ? "page" : undefined, className: [TAB_CLASS, id === active ? "text-primary-dark" : "text-text-muted"].join(" "), children: [_jsxs("span", { className: "relative inline-flex", children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), _jsx(NavBadge, { count: badge })] }), label] }, id))), more.length > 0 && (_jsxs("div", { ref: rootRef, className: "flex-1 min-w-0 flex items-stretch relative", children: [_jsxs("button", { ref: buttonRef, type: "button", "aria-label": hiddenBadge ? "More, with unread items" : "More", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((value) => !value), className: [TAB_CLASS, "w-full", open ? "text-primary-dark" : "text-text-muted"].join(" "), children: [_jsxs("span", { className: "relative inline-flex", children: [_jsx(HiOutlineEllipsisHorizontal, { size: 20, "aria-hidden": "true" }), hiddenBadge && _jsx("span", { "aria-hidden": "true", "data-testid": "more-dot", className: "absolute -top-0.5 -right-1 size-2 rounded-full bg-danger" })] }), _jsx("span", { children: "More" })] }), open && (_jsx("ul", { role: "menu", "aria-label": "More", className: "absolute bottom-full right-1 mb-2 min-w-48 max-w-[calc(100vw-1rem)] rounded-md border border-border bg-surface py-1 shadow-modal", children: more.map(({ id, href, label, icon: Icon, badge }) => (_jsx("li", { role: "none", children: _jsxs("a", { role: "menuitem", href: href, "aria-label": badge ? navItemLabel(label, badge) : undefined, onClick: () => setOpen(false), className: "flex items-center gap-3 px-4 py-3 text-sm text-text hover:bg-surface-alt focus-visible:outline-2 focus-visible:outline-primary", children: [_jsxs("span", { className: "relative inline-flex", children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), _jsx(NavBadge, { count: badge })] }), label] }) }, id))) }))] }))] }));
 }

package/dist/lib/components/navigation/NavBadge.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+/** The most a nav badge spells out; a larger count reads "99+". */
+export declare const NAV_BADGE_MAX = 99;
+/** A nav item's accessible name: its label, plus its unread count when it has one ("Mail, 3 unread"). */
+export declare function navItemLabel(label: string, badge?: number): string;
+/**
+ * The small round count chip on the corner of a nav icon (the Mail rail icon's unread mail). Drawn only for a count above zero; it is
+ * hidden from assistive technology because the link it sits on carries the count in its own name (`navItemLabel()`). Position it by
+ * placing it inside a `relative` wrapper around the icon.
+ */
+export default function NavBadge({ count }: {
+    count?: number;
+}): React.JSX.Element | null;

package/dist/lib/components/navigation/NavBadge.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The most a nav badge spells out; a larger count reads "99+". */
+export const NAV_BADGE_MAX = 99;
+/** A nav item's accessible name: its label, plus its unread count when it has one ("Mail, 3 unread"). */
+export function navItemLabel(label, badge) {
+    return badge ? `${label}, ${badge} unread` : label;
+}
+/**
+ * The small round count chip on the corner of a nav icon (the Mail rail icon's unread mail). Drawn only for a count above zero; it is
+ * hidden from assistive technology because the link it sits on carries the count in its own name (`navItemLabel()`). Position it by
+ * placing it inside a `relative` wrapper around the icon.
+ */
+export default function NavBadge({ count }) {
+    if (!count) {
+        return null;
+    }
+    return (_jsx("span", { "aria-hidden": "true", "data-testid": "nav-badge", className: "absolute -top-1.5 -right-2 min-w-4 h-4 px-1 rounded-pill bg-danger text-white text-[10px] font-bold leading-4 text-center", children: count > NAV_BADGE_MAX ? `${NAV_BADGE_MAX}+` : count }));
+}

package/dist/lib/mail/compose/quotedImages.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The pictures of a quoted original, carried into the reply or forward. The original refers to its embedded images by `cid:` (or, when
+ * the server could not tie one to a part, by nothing but its `alt`), which means nothing in a message of its own - so each is replaced by a
+ * `data:` URI of the picture itself. The editor shows it as it is; `assembleDraft()` attaches it to the draft as an inline part when the
+ * draft is saved, which is how it reaches the recipient (the server composes a plain message from attachments, never from `data:` URIs).
+ */
+/** The largest picture quoted. A larger one is left out of the quote rather than bloating the editor and the request that saves it. */
+export declare const MAX_QUOTED_IMAGE_BYTES = 2000000;
+/** The most picture data a quote carries, in all (as `data:` URI characters). */
+export declare const MAX_QUOTED_IMAGES_CHARS = 6000000;
+export interface QuotedImageReference {
+    /** The token of a `cid:` reference, absent for an image with no source. */
+    cid?: string;
+    alt?: string;
+}
+/**
+ * `html` with each of its embedded images (`cid:`, or no source at all) replaced by the `data:` URI `resolve` gives for it. An image
+ * `resolve` has no picture for is left as it is (the quote's sanitizer then drops it); images that already are `data:` URIs and remote
+ * ones are not asked about. `html` is returned as given when it has no such image, or where there is no DOM to parse it with.
+ */
+export declare function embedQuotedImages(html: string, resolve: (reference: QuotedImageReference) => Promise<string | undefined>): Promise<string>;

package/dist/lib/mail/compose/quotedImages.js

@@ -0,0 +1,41 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The pictures of a quoted original, carried into the reply or forward. The original refers to its embedded images by `cid:` (or, when
+ * the server could not tie one to a part, by nothing but its `alt`), which means nothing in a message of its own - so each is replaced by a
+ * `data:` URI of the picture itself. The editor shows it as it is; `assembleDraft()` attaches it to the draft as an inline part when the
+ * draft is saved, which is how it reaches the recipient (the server composes a plain message from attachments, never from `data:` URIs).
+ */
+/** The largest picture quoted. A larger one is left out of the quote rather than bloating the editor and the request that saves it. */
+export const MAX_QUOTED_IMAGE_BYTES = 2000000;
+/** The most picture data a quote carries, in all (as `data:` URI characters). */
+export const MAX_QUOTED_IMAGES_CHARS = 6000000;
+/**
+ * `html` with each of its embedded images (`cid:`, or no source at all) replaced by the `data:` URI `resolve` gives for it. An image
+ * `resolve` has no picture for is left as it is (the quote's sanitizer then drops it); images that already are `data:` URIs and remote
+ * ones are not asked about. `html` is returned as given when it has no such image, or where there is no DOM to parse it with.
+ */
+export async function embedQuotedImages(html, resolve) {
+    if (typeof DOMParser === "undefined" || !/<img\b/i.test(html)) {
+        return html;
+    }
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    let budget = MAX_QUOTED_IMAGES_CHARS;
+    let changed = false;
+    for (const image of Array.from(doc.querySelectorAll("img"))) {
+        const src = (image.getAttribute("src") ?? "").trim();
+        const cid = /^cid:/i.test(src);
+        if (!cid && src !== "") {
+            continue;
+        }
+        const uri = await resolve({ ...(cid ? { cid: src.slice(4) } : {}), alt: image.getAttribute("alt") ?? undefined });
+        if (uri !== undefined && uri.length <= budget) {
+            budget -= uri.length;
+            image.setAttribute("src", uri);
+            changed = true;
+        }
+    }
+    return changed ? doc.body.innerHTML : html;
+}

package/dist/lib/mail/inlineImages.d.ts

@@ -0,0 +1,38 @@
+/**
+ * How a message's embedded images are found among its attachments, shared by the reading pane (which shows them) and the reply/forward
+ * quote (which carries them into the new message). Pure: nothing here touches the network or the DOM.
+ */
+/** The image types an embedded image may have: raster only. SVG is left out - a quote becomes part of a message this server sends. */
+export declare const EMBEDDED_IMAGE_TYPES: RegExp;
+/** What identifies an attachment as far as embedded images are concerned. */
+export interface InlineCandidate {
+    uid: string;
+    filename: string;
+    mimeType: string;
+    contentId?: string;
+}
+/**
+ * A `Content-ID` (or the token of a `cid:` URL) in the one form two references to the same part have in common: without the angle brackets of
+ * the header, percent-decoding undone (a `cid:` URL is a URL), and in lower case (mail clients disagree on the case they write it in).
+ */
+export declare function normalizeContentId(value: string): string;
+/**
+ * The attachment an embedded image stands for: the one whose `Content-ID` is `cid` (see `normalizeContentId()`) or, for an image that
+ * names no part we can find - a message from an older version of this app attached the picture without a `Content-ID`, and the server
+ * then leaves the `<img>` with its `alt` only - the one image attachment whose file name is `alt`, when there is exactly one.
+ */
+export declare function findInlineAttachment<T extends InlineCandidate>(attachments: T[] | undefined, reference: {
+    cid?: string;
+    alt?: string;
+}): T | undefined;
+/** The base64 of `bytes`. */
+export declare function bytesToBase64(bytes: Uint8Array): string;
+/** A `data:` URI of `bytes` as `contentType`. */
+export declare function toDataUri(contentType: string, bytes: Uint8Array): string;
+/** The type and bytes of a base64 `data:image/...` URI, or `undefined` for anything else. */
+export declare function parseDataImage(uri: string): {
+    contentType: string;
+    bytes: Uint8Array;
+} | undefined;
+/** A new `Content-ID` for an image about to be attached to a draft. */
+export declare function newContentId(): string;

package/dist/lib/mail/inlineImages.js

@@ -0,0 +1,90 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * How a message's embedded images are found among its attachments, shared by the reading pane (which shows them) and the reply/forward
+ * quote (which carries them into the new message). Pure: nothing here touches the network or the DOM.
+ */
+/** The image types an embedded image may have: raster only. SVG is left out - a quote becomes part of a message this server sends. */
+export const EMBEDDED_IMAGE_TYPES = /^image\/(?:png|jpe?g|gif|webp|avif|bmp)$/i;
+/**
+ * A `Content-ID` (or the token of a `cid:` URL) in the one form two references to the same part have in common: without the angle brackets of
+ * the header, percent-decoding undone (a `cid:` URL is a URL), and in lower case (mail clients disagree on the case they write it in).
+ */
+export function normalizeContentId(value) {
+    let text = value.trim();
+    try {
+        text = decodeURIComponent(text);
+    }
+    catch {
+        // Not percent-encoded after all (a `%` of its own): taken as written.
+    }
+    return text.trim().replace(/^<|>$/g, "").toLowerCase();
+}
+/** A file name as a person would compare two of them: form-encoding (`+` for a space) and case undone. */
+function normalizeFilename(value) {
+    let text = value.trim().replace(/\+/g, " ");
+    try {
+        text = decodeURIComponent(text);
+    }
+    catch {
+        // Taken as written.
+    }
+    return text.toLowerCase();
+}
+/**
+ * The attachment an embedded image stands for: the one whose `Content-ID` is `cid` (see `normalizeContentId()`) or, for an image that
+ * names no part we can find - a message from an older version of this app attached the picture without a `Content-ID`, and the server
+ * then leaves the `<img>` with its `alt` only - the one image attachment whose file name is `alt`, when there is exactly one.
+ */
+export function findInlineAttachment(attachments, reference) {
+    if (!attachments) {
+        return undefined;
+    }
+    if (reference.cid !== undefined) {
+        const wanted = normalizeContentId(reference.cid);
+        const byId = attachments.find((attachment) => attachment.contentId && normalizeContentId(attachment.contentId) === wanted);
+        if (byId) {
+            return byId;
+        }
+    }
+    const alt = reference.alt?.trim();
+    if (!alt) {
+        return undefined;
+    }
+    const wanted = normalizeFilename(alt);
+    const named = attachments.filter((attachment) => EMBEDDED_IMAGE_TYPES.test(attachment.mimeType) && normalizeFilename(attachment.filename) === wanted);
+    return named.length === 1 ? named[0] : undefined;
+}
+/** The base64 of `bytes`. */
+export function bytesToBase64(bytes) {
+    let binary = "";
+    for (let i = 0; i < bytes.length; i += 0x8000) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+    }
+    return btoa(binary);
+}
+/** A `data:` URI of `bytes` as `contentType`. */
+export function toDataUri(contentType, bytes) {
+    return `data:${contentType};base64,${bytesToBase64(bytes)}`;
+}
+const DATA_IMAGE = /^data:(image\/[a-z0-9.+-]+);base64,([a-z0-9+/=\s]*)$/i;
+/** The type and bytes of a base64 `data:image/...` URI, or `undefined` for anything else. */
+export function parseDataImage(uri) {
+    const match = DATA_IMAGE.exec(uri.trim());
+    if (!match) {
+        return undefined;
+    }
+    try {
+        const binary = atob(match[2].replace(/\s/g, ""));
+        return { contentType: match[1].toLowerCase(), bytes: Uint8Array.from(binary, (char) => char.charCodeAt(0)) };
+    }
+    catch {
+        return undefined;
+    }
+}
+/** A new `Content-ID` for an image about to be attached to a draft. */
+export function newContentId() {
+    return `${crypto.randomUUID()}@inline.rapidmx`;
+}

package/dist/lib/mail/mailApi.d.ts

@@ -679,9 +679,13 @@ export interface Attachment {
     mimeType: string;
     sizeBytes: number;
     isInline: boolean;
+    /** The part's `Content-ID`, without angle brackets: what an inline image's `cid:` reference names. */
+    contentId?: string;
 }
 /** Lists the attachments belonging to a single message. */
 export declare function listAttachments(folderUid: string, messageUid: string, client?: ApiClient): Promise<Attachment[]>;
+/** Removes an attachment (from a draft). The server re-derives the message's `hasAttachments` itself. */
+export declare function deleteAttachment(uid: string, version: number, client?: ApiClient): Promise<void>;
 /** The URL to download/display an attachment's binary content — not fetched via `apiFetch`, used directly as
  * a link/image `href`/`src`. Honors `configureApiBaseUrl()` (see `apiUrl()`). */
 export declare function attachmentContentUrl(uid: string): string;
@@ -690,7 +694,10 @@ export declare function attachmentContentUrl(uid: string): string;
  * always forces `Content-Type: application/json`, which would corrupt binary content; this sends the file's
  * own bytes/type directly instead, matching `BaseAttachmentRoute.upload`'s expectation of a raw request body.
  */
-export declare function uploadAttachment(messageUid: string, file: File): Promise<Attachment>;
+export declare function uploadAttachment(messageUid: string, file: File, options?: {
+    inline?: boolean;
+    contentId?: string;
+}): Promise<Attachment>;
 export interface ComposeRecipientInput {
     address: string;
     displayName?: string;

package/dist/lib/mail/mailApi.js

@@ -16,6 +16,7 @@ import { ApiRequestError, apiFetch, apiUrl, authApiFetch, withClient, withCsrfHe
 import { buildQuery } from "../util/apiQuery.js";
 import { deviceTimeZone } from "../util/timeZone.js";
 import { bytesToBinaryString } from "../crypto/mime.js";
+import { newContentId, parseDataImage } from "./inlineImages.js";
 /** Whether `mailbox` is one shared with the caller rather than their own: a delegate grant on somebody's mailbox, or a mailbox with no
  * owner at all (a shared/org mailbox they were granted). */
 export function isSharedWithMe(mailbox) {
@@ -404,6 +405,10 @@ export function declineReceipt(uid, type, client) {
 export function listAttachments(folderUid, messageUid, client) {
     return withClient(client, `/mail/attachments?${buildQuery({ limit: 200 }, { folderUid, messageUid })}`);
 }
+/** Removes an attachment (from a draft). The server re-derives the message's `hasAttachments` itself. */
+export function deleteAttachment(uid, version, client) {
+    return withClient(client, `/mail/attachments/${encodeURIComponent(uid)}?version=${version}`, { method: "DELETE" });
+}
 /** The URL to download/display an attachment's binary content — not fetched via `apiFetch`, used directly as
  * a link/image `href`/`src`. Honors `configureApiBaseUrl()` (see `apiUrl()`). */
 export function attachmentContentUrl(uid) {
@@ -414,9 +419,19 @@ export function attachmentContentUrl(uid) {
  * always forces `Content-Type: application/json`, which would corrupt binary content; this sends the file's
  * own bytes/type directly instead, matching `BaseAttachmentRoute.upload`'s expectation of a raw request body.
  */
-export async function uploadAttachment(messageUid, file) {
-    const params = new URLSearchParams({ messageUid, filename: file.name, mimeType: file.type || "application/octet-stream" });
-    const res = await fetch(apiUrl(`/mail/attachments/upload?${params.toString()}`), {
+export async function uploadAttachment(messageUid, file, options = {}) {
+    // Percent-encoded, not form-encoded (`URLSearchParams` writes a space as `+`, which the server reads as a plus sign: "My+photo.png").
+    const query = { messageUid, filename: file.name, mimeType: file.type || "application/octet-stream" };
+    if (options.inline) {
+        // An image shown in the text of the message: it goes out as an inline part, which the text refers to by this `Content-ID`
+        // (`BaseMailComposeRoute.rewriteInlineImageSources()` turns the editor's preview URL into that `cid:` reference).
+        query.isInline = "true";
+        query.contentId = options.contentId ?? newContentId();
+    }
+    const params = Object.entries(query)
+        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+        .join("&");
+    const res = await fetch(apiUrl(`/mail/attachments/upload?${params}`), {
         method: "POST",
         credentials: "include",
         headers: withCsrfHeader({ "Content-Type": file.type || "application/octet-stream" }),
@@ -490,12 +505,49 @@ export function emptyFolder(folderUid, client) {
  * — see `BaseMailComposeRoute` (this app's own compose-assembly glue, since `@rapidmx/restapi`'s `send()`
  * itself does no MIME composition). Does not send the message.
  */
-export function assembleDraft(messageUid, input, client) {
+export async function assembleDraft(messageUid, input, client) {
+    const html = await attachDataImages(messageUid, input.html);
     return withClient(client, `/mail/compose/${encodeURIComponent(messageUid)}/assemble`, {
         method: "POST",
-        body: JSON.stringify(input),
+        body: JSON.stringify({ ...input, html }),
     });
 }
+/** `data:` images already attached to a draft: its uid and the image, to the URL of the attachment it became. */
+const attachedDataImages = new Map();
+const DATA_IMAGE_TAG = /(<img\b[^>]*?\bsrc\s*=\s*)(["'])(data:image\/[^"']*)\2/gi;
+/** Names a picture by its type, for the attachment it becomes. */
+function pictureName(contentType) {
+    return `image.${contentType.split("/")[1].replace(/\+.*/, "").replace("jpeg", "jpg")}`;
+}
+/**
+ * `html` with each `<img>` that embeds its picture as a `data:` URI (a quoted original's image, one pasted into the editor) pointed at an
+ * attachment of the draft instead: the server drops `data:` images from the message it composes, and an attachment is what it makes an
+ * inline part of. A picture is attached once per draft however often the draft is saved.
+ */
+async function attachDataImages(messageUid, html) {
+    const found = Array.from(html.matchAll(DATA_IMAGE_TAG));
+    if (found.length === 0) {
+        return html;
+    }
+    const urls = new Map();
+    for (const [, , , uri] of found) {
+        const key = `${messageUid}\n${uri}`;
+        const known = attachedDataImages.get(key);
+        if (known) {
+            urls.set(uri, known);
+            continue;
+        }
+        const image = parseDataImage(uri);
+        if (!image) {
+            continue;
+        }
+        const attachment = await uploadAttachment(messageUid, new File([image.bytes], pictureName(image.contentType), { type: image.contentType }), { inline: true });
+        const url = attachmentContentUrl(attachment.uid);
+        attachedDataImages.set(key, url);
+        urls.set(uri, url);
+    }
+    return html.replace(DATA_IMAGE_TAG, (match, start, quote, uri) => (urls.has(uri) ? `${start}${quote}${urls.get(uri)}${quote}` : match));
+}
 /**
  * Stores an already-signed/encrypted draft's raw MIME source as its `bodyBlobKey`, completely
  * unmodified — the E2E counterpart to `assembleDraft()`, for when the message body was built