@devdogsuga/newsletter 0.1.0

package/README.md

@@ -0,0 +1,193 @@
+# @devdogsuga/newsletter
+
+The DevDogs Changelog — the weekly newsletter — as one tree of email-safe React
+components with two callers:
+
+- **`apps/platform`** renders issues as pages at `/changelog` and
+  `/changelog/<version>`, straight from `ChangelogEmail`.
+- **`@devdogsuga/devtools`** exports issues as files — `pnpm devtools
+newsletter` — an `.html` preview and an Outlook-importable `.eml` per issue.
+
+It deliberately does not go through `@devdogsuga/email`. That package's
+compiled-slot pipeline exists to prove a template cannot branch on its inputs,
+which is exactly what a newsletter must do: issues differ in how many events
+they list. So issues here are authored data (`src/issues.ts`), rendered at
+author time with `react-dom/server`, and the send is a finished HTML document
+rather than a template plus fill.
+
+## One tree, two targets
+
+Every component takes a `RenderContext` — font stacks plus an asset resolver —
+because the two destinations disagree about both:
+
+- **Pages** pass `webRenderContext()`: `var(--font-display)` and friends
+  (`next/font` renames every family it self-hosts, so a literal `'Alan Sans'`
+  would never match on the site) and SVG data-URI image sources.
+- **Exports** pass `emailRenderContext()`: literal font stacks with email-safe
+  fallbacks, and `cid:` references to PNG parts embedded in the `.eml` —
+  Gmail and both Outlooks strip SVG in any form.
+
+Everything else is the same markup, and that markup is written for the worst
+renderer it will meet (classic Outlook's Word engine): tables for layout,
+longhand font properties via the `font()` helper (never the `font:`
+shorthand), `bgColor` attributes under every painted background, no alpha
+anywhere (`mix()` pre-blends), and button geometry on table cells rather than
+anchors. The tests in `src/export/render.test.tsx` hold the line on the
+mechanical parts.
+
+## Dark mode
+
+Dark-mode mail clients do not leave an already-dark email alone: the web
+Outlooks (outlook.com, new Outlook, Outlook mobile) run every color through a
+contrast-repair pass. Rendered-DOM forensics (two dumps plus a sixteen-way
+carrier probe, 2026-09-11) showed exactly how far the 2026 transform goes: it
+computes every element's effective background from the full cascade and
+**injects** the repaired value inline with `!important` — which, by the
+cascade, no stylesheet rule can ever outrank — rewrites `bgcolor` attributes
+and border colors, deletes `background-image`, `hsl()`, `var()` and
+`color-mix()` from the embedded stylesheet, and recolors `rgba()` in place.
+Exactly one paint mechanism passed the probe untouched, inline and in the
+stylesheet alike: `box-shadow`. The architecture follows from those findings:
+
+- **No background is ever inline.** Every painted element carries a `bc-`
+  class naming its hex; `paintCss()` in `src/darkmode.ts` supplies the base
+  rule (the color plus `solidBg`'s same-color `linear-gradient` underlay, as
+  Gmail armor), and a `bgcolor` attribute covers clients without `<style>`.
+  The dot-grid and slant textures ride the same stylesheet as `.bg-dots` /
+  `.bg-slants`. The platform's `/changelog` pages embed `paintCss()` too.
+- **Pins re-assert every color** (`darkModeCss()`): each value repeated with
+  `!important` under `@media (prefers-color-scheme: dark)` for clients that
+  honor it, and under the `[data-ogsc]`/`[data-ogsb]` attributes the web
+  Outlooks stamp on elements they recolor — rules in that scope escape their
+  color conversion (ancestor-scoped single-selector rules only; that is the
+  one shape Outlook.com's CSS support keeps).
+- **The scoped pins carry the real weapon:** a same-color
+  `box-shadow: inset 0 0 0 3000px` on every `bc-` pin, painting the authored
+  color over the gray Outlook injected. It lives only under the `data-og*`
+  scopes because an inset shadow paints over `background-image` — in any
+  other client it would erase the bar textures, but those scopes apply
+  exactly when Outlook has already stripped the textures anyway.
+- **One deliberate sacrifice:** `<body>` keeps its inline background so the
+  web Outlooks repaint _it_, stamp it with `data-ogsb`, and thereby switch on
+  every scoped pin below. The repainted body is fully covered by the pinned
+  full-width table, so the sacrifice never shows.
+
+Text colors stay inline (with `tc-` classes alongside); Outlook's text
+repairs — lightening the dim grays — read fine on the armored surfaces.
+Borders split by role: Outlook repaints border colors inline with
+`!important` too, so every structural divider is a painted 1px cell
+(`DividerCell`, full background armor) and only the card outlines remain
+true borders, where the repaint reads as an intentional outline. In its dark
+mode the design trades its textures and the featured card's block shadow for
+flat, correct surfaces. A render test walks every issue and fails on any
+inline background outside `<body>`, any `bgcolor` without its class, and any
+class without its paint rule and pin.
+
+None of this survives being sent from an Outlook composer — see
+[Sending](#sending). The defenses assume the authored document reaches
+recipients intact, which only `--send` guarantees.
+
+The one holdout is classic Outlook for Windows in dark mode: the Word engine
+does a full color invert with no override hook. The result stays readable
+(its whole purpose is contrast), just re-themed, and readers get a
+per-message toggle back to the sent colors.
+
+## Issues
+
+`src/issues.ts` is the content: one `ChangelogIssue` per send, versioned with
+semver because a send is a release. The version doubles as the archive URL
+segment and the export filename. A copy pass before a send touches that one
+file; the platform archive and the exported email can never disagree.
+
+## Exporting
+
+```bash
+pnpm --filter @devdogsuga/newsletter build   # the CLI consumes dist/
+pnpm devtools newsletter                     # pick issues interactively
+pnpm devtools newsletter '*' --out ~/changelog
+```
+
+The `.eml` carries `X-Unsent: 1` and no `Message-ID`, so **classic Outlook
+for Windows** opens it as an editable compose draft. New Outlook and Outlook
+on the web do not honor `X-Unsent` and open `.eml` files read-only; for those
+clients the draft has to already be in the mailbox — which is what `--push`
+does. Either way the draft is a review copy: the send happens with `--send`
+(below), because every Outlook composer rewrites what it sends.
+
+## Pushing a draft
+
+```bash
+pnpm devtools newsletter 3.0.1 --push
+```
+
+appends the issue — same MIME as the `.eml`, minus `X-Unsent` — straight into
+the Drafts folder of `devdogs@uga.edu` over IMAP, where an officer can review
+it in any Outlook signed into the club account.
+
+Review is all a draft is for. **Never send the newsletter from Outlook
+itself.** Its composers are rich-text editors with a style whitelist, and
+sending re-serializes whatever the editor kept: forensics on a received copy
+showed the head `<style>` replaced with Outlook's own, every
+`background-image` and `bgcolor` stripped, and most class attributes dropped —
+the entire dark-mode defense, gone in transit, leaving recipients' dark-mode
+Outlooks free to repaint every background. (Classic Outlook mangles
+differently, into Word HTML, with the same result.)
+
+## Sending
+
+```bash
+pnpm devtools newsletter 3.0.1 --send --to listserv@listserv.uga.edu
+```
+
+submits the issue over SMTP as the club mailbox, byte-for-byte as authored —
+no composer touches it, so recipients get the document with its stylesheet,
+pins and gradient underlays intact. `--to` is required and comma-separated;
+there is deliberately no interactive path to a send.
+
+The first `--push` or `--send` opens a browser; sign in as the mailbox and
+the CLI catches the redirect itself on a loopback port. (If no local port
+would bind, it falls back to printing the URL and asking for the
+`https://localhost` address the browser lands on.) The refresh token is
+stored at `~/.config/devdogsuga/newsletter-mailbox.json` (mode 600 — it opens
+the club mailbox, treat it like a password) and every later run is silent.
+`--mailbox` overrides the account.
+
+Why IMAP/SMTP and not Microsoft Graph: UGA's tenant blocks user consent for
+every Graph mail scope, but Microsoft's default consent policy allowlists a
+handful of mail clients by application ID for the legacy IMAP and SMTP
+scopes. The sign-in therefore presents Thunderbird's public client ID — the
+same grant Thunderbird itself would hold, and a documented convention in
+open-source mail tooling (mbsync, OfflineIMAP, DavMail) — but it is
+Microsoft's allowlist, and this stops working the day they prune it. The
+durable fix is an EITS-approved app registration with delegated
+`Mail.ReadWrite` and `Mail.Send`; if that ever lands, swap the IMAP APPEND
+and SMTP submission for their Graph calls and delete the borrowed ID.
+
+## Regenerating the lockup
+
+`src/generated/lockup.ts` embeds `apps/platform/public/brand/devdogs-logo-dark.svg`
+(the composed mascot + wordmark, which `@devdogsuga/og` does not export). If
+that artwork changes, re-run from the repo root:
+
+```bash
+node --input-type=module -e '
+import { readFileSync, writeFileSync } from "node:fs";
+const svg = readFileSync("apps/platform/public/brand/devdogs-logo-dark.svg", "utf8").trim();
+const [, w, h] = svg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
+writeFileSync("packages/newsletter/src/generated/lockup.ts", [
+  "// @generated from apps/platform/public/brand/devdogs-logo-dark.svg — the",
+  "// mascot + wordmark lockup drawn for dark grounds. Regenerate by re-running",
+  "// the base64 line in packages/newsletter/README.md if the artwork changes.",
+  "",
+  "/** The artwork's own viewBox units, carried so display sizes derive an aspect ratio instead of hard-coding one. */",
+  "export const DEVDOGS_LOCKUP_ON_DARK = {",
+  `  src: "data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}",`,
+  `  width: ${w},`,
+  `  height: ${h},`,
+  "} as const;",
+  "",
+].join("\n"));
+'
+```
+
+[API reference](https://devdogsuga.org/docs/toolkit/reference/api/newsletter)

package/dist/assets.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The two brand marks the newsletter draws: the DevDogs mascot+wordmark
+ * lockup (embedded here — brand carries the wordmark and mascot separately,
+ * and the masthead wants the composed artwork) and the GDG-on-Campus · UGA
+ * cobrand, taken from brand so the two stay one file.
+ *
+ * Display sizes are derived from each artwork's own units against a shared
+ * 33px masthead height, so a re-exported SVG with a new viewBox cannot
+ * silently stretch.
+ */
+import { GDGC_UGA, type Asset } from "@devdogsuga/brand";
+import { type SocialIconName } from "./icons.js";
+import type { FontStacks } from "./theme.js";
+export { GDGC_UGA };
+export declare const DEVDOGS_LOCKUP: Asset;
+/** On-screen `<img>` dimensions, shared by the page, the email and the PNG rasteriser (which renders at 2x these). */
+export declare const MARK_SIZES: {
+    readonly devdogsLockup: {
+        readonly width: number;
+        readonly height: 33;
+    };
+    readonly gdgcLockup: {
+        readonly width: number;
+        readonly height: 33;
+    };
+    readonly socialIcon: {
+        readonly width: 17;
+        readonly height: 17;
+    };
+};
+/** Where the components find their three `<img>` sources. */
+export interface NewsletterAssets {
+    /** `<img>` src for the DevDogs mascot+wordmark lockup (dark ground). */
+    devdogsLockup: string;
+    /** `<img>` src for the GDG On Campus · UGA cobrand lockup (dark ground). */
+    gdgcLockup: string;
+    /** `<img>` src for a footer social icon. */
+    socialIcon: (name: SocialIconName) => string;
+}
+/**
+ * Everything a render target decides: the page passes `next/font` CSS
+ * variables and SVG sources, the exporter passes literal font stacks and
+ * `cid:` references to embedded PNGs.
+ */
+export interface RenderContext {
+    fonts: FontStacks;
+    assets: NewsletterAssets;
+}
+/**
+ * The marks as self-contained data URIs — right for anything with a real
+ * browser behind it (the platform pages, an .html preview on disk), and
+ * exactly wrong for a send: Gmail and Outlook strip SVG in any form.
+ */
+export declare const DATA_URI_ASSETS: NewsletterAssets;

package/dist/assets.js

@@ -0,0 +1,42 @@
+/**
+ * The two brand marks the newsletter draws: the DevDogs mascot+wordmark
+ * lockup (embedded here — brand carries the wordmark and mascot separately,
+ * and the masthead wants the composed artwork) and the GDG-on-Campus · UGA
+ * cobrand, taken from brand so the two stay one file.
+ *
+ * Display sizes are derived from each artwork's own units against a shared
+ * 33px masthead height, so a re-exported SVG with a new viewBox cannot
+ * silently stretch.
+ */
+import { GDGC_UGA } from "@devdogsuga/brand";
+import { DEVDOGS_LOCKUP_ON_DARK } from "./generated/lockup.js";
+import { socialIconDataUri } from "./icons.js";
+export { GDGC_UGA };
+export const DEVDOGS_LOCKUP = DEVDOGS_LOCKUP_ON_DARK;
+/** The masthead/footer line height every mark is scaled to. */
+const MARK_HEIGHT = 33;
+function displayWidth(asset) {
+    return Math.round((MARK_HEIGHT * asset.width) / asset.height);
+}
+/** On-screen `<img>` dimensions, shared by the page, the email and the PNG rasteriser (which renders at 2x these). */
+export const MARK_SIZES = {
+    devdogsLockup: {
+        width: displayWidth(DEVDOGS_LOCKUP),
+        height: MARK_HEIGHT,
+    },
+    gdgcLockup: {
+        width: displayWidth(GDGC_UGA),
+        height: MARK_HEIGHT,
+    },
+    socialIcon: { width: 17, height: 17 },
+};
+/**
+ * The marks as self-contained data URIs — right for anything with a real
+ * browser behind it (the platform pages, an .html preview on disk), and
+ * exactly wrong for a send: Gmail and Outlook strip SVG in any form.
+ */
+export const DATA_URI_ASSETS = {
+    devdogsLockup: DEVDOGS_LOCKUP.src,
+    gdgcLockup: GDGC_UGA.src,
+    socialIcon: socialIconDataUri,
+};

package/dist/components.d.ts

@@ -0,0 +1,21 @@
+import { type RenderContext } from "./assets.js";
+import type { ChangelogIssue } from "./issues.js";
+/**
+ * The complete issue, from the terminal title bar to the footer lockups —
+ * everything inside (and including) the 600px shell.
+ */
+export declare function ChangelogEmail({ issue, ctx, }: {
+    issue: ChangelogIssue;
+    ctx: RenderContext;
+}): import("react").JSX.Element;
+/**
+ * The full mail document around `ChangelogEmail`: head metas, the Google Fonts
+ * link (honored by Apple/iOS Mail, ignored by Gmail and Outlook, which fall
+ * down the literal stacks), the hidden inbox-preview line, and the centered
+ * canvas. Only the exporter renders this; the platform pages already have a
+ * document of their own.
+ */
+export declare function ChangelogDocument({ issue, ctx, }: {
+    issue: ChangelogIssue;
+    ctx: RenderContext;
+}): import("react").JSX.Element;

package/dist/components.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MARK_SIZES } from "./assets.js";
+import { bc, brc, darkModeCss, DOT_GRID_CLASS, paintCss, SLANTS_CLASS, tc, } from "./darkmode.js";
+import { blockShadow, chipColors, font, HEADING_TINTS, KIND, PALETTE, SITE, SOCIAL_LINKS, solidBg, FONTS_HREF, UGA, } from "./theme.js";
+const WIDTH = 600;
+/** Every layout table shares these; email clients honor the attributes where they ignore the CSS. */
+const TABLE_RESET = {
+    role: "presentation",
+    cellPadding: 0,
+    cellSpacing: 0,
+    border: 0,
+};
+/**
+ * React 19's types dropped the legacy `bgcolor` from `<td>` (it survives on
+ * `<table>`). Classic Outlook still reads the attribute where it ignores the
+ * CSS, so it arrives through a spread the checker cannot veto; React renders
+ * lowercase unknown attributes verbatim.
+ */
+function bgAttr(color) {
+    return { bgcolor: color };
+}
+/**
+ * A 1px divider as a painted cell, never a border: the web Outlooks' dark
+ * mode repaints border colors inline with `!important` (turning dividers
+ * near-white on the pinned dark surfaces), while a painted cell gets the
+ * full background armor. Card outlines stay true borders — their repaint
+ * reads as an intentional outline.
+ */
+function DividerCell({ vertical = false }) {
+    const size = vertical ? { width: "1px" } : { height: "1px" };
+    return (_jsx("td", { ...bgAttr(PALETTE.border), ...(vertical ? { width: 1 } : { height: 1 }), className: bc(PALETTE.border), style: { ...size, fontSize: "0px", lineHeight: 0 }, children: " " }));
+}
+/** Three title-bar dots in event-type colors, echoing terminal window controls. */
+function KindDots() {
+    return (_jsx("span", { style: { fontSize: "0px", lineHeight: 0 }, children: [KIND.interest, KIND.build, KIND.study].map((color) => (_jsx("span", { className: bc(color), style: {
+                display: "inline-block",
+                width: "11px",
+                height: "11px",
+                borderRadius: "50%",
+                marginLeft: "6px",
+            } }, color))) }));
+}
+/** The site's event chip: a tinted pill with a faint accent border and lightened accent text, flattened to hex. */
+function Chip({ label, color, ground = PALETTE.card, fonts, }) {
+    const colors = chipColors(color, ground);
+    return (_jsx("span", { className: `${tc(colors.text)} ${bc(colors.fill)} ${brc(colors.border)}`, style: {
+            display: "inline-block",
+            border: `1px solid ${colors.border}`,
+            color: colors.text,
+            ...font(700, 11, 1, fonts.sans),
+            letterSpacing: "0.4px",
+            textTransform: "uppercase",
+            padding: "5px 10px",
+            borderRadius: "20px",
+        }, children: label }));
+}
+/**
+ * Outlook's Word engine does not reliably apply padding, borders, or
+ * backgrounds to anchors. All button geometry lives on a table cell; the
+ * anchor is responsible only for the label.
+ */
+function CtaButton({ label, url, color, ground, fonts, compact = false, }) {
+    const fill = ground ?? color;
+    return (_jsx("table", { ...TABLE_RESET, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { align: "center", valign: "middle", ...bgAttr(fill), className: `${bc(fill)} ${brc(color)}`, style: {
+                        border: `1px solid ${color}`,
+                        borderRadius: "8px",
+                        padding: compact ? "9px 13px" : "14px 26px",
+                        msoPaddingAlt: "0",
+                        whiteSpace: "nowrap",
+                    }, children: _jsxs("a", { href: url, className: tc(PALETTE.ink), style: {
+                            display: "block",
+                            ...font(compact ? 700 : 800, compact ? 12 : 15, 1, fonts.sans),
+                            color: PALETTE.ink,
+                            textDecoration: "none",
+                            msoLineHeightRule: "exactly",
+                        }, children: [label, " ", "\u25B8"] }) }) }) }) }));
+}
+/**
+ * An upcoming-event row, drawn the way the site's schedule list draws one: a
+ * stacked weekday / day-number date column, a chip pill, a display-face
+ * title, and the time + room in quiet sans.
+ */
+function EventRow({ event, ctx, }) {
+    const { fonts } = ctx;
+    const [month, day] = event.date.split(" ");
+    return (_jsx("table", { ...TABLE_RESET, width: "100%", bgcolor: PALETTE.card, className: `${bc(PALETTE.card)} ${brc(PALETTE.border)}`, style: {
+            border: `1px solid ${PALETTE.border}`,
+            borderRadius: "10px",
+            margin: "0 0 12px",
+        }, children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsxs("td", { width: 66, align: "center", valign: "middle", style: {
+                            padding: "16px 2px 16px 8px",
+                        }, children: [_jsx("div", { className: tc(PALETTE.mute), style: {
+                                    ...font(800, 10, 1, fonts.display),
+                                    letterSpacing: "2px",
+                                    color: PALETTE.mute,
+                                    textTransform: "uppercase",
+                                }, children: event.dow }), _jsx("div", { className: tc(PALETTE.ink), style: {
+                                    ...font(800, 28, 1.1, fonts.display),
+                                    color: PALETTE.ink,
+                                    fontVariantNumeric: "tabular-nums",
+                                    padding: "3px 0 2px",
+                                }, children: day }), _jsx("div", { className: tc(PALETTE.dim), style: {
+                                    ...font(700, 10, 1, fonts.display),
+                                    letterSpacing: "2px",
+                                    color: PALETTE.dim,
+                                    textTransform: "uppercase",
+                                }, children: month })] }), _jsx(DividerCell, { vertical: true }), _jsx("td", { valign: "middle", style: { padding: "15px 17px" }, children: _jsx("table", { ...TABLE_RESET, width: "100%", children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsxs("td", { valign: "middle", children: [_jsx(Chip, { label: event.chip, color: event.color, fonts: fonts }), _jsx("div", { className: tc(PALETTE.ink), style: {
+                                                        ...font(800, 18, 1.25, fonts.display),
+                                                        color: PALETTE.ink,
+                                                        letterSpacing: "-0.2px",
+                                                        padding: "9px 0 5px",
+                                                    }, children: event.title }), _jsxs("div", { className: tc(PALETTE.mute), style: {
+                                                        ...font(400, 13, 1.5, fonts.sans),
+                                                        color: PALETTE.mute,
+                                                    }, children: [event.time, " ", _jsx("span", { className: tc(PALETTE.dim), style: { color: PALETTE.dim }, children: "\u00B7" }), " ", event.loc] }), event.blurb ? (_jsx("div", { className: tc(PALETTE.dim), style: {
+                                                        ...font(400, 13, 1.55, fonts.sans),
+                                                        color: PALETTE.dim,
+                                                        paddingTop: "7px",
+                                                    }, children: event.blurb })) : null] }), event.rsvp ? (_jsx("td", { valign: "middle", align: "right", width: 74, style: { paddingLeft: "10px" }, children: _jsx(CtaButton, { label: "RSVP", url: event.rsvp, color: event.color, ground: PALETTE.card, fonts: fonts, compact: true }) })) : null] }) }) }) })] }) }) }));
+}
+/** A `## heading` in the terminal voice. */
+function SectionHeading({ children, color, fonts, paddingBottom = 14, }) {
+    return (_jsxs("div", { className: tc(color), style: {
+            ...font(700, 13, 1, fonts.mono),
+            color,
+            padding: `0 0 ${paddingBottom}px`,
+        }, children: ["## ", children] }));
+}
+/** One quiet bottom card — the shared frame under "new here?" and "sign-off". */
+function QuietCard({ children }) {
+    return (_jsx("table", { ...TABLE_RESET, width: "100%", bgcolor: PALETTE.card, className: `${bc(PALETTE.card)} ${brc(PALETTE.border)}`, style: {
+            border: `1px solid ${PALETTE.border}`,
+            borderRadius: "10px",
+        }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: { padding: "18px 20px" }, children: children }) }) }) }));
+}
+/**
+ * The complete issue, from the terminal title bar to the footer lockups —
+ * everything inside (and including) the 600px shell.
+ */
+export function ChangelogEmail({ issue, ctx, }) {
+    const { fonts, assets } = ctx;
+    const featured = issue.featured;
+    const arrowLinkStyle = {
+        color: PALETTE.ink,
+        textDecoration: "none",
+    };
+    return (_jsx("table", { ...TABLE_RESET, width: WIDTH, bgcolor: PALETTE.bg, className: `${bc(PALETTE.bg)} ${brc(PALETTE.border)}`, style: {
+            maxWidth: `${WIDTH}px`,
+            width: "100%",
+            border: `1px solid ${PALETTE.border}`,
+            borderRadius: "14px",
+            overflow: "hidden",
+        }, children: _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { ...bgAttr(PALETTE.bar), className: `${bc(PALETTE.bar)} ${DOT_GRID_CLASS}`, style: {
+                            padding: "12px 18px",
+                        }, children: _jsx("table", { ...TABLE_RESET, width: "100%", children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { width: 86, children: _jsx(KindDots, {}) }), _jsxs("td", { align: "center", className: tc(PALETTE.dim), style: {
+                                                ...font(600, 12, 1, fonts.mono),
+                                                color: PALETTE.dim,
+                                            }, children: ["devdogs -", " ", _jsx("span", { className: tc(KIND.workshop), style: { color: KIND.workshop }, children: "changelog" }), " ", "- 80\u00D724"] }), _jsx("td", { width: 86, align: "right", className: tc(PALETTE.dim), style: {
+                                                ...font(600, 12, 1, fonts.mono),
+                                                color: PALETTE.dim,
+                                            }, children: issue.sendLabel })] }) }) }) }) }), _jsx("tr", { children: _jsx(DividerCell, {}) }), _jsx("tr", { children: _jsxs("td", { style: { padding: "24px 22px 4px" }, children: [_jsx("table", { ...TABLE_RESET, width: "100%", children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { valign: "middle", children: _jsx("table", { ...TABLE_RESET, children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { valign: "middle", children: _jsx("img", { src: assets.devdogsLockup, width: MARK_SIZES.devdogsLockup.width, height: MARK_SIZES.devdogsLockup.height, alt: "DevDogs", style: { display: "block" } }) }), _jsx("td", { valign: "bottom", style: { padding: "0 0 5px 8px" }, children: _jsx("span", { className: tc(KIND.workshop), style: {
+                                                                            ...font(700, 22, 1, fonts.mono),
+                                                                            letterSpacing: "-0.4px",
+                                                                            color: KIND.workshop,
+                                                                        }, children: "Changelog_" }) })] }) }) }) }), _jsxs("td", { valign: "middle", align: "right", children: [_jsxs("div", { className: tc(UGA), style: { ...font(800, 12, 1, fonts.mono), color: UGA }, children: ["v", issue.version] }), _jsx("div", { className: tc(PALETTE.mute), style: {
+                                                            ...font(600, 12, 1, fonts.mono),
+                                                            color: PALETTE.mute,
+                                                            paddingTop: "5px",
+                                                        }, children: issue.term })] })] }) }) }), _jsxs("div", { className: tc(PALETTE.mute), style: {
+                                    ...font(400, 13, 1.6, fonts.mono),
+                                    color: PALETTE.mute,
+                                    paddingTop: "16px",
+                                }, children: [_jsx("span", { className: tc(KIND.workshop), style: { color: KIND.workshop, fontWeight: 700 }, children: "$" }), " ", _jsx("span", { className: tc(KIND.workshop), style: { color: KIND.workshop }, children: "changelog" }), " ", _jsx("span", { className: tc(PALETTE.ink), style: { color: PALETTE.ink }, children: issue.command.replace(/^changelog\s*/, "") })] }), _jsxs("div", { className: tc(PALETTE.dim), style: {
+                                    ...font(400, 13, 1.6, fonts.mono),
+                                    color: PALETTE.dim,
+                                    paddingTop: "3px",
+                                }, children: ["\u2192 mirror:", " ", _jsxs("a", { href: `${SITE}/changelog/${issue.version}`, className: tc(KIND.build), style: { color: KIND.build, textDecoration: "none" }, children: ["curl devdogsuga.org/changelog/", issue.version] })] })] }) }), _jsx("tr", { children: _jsx("td", { style: { padding: "14px 22px 0" }, children: _jsx("table", { ...TABLE_RESET, width: "100%", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { ...bgAttr(UGA), className: `${bc(UGA)} ${SLANTS_CLASS}`, height: 9, style: {
+                                            height: "9px",
+                                            borderRadius: "4px",
+                                            fontSize: "0px",
+                                            lineHeight: 0,
+                                        }, children: " " }) }) }) }) }) }), _jsx("tr", { children: _jsxs("td", { style: { padding: "20px 22px 6px" }, children: [_jsx("div", { className: tc(PALETTE.ink), style: {
+                                    ...font(800, 24, 1.25, fonts.display),
+                                    color: PALETTE.ink,
+                                    letterSpacing: "-0.3px",
+                                }, children: issue.tagline }), _jsx("div", { className: tc(PALETTE.mute), style: {
+                                    ...font(400, 15, 1.6, fonts.sans),
+                                    color: PALETTE.mute,
+                                    paddingTop: "11px",
+                                }, children: issue.intro })] }) }), _jsx("tr", { children: _jsxs("td", { style: { padding: "20px 22px 6px" }, children: [_jsx(SectionHeading, { color: featured.color, fonts: fonts, children: issue.featuredLabel }), _jsx("table", { ...TABLE_RESET, width: "100%", bgcolor: PALETTE.card2, className: `${bc(PALETTE.card2)} ${brc(featured.color)}`, style: {
+                                    border: `1px solid ${featured.color}`,
+                                    borderRadius: "10px",
+                                    ...blockShadow(featured.color),
+                                }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsxs("td", { style: { padding: "22px 22px 24px" }, children: [_jsx(Chip, { label: featured.chip, color: featured.color, ground: PALETTE.card2, fonts: fonts }), _jsx("div", { className: tc(PALETTE.ink), style: {
+                                                        ...font(700, 30, 1.1, fonts.display),
+                                                        color: PALETTE.ink,
+                                                        letterSpacing: "-0.4px",
+                                                        padding: "14px 0 8px",
+                                                    }, children: featured.title }), _jsx("table", { ...TABLE_RESET, style: { margin: "2px 0 4px" }, children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsxs("td", { className: tc(PALETTE.ink), style: {
+                                                                        ...font(700, 14, 1.5, fonts.sans),
+                                                                        color: PALETTE.ink,
+                                                                        paddingRight: "8px",
+                                                                    }, children: [featured.dow, ", ", featured.date] }), _jsx(DividerCell, { vertical: true }), _jsx("td", { className: tc(PALETTE.mute), style: {
+                                                                        ...font(400, 14, 1.5, fonts.sans),
+                                                                        color: PALETTE.mute,
+                                                                        padding: "0 8px",
+                                                                    }, children: featured.time }), _jsx(DividerCell, { vertical: true }), _jsx("td", { className: tc(PALETTE.mute), style: {
+                                                                        ...font(400, 14, 1.5, fonts.sans),
+                                                                        color: PALETTE.mute,
+                                                                        padding: "0 8px",
+                                                                    }, children: featured.loc })] }) }) }), _jsx("div", { className: tc(PALETTE.mute), style: {
+                                                        ...font(400, 15, 1.6, fonts.sans),
+                                                        color: PALETTE.mute,
+                                                        paddingTop: "10px",
+                                                    }, children: featured.blurb }), _jsx("div", { style: {
+                                                        height: "18px",
+                                                        lineHeight: "18px",
+                                                        fontSize: "0px",
+                                                    }, children: " " }), _jsx(CtaButton, { label: issue.cta, url: featured.rsvp ?? `${SITE}/events`, color: UGA, fonts: fonts })] }) }) }) })] }) }), _jsx("tr", { children: _jsxs("td", { style: { padding: "22px 22px 0" }, children: [_jsx(SectionHeading, { color: PALETTE.ink, fonts: fonts, children: "upcoming" }), issue.upcoming.map((event, index) => (_jsx(EventRow, { event: event, ctx: ctx }, `${event.date}-${index}`))), _jsx("div", { style: { padding: "2px 0 4px", textAlign: "center" }, children: _jsx("a", { href: `${SITE}/events`, className: tc(KIND.build), style: {
+                                        ...font(700, 13, 1, fonts.mono),
+                                        color: KIND.build,
+                                        textDecoration: "none",
+                                    }, children: "\u2192 full calendar & subscribe (.ics)" }) })] }) }), _jsx("tr", { children: _jsx("td", { style: { padding: "18px 22px 0" }, children: _jsxs(QuietCard, { children: [_jsx(SectionHeading, { color: HEADING_TINTS.newHere, fonts: fonts, paddingBottom: 11, children: "new here?" }), _jsx("div", { className: tc(PALETTE.mute), style: {
+                                        ...font(400, 14, 1.6, fonts.sans),
+                                        color: PALETTE.mute,
+                                        paddingBottom: "12px",
+                                    }, children: "No experience required, ever. Bring a laptop if you've got one, curiosity if you don't. Start here:" }), _jsxs("div", { className: tc(PALETTE.ink), style: { ...font(600, 14, 2, fonts.mono), color: PALETTE.ink }, children: [_jsxs("a", { href: "https://discord.gg/devdogs", className: tc(PALETTE.ink), style: arrowLinkStyle, children: [_jsx("span", { className: tc(KIND.build), style: { color: KIND.build }, children: "\u2192" }), " ", "join the Discord"] }), _jsx("br", {}), _jsxs("a", { href: `${SITE}/events`, className: tc(PALETTE.ink), style: arrowLinkStyle, children: [_jsx("span", { className: tc(KIND.workshop), style: { color: KIND.workshop }, children: "\u2192" }), " ", "add our events to your calendar"] }), _jsx("br", {}), _jsxs("a", { href: "https://github.com/devdogsuga", className: tc(PALETTE.ink), style: arrowLinkStyle, children: [_jsx("span", { className: tc(KIND.social), style: { color: KIND.social }, children: "\u2192" }), " ", "browse what members are building"] })] })] }) }) }), _jsx("tr", { children: _jsx("td", { style: { padding: "18px 22px 24px" }, children: _jsxs(QuietCard, { children: [_jsx(SectionHeading, { color: HEADING_TINTS.signoff, fonts: fonts, paddingBottom: 11, children: "sign-off" }), _jsxs("div", { className: tc(PALETTE.mute), style: {
+                                        ...font(400, 14, 1.6, fonts.sans),
+                                        color: PALETTE.mute,
+                                    }, children: [issue.signoff, _jsx("div", { className: tc(PALETTE.dim), style: {
+                                                color: PALETTE.dim,
+                                                fontSize: "13px",
+                                                textAlign: "right",
+                                                paddingTop: "4px",
+                                            }, children: "— the DevDogs officers" })] })] }) }) }), _jsx("tr", { children: _jsx(DividerCell, {}) }), _jsx("tr", { children: _jsxs("td", { align: "center", ...bgAttr(PALETTE.bar), className: `${bc(PALETTE.bar)} ${DOT_GRID_CLASS}`, style: {
+                            padding: "28px 22px 30px",
+                        }, children: [_jsx("table", { ...TABLE_RESET, style: { margin: "0 auto" }, children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { align: "center", valign: "top", style: { padding: "0 20px" }, children: _jsx("img", { src: assets.devdogsLockup, width: MARK_SIZES.devdogsLockup.width, height: MARK_SIZES.devdogsLockup.height, alt: "DevDogs", style: { display: "block" } }) }), _jsx("td", { align: "center", valign: "top", style: { padding: "7px 20px 0" }, children: _jsx("img", { src: assets.gdgcLockup, width: MARK_SIZES.gdgcLockup.width, height: MARK_SIZES.gdgcLockup.height, alt: "Google Developer Groups On Campus \u00B7 University of Georgia", style: { display: "block" } }) })] }) }) }), _jsx("table", { ...TABLE_RESET, style: { margin: "20px auto 0" }, children: _jsx("tbody", { children: _jsx("tr", { children: SOCIAL_LINKS.map((social) => (_jsx("td", { align: "center", valign: "middle", style: { padding: "0 10px", whiteSpace: "nowrap" }, children: _jsxs("a", { href: social.url, className: tc(PALETTE.ink), style: {
+                                                    ...font(600, 13, "17px", fonts.mono),
+                                                    color: PALETTE.ink,
+                                                    textDecoration: "none",
+                                                    whiteSpace: "nowrap",
+                                                }, children: [_jsx("img", { src: assets.socialIcon(social.icon), width: MARK_SIZES.socialIcon.width, height: MARK_SIZES.socialIcon.height, alt: "", style: {
+                                                            display: "inline-block",
+                                                            verticalAlign: "middle",
+                                                            border: 0,
+                                                            outline: "none",
+                                                        } }), " ", _jsx("span", { className: tc(PALETTE.ink), style: { color: PALETTE.ink }, children: social.label })] }) }, social.label))) }) }) }), _jsxs("div", { className: tc(PALETTE.dim), style: {
+                                    ...font(400, 12, 1.7, fonts.mono),
+                                    color: PALETTE.dim,
+                                    paddingTop: "16px",
+                                }, children: ["DevDogs at the University of Georgia", _jsx("br", {}), "Google Developer Group on Campus"] })] }) })] }) }));
+}
+/**
+ * The full mail document around `ChangelogEmail`: head metas, the Google Fonts
+ * link (honored by Apple/iOS Mail, ignored by Gmail and Outlook, which fall
+ * down the literal stacks), the hidden inbox-preview line, and the centered
+ * canvas. Only the exporter renders this; the platform pages already have a
+ * document of their own.
+ */
+export function ChangelogDocument({ issue, ctx, }) {
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("meta", { name: "x-apple-disable-message-reformatting" }), _jsx("meta", { name: "color-scheme", content: "light dark" }), _jsx("meta", { name: "supported-color-schemes", content: "light dark" }), _jsx("title", { children: issue.title }), _jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), _jsx("link", { href: FONTS_HREF, rel: "stylesheet" }), _jsx("style", { dangerouslySetInnerHTML: { __html: `@import url('${FONTS_HREF}');` } }), _jsx("style", { dangerouslySetInnerHTML: {
+                            __html: `${paintCss()}\n${darkModeCss()}`,
+                        } })] }), _jsxs("body", { className: bc(PALETTE.bg), ...bgAttr(PALETTE.bg), style: { margin: 0, padding: 0, ...solidBg(PALETTE.bg) }, children: [_jsx("div", { style: {
+                            display: "none",
+                            maxHeight: 0,
+                            overflow: "hidden",
+                            opacity: 0,
+                        }, children: issue.preview }), _jsx("table", { ...TABLE_RESET, width: "100%", bgcolor: PALETTE.bg, className: bc(PALETTE.bg), children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { align: "center", style: { padding: "24px 12px" }, children: _jsx(ChangelogEmail, { issue: issue, ctx: ctx }) }) }) }) })] })] }));
+}

