claude-harness/skills/aura-design/reference/layout-ux.md

# AURA — раскладка и UX

## Оболочка (`AppShell`)

- Слева **закреплённая боковая панель** 240 px (`position: sticky; height: 100dvh`), прокрутка — у окна. Сверху
  вниз: название приложения (16/24 700) и кнопка свёртки → `top` (выбор проекта/аккаунта) → разделы (иконка 20 +
  подпись, высота 40, активный — фон selected и зелёный текст, `aria-current="page"`) → растяжка → `bottom` (состояние
  данных, синхронизация) → подвал: `ThemeSwitch` и меню «Ещё» (открывается вверх).
- Свёрнутая панель 64 px: только иконки, подписи — `visually-hidden` + `title`; состояние в `localStorage`.
- **Телефон (<640 px)**: вместо панели закреплённая строка 56 px: «Меню» (гамбургер), название, `topbarEnd`.
  Панель выезжает слева (`min(300px, 85vw)`) поверх подложки 45%; фокус — на первый раздел, Esc и щелчок по подложке
  закрывают, фокус возвращается на «Меню». Нижней панели вкладок нет.
- Верхней шапки во всю ширину нет: общие действия (тема, синхронизация, аккаунт) живут в панели.
- Липкие элементы страниц: `top: var(--topbar-h, 0)`.

## Страница

- `main.page`: до 1440 px по центру, поля 24/16; `wide` — во всю ширину (доски, графики, широкие таблицы).
- `.page` — контейнер (`container: page/inline-size`): пороги раскладки внутри страниц — **`@container page`**, не
  `@media`. Рядом панель, поэтому ширина окна врёт. `@media (max-width: 639px)` — только для оболочки.
- Сверху `PageHeader`: заголовок, подзаголовок-сводка вторичным («12 подписок · 3 просрочено»), справа одна
  `primary` («Добавить …») и при необходимости `secondary`/меню «⋯».

## Шаблоны экранов

- **Список/таблица:** под заголовком `.ui-toolbar` — `SearchInput`, `Segmented` для 2–3 состояний («Все /
  Активные / Просроченные»), фильтры-списки: один — кнопка с его именем («Категория (N)»), несколько — одна кнопка
  «Фильтры (N)» → панель со списками. Выбранные значения — `Chip`-ами в `.ui-chips` с «Сбросить». Не выкладывать
  шесть селектов в ряд. Таблица — `Panel padding="none"` +
  `.ui-table`, шапка липнет, строка 44, щелчок по строке открывает карточку (`tr.is-clickable` + ссылка в первой
  ячейке для клавиатуры). На узкой странице — горизонтальная прокрутка внутри панели, не карточки; ширину, уже
  которой колонки не сжимаются, задай `--table-min` на таблице.
- **Действия строки:** частые (1–2: «Изменить», «Удалить») — `IconButton` с `label` «Удалить: <название>» в
  `td.actions`. Меню «⋯» в строке таблицы не ставить: обёртка таблицы обрезает выпадашку. Удаление — через `Confirm`.
- **Редкие действия** (экспорт, импорт, сброс, настройки вида) — в меню «⋯» (`Menu`), переключатели в нём —
  `pressed`. Разрушительные — `danger` в конце, после `MenuSeparator`, с подтверждением.
- **Форма:** поля столбцом с шагом 16, `Field` над каждым контролом, обязательность — в подписи или подсказке.
  Проверка при отправке и при уходе с поля; ошибка под полем + `aria-invalid`; фокус на первое невалидное. Кнопки
  внизу справа: `secondary` «Отмена» слева от `primary`. Во время отправки — `loading`, повторный щелчок невозможен.
- **Окно:** `Dialog` → `h2.ui-dialog__title`, `form.ui-form`, `div.ui-actions`. Esc и «Отмена» закрывают; щелчок по
  фону закрывает только окно без ввода. Есть несохранённый ввод — спросить через `Confirm` («Закрыть без
  сохранения?», `danger`), не `window.confirm`.
- **Карточка объекта:** основная колонка + боковая колонка свойств на `--color-bg-subtle`; уже ~900 px — колонкой.

## Состояния и статусы

- Статус — `Badge` с текстом; цвет только дублирует текст.
- **Просрочка/срок:** просрочено, если срок **строго раньше сегодняшней даты** (сегодня — ещё не просрочка) и объект
  не закрыт/не на паузе. Красным (`.ui-late`: цвет ошибки, 600) — сама дата, плюс `title="просрочено"` и
  `<span class="visually-hidden">, просрочено</span>`; статус-`Badge error` — если в таблице есть колонка статуса.
  Строку не заливать красным, полос и рамок не добавлять. Сводка в подзаголовке: «… · N просрочено».
- **Чередование строк («зебра») не делать**: мешает читать цветовые пометки. Разделение — границей и hover.
- Загрузка: кнопка `loading` или `.ui-spinner` на месте результата; скелетоны не обязательны.
- Ошибка загрузки/операции — `Notice error` с действием «Повторить»; успех фоновой операции — текст успеха,
  гаснет через ~10 с; предупреждение («нет связи, показаны прежние данные») — `Notice warning`.
- Пусто — `.ui-empty`: заголовок 16/24 700, одна строка пояснения, `primary`-действие («Добавить первую …»);
  `primary` в `PageHeader` на это время скрыть — основная кнопка на экране одна.
  «Ничего не найдено» по фильтру — с кнопкой «Сбросить фильтры».

## Тема

- `:root` — светлая; тёмная — `prefers-color-scheme` или `data-theme="dark"` на `<html>`; выбор хранится в
  `localStorage` (`THEME_KEY`). Встроенный скрипт в `<head>` ставит `data-theme` до отрисовки (см. SKILL.md).
- Любой новый цвет — токен в трёх блоках `tokens.css`; тест паритета ловит забытый.

## Доступность (минимум)

- Видимый `:focus-visible` (уже в base.css); всё кликабельное — `button`/`a`, не `div`.
- Кнопка без текста — `IconButton` с `label`. Меню/выпадашки — `aria-expanded`, Esc закрывает.
- Живые сообщения о ходе операции — `role="status"`; ошибки — `role="alert"`.
- Контраст: вторичный текст не мельче 12 px; предупреждение на светлом — через `color-mix` (см. foundations).

## Проверка перед сдачей

- Скриншоты 1920×1080 и 390×844 в обеих темах (Playwright).
- Вне `tokens.css` нет литералов цвета (`tokens.test.ts` зелёный).
- Высоты контролов 32/40, кнопки — «таблетки», панели — радиус 16, одна `primary` на экран.
- Нет текстовых символов вместо иконок (✕ ⋯ ▼ ☰ ⚙ ☀ ☾).
- Узкая страница: ничего не вылезает за правый край (`document.documentElement.scrollWidth === innerWidth`).