Sprint 4: developer design-system screens

Two service screens accessible via Tweaks screen selector:

- DEV · Палитра — every color role grouped (primary / accent / warm /
  status / text / surfaces) with swatch, role name, CSS var name,
  hex code, and usage note. Key-color banner at top. Dynamic values
  (primary/accent/warm/success-50/fg-4/p300) recompute from
  ctx.palette when the user flips the color in Tweaks.

- DEV · Примеры — rendered components (buttons, chips, surfaces,
  status blocks, text hierarchy, avatars, badges, inputs, segmented
  control, shadow/radius scale) each labeled with the CSS vars it
  uses, so devs can read the theme visually.

Plumbed the active palette object via ctx.palette from App.jsx.

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

SPRINTS.md

@@ -79,5 +79,18 @@ _заполнить в конце спринта_
 - [x] Добавить 5-ю палитру **Бриз** — вариант Лагуны с приглушённым primary `#63BAC3` (яркий `#29AEE3` переехал в p300, warm/accent/success/fg-4 наследуются от Лагуны)
 - [ ] Визуальная проверка всех экранов в новой палитре: кнопки, чипы, CTA, прогресс восстановления, успех-галочка, таббар-бейджи
 
+---
+
+## Спринт 4 · 20 апр 2026
+
+**Цель:** служебные экраны для разработчиков — визуализация дизайн-системы прямо в прототипе, чтобы переключая палитру сразу видеть все цвета и их применение.
+
+### План
+- [x] Пробросить текущую палитру через `ctx.palette` (чтобы dev-экраны могли прочитать все поля)
+- [x] Экран **DEV · Палитра**: таблица всех цветов (primary / warm / accent / status / neutrals / text), у каждой строки — свотч, название роли, CSS-переменная, hex-код, краткое описание применения
+- [x] Экран **DEV · Примеры**: реальные компоненты (кнопки, чипы, карточки, текстовая иерархия, статусы) с подписями «какая CSS-переменная используется»
+- [x] Добавить оба экрана в SCREEN_OPTIONS Tweaks
+- [x] Динамический рендер: при переключении палитры значения hex обновляются автоматически
+
 ### Итоги
 _заполнить в конце спринта_