Theming

Token-gedreven dark/light theming, zonder reload.

Tokens

src/styles/tokens.ts: getThemeTokens(theme) / deriveSurfaceTokens(bg, text): een kleine, vaste set basistokens (achtergrond, tekst, accent) plus surface-/randtokens afgeleid door bg te mixen richting text, zonder ooit een nieuwe tint te introduceren.

Toepassen zonder reload

src/styles/apply-theme.ts: schrijft de resulterende CSS custom properties en het data-theme-attribuut op <html>; van thema wisselen verandert alleen variabelewaarden, zonder re-render van de componentboom.

Zustand store

src/state/theme-store.ts: een Zustand-store die het gekozen thema bewaart in localStorage en het synchroon toepast vóór de eerste render (geen flits van het verkeerde thema).

Document-model

Voordat er iets bij een component terechtkomt, wordt het ruwe OpenAPI-document genormaliseerd naar een in-memory model (tagGroups → endpoints), geïmplementeerd als kaal TypeScript, apart getest, zonder afhankelijkheid van React. De vier verantwoordelijkheden:

  • normalize.ts: dereferentieert elke $ref via @apidevtools/swagger-parser en groepeert endpoints per tag, met behoud van de gedeclareerde volgorde.
  • cap-depth.ts: maakt een gedereferentieerd (en mogelijk cyclisch) schema veilig voor JSON.stringify, voor de "Copy OpenAPI"-knop.
  • example.ts / schema-tree.ts: bouwt de voorbeeldpayload met type-tokens en de navigeerbare schemaboom uit hetzelfde schema, zonder nepdata te verzinnen.
  • filter.ts: de client-side zoekfunctie die de sidebar gebruikt.

Elke functie die het schema doorloopt (flattenSchema, schemaToTreeNodes, extractValidationRules) houdt bezochte nodes bij op basis van object-identiteit, niet op een numerieke dieptelimiet, dus rendert een echt recursieve DTO één enkele (circular reference) / ↩ circular-markering in plaats van N keer af te wikkelen of te crashen.