@sia-ui/registry

Le catalogue des composants installables par la CLI.

import { registry, getRegistryItem } from "@sia-ui/registry";

Chaque entrée porte son nom, sa version, son status (experimental, stable, deprecated, removed), ses fichiers, ses dépendances npm et ses dépendances de registre.

Les fichiers viennent de @sia-ui/react-web et sont copiés sans transformation : il n'y a qu'une implémentation.

Ce paquet sert surtout à la CLI.

Place dans SIA UI

@sia-ui/tokens      valeurs : couleurs, espacements, mouvement, vocabulaire
@sia-ui/utils       fonctions sans dépendance
@sia-ui/api         client HTTP — indépendant de l'interface
@sia-ui/headless    comportement, avec React, sans plateforme
@sia-ui/react       primitives de runtime DOM
@sia-ui/react-web   composants DOM
@sia-ui/react-native  composants natifs, à venir

Une chose s'écrit au niveau le plus bas où elle a du sens, et une seule fois. Voir la documentation.

Contribuer

Le code source principal de SIA UI est privé pour le moment. Les retours publics passent par le dépôt BeatJo/sia-ui-site : bugs, demandes de composants, corrections de documentation et questions d'usage.

• Signaler un bug : https://github.com/BeatJo/sia-ui-site/issues
• Lire la documentation : https://beatjo.github.io/sia-ui-site/
• Voir la démonstration : https://beatjo.github.io/sia-ui-site/preview/

Les contributions directes au code des packages se font sur invitation dans le dépôt source privé.

Journal des changements

Le contenu ci-dessous reprend intégralement CHANGELOG.md pour rester visible sur npm.

Journal du registre

Les versions des entrées, pas celles des paquets. Un composant copié cesse de suivre @sia-ui/react-web : il vit dans le dépôt de qui l'a installé. C'est ce numéro-là, noté dans son sia-ui.lock.json, que sia-ui list --outdated compare.

Chaque version d'une entrée doit apparaître ici — pnpm check:changelog le vérifie, et la CI le lance. Sans quoi une entrée monterait de version sans que personne ne puisse savoir ce qui a changé dans le fichier qu'il a déjà chez lui.

0.8.0

Minor Changes

