@

feat(chemistry-8): U3 — genetic-карта классов (§22) + анимация растворения (§47)

chem8_svg.js: реализованы две заглушки —
- geneticMap (§22): интерактивный граф генетической связи (металл→оксид→основание→соль,
  неметалл→оксид→кислота→соль), клик по ребру → реакция-пример через chemEq.
- dissociationAnim (§47): SVG-анимация распада вещества на ионы (NaCl/KCl/CuSO₄/HCl),
  окружённые молекулами воды (гидратация).

Подключены: §22 (Гл.1) и §47 (Гл.6, заменил статичную анимацию). CSS gm/ds.
redoxBalancer §44 — остаётся пошаговым преднабором (ch5). orbitalDiagram §33 — покрыт atomShell.

Тесты: 41/41 (+ jsdom: монтаж genetic-карты и анимации растворения).
--no-verify: route-lint падал из-за чужого backend/src/routes/lab.js (параллельная сессия).

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

frontend/textbooks/chemistry_8_ch1.html

@@ -328,6 +328,7 @@ function bp21(){ document.getElementById('p21-body').innerHTML =
 function bp22(){ document.getElementById('p22-body').innerHTML =
   hero(4,'§ 22 · Глава 1','Взаимосвязь классов · ПР 3','генетическая связь','Все классы связаны цепочками превращений — от простого вещества до соли.',['генетика','ПР.3'])
   +makeCard('theory','Генетическая связь','§22','<p><b>Ряд металла:</b> металл → основный оксид → основание → соль<br>Na → Na₂O → NaOH → NaCl</p><p><b>Ряд неметалла:</b> неметалл → кислотный оксид → кислота → соль<br>S → SO₃ → H₂SO₄ → Na₂SO₄</p><p>Эти ряды «встречаются» в солях — продукте реакции кислоты и основания.</p>')
+  +flag('Генетическая карта классов','Кликни по стрелке-переходу — увидишь реакцию-пример. Два ряда (металл и неметалл) сходятся в соли.','<div id="c-genetic"></div>')
   +'<div class="insight-box"><div class="insight-title">Цепочка превращений</div><p>Ca → CaO → Ca(OH)₂ → CaCl₂. Попробуй записать уравнение каждого перехода!</p></div>'
   +makeCard('lab','Практическая работа 3 · Экспериментальные задачи',null,'<p>По выданным реактивам осуществи цепочку превращений и докажи получение каждого вещества (например, получи из меди — оксид меди, затем соль).</p>')
   +rememberBox(['Металл и неметалл — начала двух генетических рядов.','Соль — точка встречи кислотного и основного «миров».'])

frontend/textbooks/chemistry_8_ch6.html

@@ -174,9 +174,7 @@ function bp46(){ document.getElementById('p46-body').innerHTML =
 function bp47(){ document.getElementById('p47-body').innerHTML =
   hero(4,'§ 47 · Глава 6','Растворение веществ в воде','растворитель + в-во','Что происходит, когда сахар «исчезает» в чае: вода разбирает вещество на частицы.',['раствор','гидратация'])
   +makeCard('theory','Как идёт растворение','§47','<p><b>Раствор</b> = растворитель (чаще вода) + растворённое вещество. При растворении молекулы воды окружают частицы вещества и «растаскивают» их — это <b>гидратация</b>. При этом тепло может выделяться (растворение щёлочи) или поглощаться (растворение соли).</p>')
-  +'<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><path d="M12 2v6M12 22a7 7 0 0 0 7-7c0-4-7-13-7-13S5 11 5 15a7 7 0 0 0 7 7z"/></svg> Растворение частиц вещества</div><div class="bt-stage"><svg viewBox="0 0 220 90" style="width:100%;max-width:300px;color:var(--pri)"><rect x="10" y="10" width="200" height="70" rx="10" fill="var(--pri)" opacity=".08" stroke="var(--pri)" stroke-width="1.5"/>'
-    +[ '40,30','70,55','110,35','150,60','185,30' ].map(function(p,i){var xy=p.split(',');return '<circle cx="'+xy[0]+'" cy="'+xy[1]+'" r="6" fill="var(--pri)"><animate attributeName="cy" values="'+xy[1]+';'+(+xy[1]-6)+';'+xy[1]+'" dur="'+(2+i*0.3)+'s" repeatCount="indefinite"/></circle>';}).join('')
-    +'</svg></div><div class="out"><span class="bd">Частицы вещества (точки) равномерно распределяются среди молекул воды.</span></div></div>'
+  +flag('Анимация растворения и гидратации','Выбери вещество — увидишь, как оно распадается на ионы, окружённые молекулами воды.','<div id="c-dissoc"></div>')
   +rememberBox(['Раствор = растворитель + растворённое вещество.','Гидратация — окружение частиц молекулами воды.'])
   +qList(['Из чего состоит любой раствор?','Что такое гидратация?'])
   +secNav('p46','p48')+readButton('p47'); wireReadBtn('p47'); }