# Промт: фронт-сессия S2 — оболочка трёх панелей и слой `src/ui/`

Ты — фронтенд-сессия TextMachine, третья по счёту. Зона записи — **только `frontend/`**;
право коммита есть, ровно на свою зону, pathspec-формой (протокол — стоящий промт
`FRONTEND_SESSION_PROMPT.md` §«Коммит-права», он в силе целиком). Пре-коммит хук уже стоит
и самоустанавливается при `npm install`: коммит с frontend-путями не пройдёт без зелёного
`npm run check`, смесь зон и файлы «никогда не коммитить» блокируются. Хук — страховка,
не замена дисциплины.

## Что уже стоит (входное состояние, проверено 02.08 второй сессией)

- S0 (план) и S1 (инструменты) пройдены: `npm run check` — 5 гейтов (prettier · eslint
  тип-осведомлённый · stylelint · tsc · vitest, 31 тест), `npm run check:full` — + сборка +
  скриншот с гейтом доступности axe. Всё зелёное, `npm audit` — 0 уязвимостей.
- `tokens.css` сведён с `references/fleet.png` до пикселя по замеренным значениям;
  контракт-тест держит каждое значение и полноту имён.
- Витрина `/showcase` — сверочная страница скриншот-цикла; раскладку владелец видел и правил.
- Шов данных: `src/api/` — единственный вход, `src/mock/` видит только он (закреплено линтом);
  типы `src/api/types.ts` — рабочая гипотеза до контракта API.
- Гейты «одно место для цвета/размера/сети» работают и защищены от обхода; известные дыры
  гейтов честно записаны в `BACKLOG.md` Ф-9/Ф-10 — часть твоей работы.

## Обязательное чтение до кода (порядок)

1. `frontend/docs/FRONTEND_SESSION_PROMPT.md` — стоящий промт: референсы §1, сценарий §3,
   жёсткие ограничения §4, поддерживаемость §5.1, «как работать» §7. **Его не редактировать**
   (правит не фронт-сессия). ⚠ Раскладка его §2 частично устарела — см. следующий пункт.
2. `frontend/docs/PROGRESS.md` — журнал зоны, целиком. Секция «Решения владельца по продукту»
   **перевешивает §2 стоящего промта**: банк памяти живёт в ПРАВОЙ панели (вкладки справа:
   `О книге · Замечания · Банк`; слева только `Книги · Поиск` + `Настройки` внизу), вход
   в настройки один, центр — одна панель во всю высоту, подписной экран банка открывается
   вкладкой в центре.
3. `frontend/docs/FRONTEND_PLAN.md` — §0.1–0.2 (карта канона и два провода: движок фронту
   не виден никогда), §5 (замеры и протокол сведения), §5.4 (перечень форм обхода гейтов).
4. `frontend/docs/STACK_DECISIONS.md` — пины и ловушки. Не выбирай библиотеки сам и не
   «обновляй» версии по памяти: твои знания об экосистеме устарели.
5. `frontend/docs/BACKLOG.md` — строки Ф-4, Ф-7, Ф-9, Ф-10, Ф-12 адресованы S2.
6. `references/fleet.png` и оба antigravity — **открой и посмотри** (ты умеешь читать
   изображения). Витрину `.shots/showcase.png` — тоже, до первой правки.

## Скоуп S2 — и ни шагом дальше

Строишь **оболочку** и **примитивы**. Данных S2 не читает (диспозиция Ф-15 — два независимых
скептика подтвердили; не переоткрывать).

1. **`src/shell/`** — верхняя полоса · три панели · статус-полоса. Панели — `react-resizable-panels`
   (пин и API v4 `Group/Panel/Separator` — STACK_DECISIONS §2; там же персист раскладки через
   `useDefaultLayout`). Сворачивание левой/правой панели кнопками верхней полосы. Вкладки
   в шапках панелей. Раскладка — по решению владельца из PROGRESS.md (см. выше), не по §2.
2. **`src/ui/`** — примитивы на `react-aria-components` (ЕДИНСТВЕННАЯ библиотека примитивов,
   пин в STACK_DECISIONS): кнопка · вкладки · строка дерева/списка · поле фильтра · выноска
   замечания. Стили — только `.module.css` на токенах. Никаких UI-китов, никаких обёрток
   над обёртками. Файл = компонент + модуль рядом, >150 строк — делить.
