@omega.js/backend 0.1.0

package/dist/manager/libraries/email/generators/lib/templates/editorial/index.js

@@ -0,0 +1,318 @@
+/**
+ * `editorial` template — magazine-style with masthead, drop-cap intro,
+ * numbered sections, alternating image layout, pull-quotes, plain signoff.
+ *
+ * The shell handles cross-cutting concerns (top/end sponsorships, citations,
+ * footer with CAN-SPAM address) automatically. This file only owns the
+ * editorial identity:
+ *
+ *   - Dark masthead with oversized wordmark + issue line + serif tagline
+ *   - Cover headline ("In this issue" eyebrow + giant subject)
+ *   - Drop-cap intro
+ *   - Numbered section layout with alternating image/numeral columns
+ *   - Pull-quote per section
+ *   - Optional inline 'middle' sponsorships between sections
+ *   - Plain italic-serif sign-off on white
+ */
+const {
+  shell,
+  resolveTheme,
+  escape,
+  safeUrl,
+  markdownToHtml,
+  inlineMarkdown,
+  singleColumnSection,
+  twoColumnSection,
+  column,
+  dividerBlock,
+  sponsorshipsAt,
+} = require('../newsletter-shared.js');
+
+const {
+  SERIF_FONT,
+  eyebrow,
+  pullQuoteFrom,
+  stripSentence,
+  issueLine,
+} = require('./helpers.js');
+
+const { CLASSIC_SCHEMA, normalizeClassic } = require('../classic-schema.js');
+
+const SPACING_OVERRIDES = {
+  gutter: '48px',
+  sectionGap: '24px',
+};
+
+function build({ structure, imagePaths, theme: themeIn, brandName, brandUrl, brandAddress, now, sponsorships }) {
+  const theme = resolveTheme(themeIn, SPACING_OVERRIDES);
+  const gutter = theme.spacing.gutter;
+  const WHITE = '#ffffff';
+  const issue = issueLine({ now });
+
+  // Section rendering — sections NEVER render their own trailing divider.
+  // The build orchestrator inserts dividers BETWEEN blocks below, so we have
+  // exactly one separator between any two adjacent blocks and zero stacking.
+  // Sections array is optional — a structure with no sections renders just
+  // masthead + cover + intro + signoff + footer.
+  const safeSections = Array.isArray(structure.sections) ? structure.sections : [];
+  const sectionBlocks = safeSections.map((section, i) =>
+    editorialSection({
+      section: section || {},
+      imagePath: imagePaths?.[i],
+      theme,
+      index: i,
+      total: safeSections.length,
+    })
+  ).filter(Boolean);
+
+  // Middle sponsorships: insert at midpoint, WITHOUT the sponsorship's own
+  // hairlines (the section divider above and below already separates content).
+  const middleSponsorships = sponsorshipsAt({
+    sponsorships,
+    position: 'middle',
+    theme,
+    padding: `20px ${gutter} 20px ${gutter}`,
+    background: WHITE,
+    label: 'In partnership with',
+    withRules: false,
+  });
+
+  if (middleSponsorships) {
+    const middleIndex = Math.floor(sectionBlocks.length / 2);
+    sectionBlocks.splice(middleIndex, 0, middleSponsorships);
+  }
+
+  // Join section blocks with a SINGLE shared divider between adjacent blocks.
+  // The divider gets symmetric vertical padding (40px above + 40px below) so
+  // the rule sits visually centered between the surrounding content. No
+  // leading divider, no trailing divider, no stacking with sponsorship rules.
+  const divider = dividerBlock({
+    background: WHITE,
+    padding: `40px ${gutter} 40px ${gutter}`,
+    color: theme.spacing.ruleColor,
+  });
+  const composedBody = sectionBlocks.join(`\n${divider}\n`);
+
+  // Envelope passed to shell (data — same for every template)
+  const envelope = {
+    structure,
+    theme,
+    brandName,
+    brandUrl,
+    brandAddress,
+    sponsorships,
+    now,
+  };
+
+  // Slots — what this template uniquely contributes
+  const slots = {
+    header: masthead({ brandName, brandUrl, theme, issue, tagline: structure.preheader, gutter }),
+    hero: [
+      coverHeadline({ subject: structure.subject, theme, gutter }),
+      dividerBlock({ background: WHITE, padding: `32px ${gutter} 0 ${gutter}`, color: theme.secondaryColor }),
+      dropCapIntro({ intro: structure.intro, gutter }),
+    ].filter(Boolean).join('\n'),
+    body: composedBody,
+    signoff: editorialSignoff({ signoff: structure.signoff, theme, gutter }),
+  };
+
+  // Per-template shell config
+  const config = {
+    width: '640px',
+    extraAttributes: `<mj-text font-size="17px" line-height="1.7" color="${theme.secondaryColor}" />
+      <mj-button background-color="${theme.secondaryColor}" color="#ffffff" border-radius="0" font-weight="600" font-size="12px" letter-spacing="2px" inner-padding="16px 28px" text-transform="uppercase" padding="0" />`,
+    extraStyles: editorialStyles(theme),
+    sponsorshipStyle: {
+      padding: `20px ${gutter} 20px ${gutter}`,
+      background: WHITE,
+      label: 'In partnership with',
+    },
+    citationsStyle: {
+      padding: `24px ${gutter} 24px ${gutter}`,
+      background: WHITE,
+    },
+    footerStyle: {
+      padding: `36px ${gutter} 64px ${gutter}`,
+      topRule: `<div class="footer-rule"></div>`,
+      extraLine: `${brandName} · Issue ${issue.number}`,
+      linkStyle: 'border-bottom: none;',
+    },
+  };
+
+  return shell(envelope, slots, config);
+}
+
+// ---------- Editorial-specific CSS ----------
+
+function editorialStyles(theme) {
+  return `
+      h1, h2, h3 { color: ${theme.secondaryColor}; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
+      h2 { font-size: 32px; line-height: 1.15; }
+      h3 { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
+      a { color: ${theme.primaryColor}; text-decoration: none; border-bottom: 1px solid ${theme.primaryColor}; }
+      p { margin: 0 0 16px; }
+      .masthead-issue { font-family: ${SERIF_FONT}; font-style: italic; font-size: 14px; color: rgba(255,255,255,0.7); letter-spacing: 1px; }
+      .masthead-brand { font-size: 44px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #ffffff; }
+      .masthead-rule { display: block; width: 48px; height: 4px; background: ${theme.primaryColor}; margin: 18px 0 14px; }
+      .masthead-tagline { font-family: ${SERIF_FONT}; font-style: italic; font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.5; }
+      .lede { font-family: ${SERIF_FONT}; font-size: 22px; line-height: 1.5; color: ${theme.secondaryColor}; }
+      .lede::first-letter {
+        font-family: ${SERIF_FONT};
+        font-weight: 700;
+        font-size: 72px;
+        line-height: 0.85;
+        float: left;
+        padding: 6px 12px 0 0;
+        color: ${theme.primaryColor};
+      }
+      .numeral-fallback { font-family: ${SERIF_FONT}; font-size: 96px; line-height: 0.85; font-weight: 700; color: ${theme.primaryColor}; opacity: 0.18; }
+      .pullquote { font-family: ${SERIF_FONT}; font-style: italic; font-size: 22px; line-height: 1.4; color: ${theme.primaryColor}; border-left: 3px solid ${theme.primaryColor}; padding: 4px 0 4px 20px; margin: 8px 0 16px; }
+      .section-meta { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #888; font-weight: 600; }
+      .signoff { font-family: ${SERIF_FONT}; font-style: italic; font-size: 18px; line-height: 1.5; color: ${theme.secondaryColor}; }
+      .footer-rule { display: block; width: 32px; height: 2px; background: ${theme.primaryColor}; margin: 0 auto 16px; }`;
+}
+
+// ---------- Editorial blocks ----------
+
+function masthead({ brandName, brandUrl, theme, issue, tagline }) {
+  return singleColumnSection({
+    background: theme.secondaryColor,
+    padding: `48px 40px 40px 40px`,
+    content: `<mj-text>
+          <div class="masthead-issue">${escape(issue.line)}</div>
+          <div class="masthead-rule"></div>
+          <div class="masthead-brand"><a href="${brandUrl}" style="color: #ffffff; text-decoration: none; border-bottom: none;">${escape(brandName).toUpperCase()}</a></div>
+          <div class="masthead-tagline">${escape(tagline || '')}</div>
+        </mj-text>`,
+  });
+}
+
+function coverHeadline({ subject, theme, gutter }) {
+  return singleColumnSection({
+    background: '#ffffff',
+    padding: `48px ${gutter} 8px ${gutter}`,
+    content: `<mj-text padding="0">${eyebrow({ text: 'In this issue', color: theme.primaryColor })}</mj-text>
+        <mj-spacer height="14px" />
+        <mj-text padding="0"><h2 style="font-size: 38px; line-height: 1.1;">${escape(subject || '')}</h2></mj-text>`,
+  });
+}
+
+function dropCapIntro({ intro, gutter }) {
+  if (!intro) {
+    return '';
+  }
+
+  return singleColumnSection({
+    background: '#ffffff',
+    padding: `32px ${gutter} 40px ${gutter}`,
+    content: `<mj-text padding="0"><div class="lede">${inlineMarkdown(intro)}</div></mj-text>`,
+  });
+}
+
+function editorialSection({ section, imagePath, theme, index, total }) {
+  const gutter = theme.spacing.gutter;
+  const WHITE = '#ffffff';
+  const safeSection = section || {};
+
+  // Skip an entirely empty section — no title, no body — so the orchestrator's
+  // shared divider doesn't sandwich a hollow numeral block between two real
+  // sections.
+  if (!safeSection.title && !safeSection.body && !safeSection.cta) {
+    return '';
+  }
+
+  const num = String(index + 1).padStart(2, '0');
+  const totalLabel = String(total).padStart(2, '0');
+  const pullQuote = pullQuoteFrom(safeSection.body || '');
+  const bodyHtml = stripSentence(safeSection.body || '', pullQuote);
+  const imageOnLeft = index % 2 === 0;
+
+  const imageColumn = column({
+    width: '60%',
+    content: `<mj-image src="${escape(imagePath || '')}" alt="${escape(safeSection.title || '')}" padding="0" border-radius="0" />`,
+  });
+  const numeralColumn = column({
+    width: '40%',
+    content: `<mj-text padding="20px"><div class="numeral-fallback" style="text-align: center;">${num}</div></mj-text>`,
+  });
+
+  const imageRow = imagePath
+    ? twoColumnSection({
+      background: WHITE,
+      padding: `0 ${gutter} 0 ${gutter}`,
+      left:  imageOnLeft ? imageColumn   : numeralColumn,
+      right: imageOnLeft ? numeralColumn : imageColumn,
+    })
+    : singleColumnSection({
+      background: WHITE,
+      padding: `0 ${gutter} 0 ${gutter}`,
+      content: `<mj-text><div class="numeral-fallback">${num}</div></mj-text>`,
+    });
+
+  const titleRow = safeSection.title
+    ? singleColumnSection({
+      background: WHITE,
+      padding: `28px ${gutter} 0 ${gutter}`,
+      content: `<mj-text padding="0"><div class="section-meta">Story ${num} of ${totalLabel}</div></mj-text>
+        <mj-spacer height="10px" />
+        <mj-text padding="0"><h2>${escape(safeSection.title)}</h2></mj-text>`,
+    })
+    : '';
+
+  const pullQuoteRow = pullQuote
+    ? singleColumnSection({
+      background: WHITE,
+      padding: `8px ${gutter} 0 ${gutter}`,
+      content: `<mj-text padding="0"><div class="pullquote">${escape(pullQuote)}</div></mj-text>`,
+    })
+    : '';
+
+  const bodyRow = bodyHtml
+    ? singleColumnSection({
+      background: WHITE,
+      padding: `12px ${gutter} 24px ${gutter}`,
+      content: `<mj-text padding="0">${markdownToHtml(bodyHtml)}</mj-text>`,
+    })
+    : '';
+
+  const ctaRow = safeSection.cta?.label && safeSection.cta?.url
+    ? singleColumnSection({
+      background: WHITE,
+      padding: `8px ${gutter} 0 ${gutter}`,
+      content: `<mj-button href="${safeUrl(safeSection.cta.url)}" align="left">${escape(safeSection.cta.label)} &nbsp;→</mj-button>`,
+    })
+    : '';
+
+  // Section never renders its own trailing divider — the build orchestrator
+  // joins adjacent sections with one shared divider so spacing is symmetric
+  // and no rules stack against sponsorship hairlines. Falsy rows are filtered
+  // so an empty/partial section doesn't emit hollow whitespace blocks.
+  return [imageRow, titleRow, pullQuoteRow, bodyRow, ctaRow].filter(Boolean).join('\n');
+}
+
+function editorialSignoff({ signoff, theme, gutter }) {
+  if (!signoff) {
+    return '';
+  }
+
+  const html = escape(signoff).replace(/\n/g, '<br/>');
+
+  return singleColumnSection({
+    background: '#ffffff',
+    padding: `40px ${gutter} 8px ${gutter}`,
+    content: `<mj-text padding="0"><div class="signoff">${html}</div></mj-text>`,
+  });
+}
+
+module.exports = {
+  build,
+  meta: {
+    name: 'editorial',
+    description: 'Magazine-style: masthead, drop-cap intro, numbered sections, pull-quotes, italic signoff.',
+    requires: ['subject', 'preheader', 'intro', 'sections', 'signoff'],
+    optional: ['citations', 'image_prompt'],
+    supports: { sponsorships: ['top', 'middle', 'end'], citations: true, images: true },
+  },
+  schema: CLASSIC_SCHEMA,
+  normalize: normalizeClassic,
+};

