@novacraft-engineering/mailbox 0.4.27 → 0.4.29

package/app/mail/page.tsx

@@ -10,6 +10,7 @@ import { subscribePush, unsubscribePush, useInstall, useNotifications } from './
 import { InstallGuide } from './InstallGuide'
 import RichEditor from './RichEditor'
 import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages, stripOwnPixel, healGooglePrivateImages } from '@/lib/email-html'
+import { designsForDark, pinColorScheme } from '@/lib/color-scheme'
 import { BUILTIN_FONTS, DEFAULT_LINE_SPACING, EMPTY_FONT, FONT_SIZES, LINE_SPACINGS, fontFaceCss, fontStack, lineSpacingOf, type BaseFont, type CustomFont, paragraphGap } from '@/lib/fonts'
 import MailSelect, { GLYPH } from './MailSelect'
 import { handleComposeTab } from './tabKey'
@@ -51,9 +52,11 @@ const MAILBOX_GLYPH: Record<'all' | 'vela' | 'hosting' | 'person', React.ReactNo
     </svg>
   ),
 }
+import InboxFilters from './InboxFilters'
 import Ticker, { TICKER_SPOTS, tickerDefault, tickerSettingsFrom, type TickerSettings, type TickerSpot } from './Ticker'
 import { splitQuotedTail, splitQuotedText } from './quoted'
 import { applyThreadFlagDeltas, normalizeSubject } from '@/lib/threads'
+import { matchesInboxFilters, normalizeInboxFilters, type InboxFilter } from '@/lib/inbox-filters'
 import { defaultSignature, fillSignature } from '@/lib/default-signature'
 import styles from './page.module.css'
 
@@ -363,6 +366,7 @@ type MailSettings = {
   fonts: CustomFont[]
   defaultFont: BaseFont
   prefs?: { theme?: ThemePref; accent?: string; themeCustom?: ThemeCustom; layout?: 'list' | 'bubbles' }
+  inboxFilters?: InboxFilter[]
 }
 
 const EMAIL_SHAPE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/
@@ -820,8 +824,9 @@ function countRemoteRefs(html: string | null): number {
 // Show the email in its true colours on a light "paper" card, framed by the dark
 // reader. The markup is left untouched — the card supplies a legible white surface
 // for bare fragments, and emails that paint their own background render as designed.
-const readerTheme = (spacing: number, dark: boolean) => `<style>
-  :root { color-scheme: light; }
+// Mail that ships its own dark design is shown in it instead, with no card.
+const readerTheme = (spacing: number, dark: boolean, ownDark: boolean) => `<style>
+  :root { color-scheme: ${ownDark ? 'dark' : 'light'}; }
   /* Transparent so the framed document takes the app's themed surface from the
      iframe element behind it. Theme variables do not cross the document boundary,
      so anything set here would be a colour frozen against one theme. */
@@ -829,10 +834,10 @@ const readerTheme = (spacing: number, dark: boolean) => `<style>
   body { margin: 0; background: transparent; padding: 0 0 12px; }
   .nc-paper {
     max-width: 860px;
-    color: #1A1030;
-    background: ${dark ? '#ffffff' : 'transparent'};
-    border-radius: ${dark ? '6px' : '0'};
-    padding: ${dark ? '14px 16px' : '6px 0 12px'};
+    color: ${ownDark ? '#ECEAF2' : '#1A1030'};
+    background: ${dark && !ownDark ? '#ffffff' : 'transparent'};
+    border-radius: ${dark && !ownDark ? '6px' : '0'};
+    padding: ${dark && !ownDark ? '14px 16px' : '6px 0 12px'};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     font-size: 15px;
     line-height: ${spacing};
@@ -842,7 +847,7 @@ const readerTheme = (spacing: number, dark: boolean) => `<style>
   }
   .nc-paper p { margin: 0 0 ${paragraphGap(spacing)}; }
   .nc-paper img { max-width: 100%; height: auto; }
