@a2f0/agent-tool 0.1.32 → 0.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/agent-tool",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "packageManager": "bun@1.4.3",
   "type": "module",
   "description": "Portable cross-agent review, PR workflows, and shared skills",

package/src/screenshots/gallery.css

@@ -1,9 +1,16 @@
 /*
  * Styles for <screenshot-gallery> and <screenshot-carousel>
- * (@a2f0/agent-tool/screenshots/gallery.css). Every rule sits in :where(), so
- * any site selector overrides it; restyle through the --shots-* custom
- * properties first, set on the elements or any ancestor. Defaults, which
- * follow prefers-color-scheme, live in the internal --_shots-* properties.
+ * (@a2f0/agent-tool/screenshots/gallery.css). Restyle through the --shots-*
+ * custom properties first, set on the elements or any ancestor. Defaults,
+ * which follow prefers-color-scheme, live in the internal --_shots-*
+ * properties.
+ *
+ * Specificity: rules on the host elements are zero (:where), so any site
+ * selector overrides them. Every rule on a part the elements render has
+ * exactly one class of specificity (0,1,0), with its context in :where(), so
+ * element resets such as `button { background: none }` never reach the
+ * parts, while any site rule with a class and an element or a second class
+ * (`screenshot-gallery .shots-frame`) still overrides them.
  */
 
 :where(screenshot-gallery, screenshot-carousel) {
@@ -55,30 +62,30 @@
   }
 }
 
