npm - @abyss-project/commons-front-core - Versions diffs - 10.1.0 → 11.0.0 - Mend

@abyss-project/commons-front-core 10.1.0 → 11.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/README.md CHANGED Viewed

@@ -1,334 +1,319 @@
-# Abyss Commons Front Core
-`@abyss-project/commons-front-core`
-Composants React, hooks, design system et traductions partagés par les frontends Abyss.
-_Shared React components, hooks, design system and translations for Abyss frontends._
-## Installation
-```bash
-npm install @abyss-project/commons-front-core
-# or
-pnpm add @abyss-project/commons-front-core
-```
-## Liens
-- **Documentation** : [https://docs.abyss-project.fr/abyss-project](https://docs.abyss-project.fr/abyss-project)
-- **NPM** : [@abyss-project/commons-front-core](https://www.npmjs.com/package/@abyss-project/commons-front-core)
-- **Application Abyss** : [app.abyss-project.fr](https://app.abyss-project.fr)
-- **Statut des services** : [status.abyss-project.fr](https://status.abyss-project.fr)
-## Usage
-Voir la [documentation produit](https://docs.abyss-project.fr/abyss-project) pour les guides d'utilisation, la configuration du Core, les exemples d'appel et la référence des permissions.
-## RUM
-Le RUM navigateur d'un front (SDK `@abyss-project/monitor-browser`, peer `^1.3.2` ; `setContact` et `setTheme` demandent la version publiée par #285 F) se démarre par `AbyssRumProvider`, monté **sous** `AbyssCookieConsentProvider`, sous le `ThemeProvider` MUI et, quand le front en a un, sous `AuthProvider` :
-```tsx
-<AbyssErrorBoundary appName="abyss-cloud">
-  <AuthProvider client={authClient}>
-    <AbyssCookieConsentProvider consentVersion={COOKIE_CONSENT_VERSION} isAuthenticated={isAuthenticated}>
-      <AbyssRumProvider config={buildRumOptions()}>
-        <App />
-      </AbyssRumProvider>
-    </AbyssCookieConsentProvider>
-  </AuthProvider>
-</AbyssErrorBoundary>
-```
-- **`config` est requise** (raison de la majeure 8.0.0 : aucun front ne peut oublier son RUM). `config={null}` désactive le RUM explicitement : rien n'est installé. Elle reçoit les options de `AbyssRum.init` (`apiUrl`, `proxyUrl`, `applicationId`, `token`, `release`, `instrumentedOrigins`, `routeResolver`…), sauf `consent`, que le provider fournit.
-- **Une seule initialisation.** `AbyssRum.init` est appelé au premier commit avec une `config` non nulle, une fois, StrictMode compris. Une `config` qui change ensuite est **ignorée** : le SDK vit autant que la page.
-- **Consentement.** Le replay exige la catégorie analytics de `AbyssCookieConsentProvider`, relue à chaque décision du SDK : un consentement donné ou retiré après le démarrage est suivi. Sans provider de consentement, analytics vaut refusé.
-- **Acteur.** Sous `AuthProvider`, l'acteur de la session est l'id de l'utilisateur connecté, `null` à la déconnexion, inchangé pendant le chargement de la session. Sans `AuthProvider`, aucun acteur.
-- **`feedbackTicket`** (`intakeSlug`, `internalTicketSectionId`, `appName`, `sessionUrl(sessionId, offsetMs)`, `locale?()`) : chaque retour utilisateur enregistré par Monitor devient un ticket Internal Tickets, par l'intake public d'abyss-console (`fileInternalTicketIntake`, peer `@abyss-project/console` `^12.4.0`, configuré par `AbyssConsoleCore.setConfig` du front). Titre `[<appName>] Retour utilisateur` ; description : le message, l'e-mail, la route et le lien vers la session. Le déclarant est l'e-mail saisi, sinon celui de l'utilisateur connecté ; un retour anonyme sans e-mail ne crée aucun ticket et reste dans Monitor. Un échec de création est journalisé (`console.warn`) et avalé. `locale()` est relue à chaque retour : sa sous-étiquette primaire (`en-GB` → `en`) part comme `locale` de l'intake, la langue des courriels de suivi ; une langue que l'intake ne parle pas (hors `UserLanguage`) n'est pas envoyée.
-- **`onFeedbackSent`** : rappel du front, appelé pour chaque retour enregistré, après le ticket (créé, sauté ou en échec).
-- **Contact (#285 F §7).** Sous `AuthProvider`, `AbyssRum.setContact({ email, name })` reçoit l'e-mail et l'alias de l'utilisateur connecté, `null` à la déconnexion, rien pendant le chargement de la session. Le SDK le garde en mémoire, jamais dans la télémétrie : il pré-remplit « Réponse à … » du signalement et ne part qu'avec un retour. Avec `config={null}`, aucun contact n'est donné.
-- **Thème (#285 F §6.4).** Monté sous le `ThemeProvider` MUI du front, le provider passe à `AbyssRum.setTheme` l'accent (`palette.primary.main`), le rayon (`shape.borderRadius`, borné à 0–48 px) et le mode (`palette.mode`) ; un changement de mode est suivi. Les variables CSS `--abyss-monitor-accent` et `--abyss-monitor-radius` de la page, et l'apparence enregistrée sur une demande de retour, priment.
-- **« Signaler un problème » (#285 F §7).** Avec une `config` non nulle, le provider offre le signalement du SDK aux menus de compte du core placés dessous : `AccountMenu` (après les entrées de l'hôte) et le `AbyssLayoutMenu` legacy (après Facturation) montrent l'entrée « Signaler un problème » / « Report a problem », qui ferme le menu et appelle `AbyssRum.showReportDialog({ locale })` dans la langue du front (`en*` → `RumReportLocale.EN`, sinon `RumReportLocale.FR`). Sans provider ou avec `config={null}`, l'entrée n'existe pas. Elle n'apparaît que tant que `AbyssRum.isReportAvailable()` est vrai — SDK démarré, configuration de l'environnement reçue avec les retours activés (réglage « Retours utilisateurs » dans Monitor) — et le provider la réévalue à chaque `AbyssRum.onConfigChange` : absente avant la réponse de configuration et quand les retours sont coupés.
-- **Actions clés (#285 F).** `trackKeyAction(AbyssKeyActionEvent.X)` enregistre, au point de succès d'une action du front, une action RUM nommée d'après l'événement du catalogue (`board.card.completed`) : une demande de retour déclenchée par une action s'y règle. Sans RUM démarré, l'appel ne fait rien et ne lève jamais.
-- **Erreurs de rendu.** `AbyssErrorBoundary` envoie l'erreur qu'il attrape à `AbyssRum.captureError(error, { source: 'error-boundary' })` ; sans RUM démarré, l'appel ne fait rien.
-### Construire les options : `buildAbyssRumProviderConfig`
-Les fronts Abyss ne recopient pas leurs options : ils passent leurs valeurs de config brutes (chaîne vide = absente) au constructeur partagé, qui rend `AbyssRumProviderConfig | null`.
-```ts
-import { buildAbyssRumProviderConfig } from '@abyss-project/commons-front-core';
-export const buildRumOptions = () =>
-  buildAbyssRumProviderConfig({
-    token: config.app.abyssMonitor.rumToken,
-    applicationId: config.app.abyssMonitor.applicationId,
-    monitorApiUrl: config.app.abyssMonitor.api,
-    apiUrl: config.app.abyssCloud.api, // l'API du front : relais `/_t` et origine instrumentée
-    mainApiUrl: config.app.abyss.api, // l'API d'abyss-main : origine instrumentée
-    release: config.app.abyssMonitor.release,
-    routeTemplates: CLOUD_ROUTE_TEMPLATES, // gabarits complets du routeur
-    appName: 'AbyssCloud',
-    mainFrontUrl: config.app.abyss.site, // la page de session vit dans le front d'abyss-main
-    feedbackIntakeSlug: config.app.abyssMonitor.feedbackIntakeSlug,
-    feedbackSectionId: config.app.abyssMonitor.feedbackSectionId,
-    organizationId: config.app.abyssMonitor.organizationId,
-    projectId: config.app.abyssMonitor.projectId,
-    locale: () => currentLanguage(),
-  });
-```
-- **`null`** sans jeton, application, API Monitor, API du front ou API d'abyss-main (ou si l'une des trois URL n'en est pas une) : rien n'est installé.
-- **Relais et corrélation** : `proxyUrl` = origine de `apiUrl` + `/_t` ; `instrumentedOrigins` = origines de `apiUrl` et `mainApiUrl` (une seule fois si c'est la même), plus celle de Monitor avec `instrumentMonitorApi: true` (front d'abyss-main, qui appelle Monitor lui-même).
-- **Routes** : `routeResolver` = `createRouteResolver(routeTemplates)`.
-- **Ticket de retour** posé seulement quand l'intake, sa section, l'organisation, le projet et `mainFrontUrl` sont là ; son lien est `abyssMainRumSessionPath`, à l'instant du retour en secondes entières.
-### Gabarits de route : `createRouteResolver(patterns)`
-`createRouteResolver(patterns: readonly string[]): (location: Location) => string` donne au SDK le gabarit de la route (`/org/:orgId/boards/:boardId`), que le SDK masque ensuite comme toute URL. Les gabarits sont **complets** (routes imbriquées comprises) et classés comme react-router les classe (`matchRoutes`) : un segment statique l'emporte sur un paramètre, un paramètre sur un `*`, quel que soit l'ordre de la liste. Sans correspondance : `location.pathname`.
-### Page d'une session : `abyssMainRumSessionPath`
-`ABYSS_MAIN_RUM_SESSION_ROUTE` (`/org/:orgId/project/:projectId/application/:applicationId/monitor/rum/sessions/:sessionId`) est la seule source du chemin de la page d'une session dans le front d'abyss-main, qui le monte. `abyssMainRumSessionPath({ orgId, projectId, applicationId }, sessionId, t?)` le remplit (id de session encodé) et ajoute `?t=` en secondes entières, jamais négatif.
-## Changements visibles
-### 10.1.0
-Zone 4c-1 de la refonte du design system (carte #286) : les éditeurs Markdown et PDF sur le design system.
-- **Nouvelle entrée `@abyss-project/commons-front-core/editors`** : `MarkdownEditor`, `PdfEditor`, `PdfOperationType`
-  et les types du PDF. Ils ne sont pas sur l'entrée racine, pour que pdf.js, pdf-lib et Crepe ne pèsent pas sur les
-  applications qui ne les utilisent pas (ADR-0212). Le worker de pdf.js se charge à la première ouverture d'un PDF.
-- **`MarkdownEditor`** : mêmes props qu'`AbyssMarkdownEditor`, moteur Crepe gardé, couleurs et polices des jetons,
-  libellés de Crepe traduits, poignée de 44 px au toucher. Les classes `.milkdown` et `.ProseMirror` ne changent pas.
-- **`PdfEditor`** : mêmes props que l'éditeur legacy ; barre regroupée en six groupes, page blanche dans les deux
-  thèmes, couleurs d'annotation fixes (`pdf-colors`). Les opérations déjà enregistrées se rejouent à l'identique.
-- **Legacy** : `AbyssMarkdownEditor` et `PdfEditor` restent sous `/legacy` jusqu'à la zone 4c-2 ; le moteur du PDF
-  legacy est désormais celui de `/editors` (comportement inchangé).
-- **Épinglage de `@abyss-project/main`** : inchangé par rapport à la 10.0.0.
-### 9.6.0
-Correctifs de la zone 4b (carte #286), relevés par son e2e responsive.
-- **`Drawer`, `BottomSheet`** : sous 768 px, le bouton de fermeture fait 44×44 px au moins (il en faisait 32 sous le
-  thème legacy, qui garde ses boutons icône à leur taille de bureau). `AnchoredPanel` en profite : sous 768 px sa
-  feuille est une `BottomSheet`, dont c'est le bouton « Fermer ». Au-dessus, le popover garde son bouton d'origine.
-- **`InvoiceDetailView`** (venu de la carte #285, livraison E) : ne lit plus aucun membre de `@abyss-project/main` à
-  l'évaluation du paquet (libellés des lignes de déduction, badge de statut), ce que `load-safety.spec.ts` vérifie.
-  Rendu inchangé.
-- **Épinglage de `@abyss-project/main`** : le `workspace:*` du dépôt devient, dans le paquet publié, la version
-  exacte de main, ici **19.0.0**. Un hôte qui installe ce core doit être sur `@abyss-project/main` 19.0.0.
-### 9.5.1
-- **`testId` sur `TabItem` et `MenuItem`** : rendu en `data-testid` sur l'élément interactif (`role="tab"`,
-  `role="menuitem"`), absent sans lui. `Menu` accepte aussi `testId` sur son conteneur. Les e2e des hôtes lisent ces
-  identifiants, que `Tabs` et `Menu` ne transmettaient pas.
-- **`Kbd` dans les déclarations publiées** : son type est écrit à la main (un composant de `kbd`), car le type déduit
-  ne pouvait pas être nommé dans les `.d.ts` et `Kbd` en était absent, bien que la racine l'exporte.
-### 9.5.0
-Éditeurs des outils du front principal sur le design system (carte #286, zone 4b). Pièces nouvelles, chacune documentée
-dans le `README.md` de son dossier et montrée dans le catalogue.
-- **`AnchoredPanel`** (`layers`) : petit formulaire ou sélecteur posé contre son déclencheur (`anchorEl`, `open`,
-  `onClose`, `title`, `placement`, `width`). À partir de 768 px, un popover au style de `Menu` (surface `bg.surface`,
-  filet `border.subtle`, ombre `elevations.overlay`) avec titre et bouton « Fermer » ; en dessous, une `BottomSheet`.
-  Focus piégé, `Escape` et clic hors du panneau ferment, le focus revient au déclencheur. Il porte des champs, pas
-  des actions (`Menu`).
-- **`Kbd`** (`layers`) : l'indication de touche de `Menu` et de `CommandPalette` est exportée de la racine, rendu
-  inchangé.
-- **Couleurs de création d'un canevas** (`theme`) : `CANVAS_NEUTRAL_INK`, `CANVAS_COMMENT_FILL`, `CANVAS_COMMENT_INK` et
-  `CANVAS_SHAPE_STROKE`, écrites en dur à côté de `CHOICE_SWATCHES`. Ce qu'un canevas donne à une forme ou à un texte
-  qu'un utilisateur crée : la couleur est enregistrée avec l'objet, identique pour tous les lecteurs et lisible sur
-  le fond `bg.canvas` clair comme sur le sombre (3:1 au moins ; 4,5:1 pour l'encre du commentaire sur son fond).
-- **Traductions** : clé `ds.layers.anchored-panel.close` (FR et EN).
-### 9.4.0
-Tickets du programme Abyss Founders (carte #285, livraison D). Détail dans [`src/legacy/components/Support/README.md`](src/legacy/components/Support/README.md).
-- **`SupportMessageThread`** : un message système (`systemEvent`, sans auteur) s'affiche comme un avis centré dont le texte vient des traductions `support.system.<ÉVÉNEMENT>` ; un événement réservé à l'admin (`isAdminNote`) n'est montré qu'aux admins, marqué « Note admin ».
-- **`SupportTicketCreateStepper`** : la catégorie `FUNDING_PROGRAMME` n'est jamais proposée ; reçue par `initialValues`, elle est vidée et `onRedirectedCategory` est appelé pour envoyer l'utilisateur vers la page Programme.
-- **`SupportCategorySelect`, `SupportSidebar`** : `FUNDING_PROGRAMME` n'est proposée ni dans le champ catégorie du formulaire de création ni dans la recatégorisation admin ; un ticket de cette catégorie garde sa catégorie (chip sans champ). Le filtre multiple la propose toujours.
-- **Traductions** : `support.category.FUNDING_PROGRAMME`, `support.system.*` (dont `REQUEST_WITHDRAWN` et `ENVELOPE_EXPIRED`), FR et EN.
-### 9.3.1 à 9.3.3
-Correctifs de la zone 4a (carte #286), relevés par son e2e responsive et sa revue finale.
-- **9.3.1, `CopyField`** : sous 768 px, le bouton d'affichage fait 44×44 px et le bouton de copie 44 px de haut.
-- **9.3.2, `DropZone`** : la limite s'écrit nombre, espace insécable, unité (« 2,00 Go »).
-- **9.3.3, `FormField`** : le libellé est un `FormLabel` statique au-dessus du champ, quel que soit le thème MUI chargé
-  (la surcharge legacy de `MuiInputLabel-outlined` le plaçait dans le cadre).
-- **9.3.3, `KeyValueList`** : `stackOnMobile` empile libellé et valeur sous 768 px.
-### 9.3.0
-Pages des outils du front principal sur le design system (carte #286, zone 4a). Pièces nouvelles et évolutions,
-chacune documentée dans le `README.md` de son dossier et montrée dans le catalogue.
-- **`BarChart`** (`data`) : barres Nivo sous `abyssNivoTheme`, groupées ou empilées (`stacked`), verticales ou
-  horizontales (`BarChartLayout`) ; une série par `id`, une catégorie par groupe, une clé absente n'est pas une barre ;
-  infobulle à la valeur propre de la série ; légende au-delà d'une série ; figure nommée et tableau des valeurs pour
-  les lecteurs d'écran ; « Aucune donnée à afficher » sans valeur. Graduations de l'axe des catégories selon la
-  largeur mesurée. Remplace `AbyssBarChart`.
-- **Ton sémantique des séries** (`data`) : `ChartSeriesTone` (`Success`, `Warning`, `Danger`, `Info`, `Neutral`) et
-  `seriesColorTokens`, partagés par `LineChart` et `BarChart`. Une série à ton prend le jeton `status.*` de son ton ;
-  les séries sans ton gardent la palette `data.series.*` dans leur ordre (ADR-0174, avenant 9.3.0).
-- **`LineChart`** (`data`) : `tone` par série et `stacked` (aires empilées depuis zéro, une abscisse absente d'une
-  série comptée à zéro ; infobulle et tableau gardent les valeurs propres). Le reste du contrat 9.2.0 est inchangé.
-- **`AmbientBackground`** (`structure`) : fond de décor animé et sobre (lueurs d'`accent` et de `data.series.5` en
-  `color-mix` sur les variables `--abyss-*`), `aria-hidden`, hors du flux, `Viewport` ou `Container` ; figé sous
-  `prefers-reduced-motion`, sous 768 px et avec `paused`, état exposé par `data-motion`. Remplace `WaterParticles`.
-- **`ConfirmDialogTone.Warning`** (`layers`) : bouton en `status.warning`, texte dans l'encre `paper`/`paper.on` la
-  plus contrastée, focus initial sur « Annuler » ; accepté par `useConfirmDialog`.
-- **`DataTable`** (`data`) : `label` facultatif, nom accessible de la table et de la liste mobile.
-- **Palette de choix** (`theme`) : `CHOICE_SWATCHES`, douze teintes catégorielles (une tous les 30° depuis la teinte
-  de marque, `0.72 0.12` en OKLCH), valeurs hexadécimales stables, lisibles sous l'encre `paper.on` à 4,5:1 au moins
-  dans les deux thèmes. **`ColorField`** les propose quand l'hôte ne passe pas `swatches` (devenu facultatif).
-- **Utilitaires sortis de `legacy/`** : `getFileIcon` et `getFileColor` sont exportés de la racine ; `getFileColor`
-  y rend une couleur des jetons, `var(--abyss-data-series-n)` ou `var(--abyss-text-muted)`.
-- **Traductions** : clés `ds.data.bar-chart.*` (FR et EN).
-### 9.2.0
-Organisation et projet du front principal sur le design system (carte #286, zone 3). Pièces nouvelles et évolutions,
-chacune documentée dans le `README.md` de son dossier et montrée dans le catalogue.
-- **`AvatarGroup`** (`meaning`) : pile d'avatars nommés, `max` au-delà duquel « +N » est nommé par les noms restants (`intl.formatList`) et les liste en infobulle ; aucun élément interactif. Remplace `UserAvatarList`.
-- **`TeamAvatar`** (`meaning`) : initiale d'équipe sur sa couleur, encre `paper` ou `paper.on` la plus contrastée ; une couleur absente ou illisible (`CSS.supports`) donne la teinte neutre au lieu d'une exception (dette `DS-TEAM-COLOR`).
-- **`Pagination`** (`data`) : précédent, numéros de page avec ellipses (sept places fixes), suivant ; page courante
-  en `aria-current="page"`, bornes désactivées, rien sous deux pages ; sous 768 px, précédent, « Page x sur y »,
-  suivant, cibles de 44 px.
-- **`LineChart`** (`data`) : courbes Nivo sous `abyssNivoTheme`, échelle de temps ou linéaire, aire facultative ;
-  couleurs prises dans l'ordre de la palette de séries, jamais passées par l'hôte ; légende au-delà d'une série ;
-  figure nommée et tableau des valeurs pour les lecteurs d'écran ; « Aucune donnée à afficher » sans point.
-  Graduations de l'axe x selon la largeur mesurée du graphique (et non celle de l'écran) : pas le plus fin, jamais plus
-  fin que les données, dont les libellés mono gardent `space[8]` entre eux ; un libellé qui déborderait des marges
-  n'est pas affiché.
-- **Palette de séries** (`theme`) : jetons `data.series.1` à `data.series.6` (et `--abyss-data-series-*`), ordre
-  exporté par `DATA_SERIES_TOKENS` ; luminosité et chroma égales, 3:1 au moins sur les fonds (ADR-0174, avenant).
-- **`UserPicker`** (`inputs`) : choix simple ou multiple d'utilisateurs (`{ id, name, email, pictureUrl }`), avatar,
-  nom et e-mail par option ; filtre local sur le nom et l'e-mail, ou recherche serveur par `onSearch` avec `loading` ;
-  `disabledIds` ; en multiple, puces parcourues à la flèche gauche et retirées par Retour arrière ou Suppr ; sous
-  768 px, 44 px par option, puces de 44 px de haut dont la croix de retrait est un carré tactile, et texte du champ
-  jamais plus étroit que 44 px quand les puces remplissent la ligne.
-- **`CompanySearchField`** (`inputs`) : contrat de `CompanySearchAutocomplete` (Pappers, `onSelect(PappersCompany)`,
-  erreur distincte d'une réponse vide, date de création dans la langue de l'utilisateur) sur `FormField` et les jetons
-  du core ; temporisation annulée au démontage, réponse dépassée ignorée.
-- **Types sortis de `legacy/`** : `PappersCompany` et `CurrentFamilyInfo` (avec `CurrentFamilyStatus`) sont exportés de
-  la racine ; `/legacy` les réexporte.
-- **Traductions** : clés `ds.inputs.user-picker.*` et `ds.inputs.company-search-field.*` (FR et EN).
-- **`EntityImageField`** (`inputs`) : image d'entité changée sur place, `EntityImageVariant.Avatar` (pastille d'appareil photo, `EntityImageShape.Round` ou `Square`) ou `Banner` (bouton en surimpression) ; sélecteur de l'appareil, ou menu d'`ImportButton` avec `cloudImport` ; envoi indiqué, annoncé, et bloquant.
-- **`useConfirmDialog`** et **`ConfirmDialogProvider`** (`layers`) : `confirm(options)` renvoie `Promise<boolean>` et ouvre le `ConfirmDialog` ; une demande à la fois, les suivantes attendent ; hors du fournisseur, une erreur qui le nomme.
-- **`CopyField.loadValue`** : la valeur n'est demandée qu'au premier « Afficher » ou « Copier », puis gardée ; chargement sur le bouton, échec annoncé et rejouable. `value` et `loadValue` sont exclusifs.
-- **`Section tone`** : `SectionTone.Danger` met le titre et un filet en `status.danger` (zones de danger).
-- **`DataTable`, liste mobile** : sous 768 px, chaque contrôle de la colonne `trailing` (lien, bouton, `role="button"`, `role="link"`, `role="menuitem"`) offre une cible de 44 × 44 (`densityValues.touchTarget`), même rendu en `size="small"` par l'hôte ; rien ne change à partir de 768 px.
-### 9.1.1
-- **`useServiceTour`** : sous un `AbyssCookieConsentProvider`, une première visite attend que le bandeau de cookies
-  soit tranché. Sur mobile, le bandeau recouvrait la feuille de la visite et bloquait « Suivant ». `start()` n'attend pas.
-- **`ProductTour`** : la découpe suit sa cible à chaque image tant que la visite est ouverte. Une cible déplacée sans
-  redimensionnement ni défilement (police web chargée au-dessus d'elle) laissait la découpe 20 px à côté.
-### 9.1.0
-- **`ProductTour`** (`layers`) : visite guidée d'un service (carte #285, spec §6.7). Bulle ancrée sur l'élément
-  `data-tour`, page voilée autour d'une découpe, compteur et points d'étape, « Suivant » / « Terminer » et « Passer la
-  visite » ; Échap passe la visite, les flèches changent d'étape, focus piégé ; feuille du bas sous 768 px (boutons de
-  44 px) ; sans mouvement sous `prefers-reduced-motion`. Une étape dont la cible manque s'affiche au centre d'un écran
-  voilé.
-- **`useServiceTour(service, { eligible })`** : ouvre la visite à la première visite (aucun état
-  `users.settings.serviceTours[service]`), la relance à la demande (`start`) et écrit `completedAt` ou `skippedAt` par
-  `AbyssCore.sdk.user.updateSettings`.
-- **Menu « Famille » du legacy** (`buildAbyssFamilyMenuSection`) : sans famille, l'entrée mène à `/family/new`
-  d'abyss-main au lieu de `/onboarding`.
-- **Traductions** : `ds.layers.product-tour.*` (FR et EN).
-### 8.3.0
-Compte et facturation du front principal sur le design system (carte #286, zone 2). Sept pièces nouvelles, chacune
-documentée dans le `README.md` de son dossier et montrée dans le catalogue.
-- **`Tabs`** (`structure`) : rangée d'onglets liés aux routes ou boutons, variantes `TabsVariant.Primary` et
-  `Secondary`, un seul arrêt de tabulation, flèches, Début et Fin ; défilement horizontal avec fondu tant qu'il reste
-  des onglets à droite (`useScrollOverflowCue`), 44 px de haut sous 768 px.
-- **`Callout`** (`states`) : bandeau `CalloutSeverity.Info`, `Success`, `Warning`, `Danger`, avec titre, action,
-  fermeture et icône facultatifs ; l'action passe sous le texte sous 768 px.
-- **`FormField`** (`inputs`) : libellé, aide et erreur autour d'un `OutlinedInput`, `InputBase` ou `Select` ; `id`,
-  `aria-describedby` et `labelId` reliés, erreur et obligation passées au contrôle.
-- **`SettingsRow`** (`inputs`) : libellé, description et contrôle à droite ; empilée sous 768 px.
-- **`Switch` du thème** : sous 768 px, la zone tactile de tout interrupteur (38 px dessinés) est portée à 44 px de
-  haut.
-- **`UsageMeter`** (`data`) : consommation sur un plafond, seuils en parts du plafond, jauge `meter` ; sans plafond, la
-  valeur seule.
-- **`InvoiceDetailView`** (`data`) : corps de présentation du détail d'une facture (lignes, déductions, gestes, prise en
-  charge des programmes, totaux), partagé par le front client et le back-office ; données et actions en props.
-- **`CopyField`** (`inputs`) : valeur masquable et copiable, résultat de la copie annoncé dans une région vivante.
-- **`NumberField`** (`inputs`) : nombre saisi et affiché avec les séparateurs de la langue, « , » ou « . » lus comme
-  marque décimale, borné (`min`) et arrondi (`decimals`) en sortie du champ ; remplace `AbyssNumberField` du legacy
-  pour le design system.
-- **`DataTable`** : deux options de colonne, `wrap` (la cellule passe à la ligne au lieu d'être coupée) et
-  `hideHeader` (en-tête lu par les technologies d'assistance, non dessiné, pour une colonne d'actions en icône).
-- **`Tabs`** : l'onglet choisi est ramené à l'écran aussi quand la rangée ou un onglet change de taille.
-- **Traductions** : clés `ds.states.callout.*`, `ds.inputs.copy-field.*` et `ds.data.usage-meter.*` (FR et EN).
-Pièces que les pages de compte importaient encore de `/legacy`, refaites dans le nouveau système (les copies legacy
-restent pour les hôtes legacy) :
-- **`UserAvatar`, `OrganizationAvatar`, `ProjectAvatar`** (`meaning`) : photo ou logo, sinon l'initiale ; taille
-  `size` en px. La fiche de profil au clic du legacy n'est pas reprise (sans appelant).
-- **`ContextSelector`** (`inputs`) : mon espace, puis un groupe par organisation et ses projets ;
-  `ContextValue.kind` est l'énumération `ContextKind`.
-- **`DropZone`** (`inputs`) : dépôt et bouton de choix, refus (taille, type, nombre) écrits sous la zone, entrée
-  AbyssCloud avec `cloudImport`.
-- **`ImportButton`** (`inputs`) : menu appareil, lien (adresse vérifiée, échec dit), AbyssCloud.
-- **`CloudImport`**, **`ImportFromCloudModal`**, **`QRCodeModal`** (`business`) : le sélecteur AbyssCloud, sa
-  modale (`open`, `onClose`, `onImport`), et un lien en QR code (`open` au lieu de `isOpen`).
-- **Jetons `paper` et `paper.on`** : une page claire et son encre dans les deux thèmes, pour ce qui est dessiné à
-  l'encre sombre (code QR, signature en PNG transparent). ADR-0174 §3 complété.
-- **Logique pure partagée** : `deriveQuotaOfferState`, `QuotaOfferState`, `offersAction`, `shouldSuggestModule`
-  (table de décision de l'offre de quota) sortent de `legacy/` et s'exportent de la racine ; `/legacy` les
-  réexporte toujours. `isAcceptedFile` (filtre `accept` du sélecteur cloud) passe aussi hors de `legacy/`.
-- **Traductions** : `ds.inputs.context-selector.*`, `ds.inputs.drop-zone.*`, `ds.inputs.import-button.*`,
-  `ds.business.cloud-import.*`, `ds.business.qr-code.*` (FR et EN).
-### 8.2.0
-Shell et tableaux de bord du front principal sur le design system (carte #286, zone 1).
-- **Nouveau** : `AppShell` prend `chromeless` (plein écran sans cadre), les entrées `external` et `action`,
-  l'action de section (`NavSection.action`) et les entrées internes du pied ; `NotificationsMenu`, `AccountMenu`,
-  `DesignCssVariables` et `focusRing` sont exportés ; `CommandPalette` gagne icônes, sous-titres, récents, sources
-  asynchrones et ouverture filtrée.
-- **Paliers** : les composants du design system basculent à 768 et 1200 px (`designMedia`, `useDesignBreakpoint`)
-  quel que soit le provider. Sous le thème legacy, l'`AppShell` montre le rail dès 768 px (et non plus à 900), la
-  `Modal` une fenêtre dès 768 px, et la bannière MFA passe son bouton sous le texte quand il ne tient plus à côté.
-- **Largeur de `Drawer` et de `Toast` sous le thème legacy** : la largeur par défaut passe de 600 à 480 px (palier
-  `sm` des jetons, et non plus le `sm` de MUI). Un hôte qui comptait sur 600 px passe `width` explicitement au
-  `Drawer`.
-- **Largeur de `Modal` et de `CommandPalette` sous le thème legacy** : elle reste tirée des `theme.breakpoints` de
-  MUI (prop `size` de la `Modal` passée à `maxWidth`, `sm` pour la palette). Sous le thème legacy, `md` vaut 900 px
-  et `sm` 600 px, contre 768 et 480 sous `AbyssThemeProvider` : la même `Modal` est donc plus large chez un hôte
-  legacy. Suivi : `DS-LEGACY-WIDTHS` dans `docs/internal/TECH-DEBT.md` d'abyss-main.
-- **Sélecteur d'espace** : un espace qui porte le nom de son type (« Espace personnel ») n'a plus de seconde ligne
-  répétant ce type.
-- **Navigation** : la liste des sections garde une barre de défilement fine et visible quand elle dépasse la
-  hauteur de la fenêtre.
-- **`PageState`** : `forbidden.message` remplace la description générique de l’accès refusé, pour nommer à qui
-  demander l’accès (organisation, projet).
-- **`PageState`** : le bloc d’état passe son action sous le texte dès que son emplacement fait moins de 512 px
-  (colonne latérale), et plus seulement sous 768 px d’écran.
-- **`PageHeader`** : de 768 px à la largeur du bureau, les actions passent sous le titre dès qu'elles ne tiennent
-  plus à côté d'un titre de 256 px.
-## Support
-Pour toute demande, ouvrir un ticket depuis [l'application Abyss](https://app.abyss-project.fr/dashboard/account/tickets/create).
+# Abyss Commons Front Core
+`@abyss-project/commons-front-core`
+Composants React, hooks, design system et traductions partagés par les frontends Abyss.
+_Shared React components, hooks, design system and translations for Abyss frontends._
+## Installation
+```bash
+npm install @abyss-project/commons-front-core
+# or
+pnpm add @abyss-project/commons-front-core
+```
+## Liens
+- **Documentation** : [https://docs.abyss-project.fr/abyss-project](https://docs.abyss-project.fr/abyss-project)
+- **NPM** : [@abyss-project/commons-front-core](https://www.npmjs.com/package/@abyss-project/commons-front-core)
+- **Application Abyss** : [app.abyss-project.fr](https://app.abyss-project.fr)
+- **Statut des services** : [status.abyss-project.fr](https://status.abyss-project.fr)
+## Usage
+Voir la [documentation produit](https://docs.abyss-project.fr/abyss-project) pour les guides d'utilisation, la configuration du Core, les exemples d'appel et la référence des permissions.
+## RUM
+Le RUM navigateur d'un front (SDK `@abyss-project/monitor-browser`, peer `^1.3.2` ; `setContact` et `setTheme` demandent la version publiée par #285 F) se démarre par `AbyssRumProvider`, monté **sous** `AbyssCookieConsentProvider`, sous le `ThemeProvider` MUI et, quand le front en a un, sous `AuthProvider` :
+```tsx
+<AbyssErrorBoundary appName="abyss-cloud">
+  <AuthProvider client={authClient}>
+    <AbyssCookieConsentProvider consentVersion={COOKIE_CONSENT_VERSION} isAuthenticated={isAuthenticated}>
+      <AbyssRumProvider config={buildRumOptions()}>
+        <App />
+      </AbyssRumProvider>
+    </AbyssCookieConsentProvider>
+  </AuthProvider>
+</AbyssErrorBoundary>
+```
+- **`config` est requise** (raison de la majeure 8.0.0 : aucun front ne peut oublier son RUM). `config={null}` désactive le RUM explicitement : rien n'est installé. Elle reçoit les options de `AbyssRum.init` (`apiUrl`, `proxyUrl`, `applicationId`, `token`, `release`, `instrumentedOrigins`, `routeResolver`…), sauf `consent`, que le provider fournit.
+- **Une seule initialisation.** `AbyssRum.init` est appelé au premier commit avec une `config` non nulle, une fois, StrictMode compris. Une `config` qui change ensuite est **ignorée** : le SDK vit autant que la page.
+- **Consentement.** Le replay exige la catégorie analytics de `AbyssCookieConsentProvider`, relue à chaque décision du SDK : un consentement donné ou retiré après le démarrage est suivi. Sans provider de consentement, analytics vaut refusé.
+- **Acteur.** Sous `AuthProvider`, l'acteur de la session est l'id de l'utilisateur connecté, `null` à la déconnexion, inchangé pendant le chargement de la session. Sans `AuthProvider`, aucun acteur.
+- **`feedbackTicket`** (`intakeSlug`, `internalTicketSectionId`, `appName`, `sessionUrl(sessionId, offsetMs)`, `locale?()`) : chaque retour utilisateur enregistré par Monitor devient un ticket Internal Tickets, par l'intake public d'abyss-console (`fileInternalTicketIntake`, peer `@abyss-project/console` `^12.4.0`, configuré par `AbyssConsoleCore.setConfig` du front). Titre `[<appName>] Retour utilisateur` ; description : le message, l'e-mail, la route et le lien vers la session. Le déclarant est l'e-mail saisi, sinon celui de l'utilisateur connecté ; un retour anonyme sans e-mail ne crée aucun ticket et reste dans Monitor. Un échec de création est journalisé (`console.warn`) et avalé. `locale()` est relue à chaque retour : sa sous-étiquette primaire (`en-GB` → `en`) part comme `locale` de l'intake, la langue des courriels de suivi ; une langue que l'intake ne parle pas (hors `UserLanguage`) n'est pas envoyée.
+- **`onFeedbackSent`** : rappel du front, appelé pour chaque retour enregistré, après le ticket (créé, sauté ou en échec).
+- **Contact (#285 F §7).** Sous `AuthProvider`, `AbyssRum.setContact({ email, name })` reçoit l'e-mail et l'alias de l'utilisateur connecté, `null` à la déconnexion, rien pendant le chargement de la session. Le SDK le garde en mémoire, jamais dans la télémétrie : il pré-remplit « Réponse à … » du signalement et ne part qu'avec un retour. Avec `config={null}`, aucun contact n'est donné.
+- **Thème (#285 F §6.4).** Monté sous le `ThemeProvider` MUI du front, le provider passe à `AbyssRum.setTheme` l'accent (`palette.primary.main`), le rayon (`shape.borderRadius`, borné à 0–48 px) et le mode (`palette.mode`) ; un changement de mode est suivi. Les variables CSS `--abyss-monitor-accent` et `--abyss-monitor-radius` de la page, et l'apparence enregistrée sur une demande de retour, priment.
+- **« Signaler un problème » (#285 F §7).** Avec une `config` non nulle, le provider offre le signalement du SDK aux menus de compte du core placés dessous : `AccountMenu` (après les entrées de l'hôte) et le `AbyssLayoutMenu` legacy (après Facturation) montrent l'entrée « Signaler un problème » / « Report a problem », qui ferme le menu et appelle `AbyssRum.showReportDialog({ locale })` dans la langue du front (`en*` → `RumReportLocale.EN`, sinon `RumReportLocale.FR`). Sans provider ou avec `config={null}`, l'entrée n'existe pas. Elle n'apparaît que tant que `AbyssRum.isReportAvailable()` est vrai — SDK démarré, configuration de l'environnement reçue avec les retours activés (réglage « Retours utilisateurs » dans Monitor) — et le provider la réévalue à chaque `AbyssRum.onConfigChange` : absente avant la réponse de configuration et quand les retours sont coupés.
+- **Actions clés (#285 F).** `trackKeyAction(AbyssKeyActionEvent.X)` enregistre, au point de succès d'une action du front, une action RUM nommée d'après l'événement du catalogue (`board.card.completed`) : une demande de retour déclenchée par une action s'y règle. Sans RUM démarré, l'appel ne fait rien et ne lève jamais.
+- **Erreurs de rendu.** `AbyssErrorBoundary` envoie l'erreur qu'il attrape à `AbyssRum.captureError(error, { source: 'error-boundary' })` ; sans RUM démarré, l'appel ne fait rien.
+### Construire les options : `buildAbyssRumProviderConfig`
+Les fronts Abyss ne recopient pas leurs options : ils passent leurs valeurs de config brutes (chaîne vide = absente) au constructeur partagé, qui rend `AbyssRumProviderConfig | null`.
+```ts
+import { buildAbyssRumProviderConfig } from '@abyss-project/commons-front-core';
+export const buildRumOptions = () =>
+  buildAbyssRumProviderConfig({
+    token: config.app.abyssMonitor.rumToken,
+    applicationId: config.app.abyssMonitor.applicationId,
+    monitorApiUrl: config.app.abyssMonitor.api,
+    apiUrl: config.app.abyssCloud.api, // l'API du front : relais `/_t` et origine instrumentée
+    mainApiUrl: config.app.abyss.api, // l'API d'abyss-main : origine instrumentée
+    release: config.app.abyssMonitor.release,
+    routeTemplates: CLOUD_ROUTE_TEMPLATES, // gabarits complets du routeur
+    appName: 'AbyssCloud',
+    mainFrontUrl: config.app.abyss.site, // la page de session vit dans le front d'abyss-main
+    feedbackIntakeSlug: config.app.abyssMonitor.feedbackIntakeSlug,
+    feedbackSectionId: config.app.abyssMonitor.feedbackSectionId,
+    organizationId: config.app.abyssMonitor.organizationId,
+    projectId: config.app.abyssMonitor.projectId,
+    locale: () => currentLanguage(),
+  });
+```
+- **`null`** sans jeton, application, API Monitor, API du front ou API d'abyss-main (ou si l'une des trois URL n'en est pas une) : rien n'est installé.
+- **Relais et corrélation** : `proxyUrl` = origine de `apiUrl` + `/_t` ; `instrumentedOrigins` = origines de `apiUrl` et `mainApiUrl` (une seule fois si c'est la même), plus celle de Monitor avec `instrumentMonitorApi: true` (front d'abyss-main, qui appelle Monitor lui-même).
+- **Routes** : `routeResolver` = `createRouteResolver(routeTemplates)`.
+- **Ticket de retour** posé seulement quand l'intake, sa section, l'organisation, le projet et `mainFrontUrl` sont là ; son lien est `abyssMainRumSessionPath`, à l'instant du retour en secondes entières.
+### Gabarits de route : `createRouteResolver(patterns)`
+`createRouteResolver(patterns: readonly string[]): (location: Location) => string` donne au SDK le gabarit de la route (`/org/:orgId/boards/:boardId`), que le SDK masque ensuite comme toute URL. Les gabarits sont **complets** (routes imbriquées comprises) et classés comme react-router les classe (`matchRoutes`) : un segment statique l'emporte sur un paramètre, un paramètre sur un `*`, quel que soit l'ordre de la liste. Sans correspondance : `location.pathname`.
+### Page d'une session : `abyssMainRumSessionPath`
+`ABYSS_MAIN_RUM_SESSION_ROUTE` (`/org/:orgId/project/:projectId/application/:applicationId/monitor/rum/sessions/:sessionId`) est la seule source du chemin de la page d'une session dans le front d'abyss-main, qui le monte. `abyssMainRumSessionPath({ orgId, projectId, applicationId }, sessionId, t?)` le remplit (id de session encodé) et ajoute `?t=` en secondes entières, jamais négatif.
+## Changements visibles
+### 9.6.0
+Correctifs de la zone 4b (carte #286), relevés par son e2e responsive.
+- **`Drawer`, `BottomSheet`** : sous 768 px, le bouton de fermeture fait 44×44 px au moins (il en faisait 32 sous le
+  thème legacy, qui garde ses boutons icône à leur taille de bureau). `AnchoredPanel` en profite : sous 768 px sa
+  feuille est une `BottomSheet`, dont c'est le bouton « Fermer ». Au-dessus, le popover garde son bouton d'origine.
+- **`InvoiceDetailView`** (venu de la carte #285, livraison E) : ne lit plus aucun membre de `@abyss-project/main` à
+  l'évaluation du paquet (libellés des lignes de déduction, badge de statut), ce que `load-safety.spec.ts` vérifie.
+  Rendu inchangé.
+- **Épinglage de `@abyss-project/main`** : le `workspace:*` du dépôt devient, dans le paquet publié, la version
+  exacte de main, ici **19.0.0**. Un hôte qui installe ce core doit être sur `@abyss-project/main` 19.0.0.
+### 9.5.1
+- **`testId` sur `TabItem` et `MenuItem`** : rendu en `data-testid` sur l'élément interactif (`role="tab"`,
+  `role="menuitem"`), absent sans lui. `Menu` accepte aussi `testId` sur son conteneur. Les e2e des hôtes lisent ces
+  identifiants, que `Tabs` et `Menu` ne transmettaient pas.
+- **`Kbd` dans les déclarations publiées** : son type est écrit à la main (un composant de `kbd`), car le type déduit
+  ne pouvait pas être nommé dans les `.d.ts` et `Kbd` en était absent, bien que la racine l'exporte.
+### 9.5.0
+Éditeurs des outils du front principal sur le design system (carte #286, zone 4b). Pièces nouvelles, chacune documentée
+dans le `README.md` de son dossier et montrée dans le catalogue.
+- **`AnchoredPanel`** (`layers`) : petit formulaire ou sélecteur posé contre son déclencheur (`anchorEl`, `open`,
+  `onClose`, `title`, `placement`, `width`). À partir de 768 px, un popover au style de `Menu` (surface `bg.surface`,
+  filet `border.subtle`, ombre `elevations.overlay`) avec titre et bouton « Fermer » ; en dessous, une `BottomSheet`.
+  Focus piégé, `Escape` et clic hors du panneau ferment, le focus revient au déclencheur. Il porte des champs, pas
+  des actions (`Menu`).
+- **`Kbd`** (`layers`) : l'indication de touche de `Menu` et de `CommandPalette` est exportée de la racine, rendu
+  inchangé.
+- **Couleurs de création d'un canevas** (`theme`) : `CANVAS_NEUTRAL_INK`, `CANVAS_COMMENT_FILL`, `CANVAS_COMMENT_INK` et
+  `CANVAS_SHAPE_STROKE`, écrites en dur à côté de `CHOICE_SWATCHES`. Ce qu'un canevas donne à une forme ou à un texte
+  qu'un utilisateur crée : la couleur est enregistrée avec l'objet, identique pour tous les lecteurs et lisible sur
+  le fond `bg.canvas` clair comme sur le sombre (3:1 au moins ; 4,5:1 pour l'encre du commentaire sur son fond).
+- **Traductions** : clé `ds.layers.anchored-panel.close` (FR et EN).
+### 9.4.0
+Tickets du programme Abyss Founders (carte #285, livraison D). Détail dans [`src/legacy/components/Support/README.md`](src/legacy/components/Support/README.md).
+- **`SupportMessageThread`** : un message système (`systemEvent`, sans auteur) s'affiche comme un avis centré dont le texte vient des traductions `support.system.<ÉVÉNEMENT>` ; un événement réservé à l'admin (`isAdminNote`) n'est montré qu'aux admins, marqué « Note admin ».
+- **`SupportTicketCreateStepper`** : la catégorie `FUNDING_PROGRAMME` n'est jamais proposée ; reçue par `initialValues`, elle est vidée et `onRedirectedCategory` est appelé pour envoyer l'utilisateur vers la page Programme.
+- **`SupportCategorySelect`, `SupportSidebar`** : `FUNDING_PROGRAMME` n'est proposée ni dans le champ catégorie du formulaire de création ni dans la recatégorisation admin ; un ticket de cette catégorie garde sa catégorie (chip sans champ). Le filtre multiple la propose toujours.
+- **Traductions** : `support.category.FUNDING_PROGRAMME`, `support.system.*` (dont `REQUEST_WITHDRAWN` et `ENVELOPE_EXPIRED`), FR et EN.
+### 9.3.1 à 9.3.3
+Correctifs de la zone 4a (carte #286), relevés par son e2e responsive et sa revue finale.
+- **9.3.1, `CopyField`** : sous 768 px, le bouton d'affichage fait 44×44 px et le bouton de copie 44 px de haut.
+- **9.3.2, `DropZone`** : la limite s'écrit nombre, espace insécable, unité (« 2,00 Go »).
+- **9.3.3, `FormField`** : le libellé est un `FormLabel` statique au-dessus du champ, quel que soit le thème MUI chargé
+  (la surcharge legacy de `MuiInputLabel-outlined` le plaçait dans le cadre).
+- **9.3.3, `KeyValueList`** : `stackOnMobile` empile libellé et valeur sous 768 px.
+### 9.3.0
+Pages des outils du front principal sur le design system (carte #286, zone 4a). Pièces nouvelles et évolutions,
+chacune documentée dans le `README.md` de son dossier et montrée dans le catalogue.
+- **`BarChart`** (`data`) : barres Nivo sous `abyssNivoTheme`, groupées ou empilées (`stacked`), verticales ou
+  horizontales (`BarChartLayout`) ; une série par `id`, une catégorie par groupe, une clé absente n'est pas une barre ;
+  infobulle à la valeur propre de la série ; légende au-delà d'une série ; figure nommée et tableau des valeurs pour
+  les lecteurs d'écran ; « Aucune donnée à afficher » sans valeur. Graduations de l'axe des catégories selon la
+  largeur mesurée. Remplace `AbyssBarChart`.
+- **Ton sémantique des séries** (`data`) : `ChartSeriesTone` (`Success`, `Warning`, `Danger`, `Info`, `Neutral`) et
+  `seriesColorTokens`, partagés par `LineChart` et `BarChart`. Une série à ton prend le jeton `status.*` de son ton ;
+  les séries sans ton gardent la palette `data.series.*` dans leur ordre (ADR-0174, avenant 9.3.0).
+- **`LineChart`** (`data`) : `tone` par série et `stacked` (aires empilées depuis zéro, une abscisse absente d'une
+  série comptée à zéro ; infobulle et tableau gardent les valeurs propres). Le reste du contrat 9.2.0 est inchangé.
+- **`AmbientBackground`** (`structure`) : fond de décor animé et sobre (lueurs d'`accent` et de `data.series.5` en
+  `color-mix` sur les variables `--abyss-*`), `aria-hidden`, hors du flux, `Viewport` ou `Container` ; figé sous
+  `prefers-reduced-motion`, sous 768 px et avec `paused`, état exposé par `data-motion`. Remplace `WaterParticles`.
+- **`ConfirmDialogTone.Warning`** (`layers`) : bouton en `status.warning`, texte dans l'encre `paper`/`paper.on` la
+  plus contrastée, focus initial sur « Annuler » ; accepté par `useConfirmDialog`.
+- **`DataTable`** (`data`) : `label` facultatif, nom accessible de la table et de la liste mobile.
+- **Palette de choix** (`theme`) : `CHOICE_SWATCHES`, douze teintes catégorielles (une tous les 30° depuis la teinte
+  de marque, `0.72 0.12` en OKLCH), valeurs hexadécimales stables, lisibles sous l'encre `paper.on` à 4,5:1 au moins
+  dans les deux thèmes. **`ColorField`** les propose quand l'hôte ne passe pas `swatches` (devenu facultatif).
+- **Utilitaires sortis de `legacy/`** : `getFileIcon` et `getFileColor` sont exportés de la racine ; `getFileColor`
+  y rend une couleur des jetons, `var(--abyss-data-series-n)` ou `var(--abyss-text-muted)`.
+- **Traductions** : clés `ds.data.bar-chart.*` (FR et EN).
+### 9.2.0
+Organisation et projet du front principal sur le design system (carte #286, zone 3). Pièces nouvelles et évolutions,
+chacune documentée dans le `README.md` de son dossier et montrée dans le catalogue.
+- **`AvatarGroup`** (`meaning`) : pile d'avatars nommés, `max` au-delà duquel « +N » est nommé par les noms restants (`intl.formatList`) et les liste en infobulle ; aucun élément interactif. Remplace `UserAvatarList`.
+- **`TeamAvatar`** (`meaning`) : initiale d'équipe sur sa couleur, encre `paper` ou `paper.on` la plus contrastée ; une couleur absente ou illisible (`CSS.supports`) donne la teinte neutre au lieu d'une exception (dette `DS-TEAM-COLOR`).
+- **`Pagination`** (`data`) : précédent, numéros de page avec ellipses (sept places fixes), suivant ; page courante
+  en `aria-current="page"`, bornes désactivées, rien sous deux pages ; sous 768 px, précédent, « Page x sur y »,
+  suivant, cibles de 44 px.
+- **`LineChart`** (`data`) : courbes Nivo sous `abyssNivoTheme`, échelle de temps ou linéaire, aire facultative ;
+  couleurs prises dans l'ordre de la palette de séries, jamais passées par l'hôte ; légende au-delà d'une série ;
+  figure nommée et tableau des valeurs pour les lecteurs d'écran ; « Aucune donnée à afficher » sans point.
+  Graduations de l'axe x selon la largeur mesurée du graphique (et non celle de l'écran) : pas le plus fin, jamais plus
+  fin que les données, dont les libellés mono gardent `space[8]` entre eux ; un libellé qui déborderait des marges
+  n'est pas affiché.
+- **Palette de séries** (`theme`) : jetons `data.series.1` à `data.series.6` (et `--abyss-data-series-*`), ordre
+  exporté par `DATA_SERIES_TOKENS` ; luminosité et chroma égales, 3:1 au moins sur les fonds (ADR-0174, avenant).
+- **`UserPicker`** (`inputs`) : choix simple ou multiple d'utilisateurs (`{ id, name, email, pictureUrl }`), avatar,
+  nom et e-mail par option ; filtre local sur le nom et l'e-mail, ou recherche serveur par `onSearch` avec `loading` ;
+  `disabledIds` ; en multiple, puces parcourues à la flèche gauche et retirées par Retour arrière ou Suppr ; sous
+  768 px, 44 px par option, puces de 44 px de haut dont la croix de retrait est un carré tactile, et texte du champ
+  jamais plus étroit que 44 px quand les puces remplissent la ligne.
+- **`CompanySearchField`** (`inputs`) : contrat de `CompanySearchAutocomplete` (Pappers, `onSelect(PappersCompany)`,
+  erreur distincte d'une réponse vide, date de création dans la langue de l'utilisateur) sur `FormField` et les jetons
+  du core ; temporisation annulée au démontage, réponse dépassée ignorée.
+- **Types sortis de `legacy/`** : `PappersCompany` et `CurrentFamilyInfo` (avec `CurrentFamilyStatus`) sont exportés de
+  la racine ; `/legacy` les réexporte.
+- **Traductions** : clés `ds.inputs.user-picker.*` et `ds.inputs.company-search-field.*` (FR et EN).
+- **`EntityImageField`** (`inputs`) : image d'entité changée sur place, `EntityImageVariant.Avatar` (pastille d'appareil photo, `EntityImageShape.Round` ou `Square`) ou `Banner` (bouton en surimpression) ; sélecteur de l'appareil, ou menu d'`ImportButton` avec `cloudImport` ; envoi indiqué, annoncé, et bloquant.
+- **`useConfirmDialog`** et **`ConfirmDialogProvider`** (`layers`) : `confirm(options)` renvoie `Promise<boolean>` et ouvre le `ConfirmDialog` ; une demande à la fois, les suivantes attendent ; hors du fournisseur, une erreur qui le nomme.
+- **`CopyField.loadValue`** : la valeur n'est demandée qu'au premier « Afficher » ou « Copier », puis gardée ; chargement sur le bouton, échec annoncé et rejouable. `value` et `loadValue` sont exclusifs.
+- **`Section tone`** : `SectionTone.Danger` met le titre et un filet en `status.danger` (zones de danger).
+- **`DataTable`, liste mobile** : sous 768 px, chaque contrôle de la colonne `trailing` (lien, bouton, `role="button"`, `role="link"`, `role="menuitem"`) offre une cible de 44 × 44 (`densityValues.touchTarget`), même rendu en `size="small"` par l'hôte ; rien ne change à partir de 768 px.
+### 9.1.1
+- **`useServiceTour`** : sous un `AbyssCookieConsentProvider`, une première visite attend que le bandeau de cookies
+  soit tranché. Sur mobile, le bandeau recouvrait la feuille de la visite et bloquait « Suivant ». `start()` n'attend pas.
+- **`ProductTour`** : la découpe suit sa cible à chaque image tant que la visite est ouverte. Une cible déplacée sans
+  redimensionnement ni défilement (police web chargée au-dessus d'elle) laissait la découpe 20 px à côté.
+### 9.1.0
+- **`ProductTour`** (`layers`) : visite guidée d'un service (carte #285, spec §6.7). Bulle ancrée sur l'élément
+  `data-tour`, page voilée autour d'une découpe, compteur et points d'étape, « Suivant » / « Terminer » et « Passer la
+  visite » ; Échap passe la visite, les flèches changent d'étape, focus piégé ; feuille du bas sous 768 px (boutons de
+  44 px) ; sans mouvement sous `prefers-reduced-motion`. Une étape dont la cible manque s'affiche au centre d'un écran
+  voilé.
+- **`useServiceTour(service, { eligible })`** : ouvre la visite à la première visite (aucun état
+  `users.settings.serviceTours[service]`), la relance à la demande (`start`) et écrit `completedAt` ou `skippedAt` par
+  `AbyssCore.sdk.user.updateSettings`.
+- **Menu « Famille » du legacy** (`buildAbyssFamilyMenuSection`) : sans famille, l'entrée mène à `/family/new`
+  d'abyss-main au lieu de `/onboarding`.
+- **Traductions** : `ds.layers.product-tour.*` (FR et EN).
+### 8.3.0
+Compte et facturation du front principal sur le design system (carte #286, zone 2). Sept pièces nouvelles, chacune
+documentée dans le `README.md` de son dossier et montrée dans le catalogue.
+- **`Tabs`** (`structure`) : rangée d'onglets liés aux routes ou boutons, variantes `TabsVariant.Primary` et
+  `Secondary`, un seul arrêt de tabulation, flèches, Début et Fin ; défilement horizontal avec fondu tant qu'il reste
+  des onglets à droite (`useScrollOverflowCue`), 44 px de haut sous 768 px.
+- **`Callout`** (`states`) : bandeau `CalloutSeverity.Info`, `Success`, `Warning`, `Danger`, avec titre, action,
+  fermeture et icône facultatifs ; l'action passe sous le texte sous 768 px.
+- **`FormField`** (`inputs`) : libellé, aide et erreur autour d'un `OutlinedInput`, `InputBase` ou `Select` ; `id`,
+  `aria-describedby` et `labelId` reliés, erreur et obligation passées au contrôle.
+- **`SettingsRow`** (`inputs`) : libellé, description et contrôle à droite ; empilée sous 768 px.
+- **`Switch` du thème** : sous 768 px, la zone tactile de tout interrupteur (38 px dessinés) est portée à 44 px de
+  haut.
+- **`UsageMeter`** (`data`) : consommation sur un plafond, seuils en parts du plafond, jauge `meter` ; sans plafond, la
+  valeur seule.
+- **`InvoiceDetailView`** (`data`) : corps de présentation du détail d'une facture (lignes, déductions, gestes, prise en
+  charge des programmes, totaux), partagé par le front client et le back-office ; données et actions en props.
+- **`CopyField`** (`inputs`) : valeur masquable et copiable, résultat de la copie annoncé dans une région vivante.
+- **`NumberField`** (`inputs`) : nombre saisi et affiché avec les séparateurs de la langue, « , » ou « . » lus comme
+  marque décimale, borné (`min`) et arrondi (`decimals`) en sortie du champ ; remplace `AbyssNumberField` du legacy
+  pour le design system.
+- **`DataTable`** : deux options de colonne, `wrap` (la cellule passe à la ligne au lieu d'être coupée) et
+  `hideHeader` (en-tête lu par les technologies d'assistance, non dessiné, pour une colonne d'actions en icône).
+- **`Tabs`** : l'onglet choisi est ramené à l'écran aussi quand la rangée ou un onglet change de taille.
+- **Traductions** : clés `ds.states.callout.*`, `ds.inputs.copy-field.*` et `ds.data.usage-meter.*` (FR et EN).
+Pièces que les pages de compte importaient encore de `/legacy`, refaites dans le nouveau système (les copies legacy
+restent pour les hôtes legacy) :
+- **`UserAvatar`, `OrganizationAvatar`, `ProjectAvatar`** (`meaning`) : photo ou logo, sinon l'initiale ; taille
+  `size` en px. La fiche de profil au clic du legacy n'est pas reprise (sans appelant).
+- **`ContextSelector`** (`inputs`) : mon espace, puis un groupe par organisation et ses projets ;
+  `ContextValue.kind` est l'énumération `ContextKind`.
+- **`DropZone`** (`inputs`) : dépôt et bouton de choix, refus (taille, type, nombre) écrits sous la zone, entrée
+  AbyssCloud avec `cloudImport`.
+- **`ImportButton`** (`inputs`) : menu appareil, lien (adresse vérifiée, échec dit), AbyssCloud.
+- **`CloudImport`**, **`ImportFromCloudModal`**, **`QRCodeModal`** (`business`) : le sélecteur AbyssCloud, sa
+  modale (`open`, `onClose`, `onImport`), et un lien en QR code (`open` au lieu de `isOpen`).
+- **Jetons `paper` et `paper.on`** : une page claire et son encre dans les deux thèmes, pour ce qui est dessiné à
+  l'encre sombre (code QR, signature en PNG transparent). ADR-0174 §3 complété.
+- **Logique pure partagée** : `deriveQuotaOfferState`, `QuotaOfferState`, `offersAction`, `shouldSuggestModule`
+  (table de décision de l'offre de quota) sortent de `legacy/` et s'exportent de la racine ; `/legacy` les
+  réexporte toujours. `isAcceptedFile` (filtre `accept` du sélecteur cloud) passe aussi hors de `legacy/`.
+- **Traductions** : `ds.inputs.context-selector.*`, `ds.inputs.drop-zone.*`, `ds.inputs.import-button.*`,
+  `ds.business.cloud-import.*`, `ds.business.qr-code.*` (FR et EN).
+### 8.2.0
+Shell et tableaux de bord du front principal sur le design system (carte #286, zone 1).
+- **Nouveau** : `AppShell` prend `chromeless` (plein écran sans cadre), les entrées `external` et `action`,
+  l'action de section (`NavSection.action`) et les entrées internes du pied ; `NotificationsMenu`, `AccountMenu`,
+  `DesignCssVariables` et `focusRing` sont exportés ; `CommandPalette` gagne icônes, sous-titres, récents, sources
+  asynchrones et ouverture filtrée.
+- **Paliers** : les composants du design system basculent à 768 et 1200 px (`designMedia`, `useDesignBreakpoint`)
+  quel que soit le provider. Sous le thème legacy, l'`AppShell` montre le rail dès 768 px (et non plus à 900), la
+  `Modal` une fenêtre dès 768 px, et la bannière MFA passe son bouton sous le texte quand il ne tient plus à côté.
+- **Largeur de `Drawer` et de `Toast` sous le thème legacy** : la largeur par défaut passe de 600 à 480 px (palier
+  `sm` des jetons, et non plus le `sm` de MUI). Un hôte qui comptait sur 600 px passe `width` explicitement au
+  `Drawer`.
+- **Largeur de `Modal` et de `CommandPalette` sous le thème legacy** : elle reste tirée des `theme.breakpoints` de
+  MUI (prop `size` de la `Modal` passée à `maxWidth`, `sm` pour la palette). Sous le thème legacy, `md` vaut 900 px
+  et `sm` 600 px, contre 768 et 480 sous `AbyssThemeProvider` : la même `Modal` est donc plus large chez un hôte
+  legacy. Suivi : `DS-LEGACY-WIDTHS` dans `docs/internal/TECH-DEBT.md` d'abyss-main.
+- **Sélecteur d'espace** : un espace qui porte le nom de son type (« Espace personnel ») n'a plus de seconde ligne
+  répétant ce type.
+- **Navigation** : la liste des sections garde une barre de défilement fine et visible quand elle dépasse la
+  hauteur de la fenêtre.
+- **`PageState`** : `forbidden.message` remplace la description générique de l’accès refusé, pour nommer à qui
+  demander l’accès (organisation, projet).
+- **`PageState`** : le bloc d’état passe son action sous le texte dès que son emplacement fait moins de 512 px
+  (colonne latérale), et plus seulement sous 768 px d’écran.
+- **`PageHeader`** : de 768 px à la largeur du bureau, les actions passent sous le titre dès qu'elles ne tiennent
+  plus à côté d'un titre de 256 px.
+## Support
+Pour toute demande, ouvrir un ticket depuis [l'application Abyss](https://app.abyss-project.fr/dashboard/account/tickets/create).