feat: modernize email templates with Svelte 5 + Tailwind + Storybook

[niemyjski]

Summary

Modernizes the 8 Exceptionless email templates from a decade-old Foundation for Emails / Gulp / Inky / Panini / SCSS toolchain to Svelte 5 + @better-svelte-email + Tailwind CSS, with zero visual regressions, Storybook for live preview, and a comprehensive security audit.

---

What Changed

Architecture

• Replaced: Gulp + Inky + Panini + SCSS + Foundation for Emails → produces static HTML
• New: Vite + Svelte 5 SSR + @better-svelte-email/server + Tailwind CSS (inlined)
• Build output: npm run build in src/Exceptionless.EmailTemplates renders all 8 templates to src/Exceptionless.Core/Mail/Templates/*.html
• C# backend unchanged: Mailer.cs and HandlebarsDotNet rendering pipeline untouched

Security Fixes

CVE	Severity	Fix
GHSA-crpf-4hrx-3jrp	High	Svelte 5.34.7 → 5.55.9
GHSA-m56q-vw4c-c2cp	High	Svelte 5.34.7 → 5.55.9
GHSA-f7gr-6p89-r883	High	Svelte 5.34.7 → 5.55.9
GHSA-phwv-c562-gvmh	High	Svelte 5.34.7 → 5.55.9
GHSA-pr6f-5x2q-rwfp	High	Svelte 5.34.7 → 5.55.9
GHSA-rcqx-6q8c-2c42	Moderate	Svelte 5.34.7 → 5.55.9
XSS via preheader	High	{@html preheader} → {preheader} text binding

Security audit result for @better-svelte-email: SAFE TO ADOPT. Clean dependency tree (parse5, postcss, tailwindcss). SLSA provenance verified. Single-maintainer bus factor noted; versions pinned exactly.

Code Quality (Staff Engineer Review Fixes)

• Removed all @ts-nocheck from components — proper TypeScript throughout
• Typed all Snippet props: import type { Snippet } from 'svelte'
• Replaced all hardcoded hex colors with named Tailwind theme tokens (see src/theme.ts)
• Fixed parseInt calls to include radix argument
• Stripped HTML comments from build output (were leaking internal markup)
• Consolidated fragile split-table {@html} in SocialFooter into single block
• Removed compilerOptions.generate from vite.config.ts (dropped in Svelte 5)

Critical Bug Fixed

cleanHtml's whitespace collapsing would turn JSON-LD }\n} → }}, which HandlebarsDotNet parsed as a Handlebars closing token. Fix: extract <script type="application/ld+json"> blocks before whitespace collapse, restore with newlines after.

New Tooling

• Storybook 10 with stories for all 8 templates (runs at npm run storybook)
• ESLint (flat config), Prettier, svelte-check — 0 errors, 0 warnings
• src/theme.ts: centralized design tokens (primary, dark, alert, muted colors)
• Scripts: build, dev, check, lint, format, storybook, build-storybook

---

Visual Parity

All 8 templates verified pixel-perfect via Mailpit + browser screenshots (before/after).

Storybook Screenshots

Password Reset

Email Verify | renders identically to password reset layout

Event Notice — shows error detail, user info, actions

Daily Summary — stats grid, project breakdown

Organization Added

Payment Failed

---

How to Run

cd src/Exceptionless.EmailTemplates
npm ci
npm run build          # regenerate .html files
npm run storybook      # visual preview at http://localhost:6006
npm run check          # svelte-check: 0 errors
npm run lint           # eslint + prettier: 0 errors

---

Tests

All 25 mailer tests pass:

dotnet test --project tests/Exceptionless.Tests -- --filter-class Exceptionless.Tests.Mail.MailerTests
# total: 25 | failed: 0 | succeeded: 25

---

Breaking Changes

None. C# Mailer.cs and all Handlebars templates are fully backward-compatible. The compiled .html output format is identical to the old toolchain.

[niemyjski]

✅ Rendering Bug Fixes — Verified

Latest commit (b5cd6e6) fixes all rendering/formatting issues found in review:

Fixed Issues

Issue	Root Cause	Fix
All {{#if}} branches showing simultaneously	fillTokens used regex (couldn't track nesting)	Rewrote as character-by-character evaluator with depth tracking
Extra <hr> before first error field	{{#if @index}} — was always truthy with naive regex	isTruthy('0') returns false; first item correctly skips divider
"fromwhich" word concatenation	cleanHtml removed all newlines incl. text node linebreaks	Replace \n → ' ' (space) not ''
"to to continue/see" double word	Typo in template source	Fixed in organization-notice.svelte
"?Exceptionless" missing space	Same whitespace collapse issue	Fixed by cleanHtml fix + single-line in template

Screenshots (after fixes, with realistic sample data)

Event Notice — single clean message, no branch concatenation, no extra HR before first field
Password Reset — "from which" correct spacing
Organization Notice — "to continue", "to see" correct
Organization Invited — "? Exceptionless" with proper space
Daily Summary — MostFrequent + Newest lists, [REGRESSED] badge

Tests

Lint/Type Check

[github-actions]

Package	Line Rate	Branch Rate	Complexity	Health
Exceptionless.Insulation	25%	23%	203	❌
Exceptionless.Web	73%	62%	3920	➖
Exceptionless.AppHost	16%	9%	86	❌
Exceptionless.Core	69%	63%	7777	➖
Summary	68% (13474 / 19806)	61% (7083 / 11530)	11986	➖