executable-stories-formatters 0.11.3 → 0.12.0

package/dist/{index-DF16Xl5i.d.cts → index-mrT6-JSt.d.cts}

@@ -120,6 +120,15 @@ type DocEntry = {
     poster?: string;
     phase: DocPhase;
     children?: DocEntry[];
+} | {
+    kind: "html";
+    path?: string;
+    url?: string;
+    content?: string;
+    title?: string;
+    height?: number | string;
+    phase: DocPhase;
+    children?: DocEntry[];
 } | {
     kind: "custom";
     type: string;

package/dist/{index-DF16Xl5i.d.ts → index-mrT6-JSt.d.ts}

@@ -120,6 +120,15 @@ type DocEntry = {
     poster?: string;
     phase: DocPhase;
     children?: DocEntry[];
+} | {
+    kind: "html";
+    path?: string;
+    url?: string;
+    content?: string;
+    title?: string;
+    height?: number | string;
+    phase: DocPhase;
+    children?: DocEntry[];
 } | {
     kind: "custom";
     type: string;

package/dist/index.cjs

@@ -59,6 +59,7 @@ __export(src_exports, {
   adaptPlaywrightRun: () => adaptPlaywrightRun,
   adaptVitestRun: () => adaptVitestRun,
   assertValidRun: () => assertValidRun,
+  buildHtmlDocEntry: () => buildHtmlDocEntry,
   buildReview: () => buildReview,
   bundleAssets: () => bundleAssets,
   calculateFlakiness: () => calculateFlakiness,
@@ -630,6 +631,14 @@ var CucumberJsonFormatter = class {
     }
     const embeddings = [];
     for (const doc of step.docs) {
+      if (doc.kind === "html" && doc.content !== void 0) {
+        embeddings.push({
+          data: Buffer.from(doc.content, "utf8").toString("base64"),
+          mime_type: "text/html",
+          name: doc.title
+        });
+        continue;
+      }
       if (doc.kind !== "screenshot" || !doc.path.startsWith("data:")) {
         continue;
       }
@@ -809,6 +818,17 @@ ${doc.markdown}`,
         };
       case "screenshot":
         return null;
+      case "html":
+        if (doc.url !== void 0 || doc.path !== void 0) {
+          return {
+            doc_string: {
+              content: `[${doc.title ?? "Embedded HTML"}](${doc.url ?? doc.path})`,
+              content_type: "text/markdown",
+              line: 0
+            }
+          };
+        }
+        return null;
       default:
         return null;
     }
@@ -908,6 +928,17 @@ function copyDocEntry(entry) {
         phase: entry.phase,
         ...children
       };
+    case "html":
+      return {
+        kind: "html",
+        ...entry.path !== void 0 ? { path: entry.path } : {},
+        ...entry.url !== void 0 ? { url: entry.url } : {},
+        ...entry.content !== void 0 ? { content: entry.content } : {},
+        ...entry.title !== void 0 ? { title: entry.title } : {},
+        ...entry.height !== void 0 ? { height: entry.height } : {},
+        phase: entry.phase,
+        ...children
+      };
     case "custom":
       return {
         kind: "custom",
@@ -1296,7 +1327,7 @@ function scenarioHasDocs(scenario) {
 var fs2 = __toESM(require("fs"), 1);
 var path3 = __toESM(require("path"), 1);
 
-// src/formatters/html/template.ts
+// src/formatters/html/template-scripts.ts
 var JS_THEME = `
 // Theme management
 function getSystemTheme() {
@@ -2098,6 +2129,23 @@ function parseMarkdownSections(marked) {
   });
 }
 `;
+var JS_HTML_EMBED = `
+// Open srcdoc-embedded HTML (doc-html iframes) in a new tab via a blob URL
+function initHtmlEmbeds() {
+  document.querySelectorAll('.doc-html-open-srcdoc').forEach((btn) => {
+    btn.addEventListener('click', function() {
+      const container = btn.closest('.doc-html');
+      const iframe = container ? container.querySelector('iframe.doc-html-frame') : null;
+      const html = iframe ? iframe.getAttribute('srcdoc') : null;
+      if (!html) return;
+      const url = URL.createObjectURL(new Blob([html], { type: 'text/html' }));
+      window.open(url, '_blank', 'noopener');
+    });
+  });
+}
+`;
+
+// src/formatters/html/template.ts
 function generateScript(options) {
   const initCalls = [];
   if (options.includeDarkMode) {
@@ -2115,6 +2163,7 @@ function generateScript(options) {
   initCalls.push("initHashScroll();");
   initCalls.push("initToc();");
   initCalls.push("initThemePicker();");
+  initCalls.push("initHtmlEmbeds();");
   const initScript = `
 // Initialize on load
 document.addEventListener('DOMContentLoaded', () => {
@@ -2123,6 +2172,7 @@ document.addEventListener('DOMContentLoaded', () => {
 `;
   let script = options.includeDarkMode ? JS_THEME : "";
   script += JS_CORE;
+  script += JS_HTML_EMBED;
   if (options.additionalJs) {
     script += options.additionalJs;
   }
@@ -3788,6 +3838,82 @@ body {
   opacity: 0.8;
 }
 
+/* ============================================================================
+   Documentation Entries - Embedded HTML
+   ============================================================================ */
+.doc-html {
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  overflow: hidden;
+}
+
+.doc-html:last-child {
+  margin-bottom: 0;
+}
+
+.doc-html-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--muted, transparent);
+  border-bottom: 1px solid var(--border);
+}
+
+.doc-html-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.doc-html-open {
+  font-size: 0.875rem;
+  line-height: 1;
+  padding: 0.125rem 0.375rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.doc-html-open:hover {
+  color: var(--foreground);
+  border-color: var(--foreground);
+}
+
+.doc-html-frame {
+  display: block;
+  width: 100%;
+  border: 0;
+  background: #fff;
+}
+
+.doc-html-missing {
+  padding: 0.75rem 1rem;
+  border: 1px dashed var(--border);
+  background: var(--muted, transparent);
+  color: var(--muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.doc-html-missing-label {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.doc-html-missing-path {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  word-break: break-all;
+  opacity: 0.8;
+}
+
 /* ============================================================================
    Documentation Entries - Visual Check
    ============================================================================ */
@@ -14086,6 +14212,36 @@ function renderDocVideo(entry, deps) {
   ${captionHtml}
 </div>`;
 }
+function resolveHtmlSource(entry, deps) {
+  if (entry.url !== void 0) return { mode: "src", value: entry.url };
+  if (entry.content !== void 0) return { mode: "srcdoc", value: entry.content };
+  const filePath = entry.path ?? "";
+  if (/^https?:/i.test(filePath)) return { mode: "src", value: filePath };
+  const inlined = deps.readHtmlFile?.(filePath);
+  if (inlined !== void 0) return { mode: "srcdoc", value: inlined };
+  const isAbsoluteFsPath = /^(?:[/\\]|[A-Za-z]:[/\\])/.test(filePath);
+  if (deps.readHtmlFile && isAbsoluteFsPath) return { mode: "missing", value: filePath };
+  return { mode: "src", value: filePath };
+}
+function renderDocHtml(entry, deps) {
+  const source = resolveHtmlSource(entry, deps);
+  if (source.mode === "missing") {
+    return `<div class="doc-html doc-html-missing">
+  <div class="doc-html-missing-label">HTML unavailable</div>
+  <div class="doc-html-missing-path">${deps.escapeHtml(source.value)}</div>
+</div>`;
+  }
+  const heightCss = typeof entry.height === "number" ? `${entry.height}px` : entry.height ?? "400px";
+  const frame = `<iframe class="doc-html-frame" sandbox="allow-scripts" loading="lazy" style="height: ${deps.escapeHtml(heightCss)};" title="${deps.escapeHtml(entry.title ?? "Embedded HTML")}" ${source.mode}="${deps.escapeHtml(source.value)}"></iframe>`;
+  const openBtn = source.mode === "src" ? `<a class="doc-html-open" href="${deps.escapeHtml(source.value)}" target="_blank" rel="noopener noreferrer" title="Open in new tab" aria-label="Open in new tab">&#x2197;</a>` : `<button type="button" class="doc-html-open doc-html-open-srcdoc" title="Open in new tab" aria-label="Open in new tab">&#x2197;</button>`;
+  return `<div class="doc-html">
+  <div class="doc-html-header">
+    <span class="doc-html-title">${deps.escapeHtml(entry.title ?? "HTML")}</span>
+    ${openBtn}
+  </div>
+  ${frame}
+</div>`;
+}
 function renderDocCustom(entry, deps) {
   if (entry.type === "visual" && entry.data && typeof entry.data === "object") {
     const data = entry.data;
@@ -14142,6 +14298,9 @@ function renderDocEntry(entry, deps) {
     case "video":
       html = renderDocVideo(entry, deps);
       break;
+    case "html":
+      html = renderDocHtml(entry, deps);
+      break;
     case "custom":
       html = renderDocCustom(entry, deps);
       break;
@@ -14713,6 +14872,21 @@ function readScreenshotAsDataUri(filePath) {
     return void 0;
   }
 }
+var HTML_INLINE_WARN_BYTES = 1024 * 1024;
+function readHtmlFileContent(filePath) {
+  try {
+    if (!fs2.existsSync(filePath)) return void 0;
+    const buf = fs2.readFileSync(filePath);
+    if (buf.byteLength > HTML_INLINE_WARN_BYTES) {
+      console.warn(
+        `[executable-stories] Inlining large HTML file (${Math.round(buf.byteLength / 1024)} KiB) into the report: ${filePath}. Consider --asset-mode copy.`
+      );
+    }
+    return buf.toString("utf8");
+  } catch {
+    return void 0;
+  }
+}
 function normalizeOptions(options = {}) {
   return {
     title: options.title ?? "Test Results",
@@ -14720,6 +14894,7 @@ function normalizeOptions(options = {}) {
     searchable: options.searchable ?? true,
     startCollapsed: options.startCollapsed ?? false,
     embedScreenshots: options.embedScreenshots ?? true,
+    embedHtmlFiles: options.embedHtmlFiles ?? true,
     syntaxHighlighting: options.syntaxHighlighting ?? true,
     mermaidEnabled: options.mermaidEnabled ?? true,
     markdownEnabled: options.markdownEnabled ?? true,
@@ -14738,7 +14913,10 @@ function createHtmlFormatter(options = {}) {
     markdownEnabled: opts.markdownEnabled,
     mermaidEnabled: opts.mermaidEnabled,
     embedScreenshots: opts.embedScreenshots,
-    readScreenshot: (filePath) => readScreenshotAsDataUri(filePath)
+    readScreenshot: (filePath) => readScreenshotAsDataUri(filePath),
+    // When html-file inlining is off (e.g. --asset-mode copy), omit the read
+    // hook so doc-html iframes keep their src path for the asset bundler.
+    ...opts.embedHtmlFiles ? { readHtmlFile: (filePath) => readHtmlFileContent(filePath) } : {}
   };
   const renderDocs = (docs, containerClass) => {
     if (!docs || docs.length === 0) return "";
@@ -15030,6 +15208,8 @@ var JUnitFormatter = class {
       }
       case "screenshot":
         return `${indent}Screenshot: ${entry.alt ?? entry.path}`;
+      case "html":
+        return `${indent}HTML: ${entry.title ?? "Embedded HTML"} (${entry.url ?? entry.path ?? "inline"})`;
       case "custom": {
         const dataStr = JSON.stringify(entry.data, null, 2);
         const lines = [];
@@ -15481,6 +15661,25 @@ var MarkdownFormatter = class {
         lines.push(`${indent}`);
         break;
       }
+      case "html": {
+        const htmlLabel = entry.title ?? "Embedded HTML";
+        if (entry.url !== void 0 || entry.path !== void 0) {
+          lines.push(`${indent}[${htmlLabel}](${entry.url ?? entry.path})`);
+          break;
+        }
+        lines.push(`${indent}<details>`);
+        lines.push(`${indent}<summary>${htmlLabel}</summary>`);
+        lines.push(`${indent}`);
+        lines.push(`${indent}\`\`\`html`);
+        for (const line of (entry.content ?? "").split("\n")) {
+          lines.push(`${indent}${line}`);
+        }
+        lines.push(`${indent}\`\`\``);
+        lines.push(`${indent}`);
+        lines.push(`${indent}</details>`);
+        lines.push(`${indent}`);
+        break;
+      }
       case "custom":
         if (entry.type === "visual" && entry.data && typeof entry.data === "object") {
           const data = entry.data;
@@ -16724,6 +16923,8 @@ function formatDocEntry(doc) {
       return `${doc.alt ? `${escapeHtml2(doc.alt)}: ` : ""}${escapeHtml2(doc.path)}`;
     case "video":
       return `${doc.caption ? `${escapeHtml2(doc.caption)}: ` : ""}${escapeHtml2(doc.path)}`;
+    case "html":
+      return `${doc.title ? `${escapeHtml2(doc.title)}: ` : ""}${escapeHtml2(doc.url ?? doc.path ?? "(inline html)")}`;
     case "custom":
       return `${escapeHtml2(doc.type)}: ${escapeHtml2(JSON.stringify(doc.data))}`;
   }
@@ -17182,6 +17383,8 @@ function formatDocEntry2(doc) {
       return `${doc.alt ? `${doc.alt}: ` : ""}${doc.path}`;
     case "video":
       return `${doc.caption ? `${doc.caption}: ` : ""}${doc.path}`;
+    case "html":
+      return `${doc.title ? `${doc.title}: ` : ""}${doc.url ?? doc.path ?? "(inline html)"}`;
     case "custom":
       return `${doc.type}: ${JSON.stringify(doc.data)}`;
   }
@@ -17331,7 +17534,7 @@ var path5 = __toESM(require("path"), 1);
 function scanHtmlAssets(html) {
   const seen = /* @__PURE__ */ new Set();
   const patterns = [
-    /<(?:img|video)\b[^>]*?\bsrc=["']([^"']+)["']/g,
+    /<(?:img|video|iframe)\b[^>]*?\bsrc=["']([^"']+)["']/g,
     /<a\b[^>]*?\bclass=["']attachment["'][^>]*?\bhref=["']([^"']+)["']/g,
     /<a\b[^>]*?\bhref=["']([^"']+)["'][^>]*?\bclass=["']attachment["']/g
   ];
@@ -17410,7 +17613,7 @@ function bundleAssets(htmlPath, options = {}) {
 function replaceAssetRef(html, original, replacement) {
   const escaped = original.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const srcPattern = new RegExp(
-    `(<(?:img|video)\\b[^>]*?\\bsrc=["'])${escaped}(["'])`,
+    `(<(?:img|video|iframe)\\b[^>]*?\\bsrc=["'])${escaped}(["'])`,
     "g"
   );
   html = html.replace(srcPattern, `$1${replacement}$2`);
@@ -17798,6 +18001,21 @@ ${tc.errorStack}` : "");
           ])
         );
         break;
+      case "html":
+        if (entry.url !== void 0 || entry.path !== void 0) {
+          const target = entry.url ?? entry.path ?? "";
+          content.push(
+            paragraph([
+              text(entry.title ?? "Embedded HTML", strong()),
+              text(": "),
+              link(target, target)
+            ])
+          );
+          break;
+        }
+        content.push(paragraph([text(entry.title ?? "Embedded HTML", strong())]));
+        content.push(codeBlock(entry.content ?? "", "html"));
+        break;
       case "custom":
         content.push(paragraph([text(`[${entry.type}]`, strong())]));
         content.push(codeBlock(JSON.stringify(entry.data ?? null, null, 2), "json"));
@@ -19515,6 +19733,27 @@ function resolveTraceUrl(template, traceId) {
   return template.replace(/\{traceId\}/g, traceId);
 }
 
+// src/utils/doc-builders.ts
+function buildHtmlDocEntry(options) {
+  const sources = [options.path, options.url, options.content].filter(
+    (v) => v !== void 0
+  );
+  if (sources.length !== 1) {
+    throw new Error(
+      "story.html() requires exactly one of path, url, or content"
+    );
+  }
+  return {
+    kind: "html",
+    path: options.path,
+    url: options.url,
+    content: options.content,
+    title: options.title,
+    height: options.height,
+    phase: "runtime"
+  };
+}
+
 // src/notifiers/slack.ts
 function truncate(text2, maxLen) {
   if (text2.length <= maxLen) return text2;
@@ -21324,6 +21563,9 @@ var ReportGenerator = class {
         searchable: options.html?.searchable ?? true,
         startCollapsed: options.html?.startCollapsed ?? false,
         embedScreenshots: options.html?.embedScreenshots ?? true,
+        // Under "copy" asset mode local html files become hashed assets with
+        // an iframe src instead of being inlined into the report.
+        embedHtmlFiles: options.html?.embedHtmlFiles ?? (options.assetMode ?? "none") !== "copy",
         syntaxHighlighting: options.html?.syntaxHighlighting ?? true,
         mermaidEnabled: options.html?.mermaidEnabled ?? true,
         markdownEnabled: options.html?.markdownEnabled ?? true,
@@ -21499,6 +21741,7 @@ var ReportGenerator = class {
           searchable: this.options.html.searchable,
           startCollapsed: this.options.html.startCollapsed,
           embedScreenshots: this.options.html.embedScreenshots,
+          embedHtmlFiles: this.options.html.embedHtmlFiles,
           syntaxHighlighting: this.options.html.syntaxHighlighting,
           mermaidEnabled: this.options.html.mermaidEnabled,
           markdownEnabled: this.options.html.markdownEnabled,
@@ -21670,6 +21913,7 @@ function normalizePlaywrightResults(testResults, adapterOptions, canonicalizeOpt
   adaptPlaywrightRun,
   adaptVitestRun,
   assertValidRun,
+  buildHtmlDocEntry,
   buildReview,
   bundleAssets,
   calculateFlakiness,