orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,67 @@
+# ProductSecondaryVariantModal
+
+## English
+
+Opens a focused dialog for a product's additional variant choices. The
+`variantId` identifies the selected main variant; the product store supplies
+the matching secondary options or their loading and error state.
+`onChangePrimary` requests another main choice and `onRetry` requests the
+secondary options again. In `purchaseMode`, choosing a secondary product
+shows its cart, availability or preorder action. The component emits the
+selected product through `onSelect` before the requested purchase action.
+`onClose` dismisses the dialog and returns focus to the opener. Changing
+`modal` while the dialog is open switches it in place and keeps the focus on
+the control the visitor is on.
+
+### Props
+
+| Prop                                                                             | Meaning                                                                                                              |
+| -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `productId: number`                                                              | ID of the product handled by ProductSecondaryVariantModal.                                                           |
+| `collection?: OrionplaceProductCollection`                                       | Product-store collection used to resolve the supplied product ID.                                                    |
+| `variantId: number`                                                              | ID of the variant handled by ProductSecondaryVariantModal.                                                           |
+| `purchaseMode?: boolean`                                                         | Selects the supported purchase flow for this product action.                                                         |
+| `actionsDisabled?: boolean`                                                      | Disables product actions while the surrounding flow is busy.                                                         |
+| `modal?: boolean`                                                                | `true` (default) opens a modal window over the page; `false` shows a nonmodal window in its container, without locking scrolling or moving focus. |
+| `onChangePrimary?: (variant: IProductVariantValue) => void`                      | Called when the visitor changes the primary selection. The callback payload is shown in its type.                    |
+| `onSelect?: (variant: IProductSecondaryVariant) => void`                         | Called when the visitor chooses the component’s primary item. The callback payload is shown in its type.             |
+| `onRetry?: () => void`                                                           | Called when the visitor retries the failed request. The callback has no payload.                                     |
+| `onClose?: () => void`                                                           | Called when the visitor closes the panel or dialog. The callback has no payload.                                     |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`    | Passes the product ID in `product` and the requested total quantity in `quantity` when adding an item or changing its quantity. The application sends the request and supplies confirmed product data. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void` | Passes the product ID in `product` and cart item ID in `cartItem` when removing the last unit. The application removes that cart item and supplies confirmed product data. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                      | Passes the product ID in `product` when an availability notification is requested. The application handles any required sign-in, sends the request and updates subscription state. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                    | Passes the product ID in `product` when cancelling an availability notification. The application sends the request and supplies the confirmed subscription state. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                       | Passes the product ID in `product` when preorder is selected. The application collects the required contact details and submits the request. |
+
+## Русский
+
+Открывает диалог для выбора дополнительного варианта товара. `variantId`
+задаёт выбранный основной вариант; хранилище товаров предоставляет
+соответствующие дополнительные варианты или состояние загрузки и ошибки.
+`onChangePrimary` запрашивает другое основное значение, а `onRetry` повторяет
+запрос дополнительных вариантов. В режиме `purchaseMode` после выбора
+товара появляются доступные для него действия: корзина, уведомление или
+предзаказ. `onSelect` передаёт выбранный товар перед действием покупки.
+`onClose` закрывает диалог и возвращает фокус на кнопку, которая его открыла.
+Если изменить `modal`, пока диалог открыт, он переключается на месте, а фокус
+остаётся на элементе, с которым работает посетитель.
+
+### Свойства
+
+| Свойство                                                                         | Назначение                                                                                                         |
+| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `productId: number`                                                              | ID товара, с которым работает ProductSecondaryVariantModal.                                                        |
+| `collection?: OrionplaceProductCollection`                                       | Коллекция store товаров, в которой компонент ищет переданный ID товара.                                            |
+| `variantId: number`                                                              | ID варианта товара, с которым работает ProductSecondaryVariantModal.                                               |
+| `purchaseMode?: boolean`                                                         | Выбирает поддерживаемый сценарий покупки товара.                                                                   |
+| `actionsDisabled?: boolean`                                                      | Блокирует действия с товаром, пока внешний сценарий занят.                                                         |
+| `modal?: boolean`                                                                | `true` (по умолчанию) открывает модальное окно поверх страницы; `false` показывает немодальное окно в своём контейнере, без блокировки прокрутки и переноса фокуса. |
+| `onChangePrimary?: (variant: IProductVariantValue) => void`                      | Вызывается, когда покупатель меняет основной выбор. Данные обработчика указаны в его типе.                         |
+| `onSelect?: (variant: IProductSecondaryVariant) => void`                         | Вызывается, когда покупатель выбирает основной элемент компонента. Данные обработчика указаны в его типе.          |
+| `onRetry?: () => void`                                                           | Вызывается, когда покупатель повторяет неудачный запрос. Обработчик не получает данные.                            |
+| `onClose?: () => void`                                                           | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.                           |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`    | Передаёт `product` — ID товара и `quantity` — запрошенное итоговое количество при добавлении или изменении количества. Приложение выполняет запрос и передаёт подтверждённые данные товара. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void` | Передаёт ID товара в `product` и ID позиции корзины в `cartItem` при удалении последней единицы. Приложение удаляет эту позицию и передаёт подтверждённые данные товара. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                      | Передаёт ID товара в `product` при выборе уведомления о поступлении. Приложение выполняет вход, если он нужен, отправляет запрос и обновляет состояние подписки. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                    | Передаёт ID товара в `product` при отмене уведомления о поступлении. Приложение отправляет запрос и передаёт подтверждённое состояние подписки. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                       | Передаёт ID товара в `product` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |

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

