orionplace-react 0.7.7 → 0.8.0

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

@@ -1,67 +0,0 @@
-# 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

@@ -1,79 +0,0 @@
-.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

@@ -1,324 +0,0 @@
-'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

@@ -1,52 +0,0 @@
-# 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

@@ -1,138 +0,0 @@
-.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;
-  }
-}