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

package/README.md

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

package/catalog/catalog-entries.ts

@@ -52,6 +52,9 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('FilterBar', 'structure', 'filter-bar', RESPONSIVE),
   entry('SplitView', 'structure', 'split-view', RESPONSIVE),
   entry('Tabs', 'structure', 'tabs', RESPONSIVE),
+  entry('AmbientBackground', 'structure', 'ambient-background', {
+    mobileCapture: true,
+  }),
   entry('NotificationsMenu', 'structure', 'notifications-menu', {
     mobileCapture: true,
   }),
@@ -66,6 +69,9 @@ 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('BarChart', 'data', 'bar-chart'),
   entry('ChartTheme', 'data', 'chart-theme'),
   entry('UsageMeter', 'data', 'usage-meter'),
   entry('StatusBadge', 'meaning', 'status-badge'),
@@ -75,6 +81,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', {
@@ -83,6 +91,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('QRCodeModal', 'business', 'qr-code-modal', { mobileCapture: true }),
   entry('Modal', 'layers', 'modal', { mobileCapture: true }),
   entry('ConfirmDialog', 'layers', 'confirm-dialog'),
+  entry('ConfirmDialogWarning', 'layers', 'confirm-dialog-warning'),
   entry('Drawer', 'layers', 'drawer'),
   entry('Menu', 'layers', 'menu'),
   entry('Toast', 'layers', 'toast'),
@@ -97,6 +106,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/AmbientBackground.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+import {
+  AmbientBackground,
+  AmbientBackgroundPlacement,
+} from '../../src/components/structure/AmbientBackground/AmbientBackground';
+import { hairline, px } from '../../src/theme/components/shared';
+import { Example, Showcase } from '../frame';
+
+/** A panel the background stops at: positioned, clipped, as a host lays it out. */
+const Panel = styled('div')(({ theme }) => {
+  const { tokens, space, radii, typeScale } = theme.design;
+  return {
+    position: 'relative',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap: px(space[3]),
+    minHeight: px(space[10] * 4),
+    padding: px(space[6]),
+    backgroundColor: tokens['bg.canvas'],
+    border: hairline(tokens['border.subtle']),
+    borderRadius: px(radii.md),
+    color: tokens['text.primary'],
+    fontSize: px(typeScale.body),
+  };
+});
+
+/** The content of a panel, laid above its background. */
+const Content = styled('div')(({ theme }) => ({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: px(theme.design.space[2]),
+}));
+
+const Title = styled('strong')(({ theme }) => ({
+  fontSize: px(theme.design.typeScale.sectionTitle),
+}));
+
+const PausableScanner = () => {
+  const [scanning, setScanning] = useState(true);
+  return (
+    <Panel>
+      <AmbientBackground
+        placement={AmbientBackgroundPlacement.Container}
+        paused={!scanning}
+      />
+      <Content>
+        <Title>{scanning ? 'Analyse en cours…' : 'Analyse terminée'}</Title>
+        <Button variant="outlined" onClick={() => setScanning(!scanning)}>
+          {scanning ? 'Figer le fond' : 'Relancer le fond'}
+        </Button>
+      </Content>
+    </Panel>
+  );
+};
+
+export const AmbientBackgroundPage = () => (
+  <Showcase
+    family="Structure"
+    name="AmbientBackground"
+    description="Fond de décor : lueurs d'accent et de data.series.5 qui dérivent lentement sous le contenu, masquées aux lecteurs d'écran, figées sous prefers-reduced-motion, sous 768 px et en pause."
+  >
+    <Example title="Dans un panneau (placement Container)">
+      <Panel>
+        <AmbientBackground placement={AmbientBackgroundPlacement.Container} />
+        <Content>
+          <Title>Envoyez vos fichiers avec Beam</Title>
+          <span>Le fond reste sous le contenu et ne prend aucun clic.</span>
+        </Content>
+      </Panel>
+    </Example>
+    <Example title="En pause : le scanner de Probe entre deux analyses">
+      <PausableScanner />
+    </Example>
+  </Showcase>
+);

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/BarChart.tsx