-  .nc-paper a { color: #5418C2; }
+  .nc-paper a { color: ${ownDark ? '#B69CFF' : '#5418C2'}; }
 </style>`
 
 /**
@@ -967,7 +972,8 @@ function sentByUs(address: string): boolean {
 }
 
 // When allowRemote is false the CSP blocks remote fetches so tracking pixels never load.
-function frameHtml(html: string, allowRemote: boolean, spacing = DEFAULT_LINE_SPACING, dark = false): string {
+function frameHtml(html: string, allowRemote: boolean, spacing = DEFAULT_LINE_SPACING, theme: ThemeBase = 'light'): string {
+  const dark = theme === 'dark'
   const csp = allowRemote
     ? `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src * data:; style-src 'unsafe-inline' *; font-src * data:; media-src * data:">`
     : `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${OWN_IMAGE_HOSTS} data:; style-src 'unsafe-inline'; font-src data:">`
@@ -975,7 +981,8 @@ function frameHtml(html: string, allowRemote: boolean, spacing = DEFAULT_LINE_SP
   // it every link in every message was dead: the click was swallowed with no error and no
   // navigation, which reads as a broken button rather than a blocked one. Scripts are still
   // not allowed, so nothing here can open a tab on its own — only a real click can.
-  return `<!doctype html><html><head><meta charset="utf-8">${csp}${readerTheme(spacing, dark)}<base target="_blank"></head><body><div class="nc-paper">${stripOwnPixel(html)}</div></body>`
+  const ownDark = theme !== 'light' && designsForDark(html)
+  return `<!doctype html><html><head><meta charset="utf-8">${csp}${readerTheme(spacing, dark, ownDark)}<base target="_blank"></head><body><div class="nc-paper">${stripOwnPixel(pinColorScheme(html, theme !== 'light'))}</div></body>`
 }
 
 function headerValue(email: InboundEmail, key: string): string {
@@ -1369,6 +1376,9 @@ export default function DevMailPage() {
   const [addrCopied, setAddrCopied] = useState(false)
 
   const [folder, setFolder] = useState<Folder>('inbox')
+  const [showFiltered, setShowFiltered] = useState(false)
+  const showFilteredRef = useRef(false)
+  useEffect(() => { showFilteredRef.current = showFiltered }, [showFiltered])
   const [search, setSearch] = useState('')
   const [sentEmails, setSentEmails] = useState<SentEmail[]>([])
   // What is waiting to be sent lives here now, not at the provider: a delayed message is
@@ -1382,7 +1392,7 @@ export default function DevMailPage() {
   const [inboxCursor, setInboxCursor] = useState<string | null>(null)
   const inboxFetch = useRef<string | null>(null)
   type FolderTally = { inbox: number; unread: number; starred: number; archived: number; trashed: number; spam: number; snoozed: number }
-  const [serverCounts, setServerCounts] = useState<(FolderTally & { conversations: FolderTally | null }) | null>(null)
+  const [serverCounts, setServerCounts] = useState<(FolderTally & { conversations: FolderTally | null; filtered?: { total: number; unread: number } }) | null>(null)
   const [countsLoading, setCountsLoading] = useState(false)
   const [composeExpanded, setComposeExpanded] = useState(true)
   const pwSectionRef = useRef<HTMLDivElement | null>(null)
@@ -1516,6 +1526,10 @@ export default function DevMailPage() {
     } catch {}
   }, [])
   const [settings, setMailSettings] = useState<MailSettings>(DEFAULT_SETTINGS)
+  const inboxFilters = useMemo(() => normalizeInboxFilters(settings.inboxFilters), [settings.inboxFilters])
+  useEffect(() => {
+    if (folder !== 'inbox') setShowFiltered(false)
+  }, [folder])
   const tickerOn = (spot: TickerSpot) => settings.ticker?.[spot] ?? tickerDefault(spot)
   const messagesAlwaysOpen = settings.threadMessages === 'open'
   const { canInstall, installed, install, ios } = useInstall()
@@ -1715,7 +1729,7 @@ export default function DevMailPage() {
 
   const [threads, setThreads] = useState<ConversationRow[]>([])
   const [threadsResolved, setThreadsResolved] = useState(false)
-  const threadFolder = folder === 'archived' ? 'archive' : folder === 'trash' ? 'trash' : folder === 'starred' ? 'starred' : folder === 'snoozed' ? 'snoozed' : folder === 'spam' ? 'spam' : 'inbox'
+  const threadFolder = folder === 'inbox' && showFiltered ? 'filtered' : folder === 'archived' ? 'archive' : folder === 'trash' ? 'trash' : folder === 'starred' ? 'starred' : folder === 'snoozed' ? 'snoozed' : folder === 'spam' ? 'spam' : 'inbox'
   const threadsFetch = useRef<string | null>(null)
   const threadsLoadedFolder = useRef<string | null>(null)
   const [threadsCursor, setThreadsCursor] = useState<string | null>(null)
@@ -3055,9 +3069,9 @@ export default function DevMailPage() {
     if (folder === 'starred') return tally.starred
     if (folder === 'snoozed') return tally.snoozed
     if (folder === 'spam') return tally.spam
-    if (folder === 'inbox') return tally.inbox
+    if (folder === 'inbox') return showFiltered ? serverCounts?.filtered?.total ?? null : tally.inbox
     return null
-  }, [serverCounts, search, folder])
+  }, [serverCounts, search, folder, showFiltered])
 
   const eventsByEmail = useMemo(() => {
     const map: Record<string, MailEvent[]> = {}
@@ -3331,6 +3345,10 @@ export default function DevMailPage() {
         .filter(inboxFolderPredicate)
         .filter(matchesInbound)
         .filter(entry => !(folder === 'inbox' && hideForwarded && isAppNotification(entry.subject)))
+        .filter(entry =>
+          folder !== 'inbox' || Boolean(search.trim()) ||
+          matchesInboxFilters(inboxFilters, { senders: [entry.from], subject: entry.subject, text: entry.text }) === showFiltered,
+        )
       const groups = new Map<string, InboundEmail[]>()
       for (const entry of visible) {
         const key = threadKeys.get(entry.id) ?? entry.id
@@ -3452,7 +3470,7 @@ export default function DevMailPage() {
       .filter(entry => searched || matches(`${entry.to.join(' ')} ${entry.subject}`))
       .filter(entry => !(folder === 'sent' && (entry.archived || entry.trashed)))
       .map(entry => sentToItem(entry))
-  }, [folder, isInboundFolder, inboxEmails, drafts, scheduledEmails, deliveredEmails, sentSearchResults, matches, matchesInbound, matchesSent, inboxFolderPredicate, threadKeys, now, hideForwarded, threadSentMembers, detailCache, threads, search])
+  }, [folder, isInboundFolder, inboxEmails, drafts, scheduledEmails, deliveredEmails, sentSearchResults, matches, matchesInbound, matchesSent, inboxFolderPredicate, threadKeys, now, hideForwarded, threadSentMembers, detailCache, threads, search, inboxFilters, showFiltered])
 
   const listSettling = searching || sentSearching || ((mailboxLoading || !threadsResolved) && listItems.length === 0)
   const listRefreshing = !listSettling && (mailboxStale || mailboxLoading || !threadsResolved)
@@ -3752,7 +3770,7 @@ export default function DevMailPage() {
           if (flags.read === true) ids.forEach(id => pendingRead.current.delete(id))
           // The starred tally counts conversations, not messages, so it cannot be derived
           // from the ids alone — the server says what it is now.
-          if (flags.starred !== undefined) loadCounts(true)
+          if (flags.starred !== undefined || (flags.read !== undefined && showFilteredRef.current)) loadCounts(true)
         })
     },
     [apiHeaders],
