npm - @novacraft-engineering/mailbox - Versions diffs - 0.4.27 → 0.4.28 - Mend

@novacraft-engineering/mailbox 0.4.27 → 0.4.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/app/api/mail/send/route.ts +2 -1
package/app/layout.tsx +19 -4
package/app/mail/page.tsx +20 -16
package/app/manifest.ts +2 -0
package/app/robots.ts +2 -0
package/lib/brand.client.ts +46 -25
package/lib/color-scheme.test.ts +51 -0
package/lib/color-scheme.ts +233 -0
package/lib/emails/index.ts +11 -10
package/lib/mail-provider.ts +3 -1
package/lib/mailbox.ts +2 -1
package/lib/receive.ts +26 -2
package/package.json +1 -1

package/app/api/mail/send/route.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import { presign } from '@/lib/r2'
 import { recordContact, recordPixel, recordSentMeta, recordSentMessage } from '@/lib/mailbox'
 import { scheduleSend } from '@/lib/scheduled'
 import { absoluteUrls, stripOwnPixel } from '@/lib/email-html'
+import { adaptiveEmail } from '@/lib/color-scheme'
 import { publicOrigin } from '@/lib/public-url'
 export const runtime = 'nodejs'
@@ -146,7 +147,7 @@ export async function POST(req: Request) {
   const origin = publicOrigin(req)
   const pixelId = randomUUID()
   const trackedHtml = body.html?.trim()
-    ? `${stripOwnPixel(absoluteUrls(body.html.trim(), origin))}<img src="${origin}/api/mail/pixel/${pixelId}" alt="" width="1" height="1" style="display:none;width:1px;height:1px;border:0" />`
+    ? adaptiveEmail(`${stripOwnPixel(absoluteUrls(body.html.trim(), origin))}<img src="${origin}/api/mail/pixel/${pixelId}" alt="" width="1" height="1" style="display:none;width:1px;height:1px;border:0" />`)
     : null
   // Thread the reply: In-Reply-To/References point at the inbound Message-ID so the

package/app/layout.tsx CHANGED Viewed

@@ -1,9 +1,14 @@
 import { BRAND } from '@/lib/brand'
+import { BRAND_ENV_KEYS } from '@/lib/brand.client'
 import type { Metadata, Viewport } from 'next'
 import type { CSSProperties, ReactNode } from 'react'
 import './globals.css'
-export const metadata: Metadata = {
+// One image serves every deployment, so nothing that names the brand may be settled at
+// build time: every page is rendered per request, from the environment it runs in.
+export const dynamic = 'force-dynamic'
+export const generateMetadata = (): Metadata => ({
   title: `${BRAND.name} Mail`,
   description: `${BRAND.name} team mailbox`,
   robots: { index: false, follow: false, nocache: true, googleBot: { index: false, follow: false } },
@@ -14,20 +19,30 @@ export const metadata: Metadata = {
   applicationName: `${BRAND.name} Mail`,
   appleWebApp: { capable: true, title: `${BRAND.name} Mail`, statusBarStyle: 'black-translucent' },
   formatDetection: { telephone: false },
-}
+})
-export const viewport: Viewport = {
+export const generateViewport = (): Viewport => ({
   themeColor: BRAND.colors.accent,
   viewportFit: 'cover',
   width: 'device-width',
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
-}
+})
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
+      <head>
+        <script
+          // Only the public brand settings, and escaped so a value can never close the tag.
+          dangerouslySetInnerHTML={{
+            __html: `window.__MAILBOX_BRAND_ENV__=${JSON.stringify(
+              Object.fromEntries(BRAND_ENV_KEYS.flatMap(key => (process.env[key] ? [[key, process.env[key]]] : []))),
+            ).replace(/</g, '\\u003c')}`,
+          }}
+        />
+      </head>
       <body
         style={{ ['--brand-mark' as string]: `url('${BRAND.chromeMarkUrl}')` } as CSSProperties}
       >

package/app/mail/page.tsx CHANGED Viewed

@@ -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'
@@ -820,8 +821,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 +831,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 +844,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 +969,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 +978,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 {
@@ -5122,7 +5126,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 +6056,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 +6071,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 +6090,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 +6983,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 +7253,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>
             ) : (
@@ -8396,7 +8400,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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')

package/lib/color-scheme.ts ADDED Viewed

@@ -0,0 +1,233 @@
+// Mail is styled inline, and only a stylesheet rule marked !important can override an inline
+// colour, so the other scheme is a prefers-color-scheme block of per-element classes. Gmail
+// drops that block and keeps inverting the inline styles itself.
+type Rgb = [number, number, number]
+type Hsl = [number, number, number]
+export type SchemeBase = 'light' | 'dark'
+const NAMED: Record<string, Rgb> = { white: [255, 255, 255], black: [0, 0, 0] }
+const VOID = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr'])
+const RAW_TEXT = new Set(['style', 'script', 'title', 'textarea'])
+const COLOR_TOKEN = /#[0-9a-f]{6}\b|#[0-9a-f]{3}\b|rgba?\([^)]*\)|\b(?:white|black)\b/i
+const SURFACE: Record<SchemeBase, Rgb> = { light: [28, 28, 30], dark: [255, 255, 255] }
+function parseColor(value: string | undefined): Rgb | null {
+  if (!value) return null
+  const raw = value.trim().toLowerCase().replace(/\s*!important$/, '')
+  if (NAMED[raw]) return NAMED[raw]
+  const hex = raw.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/)
+  if (hex) {
+    const full = hex[1].length === 3 ? [...hex[1]].map(digit => digit + digit).join('') : hex[1]
+    return [0, 2, 4].map(offset => parseInt(full.slice(offset, offset + 2), 16)) as Rgb
+  }
+  const rgb = raw.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/)
+  if (rgb && (rgb[4] === undefined || Number(rgb[4]) >= 0.9)) return [rgb[1], rgb[2], rgb[3]].map(Number) as Rgb
+  return null
+}
+const toHex = (color: Rgb) => `#${color.map(channel => Math.round(channel).toString(16).padStart(2, '0')).join('')}`
+function luminance(color: Rgb): number {
+  const [red, green, blue] = color.map(channel => {
+    const scaled = channel / 255
+    return scaled <= 0.03928 ? scaled / 12.92 : ((scaled + 0.055) / 1.055) ** 2.4
+  })
+  return 0.2126 * red + 0.7152 * green + 0.0722 * blue
+}
+function contrast(first: Rgb, second: Rgb): number {
+  const [high, low] = [luminance(first), luminance(second)].sort((left, right) => right - left)
+  return (high + 0.05) / (low + 0.05)
+}
+function toHsl([red, green, blue]: Rgb): Hsl {
+  const [scaledRed, scaledGreen, scaledBlue] = [red / 255, green / 255, blue / 255]
+  const max = Math.max(scaledRed, scaledGreen, scaledBlue)
+  const min = Math.min(scaledRed, scaledGreen, scaledBlue)
+  const lightness = (max + min) / 2
+  if (max === min) return [0, 0, lightness]
+  const delta = max - min
+  const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min)
+  const hue =
+    max === scaledRed ? (scaledGreen - scaledBlue) / delta + (scaledGreen < scaledBlue ? 6 : 0)
+    : max === scaledGreen ? (scaledBlue - scaledRed) / delta + 2
+    : (scaledRed - scaledGreen) / delta + 4
+  return [hue / 6, saturation, lightness]
+}
+function fromHsl([hue, saturation, lightness]: Hsl): Rgb {
+  if (!saturation) return [lightness * 255, lightness * 255, lightness * 255]
+  const upper = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation
+  const lower = 2 * lightness - upper
+  const channel = (offset: number) => {
+    let tint = hue + offset
+    if (tint < 0) tint += 1
+    if (tint > 1) tint -= 1
+    if (tint < 1 / 6) return lower + (upper - lower) * 6 * tint
+    if (tint < 1 / 2) return upper
+    if (tint < 2 / 3) return lower + (upper - lower) * (2 / 3 - tint) * 6
+    return lower
+  }
+  return [channel(1 / 3) * 255, channel(0) * 255, channel(-1 / 3) * 255]
+}
+const withLightness = (color: Rgb, lightness: number, saturationScale = 1): Rgb => {
+  const [hue, saturation] = toHsl(color)
+  return fromHsl([hue, saturation * saturationScale, Math.min(1, Math.max(0, lightness))])
+}
+function flipSurface(color: Rgb, base: SchemeBase, kind: 'fill' | 'border'): Rgb {
+  const lightness = toHsl(color)[2]
+  if (base === 'light') {
+    if (lightness <= 0.75) return color
+    return withLightness(color, (1 - lightness) * 0.6 + (kind === 'fill' ? 0.06 : 0.2), 0.7)
+  }
+  if (lightness >= 0.25) return color
+  return withLightness(color, kind === 'fill' ? 0.94 + lightness * 0.6 : 0.9 - lightness * 0.6)
+}
+function fitText(color: Rgb, surface: Rgb): Rgb {
+  if (contrast(color, surface) >= 4.5) return color
+  const towardLight = luminance(surface) < 0.18
+  let lightness = 1 - toHsl(color)[2]
+  let candidate = withLightness(color, lightness)
+  while (contrast(candidate, surface) < 4.5 && lightness > 0 && lightness < 1) {
+    lightness += towardLight ? 0.02 : -0.02
+    candidate = withLightness(color, lightness)
+  }
+  return candidate
+}
+const sameColor = (first: Rgb, second: Rgb) => toHex(first) === toHex(second)
+function declarations(style: string): Map<string, string> {
+  const found = new Map<string, string>()
+  let depth = 0
+  let start = 0
+  const take = (end: number) => {
+    const part = style.slice(start, end)
+    const colon = part.indexOf(':')
+    if (colon > 0) found.set(part.slice(0, colon).trim().toLowerCase(), part.slice(colon + 1).trim())
+    start = end + 1
+  }
+  for (let index = 0; index < style.length; index++) {
+    const char = style[index]
+    if (char === '(') depth++
+    else if (char === ')') depth = Math.max(0, depth - 1)
+    else if (char === ';' && !depth) take(index)
+  }
+  take(style.length)
+  return found
+}
+function attribute(attrs: string, name: string): string | undefined {
+  const match = attrs.match(new RegExp(`\\s${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s>]+))`, 'i'))
+  return match ? (match[1] ?? match[2] ?? match[3]) : undefined
+}
+function colorsOf(tag: string, attrs: string) {
+  const style = declarations((attribute(attrs, 'style') ?? '').replace(/&quot;/g, '"'))
+  const backgroundShorthand = style.get('background')
+  const fill =
+    parseColor(style.get('background-color')) ??
+    (backgroundShorthand && !/url\(/i.test(backgroundShorthand)
+      ? parseColor(backgroundShorthand) ?? parseColor(backgroundShorthand.match(COLOR_TOKEN)?.[0])
+      : null) ??
+    parseColor(attribute(attrs, 'bgcolor'))
+  const borderValue = ['border-color', 'border', 'border-top', 'border-right', 'border-bottom', 'border-left']
+    .map(name => style.get(name))
+    .find(value => value && COLOR_TOKEN.test(value))
+  return {
+    text: parseColor(style.get('color')) ?? (tag === 'font' ? parseColor(attribute(attrs, 'color')) : null),
+    fill,
+    border: parseColor(borderValue?.match(COLOR_TOKEN)?.[0]),
+  }
+}
+type Frame = { tag: string; sourceText: Rgb; targetText: Rgb; targetFill: Rgb }
+export function designsForDark(html: string): boolean {
+  return /prefers-color-scheme\s*:\s*dark/i.test(html)
+}
+export function adaptiveEmail(html: string, base: SchemeBase = 'light'): string {
+  if (!html.trim() || /prefers-color-scheme/i.test(html)) return html
+  const other = base === 'light' ? 'dark' : 'light'
+  const rules = new Map<string, string>()
+  const root: Frame = {
+    tag: '#root',
+    sourceText: [0, 0, 0],
+    targetText: fitText([0, 0, 0], SURFACE[base]),
+    targetFill: SURFACE[base],
+  }
+  const stack: Frame[] = [root]
+  const tagPattern = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][a-zA-Z0-9]*)((?:\s(?:[^>"']|"[^"]*"|'[^']*')*)?)\s*(\/?)>/g
+  let output = ''
+  let cursor = 0
+  let match: RegExpExecArray | null
+  while ((match = tagPattern.exec(html))) {
+    const [whole, closing, rawTag, attrs = '', selfClosing] = match
+    output += html.slice(cursor, match.index)
+    cursor = match.index + whole.length
+    if (!rawTag) {
+      output += whole
+      continue
+    }
+    const tag = rawTag.toLowerCase()
+    if (closing) {
+      const depth = stack.map(frame => frame.tag).lastIndexOf(tag)
+      if (depth > 0) stack.length = depth
+      output += whole
+      continue
+    }
+    if (RAW_TEXT.has(tag)) {
+      const end = html.toLowerCase().indexOf(`</${tag}`, cursor)
+      const stop = end === -1 ? html.length : end
+      output += whole + html.slice(cursor, stop)
+      cursor = stop
+      tagPattern.lastIndex = stop
+      continue
+    }
+    const parent = stack[stack.length - 1]
+    const own = colorsOf(tag, attrs)
+    const sourceText = own.text ?? parent.sourceText
+    const targetFill = own.fill ? flipSurface(own.fill, base, 'fill') : parent.targetFill
+    const targetText = fitText(sourceText, targetFill)
+    const shownWithoutRule = own.text ?? parent.targetText
+    const declarationsForOther = [
+      !sameColor(targetText, shownWithoutRule) && `color:${toHex(targetText)}!important`,
+      own.fill && !sameColor(targetFill, own.fill) && `background-color:${toHex(targetFill)}!important`,
+      own.border && !sameColor(flipSurface(own.border, base, 'border'), own.border) &&
+        `border-color:${toHex(flipSurface(own.border, base, 'border'))}!important`,
+    ].filter(Boolean).join(';')
+    let tagHtml = whole
+    if (declarationsForOther) {
+      const name = rules.get(declarationsForOther) ?? `nc-${other[0]}${rules.size}`
+      rules.set(declarationsForOther, name)
+      const existing = attrs.match(/\sclass\s*=\s*(?:"([^"]*)"|'([^']*)')/i)
+      tagHtml = existing
+        ? whole.replace(existing[0], ` class="${`${existing[1] ?? existing[2] ?? ''} ${name}`.trim()}"`)
+        : whole.replace(/^<[a-zA-Z0-9]+/, opening => `${opening} class="${name}"`)
+    }
+    output += tagHtml
+    if (!selfClosing && !/\/\s*$/.test(attrs) && !VOID.has(tag)) stack.push({ tag, sourceText, targetText, targetFill })
+  }
+  output += html.slice(cursor)
+  const css = [...rules].map(([body, name]) => `.${name}{${body}}`).join('')
+  const head =
+    '<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: ${other}){${css}}</style>`
+  if (/<head[\s>]/i.test(output)) return output.replace(/<head([^>]*)>/i, `<head$1>${head}`)
+  if (/<html[\s>]/i.test(output)) return output.replace(/<html([^>]*)>/i, `<html$1><head>${head}</head>`)
+  return `<!doctype html><html><head><meta charset="utf-8">${head}</head><body>${output}</body></html>`
+}
+// The reader's theme decides, not the device's: a dark app on a light device still gets the dark design.
+export function pinColorScheme(html: string, dark: boolean): string {
+  return html.replace(/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi, (_, scheme: string) =>
+    (scheme.toLowerCase() === 'dark') === dark ? '(min-width:0px)' : '(max-width:0px)',
+  )
+}

package/lib/emails/index.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { BRAND } from '../brand'
+import { adaptiveEmail } from '../color-scheme'
 /**
  * Tiny email-template runtime.
  *
@@ -88,13 +89,13 @@ export function renderNotificationEmail(
   mode: EmailMode,
   fields: EmailField[],
 ): string {
-  return render(TPL_NOTIFICATION, {
+  return adaptiveEmail(render(TPL_NOTIFICATION, {
     title:
       mode === 'academy' ? 'New Academy Registration' : 'New Project Inquiry',
     host: BRAND_HOST,
     date: new Date().toUTCString(),
     rows: renderRows(fields, 'notification'),
-  })
+  }), 'dark')
 }
 export function notificationSubject(mode: EmailMode, email: string): string {
@@ -108,7 +109,7 @@ export function renderAutoReplyEmail(
   fields: EmailField[],
 ): string {
   const isAcademy = mode === 'academy'
-  return render(TPL_AUTO_REPLY, {
+  return adaptiveEmail(render(TPL_AUTO_REPLY, {
     headline: isAcademy ? 'Your spot is reserved.' : 'We got your brief.',
     kicker: isAcademy ? 'Academy' : 'Studio',
     lead: isAcademy
@@ -117,7 +118,7 @@ export function renderAutoReplyEmail(
     rows: renderRows(fields, 'reply'),
     brandUrl: BRAND_URL,
     brandHost: BRAND_HOST,
-  })
+  }), 'dark')
 }
 export function autoReplySubject(mode: EmailMode): string {
@@ -150,7 +151,7 @@ export type AcademyFollowupVars = {
 }
 export function renderAcademyFollowupEmail(vars: AcademyFollowupVars): string {
-  return render(TPL_ACADEMY_FOLLOWUP, {
+  return adaptiveEmail(render(TPL_ACADEMY_FOLLOWUP, {
     logoUrl: vars.logoUrl ?? BRAND.logoUrl,
     headline: escapeHtml(vars.headline ?? 'Your cohort details are here.'),
     firstName: escapeHtml(vars.firstName),
@@ -188,7 +189,7 @@ export function renderAcademyFollowupEmail(vars: AcademyFollowupVars): string {
     signatureRole: escapeHtml(vars.signatureRole ?? `${BRAND.name} Academy`),
     brandUrl: BRAND_URL,
     brandHost: BRAND_HOST,
-  })
+  }), 'dark')
 }
 export function academyFollowupSubject(courses: string): string {
@@ -239,7 +240,7 @@ function renderAcademySection(vars: ContactFollowupVars): string {
 }
 export function renderContactFollowupEmail(vars: ContactFollowupVars): string {
-  return render(TPL_CONTACT_FOLLOWUP, {
+  return adaptiveEmail(render(TPL_CONTACT_FOLLOWUP, {
     logoUrl: vars.logoUrl ?? BRAND.logoUrl,
     headline: escapeHtml(vars.headline ?? 'A few quick questions about your project.'),
     firstName: escapeHtml(vars.firstName),
@@ -274,7 +275,7 @@ export function renderContactFollowupEmail(vars: ContactFollowupVars): string {
     signatureRole: escapeHtml(vars.signatureRole ?? 'Engineering Studio'),
     brandUrl: BRAND_URL,
     brandHost: BRAND_HOST,
-  })
+  }), 'dark')
 }
 export function contactFollowupSubject(projectType: string): string {
@@ -294,7 +295,7 @@ export type ActionEmailVars = {
 /** One-button transactional mail — resets, invites — in the tenant's own accent. */
 export function renderActionEmail(vars: ActionEmailVars): string {
-  return render(TPL_ACTION, {
+  return adaptiveEmail(render(TPL_ACTION, {
     eyebrow: escapeHtml(vars.eyebrow),
     accent: escapeHtml(vars.accent),
     title: escapeHtml(vars.title),
@@ -303,5 +304,5 @@ export function renderActionEmail(vars: ActionEmailVars): string {
     actionUrl: escapeHtml(vars.actionUrl),
     expiry: escapeHtml(vars.expiry),
     footer: escapeHtml(vars.footer),
-  })
+  }), 'dark')
 }

package/lib/mail-provider.ts CHANGED Viewed

@@ -176,8 +176,10 @@ async function sendViaSes(payload: SendPayload): Promise<SendResult> {
  * here ever sees it. Skipped when the archive is already a recipient, so a message never
  * arrives twice, and skipped for anything a person wrote — their Sent folder already has it.
  */
+export const archiveAddress = () => (process.env.MAIL_ARCHIVE_BCC ?? '').trim().toLowerCase()
 function withArchive(payload: SendPayload): SendPayload {
-  const archive = (process.env.MAIL_ARCHIVE_BCC ?? '').trim().toLowerCase()
+  const archive = archiveAddress()
   if (!archive || payload.skipArchive) return payload
   const already = [...payload.to, ...(payload.cc ?? []), ...(payload.bcc ?? [])]
     .some(entry => entry.toLowerCase().includes(archive))

package/lib/mailbox.ts CHANGED Viewed

@@ -1786,7 +1786,8 @@ export async function inboundExists(ids: string[]): Promise<Set<string>> {
   for (let i = 0; i < ids.length; i += 200) {
     const chunk = ids.slice(i, i + 200)
     if (!chunk.length) break
-    const rows = await tagged(db(), `SELECT id FROM mail_inbox WHERE id IN (${chunk.map(() => '?').join(',')})`, chunk)
+    const marks = chunk.map(() => '?').join(',')
+    const rows = await tagged(db(), `SELECT id FROM mail_inbox WHERE id IN (${marks}) UNION SELECT id FROM mail_sent WHERE id IN (${marks})`, [...chunk, ...chunk])
     for (const row of rows) found.add(String(row.id))
   }
   return found

package/lib/receive.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import { BRAND, ADDRESS_DOMAINS } from '@/lib/brand'
 import { sendPush } from '@/lib/push'
 import { stripOwnPixel } from '@/lib/email-html'
 import { FORWARDING_ENABLED, FORWARD_RECIPIENTS, MAIL_DOMAIN } from '@/lib/dev-auth'
-import { ADDRESS_ALIASES, appendInbound, isDmarcAggregateReport, judgeMessage, noteSender, senderStanding, senderDomainOf, getAccountByAddress, inboundExists, recordContact, recordSentMeta, repairInbound } from '@/lib/mailbox'
-import { sendMail } from '@/lib/mail-provider'
+import { ADDRESS_ALIASES, appendInbound, classifyAddressed, isDmarcAggregateReport, judgeMessage, noteSender, senderStanding, senderDomainOf, getAccountByAddress, inboundExists, recordContact, recordSentMessage, recordSentMeta, repairInbound } from '@/lib/mailbox'
+import { archiveAddress, sendMail } from '@/lib/mail-provider'
 /**
  * Where the receiving API lives. The Resend SDK reads RESEND_BASE_URL for sending, so a
@@ -379,6 +379,24 @@ export async function ingestReceived(
     return { owner: inbound.owner, subject: inbound.subject, from: inbound.from }
   }
+  if (isArchiveCopy(inbound.owner, inbound.to, inbound.cc)) {
+    await recordSentMessage({
+      id: emailId,
+      from: inbound.from,
+      to: inbound.to,
+      cc: inbound.cc,
+      bcc: inbound.bcc,
+      replyTo: inbound.replyTo,
+      subject: inbound.subject,
+      html: inbound.html,
+      text: inbound.text,
+      createdAt: inbound.receivedAt,
+      attachments: inbound.attachments,
+    })
+    await recordSentMeta(emailId, inbound.owner, true)
+    return { owner: inbound.owner, subject: inbound.subject, from: inbound.from }
+  }
   await appendInbound(inbound)
   await noteSender(owner, senderDomain, 'received').catch(() => {})
   const sender = parseSender(inbound.from)
@@ -411,6 +429,12 @@ export async function ingestReceived(
   return { owner: inbound.owner, subject: inbound.subject, from: inbound.from }
 }
+/** A copy of our own outgoing mail, BCC'd to the archive seat: it belongs in that seat's Sent, not its inbox. */
+export function isArchiveCopy(owner: string | null | undefined, to: string[], cc: string[]): boolean {
+  const archive = archiveAddress()
+  return Boolean(archive) && (owner ?? '').trim().toLowerCase() === archive && classifyAddressed(owner, to, cc) === 'other'
+}
 export type ReceivedSummary = { id: string; from: string; to: string[]; subject: string; createdAt: string }
 /**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@novacraft-engineering/mailbox",
-  "version": "0.4.27",
+  "version": "0.4.28",
   "description": "A shared webmail app: one codebase, one deployment per mailbox. Threads, a rich composer with signatures, attachments on S3-compatible storage, sharing links, full-text search, web push and PWA install.",
   "keywords": [
     "webmail",