Theming

Tokengesteuertes Dark-/Light-Theming ohne Reload.

Tokens

src/styles/tokens.ts: getThemeTokens(theme) / deriveSurfaceTokens(bg, text): eine kleine, feste Menge an Basistoken (Hintergrund, Text, Akzent) plus Surface-/Border-Token, abgeleitet durch Mischen von bg in Richtung text, ohne je einen neuen Farbton einzuführen.

Anwenden ohne Reload

src/styles/apply-theme.ts: schreibt die resultierenden CSS-Custom-Properties und das data-theme-Attribut auf <html>; ein Themenwechsel ändert nur Variablenwerte, ohne Re-Render des Komponentenbaums.

Zustand-Store

src/state/theme-store.ts: ein Zustand-Store, der das gewählte Theme in localStorage persistiert und es synchron vor dem ersten Paint anwendet (kein Flackern des falschen Themes).

Document Model

Bevor irgendetwas eine Komponente erreicht, wird das rohe OpenAPI-Dokument in ein In-Memory-Modell normalisiert (tagGroups → endpoints), implementiert als reines TypeScript, unabhängig getestet, ohne Abhängigkeit von React. Die vier Zuständigkeiten:

  • normalize.ts: dereferenziert jeden $ref über @apidevtools/swagger-parser und gruppiert Endpunkte nach Tag, unter Beibehaltung der deklarierten Reihenfolge.
  • cap-depth.ts: macht ein dereferenziertes (und möglicherweise zyklisches) Schema sicher für JSON.stringify, für den Button „Copy OpenAPI“.
  • example.ts / schema-tree.ts: baut den Beispiel-Payload mit Typ-Tokens und den navigierbaren Schema-Baum aus demselben Schema, ohne Fake-Daten zu erfinden.
  • filter.ts: die clientseitige Suche, die von der Sidebar genutzt wird.

Jede Funktion, die das Schema durchläuft (flattenSchema, schemaToTreeNodes, extractValidationRules), verfolgt besuchte Knoten über Objektidentität, nicht über eine numerische Tiefenbegrenzung, sodass ein wirklich rekursives DTO einen einzelnen (circular reference)-/↩ circular-Marker rendert, statt sich N-fach zu entrollen oder abzustürzen.