Theming

Theming clair/sombre piloté par tokens, sans rechargement.

Tokens

src/styles/tokens.ts : getThemeTokens(theme) / deriveSurfaceTokens(bg, text) : un petit ensemble fixe de tokens de base (fond, texte, accent) plus des tokens de surface/bordure dérivés en mélangeant bg vers text, sans jamais introduire une nouvelle teinte.

Appliquer sans rechargement

src/styles/apply-theme.ts : écrit les propriétés CSS personnalisées résultantes et l'attribut data-theme sur <html> ; changer de thème ne modifie que des valeurs de variables, sans re-rendu de l'arbre de composants.

Store Zustand

src/state/theme-store.ts : un store Zustand qui persiste le thème choisi dans localStorage et l'applique de façon synchrone avant le premier affichage (pas de flash du mauvais thème).

Document Model

Avant d'atteindre un composant, le document OpenAPI brut est normalisé en un modèle en mémoire (tagGroups → endpoints), implémenté en TypeScript pur, testé indépendamment, sans dépendance à React. Les quatre responsabilités :

  • normalize.ts: déréférence chaque $ref via @apidevtools/swagger-parser et groupe les endpoints par tag, en préservant l'ordre déclaré.
  • cap-depth.ts: rend un schéma déréférencé (et potentiellement cyclique) sûr pour JSON.stringify, pour le bouton « Copy OpenAPI ».
  • example.ts / schema-tree.ts: construit le payload d'exemple avec les type-tokens et l'arbre de schéma navigable à partir du même schéma, sans fabriquer de fausses données.
  • filter.ts: la recherche côté client utilisée par la sidebar.

Chaque fonction qui parcourt le schéma (flattenSchema, schemaToTreeNodes, extractValidationRules) suit les nœuds déjà visités par identité d'objet, pas par une limite de profondeur numérique, donc un DTO réellement récursif affiche un simple marqueur (circular reference) / ↩ circular au lieu de se dérouler N fois ou de planter.