# Интерфейс

Pairx рисует вокруг приложения свою шапку: название, пометку «Код пользователя · автор», «Закрыть» и меню (код приложения, жалоба, удаление своих данных). Всё остальное — страница приложения. Чтобы она выглядела частью Pairx, у моста есть нативные элементы.

## Заставка и app.ready

Пока страница загружается, Pairx показывает заставку со значком и названием. Вызовите `app.ready`, как только нарисован первый экран, — заставка уйдёт:

```js
await load();                 // снимок, первый рендер
pairx.call("app.ready");
```

Если приложение не вызвало `app.ready`, заставка уходит сама после загрузки страницы.

## Главная кнопка

Нативная кнопка Pairx внизу экрана: та же, что в остальном Pairx, над клавиатурой и с учётом жестов системы. Подходит для главного действия экрана — «Отправить», «Встать в очередь», «Проголосовать».

```js
await pairx.call("ui.mainButton", { text: "Проголосовать", visible: true });
pairx.on("ui.mainButton.clicked", async () => {
  pairx.call("ui.mainButton", { progress: true });     // индикатор вместо надписи
  try { await vote(); }
  finally { pairx.call("ui.mainButton", { visible: false }); }
});
```

Параметры, которые не переданы, остаются прежними: `{ progress: true }` не меняет надпись. Пустой `text` или `visible: false` прячет кнопку.

## «Назад»

Если в приложении несколько экранов, покажите «Назад» в шапке Pairx вместо «Закрыть»:

```js
function openDetails() {
  showScreen("details");
  pairx.call("ui.backButton", { visible: true });
}
pairx.on("ui.backButton.clicked", () => {
  showScreen("list");
  pairx.call("ui.backButton", { visible: false });
});
```

Системный жест «назад» на Android следует за этой кнопкой: пока она показана, жест приходит тем же событием, а не закрывает приложение.

## Окна и подсказки

```js
const choice = await pairx.call("ui.popup", {
  message: "Удалить запись?",
  buttons: [{ id: "cancel", text: "Отмена", type: "cancel" }, { id: "delete", text: "Удалить", type: "destructive" }],
});
if (choice === "delete") remove();

pairx.call("ui.toast", { text: "Скопировано" });
```

Заголовок окна Pairx пишет сам: «Название · код пользователя». Так окно приложения нельзя принять за окно Pairx — и поэтому в тексте не стоит просить пароли и коды: люди знают, что Pairx так не делает.

## Тема

CSS `prefers-color-scheme` в приложении следует теме Pairx, а не системы. Поддержите обе:

```css
:root { color-scheme: light dark; --bg: #f5f6f8; --text: #1b1e24; }
@media (prefers-color-scheme: dark) { :root { --bg: #101113; --text: #f3f4f7; } }
```

Точные цвета Pairx отдаёт `ui.theme`, а при смене темы на открытом приложении приходит событие `theme.changed`:

```js
function apply({ colors }) {
  for (const [name, value] of Object.entries(colors)) document.documentElement.style.setProperty(`--pairx-${name}`, value);
}
apply(await pairx.call("ui.theme"));
pairx.on("theme.changed", apply);
```

## Отступы

`ui.safeArea` отдаёт отступы, которые нужно оставить у краёв. Шапку и главную кнопку Pairx рисует вне страницы, их место уже учтено: снизу отступ нужен, только пока главная кнопка скрыта.

## Вёрстка

- Ширина от 320 px, высота — весь экран под шапкой Pairx.
- Размер текста не меньше 15 px, области нажатия — не меньше 44 × 44 px.
- Системный шрифт: `-apple-system, system-ui, sans-serif`.
- `<meta name="viewport" content="width=device-width, initial-scale=1">` обязателен, иначе страница уменьшится.

## Копирование

`clipboard.writeText` копирует текст до 10 000 символов — только в ответ на нажатие человека:

```js
copyButton.onclick = async () => {
  await pairx.call("clipboard.writeText", { text: code });
  pairx.call("ui.toast", { text: "Скопировано" });
};
```