• Français et anglais livrés, temps réel, calendrier réécrit, suivi d'opérations.
  • Deux langues — FRENCH et ENGLISH (@sia-ui/headless), au format SiaLocale : la langue de formatage (language), le vocabulaire commun et un groupe typé par composant. Plus aucun texte en dur dans les composants, aria-label compris ; dates, nombres et pluriels suivent language. Une application qui a sa propre i18n remplit le même format. formatMessage et plural ({count}, clés _one / _other). ENGLISH_STATUS_MESSAGES (@sia-ui/api) à côté de FRENCH_STATUS_MESSAGES. Seul changement de forme : EventCalendarLabels.more, qui était une fonction, devient more_one / more_other avec {count}.
  • SiaProvider seul fournisseur — il prend locale et defaults, et s'imbrique pour une section. SiaConfigProvider est obsolète.
  • Temps réel — createRealtimeBinding, socketIoSource, eventSourceSource (@sia-ui/api), useRealtimeStatus, LiveIndicator.
  • EventCalendar réécrit — vues mois, semaine, jour, agenda ; variantes ; mode étroit. EventManager : créer, consulter, modifier, supprimer.
  • Nouveaux composants — AccountMenu, ColorModeToggle, LogStream, JsonView, JobProgress, BrandIcon ; SunIcon, MoonIcon.
  • Formulaires — validateAsync par champ, submitProps.disabled respecté ; controlProps sur une propriété de ressource.
  • Tons lisibles en mode sombre — --sia-<ton>-foreground, calculés pour le contraste ; noms de variables CSS en kebab-case.
  • Couches en portail — menus, calendriers, boîtes et toasts, rendus hors de [data-sia-root], reprennent la police et la couleur de texte du système au lieu de celles du navigateur.
  • Drawer et Modal — la fermeture est signalée tout de suite ; un double clic à l'ouverture ne referme plus.
  • Documentation — la présentation décrit chaque brique métier (session, greffons d'API, ressources, formulaires, temps réel, langues, utilitaires) avec son scénario et un exemple.
  • Props des sous-composants — chaque composant composé expose celles de ce qu'il utilise (…Props) ; pnpm check:slot-props le vérifie.

0.7.1

Patch Changes

• select : la liste des options défile de nouveau.

  Le panneau était une grille ; la liste y gardait la hauteur de tout son contenu, débordait au lieu de défiler, et l'overlay la coupait. Au-delà d'une dizaine d'options, les dernières étaient inatteignables — y compris dans PhoneInput, la taille de page de Pagination et les filtres d'ActivityLog. L'option active suit aussi le clavier, et le défilement de la liste ne se propage plus à la page.

0.7.0

Minor Changes

• Adaptateur TanStack Router, mises à jour en PATCH, et secretChanges.
  • useDataTableQuery({ router }) — adaptateur TanStack Router livré et testé (createTanStackRouterStorage). La recette de la documentation mettait page=2 entre guillemets (page=%222%22) et la page retombait à 1 ; les nombres passent désormais comme nombres, sans perte pour les filtres.
  • Un tableau n'écrit plus que ses propres clés (mergeTableQuery dans @sia-ui/headless) : deux tableaux préfixés sur une page, ou un onglet dans l'URL, ne s'effacent plus l'un l'autre — avec l'URL du navigateur comme avec un routeur.
  • createQueryResource(service, { updateMethod: "PATCH" }) — pour une API qui n'accepte que des mises à jour partielles.
  • secretChanges(entries, storedKeys) — ce qu'il faut envoyer après une saisie dans SecretFields : { set, remove, missing }.

0.6.0

Minor Changes

• Rôles, requêtes serveur, ressources par mode, et deux blocs de console.

  • Rôles — la couche d'accès lit les rôles de la session sous la forme role:<nom> (role("admin")), avec les trois évaluateurs.
  • Tableaux servis par le serveur — useDataTableQuery accepte un storage (TanStack Router, React Router) et serverParams pour les noms attendus (limit, sort + order, ASC/DESC). toServerParams dans @sia-ui/headless.
  • TanStack Query — createQueryResource(service) : clés emboîtées, options de requête avec annulation, mutations qui invalident ce qu'elles rendent périmé. Aucune dépendance à TanStack.
  • Ressources — inForm et required par mode ("create", "edit"), value pour une colonne calculée.
  • En-têtes — PageHeader level, CrudPage headingLevel. Le repli suit la place disponible ; les actions ne s'écrasent plus.
  • Nouveaux — SecretFields (secrets en écriture seule), ActivityLog (journal filtré par le serveur), StatusBadge et toneOf, dix icônes de console.
  • Les icônes des boutons de CrudPage et DataTable passent par leftIcon : elles ne se collent plus au libellé.

• data-table — empty.icon ; props de tous ses sous-composants (searchInputProps, emptyStateProps, rowActionButtonProps…). Textes tirés de la locale (français, anglais).

0.5.0

Minor Changes

• Erreurs serveur dans les formulaires, client HTTP plus sûr, registre vérifié.

  Défauts

  • Registre drawer — context.ts et la dépendance icons manquaient : sia-ui add app-shell produisait un projet qui ne compilait pas. Un test vérifie désormais que chaque import relatif de chaque entrée est apporté par son installation.
  • sia-ui.css pose box-sizing: border-box (spécificité nulle). Sans reset côté projet, AppShell débordait de 32 px.
  • @sia-ui/api ne rejoue plus d'office que GET et HEAD (retryMethods). Une écriture n'est rejouée que si l'appel pose retry.
  • Plus aucun avertissement react-hooks/exhaustive-deps dans les composants.

  Formulaires et erreurs serveur

  • Form intercepte un envoi rejeté : erreurs de champ sous les champs, le reste dans une alerte. onSubmit peut aussi rendre { champ: message } (FormSubmitResult), dans useLocalForm, Form, CrudPage et l'adaptateur react-hook-form. CrudPage garde alors sa boîte ouverte.
  • Les erreurs posées par setErrors survivent à la validation locale jusqu'à la modification de leur champ.
  • HttpError.toFormErrors(), option fieldErrors du client et préréglage nestFieldErrors (class-validator). readSubmitError et hasFormErrors dans @sia-ui/headless.
  • La pagination à plat { data, total, page, limit } est reconnue, et get ne déballe plus data quand l'objet porte une pagination.

  Tableaux

  • searchDelay sur DataTable et CrudPage.
  • CrudPage place les extraRowActions avant « Supprimer ».

• Pagination, téléphone et recherche du Select.

  • Pagination propose le nombre de lignes par page : pageSize, onPageSizeChange, pageSizeOptions, pageSizeLabel, et renderPageSize pour remplacer le contrôle. CrudPage transmet les trois premières. Nouvelle clé de libellé perPage (« Par page »).
  • La page courante de Pagination n'est plus blanche sur blanc au survol.
  • PhoneInput choisit l'indicatif dans le Select du système, avec recherche, à la place du <select> natif.
  • Select : variant="embedded" et renderValue ; recherche insensible aux accents ; Entrée choisit le premier résultat après un filtrage.

• data-table — useDataTableQuery({ router }) : un adaptateur TanStack Router livré (createTanStackRouterStorage). La recette de la doc mettait page=2 entre guillemets (page=%222%22), et la page retombait à 1 : les nombres passent désormais comme nombres. Un tableau n'écrit plus que ses propres clés — deux tableaux préfixés sur une page, ou un onglet dans l'URL, ne s'effacent plus l'un l'autre, avec l'URL comme avec le routeur.

• crud-page — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• secret-fields — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

0.4.0

Minor Changes

• Aligne tous les packages publics SIA UI sur la version 0.4.0 afin de fournir un ensemble cohérent à installer, documenter et maintenir.

• crud-page — headingLevel pour une liste posée dans une fiche ; champs et validation par mode (inForm, required de la ressource) ; l'icône du bouton de création passe par leftIcon et ne se colle plus au libellé ; plus de double marge entre l'en-tête et la recherche.

• data-table — useDataTableQuery accepte un storage (TanStack Router, React Router) et serverParams (limit, sort + order…) ; l'icône d'une action de ligne passe par leftIcon.

• secret-fields — secretChanges(entries, storedKeys) rend ce qu'il faut envoyer : set (créations et rotations), remove (noms retirés, renommages compris) et missing (noms nouveaux restés sans valeur).

• activity-log — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• badge — tons pleins lisibles en mode sombre (--sia-<ton>-foreground).

• form — validateAsync par champ (vérification serveur annulée à la frappe, « Vérification… », envoi bloqué), submitProps.disabled respecté ; fieldProps, alertProps, spinnerProps.

• icons — SunIcon, MoonIcon.

• pagination — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• phone-input — expose les props de ses sous-composants (…Props), transmises telles quelles.

• resource — controlProps sur une propriété, transmis au contrôle de saisie. Textes tirés de la locale (français, anglais).

• select — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

0.3.2

Patch Changes

• Ajoute l’identité visuelle officielle de SIA UI et améliore la documentation publique, les changelogs et les ressources de contribution.

0.3.1

Patch Changes

• Expose public contribution flow on npm

• select — la liste ne défilait pas : dans le panneau en grille, elle gardait la hauteur de tout son contenu et débordait au lieu de défiler, coupée par l'overlay. Au-delà d'une dizaine d'options, les dernières étaient inatteignables — indicatif de phone-input, filtres d'activity-log, champs select. L'option active suit aussi désormais le clavier (scrollIntoView), et le défilement ne se propage plus à la page.

0.3.0

Minor Changes

• Une ressource se déclare une fois, cinq composants refondus, et une documentation qui décrit le produit plutôt que son développement.

  Déclarer une ressource

  defineResource décrit un objet métier une seule fois. Les colonnes du tableau, les champs du formulaire, les lignes de la vue de détail, la validation, les clés de recherche et les quatre règles de droits en sont dérivés — et chaque dérivation reste remplaçable par la prop correspondante.

  <CrudPage resource={FACTURE} data={factures} can={can}
            onSubmit={…} onDelete={…} />

  Le rendu se déduit du type : un currency s'affiche formaté et aligné à droite, un select avec ses tones devient une pastille, une date passe par le format local. permissions: "auto" applique la convention <nom>.<verbe>.

  Les quatre opérations ouvrent leurs propres boîtes

  CrudPage n'appelle plus seulement un gestionnaire : déclarer fields et onSubmit suffit à obtenir un formulaire vide en création, le même prérempli en modification, et une vue de détail. onCreate, onEdit et onView restent la porte de sortie vers une page dédiée — fournis, ils passent devant la boîte.

  Les boîtes n'inventent rien : Modal pour la boîte, Form pour la saisie, Descriptions pour la lecture.

  Cinq composants refondus

  • Sidebar — le rail réduit n'enferme plus ses sous-menus : ils sortent en volet. Profondeur illimitée, droits en cascade, trois variantes.
  • AppShell — se branche sur n'importe quel routeur par une seule chaîne, l'adresse courante. Trois états de barre, tiroir ou onglets bas sur mobile, filtrage des droits fait une seule fois.
  • Avatar — teinte dérivée du nom, repli peint sous l'image, quatre états de présence, et des piles qui résument leur surplus.
  • DataTable — actions de ligne avec droits et confirmation, sélection et barre groupée, vue en cartes, trois densités, états de chargement, d'erreur et de vide.
  • CrudPage — réécrit : il tenait en neuf lignes et n'offrait aucune des quatre opérations qui lui donnent son nom.

  Ruptures

  • CrudPage : actions portait des nœuds d'en-tête, ils vont dans headerActions. data est requis, et columns l'est aussi à moins qu'une resource ne les fournisse.
  • Sidebar et AppShell : les props ont changé. Voir La navigation latérale et La coquille d'application.

  Documentation

  Les cent trois composants ont désormais une page de référence — ce qu'ils font, comment les installer, et toutes leurs props avec type et valeur par défaut. Ces pages sont écrites par le code : les props viennent des types, les descriptions de leurs commentaires, la commande d'installation du registre.

  Le catalogue est passé de seize sections en deux langues à neuf, ordonnées du plus général au plus assemblé. Les comptes rendus de développement ont été retirés de la documentation : ils décrivaient un chemin parcouru, pas un produit.

• form — un envoi rejeté ne disparaît plus en promesse non gérée. Une erreur qui porte des erreurs de champ (HttpError de @sia-ui/api, ou toute erreur exposant toFormErrors() ou fields) les pose sous les champs ; le reste s'affiche dans une alerte au-dessus des boutons. onSubmit peut aussi rendre { champ: message }. Dépend désormais de l'entrée alert. Demande @sia-ui/headless ≥ 0.5.0.

• form-adapter-rhf — onSubmit peut rendre des erreurs par champ, comme avec useLocalForm.

• crud-page — un onSubmit qui rend des erreurs ou qui lève garde la boîte ouverte, erreurs affichées. Nouvelle prop searchDelay. Les extraRowActions se placent avant « Supprimer », qui reste la dernière action.

• data-table — nouvelle prop searchDelay : onSearch n'est appelé qu'après l'arrêt de la frappe (Entrée et l'effacement restent immédiats). Les props pageSize, onPageSizeChange et pageSizeOptions de crud-page alimentent le choix de taille de pagination.

