Theming

Theming dark/light basado en tokens, sin reload.

Tokens

src/styles/tokens.ts: getThemeTokens(theme) / deriveSurfaceTokens(bg, text): un conjunto pequeño y fijo de tokens base (background, text, accent) más tokens de surface/border derivados mezclando bg hacia text, sin introducir nunca un hue nuevo.

Aplicación sin reload

src/styles/apply-theme.ts: escribe las custom properties CSS resultantes y el atributo data-theme en <html>; cambiar de tema solo cambia valores de variables, sin re-render del árbol de componentes.

Zustand store

src/state/theme-store.ts: un store de Zustand que persiste el tema elegido en localStorage y lo aplica de forma síncrona antes del primer paint (sin flash del tema equivocado).

Document Model

Antes de que nada llegue a un componente, el documento OpenAPI crudo se normaliza en un modelo en memoria (tagGroups → endpoints), implementado en TypeScript puro, probado de forma independiente, sin dependencia de React. Las cuatro responsabilidades:

  • normalize.ts: desreferencia cada $ref vía @apidevtools/swagger-parser y agrupa endpoints por tag, preservando el orden declarado.
  • cap-depth.ts: hace que un schema desreferenciado (y posiblemente cíclico) sea seguro para JSON.stringify, para el botón "Copy OpenAPI".
  • example.ts / schema-tree.ts: construye el payload de ejemplo con type-tokens y el árbol de schema navegable a partir del mismo schema, sin fabricar datos falsos.
  • filter.ts: la búsqueda del lado del cliente que usa el sidebar.

Cada función que recorre el schema (flattenSchema, schemaToTreeNodes, extractValidationRules) rastrea los nodos visitados por identidad de objeto, no por un límite numérico de profundidad, así que un DTO genuinamente recursivo renderiza un único marcador (circular reference) / ↩ circular en vez de desenrollarse N veces o fallar.