orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/products/ProductReviewForm.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type FormEvent,
+} from 'react';
+import {
+  useOrionplace,
+  useOrionplaceProducts,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectProfile } from '@/stores/orionplace';
+import type {
+  IProductFeedbackPreloadResponse,
+} from '@/interfaces/orionplace/products/IProductFeedbackApi';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import {
+  REVIEW_TEXT_MAX_LENGTH,
+  reviewLabels,
+  reviewTextMinLength,
+} from '@/lib/orionplace/reviewLabels';
+import { OrionplaceAvatar } from '@/components/orionplace/shared/OrionplaceAvatar';
+import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
+import styles from './ProductReviewForm.module.css';
+
+export interface ProductReviewFormValue {
+  text: string;
+  rating: number;
+  files: File[];
+  remove: number[];
+}
+
+export interface ProductReviewFormProps {
+  initial?: NonNullable<IProductFeedbackPreloadResponse['page_data']>;
+  replyingTo?: string;
+  pending?: boolean;
+  ratingError?: string;
+  textError?: string;
+  onSubmit?: (value: ProductReviewFormValue) => void;
+  onCancel?: () => void;
+}
+
+export function ProductReviewForm({
+  initial,
+  replyingTo,
+  pending = false,
+  ratingError,
+  textError,
+  onSubmit,
+  onCancel,
+}: ProductReviewFormProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const profile = useOrionplace(selectProfile);
+  const labels = reviewLabels(locale);
+  const common = featureLabels(locale);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [text, setText] = useState(initial?.text ?? '');
+  // Replies do not rate. A review needs 1-5 stars: nothing is preselected,
+  // and an older review saved without stars chooses them when it is edited.
+  const isReply = Boolean(replyingTo || initial?.is_reply);
+  const [rating, setRating] = useState(
+    initial?.rating ? String(initial.rating) : '',
+  );
+  const [ratingMessage, setRatingMessage] = useState('');
+  // OrionMarketplace's domain setting feedback_text_min_length (0 - no minimum).
+  const minLength = reviewTextMinLength(useOrionplaceProducts(
+    (state) => state.init?.variables?.feedback_text_min_length,
+  ));
+  const [textMessage, setTextMessage] = useState('');
+  const textTooShort = text.trim().length < Math.max(minLength, 1);
+  // The counter names the minimum, so a too short text explains the
+  // disabled submit button before OrionMarketplace is asked.
+  const counter = minLength
+    ? `${text.length} / ${REVIEW_TEXT_MAX_LENGTH} · ${labels.textMinimum.replace('{count}', String(minLength))}`
+    : `${text.length} / ${REVIEW_TEXT_MAX_LENGTH}`;
+  const [files, setFiles] = useState<File[]>([]);
+  const [removed, setRemoved] = useState<number[]>([]);
+  const [error, setError] = useState('');
+  const existing = (initial?.images ?? []).filter(
+    (image) => !removed.includes(image.id),
+  );
+  const author = profile
+    ? {
+      name: [profile.first_name, profile.last_name].filter(Boolean).join(' '),
+      avatar: profile.avatar,
+    }
+    : null;
+  const heading = initial
+    ? labels.editing
+    : replyingTo
+      ? `${labels.repliesTo}: ${replyingTo}`
+      : labels.write;
+  const options = {
+    '1': '★',
+    '2': '★★',
+    '3': '★★★',
+    '4': '★★★★',
+    '5': '★★★★★',
+  };
+
+  // OrionMarketplace answers a review without stars with an error on `rating`; it stays
+  // under the stars until another rating is chosen.
+  useEffect(() => {
+    setRatingMessage(ratingError ?? '');
+  }, [ratingError]);
+
+  // OrionMarketplace's error on `text` (shorter than the domain minimum) stays under the
+  // text until it is changed.
+  useEffect(() => {
+    setTextMessage(textError ?? '');
+  }, [textError]);
+
+  function changeText(value: string) {
+    setText(value);
+    setTextMessage('');
+  }
+
+  function chooseRating(value: string) {
+    setRating(value);
+    setRatingMessage('');
+  }
+
+  function addFiles(event: ChangeEvent<HTMLInputElement>) {
+    const selected = Array.from(event.target.files ?? []);
+    setError('');
+    if (existing.length + files.length + selected.length > 5) {
+      setError(labels.tooMany);
+    } else {
+      setFiles((current) => [...current, ...selected]);
+    }
+    if (fileInput.current) {
+      fileInput.current.value = '';
+    }
+  }
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (pending) {
+      return;
+    }
+    if (!isReply && !rating) {
+      setRatingMessage(labels.ratingRequired);
+      return;
+    }
+    if (!textTooShort && text.length <= REVIEW_TEXT_MAX_LENGTH) {
+      onSubmit?.({
+        text: text.trim(),
+        rating: isReply ? 0 : Number(rating),
+        files,
+        remove: removed,
+      });
+    }
+  }
+
+  return (
+    <form
+      className={styles.form}
+      data-feature-part="ProductReviewForm"
+      onSubmit={submit}
+    >
+      <div className={styles.heading}>
+        {author ? (
+          <OrionplaceAvatar src={author.avatar} name={author.name} />
+        ) : null}
+        <h3>{heading}</h3>
+      </div>
+      {isReply ? null : (
+        <div className={styles.rating} data-review-rating>
+          <OrionplaceSelect
+            value={rating}
+            options={options}
+            label={labels.rating}
+            displayValue={rating ? undefined : labels.chooseRating}
+            disabled={pending}
+            required
+            onValueChange={chooseRating}
+          />
+          {ratingMessage ? (
+            <span
+              role="alert"
+              className={styles.fieldError}
+              data-review-rating-error
+            >
+              {ratingMessage}
+            </span>
+          ) : null}
+        </div>
+      )}
+      <label className={styles.field}>
+        <span>
+          {labels.text}{' '}
+          <span className={styles.required} aria-hidden="true">*</span>
+        </span>
+        <textarea
+          value={text}
+          disabled={pending}
+          required
+          minLength={minLength || undefined}
+          maxLength={REVIEW_TEXT_MAX_LENGTH}
+          aria-label={labels.text}
+          aria-invalid={textMessage ? 'true' : undefined}
+          onChange={(event) => changeText(event.target.value)}
+        />
+      </label>
+      {textMessage ? (
+        <span
+          role="alert"
+          className={styles.fieldError}
+          data-review-text-error
+        >
+          {textMessage}
+        </span>
+      ) : null}
+      <span className={styles.counter} data-review-text-counter>
+        {counter}
+      </span>
+      <label className={styles.field}>
+        <span>{labels.addImages}</span>
+        <input
+          ref={fileInput}
+          type="file"
+          accept="image/jpeg,image/png,image/gif,image/webp,image/x-icon"
+          multiple
+          disabled={pending}
+          onChange={addFiles}
+        />
+      </label>
+      {existing.length ? (
+        <div className={styles.images}>
+          {existing.map((image) => (
+            <div key={image.id} className={styles.savedImage}>
+              <img
+                src={image.image}
+                alt={labels.image}
+                width={96}
+                height={96}
+                loading="lazy"
+                decoding="async"
+              />
+              <button
+                type="button"
+                aria-label={`${labels.imageRemove} ${image.id}`}
+                disabled={pending}
+                onClick={() => setRemoved((current) => [...current, image.id])}
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {files.length ? (
+        <ul className={styles.files}>
+          {files.map((file, index) => (
+            <li key={`${file.name}-${file.lastModified}-${index}`}>
+              <span>{file.name}</span>
+              <button
+                type="button"
+                aria-label={`${common.delete}: ${file.name}`}
+                disabled={pending}
+                onClick={() => setFiles((current) =>
+                  current.filter((_, position) => position !== index))}
+              >
+                ×
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {error ? <p role="alert" className={styles.error}>{error}</p> : null}
+      <div className={styles.actions}>
+        <button
+          type="submit"
+          className={styles.primary}
+          disabled={pending || textTooShort}
+        >
+          {pending ? common.loading : initial ? labels.save : labels.send}
+        </button>
+        <button type="button" disabled={pending} onClick={() => onCancel?.()}>
+          {common.cancel}
+        </button>
+      </div>
+    </form>
+  );
+}

package/templates/components/orionplace/products/ProductReviewGallery.README.md

@@ -0,0 +1,61 @@
+# ProductReviewGallery
+
+## English
+
+`ProductReviewGallery` shows square thumbnails from reviews of one product or
+all products sold by one seller. When mounted, retried or paginated, `onLoad`
+receives an `IProductFeedbackImagesRequest` with the matching product or seller
+filter. The host supplies the returned `images`, `pagination`, loading and error
+state.
+
+Each thumbnail shows its review rating when present. Selecting it calls
+`onSelect` with the image's `feedback_id`, so the parent can load that complete
+review and show its text and photos. Every image reserves a square before it
+loads and uses native lazy loading.
+
+The grid shows more photos per row as the gallery itself gets wider, whatever
+the screen width, so it looks the same inside `ProductReviews` and on its own.
+
+### Props
+
+| Prop                                                        | Meaning                                                                                                  |
+| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `productId?: number`                                        | ID of the product handled by ProductReviewGallery.                                                       |
+| `sellerId?: number`                                         | ID of the seller handled by ProductReviewGallery.                                                        |
+| `images?: readonly IProductReviewImage[]`                   | Ordered images available to the gallery.                                                                 |
+| `pagination?: Partial<IApiPagination>`                      | Current API pagination values.                                                                           |
+| `loaded?: boolean`                                          | Distinguishes a confirmed empty result from data that has not loaded yet.                                |
+| `pending?: boolean`                                         | Shows the loading state and blocks duplicate actions.                                                    |
+| `error?: string`                                            | Customer-visible error for the component request; omit it when no request failed.                        |
+| `onLoad?: (request: IProductFeedbackImagesRequest) => void` | Called when the component needs its primary data. The callback payload is shown in its type.             |
+| `onSelect?: (feedbackId: number) => void`                   | Called when the visitor chooses the component’s primary item. The callback payload is shown in its type. |
+
+## Русский
+
+`ProductReviewGallery` показывает квадратные миниатюры из отзывов об одном
+товаре или обо всех товарах одного продавца. После монтирования, при повторе и
+переходе между страницами `onLoad` получает `IProductFeedbackImagesRequest` с
+фильтром товара или продавца. Родитель передаёт полученные `images`,
+`pagination`, состояние загрузки и ошибку.
+
+Под миниатюрой выводится оценка отзыва, если она есть. Выбор вызывает
+`onSelect` с `feedback_id` фотографии, чтобы родитель загрузил полный отзыв с
+его текстом и фотографиями. Для каждого изображения заранее зарезервирован
+квадрат, а загрузка начинается средствами браузера по мере приближения к нему.
+
+Чем шире сама галерея, тем больше фотографий в ряду, независимо от ширины
+экрана, поэтому она выглядит одинаково и внутри `ProductReviews`, и отдельно.
+
+### Свойства
+
+| Свойство                                                    | Назначение                                                                                                |
+| ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `productId?: number`                                        | ID товара, с которым работает ProductReviewGallery.                                                       |
+| `sellerId?: number`                                         | ID продавца, с которым работает ProductReviewGallery.                                                     |
+| `images?: readonly IProductReviewImage[]`                   | Упорядоченные изображения галереи.                                                                        |
+| `pagination?: Partial<IApiPagination>`                      | Текущие данные пагинации API.                                                                             |
+| `loaded?: boolean`                                          | Отличает подтверждённый пустой результат от ещё не загруженных данных.                                    |
+| `pending?: boolean`                                         | Показывает загрузку и блокирует повторные действия.                                                       |
+| `error?: string`                                            | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                      |
+| `onLoad?: (request: IProductFeedbackImagesRequest) => void` | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.                |
+| `onSelect?: (feedbackId: number) => void`                   | Вызывается, когда покупатель выбирает основной элемент компонента. Данные обработчика указаны в его типе. |

package/templates/components/orionplace/products/ProductReviewGallery.module.css

@@ -0,0 +1,108 @@
+/*
+ * The photo grid follows the gallery's own width: 5 photos per row from
+ * 592px (tiles of about 112px) and 6 from 760px (about 120px). On the
+ * supplied product and seller pages that gives 3 per row on phones, 5 on a
+ * 768px screen and 6 on a 1280px screen, as with the former screen rules.
+ */
+.section {
+  display: grid;
+  /* The gap and base text of `op-feature-stack` in the other packages. */
+  gap: 1.25rem;
+  color: var(--orionplace-text);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  container: review-photos / inline-size;
+}
+
+/* `op-feature-heading-text`: the browser's h3 size, regular weight. */
+.section h3 {
+  margin: 0;
+  font-size: 1.17em;
+  line-height: 1.5rem;
+  font-weight: 400;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: .5rem;
+}
+
+.grid button {
+  display: grid;
+  gap: .25rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: .75rem;
+  line-height: calc(1 / 0.75);
+  text-align: left;
+  cursor: pointer;
+}
+
+.grid button:focus-visible {
+  opacity: .75;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+@media (hover: hover) {
+  .grid button:hover {
+    opacity: .75;
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}
+
+.grid img {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1;
+  border: 1px solid var(--orionplace-border);
+  object-fit: cover;
+}
+
+.error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  padding: .75rem 1rem;
+  border: 1px solid var(--orionplace-danger);
+  color: var(--orionplace-danger);
+}
+
+.error button {
+  min-height: 2.5rem;
+  padding-inline: .75rem;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@container review-photos (min-width: 592px) {
+  .grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+@container review-photos (min-width: 760px) {
+  .grid {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}

package/templates/components/orionplace/products/ProductReviewGallery.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type {
+  IProductFeedbackImagesRequest,
+  IProductReviewImage,
+} from '@/interfaces/orionplace/products/IProductFeedbackApi';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { reviewLabels } from '@/lib/orionplace/reviewLabels';
+import { reviewImageScopeFilters } from '@/lib/orionplace/reviewScope';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
+import styles from './ProductReviewGallery.module.css';
+
+export interface ProductReviewGalleryProps {
+  productId?: number;
+  sellerId?: number;
+  images?: readonly IProductReviewImage[];
+  pagination?: Partial<IApiPagination>;
+  loaded?: boolean;
+  pending?: boolean;
+  error?: string;
+  onLoad?: (request: IProductFeedbackImagesRequest) => void;
+  onSelect?: (feedbackId: number) => void;
+}
+
+export function ProductReviewGallery({
+  productId,
+  sellerId,
+  images = [],
+  pagination = {},
+  loaded = false,
+  pending = false,
+  error = '',
+  onLoad,
+  onSelect,
+}: ProductReviewGalleryProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const labels = reviewLabels(locale);
+  const common = featureLabels(locale);
+  const requested = useRef(false);
+
+  function load(page = 1) {
+    onLoad?.({
+      filters: reviewImageScopeFilters({ productId, sellerId }),
+      paginate: { page, pp_items: 15 },
+    });
+  }
+
+  useEffect(() => {
+    if (!requested.current) {
+      requested.current = true;
+      load();
+    }
+  }, []);
+
+  return (
+    <section className={styles.section} data-feature-part="ProductReviewGallery">
+      <h3>{labels.allPhotos}</h3>
+      {error ? (
+        <div className={styles.error} role="alert">
+          <span>{error}</span>
+          <button type="button" disabled={pending} onClick={() => load(pagination.page ?? 1)}>
+            {common.retry}
+          </button>
+        </div>
+      ) : null}
+      {pending ? (
+        <p
+          className="op-feature-loading"
+          role="status"
+        >
+          <span className={styles.srOnly}>{common.loading}</span>
+        </p>
+      ) : null}
+      {!pending && loaded && !images.length ? (
+        <OrionplaceEmptyState kind="photos" size="compact" message={labels.emptyImages} />
+      ) : null}
+      <div className={styles.grid}>
+        {images.map((image) => (
+          <button
+            key={image.id}
+            type="button"
+            aria-label={`${labels.image} ${image.id}`}
+            onClick={() => onSelect?.(image.feedback_id)}
+          >
+            <img
+              src={image.image}
+              alt=""
+              width={1}
+              height={1}
+              loading="lazy"
+              decoding="async"
+            />
+            {image.feedback_rating ? (
+              <span>{'★'.repeat(Math.min(5, Math.max(0, image.feedback_rating)))}</span>
+            ) : null}
+          </button>
+        ))}
+      </div>
+      <StorefrontPagination
+        pagination={pagination}
+        pending={pending}
+        onChange={load}
+      />
+    </section>
+  );
+}

package/templates/components/orionplace/products/ProductReviewImageViewer.README.md

@@ -0,0 +1,49 @@
+# ProductReviewImageViewer
+
+## English
+
+Opens the supplied review photos in a dialog. `images` contains photo IDs
+and public image URLs. `index` chooses the first displayed photo and resets
+the viewer when it changes. Previous and Next, arrow keys, Home, End and
+thumbnail buttons change the photo, and so does a sideways swipe on the large
+photo; `onChange` receives its ID and position. `StorefrontProduct` opens the
+product's own photos here with `label` and `alt`.
+`onClose` handles the close button, Escape and a click outside the dialog.
+The component returns keyboard focus to the element that opened it. The
+dialog's images are mounted when it opens, so an unopened viewer starts no
+image requests.
+
+### Props
+
+| Prop                                                         | Meaning                                                                                  |
+| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
+| `images: IProductFeedbackImage[]`                            | Ordered images available to the gallery.                                                 |
+| `index?: number`                                             | Zero-based index of the current item in its collection.                                  |
+| `label?: string`                                             | Dialog name instead of «Review photos».                                                  |
+| `alt?: string`                                               | Photo text before the photo number instead of «Review photo».                            |
+| `onChange?: (photo: { id: number; index: number; }) => void` | Called when the visitor confirms a new value. The callback payload is shown in its type. |
+| `onClose?: () => void`                                       | Called when the visitor closes the panel or dialog. The callback has no payload.         |
+
+## Русский
+
+Открывает переданные фотографии к отзыву в диалоге. `images` содержит ID
+фотографий и их общедоступные адреса. `index` задаёт первую показанную
+фотографию и сбрасывает выбор при изменении. Кнопки «Назад» и «Вперёд»,
+клавиши стрелок, Home, End, миниатюры и смахивание по большой фотографии
+меняют фотографию; `StorefrontProduct` открывает здесь фотографии товара с
+`label` и `alt`; `onChange`
+получает её ID и номер в списке. `onClose` обрабатывает кнопку закрытия,
+Escape и щелчок вне диалога. При закрытии фокус возвращается на элемент,
+который открыл просмотрщик. Изображения появляются при открытии диалога,
+поэтому закрытый просмотрщик не начинает их загрузку.
+
+### Свойства
+
+| Свойство                                                     | Назначение                                                                                       |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
+| `images: IProductFeedbackImage[]`                            | Упорядоченные изображения галереи.                                                               |
+| `label?: string`                                             | Название диалога вместо «Фотографии к отзыву». |
+| `alt?: string`                                               | Текст фотографии перед её номером вместо «Фотография к отзыву». |
+| `index?: number`                                             | Индекс текущего элемента в коллекции, начиная с нуля.                                            |
+| `onChange?: (photo: { id: number; index: number; }) => void` | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе. |
+| `onClose?: () => void`                                       | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.         |

package/templates/components/orionplace/products/ProductReviewImageViewer.module.css

@@ -0,0 +1,50 @@
+.viewer {
+  box-sizing: border-box;
+  width: calc(100vw - 32px);
+  max-width: 960px;
+  height: calc(100dvh - 32px);
+  max-height: none;
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+  font-family: inherit;
+}
+.viewer::backdrop { background: rgb(0 0 0 / 35%); backdrop-filter: blur(2px); }
+.content { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; container: review-image-viewer / inline-size; }
+.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--orionplace-border); }
+.header p { margin: 0; color: var(--orionplace-muted); font-size: 12px; line-height: 1rem; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
+.header button { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; outline: none; background: transparent; color: inherit; font-size: 24px; line-height: 2rem; cursor: pointer; transition: background-color 150ms; }
+.stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 16px; user-select: none; }
+/* Wide side margins from 606px: the viewer is the screen minus the 16px dialog
+   margins and its 1px borders, so 606px is its width on a 640px screen. */
+@container review-image-viewer (min-width: 606px) { .stage { padding-inline: 80px; } }
+.mainImage { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
+.arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; transform: translateY(-50%); border: 1px solid var(--orionplace-border); border-radius: 50%; padding: 0; outline: none; background: var(--orionplace-surface); color: inherit; font-size: 28px; cursor: pointer; transition: border-color 150ms, background-color 150ms; }
+.arrow svg { width: 1.25rem; height: 1.25rem; }
+.swipe { touch-action: pan-y; }
+.previous { left: 12px; }
+.next { right: 12px; }
+.arrow:focus-visible { border-color: var(--orionplace-text); background: var(--orionplace-hover); }
+.header button:focus-visible { background: var(--orionplace-hover); }
+@media (hover: hover) {
+  .arrow:hover { border-color: var(--orionplace-text); background: var(--orionplace-hover); }
+  .header button:hover { background: var(--orionplace-hover); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .arrow,
+  .header button { transition: none; }
+}
+.thumbnails { display: flex; gap: 8px; margin: 0; padding: 12px 16px; overflow-x: auto; border-top: 1px solid var(--orionplace-border); list-style: none; }
+.thumbnails li { flex-shrink: 0; }
+.thumbnails button { display: block; width: 56px; height: 56px; padding: 0; overflow: hidden; border: 1px solid var(--orionplace-border); background: var(--orionplace-surface); cursor: pointer; }
+.thumbnails button[aria-current='true'],
+.thumbnails button:focus-visible { border-color: var(--orionplace-text); }
+@media (hover: hover) {
+  .thumbnails button:hover {
+    border-color: var(--orionplace-text);
+  }
+}
+.thumbnails img { width: 100%; height: 100%; object-fit: contain; }