• select — variant="embedded" pour se loger dans un autre contrôle, et renderValue pour choisir ce qu'affiche le déclencheur. La recherche ignore les accents (« sen » trouve « Sénégal »), et Entrée choisit le premier résultat quand la valeur en vigueur a été filtrée.

• pagination — choix du nombre de lignes par page (pageSize, onPageSizeChange, pageSizeOptions, pageSizeLabel, renderPageSize), sur select. La page courante restait blanche sur blanc au survol : corrigé. Les styles ne visent plus tout button de la barre, seulement ses boutons de page. Dépend désormais de select.

• phone-input — l'indicatif se choisit dans le Select du système, avec recherche par nom, indicatif ou code ISO, à la place du <select> natif. Dépend désormais de select.

• activity-log — nouvelle entrée. Un journal d'activité filtré par le serveur : filtres déclarés (Select effaçables), recherche temporisée, pagination et taille de page, le tout porté par useDataTableQuery. Colonnes par défaut pour une ActivityEntry (date, acteur, action en pastille, cible).

• secret-fields — nouvelle entrée. Des secrets en écriture seule : les noms enregistrés s'affichent, leurs valeurs jamais ; noms proposés d'un clic, doublons et format signalés, autocomplete="new-password", clearSecretValues pour vider après l'envoi.

