@myrtilleio/redline 0.1.0

package/client/references.js

@@ -0,0 +1,114 @@
+// ---------------------------------------------------------------- references
+
+// "Make it feel like this": the reviewer pastes, drops or picks an image (a
+// screenshot of a site they like, a sketch) and attaches it to a note.
+
+const MAX_REF_SIDE = 1400;
+
+function assetSrc(ref) {
+  if (!ref) return '';
+  if (ref.data) return ref.data;
+  return withKey((SERVER || '') + '/__redline/files/' + ref.path);
+}
+
+// Downscale and re-encode in the browser so big screenshots stay small.
+async function imageToDataUrl(blob) {
+  const bitmap = await createImageBitmap(blob);
+  const scale = Math.min(1, MAX_REF_SIDE / Math.max(bitmap.width, bitmap.height));
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.round(bitmap.width * scale);
+  canvas.height = Math.round(bitmap.height * scale);
+  canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+  const webp = canvas.toDataURL('image/webp', 0.85);
+  return webp.startsWith('data:image/webp') ? webp : canvas.toDataURL('image/jpeg', 0.85);
+}
+
+async function uploadReference(blob, name) {
+  const dataUrl = await imageToDataUrl(blob);
+  if (!store.remote) return { data: dataUrl, name };
+  const res = await fetch(SERVER + '/__redline/api/assets', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json', ...keyHeader() },
+    body: JSON.stringify({ dataUrl }),
+  });
+  if (!res.ok) throw new Error(`upload failed (${res.status})`);
+  return { path: (await res.json()).path, name };
+}
+
+function imagesFrom(dataTransfer) {
+  return [...(dataTransfer ? dataTransfer.files || [] : [])].filter((f) => /^image\//.test(f.type));
+}
+
+/**
+ * The references row of the composer: thumbnails plus an attach button. Also
+ * accepts images pasted or dropped anywhere on `form`. onChange(list) fires
+ * whenever the list changes.
+ */
+function createReferences(form, initial, onChange) {
+  let refs = (initial || []).slice();
+  const row = h('div', { class: 'refs' });
+  const picker = h('input', { type: 'file', accept: 'image/*', multiple: true, hidden: true });
+
+  async function add(files) {
+    for (const file of files.slice(0, 6 - refs.length)) {
+      try {
+        refs.push(await uploadReference(file, file.name || 'pasted image'));
+      } catch (err) {
+        toast('Could not attach image: ' + err.message);
+      }
+    }
+    render();
+    onChange(refs);
+  }
+
+  function render() {
+    fill(row,
+      ...refs.map((r, i) =>
+        h('span', { class: 'ref' },
+          h('img', { src: assetSrc(r), alt: r.name || 'reference', title: r.name || 'reference', onclick: () => openGallery(refs.map((x) => ({ src: assetSrc(x), label: x.name || 'Reference' })), i) }),
+          h('button', {
+            type: 'button',
+            class: 'ref-x',
+            'aria-label': 'Remove reference',
+            onclick: () => {
+              refs.splice(i, 1);
+              render();
+              onChange(refs);
+            },
+          }, '×'),
+        ),
+      ),
+      refs.length < 6
+        ? h('button', { type: 'button', class: 'btn small', title: 'Attach an image: a site you like, a sketch… (or paste / drop one here)', onclick: () => picker.click(), html: ICONS.image + ' Reference' })
+        : null,
+      picker,
+    );
+  }
+
+  picker.addEventListener('change', () => add([...picker.files]));
+  form.addEventListener('paste', (e) => {
+    const files = imagesFrom(e.clipboardData);
+    if (files.length) {
+      e.preventDefault();
+      add(files);
+    }
+  });
+  form.addEventListener('dragover', (e) => {
+    if ([...(e.dataTransfer.types || [])].includes('Files')) {
+      e.preventDefault();
+      form.classList.add('dropping');
+    }
+  });
+  form.addEventListener('dragleave', () => form.classList.remove('dropping'));
+  form.addEventListener('drop', (e) => {
+    form.classList.remove('dropping');
+    const files = imagesFrom(e.dataTransfer);
+    if (files.length) {
+      e.preventDefault();
+      add(files);
+    }
+  });
+
+  render();
+  return { node: row, list: () => refs };
+}

package/client/select.js

@@ -0,0 +1,180 @@
+// ---------------------------------------------------------------- select mode
+
+// The page element under a point, looking through the overlay itself.
+// elementsFromPoint also returns iframes, so embeds and consent frames can be picked.
+function pageElementAt(x, y) {
+  const el = document.elementsFromPoint(x, y).find((n) => !isOurs(n));
+  return el === document.documentElement ? document.body : el || null;
+}
+
+function showHover(el) {
+  state.hoverEl = el;
+  if (!el) {
+    hoverBox.style.display = 'none';
+    return;
+  }
+  const r = el.getBoundingClientRect();
+  placeBox(hoverBox, r);
+  const tag = hoverBox.firstChild;
+  tag.replaceChildren(`${label(el)} · ${Math.round(r.width)}×${Math.round(r.height)} `, h('kbd', {}, el.parentElement && el.parentElement !== document.documentElement ? '↑ parent' : ''));
+  tag.classList.toggle('below', r.top < 28);
+}
+
+// In select mode a transparent surface covers the page, so clicks pick elements
+// instead of following links, and no page script or iframe can intercept them.
+pick.addEventListener('pointermove', (e) => {
+  if (state.composer || (boxDrag && boxDrag.moved)) return;
+  // Compare against the element under the pointer, not the highlighted one, so an
+  // ↑-selected parent stays selected while the mouse moves within the same child.
+  const el = pageElementAt(e.clientX, e.clientY);
+  if (el !== state.hoverStack[state.hoverStack.length - 1]) {
+    state.hoverStack = el ? [el] : [];
+    showHover(el);
+  }
+});
+pick.addEventListener('pointerleave', () => !state.composer && !boxDrag && showHover(null));
+pick.addEventListener('contextmenu', (e) => e.preventDefault());
+
+// Box tool: drag to draw a box around any area; a plain click boxes the element
+// under the pointer (↑ first to take its parent). A drawn box that roughly matches
+// an element snaps to it; otherwise it stays a free region inside its container.
+const boxDraft = h('div', { class: 'box-draft' });
+layer.append(boxDraft);
+let boxDrag = null; // { x, y, moved }
+let swallowClick = false;
+
+pick.addEventListener('pointerdown', (e) => {
+  if (e.button > 0 || state.composer) return;
+  pick.setPointerCapture(e.pointerId);
+  boxDrag = { x: e.clientX, y: e.clientY, moved: false };
+});
+
+pick.addEventListener('pointermove', (e) => {
+  if (!boxDrag) return;
+  const w = e.clientX - boxDrag.x, hgt = e.clientY - boxDrag.y;
+  if (!boxDrag.moved && Math.hypot(w, hgt) < 6) return;
+  boxDrag.moved = true;
+  showHover(null);
+  const c = COLORS[state.verdict];
+  Object.assign(boxDraft.style, {
+    display: 'block',
+    left: Math.min(boxDrag.x, e.clientX) + 'px',
+    top: Math.min(boxDrag.y, e.clientY) + 'px',
+    width: Math.abs(w) + 'px',
+    height: Math.abs(hgt) + 'px',
+    borderColor: c,
+    background: c + '1f',
+  });
+});
+
+pick.addEventListener('pointerup', (e) => {
+  const drag = boxDrag;
+  boxDrag = null;
+  boxDraft.style.display = 'none';
+  if (!drag || !drag.moved) return; // a plain click: handled by 'click'
+  swallowClick = true;
+  const rect = { x: Math.min(drag.x, e.clientX), y: Math.min(drag.y, e.clientY), w: Math.abs(e.clientX - drag.x), h: Math.abs(e.clientY - drag.y) };
+  if (rect.w < 8 || rect.h < 8) return;
+  const { el, region } = boxTarget(rect);
+  if (state.retarget) return retargetTo(el, { dx: 0, dy: 0 });
+  openComposer({ el, draft: { kind: 'note', anchor: { dx: 0, dy: 0 }, region }, point: { x: rect.x + rect.w, y: rect.y } });
+});
+
+// Which element a drawn box is about. Returns a region (relative to the element,
+// in px) only when the box is a part of it rather than the element itself.
+function boxTarget(rect) {
+  const area = (r) => Math.max(0, r.width) * Math.max(0, r.height);
+  const inter = (r) => Math.max(0, Math.min(r.right, rect.x + rect.w) - Math.max(r.left, rect.x)) * Math.max(0, Math.min(r.bottom, rect.y + rect.h) - Math.max(r.top, rect.y));
+  const seen = new Set();
+  for (let i = 1; i <= 4; i++) {
+    for (let j = 1; j <= 4; j++) {
+      for (let el = pageElementAt(rect.x + (rect.w * i) / 5, rect.y + (rect.h * j) / 5); el && el !== document.documentElement; el = el.parentElement) seen.add(el);
+    }
+  }
+  let best = null, bestIoU = 0;
+  for (const el of seen) {
+    const r = el.getBoundingClientRect();
+    const i = inter(r);
+    const iou = i / (area(r) + rect.w * rect.h - i || 1);
+    if (iou > bestIoU) {
+      best = el;
+      bestIoU = iou;
+    }
+  }
+  if (best && bestIoU >= 0.6) return { el: best, region: null };
+  // A part of something: anchor to the smallest element that contains the box.
+  let el = pageElementAt(rect.x + rect.w / 2, rect.y + rect.h / 2) || document.body;
+  while (el.parentElement && el !== document.body) {
+    const r = el.getBoundingClientRect();
+    if (inter(r) >= rect.w * rect.h * 0.9) break;
+    el = el.parentElement;
+  }
+  const r = el.getBoundingClientRect();
+  return { el, region: { x: fmt(rect.x - r.left), y: fmt(rect.y - r.top), w: fmt(rect.w), h: fmt(rect.h) } };
+}
+
+pick.addEventListener('click', (e) => {
+  if (swallowClick) {
+    swallowClick = false;
+    return;
+  }
+  if (state.composer) return closeComposer();
+  const el = state.hoverEl || pageElementAt(e.clientX, e.clientY);
+  if (!el) return;
+  const r = el.getBoundingClientRect();
+  const anchor = { dx: r.width ? (e.clientX - r.left) / r.width : 0, dy: r.height ? (e.clientY - r.top) / r.height : 0 };
+  if (state.retarget) return retargetTo(el, anchor);
+  openComposer({
+    el,
+    draft: { kind: 'note', anchor },
+    point: { x: e.clientX, y: e.clientY },
+  });
+  hoverBox.style.display = 'none';
+});
+
+// "Move to…" in the composer: the next element picked becomes the note's target.
+function startRetarget(a) {
+  closeComposer();
+  state.retarget = a;
+  setMode('select');
+  toast(`Click the element #${a.n} should point at (Esc cancels)`);
+}
+
+async function retargetTo(el, anchor) {
+  const a = state.retarget;
+  state.retarget = null;
+  try {
+    const saved = await store.update(a.id, { target: describeEl(el), anchor, ...captureContext(el) });
+    await load();
+    openComposer({ annotation: saved, el });
+    toast(`#${a.n} now points at ${label(el)}`);
+  } catch (err) {
+    toast('Could not move note: ' + err.message);
+  }
+}
+
+// The surfaces sit above the page, so scroll whatever scrollable element is underneath by hand.
+function scrollableAt(x, y, dx, dy) {
+  for (let el = pageElementAt(x, y); el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+    const cs = getComputedStyle(el);
+    const canY = dy && /(auto|scroll|overlay)/.test(cs.overflowY) && el.scrollHeight > el.clientHeight &&
+      (dy > 0 ? el.scrollTop + el.clientHeight < el.scrollHeight - 1 : el.scrollTop > 0);
+    const canX = dx && /(auto|scroll|overlay)/.test(cs.overflowX) && el.scrollWidth > el.clientWidth &&
+      (dx > 0 ? el.scrollLeft + el.clientWidth < el.scrollWidth - 1 : el.scrollLeft > 0);
+    if (canY || canX) return el;
+  }
+  return null;
+}
+for (const surface of [pick, ink]) {
+  surface.addEventListener(
+    'wheel',
+    (e) => {
+      const el = scrollableAt(e.clientX, e.clientY, e.deltaX, e.deltaY);
+      if (el) {
+        e.preventDefault();
+        el.scrollBy(e.deltaX, e.deltaY);
+      }
+    },
+    { passive: false },
+  );
+}

package/client/shots.js

@@ -0,0 +1,357 @@
+// ---------------------------------------------------------------- screenshots
+
+// Two halves. Shot mode: when the Redline server loads a page in headless Chrome
+// to photograph an item, the overlay restores the item's page state, shows just
+// what that shot is about (the mark, the proposed edit, an option or the result)
+// and reports the area to crop. Gallery: the reviewer sees those shots, with a
+// before/after slider, in the composer and the Notes panel.
+
+const SHOT = window.__REDLINE_SHOT__ || null; // { id, key } when photographed
+
+const settle = () =>
+  new Promise((ok) => requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(ok, 250))));
+
+// Switch the controls recorded with the item (tabs, toggles, menus) back to how they were.
+async function replayState(list) {
+  for (const { selector, state: want } of list || []) {
+    const el = queryOne(selector);
+    if (el && stateNow(el) !== want) {
+      el.click();
+      await settle();
+    }
+  }
+}
+
+// Photographs must not depend on the moment they're taken: animations and
+// transitions jump to where they end, running ones stop, videos pause.
+function freezeMotion() {
+  try {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync('*, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;' +
+      ' transition: none !important; caret-color: transparent !important; scroll-behavior: auto !important; }');
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  } catch {}
+  for (const anim of document.getAnimations ? document.getAnimations() : []) {
+    try {
+      anim.finish();
+    } catch {
+      anim.pause(); // endless: stop it where it starts
+      anim.currentTime = 0;
+    }
+  }
+  for (const v of document.querySelectorAll('video')) v.pause();
+}
+
+// Images near what's photographed, loaded and decoded (lazy ones too), within reason.
+async function imagesReady(el) {
+  const imgs = [...(el || document).querySelectorAll('img')].slice(0, 40);
+  for (const img of imgs) if (img.loading === 'lazy') img.loading = 'eager';
+  const ready = (img) => {
+    if (img.complete) return img.decode().catch(() => {});
+    return new Promise((ok) => {
+      img.addEventListener('load', ok, { once: true });
+      img.addEventListener('error', ok, { once: true });
+    });
+  };
+  await Promise.race([Promise.all(imgs.map(ready)), new Promise((ok) => setTimeout(ok, 3000))]);
+}
+
+async function runShot({ id, key }) {
+  let done;
+  window.__redlineShotReady = new Promise((ok) => (done = ok));
+  host.dataset.shot = '';
+  try {
+    if (document.fonts) await document.fonts.ready;
+    freezeMotion();
+    const a = (await store.all()).find((x) => x.id === id);
+    if (!a) return done(null);
+    await replayState(a.uiReplay);
+    if (key === 'proposed' && a.edits) applyEdits(a);
+    if (key.startsWith('variant-')) applyVariant(a, key.slice('variant-'.length));
+    await settle();
+    const guard = key.startsWith('guard-');
+    // After a fix that restructured the markup, the agent can name what to photograph
+    // (and an accepted fix is guarded where it lives now).
+    const el = ((key === 'after' || guard) && a.afterTarget && queryOne(a.afterTarget)) || anchorEl(a);
+    // Not there, or not shown at this width (display: none, a collapsed menu): nothing to guard.
+    if (guard && (!el || !el.getClientRects().length)) return done(null);
+    if (el) el.scrollIntoView({ block: 'center' });
+    hideOverlays(el);
+    await imagesReady(el);
+    freezeMotion(); // anything the scroll or the state replay started
+    await settle();
+    // Only the "before" shot shows the reviewer's mark; the others show the design itself.
+    state.annotations = key === 'before' ? [a] : [];
+    state.showElsewhere = true;
+    rebuildMarks();
+    await settle();
+
+    const boxes = [];
+    if (el) boxes.push(el.getBoundingClientRect());
+    // A guard is about the element alone, as built: frame just it, and fingerprint it.
+    if (guard) {
+      // Three takes over a second: whatever moves on its own (a clock, a carousel,
+      // a feed) is marked volatile, so a guard never cries wolf over it.
+      let fp = fingerprint(el);
+      for (const ms of [450, 650]) {
+        await new Promise((ok) => setTimeout(ok, ms));
+        fp = steady(fp, fingerprint(el));
+      }
+      const clip = clipAround([el.getBoundingClientRect()], 24);
+      return done({ ...clip, box: boxIn(el, clip), fp });
+    }
+    // An "apply to all" edit is about all of them: frame the ones near the first.
+    if (a.edits && a.edits.scope === 'all' && el) {
+      const first = el.getBoundingClientRect();
+      for (const t of editTargets(a)) {
+        const r = t.getBoundingClientRect();
+        if (r.width && Math.abs(r.top - first.top) < 900) boxes.push(r);
+      }
+    }
+    // The mark's area is framed in every shot (drawn only in "before"), so all of
+    // an item's shots share one framing and line up in Compare.
+    if (a.kind === 'stroke' && !(key === 'after' && a.afterTarget)) {
+      const pts = strokePaths(a).flat();
+      if (pts.length) {
+        const b = bboxOf(pts);
+        boxes.push({ left: b.x - 6, top: b.y - 6, right: b.x + b.w + 6, bottom: b.y + b.h + 6 });
+      }
+    }
+    if (a.kind === 'note' && !(key === 'after' && a.afterTarget)) {
+      const p = pinPoint(a);
+      if (p) boxes.push({ left: p.x - 14, top: p.y - 14, right: p.x + 14, bottom: p.y + 14 });
+    }
+    if (!boxes.length) return done(null);
+    const clip = clipAround(boxes, 40); // enough surroundings to see the element in context
+    // Where the element sits in the picture, so the overlay can lay it over the live page.
+    done({ ...clip, box: el ? boxIn(el, clip) : undefined });
+  } catch {
+    done(null);
+  }
+}
+
+function boxIn(el, clip) {
+  const r = el.getBoundingClientRect();
+  return { x: Math.round(r.left + scrollX - clip.x), y: Math.round(r.top + scrollY - clip.y), w: Math.round(r.width), h: Math.round(r.height) };
+}
+
+// The page area around some viewport rects, in page coordinates.
+function clipAround(boxes, pad) {
+  const docW = document.documentElement.scrollWidth, docH = document.documentElement.scrollHeight;
+  const x = Math.max(0, Math.min(...boxes.map((r) => r.left)) - pad + scrollX);
+  const y = Math.max(0, Math.min(...boxes.map((r) => r.top)) - pad + scrollY);
+  const right = Math.min(docW, Math.max(...boxes.map((r) => r.right)) + pad + scrollX);
+  const bottom = Math.min(docH, Math.max(...boxes.map((r) => r.bottom)) + pad + scrollY);
+  return { x: Math.round(x), y: Math.round(y), width: Math.max(1, Math.round(right - x)), height: Math.max(1, Math.min(2400, Math.round(bottom - y))) };
+}
+
+// Keep what held still between two takes; blank out what didn't (text: null,
+// a style: '*', position or size: null, a node that came or went: volatile).
+function steady(a, b) {
+  const later = new Map(b.nodes.map((n) => [n.p, n]));
+  const nodes = a.nodes.map((n) => {
+    const m = later.get(n.p);
+    if (n.v) return n; // already seen moving: stays volatile
+    if (!m || m.t !== n.t) return { ...n, v: true };
+    const out = { ...n, s: { ...n.s } };
+    if (m.text !== n.text) out.text = null;
+    for (const k of Object.keys(n.s)) if (m.s[k] !== n.s[k]) out.s[k] = '*';
+    if (Math.abs(m.w - n.w) > 2 || Math.abs(m.h - n.h) > 2) out.w = out.h = null;
+    if (Math.abs(m.x - n.x) > 3 || Math.abs(m.y - n.y) > 3) out.x = out.y = null;
+    return out;
+  });
+  return { nodes, unstable: a.unstable || a.nodes.length !== b.nodes.length || undefined };
+}
+
+// What an approval looks like, in a form two page loads can be compared by: for the
+// element and its visible descendants, the tag, its own text, its size and position
+// within the element, and the styles that make its look.
+const FP_PROPS = [
+  'font-family', 'font-size', 'font-weight', 'font-style', 'line-height', 'letter-spacing', 'text-transform', 'text-align',
+  'color', 'background-color', 'background-image', 'border-top-width', 'border-top-style', 'border-top-color', 'border-radius',
+  'padding', 'gap', 'box-shadow', 'opacity', 'transform', 'display',
+  // Layout, so a changed grid reads as one change, not as everything inside moving.
+  'grid-template-columns', 'flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'margin',
+];
+function fingerprint(el) {
+  const origin = el.getBoundingClientRect();
+  const nodes = [];
+  const visit = (n, path, depth) => {
+    if (nodes.length >= 60 || depth > 6 || isOurs(n)) return;
+    const cs = getComputedStyle(n);
+    if (cs.display === 'none' || cs.visibility === 'hidden') return;
+    const r = n.getBoundingClientRect();
+    const s = {};
+    for (const p of FP_PROPS) {
+      let v = cs.getPropertyValue(p).trim();
+      if (p === 'font-family') v = v.split(',')[0].replace(/["']/g, '').trim();
+      else if (/color$/.test(p)) v = hex(v);
+      else if (p === 'background-image' && v !== 'none') v = v.includes('gradient') ? v.slice(0, 80) : 'image ' + v.replace(/^url\(["']?|["']?\)$/g, '').split('/').pop().slice(0, 40);
+      s[p] = v.replace(/-?\d+\.\d+px/g, (m) => Math.round(parseFloat(m)) + 'px'); // sub-pixels are noise
+    }
+    if (n.currentSrc || n.getAttribute('src')) s.src = (n.currentSrc || n.getAttribute('src')).split('/').pop().slice(0, 60);
+    const text = [...n.childNodes].filter((c) => c.nodeType === 3).map((c) => c.textContent).join(' ').replace(/\s+/g, ' ').trim().slice(0, 120);
+    nodes.push({ p: path, t: label(n), text, w: Math.round(r.width), h: Math.round(r.height), x: Math.round(r.left - origin.left), y: Math.round(r.top - origin.top), s });
+    [...n.children].forEach((c, i) => visit(c, `${path}.${i}`, depth + 1));
+  };
+  visit(el, '0', 0);
+  return { nodes };
+}
+
+// Sticky headers and floating widgets would cover the subject: hide them, unless
+// they are the subject.
+function hideOverlays(subject) {
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
+  for (let n = walker.nextNode(), i = 0; n && i < 5000; n = walker.nextNode(), i++) {
+    if (isOurs(n)) continue;
+    const pos = getComputedStyle(n).position;
+    if ((pos === 'fixed' || pos === 'sticky') && !(subject && (n.contains(subject) || subject.contains(n)))) {
+      n.style.setProperty('visibility', 'hidden', 'important');
+    }
+  }
+}
+
+function openSideBySide(before, after) {
+  closeGallery();
+  const pane = (img) => h('figure', { class: 'sbs-pane' }, h('img', { src: img.src, alt: img.label }), h('figcaption', {}, img.label));
+  galleryEl = h('div', { class: 'gallery', role: 'dialog', 'aria-label': 'Before and after', onclick: (e) => e.target === galleryEl && closeGallery() },
+    h('div', { class: 'sbs' }, pane(before), pane(after)),
+    h('div', { class: 'gal-cap' }, 'The fix changed the layout, so the two are shown side by side'),
+    h('button', { class: 'gal-close', 'aria-label': 'Close', onclick: closeGallery, html: ICONS.close }),
+  );
+  galleryEl.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeGallery();
+    e.stopPropagation();
+  });
+  root.append(galleryEl);
+  galleryEl.tabIndex = -1;
+  galleryEl.focus();
+}
+
+// ---- gallery
+
+const SHOT_LABELS = { before: 'As reviewed', proposed: 'Your edit', after: 'After the fix' };
+
+/** Images for an item, in the order a reviewer thinks about them. */
+function itemImages(a) {
+  const shots = a.shots || {};
+  const out = [];
+  for (const key of ['before', 'proposed']) if (shots[key]) out.push({ key, src: assetSrc({ path: shots[key] }), label: SHOT_LABELS[key] });
+  for (const v of a.variants || []) {
+    const path = shots['variant-' + v.key];
+    if (path) out.push({ key: 'variant-' + v.key, src: assetSrc({ path }), label: `Option ${v.key}: ${v.label}` });
+  }
+  if (shots.after) out.push({ key: 'after', src: assetSrc({ path: shots.after }), label: SHOT_LABELS.after });
+  for (const r of a.references || []) out.push({ key: 'ref', src: assetSrc(r), label: `Reference${r.name ? ': ' + r.name : ''}` });
+  return out;
+}
+
+// Cache-bust shots: the same file name is rewritten when an item changes.
+function withVersion(src, a) {
+  return src.startsWith('data:') ? src : `${src}${src.includes('?') ? '&' : '?'}v=${encodeURIComponent(a.updatedAt || '')}`;
+}
+
+function thumbStrip(a) {
+  const all = itemImages(a).map((i) => ({ ...i, src: withVersion(i.src, a) }));
+  if (!all.length) return null;
+  const before = all.find((i) => i.key === 'before' || i.key === 'proposed');
+  const after = all.find((i) => i.key === 'after');
+  // Once fixed, what matters is before vs after; options and edits are history.
+  const imgs = a.status === 'resolved' ? all.filter((i) => i === before || i === after || i.key === 'ref') : all;
+  return h('div', { class: 'thumbs' },
+    before && after
+      ? h('button', { type: 'button', class: 'btn small primary cmp-btn', title: 'Slide between how it was and how it is now', onclick: (e) => (e.stopPropagation(), openCompare(before, after)) }, 'Compare')
+      : null,
+    imgs.slice(0, 5).map((img, i) =>
+      // stopPropagation: in the Notes panel the strip sits inside the item's own button.
+      h('button', { type: 'button', class: 'thumb', title: img.label, onclick: (e) => (e.stopPropagation(), openGallery(imgs, i)) },
+        h('img', { src: img.src, alt: img.label, loading: 'lazy' }), h('span', {}, img.label)),
+    ),
+  );
+}
+
+let galleryEl = null;
+function closeGallery() {
+  if (galleryEl) galleryEl.remove();
+  galleryEl = null;
+}
+
+function openGallery(images, index = 0) {
+  closeGallery();
+  let i = index;
+  const img = h('img', { class: 'gal-img' });
+  const cap = h('div', { class: 'gal-cap' });
+  const show = () => {
+    img.src = images[i].src;
+    img.alt = images[i].label;
+    cap.textContent = `${images[i].label}${images.length > 1 ? `  ·  ${i + 1} / ${images.length}` : ''}`;
+  };
+  const step = (d) => {
+    i = (i + d + images.length) % images.length;
+    show();
+  };
+  galleryEl = h('div', { class: 'gallery', role: 'dialog', 'aria-label': 'Images', onclick: (e) => e.target === galleryEl && closeGallery() },
+    img, cap,
+    images.length > 1 ? h('button', { class: 'gal-nav prev', 'aria-label': 'Previous', onclick: () => step(-1) }, '‹') : null,
+    images.length > 1 ? h('button', { class: 'gal-nav next', 'aria-label': 'Next', onclick: () => step(1) }, '›') : null,
+    h('button', { class: 'gal-close', 'aria-label': 'Close', onclick: closeGallery, html: ICONS.close }),
+  );
+  galleryEl.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeGallery();
+    if (e.key === 'ArrowLeft') step(-1);
+    if (e.key === 'ArrowRight') step(1);
+    e.stopPropagation();
+  });
+  show();
+  root.append(galleryEl);
+  galleryEl.tabIndex = -1;
+  galleryEl.focus();
+}
+
+const loadImage = (src) =>
+  new Promise((ok) => {
+    const img = new Image();
+    img.onload = () => ok(img);
+    img.onerror = () => ok(null);
+    img.src = src;
+  });
+
+// Before/after. Same framing: a slider ("before" left, "after" right). Different
+// framing (the fix restructured the element): side by side at true scale.
+async function openCompare(before, after) {
+  const [b, a] = await Promise.all([loadImage(before.src), loadImage(after.src)]);
+  const similar = b && a && Math.abs(b.naturalWidth - a.naturalWidth) / b.naturalWidth < 0.1 && Math.abs(b.naturalHeight - a.naturalHeight) / b.naturalHeight < 0.2;
+  if (!similar) return openSideBySide(before, after);
+  closeGallery();
+  const top = h('img', { class: 'cmp-top', src: before.src, alt: before.label });
+  const line = h('div', { class: 'cmp-line' });
+  const frame = h('div', { class: 'cmp' }, h('img', { class: 'cmp-base', src: after.src, alt: after.label }), top, line);
+  const setAt = (f) => {
+    const pct = Math.max(0, Math.min(100, f * 100));
+    top.style.clipPath = `inset(0 ${100 - pct}% 0 0)`;
+    line.style.left = pct + '%';
+  };
+  const drag = (e) => {
+    const r = frame.getBoundingClientRect();
+    setAt((e.clientX - r.left) / r.width);
+  };
+  frame.addEventListener('pointerdown', (e) => {
+    frame.setPointerCapture(e.pointerId);
+    drag(e);
+    frame.addEventListener('pointermove', drag);
+  });
+  frame.addEventListener('pointerup', () => frame.removeEventListener('pointermove', drag));
+  galleryEl = h('div', { class: 'gallery', role: 'dialog', 'aria-label': 'Compare before and after', onclick: (e) => e.target === galleryEl && closeGallery() },
+    frame,
+    h('div', { class: 'gal-cap' }, `◀ ${before.label}   |   ${after.label} ▶   · drag to compare`),
+    h('button', { class: 'gal-close', 'aria-label': 'Close', onclick: closeGallery, html: ICONS.close }),
+  );
+  galleryEl.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeGallery();
+    e.stopPropagation();
+  });
+  root.append(galleryEl);
+  setAt(0.5);
+  galleryEl.tabIndex = -1;
+  galleryEl.focus();
+}