domma-cms 1.6.37 → 1.6.39

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

@@ -1,9 +1,9 @@
 /*!
- * Domma Tools CSS v0.51.11
+ * Domma Tools CSS v0.51.13
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-10-12T06:05:33.864Z
- * Commit: a53de2f
+ * Built: 2026-10-13T15:14:47.576Z
+ * Commit: 85d3945
  */
 
 /*!

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

@@ -1,9 +1,9 @@
 /*!
- * Domma Tools v0.51.11
+ * Domma Tools v0.51.13
  * Developer tools: Theme Roller & Page Roller
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-10-12T06:05:20.912Z
- * Commit: a53de2f
+ * Built: 2026-10-13T15:14:31.868Z
+ * Commit: 85d3945
  *
  * Requires: domma.min.js
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "1.6.37",
+  "version": "1.6.39",
   "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,7 +84,7 @@
     "@fastify/rate-limit": "^10.3.0",
     "@fastify/static": "9.1.1",
     "bcryptjs": "^3.0.3",
-    "domma-js": "0.51.11",
+    "domma-js": "0.51.13",
     "dotenv": "^17.2.3",
     "fastify": "5.8.5",
     "gray-matter": "^4.0.3",

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, #e2e8f0);border-radius:var(--dm-radius-md, 8px);overflow:hidden;background:var(--dm-surface, #fff)}.mail-folders-pane,.mail-list-pane{display:flex;flex-direction:column;border-right:1px solid var(--dm-border, #e2e8f0);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, #64748b);border-bottom:1px solid var(--dm-border, #e2e8f0);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, #e2e8f0);color:var(--dm-text-muted, #64748b);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, #64748b);border-bottom:1px solid var(--dm-border, #e2e8f0);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, #2563eb);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, #2563eb);color:var(--dm-primary-text, #fff);flex-shrink:0}.mail-selection span{flex:1;min-width:0}.mail-selection .btn{color:var(--dm-primary-text, #fff);border:1px solid currentColor;background:transparent}.mail-selection .btn:hover{background:color-mix(in srgb,var(--dm-primary-text, #fff) 15%,transparent)}.mail-item.is-selected{background:var(--dm-active-bg, rgba(15, 23, 42, .07));box-shadow:inset 3px 0 0 var(--dm-primary, #2563eb)}.mail-undo{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;font-size:.78rem;background:var(--dm-active-bg, rgba(15, 23, 42, .07));border-bottom:1px solid var(--dm-border, #e2e8f0);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, #e2e8f0);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, #2563eb)}.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, #2563eb);color:var(--dm-primary-text, #fff);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, #fff);cursor:pointer;text-align:left;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--dm-text-muted, #64748b)}.mail-account:hover{background:var(--dm-hover-bg, rgba(15, 23, 42, .04))}.mail-account.is-active{color:var(--dm-text, #1e293b);position:sticky;top:0;z-index:1;background:var(--dm-surface, #fff)}.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, #1e293b)}.mail-folder:hover{background:var(--dm-hover-bg, rgba(15, 23, 42, .04))}.mail-folder.is-active{background:var(--dm-active-bg, rgba(15, 23, 42, .07));color:var(--dm-primary, #2563eb);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, #e2e8f0);background:none;cursor:pointer;color:var(--dm-text, #1e293b)}.mail-item:hover{background:var(--dm-hover-bg, rgba(15, 23, 42, .04))}.mail-item.is-active{background:var(--dm-active-bg, rgba(15, 23, 42, .07))}.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, #64748b);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, #64748b)}.mail-pager{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .6rem;border-top:1px solid var(--dm-border, #e2e8f0);font-size:.75rem;color:var(--dm-text-muted, #64748b);flex-shrink:0}.mail-reader-head{padding:.75rem 1rem;border-bottom:1px solid var(--dm-border, #e2e8f0);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, #1e293b)}.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, #64748b)}.mail-reader-body{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:var(--dm-surface, #fff)}.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, #8a6d1f);color:var(--dm-warning-text, #fff);border-bottom:1px solid var(--dm-border, #e2e8f0)}.mail-notice .btn{color:var(--dm-warning-text, #fff);border:1px solid currentColor;background:transparent;opacity:.95}.mail-notice .btn:hover{background:color-mix(in srgb,var(--dm-warning-text, #fff) 15%,transparent);opacity:1}.mail-attachments{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem .75rem;border-bottom:1px solid var(--dm-border, #e2e8f0);background:var(--dm-background-alt, rgba(15, 23, 42, .03))}.mail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;color:var(--dm-text-muted, #94a3b8);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, #e2e8f0)}.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, #e2e8f0);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, #2563eb);color:var(--dm-primary-text, #fff);outline:2px solid var(--dm-primary, #2563eb);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, #64748b);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, #2563eb)}.mail-item-tick:hover{color:var(--dm-primary, #2563eb);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, #dc2626)}.mail-item-meta .is-low{color:var(--dm-text-muted, #64748b);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, #64748b);background:var(--dm-active-bg, rgba(15, 23, 42, .07));cursor:pointer}.mail-thread-chip:hover{color:var(--dm-primary, #2563eb)}.mail-thread-chip.is-unread{background:var(--dm-primary, #2563eb);color:var(--dm-primary-text, #fff)}.mail-item.is-in-thread{padding-left:1.6rem;box-shadow:inset 3px 0 0 var(--dm-border, #e2e8f0)}.mail-item.is-in-thread .mail-item-from{font-size:.8rem}.mail-pane-head .btn.is-on{color:var(--dm-primary, #2563eb);background:var(--dm-active-bg, rgba(15, 23, 42, .07))}#mail-outbox-btn{font-size:.72rem;font-weight:700}#mail-outbox-btn.is-failed{color:var(--dm-danger, #dc2626)}.mail-attachment{display:inline-flex;align-items:center;border:1px solid var(--dm-border, #e2e8f0);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, #e2e8f0)!important;opacity:.7}.mail-attachment-save:hover{opacity:1;color:var(--dm-primary, #2563eb)}.mail-section-heading{margin:1rem 0 .1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--dm-text-muted, #64748b)}.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, #64748b);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, #2563eb)}.mail-section-intro{display:flex;align-items:center;gap:.35rem;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--dm-border, #e2e8f0)}.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, #e2e8f0);border-radius:4px;padding:.1rem .25rem}
+#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, #e2e8f0);border-radius:var(--dm-radius-md, 8px);overflow:hidden;background:var(--dm-surface, #fff)}.mail-folders-pane,.mail-list-pane{display:flex;flex-direction:column;border-right:1px solid var(--dm-border, #e2e8f0);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, #64748b);border-bottom:1px solid var(--dm-border, #e2e8f0);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, #e2e8f0);color:var(--dm-text-muted, #64748b);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, #64748b);border-bottom:1px solid var(--dm-border, #e2e8f0);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, #2563eb);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, #2563eb);color:var(--dm-primary-text, #fff);flex-shrink:0}.mail-selection span{flex:1;min-width:0}.mail-selection .btn{color:var(--dm-primary-text, #fff);border:1px solid currentColor;background:transparent}.mail-selection .btn:hover{background:color-mix(in srgb,var(--dm-primary-text, #fff) 15%,transparent)}.mail-item.is-selected{background:var(--dm-active-bg, rgba(15, 23, 42, .07));box-shadow:inset 3px 0 0 var(--dm-primary, #2563eb)}.mail-undo{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;font-size:.78rem;background:var(--dm-active-bg, rgba(15, 23, 42, .07));border-bottom:1px solid var(--dm-border, #e2e8f0);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, #e2e8f0);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, #2563eb)}.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, #2563eb);color:var(--dm-primary-text, #fff);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, #fff);cursor:pointer;text-align:left;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--dm-text-muted, #64748b)}.mail-account:hover{background:var(--dm-hover-bg, rgba(15, 23, 42, .04))}.mail-account.is-active{color:var(--dm-text, #1e293b);position:sticky;top:0;z-index:1;background:var(--dm-surface, #fff)}.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, #1e293b)}.mail-folder:hover{background:var(--dm-hover-bg, rgba(15, 23, 42, .04))}.mail-folder.is-active{background:var(--dm-active-bg, rgba(15, 23, 42, .07));color:var(--dm-primary, #2563eb);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, #e2e8f0);background:none;cursor:pointer;color:var(--dm-text, #1e293b)}.mail-item:hover{background:var(--dm-hover-bg, rgba(15, 23, 42, .04))}.mail-item.is-active{background:var(--dm-active-bg, rgba(15, 23, 42, .07))}.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, #64748b);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, #64748b)}.mail-pager{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .6rem;border-top:1px solid var(--dm-border, #e2e8f0);font-size:.75rem;color:var(--dm-text-muted, #64748b);flex-shrink:0}.mail-reader-head{padding:.75rem 1rem;border-bottom:1px solid var(--dm-border, #e2e8f0);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, #1e293b)}.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, #64748b)}.mail-reader-body{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:var(--dm-surface, #fff)}.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, #8a6d1f);color:var(--dm-warning-text, #fff);border-bottom:1px solid var(--dm-border, #e2e8f0)}.mail-notice .btn{color:var(--dm-warning-text, #fff);border:1px solid currentColor;background:transparent;opacity:.95}.mail-notice .btn:hover{background:color-mix(in srgb,var(--dm-warning-text, #fff) 15%,transparent);opacity:1}.mail-attachments{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem .75rem;border-bottom:1px solid var(--dm-border, #e2e8f0);background:var(--dm-background-alt, rgba(15, 23, 42, .03))}.mail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;color:var(--dm-text-muted, #94a3b8);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, #e2e8f0)}.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, #e2e8f0);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, #2563eb);color:var(--dm-primary-text, #fff);outline:2px solid var(--dm-primary, #2563eb);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, #64748b);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, #2563eb)}.mail-item-tick:hover{color:var(--dm-primary, #2563eb);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, #dc2626)}.mail-item-meta .is-low{color:var(--dm-text-muted, #64748b);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, #64748b);background:var(--dm-active-bg, rgba(15, 23, 42, .07));cursor:pointer}.mail-thread-chip:hover{color:var(--dm-primary, #2563eb)}.mail-thread-chip.is-unread{background:var(--dm-primary, #2563eb);color:var(--dm-primary-text, #fff)}.mail-item.is-in-thread{padding-left:1.6rem;box-shadow:inset 3px 0 0 var(--dm-border, #e2e8f0)}.mail-item.is-in-thread .mail-item-from{font-size:.8rem}.mail-pane-head .btn.is-on{color:var(--dm-primary, #2563eb);background:var(--dm-active-bg, rgba(15, 23, 42, .07))}#mail-outbox-btn{font-size:.72rem;font-weight:700}#mail-outbox-btn.is-failed{color:var(--dm-danger, #dc2626)}.mail-attachment{display:inline-flex;align-items:center;border:1px solid var(--dm-border, #e2e8f0);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, #e2e8f0)!important;opacity:.7}.mail-attachment-save:hover{opacity:1;color:var(--dm-primary, #2563eb)}.mail-section-heading{margin:1rem 0 .1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--dm-text-muted, #64748b)}.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, #64748b);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, #2563eb)}.mail-section-intro{display:flex;align-items:center;gap:.35rem;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--dm-border, #e2e8f0)}.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, #e2e8f0);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}

package/plugins/_lib/admin/mail/oauth-panel.js

@@ -0,0 +1,303 @@
+/**
+ * "Sign in with Microsoft / Google" for a mailbox - the part of the mailbox
+ * form that replaces the password with a provider sign-in (OAuth2/XOAUTH2).
+ *
+ * The customer registers their OWN app with the provider, so the panel
+ * carries the step-by-step guide for each, with this site's exact redirect
+ * URI and a Copy button (the Docs Pro cloud-copies design). Connect opens the
+ * provider in a popup; the server's callback page tells this window it is
+ * done, and when it cannot (an admin opened on another address than the
+ * site's) the closed popup is noticed instead.
+ *
+ * Shown only when the edition offers it (`features.oauth`) AND the server
+ * answers `GET /oauth/status` - an engine without the routes says 404 and the
+ * form stays password-only.
+ *
+ * @module _lib/admin/mail/oauth-panel
+ */
+
+const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+/** What a stored sign-in's status says, and how it looks. Pure. */
+export function describeSignIn(box) {
+    const o = box?.oauth;
+    if (box?.auth !== 'oauth' || !o) return null;
+    const who = o.provider === 'google' ? 'Google' : 'Microsoft';
+    if (o.status === 'ok') return {tone: 'ok', chip: 'Connected', text: `Signed in with ${who}.`};
+    if (o.status === 'disconnected') return {tone: 'quiet', chip: 'Disconnected', text: o.error || 'Disconnected. Reconnect to use this mailbox again.'};
+    return {tone: 'bad', chip: 'Needs reconnecting', text: o.error || `The ${who} sign-in has expired. Reconnect to sign in again.`};
+}
+
+/**
+ * The setup guide for each provider, written from the vendors' documentation
+ * (2026-10). `uri` is this site's exact return address.
+ *
+ * @param   {'microsoft'|'google'} provider
+ * @param   {string} uri
+ * @returns {string} HTML
+ */
+export function providerGuide(provider, uri) {
+    const code = `<code class="mail-oauth-code">${esc(uri)}</code> <button type="button" class="btn btn-xs btn-ghost" data-act="copy-uri">Copy</button>`;
+    if (provider === 'microsoft') {
+        return `<p>You register your own small app with Microsoft, so your mail is read with your sign-in and nobody else's app is involved. Works for Microsoft 365 (work or school) and Outlook.com.</p><ol>
+            <li>Go to <a href="https://entra.microsoft.com/" target="_blank" rel="noopener">entra.microsoft.com</a> (or the Azure portal) &gt; <strong>App registrations &gt; New registration</strong>.</li>
+            <li>Name it (for example "Domma Mail"). Supported account types: <strong>Accounts in any organizational directory and personal Microsoft accounts</strong> - or <strong>this organizational directory only</strong> for one company's mailboxes (then put its Directory (tenant) ID in Tenant below). Redirect URI: platform <strong>Web</strong>, exactly:<br>${code}</li>
+            <li>Copy the <strong>Application (client) ID</strong> from the Overview.</li>
+            <li><strong>Certificates &amp; secrets &gt; New client secret</strong>. Copy its <strong>Value</strong> (not the Secret ID) straight away - it is shown once. Note when it expires: on that day the mailbox needs reconnecting with a new secret.</li>
+            <li><strong>API permissions &gt; Add a permission &gt; Microsoft Graph &gt; Delegated</strong>: tick <code>IMAP.AccessAsUser.All</code>, <code>SMTP.Send</code>, <code>offline_access</code>, <code>openid</code> and <code>email</code>.</li>
+            <li><strong>Microsoft 365:</strong> the mailbox needs <strong>IMAP</strong> and <strong>Authenticated SMTP</strong> switched on (Microsoft 365 admin center &gt; Users &gt; the user &gt; Mail &gt; Manage email apps). Your organisation may also have to consent to the app. <strong>Outlook.com:</strong> turn on IMAP under Settings &gt; Mail &gt; Forwarding and IMAP.</li>
+            <li>Fill in the fields here and press <strong>Connect</strong>, then sign in as the mailbox. For a Microsoft 365 <em>shared</em> mailbox, type its address in Email address and sign in as someone with Full Access to it.</li></ol>`;
+    }
+    return `<p>You make your own small Google app, so your mail is read with your sign-in and nobody else's app is involved. Works for Gmail and Google Workspace.</p><ol>
+        <li>Go to <a href="https://console.cloud.google.com/" target="_blank" rel="noopener">console.cloud.google.com</a> and create a project (or choose one). Under <strong>APIs &amp; Services &gt; Library</strong> enable the <strong>Gmail API</strong>.</li>
+        <li>Set up the <strong>OAuth consent screen</strong> (newer consoles: <strong>Google Auth Platform</strong>): an app name such as "Domma Mail" and your email. Audience: <strong>Internal</strong> on Google Workspace - no review and no time limit. For a personal Gmail account it has to be <strong>External</strong>.</li>
+        <li><strong>Data access</strong>: add the scope <code>https://mail.google.com/</code>. Google calls it <em>restricted</em>: an External app used by the public needs Google's verification and a security assessment. For your own mailboxes (under 100 users) you can skip that and click through Google's "unverified app" warning (Advanced &gt; Go to the app).</li>
+        <li><strong>Publish the app</strong> (Audience &gt; Publish app, <em>In production</em>). While an External app says <em>Testing</em>, Google ends the sign-in after <strong>7 days</strong> and the mailbox needs reconnecting every week.</li>
+        <li><strong>Clients &gt; Create client</strong> (or Credentials &gt; OAuth client ID): type <strong>Web application</strong>. Under <strong>Authorised redirect URIs</strong> add exactly:<br>${code}</li>
+        <li>Copy the <strong>Client ID</strong> and <strong>Client secret</strong> into the fields here and press <strong>Connect</strong>, then sign in as the mailbox. On Google Workspace an administrator may have to allow the app (Admin console &gt; Security &gt; API controls).</li></ol>`;
+}
+
+const TONE = {ok: 'text-success', bad: 'text-danger', quiet: 'text-muted'};
+
+const TEMPLATE = `
+<div class="mail-oauth">
+    <p class="mail-oauth-warn text-sm" data-bind-hidden="https.value">This site's address starts with <strong>http://</strong>. Microsoft and Google only return to <strong>https://</strong> addresses: set the Site URL (with https) in Settings &gt; General first.</p>
+    <div class="mail-oauth-state" data-bind-hidden="!hasState.value">
+        <span data-bind-class="'badge mail-oauth-chip mail-oauth-chip--' + stateTone.value" data-bind-text="stateChip.value"></span>
+        <span class="text-sm" data-bind-text="stateText.value"></span>
+    </div>
+    <details class="mail-oauth-guide">
+        <summary>How to set this up <span data-help-title="Your own app" data-help="Each site signs in with an app YOU register with Microsoft or Google - so nobody else's app stands between you and your mail, and you can withdraw it at any time from the provider's side."></span></summary>
+        <div class="mail-oauth-guide-body text-sm"></div>
+    </details>
+    <div class="mail-form-stack">
+        <div>
+            <label class="form-label" for="mail-oauth-label">Name</label>
+            <input id="mail-oauth-label" class="form-input" maxlength="80" data-model="label.value" placeholder="What to call this mailbox">
+        </div>
+        <div>
+            <label class="form-label" for="mail-oauth-user">Email address <span data-help="Leave blank to use the account you sign in as. Type an address only for a Microsoft 365 shared mailbox you have Full Access to."></span></label>
+            <input id="mail-oauth-user" class="form-input" type="email" maxlength="254" data-model="username.value" data-bind-disabled="locked.value" placeholder="Optional - the account you sign in as">
+        </div>
+        <div>
+            <label class="form-label" for="mail-oauth-client" data-bind-text="clientIdLabel.value">Client ID</label>
+            <input id="mail-oauth-client" class="form-input" maxlength="200" autocomplete="off" spellcheck="false" data-model="clientId.value">
+        </div>
+        <div>
+            <label class="form-label" for="mail-oauth-secret">Client secret <span data-help="Stored sealed on this server and never sent back to the browser. Microsoft secrets expire (you chose when): on that day the mailbox needs reconnecting with a new one."></span></label>
+            <input id="mail-oauth-secret" class="form-input" type="password" maxlength="2000" autocomplete="new-password" data-model="clientSecret.value" data-bind-placeholder="secretPlaceholder.value">
+        </div>
+        <div data-bind-hidden="!isMicrosoft.value">
+            <label class="form-label" for="mail-oauth-tenant">Tenant <span data-help="Leave as common unless the app is registered for your organisation only - then its Directory (tenant) ID."></span></label>
+            <input id="mail-oauth-tenant" class="form-input" maxlength="100" spellcheck="false" data-model="tenant.value" placeholder="common">
+        </div>
+    </div>
+    <div data-bind-class="'text-sm mail-status ' + statusClass.value" data-bind-text="status.value"></div>
+    <div class="flex justify-between gap-2 mt-2">
+        <div class="flex gap-2">
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="test" data-bind-hidden="!canTest.value" data-bind-disabled="busy.value">Test</button>
+            <button type="button" class="btn btn-sm btn-ghost text-danger" data-on-click="disconnect" data-bind-hidden="!canDisconnect.value" data-bind-disabled="busy.value">Disconnect</button>
+        </div>
+        <div class="flex gap-2">
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="saveName" data-bind-hidden="!isSaved.value" data-bind-disabled="busy.value">Save name</button>
+            <button type="button" class="btn btn-sm btn-primary" data-on-click="connect" data-bind-disabled="busy.value" data-bind-text="connectLabel.value">Connect</button>
+        </div>
+    </div>
+</div>`;
+
+/**
+ * Mount the sign-in panel.
+ *
+ * @param   {HTMLElement} host
+ * @param   {{provider: 'microsoft'|'google', box: object|null, base: string, api: Function,
+ *            status: {redirectUri: string, https: boolean}, helpPopovers: Function,
+ *            onConnected: (accountId: string|null) => void, onChanged: () => void, onCancel: () => void}} o
+ * @returns {{dispose: () => void, dirty: () => boolean, setProvider: (p: string) => void}}
+ */
+export function mountSignIn(host, {provider: first, box, base, api, status, helpPopovers, onConnected, onChanged, onCancel}) {
+    const signedIn = box?.auth === 'oauth' ? box.oauth : null;
+    const provider = M.observable(signedIn?.provider ?? first);
+    const label = M.observable(box?.label ?? '');
+    const username = M.observable('');
+    const clientId = M.observable(signedIn?.clientId ?? '');
+    const clientSecret = M.observable('');
+    const tenant = M.observable(signedIn?.tenant ?? 'common');
+    const busy = M.observable(false);
+    const said = M.observable('');
+    const tone = M.observable('quiet');
+    const current = M.observable(box);
+    const say = (text, t = 'quiet') => { said.value = text ?? ''; tone.value = t; };
+
+    const opened = JSON.stringify({l: label.peek(), u: username.peek(), c: clientId.peek(), t: tenant.peek()});
+
+    const holder = document.createElement('div');
+    holder.innerHTML = TEMPLATE.trim();
+    const root = holder.firstElementChild;
+    const guideBody = root.querySelector('.mail-oauth-guide-body');
+    const guide = root.querySelector('.mail-oauth-guide');
+    // Open for a first setup, folded once there is a sign-in to look at.
+    if (!signedIn) guide.open = true;
+    host.appendChild(root);
+    // Help markers before binding (they stay where they are), then bind.
+    // (Computeds below read observables only - never another computed.)
+    const stopHelp = helpPopovers(root, {position: 'bottom'});
+
+    const stopGuide = M.effect(() => { guideBody.innerHTML = providerGuide(provider.value, status.redirectUri); });
+    root.addEventListener('click', (event) => {
+        if (!event.target.closest('[data-act="copy-uri"]')) return;
+        navigator.clipboard?.writeText(status.redirectUri)
+            .then(() => E.toast('Copied', {type: 'success'}))
+            .catch(() => E.toast('Copy it by hand - the browser refused.', {type: 'warning'}));
+    });
+
+    let popup = null;
+    let watch = null;
+    const onMessage = (event) => {
+        // Our window, our page, our origin: anything else posting this shape is ignored.
+        if (!popup || event.source !== popup || event.origin !== location.origin || event.data?.type !== 'domma-mail-oauth') return;
+        finish(event.data.ok, event.data.message, event.data.accountId ?? null);
+    };
+    window.addEventListener('message', onMessage);
+
+    function stopWatching() {
+        if (watch) clearInterval(watch);
+        watch = null;
+    }
+
+    function finish(ok, message, accountId) {
+        stopWatching();
+        popup = null;
+        busy.value = false;
+        if (ok) {
+            say(message || 'Connected.', 'ok');
+            clientSecret.value = '';
+            onConnected(accountId);
+        } else {
+            say(message || 'The sign-in was not completed.', 'bad');
+        }
+    }
+
+    async function connect() {
+        // The window must open inside the click itself, or the browser blocks it.
+        popup = window.open('about:blank', 'domma-mail-oauth', 'width=560,height=720');
+        if (!popup) {
+            say('The browser blocked the sign-in window. Allow pop-ups for this site and try again.', 'bad');
+            return;
+        }
+        busy.value = true;
+        say('Waiting for you to sign in…');
+        try {
+            const r = await api(`${base}/oauth/start`, 'POST', {
+                accountId: box?.id ?? null,
+                provider: provider.peek(),
+                clientId: clientId.peek().trim(),
+                clientSecret: clientSecret.peek(),
+                tenant: tenant.peek().trim(),
+                label: label.peek().trim(),
+                username: username.peek().trim()
+            });
+            popup.location.href = r.url;
+            // The callback page posts back when it can; if the admin is open on
+            // another address than the site's, the message cannot arrive - so a
+            // closed window also counts as "done, go and look".
+            watch = setInterval(() => {
+                if (popup && popup.closed) finish(null, null, null);
+            }, 1000);
+        } catch (err) {
+            try { popup.close(); } catch { /* gone */ }
+            popup = null;
+            busy.value = false;
+            say(err.message, 'bad');
+        }
+    }
+
+    const bindings = M.applyBindings({
+        label, username, clientId, clientSecret, tenant, busy,
+        https: M.computed(() => status.https !== false),
+        isMicrosoft: M.computed(() => provider.value === 'microsoft'),
+        clientIdLabel: M.computed(() => (provider.value === 'microsoft' ? 'Application (client) ID' : 'Client ID')),
+        secretPlaceholder: M.computed(() => (signedIn?.hasClientSecret && signedIn.provider === provider.value
+            ? 'Saved - leave blank to keep it' : (provider.value === 'microsoft' ? 'The secret\'s Value' : 'Client secret'))),
+        locked: M.computed(() => Boolean(signedIn)),
+        hasState: M.computed(() => Boolean(describeSignIn(current.value))),
+        stateChip: M.computed(() => describeSignIn(current.value)?.chip ?? ''),
+        stateText: M.computed(() => describeSignIn(current.value)?.text ?? ''),
+        stateTone: M.computed(() => describeSignIn(current.value)?.tone ?? 'quiet'),
+        isSaved: M.computed(() => Boolean(signedIn)),
+        canTest: M.computed(() => current.value?.auth === 'oauth' && current.value.oauth?.status === 'ok'),
+        canDisconnect: M.computed(() => current.value?.auth === 'oauth' && current.value.oauth?.status !== 'disconnected'),
+        connectLabel: M.computed(() => (signedIn ? 'Reconnect' : `Connect with ${provider.value === 'microsoft' ? 'Microsoft' : 'Google'}`)),
+        status: said,
+        statusClass: M.computed(() => TONE[tone.value] ?? TONE.quiet)
+    }, root, {
+        methods: {
+            connect: () => { connect(); },
+            cancel: () => onCancel(),
+            async test() {
+                busy.value = true;
+                say('Signing in to both servers…');
+                try {
+                    const r = await api(`${base}/oauth/${encodeURIComponent(box.id)}/test`, 'POST', {});
+                    say(r.ok ? 'Reading and sending both signed in.'
+                        : [r.imap?.ok ? '' : `Reading: ${r.imap?.error}`, r.smtp?.ok ? '' : `Sending: ${r.smtp?.error}`].filter(Boolean).join(' '),
+                    r.ok ? 'ok' : 'bad');
+                } catch (err) {
+                    say(err.message, 'bad');
+                } finally {
+                    busy.value = false;
+                }
+            },
+            async disconnect() {
+                const who = current.peek()?.oauth?.provider === 'google' ? 'Google' : 'Microsoft';
+                const note = who === 'Google'
+                    ? 'The sign-in is handed back to Google and forgotten here.'
+                    : 'The sign-in is forgotten here. Microsoft gives apps no way to hand one back: to cut it off at Microsoft too, delete the app\'s client secret in Entra.';
+                if (!await E.confirm(`Disconnect "${esc(current.peek()?.label ?? '')}"? ${note} The mailbox and its settings stay; Reconnect to use it again.`)) return;
+                busy.value = true;
+                try {
+                    const r = await api(`${base}/oauth/${encodeURIComponent(box.id)}/disconnect`, 'POST', {});
+                    current.value = r.account;
+                    say(r.revoked ? 'Disconnected, and the sign-in was handed back.' : 'Disconnected.', 'quiet');
+                    onChanged();
+                } catch (err) {
+                    say(err.message, 'bad');
+                } finally {
+                    busy.value = false;
+                }
+            },
+            async saveName() {
+                busy.value = true;
+                try {
+                    const r = await api(`${base}/accounts/${encodeURIComponent(box.id)}`, 'PUT', {label: label.peek().trim()});
+                    current.value = r.account;
+                    say('Saved.', 'ok');
+                    onChanged();
+                } catch (err) {
+                    say(err.message, 'bad');
+                } finally {
+                    busy.value = false;
+                }
+            }
+        }
+    });
+    Domma.icons?.scan?.(root);
+
+    return {
+        setProvider(p) {
+            if (signedIn) return;
+            provider.value = p;
+            say('');
+        },
+        dirty: () => clientSecret.peek() !== ''
+            || JSON.stringify({l: label.peek(), u: username.peek(), c: clientId.peek(), t: tenant.peek()}) !== opened,
+        dispose() {
+            stopWatching();
+            window.removeEventListener('message', onMessage);
+            try { if (popup && !popup.closed) popup.close(); } catch { /* gone */ }
+            try { stopGuide?.dispose?.(); } catch { /* gone */ }
+            try { bindings?.dispose?.(); } catch { /* gone */ }
+            try { stopHelp?.(); } catch { /* gone */ }
+        }
+    };
+}

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

