playwright-reborn 0.2.2 → 0.2.3

package/dist/status.js

@@ -9,12 +9,12 @@ exports.summaryLine = summaryLine;
 function displayStatus(pwOutcome, status) {
     if (pwOutcome === 'flaky')
         return 'flaky';
+    if (status === 'interrupted')
+        return 'interrupted';
     if (pwOutcome === 'skipped' || status === 'skipped')
         return 'skipped';
     if (status === 'timedOut')
         return 'timedOut';
-    if (status === 'interrupted')
-        return 'interrupted';
     if (pwOutcome === 'unexpected')
         return 'failed';
     if (status === 'failed')
@@ -62,8 +62,8 @@ function summaryLine(counts) {
         return counts.passed === 1 ? '1 passed.' : `${counts.passed} passed.`;
     }
     if (problems.length === 0) {
-        return `${counts.passed} passed, ${counts.skipped} skipped. ${counts.total} ran.`;
+        return `${counts.passed} passed, ${counts.skipped} skipped. ${counts.total} tests.`;
     }
-    return `${problems.join(', ')}. ${counts.total} ran.`;
+    return `${problems.join(', ')}. ${counts.total} tests.`;
 }
 //# sourceMappingURL=status.js.map

package/dist/status.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.js","sourceRoot":"","sources":["../src/status.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"status.js","sourceRoot":"","sources":["../src/status.ts"],"names":[],"mappings":"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"}

package/dist/ui/report.css

