playwright-checkpoint 0.1.0-beta.0

package/dist/teardown.cjs

@@ -0,0 +1,1509 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/teardown.ts
+var teardown_exports = {};
+__export(teardown_exports, {
+  default: () => teardown_default,
+  globalTeardown: () => globalTeardown
+});
+module.exports = __toCommonJS(teardown_exports);
+var import_node_fs = __toESM(require("fs"), 1);
+var import_node_path6 = __toESM(require("path"), 1);
+
+// src/cli/index.ts
+var import_node_path5 = __toESM(require("path"), 1);
+
+// src/report/index.ts
+var import_promises4 = __toESM(require("fs/promises"), 1);
+var import_node_path4 = __toESM(require("path"), 1);
+
+// src/report/html-reporter.ts
+var import_promises = __toESM(require("fs/promises"), 1);
+var import_node_path = __toESM(require("path"), 1);
+
+// src/report/story-utils.ts
+function groupByStory(runs) {
+  const stories = /* @__PURE__ */ new Map();
+  for (const run of runs) {
+    const existing = stories.get(run.title) ?? [];
+    existing.push(run);
+    stories.set(run.title, existing);
+  }
+  return stories;
+}
+function orderedCheckpointNames(runs) {
+  const names = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const run of runs) {
+    for (const checkpoint of run.checkpoints) {
+      if (seen.has(checkpoint.name)) {
+        continue;
+      }
+      seen.add(checkpoint.name);
+      names.push(checkpoint.name);
+    }
+  }
+  return names;
+}
+
+// src/report/html-reporter.ts
+var DEFAULT_PROJECT_ORDER = ["desktop-light", "desktop-dark", "mobile-light", "mobile-dark"];
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function slugify(value) {
+  return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "story";
+}
+function formatDateTime(isoDate) {
+  const date = new Date(isoDate);
+  if (Number.isNaN(date.getTime())) {
+    return isoDate;
+  }
+  return new Intl.DateTimeFormat("en-US", {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(date);
+}
+function projectWeight(projectName, projectOrder) {
+  const index = projectOrder.indexOf(projectName);
+  return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+}
+function formatProjectLabel(projectName) {
+  const [device, mode] = projectName.split("-");
+  if (!device || !mode) {
+    return projectName;
+  }
+  const deviceLabel = device === "desktop" ? "Desktop" : device === "mobile" ? "Mobile" : device;
+  const modeLabel = mode === "light" ? "Light" : mode === "dark" ? "Dark" : mode;
+  return `${deviceLabel} / ${modeLabel}`;
+}
+function sortByProjectAndTime(a, b, projectOrder) {
+  const byProject = projectWeight(a.project, projectOrder) - projectWeight(b.project, projectOrder);
+  if (byProject !== 0) {
+    return byProject;
+  }
+  const byProjectName = a.project.localeCompare(b.project);
+  if (byProjectName !== 0) {
+    return byProjectName;
+  }
+  return new Date(a.startedAt).getTime() - new Date(b.startedAt).getTime();
+}
+function getCollectorSummaryNumber(checkpoint, collectorName, key) {
+  const value = checkpoint.collectors[collectorName]?.summary[key];
+  return typeof value === "number" ? value : null;
+}
+function screenshotData(checkpoint) {
+  const data = checkpoint.collectors.screenshot?.data;
+  return data && typeof data === "object" ? data : null;
+}
+function highlightOverlayStyle(checkpoint) {
+  const data = screenshotData(checkpoint);
+  const bounds = data?.highlightBounds;
+  const imageSize = data?.imageSize;
+  if (!bounds || !imageSize || typeof bounds.x !== "number" || typeof bounds.y !== "number" || typeof bounds.width !== "number" || typeof bounds.height !== "number" || typeof imageSize.width !== "number" || typeof imageSize.height !== "number" || imageSize.width <= 0 || imageSize.height <= 0) {
+    return null;
+  }
+  const left = bounds.x / imageSize.width * 100;
+  const top = bounds.y / imageSize.height * 100;
+  const width = bounds.width / imageSize.width * 100;
+  const height = bounds.height / imageSize.height * 100;
+  return [
+    `left:${left.toFixed(4)}%`,
+    `top:${top.toFixed(4)}%`,
+    `width:${width.toFixed(4)}%`,
+    `height:${height.toFixed(4)}%`
+  ].join(";");
+}
+function highlightLabel(checkpoint) {
+  const selector = screenshotData(checkpoint)?.highlightSelector;
+  return typeof selector === "string" && selector.trim().length > 0 ? `Focus: ${selector.trim()}` : null;
+}
+function resolveArtifactPath(run, artifactPath) {
+  return import_node_path.default.isAbsolute(artifactPath) ? artifactPath : import_node_path.default.resolve(import_node_path.default.dirname(run.sourceManifestPath), artifactPath);
+}
+function toEncodedHref(outputDir, filePath) {
+  if (!filePath) {
+    return null;
+  }
+  const relativePath = import_node_path.default.relative(outputDir, filePath);
+  return relativePath.split(import_node_path.default.sep).map(encodeURIComponent).join("/");
+}
+function getArtifactHref(run, checkpoint, outputDir, collectorName, artifactName) {
+  const artifacts = checkpoint.collectors[collectorName]?.artifacts ?? [];
+  const artifact = artifactName ? artifacts.find((entry) => entry.name === artifactName) : artifacts[0];
+  if (!artifact?.path) {
+    return null;
+  }
+  return toEncodedHref(outputDir, resolveArtifactPath(run, artifact.path));
+}
+function renderArtifactLinks(run, checkpoint, outputDir) {
+  const links = [
+    { label: "DOM HTML", href: getArtifactHref(run, checkpoint, outputDir, "html", "html") },
+    { label: "Axe", href: getArtifactHref(run, checkpoint, outputDir, "axe", "axe") },
+    { label: "Web Vitals", href: getArtifactHref(run, checkpoint, outputDir, "web-vitals", "web-vitals") },
+    { label: "Console", href: getArtifactHref(run, checkpoint, outputDir, "console", "console-errors") },
+    { label: "Failed Requests", href: getArtifactHref(run, checkpoint, outputDir, "network", "failed-requests") }
+  ];
+  return links.map((link) => {
+    if (!link.href) {
+      return `<span class="artifact disabled">${escapeHtml(link.label)}</span>`;
+    }
+    return `<a class="artifact" href="${link.href}" target="_blank" rel="noreferrer">${escapeHtml(link.label)}</a>`;
+  }).join("");
+}
+function renderCheckpointCard(run, checkpointName, outputDir) {
+  const checkpoint = run.checkpoints.find((entry) => entry.name === checkpointName);
+  if (!checkpoint) {
+    return `
+      <article class="variant-card missing">
+        <header class="variant-card-header">
+          <div>
+            <h5>${escapeHtml(formatProjectLabel(run.project))}</h5>
+            <p>${escapeHtml(run.project)}</p>
+          </div>
+          <time>${escapeHtml(formatDateTime(run.startedAt))}</time>
+        </header>
+        <div class="empty-card">No checkpoint captured for this run.</div>
+      </article>
+    `;
+  }
+  const screenshotHref = getArtifactHref(run, checkpoint, outputDir, "screenshot", "screenshot");
+  const overlayStyle = highlightOverlayStyle(checkpoint);
+  const focus = highlightLabel(checkpoint);
+  const axeViolations = getCollectorSummaryNumber(checkpoint, "axe", "violations");
+  const consoleErrors = getCollectorSummaryNumber(checkpoint, "console", "consoleErrorCount") ?? 0;
+  const failedRequests = getCollectorSummaryNumber(checkpoint, "network", "failedRequestCount") ?? 0;
+  return `
+    <article class="variant-card">
+      <header class="variant-card-header">
+        <div>
+          <h5>${escapeHtml(formatProjectLabel(run.project))}</h5>
+          <p>${escapeHtml(run.project)}</p>
+        </div>
+        <time>${escapeHtml(formatDateTime(checkpoint.timestamp || run.startedAt))}</time>
+      </header>
+      <p class="page-meta">
+        <span>${escapeHtml(checkpoint.title || "Untitled page")}</span>
+        <span class="page-url">${escapeHtml(checkpoint.url)}</span>
+      </p>
+      ${screenshotHref ? `<a class="thumbnail-link" href="${screenshotHref}" target="_blank" rel="noreferrer">
+              <img src="${screenshotHref}" alt="${escapeHtml(`${run.project} \u2014 ${checkpoint.name}`)}" loading="lazy" />
+              ${overlayStyle ? `<span class="highlight-overlay" style="${overlayStyle}" aria-hidden="true"></span>` : ""}
+              ${focus ? `<span class="highlight-label">${escapeHtml(focus)}</span>` : ""}
+            </a>` : '<div class="empty-card">Screenshot unavailable.</div>'}
+      <div class="stats-grid">
+        <span><strong>${axeViolations ?? "n/a"}</strong><small>Axe violations</small></span>
+        <span><strong>${consoleErrors}</strong><small>Console errors</small></span>
+        <span><strong>${failedRequests}</strong><small>Failed requests</small></span>
+      </div>
+      <div class="artifact-list">${renderArtifactLinks(run, checkpoint, outputDir)}</div>
+    </article>
+  `;
+}
+function renderStorySection(title, runs, outputDir) {
+  const checkpointNames = orderedCheckpointNames(runs);
+  const environments = [...new Set(runs.map((run) => run.environment))].sort();
+  const tags = [...new Set(runs.flatMap((run) => run.tags))].sort();
+  const checkpointBlocks = checkpointNames.map(
+    (checkpointName) => `
+        <details class="accordion checkpoint-block">
+          <summary class="checkpoint-summary">
+            <span>${escapeHtml(checkpointName)}</span>
+            <span class="checkpoint-meta">${runs.length} variants</span>
+          </summary>
+          <div class="variant-grid">
+            ${runs.map((run) => renderCheckpointCard(run, checkpointName, outputDir)).join("")}
+          </div>
+        </details>
+      `
+  ).join("");
+  return `
+    <details class="accordion story-block" id="story-${slugify(title)}" open>
+      <summary class="story-summary">
+        <span class="story-title">${escapeHtml(title)}</span>
+        <span class="story-meta-chip">${runs.length} run${runs.length === 1 ? "" : "s"}</span>
+      </summary>
+      <div class="story-body">
+        <div class="story-meta-row">
+          <span><strong>Projects</strong> ${escapeHtml(runs.map((run) => run.project).join(", "))}</span>
+          <span><strong>Environments</strong> ${escapeHtml(environments.join(", ") || "n/a")}</span>
+          <span><strong>Tags</strong> ${escapeHtml(tags.join(", ") || "none")}</span>
+        </div>
+        ${checkpointBlocks || '<p class="empty-state">No checkpoints captured for this story.</p>'}
+      </div>
+    </details>
+  `;
+}
+function buildHtmlReport(runs, outputDir, config) {
+  const groupedRuns = groupByStory(runs);
+  const storyTitles = [...groupedRuns.keys()].sort((a, b) => a.localeCompare(b));
+  const projectOrder = Array.isArray(config.projectOrder) ? config.projectOrder.filter((value) => typeof value === "string") : DEFAULT_PROJECT_ORDER;
+  const generatedAt = (/* @__PURE__ */ new Date()).toISOString();
+  const reportTitle = typeof config.title === "string" && config.title.trim() ? config.title.trim() : "Playwright Checkpoint Report";
+  for (const title of storyTitles) {
+    groupedRuns.get(title)?.sort((a, b) => sortByProjectAndTime(a, b, projectOrder));
+  }
+  const navLinks = storyTitles.map((title) => `<a href="#story-${slugify(title)}">${escapeHtml(title)}</a>`).join("");
+  const storySections = storyTitles.map((title) => renderStorySection(title, groupedRuns.get(title) ?? [], outputDir)).join("");
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${escapeHtml(reportTitle)}</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #0b1020;
+      --panel: rgba(15, 23, 42, 0.88);
+      --panel-2: rgba(17, 25, 40, 0.98);
+      --text: #e5eefb;
+      --muted: #9fb3c8;
+      --accent: #60a5fa;
+      --accent-2: #22d3ee;
+      --border: rgba(148, 163, 184, 0.18);
+      --success: #34d399;
+      --warning: #fbbf24;
+      --danger: #fb7185;
+      --shadow: 0 24px 64px rgba(2, 6, 23, 0.45);
+    }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background:
+        radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 30%),
+        linear-gradient(180deg, #07101f 0%, #0b1020 100%);
+      color: var(--text);
+    }
+    a { color: inherit; }
+    .page {
+      width: min(1600px, calc(100vw - 32px));
+      margin: 0 auto;
+      padding: 28px 0 56px;
+    }
+    .hero {
+      background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.84));
+      border: 1px solid var(--border);
+      border-radius: 24px;
+      padding: 24px;
+      box-shadow: var(--shadow);
+      backdrop-filter: blur(18px);
+    }
+    .hero h1 {
+      margin: 0;
+      font-size: clamp(1.9rem, 2.6vw, 3rem);
+      line-height: 1.1;
+    }
+    .hero p {
+      margin: 10px 0 0;
+      color: var(--muted);
+      max-width: 72ch;
+      line-height: 1.6;
+    }
+    .summary-bar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 18px;
+    }
+    .summary-pill {
+      display: inline-flex;
+      gap: 8px;
+      align-items: center;
+      padding: 9px 12px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.72);
+      color: var(--muted);
+      font-size: 0.92rem;
+    }
+    .summary-pill strong { color: var(--text); }
+    .toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      gap: 16px;
+      margin-top: 18px;
+      padding-top: 18px;
+      border-top: 1px solid var(--border);
+    }
+    .story-nav {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .story-nav a,
+    .toolbar button,
+    .artifact {
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.7);
+      color: var(--text);
+      text-decoration: none;
+      padding: 8px 12px;
+      font: inherit;
+      font-size: 0.86rem;
+      transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
+    }
+    .toolbar button:hover,
+    .story-nav a:hover,
+    .artifact:hover {
+      transform: translateY(-1px);
+      border-color: rgba(96, 165, 250, 0.55);
+      background: rgba(30, 41, 59, 0.96);
+      cursor: pointer;
+    }
+    .content {
+      display: grid;
+      gap: 18px;
+      margin-top: 22px;
+    }
+    .accordion {
+      border: 1px solid var(--border);
+      border-radius: 22px;
+      background: var(--panel);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+    .accordion summary {
+      list-style: none;
+      cursor: pointer;
+    }
+    .accordion summary::-webkit-details-marker { display: none; }
+    .story-summary,
+    .checkpoint-summary {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+    }
+    .story-summary {
+      padding: 20px 22px;
+      background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.74));
+    }
+    .story-title {
+      font-size: 1.1rem;
+      font-weight: 700;
+    }
+    .story-meta-chip,
+    .checkpoint-meta {
+      color: var(--muted);
+      font-size: 0.84rem;
+      white-space: nowrap;
+    }
+    .story-body {
+      padding: 0 22px 22px;
+    }
+    .story-meta-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      color: var(--muted);
+      font-size: 0.92rem;
+      line-height: 1.5;
+      margin: 4px 0 18px;
+    }
+    .story-meta-row strong { color: var(--text); margin-right: 6px; }
+    .checkpoint-block {
+      margin-top: 14px;
+      border-radius: 18px;
+      background: var(--panel-2);
+      border: 1px solid rgba(148, 163, 184, 0.14);
+    }
+    .checkpoint-summary {
+      padding: 16px 18px;
+      font-weight: 600;
+      background: rgba(15, 23, 42, 0.68);
+    }
+    .variant-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 14px;
+      padding: 0 18px 18px;
+    }
+    .variant-card {
+      display: grid;
+      gap: 12px;
+      border: 1px solid rgba(148, 163, 184, 0.14);
+      border-radius: 18px;
+      background: rgba(15, 23, 42, 0.72);
+      padding: 16px;
+      min-height: 100%;
+    }
+    .variant-card.missing {
+      opacity: 0.72;
+      border-style: dashed;
+    }
+    .variant-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 10px;
+    }
+    .variant-card-header h5 {
+      margin: 0;
+      font-size: 1rem;
+    }
+    .variant-card-header p,
+    .variant-card-header time {
+      margin: 4px 0 0;
+      color: var(--muted);
+      font-size: 0.83rem;
+    }
+    .page-meta {
+      display: grid;
+      gap: 4px;
+      margin: 0;
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+    .page-url {
+      overflow-wrap: anywhere;
+      font-size: 0.82rem;
+    }
+    .thumbnail-link {
+      position: relative;
+      display: block;
+      border-radius: 14px;
+      overflow: hidden;
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      background: rgba(2, 6, 23, 0.65);
+    }
+    .thumbnail-link img {
+      display: block;
+      width: 100%;
+      aspect-ratio: 16 / 10;
+      object-fit: cover;
+    }
+    .highlight-overlay {
+      position: absolute;
+      border: 2px solid var(--danger);
+      border-radius: 12px;
+      background: rgba(251, 113, 133, 0.08);
+      box-shadow: 0 0 0 999px rgba(251, 113, 133, 0.02);
+      pointer-events: none;
+    }
+    .highlight-label {
+      position: absolute;
+      left: 12px;
+      bottom: 12px;
+      max-width: calc(100% - 24px);
+      padding: 6px 9px;
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.9);
+      border: 1px solid rgba(251, 113, 133, 0.35);
+      color: #ffe4e6;
+      font-size: 0.74rem;
+      line-height: 1.3;
+      overflow-wrap: anywhere;
+    }
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+    .stats-grid span {
+      display: grid;
+      gap: 6px;
+      padding: 10px 12px;
+      border-radius: 14px;
+      background: rgba(2, 6, 23, 0.42);
+      border: 1px solid rgba(148, 163, 184, 0.12);
+    }
+    .stats-grid strong {
+      font-size: 1.15rem;
+      line-height: 1;
+    }
+    .stats-grid small {
+      color: var(--muted);
+      font-size: 0.76rem;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+    .artifact-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .artifact.disabled {
+      opacity: 0.45;
+      pointer-events: none;
+    }
+    .empty-state,
+    .empty-card {
+      margin: 0;
+      color: var(--muted);
+      padding: 12px;
+      border: 1px dashed rgba(148, 163, 184, 0.2);
+      border-radius: 14px;
+      background: rgba(2, 6, 23, 0.24);
+    }
+    @media (max-width: 720px) {
+      .page {
+        width: min(100vw - 20px, 1600px);
+        padding-top: 18px;
+      }
+      .hero,
+      .story-summary,
+      .story-body,
+      .checkpoint-summary,
+      .variant-grid {
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+      .variant-card-header,
+      .story-summary,
+      .checkpoint-summary,
+      .toolbar {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .stats-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <h1>${escapeHtml(reportTitle)}</h1>
+      <p>Explore checkpoint runs by story, inspect every project variant side-by-side, and jump directly to screenshots and generated artifacts.</p>
+      <div class="summary-bar">
+        <span class="summary-pill"><strong>Generated</strong> ${escapeHtml(formatDateTime(generatedAt))}</span>
+        <span class="summary-pill"><strong>Stories</strong> ${storyTitles.length}</span>
+        <span class="summary-pill"><strong>Runs</strong> ${runs.length}</span>
+        <span class="summary-pill"><strong>Output</strong> ${escapeHtml(outputDir)}</span>
+      </div>
+      <div class="toolbar">
+        <nav class="story-nav">${navLinks || '<span class="summary-pill">No stories found</span>'}</nav>
+        <div class="toolbar-actions">
+          <button type="button" data-action="expand-all">Expand all</button>
+          <button type="button" data-action="collapse-all">Collapse all</button>
+        </div>
+      </div>
+    </section>
+    <section class="content">
+      ${storySections || '<p class="empty-state">No checkpoint manifests found.</p>'}
+    </section>
+  </main>
+  <script>
+    (() => {
+      const details = Array.from(document.querySelectorAll('details.accordion'));
+      const setAll = (open) => {
+        details.forEach((entry) => {
+          entry.open = open;
+        });
+      };
+      document.querySelector('[data-action="expand-all"]')?.addEventListener('click', () => setAll(true));
+      document.querySelector('[data-action="collapse-all"]')?.addEventListener('click', () => setAll(false));
+      const revealHash = () => {
+        if (!window.location.hash) {
+          return;
+        }
+        const target = document.querySelector(window.location.hash);
+        if (!(target instanceof HTMLElement)) {
+          return;
+        }
+        const parentDetails = target.closest('details');
+        if (parentDetails instanceof HTMLDetailsElement) {
+          parentDetails.open = true;
+        }
+        target.scrollIntoView({ block: 'start', behavior: 'smooth' });
+      };
+      window.addEventListener('hashchange', revealHash);
+      revealHash();
+    })();
+  </script>
+</body>
+</html>
+`;
+}
+var htmlReporter = {
+  name: "html",
+  description: "Responsive HTML report for checkpoint manifests.",
+  validateConfig(config) {
+    return config != null && typeof config === "object" && !Array.isArray(config);
+  },
+  async generate(context) {
+    const outputFile = import_node_path.default.join(context.outputDir, "index.html");
+    const html = buildHtmlReport(context.runs, context.outputDir, context.config);
+    await import_promises.default.mkdir(context.outputDir, { recursive: true });
+    await import_promises.default.writeFile(outputFile, html, "utf8");
+    const storyCount = new Set(context.runs.map((run) => run.title)).size;
+    return {
+      files: [outputFile],
+      summary: `Generated HTML report for ${storyCount} stor${storyCount === 1 ? "y" : "ies"} (${context.runs.length} run${context.runs.length === 1 ? "" : "s"}).`
+    };
+  }
+};
+
+// src/report/markdown-reporter.ts
+var import_promises2 = __toESM(require("fs/promises"), 1);
+var import_node_path2 = __toESM(require("path"), 1);
+function slugify2(value) {
+  return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "story";
+}
+function stripTags(value) {
+  const stripped = value.replace(/\s+@[a-z0-9-]+/gi, " ").replace(/\s+/g, " ").trim();
+  return stripped || value.trim() || "Untitled story";
+}
+function normalizeConfig(config) {
+  return {
+    storiesDir: typeof config.storiesDir === "string" ? config.storiesDir : ".",
+    screenshotsDir: typeof config.screenshotsDir === "string" ? config.screenshotsDir : "screenshots",
+    includeTags: Array.isArray(config.includeTags) ? config.includeTags.filter((value) => typeof value === "string") : void 0,
+    preferredProject: typeof config.preferredProject === "string" ? config.preferredProject : void 0,
+    header: typeof config.header === "string" ? config.header : void 0,
+    footer: typeof config.footer === "string" ? config.footer : void 0,
+    frontmatter: config.frontmatter === true || config.frontmatter === false || config.frontmatter != null && typeof config.frontmatter === "object" && !Array.isArray(config.frontmatter) ? config.frontmatter : false,
+    imagePathPrefix: typeof config.imagePathPrefix === "string" ? config.imagePathPrefix : void 0,
+    copyScreenshots: typeof config.copyScreenshots === "boolean" ? config.copyScreenshots : true
+  };
+}
+function normalizeTags(tags) {
+  return (tags ?? []).map((tag) => tag.trim().toLowerCase()).filter(Boolean);
+}
+function shouldIncludeRun(run, config) {
+  const includeTags = normalizeTags(config.includeTags);
+  if (includeTags.length > 0) {
+    const runTags = new Set(normalizeTags(run.tags));
+    return includeTags.some((tag) => runTags.has(tag));
+  }
+  return run.checkpoints.some((checkpoint) => {
+    const hasDescription = typeof checkpoint.description === "string" && checkpoint.description.trim().length > 0;
+    return hasDescription || typeof checkpoint.step === "number";
+  });
+}
+function choosePrimaryRun(runs, preferredProject) {
+  if (runs.length === 0) {
+    return null;
+  }
+  return [...runs].sort((left, right) => {
+    const leftPreferred = preferredProject && left.project === preferredProject ? 0 : 1;
+    const rightPreferred = preferredProject && right.project === preferredProject ? 0 : 1;
+    if (leftPreferred !== rightPreferred) {
+      return leftPreferred - rightPreferred;
+    }
+    const rightTime = new Date(right.startedAt).getTime();
+    const leftTime = new Date(left.startedAt).getTime();
+    if (rightTime !== leftTime) {
+      return rightTime - leftTime;
+    }
+    return left.project.localeCompare(right.project);
+  })[0] ?? null;
+}
+function resolveArtifactPath2(run, artifactPath) {
+  return import_node_path2.default.isAbsolute(artifactPath) ? artifactPath : import_node_path2.default.resolve(import_node_path2.default.dirname(run.sourceManifestPath), artifactPath);
+}
+function screenshotSourcePath(run, checkpoint) {
+  const artifacts = checkpoint.collectors.screenshot?.artifacts ?? [];
+  const artifact = artifacts.find((entry) => entry.name === "screenshot") ?? artifacts[0];
+  return artifact?.path ? resolveArtifactPath2(run, artifact.path) : null;
+}
+function screenshotData2(checkpoint) {
+  const data = checkpoint.collectors.screenshot?.data;
+  return data && typeof data === "object" ? data : null;
+}
+function focusNote(checkpoint) {
+  const data = screenshotData2(checkpoint);
+  const selector = typeof data?.highlightSelector === "string" ? data.highlightSelector.trim() : "";
+  if (selector) {
+    return `Focus: \`${selector}\``;
+  }
+  const bounds = data?.highlightBounds;
+  if (bounds && typeof bounds.x === "number" && typeof bounds.y === "number" && typeof bounds.width === "number" && typeof bounds.height === "number") {
+    return "Focus: highlighted UI element.";
+  }
+  return null;
+}
+function urlLabel(url) {
+  try {
+    const parsed = new URL(url);
+    const value = `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    return value || "/";
+  } catch {
+    return url || "/";
+  }
+}
+function breadcrumbLabel(url) {
+  const label = urlLabel(url);
+  if (!label.startsWith("/")) {
+    return null;
+  }
+  const [withoutQuery = label] = label.split("?");
+  const [withoutHash = withoutQuery] = withoutQuery.split("#");
+  const segments = withoutHash.split("/").map((segment) => segment.trim()).filter(Boolean).map((segment) => decodeURIComponent(segment).replace(/[-_]+/g, " "));
+  return segments.length > 0 ? segments.join(" \u203A ") : "home";
+}
+function autoDescription(checkpoint) {
+  const pageTitle = checkpoint.title.trim();
+  const location = urlLabel(checkpoint.url);
+  if (pageTitle) {
+    return `This step captures **${pageTitle}** at \`${location}\`.`;
+  }
+  return `This step captures **${checkpoint.name}** at \`${location}\`.`;
+}
+function markdownRelativePath(fromFile, toFile) {
+  const relativePath = import_node_path2.default.relative(import_node_path2.default.dirname(fromFile), toFile).split(import_node_path2.default.sep).join("/");
+  if (relativePath.startsWith(".")) {
+    return relativePath;
+  }
+  return `./${relativePath}`;
+}
+function rewriteImagePath(markdownFile, imageFile, outputDir, prefix) {
+  const relativePath = import_node_path2.default.relative(outputDir, imageFile).split(import_node_path2.default.sep).join("/");
+  if (prefix) {
+    return `${prefix.replace(/\/+$/g, "")}/${relativePath.replace(/^\/+/, "")}`;
+  }
+  return markdownRelativePath(markdownFile, imageFile);
+}
+function yamlScalar(value) {
+  return JSON.stringify(value);
+}
+function serializeFrontmatter(fields) {
+  const lines = ["---"];
+  for (const [key, value] of Object.entries(fields)) {
+    if (value === void 0) {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      lines.push(`${key}:`);
+      if (value.length === 0) {
+        lines.push("  []");
+        continue;
+      }
+      for (const item of value) {
+        lines.push(`  - ${yamlScalar(item)}`);
+      }
+      continue;
+    }
+    lines.push(`${key}: ${yamlScalar(value)}`);
+  }
+  lines.push("---", "");
+  return lines.join("\n");
+}
+async function materializeScreenshot(args) {
+  const sourcePath = screenshotSourcePath(args.run, args.checkpoint);
+  if (!sourcePath) {
+    return null;
+  }
+  const extension = import_node_path2.default.extname(sourcePath) || ".png";
+  const targetPath = import_node_path2.default.join(
+    args.outputDir,
+    args.config.screenshotsDir ?? "screenshots",
+    args.storySlug,
+    `${String(args.stepOrder).padStart(2, "0")}-${slugify2(args.checkpoint.name)}${extension}`
+  );
+  try {
+    if (args.config.copyScreenshots !== false) {
+      await import_promises2.default.mkdir(import_node_path2.default.dirname(targetPath), { recursive: true });
+      await import_promises2.default.copyFile(sourcePath, targetPath);
+      args.writtenFiles.add(targetPath);
+      return rewriteImagePath(args.markdownFile, targetPath, args.outputDir, args.config.imagePathPrefix);
+    }
+    return rewriteImagePath(args.markdownFile, sourcePath, args.outputDir, args.config.imagePathPrefix);
+  } catch {
+    return null;
+  }
+}
+function orderedCheckpoints(checkpoints) {
+  return [...checkpoints].sort((left, right) => {
+    const leftOrder = typeof left.step === "number" ? left.step : Number.MAX_SAFE_INTEGER;
+    const rightOrder = typeof right.step === "number" ? right.step : Number.MAX_SAFE_INTEGER;
+    if (leftOrder !== rightOrder) {
+      return leftOrder - rightOrder;
+    }
+    return checkpoints.indexOf(left) - checkpoints.indexOf(right);
+  });
+}
+async function buildSteps(args) {
+  const checkpoints = orderedCheckpoints(args.run.checkpoints);
+  const steps = [];
+  for (const [index, checkpoint] of checkpoints.entries()) {
+    const order = typeof checkpoint.step === "number" ? checkpoint.step : index + 1;
+    steps.push({
+      checkpoint,
+      order,
+      heading: checkpoint.name,
+      description: typeof checkpoint.description === "string" && checkpoint.description.trim().length > 0 ? checkpoint.description.trim() : autoDescription(checkpoint),
+      imagePath: await materializeScreenshot({
+        run: args.run,
+        checkpoint,
+        storySlug: args.storySlug,
+        stepOrder: order,
+        outputDir: args.outputDir,
+        markdownFile: args.markdownFile,
+        config: args.config,
+        writtenFiles: args.writtenFiles
+      }),
+      urlLabel: urlLabel(checkpoint.url),
+      breadcrumbLabel: breadcrumbLabel(checkpoint.url),
+      focusNote: focusNote(checkpoint)
+    });
+  }
+  return steps;
+}
+function renderMarkdown(args) {
+  const frontmatterFields = args.config.frontmatter === true || typeof args.config.frontmatter === "object" ? {
+    title: args.title,
+    project: args.run.project,
+    testId: args.run.testId,
+    tags: args.run.tags,
+    startedAt: args.run.startedAt,
+    generatedAt: args.generatedAt,
+    ...args.config.frontmatter && typeof args.config.frontmatter === "object" ? args.config.frontmatter : {}
+  } : null;
+  const sections = args.steps.map((step) => {
+    const lines = [`## Step ${step.order}: ${step.heading}`, ""];
+    if (step.imagePath) {
+      lines.push(`![${step.checkpoint.title || step.heading}](${step.imagePath})`, "");
+    }
+    lines.push(`**URL:** \`${step.urlLabel}\``);
+    if (step.breadcrumbLabel) {
+      lines.push("", `**Breadcrumb:** ${step.breadcrumbLabel}`);
+    }
+    if (step.focusNote) {
+      lines.push("", `> ${step.focusNote}`);
+    }
+    lines.push("", step.description);
+    return lines.join("\n");
+  }).join("\n\n");
+  const parts = [
+    frontmatterFields ? serializeFrontmatter(frontmatterFields) : "",
+    `# ${args.title}`,
+    args.config.header ? args.config.header.trim() : "",
+    sections,
+    args.config.footer ? args.config.footer.trim() : ""
+  ].filter((value) => value.trim().length > 0);
+  return `${parts.join("\n\n")}
+`;
+}
+var markdownReporter = {
+  name: "markdown",
+  description: "Generates one Markdown help article per captured story.",
+  validateConfig(config) {
+    return config != null && typeof config === "object" && !Array.isArray(config);
+  },
+  async generate(context) {
+    const config = normalizeConfig(context.config);
+    const stories = groupByStory(context.runs);
+    const generatedAt = (/* @__PURE__ */ new Date()).toISOString();
+    const writtenFiles = /* @__PURE__ */ new Set();
+    let articleCount = 0;
+    for (const [storyTitle, runs] of stories) {
+      const primaryRun = choosePrimaryRun(runs, config.preferredProject);
+      if (!primaryRun || !shouldIncludeRun(primaryRun, config)) {
+        continue;
+      }
+      const title = stripTags(storyTitle);
+      const storySlug = slugify2(title);
+      const markdownFile = import_node_path2.default.join(context.outputDir, config.storiesDir ?? ".", `${storySlug}.md`);
+      const steps = await buildSteps({
+        run: primaryRun,
+        storySlug,
+        outputDir: context.outputDir,
+        markdownFile,
+        config,
+        writtenFiles
+      });
+      await import_promises2.default.mkdir(import_node_path2.default.dirname(markdownFile), { recursive: true });
+      await import_promises2.default.writeFile(
+        markdownFile,
+        renderMarkdown({
+          title,
+          steps,
+          run: primaryRun,
+          config,
+          generatedAt
+        }),
+        "utf8"
+      );
+      writtenFiles.add(markdownFile);
+      articleCount += 1;
+    }
+    return {
+      files: [...writtenFiles],
+      summary: `Generated ${articleCount} Markdown article${articleCount === 1 ? "" : "s"}.`
+    };
+  }
+};
+
+// src/report/mdx-reporter.ts
+var import_promises3 = __toESM(require("fs/promises"), 1);
+var import_node_path3 = __toESM(require("path"), 1);
+var DEFAULT_PROJECT_ORDER2 = ["desktop-light", "desktop-dark", "mobile-light", "mobile-dark"];
+function slugify3(value) {
+  return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "story";
+}
+function stripTags2(value) {
+  const stripped = value.replace(/\s+@[a-z0-9-]+/gi, " ").replace(/\s+/g, " ").trim();
+  return stripped || value.trim() || "Untitled story";
+}
+function normalizeConfig2(config) {
+  return {
+    storiesDir: typeof config.storiesDir === "string" ? config.storiesDir : ".",
+    screenshotsDir: typeof config.screenshotsDir === "string" ? config.screenshotsDir : "screenshots",
+    includeTags: Array.isArray(config.includeTags) ? config.includeTags.filter((value) => typeof value === "string") : void 0,
+    preferredProject: typeof config.preferredProject === "string" ? config.preferredProject : void 0,
+    imagePathPrefix: typeof config.imagePathPrefix === "string" ? config.imagePathPrefix : void 0,
+    copyScreenshots: typeof config.copyScreenshots === "boolean" ? config.copyScreenshots : true,
+    componentImportPath: typeof config.componentImportPath === "string" ? config.componentImportPath : "playwright-checkpoint/components"
+  };
+}
+function normalizeTags2(tags) {
+  return (tags ?? []).map((tag) => tag.trim().toLowerCase()).filter(Boolean);
+}
+function frontmatterTags(tags) {
+  return normalizeTags2(tags).map((tag) => tag.replace(/^@+/, "")).filter(Boolean);
+}
+function shouldIncludeRun2(run, config) {
+  const includeTags = normalizeTags2(config.includeTags);
+  if (includeTags.length > 0) {
+    const runTags = new Set(normalizeTags2(run.tags));
+    return includeTags.some((tag) => runTags.has(tag));
+  }
+  return run.checkpoints.some((checkpoint) => {
+    const hasDescription = typeof checkpoint.description === "string" && checkpoint.description.trim().length > 0;
+    return hasDescription || typeof checkpoint.step === "number";
+  });
+}
+function choosePrimaryRun2(runs, preferredProject) {
+  if (runs.length === 0) {
+    return null;
+  }
+  return [...runs].sort((left, right) => {
+    const leftPreferred = preferredProject && left.project === preferredProject ? 0 : 1;
+    const rightPreferred = preferredProject && right.project === preferredProject ? 0 : 1;
+    if (leftPreferred !== rightPreferred) {
+      return leftPreferred - rightPreferred;
+    }
+    const rightTime = new Date(right.startedAt).getTime();
+    const leftTime = new Date(left.startedAt).getTime();
+    if (rightTime !== leftTime) {
+      return rightTime - leftTime;
+    }
+    return left.project.localeCompare(right.project);
+  })[0] ?? null;
+}
+function orderedCheckpoints2(checkpoints) {
+  return [...checkpoints].sort((left, right) => {
+    const leftOrder = typeof left.step === "number" ? left.step : Number.MAX_SAFE_INTEGER;
+    const rightOrder = typeof right.step === "number" ? right.step : Number.MAX_SAFE_INTEGER;
+    if (leftOrder !== rightOrder) {
+      return leftOrder - rightOrder;
+    }
+    return checkpoints.indexOf(left) - checkpoints.indexOf(right);
+  });
+}
+function resolveArtifactPath3(run, artifactPath) {
+  return import_node_path3.default.isAbsolute(artifactPath) ? artifactPath : import_node_path3.default.resolve(import_node_path3.default.dirname(run.sourceManifestPath), artifactPath);
+}
+function screenshotSourcePath2(run, checkpoint) {
+  const artifacts = checkpoint.collectors.screenshot?.artifacts ?? [];
+  const artifact = artifacts.find((entry) => entry.name === "screenshot") ?? artifacts[0];
+  return artifact?.path ? resolveArtifactPath3(run, artifact.path) : null;
+}
+function screenshotData3(checkpoint) {
+  const data = checkpoint.collectors.screenshot?.data;
+  return data && typeof data === "object" ? data : null;
+}
+function focusNote2(checkpoint) {
+  const data = screenshotData3(checkpoint);
+  const selector = typeof data?.highlightSelector === "string" ? data.highlightSelector.trim() : "";
+  if (selector) {
+    return `Focus: \`${selector}\``;
+  }
+  const bounds = data?.highlightBounds;
+  if (bounds && typeof bounds.x === "number" && typeof bounds.y === "number" && typeof bounds.width === "number" && typeof bounds.height === "number") {
+    return "Focus: highlighted UI element.";
+  }
+  return null;
+}
+function urlLabel2(url) {
+  try {
+    const parsed = new URL(url);
+    const value = `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    return value || "/";
+  } catch {
+    return url || "/";
+  }
+}
+function autoDescription2(checkpoint) {
+  const pageTitle = checkpoint.title.trim();
+  const location = urlLabel2(checkpoint.url);
+  if (pageTitle) {
+    return `This step captures **${pageTitle}** at \`${location}\`.`;
+  }
+  return `This step captures **${checkpoint.name}** at \`${location}\`.`;
+}
+function markdownRelativePath2(fromFile, toFile) {
+  const relativePath = import_node_path3.default.relative(import_node_path3.default.dirname(fromFile), toFile).split(import_node_path3.default.sep).join("/");
+  if (relativePath.startsWith(".")) {
+    return relativePath;
+  }
+  return `./${relativePath}`;
+}
+function rewriteImagePath2(mdxFile, imageFile, outputDir, prefix) {
+  const relativePath = import_node_path3.default.relative(outputDir, imageFile).split(import_node_path3.default.sep).join("/");
+  if (prefix) {
+    return `${prefix.replace(/\/+$/g, "")}/${relativePath.replace(/^\/+/, "")}`;
+  }
+  return markdownRelativePath2(mdxFile, imageFile);
+}
+function yamlScalar2(value) {
+  return JSON.stringify(value);
+}
+function serializeFrontmatter2(fields) {
+  const lines = ["---"];
+  for (const [key, value] of Object.entries(fields)) {
+    if (value === void 0) {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      lines.push(`${key}:`);
+      if (value.length === 0) {
+        lines.push("  []");
+        continue;
+      }
+      for (const item of value) {
+        lines.push(`  - ${yamlScalar2(item)}`);
+      }
+      continue;
+    }
+    lines.push(`${key}: ${yamlScalar2(value)}`);
+  }
+  lines.push("---", "");
+  return lines.join("\n");
+}
+function quoteJsx(value) {
+  return JSON.stringify(value);
+}
+function projectWeight2(projectName) {
+  const index = DEFAULT_PROJECT_ORDER2.indexOf(projectName);
+  return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+}
+function formatProjectLabel2(projectName) {
+  const [device, mode] = projectName.split("-");
+  if (!device || !mode) {
+    return projectName;
+  }
+  const deviceLabel = device === "desktop" ? "Desktop" : device === "mobile" ? "Mobile" : device;
+  const modeLabel = mode === "light" ? "Light" : mode === "dark" ? "Dark" : mode;
+  return `${deviceLabel} / ${modeLabel}`;
+}
+function sortRunsForVariants(runs) {
+  return [...runs].sort((left, right) => {
+    const byWeight = projectWeight2(left.project) - projectWeight2(right.project);
+    if (byWeight !== 0) {
+      return byWeight;
+    }
+    return left.project.localeCompare(right.project);
+  });
+}
+function findMatchingCheckpoint(run, baseCheckpoint, fallbackIndex) {
+  const checkpoints = orderedCheckpoints2(run.checkpoints);
+  if (typeof baseCheckpoint.step === "number") {
+    const byStep = checkpoints.find((entry) => entry.step === baseCheckpoint.step);
+    if (byStep) {
+      return byStep;
+    }
+  }
+  const byName = checkpoints.find((entry) => entry.name === baseCheckpoint.name);
+  if (byName) {
+    return byName;
+  }
+  return checkpoints[fallbackIndex] ?? null;
+}
+async function materializeScreenshot2(args) {
+  const sourcePath = screenshotSourcePath2(args.run, args.checkpoint);
+  if (!sourcePath) {
+    return null;
+  }
+  const extension = import_node_path3.default.extname(sourcePath) || ".png";
+  const targetPath = import_node_path3.default.join(
+    args.outputDir,
+    args.config.screenshotsDir ?? "screenshots",
+    args.storySlug,
+    `${String(args.stepOrder).padStart(2, "0")}-${slugify3(args.run.project)}-${slugify3(args.checkpoint.name)}${extension}`
+  );
+  try {
+    if (args.config.copyScreenshots !== false) {
+      await import_promises3.default.mkdir(import_node_path3.default.dirname(targetPath), { recursive: true });
+      await import_promises3.default.copyFile(sourcePath, targetPath);
+      args.writtenFiles.add(targetPath);
+      return rewriteImagePath2(args.mdxFile, targetPath, args.outputDir, args.config.imagePathPrefix);
+    }
+    return rewriteImagePath2(args.mdxFile, sourcePath, args.outputDir, args.config.imagePathPrefix);
+  } catch {
+    return null;
+  }
+}
+async function buildSteps2(args) {
+  const baseCheckpoints = orderedCheckpoints2(args.primaryRun.checkpoints);
+  const sortedRuns = sortRunsForVariants(args.runs);
+  const steps = [];
+  for (const [index, checkpoint] of baseCheckpoints.entries()) {
+    const order = typeof checkpoint.step === "number" ? checkpoint.step : index + 1;
+    const variants = [];
+    const matchedCheckpoints = [];
+    for (const run of sortedRuns) {
+      const variantCheckpoint = findMatchingCheckpoint(run, checkpoint, index);
+      if (!variantCheckpoint) {
+        continue;
+      }
+      matchedCheckpoints.push(variantCheckpoint);
+      variants.push({
+        project: run.project,
+        projectLabel: formatProjectLabel2(run.project),
+        imagePath: await materializeScreenshot2({
+          run,
+          checkpoint: variantCheckpoint,
+          storySlug: args.storySlug,
+          stepOrder: order,
+          outputDir: args.outputDir,
+          mdxFile: args.mdxFile,
+          config: args.config,
+          writtenFiles: args.writtenFiles
+        }),
+        imageAlt: variantCheckpoint.title || `${checkpoint.name} (${formatProjectLabel2(run.project)})`
+      });
+    }
+    const descriptionSource = matchedCheckpoints.find(
+      (entry) => typeof entry.description === "string" && entry.description.trim().length > 0
+    ) ?? checkpoint;
+    const stepFocus = matchedCheckpoints.map((entry) => focusNote2(entry)).find((value) => Boolean(value)) ?? null;
+    steps.push({
+      checkpoint,
+      order,
+      title: checkpoint.name,
+      description: typeof descriptionSource.description === "string" && descriptionSource.description.trim().length > 0 ? descriptionSource.description.trim() : autoDescription2(descriptionSource),
+      focusNote: stepFocus,
+      variants
+    });
+  }
+  return steps;
+}
+function renderVariantTabs(variants) {
+  if (variants.length === 0) {
+    return "";
+  }
+  if (variants.length === 1) {
+    const [variant] = variants;
+    if (!variant?.imagePath) {
+      return "";
+    }
+    return `<Screenshot src={${quoteJsx(variant.imagePath)}} alt={${quoteJsx(variant.imageAlt)}} />`;
+  }
+  const tabs = variants.map((variant) => {
+    const lines = [`  <DeviceTab label={${quoteJsx(variant.projectLabel)}}>`];
+    if (variant.imagePath) {
+      lines.push(`    <Screenshot src={${quoteJsx(variant.imagePath)}} alt={${quoteJsx(variant.imageAlt)}} />`);
+    } else {
+      lines.push(`    <p>No screenshot captured for ${variant.projectLabel}.</p>`);
+    }
+    lines.push("  </DeviceTab>");
+    return lines.join("\n");
+  }).join("\n");
+  return `<DeviceTabs>
+${tabs}
+</DeviceTabs>`;
+}
+function renderStep(step) {
+  const lines = [`  <Step number={${step.order}} title={${quoteJsx(step.title)}}>`];
+  const variantBlock = renderVariantTabs(step.variants);
+  if (variantBlock) {
+    lines.push(`    ${variantBlock.replace(/\n/g, "\n    ")}`, "");
+  }
+  if (step.focusNote) {
+    lines.push(`    ${step.focusNote}`, "");
+  }
+  lines.push(`    ${step.description}`, "  </Step>");
+  return lines.join("\n");
+}
+function renderMdx(args) {
+  const importNames = /* @__PURE__ */ new Set(["Screenshot", "StepList", "Step"]);
+  if (args.steps.some((step) => step.variants.length > 1)) {
+    importNames.add("DeviceTabs");
+    importNames.add("DeviceTab");
+  }
+  const frontmatter = serializeFrontmatter2({
+    title: args.title,
+    tags: frontmatterTags([...new Set(args.runs.flatMap((run) => run.tags))]),
+    generatedAt: args.generatedAt,
+    projects: [...new Set(args.runs.map((run) => run.project))]
+  });
+  const stepBlocks = args.steps.map(renderStep).join("\n\n");
+  return `${frontmatter}import { ${[...importNames].join(", ")} } from '${args.config.componentImportPath}';
+
+<StepList>
+${stepBlocks}
+</StepList>
+`;
+}
+var mdxReporter = {
+  name: "mdx",
+  description: "Generates one MDX help article per captured story.",
+  validateConfig(config) {
+    return config != null && typeof config === "object" && !Array.isArray(config);
+  },
+  async generate(context) {
+    const config = normalizeConfig2(context.config);
+    const stories = groupByStory(context.runs);
+    const generatedAt = (/* @__PURE__ */ new Date()).toISOString();
+    const writtenFiles = /* @__PURE__ */ new Set();
+    let articleCount = 0;
+    for (const [storyTitle, runs] of stories) {
+      const primaryRun = choosePrimaryRun2(runs, config.preferredProject);
+      if (!primaryRun || !shouldIncludeRun2(primaryRun, config)) {
+        continue;
+      }
+      const title = stripTags2(storyTitle);
+      const storySlug = slugify3(title);
+      const mdxFile = import_node_path3.default.join(context.outputDir, config.storiesDir ?? ".", `${storySlug}.mdx`);
+      const steps = await buildSteps2({
+        runs,
+        primaryRun,
+        storySlug,
+        outputDir: context.outputDir,
+        mdxFile,
+        config,
+        writtenFiles
+      });
+      await import_promises3.default.mkdir(import_node_path3.default.dirname(mdxFile), { recursive: true });
+      await import_promises3.default.writeFile(
+        mdxFile,
+        renderMdx({
+          title,
+          steps,
+          runs,
+          config,
+          generatedAt
+        }),
+        "utf8"
+      );
+      writtenFiles.add(mdxFile);
+      articleCount += 1;
+    }
+    return {
+      files: [...writtenFiles],
+      summary: `Generated ${articleCount} MDX article${articleCount === 1 ? "" : "s"}.`
+    };
+  }
+};
+
+// src/report/index.ts
+var builtinReporters = /* @__PURE__ */ new Map();
+var builtinReporterDefaults = {
+  html: true,
+  markdown: false,
+  mdx: false
+};
+async function walkFiles(directory) {
+  const dirents = await import_promises4.default.readdir(directory, { withFileTypes: true });
+  const files = [];
+  for (const dirent of dirents) {
+    const absolutePath = import_node_path4.default.join(directory, dirent.name);
+    if (dirent.isDirectory()) {
+      files.push(...await walkFiles(absolutePath));
+      continue;
+    }
+    if (dirent.isFile()) {
+      files.push(absolutePath);
+    }
+  }
+  return files;
+}
+function isCheckpointManifestFile(filePath) {
+  const fileName = import_node_path4.default.basename(filePath);
+  return fileName === "checkpoint-manifest.json" || fileName.startsWith("checkpoint-manifest-") && fileName.endsWith(".json");
+}
+function isCheckpointManifest(value) {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const manifest = value;
+  return typeof manifest.project === "string" && typeof manifest.testId === "string" && typeof manifest.title === "string" && typeof manifest.startedAt === "string" && Array.isArray(manifest.tags) && Array.isArray(manifest.checkpoints);
+}
+function toRunRecord(manifest, sourceManifestPath) {
+  return {
+    key: `${manifest.testId}|${manifest.project}|${manifest.startedAt}`,
+    sourceManifestPath,
+    environment: manifest.environment || "unknown",
+    project: manifest.project,
+    testId: manifest.testId,
+    title: manifest.title,
+    tags: manifest.tags,
+    startedAt: manifest.startedAt,
+    checkpoints: manifest.checkpoints
+  };
+}
+function toManifest(run) {
+  return {
+    environment: run.environment,
+    project: run.project,
+    testId: run.testId,
+    title: run.title,
+    tags: run.tags,
+    startedAt: run.startedAt,
+    checkpoints: run.checkpoints
+  };
+}
+function normalizeReporterConfig(config) {
+  if (config == null || config === false) {
+    return null;
+  }
+  if (config === true) {
+    return {};
+  }
+  return { ...config };
+}
+function registerBuiltinReporter(reporter) {
+  builtinReporters.set(reporter.name, reporter);
+}
+function dedupeRuns(runs) {
+  const map = /* @__PURE__ */ new Map();
+  for (const run of runs) {
+    const existing = map.get(run.key);
+    if (!existing) {
+      map.set(run.key, run);
+      continue;
+    }
+    const existingTime = new Date(existing.startedAt).getTime();
+    const currentTime = new Date(run.startedAt).getTime();
+    if (currentTime >= existingTime) {
+      map.set(run.key, run);
+    }
+  }
+  return [...map.values()];
+}
+async function loadRuns(testResultsDir) {
+  let manifestFiles;
+  try {
+    manifestFiles = (await walkFiles(testResultsDir)).filter(isCheckpointManifestFile);
+  } catch {
+    return [];
+  }
+  const runs = [];
+  for (const manifestPath of manifestFiles) {
+    let rawManifest;
+    try {
+      rawManifest = JSON.parse(await import_promises4.default.readFile(manifestPath, "utf8"));
+    } catch {
+      continue;
+    }
+    if (!isCheckpointManifest(rawManifest)) {
+      continue;
+    }
+    runs.push(toRunRecord(rawManifest, manifestPath));
+  }
+  return dedupeRuns(runs);
+}
+async function runReporters(config, testResultsDir, outputDir) {
+  const runs = await loadRuns(testResultsDir);
+  const manifests = runs.map(toManifest);
+  const results = {};
+  const reporterConfigMap = {
+    ...builtinReporterDefaults,
+    ...config.reporters ?? {}
+  };
+  for (const [name, value] of Object.entries(reporterConfigMap)) {
+    const reporterConfig = normalizeReporterConfig(value);
+    if (!reporterConfig) {
+      continue;
+    }
+    const reporter = builtinReporters.get(name);
+    if (!reporter) {
+      throw new Error(`Reporter "${name}" is enabled but no implementation is registered.`);
+    }
+    if (reporter.validateConfig && !reporter.validateConfig(reporterConfig)) {
+      throw new Error(`Reporter "${name}" received invalid configuration.`);
+    }
+    results[name] = await reporter.generate({
+      runs,
+      outputDir,
+      config: reporterConfig,
+      manifests
+    });
+  }
+  return results;
+}
+registerBuiltinReporter(htmlReporter);
+registerBuiltinReporter(markdownReporter);
+registerBuiltinReporter(mdxReporter);
+
+// src/cli/index.ts
+var DEFAULT_RESULTS_DIR = "test-results";
+var DEFAULT_REPORT_OUTPUT_DIR = "report";
+
+// src/teardown.ts
+function resolveResultsDir(config) {
+  if (process.env.PLAYWRIGHT_CHECKPOINT_RESULTS_DIR) {
+    return import_node_path6.default.resolve(process.env.PLAYWRIGHT_CHECKPOINT_RESULTS_DIR);
+  }
+  const defaultDir = import_node_path6.default.resolve(process.cwd(), DEFAULT_RESULTS_DIR);
+  if (import_node_fs.default.existsSync(defaultDir)) {
+    return defaultDir;
+  }
+  const firstProjectOutputDir = config?.projects.find((project) => typeof project.outputDir === "string")?.outputDir;
+  return import_node_path6.default.resolve(firstProjectOutputDir ?? defaultDir);
+}
+function resolveOutputDir() {
+  if (process.env.PLAYWRIGHT_CHECKPOINT_REPORT_DIR) {
+    return import_node_path6.default.resolve(process.env.PLAYWRIGHT_CHECKPOINT_REPORT_DIR);
+  }
+  return import_node_path6.default.resolve(process.cwd(), DEFAULT_REPORT_OUTPUT_DIR);
+}
+async function globalTeardown(config) {
+  const testResultsDir = resolveResultsDir(config);
+  const outputDir = resolveOutputDir();
+  try {
+    const results = await runReporters({}, testResultsDir, outputDir);
+    const summaries = Object.entries(results).map(([name, result]) => `- ${name}: ${result.summary}`);
+    console.log(`[playwright-checkpoint] Generated reports from ${testResultsDir} to ${outputDir}`);
+    if (summaries.length > 0) {
+      for (const summary of summaries) {
+        console.log(summary);
+      }
+    }
+  } catch (error) {
+    console.error("[playwright-checkpoint] Global teardown report generation failed.");
+    console.error(error instanceof Error ? error.stack ?? error.message : String(error));
+  }
+}
+var teardown_default = globalTeardown;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  globalTeardown
+});
+//# sourceMappingURL=teardown.cjs.map