feat(math5): Phase 0 — фундамент учебника «Математика 5»

План (PLAN_MATH_5 + VISUAL: карта 22 визуал-компонентов), миграция
050_math5_hub (хаб math-5 + 3 главы: Натуральные числа §1–17, Выражения.
Уравнения §1–9, Обыкновенные дроби §1–18), страница-хаб (3 карточки +
курсовой финал из 3 боссов + звание «Математик 5 класса») и 3 каркаса глав
на ОБЩЕМ движке math6 (window.M6 с slug math-5-chN, ключи math5_*).
Baseline-тест math5-page: 6/6. § без билдера → заглушка движка.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

plans/textbooks-5/PLAN_MATH_5.md

@@ -0,0 +1,191 @@
+# PLAN — Интерактивный учебник «Математика. 5 класс»
+
+> Составлен 2026-06-03 (Opus). Источник: **Герасимов В. Д., Пирютко О. Н., Лобанов А. П.
+> «Математика. 5 класс»**, в 2 частях, Минск: Адукацыя і выхаванне, 2020 (2-е изд.).
+> PDF: `G:\Dev\Тесты\Методички\Разное\Книги\matematika_5kl_ch1_gerasimov_rus_2020 (1).pdf` (181 стр.)
+> и `…_ch2_… .pdf` (197 стр.). Контент пишем авторский (свой), не копируем книгу.
+
+Цель: красивый, **интерактивный, визуальный** учебник того же класса качества, что
+«Математика 6», — с тренажёрами, canvas/SVG-анимациями, пошаговыми разборами, финалами-боссами
+и курсовым финалом. Реализация — Opus делает фундамент + эталонную Главу 1, Главы 2–3 тиражирует
+Sonnet по образцу.
+
+---
+
+## 1. Структура книги (оглавление, 3 главы)
+
+Книга Герасимова **переплетает геометрию внутрь числовых глав** (это её замысел) — не выделяем
+геометрию отдельно, а сохраняем авторский порядок.
+
+### Часть 1
+**Глава 1. Натуральные числа** (§1–17)
+1. Как решать задачу
+2. Натуральные числа и число нуль. Чтение и запись
+3. Сравнение натуральных чисел
+4. Точка, прямая, луч, отрезок, плоскость
+5. Измерение отрезков. Длина отрезка
+6. Изображение натуральных чисел на координатном луче
+7. Округление натуральных чисел
+8. Сложение и вычитание натуральных чисел
+9. Умножение и деление натуральных чисел
+10. Степень числа с натуральным показателем
+11. Деление с остатком
+12. Делители, кратные. НОД и НОК
+13. Признаки делимости
+14. Простые и составные числа. Разложение на множители
+15. *Математика вокруг нас* (прикладной)
+16. *Задачи на движение, взвешивание, переливание* (занимательный/прикладной)
+17. *Исторические сведения о числах* (история)
+
+**Глава 2. Выражения. Уравнения** (§1–9)
+1. Числовые выражения
+2. Выражения с переменными
+3. Уравнение
+4. Формулы
+5. Решение задач с помощью уравнений
+6. Угол. Измерение и построение углов
+7. *Математика вокруг нас* (прикладной)
+8. *Занимательные задачи*
+9. *Исторические сведения*
+
+### Часть 2
+**Глава 3. Обыкновенные дроби** (§1–18)
+1. Дробные числа. Обыкновенные дроби
+2. Деление и дроби. Основное свойство дроби
+3. Правильные и неправильные дроби. Смешанные числа
+4. Сравнение дробных чисел
+5. Сложение и вычитание обыкновенных дробей
+6. Сложение и вычитание смешанных чисел
+7. Умножение дробных чисел
+8. Деление дробных чисел
+9. Задачи на все действия с дробными числами
+10. Задачи на применение дробей
+11. Параллельные и перпендикулярные прямые *(геом.)*
+12. Ломаная. Многоугольник. Периметр *(геом.)*
+13. Площадь. Единицы измерения площади *(геом.)*
+14. Площадь прямоугольного треугольника и многоугольников *(геом.)*
+15. Среднее арифметическое
+16. Линейные и столбчатые диаграммы
+17. Прямоугольный параллелепипед. Куб *(геом.)*
+18. Объём. Единицы измерения объёма. Объём параллелепипеда *(геом.)*
+
+> Бэк-материя ч.2 (Задачи с геом. фигурами, Повторение и обобщение, Задания для тренировки,
+> Задачи для любознательных, Логические задачи, Наглядная геометрия) — **банки упражнений**, не §.
+> Из них черпаем задачи для тренажёров и финала, отдельными § не делаем.
+
+Каждая глава в книге завершается **тестом** («Ответы к тесту: 1в); 2г)…») → в нашем учебнике это
+**Финал главы** (бой с боссами).
+
+---
+
+## 2. Архитектура — ПОЛНОЕ переиспользование движка «Математики 6»
+
+Движок `math6_engine.js` уже **generic**: читает `window.M6` со своими `slug / lsPrefix / xpKey`,
+строит para-selector, навигацию, прогресс/XP/достижения, сайдбар, поиск, глоссарий, тему, финалы.
+**Ничего форкать не нужно.** Страницы 5 класса подключают те же ассеты:
+
+```
+/css/math6.css            (общий фреймворк)
+/js/api.js  /js/xp.js
+/js/math6_svg.js          (window.Math6   — статичные SVG-фигуры)
+/js/math6_anim.js         (window.Math6Anim — canvas/SVG-демо)  ← ПЕРЕД engine
+/js/math6_engine.js       (window.M6engine — плумбинг)
+```
+
+> Эти файлы — общая **визуальная библиотека математики**, а не «6 класс». Новые компоненты для
+> 5 класса дописываем в `math6_svg.js` / `math6_anim.js` (выигрывают обе параллели). При желании
+> позже переименуем в `math_svg.js` — сейчас не трогаем имена, чтобы не плодить churn.
+
+**Страница главы** = `head` (KaTeX CDN + шрифты + math6.css + 5 скриптов) → inline `:root`-палитра
+→ chrome (`hdr / hero / psel / #sections / sidebar / search / ach-popup`) → inline `<script>`:
+объявить `data + builders`, затем `Object.assign(window.M6, {...})`.
+
+### КРИТИЧНЫЕ правила (грабли с 6 класса — не наступать снова)
+- **`init()` движка вызывается ПОСЛЕ всех `window.*`-экспортов** — у defer-скрипта `readyState`
+  уже `interactive`, и `else init()` срабатывает синхронно. Если builder зовёт `makeCard` до экспорта
+  → `ReferenceError` → ВСЕ §1 показывают заглушку. (В нашем случае init внутри самого движка уже
+  корректен — мы лишь не нарушаем порядок: `Object.assign(window.M6,…)` до подключения движка не
+  нужен, движок читает `window.M6` лениво в `init`.)
+- **Русская запятая в KaTeX = `2{,}5`** (иначе сбитый кернинг). В JS-билдерах — хелпер `_kf(x)`.
+- **`applied:true`** у прикладных/исторических § (не входят в боссов финала), **`final:true`** у финала.
+- **⛔ эмодзи** — только inline SVG `.ic`. **⛔ Grep-tool** — ast-index/vex. Edit-флака на кириллице —
+  верифицировать зелёным тестом.
+
+---
+
+## 3. Маппинг глав → LearnSpace
+
+| slug | Глава | § (paras) | para_count | Цвет |
+|------|-------|-----------|-----------|------|
+| `math-5`     | **Хаб** | — | 47 (Σ) | indigo |
+| `math-5-ch1` | Натуральные числа | p1–p14 + 3 прикладных + final | 18 | indigo `#4f46e5` |
+| `math-5-ch2` | Выражения. Уравнения | p1–p6 + 3 прикладных + final | 10 | teal `#0d9488` |
+| `math-5-ch3` | Обыкновенные дроби | p1–p18 + final | 19 | rose `#e11d48` |
+
+`para_count = paras.length` (включая прикладные и финал — как в 6 классе). Хаб TOTAL = 18+10+19 = **47**.
+Хаб закрыт по умолчанию (allowlist) → доступ выдаём в самом конце через `/api/access` ([[project_content_access]]).
+
+Миграция: **`050_math5_hub.sql`** (следующий свободный номер; 049 = math-6). Хаб `sort_order` = 5
+(перед math-6=6), дети 1/2/3.
+
+---
+
+## 4. Фазы реализации (волны)
+
+### Phase 0 — Фундамент (Opus) ✦ делаем первым
+- [ ] `backend/src/db/migrations/050_math5_hub.sql` (+ `npm run migrate`)
+- [ ] `frontend/textbooks/math_5_hub.html` (клон math_6_hub: 3 карточки + курсовой финал из 3 боссов
+      + ach-strip «Математик 5 класса», водяной знак «5», палитра indigo/teal/rose)
+- [ ] 3 каркаса `math_5_ch1.html` / `ch2` / `ch3` — head + chrome + `window.M6` ТОЛЬКО с `paras`
+      (без билдеров → движок рисует заглушки; страницы живые, навигация работает)
+- [ ] Тест `backend/tests/math5-page.test.js` (jsdom-over-HTML, инлайнит svg/anim/engine): страницы
+      грузятся, секции/psel генерируются, нет рантайм-ошибок, init после экспортов
+- [ ] Commit + push
+
+### Phase 1 — Глава 1 «Натуральные числа» (эталон, Opus)
+Полные билдеры §1–17 + финал. 2+ интерактива на §, тренажёры со счётом+XP, DnD, пошаговые разборы,
+визуализации (см. §5). Это **образец**, по которому Sonnet делает остальное.
+
+### Phase 2 — Глава 2 «Выражения. Уравнения» (Sonnet-агент по образцу Главы 1)
+
+### Phase 3 — Глава 3 «Обыкновенные дроби» (Sonnet-агент; самая визуальная — дроби + геометрия)
+
+### Phase 4 — Обогащение + полировка
+По образцу 6 класса: в каждый § «Где это в жизни» (хук) / «Разбор по шагам» (→ авто-stepPlayer) /
+«А знаешь ли ты?» (факт); добить визуализации; прогон тестов.
+
+### Phase 5 — Курсовой финал на хабе + звание «Математик 5 класса» (+150 XP)
+3 боссовых испытания (по одному из главы): натуральные числа · уравнение/угол · дроби.
+
+### Phase 6 — Доступ ученикам/классам (`/api/access`) — действие админа.
+
+---
+
+## 5. Визуальная карта — см. `PLAN_MATH_5_VISUAL.md`
+
+Кратко: **что уже есть** в `Math6`/`Math6Anim` (numberLine, plane, pie, venn, areaModel,
+numberLineWalk/Jumps, coordGame, balanceScale, triangleDrag, stepPlayer…) переиспользуем; **новое**
+для 5 класса — `protractor` (угломер, §2.6), семейство дробей (`fractionBar`, `equivFractions`,
+`fractionAdd`, `fractionMulArea`, `improperMixed`), `sieve` (решето Эратосфена, §1.14), `factorTree`,
+`divisibilityChecker` (§1.13), `divisorsLadder` (НОД/НОК, §1.12), `powerBlocks` (степень, §1.10),
+`rulerMeasure` (§1.5), `linePrimitives` (точка/прямая/луч, §1.4), `polygonPerimeter` (§1.12 ч.2 /3.12),
+`areaGrid` + `triangleArea` (§3.13–14), `averageBars` (§3.15), `barChart`/`lineChart` (§3.16),
+`box3d` + `volumeCubes` (§3.17–18, **2D-изометрия**, не интерактивный 3D — это допустимо и нужно).
+
+---
+
+## 6. Геймификация / тесты / гочи
+- XP/уровни (общий `math5_xp`), прогресс `math5_chN_*`, финал главы = боссы (HP-бар), 4/5 → +40 XP
+  и ачивка «Глава N пройдена». Курсовой финал → звание + 150 XP (`localStorage math5_course_done`).
+- Тесты: `backend/tests/math5-page.test.js` по образцу math6 (jsdom, инлайн ассетов, HEADLESS-guard
+  canvas). Прогон: `node -e "require('./tests/math5-page.test.js')"` из `backend/`.
+- pre-commit hook гоняет полный backend-прогон при staged backend-файлах (baseline 3 Auth-фейла).
+- Коммитить поимённо (не `git add -A`), push сразу. fetch перед работой ([[project_concurrent_sessions_branch]]).
+
+---
+
+## 7. Замечание про §3.17–18 (параллелепипед, куб, объём)
+В 6 классе пользователь **исключил интерактивные 3D-тела**. Здесь иначе: параллелепипед/куб/объём —
+**обязательная программа** 5 класса, и рисуются стандартной **2D-изометрией** (статичный чертёж с
+подписанными рёбрами + анимация заполнения единичными кубиками). Это не «3D-движок», а плоский
+SVG-рисунок — включаем.

