# Heart Atlas. Визуал в статьях о болезнях

Дата: 11.10.2026
Статус: принята
Связано: спека этапа 3 `docs/plans/2026-10-11-stage-3-diseases.md`, «часы сердца» (этап 2), 3D-модель (этап 1)

## Цель

Статья о болезни сначала показывает, а потом объясняет. В каждой из шести статей есть анимированная схема «норма / болезнь»: читатель переключает состояние и видит, что именно ломается. Где готовы компоненты соседних этапов, статья встраивает живую ЭКГ с пресетом болезни и 3D-сердце с подсветкой структуры.

## Что входит

1. Компонент `<Diagram>` для MDX: схема с переключателем «норма / болезнь», анимацией, паузой и подписью к каждому состоянию.
2. Шесть схем, по одной на статью. Каждая показывает только то, что уже есть в тексте статьи:

| Статья | Норма | Болезнь |
|---|---|---|
| Фибрилляция предсердий | Импульс из синусового узла одной волной проходит предсердия и через АВ-узел уходит в желудочки | Множество хаотичных волн в предсердиях, к желудочкам импульсы проходят нерегулярно |
| Артериальная гипертензия | Артерия с нормальной стенкой, ровная пульсовая волна | Давление на стенку артерии выше, стенка левого желудочка утолщена (гипертрофия как поражение органа-мишени) |
| Сердечная недостаточность | Желудочки полноценно сокращаются и выбрасывают кровь | Сокращение слабое, за удар выбрасывается меньше крови |
| ИБС и инфаркт | Кровь свободно идёт по коронарной артерии к мышце | Бляшка сужает просвет; при закупорке участок мышцы без кровотока |
| Аортальный стеноз | Створки широко раскрываются | Створки утолщены и раскрываются узко, струя через клапан ускоряется |
| ДМПП | Перегородка между предсердиями целая | Через отверстие кровь идёт из левого предсердия в правое, правый желудочек перегружен объёмом |

3. Подключение ЭКГ-монитора «часов сердца» в тексте статьи компонентом `<EcgMonitor preset="…" />` (вместо поля `preset` во frontmatter, см. спеку этапа 3 «Анатомия и диагностика»). Подпись статьи к монитору передаётся детьми компонента.
4. Встраивание 3D-вьюера с подсветкой структур, когда вьюер этапа 1 будет в `main`. Отдельный PR, в эту спеку только как цель.

## Что не входит

Глоссарий с подсказками и блок «Проверь себя»: полезны, но это текст, а сейчас нужнее картинка. Сделаем отдельно после схем. Фотографии и медицинские изображения пациентов.

## Ключевые детали

### Компонент

- Схема — inline SVG внутри Astro-компонента `src/components/diagrams/<Name>.astro`, без React и без загрузки скриптов: страница статьи остаётся лёгкой.
- Набор состояний задаёт схема в `diagrams/index.ts`: по умолчанию «норма / болезнь», у схем анатомии и диагностики свои (`diastole`/`systole`, `recording`/`symptom`) или одно состояние `scheme` без переключателя. Элементы SVG с `data-only="<state>"` видны только в своём состоянии.
- Переключатель — радиокнопки в `<fieldset>` с подписью; состояние меняется через CSS `:has(:checked)`, поэтому работает без JavaScript и с клавиатуры.
- Анимация на CSS. Есть кнопка «Пауза» (чекбокс), потому что анимация длится дольше 5 секунд (WCAG 2.2.2). При `prefers-reduced-motion: reduce` анимация стоит, а схема в покое показывает то же различие: стрелки и подписи вместо движения.
- Цвета только из токенов темы (`--color-*`) и нескольких новых токенов схем (кровь артериальная и венозная, мышца, импульс) для светлой и тёмной темы. Контраст подписей не ниже 4.5:1.
- У SVG `role="img"` и постоянное `aria-label` из `messages`; описание текущего состояния даёт видимая подпись `<figcaption>`. Неактивное состояние скрыто через `display: none` и не попадает в дерево доступности.
- Подписи частей сердца в схеме (ЛП, ПП, ЛЖ, ПЖ, аорта) — строки интерфейса в `messages/<locale>.json` (`diagram.*`), потому что это анатомия, общая для всех статей.
- Подпись к состоянию — медицинский текст, поэтому она пишется в MDX статьи и несёт `<Cite>`:

```mdx
<Diagram name="asd">
  <p slot="normal">Перегородка между предсердиями целая…<Cite n={1} /></p>
  <p slot="disease">Через отверстие кровь идёт из левого предсердия в правое…<Cite n={1} /></p>
</Diagram>
```

- Под схемой мелкая строка «Схема упрощена и не в масштабе» из `messages`.
- CSS только с логическими свойствами. Подписи внутри SVG не зеркалятся в RTL: анатомия не зависит от направления письма.

### Медицинская точность

- Схема показывает только то, что сказано в тексте статьи и подтверждено её источниками. Подписи к состояниям проходят ту же независимую проверку по источникам, что и текст.
- Отдельный проход сверяет каждую схему с подписью: направление шунта, какие отделы утолщены или расширены, что происходит с импульсом.

### Проверки

- Unit: компонент рендерится через container API, у SVG есть доступное имя, неизвестное `name` роняет сборку.
- e2e: переключение состояния мышью и клавиатурой, пауза, вид без JavaScript, axe на странице со схемой, скриншот в светлой и тёмной теме для ручного просмотра.
- Lighthouse на странице статьи остаётся не ниже 0.9.

## Разбиение на PR

| PR | Содержание | Готово, когда |
|---|---|---|
| 1 | Эта спека | Спека в `main` |
| 2 | Компонент `<Diagram>`, токены, строки, тесты и первая схема (ДМПП) в обеих статьях | Схема работает без JS, axe и e2e зелёные |
| 3 | Схемы для остальных пяти статей | Шесть статей со схемами, проверка точности пройдена |
| 4 | Пресеты ЭКГ в статьях, когда монитор «часов сердца» встраивается в статью | Монитор виден в шести статьях |
| 5 | 3D-вьюер в статьях, когда он есть в `main` | Отдельная короткая спека |