• badge — StatusBadge et toneOf : une table valeur → ton (et libellé) déclarée une fois par domaine.

• icons — dix icônes de console : Home, Folder, Server, User, Users, Activity, Key, Lock, LogOut, Pencil.

• page-header — level (1, 2 ou 3) pour un en-tête de section. Le repli suit la place disponible et non plus la largeur de l'écran : les actions passent sous le titre d'un bloc, sans jamais s'écraser ni couper leur libellé sur deux lignes.

• resource — inForm et required acceptent "create" ou "edit" ; value déclare une colonne calculée sans élargir le type de la ligne.

• app-shell — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• sidebar — expose les props de ses sous-composants (…Props), transmises telles quelles.

• avatar — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

0.2.0

Minor Changes

• e4e4a72: Annonces, session et droits, formulaires sans dépendance, et vingt entrées de registre de plus.

  Composants

  • Annonces — toast() s'appelle hors de React, variante loading, boutons d'action, six coins réglables par annonce, balayage pour écarter, suivi de promesse.
  • Session et droits — createSessionStore avec sa machine à quatre états, createAccessLayer à évaluateur injecté, RequireSession sans routeur.
  • Formulaires — le contrat FormAdapter et useLocalForm, sans dépendance. Form est écrit sur le contrat : il n'importe ni react-hook-form ni zod, et se câble à l'un ou l'autre par un adaptateur.
  • Vingt entrées de registre de plus — progress, dropdown-menu, accordion, sidebar, breadcrumb, steps, toggle, scroll-area, hover-card, aspect-ratio, input-number, password-input, phone-input, chart, require-session, form…
  • Thème — mode system, persistance et script anti-clignotement dans SiaProvider, en remplacement de next-themes.

  @sia-ui/api

  Le client HTTP typé est un paquet à part : ni React, ni DOM, ni tokens. Il s'installe seul, et copier un Badge depuis le registre ne l'entraîne pas.

  Utilitaires

  @sia-ui/utils passe de six à quatorze modules : query, async, collection, object, validation, file, clipboard, locale.

  Archives

  • Plus de sourcemaps : elles pesaient environ soixante pour cent de chaque archive — @sia-ui/react-web passe de 2,1 Mo à 759 Ko.
  • Chaque paquet porte enfin la licence MIT qu'il annonce.

  Vitrine en ligne

  Trois surfaces publiées sur GitHub Pages à chaque poussée sur main : la documentation à la racine, le catalogue Storybook sous /storybook/, la démonstration sous /preview/. Le site de documentation est construit depuis les fichiers de docs/ eux-mêmes, qui restent du Markdown ordinaire.

  Le registre n'est plus une voie sans retour

  Installer était jusqu'ici définitif : plus rien ne disait ce qu'on avait, ce qu'on avait retouché, ni ce qui avait bougé en amont — donc rien ne permettait de corriger ni de déprécier une entrée après coup.

  • sia-ui.lock.json, écrit à chaque add : version, date et empreinte de chaque fichier copié.
  • Quatre commandes : diff, remove, doctor, list --outdated. remove refuse de casser un voisin ou d'effacer un fichier retouché.
  • Cycle de vie des entrées — experimental, stable, deprecated, removed — avec replacedBy. add refuse ce qui est retiré, doctor signale ce qui est déprécié chez qui l'a déjà installé.
  • Journal du registre, entrée par entrée, dont pnpm check:changelog refuse qu'il mente.
  • Registre servi en HTTP, versionné par l'URL : …/r/v1/. Corriger une entrée n'oblige plus à republier la CLI.

  Corrections

  • La case à cocher et le bouton radio masquaient leur contrôle natif en opacity:0. Le navigateur le peignait encore sous le visuel personnalisé, et ce dessin clignotait au clic. Les deux utilisent désormais la recette partagée .sia-visually-hidden, qui le découpe hors du rendu sans le retirer du clavier.
  • Une case à cocher non contrôlée ne se peignait jamais cochée : l'<input> basculait, mais la classe qui dessine la case ne suivait pas.
  • Le curseur de survol des graphes était ovale, et le tracé de la courbe haché : les marqueurs sont sortis du SVG, qui est étiré sans conserver ses proportions.
  • L'entrée drawer du registre était impossible à installer — elle importait deux dossiers que la CLI ne copie pas.

