domma-cms 1.6.58 → 1.6.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "1.6.58",
+  "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/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 = '';