@a2f0/agent-tool 0.1.30 → 0.1.32

package/src/screenshots/gallery.css

@@ -0,0 +1,528 @@
+/*
+ * 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.
+ */
+
+:where(screenshot-gallery, screenshot-carousel) {
+  --_shots-font: var(--shots-font, system-ui, -apple-system, "Segoe UI", sans-serif);
+  --_shots-ink: var(--shots-ink, #1d1d1f);
+  --_shots-ink-muted: var(--shots-ink-muted, #6e6e73);
+  --_shots-surface: var(--shots-surface, #ffffff);
+  --_shots-surface-raised: var(--shots-surface-raised, #f5f5f7);
+  --_shots-border: var(--shots-border, #d2d2d7);
+  --_shots-accent: var(--shots-accent, #1d1d1f);
+  --_shots-accent-ink: var(--shots-accent-ink, #ffffff);
+  --_shots-focus: var(--shots-focus, #0071e3);
+  --_shots-radius: var(--shots-radius, 12px);
+  --_shots-button-size: var(--shots-button-size, 2.25rem);
+  --_shots-bezel: var(--shots-bezel, #1c1c1e);
+  --_shots-bezel-edge: var(--shots-bezel-edge, #3a3a3c);
+  --_shots-shadow: var(--shots-shadow, 0 12px 32px rgb(0 0 0 / 0.18));
+  --_shots-stage-height: var(--shots-stage-height, min(60vh, 44rem));
+  --_shots-stage-padding: var(--shots-stage-padding, 1rem);
+  --_shots-thumb-height: var(--shots-thumb-height, 5.5rem);
+  --_shots-thumb-max-width: var(--shots-thumb-max-width, 9rem);
+  --_shots-backdrop: var(--shots-backdrop, rgb(0 0 0 / 0.82));
+  --_shots-expanded-z: var(--shots-expanded-z, 1000);
+  --_shots-carousel-slide-width: var(--shots-carousel-slide-width, clamp(11rem, 58vw, 15rem));
+  --_shots-carousel-gap: var(--shots-carousel-gap, 1.5rem);
+  --_shots-carousel-padding: var(--shots-carousel-padding, 1rem);
+  display: block;
+  color: var(--_shots-ink);
+  font-family: var(--_shots-font);
+}
+
+:where(screenshot-gallery[hidden], screenshot-carousel[hidden]) {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(screenshot-gallery, screenshot-carousel) {
+    --_shots-ink: var(--shots-ink, #f5f5f7);
+    --_shots-ink-muted: var(--shots-ink-muted, #a1a1a6);
+    --_shots-surface: var(--shots-surface, #161617);
+    --_shots-surface-raised: var(--shots-surface-raised, #232325);
+    --_shots-border: var(--shots-border, #3a3a3c);
+    --_shots-accent: var(--shots-accent, #f5f5f7);
+    --_shots-accent-ink: var(--shots-accent-ink, #161617);
+    --_shots-focus: var(--shots-focus, #2997ff);
+    --_shots-bezel: var(--shots-bezel, #0b0b0c);
+    --_shots-bezel-edge: var(--shots-bezel-edge, #48484a);
+    --_shots-shadow: var(--shots-shadow, 0 12px 32px rgb(0 0 0 / 0.5));
+  }
+}
+
+:where(.shots-host) :where(button) {
+  font: inherit;
+  color: inherit;
+}
+
+:where(.shots-host) :where(button:focus-visible, a:focus-visible, [tabindex]:focus-visible) {
+  outline: 2px solid var(--_shots-focus);
+  outline-offset: 2px;
+}
+
+:where(.shots-icon) {
+  display: inline-flex;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+:where(.shots-icon svg) {
+  width: 100%;
+  height: 100%;
+}
+
+/* --- States --- */
+
+:where(.shots-status) {
+  display: grid;
+  place-items: center;
+  padding: 2rem 1rem;
+  border: 1px solid var(--_shots-border);
+  border-radius: var(--_shots-radius);
+  background: var(--_shots-surface);
+  color: var(--_shots-ink-muted);
+  text-align: center;
+}
+
+/* Loading reserves the gallery's height so the page does not jump when it arrives. */
+:where(screenshot-gallery) :where(.shots-status[data-state="loading"]) {
+  min-height: calc(var(--_shots-stage-height) + var(--_shots-thumb-height) + 7rem);
+}
+
+/* --- Gallery --- */
+
+:where(.shots-gallery) {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--_shots-border);
+  border-radius: var(--_shots-radius);
+  background: var(--_shots-surface);
+  overflow: hidden;
+}
+
+:where(.shots-gallery[data-expanded]) {
+  position: fixed;
+  inset: 0;
+  z-index: var(--_shots-expanded-z);
+  border: 0;
+  border-radius: 0;
+}
+
+:where(.shots-toolbar) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--_shots-border);
+}
+
+:where(.shots-title) {
+  flex: 1 1 10rem;
+  margin: 0;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where(.shots-toggle) {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--_shots-border);
+  border-radius: 999px;
+}
+
+:where(.shots-toggle-button) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border: 0;
+  border-radius: 999px;
+  background: none;
+  cursor: pointer;
+}
+
+:where(.shots-toggle-button[aria-pressed="true"]) {
+  background: var(--_shots-accent);
+  color: var(--_shots-accent-ink);
+}
+
+:where(.shots-actions) {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+:where(.shots-icon-button) {
+  display: inline-grid;
+  place-items: center;
+  width: var(--_shots-button-size);
+  height: var(--_shots-button-size);
+  padding: 0;
+  border: 1px solid var(--_shots-border);
+  border-radius: 999px;
+  background: var(--_shots-surface);
+  cursor: pointer;
+}
+
+:where(.shots-icon-button:disabled) {
+  opacity: 0.4;
+  cursor: default;
+}
+
+:where(.shots-body) {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* The main panel: one screen per page of a horizontal scroll-snap track. */
+:where(.shots-track) {
+  position: relative;
+  display: flex;
+  height: var(--_shots-stage-height);
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  background: var(--_shots-surface-raised);
+}
+
+:where(.shots-gallery[data-expanded]) :where(.shots-track) {
+  flex: 1 1 auto;
+  height: auto;
+}
+
+:where(.shots-track)::-webkit-scrollbar {
+  display: none;
+}
+
+:where(.shots-slide) {
+  display: flex;
+  flex: 0 0 100%;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 100%;
+  padding: var(--_shots-stage-padding);
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+:where(.shots-frame) {
+  display: block;
+  box-sizing: content-box;
+  max-width: 100%;
+  padding: 0;
+  border: 1px solid var(--_shots-border);
+  border-radius: calc(var(--_shots-radius) / 2);
+  background: var(--_shots-surface);
+  overflow: hidden;
+  cursor: zoom-in;
+}
+
+:where(.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)) {
+  padding: var(--shots-frame-pad, 0.6rem);
+  border: 0;
+  border-radius: calc(var(--shots-frame-radius, 1.5rem) + var(--shots-frame-pad, 0.6rem));
+  background: var(--_shots-bezel);
+  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) {
+  border-radius: var(--shots-frame-radius, 1.5rem);
+}
+
+:where(.shots-missing) {
+  display: grid;
+  place-items: center;
+  max-width: 24rem;
+  padding: 1.5rem;
+  color: var(--_shots-ink-muted);
+  text-align: center;
+  cursor: default;
+}
+
+:where(.shots-navrow) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 0.5rem;
+}
+
+:where(.shots-counter) {
+  min-width: 4.5rem;
+  margin: 0;
+  color: var(--_shots-ink-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+:where(.shots-filmstrip) {
+  position: relative;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.25rem 1rem 1rem;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+}
+
+:where(.shots-thumb) {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 0.25rem;
+  max-width: var(--_shots-thumb-max-width);
+  padding: 0.25rem;
+  border: 1px solid transparent;
+  border-radius: calc(var(--_shots-radius) / 2);
+  background: none;
+  cursor: pointer;
+  scroll-snap-align: start;
+}
+
+:where(.shots-thumb[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) {
+  display: block;
+  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) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}
+
+:where(.shots-thumb-label) {
+  max-width: calc(var(--_shots-thumb-max-width) - 0.5rem);
+  overflow: hidden;
+  color: var(--_shots-ink-muted);
+  font-size: 0.75rem;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where(.shots-thumb[aria-current="true"]) :where(.shots-thumb-label) {
+  color: var(--_shots-ink);
+}
+
+:where(.shots-lightbox) {
+  max-width: 100vw;
+  max-height: 100vh;
+  padding: 0;
+  border: 0;
+  background: none;
+  overflow: visible;
+}
+
+:where(.shots-lightbox)::backdrop {
+  background: var(--_shots-backdrop);
+}
+
+:where(.shots-lightbox-backdrop) {
+  position: fixed;
+  inset: 0;
+  border: 0;
+  background: none;
+  cursor: zoom-out;
+}
+
+:where(.shots-lightbox-frame) {
+  position: relative;
+}
+
+:where(.shots-lightbox-image) {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 94vw;
+  max-height: 92vh;
+  border-radius: var(--shots-lightbox-radius, 8px);
+}
+
+:where(.shots-lightbox[data-frame="phone"], .shots-lightbox[data-frame="tablet"]) :where(.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) {
+  border-radius: var(--shots-frame-radius, 2rem);
+}
+
+:where(.shots-lightbox-close) {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  display: grid;
+  place-items: center;
+  width: var(--_shots-button-size);
+  height: var(--_shots-button-size);
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 0.9);
+  color: #1d1d1f;
+  cursor: pointer;
+}
+
+:where(.shots-lightbox) :where(.shots-missing) {
+  position: relative;
+  background: var(--_shots-surface);
+  border-radius: var(--_shots-radius);
+}
+
+/* --- Carousel --- */
+
+:where(.shots-carousel) {
+  position: relative;
+}
+
+:where(.shots-carousel-track) {
+  position: relative;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: 0.5rem var(--_shots-carousel-padding) 2.5rem;
+  scroll-padding-inline: var(--_shots-carousel-padding);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+:where(.shots-carousel-track)::-webkit-scrollbar {
+  display: none;
+}
+
+:where(.shots-carousel-list) {
+  display: flex;
+  gap: var(--_shots-carousel-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where(.shots-carousel-slide) {
+  flex: 0 0 var(--_shots-carousel-slide-width);
+  scroll-snap-align: start;
+}
+
+:where(.shots-carousel-slide figure) {
+  margin: 0;
+}
+
+:where(.shots-carousel-slide figcaption) {
+  margin-top: 0.75rem;
+  color: var(--_shots-ink-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+:where(.shots-device) {
+  display: block;
+  color: inherit;
+  container-type: inline-size;
+}
+
+:where(.shots-device picture) {
+  display: block;
+}
+
+:where(.shots-device img) {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: calc(var(--_shots-radius) / 2);
+}
+
+/* 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) {
+  --shots-frame-pad: 3.5cqi;
+  --shots-frame-radius: calc((100cqi - 2 * var(--shots-frame-pad)) * 0.1214);
+  padding: var(--shots-frame-pad);
+  border-radius: calc(var(--shots-frame-radius) + var(--shots-frame-pad));
+  background: var(--_shots-bezel);
+  box-shadow: inset 0 0 0 1px var(--_shots-bezel-edge), var(--_shots-shadow);
+}
+
+:where(.shots-carousel[data-frame="tablet"]) :where(.shots-device 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) {
+  border-radius: var(--shots-frame-radius);
+}
+
+:where(a.shots-device:focus-visible) {
+  outline: none;
+}
+
+:where(a.shots-device:focus-visible picture) {
+  outline: 2px solid var(--_shots-focus);
+  outline-offset: 3px;
+}
+
+:where(.shots-carousel-controls) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0 var(--_shots-carousel-padding);
+}
+
+:where(.shots-carousel-step) {
+  display: inline-grid;
+  place-items: center;
+  width: var(--_shots-button-size);
+  height: var(--_shots-button-size);
+  padding: 0;
+  border: 1px solid var(--_shots-border);
+  border-radius: 999px;
+  background: var(--_shots-surface);
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :where(.shots-track, .shots-carousel-track, .shots-filmstrip) {
+    scroll-behavior: smooth;
+  }
+
+  :where(a.shots-device picture) {
+    transition: transform 200ms ease;
+  }
+
+  @media (hover: hover) {
+    :where(a.shots-device:hover picture) {
+      transform: translateY(-4px);
+    }
+  }
+}