@a2f0/agent-tool 0.1.32 → 0.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/agent-tool",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "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,7 @@
   text-align: center;
 }
 
-:where(.shots-filmstrip) {
+.shots-filmstrip {
   position: relative;
   display: flex;
   gap: 0.5rem;
@@ -284,7 +291,7 @@
   scroll-snap-type: x proximity;
 }
 
-:where(.shots-thumb) {
+.shots-thumb {
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
@@ -298,12 +305,12 @@
   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) {
+.shots-thumb-image {
   display: block;
   height: var(--_shots-thumb-height);
   min-width: 4.5rem;
@@ -314,7 +321,7 @@
   overflow: hidden;
 }
 
-:where(.shots-thumb-image img) {
+.shots-thumb-image :where(img) {
   display: block;
   width: 100%;
   height: 100%;
@@ -322,7 +329,7 @@
   object-position: top;
 }
 
-:where(.shots-thumb-label) {
+.shots-thumb-label {
   max-width: calc(var(--_shots-thumb-max-width) - 0.5rem);
   overflow: hidden;
   color: var(--_shots-ink-muted);
@@ -332,11 +339,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 +352,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 +364,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 +377,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 +404,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 +412,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 +426,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 +438,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 +472,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 +481,32 @@
   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;
   justify-content: flex-end;
   gap: 0.5rem;
   padding: 0 var(--_shots-carousel-padding);
 }
 
-:where(.shots-carousel-step) {
+.shots-carousel-step {
   display: inline-grid;
   place-items: center;
   width: var(--_shots-button-size);
@@ -512,16 +519,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

@@ -156,6 +156,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"];
@@ -179,6 +192,12 @@ function defineGallery(): CustomElementConstructor {
     #rendered = false;
     #announced = "";
 
+    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(); }
     get project(): string { return this.#project; }
@@ -359,7 +378,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);
@@ -559,6 +578,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(); }