Patch Changes

• Include component styles when installing registry components

0.2.0

• resource — nouvelle entrée. Une page de liste décrivait le même objet trois fois : en colonnes pour le tableau, en champs pour le formulaire, en lignes pour le détail. Plus la validation, les clés de recherche et la règle de droits par opération. Ces descriptions divergent, et toujours dans le même sens — c'est le formulaire qui oublie le champ que le tableau affiche.

  defineResource la décrit une seule fois. Colonnes, champs, détail, validation, recherche, clé de ligne et droits en sont dérivés. Le rendu se déduit du type : un currency s'affiche formaté et aligné à droite, un select avec ses tones devient une pastille, une date passe par le format local.

  Trois surfaces, trois défauts : inTable écarte ce qui est trop long pour une cellule, inForm écarte ce que readOnly marque, inDetail garde tout. Le détail n'est donc pas le tableau — une note de trois phrases sort des colonnes et reste dans la boîte de consultation.

  permissions: "auto" applique la convention <nom>.<verbe>. Chaque dérivation cède à la prop correspondante : passer columns ne coûte ni le formulaire, ni les droits.

• crud-page — réécrit. Il tenait en neuf lignes : un titre, un emplacement libre et une pagination. Les quatre opérations d'une page de liste étaient à réécrire à chaque écran, ce qui produit quatre variantes qui divergent — celle qui oublie la confirmation, celle qui ne vérifie pas les droits, celle dont le bouton reste actif pendant l'appel.

  Créer, consulter, modifier, supprimer fonctionnent d'emblée : fournir le gestionnaire suffit, ne pas le fournir retire l'action. La suppression est confirmée d'office — on peut lever la confirmation, encore faut-il l'avoir écrit.

  operations personnalise chaque action : libellé, icône, droits, visibilité ligne par ligne, confirmation. extraRowActions en ajoute d'autres, onBulkDelete active la sélection et sa barre.

  Sans gestionnaire, les actions ouvrent leurs propres boîtes : déclarer fields et onSubmit suffit à obtenir un formulaire vide en création, le même prérempli en modification, et une vue de détail dérivée des colonnes. onCreate, onEdit et onView restent la porte de sortie vers une page dédiée : fournis, ils passent devant la boîte. resource va plus loin et dérive tout d'une seule déclaration.

  Migration, rupture : actions portait des nœuds d'en-tête; ils vont dans headerActions. Le nom actions désignerait sinon deux choses différentes selon la version, ce qui est le pire cas — le code compile et se comporte autrement. data est désormais requis, et columns l'est aussi à moins qu'une resource ne les fournisse; le tableau reste remplaçable par children.

• data-table — refonte. Il affichait des colonnes et un tri délégué. S'ajoutent les actions de ligne — avec droits, confirmation, et passage en menu au-delà de la limite —, la sélection et sa barre d'actions groupées, une vue en cartes qui bascule d'elle-même sous 768 px, la recherche locale, trois densités, les états de chargement, d'erreur et de vide.

  Les actions de ligne s'estompent hors survol : une colonne pleine de boutons attire l'œil plus que les données. Elles restent entières au clavier et sur tactile, où il n'y a pas de survol.

  Migration, rupture : align passe de left/right à start/end, et getRowKey devient facultatif. useDataTableQuery et createUrlTableStorage sont inchangés.