@@ -3,7 +3,7 @@
   src: url("fonts/geist-latin-400-normal.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 @font-face {
@@ -11,7 +11,7 @@
   src: url("fonts/geist-latin-500-normal.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 @font-face {
@@ -19,7 +19,7 @@
   src: url("fonts/geist-latin-600-normal.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 @font-face {
@@ -27,25 +27,25 @@
   src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 :root {
   color-scheme: dark;
   --base: #080808;
   --surface: #111111;
-  --border: #1a1a1a;
+  --border: #2b302e;
   --text: #f0f0f0;
-  --subtle: #888888;
+  --subtle: #a2aaa6;
   --accent: #00ff88;
   --accent-hover: #00cf6e;
   --wash: rgba(0, 255, 136, 0.16);
   --hairline: rgba(255, 255, 255, 0.08);
-  --pass: rgba(255, 255, 255, 0.22);
-  --fail: #00ff88;
-  --flaky: rgba(0, 255, 136, 0.45);
+  --pass: #96cbb0;
+  --fail: #ff8989;
+  --flaky: #edc66f;
   --skip: #888888;
-  --timeout: #00ff88;
+  --timeout: #edc66f;
   --interrupted: #888888;
   --sans: Geist, "Segoe UI", sans-serif;
   --display: Geist, "Segoe UI", sans-serif;
@@ -57,32 +57,24 @@ body[data-accent="red"] {
   --accent: #ff4d4d;
   --accent-hover: #e03b3b;
   --wash: rgba(255, 77, 77, 0.16);
-  --fail: #ff4d4d;
-  --timeout: #ff4d4d;
 }
 
 body[data-accent="blue"] {
   --accent: #4da3ff;
   --accent-hover: #2f86e0;
   --wash: rgba(77, 163, 255, 0.16);
-  --fail: #4da3ff;
-  --timeout: #4da3ff;
 }
 
 body[data-accent="amber"] {
   --accent: #ffb020;
   --accent-hover: #e09610;
   --wash: rgba(255, 176, 32, 0.16);
-  --fail: #ffb020;
-  --timeout: #ffb020;
 }
 
 body[data-accent="violet"] {
   --accent: #b07cff;
   --accent-hover: #945fe0;
   --wash: rgba(176, 124, 255, 0.16);
-  --fail: #b07cff;
-  --timeout: #b07cff;
 }
 
 * { box-sizing: border-box; }
@@ -91,7 +83,7 @@ body[data-accent="violet"] {
 
 body {
   margin: 0;
-  background: #050806;
+  background: var(--base);
   color: var(--text);
   font-family: var(--sans);
   font-size: 15px;
@@ -109,16 +101,12 @@ body {
   background: var(--accent);
   color: #080808;
   padding: 8px 12px;
-  z-index: 2;
+  z-index: 10;
 }
 
 .skip:focus { top: 12px; }
 
-.page {
-  width: min(1120px, calc(100% - 48px));
-  margin: 0 auto;
-  padding: 28px 0 64px;
-}
+
 
 button, input { font: inherit; color: inherit; }
 button { cursor: pointer; }
@@ -216,9 +204,7 @@ button { cursor: pointer; }
   color: var(--text);
 }
 
-.word[data-status="failed"],
-.word[data-status="timedOut"],
-.word[data-status="interrupted"] { color: var(--text); }
+
 
 .product {
   margin: 10px 0 0;
@@ -229,15 +215,7 @@ button { cursor: pointer; }
   line-height: 1.15;
 }
 
-.time {
-  margin: 0;
-  font-weight: 500;
-  font-size: clamp(48px, 7vw, 64px);
-  line-height: 1;
-  letter-spacing: -0.04em;
-  color: var(--accent);
-  font-variant-numeric: tabular-nums;
-}
+
 
 .summary {
   flex-basis: 100%;
@@ -659,8 +637,8 @@ button { cursor: pointer; }
 
 .detail {
   position: sticky;
-  top: 18px;
-  max-height: calc(100vh - 36px);
+  top: 76px;
+  max-height: calc(100vh - 94px);
   overflow: auto;
   padding: 18px 0 24px 28px;
   background: transparent;
@@ -942,7 +920,8 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   .find-wrap { margin-left: 0; width: 100%; }
   .find { width: 100%; }
   .split { grid-template-columns: 1fr; }
-  .detail { position: static; max-height: none; padding-left: 0; }
+  .detail { position: static; max-height: none; padding-left: 0; border-top: 1px solid var(--border); }
+  #tests { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
 }
 
 .atmosphere {
@@ -950,7 +929,7 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   inset: 0;
   z-index: 0;
   pointer-events: none;
-  background: #050806;
+  background: var(--base);
   overflow: hidden;
 }
 
@@ -963,6 +942,7 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   height: 100%;
   display: block;
   filter: blur(18px) saturate(1.05);
+  opacity: 0.3;
   -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 34%, transparent 52%);
   mask-image: linear-gradient(180deg, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 34%, transparent 52%);
 }
@@ -970,7 +950,7 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 .grain {
   position: absolute;
   inset: -20%;
-  opacity: 0.07;
+  opacity: 0.035;
   mix-blend-mode: overlay;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
   background-size: 180px 180px;
@@ -1007,9 +987,11 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   flex-direction: row;
   align-items: center;
   gap: 28px;
-  padding: 12px 16px;
+  padding: 12px clamp(20px, 3vw, 48px);
   border-right: 0;
-  background: linear-gradient(180deg, rgba(5, 8, 6, 0.72), rgba(5, 8, 6, 0.35) 70%, rgba(5, 8, 6, 0));
+  background: rgba(8, 8, 8, 0.9);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--hairline);
   transition: transform 220ms ease;
 }
 
@@ -1019,11 +1001,15 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 }
 
 .rail .meta { margin: 0 0 0 auto; flex-direction: row; gap: 16px; justify-content: flex-end; text-align: right; }
-.rail .meta span { white-space: nowrap; }
+.rail .meta { min-width: 0; }
+.rail .meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
 
 .rail .tabbar {
   flex-direction: row;
   align-items: center;
+  width: auto;
+  flex: 1;
+  min-width: 0;
   gap: 22px;
   margin: 0;
   padding: 0;
@@ -1043,21 +1029,22 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 }
 
 .stage {
-  width: 100%;
-  margin: 0;
-  padding: 20px 16px 48px;
+  width: min(1440px, 100%);
+  margin: 0 auto;
+  padding: 24px clamp(20px, 3vw, 48px) 48px;
 }
 
 .hero { margin: 8px 0 28px; }
 
 .word {
-  font-size: clamp(64px, 8vw, 96px);
+  font-size: clamp(42px, 6vw, 80px);
   font-weight: 500;
   letter-spacing: -0.045em;
-  max-width: 14ch;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
 
-.time { display: none; }
+
 
 #panel-tests,
 #panel-screenshots,
@@ -1176,17 +1163,86 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 }
 
 @media (max-width: 800px) {
-  .rail { flex-wrap: wrap; gap: 12px 18px; padding: 16px; }
+  .rail { flex-wrap: wrap; gap: 12px 18px; padding: 8px 16px; }
   .rail .meta { display: none; }
-  .rail .tabbar { flex-wrap: wrap; width: 100%; }
+  .rail .tabbar { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 20px; }
+  .rail .tab { flex: 0 0 auto; min-height: 44px; }
   .stage { width: 100%; padding: 12px 16px 40px; }
   #legend.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .charts { grid-template-columns: 1fr; }
+  .pie { width: 180px; margin: 0 auto; }
   #legend .count { border-right: 0; }
   .evidence { grid-template-columns: 1fr; }
-  .hero { margin: 24px 0 32px; }
+  .hero { margin: 12px 0 28px; }
+  .run-state { margin: 12px 0 0; }
+  .count, .tag-btn, .project-btn, .order-btn, .band-clear, .view, .subtab, .attempt, .open-test, .more, .reset-filters { min-height: 40px; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .hero, .strip-window, .bands, .grain, .rail { animation: none; transition: none; }
 }
+
+/* State colors communicate outcomes independently of the chosen brand accent. */
+.run-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  margin: 4px 0 0;
+  padding: 6px 12px;
+  border: 1px solid currentColor;
+  border-radius: 20px;
+  font-size: 13px;
+  color: var(--subtle);
+}
+.run-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.run-state[data-status="passed"] { color: var(--pass); }
+.run-state[data-status="failed"] { color: var(--fail); }
+.run-state[data-status="timedout"], .run-state[data-status="interrupted"] { color: var(--timeout); }
+.sw[data-status="passed"] { color: var(--pass); }
+.sw[data-status="failed"], .sw[data-status="timedOut"] { color: var(--fail); }
+.sw[data-status="flaky"] { color: var(--flaky); }
+.row[data-status="failed"], .row[data-status="timedOut"] { border-left-color: var(--fail); }
+.row[data-status="flaky"] { border-left-color: var(--flaky); }
+.run-fill[data-status="failed"], .run-fill[data-status="timedOut"] { background: var(--fail); }
+.run-fill[data-status="flaky"] { background: var(--flaky); }
+.run-row[data-status="failed"], .run-row[data-status="timedOut"] { box-shadow: inset 2px 0 0 var(--fail); }
+.run-row[data-status="flaky"] { box-shadow: inset 2px 0 0 var(--flaky); }
+#legend .count[data-status="failed"] .n, #legend .count[data-status="timedOut"] .n { color: var(--fail); }
+#legend .count[data-status="flaky"] .n { color: var(--flaky); }
+#legend .count[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
+#legend.legend { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
+.charts:has(> .bars:only-child) { grid-template-columns: 1fr; }
+.hero > div, .info-row, .file-row, .row-meta, .stage, .rail, .detail { min-width: 0; }
+.info dd, .where, .file-name, .tile-title, .tile-meta, .now-file, .detail h2, .file-group h3, .step, .row-meta { overflow-wrap: anywhere; }
+.row-meta { flex-wrap: wrap; gap: 2px 12px; }
+.band { padding: 6px 0; }
+.band:hover .band-label { color: var(--text); }
+.find { padding: 8px 10px; border: 1px solid var(--border); background: rgba(8, 8, 8, 0.65); border-radius: 6px; }
+.find:focus { border-color: var(--accent); }
+.list-summary { display: flex; align-items: center; gap: 16px; margin: 18px 0 10px; color: var(--subtle); font-size: 13px; }
+.reset-filters { background: none; border: 0; color: var(--accent); padding: 4px 0; }
+.split { grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); }
+#tests { padding-right: 16px; }
+.detail { border-left: 1px solid var(--border); }
+.row { padding: 12px; border-left-width: 2px; border-radius: 0 4px 4px 0; }
+.row[aria-current="true"] { background: var(--wash); }
+.error { border-left-color: var(--fail); }
+.step.bad .mark { background: var(--fail); }
+.gallery .tile { border-radius: 8px; background: rgba(17, 17, 17, 0.6); }
+.tile img { object-fit: contain; background: var(--base); }
+.well pre { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
+dialog { border: 1px solid var(--border); border-radius: 8px; padding: 12px; max-height: 95vh; }
+dialog img { max-width: calc(92vw - 26px); object-fit: contain; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+@media (max-width: 800px) {
+  .split { grid-template-columns: minmax(0, 1fr); }
+  .detail { border-left: 0; padding-top: 20px; }
+  #tests { padding-right: 0; }
+  #legend.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .info { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
+  .run-state { margin-top: 12px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; }
+}