@reportforge/playwright-pdf 0.24.0 → 0.26.1

package/dist/templates/partials/suite-breakdown.hbs

@@ -1,89 +1,89 @@
-<div class="section section--suite-breakdown">
-  <h2>Suite Breakdown</h2>
-  {{#if (and overflowFailureCount sections.failureDeepDive)}}
-  <div class="overflow-banner">
-    Inline failure detail covers the first {{failures.length}} failures.
-    {{overflowFailureCount}} more {{#if (gt overflowFailureCount 1)}}are{{else}}is{{/if}}
-    available in <code>{{overflowSidecarName}}</code> alongside this report.
-  </div>
-  {{/if}}
-  {{#each projects}}
-    <h3 style="color:var(--primary,#CC785C);margin-bottom:8px;">{{name}}</h3>
-    {{#each suites}}
-      {{> suite-node this depth=0}}
-    {{/each}}
-  {{/each}}
-</div>
-
-{{#*inline "suite-node"}}
-<div class="suite-group">
-  <div class="suite-group__header">
-    <span class="suite-title">{{title}}</span>
-    <span class="suite-stats">
-      {{#if stats.passed}}<span class="badge badge--passed">{{stats.passed}}</span>{{/if}}
-      {{#if stats.failed}}<span class="badge badge--failed">{{stats.failed}}</span>{{/if}}
-      {{#if stats.timedOut}}<span class="badge badge--timedout">{{stats.timedOut}}</span>{{/if}}
-      {{#if stats.skipped}}<span class="badge badge--skipped">{{stats.skipped}}</span>{{/if}}
-      {{#if stats.flaky}}<span class="badge badge--flaky">{{stats.flaky}}</span>{{/if}}
-    </span>
-  </div>
-  {{#if tests.length}}
-  <table>
-    <thead>
-      <tr>
-        <th>Test</th>
-        <th style="width:112px;">Status</th>
-        <th style="width:72px;">Duration</th>
-        {{#if @root.options.showRetries}}<th style="width:52px;">Retries</th>{{/if}}
-      </tr>
-    </thead>
-    <tbody>
-      {{#each tests}}
-      <tr class="no-break{{#if failure}} test-row--has-detail{{/if}}">
-        <td>
-          <div style="font-weight:500;">{{title}}</div>
-          {{#if location}}<div class="test-path">{{location}}</div>{{/if}}
-          {{#if tags.length}}
-          <div style="margin-top:3px;">
-            {{#each tags}}<code style="font-size:8.5px;background:var(--surface-3);color:var(--text-3);padding:1px 5px;border-radius:3px;margin-right:3px;border:1px solid var(--border);">{{this}}</code>{{/each}}
-          </div>
-          {{/if}}
-        </td>
-        <td style="white-space:nowrap;">
-          {{statusBadge status}}{{#if slowRank}}<span class="badge badge--slow" title="Among the slowest tests">SLOW</span>{{/if}}
-        </td>
-        <td style="color:var(--text-2);font-family:'JetBrains Mono',monospace;font-size:9.5px;">{{formatDuration duration}}</td>
-        {{#if @root.options.showRetries}}<td style="color:var(--text-3);text-align:center;">{{retryCount}}</td>{{/if}}
-      </tr>
-      {{#if failure}}
-      <tr class="failure-row">
-        <td colspan="{{#if @root.options.showRetries}}4{{else}}3{{/if}}">
-          <div class="failure-detail failure-detail--{{failure.severity}}">
-            <div class="failure-detail__head">
-              <span class="failure-detail__dot"></span>
-              <span class="failure-detail__sev">{{failure.severity}} severity</span>
-            </div>
-            {{> failure-card failure=failure showFull=@root.options.showFullFailures showStack=@root.options.showStackTraces}}
-            {{#if chip}}
-            <div class="root-cause-chip root-cause-chip--{{chip.category}}">
-              <span class="root-cause-chip__tag">Root cause</span>
-              <span class="root-cause-chip__label">{{categoryLabel chip.category}}</span>
-              <span class="root-cause-chip__msg">{{chip.message}}</span>
-              <span class="root-cause-chip__strength">{{strengthLabel chip.strength}} match</span>
-            </div>
-            {{/if}}
-          </div>
-        </td>
-      </tr>
-      {{/if}}
-      {{/each}}
-    </tbody>
-  </table>
-  {{/if}}
-  {{#each suites}}
-    <div style="padding-left:14px;border-left:1px solid var(--border);margin:4px 8px;">
-      {{> suite-node this}}
-    </div>
-  {{/each}}
-</div>
-{{/inline}}
+<div class="section section--suite-breakdown">
+  <h2>Suite Breakdown</h2>
+  {{#if (and overflowFailureCount sections.failureDeepDive)}}
+  <div class="overflow-banner">
+    Inline failure detail covers the first {{failures.length}} failures.
+    {{overflowFailureCount}} more {{#if (gt overflowFailureCount 1)}}are{{else}}is{{/if}}
+    available in <code>{{overflowSidecarName}}</code> alongside this report.
+  </div>
+  {{/if}}
+  {{#each projects}}
+    <h3 style="color:var(--primary,#CC785C);margin-bottom:8px;">{{name}}</h3>
+    {{#each suites}}
+      {{> suite-node this depth=0}}
+    {{/each}}
+  {{/each}}
+</div>
+
+{{#*inline "suite-node"}}
+<div class="suite-group">
+  <div class="suite-group__header">
+    <span class="suite-title">{{title}}</span>
+    <span class="suite-stats">
+      {{#if stats.passed}}<span class="badge badge--passed">{{stats.passed}}</span>{{/if}}
+      {{#if stats.failed}}<span class="badge badge--failed">{{stats.failed}}</span>{{/if}}
+      {{#if stats.timedOut}}<span class="badge badge--timedout">{{stats.timedOut}}</span>{{/if}}
+      {{#if stats.skipped}}<span class="badge badge--skipped">{{stats.skipped}}</span>{{/if}}
+      {{#if stats.flaky}}<span class="badge badge--flaky">{{stats.flaky}}</span>{{/if}}
+    </span>
+  </div>
+  {{#if tests.length}}
+  <table>
+    <thead>
+      <tr>
+        <th>Test</th>
+        <th style="width:112px;">Status</th>
+        <th style="width:72px;">Duration</th>
+        {{#if @root.options.showRetries}}<th style="width:52px;">Retries</th>{{/if}}
+      </tr>
+    </thead>
+    <tbody>
+      {{#each tests}}
+      <tr class="no-break{{#if failure}} test-row--has-detail{{/if}}">
+        <td>
+          <div style="font-weight:500;">{{title}}</div>
+          {{#if location}}<div class="test-path">{{location}}</div>{{/if}}
+          {{#if tags.length}}
+          <div style="margin-top:3px;">
+            {{#each tags}}<code style="font-size:8.5px;background:var(--surface-3);color:var(--text-3);padding:1px 5px;border-radius:3px;margin-right:3px;border:1px solid var(--border);">{{this}}</code>{{/each}}
+          </div>
+          {{/if}}
+        </td>
+        <td style="white-space:nowrap;">
+          {{statusBadge status}}{{#if slowRank}}<span class="badge badge--slow" title="Among the slowest tests">SLOW</span>{{/if}}
+        </td>
+        <td style="color:var(--text-2);font-family:'JetBrains Mono',monospace;font-size:9.5px;">{{formatDuration duration}}</td>
+        {{#if @root.options.showRetries}}<td style="color:var(--text-3);text-align:center;">{{retryCount}}</td>{{/if}}
+      </tr>
+      {{#if failure}}
+      <tr class="failure-row">
+        <td colspan="{{#if @root.options.showRetries}}4{{else}}3{{/if}}">
+          <div class="failure-detail failure-detail--{{failure.severity}}">
+            <div class="failure-detail__head">
+              <span class="failure-detail__dot"></span>
+              <span class="failure-detail__sev">{{failure.severity}} severity</span>
+            </div>
+            {{> failure-card failure=failure showFull=@root.options.showFullFailures showStack=@root.options.showStackTraces}}
+            {{#if chip}}
+            <div class="root-cause-chip root-cause-chip--{{chip.category}}">
+              <span class="root-cause-chip__tag">Root cause</span>
+              <span class="root-cause-chip__label">{{categoryLabel chip.category}}</span>
+              <span class="root-cause-chip__msg">{{chip.message}}</span>
+              <span class="root-cause-chip__strength">{{strengthLabel chip.strength}} match</span>
+            </div>
+            {{/if}}
+          </div>
+        </td>
+      </tr>
+      {{/if}}
+      {{/each}}
+    </tbody>
+  </table>
+  {{/if}}
+  {{#each suites}}
+    <div style="padding-left:14px;border-left:1px solid var(--border);margin:4px 8px;">
+      {{> suite-node this}}
+    </div>
+  {{/each}}
+</div>
+{{/inline}}

package/dist/templates/partials/watermark.hbs

@@ -1,42 +1,42 @@
-{{#if meta.branding.watermark}}
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  // Chromium's print-to-PDF doesn't repeat position:fixed elements per page, so a
-  // single watermark div only ever prints on one page. Instead, measure the fully
-  // parsed document (this listener fires after all content above is in the DOM)
-  // and stamp one absolutely-positioned copy per page slot.
-  //
-  // Copies start at the suite breakdown, not page 1, so the summary/chart pages
-  // stay clean. That section opens on a forced page break (.section--suite-breakdown
-  // in base.css), which makes its top edge an exact page boundary — appending the
-  // copies INSIDE it keeps each one page-centred even when print pagination pushes
-  // in-flow content down, because the copies travel with the section rather than
-  // being estimated against shifted content. When the section is absent (sections
-  // override, custom templates), fall back to stamping the whole document.
-  var text = {{{safeJsonData meta.branding.watermark}}};
-  var pageHeightPx = {{watermarkPageHeightPx}};
-  var anchor = document.querySelector('.section--suite-breakdown');
-  var host = anchor || document.body;
-  var startPx = anchor ? anchor.offsetTop : 0;
-  // Copy count: ceil() of the measured span, NEVER padded in the anchor case — the
-  // anchor origin is page-aligned, so ceil is exact for unshifted content and every
-  // copy lands inside it (a padded copy would paint a blank trailing page with a
-  // lone watermark). Print pagination can still push content one page further than
-  // the screen measurement predicts (cards/rows refuse to split mid-way); in the
-  // anchor case that at worst leaves the final spill-over page unstamped, which is
-  // the cheaper failure. The body fallback keeps the +1: whole-document slack
-  // (cover break + every section) reliably exceeds a page, so there the pad fills
-  // a real page instead of minting an empty one.
-  var extra = anchor ? 0 : 1;
-  var pageCount = Math.min(500, Math.max(1, Math.ceil((document.body.scrollHeight - startPx) / pageHeightPx) + extra));
-  for (var i = 0; i < pageCount; i++) {
-    var el = document.createElement('div');
-    el.className = 'watermark';
-    el.setAttribute('aria-hidden', 'true');
-    el.style.top = (i * pageHeightPx + pageHeightPx / 2) + 'px';
-    el.textContent = text;
-    host.appendChild(el);
-  }
-});
-</script>
-{{/if}}
+{{#if meta.branding.watermark}}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Chromium's print-to-PDF doesn't repeat position:fixed elements per page, so a
+  // single watermark div only ever prints on one page. Instead, measure the fully
+  // parsed document (this listener fires after all content above is in the DOM)
+  // and stamp one absolutely-positioned copy per page slot.
+  //
+  // Copies start at the suite breakdown, not page 1, so the summary/chart pages
+  // stay clean. That section opens on a forced page break (.section--suite-breakdown
+  // in base.css), which makes its top edge an exact page boundary — appending the
+  // copies INSIDE it keeps each one page-centred even when print pagination pushes
+  // in-flow content down, because the copies travel with the section rather than
+  // being estimated against shifted content. When the section is absent (sections
+  // override, custom templates), fall back to stamping the whole document.
+  var text = {{{safeJsonData meta.branding.watermark}}};
+  var pageHeightPx = {{watermarkPageHeightPx}};
+  var anchor = document.querySelector('.section--suite-breakdown');
+  var host = anchor || document.body;
+  var startPx = anchor ? anchor.offsetTop : 0;
+  // Copy count: ceil() of the measured span, NEVER padded in the anchor case — the
+  // anchor origin is page-aligned, so ceil is exact for unshifted content and every
+  // copy lands inside it (a padded copy would paint a blank trailing page with a
+  // lone watermark). Print pagination can still push content one page further than
+  // the screen measurement predicts (cards/rows refuse to split mid-way); in the
+  // anchor case that at worst leaves the final spill-over page unstamped, which is
+  // the cheaper failure. The body fallback keeps the +1: whole-document slack
+  // (cover break + every section) reliably exceeds a page, so there the pad fills
+  // a real page instead of minting an empty one.
+  var extra = anchor ? 0 : 1;
+  var pageCount = Math.min(500, Math.max(1, Math.ceil((document.body.scrollHeight - startPx) / pageHeightPx) + extra));
+  for (var i = 0; i < pageCount; i++) {
+    var el = document.createElement('div');
+    el.className = 'watermark';
+    el.setAttribute('aria-hidden', 'true');
+    el.style.top = (i * pageHeightPx + pageHeightPx / 2) + 'px';
+    el.textContent = text;
+    host.appendChild(el);
+  }
+});
+</script>
+{{/if}}

package/dist/templates/styles/base.css

@@ -188,7 +188,7 @@ tr:last-child td { border-bottom: none; }
    blocks below stay glued together, and headings stick to the content beneath. */
 .section { margin-bottom: 24px; }
 .kpi-strip, .summary-row, .charts-grid, .release-gate, .flaky-callout,
-.trend-card, .flakiness-card, .env-grid {
+.trend-card, .flakiness-card, .env-grid, .run-diff__head {
   page-break-inside: avoid; break-inside: avoid;
 }
 h2, h3 { page-break-after: avoid; break-after: avoid; }
@@ -684,6 +684,24 @@ code {
   color: var(--text-1); line-height: 1.55;
 }
 
+/* ── Run diff — since-last-run counts + optional lists (sections.runDiff) ── */
+.run-diff__strip { font-size: 10.5px; }
+.run-diff__count strong { font-weight: 700; }
+.run-diff__count--new strong { color: var(--fail); }
+.run-diff__count--fixed strong { color: var(--pass); }
+.run-diff__count--still strong,
+.run-diff__count--neutral strong { color: var(--text-3); }
+.run-diff__baseline { font-size: 9.5px; color: var(--text-3); margin-top: 4px; }
+.run-diff__caveat { margin-top: 8px; }
+.run-diff__list { margin-top: 10px; }
+.run-diff__list-label {
+  font-size: 9px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
+  color: var(--text-2); margin-bottom: 4px;
+}
+.run-diff__list-item { font-size: 10px; color: var(--text-1); padding: 1px 0; }
+.run-diff__list-more { font-size: 9.5px; color: var(--text-3); padding: 1px 0; }
+.run-diff__footnote { font-size: 9.5px; color: var(--text-3); margin-top: 8px; }
+
 /* Charts grid + cards (available to any template via sections.charts) */
 .charts-grid {
   display: grid; grid-template-columns: 210px 1fr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportforge/playwright-pdf",
-  "version": "0.24.0",
+  "version": "0.26.1",
   "description": "Playwright Test reporter that generates designed PDF reports: minimal, detailed, and executive templates with CI/CD integrations",
   "license": "Elastic-2.0",
   "author": "ReportForge",
@@ -86,7 +86,6 @@
   "dependencies": {
     "@cantoo/pdf-lib": "^2.7.4",
     "chrome-finder": "^1.0.7",
-    "framer-motion": "^12.40.0",
     "glob": "^13.0.6",
     "handlebars": "^4.7.8",
     "sharp": "^0.35.3",