3. **Ф-12 (требование к S2, не после):** каждый список получает поведение при 10³ элементов
   ДО того, как рисуется. Дерево глав обязано жить на 2284 главах — заведи в витрине
   нагрузочную фикстуру такого размера и посмотри на неё скриншотом. Дефолт виртуализации —
   RAC Virtualizer; `@tanstack/react-virtual` — только по замеру (Ф-6).
4. **Ф-9 + Ф-10 — хвосты гейтов и структурных тестов, адресованы «до S2 или в ней»:** закрой
   или дай строкам явную диспозицию с причиной. Каждую закрытую дыру проверяй ЖИВЫМ нарушением
   и перечисли формы, которые проверил (урок §5.4: «проверено» без перечня форм — ловушка).
5. **Ф-7 (часть S2):** `+` в конце рядов вкладок — вместе с действием, которое он запускает.
6. **Ф-4 — токен-гейт на отступы:** включить В КОНЦЕ сессии, когда оболочка обкатает шкалу
   `--space-1…6`. Включённый гейт — тоже проверить живым нарушением.

**Не в скоупе:** MSW и слой данных (S3 — вход заблокирован, см. ниже) · экраны S4–S7 ·
светлая тема · мобильная · React Compiler (Ф-2) · Tauri (Ф-5) · редактор текста.

⚠ **Вход в S3 заблокирован снаружи:** контракта API v0 нет (`docs/architecture/14-api-contract.md`
отсутствует; единый бэклог, строка 95). Моки, снятые не с того контракта, разойдутся с API —
ровно то, ради чего строка заведена. Если S2 закончилась и осталось время — отполируй список
Ф-14 (вход фронта в контракт), но S3 НЕ начинай без решения владельца.

## Технические рамки

- Новые зависимости — точными пинами, сверенными live по npm на дату сессии (`.npmrc` уже
  держит `save-exact` и `engine-strict`). Каждый новый пин — строкой в таблицу
  `FRONTEND_PLAN.md` с датой релиза и «зачем нам».
- Новый маршрут → сразу в `KNOWN_ROUTES` скрипта `scripts/shot.mjs` (тест сверяет списки
  и упадёт, если забыл). Каждый экран открывается в изоляции своим маршрутом.
- Гейты не ослаблять. Понадобилось точечное подавление — только именованное правило
  с причиной (голое отключение падает само).
- Комментарии — одна-две строки «почему». Имена человеческие, без аббревиатур.
- Тексты фикстур — реальные (кириллица/иероглифы в настоящих пропорциях), объём — минимум
  под задачу: вопрос авторского права (В-2) у владельца, не расширяй цитаты.

## Как работать

1. **Скриншот-цикл — с первого компонента:** `npm run shot`, открыть PNG, сравнить
   с `fleet.png`, править. Без этого код валиден, а вид случаен. Критерий сведения —
   не растровое совпадение: цвета, промежутки 8px, радиусы 6px, плотность, впечатление
   (стоящий промт §8).
2. **Ревью исполнением — обязательный мандат проекта:** приложение реально запускается,
   скриншоты сняты и ПРОСМОТРЕНЫ, гейты проверены живыми нарушениями с перечнем форм,
   `npm run check:full` зелёный перед каждым коммитом. Заявление «должно работать» ревью
   не является.
3. **Адверсариальная самопроверка перед финишем:** пройди по своим находкам и правкам
   с установкой опровергать (author≠reviewer); S1 так поймала пять дефектов в собственных
   гейтах, соло-взгляд их не видел.
4. Спорное с каноном или новое продуктовое решение — НЕ решать самому: вопросом в
   `PROGRESS.md` «Открытые вопросы к владельцу» и продолжать то, что вопроса не требует.

## Готово — это когда

- Оболочка стоит: три панели · вкладки · статус-полоса · сворачивание · персист раскладки;
  примитивы `src/ui/` используются оболочкой, не лежат мёртвым грузом.
- Дерево на 2284 главах прокручивается без затыков и снято скриншотом (Ф-12).
- Ф-9/Ф-10 закрыты или явно диспозиционированы; Ф-4 включён и проверен нарушением.
- `npm run check:full` зелёный; новые маршруты в `shot.mjs`; скриншоты просмотрены,
  расхождения с референсом названы вслух.
- Коммиты: только `frontend/`-пути, pathspec-формой, стейдж+коммит одной командой.
- `frontend/docs/PROGRESS.md`: обновлено «Текущее состояние», добавлена хроника сессии
  (что построено · что видно на снимках · где отошёл от референса и почему · что осталось);
  строки бэклога получили диспозиции.