@@ -0,0 +1,127 @@
+import {
+  BarChart,
+  BarChartLayout,
+} from '../../src/components/data/BarChart/BarChart';
+import type {
+  BarChartCategory,
+  BarChartSeries,
+} from '../../src/components/data/BarChart/BarChart';
+import { ChartSeriesTone } from '../../src/components/data/chart-series-tone';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { Example, Showcase } from '../frame';
+
+const count = new Intl.NumberFormat('fr-FR');
+const seconds = new Intl.NumberFormat('fr-FR', {
+  style: 'unit',
+  unit: 'second',
+  maximumFractionDigits: 1,
+});
+
+const DURATION: BarChartSeries[] = [{ id: 'duration', label: 'Durée moyenne' }];
+
+const CONFIGS: BarChartCategory[] = [
+  { id: 'invoice', label: 'Factures', values: { duration: 4.2 } },
+  { id: 'receipt', label: 'Reçus', values: { duration: 2.8 } },
+  { id: 'payslip', label: 'Bulletins de paie', values: { duration: 6.1 } },
+  { id: 'id-card', label: 'Pièces d’identité', values: { duration: 3.4 } },
+  { id: 'bank', label: 'Relevés bancaires', values: { duration: 7.9 } },
+];
+
+const OUTCOMES: BarChartSeries[] = [
+  { id: 'succeeded', label: 'Réussies', tone: ChartSeriesTone.Success },
+  { id: 'failed', label: 'Échouées', tone: ChartSeriesTone.Danger },
+];
+
+const OUTCOMES_BY_CONFIG: BarChartCategory[] = [
+  { id: 'invoice', label: 'Factures', values: { succeeded: 412, failed: 9 } },
+  { id: 'receipt', label: 'Reçus', values: { succeeded: 268, failed: 21 } },
+  { id: 'payslip', label: 'Bulletins', values: { succeeded: 133 } },
+  { id: 'id-card', label: 'Identité', values: { succeeded: 96, failed: 14 } },
+  { id: 'bank', label: 'Relevés', values: { succeeded: 57, failed: 3 } },
+];
+
+const TOOLS: BarChartSeries[] = ['Atlas', 'Board', 'Draw'].map((label) => ({
+  id: label.toLowerCase(),
+  label,
+}));
+
+const MONTHS = [
+  'Jan.',
+  'Fév.',
+  'Mars',
+  'Avr.',
+  'Mai',
+  'Juin',
+  'Juil.',
+  'Août',
+  'Sept.',
+  'Oct.',
+  'Nov.',
+  'Déc.',
+];
+
+const BY_MONTH: BarChartCategory[] = MONTHS.map((label, month) => ({
+  id: `m${month + 1}`,
+  label,
+  values: Object.fromEntries(
+    TOOLS.map(({ id }, index) => [
+      id,
+      12 + index * 6 + Math.round(8 * Math.sin((month + index) / 2)),
+    ]),
+  ),
+}));
+
+export const BarChartPage = () => (
+  <Showcase
+    family="Données"
+    name="BarChart"
+    description="Barres Nivo sous abyssNivoTheme, groupées ou empilées, verticales ou horizontales : palette data.series ou ton status.* quand la série porte un sens, 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, horizontale">
+      <Surface padding={4}>
+        <BarChart
+          series={DURATION}
+          categories={CONFIGS}
+          height={220}
+          layout={BarChartLayout.Horizontal}
+          formatValue={(value) => seconds.format(value)}
+          label="Durée moyenne d’une extraction par configuration"
+        />
+      </Surface>
+    </Example>
+    <Example title="Empilées, séries à ton (réussites et échecs)">
+      <Surface padding={4}>
+        <BarChart
+          series={OUTCOMES}
+          categories={OUTCOMES_BY_CONFIG}
+          height={240}
+          stacked
+          formatValue={(value) => count.format(value)}
+          label="Extractions réussies et échouées par configuration"
+        />
+      </Surface>
+    </Example>
+    <Example title="Groupées, palette de séries, douze catégories">
+      <Surface padding={4}>
+        <BarChart
+          series={TOOLS}
+          categories={BY_MONTH}
+          height={240}
+          formatValue={(value) => count.format(value)}
+          label="Contenus créés par outil et par mois"
+        />
+      </Surface>
+    </Example>
+    <Example title="Aucune donnée">
+      <Surface padding={4}>
+        <BarChart
+          series={DURATION}
+          categories={[]}
+          height={160}
+          formatValue={(value) => seconds.format(value)}
+          label="Durée moyenne d’une extraction par configuration"
+        />
+      </Surface>
+    </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/ConfirmDialogWarning.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import {
+  ConfirmDialog,
+  ConfirmDialogTone,
+} from '../../src/components/layers/ConfirmDialog/ConfirmDialog';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const ConfirmDialogWarningPage = () => {
+  const { log } = useEventLog();
+  const [open, setOpen] = useState(true);
+  return (
+    <Showcase
+      family="Couches"
+      name="ConfirmDialog — ton Warning"
+      description="Confirmation d'une action permise mais risquée : bouton en status.warning, texte dans l'encre paper la plus contrastée, focus initial sur « Annuler »."
+    >
+      <Example title="Télécharger un fichier encore en analyse">
+        <Button
+          variant="outlined"
+          color="warning"
+          onClick={() => setOpen(true)}
+        >
+          Télécharger contrat-2026.pdf
+        </Button>
+      </Example>
+      <LastEvent />
+      <ConfirmDialog
+        open={open}
+        tone={ConfirmDialogTone.Warning}
+        title="Télécharger un fichier en cours d’analyse ?"
+        body="L’analyse antivirus de contrat-2026.pdf n’est pas terminée : rien ne garantit encore que le fichier est sain."
+        confirmLabel="Télécharger quand même"
+        onConfirm={() => {
+          setOpen(false);
+          log('télécharger');
+        }}
+        onCancel={() => {
+          setOpen(false);
+          log('annuler');
+        }}
+      />
+    </Showcase>
+  );
+};

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"