• app-shell — réécrit. Il tenait en six lignes : une grille à deux colonnes, un bouton de repli écrit ☰, et des emplacements libres. Il ne réutilisait ni la navigation, ni le tiroir, ni rien.

  Il assemble maintenant le Sidebar et le Drawer, filtre les droits une seule fois pour la barre comme pour les onglets, et se branche sur n'importe quel routeur par une seule chaîne :

  <AppShell nav={NAV} currentPath={usePathname()} renderLink={…} />

  De là il déduit l'entrée courante par le préfixe le plus long — une page /factures/12/lignes marque bien Factures — et referme le tiroir mobile à chaque navigation, sans jamais importer de routeur.

  S'ajoutent trois états de barre (expanded, collapsed, hidden), trois stratégies mobiles (drawer, tabs, both), contentWidth, side, les largeurs personnalisables, et BottomTabs — qui ne montre que des feuilles, un onglet ouvrant un sous-menu étant un piège tactile.

  Migration, rupture : logo devient brand, navigation devient nav et prend des données plutôt que des nœuds. header est inchangé. Le titre de page n'est pas une prop : le poser dans page, avec PageHeader — une coquille qui rend le <h1> force chaque écran à passer par ses props.

  L'entrée annonçait deux fichiers et une dépendance; elle en annonce maintenant trois et cinq. Copiée telle quelle, elle serait arrivée cassée.

• avatar — refonte. Il servait une image, trois tailles et des initiales. S'ajoutent : une teinte dérivée du nom, stable d'un écran à l'autre, pour distinguer deux personnes aux mêmes initiales; trois formes et trois variantes (soft, solid, outline); cinq tailles; une pastille de présence à quatre états; et AvatarGroup, qui empile et résume son surplus.

  Le repli est désormais peint sous l'image plutôt qu'à sa place : la mise en page ne bouge plus entre l'attente, la réussite et l'échec.

  Les initiales prennent la première et la dernière partie du nom, particules écartées : « Jean-Baptiste Kouassi Mbella » donne « JM », « Marie de la Tour » donne « MT ».

  Migration : aucune prop retirée. fallback accepte maintenant un nœud React et non plus seulement une chaîne.

• sidebar — refonte. Trois défauts corrigés :

  Réduite, la barre enfermait ses sous-entrées. Une règle forçait le panneau des enfants à une hauteur nulle quel que soit son état : une rubrique à sous-menus devenait inatteignable dès qu'on repliait la barre. Les sous-menus sortent maintenant en volet, au survol ou au clavier.

  L'arbre s'arrêtait à deux niveaux, interdits par le type lui-même (items?: Array<Omit<SidebarItem, "items">>). Il descend désormais aussi profond que l'arborescence du produit.

  Aucun filtrage par droits. permission sur une entrée, can sur le composant, et une cascade : un parent dont toute la descendance est filtrée disparaît avec elle, sauf keepWhenEmpty.

  S'ajoutent renderLink pour brancher un routeur sans en dépendre, openKeys pour piloter les branches ouvertes, accordion, side, et les variantes default / filled / floating en trois tailles.

  Migration : aucune prop retirée. registryDependencies gagne overlay — sia-ui add sidebar --overwrite l'installe.

• async-state — libellés tirés de la locale (ils étaient en anglais), vrai Spinner ; alertProps, retryButtonProps, emptyStateProps, spinnerProps.

• breadcrumb — expose les props de ses sous-composants (…Props), transmises telles quelles.

• button — tons pleins lisibles en mode sombre (--sia-<ton>-foreground).

• card — expose les props de ses sous-composants (…Props), transmises telles quelles.

• confirm-dialog — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• date-picker — expose les props de ses sous-composants (…Props), transmises telles quelles.

• date-range-filter — expose les props de ses sous-composants (…Props), transmises telles quelles.

• date-range-picker — expose les props de ses sous-composants (…Props), transmises telles quelles.

• drawer — une réouverture contrôlée rejouait l'animation de sortie et laissait son voile ; la fermeture est signalée au parent sans attendre l'animation ; un clic extérieur juste après l'ouverture (double clic) est ignoré.

• dropdown-menu — entrée { type: "header", content } à contenu libre ; overlayProps.

• error-state — icône lisible en mode sombre ; retryButtonProps.

• event-calendar — réécrit. Quatre vues (mois, semaine, jour, agenda), grille horaire avec chevauchements côte à côte et ligne de l'heure, rubans sur plusieurs jours, « +N autres », variantes bordered/minimal/soft, eventVariant, density, mode étroit en points de couleur avec la liste du jour, onRangeChange pour charger la période. Assemblé avec Button, RadioGroup, Popover, EmptyState, Spinner. L'ancien format (date, defaultValue) reste lu. Textes tirés de la locale (français, anglais) ; labels.more, qui était une fonction, devient more_one / more_other avec {count}.

• field — controlProps typé par les props de tous ses contrôles (FieldControlOverrides).

• filters-bar — filtres en ligne à la largeur filterWidth, au lieu de s'empiler. Textes tirés de la locale (français, anglais).

