# Spunto Design System

> La source de vérité des composants et tokens partagés par la plateforme Spunto. Chaud, inspiré de Mistral, bâti sur @base-ui/react et Tailwind v4.

Documentation lisible par des agents/LLM. Chaque composant a sa page markdown dédiée (API complète, props, exemple). Récupérez la page d'un composant pour l'intégrer ; `llms-full.txt` concatène tout en un seul fichier.

Version : `0.9.3`

## Fondations

- [Couleurs & tokens](/colors.md): Palette chaude inspirée de Mistral. flame = --primary ≈ #ea5400. Tokens clair/sombre.
- [Typographie](/typography.md): Trois familles : Syne (display), Geist (texte), JetBrains Mono (code).
- [Radius](/radius.md): Échelle quasi-carrée, base 4px (--radius). Coins doux mais nets.

## Composants

- [Button](/button.md): Bouton d'action, bâti sur @base-ui/react. Six variantes sémantiques et huit tailles (dont les tailles icône).
- [Badge](/badge.md): Petite étiquette de statut ou de métadonnée. Polymorphe via la prop render (utile pour en faire un lien).
- [Card](/card.md): Conteneur de contenu composé de sous-composants (header, title, description, content, footer, action).
- [Tabs](/tabs.md): Onglets bâtis sur @base-ui/react : liste + trigger + panneau, avec un indicateur glissant qui suit l'onglet actif (contrôle segmenté).
- [Alert](/alert.md): Bandeau contextuel statique, rendu dans le flux de la page — persistant et déclaratif, à l'inverse du Toast (éphémère et impératif). Quatre variantes sémantiques partageant les mêmes tokens de statut.
- [Separator](/separator.md): Filet fin qui sépare du contenu, horizontal ou vertical. Bâti sur @base-ui/react (rôle d'accessibilité correct).
- [Spinner](/spinner.md): Indicateur de chargement indéterminé. Hérite de la couleur de texte courante — placé dans un Button, il prend sa couleur ; sinon, teinter via text-*.
- [Skeleton](/skeleton.md): Placeholder pulsant pour du contenu pas encore chargé. Se dimensionne avec des utilitaires (h-4 w-32) ; rounded-full pour un avatar circulaire.
- [Avatar](/avatar.md): Vignette utilisateur circulaire, bâtie sur @base-ui/react. L'image se masque pendant le chargement ou en cas d'erreur, laissant apparaître le fallback (initiales).
- [Terminal](/terminal.md): Surface xterm.js nue : montage, thème sombre partagé, et fit-on-resize. Aucune opinion sur la provenance des données (WebSocket, SSE, texte statique) — on alimente via le handle write/writeln depuis le transport de son choix.
- [TerminalPanel](/terminal-panel.md): Le CADRE autour du Terminal : une barre en haut, la surface terminal en dessous, et les états (connexion, vide, chargement, erreur) tenus par le composant au lieu d'être réimprovisés à chaque page. La primitive allait bien — c'est l'habillage qui était dupliqué : titre, pastille d'état, bouton reconnecter, « aucun conteneur », chacun avec ses hex et ses paddings en dur. La barre est composable, pas une liste figée : titre / sous-titre / état comme défaut sobre, tout le reste en option, et une zone actions ouverte pour que la page pousse ses propres boutons. Son ref EST le TerminalHandle du terminal qu'il enveloppe, donc migrer un panneau est un remplacement d'une ligne.
- [ImagePull](/image-pull.md): Pull d'image Docker rendu comme une vraie UI : UNE barre globale dont la couleur suit l'étape — flame pendant que les octets descendent, jaune qui progresse par-dessus pendant que les couches se décompressent, vert plein à la fin. Purement présentationnel — on lui passe un instantané, il dessine ; aucune logique WebSocket ni docker à l'intérieur. Débit et ETA sont dérivés en interne à partir des instantanés successifs. Le détail par couche vit dans la liste dépliable.
- [Input](/input.md): Champ texte sur une ligne, bâti sur @base-ui/react. Gère les états focus / disabled / aria-invalid via les tokens.
- [Textarea](/textarea.md): Champ texte multi-ligne. Grandit automatiquement avec le contenu (field-sizing).
- [Label](/label.md): Étiquette de champ de formulaire. Associez-la à un contrôle via htmlFor pour l'accessibilité.
- [Switch](/switch.md): Interrupteur on/off, bâti sur @base-ui/react. Contrôlé ou non contrôlé, deux tailles.
- [Checkbox](/checkbox.md): Case à cocher bâtie sur @base-ui/react, stylée en cohérence avec le Switch. Contrôlée ou non, avec état indéterminé.
- [RadioGroup](/radio-group.md): Groupe de boutons radio mutuellement exclusifs, bâti sur @base-ui/react et stylé comme le Checkbox / Switch.
- [Select](/select.md): Menu déroulant (listbox) bâti sur @base-ui/react, avec items, groupes et séparateurs. Le popup est portalisé dans le conteneur d'overlay du SpuntoProvider.
- [Dialog](/dialog.md): Modale overlay + portail, bâtie sur @base-ui/react. Le portail et le backdrop sont rendus dans le conteneur d'overlay du SpuntoProvider — validation de l'archi ombrelle.
- [AlertDialog](/alert-dialog.md): Variante de confirmation du Dialog : modale par défaut et NON refermable par clic extérieur ou Échap. L'utilisateur doit choisir une action explicite (annuler / confirmer).
- [Tooltip](/tooltip.md): Bulle d'info au survol/focus, bâtie sur @base-ui/react. Le délai partagé et le groupe (une bulle voisine s'ouvre instantanément) sont montés par le Tooltip.Provider du SpuntoProvider — deuxième feature qui valide l'archi ombrelle.
- [Toast](/toast.md): Notifications impératives façon sonner, bâties sur @base-ui/react. Une fonction toast() appelable de partout — même hors d'un composant React — montée par le SpuntoProvider.
- [WorkerCard](/worker-card.md): La carte d'un worker Spunto : état, auteur, nœud, avancement du setup, branches git, ressources, bandeaux, actions. Purement présentationnelle — on lui passe un instantané et des slots, elle dessine ; aucun useQuery, aucune mutation, aucun next/link à l'intérieur. Premier composant MÉTIER du design system : il vit derrière son propre point d'entrée, @spunto/design-system/workers, pour que l'entrée principale reste des primitives sans domaine. Ses sous-briques (pastille d'état, barre de setup, ResourceBars, chips git, tags) sont exportées à l'unité — c'est la vue table qui les consomme comme ça.

## Optional

- [Tout le contenu (un seul fichier)](/llms-full.txt): toutes les pages concaténées.