@abyss-project/commons-front-core 9.1.1 → 9.2.0

package/README.md

@@ -90,6 +90,41 @@ export const buildRumOptions = () =>
 
 ## Changements visibles
 
+### 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

package/catalog/catalog-entries.ts

@@ -66,6 +66,8 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('KeyValueList', 'data', 'key-value-list'),
   entry('StatTile', 'data', 'stat-tile'),
   entry('Sparkline', 'data', 'sparkline'),
+  entry('Pagination', 'data', 'pagination', RESPONSIVE),
+  entry('LineChart', 'data', 'line-chart'),
   entry('ChartTheme', 'data', 'chart-theme'),
   entry('UsageMeter', 'data', 'usage-meter'),
   entry('StatusBadge', 'meaning', 'status-badge'),
@@ -75,6 +77,8 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('RoleBadge', 'meaning', 'role-badge'),
   entry('ToolIcon', 'meaning', 'tool-icon'),
   entry('Avatar', 'meaning', 'avatar'),
+  entry('AvatarGroup', 'meaning', 'avatar-group'),
+  entry('TeamAvatar', 'meaning', 'team-avatar'),
   entry('InfectedDownloadModal', 'business', 'infected-download-modal'),
   entry('CloudImport', 'business', 'cloud-import', RESPONSIVE),
   entry('ImportFromCloudModal', 'business', 'import-from-cloud-modal', {
@@ -97,6 +101,9 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('NumberField', 'inputs', 'number-field'),
   entry('SettingsRow', 'inputs', 'settings-row', RESPONSIVE),
   entry('CopyField', 'inputs', 'copy-field', RESPONSIVE),
+  entry('UserPicker', 'inputs', 'user-picker', RESPONSIVE),
+  entry('CompanySearchField', 'inputs', 'company-search-field', RESPONSIVE),
+  entry('EntityImageField', 'inputs', 'entity-image-field', RESPONSIVE),
   entry('ContextSelector', 'inputs', 'context-selector', RESPONSIVE),
   entry('DropZone', 'inputs', 'drop-zone', RESPONSIVE),
   entry('ImportButton', 'inputs', 'import-button'),

package/catalog/pages/AvatarGroup.tsx

@@ -0,0 +1,45 @@
+import { AvatarGroup } from '../../src/components/meaning/AvatarGroup/AvatarGroup';
+import type { AvatarGroupPerson } from '../../src/components/meaning/AvatarGroup/AvatarGroup';
+import { LogoAbyssSmall } from '../../src/assets';
+import { Example, Showcase } from '../frame';
+
+const PEOPLE: AvatarGroupPerson[] = [
+  { id: 'u1', name: 'Mehdi', pictureUrl: LogoAbyssSmall },
+  { id: 'u2', name: 'Camille', pictureUrl: null },
+  { id: 'u3', name: 'Lina', pictureUrl: null },
+  // A picture that cannot load: the initial stays.
+  { id: 'u4', name: 'Paul', pictureUrl: '/catalogue-introuvable/u4.png' },
+  { id: 'u5', name: 'Zoé', pictureUrl: null },
+  { id: 'u6', name: 'Hugo', pictureUrl: null },
+  { id: 'u7', name: 'Inès', pictureUrl: null },
+];
+
+export const AvatarGroupPage = () => (
+  <Showcase
+    family="Sens"
+    name="AvatarGroup"
+    description="Personnes en pile : la photo ou l'initiale, chaque avatar nommé. Au-delà de max, « +N » compte les autres et les nomme dans une infobulle. Rien n'est interactif."
+  >
+    <Example title="Tout le monde (sans max)" framed>
+      <AvatarGroup people={PEOPLE.slice(0, 4)} label="Membres de Design" />
+    </Example>
+    <Example title="max = 3 : « +4 », noms au survol" framed>
+      <AvatarGroup people={PEOPLE} max={3} label="Membres de Ops" />
+    </Example>
+    <Example title="Tailles : 22, 32 (défaut), 40" framed>
+      <AvatarGroup
+        people={PEOPLE}
+        max={4}
+        size={22}
+        label="Membres de Support"
+      />
+      <AvatarGroup people={PEOPLE} max={4} label="Membres de Finance" />
+      <AvatarGroup
+        people={PEOPLE}
+        max={4}
+        size={40}
+        label="Membres de Ventes"
+      />
+    </Example>
+  </Showcase>
+);

package/catalog/pages/CompanySearchField.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import { CompanySearchField } from '../../src/components/inputs/CompanySearchField/CompanySearchField';
+import type { PappersCompany } from '../../src/components/inputs/CompanySearchField/pappers-company';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const COMPANIES: PappersCompany[] = [
+  {
+    siren: '901234567',
+    nom_entreprise: 'ABYSS PROJECT',
+    date_creation: '2021-09-14',
+    forme_juridique: 'SAS',
+    domaine_activite: 'Édition de logiciels applicatifs',
+    siege: {
+      adresse: '12 rue de la Paix',
+      code_postal: '75002',
+      ville: 'Paris',
+    },
+  },
+  {
+    siren: '812345678',
+    nom_entreprise:
+      'ABYSSAL CONSEIL ET ACCOMPAGNEMENT DES ENTREPRISES DE LA RÉGION AUVERGNE-RHÔNE-ALPES',
+    date_creation: '2016-02-03',
+    forme_juridique: 'SARL',
+    siege: { ville: 'Lyon' },
+  },
+  {
+    siren: '723456789',
+    nom_entreprise: 'KARBON STUDIO',
+    date_creation: '2012-06-30',
+    forme_juridique: 'EURL',
+    domaine_activite: 'Activités photographiques',
+    siege: {
+      adresse: '4 quai des Chartrons',
+      code_postal: '33000',
+      ville: 'Bordeaux',
+    },
+  },
+];
+
+/** The text that makes the stand-in for Pappers fail, to show the error state. */
+const FAILING_QUERY = 'panne';
+
+/**
+ * Pappers answered from memory while the page is shown: the catalog has no network. Typing
+ * « panne » shows the error state.
+ */
+const usePappersFromMemory = () => {
+  useEffect(() => {
+    const realFetch = window.fetch;
+    window.fetch = async (input, init) => {
+      const url = new URL(
+        typeof input === 'string' || input instanceof URL ? input : input.url,
+      );
+      if (url.hostname !== 'suggestions.pappers.fr') {
+        return realFetch(input, init);
+      }
+      const query = (url.searchParams.get('q') ?? '').toLowerCase();
+      if (query.includes(FAILING_QUERY)) {
+        return new Response(null, { status: 503 });
+      }
+      const found = COMPANIES.filter((company) =>
+        company.nom_entreprise.toLowerCase().includes(query),
+      );
+      return new Response(JSON.stringify({ resultats_nom_entreprise: found }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    };
+    return () => {
+      window.fetch = realFetch;
+    };
+  }, []);
+};
+
+export const CompanySearchFieldPage = () => {
+  const { log } = useEventLog();
+  const [name, setName] = useState('');
+  const [filled, setFilled] = useState('ABYSS PROJECT');
+  usePappersFromMemory();
+  return (
+    <Showcase
+      family="Saisie"
+      name="CompanySearchField"
+      description="Nom d'entreprise avec les suggestions de Pappers : forme juridique, SIREN, date de création, siège et activité. Une requête en échec met le champ en erreur, distincte d'une recherche sans résultat. Ici, Pappers répond de mémoire (« abyss », « karbon » ; « panne » simule une panne)."
+    >
+      <Example title="Recherche" maxWidth={640}>
+        <CompanySearchField
+          value={name}
+          onInputChange={setName}
+          onSelect={(company) => log(`entreprise ${company.siren}`)}
+        />
+      </Example>
+      <Example title="Nom déjà saisi" maxWidth={640}>
+        <CompanySearchField
+          value={filled}
+          onInputChange={setFilled}
+          onSelect={(company) => log(`entreprise ${company.siren}`)}
+          label="Raison sociale"
+        />
+      </Example>
+      <Example title="Inactif" maxWidth={640}>
+        <CompanySearchField
+          value="ABYSS PROJECT"
+          onInputChange={() => undefined}
+          onSelect={() => undefined}
+          disabled
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/ConfirmDialog.tsx

@@ -4,7 +4,44 @@ import {
   ConfirmDialog,
   ConfirmDialogTone,
 } from '../../src/components/layers/ConfirmDialog/ConfirmDialog';
-import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import {
+  ConfirmDialogProvider,
+  useConfirmDialog,
+} from '../../src/components/layers/ConfirmDialog/useConfirmDialog';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+
+/** Asks through `useConfirmDialog`, twice in a row: the second request waits for the first. */
+const ImperativeConfirm = () => {
+  const { log } = useEventLog();
+  const { confirm } = useConfirmDialog();
+  const ask = async () => {
+    const removed = await confirm({
+      title: 'Supprimer l’équipe Design ?',
+      body: 'Ses 4 membres perdent les accès donnés par l’équipe.',
+      confirmLabel: 'Supprimer l’équipe',
+      tone: ConfirmDialogTone.Danger,
+    });
+    log(removed ? 'équipe supprimée' : 'suppression annulée');
+  };
+  const askTwice = () => {
+    void ask();
+    void confirm({
+      title: 'Quitter l’organisation ?',
+      body: 'Vous perdez l’accès à ses projets.',
+      confirmLabel: 'Quitter',
+    }).then((left) => log(left ? 'quitter' : 'rester'));
+  };
+  return (
+    <Row>
+      <Button variant="outlined" onClick={() => void ask()}>
+        Supprimer l’équipe
+      </Button>
+      <Button variant="outlined" onClick={askTwice}>
+        Deux demandes à la suite
+      </Button>
+    </Row>
+  );
+};
 
 export const ConfirmDialogPage = () => {
   const { log } = useEventLog();
@@ -20,6 +57,11 @@ export const ConfirmDialogPage = () => {
           Supprimer Impôts 2026
         </Button>
       </Example>
+      <Example title="useConfirmDialog : confirm() renvoie une promesse">
+        <ConfirmDialogProvider>
+          <ImperativeConfirm />
+        </ConfirmDialogProvider>
+      </Example>
       <LastEvent />
       <ConfirmDialog
         open={open}

package/catalog/pages/CopyField.tsx

@@ -7,7 +7,7 @@ export const CopyFieldPage = () => {
     <Showcase
       family="Saisie"
       name="CopyField"
-      description="Valeur à copier, masquable : bouton de copie, annonce du résultat dans une région vivante, bouton pour afficher une valeur masquée."
+      description="Valeur à copier, masquable : bouton de copie, annonce du résultat dans une région vivante, bouton pour afficher une valeur masquée. Avec loadValue, la valeur n'est demandée qu'au premier « Afficher » ou « Copier »."
     >
       <Example title="Clé d'API, masquée" maxWidth={640}>
         <CopyField
@@ -17,6 +17,29 @@ export const CopyFieldPage = () => {
           copyLabel="Copier la clé"
         />
       </Example>
+      <Example title="Jeton chargé au premier geste" maxWidth={640}>
+        <CopyField
+          loadValue={() =>
+            new Promise<string>((resolve) => {
+              log('jeton demandé');
+              setTimeout(() => resolve('abyss_env_tok_9c1e4b7a2f6d8e30'), 800);
+            })
+          }
+          masked
+          onReveal={() => log('afficher le jeton')}
+          copyLabel="Copier le jeton"
+        />
+      </Example>
+      <Example title="Jeton dont le chargement échoue" maxWidth={640}>
+        <CopyField
+          loadValue={() => {
+            log('jeton refusé');
+            return Promise.reject(new Error('forbidden'));
+          }}
+          masked
+          copyLabel="Copier le jeton"
+        />
+      </Example>
       <Example title="Identifiant de connexion IA" maxWidth={640}>
         <CopyField
           value="https://mcp.abyss-project.fr/u/7f3a9c2e"

package/catalog/pages/EntityImageField.tsx

@@ -0,0 +1,124 @@
+import { styled } from '@mui/material/styles';
+import {
+  EntityImageField,
+  EntityImageShape,
+  EntityImageVariant,
+} from '../../src/components/inputs/EntityImageField/EntityImageField';
+import {
+  OrganizationAvatar,
+  UserAvatar,
+} from '../../src/components/meaning/Avatar/Avatar';
+import { LogoAbyssSmall } from '../../src/assets';
+import { px } from '../../src/theme/components/shared';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+import { CATALOG_CLOUD_PICKER } from '../cloud-picker-fixture';
+
+const AVATAR_SIZE = 72;
+
+const picture = () => LogoAbyssSmall;
+
+/** A stand-in banner image: the brand gradient over the width. */
+const BannerPicture = styled('div')(({ theme }) => {
+  const { tokens, space } = theme.design;
+  return {
+    height: px(space[10] * 2),
+    backgroundImage: `linear-gradient(120deg, ${tokens['brand.gradientFrom']}, ${tokens['brand.gradientTo']})`,
+  };
+});
+
+export const EntityImageFieldPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Saisie"
+      name="EntityImageField"
+      description="L'image d'une entité, changée sur place : l'avatar est lui-même le bouton (pastille d'appareil photo), la bannière porte un bouton en surimpression. Sans AbyssCloud, le bouton ouvre le sélecteur de fichiers ; avec, le menu des sources."
+    >
+      <Example title="Avatars : photo ronde avec AbyssCloud, logo carré sans">
+        <Row>
+          <EntityImageField
+            variant={EntityImageVariant.Avatar}
+            picture={
+              <UserAvatar
+                userId="u1"
+                alias="Mehdi"
+                hasThumbnail
+                size={AVATAR_SIZE}
+                getProfilePictureUrl={picture}
+              />
+            }
+            label="Changer la photo"
+            accept={['image/*']}
+            onFile={(file) => log(`fichier ${file.name}`)}
+            uploading={false}
+            cloudImport={{
+              ...CATALOG_CLOUD_PICKER,
+              onImport: (_space, files) =>
+                log(`importé ${files.map((file) => file.name).join(', ')}`),
+            }}
+          />
+          <EntityImageField
+            variant={EntityImageVariant.Avatar}
+            shape={EntityImageShape.Square}
+            picture={
+              <OrganizationAvatar
+                orgId="o1"
+                name="Abyss"
+                hasThumbnail={false}
+                size={AVATAR_SIZE}
+                getLogoUrl={picture}
+              />
+            }
+            label="Changer le logo"
+            accept={['image/*']}
+            onFile={(file) => log(`fichier ${file.name}`)}
+            uploading={false}
+          />
+        </Row>
+      </Example>
+      <Example title="Envoi en cours">
+        <EntityImageField
+          variant={EntityImageVariant.Avatar}
+          shape={EntityImageShape.Square}
+          picture={
+            <OrganizationAvatar
+              orgId="o2"
+              name="Atlas"
+              hasThumbnail={false}
+              size={AVATAR_SIZE}
+              getLogoUrl={picture}
+            />
+          }
+          label="Changer le logo"
+          onFile={(file) => log(`fichier ${file.name}`)}
+          uploading
+        />
+      </Example>
+      <Example title="Bannière d'organisation" maxWidth={720}>
+        <EntityImageField
+          variant={EntityImageVariant.Banner}
+          picture={<BannerPicture />}
+          label="Changer la bannière"
+          accept={['image/*']}
+          onFile={(file) => log(`bannière ${file.name}`)}
+          uploading={false}
+          cloudImport={{
+            ...CATALOG_CLOUD_PICKER,
+            onImport: (_space, files) =>
+              log(`bannière ${files.map((file) => file.name).join(', ')}`),
+          }}
+        />
+      </Example>
+      <Example title="Bannière, envoi en cours" maxWidth={720}>
+        <EntityImageField
+          variant={EntityImageVariant.Banner}
+          picture={<BannerPicture />}
+          label="Changer la bannière"
+          onFile={(file) => log(`bannière ${file.name}`)}
+          uploading
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/LineChart.tsx

@@ -0,0 +1,118 @@
+import { LineChart } from '../../src/components/data/LineChart/LineChart';
+import type {
+  LineChartSeries,
+  LineChartX,
+} from '../../src/components/data/LineChart/LineChart';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { Example, Showcase } from '../frame';
+
+const START = new Date(2026, 9, 13, 0);
+
+const atHour = (hour: number) =>
+  new Date(START.getTime() + hour * 60 * 60 * 1000);
+
+const REQUESTS = [
+  42, 31, 24, 19, 17, 22, 48, 96, 184, 236, 262, 248, 231, 244, 268, 281, 254,
+  212, 168, 131, 104, 86, 67, 51,
+];
+const ERRORS = [
+  1, 0, 0, 0, 1, 0, 2, 4, 9, 6, 5, 4, 12, 18, 7, 5, 4, 3, 3, 2, 1, 1, 0, 1,
+];
+const LATENCY = [
+  88, 84, 81, 80, 79, 83, 94, 118, 141, 152, 158, 155, 149, 162, 171, 166, 150,
+  133, 117, 104, 97, 93, 90, 89,
+];
+
+const hourly = (
+  id: string,
+  label: string,
+  values: number[],
+): LineChartSeries => ({
+  id,
+  label,
+  points: values.map((y, hour) => ({ x: atHour(hour), y })),
+});
+
+const SIX_SERIES: LineChartSeries[] = [
+  'Atlas',
+  'Board',
+  'Draw',
+  'Beam',
+  'Extract',
+  'ShortLink',
+].map((label, index) => ({
+  id: label.toLowerCase(),
+  label,
+  points: Array.from({ length: 12 }, (_, month) => ({
+    x: month + 1,
+    y: 20 + index * 12 + Math.round(10 * Math.sin((month + index) / 2)),
+  })),
+}));
+
+const time = new Intl.DateTimeFormat('fr-FR', {
+  hour: '2-digit',
+  minute: '2-digit',
+});
+const count = new Intl.NumberFormat('fr-FR');
+
+const formatHour = (x: LineChartX) =>
+  time.format(x instanceof Date ? x : new Date(x));
+const formatMonth = (x: LineChartX) =>
+  `M${count.format(x instanceof Date ? x.getMonth() + 1 : x)}`;
+
+export const LineChartPage = () => (
+  <Showcase
+    family="Données"
+    name="LineChart"
+    description="Courbes Nivo sous abyssNivoTheme : couleurs prises dans l'ordre de la palette data.series, légende au-delà d'une série, figure nommée et tableau des valeurs pour les lecteurs d'écran."
+  >
+    <Example title="Une série, aire">
+      <Surface padding={4}>
+        <LineChart
+          series={[hourly('requests', 'Requêtes', REQUESTS)]}
+          height={240}
+          area
+          formatX={formatHour}
+          formatY={(y) => count.format(y)}
+          label="Requêtes par heure, sur 24 heures"
+        />
+      </Surface>
+    </Example>
+    <Example title="Deux séries">
+      <Surface padding={4}>
+        <LineChart
+          series={[
+            hourly('latency', 'Latence p95', LATENCY),
+            hourly('errors', 'Erreurs', ERRORS),
+          ]}
+          height={240}
+          formatX={formatHour}
+          formatY={(y) => count.format(y)}
+          label="Latence et erreurs par heure"
+        />
+      </Surface>
+    </Example>
+    <Example title="Palette des six séries">
+      <Surface padding={4}>
+        <LineChart
+          series={SIX_SERIES}
+          height={240}
+          formatX={formatMonth}
+          formatY={(y) => count.format(y)}
+          label="Contenus créés par outil et par mois"
+        />
+      </Surface>
+    </Example>
+    <Example title="Aucune donnée">
+      <Surface padding={4}>
+        <LineChart
+          series={[{ id: 'requests', label: 'Requêtes', points: [] }]}
+          height={160}
+          formatX={formatHour}
+          formatY={(y) => count.format(y)}
+          label="Requêtes par heure"
+        />
+      </Surface>
+    </Example>
+  </Showcase>
+);

package/catalog/pages/Pagination.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+import { Pagination } from '../../src/components/data/Pagination/Pagination';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+/** A paged list the reader can walk through: the page is held here, as a host would. */
+const LivePagination = ({
+  initialPage,
+  pageCount,
+  label,
+}: {
+  initialPage: number;
+  pageCount: number;
+  label: string;
+}) => {
+  const { log } = useEventLog();
+  const [page, setPage] = useState(initialPage);
+  return (
+    <Pagination
+      page={page}
+      pageCount={pageCount}
+      label={label}
+      onChange={(next) => {
+        setPage(next);
+        log(`page ${next}`);
+      }}
+    />
+  );
+};
+
+export const PaginationPage = () => (
+  <Showcase
+    family="Données"
+    name="Pagination"
+    description="Navigation entre les pages d'une liste : précédent, numéros avec ellipses, suivant ; sous 768 px, précédent, « Page x sur y », suivant."
+  >
+    <Example title="Cinq pages">
+      <LivePagination initialPage={2} pageCount={5} label="Pages des membres" />
+    </Example>
+    <Example title="Quarante pages, au milieu">
+      <LivePagination
+        initialPage={18}
+        pageCount={40}
+        label="Pages des permissions"
+      />
+    </Example>
+    <Example title="Quarante pages, près du début">
+      <LivePagination initialPage={3} pageCount={40} label="Pages du journal" />
+    </Example>
+    <LastEvent />
+  </Showcase>
+);

package/catalog/pages/Section.tsx

@@ -1,6 +1,9 @@
 import Button from '@mui/material/Button';
 import ArrowForwardRounded from '@mui/icons-material/ArrowForwardRounded';
-import { Section } from '../../src/components/structure/Section/Section';
+import {
+  Section,
+  SectionTone,
+} from '../../src/components/structure/Section/Section';
 import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
 import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
 import { ACCOUNTS, LONG_NAV_LABEL, formatEuro } from '../fixtures';
@@ -12,7 +15,7 @@ export const SectionPage = () => {
     <Showcase
       family="Structure"
       name="Section"
-      description="Bloc titré d'une page : titre de 16 px, compteur en mono, actions alignées à droite."
+      description="Bloc titré d'une page : titre de 16 px, compteur en mono, actions alignées à droite. En ton danger, titre et filet en rouge."
     >
       <Example title="Avec compteur et action">
         <Section
@@ -67,6 +70,17 @@ export const SectionPage = () => {
           />
         </Section>
       </Example>
+      <Example title="Zone de danger">
+        <Section title="Zone de danger" tone={SectionTone.Danger}>
+          <Button
+            variant="outlined"
+            color="error"
+            onClick={() => log('supprimer l’organisation')}
+          >
+            Supprimer l’organisation
+          </Button>
+        </Section>
+      </Example>
       <Example title="Titre de 200 caractères sans espace">
         <Section title={LONG_NAV_LABEL} count={12}>
           <LastEvent />