• hover-card — expose les props de ses sous-composants (…Props), transmises telles quelles.

• image-upload — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• json-editor — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• markdown-editor — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• modal — un appui sur le voile juste après l'ouverture (double clic, rebond) ne referme plus la boîte.

• popover — expose les props de ses sous-composants (…Props), transmises telles quelles.

• radio-group — des RadioButton sont accolés en un seul contrôle segmenté : l'écart entre radios les séparait.

• reference-select — expose les props de ses sous-composants (…Props), transmises telles quelles.

• require-session — expose les props de ses sous-composants (…Props), transmises telles quelles.

• slider — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• stat-card — expose les props de ses sous-composants (…Props), transmises telles quelles.

• steps — étapes terminée et en erreur lisibles en mode sombre (--sia-<ton>-foreground).

• time-picker — expose les props de ses sous-composants (…Props), transmises telles quelles. Textes tirés de la locale (français, anglais).

• toast — expose les props de ses sous-composants (…Props), transmises telles quelles.

• tree-select — expose les props de ses sous-composants (…Props), transmises telles quelles.

• amount-display — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• audit-meta — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• calendar — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• command-palette — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• currency-input — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• date-time-picker — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• duration-display — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• entity-meta — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• file-upload — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• input — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• multi-select — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• otp-input — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• password-input — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• qr-code — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• rating — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• relative-time — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• rich-text-editor — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• search-input — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• spinner — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• statistic — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• tags-input — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• tour — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• transfer — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• tree — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

