@nomosui/react 0.5.3 → 0.7.0

package/SKILL.md

@@ -27,17 +27,24 @@ pour expliquer une brique, elle appartient à l'app, pas au cœur.
 - **Recueillir ou montrer une note** → `Rating` : interactif seulement si l'app fournit
   `onValueChange`, sinon un affichage.
 - **Lister des événements datés** → `Timeline` (frise, présentation seule ; le format de
-  la date vient de l'app).
+  la date vient de l'app). Un point porte un état — `done` (défaut) ou `past` (grisé) —
+  et un `past` exige un `stateLabel` fourni par l'app : la couleur seule ne suffit pas.
 - **Nommer un contrôle iconique, glisser une aide courte** → `Tooltip` en famille (un
   `TooltipProvider` autour de plusieurs, `Tooltip`, `TooltipTrigger`, `TooltipContent`).
   Jamais pour une information essentielle : elle n'est ni au clavier seul ni au tactile.
 - **Représenter une personne par son image** → `Avatar` (le texte alternatif et le repli
   viennent de l'app ; natif `<img>` + `onError`, sans dépendance).
+- **Coiffer un titre d'une accroche courte** → `Kicker` (un libellé en majuscules, un point
+  de ton optionnel via `dot` ; le texte est injecté par l'appelant).
 
 ### Agir, saisir
 
 - **Agir** → `Button` (`variant` = le ton, `size` = la densité ; `asChild` pour poser le
   style sur un lien).
+- **Naviguer vers une URL** → `Link` (un `<a>` ; `href` et libellé injectés, le cœur ne
+  porte aucun routing ; `asChild` pour poser le style sur un composant de routing de l'app).
+- **Copier un texte** → `CopyButton` (`value` à copier, `label`/`copiedLabel` et `icon`
+  injectés ; le libellé transitoire revient seul après ~2 s).
 - **Saisir une ligne** → `Input` ; **un nombre borné** → `NumberField` (`step`, `min`,
   `max` du natif) ; **chercher avec icône et effacement** → `SearchField` ; **plusieurs
   lignes** → `Textarea`.
@@ -52,8 +59,13 @@ pour expliquer une brique, elle appartient à l'app, pas au cœur.
 ### Structurer
 
 - **Une surface** (titre, corps, pied) → les parts de `Card`.
+- **L'en-tête d'un site** (marque, navigation, actions) → `Navbar` : une barre sticky en
+  haut, bordure basse, fond du cœur. Les slots `brand`, `nav` et `actions` sont injectés
+  par l'app — aucun `href` ni mot produit dans le cœur (ADR 0030).
 - **Un état vide, ou une panne à nommer** → `EmptyState` (la carte centrée ; le `detail`
   brut nomme la vraie panne, plutôt qu'un zéro silencieux).
+- **Un pied de page** (marque, rangée de liens, ligne légale) → `Footer` : des emplacements
+  injectés (`brand`, `links`, `legal`), sans routing ni libellé propre au cœur.
 - **Une information inline** qui demande l'attention sans bloquer → `Alert` (le ton vient
   du cœur ; `onClose` va avec `closeLabel`).
 - **Séparer deux contenus** → `Separator` ; **tenir la place d'un contenu qui charge** →
@@ -86,6 +98,18 @@ pour expliquer une brique, elle appartient à l'app, pas au cœur.
   (sélection multiple) ; ouverture et sélection sont contrôlées par props, le focus
   clavier (rôle `tree`, flèches) est interne.
 
+### Écrire
+
+- **Titrer une section** → `Heading` : `level` choisit la balise `h1`..`h6` **et** la taille
+  sémantique (display, title, lead, body, caption, micro). La hiérarchie du document se
+  décide par le niveau, jamais par la taille.
+- **Écrire le texte courant** → `Text` : `size` lit l'échelle sémantique (`lead`, `body`,
+  `caption`, `micro`), `as` choisit `p` (défaut) ou `span` pour un texte inline. Les tailles
+  viennent des tokens, jamais d'un utilitaire ad-hoc.
+- **Montrer un extrait de code** → `Code` (inline, dans une phrase) ou `CodeBlock` (bloc
+  scrollable avec bouton de copie ; `code` est le texte copié, `children` le rendu, les
+  libellés sont injectés). La coloration syntaxique reste à l'app.
+
 ### Formulaire
 
 - **Mettre en page** → `Form` (grille de champs + zone d'actions, `columns` pour deux
@@ -132,7 +156,10 @@ button
 card
 checkbox
 chip
+code
+code-block
 collapsible
+copy-button
 counter
 data-table-pagination
 data-table-toolbar
@@ -142,11 +169,16 @@ empty-state
 facet-filter
 field
 fieldset
+footer
 form
 freshness
+heading
 input
+kicker
 label
+link
 meter
+navbar
 number-field
 popover
 progress-bar
@@ -161,6 +193,7 @@ skeleton
 switch
 table
 tabs
+text
 textarea
 timeline
 toast
@@ -193,7 +226,10 @@ aplati par mode) et `nomos://component/<nom>` (le manifeste).
 Au-delà du manifeste, chaque brique a une **vue** servie en `ui://nomos/<nom>` — un
 document auto-suffisant (`text/html;profile=mcp-app`) que l'hôte rend dans un iframe
 sandboxé. Une **scène composite** (`ui://nomos/composite/<nom>`) assemble plusieurs
-briques en un écran qui a du sens (un formulaire, une carte de statut).
+briques en un écran qui a du sens (un formulaire, une carte de statut). Les scènes
+sont aussi exportées sur la surface publique JS (`composites`, `compositeNames`,
+`findComposite`, ADR 0031) : le serveur MCP et le site rendent la **même** source,
+et leur copie par défaut est neutre — elle s'injecte par props.
 
 La vue **émet des intentions** (`ready`, `select`, `change`, `error`) et ne mute jamais
 l'état : l'hôte décide. Il lui pousse l'apparence (`set-view` : thème, densité) et les