@novacraft-engineering/mailbox 0.1.0 → 0.2.0

package/app/mail/search.ts

@@ -89,7 +89,7 @@ export function parseQuery(raw: string): ParsedQuery {
 }
 
 /** "7d" / "2w" / "3m" / "1y" -> milliseconds. */
-function duration(value: string): number | null {
+export function duration(value: string): number | null {
   const match = value.match(/^(\d+)\s*([dwmy])$/)
   if (!match) return null
   const amount = Number(match[1])

package/app/share/[id]/page.tsx

@@ -4,6 +4,8 @@ import { CLIENT_BRAND } from '@/lib/brand.client'
 import { use, useCallback, useEffect, useState } from 'react'
 import styles from './share.module.css'
 
+const brandStyle = { '--brand-accent': CLIENT_BRAND.accent } as React.CSSProperties
+
 type Meta = {
   filename: string
   size: number
@@ -90,7 +92,7 @@ export default function SharePage({ params }: { params: Promise<{ id: string }>
 
   if (gone) {
     return (
-      <main className={styles.wrap}>
+      <main className={styles.wrap} style={brandStyle}>
         <div className={styles.card}>
           <span className={styles.mark} aria-hidden />
           <h1 className={styles.title}>This link is no longer available</h1>
@@ -105,7 +107,7 @@ export default function SharePage({ params }: { params: Promise<{ id: string }>
 
   if (!meta) {
     return (
-      <main className={styles.wrap}>
+      <main className={styles.wrap} style={brandStyle}>
         <div className={styles.card}>
           <span className={styles.skelMark} />
           <span className={styles.skelLine} />
@@ -116,7 +118,7 @@ export default function SharePage({ params }: { params: Promise<{ id: string }>
   }
 
   return (
-    <main className={styles.wrap}>
+    <main className={styles.wrap} style={brandStyle}>
       <div className={styles.card}>
         <span className={styles.mark} aria-hidden />
         <p className={styles.eyebrow}>{CLIENT_BRAND.legalName}</p>

package/app/share/[id]/share.module.css

@@ -37,7 +37,7 @@
   width: 38px;
   height: 28px;
   margin: 0 auto 18px;
-  background: #6d28d9;
+  background: var(--brand-accent, #6d28d9);
   mask: url('/brand/mark.png') no-repeat center / contain;
   -webkit-mask: url('/brand/mark.png') no-repeat center / contain;
 }
@@ -94,8 +94,8 @@
 }
 .field input:focus {
   outline: none;
-  border-color: #6d28d9;
-  box-shadow: 0 0 0 3px rgba(169, 3, 23, .12);
+  border-color: var(--brand-accent, #6d28d9);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, #6d28d9) 18%, transparent);
 }
 
 .error {
@@ -110,7 +110,7 @@
   padding: 12px 18px;
   border: 1px solid transparent;
   border-radius: 10px;
-  background: #6d28d9;
+  background: var(--brand-accent, #6d28d9);
   color: #fff;
   font: inherit;
   font-size: 15px;
@@ -118,7 +118,7 @@
   cursor: pointer;
   transition: background .16s ease, transform .16s ease;
 }
-.go:hover:not(:disabled) { background: #8e0213; transform: translateY(-1px); }
+.go:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-accent, #6d28d9) 86%, #000); transform: translateY(-1px); }
 .go:active:not(:disabled) { transform: translateY(0) scale(.99); }
 .go:disabled { opacity: .55; cursor: default; }
 

package/lib/email-html.ts

@@ -1,3 +1,4 @@
+import { lineSpacingOf, paragraphGap } from './fonts'
 import { BRAND } from './brand'
 /**
  * Turn editor HTML into HTML an email client will render.
@@ -32,14 +33,17 @@ const STYLES: Record<string, string> = {
   img: 'max-width:100%;height:auto;display:block;border:0;',
 }
 
-export function inlineEmailStyles(html: string, base?: { family?: string; size?: string }): string {
+export function inlineEmailStyles(html: string, base?: { family?: string; size?: string; lineSpacing?: number }): string {
   const family = base?.family?.replace(/'/g, '').trim()
   const size = base?.size?.trim()
+  const spacing = lineSpacingOf(base)
+  const gap = paragraphGap(spacing)
   const styles = Object.fromEntries(
     Object.entries(STYLES).map(([tag, style]) => {
       let adjusted = style
       if (family) adjusted = adjusted.replace('font-family:Arial,Helvetica,sans-serif;', `font-family:'${family}',Arial,Helvetica,sans-serif;`)
       if (size && !/^h[123]$/.test(tag)) adjusted = adjusted.replace('font-size:15px;', `font-size:${size};`)
+      adjusted = adjusted.replace('line-height:1.65;', `line-height:${spacing};`).replace('margin:0 0 14px;', `margin:0 0 ${gap};`)
       return [tag, adjusted]
     }),
   )
@@ -167,3 +171,7 @@ export function outlookSafeImages(html: string): string {
     return `<table role="presentation" border="0" cellpadding="0" cellspacing="0"${aligned} style="border-collapse:separate;${outer}"><tr><td style="${cell}">${inner}</td></tr></table>`
   })
 }
+
+/** The open-tracking pixel this app appends to outgoing mail, at its current and its former path. */
+export const OWN_PIXEL = /<img[^>]*\/api\/(?:dev\/)?mail\/pixel\/[^>]*>/gi
+export const stripOwnPixel = (html: string) => html.replace(OWN_PIXEL, '')

package/lib/emails/index.ts

@@ -35,6 +35,7 @@ const TPL_AUTO_REPLY = loadTemplate('auto-reply.html')
 const TPL_FIELD_ROW = loadTemplate('field-row.html')
 const TPL_ACADEMY_FOLLOWUP = loadTemplate('academy-followup.html')
 const TPL_CONTACT_FOLLOWUP = loadTemplate('contact-followup.html')
+const TPL_ACTION = loadTemplate('action.html')
 
 // ── Rendering primitives ───────────────────────────────────────────────────
 /** Escape user-provided values before interpolating into HTML. */
@@ -279,3 +280,28 @@ export function renderContactFollowupEmail(vars: ContactFollowupVars): string {
 export function contactFollowupSubject(projectType: string): string {
   return `Re: your project — ${projectType} · ${BRAND.name}`
 }
+
+export type ActionEmailVars = {
+  eyebrow: string
+  accent: string
+  title: string
+  body: string
+  actionLabel: string
+  actionUrl: string
+  expiry: string
+  footer: string
+}
+
+/** One-button transactional mail — resets, invites — in the tenant's own accent. */
+export function renderActionEmail(vars: ActionEmailVars): string {
+  return render(TPL_ACTION, {
+    eyebrow: escapeHtml(vars.eyebrow),
+    accent: escapeHtml(vars.accent),
+    title: escapeHtml(vars.title),
+    body: escapeHtml(vars.body),
+    actionLabel: escapeHtml(vars.actionLabel),
+    actionUrl: escapeHtml(vars.actionUrl),
+    expiry: escapeHtml(vars.expiry),
+    footer: escapeHtml(vars.footer),
+  })
+}

package/lib/emails/templates/action.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <body style="margin:0;background:#050309;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif">
+    <div style="max-width:600px;margin:0 auto;padding:40px 24px">
+
+      <div style="font:500 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:{{accent}};letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px">
+        {{eyebrow}}
+      </div>
+
+      <div style="border:1px solid #2C1F4A;border-radius:14px;background:#0A0613;padding:32px 30px">
+
+        <div style="font:700 22px/1.25 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#F5F2FA;margin:0 0 12px">
+          {{title}}
+        </div>
+
+        <div style="font:400 15px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#B4AEC6;margin:0 0 26px">
+          {{body}}
+        </div>
+
+        <table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
+          <tr>
+            <td style="border-radius:10px;background:{{accent}}">
+              <a href="{{actionUrl}}" style="display:inline-block;padding:13px 26px;font:600 14px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#FFFFFF;text-decoration:none">
+                {{actionLabel}}
+              </a>
+            </td>
+          </tr>
+        </table>
+
+        <div style="font:400 13px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#7A7290;margin:26px 0 0;padding:16px 0 0;border-top:1px solid #1E1533">
+          {{expiry}}
+        </div>
+
+        <div style="font:400 12px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#5A5170;margin:14px 0 0;word-break:break-all">
+          If the button does not open, paste this into your browser:<br />
+          <span style="color:#7A7290">{{actionUrl}}</span>
+        </div>
+
+      </div>
+
+      <div style="font:400 12px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#5A5170;margin:22px 0 0">
+        {{footer}}
+      </div>
+
+    </div>
+  </body>
+</html>

package/lib/fonts.ts

@@ -17,7 +17,13 @@ export function fontFaceCss(fonts: CustomFont[], origin = ''): string {
 
 export const FONT_SIZES = ['10px', '11px', '12px', '13px', '14px', '15px', '16px', '18px', '20px', '24px', '28px', '32px']
 
-export type BaseFont = { family: string; size: string }
+export type BaseFont = { family: string; size: string; lineSpacing?: number }
 export const EMPTY_FONT: BaseFont = { family: '', size: '' }
 
+export const LINE_SPACINGS = [1, 1.15, 1.3, 1.5, 1.65, 2]
+export const DEFAULT_LINE_SPACING = 1.3
+export const lineSpacingOf = (base?: { lineSpacing?: number } | null) =>
+  base?.lineSpacing && Number.isFinite(base.lineSpacing) && base.lineSpacing >= 0.8 && base.lineSpacing <= 3 ? base.lineSpacing : DEFAULT_LINE_SPACING
+export const paragraphGap = (spacing: number) => `${Math.round(spacing * 6)}px`
+
 export const fontStack = (family: string) => (family ? `'${family.replace(/'/g, '')}',Arial,Helvetica,sans-serif` : 'Arial,Helvetica,sans-serif')

package/lib/mail-provider.ts

@@ -3,11 +3,14 @@
  * file speaks these types; everything vendor-specific lives below. Switching providers
  * is then a config change plus one adapter, not a rewrite.
  *
- * Selected with MAIL_PROVIDER=brevo|resend (defaults to resend so nothing changes until
- * the switch is deliberate).
+ * Selected with MAIL_PROVIDER=ses|brevo|resend (defaults to resend so nothing changes
+ * until the switch is deliberate).
  */
 
-export type MailProvider = 'resend' | 'brevo'
+import { randomBytes } from 'node:crypto'
+import { sesSendRaw } from './ses-send'
+
+export type MailProvider = 'resend' | 'brevo' | 'ses'
 
 export type SendAttachment = { filename: string; content: string; contentType?: string }
 
@@ -45,7 +48,9 @@ export type NormalizedInbound = {
 }
 
 export function activeProvider(): MailProvider {
-  return process.env.MAIL_PROVIDER === 'brevo' ? 'brevo' : 'resend'
+  const configured = process.env.MAIL_PROVIDER
+  if (configured === 'brevo' || configured === 'ses') return configured
+  return 'resend'
 }
 
 function splitAddress(raw: string): { email: string; name?: string } {
@@ -110,8 +115,48 @@ async function sendViaBrevo(payload: SendPayload): Promise<SendResult> {
   return { id: result.messageId ? String(result.messageId).replace(/^<|>$/g, '') : null }
 }
 
+function encodeHeaderWord(value: string): string {
+  return /^[\x20-\x7E]*$/.test(value) ? value : `=?UTF-8?B?${Buffer.from(value, 'utf8').toString('base64')}?=`
+}
+
+function buildRawMime(payload: SendPayload): string {
+  const boundary = `nc_${randomBytes(12).toString('hex')}`
+  const sender = payload.fromName ? `${encodeHeaderWord(payload.fromName)} <${payload.from}>` : payload.from
+  const lines = [
+    `From: ${sender}`,
+    `To: ${payload.to.join(', ')}`,
+    ...(payload.cc?.length ? [`Cc: ${payload.cc.join(', ')}`] : []),
+    ...(payload.replyTo ? [`Reply-To: ${payload.replyTo}`] : []),
+    `Subject: ${encodeHeaderWord(payload.subject)}`,
+    'MIME-Version: 1.0',
+    ...Object.entries(payload.headers ?? {}).map(([name, value]) => `${name}: ${value}`),
+  ]
+
+  const text = payload.text ?? ''
+  const html = payload.html ?? ''
+  if (html && text) {
+    lines.push(`Content-Type: multipart/alternative; boundary="${boundary}"`, '',
+      `--${boundary}`, 'Content-Type: text/plain; charset=UTF-8', 'Content-Transfer-Encoding: base64', '',
+      Buffer.from(text, 'utf8').toString('base64'), '',
+      `--${boundary}`, 'Content-Type: text/html; charset=UTF-8', 'Content-Transfer-Encoding: base64', '',
+      Buffer.from(html, 'utf8').toString('base64'), '', `--${boundary}--`, '')
+  } else {
+    lines.push(`Content-Type: text/${html ? 'html' : 'plain'}; charset=UTF-8`, 'Content-Transfer-Encoding: base64', '',
+      Buffer.from(html || text, 'utf8').toString('base64'), '')
+  }
+  return lines.join('\r\n')
+}
+
+async function sendViaSes(payload: SendPayload): Promise<SendResult> {
+  return { id: await sesSendRaw(buildRawMime(payload)) }
+}
+
 export function sendMail(payload: SendPayload): Promise<SendResult> {
-  return activeProvider() === 'brevo' ? sendViaBrevo(payload) : sendViaResend(payload)
+  switch (activeProvider()) {
+    case 'ses': return sendViaSes(payload)
+    case 'brevo': return sendViaBrevo(payload)
+    default: return sendViaResend(payload)
+  }
 }
 
 // ── Receiving ───────────────────────────────────────────────────