@reportforge/playwright-pdf 0.4.0 → 0.5.0

package/dist/templates/styles/base.css

@@ -149,14 +149,19 @@ tr:last-child td { border-bottom: none; }
 }
 
 /* ── Page breaks ────────────────────────────────────────────────────────── */
-.page-break { page-break-before: always; }
-.no-break   { page-break-inside: avoid; }
-.page-group { page-break-before: always; page-break-inside: avoid; break-inside: avoid; }
-.page-group > .section { page-break-inside: avoid; break-inside: avoid; }
-.page-group > .section:last-child { margin-bottom: 0; }
+.no-break { page-break-inside: avoid; }
 
 /* ── Section wrapper ────────────────────────────────────────────────────── */
-.section { margin-bottom: 24px; page-break-inside: avoid; }
+/* Large sections (suite breakdown, failures, tables) MAY flow across pages —
+   their rows carry .no-break so they never split mid-row. Only the small atomic
+   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, .cover-page__stats-strip, .env-grid {
+  page-break-inside: avoid; break-inside: avoid;
+}
+h2, h3 { page-break-after: avoid; break-after: avoid; }
+.suite-group__header { page-break-after: avoid; break-after: avoid; }
 
 /* ── Code / stack trace ─────────────────────────────────────────────────── */
 pre, code {
@@ -235,3 +240,236 @@ code {
 
 /* ── Failure-analysis one-liner — shared by detailed + executive templates ── */
 .analysis-oneliner { font-size: 0.9em; opacity: 0.9; margin-top: 4px; }
+
+/* ── Release gate — ship/hold banner, shared by all templates ────────────── */
+.release-gate {
+  display: flex; align-items: center; gap: 16px;
+  padding: 16px 20px; border-radius: 6px; margin-bottom: 22px;
+  border: 1px solid;
+  position: relative; overflow: hidden;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+.release-gate--pass {
+  background: var(--pass-dim); border-color: #C5DBC9;
+}
+.release-gate--fail {
+  background: var(--fail-dim); border-color: #E5C9BD;
+}
+.release-gate__icon {
+  font-size: 22px; font-weight: 700; flex-shrink: 0; width: 32px;
+  text-align: center; line-height: 1;
+}
+.release-gate--pass .release-gate__icon { color: var(--pass); }
+.release-gate--fail .release-gate__icon { color: var(--fail); }
+.release-gate__body { flex: 1; }
+.release-gate__label {
+  font-family: 'Inter', system-ui, sans-serif; font-size: 8px;
+  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
+  color: var(--text-3); margin-bottom: 4px;
+}
+.release-gate__verdict {
+  font-family: 'Source Serif Pro', Georgia, serif;
+  font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.1;
+}
+.release-gate__verdict--pass { color: var(--pass); }
+.release-gate__verdict--fail { color: var(--fail); }
+.release-gate__detail {
+  font-family: 'Inter', system-ui, sans-serif; font-size: 10px;
+  color: var(--text-2); margin-top: 4px;
+}
+.release-gate__meta {
+  display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
+  font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-3);
+  flex-shrink: 0; text-align: right;
+}
+.release-gate__sep { color: var(--border-3); }
+.release-gate__flaky-warn { color: var(--flaky); font-weight: 600; }
+
+/* ── Failure severity — colour the card's left edge by triage rank ───────── */
+/* Two-class specificity beats the per-template `.failure-item` border shorthand. */
+.failure-item.failure-item--critical { border-left-color: var(--fail); }
+.failure-item.failure-item--high     { border-left-color: #A35E1E; }
+.failure-item.failure-item--medium   { border-left-color: var(--timeout); }
+.failure-item.failure-item--low      { border-left-color: var(--text-3); }
+
+/* ── History trend card — shared by detailed + executive (charts.hbs) ─────── */
+.trend-card {
+  background: var(--surface);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  padding: 16px 18px 14px;
+  margin-bottom: 24px;
+  page-break-inside: avoid;
+}
+.trend-card__header {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 14px;
+}
+.trend-card__title {
+  font-family: 'Inter', system-ui, sans-serif;
+  font-size: 9px; font-weight: 700;
+  letter-spacing: 1.2px; text-transform: uppercase;
+  color: var(--text-3);
+}
+.delta       { font-size: 11px; font-weight: 700; }
+.delta-up    { color: var(--pass); }
+.delta-down  { color: var(--fail); }
+
+/* ── Run history table (generated by JS) ─────────────────────────────────── */
+.trend-run-history {
+  margin-top: 10px;
+  border-top: 1px solid var(--border);
+  padding-top: 8px;
+}
+.rh-item {
+  display: flex; align-items: center; gap: 12px;
+  padding: 5px 8px; border-radius: 4px;
+  font-size: 9px; font-family: 'Inter', system-ui, sans-serif;
+}
+.rh-item:nth-child(odd) {
+  background: var(--surface-2);
+  -webkit-print-color-adjust: exact; print-color-adjust: exact;
+}
+.rh-dot      { flex-shrink: 0; }
+.rh-date     { color: var(--text-2); flex: 1; }
+.rh-rate     { font-weight: 700; min-width: 34px; color: var(--text-1); }
+.rh-rate--pass    { color: var(--pass); }
+.rh-rate--fail    { color: var(--fail); }
+.rh-rate--partial { color: var(--flaky); }
+.rh-tests    { color: var(--text-3); min-width: 58px; }
+.rh-dur      { color: var(--text-3); }
+
+/* ── Verdict dots (used in run history rh-dot) ───────────────────────────── */
+.verdict-dot     { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.verdict-passed  { background: var(--pass);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+.verdict-partial { background: var(--flaky); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+.verdict-failed  { background: var(--fail);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+.verdict-unknown { background: var(--skip);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+/* ── Flakiness trend table (R8) ─────────────────────────────────────────── */
+.flakiness-card {
+  margin: 24px 0 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.flakiness-card__header {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+}
+
+.flakiness-card__title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-3);
+}
+
+.flakiness-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+
+.flakiness-table thead th {
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-3);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-2);
+}
+
+.flakiness-table tbody tr {
+  border-bottom: 1px solid var(--border);
+}
+
+.flakiness-table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.flakiness-table tbody td {
+  padding: 8px 12px;
+  vertical-align: middle;
+  color: var(--text-1);
+}
+
+.flakiness-table__test {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flakiness-table__rate {
+  width: 72px;
+  font-weight: 600;
+  color: var(--flaky);
+}
+
+.flakiness-table__count {
+  width: 72px;
+  color: var(--text-3);
+}
+
+.flakiness-table__spark {
+  width: 140px;
+}
+
+.flaky-spark {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+}
+
+.flaky-dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--border, #e5e3d8);
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+}
+
+.flaky-dot--hit {
+  background: #f59e0b;
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+}
+
+/* ── Environment grid — compact ci-environment, shared by minimal + executive ─ */
+.env-grid {
+  display: grid; grid-template-columns: 1fr 1fr;
+  gap: 0;
+  background: var(--surface);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.env-item {
+  display: flex; gap: 12px; font-size: 10.5px; align-items: baseline;
+  padding: 10px 18px;
+  border-bottom: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+}
+.env-item:nth-child(even) { border-right: none; }
+.env-item:nth-last-child(-n+2) { border-bottom: none; }
+.env-item__key {
+  font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
+  font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase;
+  color: var(--text-2); min-width: 80px;
+}
+.env-item__val {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px; color: var(--text-1);
+}

package/dist/templates/styles/detailed.css

@@ -57,7 +57,7 @@
 
 /* ── KPI strip ───────────────────────────────────────────────────────────── */
 .kpi-strip {
-  display: grid; grid-template-columns: repeat(5, 1fr);
+  display: grid; grid-template-columns: repeat(6, 1fr);
   gap: 10px; margin-bottom: 22px;
 }
 .kpi-card {
@@ -74,6 +74,7 @@
 .kpi-card--total::before { background: var(--accent); }
 .kpi-card--pass::before  { background: var(--pass); }
 .kpi-card--fail::before  { background: var(--fail); }
+.kpi-card--timedout::before { background: var(--timeout); }
 .kpi-card--skip::before  { background: var(--skip); }
 .kpi-card--flaky::before { background: var(--flaky); }
 
@@ -87,6 +88,7 @@
 .kpi-card--total .kpi-card__value { color: var(--info); }
 .kpi-card--pass  .kpi-card__value { color: var(--pass); }
 .kpi-card--fail  .kpi-card__value { color: var(--fail); }
+.kpi-card--timedout .kpi-card__value { color: var(--timeout); }
 .kpi-card--skip  .kpi-card__value { color: var(--skip); }
 .kpi-card--flaky .kpi-card__value { color: var(--flaky); }
 
@@ -230,10 +232,12 @@
 }
 .coverage-bar__fill {
   height: 100%; border-radius: 3px;
-  background: var(--pass);
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 }
+.coverage-bar__fill--low  { background: var(--fail); }
+.coverage-bar__fill--mid  { background: var(--timeout); }
+.coverage-bar__fill--high { background: var(--pass); }
 
 /* ── Environment table ───────────────────────────────────────────────────── */
 .env-table {
@@ -254,160 +258,6 @@
   font-size: 9.5px; color: var(--text-1);
 }
 
-/* ── History trend card ──────────────────────────────────────────────────── */
-.trend-card {
-  background: var(--surface);
-  border: 1px solid var(--border-2);
-  border-radius: 6px;
-  padding: 16px 18px 14px;
-  margin-bottom: 24px;
-  page-break-inside: avoid;
-}
-.trend-card__header {
-  display: flex; align-items: center; justify-content: space-between;
-  margin-bottom: 14px;
-}
-.trend-card__title {
-  font-family: 'Inter', system-ui, sans-serif;
-  font-size: 9px; font-weight: 700;
-  letter-spacing: 1.2px; text-transform: uppercase;
-  color: var(--text-3);
-}
-.delta       { font-size: 11px; font-weight: 700; }
-.delta-up    { color: var(--pass); }
-.delta-down  { color: var(--fail); }
-
-/* ── Run history table (generated by JS) ─────────────────────────────────── */
-.trend-run-history {
-  margin-top: 10px;
-  border-top: 1px solid var(--border);
-  padding-top: 8px;
-}
-.rh-item {
-  display: flex; align-items: center; gap: 12px;
-  padding: 5px 8px; border-radius: 4px;
-  font-size: 9px; font-family: 'Inter', system-ui, sans-serif;
-}
-.rh-item:nth-child(odd) {
-  background: var(--surface-2);
-  -webkit-print-color-adjust: exact; print-color-adjust: exact;
-}
-.rh-dot      { flex-shrink: 0; }
-.rh-date     { color: var(--text-2); flex: 1; }
-.rh-rate     { font-weight: 700; min-width: 34px; color: var(--text-1); }
-.rh-rate--pass    { color: var(--pass); }
-.rh-rate--fail    { color: var(--fail); }
-.rh-rate--partial { color: var(--flaky); }
-.rh-tests    { color: var(--text-3); min-width: 58px; }
-.rh-dur      { color: var(--text-3); }
-
-/* ── Verdict dots (used in run history rh-dot) ───────────────────────────── */
-.verdict-dot     { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-.verdict-passed  { background: var(--pass);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-.verdict-partial { background: var(--flaky); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-.verdict-failed  { background: var(--fail);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-.verdict-unknown { background: var(--skip);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-
-/* ── Flakiness trend table (R8) ─────────────────────────────────────────── */
-.flakiness-card {
-  margin: 24px 0 0;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.flakiness-card__header {
-  display: flex;
-  align-items: center;
-  padding: 10px 16px;
-  background: var(--surface-2);
-  border-bottom: 1px solid var(--border);
-}
-
-.flakiness-card__title {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-3);
-}
-
-.flakiness-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 11px;
-}
-
-.flakiness-table thead th {
-  padding: 8px 12px;
-  text-align: left;
-  font-weight: 600;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-3);
-  border-bottom: 1px solid var(--border);
-  background: var(--surface-2);
-}
-
-.flakiness-table tbody tr {
-  border-bottom: 1px solid var(--border);
-}
-
-.flakiness-table tbody tr:last-child {
-  border-bottom: none;
-}
-
-.flakiness-table tbody td {
-  padding: 8px 12px;
-  vertical-align: middle;
-  color: var(--text-1);
-}
-
-.flakiness-table__test {
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.flakiness-table__rate {
-  width: 72px;
-  font-weight: 600;
-  color: var(--flaky);
-}
-
-.flakiness-table__count {
-  width: 72px;
-  color: var(--text-3);
-}
-
-.flakiness-table__spark {
-  width: 140px;
-}
-
-.flaky-spark {
-  display: flex;
-  gap: 3px;
-  align-items: center;
-}
-
-.flaky-dot {
-  flex-shrink: 0;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--border, #e5e3d8);
-  print-color-adjust: exact;
-  -webkit-print-color-adjust: exact;
-}
-
-.flaky-dot--hit {
-  background: #f59e0b;
-  print-color-adjust: exact;
-  -webkit-print-color-adjust: exact;
-}
-
 /* ── Failure Analysis ───────────────────────────────────────────────────── */
 /* NOTE: .analysis-oneliner lives in base.css — the executive template renders it too. */
 .failure-analysis { margin-top: 24px; }
@@ -428,6 +278,3 @@
 .cluster--env-config        { border-color: oklch(55% 0.15 145); }
 .cluster--unknown           { border-color: oklch(60% 0.00 0);   }
 .confidence-warning { font-size: 0.8em; opacity: 0.75; }
-
-</content>
-</invoke>

package/dist/templates/styles/executive.css

@@ -117,7 +117,7 @@
 
 /* ── KPI dashboard ─────────────────────────────────────────────────────── */
 .kpi-strip {
-  display: grid; grid-template-columns: repeat(5, 1fr);
+  display: grid; grid-template-columns: repeat(6, 1fr);
   gap: 10px; margin-bottom: 22px;
 }
 .kpi-card {
@@ -134,6 +134,7 @@
 .kpi-card--total::before { background: var(--accent); }
 .kpi-card--pass::before  { background: var(--pass); }
 .kpi-card--fail::before  { background: var(--fail); }
+.kpi-card--timedout::before { background: var(--timeout); }
 .kpi-card--skip::before  { background: var(--skip); }
 .kpi-card--flaky::before { background: var(--flaky); }
 
@@ -147,6 +148,7 @@
 .kpi-card--total .kpi-card__value { color: var(--info); }
 .kpi-card--pass  .kpi-card__value { color: var(--pass); }
 .kpi-card--fail  .kpi-card__value { color: var(--fail); }
+.kpi-card--timedout .kpi-card__value { color: var(--timeout); }
 .kpi-card--skip  .kpi-card__value { color: var(--skip); }
 .kpi-card--flaky .kpi-card__value { color: var(--flaky); }
 .kpi-card__label {
@@ -257,78 +259,3 @@
   font-family: 'JetBrains Mono', monospace;
   padding-left: 6px;
 }
-
-/* ── Environment grid ────────────────────────────────────────────────────── */
-.env-grid {
-  display: grid; grid-template-columns: 1fr 1fr;
-  gap: 0;
-  background: var(--surface);
-  border: 1px solid var(--border-2);
-  border-radius: 6px;
-  overflow: hidden;
-}
-.env-item {
-  display: flex; gap: 12px; font-size: 10.5px; align-items: baseline;
-  padding: 10px 18px;
-  border-bottom: 1px solid var(--border);
-  border-right: 1px solid var(--border);
-}
-.env-item:nth-child(even) { border-right: none; }
-.env-item:nth-last-child(-n+2) { border-bottom: none; }
-.env-item__key {
-  font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
-  font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase;
-  color: var(--text-2); min-width: 80px;
-}
-.env-item__val {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 9.5px; color: var(--text-1);
-}
-
-/* ── Release gate ────────────────────────────────────────────────────────── */
-.release-gate {
-  display: flex; align-items: center; gap: 16px;
-  padding: 16px 20px; border-radius: 6px; margin-bottom: 22px;
-  border: 1px solid;
-  position: relative; overflow: hidden;
-  -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
-}
-.release-gate--pass {
-  background: var(--pass-dim); border-color: #C5DBC9;
-}
-.release-gate--fail {
-  background: var(--fail-dim); border-color: #E5C9BD;
-}
-.release-gate__icon {
-  font-size: 22px; font-weight: 700; flex-shrink: 0; width: 32px;
-  text-align: center; line-height: 1;
-}
-.release-gate--pass .release-gate__icon { color: var(--pass); }
-.release-gate--fail .release-gate__icon { color: var(--fail); }
-.release-gate__body { flex: 1; }
-.release-gate__label {
-  font-family: 'Inter', system-ui, sans-serif; font-size: 8px;
-  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
-  color: var(--text-3); margin-bottom: 4px;
-}
-.release-gate__verdict {
-  font-family: 'Source Serif Pro', Georgia, serif;
-  font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.1;
-}
-.release-gate__verdict--pass { color: var(--pass); }
-.release-gate__verdict--fail { color: var(--fail); }
-.release-gate__detail {
-  font-family: 'Inter', system-ui, sans-serif; font-size: 10px;
-  color: var(--text-2); margin-top: 4px;
-}
-.release-gate__meta {
-  display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
-  font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-3);
-  flex-shrink: 0; text-align: right;
-}
-.release-gate__sep { color: var(--border-3); }
-.release-gate__flaky-warn { color: var(--flaky); font-weight: 600; }
-
-</content>
-</invoke>

package/dist/templates/styles/minimal.css

@@ -61,7 +61,7 @@
 /* ── KPI strip ───────────────────────────────────────────────────────────── */
 .kpi-strip {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(6, 1fr);
   gap: 10px; margin-bottom: 22px;
 }
 .kpi-card {
@@ -79,6 +79,7 @@
 .kpi-card--total::before { background: var(--accent); }
 .kpi-card--pass::before  { background: var(--pass); }
 .kpi-card--fail::before  { background: var(--fail); }
+.kpi-card--timedout::before { background: var(--timeout); }
 .kpi-card--skip::before  { background: var(--skip); }
 .kpi-card--flaky::before { background: var(--flaky); }
 
@@ -92,6 +93,7 @@
 .kpi-card--total .kpi-card__value { color: var(--info); }
 .kpi-card--pass  .kpi-card__value { color: var(--pass); }
 .kpi-card--fail  .kpi-card__value { color: var(--fail); }
+.kpi-card--timedout .kpi-card__value { color: var(--timeout); }
 .kpi-card--skip  .kpi-card__value { color: var(--skip); }
 .kpi-card--flaky .kpi-card__value { color: var(--flaky); }
 
@@ -204,5 +206,3 @@
 }
 .retry-attempt--failed { background: var(--fail-dim); color: var(--fail); border: 1px solid #E5C9BD; }
 .retry-attempt--passed { background: var(--pass-dim); color: var(--pass); border: 1px solid #C5DBC9; }
-</content>
-</invoke>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportforge/playwright-pdf",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Enterprise-ready PDF reports for Playwright Test — minimal, detailed, and executive templates with CI/CD integrations",
   "license": "MIT",
   "author": "ReportForge",