package/dist/darkmode.d.ts

@@ -0,0 +1,45 @@
+/** Class for an element whose `color` is `color`. */
+export declare function tc(color: string): string;
+/** Class for an element whose background is `color`. */
+export declare function bc(color: string): string;
+/** Class for an element with a `color`-colored border. */
+export declare function brc(color: string): string;
+/** The slant stripe's texture class — always the UGA red. */
+export declare const SLANTS_CLASS = "bg-slants";
+/** The terminal bars' faint dot-grid texture class. */
+export declare const DOT_GRID_CLASS = "bg-dots";
+/**
+ * The base paint layer: what actually colors every `bc-` background, since no
+ * background is ever inline (see the module comment). Deliberately without
+ * `!important` so the pins in `darkModeCss()` outrank it, and with the
+ * texture rules last so their `background-image` wins the tie against the
+ * flat `bc-` rule on the same element. The platform's /changelog pages embed
+ * this too — the classes paint there exactly as they do in an inbox.
+ */
+export declare function paintCss(): string;
+/**
+ * The pinning stylesheet `ChangelogDocument` embeds. Three layers, weakest
+ * first: a `color-scheme` declaration telling well-behaved clients the email
+ * handles both schemes itself, the same pins under `prefers-color-scheme` for
+ * clients that honor the media query (Apple Mail, Outlook for Mac), and the
+ * `data-ogsc`/`data-ogsb` scoped pins for the web Outlooks, which apply their
+ * recoloring in the DOM rather than through any media query.
+ *
+ * The scoped layers are where the real fight happens. The 2026 web Outlooks
+ * compute every element's effective background from the full cascade and
+ * inject the repaired value inline with `!important` — unbeatable by any
+ * stylesheet color — so the scoped pins carry the box-shadow armor (see
+ * `rules`) that repaints the authored color on top. The color pins still
+ * matter for Outlook mobile's older transform, and the `<body>` donor in
+ * `ChangelogDocument` guarantees a stamped ancestor so the scope always
+ * matches in dark mode.
+ *
+ * The scoped rules are deliberately spartan: Outlook.com's CSS support only
+ * stretches to an attribute selector on an ancestor (`[data-ogsc] .x`), not
+ * compounded onto the element itself (`.x[data-ogsc]`), and a selector its
+ * sanitizer rejects can take the whole rule down with it — so every pin is
+ * its own single-selector rule, in the one shape the client is documented
+ * to keep. Both attributes scope every rule because which one Outlook stamps
+ * depends on whether it rewrote a color or a background up the tree.
+ */
+export declare function darkModeCss(): string;