@lupinum/nuxt-email 0.1.0

package/dist/runtime/components/markdown/render-markdown.js

@@ -0,0 +1,137 @@
+import { parseDocument } from "htmlparser2";
+import { marked, Renderer } from "marked";
+import { parseCssInJsToInlineCss } from "./parse-css-in-js-to-inline-css.js";
+import { styles } from "./styles.js";
+const SAFE_MARKDOWN_URL_SCHEMES = /* @__PURE__ */ new Set(["cid", "http", "https", "mailto", "tel"]);
+function escapeText(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function decodeAttributeEntities(value) {
+  const serialized = value.replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+  const document = parseDocument(`<a href="${serialized}"></a>`);
+  const anchor = document.children[0];
+  return anchor && "attribs" in anchor ? anchor.attribs.href ?? value : value;
+}
+function assertSafeUrl(kind, value) {
+  const decoded = decodeAttributeEntities(value);
+  const canonical = [...decoded.trim()].filter((character) => {
+    const codePoint = character.codePointAt(0);
+    return codePoint > 32 && codePoint !== 127;
+  }).join("");
+  const scheme = /^([a-z][a-z\d+.-]*):/i.exec(canonical)?.[1]?.toLowerCase();
+  if (scheme !== void 0 && !SAFE_MARKDOWN_URL_SCHEMES.has(scheme)) {
+    throw new TypeError(`EMarkdown ${kind} URL uses an unsupported scheme: ${scheme}`);
+  }
+}
+export function renderMarkdown(source, markdownCustomStyles) {
+  const finalStyles = { ...styles, ...markdownCustomStyles };
+  const styleAttribute = (style) => {
+    const inline = parseCssInJsToInlineCss(style);
+    return inline !== "" ? ` style="${inline}"` : "";
+  };
+  const renderer = new Renderer();
+  renderer.blockquote = ({ tokens }) => {
+    const text = renderer.parser.parse(tokens);
+    return `<blockquote${styleAttribute(finalStyles.blockQuote)}>
+${text}</blockquote>
+`;
+  };
+  renderer.br = () => {
+    return `<br${styleAttribute(finalStyles.br)} />`;
+  };
+  renderer.code = ({ text }) => {
+    text = `${escapeText(text.replace(/\n$/, ""))}
+`;
+    return `<pre${styleAttribute(finalStyles.codeBlock)}><code>${text}</code></pre>
+`;
+  };
+  renderer.codespan = ({ text }) => {
+    return `<code${styleAttribute(finalStyles.codeInline)}>${escapeText(text)}</code>`;
+  };
+  renderer.del = ({ tokens }) => {
+    const text = renderer.parser.parseInline(tokens);
+    return `<del${styleAttribute(finalStyles.strikethrough)}>${text}</del>`;
+  };
+  renderer.em = ({ tokens }) => {
+    const text = renderer.parser.parseInline(tokens);
+    return `<em${styleAttribute(finalStyles.italic)}>${text}</em>`;
+  };
+  renderer.heading = ({ tokens, depth }) => {
+    const text = renderer.parser.parseInline(tokens);
+    return `<h${depth}${styleAttribute(finalStyles[`h${depth}`])}>${text}</h${depth}>`;
+  };
+  renderer.hr = () => {
+    return `<hr${styleAttribute(finalStyles.hr)} />
+`;
+  };
+  renderer.image = ({ href, text, title }) => {
+    assertSafeUrl("image", href);
+    return `<img src="${href.replaceAll('"', "&quot;")}" alt="${text.replaceAll('"', "&quot;")}"${title ? ` title="${title.replaceAll('"', "&quot;")}"` : ""}${styleAttribute(finalStyles.image)}>`;
+  };
+  renderer.link = ({ href, title, tokens }) => {
+    assertSafeUrl("link", href);
+    const text = renderer.parser.parseInline(tokens);
+    return `<a href="${href.replaceAll('"', "&quot;")}" target="_blank"${title ? ` title="${title.replaceAll('"', "&quot;")}"` : ""}${styleAttribute(finalStyles.link)}>${text}</a>`;
+  };
+  renderer.listitem = ({ tokens, loose }) => {
+    const hasNestedList = tokens.some((token) => token.type === "list");
+    const text = loose || hasNestedList ? renderer.parser.parse(tokens) : renderer.parser.parseInline(tokens);
+    return `<li${styleAttribute(finalStyles.li)}>${text}</li>
+`;
+  };
+  renderer.html = () => {
+    throw new TypeError("EMarkdown does not support raw HTML");
+  };
+  renderer.list = ({ items, ordered, start }) => {
+    const type = ordered ? "ol" : "ul";
+    const startAt = ordered && start !== 1 ? ` start="${start}"` : "";
+    const inline = parseCssInJsToInlineCss(finalStyles[ordered ? "ol" : "ul"]);
+    return `<${type}${startAt}${inline !== "" ? ` style="${inline}"` : ""}>
+${items.map((item) => renderer.listitem(item)).join("")}</${type}>
+`;
+  };
+  renderer.paragraph = ({ tokens }) => {
+    const text = renderer.parser.parseInline(tokens);
+    return `<p${styleAttribute(finalStyles.p)}>${text}</p>
+`;
+  };
+  renderer.strong = ({ tokens }) => {
+    const text = renderer.parser.parseInline(tokens);
+    return `<strong${styleAttribute(finalStyles.bold)}>${text}</strong>`;
+  };
+  renderer.table = ({ header, rows }) => {
+    const styleTable = parseCssInJsToInlineCss(finalStyles.table);
+    const styleThead = parseCssInJsToInlineCss(finalStyles.thead);
+    const styleTbody = parseCssInJsToInlineCss(finalStyles.tbody);
+    const theadRow = renderer.tablerow({
+      text: header.map((cell) => renderer.tablecell(cell)).join("")
+    });
+    const tbodyRows = rows.map((row) => renderer.tablerow({
+      text: row.map((cell) => renderer.tablecell(cell)).join("")
+    })).join("");
+    const thead = `<thead${styleThead ? ` style="${styleThead}"` : ""}>
+${theadRow}</thead>`;
+    const tbody = `<tbody${styleTbody ? ` style="${styleTbody}"` : ""}>${tbodyRows}</tbody>`;
+    return `<table role="presentation"${styleTable ? ` style="${styleTable}"` : ""}>
+${thead}
+${tbody}</table>
+`;
+  };
+  renderer.tablecell = ({ tokens, align, header }) => {
+    const text = renderer.parser.parseInline(tokens);
+    const type = header ? "th" : "td";
+    const cellStyle = styleAttribute(header ? finalStyles.th : finalStyles.td);
+    const tag = align ? `<${type} align="${align}"${cellStyle}>` : `<${type}${cellStyle}>`;
+    return `${tag}${text}</${type}>
+`;
+  };
+  renderer.tablerow = ({ text }) => {
+    return `<tr${styleAttribute(finalStyles.tr)}>
+${text}</tr>
+`;
+  };
+  return marked.parse(source, {
+    renderer,
+    async: false
+  });
+}

package/dist/runtime/components/markdown/styles.d.ts

@@ -0,0 +1,30 @@
+import type { MarkdownStyle } from './parse-css-in-js-to-inline-css.js';
+export type StylesType = {
+    h1?: MarkdownStyle;
+    h2?: MarkdownStyle;
+    h3?: MarkdownStyle;
+    h4?: MarkdownStyle;
+    h5?: MarkdownStyle;
+    h6?: MarkdownStyle;
+    blockQuote?: MarkdownStyle;
+    bold?: MarkdownStyle;
+    italic?: MarkdownStyle;
+    link?: MarkdownStyle;
+    codeBlock?: MarkdownStyle;
+    codeInline?: MarkdownStyle;
+    p?: MarkdownStyle;
+    li?: MarkdownStyle;
+    ul?: MarkdownStyle;
+    ol?: MarkdownStyle;
+    image?: MarkdownStyle;
+    br?: MarkdownStyle;
+    hr?: MarkdownStyle;
+    table?: MarkdownStyle;
+    thead?: MarkdownStyle;
+    tbody?: MarkdownStyle;
+    tr?: MarkdownStyle;
+    th?: MarkdownStyle;
+    td?: MarkdownStyle;
+    strikethrough?: MarkdownStyle;
+};
+export declare const styles: StylesType;

package/dist/runtime/components/markdown/styles.js

@@ -0,0 +1,91 @@
+const emptyStyle = {};
+const baseHeaderStyles = {
+  fontWeight: "500",
+  paddingTop: 20
+};
+const h1 = {
+  ...baseHeaderStyles,
+  fontSize: "2.5rem"
+};
+const h2 = {
+  ...baseHeaderStyles,
+  fontSize: "2rem"
+};
+const h3 = {
+  ...baseHeaderStyles,
+  fontSize: "1.75rem"
+};
+const h4 = {
+  ...baseHeaderStyles,
+  fontSize: "1.5rem"
+};
+const h5 = {
+  ...baseHeaderStyles,
+  fontSize: "1.25rem"
+};
+const h6 = {
+  ...baseHeaderStyles,
+  fontSize: "1rem"
+};
+const bold = {
+  fontWeight: "bold"
+};
+const italic = {
+  fontStyle: "italic"
+};
+const blockQuote = {
+  background: "#f9f9f9",
+  borderLeft: "10px solid #ccc",
+  margin: "1.5em 10px",
+  padding: "1em 10px"
+};
+const codeInline = {
+  color: "#212529",
+  fontSize: "87.5%",
+  display: "inline",
+  background: " #f8f8f8",
+  fontFamily: "SFMono-Regular,Menlo,Monaco,Consolas,monospace"
+};
+const codeBlock = {
+  ...codeInline,
+  display: "block",
+  paddingTop: 10,
+  paddingRight: 10,
+  paddingLeft: 10,
+  paddingBottom: 1,
+  marginBottom: 20,
+  background: " #f8f8f8"
+};
+const link = {
+  color: "#007bff",
+  textDecoration: "underline",
+  backgroundColor: "transparent"
+};
+export const styles = {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  blockQuote,
+  bold,
+  italic,
+  link,
+  codeBlock: { ...codeBlock, wordWrap: "break-word" },
+  codeInline: { ...codeInline, wordWrap: "break-word" },
+  p: emptyStyle,
+  li: emptyStyle,
+  ul: emptyStyle,
+  ol: emptyStyle,
+  image: emptyStyle,
+  br: emptyStyle,
+  hr: emptyStyle,
+  table: emptyStyle,
+  thead: emptyStyle,
+  tbody: emptyStyle,
+  th: emptyStyle,
+  td: emptyStyle,
+  tr: emptyStyle,
+  strikethrough: emptyStyle
+};

package/dist/runtime/components/presentation-table.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The presentation-table primitives (ERow, ESection, EContainer) hard-code
+ * border, cellpadding, cellspacing, and role to keep the email-client-safe
+ * layout invariant. React Email lets callers override them (props spread after
+ * the defaults); nuxt-email throws instead of silently discarding the override.
+ */
+export declare function assertFixedPresentationTable(componentName: string, attributes: Readonly<Record<string, unknown>>): void;

package/dist/runtime/components/presentation-table.js

@@ -0,0 +1,11 @@
+const FIXED_PRESENTATION_TABLE_ATTRIBUTES = /* @__PURE__ */ new Set(["border", "cellpadding", "cellspacing", "role"]);
+export function assertFixedPresentationTable(componentName, attributes) {
+  const overrides = Object.keys(attributes).filter(
+    (name) => FIXED_PRESENTATION_TABLE_ATTRIBUTES.has(name.toLowerCase())
+  );
+  if (overrides.length > 0) {
+    throw new TypeError(
+      `${componentName} does not allow overriding fixed presentation-table attribute${overrides.length === 1 ? "" : "s"}: ${overrides.join(", ")}; border, cellpadding, cellspacing, and role are fixed to preserve the email-client-safe table layout`
+    );
+  }
+}

package/dist/runtime/components/style.d.ts

@@ -0,0 +1,5 @@
+import type { StyleValue } from 'vue';
+export type EmailStyle = Record<string, string | number | undefined>;
+export declare function isEmailStyle(style: unknown): style is EmailStyle;
+export declare function normalizeEmailStyle(style: unknown): EmailStyle | undefined;
+export declare function mergeEmailStyles(defaults: EmailStyle, style: unknown): StyleValue;

package/dist/runtime/components/style.js

@@ -0,0 +1,32 @@
+import { camelize, normalizeStyle } from "vue";
+export function isEmailStyle(style) {
+  return typeof style === "object" && style !== null && !Array.isArray(style);
+}
+export function normalizeEmailStyle(style) {
+  if (style === void 0 || style === null) {
+    return void 0;
+  }
+  const normalized = normalizeStyle([style]);
+  if (!isEmailStyle(normalized)) {
+    return void 0;
+  }
+  const emailStyle = {};
+  for (const [property, value] of Object.entries(normalized)) {
+    if (value !== void 0) {
+      emailStyle[property.startsWith("--") ? property : camelize(property)] = value;
+    }
+  }
+  return emailStyle;
+}
+export function mergeEmailStyles(defaults, style) {
+  if (isEmailStyle(style)) {
+    return { ...defaults, ...style };
+  }
+  if (Array.isArray(style)) {
+    return [defaults, ...style];
+  }
+  if (typeof style === "string") {
+    return [defaults, style];
+  }
+  return defaults;
+}

package/dist/runtime/components/table-padding.d.ts

@@ -0,0 +1,6 @@
+import type { EmailStyle } from './style.js';
+export interface SplitTableStyle {
+    tableStyle: EmailStyle;
+    cellStyle: EmailStyle;
+}
+export declare function splitTablePadding(style: unknown): SplitTableStyle;

package/dist/runtime/components/table-padding.js

@@ -0,0 +1,20 @@
+import { normalizeEmailStyle } from "./style.js";
+const CELL_PADDING_PROPERTIES = /* @__PURE__ */ new Set([
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft"
+]);
+export function splitTablePadding(style) {
+  const tableStyle = {};
+  const cellStyle = {};
+  for (const [property, value] of Object.entries(normalizeEmailStyle(style) ?? {})) {
+    if (CELL_PADDING_PROPERTIES.has(property)) {
+      cellStyle[property] = value;
+    } else {
+      tableStyle[property] = value;
+    }
+  }
+  return { tableStyle, cellStyle };
+}

package/dist/runtime/define-email.d.ts

@@ -0,0 +1,2 @@
+export { defineEmail, DefineEmailOutsideRenderError, DuplicateEmailDefinitionError, } from './render/define-email.js';
+export type { DefineEmailOptions } from './render/define-email.js';

package/dist/runtime/define-email.js

@@ -0,0 +1,5 @@
+export {
+  defineEmail,
+  DefineEmailOutsideRenderError,
+  DuplicateEmailDefinitionError
+} from "./render/define-email.js";

package/dist/runtime/dev-preview/page-script.d.ts

@@ -0,0 +1 @@
+export declare const PREVIEW_PAGE_CLIENT = "\n    (function () {\n      'use strict'\n\n      var state = {\n        activeView: 'preview',\n        failed: false,\n        html: '',\n        pendingRefresh: false,\n        text: '',\n        selectedName: '',\n        signature: '',\n        revision: 0,\n        refreshing: false,\n        viewport: '600'\n      }\n      var elements = {\n        copy: document.getElementById('copy-button'),\n        empty: document.getElementById('empty'),\n        error: document.getElementById('error'),\n        fixtureNote: document.getElementById('fixture-note'),\n        html: document.getElementById('panel-html'),\n        iframe: document.getElementById('panel-preview'),\n        open: document.getElementById('open-link'),\n        previewControls: document.getElementById('preview-controls'),\n        select: document.getElementById('template-select'),\n        sizeBadge: document.getElementById('size-badge'),\n        sizeValue: document.getElementById('size-value'),\n        status: document.getElementById('status'),\n        statusText: document.getElementById('status-text'),\n        subject: document.getElementById('subject'),\n        subjectValue: document.getElementById('subject-value'),\n        tabs: Array.from(document.querySelectorAll('[role=\"tab\"]')),\n        text: document.getElementById('panel-text'),\n        title: document.getElementById('viewer-title'),\n        viewportButtons: Array.from(document.querySelectorAll('.viewport-toggle .segment'))\n      }\n      var previewRoot = window.location.pathname\n      while (previewRoot.endsWith('/')) {\n        previewRoot = previewRoot.slice(0, -1)\n      }\n\n      function previewUrl(path) {\n        return previewRoot + path\n      }\n\n      function setStatus(message, statusState) {\n        if (elements.status.dataset.state === statusState && elements.statusText.textContent === message) {\n          return\n        }\n        elements.status.dataset.state = statusState\n        elements.statusText.textContent = message\n      }\n\n      function rawRenderUrl(name) {\n        var query = new URLSearchParams({ name: name, revision: String(state.revision) })\n        return previewUrl('/render?' + query.toString())\n      }\n\n      function jsonRenderUrl(name) {\n        var query = new URLSearchParams({ name: name, format: 'json' })\n        return previewUrl('/render?' + query.toString())\n      }\n\n      function updatePreviewFrame() {\n        if (!state.selectedName || !state.html || state.failed) {\n          return\n        }\n        var next = rawRenderUrl(state.selectedName)\n        if (elements.iframe.getAttribute('src') !== next) {\n          elements.iframe.src = next\n        }\n      }\n\n      function applyViewport(width) {\n        state.viewport = width\n        elements.iframe.dataset.width = width\n        elements.viewportButtons.forEach(function (button) {\n          button.setAttribute('aria-pressed', String(button.dataset.width === width))\n        })\n      }\n\n      function updateSubject(subject) {\n        var hasSubject = typeof subject === 'string' && subject.length > 0\n        elements.subject.dataset.state = hasSubject ? 'set' : 'none'\n        elements.subjectValue.textContent = hasSubject ? subject : 'No subject defined'\n        elements.subjectValue.title = hasSubject ? subject : ''\n      }\n\n      function formatKilobytes(bytes) {\n        if (bytes < 1024) {\n          return bytes + ' B'\n        }\n        return (bytes / 1024).toFixed(bytes < 102400 ? 1 : 0) + ' KB'\n      }\n\n      function updateSize(bytes) {\n        if (typeof bytes !== 'number' || !Number.isFinite(bytes)) {\n          elements.sizeBadge.hidden = true\n          return\n        }\n        elements.sizeBadge.hidden = false\n        var level = bytes > 102400 ? 'over' : bytes >= 81920 ? 'warn' : 'ok'\n        elements.sizeBadge.dataset.level = level\n        var suffix = level === 'over'\n          ? ' \u00B7 Gmail will clip'\n          : level === 'warn' ? ' \u00B7 near Gmail limit' : ''\n        elements.sizeValue.textContent = formatKilobytes(bytes) + suffix\n        elements.sizeBadge.title = bytes.toLocaleString() + ' bytes (UTF-8). Gmail clips messages larger than 102,400 bytes; warnings begin at 81,920 bytes.'\n      }\n\n      async function fetchJson(url) {\n        var response = await fetch(url, { cache: 'no-store' })\n        var payload = await response.json()\n        if (!response.ok) {\n          var error = new Error(payload.statusMessage || payload.message || 'Preview request failed')\n          error.details = JSON.stringify(payload.data || payload, null, 2)\n          throw error\n        }\n        return payload\n      }\n\n      async function writeClipboard(value) {\n        if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {\n          try {\n            await navigator.clipboard.writeText(value)\n            return\n          }\n          catch {\n            // LAN preview URLs are not secure contexts. Fall through to the\n            // selection-based browser API so copying still works on dev Wi-Fi.\n          }\n        }\n\n        var textarea = document.createElement('textarea')\n        textarea.value = value\n        textarea.setAttribute('readonly', '')\n        textarea.style.position = 'fixed'\n        textarea.style.opacity = '0'\n        document.body.appendChild(textarea)\n        textarea.select()\n        textarea.setSelectionRange(0, value.length)\n        var copied = document.execCommand('copy')\n        textarea.remove()\n        if (!copied) {\n          throw new Error('Clipboard unavailable')\n        }\n      }\n\n      function updateTemplateOptions(templates) {\n        var previousName = state.selectedName\n        var fragment = document.createDocumentFragment()\n        templates.forEach(function (template) {\n          var option = document.createElement('option')\n          option.value = template.name\n          option.disabled = !template.hasFixture\n          option.textContent = template.hasFixture ? template.name : template.name + ' \u2014 no fixture'\n          fragment.appendChild(option)\n        })\n        elements.select.replaceChildren(fragment)\n\n        var fixtureTemplates = templates.filter(function (template) { return template.hasFixture })\n        var previousStillExists = fixtureTemplates.some(function (template) {\n          return template.name === previousName\n        })\n        state.selectedName = previousStillExists\n          ? previousName\n          : (fixtureTemplates[0] ? fixtureTemplates[0].name : '')\n\n        elements.select.disabled = fixtureTemplates.length === 0\n        if (state.selectedName) {\n          elements.select.value = state.selectedName\n          elements.fixtureNote.textContent = 'Using ' + state.selectedName + '.fixtures.ts'\n        }\n        else {\n          elements.fixtureNote.textContent = templates.length === 0\n            ? 'Add a Vue SFC under app/emails to begin.'\n            : 'Add a colocated .fixtures.ts file to enable preview.'\n        }\n      }\n\n      function updateActions() {\n        var hasOutput = Boolean(state.selectedName && state.html && !state.failed)\n        elements.copy.disabled = !hasOutput\n        elements.copy.textContent = state.activeView === 'text' ? 'Copy text' : 'Copy HTML'\n        elements.open.setAttribute('aria-disabled', hasOutput ? 'false' : 'true')\n        elements.open.tabIndex = hasOutput ? 0 : -1\n        if (hasOutput) {\n          elements.open.href = rawRenderUrl(state.selectedName)\n        }\n        else {\n          elements.open.removeAttribute('href')\n        }\n      }\n\n      function showView(view) {\n        state.activeView = view\n        elements.tabs.forEach(function (tab) {\n          var selected = tab.dataset.view === view\n          tab.setAttribute('aria-selected', String(selected))\n          tab.tabIndex = selected ? 0 : -1\n        })\n        elements.iframe.hidden = view !== 'preview'\n        elements.html.hidden = view !== 'html'\n        elements.text.hidden = view !== 'text'\n        elements.previewControls.hidden = view !== 'preview'\n        updateActions()\n      }\n\n      function showError(error) {\n        var message = error.message || String(error)\n        elements.error.textContent = error.details ? message + '\\n\\n' + error.details : (error.stack || message)\n        elements.error.hidden = false\n        elements.empty.hidden = true\n        state.failed = true\n        state.html = ''\n        state.text = ''\n        state.signature = ''\n        elements.iframe.hidden = true\n        elements.iframe.removeAttribute('src')\n        elements.html.hidden = true\n        elements.html.textContent = ''\n        elements.text.hidden = true\n        elements.text.textContent = ''\n        updateActions()\n        setStatus('Render failed', 'error')\n      }\n\n      function clearError() {\n        elements.error.textContent = ''\n        elements.error.hidden = true\n        state.failed = false\n      }\n\n      async function refresh(announceActivity) {\n        if (state.refreshing) {\n          if (announceActivity) {\n            state.pendingRefresh = true\n            setStatus('Refreshing\u2026', 'loading')\n          }\n          return\n        }\n        state.refreshing = true\n        if (announceActivity) {\n          setStatus('Refreshing\u2026', 'loading')\n        }\n\n        try {\n          var list = await fetchJson(previewUrl('/api/templates'))\n          var previousName = state.selectedName\n          updateTemplateOptions(list.templates)\n          if (previousName !== state.selectedName) {\n            state.signature = ''\n          }\n\n          if (!state.selectedName) {\n            state.html = ''\n            state.text = ''\n            elements.title.textContent = 'No fixture-backed templates'\n            elements.empty.hidden = false\n            updateSubject(undefined)\n            elements.subjectValue.textContent = 'No template selected'\n            updateSize(undefined)\n            clearError()\n            updateActions()\n            setStatus('Waiting for fixture', 'ready')\n            return\n          }\n\n          var requestedName = state.selectedName\n          var output = await fetchJson(jsonRenderUrl(requestedName))\n          if (requestedName !== state.selectedName) {\n            return\n          }\n          var nextSignature = JSON.stringify([output.name, output.html, output.text, output.subject || null])\n          var outputChanged = nextSignature !== state.signature\n          if (outputChanged) {\n            state.signature = nextSignature\n            state.html = output.html\n            state.text = output.text\n            state.revision += 1\n            elements.html.textContent = output.html\n            elements.text.textContent = output.text\n            elements.iframe.title = 'Email preview: ' + output.name\n          }\n          updateSubject(output.subject)\n          updateSize(output.bytes)\n\n          elements.title.textContent = output.name\n          elements.empty.hidden = true\n          var recoveredFromError = state.failed\n          clearError()\n          if (outputChanged) {\n            updatePreviewFrame()\n          }\n          showView(state.activeView)\n          if (announceActivity || recoveredFromError) {\n            setStatus('Up to date', 'ready')\n          }\n          else if (outputChanged) {\n            setStatus('Updated', 'ready')\n          }\n        }\n        catch (error) {\n          showError(error)\n        }\n        finally {\n          state.refreshing = false\n          if (state.pendingRefresh) {\n            state.pendingRefresh = false\n            void refresh(true)\n          }\n        }\n      }\n\n      elements.select.addEventListener('change', function () {\n        state.selectedName = elements.select.value\n        state.signature = ''\n        void refresh(true)\n      })\n\n      elements.tabs.forEach(function (tab, index) {\n        tab.addEventListener('click', function () {\n          showView(tab.dataset.view)\n        })\n        tab.addEventListener('keydown', function (event) {\n          var nextIndex = index\n          if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n            nextIndex = (index + 1) % elements.tabs.length\n          }\n          else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n            nextIndex = (index - 1 + elements.tabs.length) % elements.tabs.length\n          }\n          else if (event.key === 'Home') {\n            nextIndex = 0\n          }\n          else if (event.key === 'End') {\n            nextIndex = elements.tabs.length - 1\n          }\n          else {\n            return\n          }\n          event.preventDefault()\n          elements.tabs[nextIndex].focus()\n          showView(elements.tabs[nextIndex].dataset.view)\n        })\n      })\n\n      document.addEventListener('keydown', function (event) {\n        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n          return\n        }\n        var index = Number(event.key) - 1\n        if (index >= 0 && index < elements.tabs.length && document.activeElement !== elements.select) {\n          showView(elements.tabs[index].dataset.view)\n        }\n      })\n\n      elements.copy.addEventListener('click', async function () {\n        var value = state.activeView === 'text' ? state.text : state.html\n        try {\n          await writeClipboard(value)\n          var copiedMessage = state.activeView === 'text' ? 'Text copied' : 'HTML copied'\n          setStatus(copiedMessage, 'ready')\n          window.setTimeout(function () {\n            if (elements.statusText.textContent === copiedMessage) {\n              setStatus('Up to date', 'ready')\n            }\n          }, 1600)\n        }\n        catch (error) {\n          setStatus('Clipboard unavailable', 'error')\n        }\n      })\n\n      elements.open.addEventListener('click', function (event) {\n        if (elements.open.getAttribute('aria-disabled') === 'true') {\n          event.preventDefault()\n        }\n      })\n\n      elements.viewportButtons.forEach(function (button) {\n        button.addEventListener('click', function () {\n          applyViewport(button.dataset.width)\n        })\n      })\n\n      document.addEventListener('visibilitychange', function () {\n        if (document.visibilityState === 'visible') {\n          void refresh(false)\n        }\n      })\n\n      applyViewport(state.viewport)\n      showView('preview')\n      void refresh(true)\n      window.setInterval(function () {\n        if (document.visibilityState === 'visible') {\n          void refresh(false)\n        }\n      }, 1000)\n    })()\n";