-:where(.shots-host) :where(button) {
+.shots-host :where(button) {
   font: inherit;
   color: inherit;
 }
 
-:where(.shots-host) :where(button:focus-visible, a:focus-visible, [tabindex]:focus-visible) {
+:where(.shots-host) :where(button, a, [tabindex]):focus-visible {
   outline: 2px solid var(--_shots-focus);
   outline-offset: 2px;
 }
 
-:where(.shots-icon) {
+.shots-icon {
   display: inline-flex;
   width: 1.25rem;
   height: 1.25rem;
 }
 
-:where(.shots-icon svg) {
+.shots-icon :where(svg) {
   width: 100%;
   height: 100%;
 }
 
 /* --- States --- */
 
-:where(.shots-status) {
+.shots-status {
   display: grid;
   place-items: center;
   padding: 2rem 1rem;
@@ -90,13 +97,13 @@
 }
 
 /* Loading reserves the gallery's height so the page does not jump when it arrives. */
-:where(screenshot-gallery) :where(.shots-status[data-state="loading"]) {
+:where(screenshot-gallery) .shots-status:where([data-state="loading"]) {
   min-height: calc(var(--_shots-stage-height) + var(--_shots-thumb-height) + 7rem);
 }
 
 /* --- Gallery --- */
 
-:where(.shots-gallery) {
+.shots-gallery {
   display: flex;
   flex-direction: column;
   border: 1px solid var(--_shots-border);
@@ -105,7 +112,7 @@
   overflow: hidden;
 }
 
-:where(.shots-gallery[data-expanded]) {
+.shots-gallery:where([data-expanded]) {
   position: fixed;
   inset: 0;
   z-index: var(--_shots-expanded-z);
@@ -113,7 +120,7 @@
   border-radius: 0;
 }
 
-:where(.shots-toolbar) {
+.shots-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -122,7 +129,7 @@
   border-bottom: 1px solid var(--_shots-border);
 }
 
-:where(.shots-title) {
+.shots-title {
   flex: 1 1 10rem;
   margin: 0;
   font-weight: 600;
@@ -131,14 +138,14 @@
   white-space: nowrap;
 }
 
-:where(.shots-toggle) {
+.shots-toggle {
   display: inline-flex;
   padding: 2px;
   border: 1px solid var(--_shots-border);
   border-radius: 999px;
 }
 
-:where(.shots-toggle-button) {
+.shots-toggle-button {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
@@ -149,17 +156,17 @@
   cursor: pointer;
 }
 
-:where(.shots-toggle-button[aria-pressed="true"]) {
+.shots-toggle-button:where([aria-pressed="true"]) {
   background: var(--_shots-accent);
   color: var(--_shots-accent-ink);
 }
 
-:where(.shots-actions) {
+.shots-actions {
   display: inline-flex;
   gap: 0.25rem;
 }
 
-:where(.shots-icon-button) {
+.shots-icon-button {
   display: inline-grid;
   place-items: center;
   width: var(--_shots-button-size);
@@ -171,12 +178,12 @@
   cursor: pointer;
 }
 
-:where(.shots-icon-button:disabled) {
+.shots-icon-button:where(:disabled) {
   opacity: 0.4;
   cursor: default;
 }
 
-:where(.shots-body) {
+.shots-body {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -184,7 +191,7 @@
 }
 
 /* The main panel: one screen per page of a horizontal scroll-snap track. */
-:where(.shots-track) {
+.shots-track {
   position: relative;
   display: flex;
   height: var(--_shots-stage-height);
@@ -196,16 +203,16 @@
   background: var(--_shots-surface-raised);
 }
 
-:where(.shots-gallery[data-expanded]) :where(.shots-track) {
+:where(.shots-gallery[data-expanded]) .shots-track {
   flex: 1 1 auto;
   height: auto;
 }
 
-:where(.shots-track)::-webkit-scrollbar {
+.shots-track::-webkit-scrollbar {
   display: none;
 }
 
-:where(.shots-slide) {
+.shots-slide {
   display: flex;
   flex: 0 0 100%;
   align-items: center;
@@ -217,7 +224,7 @@
   scroll-snap-stop: always;
 }
 
-:where(.shots-frame) {
+.shots-frame {
   display: block;
   box-sizing: content-box;
   max-width: 100%;
@@ -229,14 +236,14 @@
   cursor: zoom-in;
 }
 
-:where(.shots-image) {
+.shots-image {
   display: block;
   max-width: 100%;
   height: auto;
 }
 
 /* Phone and tablet captures sit in a device bezel sized from the capture (fitFrame). */
-:where(.shots-gallery[data-frame="phone"], .shots-gallery[data-frame="tablet"]) :where(.shots-frame:not(.shots-missing)) {
+:where(.shots-gallery[data-frame="phone"], .shots-gallery[data-frame="tablet"]) .shots-frame:where(:not(.shots-missing)) {
   padding: var(--shots-frame-pad, 0.6rem);
   border: 0;
   border-radius: calc(var(--shots-frame-radius, 1.5rem) + var(--shots-frame-pad, 0.6rem));
@@ -244,11 +251,11 @@
   box-shadow: inset 0 0 0 1px var(--_shots-bezel-edge), var(--_shots-shadow);
 }
 
-:where(.shots-gallery[data-frame="phone"], .shots-gallery[data-frame="tablet"]) :where(.shots-frame:not(.shots-missing) .shots-image) {
+:where(.shots-gallery[data-frame="phone"], .shots-gallery[data-frame="tablet"]) :where(.shots-frame:not(.shots-missing)) .shots-image {
   border-radius: var(--shots-frame-radius, 1.5rem);
 }
 
-:where(.shots-missing) {
+.shots-missing {
   display: grid;
   place-items: center;
   max-width: 24rem;
@@ -258,7 +265,7 @@
   cursor: default;
 }
 
-:where(.shots-navrow) {
+.shots-navrow {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -266,7 +273,7 @@
   padding: 0.5rem;
 }
 
-:where(.shots-counter) {
+.shots-counter {
   min-width: 4.5rem;
   margin: 0;
   color: var(--_shots-ink-muted);
@@ -274,7 +281,9 @@
   text-align: center;
 }
 
-:where(.shots-filmstrip) {
+/* Every thumbnail of a project has one width: the stage's typical capture shape (--_shots-thumb-ratio, set by the element) at the thumbnail height, within the 4.5rem to max-width range. */
+.shots-filmstrip {
+  --_shots-thumb-width: clamp(4.5rem, calc(var(--_shots-thumb-height) * var(--_shots-thumb-ratio, 0.75)), calc(var(--_shots-thumb-max-width) - 0.5rem));
   position: relative;
   display: flex;
   gap: 0.5rem;
@@ -284,12 +293,13 @@
   scroll-snap-type: x proximity;
 }
 
-:where(.shots-thumb) {
+.shots-thumb {
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
   gap: 0.25rem;
-  max-width: var(--_shots-thumb-max-width);
+  box-sizing: content-box;
+  width: var(--_shots-thumb-width);
   padding: 0.25rem;
   border: 1px solid transparent;
   border-radius: calc(var(--_shots-radius) / 2);
@@ -298,23 +308,21 @@
   scroll-snap-align: start;
 }
 
-:where(.shots-thumb[aria-current="true"]) {
+.shots-thumb:where([aria-current="true"]) {
   border-color: var(--_shots-accent);
 }
 
-/* The image keeps its capture's aspect ratio at a fixed height, cropped from the top only when wider than the cap. */
-:where(.shots-thumb-image) {
+/* A capture of another shape is cropped to the thumbnail, keeping its top. */
+.shots-thumb-image {
   display: block;
+  width: 100%;
   height: var(--_shots-thumb-height);
-  min-width: 4.5rem;
-  max-width: calc(var(--_shots-thumb-max-width) - 0.5rem);
-  aspect-ratio: 3 / 4;
   border-radius: 4px;
   background: var(--_shots-surface-raised);
   overflow: hidden;
 }
 
-:where(.shots-thumb-image img) {
+.shots-thumb-image :where(img) {
   display: block;
   width: 100%;
   height: 100%;
@@ -322,8 +330,11 @@
   object-position: top;
 }
 
-:where(.shots-thumb-label) {
-  max-width: calc(var(--_shots-thumb-max-width) - 0.5rem);
+/* Long labels never widen a thumbnail; they end in an ellipsis, with the full label in the button's title. */
+.shots-thumb-label {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
   overflow: hidden;
   color: var(--_shots-ink-muted);
   font-size: 0.75rem;
@@ -332,11 +343,11 @@
   white-space: nowrap;
 }
 
-:where(.shots-thumb[aria-current="true"]) :where(.shots-thumb-label) {
+:where(.shots-thumb[aria-current="true"]) .shots-thumb-label {
   color: var(--_shots-ink);
 }
 
-:where(.shots-lightbox) {
+.shots-lightbox {
   max-width: 100vw;
   max-height: 100vh;
   padding: 0;
@@ -345,11 +356,11 @@
   overflow: visible;
 }
 
-:where(.shots-lightbox)::backdrop {
+.shots-lightbox::backdrop {
   background: var(--_shots-backdrop);
 }
 
-:where(.shots-lightbox-backdrop) {
+.shots-lightbox-backdrop {
   position: fixed;
   inset: 0;
   border: 0;
@@ -357,11 +368,11 @@
   cursor: zoom-out;
 }
 
-:where(.shots-lightbox-frame) {
+.shots-lightbox-frame {
   position: relative;
 }
 
-:where(.shots-lightbox-image) {
+.shots-lightbox-image {
   display: block;
   width: auto;
   height: auto;
@@ -370,18 +381,18 @@
   border-radius: var(--shots-lightbox-radius, 8px);
 }
 
-:where(.shots-lightbox[data-frame="phone"], .shots-lightbox[data-frame="tablet"]) :where(.shots-lightbox-frame) {
+:where(.shots-lightbox[data-frame="phone"], .shots-lightbox[data-frame="tablet"]) .shots-lightbox-frame {
   padding: var(--shots-frame-pad, 0.75rem);
   border-radius: calc(var(--shots-frame-radius, 2rem) + var(--shots-frame-pad, 0.75rem));
   background: var(--_shots-bezel);
   box-shadow: inset 0 0 0 1px var(--_shots-bezel-edge);
 }
 
-:where(.shots-lightbox[data-frame="phone"], .shots-lightbox[data-frame="tablet"]) :where(.shots-lightbox-image) {
+:where(.shots-lightbox[data-frame="phone"], .shots-lightbox[data-frame="tablet"]) .shots-lightbox-image {
   border-radius: var(--shots-frame-radius, 2rem);
 }
 
-:where(.shots-lightbox-close) {
+.shots-lightbox-close {
   position: fixed;
   top: 1rem;
   right: 1rem;
@@ -397,7 +408,7 @@
   cursor: pointer;
 }
 
-:where(.shots-lightbox) :where(.shots-missing) {
+:where(.shots-lightbox) .shots-missing {
   position: relative;
   background: var(--_shots-surface);
   border-radius: var(--_shots-radius);
@@ -405,11 +416,11 @@
 
 /* --- Carousel --- */
 
-:where(.shots-carousel) {
+.shots-carousel {
   position: relative;
 }
 
-:where(.shots-carousel-track) {
+.shots-carousel-track {
   position: relative;
   overflow-x: auto;
   overscroll-behavior-x: contain;
@@ -419,11 +430,11 @@
   scrollbar-width: none;
 }
 
-:where(.shots-carousel-track)::-webkit-scrollbar {
+.shots-carousel-track::-webkit-scrollbar {
   display: none;
 }
 
-:where(.shots-carousel-list) {
+.shots-carousel-list {
   display: flex;
   gap: var(--_shots-carousel-gap);
   margin: 0;
@@ -431,33 +442,33 @@
   list-style: none;
 }
 
-:where(.shots-carousel-slide) {
+.shots-carousel-slide {
   flex: 0 0 var(--_shots-carousel-slide-width);
   scroll-snap-align: start;
 }
 
-:where(.shots-carousel-slide figure) {
+.shots-carousel-slide :where(figure) {
   margin: 0;
 }
 
-:where(.shots-carousel-slide figcaption) {
+.shots-carousel-slide :where(figcaption) {
   margin-top: 0.75rem;
   color: var(--_shots-ink-muted);
   font-size: 0.875rem;
   text-align: center;
 }
 
-:where(.shots-device) {
+.shots-device {
   display: block;
   color: inherit;
   container-type: inline-size;
 }
 
-:where(.shots-device picture) {
+.shots-device :where(picture) {
   display: block;
 }
 
-:where(.shots-device img) {
+.shots-device :where(img) {
   display: block;
   width: 100%;
   height: auto;
@@ -465,7 +476,7 @@
 }
 
 /* The bezel scales with the device's width, so it keeps its proportions at every size (FRAME_METRICS). */
-:where(.shots-carousel[data-frame="phone"], .shots-carousel[data-frame="tablet"]) :where(.shots-device picture) {
+:where(.shots-carousel[data-frame="phone"], .shots-carousel[data-frame="tablet"]) .shots-device :where(picture) {
   --shots-frame-pad: 3.5cqi;
   --shots-frame-radius: calc((100cqi - 2 * var(--shots-frame-pad)) * 0.1214);
   padding: var(--shots-frame-pad);
@@ -474,32 +485,43 @@
   box-shadow: inset 0 0 0 1px var(--_shots-bezel-edge), var(--_shots-shadow);
 }
 
-:where(.shots-carousel[data-frame="tablet"]) :where(.shots-device picture) {
+:where(.shots-carousel[data-frame="tablet"]) .shots-device :where(picture) {
   --shots-frame-pad: 3cqi;
   --shots-frame-radius: calc((100cqi - 2 * var(--shots-frame-pad)) * 0.025);
 }
 
-:where(.shots-carousel[data-frame="phone"], .shots-carousel[data-frame="tablet"]) :where(.shots-device img) {
+:where(.shots-carousel[data-frame="phone"], .shots-carousel[data-frame="tablet"]) .shots-device :where(img) {
   border-radius: var(--shots-frame-radius);
 }
 
-:where(a.shots-device:focus-visible) {
+.shots-device:where(a:focus-visible) {
   outline: none;
 }
 
-:where(a.shots-device:focus-visible picture) {
+.shots-device:where(a:focus-visible) :where(picture) {
   outline: 2px solid var(--_shots-focus);
   outline-offset: 3px;
 }
 
-:where(.shots-carousel-controls) {
+.shots-carousel-controls {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   justify-content: flex-end;
   gap: 0.5rem;
   padding: 0 var(--_shots-carousel-padding);
 }
 
-:where(.shots-carousel-step) {
+/* The view-all link sits at the start of the controls row, before the step buttons. */
+.shots-carousel-view-all {
+  margin-inline-end: auto;
+  color: var(--shots-link, var(--_shots-ink));
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.shots-carousel-step {
   display: inline-grid;
   place-items: center;
   width: var(--_shots-button-size);
@@ -512,16 +534,16 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  :where(.shots-track, .shots-carousel-track, .shots-filmstrip) {
+  :is(.shots-track, .shots-carousel-track, .shots-filmstrip) {
     scroll-behavior: smooth;
   }
 
-  :where(a.shots-device picture) {
+  .shots-device:where(a) :where(picture) {
     transition: transform 200ms ease;
   }
 
   @media (hover: hover) {
-    :where(a.shots-device:hover picture) {
+    .shots-device:where(a:hover) :where(picture) {
       transform: translateY(-4px);
     }
   }

package/src/screenshots/gallery.ts

@@ -73,6 +73,58 @@ export function loopCopies(viewportWidth: number, copyWidth: number): number {
   return copyWidth > 0 ? Math.max(1, Math.ceil(viewportWidth / copyWidth)) : 1;
 }
 
+/** Wheel travel, in CSS pixels on a gesture's dominant axis, that steps one screen. */
+export const WHEEL_STEP_THRESHOLD = 30;
+/** A pause between wheel events this long, in milliseconds, ends a gesture, including a trackpad's inertia. */
+export const WHEEL_GESTURE_IDLE = 200;
+
+export interface WheelStepper {
+  /** Adds one wheel event's `delta` (pixels, signed) at `time` (ms); returns the step it completes: -1, 1, or 0. */
+  push(delta: number, time: number): -1 | 0 | 1;
+  reset(): void;
+}
+
+/**
+ * Turns a stream of wheel deltas into screen steps. Deltas accumulate until
+ * they reach `threshold`, so small wheel ticks add up, then the gesture steps
+ * once: further travel in the same direction, such as a trackpad's inertial
+ * tail, is ignored until the wheel pauses for `idle` ms. Travel of `threshold`
+ * in the other direction is a new gesture and steps back at once.
+ */
+export function createWheelStepper(threshold = WHEEL_STEP_THRESHOLD, idle = WHEEL_GESTURE_IDLE): WheelStepper {
+  let total = 0, last = -Infinity, stepped: -1 | 0 | 1 = 0;
+  return {
+    push(delta, time) {
+      if (!(time - last < idle)) { total = 0; stepped = 0; }
+      last = time;
+      if (!delta || !Number.isFinite(delta)) return 0;
+      const direction = delta > 0 ? 1 : -1;
+      // The step's own direction keeps the gesture going; an opposing blip does not add up.
+      if (direction === stepped) { total = 0; return 0; }
+      if (total && Math.sign(total) !== direction) total = 0;
+      total += delta;
+      if (Math.abs(total) < threshold) return 0;
+      total = 0;
+      stepped = direction;
+      return direction;
+    },
+    reset() { total = 0; last = -Infinity; stepped = 0; },
+  };
+}
+
+/** A wheel event's delta in CSS pixels; `page` is the size of one page of the scroller. */
+export function wheelPixels(delta: number, deltaMode: number, page: number): number {
+  return deltaMode === 1 ? delta * 16 : deltaMode === 2 ? delta * page : delta;
+}
+
+/** Median width-to-height ratio of the captures, so one odd capture does not resize every thumbnail. */
+export function typicalRatio(entries: readonly { width: number; height: number }[]): number | undefined {
+  const ratios = entries.filter(entry => entry.width > 0 && entry.height > 0).map(entry => entry.width / entry.height).sort((a, b) => a - b);
+  if (!ratios.length) return undefined;
+  const middle = ratios.length >> 1;
+  return ratios.length % 2 ? ratios[middle]! : (ratios[middle - 1]! + ratios[middle]!) / 2;
+}
+
 export interface ScreenshotChangeDetail { project: string; theme: string; screen: string; index: number; total: number }
 
 export interface ScreenshotGalleryElement extends HTMLElement {
@@ -156,6 +208,19 @@ function status(root: HTMLElement, state: string, message: string): void {
   root.replaceChildren(element("div", { class: "shots-status", role: "status", "data-state": state }, [element("p", { text: message })]));
 }
 
+/**
+ * A page can set `manifestData` before the elements are defined; that value is
+ * an own property that shadows the accessor. Take it off, so the constructor
+ * can pass it through the setter.
+ */
+function takePendingData(element: HTMLElement): { value: unknown } | undefined {
+  if (!Object.prototype.hasOwnProperty.call(element, "manifestData")) return undefined;
+  const own = element as unknown as Record<string, unknown>;
+  const value = own["manifestData"];
+  delete own["manifestData"];
+  return { value };
+}
+
 function defineGallery(): CustomElementConstructor {
   return class ScreenshotGallery extends HTMLElement implements ScreenshotGalleryElement {
     static observedAttributes = ["manifest"];
@@ -178,6 +243,13 @@ function defineGallery(): CustomElementConstructor {
     #overflow = "";
     #rendered = false;
     #announced = "";
+    #wheel = createWheelStepper();
+
+    constructor() {
+      super();
+      const pending = takePendingData(this);
+      if (pending) this.manifestData = pending.value as ScreenshotManifest | null;
+    }
 
     get manifestData(): ScreenshotManifest | null { return this.#data; }
     set manifestData(value: ScreenshotManifest | null) { this.#data = value && parseScreenshotManifest(value); if (this.#connected) this.#load(); }
@@ -261,6 +333,7 @@ function defineGallery(): CustomElementConstructor {
 
       const track = element("div", { class: "shots-track", tabindex: "0", role: "group", "aria-roledescription": "carousel" });
       onScrollSettle(track, () => this.#settle(), signal);
+      track.addEventListener("wheel", (event: WheelEvent) => this.#onWheel(event), { passive: false, signal });
       const previous = element("button", { type: "button", class: "shots-icon-button", "data-action": "previous", "aria-label": "Previous screen" }, [icon("prev")]);
       const next = element("button", { type: "button", class: "shots-icon-button", "data-action": "next", "aria-label": "Next screen" }, [icon("next")]);
       previous.addEventListener("click", () => this.step(-1), { signal });
@@ -297,6 +370,30 @@ function defineGallery(): CustomElementConstructor {
       else if (event.key === "ArrowLeft" || (inside && event.key === "ArrowUp")) { event.preventDefault(); this.step(-1); }
     }
 
+    /**
+     * Steps once per wheel gesture over the main panel, instead of letting
+     * scroll snapping pull a small scroll back to the same screen. Horizontal
+     * travel (a trackpad swipe, a tilt wheel, Shift with a wheel) always steps;
+     * vertical travel steps only while the gallery is expanded, or with
+     * `vertical-wheel` until the first or last screen, so the page still scrolls.
+     */
+    #onWheel(event: WheelEvent): void {
+      const track = this.#track;
+      if (!track || event.defaultPrevented || event.ctrlKey || event.metaKey) return;
+      let x = event.deltaX, y = event.deltaY;
+      if (event.shiftKey && !x) { x = y; y = 0; }
+      const horizontal = Math.abs(x) > Math.abs(y);
+      const delta = wheelPixels(horizontal ? x : y, event.deltaMode, horizontal ? track.clientWidth : track.clientHeight);
+      if (!delta) return;
+      const next = this.#index + Math.sign(delta);
+      const inRange = next >= 0 && next < this.#screens.length;
+      if (!horizontal && !this.#expanded && (!this.hasAttribute("vertical-wheel") || !inRange)) return;
+      event.preventDefault();
+      const step = this.#wheel.push(delta, event.timeStamp);
+      // The wheel does not wrap: past either end it waits, like a native scroller.
+      if (step && this.#index + step >= 0 && this.#index + step < this.#screens.length) this.#select(this.#index + step, scrollBehavior());
+    }
+
     #setExpanded(expanded: boolean): void {
       if (expanded === this.#expanded || !this.#root) return;
       this.#expanded = expanded;
@@ -321,14 +418,20 @@ function defineGallery(): CustomElementConstructor {
       this.#screens = projectScreens(manifest, this.#project);
       this.#index = Math.max(0, screen === undefined ? 0 : this.#screens.indexOf(screen));
       this.#loaded.clear();
+      this.#wheel.reset();
       const frame = projectFrame(manifest, this.#project);
       this.#root!.dataset["frame"] = frame;
       this.#root!.dataset["project"] = this.#project;
       for (const button of this.#root!.querySelectorAll<HTMLButtonElement>(".shots-toggle-button")) button.setAttribute("aria-pressed", String(button.dataset["project"] === this.#project));
       track.setAttribute("aria-label", `${projectInfo(manifest, this.#project).label} screens`);
       track.replaceChildren(...this.#screens.map((_, index) => element("div", { class: "shots-slide", "data-index": index, role: "group", "aria-roledescription": "slide" })));
+      // Every thumbnail of a project has the same width, from its captures' typical shape.
+      const ratio = typicalRatio(manifest.entries.filter(entry => entry.project === this.#project));
+      if (ratio) strip.style.setProperty("--_shots-thumb-ratio", String(Math.round(ratio * 10000) / 10000));
+      else strip.style.removeProperty("--_shots-thumb-ratio");
       strip.replaceChildren(...this.#screens.map((name, index) => {
-        const button = element("button", { type: "button", class: "shots-thumb", "data-index": index, "aria-current": "false" }, [element("span", { class: "shots-thumb-image" }), element("span", { class: "shots-thumb-label", text: screenInfo(manifest, name).label })]);
+        const label = screenInfo(manifest, name).label;
+        const button = element("button", { type: "button", class: "shots-thumb", "data-index": index, "aria-current": "false", title: label }, [element("span", { class: "shots-thumb-image" }), element("span", { class: "shots-thumb-label", text: label })]);
         button.addEventListener("click", () => this.#select(index, scrollBehavior()), { signal: this.#abort!.signal });
         return button;
       }));
@@ -359,7 +462,7 @@ function defineGallery(): CustomElementConstructor {
         button.setAttribute("aria-label", label);
         button.title = label;
       }
-      this.#root!.dataset["theme"] = this.#theme;
+      this.#root!.dataset["shotsTheme"] = this.#theme;
       this.#loaded.clear();
       for (const slide of this.#track!.querySelectorAll<HTMLElement>(".shots-slide")) {
         const index = Number(slide.dataset["index"]), name = this.#screens[index]!, entry = this.#entry(name);
@@ -379,7 +482,6 @@ function defineGallery(): CustomElementConstructor {
         const holder = thumb.querySelector(".shots-thumb-image")!;
         thumb.setAttribute("aria-label", screenInfo(manifest, name).label);
         if (!entry) { holder.replaceChildren(element("span", { class: "shots-thumb-missing" })); continue; }
-        holder.setAttribute("style", `aspect-ratio: ${entry.width} / ${entry.height}`);
         holder.replaceChildren(element("img", { src: entry.src, alt: "", loading: "lazy", decoding: "async", width: entry.width, height: entry.height }));
       }
       this.#fit();
@@ -550,7 +652,7 @@ function defineGallery(): CustomElementConstructor {
 
 function defineCarousel(): CustomElementConstructor {
   return class ScreenshotCarousel extends HTMLElement implements ScreenshotCarouselElement {
-    static observedAttributes = ["manifest", "project", "limit"];
+    static observedAttributes = ["manifest", "project", "limit", "view-all-href", "view-all-label"];
     #data: ScreenshotManifest | null = null;
     #abort: AbortController | null = null;
     #track: HTMLDivElement | null = null;
@@ -559,6 +661,12 @@ function defineCarousel(): CustomElementConstructor {
     #slides: HTMLElement[] = [];
     #manifest: ScreenshotManifest | null = null;
 
+    constructor() {
+      super();
+      const pending = takePendingData(this);
+      if (pending) this.manifestData = pending.value as ScreenshotManifest | null;
+    }
+
     get manifestData(): ScreenshotManifest | null { return this.#data; }
     set manifestData(value: ScreenshotManifest | null) { this.#data = value && parseScreenshotManifest(value); if (this.#connected) this.#load(); }
 
@@ -621,7 +729,9 @@ function defineCarousel(): CustomElementConstructor {
           const picture = element("picture", {}, slide.dark ? [element("source", { media: "(prefers-color-scheme: dark)", srcset: slide.dark.src, width: slide.dark.width, height: slide.dark.height })] : []);
           picture.append(element("img", {
             src: slide.light.src, alt: clone ? "" : screen.alt ?? `${screen.label}, ${projectInfo(manifest, project).label.toLowerCase()} screenshot`,
-            width: slide.light.width, height: slide.light.height, loading: !clone && index < 3 ? "eager" : "lazy", decoding: "async",
+            width: slide.light.width, height: slide.light.height, decoding: "async",
+            // The first original rests at the start edge on load: fetch it first, and the rest as they near the viewport.
+            loading: !clone && index === 0 ? "eager" : "lazy", fetchpriority: !clone && index === 0 ? "high" : undefined,
           }));
           const device = linkBase
             ? element("a", { class: "shots-device", href: screenshotPath(linkBase, project, slide.name), tabindex: clone ? "-1" : undefined }, [picture])
@@ -637,12 +747,15 @@ function defineCarousel(): CustomElementConstructor {
       const track = element("div", { class: "shots-carousel-track", tabindex: "0" }, [list]);
       this.#track = track;
       const root = element("div", { class: "shots-carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.getAttribute("label") ?? "Screenshots", "data-frame": frame }, [track]);
+      const controls = element("div", { class: "shots-carousel-controls" });
+      const viewAll = this.getAttribute("view-all-href");
+      if (viewAll) controls.append(element("a", { class: "shots-carousel-view-all", href: viewAll, text: this.getAttribute("view-all-label") || "View all screenshots" }));
       if (loop) {
         const previous = element("button", { type: "button", class: "shots-carousel-step", "data-step": "-1", "aria-label": "Previous screens" }, [icon("prev")]);
         const next = element("button", { type: "button", class: "shots-carousel-step", "data-step": "1", "aria-label": "Next screens" }, [icon("next")]);
         previous.addEventListener("click", () => this.step(-1), { signal });
         next.addEventListener("click", () => this.step(1), { signal });
-        root.append(element("div", { class: "shots-carousel-controls" }, [previous, next]));
+        controls.append(previous, next);
         onScrollSettle(track, () => this.#normalize(), signal);
         if (typeof ResizeObserver === "function") {
           const observer = new ResizeObserver(() => this.#resize());
@@ -650,6 +763,7 @@ function defineCarousel(): CustomElementConstructor {
           signal.addEventListener("abort", () => observer.disconnect());
         }
       }
+      if (controls.childElementCount) root.append(controls);
       this.replaceChildren(root);
       if (loop) this.#jump(copies * slides.length + (keep ?? 0));
     }