package/dist/manager/libraries/email/generators/lib/templates/feedback.js

@@ -0,0 +1,101 @@
+/**
+ * Feedback template — emoji rating card with gift card incentive.
+ * Matches the original SendGrid feedback template: 🎉 header, gift card copy,
+ * 4 rating faces (dislike/neutral/like/love), CTA button, support help text.
+ */
+const { skeleton, logo, cardWrapper, signoff, footer, escape } = require('./base.js');
+
+// The rating faces are unicode glyphs, not hosted images. They used to be PNGs on
+// the framework author's company CDN — a brand's mail fetching another company's
+// assets, and dark on the day that CDN goes away. The framework has no image host of
+// its own to move them to (the newsletter asset host is per-brand campaign content),
+// and no brand configures four rating faces, so the glyph IS the asset: it ships in
+// the template, needs no config, and renders in every client — the same call the
+// header emoji above already makes.
+const RATING_FACES = {
+  dislike: '😞',
+  neutral: '😐',
+  like: '🙂',
+  love: '😍',
+};
+
+function build({ data, theme }) {
+  const brand = data?.brand || {};
+  const brandName = brand.name || '';
+  const brandUrl = brand.url || '#';
+  const email = data?.email || {};
+  const name = data?.personalization?.name;
+
+  const feedbackUrl = `${brandUrl}/feedback`;
+  const utm = 'utm_source=feedback-request-email&utm_medium=email&utm_campaign=amazon-100-giftcard-promo';
+
+  return skeleton({ subject: email.subject, preview: email.preview, categories: email.categories }, `
+    ${logo(brand, theme)}
+    ${cardWrapper(`
+        <!-- Header -->
+        <mj-text padding="0" align="center">
+          <p style="font-size: 48px; line-height: 1; margin: 0 0 12px;">&#127881;</p>
+          <h2 style="font-size: 32px; line-height: 1.2; font-weight: 500; margin: 0 0 8px;">Win a $100 Amazon Gift Card!</h2>
+          <p style="color: #718096; margin: 0 0 0;">${name ? `Hey ${escape(name)}, share` : 'Share'} your honest feedback on ${escape(brandName)}.</p>
+        </mj-text>
+
+        <!-- Explanation -->
+        <mj-text padding="20px 0 0 0">
+          <p style="color: #718096;">We hope you are enjoying <strong>${escape(brandName)}</strong>! We are always looking for ways to improve and would <strong>love to hear your feedback</strong>.</p>
+          <p style="color: #718096;">We're giving away a <strong>$100 Amazon Gift Card</strong> to one lucky winner who provides us with their honest feedback.</p>
+        </mj-text>
+
+        <!-- Rating Label -->
+        <mj-text padding="24px 0 8px 0">
+          <p style="font-weight: 700; font-size: 12px; color: #718096; letter-spacing: 0.5px; margin: 0;">HOW WOULD YOU RATE US?</p>
+        </mj-text>
+
+        <!-- Rating Faces -->
+        <mj-text padding="0">
+          <div style="background-color: #F7FAFC; border-radius: 8px; padding: 20px;">
+            <table style="width: 100%; border-collapse: collapse;" cellpadding="0" cellspacing="0">
+              <tr>
+                ${_ratingCell('dislike', 'Poor', feedbackUrl, utm)}
+                ${_ratingCell('neutral', '', feedbackUrl, utm)}
+                ${_ratingCell('like', '', feedbackUrl, utm)}
+                ${_ratingCell('love', 'Excellent', feedbackUrl, utm)}
+              </tr>
+            </table>
+          </div>
+        </mj-text>
+
+        <!-- CTA Button -->
+        <mj-button href="${feedbackUrl}?${utm}" background-color="#1A202C" color="#ffffff" border-radius="4px" font-size="16px" font-weight="normal" inner-padding="10px 20px" padding="24px 0 0 0">I want to win a $100 Amazon Gift Card!</mj-button>
+
+        <!-- Help Text -->
+        <mj-text padding="16px 0 0 0" align="center">
+          <p style="color: #718096; margin: 0;">Your feedback helps us improve. <a href="${brandUrl}/support">Contact our support team</a> if you need help.</p>
+        </mj-text>
+
+        ${signoff(data, theme)}
+    `)}
+    ${footer(brand, email)}
+  `);
+}
+
+function _ratingCell(rating, label, feedbackUrl, utm) {
+  const url = `${feedbackUrl}?rating=${rating}&${utm}`;
+  const face = RATING_FACES[rating];
+  const labelStyle = label
+    ? 'font-size: 11px; color: #888; margin-top: 4px;'
+    : 'font-size: 11px; color: transparent; margin-top: 4px;';
+
+  return `<td style="text-align: center; padding: 4px; width: 25%; vertical-align: top;">
+    <a href="${url}" aria-label="${rating}" style="text-decoration: none; display: inline-block;">
+      <div style="font-size: 40px; line-height: 48px; height: 48px; margin: 0 auto;">${face}</div>
+      <div style="${labelStyle}">${label || '&nbsp;'}</div>
+    </a>
+  </td>`;
+}
+
+const meta = {
+  name: 'feedback',
+  description: 'Feedback request — rating faces with gift card incentive',
+};
+
+module.exports = { build, meta };

