From 081f71ba1cd293b81bb2d5b3879d371eeb59860f Mon Sep 17 00:00:00 2001
From: Timur Mashara <62305878+tmashara@users.noreply.github.com>
Date: Fri, 30 Oct 2026 10:28:28 +0100
Subject: [PATCH] Slider view in report.html

A sidebar "Slider view" toggle swaps each card's left/right/diff images for
both shots stacked with tops aligned and a full-height range input as the
divider, so a few-pixel shift can be dragged across in place.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/output.md            |  4 +++-
 src/report.ts             | 22 +++++++++++++++++++++-
 tests/unit/report.test.ts | 14 ++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/docs/output.md b/docs/output.md
index 99d4a4d..8c682bc 100644
--- a/docs/output.md
+++ b/docs/output.md
@@ -310,7 +310,9 @@ any difference fails, so there is no amber. The summary on top counts routes, sh
 differing shots, errors, accepted and stale accepted; gives the mean and the worst score,
 linked to its card; and lists only the differing shots, by route. Findings repeated on two
 or more routes, and with `--computed` the style findings, sit collapsed under it. Then a
-card per shot, lowest score first.
+card per shot, lowest score first, showing left, right and diff side by side; the sidebar's
+**Slider view** toggle swaps those for both shots stacked, tops aligned, with a divider you
+drag anywhere on the shot to reveal left on one side and right on the other.
 
 ## evidence.html
 
diff --git a/src/report.ts b/src/report.ts
index c8c21e4..9e52ca5 100644
--- a/src/report.ts
+++ b/src/report.ts
@@ -313,6 +313,7 @@ function sidebar(results: RouteResult[], threshold: number | null): string {
   <span class="ws">${shots.map((r) => shotLink(r, threshold)).join("")}</span></li>`;
   });
   return `<nav class="side">
+<label><input id="slide" type="checkbox"> Slider view</label>
 <input id="q" type="search" aria-label="Filter routes" placeholder="Filter ${routes.size} route(s)" autocomplete="off">
 <ul id="routes">
 ${items.join("\n")}
@@ -324,6 +325,9 @@ ${items.join("\n")}
     const v = q.value.trim().toLowerCase();
     for (const li of document.querySelectorAll("#routes li")) li.hidden = !li.dataset.route.includes(v);
   };
+  document.addEventListener("input", (e) => {
+    if (e.target.type === "range") e.target.parentNode.style.setProperty("--x", e.target.value + "%");
+  });
 </script>`;
 }
 
@@ -470,6 +474,11 @@ function card(r: ComparedResult): string {
     <figure><figcaption>right</figcaption><a href="${imgs.right}" target="_blank"><img loading="lazy" src="${imgs.right}"></a></figure>
     <figure><figcaption>diff</figcaption><a href="${imgs.diff}" target="_blank"><img loading="lazy" src="${imgs.diff}"></a></figure>
   </div>
+  <div class="slider" style="--x:50%">
+    <img loading="lazy" src="${imgs.right}">
+    <div class="l"><img loading="lazy" src="${imgs.left}"></div>
+    <input type="range" value="50" aria-label="Divider: left shot on the left, right shot on the right">
+  </div>
 </article>`;
 }
 
@@ -516,7 +525,7 @@ const REPORT_STYLE = `<style>
   main { padding:2rem; min-width:0 }
   .side { position:sticky; top:0; height:100vh; overflow:auto; padding:1rem;
           border-right:1px solid var(--line); font-size:12px }
-  .side input { width:100%; padding:.35rem .5rem; margin-bottom:.5rem; font:inherit; color:var(--fg);
+  .side #q { width:100%; padding:.35rem .5rem; margin-bottom:.5rem; font:inherit; color:var(--fg);
                 background:var(--card); border:1px solid var(--line); border-radius:4px }
   .side ul { list-style:none; padding:0; margin:0 }
   .side li { padding:.3rem 0; border-bottom:1px solid var(--line) }
@@ -528,6 +537,17 @@ const REPORT_STYLE = `<style>
   .summary .differs { font-size:13px; padding-left:0; list-style:none }
   .card { scroll-margin-top:1rem }
   .card:target { outline:2px solid #509ee3 }
+  .side label { display:block; margin-bottom:.5rem }
+  body:has(#slide:checked) .grid, body:not(:has(#slide:checked)) .slider { display:none }
+  /* ponytail: both shots fit the card width, so a width delta scales them apart */
+  .slider { display:grid; position:relative }
+  .slider > * { grid-area:1/1; align-self:start }
+  .slider .l { clip-path:inset(0 calc(100% - var(--x)) 0 0) }
+  .slider input { appearance:none; align-self:stretch; width:100%; height:100%; margin:0;
+                  opacity:0; cursor:ew-resize }
+  .slider::after { content:""; position:absolute; top:0; bottom:0; left:var(--x); width:2px;
+                   margin-left:-1px; background:#509ee3; pointer-events:none }
+  .slider:focus-within { outline:2px solid #509ee3 }
   @media (max-width:900px) {
     body { display:block }
     .side { position:static; height:auto; max-height:40vh; border-right:0; border-bottom:1px solid var(--line) }
diff --git a/tests/unit/report.test.ts b/tests/unit/report.test.ts
index 03fe409..072906a 100644
--- a/tests/unit/report.test.ts
+++ b/tests/unit/report.test.ts
@@ -218,6 +218,20 @@ describe("writeReport", () => {
     assert.match(route(html, "/Docs"), /href="#Docs\.1440"/);
   });
 
+  test("a sidebar toggle swaps each card's three images for a left/right slider", async () => {
+    const html = await report([at("/a", 1440)]);
+    assert.match(html, /<input id="slide" type="checkbox">/);
+    const card = html.match(/<article class="card"[\s\S]*?<\/article>/)![0];
+    assert.match(
+      card,
+      /<div class="slider"[^>]*>\s*<img[^>]*src="a\.1440\.right\.png">\s*<div class="l"><img[^>]*src="a\.1440\.left\.png"><\/div>\s*<input type="range"/,
+    );
+    assert.deepEqual(
+      [...card.matchAll(/<a href="([^"]+)"/g)].map((m) => m[1]),
+      ["a.1440.left.png", "a.1440.right.png", "a.1440.diff.png"],
+    );
+  });
+
   test("the filter box filters lowercased route names, client-side", async () => {
     const html = await report([at("/Docs", 1440)]);
     assert.match(