§3.1DemoMount, en direct

La répartition des rôles est celle, habituelle, du paquet : le balisage de montage (scène, emplacement des contrôles, emplacement de la légende) est livré dans le paquet ; le module de démonstration et son chargeur appartiennent au site. Ce site garde son chargeur dans src/lib/demo-loader.ts et appelle mountAllDemos() une fois depuis le layout ; l’appel s’exécute sur chaque page, mais le chunk d’un module de démonstration n’est récupéré que pour une page qui porte un montage [data-demo].

Une démonstration qui prend l’entrée du pointeur sur son canvas passe interactive — la scène s’approprie alors les gestes tactiles et affiche un réticule. Celle-ci est passive (rendu seul) : elle laisse le drapeau éteint, et un glissement sur le canvas continue de faire défiler la page. Elle dessine l’interférence de deux sources d’ondes avec le token d’encre de la page elle-même, et suit donc le thème :

Démo · Interférences à deux sources

Démo · Interférences à deux sources

Deux sources ponctuelles émettent des ondes circulaires ; où les crêtes rencontrent les crêtes, l’encre s’accumule ; où les crêtes rencontrent les creux, le papier transparaît. Basculez le thème — la démonstration se ré-encre depuis les tokens vivants.

Le contrat de module tient en un export par défaut, mount(ctx), qui retourne une fonction de nettoyage ; les ids de modules comme waves/interference se résolvent comme bon semble au site (import.meta.glob ici).

§3.2Le mobilier de page

Les composants restants n’emplissent pas une note : ils l’encadrent.

• Hero ouvre une note : surtitre, titre d’affichage, un chapeau qui traverse toute la chaîne Markdown, une ligne de méta, et un tocLabel facultatif qui ajoute à la barre latérale une ligne « intro » non numérotée. Le title du frontmatter reste le nom canonique court pour <title> et les cartes ; celui du hero peut être long.
• PartHero ouvre un chapitre de hub — l’en-tête de cette page même. Son surtitre ne se tape jamais : la route passe le libellé « Partie III · … » du chapitre en props.partLabel.
• Part découpe une longue note d’une seule page en parties ; le préréglage de numérotation les transforme en lignes de groupe « PARTIE II · … » de la barre latérale. La démonstration intégrale est découpée ainsi.
• HubCard et .hub-grid sont les cartes d’accueil d’un hub ; .path est sa boîte de chemin de lecture — les deux sont sur la vue d’ensemble de cette galerie.
• LocalToc rend une liste de sauts dans la page ; il accepte les deux formes de ToC que produisent les deux préréglages de numérotation, et se masque de lui-même sous un minimum configurable. Ci-dessous, en direct, sur le ToC de ce chapitre même.
• SidebarMemory garde une barre latérale défilante là où le lecteur l’a laissée d’une page à l’autre, et centre l’élément courant ([aria-current="page"] par défaut) dès qu’il sortirait de la vue. Déposez-le dans la boîte de défilement de la barre latérale, après le balisage de navigation ; il s’exécute avant le premier rendu, la barre ne clignote donc jamais en haut. La barre latérale de cette démo le porte.
• LineageSvg met en carte un SVG dessiné à la main (une filiation de méthodes, un arbre de taxonomie) — il y en a un plus bas.
• PageFooter est la petite ligne au pied d’une note — celle qui clôt chaque note ici.
• Les pièces de parcours vivent dans le chapitre wiki ; le versant Markdown de la galerie, c’est la démonstration intégrale.

§3.3LocalToc et LineageSvg, en direct

LocalToc, nourri du ToC de cette page généré au build — les mêmes données que consomme la barre latérale, remises à la note en props.toc :

Et LineageSvg autour d’un schéma écrit à la main, encré uniquement en tokens sémantiques pour se tenir sur les deux thèmes :

§3.4Du mobilier sans composant

Quelques pièces ne sont que des classes ordinaires de base.css, pour les sites qui les rendent depuis leur propre layout ou les écrivent en HTML au fil de la prose :