@abyss-project/commons-front-core 8.2.0 → 8.3.0

package/README.md

@@ -1,125 +1,171 @@
-# 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.2.0`) se démarre par `AbyssRumProvider`, monté **sous** `AbyssCookieConsentProvider` 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).
-- **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
-
-### 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.2.0`) se démarre par `AbyssRumProvider`, monté **sous** `AbyssCookieConsentProvider` 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).
+- **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
+
+### 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.
+- **`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).

package/catalog/catalog-entries.ts

@@ -20,7 +20,7 @@ export interface CatalogEntry {
   family: CatalogFamily;
   /** Base name of the screenshots: `<slug>-<theme>-<width>.png`. */
   slug: string;
-  /** Checked by `responsive.spec.ts` at 360, 768 and 1440 px (structure, mobile, `DataTable`). */
+  /** Checked by `responsive.spec.ts` at 360, 768 and 1440 px: the pages that change form below 768 px. */
   responsive: boolean;
   /** Also captured at 390 px: the page changes form below 768 px. */
   mobileCapture: boolean;
@@ -51,6 +51,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('Toolbar', 'structure', 'toolbar', RESPONSIVE),
   entry('FilterBar', 'structure', 'filter-bar', RESPONSIVE),
   entry('SplitView', 'structure', 'split-view', RESPONSIVE),
+  entry('Tabs', 'structure', 'tabs', RESPONSIVE),
   entry('NotificationsMenu', 'structure', 'notifications-menu', {
     mobileCapture: true,
   }),
@@ -60,18 +61,26 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('ActionBar', 'mobile', 'action-bar', RESPONSIVE),
   entry('SwipeDeck', 'mobile', 'swipe-deck', RESPONSIVE),
   entry('PageState', 'states', 'page-state'),
+  entry('Callout', 'states', 'callout', RESPONSIVE),
   entry('DataTable', 'data', 'data-table', RESPONSIVE),
   entry('KeyValueList', 'data', 'key-value-list'),
   entry('StatTile', 'data', 'stat-tile'),
   entry('Sparkline', 'data', 'sparkline'),
   entry('ChartTheme', 'data', 'chart-theme'),
+  entry('UsageMeter', 'data', 'usage-meter'),
   entry('StatusBadge', 'meaning', 'status-badge'),
   entry('MethodBadge', 'meaning', 'method-badge'),
   entry('SeverityBadge', 'meaning', 'severity-badge'),
   entry('ScanBadge', 'meaning', 'scan-badge'),
   entry('RoleBadge', 'meaning', 'role-badge'),
   entry('ToolIcon', 'meaning', 'tool-icon'),
+  entry('Avatar', 'meaning', 'avatar'),
   entry('InfectedDownloadModal', 'business', 'infected-download-modal'),
+  entry('CloudImport', 'business', 'cloud-import', RESPONSIVE),
+  entry('ImportFromCloudModal', 'business', 'import-from-cloud-modal', {
+    mobileCapture: true,
+  }),
+  entry('QRCodeModal', 'business', 'qr-code-modal', { mobileCapture: true }),
   entry('Modal', 'layers', 'modal', { mobileCapture: true }),
   entry('ConfirmDialog', 'layers', 'confirm-dialog'),
   entry('Drawer', 'layers', 'drawer'),
@@ -83,6 +92,13 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('DateRangeField', 'inputs', 'date-range-field'),
   entry('ColorField', 'inputs', 'color-field'),
   entry('SegmentedControl', 'inputs', 'segmented-control'),
+  entry('FormField', 'inputs', 'form-field'),
+  entry('NumberField', 'inputs', 'number-field'),
+  entry('SettingsRow', 'inputs', 'settings-row', RESPONSIVE),
+  entry('CopyField', 'inputs', 'copy-field', RESPONSIVE),
+  entry('ContextSelector', 'inputs', 'context-selector', RESPONSIVE),
+  entry('DropZone', 'inputs', 'drop-zone', RESPONSIVE),
+  entry('ImportButton', 'inputs', 'import-button'),
 ];
 
 export const CATALOG_THEMES = [ThemeMode.Dark, ThemeMode.Light] as const;

package/catalog/cloud-picker-fixture.tsx

@@ -0,0 +1,97 @@
+import type {
+  IFile,
+  IFolder,
+  IGetRepositoryCloudData,
+  ISpace,
+} from '@abyss-project/cloud';
+import type { CloudPicker } from '../src/hooks/cloud-picker.types';
+
+// An AbyssCloud picker that answers from memory: the catalog has no network. Three Spaces (mine,
+// an organization's, one shared with me) and a small tree in the personal one.
+
+const space = (id: string, overrides: Partial<ISpace>): ISpace => ({
+  id,
+  userId: 'user-1',
+  organizationId: null,
+  projectId: null,
+  createdByUserId: 'user-1',
+  archivedAt: null,
+  saveVersionDefault: false,
+  versionMaxCount: null,
+  versionMaxAgeDays: null,
+  ...overrides,
+});
+
+const PERSONAL = space('space-personal', {});
+const ORGANIZATION = space('space-org', {
+  userId: null,
+  organizationId: 'org-1',
+});
+const SHARED = space('space-shared', { userId: 'user-2' });
+
+const file = (name: string, mimeType: string, sizeOctet: number): IFile => ({
+  id: name,
+  name,
+  description: null,
+  sizeOctet,
+  isEncrypt: false,
+  thumbnailPublicAccessId: null,
+  thumbnailId: null,
+  saveVersion: false,
+  externalId: null,
+  folderId: null,
+  spaceId: 'space-personal',
+  createdByUserId: 'user-1',
+  checksum: null,
+  mimeType,
+});
+
+const folder = (name: string, childFile: IFile[]): IFolder => ({
+  id: name,
+  name,
+  description: null,
+  spaceId: 'space-personal',
+  folderId: null,
+  createdByUserId: 'user-1',
+  childFile,
+  childFolder: [],
+});
+
+const TREE: IGetRepositoryCloudData = {
+  folders: [
+    folder('Factures 2026', [
+      file('facture-septembre.pdf', 'application/pdf', 182_000),
+      file('facture-octobre.pdf', 'application/pdf', 176_000),
+    ]),
+    folder('Photos', [file('portrait.png', 'image/png', 1_240_000)]),
+  ],
+  files: [
+    file('signature.png', 'image/png', 24_000),
+    file('contrat-de-bail-appartement-lyon.pdf', 'application/pdf', 912_000),
+    file('notes.txt', 'text/plain', 2_000),
+  ],
+  size: 2_534_000,
+};
+
+export const CATALOG_CLOUD_PICKER: CloudPicker = {
+  abyssCloudUrl: 'https://cloud.abyss-project.fr',
+  getFileThumbnailUrl: () => '',
+  clouds: [PERSONAL, ORGANIZATION],
+  cloudShares: [SHARED],
+  isLoading: false,
+  hasError: false,
+  refresh: async () => true,
+  onCreateCloud: async () => true,
+  fetchCloudRepository: async (spaceId) =>
+    spaceId === PERSONAL.id ? TREE : { folders: [], files: [], size: 0 },
+};
+
+/** The same picker after a failed provisioning: nothing listed. */
+export const CATALOG_FAILED_CLOUD_PICKER: CloudPicker = {
+  ...CATALOG_CLOUD_PICKER,
+  clouds: null,
+  cloudShares: null,
+  hasError: true,
+  refresh: async () => false,
+  onCreateCloud: async () => false,
+};

package/catalog/pages/Avatar.tsx

@@ -0,0 +1,94 @@
+import {
+  OrganizationAvatar,
+  ProjectAvatar,
+  UserAvatar,
+} from '../../src/components/meaning/Avatar/Avatar';
+import { LogoAbyssSmall } from '../../src/assets';
+import { Example, Row, Showcase } from '../frame';
+
+const picture = () => LogoAbyssSmall;
+// A picture that cannot load: the initial stays.
+const missing = (id: string) => `/catalogue-introuvable/${id}.png`;
+
+export const AvatarPage = () => (
+  <Showcase
+    family="Sens"
+    name="Avatar"
+    description="Personne, organisation, projet : la photo ou le logo, sinon l'initiale (ou une icône sans nom). Une personne dans un disque, une organisation et un projet dans un carré arrondi."
+  >
+    <Example title="Avec image" framed>
+      <Row>
+        <UserAvatar
+          userId="u1"
+          alias="Mehdi"
+          hasThumbnail
+          getProfilePictureUrl={picture}
+        />
+        <OrganizationAvatar
+          orgId="o1"
+          name="Abyss"
+          hasThumbnail
+          getLogoUrl={picture}
+        />
+        <ProjectAvatar
+          projectId="p1"
+          title="Atlas"
+          hasThumbnail
+          getProjectPictureUrl={picture}
+        />
+      </Row>
+    </Example>
+    <Example title="Sans image, ou image introuvable" framed>
+      <Row>
+        <UserAvatar
+          userId="u2"
+          alias="camille"
+          hasThumbnail={false}
+          getProfilePictureUrl={picture}
+        />
+        <OrganizationAvatar
+          orgId="o2"
+          name="Karbon"
+          hasThumbnail
+          getLogoUrl={missing}
+        />
+        <ProjectAvatar
+          projectId="p2"
+          title="board"
+          hasThumbnail={false}
+          getProjectPictureUrl={picture}
+        />
+        <OrganizationAvatar
+          orgId="o3"
+          name=""
+          hasThumbnail={false}
+          getLogoUrl={picture}
+        />
+      </Row>
+    </Example>
+    <Example title="Tailles : 22, 32 (défaut), 64" framed>
+      <Row>
+        <UserAvatar
+          userId="u3"
+          alias="Lina"
+          hasThumbnail={false}
+          size={22}
+          getProfilePictureUrl={picture}
+        />
+        <UserAvatar
+          userId="u4"
+          alias="Lina"
+          hasThumbnail={false}
+          getProfilePictureUrl={picture}
+        />
+        <UserAvatar
+          userId="u5"
+          alias="Lina"
+          hasThumbnail
+          size={64}
+          getProfilePictureUrl={picture}
+        />
+      </Row>
+    </Example>
+  </Showcase>
+);

package/catalog/pages/Callout.tsx

@@ -0,0 +1,67 @@
+import Button from '@mui/material/Button';
+import GroupsRounded from '@mui/icons-material/GroupsRounded';
+import {
+  Callout,
+  CalloutSeverity,
+} from '../../src/components/states/Callout/Callout';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const CalloutPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="États"
+      name="Callout"
+      description="Bandeau dans une page : information, succès, avertissement, danger ; titre, texte, action et fermeture facultatifs."
+    >
+      <Example title="Information, avec titre et fermeture">
+        <Callout
+          severity={CalloutSeverity.Info}
+          title="Essai gratuit"
+          onClose={() => log('fermer essai')}
+        >
+          Votre essai du plan Pro se termine dans 12 jours.
+        </Callout>
+      </Example>
+      <Example title="Succès">
+        <Callout severity={CalloutSeverity.Success}>
+          Votre moyen de paiement a été mis à jour.
+        </Callout>
+      </Example>
+      <Example title="Avertissement, avec action">
+        <Callout
+          severity={CalloutSeverity.Warning}
+          title="Quota bientôt atteint"
+          action={
+            <Button variant="outlined" onClick={() => log('augmenter')}>
+              Augmenter le stockage
+            </Button>
+          }
+        >
+          Vous avez utilisé 92 % de votre stockage.
+        </Callout>
+      </Example>
+      <Example title="Danger, avec action et fermeture">
+        <Callout
+          severity={CalloutSeverity.Danger}
+          title="Paiement refusé"
+          action={
+            <Button variant="contained" onClick={() => log('régler')}>
+              Régler la facture
+            </Button>
+          }
+          onClose={() => log('fermer paiement')}
+        >
+          Le prélèvement de la facture de septembre a échoué. Mettez à jour
+          votre carte pour éviter la suspension de votre abonnement.
+        </Callout>
+      </Example>
+      <Example title="Icône remplacée (famille)">
+        <Callout severity={CalloutSeverity.Info} icon={<GroupsRounded />}>
+          Votre abonnement est pris en charge par votre famille.
+        </Callout>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};