plans/textbooks-5/PLAN_MATH_5_VISUAL.md

@@ -0,0 +1,89 @@
+# PLAN — Визуализации «Математика 5»
+
+Карта «§ → визуальный компонент». Опора — существующая библиотека `window.Math6` (статичные SVG)
+и `window.Math6Anim` (canvas/SVG-демо, headless-safe). **Переиспользуем максимум**, новое дописываем
+в те же два файла.
+
+Легенда: ✅ уже есть · 🆕 новый компонент · ♻️ есть, нужна лёгкая доработка.
+
+---
+
+## Уже готово (наследуем без изменений)
+`Math6`: `fmt, box, numberLine(line/ray, ticks, points, segments), plane(+polyline,plot), pie, venn`.
+`Math6Anim`: `rollingCircle, sweepArea, areaModel, numberLineWalk, carGraph, plotLive, thermometer,
+numberLineJumps, coordGame, reflectFold, barModel, setFilter, pieGrow, balanceScale, constAreaRect,
+triangleDrag` + `stepPlayer`/`stepifyExamples` (авто-конвертация «Разбор по шагам» в плеер).
+
+---
+
+## Глава 1 — Натуральные числа
+
+| § | Тема | Визуал | Статус |
+|---|------|--------|--------|
+| 1 | Как решать задачу | `stepPlayer` (схема: условие→план→решение→проверка) | ✅ |
+| 2 | Чтение и запись, разряды | 🆕 `placeValue` — разрядная таблица (классы/разряды), число рассыпается на разряды | 🆕 |
+| 3 | Сравнение | `numberLine` + подсветка >/< ; тренажёр | ✅ |
+| 4 | Точка, прямая, луч, отрезок, плоскость | 🆕 `linePrimitives` — SVG-галерея + интерактив «проведи через 2 точки» | 🆕 |
+| 5 | Измерение отрезков, длина | 🆕 `rulerMeasure` — линейка над отрезком, тащишь — читаешь длину | 🆕 |
+| 6 | Координатный луч | `numberLine` (ray) + `coordGame` («поставь число») | ✅ |
+| 7 | Округление | `numberLine` со «снэпом» к разряду (стрелка к ближайшему) | ♻️ |
+| 8 | Сложение и вычитание | `numberLineWalk` + столбик (inline, как 6 кл.) | ✅ |
+| 9 | Умножение и деление | `areaModel` (a·b) + `numberLineJumps` (прыжки) | ✅ |
+| 10 | Степень | 🆕 `powerBlocks` — 2² как квадрат, 2³ как кубик (изометрия), рост основания/показателя | 🆕 |
+| 11 | Деление с остатком | 🆕 `remainderGroups` — раскладка точек по группам, остаток подсвечен (a=b·q+r) | 🆕 |
+| 12 | Делители, НОД, НОК | 🆕 `divisorsLadder` — лесенки кратных (НОК) + `venn` делителей (НОД) | 🆕 (venn ✅) |
+| 13 | Признаки делимости | 🆕 `divisibilityChecker` — вводишь число, флажки 2/3/4/5/9/10 загораются с объяснением | 🆕 |
+| 14 | Простые/составные, разложение | 🆕 `sieve` (решето Эратосфена — анимация вычёркивания) + 🆕 `factorTree` (дерево множителей) | 🆕 |
+| 15 | Математика вокруг нас | прикладные карточки + любой подходящий демо | ✅ |
+| 16 | Движение/взвешивание/переливание | `carGraph` (движение) + интерактив-головоломка «переливание» (state-машина) | ✅/🆕 |
+| 17 | Исторические сведения | карточки «А знаешь ли ты?» (системы счисления: майя/Египет/Рим) | ✅ |
+
+## Глава 2 — Выражения. Уравнения
+
+| § | Тема | Визуал | Статус |
+|---|------|--------|--------|
+| 1 | Числовые выражения | 🆕 `exprTree` — дерево порядка действий, подсветка шага | 🆕 |
+| 2 | Выражения с переменными | `exprTree` + подстановка значения (слайдер x → значение) | ♻️ |
+| 3 | Уравнение | 🆕 `equationScale` — весы: x+a = b, снимаем гири поровну (наследует `balanceScale`) | 🆕 |
+| 4 | Формулы | `constAreaRect` / прямоугольник P=(a+b)·2, S=a·b со слайдерами | ✅ |
+| 5 | Решение задач уравнениями | `stepPlayer` | ✅ |
+| 6 | Угол. Измерение и построение | 🆕 **`protractor`** — транспортир: тащишь луч, читаешь градусы, классификация (остр/прям/туп/развёрн) | 🆕 ★ключевой |
+| 7 | Математика вокруг нас | прикладные карточки | ✅ |
+| 8 | Занимательные задачи | головоломки/квизы | ✅ |
+| 9 | Исторические сведения | карточки-факты | ✅ |
+
+## Глава 3 — Обыкновенные дроби
+
+| § | Тема | Визуал | Статус |
+|---|------|--------|--------|
+| 1 | Дробные числа, обыкн. дроби | 🆕 `fractionBar` (полоса m из n) + `pie` (доля круга) | 🆕 (pie ✅) |
+| 2 | Деление и дроби, осн. свойство | 🆕 `equivFractions` — дроблю каждую долю → площадь та же (2/3 = 4/6) | 🆕 |
+| 3 | Правильные/неправильные, смешанные | 🆕 `improperMixed` — полосы складываются в целые + остаток (7/3 = 2⅓) | 🆕 |
+| 4 | Сравнение дробных | `fractionBar` ×2 на общей шкале / `numberLine` дробей | ♻️ |
+| 5 | Сложение/вычитание обыкн. дробей | 🆕 `fractionAdd` — приведение к общему знаменателю на полосах | 🆕 |
+| 6 | Сложение/вычитание смешанных | `fractionAdd` + целые части | ♻️ |
+| 7 | Умножение дробных | 🆕 `fractionMulArea` — площадная модель a/b · c/d (наложение сеток) | 🆕 |
+| 8 | Деление дробных | 🆕 `fractionDiv` — «сколько раз c/d помещается» (мерная модель) | 🆕 |
+| 9 | Задачи на все действия | `stepPlayer` | ✅ |
+| 10 | Задачи на применение дробей | `fractionBar` + сюжетные тренажёры | ♻️ |
+| 11 | Параллельные/перпендикулярные | 🆕 `linesRelation` — две прямые, угол между ними, ∥ и ⟂ | 🆕 |
+| 12 | Ломаная, многоугольник, периметр | 🆕 `polygonPerimeter` — строишь вершины, стороны суммируются | 🆕 |
+| 13 | Площадь, единицы | 🆕 `areaGrid` — заполнение единичными квадратами, конвертер единиц | 🆕 |
+| 14 | Площадь прям. треугольника | 🆕 `triangleArea` — треугольник = половина прямоугольника (анимация отражения) | 🆕 |
+| 15 | Среднее арифметическое | 🆕 `averageBars` — столбики выравниваются к среднему уровню | 🆕 |
+| 16 | Линейные/столбчатые диаграммы | 🆕 `barChart` + `lineChart` (plane уже умеет polyline) | 🆕 (line ♻️) |
+| 17 | Параллелепипед, куб | 🆕 `box3d` — изометрический чертёж с подписанными a,b,c (НЕ интерактивный 3D) | 🆕 |
+| 18 | Объём | 🆕 `volumeCubes` — заполнение коробки единичными кубиками (изометрия, анимация) | 🆕 |
+
+---
+
+## Сводка новых компонентов (≈22)
+**SVG-статичные / интерактивные (в `math6_svg.js` или как SVG-демо):** `linePrimitives`, `rulerMeasure`,
+`placeValue`, `fractionBar`, `equivFractions`, `improperMixed`, `linesRelation`, `polygonPerimeter`,
+`areaGrid`, `triangleArea`, `box3d`, `factorTree`, `exprTree`.
+**Canvas/анимированные (в `math6_anim.js`):** `powerBlocks`, `remainderGroups`, `divisorsLadder`,
+`divisibilityChecker`, `sieve`, `protractor`, `equationScale`, `fractionAdd`, `fractionMulArea`,
+`fractionDiv`, `averageBars`, `barChart`, `volumeCubes`.
+
+Приоритет (даёт максимум «вау» при минимуме кода): `protractor`, `fractionBar`+`fractionMulArea`,
+`sieve`, `box3d`+`volumeCubes`, `equationScale`. Все — headless-safe (canvas-guard / чистый SVG).