domma-cms 1.10.7 → 1.10.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [1.10.9] - 2026-10-24
+
+- **Built against domma-js 0.56.0** - see [its release notes](https://github.com/pinpointzero73/domma/releases/tag/v0.56.0). Seven new building blocks are available to pages and plugins: `E.dropzone` (file drop and upload with progress), `E.rangeSlider` (one or two thumbs, also as `type: 'slider'` form fields), `E.commandPalette` (a Cmd/Ctrl+K launcher), `E.focusTrap`, `E.splitPane`, `E.virtualList` (large and infinite lists) and `Domma.i18n` translations. Nothing existing changes.
+
+## [1.10.8] - 2026-10-24
+
+- **Buttons in email show again.** The mail reader (Email and Mail Reader) stripped the ways most mail colours its buttons - a cell's `bgcolor`, the `background:` style and rules in the message's own `<style>` block - leaving white text on white, so sign-in and confirm buttons (Anthropic's among them) looked missing. Stylesheet rules are now applied to the elements they match before sanitising (not `@media` or `:hover` rules), and table colour and layout attributes, `<center>`, `<font>`, `border-radius` and the like are kept. A background still never loads anything, so blocked remote images stay blocked.
+
 ## [1.10.7] - 2026-10-24
 
 - **Built against domma-js 0.55.0** - see [its release notes](https://github.com/pinpointzero73/domma/releases/tag/v0.55.0). Modals, toasts, badges, tooltips, loaders and back-to-top buttons now follow the site's theme colours (they drew Domma's defaults inside their old shadow roots), and a tooltip no longer sticks on screen when the row it belongs to re-renders. Every component's `onX` option also arrives as `.on('x')` and a `dm:<component>:x` event, every overlay answers `open()`/`close()`, and slideovers, dropdowns and modals take a cancelable `onBeforeClose`.

package/admin/dist/domma/domma-tools.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Tools CSS v0.55.0
+ * Domma Tools CSS v0.56.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-10-24T15:11:03.951Z
- * Commit: 253e259
+ * Built: 2026-10-24T16:15:31.974Z
+ * Commit: f768320
  */
 
 /*!

package/admin/dist/domma/domma-tools.min.js

@@ -1,9 +1,9 @@
 /*!
- * Domma Tools v0.55.0
+ * Domma Tools v0.56.0
  * Developer tools: Theme Roller & Page Roller
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-10-24T15:10:49.146Z
- * Commit: 253e259
+ * Built: 2026-10-24T16:15:16.245Z
+ * Commit: f768320
  *
  * Requires: domma.min.js
  */

package/docs/DommaFeatures.md

@@ -2072,6 +2072,7 @@ Read your own IMAP mailboxes inside the Domma CMS admin without anything ever ch
 - Read-only enforced at protocol level: mailboxes opened with EXAMINE/`readOnly`, bodies fetched with `BODY.PEEK[]` - reading never sets `\Seen`.
 - Folder list (`\Noselect` folders hidden); paged message list, newest first (50 per page by default, capped at 200); opening with no account chosen shows the first mailbox.
 - Message view rendered in a sandboxed iframe (no scripts, no same-origin), HTML sanitised; "Show headers" toggle; icons for priority, replied-to, attachments.
+- Message HTML is sanitised, but keeps what makes mail look right: the message's own `<style>` rules are applied to the elements they match first (not `@media` or `:hover`), and table `bgcolor`/`cellpadding`, `<center>`, `<font>`, `background` (colour and gradients only - never `url()`), `border-radius` and similar survive, so buttons keep their fill (since 1.10.8).
 - Remote images blocked by default (tracking pixels); per-message "Load images" (never persisted); optional per-mailbox list of trusted image senders ("remember senders" switch, add/remove senders) in settings.
 - Attachments downloaded through an authenticated fetch-to-blob.
 - Right-click / context menu on a message: Open, Copy sender's address, Copy subject, Add sender to contacts (core Contacts; hidden when the Contacts Tool is off or the sender is already known).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "1.10.7",
+  "version": "1.10.9",
   "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",
@@ -84,14 +84,18 @@
     "@fastify/rate-limit": "^10.3.0",
     "@fastify/static": "10.1.7",
     "bcryptjs": "^3.0.3",
-    "domma-js": "0.55.0",
+    "css-select": "^7.0.0",
+    "dom-serializer": "^3.1.1",
+    "domma-js": "0.56.0",
     "dotenv": "^17.2.3",
     "fastify": "5.12.7",
     "gray-matter": "^4.0.3",
+    "htmlparser2": "^12.0.0",
     "imapflow": "^2.8.0",
     "mailparser": "^3.12.2",
     "marked": "^15.0.0",
     "nodemailer": "10.2.0",
+    "postcss": "^8.5.31",
     "sanitize-html": "^2.18.1",
     "sharp": "^0.35.5",
     "uuid": "13.0.1"

package/plugins/_lib/mail/render.js

@@ -26,6 +26,10 @@
  * @module mail-reader/services/render
  */
 import {createHash} from 'node:crypto';
+import {selectAll} from 'css-select';
+import {render as renderDom} from 'dom-serializer';
+import {DomUtils, parseDocument} from 'htmlparser2';
+import postcss from 'postcss';
 import sanitizeHtml from 'sanitize-html';
 
 /** A 1x1 transparent GIF - stands in for a blocked remote image. */
@@ -36,12 +40,140 @@ const BLOCKED_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAA
  * unwrapped or dropped by sanitize-html.
  */
 const ALLOWED_TAGS = [
-    'a', 'b', 'blockquote', 'br', 'caption', 'code', 'col', 'colgroup', 'dd', 'div', 'dl', 'dt',
-    'em', 'figcaption', 'figure', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'li',
+    'a', 'b', 'blockquote', 'br', 'caption', 'center', 'code', 'col', 'colgroup', 'dd', 'div', 'dl', 'dt',
+    'em', 'figcaption', 'figure', 'font', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'li',
     'ol', 'p', 'pre', 'q', 's', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'table',
     'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u', 'ul'
 ];
 
+/** Ceilings on the stylesheet inliner, so a hostile message cannot make it the slow part. */
+const MAX_STYLESHEET_CHARS = 200_000;
+const MAX_INLINED_DECLARATIONS = 50_000;
+
+/**
+ * Rough selector specificity - ids, then classes/attributes, then tags.
+ * Close enough to order a newsletter's rules; nothing depends on it for safety.
+ *
+ * @param   {string} selector
+ * @returns {number}
+ */
+function specificity(selector) {
+    const ids = (selector.match(/#[\w-]+/g) ?? []).length;
+    const classes = (selector.match(/\.[\w-]+|\[[^\]]*\]/g) ?? []).length;
+    const tags = (selector.match(/(^|[\s>+~])[a-z][\w-]*/gi) ?? []).length;
+    return ids * 10000 + classes * 100 + tags;
+}
+
+/**
+ * Drop the parts of a `background` shorthand that load something, keeping its
+ * colour. `background:#d97757 url(x.png) no-repeat` becomes `#d97757 no-repeat`.
+ *
+ * @param   {string} value
+ * @returns {string}
+ */
+function stripBackgroundLoads(value) {
+    if (value.includes('\\')) return '';
+    return value.replace(/\b(url|image|image-set|element|cross-fade|expression)\s*\((?:[^()]|\([^()]*\))*\)/gi, '').trim();
+}
+
+/**
+ * Move a message's `<style>` rules onto the elements they match, and tidy the
+ * inline styles the sanitiser is about to judge.
+ *
+ * Mail clients have done this for years because so much mail needs it: a
+ * button is often `<a class="button">` with its colours in the head, plus a
+ * white `color` inline. The sanitiser drops `<style>` and `class`, so without
+ * this the background goes and the label is white on white - an invisible
+ * button. Only plain top-level rules are applied; `@media` blocks (mobile and
+ * dark-mode overrides) and pseudo-classes (`:hover`) are not states the
+ * reading pane is in.
+ *
+ * Nothing here decides what is safe - every property still goes through the
+ * sanitiser's allowlist afterwards.
+ *
+ * @param   {string} html
+ * @returns {string}
+ */
+function inlineStyles(html) {
+    let dom;
+    try {
+        dom = parseDocument(html);
+    } catch {
+        return html;
+    }
+
+    const pending = new Map();
+    const styleElements = DomUtils.getElementsByTagName('style', dom, true);
+    const css = styleElements.map((element) => DomUtils.textContent(element)).join('\n')
+        .slice(0, MAX_STYLESHEET_CHARS);
+
+    if (css.trim()) {
+        let root = null;
+        try {
+            root = postcss.parse(css);
+        } catch {
+            // A stylesheet postcss cannot read is one we do not apply.
+        }
+
+        const rules = [];
+        root?.each((node) => {
+            if (node.type !== 'rule') return;
+            const declarations = [];
+            node.each((decl) => {
+                if (decl.type === 'decl') declarations.push({prop: decl.prop.toLowerCase(), value: decl.value, important: decl.important});
+            });
+            if (!declarations.length) return;
+            for (const selector of node.selectors ?? []) {
+                if (selector.includes(':')) continue;
+                rules.push({selector, declarations, weight: specificity(selector), order: rules.length});
+            }
+        });
+        rules.sort((a, b) => a.weight - b.weight || a.order - b.order);
+
+        let budget = MAX_INLINED_DECLARATIONS;
+        for (const rule of rules) {
+            let matches;
+            try {
+                matches = selectAll(rule.selector, dom);
+            } catch {
+                continue;
+            }
+            for (const element of matches) {
+                budget -= rule.declarations.length;
+                if (budget < 0) break;
+                if (!pending.has(element)) pending.set(element, {normal: [], important: []});
+                const slot = pending.get(element);
+                for (const decl of rule.declarations) {
+                    (decl.important ? slot.important : slot.normal).push(`${decl.prop}:${decl.value}`);
+                }
+            }
+            if (budget < 0) break;
+        }
+    }
+
+    // Inline styles beat the sheet, except where the sheet said !important.
+    for (const [element, slot] of pending) {
+        element.attribs.style = [...slot.normal, element.attribs.style ?? '', ...slot.important]
+            .filter(Boolean).join(';');
+    }
+
+    // A background shorthand loses only what would load; its colour stays.
+    const backgrounds = DomUtils.findAll((node) => /background\s*:/i.test(node.attribs?.style ?? ''), dom.children);
+    for (const element of backgrounds) {
+        element.attribs.style = element.attribs.style.replace(
+            /(^|;)(\s*background\s*:)([^;]*)/gi,
+            (match, lead, prop, value) => {
+                const kept = stripBackgroundLoads(value);
+                return kept ? `${lead}${prop}${kept}` : lead;
+            }
+        );
+    }
+
+    // Untouched mail goes to the sanitiser exactly as it arrived.
+    if (!pending.size && !backgrounds.length) return html;
+    return renderDom(dom);
+}
+
 /**
  * Build a cid → data URI map from a parsed message's inline attachments.
  *
@@ -74,17 +206,23 @@ function inlineImageMap(attachments, maxBytes) {
 function sanitiseBody(html, options) {
     let blockedImages = 0;
 
-    const clean = sanitizeHtml(html, {
+    const clean = sanitizeHtml(inlineStyles(html), {
         allowedTags: ALLOWED_TAGS,
         allowedAttributes: {
             // target/rel are added by transformTags below, and attribute
             // filtering runs AFTER that - leave them off this list and the
             // rel we just set is stripped straight back off again.
             a: ['href', 'title', 'target', 'rel'],
-            img: ['src', 'alt', 'title', 'width', 'height', 'data-blocked-src'],
-            td: ['colspan', 'rowspan', 'align', 'valign'],
-            th: ['colspan', 'rowspan', 'align', 'valign'],
-            table: ['width', 'align'],
+            img: ['src', 'alt', 'title', 'width', 'height', 'align', 'border', 'data-blocked-src'],
+            // Table mail is laid out - and its buttons coloured - with these
+            // attributes. None of them can load anything.
+            td: ['colspan', 'rowspan', 'align', 'valign', 'width', 'height', 'bgcolor'],
+            th: ['colspan', 'rowspan', 'align', 'valign', 'width', 'height', 'bgcolor'],
+            tr: ['align', 'valign', 'bgcolor'],
+            table: ['width', 'height', 'align', 'bgcolor', 'border', 'cellpadding', 'cellspacing'],
+            font: ['color', 'face', 'size'],
+            p: ['align'],
+            div: ['align'],
             '*': ['style']
         },
         // Inline styles are what makes mail readable, so they stay - but only
@@ -93,6 +231,24 @@ function sanitiseBody(html, options) {
             '*': {
                 'color': [/^.*$/],
                 'background-color': [/^.*$/],
+                // The shorthand is how a lot of mail colours its buttons.
+                // inlineStyles() has already cut out anything that loads; this
+                // refuses whatever got past it.
+                'background': [/^(?![\s\S]*(\\|\b(url|image|image-set|element|cross-fade|expression)\s*\())[\s\S]*$/i],
+                'border-radius': [/^.*$/],
+                'border-top': [/^.*$/],
+                'border-right': [/^.*$/],
+                'border-bottom': [/^.*$/],
+                'border-left': [/^.*$/],
+                'border-color': [/^.*$/],
+                'border-style': [/^.*$/],
+                'border-width': [/^.*$/],
+                'letter-spacing': [/^.*$/],
+                'text-transform': [/^.*$/],
+                'white-space': [/^.*$/],
+                'word-break': [/^.*$/],
+                'min-width': [/^.*$/],
+                'min-height': [/^.*$/],
                 'font-size': [/^.*$/],
                 'font-weight': [/^.*$/],
                 'font-style': [/^.*$/],

package/plugins/free-tier.lock.json

@@ -1,6 +1,6 @@
 {
   "note": "Written by `make sync-free-tier` in dcms-marketplace. Do not edit these plugins here - edit them there and sync.",
-  "source": "dcms-marketplace@4201b7a",
+  "source": "dcms-marketplace@397f460",
   "plugins": {
     "blog": {
       "version": "1.10.1",
@@ -220,7 +220,7 @@
         "CLAUDE.md": "32132446515e66f6784d01b11b1ded8913b0778087472edb667bfd83cc3a871c",
         "admin/views/mail.js": "c5c6483f9618c75cac8f4be32d3aea99511db76d4b9d38b8ef43bdc1d35db3c5",
         "config.js": "6e65803ad822a9acda40c203631b8eb32a87cf9d9e5f1c7cb59d01aa406075c6",
-        "docs/guide.md": "d6b5944740ea1bbd689034ef726d8bc0f9bfeb28ea62b63c258292962d45cf18",
+        "docs/guide.md": "75e5742c16b2230fb4943ae3214d946436de556eda719e22cde50d8a13a9a88f",
         "plugin.js": "7f602a60c4eca7d3637659d03d5de9e242584666846b16c9e5a1b758e4856c9f",
         "plugin.json": "e5ac7f3496d9a535fa4899d1de87a514535084d13acecd6a5897744b6174807a"
       }

package/plugins/mail-reader/docs/guide.md

@@ -49,7 +49,7 @@ You need your mailbox's IMAP details from your email provider: the server name,
 ### Message
 
 - The header shows who sent it and when. Click **Show headers** for Reply-To, all recipients and the message id; **Hide headers** folds them again. Your choice is remembered.
-- Messages are shown in a locked-down frame: scripts in email never run.
+- Messages are shown in a locked-down frame: scripts in email never run. Colours, buttons and layout from the message's own styles are kept.
 - If a message has remote images, a notice says how many were blocked. Click **Load images** to load them for this message only. Loading them tells the sender you opened it.
 - **Always from** (followed by the sender's address) trusts that sender, so their images load straight away in future. It appears only when **Offer to remember senders** is on (see Settings).
 - Click an attachment to download it.