Theming

Dark/light theming token-driven e sem reload.

Tokens

src/styles/tokens.ts: getThemeTokens(theme) / deriveSurfaceTokens(bg, text): um conjunto pequeno e fixo de tokens base (background, text, accent) mais tokens derivados de surface/border, obtidos misturando bg em direção a text, nunca introduzindo uma nova hue.

Aplicação sem reload

src/styles/apply-theme.ts: escreve as CSS custom properties resultantes e o data-theme no <html>; alternar temas só muda valores de variáveis, sem re-render da árvore de componentes.

Zustand store

src/state/theme-store.ts: um store Zustand que persiste o tema escolhido em localStorage e o aplica sincronamente antes do primeiro paint (sem flash do tema errado).

Document Model

Antes de qualquer coisa chegar em um componente, o documento OpenAPI cru é normalizado em um modelo em memória (tagGroups → endpoints), implementado como TypeScript puro, testado independentemente e sem dependência de React. As quatro responsabilidades:

  • normalize.ts: dereferencia cada $ref via @apidevtools/swagger-parser e agrupa endpoints por tag, preservando a ordem declarada.
  • cap-depth.ts: deixa um schema dereferenciado (e possivelmente cíclico) seguro para JSON.stringify, para o botão "Copy OpenAPI".
  • example.ts / schema-tree.ts: constroem o payload de exemplo com type-tokens e o schema tree navegável a partir do mesmo schema, sem fabricar dados falsos.
  • filter.ts: a busca client-side usada pela sidebar.

Todas as funções que caminham pelo schema (flattenSchema, schemaToTreeNodes, extractValidationRules) rastreiam nodes visitados por identidade de objeto, não por depth cap numérico, então um DTO genuinamente recursivo renderiza um único marcador (circular reference) / ↩ circular em vez de desenrolar N vezes ou crashar.