feat: add verification badge sizing documentation

- Documented the behavior of `RouteBadge` and `NumericText` after animation changes.
- Addressed width issues for numbers `2` and `6` post-animation.
- Updated `ResizeObserver` to monitor number badge resizing.
- Fixed scaling for short numbers and ensured proper transitions.
- Verified functionality across different browser sizes and builds.

artifacts/badge-preview.config.mts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({ plugins: [react()], base: '/__visual-badge/', build: { outDir: 'dist/__visual-badge', rollupOptions: { input: 'artifacts/badge-preview.html' } } });

artifacts/badge-preview.html

@@ -0,0 +1 @@
+<!doctype html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>RideBus — смена номеров</title></head><body><div id="root"></div><script type="module" src="./badge-preview.tsx"></script></body></html>

artifacts/badge-preview.tsx

@@ -0,0 +1,18 @@
+// Regression fixture: reuse each badge while changing from long to short numbers.
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { CSSProperties } from 'react';
+import '@fontsource-variable/manrope';
+import '../src/styles.css';
+import { RouteBadge } from '../src/RouteBadge';
+function Preview() {
+  const [short, setShort] = useState(false);
+  const numbers = short ? ['2', '6', '11'] : ['21тк', '16тк', '11'];
+  return <div className="board" data-theme="dark" style={{ '--accent': '#d5ff70' } as CSSProperties}>
+    <header className="board-header"><h1>Смена номеров</h1><button className="primary-button" onClick={() => setShort(value => !value)}>{short ? 'Длинные номера' : 'Короткие номера'}</button></header>
+    <main className="scene-container"><section className="info-screen"><section className="info-card routes-info" data-active="true" style={{ maxWidth: 540, height: '100%' }}><h3>Маршруты остановки</h3>
+      <div className="route-cloud" data-carousel="false" style={{ '--route-rows': 3 } as CSSProperties}><div className="route-list">{numbers.map((number, index) => <article className="route-tile" key={index}><RouteBadge number={number} filled /><div className="route-card-name"><h3 className="destination-heading">{['Калинина — Автовокзал', 'Гвардеец — Автовокзал', 'Тросницкая — Автовокзал'][index]}</h3><div className="route-card-next"><time>06:19</time><span className="route-kind">Автобус</span></div></div></article>)}</div></div>
+    </section></section></main>
+  </div>;
+}
+createRoot(document.getElementById('root')!).render(<Preview />);

artifacts/verification-badge-sizing.md

@@ -0,0 +1,11 @@
+# Размер номера после анимации — 9 октября 2026
+
+Браузерный сценарий воспроизведён на настоящих `RouteBadge` и `NumericText`, с сохранением компонентов при смене номера. Проверены переходы `21тк → 2`, `16тк → 6` и обратные переходы, повторный цикл, неизменный номер `11`.
+
+- До исправления после завершения анимации метки `2` и `6` имели ширину 22 px, но сохраняли масштаб `0.54023`, рассчитанный во время исчезновения предыдущих символов. `11` имел масштаб 1.
+- `ResizeObserver` теперь наблюдает также за меткой номера: сжатие исчезающих разрядов и изменение шрифта повторно запускают вписывание. CSS-transform самой метки не меняет наблюдаемый размер, поэтому расчёт не образует обратную связь.
+- После исправления короткие `2`, `6`, `11` используют масштаб 1 при базовом шрифте 35 px. Длинные `21тк`, `16тк` корректно уменьшаются до масштаба `0.5875` в этом контейнере. Повторные смены возвращают ожидаемый масштаб.
+- Во время смены сохранены анимации `digit-down-in` и прокрутка разрядов. Смещение центра метки <0,01 px. Браузерных ошибок и предупреждений нет.
+- Проверены широкий браузерный вид и узкий 487×664. Production build и TypeScript проходят.
+
+Снимок `board-badge-size-fixed.jpg` содержит тестовые карточки после перехода на короткие номера. Сценарий воспроизводится через `npm exec vite build -- --config artifacts/badge-preview.config.mts` и `/__visual-badge/artifacts/badge-preview.html`. Кнопка переключает длинные и короткие номера; позиции компонентов сохраняются. Обычный production build не включает этот сценарий.

src/RouteBadge.tsx

@@ -17,6 +17,9 @@ export function RouteBadge({ number, large = false, filled = false }: { number:
     };
     const observer = new ResizeObserver(fit);
     observer.observe(element);
+    // Outgoing digits collapse after the prop change; refit as their width shrinks.
+    // Observing the untransformed label avoids retaining the previous number's scale.
+    observer.observe(content);
     fit(); void document.fonts.ready.then(fit);
     return () => { mounted = false; observer.disconnect(); };
   }, [number]);