package/dist/manager/libraries/email/generators/lib/templates/field-report/helpers.js

@@ -0,0 +1,138 @@
+/**
+ * Helpers for the `field-report` template.
+ *
+ * Field Report aesthetic = wire-service correspondent + Bloomberg terminal.
+ * The helpers below encode the conventions that make that look feel coherent:
+ *   - mono "kicker" labels in oxblood (a darker, more editorial primary)
+ *   - "VOL. NNNN" issue numbering (continues the editorial issue counter so
+ *     the brand reads as a single ongoing publication across templates)
+ *   - terminal-style data callouts ("// THIS ISSUE //" and per-dispatch
+ *     data tables) rendered as black bg + mono green-on-black, evoking
+ *     a trader's terminal
+ *   - dateline formatting ("MAY 12 · LOS ANGELES")
+ *
+ * Lives separately from shared.js (which is template-agnostic) and from
+ * editorial-helpers.js (which encodes a totally different aesthetic).
+ */
+const { escape } = require('../newsletter-shared.js');
+const { computeIssueNumber } = require('../editorial/helpers.js');
+
+const SERIF_FONT = `'Tiempos Headline', 'Tiempos Text', Georgia, 'Times New Roman', serif`;
+const MONO_FONT  = `'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace`;
+
+// Terminal palette — used by the TLDR block and per-dispatch data callouts.
+// Always rendered against any brand color theme — the terminal block is a
+// fixed visual anchor that says "this is a Field Report" regardless of brand.
+const TERMINAL = {
+  bg:    '#0d1117',  // near-black, slightly cooler than pure black
+  fg:    '#7fffb0',  // muted phosphor green
+  label: '#ff6b6b',  // alert red for labels
+  rule:  '#1f2937',  // subtle grid rule
+};
+
+// Default oxblood/ink primary — overridden by theme.primaryColor if set.
+const DEFAULT_INK = '#7a1f1f';
+
+/**
+ * Render a mono "kicker" label. Goes above a headline. Examples:
+ *   - "DISPATCH"
+ *   - "FIELD NOTES"
+ *   - "WATCH"
+ *   - "BRIEF"
+ * Uppercase, heavy letter-spacing, in the ink color.
+ */
+function kicker({ text, color }) {
+  return `<div style="font-family: ${MONO_FONT}; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; font-weight: 700; color: ${color || DEFAULT_INK};">${escape(text || '')}</div>`;
+}
+
+/**
+ * Build the issue strap shown at the very top of the newsletter:
+ *   "VOL. 0863 · MAY 12, 2026 · LOS ANGELES"
+ * The Volume number is the same monotonic counter editorial uses, so the
+ * brand has one continuous "issue history" regardless of which template
+ * shipped the issue.
+ */
+function issueStrap({ now, dateline }) {
+  const d = now || new Date();
+  const vol = computeIssueNumber(d);
+  const datePart = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase();
+  const placePart = dateline ? ` · ${escape(dateline.toUpperCase())}` : '';
+  return `VOL. ${vol} · ${datePart}${placePart}`;
+}
+
+/**
+ * Per-dispatch dateline. Combines location + a short date.
+ * Returns e.g. "REMOTE · MAY 12" or "NEW YORK · MAY 12".
+ */
+function dispatchDateline({ now, location }) {
+  const d = now || new Date();
+  const datePart = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }).toUpperCase();
+  const loc = (location || 'REMOTE').toUpperCase();
+  return `${escape(loc)} · ${escape(datePart)}`;
+}
+
+/**
+ * Render the per-dispatch "data callout" — a small terminal-style block
+ * with up to 4 label/value pairs. Used as the right-column rail next to
+ * the dispatch body, OR as a full-width strip below the headline when
+ * the dispatch has no body image.
+ *
+ * dataPoints: [{ label, value }]
+ * Returns '' when empty.
+ */
+function dataCallout({ dataPoints, padding, fullWidth }) {
+  if (!Array.isArray(dataPoints) || !dataPoints.length) {
+    return '';
+  }
+
+  const rows = dataPoints.slice(0, 4).map((dp) => `
+            <div style="display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid ${TERMINAL.rule};">
+              <span style="font-family: ${MONO_FONT}; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: ${TERMINAL.label};">${escape(dp.label || '')}</span>
+              <span style="font-family: ${MONO_FONT}; font-size: 16px; font-weight: 700; color: ${TERMINAL.fg};">${escape(dp.value || '')}</span>
+            </div>`).join('');
+
+  const label = fullWidth
+    ? `<div style="font-family: ${MONO_FONT}; font-size: 10px; letter-spacing: 4px; color: ${TERMINAL.label}; margin-bottom: 12px;">// BY THE NUMBERS //</div>`
+    : `<div style="font-family: ${MONO_FONT}; font-size: 10px; letter-spacing: 4px; color: ${TERMINAL.label}; margin-bottom: 12px;">// DATA //</div>`;
+
+  return `<div style="background: ${TERMINAL.bg}; padding: ${padding || '20px'}; color: ${TERMINAL.fg};">
+          ${label}
+          ${rows}
+        </div>`;
+}
+
+/**
+ * TLDR strip rendered immediately under the masthead. Mono green-on-black,
+ * blinking-cursor vibe. Always one paragraph max.
+ */
+function tldrStrip({ tldr, gutter }) {
+  if (!tldr) {
+    return '';
+  }
+
+  return `<div style="background: ${TERMINAL.bg}; padding: 28px ${gutter}; color: ${TERMINAL.fg};">
+          <div style="font-family: ${MONO_FONT}; font-size: 10px; letter-spacing: 4px; color: ${TERMINAL.label}; margin-bottom: 14px;">// THIS ISSUE //</div>
+          <div style="font-family: ${MONO_FONT}; font-size: 14px; line-height: 1.65; color: ${TERMINAL.fg};">${escape(tldr)}<span style="color: ${TERMINAL.label};">_</span></div>
+        </div>`;
+}
+
+/**
+ * End-of-dispatch terminator. Appears at the bottom of each dispatch,
+ * before the divider to the next one. Like the "30" mark in old wire copy.
+ */
+function dispatchTerminator({ inkColor }) {
+  return `<div style="text-align: center; font-family: ${MONO_FONT}; font-size: 10px; letter-spacing: 6px; color: ${inkColor || DEFAULT_INK}; padding: 0 0 0 0;">— END DISPATCH —</div>`;
+}
+
+module.exports = {
+  SERIF_FONT,
+  MONO_FONT,
+  TERMINAL,
+  DEFAULT_INK,
+  kicker,
+  issueStrap,
+  dispatchDateline,
+  dataCallout,
+  tldrStrip,
+  dispatchTerminator,
+};