@a2f0/agent-tool 0.1.31 → 0.1.33

package/src/screenshots/gallery.css

@@ -0,0 +1,535 @@
+/*
+ * Styles for <screenshot-gallery> and <screenshot-carousel>
+ * (@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) {
+  --_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));
+  }
+}
+
+.shots-host :where(button) {
+  font: inherit;
+  color: inherit;
+}
+
+:where(.shots-host) :where(button, a, [tabindex]):focus-visible {
+  outline: 2px solid var(--_shots-focus);
+  outline-offset: 2px;
+}
+
+.shots-icon {
+  display: inline-flex;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.shots-icon :where(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+/* --- States --- */
+
+.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) .shots-status:where([data-state="loading"]) {
+  min-height: calc(var(--_shots-stage-height) + var(--_shots-thumb-height) + 7rem);
+}
+
+/* --- Gallery --- */
+
+.shots-gallery {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--_shots-border);
+  border-radius: var(--_shots-radius);
+  background: var(--_shots-surface);
+  overflow: hidden;
+}
+
+.shots-gallery:where([data-expanded]) {
+  position: fixed;
+  inset: 0;
+  z-index: var(--_shots-expanded-z);
+  border: 0;
+  border-radius: 0;
+}
+
+.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);
+}
+
+.shots-title {
+  flex: 1 1 10rem;
+  margin: 0;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.shots-toggle {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--_shots-border);
+  border-radius: 999px;
+}
+
+.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;
+}
+
+.shots-toggle-button:where([aria-pressed="true"]) {
+  background: var(--_shots-accent);
+  color: var(--_shots-accent-ink);
+}
+
+.shots-actions {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.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;
+}
+
+.shots-icon-button:where(:disabled) {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.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. */
+.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]) .shots-track {
+  flex: 1 1 auto;
+  height: auto;
+}
+
+.shots-track::-webkit-scrollbar {
+  display: none;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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"]) .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));
+  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);
+}
+
+.shots-missing {
+  display: grid;
+  place-items: center;
+  max-width: 24rem;
+  padding: 1.5rem;
+  color: var(--_shots-ink-muted);
+  text-align: center;
+  cursor: default;
+}
+
+.shots-navrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 0.5rem;
+}
+
+.shots-counter {
+  min-width: 4.5rem;
+  margin: 0;
+  color: var(--_shots-ink-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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. */
+.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;
+}
+
+.shots-thumb-image :where(img) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}
+
+.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"]) .shots-thumb-label {
+  color: var(--_shots-ink);
+}
+
+.shots-lightbox {
+  max-width: 100vw;
+  max-height: 100vh;
+  padding: 0;
+  border: 0;
+  background: none;
+  overflow: visible;
+}
+
+.shots-lightbox::backdrop {
+  background: var(--_shots-backdrop);
+}
+
+.shots-lightbox-backdrop {
+  position: fixed;
+  inset: 0;
+  border: 0;
+  background: none;
+  cursor: zoom-out;
+}
+
+.shots-lightbox-frame {
+  position: relative;
+}
+
+.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"]) .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"]) .shots-lightbox-image {
+  border-radius: var(--shots-frame-radius, 2rem);
+}
+
+.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) .shots-missing {
+  position: relative;
+  background: var(--_shots-surface);
+  border-radius: var(--_shots-radius);
+}
+
+/* --- Carousel --- */
+
+.shots-carousel {
+  position: relative;
+}
+
+.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;
+}
+
+.shots-carousel-track::-webkit-scrollbar {
+  display: none;
+}
+
+.shots-carousel-list {
+  display: flex;
+  gap: var(--_shots-carousel-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.shots-carousel-slide {
+  flex: 0 0 var(--_shots-carousel-slide-width);
+  scroll-snap-align: start;
+}
+
+.shots-carousel-slide :where(figure) {
+  margin: 0;
+}
+
+.shots-carousel-slide :where(figcaption) {
+  margin-top: 0.75rem;
+  color: var(--_shots-ink-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.shots-device {
+  display: block;
+  color: inherit;
+  container-type: inline-size;
+}
+
+.shots-device :where(picture) {
+  display: block;
+}
+
+.shots-device :where(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"]) .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);
+  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"]) .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"]) .shots-device :where(img) {
+  border-radius: var(--shots-frame-radius);
+}
+
+.shots-device:where(a:focus-visible) {
+  outline: none;
+}
+
+.shots-device:where(a:focus-visible) :where(picture) {
+  outline: 2px solid var(--_shots-focus);
+  outline-offset: 3px;
+}
+
+.shots-carousel-controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0 var(--_shots-carousel-padding);
+}
+
+.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) {
+  :is(.shots-track, .shots-carousel-track, .shots-filmstrip) {
+    scroll-behavior: smooth;
+  }
+
+  .shots-device:where(a) :where(picture) {
+    transition: transform 200ms ease;
+  }
+
+  @media (hover: hover) {
+    .shots-device:where(a:hover) :where(picture) {
+      transform: translateY(-4px);
+    }
+  }
+}