domma-cms 1.6.57 → 1.6.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "1.6.57",
+  "version": "1.6.59",
   "description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
   "type": "module",
   "main": "server/server.js",

package/plugins/_lib/admin/mail/compose-window.js

@@ -76,6 +76,7 @@ import {applyTemplate, expandTemplate} from './templates.js';
 import {makeResizable} from './resizable.js';
 import {whenClosed} from './when-closed.js';
 import {esc} from './reader-kit.js';
+import {installFontControls} from './font-controls.js';
 import {
     collectGroups,
     currentFragment,
@@ -568,10 +569,12 @@ export function openCompose({
     bodyInput.value = draft.body ?? '';
 
     let editor = null;
+    let fontControls = null;
     if (typeof E?.editor === 'function') {
         try {
             editor = E.editor(editorHost, {mode: 'rich', height: '34vh'});
             editor.setValue(draft.html || textToHtml(draft.body ?? ''));
+            try { fontControls = installFontControls(editor); } catch { fontControls = null; }
         } catch {
             editor = null;
         }
@@ -930,6 +933,9 @@ export function openCompose({
     // The editor is a live component with its own listeners and autosave.
     whenClosed(slideover, () => {
         closed = true;
+        // Before the editor: it closes an open menu (left on <body> by a
+        // Ctrl+Enter send) and drops its dropdowns and window listener.
+        fontControls?.destroy();
         editor?.destroy?.();
         stopResizing();
         for (const suggester of suggesters) suggester.destroy?.();

package/plugins/_lib/admin/mail/font-controls.js

@@ -0,0 +1,375 @@
+/**
+ * Font and size menus for the mail editor (Domma's `E.editor`, rich mode).
+ *
+ * Domma's editor has no font controls of its own, so these are added to its
+ * toolbar here - the same way Domma's own editor extensions do, through the
+ * instance's `_toolbarEl` / `_editorEl`. The lists are `fonts.js`.
+ *
+ * The style is applied by hand, not with `execCommand('fontName')`: that
+ * command writes `<font>` tags, and re-styling part of an already-styled run
+ * makes the browser push the parent's style down as more `<font>` tags. The
+ * sanitiser drops `<font>` (so signatures and templates lost their faces) and
+ * mail carried them out. Instead every text node in the selection gets the
+ * property on its own span - an existing span it alone fills, or a new one -
+ * written as a plain string so the stack keeps its single quotes. With only a
+ * caret, an empty span (holding a zero-width space until something is typed)
+ * takes the style for what comes next. Any `<font>` that arrives anyway, by
+ * paste, is turned into a span on the next input.
+ */
+import {FONT_SIZES, findFont, fontTagStyle, groupedFonts, setStyleProperty, splitStyle} from './fonts.js';
+import {esc} from './reader-kit.js';
+
+const ZWSP = '​';
+const CARET_ATTR = 'data-dm-font-caret';
+
+/**
+ * Add the Font and Size menus to a rich editor's toolbar.
+ *
+ * @param   {object} editor - an `E.editor(..., {mode: 'rich'})` instance
+ * @returns {{destroy: Function}|null} null where the editor or E.dropdown is absent
+ */
+export function installFontControls(editor) {
+    const content = editor?._editorEl;
+    const toolbar = editor?._toolbarEl;
+    if (!content || !toolbar || typeof E?.dropdown !== 'function') return null;
+
+    // The selection as it was when a menu was opened - taken from the live
+    // selection at that moment, so nothing an earlier apply moved is stale.
+    let saved = null;
+    const capture = () => {
+        const selection = document.getSelection();
+        if (!selection?.rangeCount) return;
+        const range = selection.getRangeAt(0);
+        if (content.contains(range.commonAncestorContainer)) saved = range.cloneRange();
+    };
+
+    const restore = () => {
+        content.focus({preventScroll: true});
+        const selection = document.getSelection();
+        const range = saved && content.contains(saved.startContainer) && content.contains(saved.endContainer)
+            ? saved
+            : endOf(content);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return range;
+    };
+
+    const setStyle = (el, prop, value) => {
+        const style = setStyleProperty(el.getAttribute('style') ?? '', prop, value);
+        if (style) el.setAttribute('style', style); else el.removeAttribute('style');
+    };
+
+    /** Style every text node in a (non-collapsed) range. */
+    const styleRange = (range, prop, value) => {
+        // Split the boundary text nodes; a live range follows the split.
+        if (range.endContainer.nodeType === Node.TEXT_NODE && range.endOffset < range.endContainer.length) {
+            range.endContainer.splitText(range.endOffset);
+        }
+        if (range.startContainer.nodeType === Node.TEXT_NODE && range.startOffset > 0) {
+            range.startContainer.splitText(range.startOffset);
+        }
+
+        const nodes = [];
+        const root = range.commonAncestorContainer;
+        if (root.nodeType === Node.TEXT_NODE) {
+            nodes.push(root);
+        } else {
+            const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+            let node;
+            while ((node = walker.nextNode())) {
+                if (!node.length || !range.intersectsNode(node)) continue;
+                if (node === range.endContainer && range.endOffset === 0) continue;
+                if (node === range.startContainer && range.startOffset >= node.length) continue;
+                nodes.push(node);
+            }
+        }
+        if (!nodes.length) return;
+
+        for (const node of nodes) {
+            const parent = node.parentNode;
+            if (parent.nodeName === 'SPAN' && parent !== content && parent.childNodes.length === 1) {
+                setStyle(parent, prop, value);
+            } else {
+                const span = document.createElement('span');
+                span.setAttribute('style', `${prop}: ${value}`);
+                parent.insertBefore(span, node);
+                span.appendChild(node);
+            }
+        }
+
+        range.setStart(nodes[0], 0);
+        range.setEnd(nodes.at(-1), nodes.at(-1).length);
+        const selection = document.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+    };
+
+    /** A caret: the style goes on a placeholder span for what is typed next. */
+    const styleCaret = (range, prop, value) => {
+        const holder = range.startContainer.parentElement?.closest?.(`[${CARET_ATTR}]`);
+        if (holder && content.contains(holder)) {
+            setStyle(holder, prop, value);
+            return;
+        }
+        const span = document.createElement('span');
+        span.setAttribute(CARET_ATTR, '');
+        span.setAttribute('style', `${prop}: ${value}`);
+        const text = document.createTextNode(ZWSP);
+        span.appendChild(text);
+        range.insertNode(span);
+        const selection = document.getSelection();
+        selection.removeAllRanges();
+        selection.collapse(text, 1);
+    };
+
+    /**
+     * Keep the editor free of <font> and of placeholder clutter. Runs after
+     * every apply and on every input, before Domma's own input listener
+     * records the content (capture on the parent).
+     */
+    const tidy = () => {
+        const selection = document.getSelection();
+        const caret = selection?.rangeCount
+            ? [selection.anchorNode, selection.anchorOffset, selection.focusNode, selection.focusOffset]
+            : null;
+        const swapped = new Map();
+
+        for (const el of [...content.querySelectorAll('font')]) {
+            const style = splitStyle(el.getAttribute('style') ?? '')
+                .reduce((acc, [p, v]) => setStyleProperty(acc, p, v), fontTagStyle({
+                    face: el.getAttribute('face'),
+                    size: el.getAttribute('size'),
+                    color: el.getAttribute('color')
+                }));
+            const span = document.createElement('span');
+            if (style) span.setAttribute('style', style);
+            while (el.firstChild) span.appendChild(el.firstChild);
+            el.replaceWith(span);
+            swapped.set(el, span);
+        }
+
+        // Moving the text out of a <font> collapses a caret inside it; the
+        // nodes survive the move, so the caret goes back onto them.
+        if (caret && swapped.size) {
+            const node = n => swapped.get(n) ?? n;
+            const [anchor, anchorOffset, focus, focusOffset] = caret;
+            if (content.contains(node(anchor)) && content.contains(node(focus))) {
+                selection.setBaseAndExtent(node(anchor), anchorOffset, node(focus), focusOffset);
+            }
+        }
+
+        const live = selection?.rangeCount ? selection.getRangeAt(0).startContainer : null;
+        for (const holder of [...content.querySelectorAll(`[${CARET_ATTR}]`)]) {
+            const typed = holder.textContent.replaceAll(ZWSP, '');
+            if (typed) {
+                // Something was typed: drop the placeholder character. A live
+                // selection follows deleteData, so the caret stays put.
+                const walker = document.createTreeWalker(holder, NodeFilter.SHOW_TEXT);
+                let text;
+                while ((text = walker.nextNode())) {
+                    let at;
+                    while ((at = text.data.indexOf(ZWSP)) >= 0) text.deleteData(at, 1);
+                }
+                holder.removeAttribute(CARET_ATTR);
+            } else if (!holder.contains(live)) {
+                holder.remove();
+            }
+        }
+    };
+
+    const scope = content.parentNode ?? content;
+    scope.addEventListener('input', tidy, true);
+
+    const apply = (prop, value) => {
+        const range = restore();
+        if (range.collapsed) styleCaret(range, prop, value);
+        else styleRange(range, prop, value);
+        tidy();
+        // Domma's editor keeps its undo history and counters from input.
+        content.dispatchEvent(new Event('input', {bubbles: true}));
+    };
+
+    // ---- The menus ----------------------------------------------------------
+
+    const group = document.createElement('div');
+    group.className = 'dm-editor-toolbar-group mail-font-controls';
+
+    const fontButton = menuButton('Font', 'Font - the reader sees the first face in its list they have');
+    const sizeButton = menuButton('Size', 'Font size');
+    group.append(fontButton, sizeButton);
+    toolbar.appendChild(group);
+
+    let currentFont = null;
+    let currentSize = null;
+
+    const fontItems = groupedFonts().flatMap(g => [
+        {header: g.label},
+        ...g.fonts.map(font => ({label: font.label, value: font.id, stack: font.stack, webFont: font.webFont}))
+    ]);
+
+    const fontMenu = E.dropdown(fontButton, {
+        items: fontItems,
+        itemTemplate: item => `<span class="mail-font-item" data-mail-menu="font" style="font-family: ${esc(item.stack)}">${esc(item.label)}</span>`
+            + (item.webFont ? '<span class="mail-font-web" title="Not loaded into the message - readers without it see the fallback">web</span>' : ''),
+        onSelect: ({value}) => {
+            const font = findFont(value);
+            if (!font) return;
+            apply('font-family', font.stack);
+            currentFont = font.id;
+            fontButton.textContent = font.label;
+            fontButton.style.fontFamily = font.stack;
+        }
+    });
+
+    const sizeMenu = E.dropdown(sizeButton, {
+        items: FONT_SIZES.map(px => ({label: `${px}px`, value: String(px)})),
+        itemTemplate: item => `<span class="mail-size-item" data-mail-menu="size">${esc(item.label)}</span>`,
+        onSelect: ({value}) => {
+            const px = Number(value);
+            if (!FONT_SIZES.includes(px)) return;
+            apply('font-size', `${px}px`);
+            currentSize = String(px);
+            sizeButton.textContent = `${px}px`;
+        }
+    });
+
+    const menus = [
+        {kind: 'font', dropdown: fontMenu, button: fontButton, current: () => currentFont},
+        {kind: 'size', dropdown: sizeMenu, button: sizeButton, current: () => currentSize}
+    ];
+
+    const menuElement = kind => document
+        .querySelector(`.domma-dropdown-menu.show [data-mail-menu="${kind}"]`)
+        ?.closest('.domma-dropdown-menu') ?? null;
+
+    const closeMenu = (menu, focusButton) => {
+        menu.dropdown.close();
+        if (focusButton) menu.button.focus();
+    };
+
+    // Keyboard inside an open menu. Every key handled here stops here, so an
+    // Enter that picks a font can never reach the compose window's send keys.
+    const onMenuKey = (menu, event) => {
+        const items = [...event.currentTarget.querySelectorAll('.domma-dropdown-item')];
+        const index = items.indexOf(document.activeElement);
+        const move = to => items[(to + items.length) % items.length]?.focus();
+        const keys = {
+            ArrowDown: () => move(index + 1),
+            ArrowUp: () => move(index < 0 ? items.length - 1 : index - 1),
+            Home: () => move(0),
+            End: () => move(items.length - 1),
+            Enter: () => (items[index] ?? items[0])?.click(),
+            ' ': () => (items[index] ?? items[0])?.click(),
+            Tab: () => closeMenu(menu, true),
+            Escape: () => closeMenu(menu, true)
+        };
+        const act = keys[event.key];
+        if (!act) return;
+        event.preventDefault();
+        event.stopPropagation();
+        act();
+    };
+
+    const bound = new WeakSet();
+    const focusMenu = menu => {
+        const el = menuElement(menu.kind);
+        if (!el) return;
+        const items = [...el.querySelectorAll('.domma-dropdown-item')];
+        for (const item of items) item.tabIndex = -1;
+        if (!bound.has(el)) {
+            bound.add(el);
+            el.addEventListener('keydown', event => onMenuKey(menu, event));
+        }
+        const current = items.find(item => item.dataset.value === menu.current()) ?? items[0];
+        if (!current) return;
+        current.scrollIntoView?.({block: 'nearest'});
+        // The menu fades in from `visibility: hidden`, and an invisible item
+        // refuses focus - so keep trying for the length of the fade.
+        let tries = 0;
+        const attempt = () => {
+            if (!el.isConnected || !el.classList.contains('show')) return;
+            current.focus({preventScroll: true});
+            if (document.activeElement !== current && ++tries < 30) requestAnimationFrame(attempt);
+        };
+        attempt();
+    };
+
+    for (const menu of menus) {
+        // The button keeps the editor's selection (mousedown is cancelled), so
+        // it is still live here; capture only takes one inside the editor.
+        menu.button.addEventListener('click', () => {
+            capture();
+            queueMicrotask(() => { if (menu.dropdown.isOpen?.()) focusMenu(menu); });
+        });
+    }
+
+    // Escape with a menu open closes the MENU. Domma's dropdown and the
+    // compose slideover both listen on document, so without this one Escape
+    // shuts the menu and the whole compose window. Window capture runs first.
+    const onEscape = event => {
+        if (event.key !== 'Escape') return;
+        if (!content.isConnected) {
+            window.removeEventListener('keydown', onEscape, true);
+            return;
+        }
+        const open = menus.find(menu => menu.dropdown?.isOpen?.());
+        if (!open) return;
+        event.preventDefault();
+        event.stopPropagation();
+        closeMenu(open, true);
+    };
+    window.addEventListener('keydown', onEscape, true);
+
+    return {
+        destroy() {
+            window.removeEventListener('keydown', onEscape, true);
+            scope.removeEventListener('input', tidy, true);
+            for (const menu of menus) {
+                try { menu.dropdown?.close?.(); } catch { /* gone */ }
+                try { menu.dropdown?.destroy?.(); } catch { /* gone */ }
+            }
+            group.remove();
+        }
+    };
+}
+
+/**
+ * A collapsed range at the end of an element.
+ *
+ * @param   {HTMLElement} el
+ * @returns {Range}
+ */
+function endOf(el) {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    return range;
+}
+
+/**
+ * A toolbar button that opens a menu without taking the editor's focus.
+ *
+ * @param   {string} label
+ * @param   {string} title
+ * @returns {HTMLButtonElement}
+ */
+function menuButton(label, title) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'dm-editor-toolbar-btn mail-font-btn';
+    button.title = title;
+    button.setAttribute('aria-haspopup', 'menu');
+    button.textContent = label;
+    button.addEventListener('mousedown', event => event.preventDefault());
+    // The mail reader's single-key shortcuts listen on document and claim
+    // Enter (open message) - which would cancel the click Enter makes here.
+    button.addEventListener('keydown', event => {
+        if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            event.stopPropagation();
+            button.click();
+        }
+    });
+    return button;
+}

package/plugins/_lib/admin/mail/fonts.js

@@ -0,0 +1,279 @@
+/**
+ * The fonts and sizes the mail editor offers - pure, so both the compose
+ * window and the settings editors (signatures, templates, away message) use
+ * one list, and it can be checked without a browser.
+ *
+ * Mail is not a web page: there is no font loading worth relying on. Outlook
+ * on Windows ignores web fonts outright, Gmail only honours its own Google
+ * faces, and a font the reader has not got is replaced by whatever the client
+ * likes. So every entry is a STACK - the face asked for, then the nearest
+ * faces commonly installed, then a generic family - and the stack is what
+ * goes into the message as inline `font-family`. A reader without Calibri
+ * still gets a clean sans-serif, never Times by accident.
+ *
+ * Stacks quote multi-word names with SINGLE quotes, and the editor writes
+ * them into `style` as plain strings (`setStyleProperty`) rather than through
+ * the CSSOM, so they stay that way. Where the browser does rewrite a style it
+ * uses `"`, serialised as `"` - legal HTML that the sanitiser and mail
+ * clients read the same; the single quotes are only the tidier form.
+ *
+ * Web fonts (Roboto, Open Sans, ...) are offered because people ask for them
+ * by name, but are flagged `webFont`: nothing loads them into the message, so
+ * the mail shows the face only where the reader has it installed (or the
+ * client supplies it) and the fallback everywhere else.
+ */
+
+/** Group ids in menu order, with their headings. */
+export const FONT_GROUPS = Object.freeze([
+    Object.freeze({id: 'sans', label: 'Sans-serif'}),
+    Object.freeze({id: 'serif', label: 'Serif'}),
+    Object.freeze({id: 'mono', label: 'Monospace'}),
+    Object.freeze({id: 'display', label: 'Display & handwriting'}),
+    Object.freeze({id: 'web', label: 'Web fonts (need a fallback)'}),
+    Object.freeze({id: 'generic', label: 'Generic families'})
+]);
+
+const SANS = "Arial, 'Helvetica Neue', Helvetica, sans-serif";
+const SERIF = "Georgia, 'Times New Roman', Times, serif";
+const MONO = "'Courier New', Courier, monospace";
+
+/**
+ * [id, label, group, stack, webFont?]. The id is stable (it may be stored);
+ * the label is what the menu says.
+ */
+const TABLE = [
+    // ---- Sans-serif -------------------------------------------------------
+    ['arial', 'Arial', 'sans', "Arial, 'Helvetica Neue', Helvetica, sans-serif"],
+    ['arial-black', 'Arial Black', 'sans', "'Arial Black', 'Arial Bold', Gadget, Arial, sans-serif"],
+    ['helvetica', 'Helvetica', 'sans', "'Helvetica Neue', Helvetica, Arial, sans-serif"],
+    ['verdana', 'Verdana', 'sans', 'Verdana, Geneva, Tahoma, sans-serif'],
+    ['tahoma', 'Tahoma', 'sans', 'Tahoma, Verdana, Geneva, Segoe, sans-serif'],
+    ['trebuchet', 'Trebuchet MS', 'sans', "'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif"],
+    ['segoe', 'Segoe UI', 'sans', "'Segoe UI', Segoe, Tahoma, Geneva, Verdana, sans-serif"],
+    ['calibri', 'Calibri', 'sans', "Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif"],
+    ['candara', 'Candara', 'sans', "Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif"],
+    ['century-gothic', 'Century Gothic', 'sans', "'Century Gothic', CenturyGothic, AppleGothic, Futura, Arial, sans-serif"],
+    ['franklin-gothic', 'Franklin Gothic', 'sans', "'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', 'Arial Narrow', Arial, sans-serif"],
+    ['gill-sans', 'Gill Sans', 'sans', "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"],
+    ['lucida-sans', 'Lucida Sans', 'sans', "'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif"],
+    ['optima', 'Optima', 'sans', "Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif"],
+    ['futura', 'Futura', 'sans', "Futura, 'Trebuchet MS', 'Century Gothic', Arial, sans-serif"],
+
+    // ---- Serif ------------------------------------------------------------
+    ['georgia', 'Georgia', 'serif', "Georgia, 'Times New Roman', Times, serif"],
+    ['times', 'Times New Roman', 'serif', "'Times New Roman', Times, Georgia, serif"],
+    ['cambria', 'Cambria', 'serif', "Cambria, Georgia, 'Times New Roman', Times, serif"],
+    ['garamond', 'Garamond', 'serif', "Garamond, 'EB Garamond', Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif"],
+    ['palatino', 'Palatino', 'serif', "Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif"],
+    ['book-antiqua', 'Book Antiqua', 'serif', "'Book Antiqua', Palatino, 'Palatino Linotype', 'Palatino LT STD', Georgia, serif"],
+    ['baskerville', 'Baskerville', 'serif', "Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif"],
+    ['didot', 'Didot', 'serif', "Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif"],
+    ['rockwell', 'Rockwell', 'serif', "Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif"],
+
+    // ---- Monospace --------------------------------------------------------
+    ['courier-new', 'Courier New', 'mono', "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace"],
+    ['lucida-console', 'Lucida Console', 'mono', "'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Bitstream Vera Sans Mono', monospace"],
+    ['consolas', 'Consolas', 'mono', "Consolas, Monaco, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace"],
+    ['monaco', 'Monaco', 'mono', "Monaco, Consolas, 'Lucida Console', 'Courier New', monospace"],
+
+    // ---- Display & handwriting -------------------------------------------
+    ['comic-sans', 'Comic Sans MS', 'display', "'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', cursive"],
+    ['impact', 'Impact', 'display', "Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Arial Black', sans-serif"],
+    ['brush-script', 'Brush Script MT', 'display', "'Brush Script MT', 'Brush Script Std', 'Lucida Calligraphy', 'Lucida Handwriting', 'Apple Chancery', cursive"],
+
+    // ---- Web fonts: offered, never loaded - the fallback is what most see --
+    ['roboto', 'Roboto', 'web', `Roboto, 'Helvetica Neue', ${SANS}`, true],
+    ['open-sans', 'Open Sans', 'web', `'Open Sans', 'Segoe UI', ${SANS}`, true],
+    ['lato', 'Lato', 'web', `Lato, 'Segoe UI', ${SANS}`, true],
+    ['montserrat', 'Montserrat', 'web', `Montserrat, 'Century Gothic', 'Trebuchet MS', ${SANS}`, true],
+    ['poppins', 'Poppins', 'web', `Poppins, 'Century Gothic', 'Segoe UI', ${SANS}`, true],
+    ['source-sans', 'Source Sans 3', 'web', `'Source Sans 3', 'Source Sans Pro', 'Segoe UI', ${SANS}`, true],
+    ['inter', 'Inter', 'web', `Inter, 'Segoe UI', ${SANS}`, true],
+    ['nunito', 'Nunito', 'web', `Nunito, 'Segoe UI', ${SANS}`, true],
+    ['raleway', 'Raleway', 'web', `Raleway, 'Century Gothic', ${SANS}`, true],
+    ['oswald', 'Oswald', 'web', `Oswald, 'Arial Narrow', Impact, ${SANS}`, true],
+    ['merriweather', 'Merriweather', 'web', `Merriweather, ${SERIF}`, true],
+    ['playfair', 'Playfair Display', 'web', `'Playfair Display', Didot, ${SERIF}`, true],
+    ['lora', 'Lora', 'web', `Lora, ${SERIF}`, true],
+    ['roboto-mono', 'Roboto Mono', 'web', `'Roboto Mono', Consolas, Monaco, ${MONO}`, true],
+
+    // ---- Generic families: the reader's own choice -------------------------
+    ['sans-serif', 'Sans-serif (reader’s default)', 'generic', 'sans-serif'],
+    ['serif', 'Serif (reader’s default)', 'generic', 'serif'],
+    ['monospace', 'Monospace (reader’s default)', 'generic', 'monospace'],
+    ['cursive', 'Cursive (reader’s default)', 'generic', 'cursive']
+];
+
+/** Every font, in menu order. Stacks are de-duplicated (the shared tails overlap). */
+export const FONTS = Object.freeze(TABLE.map(([id, label, group, stack, webFont = false]) =>
+    Object.freeze({id, label, group, stack: joinStack(stackFamilies(stack)), webFont})));
+
+/** Font sizes in px - the common 8-72 ladder. */
+export const FONT_SIZES = Object.freeze([8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 32, 36, 40, 48, 56, 64, 72]);
+
+/** The CSS generic families a stack may end on. */
+export const GENERIC_FAMILIES = Object.freeze(['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui']);
+
+/**
+ * Look a font up by id.
+ *
+ * @param   {string} id
+ * @returns {object|null}
+ */
+export function findFont(id) {
+    return FONTS.find(font => font.id === id) ?? null;
+}
+
+/**
+ * The fonts grouped for a menu: `[{id, label, fonts: [...]}]`, empty groups
+ * left out.
+ *
+ * @returns {{id: string, label: string, fonts: object[]}[]}
+ */
+export function groupedFonts() {
+    return FONT_GROUPS
+        .map(group => ({...group, fonts: FONTS.filter(font => font.group === group.id)}))
+        .filter(group => group.fonts.length);
+}
+
+/**
+ * The families of a stack, unquoted: "Calibri, 'Segoe UI', sans-serif" →
+ * ['Calibri', 'Segoe UI', 'sans-serif'].
+ *
+ * @param   {string} stack
+ * @returns {string[]}
+ */
+export function stackFamilies(stack) {
+    return String(stack ?? '')
+        .split(',')
+        .map(part => part.trim().replace(/^(['"])(.*)\1$/, '$2').trim())
+        .filter(Boolean);
+}
+
+/**
+ * Join families back into a stack: each once, first mention wins, names
+ * that are not a single identifier quoted with single quotes.
+ *
+ * @param   {string[]} families
+ * @returns {string}
+ */
+export function joinStack(families) {
+    const seen = new Set();
+    const out = [];
+    for (const family of families) {
+        const key = family.toLowerCase();
+        if (!family || seen.has(key)) continue;
+        seen.add(key);
+        out.push(/^[A-Za-z][A-Za-z0-9-]*$/.test(family) ? family : `'${family.replace(/'/g, '')}'`);
+    }
+    return out.join(', ');
+}
+
+/**
+ * Whether a font size (px) is one the menu offers.
+ *
+ * @param   {number|string} size
+ * @returns {boolean}
+ */
+export function isFontSize(size) {
+    return FONT_SIZES.includes(Number(size));
+}
+
+/**
+ * The inline style a chosen face or size becomes. Values outside the lists
+ * give '' - nothing free-form reaches the message.
+ *
+ * @param   {{font?: string, size?: number|string}} choice - font id and/or px size
+ * @returns {string}
+ */
+export function inlineStyle({font, size} = {}) {
+    const parts = [];
+    const entry = font ? findFont(font) : null;
+    if (entry) parts.push(`font-family: ${entry.stack}`);
+    if (size !== undefined && size !== null && isFontSize(size)) parts.push(`font-size: ${Number(size)}px`);
+    return parts.join('; ');
+}
+
+/** What the legacy `<font size="1..7">` values mean, in px. */
+export const LEGACY_FONT_SIZES = Object.freeze({1: 10, 2: 13, 3: 16, 4: 18, 5: 24, 6: 32, 7: 48});
+
+/**
+ * Split a `style` attribute into [property, value] pairs. Semicolons inside
+ * quotes or parentheses (a data: URI, a quoted family) do not split.
+ *
+ * @param   {string} style
+ * @returns {[string, string][]}
+ */
+export function splitStyle(style) {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let start = 0;
+    const text = String(style ?? '');
+    const push = end => {
+        const chunk = text.slice(start, end);
+        const colon = chunk.indexOf(':');
+        if (colon > 0) {
+            const prop = chunk.slice(0, colon).trim().toLowerCase();
+            const value = chunk.slice(colon + 1).trim();
+            if (prop && value) out.push([prop, value]);
+        }
+    };
+    for (let i = 0; i < text.length; i++) {
+        const ch = text[i];
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if (ch === '"' || ch === "'") {
+            quote = ch;
+        } else if (ch === '(') {
+            depth++;
+        } else if (ch === ')') {
+            depth = Math.max(0, depth - 1);
+        } else if (ch === ';' && !depth) {
+            push(i);
+            start = i + 1;
+        }
+    }
+    push(text.length);
+    return out;
+}
+
+/**
+ * Set (or with a null value, remove) one property in a `style` string,
+ * leaving the rest as written - so a stack keeps its single quotes rather
+ * than going through the browser's CSSOM, which re-quotes with `"`.
+ *
+ * @param   {string} style
+ * @param   {string} prop
+ * @param   {string|null} value
+ * @returns {string}
+ */
+export function setStyleProperty(style, prop, value) {
+    const name = String(prop).toLowerCase();
+    const pairs = splitStyle(style).filter(([p]) => p !== name);
+    if (value !== null && value !== undefined && value !== '') pairs.push([name, String(value)]);
+    return pairs.map(([p, v]) => `${p}: ${v}`).join('; ');
+}
+
+/**
+ * The inline style that replaces a `<font>` tag - one the browser wrote, or
+ * one pasted in. `<font>` is not kept by the sanitiser (signatures,
+ * templates) and is unreliable in mail, so none is left in the editor.
+ *
+ * @param   {{face?: string|null, size?: string|null, color?: string|null}} attrs
+ * @returns {string}
+ */
+export function fontTagStyle({face, size, color} = {}) {
+    let style = '';
+    const families = stackFamilies(face);
+    if (families.length) style = setStyleProperty(style, 'font-family', joinStack(families));
+    const raw = String(size ?? '').trim();
+    if (/^[+-]?[1-7]$/.test(raw)) {
+        const level = /^[+-]/.test(raw) ? 3 + Number(raw) : Number(raw);
+        const px = LEGACY_FONT_SIZES[Math.min(7, Math.max(1, level))];
+        style = setStyleProperty(style, 'font-size', `${px}px`);
+    }
+    const tint = String(color ?? '').trim();
+    if (/^(#[0-9a-f]{3,8}|[a-z]+|rgba?\([0-9.,%\s]+\))$/i.test(tint)) style = setStyleProperty(style, 'color', tint);
+    return style;
+}

package/plugins/_lib/admin/mail/mail.css

@@ -1 +1 @@
-#view-container.mail-fullbleed{max-width:none}.mail-layout [hidden],.dm-slideover [hidden]{display:none!important}.mail-reader-summary{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}.mail-header-toggle,.mail-extras-toggle{padding:0!important;font-size:.78rem;opacity:.75;text-decoration:underline}.mail-header-toggle:hover,.mail-extras-toggle:hover{opacity:1}.mail-header-details{display:grid;grid-template-columns:max-content 1fr;gap:.15rem .75rem;margin:.5rem 0 0;font-size:.8rem}.mail-header-details dt{opacity:.65}.mail-header-details dd{margin:0;overflow-wrap:anywhere}.mail-layout{display:grid;grid-template-columns:var(--mail-col-1, 190px) auto var(--mail-col-2, 340px) auto 1fr;height:calc(100vh - 140px);min-height:320px;border:1px solid var(--dm-border);border-radius:var(--dm-radius-md, 8px);overflow:hidden;background:var(--dm-surface)}.mail-folders-pane,.mail-list-pane{display:flex;flex-direction:column;border-right:1px solid var(--dm-border);min-width:0;min-height:0}.mail-reader-pane{display:flex;flex-direction:column;min-width:0;min-height:0}.mail-pane-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--dm-text-muted);border-bottom:1px solid var(--dm-border);flex-shrink:0}.mail-folders-list,.mail-list{overflow-y:auto;flex:1;min-height:0}.mail-search{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-bottom:1px solid var(--dm-border);color:var(--dm-text-muted);flex-shrink:0}.mail-search input{flex:1;min-width:0;font-size:.85rem;padding:.25rem .4rem}.mail-search-note{padding:.3rem .6rem;font-size:.74rem;color:var(--dm-text-muted);border-bottom:1px solid var(--dm-border);flex-shrink:0}.mail-slideover-resizer{padding:0;position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:2;background:transparent}.mail-slideover-resizer:hover,.is-resizing>.mail-slideover-resizer{background:var(--dm-primary);opacity:.7}.is-resizing{user-select:none;transition:none!important}.mail-selection{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;padding:.35rem .6rem;font-size:.78rem;background:var(--dm-primary);color:var(--dm-primary-text);flex-shrink:0}.mail-selection span{flex:1;min-width:0}.mail-selection .btn{color:var(--dm-primary-text);border:1px solid currentColor;background:transparent}.mail-selection .btn:hover{background:color-mix(in srgb,var(--dm-primary-text) 15%,transparent)}.mail-item.is-selected{background:var(--dm-active-bg);box-shadow:inset 3px 0 0 var(--dm-primary)}.mail-undo{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;font-size:.78rem;background:var(--dm-active-bg);border-bottom:1px solid var(--dm-border);flex-shrink:0}.mail-undo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-splitter{width:5px;cursor:col-resize;background:var(--dm-border);flex-shrink:0;background-clip:content-box;border-left:2px solid transparent;border-right:2px solid transparent;box-sizing:content-box}.mail-splitter:hover,.mail-layout.is-resizing .mail-splitter{background-color:var(--dm-primary)}.mail-layout.is-resizing{user-select:none}.mail-layout.is-resizing .mail-folders-pane,.mail-layout.is-resizing .mail-list-pane,.mail-layout.is-resizing .mail-reader-pane,.mail-layout.is-resizing iframe{pointer-events:none}.mail-unread-filter{display:flex;align-items:center;gap:.3rem;font-size:.7rem;text-transform:none;letter-spacing:0;cursor:pointer;margin-left:auto;margin-right:.25rem}.mail-unread-pill{flex-shrink:0;min-width:1.15rem;padding:0 .3rem;border-radius:999px;background:var(--dm-primary);color:var(--dm-primary-text);font-size:.66rem;font-weight:700;line-height:1.35;text-align:center}.mail-folder.is-context .mail-folder-name{opacity:.6}.mail-account{display:flex;align-items:center;gap:.4rem;width:100%;padding:.45rem .6rem;border:none;background:var(--dm-surface);cursor:pointer;text-align:left;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--dm-text-muted)}.mail-account:hover{background:var(--dm-hover-bg)}.mail-account.is-active{color:var(--dm-text);position:sticky;top:0;z-index:1;background:var(--dm-surface)}.mail-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-folder{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.875rem;cursor:pointer;border:none;background:none;width:100%;text-align:left;color:var(--dm-text)}.mail-folder:hover{background:var(--dm-hover-bg)}.mail-folder.is-active{background:var(--dm-active-bg);color:var(--dm-primary);font-weight:600}.mail-folder.is-unselectable{opacity:.6;cursor:default}.mail-folder.is-unselectable:hover{background:none}.mail-folder-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item{display:block;width:100%;text-align:left;padding:.55rem .75rem;border:none;border-bottom:1px solid var(--dm-border);background:none;cursor:pointer;color:var(--dm-text)}.mail-item:hover{background:var(--dm-hover-bg)}.mail-item.is-active{background:var(--dm-active-bg)}.mail-item-top{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}.mail-item-from{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item.is-unread .mail-item-from,.mail-item.is-unread .mail-item-subject{font-weight:700}.mail-item-date{font-size:.72rem;color:var(--dm-text-muted);flex-shrink:0}.mail-item-subject{font-size:.82rem;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item-meta{display:flex;align-items:center;gap:.35rem;margin-top:.15rem;color:var(--dm-text-muted)}.mail-pager{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .6rem;border-top:1px solid var(--dm-border);font-size:.75rem;color:var(--dm-text-muted);flex-shrink:0}.mail-reader-head{padding:.75rem 1rem;border-bottom:1px solid var(--dm-border);flex-shrink:0}.mail-reader-head:empty{display:none}.mail-reader-subject{font-size:1.05rem;font-weight:600;margin:0 0 .3rem;color:var(--dm-text)}.mail-reader-actions{display:flex;gap:.25rem;margin:.1rem 0 .35rem;flex-wrap:wrap}.mail-reader-meta{font-size:.8rem;color:var(--dm-text-muted)}.mail-reader-body{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:var(--dm-surface)}.mail-reader-body iframe{width:100%;flex:1;border:none;display:block;background:#fff}.mail-notice{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.4rem .75rem;font-size:.78rem;background:var(--dm-warning);color:var(--dm-warning-text);border-bottom:1px solid var(--dm-border)}.mail-notice .btn{color:var(--dm-warning-text);border:1px solid currentColor;background:transparent;opacity:.95}.mail-notice .btn:hover{background:color-mix(in srgb,var(--dm-warning-text) 15%,transparent);opacity:1}.mail-attachments{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem .75rem;border-bottom:1px solid var(--dm-border);background:var(--dm-background-alt)}.mail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;color:var(--dm-text-muted);text-align:center;padding:1rem}.mail-empty p{margin:0;font-size:.875rem}@media(max-width:900px){.mail-layout{grid-template-columns:1fr;height:auto!important}.mail-splitter{display:none}.mail-folders-pane,.mail-list-pane{border-right:none;border-bottom:1px solid var(--dm-border)}.mail-folders-list,.mail-list{max-height:240px}.mail-reader-body{min-height:60vh}}.mail-box-row{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border:1px solid var(--dm-border);border-radius:var(--dm-radius-md, 6px)}.mail-default-badge{margin-left:.4rem;font-size:.7rem;font-weight:500;vertical-align:middle}.mail-item.is-dragging{opacity:.45}.mail-folder.is-drop-target{background:var(--dm-primary);color:var(--dm-primary-text);outline:2px solid var(--dm-primary);outline-offset:-2px}.mail-folder.is-drop-target .mail-folder-name,.mail-folder.is-drop-target .mail-unread-pill{color:inherit}.mail-item.is-dragging *{pointer-events:none}.mail-item{position:relative}.mail-item-tick{position:absolute;left:.45rem;top:.55rem;display:inline-flex;opacity:0;color:var(--dm-text-muted);transition:opacity .12s ease;padding:2px;margin:-2px;border-radius:var(--dm-radius-sm, 3px)}.mail-item:hover .mail-item-tick,.mail-item:focus-visible .mail-item-tick,.mail-list.is-selecting .mail-item-tick,.mail-item-tick[aria-checked=true]{opacity:1}.mail-item-tick[aria-checked=true]{color:var(--dm-primary)}.mail-item-tick:hover{color:var(--dm-primary);background:var(--dm-hover-bg)}.mail-item-top,.mail-item-subject,.mail-item-meta{padding-left:1.5rem}.mail-select-all{display:inline-flex;align-items:center;margin-right:.1rem;cursor:pointer}.mail-select-all input{cursor:pointer;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mail-item-meta>span{display:inline-flex}.mail-item-meta .is-replied{color:var(--dm-success)}.mail-item-meta .is-forwarded{color:var(--dm-info, var(--dm-primary))}.mail-item-meta .is-high{color:var(--dm-danger)}.mail-item-meta .is-low{color:var(--dm-text-muted);opacity:.7}.mail-folder.is-hidden-folder .mail-folder-name{opacity:.5;font-style:italic}.mail-thread-chip{display:inline-flex;align-items:center;margin-left:.4rem;padding:0 .35rem;border-radius:999px;font-size:.68rem;font-weight:700;line-height:1.5;color:var(--dm-text-muted);background:var(--dm-active-bg);cursor:pointer}.mail-thread-chip:hover{color:var(--dm-primary)}.mail-thread-chip.is-unread{background:var(--dm-primary);color:var(--dm-primary-text)}.mail-item.is-in-thread{padding-left:1.6rem;box-shadow:inset 3px 0 0 var(--dm-border)}.mail-item.is-in-thread .mail-item-from{font-size:.8rem}.mail-pane-head .btn.is-on{color:var(--dm-primary);background:var(--dm-active-bg)}#mail-outbox-btn{font-size:.72rem;font-weight:700}#mail-outbox-btn.is-failed{color:var(--dm-danger)}.mail-attachment{display:inline-flex;align-items:center;border:1px solid var(--dm-border);border-radius:var(--dm-radius-md, 6px);overflow:hidden}.mail-attachment .btn{border:none;border-radius:0}.mail-attachment-save{padding-left:.4rem!important;padding-right:.4rem!important;border-left:1px solid var(--dm-border)!important;opacity:.7}.mail-attachment-save:hover{opacity:1;color:var(--dm-primary)}.mail-section-heading{margin:1rem 0 .1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--dm-text-muted)}.mail-section-heading:first-child{margin-top:.25rem}.mail-section-form .domma-form{margin:0}.mail-section-form .domma-form-field:last-child{margin-bottom:0}.mail-item-card{margin:0}.mail-item-card .card-header{padding:.5rem .6rem}.mail-item-card .card-body{padding:.6rem}.mail-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mail-status{min-height:1.2em}.mail-empty-line{margin:.25rem 0}.mail-editor-fallback{min-height:8rem;font-family:inherit;resize:vertical}.mail-clause{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}.mail-clause .form-select,.mail-clause .form-input{width:auto;flex:0 1 auto}.mail-clause .mail-clause-value{flex:1 1 8rem;min-width:8rem}.mail-section-list{display:flex;flex-direction:column;gap:.5rem}.mail-scroll-sm{max-height:20vh;overflow-y:auto}.mail-scroll-md{max-height:46vh;overflow-y:auto}.mail-section-form .domma-form-field:has(select) .form-label .text-danger{display:none}.mail-compose-form{padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.6rem;height:100%}.mail-compose-body{display:flex;flex-direction:column;flex:1;min-height:0}.mail-compose-editor{flex:1;min-height:0}.mail-compose-textarea{flex:1;min-height:34vh;font-family:inherit;resize:vertical}.mail-attach-list{display:flex;flex-direction:column;gap:.2rem}.mail-template-row{margin:-.15rem 0 .35rem}.mail-template-picker{max-width:16rem}.mail-suggest-row{display:flex;flex-direction:column;line-height:1.25}.mail-suggest-detail{opacity:.7}.mail-rule-off{opacity:.55}.mail-panel{padding:.25rem 0 .5rem}.mail-panel-stack{padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:1rem}.mail-form-stack{padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem}.mail-dialog-stack{display:flex;flex-direction:column;gap:.5rem;padding:.25rem 0}.mail-hint{margin-top:.2rem}.mail-box-sub{overflow:hidden;text-overflow:ellipsis}.mail-add-btn{align-self:flex-start;margin-top:.5rem}.mail-none{margin:0;padding:.5rem .6rem}.mail-kv{padding:.5rem 0;display:flex;flex-direction:column;gap:.35rem}.mail-kv-row{display:flex;gap:.75rem}.mail-kv-key{min-width:8.5rem;flex-shrink:0}.mail-toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.mail-sender-list{display:flex;flex-direction:column;gap:.2rem;max-height:40vh;overflow-y:auto}.mail-folder-pick{display:flex;align-items:center;gap:.5rem;padding:.3rem .4rem;border-radius:var(--dm-radius-md, 6px)}.mail-diag-log{width:100%;height:30vh;margin-top:.5rem;font-family:monospace;font-size:.72rem}.mail-facts{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.75rem}.mail-item-more{position:absolute;right:.4rem;bottom:.35rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.4rem;height:1.4rem;border-radius:var(--dm-radius-sm, 3px);font-size:1rem;line-height:1;color:var(--dm-text-muted);background:inherit;opacity:0;transition:opacity .12s ease}.mail-item:hover .mail-item-more,.mail-item:focus-visible .mail-item-more,.mail-item.is-active .mail-item-more{opacity:1}.mail-item-more:hover{color:var(--dm-primary)}.mail-section-intro{display:flex;align-items:center;gap:.35rem;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--dm-border)}.mail-pager-middle{display:flex;align-items:center;gap:.5rem;min-width:0}.mail-page-size{font:inherit;color:inherit;background:transparent;border:1px solid var(--dm-border);border-radius:4px;padding:.1rem .25rem}.mail-auth-choice{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding-bottom:.5rem;border-bottom:1px solid var(--dm-border)}.mail-oauth{display:flex;flex-direction:column;gap:.75rem}.mail-oauth-warn{margin:0;padding:.5rem .7rem;border:1px solid var(--dm-warning);border-radius:var(--dm-radius-md);color:var(--dm-warning-text)}.mail-oauth-state{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.mail-oauth-chip{margin-left:.4rem;border:1px solid var(--dm-border);background:var(--dm-surface);color:var(--dm-text-muted)}.mail-oauth-state .mail-oauth-chip{margin-left:0}.mail-oauth-chip--ok{border-color:var(--dm-success);color:var(--dm-success)}.mail-oauth-chip--bad{border-color:var(--dm-danger);color:var(--dm-danger)}.mail-oauth-guide{border:1px solid var(--dm-border);border-radius:var(--dm-radius-md);padding:.5rem .75rem;background:var(--dm-background-alt)}.mail-oauth-guide>summary{cursor:pointer;font-weight:600}.mail-oauth-guide-body ol{padding-left:1.2rem;margin:.5rem 0 0}.mail-oauth-guide-body li{margin-bottom:.45rem}.mail-oauth-code{word-break:break-all;user-select:all}.mail-loading-slot{display:block;min-height:3rem;padding:.5rem .6rem}.mail-row-more{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:1.3rem;height:1.3rem;border-radius:var(--dm-radius-sm);font-size:.95rem;line-height:1;color:var(--dm-text-muted);opacity:0;transition:opacity .12s ease}.mail-unread-pill+.mail-row-more{margin-left:0}.mail-folder:hover .mail-row-more,.mail-folder:focus-visible .mail-row-more,.mail-folder.is-active .mail-row-more,.mail-account:hover .mail-row-more,.mail-account:focus-visible .mail-row-more,.mail-account.is-active .mail-row-more{opacity:1}.mail-row-more:hover{color:var(--dm-primary)}.mail-box-row .mail-row-more{opacity:1;margin-left:0}.mail-box-row:focus-visible{outline:2px solid var(--dm-primary);outline-offset:-2px}.mail-restored-note{margin:0;padding:.4rem .6rem;border-left:3px solid var(--dm-warning);background:var(--dm-background-alt)}
+#view-container.mail-fullbleed{max-width:none}.mail-layout [hidden],.dm-slideover [hidden]{display:none!important}.mail-reader-summary{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}.mail-header-toggle,.mail-extras-toggle{padding:0!important;font-size:.78rem;opacity:.75;text-decoration:underline}.mail-header-toggle:hover,.mail-extras-toggle:hover{opacity:1}.mail-header-details{display:grid;grid-template-columns:max-content 1fr;gap:.15rem .75rem;margin:.5rem 0 0;font-size:.8rem}.mail-header-details dt{opacity:.65}.mail-header-details dd{margin:0;overflow-wrap:anywhere}.mail-layout{display:grid;grid-template-columns:var(--mail-col-1, 190px) auto var(--mail-col-2, 340px) auto 1fr;height:calc(100vh - 140px);min-height:320px;border:1px solid var(--dm-border);border-radius:var(--dm-radius-md, 8px);overflow:hidden;background:var(--dm-surface)}.mail-folders-pane,.mail-list-pane{display:flex;flex-direction:column;border-right:1px solid var(--dm-border);min-width:0;min-height:0}.mail-reader-pane{display:flex;flex-direction:column;min-width:0;min-height:0}.mail-pane-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--dm-text-muted);border-bottom:1px solid var(--dm-border);flex-shrink:0}.mail-folders-list,.mail-list{overflow-y:auto;flex:1;min-height:0}.mail-search{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-bottom:1px solid var(--dm-border);color:var(--dm-text-muted);flex-shrink:0}.mail-search input{flex:1;min-width:0;font-size:.85rem;padding:.25rem .4rem}.mail-search-note{padding:.3rem .6rem;font-size:.74rem;color:var(--dm-text-muted);border-bottom:1px solid var(--dm-border);flex-shrink:0}.mail-slideover-resizer{padding:0;position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:2;background:transparent}.mail-slideover-resizer:hover,.is-resizing>.mail-slideover-resizer{background:var(--dm-primary);opacity:.7}.is-resizing{user-select:none;transition:none!important}.mail-selection{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;padding:.35rem .6rem;font-size:.78rem;background:var(--dm-primary);color:var(--dm-primary-text);flex-shrink:0}.mail-selection span{flex:1;min-width:0}.mail-selection .btn{color:var(--dm-primary-text);border:1px solid currentColor;background:transparent}.mail-selection .btn:hover{background:color-mix(in srgb,var(--dm-primary-text) 15%,transparent)}.mail-item.is-selected{background:var(--dm-active-bg);box-shadow:inset 3px 0 0 var(--dm-primary)}.mail-undo{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;font-size:.78rem;background:var(--dm-active-bg);border-bottom:1px solid var(--dm-border);flex-shrink:0}.mail-undo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-splitter{width:5px;cursor:col-resize;background:var(--dm-border);flex-shrink:0;background-clip:content-box;border-left:2px solid transparent;border-right:2px solid transparent;box-sizing:content-box}.mail-splitter:hover,.mail-layout.is-resizing .mail-splitter{background-color:var(--dm-primary)}.mail-layout.is-resizing{user-select:none}.mail-layout.is-resizing .mail-folders-pane,.mail-layout.is-resizing .mail-list-pane,.mail-layout.is-resizing .mail-reader-pane,.mail-layout.is-resizing iframe{pointer-events:none}.mail-unread-filter{display:flex;align-items:center;gap:.3rem;font-size:.7rem;text-transform:none;letter-spacing:0;cursor:pointer;margin-left:auto;margin-right:.25rem}.mail-unread-pill{flex-shrink:0;min-width:1.15rem;padding:0 .3rem;border-radius:999px;background:var(--dm-primary);color:var(--dm-primary-text);font-size:.66rem;font-weight:700;line-height:1.35;text-align:center}.mail-folder.is-context .mail-folder-name{opacity:.6}.mail-account{display:flex;align-items:center;gap:.4rem;width:100%;padding:.45rem .6rem;border:none;background:var(--dm-surface);cursor:pointer;text-align:left;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--dm-text-muted)}.mail-account:hover{background:var(--dm-hover-bg)}.mail-account.is-active{color:var(--dm-text);position:sticky;top:0;z-index:1;background:var(--dm-surface)}.mail-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-folder{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.875rem;cursor:pointer;border:none;background:none;width:100%;text-align:left;color:var(--dm-text)}.mail-folder:hover{background:var(--dm-hover-bg)}.mail-folder.is-active{background:var(--dm-active-bg);color:var(--dm-primary);font-weight:600}.mail-folder.is-unselectable{opacity:.6;cursor:default}.mail-folder.is-unselectable:hover{background:none}.mail-folder-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item{display:block;width:100%;text-align:left;padding:.55rem .75rem;border:none;border-bottom:1px solid var(--dm-border);background:none;cursor:pointer;color:var(--dm-text)}.mail-item:hover{background:var(--dm-hover-bg)}.mail-item.is-active{background:var(--dm-active-bg)}.mail-item-top{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}.mail-item-from{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item.is-unread .mail-item-from,.mail-item.is-unread .mail-item-subject{font-weight:700}.mail-item-date{font-size:.72rem;color:var(--dm-text-muted);flex-shrink:0}.mail-item-subject{font-size:.82rem;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item-meta{display:flex;align-items:center;gap:.35rem;margin-top:.15rem;color:var(--dm-text-muted)}.mail-pager{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .6rem;border-top:1px solid var(--dm-border);font-size:.75rem;color:var(--dm-text-muted);flex-shrink:0}.mail-reader-head{padding:.75rem 1rem;border-bottom:1px solid var(--dm-border);flex-shrink:0}.mail-reader-head:empty{display:none}.mail-reader-subject{font-size:1.05rem;font-weight:600;margin:0 0 .3rem;color:var(--dm-text)}.mail-reader-actions{display:flex;gap:.25rem;margin:.1rem 0 .35rem;flex-wrap:wrap}.mail-reader-meta{font-size:.8rem;color:var(--dm-text-muted)}.mail-reader-body{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:var(--dm-surface)}.mail-reader-body iframe{width:100%;flex:1;border:none;display:block;background:#fff}.mail-notice{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.4rem .75rem;font-size:.78rem;background:var(--dm-warning);color:var(--dm-warning-text);border-bottom:1px solid var(--dm-border)}.mail-notice .btn{color:var(--dm-warning-text);border:1px solid currentColor;background:transparent;opacity:.95}.mail-notice .btn:hover{background:color-mix(in srgb,var(--dm-warning-text) 15%,transparent);opacity:1}.mail-attachments{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem .75rem;border-bottom:1px solid var(--dm-border);background:var(--dm-background-alt)}.mail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;color:var(--dm-text-muted);text-align:center;padding:1rem}.mail-empty p{margin:0;font-size:.875rem}@media(max-width:900px){.mail-layout{grid-template-columns:1fr;height:auto!important}.mail-splitter{display:none}.mail-folders-pane,.mail-list-pane{border-right:none;border-bottom:1px solid var(--dm-border)}.mail-folders-list,.mail-list{max-height:240px}.mail-reader-body{min-height:60vh}}.mail-box-row{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border:1px solid var(--dm-border);border-radius:var(--dm-radius-md, 6px)}.mail-default-badge{margin-left:.4rem;font-size:.7rem;font-weight:500;vertical-align:middle}.mail-item.is-dragging{opacity:.45}.mail-folder.is-drop-target{background:var(--dm-primary);color:var(--dm-primary-text);outline:2px solid var(--dm-primary);outline-offset:-2px}.mail-folder.is-drop-target .mail-folder-name,.mail-folder.is-drop-target .mail-unread-pill{color:inherit}.mail-item.is-dragging *{pointer-events:none}.mail-item{position:relative}.mail-item-tick{position:absolute;left:.45rem;top:.55rem;display:inline-flex;opacity:0;color:var(--dm-text-muted);transition:opacity .12s ease;padding:2px;margin:-2px;border-radius:var(--dm-radius-sm, 3px)}.mail-item:hover .mail-item-tick,.mail-item:focus-visible .mail-item-tick,.mail-list.is-selecting .mail-item-tick,.mail-item-tick[aria-checked=true]{opacity:1}.mail-item-tick[aria-checked=true]{color:var(--dm-primary)}.mail-item-tick:hover{color:var(--dm-primary);background:var(--dm-hover-bg)}.mail-item-top,.mail-item-subject,.mail-item-meta{padding-left:1.5rem}.mail-select-all{display:inline-flex;align-items:center;margin-right:.1rem;cursor:pointer}.mail-select-all input{cursor:pointer;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mail-item-meta>span{display:inline-flex}.mail-item-meta .is-replied{color:var(--dm-success)}.mail-item-meta .is-forwarded{color:var(--dm-info, var(--dm-primary))}.mail-item-meta .is-high{color:var(--dm-danger)}.mail-item-meta .is-low{color:var(--dm-text-muted);opacity:.7}.mail-folder.is-hidden-folder .mail-folder-name{opacity:.5;font-style:italic}.mail-thread-chip{display:inline-flex;align-items:center;margin-left:.4rem;padding:0 .35rem;border-radius:999px;font-size:.68rem;font-weight:700;line-height:1.5;color:var(--dm-text-muted);background:var(--dm-active-bg);cursor:pointer}.mail-thread-chip:hover{color:var(--dm-primary)}.mail-thread-chip.is-unread{background:var(--dm-primary);color:var(--dm-primary-text)}.mail-item.is-in-thread{padding-left:1.6rem;box-shadow:inset 3px 0 0 var(--dm-border)}.mail-item.is-in-thread .mail-item-from{font-size:.8rem}.mail-pane-head .btn.is-on{color:var(--dm-primary);background:var(--dm-active-bg)}#mail-outbox-btn{font-size:.72rem;font-weight:700}#mail-outbox-btn.is-failed{color:var(--dm-danger)}.mail-attachment{display:inline-flex;align-items:center;border:1px solid var(--dm-border);border-radius:var(--dm-radius-md, 6px);overflow:hidden}.mail-attachment .btn{border:none;border-radius:0}.mail-attachment-save{padding-left:.4rem!important;padding-right:.4rem!important;border-left:1px solid var(--dm-border)!important;opacity:.7}.mail-attachment-save:hover{opacity:1;color:var(--dm-primary)}.mail-section-heading{margin:1rem 0 .1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--dm-text-muted)}.mail-section-heading:first-child{margin-top:.25rem}.mail-section-form .domma-form{margin:0}.mail-section-form .domma-form-field:last-child{margin-bottom:0}.mail-item-card{margin:0}.mail-item-card .card-header{padding:.5rem .6rem}.mail-item-card .card-body{padding:.6rem}.mail-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mail-status{min-height:1.2em}.mail-empty-line{margin:.25rem 0}.mail-editor-fallback{min-height:8rem;font-family:inherit;resize:vertical}.mail-clause{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}.mail-clause .form-select,.mail-clause .form-input{width:auto;flex:0 1 auto}.mail-clause .mail-clause-value{flex:1 1 8rem;min-width:8rem}.mail-section-list{display:flex;flex-direction:column;gap:.5rem}.mail-scroll-sm{max-height:20vh;overflow-y:auto}.mail-scroll-md{max-height:46vh;overflow-y:auto}.mail-section-form .domma-form-field:has(select) .form-label .text-danger{display:none}.mail-compose-form{padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.6rem;height:100%}.mail-compose-body{display:flex;flex-direction:column;flex:1;min-height:0}.mail-compose-editor{flex:1;min-height:0}.mail-compose-textarea{flex:1;min-height:34vh;font-family:inherit;resize:vertical}.mail-attach-list{display:flex;flex-direction:column;gap:.2rem}.mail-template-row{margin:-.15rem 0 .35rem}.mail-template-picker{max-width:16rem}.mail-suggest-row{display:flex;flex-direction:column;line-height:1.25}.mail-suggest-detail{opacity:.7}.mail-rule-off{opacity:.55}.mail-panel{padding:.25rem 0 .5rem}.mail-panel-stack{padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:1rem}.mail-form-stack{padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem}.mail-dialog-stack{display:flex;flex-direction:column;gap:.5rem;padding:.25rem 0}.mail-hint{margin-top:.2rem}.mail-box-sub{overflow:hidden;text-overflow:ellipsis}.mail-add-btn{align-self:flex-start;margin-top:.5rem}.mail-none{margin:0;padding:.5rem .6rem}.mail-kv{padding:.5rem 0;display:flex;flex-direction:column;gap:.35rem}.mail-kv-row{display:flex;gap:.75rem}.mail-kv-key{min-width:8.5rem;flex-shrink:0}.mail-toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.mail-sender-list{display:flex;flex-direction:column;gap:.2rem;max-height:40vh;overflow-y:auto}.mail-folder-pick{display:flex;align-items:center;gap:.5rem;padding:.3rem .4rem;border-radius:var(--dm-radius-md, 6px)}.mail-diag-log{width:100%;height:30vh;margin-top:.5rem;font-family:monospace;font-size:.72rem}.mail-facts{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.75rem}.mail-item-more{position:absolute;right:.4rem;bottom:.35rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.4rem;height:1.4rem;border-radius:var(--dm-radius-sm, 3px);font-size:1rem;line-height:1;color:var(--dm-text-muted);background:inherit;opacity:0;transition:opacity .12s ease}.mail-item:hover .mail-item-more,.mail-item:focus-visible .mail-item-more,.mail-item.is-active .mail-item-more{opacity:1}.mail-item-more:hover{color:var(--dm-primary)}.mail-section-intro{display:flex;align-items:center;gap:.35rem;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--dm-border)}.mail-pager-middle{display:flex;align-items:center;gap:.5rem;min-width:0}.mail-page-size{font:inherit;color:inherit;background:transparent;border:1px solid var(--dm-border);border-radius:4px;padding:.1rem .25rem}.mail-auth-choice{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding-bottom:.5rem;border-bottom:1px solid var(--dm-border)}.mail-oauth{display:flex;flex-direction:column;gap:.75rem}.mail-oauth-warn{margin:0;padding:.5rem .7rem;border:1px solid var(--dm-warning);border-radius:var(--dm-radius-md);color:var(--dm-warning-text)}.mail-oauth-state{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.mail-oauth-chip{margin-left:.4rem;border:1px solid var(--dm-border);background:var(--dm-surface);color:var(--dm-text-muted)}.mail-oauth-state .mail-oauth-chip{margin-left:0}.mail-oauth-chip--ok{border-color:var(--dm-success);color:var(--dm-success)}.mail-oauth-chip--bad{border-color:var(--dm-danger);color:var(--dm-danger)}.mail-oauth-guide{border:1px solid var(--dm-border);border-radius:var(--dm-radius-md);padding:.5rem .75rem;background:var(--dm-background-alt)}.mail-oauth-guide>summary{cursor:pointer;font-weight:600}.mail-oauth-guide-body ol{padding-left:1.2rem;margin:.5rem 0 0}.mail-oauth-guide-body li{margin-bottom:.45rem}.mail-oauth-code{word-break:break-all;user-select:all}.mail-loading-slot{display:block;min-height:3rem;padding:.5rem .6rem}.mail-row-more{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:1.3rem;height:1.3rem;border-radius:var(--dm-radius-sm);font-size:.95rem;line-height:1;color:var(--dm-text-muted);opacity:0;transition:opacity .12s ease}.mail-unread-pill+.mail-row-more{margin-left:0}.mail-folder:hover .mail-row-more,.mail-folder:focus-visible .mail-row-more,.mail-folder.is-active .mail-row-more,.mail-account:hover .mail-row-more,.mail-account:focus-visible .mail-row-more,.mail-account.is-active .mail-row-more{opacity:1}.mail-row-more:hover{color:var(--dm-primary)}.mail-box-row .mail-row-more{opacity:1;margin-left:0}.mail-box-row:focus-visible{outline:2px solid var(--dm-primary);outline-offset:-2px}.mail-restored-note{margin:0;padding:.4rem .6rem;border-left:3px solid var(--dm-warning);background:var(--dm-background-alt)}.mail-font-controls .mail-font-btn{width:auto;min-width:3.5rem;max-width:10rem;padding:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem}.domma-dropdown-menu:has(.mail-font-item),.domma-dropdown-menu:has(.mail-size-item){max-height:min(60vh,26rem);overflow-y:auto;z-index:10050}.domma-dropdown-item:has(.mail-font-item){display:flex;align-items:center;justify-content:space-between;gap:.75rem}.mail-font-item{font-size:.9375rem}.mail-font-web{font-size:.6875rem;color:var(--dm-text-muted);text-transform:uppercase;letter-spacing:.04em}

package/plugins/_lib/admin/mail/reader-kit.js

@@ -362,3 +362,92 @@ export function holdEscapeOn(so) {
         if (hold.count === 0) so.options.closeOnEscape = hold.original;
     };
 }
+
+// ---------------------------------------------------------------------------
+// Edition extensions
+// ---------------------------------------------------------------------------
+
+/**
+ * Menu items an edition contributed (`extensions.folderItems` /
+ * `mailboxItems`), made safe to merge into a core menu.
+ *
+ * Whatever came back is checked rather than trusted: anything that is not a
+ * divider or a labelled item with a function action is dropped, leading,
+ * trailing and doubled dividers go, and every action is wrapped by `wrap` -
+ * which the view uses to run it on the next task (an item picked with Enter
+ * that opens a dialog must not hand that dialog the same Enter) and to turn
+ * a throw into a toast. `disabled` may be a boolean or a function.
+ *
+ * @param   {*} list - what the extension returned
+ * @param   {(action: Function) => Function} [wrap]
+ * @returns {object[]} Domma context-menu items
+ */
+export function extensionMenuItems(list, wrap = (fn) => fn) {
+    const out = [];
+    for (const entry of Array.isArray(list) ? list : []) {
+        if (!entry || typeof entry !== 'object') continue;
+        if (entry.type === 'divider') {
+            if (out.length && out.at(-1).type !== 'divider') out.push({type: 'divider'});
+            continue;
+        }
+        if (typeof entry.label !== 'string' || !entry.label.trim() || typeof entry.action !== 'function') continue;
+        const item = {label: entry.label, action: wrap(entry.action)};
+        if (typeof entry.icon === 'string' && entry.icon) item.icon = entry.icon;
+        if (entry.danger === true) item.danger = true;
+        if (typeof entry.disabled === 'function') item.disabled = entry.disabled;
+        else if (entry.disabled === true) item.disabled = () => true;
+        out.push(item);
+    }
+    while (out.length && out[0].type === 'divider') out.shift();
+    while (out.length && out.at(-1).type === 'divider') out.pop();
+    return out;
+}
+
+/**
+ * Pane-head buttons an edition contributed (`extensions.paneActions`), checked
+ * the same way: each needs an id (a button id and a de-duplication key), a
+ * label (its tooltip and accessible name) and an onClick. An id seen twice
+ * keeps the first.
+ *
+ * @param   {*} list
+ * @returns {{id: string, label: string, icon: string, onClick: Function, haspopup?: string}[]}
+ */
+export function extensionPaneActions(list) {
+    const out = [];
+    const seen = new Set();
+    for (const entry of Array.isArray(list) ? list : []) {
+        if (!entry || typeof entry !== 'object') continue;
+        const id = typeof entry.id === 'string' ? entry.id.replace(/[^a-z0-9_-]/gi, '') : '';
+        if (!id || seen.has(id)) continue;
+        if (typeof entry.label !== 'string' || !entry.label.trim() || typeof entry.onClick !== 'function') continue;
+        seen.add(id);
+        const action = {id, label: entry.label, icon: typeof entry.icon === 'string' && entry.icon ? entry.icon : 'plus', onClick: entry.onClick};
+        if (['dialog', 'menu'].includes(entry.haspopup)) action.haspopup = entry.haspopup;
+        out.push(action);
+    }
+    return out;
+}
+
+/**
+ * Put an edition's items into a core menu: above the menu's last group when
+ * that group holds a destructive item (Remove, Delete) - so the edition's
+ * entries never sit under the dangerous one - and at the end otherwise.
+ * Separated by a divider either way. Unchanged when there is nothing to add.
+ *
+ * @param   {object[]} items - the core menu
+ * @param   {object[]} extra - from extensionMenuItems()
+ * @returns {object[]}
+ */
+export function mergeExtensionItems(items, extra) {
+    if (!extra?.length) return items;
+    const out = [...items];
+    let last = -1;
+    for (let i = out.length - 1; i >= 0; i -= 1) {
+        if (out[i]?.type === 'divider') { last = i; break; }
+    }
+    if (last > 0 && out.slice(last + 1).some(item => item?.danger === true)) {
+        out.splice(last, 0, {type: 'divider'}, ...extra);
+        return out;
+    }
+    return out.length ? [...out, {type: 'divider'}, ...extra] : [...extra];
+}

package/plugins/_lib/admin/mail/reader-view.js

@@ -57,7 +57,7 @@ const {
     esc, mailboxDraftsKey, mailboxDraftId, mailboxDraftData, mailboxFingerprint, normaliseDraftMap,
     pruneDraftMap, mailboxDraftDecision, mailboxRestoreQuestion, RESTORE_BUTTONS, settingsDiscardQuestion,
     onceOnly, accountMenuModel, folderReadMenuModel, mailboxRowMenuModel, menuItems, sidebarUrl, hasNewMail,
-    holdEscapeOn
+    holdEscapeOn, extensionMenuItems, extensionPaneActions, mergeExtensionItems
 } = await import(versioned('reader-kit.js'));
 
 /**
@@ -183,7 +183,18 @@ function formatSize(bytes) {
 /**
  * Build the reader view for one plugin.
  *
- * @param   {{pluginName: string, assetVersion?: string, settingsSections?: object[]}} options
+ * @param   {{pluginName: string, assetVersion?: string, settingsSections?: object[],
+ *            features?: object, extensions?: object}} options
+ *   `extensions` lets an edition add actions to the reader itself, each a
+ *   function given the reader's `view` handle (see `extensionView()`):
+ *     - `paneActions(view)` -> `[{id, label, icon, onClick, haspopup?}]`, buttons
+ *       in the Folders pane head beside New folder;
+ *     - `folderItems(folder, view)` -> Domma menu items, added to a folder's
+ *       menu (right-click, ⋮, Shift+F10);
+ *     - `mailboxItems(account, view)` -> the same, on a mailbox row's menu.
+ *   Optional, checked and feature-detected: an edition that passes it to an
+ *   older reader just does not get the entries. Item actions run on the next
+ *   task, so one picked with Enter cannot hand its own Enter to a dialog.
  *   `settingsSections` lets an edition contribute settings without forking the
  *   view: each is `{id, label, render(container, context)}`, and the shell
  *   handles the tabs, the lazy drawing and a section that throws.
@@ -193,7 +204,8 @@ function formatSize(bytes) {
  *   module is imported by a fixed path and carries no stamp of its own.
  * @returns {object} a Domma view
  */
-export function createReaderView({pluginName, assetVersion = ASSET_VERSION, settingsSections = [], features = {}}) {
+export function createReaderView({pluginName, assetVersion = ASSET_VERSION, settingsSections = [], features = {},
+    extensions = {}}) {
 const BASE = `/api/plugins/${pluginName}`;
 
 // Deliberately NOT keyed by plugin. The two editions never run together - the
@@ -3418,6 +3430,8 @@ return {
                     searchInputEl?.focus();
                     break;
                 case 'escape':
+                    // A panel on top owns Escape: it closes that, and only that.
+                    if (openPanels.size) break;
                     if (selected.size) clearSelection();
                     else if (searchQuery) clearSearch();
                     break;
@@ -4795,6 +4809,184 @@ return {
             }
         }
 
+        // ---------------------------------------------------------------
+        // Edition extensions (createReaderView's `extensions` option)
+        // ---------------------------------------------------------------
+
+        /**
+         * What an extension is handed: enough to open a panel of its own
+         * against this mailbox and to tell the reader something changed.
+         * Read through getters, so a handle kept by an open panel still sees
+         * the current mailbox and folders.
+         *
+         * @type {object}
+         */
+        const extensionView = Object.freeze({
+            pluginName,
+            base: BASE,
+            api,
+            assetVersion,
+            /** The mailbox on screen (a mailbox row's menu passes its own). */
+            get account() { return mailboxes.find(b => b.id === currentAccountId) ?? null; },
+            get mailboxes() { return [...mailboxes]; },
+            get folders() { return [...folders]; },
+            get currentFolder() { return currentFolder; },
+            /** False once the screen has gone - check it after every await. */
+            here,
+            /**
+             * Run `fn` once when the screen goes (or is mounted again).
+             *
+             * @param   {Function} fn
+             * @returns {Function} cancel it
+             */
+            onLeave(fn) {
+                if (typeof fn !== 'function') return () => {};
+                let live = true;
+                lifetime.add(() => { if (live) { live = false; fn(); } });
+                return () => { live = false; };
+            },
+            /**
+             * Have the reader look after a slideover the extension opened:
+             * Escape belongs to it while it is on top (the reader's own
+             * Escape - clear the selection, the search - does not also
+             * answer), it is closed when the screen goes, and it is taken
+             * out of the page once closed. Call before `open()`.
+             *
+             * @param   {object} slideover - from E.slideover
+             * @param   {{onClosed?: Function}} [options]
+             * @returns {object} the slideover
+             */
+            panel(slideover, {onClosed} = {}) {
+                return guardPanel(slideover, () => false, '', typeof onClosed === 'function' ? onClosed : () => {});
+            },
+            /** Read the folder list again, staying in the folder that is open. */
+            refreshFolders: () => refreshFolders(),
+            /**
+             * The same as a settings section's `changed`, so a panel written
+             * for one works from the other: reload means the folders (and the
+             * open list) of the mailbox on screen.
+             *
+             * @param   {{reload?: boolean}} [options]
+             * @returns {Promise<void>}
+             */
+            async changed({reload = false} = {}) {
+                profileFor = null;
+                refreshOutbox();
+                if (reload) await refreshFolders();
+            }
+        });
+
+        /**
+         * The folder list again, keeping the open folder when it still
+         * exists (a full loadFolders goes back to the inbox), and the open
+         * list with it - an import into the folder on screen shows at once.
+         *
+         * @returns {Promise<void>}
+         */
+        async function refreshFolders() {
+            if (!here() || !currentAccountId) return;
+            const account = currentAccountId;
+            const seq = ++foldersSeq;
+            try {
+                const params = new URLSearchParams({account, counts: '1'});
+                const result = await api(`${BASE}/folders?${params}`);
+                if (!here() || seq !== foldersSeq || currentAccountId !== account) return;
+                if (!result.folders?.some(f => f.path === currentFolder)) {
+                    await loadFolders({quiet: true});
+                    return;
+                }
+                folders = result.folders;
+                renderFolders();
+                if (!searchQuery) await loadMessages({fresh: true, quiet: true});
+                if (here()) refreshBadge();
+            } catch (err) {
+                if (here()) handleError(err);
+            }
+        }
+
+        /**
+         * Call one of the edition's extension functions, surviving one that
+         * is missing, throws or returns rubbish.
+         *
+         * @param   {string} name
+         * @param   {...*} args
+         * @returns {*}
+         */
+        function callExtension(name, ...args) {
+            const fn = extensions?.[name];
+            if (typeof fn !== 'function') return [];
+            try {
+                return fn(...args, extensionView) ?? [];
+            } catch (err) {
+                console.warn(`[mail] extensions.${name} failed:`, err);
+                return [];
+            }
+        }
+
+        /**
+         * An extension's action, run on the next task - a menu item picked
+         * with Enter that opens a dialog must not hand it that same Enter -
+         * and only while the screen is still here, with a throw shown.
+         *
+         * @param   {Function} fn
+         * @returns {Function}
+         */
+        function deferExtension(fn) {
+            return (...args) => {
+                setTimeout(() => {
+                    if (!here()) return;
+                    Promise.resolve()
+                        .then(() => fn(...args))
+                        .catch(err => E.toast(err?.message || 'That could not be done.', {type: 'error'}));
+                }, 0);
+            };
+        }
+
+        /**
+         * The menu items an extension adds for one row.
+         *
+         * @param   {'folderItems'|'mailboxItems'} name
+         * @param   {object} subject - the folder or mailbox
+         * @returns {object[]}
+         */
+        function extensionItems(name, subject) {
+            return extensionMenuItems(callExtension(name, subject), deferExtension);
+        }
+
+        /**
+         * The extension's buttons in the Folders pane head, beside New folder.
+         *
+         * @returns {void}
+         */
+        function addPaneActions() {
+            const actions = extensionPaneActions(callExtension('paneActions'));
+            if (!actions.length) return;
+            const head = foldersEl?.closest('.mail-folders-pane')?.querySelector('.mail-pane-head');
+            if (!head) return;
+            const before = head.querySelector('#mail-settings-btn');
+            for (const action of actions) {
+                const id = `mail-ext-${action.id}`;
+                if (head.querySelector(`#${id}`)) continue;
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'btn btn-sm btn-ghost';
+                button.id = id;
+                button.title = action.label;
+                button.setAttribute('aria-label', action.label);
+                if (action.haspopup) button.setAttribute('aria-haspopup', action.haspopup);
+                const icon = document.createElement('span');
+                icon.setAttribute('data-icon', action.icon);
+                icon.setAttribute('data-icon-size', '14');
+                button.appendChild(icon);
+                // A click needs no deferring, but it costs nothing and keeps
+                // every entry point the same.
+                button.addEventListener('click', deferExtension(() => action.onClick(extensionView)));
+                if (before?.parentNode === head) head.insertBefore(button, before);
+                else head.appendChild(button);
+            }
+            try { Domma.icons?.scan?.(head); } catch { /* the title still names it */ }
+        }
+
         /**
          * Right-click a folder to manage it.
          *
@@ -4844,7 +5036,7 @@ return {
          * @returns {object[]}
          */
         function accountMenuItemsFor(box) {
-            return menuItems(accountMenuModel({
+            return mergeExtensionItems(menuItems(accountMenuModel({
                 isCurrent: box.id === currentAccountId,
                 isDefault: box.isDefault === true,
                 count: mailboxes.length
@@ -4854,7 +5046,7 @@ return {
                 edit: () => openMailboxForm(box),
                 default: () => toggleDefaultMailbox(box),
                 remove: () => removeMailbox(box)
-            });
+            }), extensionItems('mailboxItems', box));
         }
 
         /**
@@ -4895,8 +5087,9 @@ return {
             const locked = protectedUse || isInbox;
 
             const read = folderReadItems(folder);
-            if (!features.folders) return read;
-            return [
+            const extra = extensionItems('folderItems', folder);
+            if (!features.folders) return mergeExtensionItems(read, extra);
+            return mergeExtensionItems([
                 ...read,
                 {type: 'divider'},
                 {
@@ -4934,7 +5127,7 @@ return {
                     disabled: () => locked,
                     action: () => deleteFolder(folder)
                 }
-            ];
+            ], extra);
         }
 
         /**
@@ -5872,6 +6065,7 @@ return {
                 newFolder.addEventListener('click', () => createFolder(null, {pickParent: true}));
             }
         }
+        addPaneActions();
 
         // A real <input> here, unlike the row ticks: this one is not inside a
         // button, so it can be what it is.

package/plugins/_lib/admin/mail/section-kit.js

@@ -22,6 +22,7 @@
  *
  * @module _lib/admin/mail/section-kit
  */
+import {installFontControls} from './font-controls.js';
 
 /**
  * A `<div>` with Domma classes on it, appended to a parent.
@@ -215,12 +216,14 @@ export function richEditor(parent, html, {height = '10rem', text = ''} = {}) {
         try {
             const editor = E.editor(host, {mode: 'rich', height});
             editor.setValue(html ?? '');
+            let fonts = null;
+            try { fonts = installFontControls(editor); } catch { /* no menus, still an editor */ }
             return {
                 rich: true,
                 get: () => editor.getValue(),
                 getText: () => editor.getText(),
                 set: value => editor.setValue(value ?? ''),
-                destroy: () => editor.destroy?.()
+                destroy: () => { fonts?.destroy(); editor.destroy?.(); }
             };
         } catch {
             host.textContent = '';