• unsaved-changes-guard — Textes tirés de la locale (FRENCH, ENGLISH ou celle de l'application) ; dates et nombres dans sa langue (language).

0.1.1

• button — l'entrée n'annonçait que son index.tsx. Installé, le bouton arrivait donc sans sa feuille de style. components/Button/styles.css rejoint ses fichiers.
• drawer — l'entrée importait ./context sans l'annoncer, et ../Icons sans dépendre de icons : sia-ui add drawer (et donc add app-shell) produisait un projet qui ne compilait pas. Les deux sont ajoutés, et un test vérifie désormais chaque import relatif de chaque entrée.
• calendar — dépendances de hook complètes ; plus d'avertissement react-hooks/exhaustive-deps chez qui active le plugin.
• timer — idem ; la valeur de reprise et les rappels sont lus sans relancer l'intervalle.

0.1.0

Première version des 104 entrées du registre.

Primitives (19)

• aspect-ratio — Box locked to a width / height ratio.
• avatar — Image avatar with automatic initials fallback.
• badge — Compact semantic status label with side content and loading state.
• button — Accessible button with loading and icon states.
• card — Composable card with header, body and footer regions.
• checkbox — Checkbox and CheckboxGroup with indeterminate, button and tone variants.
• container — Responsive page container and stack primitives.
• divider — Horizontal or vertical semantic separator.
• form-adapter-rhf — react-hook-form adapter for the FormAdapter contract. Requires react-hook-form.
• icon-button — Accessible icon-only action with required label.
• icons — Jeu d'icônes SVG sans dépendance, servi par le package.
• input — Accessible text input with side content and loading state.
• overlay — Positioned portal foundation with viewport collision handling and dismissal.
• radio-group — Controlled radio group with standard and RadioButton controls.
• skeleton — Token-based loading placeholder for content layouts.
• spinner — Accessible loading indicator with sizes and screen-reader label.
• switch — Controlled or uncontrolled accessible boolean switch.
• textarea — Accessible multiline input with invalid and resize states.
• typography — Headings, body text and inline code with semantic sizing and tones.

Composants (65)

• accordion — Collapsible sections with animated height.
• alert — Semantic feedback alert with tones, action and dismissal.
• amount-display — Consistent semantic amount display for finance interfaces.
• autocomplete — Combobox with local filtering and optional custom values.
• breadcrumb — Navigation trail that folds middle levels into a menu.
• calendar — Localized month and year calendar with range selection and custom cells.
• chart — Dependency-free line, area and bar charts.
• color-picker — Native color selection with visible serialized value.
• countdown — Countdown specialization of Timer.
• currency-input — Locale-aware currency input exposing a numeric value.
• data-table — Generic typed table with loading and empty states.
• date-picker — Calendar-based date picker with overlay, tones, limits and custom cells.
• date-range-picker — Unified calendar range selection with serializable boundaries.
• date-time-picker — Composable date and time selection with serializable values.
• descriptions — Responsive labeled value grid for entity details.
• drawer — Accessible side panel with focus management and portal rendering.
• dropdown-menu — Dropdown and context menus with keyboard navigation.
• duration-display — Localized duration display in text or clock format.
• event-calendar — Calendar with per-day business events.
• field — Typed form field factory reusing the SIA UI control catalog.
• file-upload — Accessible file picker with drag and drop.
• form-field — Deprecated compatibility alias for Field.
• hover-card — Rich preview on hover, with open and close delays.
• image-upload — Image file upload with local preview and removal.
• input-number — Numeric input with stepper, bounds and decimal handling.
• json-editor — JSON textarea with validation and formatting.
• label — Libellé de champ, avec marque d'obligation.
• markdown-editor — Markdown writing and pluggable preview surface.
• mini-calendar — Compact calendar built on the shared calendar foundation.
• modal — Accessible modal dialog with portal, Escape and backdrop handling.
• month-picker — Native serializable month selection.
• multi-select — Searchable multiple selection with removable values.
• otp-input — Keyboard and paste friendly one-time code input.
• pagination — Accessible controlled pagination with compact page ranges.
• password-input — Password field with reveal toggle and strength meter.
• phone-input — International phone input with dial code and grouping.
• popover — Click or hover popover composed from the shared positioned Overlay.
• progress — Determinate and indeterminate progress, bar or circle.
• qr-code — Accessible QR code frame with pluggable encoder renderer.
• rating — Accessible controlled or uncontrolled rating control.
• reference-select — Entity reference selection built on Autocomplete.
• relative-time — Auto-refreshing semantic relative date display.
• resizable-panel — Keyboard and pointer resizable split panels.
• rich-text-editor — Lightweight rich text input with basic formatting commands.
• scroll-area — Scrollable region with thin scrollbars and edge fades.
• search-input — Controlled or uncontrolled search field with submit and clear actions.
• select — Accessible searchable select with positioned overlay and async option loading.
• slider — Accessible single or interval slider with formatted values.
• statistic — Locale-aware number, currency and percentage display with trend.
• steps — Step progression, horizontal or vertical, with status.
• tabs — Accessible controlled or uncontrolled tabs with keyboard navigation.
• tags-input — Create and remove string tags from a text input.
• time-picker — Timer-based time selection panel with steps, confirmation and tones.
• time-range-picker — Serializable start and end time selection.
• timeline — Chronological events with semantic tones.
• timer — Reliable count-up or count-down timer based on absolute time.
• toast — Toast queue with placement, pause on hover and promise tracking.
• toggle — Two-state button and toggle group.
• tooltip — Accessible contextual tooltip for hover and focus targets.
• tour — Guided multi-step product tour overlay.
• transfer — Move items between available and selected lists.
• tree — Accessible expandable hierarchical data view.
• tree-select — Hierarchical value selection built on Tree.
• week-picker — Native ISO week selection.
• year-picker — Bounded year selection.

Patterns applicatifs (20)

• app-shell — Responsive application shell with collapsible navigation.

• async-state — Loading, empty and error states for remotely loaded content.

• audit-meta — Chronological audit history for admin and finance entities.

• auth-layout — Reusable authentication page composition.

• command-palette — Keyboard command search and execution dialog.

• confirm-dialog — Confirmation dialog composed from Modal and Button.

• crud-page — CRUD page composition with header, async states and pagination.

• date-range-filter — Date range filter with reusable presets and clear action.

• empty-state — Reusable empty state with icon, description and action.

• entity-meta — Compact audit and entity metadata block for admin and finance screens.

• error-state — Reusable error state with message extraction and retry action.

• filters-bar — Composable search, filter, reset and action toolbar.

• form — Declarative form driven by a field list, wired to any FormAdapter.

• kpi-grid — Responsive grid for KPI and statistic cards.

• page-header — Consistent page title, description and action area.

• permission-gate — Render content according to application permissions.

• require-session — Route guard on a session store, with a permission rule and no router dependency.

• sidebar — Collapsible application navigation with groups and sub-items.

• stat-card — Business metric card composed from Card and Statistic.

• unsaved-changes-guard — Protect browser and in-app navigation with unsaved changes.

• account-menu — nouvelle entrée. Avatar déclencheur, en-tête de profil (nom, adresse, rôle). Textes tirés de la locale (français, anglais).

• brand-icon — nouvelle entrée. Icône de marque à partir d'un objet simple-icons fourni par le projet ; contraste géré en mode sombre.

• color-mode-toggle — nouvelle entrée. Bascule clair / sombre branchée sur SiaProvider. Textes tirés de la locale (français, anglais).

• event-manager — nouvelle entrée. Création, fiche, modification et suppression d'événements sur event-calendar. Textes tirés de la locale (français, anglais).

• job-progress — nouvelle entrée. Suivi d'une opération : statut, étapes, progression, essais, erreur, relance. Textes tirés de la locale (français, anglais).

• json-view — nouvelle entrée. JSON en lecture seule, repliable, copiable. Textes tirés de la locale (français, anglais).

• live-indicator — nouvelle entrée. État d'une connexion temps réel. Textes tirés de la locale (français, anglais).

• log-stream — nouvelle entrée. Journal d'exécution : niveaux, heure, groupes par essai, filtres, recherche, copie, suivi de la fin. Textes tirés de la locale (français, anglais).

Licence

MIT