@@ -50,6 +50,9 @@ const {fillMessageAction, loadMessageActions, messageFacts} = await import(versi
 const {isPlainKey, isTyping, resolveKey, SHORTCUTS} = await import(versioned('keyboard.js'));
 const {menuPoint, quoteSelection, readBridgeMessage, selectionItems} = await import(versioned('body-menu.js'));
 const {describeWhen, quickTimes} = await import(versioned('scheduling.js'));
+// Sign in with Microsoft / Google (Email Pro). Optional: an older copy of this
+// directory without it must not take the reader down.
+const {describeSignIn, mountSignIn} = await import(versioned('oauth-panel.js')).catch(() => ({}));
 
 /**
  * Call a plugin route, returning parsed JSON.
@@ -975,7 +978,17 @@ return {
                 }
                 const sub = document.createElement('div');
                 sub.className = 'text-xs text-muted mail-box-sub';
-                sub.textContent = `${box.username} \u00b7 ${box.host}:${box.port}${box.secure ? '' : ' (no TLS)'}`;
+                const signIn = describeSignIn?.(box) ?? null;
+                sub.textContent = signIn
+                    ? `${box.username} \u00b7 ${box.oauth.provider === 'google' ? 'Google' : 'Microsoft'} sign-in`
+                    : `${box.username} \u00b7 ${box.host}:${box.port}${box.secure ? '' : ' (no TLS)'}`;
+                if (signIn && signIn.tone !== 'ok') {
+                    const chip = document.createElement('span');
+                    chip.className = `badge mail-oauth-chip mail-oauth-chip--${signIn.tone}`;
+                    chip.textContent = signIn.chip;
+                    chip.title = signIn.text;
+                    name.appendChild(chip);
+                }
                 info.appendChild(name);
                 info.appendChild(sub);
                 row.appendChild(info);
@@ -1060,13 +1073,19 @@ return {
 
             const form = document.createElement('div');
             form.className = 'mail-form-stack';
-
-            const labelInput = field(form, 'label', 'Name', 'text', box?.label ?? '', 'What to call this mailbox.');
-            const hostInput = field(form, 'host', 'IMAP server', 'text', box?.host ?? '', 'e.g. mail.example.com');
-            const portInput = field(form, 'port', 'Port', 'number', String(box?.port ?? 993));
-            const userInput = field(form, 'username', 'Username', 'text', box?.username ?? '');
+            // The password form lives in its own wrapper so "Sign in with
+            // Microsoft / Google" can stand in for it (Email Pro).
+            const pwWrap = document.createElement('div');
+            pwWrap.className = 'mail-form-stack';
+            form.appendChild(pwWrap);
+            const signedIn = box?.auth === 'oauth';
+
+            const labelInput = field(pwWrap, 'label', 'Name', 'text', box?.label ?? '', 'What to call this mailbox.');
+            const hostInput = field(pwWrap, 'host', 'IMAP server', 'text', box?.host ?? '', 'e.g. mail.example.com');
+            const portInput = field(pwWrap, 'port', 'Port', 'number', String(box?.port ?? 993));
+            const userInput = field(pwWrap, 'username', 'Username', 'text', box?.username ?? '');
             const passInput = field(
-                form, 'password', 'Password', 'password', '',
+                pwWrap, 'password', 'Password', 'password', '',
                 box?.hasPassword ? 'Leave blank to keep the saved password.' : ''
             );
 
@@ -1077,7 +1096,7 @@ return {
             secureInput.checked = box ? box.secure !== false : true;
             secureWrap.appendChild(secureInput);
             secureWrap.appendChild(document.createTextNode('Use TLS (port 993)'));
-            form.appendChild(secureWrap);
+            pwWrap.appendChild(secureWrap);
 
             // Keep the port in step with the TLS choice until the user sets one
             // themselves - 993/143 is the only pair that matters here.
@@ -1109,7 +1128,7 @@ return {
                 status.className = 'text-sm mail-status '
                     + ({ok: 'text-success', bad: 'text-danger'}[tone] ?? 'text-muted');
             };
-            form.appendChild(status);
+            pwWrap.appendChild(status);
 
             const actions = document.createElement('div');
             actions.className = 'flex justify-between gap-2 mt-2';
@@ -1131,17 +1150,111 @@ return {
 
             actions.appendChild(testBtn);
             actions.appendChild(right);
-            form.appendChild(actions);
+            pwWrap.appendChild(actions);
 
             slideover.element.appendChild(form);
             // What it opened with; a typed password always counts as a change.
             const opened = JSON.stringify({...collect(), password: ''});
+            let signInPanel = null;
+            let stopChoiceHelp = null;
+            let method = signedIn ? 'oauth' : 'password';
             guardPanel(slideover,
-                () => passInput.value !== '' || JSON.stringify({...collect(), password: ''}) !== opened,
+                () => (method === 'password'
+                    ? passInput.value !== '' || JSON.stringify({...collect(), password: ''}) !== opened
+                    : Boolean(signInPanel?.dirty())),
                 box ? 'Discard your changes to this mailbox?' : 'Discard this mailbox? It has not been saved.',
-                () => stopFormResize());
+                () => { stopFormResize(); signInPanel?.dispose(); stopChoiceHelp?.(); });
             slideover.open();
-            setTimeout(() => hostInput.focus(), 50);
+            if (signedIn) pwWrap.hidden = true;
+            else setTimeout(() => hostInput.focus(), 50);
+
+            /**
+             * Offer "Sign in with Microsoft / Google" when this edition has it
+             * and the server answers for it. A signed-in mailbox opens on its
+             * sign-in; a password one can be moved onto one.
+             */
+            (async () => {
+                const oauth = features.oauth && mountSignIn
+                    ? await api(`${BASE}/oauth/status`).catch(() => null)
+                    : null;
+                if (!oauth?.available) {
+                    if (signedIn) {
+                        const note = document.createElement('p');
+                        note.className = 'text-sm text-muted';
+                        note.textContent = `This mailbox signs in with ${box.oauth?.provider === 'google' ? 'Google' : 'Microsoft'} instead of a password. `
+                            + 'Its sign-in is managed in Email Pro.';
+                        form.prepend(note);
+                    }
+                    return;
+                }
+
+                const signInHost = document.createElement('div');
+                const choices = [
+                    ...(signedIn ? [] : [{id: 'password', text: 'Password'}]),
+                    {id: 'microsoft', text: 'Sign in with Microsoft'},
+                    {id: 'google', text: 'Sign in with Google'}
+                ].filter(c => !signedIn || c.id === box.oauth.provider);
+
+                const mount = (provider) => {
+                    if (signInPanel) {
+                        signInPanel.setProvider(provider);
+                        return;
+                    }
+                    signInPanel = mountSignIn(signInHost, {
+                        provider, box, base: BASE, api, status: oauth, helpPopovers,
+                        onConnected: async (accountId) => {
+                            slideover.close(true);
+                            E.toast('Mailbox connected.', {type: 'success'});
+                            if (accountId) currentAccountId = accountId;
+                            await start();
+                        },
+                        onChanged: async () => {
+                            mailboxes = (await api(`${BASE}/accounts`)).accounts;
+                            renderFolders();
+                        },
+                        onCancel: () => slideover.close()
+                    });
+                };
+
+                if (!signedIn) {
+                    const bar = document.createElement('div');
+                    bar.className = 'mail-auth-choice';
+                    bar.setAttribute('role', 'radiogroup');
+                    bar.setAttribute('aria-label', 'How this mailbox signs in');
+                    const buttons = choices.map(choice => {
+                        const b = document.createElement('button');
+                        b.type = 'button';
+                        b.className = 'btn btn-sm ' + (choice.id === 'password' ? 'btn-primary' : 'btn-ghost');
+                        b.setAttribute('role', 'radio');
+                        b.setAttribute('aria-checked', String(choice.id === 'password'));
+                        b.textContent = choice.text;
+                        b.addEventListener('click', () => {
+                            method = choice.id === 'password' ? 'password' : 'oauth';
+                            for (const other of buttons) {
+                                const on = other === b;
+                                other.className = 'btn btn-sm ' + (on ? 'btn-primary' : 'btn-ghost');
+                                other.setAttribute('aria-checked', String(on));
+                            }
+                            pwWrap.hidden = method !== 'password';
+                            signInHost.hidden = method === 'password';
+                            if (method === 'oauth') mount(choice.id);
+                        });
+                        return b;
+                    });
+                    bar.append(...buttons);
+                    const help = document.createElement('span');
+                    help.setAttribute('data-help-title', 'Password or sign-in');
+                    help.setAttribute('data-help', 'Microsoft 365, Outlook.com and Gmail can be connected by signing in with them instead of typing a password - no app password needed. You register a small app of your own with the provider first; the form shows how.');
+                    bar.appendChild(help);
+                    form.prepend(bar);
+                    stopChoiceHelp = helpPopovers(bar, {position: 'bottom'});
+                    signInHost.hidden = true;
+                    form.appendChild(signInHost);
+                } else {
+                    form.appendChild(signInHost);
+                    mount(box.oauth.provider);
+                }
+            })();
 
             /**
              * Collect the form into the shape the API expects.