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

package/README.md

@@ -88,6 +88,84 @@ export const buildRumOptions = () =>
 
 `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/captures-plan.ts

@@ -33,7 +33,8 @@ export type CaptureState =
   | 'arrival'
   | 'sheet-open'
   | 'list-open'
-  | 'calendar-open';
+  | 'calendar-open'
+  | 'panel-open';
 
 /** File name suffix of each state. */
 const STATE_SUFFIX: Record<CaptureState, string> = {
@@ -41,6 +42,7 @@ const STATE_SUFFIX: Record<CaptureState, string> = {
   'sheet-open': '-feuille',
   'list-open': '-liste',
   'calendar-open': '-calendrier',
+  'panel-open': '-ouvert',
 };
 
 /** The states shown beyond arrival: what a closed control hides (options, calendar, sheet). */
@@ -48,6 +50,8 @@ const EXTRA_STATES: Record<string, CaptureState> = {
   SceneMobile: 'sheet-open',
   RichSelect: 'list-open',
   DateField: 'calendar-open',
+  NotificationsMenu: 'panel-open',
+  AccountMenu: 'panel-open',
 };
 
 export interface Capture {

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,23 +51,36 @@ 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,
+  }),
+  entry('AccountMenu', 'structure', 'account-menu'),
   entry('MobileShell', 'mobile', 'mobile-shell', RESPONSIVE),
   entry('BottomSheet', 'mobile', 'bottom-sheet', RESPONSIVE),
   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'),
@@ -79,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/AccountMenu.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import PersonOutline from '@mui/icons-material/PersonOutline';
+import SettingsOutlined from '@mui/icons-material/SettingsOutlined';
+import CreditCardOutlined from '@mui/icons-material/CreditCardOutlined';
+import ForumOutlined from '@mui/icons-material/ForumOutlined';
+import { AccountMenu } from '../../src/components/structure/AccountMenu/AccountMenu';
+import { ThemeMode } from '../../src/theme/tokens/primitives';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+
+export const AccountMenuPage = () => {
+  const { log } = useEventLog();
+  const [mode, setMode] = useState(ThemeMode.Dark);
+
+  return (
+    <Showcase
+      family="Structure"
+      name="AccountMenu"
+      description="Avatar de la barre du haut : identité, entrées de l'hôte, thème sombre, déconnexion."
+    >
+      <Example title="Barre du haut">
+        <Row>
+          <AccountMenu
+            user={{ name: 'Mehdi Abyss', email: 'mehdi@abyss.example' }}
+            themeMode={mode}
+            onThemeModeChange={(next) => {
+              setMode(next);
+              log(`thème ${next}`);
+            }}
+            items={[
+              {
+                id: 'account',
+                label: 'Mon compte',
+                icon: <PersonOutline />,
+                href: '/compte',
+              },
+              {
+                id: 'settings',
+                label: 'Paramètres',
+                icon: <SettingsOutlined />,
+                href: '/compte/parametres',
+              },
+              {
+                id: 'billing',
+                label: 'Facturation',
+                icon: <CreditCardOutlined />,
+                href: '/compte/facturation',
+              },
+              {
+                id: 'discord',
+                label: 'Discord',
+                icon: <ForumOutlined />,
+                onClick: () => log('discord'),
+              },
+            ]}
+            onLogout={() => log('déconnexion')}
+          />
+        </Row>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

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>
+  );
+};

package/catalog/pages/CloudImport.tsx

@@ -0,0 +1,35 @@
+import { CloudImport } from '../../src/components/business/CloudImport/CloudImport';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import {
+  CATALOG_CLOUD_PICKER,
+  CATALOG_FAILED_CLOUD_PICKER,
+} from '../cloud-picker-fixture';
+
+export const CloudImportPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Métier"
+      name="CloudImport"
+      description="Le sélecteur AbyssCloud : espace (le mien, ceux des organisations, ceux partagés avec moi), arborescence, fichiers choisis, import. Les fichiers trop lourds ou d'un type refusé ne sont pas listés."
+    >
+      <Example title="Plusieurs fichiers, PDF et images" maxWidth={768}>
+        <CloudImport
+          cloudPicker={CATALOG_CLOUD_PICKER}
+          multiple
+          accept={['application/pdf', 'image/*']}
+          onImport={(_space, files) =>
+            log(`importé ${files.map((file) => file.name).join(', ')}`)
+          }
+        />
+      </Example>
+      <Example title="Le cloud n'a pas pu être préparé" maxWidth={768}>
+        <CloudImport
+          cloudPicker={CATALOG_FAILED_CLOUD_PICKER}
+          onImport={() => undefined}
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/ContextSelector.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import {
+  ContextKind,
+  ContextSelector,
+} from '../../src/components/inputs/ContextSelector/ContextSelector';
+import type {
+  ContextSelectorData,
+  ContextValue,
+} from '../../src/components/inputs/ContextSelector/ContextSelector';
+import {
+  OrganizationAvatar,
+  ProjectAvatar,
+  UserAvatar,
+} from '../../src/components/meaning/Avatar/Avatar';
+import { LogoAbyssSmall } from '../../src/assets';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const AVATAR = 22;
+const picture = () => LogoAbyssSmall;
+
+const DATA: ContextSelectorData = {
+  personal: {
+    label: 'Mehdi',
+    avatar: (
+      <UserAvatar
+        userId="u1"
+        alias="Mehdi"
+        hasThumbnail
+        size={AVATAR}
+        getProfilePictureUrl={picture}
+      />
+    ),
+  },
+  organizations: [
+    {
+      id: 'o1',
+      name: 'Abyss',
+      avatar: (
+        <OrganizationAvatar
+          orgId="o1"
+          name="Abyss"
+          hasThumbnail={false}
+          size={AVATAR}
+          getLogoUrl={picture}
+        />
+      ),
+      projects: [
+        {
+          id: 'p1',
+          name: 'Atlas',
+          avatar: (
+            <ProjectAvatar
+              projectId="p1"
+              title="Atlas"
+              hasThumbnail={false}
+              size={AVATAR}
+              getProjectPictureUrl={picture}
+            />
+          ),
+        },
+        { id: 'p2', name: 'Refonte du site vitrine' },
+      ],
+    },
+    { id: 'o2', name: 'Karbon Studio' },
+  ],
+};
+
+export const ContextSelectorPage = () => {
+  const { log } = useEventLog();
+  const [value, setValue] = useState<ContextValue>({
+    kind: ContextKind.Organization,
+    organizationId: 'o1',
+  });
+  return (
+    <Showcase
+      family="Saisie"
+      name="ContextSelector"
+      description="Choix de la portée d'une page : mon espace, puis un groupe par organisation (toute l'organisation, puis ses projets). La saisie filtre les entrées."
+    >
+      <Example title="Portée des ressources" maxWidth={480}>
+        <ContextSelector
+          data={DATA}
+          value={value}
+          onChange={(next) => {
+            setValue(next);
+            log(`portée ${next.kind}`);
+          }}
+          label="Espace"
+        />
+      </Example>
+      <Example title="Inactif" maxWidth={480}>
+        <ContextSelector
+          data={DATA}
+          value={{ kind: ContextKind.Personal }}
+          onChange={() => undefined}
+          label="Espace"
+          disabled
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/CopyField.tsx

@@ -0,0 +1,29 @@
+import { CopyField } from '../../src/components/inputs/CopyField/CopyField';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const CopyFieldPage = () => {
+  const { log } = useEventLog();
+  return (
+    <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."
+    >
+      <Example title="Clé d'API, masquée" maxWidth={640}>
+        <CopyField
+          value="abyss_sk_live_5f2c9a7e1b3d4f60a8c2e9b7d1f3a5c7"
+          masked
+          onReveal={() => log('afficher la clé')}
+          copyLabel="Copier la clé"
+        />
+      </Example>
+      <Example title="Identifiant de connexion IA" maxWidth={640}>
+        <CopyField
+          value="https://mcp.abyss-project.fr/u/7f3a9c2e"
+          copyLabel="Copier l'adresse"
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};