@@ -0,0 +1,79 @@
+.modal {
+  box-sizing: border-box;
+  width: 440px;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100dvh - 32px);
+  margin: auto;
+  padding: 24px;
+  overflow: auto;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+}
+.modal::backdrop { background: #0006; backdrop-filter: blur(2px); }
+.inline { position: relative; width: 100%; max-width: 100%; max-height: none; margin: 0; }
+.header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
+.header h3 { margin: 0; font-size: 14px; line-height: calc(20 / 14); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
+.header button { display: grid; width: 36px; height: 36px; flex-shrink: 0; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 28px; cursor: pointer; outline: none; }
+.header button:focus-visible { background: var(--orionplace-hover); }
+@media (hover: hover) {
+  .header button:hover {
+    background: var(--orionplace-hover);
+  }
+}
+.product { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 20px; }
+.product img { width: 64px; height: 80px; flex-shrink: 0; object-fit: contain; }
+.product p { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 14px; line-height: calc(20 / 14); }
+.group { display: grid; gap: 8px; }
+.group p { margin: 0; color: var(--orionplace-muted); font-size: 11px; line-height: 16px; text-transform: uppercase; letter-spacing: .08em; }
+.choices { display: flex; flex-wrap: wrap; gap: 8px; }
+.choice {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  max-width: 100%;
+  padding: 0 12px;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  color: var(--orionplace-muted);
+  font: inherit;
+  font-size: 12px;
+  line-height: calc(16 / 12);
+  cursor: pointer;
+}
+.choice[aria-pressed='true'] { border-color: var(--orionplace-text); color: var(--orionplace-text); }
+.choice:focus-visible { border-color: var(--orionplace-text); outline: none; }
+@media (hover: hover) {
+  .choice:hover {
+    border-color: var(--orionplace-text);
+  }
+}
+.choice:disabled { opacity: .4; cursor: default; }
+.color { box-sizing: content-box; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--orionplace-border); }
+.state { min-height: 96px; margin-top: 20px; }
+.notice { composes: notice from '../account/account.module.css'; }
+.noticeError { composes: notice noticeError from '../account/account.module.css'; }
+/* Retry is a text button, as in Nuxt and Svelte. */
+.retry {
+  height: 36px;
+  margin-top: 12px;
+  padding: 0 16px;
+  border: 1px solid var(--orionplace-text);
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+  font: inherit;
+  font-size: 12px;
+  line-height: calc(16 / 12);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  cursor: pointer;
+  outline: none;
+}
+.retry:focus-visible { background: var(--orionplace-hover); }
+@media (hover: hover) {
+  .retry:hover {
+    background: var(--orionplace-hover);
+  }
+}
+.screenReaderOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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

@@ -0,0 +1,324 @@
+'use client';
+
+import '@/components/orionplace/shared/dialogs.css';
+
+import { useEffect, useId, useRef, useState } from 'react';
+import type { MouseEvent } from 'react';
+import {
+  useOrionplaceProducts,
+  useOrionplaceProductsStore,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import type {
+  IProductSecondaryVariant,
+  IProductVariantValue,
+} from '@/interfaces/orionplace/products/IProduct';
+import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
+import {
+  getAvailableNestedValueFromObject,
+  getAvailableValueFromObject,
+} from '@/lib/orionplace/presentation';
+import { productLabels } from '@/lib/orionplace/productLabels';
+import { useDialogLayoutEffect } from '@/hooks/useOrionplaceDialog';
+import {
+  createPageScrollLock,
+  focusedElement,
+  restoreFocus,
+} from '@/lib/orionplace/modalWindow';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import { ProductCardActions } from './ProductCardActions';
+import type { ProductActionSelection } from './ProductCardActions';
+import styles from './ProductSecondaryVariantModal.module.css';
+
+export interface ProductSecondaryVariantModalProps {
+  productId: number;
+  collection?: OrionplaceProductCollection;
+  variantId: number;
+  purchaseMode?: boolean;
+  /** `false` shows the window in the page flow, without blocking the page. */
+  modal?: boolean;
+  actionsDisabled?: boolean;
+  onChangePrimary?: (variant: IProductVariantValue) => void;
+  onSelect?: (variant: IProductSecondaryVariant) => void;
+  onRetry?: () => void;
+  onClose?: () => void;
+  onAdd?: (selection: ProductActionSelection & { quantity: number }) => void;
+  onRemove?: (selection: ProductActionSelection & { cartItem: number }) => void;
+  onSubscribe?: (selection: ProductActionSelection) => void;
+  onUnsubscribe?: (selection: ProductActionSelection) => void;
+  onPreorder?: (selection: ProductActionSelection) => void;
+}
+
+export function ProductSecondaryVariantModal({
+  productId,
+  collection = 'products',
+  variantId,
+  purchaseMode = false,
+  modal = true,
+  actionsDisabled = false,
+  onChangePrimary,
+  onSelect,
+  onRetry,
+  onClose,
+  onAdd,
+  onRemove,
+  onSubscribe,
+  onUnsubscribe,
+  onPreorder,
+}: ProductSecondaryVariantModalProps) {
+  const id = useId();
+  const dialog = useRef<HTMLDialogElement>(null);
+  const closeButton = useRef<HTMLButtonElement>(null);
+  const opener = useRef<HTMLElement | undefined>(undefined);
+  const [pageScroll] = useState(() => createPageScrollLock());
+  const store = useOrionplaceProductsStore();
+  const [selected, setSelected] = useState<IProductSecondaryVariant>();
+  const localeCode = useOrionplaceSelections((state) => state.localeCode);
+  const product = useOrionplaceProducts((state) => {
+    const currentId = selected?.product.id ?? productId;
+    const base = collection === 'featured' ? state.init?.featured : state.init?.products;
+    return state.updates[collection][currentId] ??
+      base?.find((item) => item.id === currentId);
+  });
+  const state = useOrionplaceProducts((current) => current.secondaryVariants[
+    `${product?.product_group_id ?? 0}:${variantId}`
+  ]);
+  const copy = productLabels(localeCode);
+  const primary = product?.variants.main_variant;
+  const productName = getAvailableNestedValueFromObject(
+    product?.locale,
+    localeCode,
+    'product_name',
+  ) || '';
+  const primaryName = getAvailableValueFromObject(
+    primary?.locale,
+    localeCode,
+  ) || copy.variants;
+  const secondaryName = getAvailableValueFromObject(
+    state?.data?.secondary.locale,
+    localeCode,
+  ) || copy.secondary;
+
+  // The window opens when it mounts. The element with the focus outside the
+  // window is its opener: a modal window gives it the focus back when it
+  // closes. The host can switch between the modal and the inline window
+  // while it is open; the focus then stays on the control the visitor is
+  // on.
+  useDialogLayoutEffect(() => {
+    const node      = dialog.current;
+    if (!node || typeof document === 'undefined') {
+      return;
+    }
+    const switching = node.open && pageScroll.locked !== modal;
+    const focused   = focusedElement();
+    const inside    =
+      focused && node.contains(focused) ? focused : undefined;
+    if (!inside) {
+      opener.current = focused;
+    }
+    node.close();
+    if (modal) {
+      pageScroll.lock();
+      node.showModal();
+    } else {
+      // Inline, the window stays in the page flow: the page keeps scrolling
+      // and focus stays where it is (opened by its attribute, as show()
+      // would move focus into it).
+      pageScroll.unlock();
+      node.setAttribute('open', '');
+    }
+    if (switching && inside) {
+      restoreFocus(inside, { reveal: true });
+    } else if (modal) {
+      closeButton.current?.focus({ preventScroll: true });
+    }
+  }, [modal]);
+
+  // Unmounting closes the window as a close does.
+  useDialogLayoutEffect(() => {
+    const node = dialog.current;
+
+    return () => {
+      node?.close();
+      if (pageScroll.locked) {
+        pageScroll.unlock();
+        restoreFocus(opener.current);
+      }
+    };
+  }, [pageScroll]);
+
+  useEffect(() => {
+    setSelected(undefined);
+  }, [variantId]);
+
+  function variantName(value: { id: number; locale: Record<string, string> }) {
+    return getAvailableValueFromObject(value.locale, localeCode) || String(value.id);
+  }
+
+  function selectOption(option: IProductSecondaryVariant) {
+    if (!purchaseMode) {
+      onSelect?.(option);
+      return;
+    }
+    const target = store.getState().getProduct(option.product.id, collection) ??
+      option.product;
+    store.getState().setProduct(target, collection);
+    setSelected(option);
+  }
+
+  function confirm<T extends ProductActionSelection>(
+    selection: T,
+    callback?: (value: T) => void,
+  ) {
+    if (selected && !actionsDisabled) {
+      onSelect?.(selected);
+      callback?.(selection);
+    }
+  }
+
+  function onBackdropClick(event: MouseEvent<HTMLDialogElement>) {
+    const bounds = dialog.current?.getBoundingClientRect();
+    if (
+      event.target === dialog.current && bounds &&
+      (event.clientX < bounds.left || event.clientX > bounds.right ||
+        event.clientY < bounds.top || event.clientY > bounds.bottom)
+    ) {
+      onClose?.();
+    }
+  }
+
+  return (
+    <dialog
+      data-stable-modal="fit"
+      ref={dialog}
+      aria-labelledby={`${id}-title`}
+      className={`${styles.modal} ${modal ? '' : styles.inline}`.trim()}
+      data-product-part="ProductSecondaryVariantModal"
+      data-secondary-variant-modal
+      onKeyDown={(event) => {
+        // Escape belongs to this window, not to the page behind it.
+        if (event.key === 'Escape') {
+          event.stopPropagation();
+        }
+      }}
+      onCancel={(event) => {
+        event.preventDefault();
+        onClose?.();
+      }}
+      onClick={onBackdropClick}
+    >
+      <header className={styles.header}>
+        <h3 id={`${id}-title`}>{copy.chooseVariant}</h3>
+        <button
+          ref={closeButton}
+          type="button"
+          aria-label={copy.closeVariants}
+          onClick={() => onClose?.()}
+        >
+          <span aria-hidden="true">×</span>
+        </button>
+      </header>
+      {product && (
+        <div className={styles.product}>
+          <OrionplaceImage
+            src={product.images?.small[0] || product.images?.full[0]}
+            alt={productName}
+            loading="lazy"
+          />
+          <p>{productName}</p>
+        </div>
+      )}
+      {primary && (
+        <div role="group" aria-label={primaryName} className={styles.group}>
+          <p>{primaryName}</p>
+          <div className={styles.choices}>
+            {primary.value.map((value) => (
+              <button
+                key={value.id}
+                type="button"
+                disabled={!validId(value.reload_product) || !validId(value.id)}
+                aria-pressed={value.id === variantId}
+                data-modal-primary={value.id}
+                className={styles.choice}
+                onClick={() => onChangePrimary?.(value)}
+              >
+                {primary.is_color && value.color && (
+                  <span
+                    className={styles.color}
+                    style={{ backgroundColor: value.color }}
+                    aria-hidden="true"
+                  />
+                )}
+                {variantName(value)}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      <div className={styles.state} aria-busy={!state || state.status === 'loading'} aria-live="polite">
+        {!state || state.status === 'loading' ? (
+          <p role="status" className="op-feature-loading">
+            <span className={styles.screenReaderOnly}>{copy.loadingVariants}</span>
+          </p>
+        ) : state.status === 'failed' || state.status === 'unavailable' ? (
+          <div>
+            <p
+              role="alert"
+              className={state.status === 'failed' ? styles.noticeError : styles.notice}
+            >
+              {state.status === 'failed' ? copy.variantsFailed : copy.variantsUnavailable}
+            </p>
+            <button type="button" className={styles.retry} onClick={() => onRetry?.()}>
+              {copy.retryVariants}
+            </button>
+          </div>
+        ) : state.data?.variants.length ? (
+          <div role="group" aria-label={secondaryName} className={styles.group}>
+            <p>{secondaryName}</p>
+            <div className={styles.choices}>
+              {state.data.variants.map((option) => (
+                <button
+                  key={option.product.id}
+                  type="button"
+                  disabled={!validId(option.product.id)}
+                  aria-pressed={option.product.id === (selected?.product.id ?? productId)}
+                  data-modal-secondary={option.product.id}
+                  className={styles.choice}
+                  onClick={() => selectOption(option)}
+                >
+                  {state.data?.secondary.is_color && option.value.color && (
+                    <span
+                      className={styles.color}
+                      style={{ backgroundColor: option.value.color }}
+                      aria-hidden="true"
+                    />
+                  )}
+                  {variantName(option.value)}
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <p role="status">{copy.variantsEmpty}</p>
+        )}
+      </div>
+      {purchaseMode && selected && (
+        <ProductCardActions
+          productId={selected.product.id}
+          collection={collection}
+          disabled={actionsDisabled}
+          variantSelectionResolved
+          onAdd={(value) => confirm(value, onAdd)}
+          onRemove={(value) => confirm(value, onRemove)}
+          onSubscribe={(value) => confirm(value, onSubscribe)}
+          onUnsubscribe={(value) => confirm(value, onUnsubscribe)}
+          onPreorder={(value) => confirm(value, onPreorder)}
+        />
+      )}
+    </dialog>
+  );
+}
+
+function validId(value: number | null | undefined) {
+  return Number.isInteger(value) && Number(value) > 0;
+}

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

@@ -0,0 +1,52 @@
+# ProductSpecificationsDialog · React
+
+## English
+
+`ProductSpecificationsDialog` displays the finished characteristic groups that
+the product page already localized and formatted. A group with an empty title
+has no heading. Each row shows its label and multiline value. A row with `to`
+uses that pathname and query as a Next.js link and calls `onClose` when chosen.
+The component sends no request.
+
+Mounting opens a native modal dialog, locks document scrolling while preserving
+the scrollbar gutter, and keeps long groups in an internal scrolling area.
+Escape, the close button, a backdrop click and a row link call `onClose`; the
+parent removes the component, which restores page scrolling and returns focus
+to the opener.
+
+Source is maintained in
+`components/orionplace/products/ProductSpecificationsDialog.tsx`; row and group
+interfaces are in
+`interfaces/orionplace/products/IProductSpecification.ts`.
+
+### Props
+
+| Prop                                   | Meaning                                                                          |
+| -------------------------------------- | -------------------------------------------------------------------------------- |
+| `groups: IProductSpecificationGroup[]` | Finished specification groups shown in the dialog.                               |
+| `onClose?: () => void`                 | Called when the visitor closes the panel or dialog. The callback has no payload. |
+
+## Русский
+
+`ProductSpecificationsDialog` показывает готовые группы характеристик,
+которые страница товара уже локализовала и отформатировала. У группы с пустым
+названием нет заголовка. В строке видны название и многострочное значение.
+Строка с `to` использует этот путь и параметры как ссылку Next.js и вызывает
+`onClose` при выборе. Компонент не отправляет запросы.
+
+При монтировании открывается нативное модальное окно. Оно блокирует прокрутку
+документа, сохраняет место полосы прокрутки и показывает длинные группы во
+внутренней прокручиваемой области. Escape, кнопка закрытия, щелчок по фону и
+ссылка в строке вызывают `onClose`; родитель удаляет компонент, после чего
+прокрутка страницы и фокус возвращаются.
+
+Исходный файл:
+`components/orionplace/products/ProductSpecificationsDialog.tsx`; интерфейсы строк и групп
+находятся в `interfaces/orionplace/products/IProductSpecification.ts`.
+
+### Свойства
+
+| Свойство                               | Назначение                                                                               |
+| -------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `groups: IProductSpecificationGroup[]` | Заполненные группы характеристик в диалоге.                                              |
+| `onClose?: () => void`                 | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные. |

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

@@ -0,0 +1,138 @@
+.dialog {
+  width: calc(100vw - 2rem);
+  max-width: 40rem;
+  max-height: calc(100dvh - 2rem);
+  box-sizing: border-box;
+  margin: auto;
+  overflow: hidden;
+  padding: 0;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0;
+  color: var(--orionplace-text);
+  background: var(--orionplace-surface);
+  font: inherit;
+}
+
+.dialog::backdrop {
+  background: rgb(0 0 0 / 35%);
+  backdrop-filter: blur(2px);
+}
+
+.layout {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.layout > header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.layout h2 {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.layout > header button {
+  display: grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-size: 1.5rem;
+  line-height: calc(2 / 1.5);
+  cursor: pointer;
+}
+
+.layout > header button:focus-visible {
+  background: var(--orionplace-hover);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .layout > header button:hover {
+    background: var(--orionplace-hover);
+    outline: none;
+  }
+}
+
+.body {
+  display: grid;
+  min-height: 0;
+  flex: 1;
+  align-content: start;
+  gap: 1rem;
+  overflow-y: auto;
+  padding: 0.75rem 1rem;
+}
+
+.group {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.group h3 {
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+  font-weight: 400;
+}
+
+.group dl {
+  display: grid;
+  margin: 0;
+}
+
+.group dl > div {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  gap: 1rem;
+  padding: 0.625rem 0;
+  border-bottom: 1px solid var(--orionplace-border);
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+}
+
+.group dt {
+  color: var(--orionplace-muted);
+  overflow-wrap: anywhere;
+}
+
+.group dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-line;
+}
+
+.group a {
+  color: var(--orionplace-accent);
+  text-decoration: none;
+}
+
+.group a:focus-visible {
+  color: var(--orionplace-text);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .group a:hover {
+    color: var(--orionplace-text);
+    outline: none;
+  }
+}