@@ -3971,6 +3989,19 @@ export default function DevMailPage() {
     [apiHeaders],
   )
 
+  const changeInboxFilters = useCallback(
+    async (next: InboxFilter[]) => {
+      const nextSettings = { ...settings, inboxFilters: next }
+      setMailSettings(nextSettings)
+      if (!next.length) setShowFiltered(false)
+      await fetch('/api/mail/settings', { method: 'PUT', headers: apiHeaders(), body: JSON.stringify(nextSettings) }).catch(() => {})
+      threadsLoadedFolder.current = null
+      threadsFetch.current = null
+      await Promise.all([loadThreads(), loadCounts(true)])
+    },
+    [settings, apiHeaders, loadThreads, loadCounts],
+  )
+
   const writingSettings = useMemo(() => writingSettingsFrom(settings.writing), [settings.writing])
   const saveWriting = useCallback((next: WritingSettings) => saveSettings({ ...settings, writing: next }), [saveSettings, settings])
   const saveTemplate = useCallback(
@@ -5122,7 +5153,7 @@ export default function DevMailPage() {
       img { max-width: 100%; }
     </style>`
     doc.open()
-    doc.write(`<!doctype html><html><head><meta charset="utf-8"><title>${escapeHtml(subject)}</title>${printCss}</head><body>${meta}${hasMarkup(html) ? stripOwnPixel(html) : `<pre style="font-family:Arial,sans-serif;white-space:pre-wrap;">${escapeHtml(text?.trim() || html || '')}</pre>`}</body></html>`)
+    doc.write(`<!doctype html><html><head><meta charset="utf-8"><title>${escapeHtml(subject)}</title>${printCss}</head><body>${meta}${hasMarkup(html) ? stripOwnPixel(pinColorScheme(html, false)) : `<pre style="font-family:Arial,sans-serif;white-space:pre-wrap;">${escapeHtml(text?.trim() || html || '')}</pre>`}</body></html>`)
     doc.close()
     frame.contentWindow?.focus()
     window.setTimeout(() => {
@@ -6052,7 +6083,7 @@ export default function DevMailPage() {
           <iframe
             className={styles.threadFrame}
             sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
-            srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')}
+            srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme)}
             title="Email content"
             onLoad={event => {
               try {
@@ -6067,7 +6098,7 @@ export default function DevMailPage() {
     }
     return (
       <>
-        <iframe className={styles.readerFrame} sandbox="allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
+        <iframe className={styles.readerFrame} sandbox="allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme)} title="Email content" />
         {split.tail && renderQuoteLine(message.id, quoteShown)}
       </>
     )
@@ -6086,7 +6117,7 @@ export default function DevMailPage() {
         <iframe
           className={styles.threadFrame}
           sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
-          srcDoc={frameHtml(healGooglePrivateImages(detail.html, CLIENT_BRAND.markUrl), true, readerSpacing, resolvedTheme === 'dark')}
+          srcDoc={frameHtml(healGooglePrivateImages(detail.html, CLIENT_BRAND.markUrl), true, readerSpacing, resolvedTheme)}
           title="Sent email"
           onLoad={event => {
             try {
@@ -6979,7 +7010,7 @@ export default function DevMailPage() {
                     <iframe
                       className={styles.replyPreview}
                       sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
-                      srcDoc={frameHtml(replyEffHtml, true, readerSpacing, resolvedTheme === 'dark')}
+                      srcDoc={frameHtml(replyEffHtml, true, readerSpacing, resolvedTheme)}
                       title="Reply preview"
                       onLoad={event => {
                         try {
@@ -7249,7 +7280,7 @@ export default function DevMailPage() {
             {!selectedDetail ? (
               <BodySkeleton />
             ) : selectedDetail.html ? (
-              <iframe className={styles.readerFrame} sandbox="allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(selectedDetail.html, true, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
+              <iframe className={styles.readerFrame} sandbox="allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(selectedDetail.html, true, readerSpacing, resolvedTheme)} title="Email content" />
             ) : selectedDetail.text ? (
               <pre className={styles.readerText}>{selectedDetail.text}</pre>
             ) : (
@@ -7612,11 +7643,20 @@ export default function DevMailPage() {
           <button className={styles.menuBtn} onClick={() => setRailOpen(true)} aria-label="Open menu">
             {ICONS.menu}
           </button>
-          <h1 className={styles.listTitle}>{folderTitles[folder]}</h1>
+          <h1 className={styles.listTitle}>{folder === 'inbox' && showFiltered ? 'Filtered' : folderTitles[folder]}</h1>
           <span className={styles.listMeta} title={listCountTitle}>
             {listCountFigure}{' '}
             <span className={styles.listMetaUnit}>{listCountUnit}</span>
           </span>
+          {folder === 'inbox' && (
+            <InboxFilters
+              filters={inboxFilters}
+              counts={serverCounts?.filtered ?? null}
+              showing={showFiltered}
+              onShowingChange={setShowFiltered}
+              onFiltersChange={changeInboxFilters}
+            />
+          )}
           <button
             className={`${styles.refreshBtn} ${refreshing ? styles.spinning : ''}`}
             onClick={refreshAll}
@@ -7866,7 +7906,7 @@ export default function DevMailPage() {
             <div className={styles.emptyList}>
               <span className={styles.emptyHex} />
               <p className={styles.emptyTitle}>
-                {folder === 'inbox' && 'Inbox zero'}
+                {folder === 'inbox' && (showFiltered ? 'Nothing filtered' : 'Inbox zero')}
                 {folder === 'starred' && 'No starred mail'}
                 {folder === 'snoozed' && 'Nothing snoozed'}
                 {folder === 'sent' && 'Nothing sent yet'}
@@ -7877,7 +7917,9 @@ export default function DevMailPage() {
               </p>
               <p className={styles.emptySub}>
                 {folder === 'inbox' &&
-                  'Nothing new right now. Messages sent to your address will appear here.'}
+                  (showFiltered
+                    ? 'Mail that matches your filter rules waits here instead of the Inbox.'
+                    : 'Nothing new right now. Messages sent to your address will appear here.')}
                 {folder === 'starred' && 'Star a message and it will be kept here so you can find it again.'}
                 {folder === 'snoozed' &&
                   'Put a conversation aside and it waits here, then returns to the inbox by itself at the time you chose.'}
@@ -8396,7 +8438,7 @@ export default function DevMailPage() {
               {compose.quoteHtml && !compose.campaign.kind && (
                 <details className={styles.composeQuote}>
                   <summary className={styles.composeQuoteLabel}>Quoted message</summary>
-                  <iframe className={styles.composeQuoteFrame} sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(compose.quoteHtml, true, readerSpacing, resolvedTheme === 'dark')} title="Quoted message" />
+                  <iframe className={styles.composeQuoteFrame} sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(compose.quoteHtml, true, readerSpacing, resolvedTheme)} title="Quoted message" />
                 </details>
               )}
               {/* The signature is appended on send, so show it here rather than leaving the

package/app/manifest.ts

@@ -1,6 +1,8 @@
 import type { MetadataRoute } from 'next'
 import { CLIENT_BRAND } from '@/lib/brand.client'
 
+export const dynamic = 'force-dynamic'
+
 export default function manifest(): MetadataRoute.Manifest {
   return {
     name: `${CLIENT_BRAND.name} Mail`,

package/app/robots.ts

@@ -15,6 +15,8 @@ const AGENTS = [
   'DuckAssistBot', 'cohere-ai', 'YouBot', 'Bytespider', 'Diffbot', 'ImagesiftBot',
 ]
 
+export const dynamic = 'force-dynamic'
+
 export default function robots(): MetadataRoute.Robots {
   return {
     rules: AGENTS.map(userAgent => ({ userAgent, disallow: '/' })),

package/lib/brand.client.ts

@@ -1,44 +1,65 @@
-const name = process.env.NEXT_PUBLIC_BRAND_NAME?.trim() || 'Mailbox'
-const domain = process.env.NEXT_PUBLIC_MAIL_DOMAIN?.trim().toLowerCase() || 'example.com'
-const website = (process.env.NEXT_PUBLIC_BRAND_WEBSITE?.trim() || domain).replace(/^https?:\/\//, '').replace(/\/$/, '')
-const publicUrl = (process.env.NEXT_PUBLIC_MAIL_PUBLIC_URL?.trim() || `https://mail.${domain}`).replace(/\/$/, '')
+/**
+ * The names of the public brand settings. The server writes their values into every page it
+ * renders, and the browser reads them back from there.
+ */
+export const BRAND_ENV_KEYS = [
+  'NEXT_PUBLIC_BRAND_NAME', 'NEXT_PUBLIC_MAIL_DOMAIN', 'NEXT_PUBLIC_BRAND_WEBSITE', 'NEXT_PUBLIC_MAIL_PUBLIC_URL',
+  'NEXT_PUBLIC_BRAND_LEGAL_NAME', 'NEXT_PUBLIC_BRAND_ADDRESS', 'NEXT_PUBLIC_BRAND_TEL', 'NEXT_PUBLIC_BRAND_REGULATORY',
+  'NEXT_PUBLIC_BRAND_DISCLAIMER', 'NEXT_PUBLIC_BRAND_COLOR_ACCENT', 'NEXT_PUBLIC_BRAND_COLOR_LINK',
+  'NEXT_PUBLIC_BRAND_COLOR_MUTED', 'NEXT_PUBLIC_BRAND_MARK_URL', 'NEXT_PUBLIC_BRAND_ACCENT',
+  'NEXT_PUBLIC_BRAND_CHROME_MARK_URL', 'NEXT_PUBLIC_BRAND_SIGNATURE_MARK_BORDER', 'NEXT_PUBLIC_BRAND_SIGNATURE_MARK_RADIUS',
+  'NEXT_PUBLIC_MAIL_ADDRESS_DOMAINS', 'NEXT_PUBLIC_MAIL_ADDRESSES',
+] as const
 
-const legalName = process.env.NEXT_PUBLIC_BRAND_LEGAL_NAME?.trim() || name
+type BrandEnv = Partial<Record<string, string>>
+
+declare global {
+  interface Window { __MAILBOX_BRAND_ENV__?: BrandEnv }
+}
+
+// Next rewrites every literal `process.env.NEXT_PUBLIC_…` into a fixed string at build time,
+// which would freeze one tenant's brand into an image all of them share. Reading by a
+// computed key leaves it to run time: the process's own environment on the server, and in
+// the browser the values the server wrote into the page.
+const runtimeEnv: BrandEnv = typeof window === 'undefined' ? process.env : (window.__MAILBOX_BRAND_ENV__ ?? {})
+const read = (key: string) => runtimeEnv[`NEXT_PUBLIC_${key}`]?.trim() || ''
+const list = (key: string) => read(key).split(',').map(value => value.trim().toLowerCase()).filter(Boolean)
+
+const name = read('BRAND_NAME') || 'Mailbox'
+const domain = read('MAIL_DOMAIN').toLowerCase() || 'example.com'
+const website = (read('BRAND_WEBSITE') || domain).replace(/^https?:\/\//, '').replace(/\/$/, '')
+const publicUrl = (read('MAIL_PUBLIC_URL') || `https://mail.${domain}`).replace(/\/$/, '')
+
+const legalName = read('BRAND_LEGAL_NAME') || name
 
 export const CLIENT_BRAND = {
   name,
   legalName,
-  address: process.env.NEXT_PUBLIC_BRAND_ADDRESS?.trim() || '',
-  tel: process.env.NEXT_PUBLIC_BRAND_TEL?.trim() || '',
-  regulatory: process.env.NEXT_PUBLIC_BRAND_REGULATORY?.trim() || '',
+  address: read('BRAND_ADDRESS'),
+  tel: read('BRAND_TEL'),
+  regulatory: read('BRAND_REGULATORY'),
   disclaimer:
-    process.env.NEXT_PUBLIC_BRAND_DISCLAIMER?.trim() ||
+    read('BRAND_DISCLAIMER') ||
     `DISCLAIMER: The information contained in this e-mail is proprietary to ${legalName} and is intended only for the individual or entity to which it is addressed. It may contain information that is privileged, confidential or exempt from disclosure under applicable law. If you are not the intended recipient, any use, distribution, transmission, printing, copying or dissemination of this information is strictly prohibited. If you have received this communication in error, please delete it and notify us.`,
   colors: {
-    accent: process.env.NEXT_PUBLIC_BRAND_COLOR_ACCENT?.trim() || 'rgb(109, 40, 217)',
-    link: process.env.NEXT_PUBLIC_BRAND_COLOR_LINK?.trim() || 'rgb(17, 85, 204)',
-    muted: process.env.NEXT_PUBLIC_BRAND_COLOR_MUTED?.trim() || 'rgb(107, 114, 128)',
+    accent: read('BRAND_COLOR_ACCENT') || 'rgb(109, 40, 217)',
+    link: read('BRAND_COLOR_LINK') || 'rgb(17, 85, 204)',
+    muted: read('BRAND_COLOR_MUTED') || 'rgb(107, 114, 128)',
   },
   slug: name.toLowerCase().replace(/[^a-z0-9]+/g, '') || 'mailbox',
   domain,
   website,
   websiteUrl: `https://${website}`,
   publicUrl,
-  markUrl: process.env.NEXT_PUBLIC_BRAND_MARK_URL?.trim() || `${publicUrl}/icon-192.png`,
-  accent: process.env.NEXT_PUBLIC_BRAND_ACCENT?.trim() || '#6d28d9',
-  chromeMarkUrl: process.env.NEXT_PUBLIC_BRAND_CHROME_MARK_URL?.trim() || '/brand/mark.png',
+  markUrl: read('BRAND_MARK_URL') || `${publicUrl}/icon-192.png`,
+  accent: read('BRAND_ACCENT') || '#6d28d9',
+  chromeMarkUrl: read('BRAND_CHROME_MARK_URL') || '/brand/mark.png',
   signatureMark: {
-    border: process.env.NEXT_PUBLIC_BRAND_SIGNATURE_MARK_BORDER?.trim() || 'none',
-    radius: process.env.NEXT_PUBLIC_BRAND_SIGNATURE_MARK_RADIUS?.trim() || '0',
+    border: read('BRAND_SIGNATURE_MARK_BORDER') || 'none',
+    radius: read('BRAND_SIGNATURE_MARK_RADIUS') || '0',
   },
-  addressDomains: (process.env.NEXT_PUBLIC_MAIL_ADDRESS_DOMAINS ?? '')
-    .split(',')
-    .map(value => value.trim().toLowerCase())
-    .filter(Boolean),
-  addresses: (process.env.NEXT_PUBLIC_MAIL_ADDRESSES ?? '')
-    .split(',')
-    .map(value => value.trim().toLowerCase())
-    .filter(Boolean),
+  addressDomains: list('MAIL_ADDRESS_DOMAINS'),
+  addresses: list('MAIL_ADDRESSES'),
 } as const
 
 export const LS = (key: string) => `${CLIENT_BRAND.slug}_mail_${key}`

package/lib/color-scheme.test.ts

@@ -0,0 +1,51 @@
+import assert from 'node:assert/strict'
+import { adaptiveEmail, designsForDark, pinColorScheme } from './color-scheme.ts'
+
+const ruleFor = (html: string, element: RegExp) => {
+  const name = html.match(element)?.[1]
+  assert.ok(name, `no class on ${element}`)
+  return html.match(new RegExp(`\\.${name}\\{([^}]*)\\}`))?.[1] ?? ''
+}
+
+const composed = adaptiveEmail('<div style="color:#030712;"><p style="color:#030712">Hi</p><a href="https://example.com" style="color:rgb(109, 40, 217)">link</a></div>')
+assert.match(composed, /<meta name="color-scheme" content="light dark">/)
+assert.match(composed, /@media \(prefers-color-scheme: dark\)/)
+assert.ok(composed.includes('style="color:#030712;"'), 'the light rendering keeps its inline colours')
+const bodyRule = ruleFor(composed, /<div class="(nc-d\d+)"/)
+assert.match(bodyRule, /color:#[ef][0-9a-f]{5}!important/, 'near-black text turns near-white')
+assert.equal(composed.match(/<p class="(nc-d\d+)"/)?.[1], composed.match(/<div class="(nc-d\d+)"/)?.[1], 'identical overrides share one class')
+assert.ok(!/<a[^>]*><\/a>|<span class=/.test(adaptiveEmail('<div style="color:#030712"><span>plain</span></div>')), 'an uncoloured child inherits and needs no class')
+assert.match(ruleFor(composed, /<a class="(nc-d\d+)"/), /color:#[89ab][0-9a-f]{5}!important/, 'the violet link lightens')
+
+const button = adaptiveEmail('<td style="background:#6d28d9"><a style="color:#FFFFFF">Go</a></td>')
+assert.ok(!/<a class=/.test(button), 'white on a mid-tone button already reads and is left alone')
+assert.ok(!/background-color/.test(button), 'mid-tone fills keep their colour')
+
+const highlight = adaptiveEmail('<p style="color:#030712"><span style="background-color:#fde68a">marked</span></p>')
+const highlightRule = ruleFor(highlight, /<span class="(nc-d\d+)"/)
+assert.match(highlightRule, /background-color:#[0-5][0-9a-f]{5}!important/, 'a pale highlight darkens')
+
+const merged = adaptiveEmail('<p class="lead" style="color:#000">x</p>')
+assert.match(merged, /<p class="lead nc-d\d+"/, 'an existing class is kept alongside ours')
+
+const untouched = '<style>p{color:#000}</style><script>var a = "<p style=\\"color:#000\\">"</script>'
+assert.ok(adaptiveEmail(untouched).includes(untouched), 'stylesheet and script text are never rewritten')
+
+const ownDesign = '<style>@media (prefers-color-scheme: dark){.a{color:#fff}}</style><p style="color:#000">x</p>'
+assert.equal(adaptiveEmail(ownDesign), ownDesign, 'mail with its own dark design is left as written')
+assert.ok(designsForDark(ownDesign))
+assert.ok(!designsForDark('<p>x</p>'))
+
+const template = adaptiveEmail('<!doctype html><html><body style="margin:0;background:#050309"><div style="color:#F5F2FA">Title</div></body></html>', 'dark')
+assert.match(template, /<html><head><meta name="color-scheme"/, 'a document without a head gains one')
+assert.match(template, /@media \(prefers-color-scheme: light\)/)
+assert.match(ruleFor(template, /<body class="(nc-l\d+)"/), /background-color:#f[0-9a-f]{5}!important/, 'the dark page turns light')
+assert.match(ruleFor(template, /<div class="(nc-l\d+)"/), /color:#[0-2][0-9a-f]{5}!important/, 'pale text turns dark')
+
+assert.equal(adaptiveEmail('<img src="x.png" />'), '<!doctype html><html><head><meta charset="utf-8"><meta name="color-scheme" content="light dark"><meta name="supported-color-schemes" content="light dark"><style>:root{color-scheme:light dark;supported-color-schemes:light dark}@media (prefers-color-scheme: dark){}</style></head><body><img src="x.png" /></body></html>')
+
+const queries = '<style>@media (prefers-color-scheme: dark){a{}} @media screen and (prefers-color-scheme:light){b{}}</style><source media="(prefers-color-scheme: dark)">'
+assert.equal(pinColorScheme(queries, true), '<style>@media (min-width:0px){a{}} @media screen and (max-width:0px){b{}}</style><source media="(min-width:0px)">')
+assert.equal(pinColorScheme(queries, false), '<style>@media (max-width:0px){a{}} @media screen and (min-width:0px){b{}}</style><source media="(max-width:0px)">')
+
+console.log('color-scheme: ok')