Theming

Тёмная и светлая темы на токенах, без перезагрузки.

Токены

src/styles/tokens.ts: getThemeTokens(theme) и deriveSurfaceTokens(bg, text). Небольшой фиксированный набор базовых токенов (фон, текст, акцент) плюс токены поверхностей и границ, полученные подмешиванием bg в сторону text, без единого нового оттенка.

Применение без перезагрузки

src/styles/apply-theme.ts: записывает получившиеся пользовательские свойства CSS и атрибут data-theme на <html>. Смена темы меняет только значения переменных, дерево компонентов не перерисовывается.

Zustand store

src/state/theme-store.ts: хранилище Zustand, которое сохраняет выбранную тему в localStorage и применяет её синхронно до первой отрисовки, поэтому чужая тема не мелькает.

Document Model

Прежде чем что-то дойдёт до компонента, сырой документ OpenAPI приводится к модели в памяти (tagGroups → endpoints). Она написана на чистом TypeScript, тестируется отдельно и не зависит от React. Четыре её задачи:

  • normalize.ts: раскрывает все $ref через @apidevtools/swagger-parser и группирует эндпоинты по тегам, сохраняя объявленный порядок.
  • cap-depth.ts: делает раскрытую (и, возможно, зацикленную) схему безопасной для JSON.stringify, ради кнопки «Copy OpenAPI».
  • example.ts / schema-tree.ts: собирают из той же схемы пример тела с токенами типов и дерево схемы с навигацией, не выдумывая фальшивых данных.
  • filter.ts: поиск на стороне клиента, которым пользуется боковая панель.

Все функции, обходящие схему (flattenSchema, schemaToTreeNodes, extractValidationRules), отмечают посещённые узлы по идентичности объекта, а не по числовому ограничению глубины. Поэтому по-настоящему рекурсивный DTO рисует одну пометку (circular reference) или ↩ circular вместо того, чтобы развернуться N раз или уронить страницу.