@sia-ui/cli 0.4.0 → 0.6.0

package/dist/registry/package/components/ActivityLog/index.tsx

@@ -0,0 +1,241 @@
+import { useMemo, type Key, type ReactNode } from "react";
+import { cn, formatDateTime } from "@sia-ui/utils";
+import type { TableQuery } from "@sia-ui/headless";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { DataTable } from "../DataTable";
+import type { DataTableColumn, DataTableProps } from "../DataTable/types";
+import { FiltersBar } from "../FiltersBar";
+import { PageHeader } from "../PageHeader";
+import { Pagination } from "../Pagination";
+import { SearchInput } from "../SearchInput";
+import { Select, type SelectOption } from "../Select";
+import { StatusBadge } from "../Badge";
+import "./styles.css";
+
+/** Une entrée de journal, dans sa forme la plus courante. */
+export interface ActivityEntry {
+  id: string | number;
+  /** Quand : une date ISO, un horodatage ou une `Date`. */
+  at: string | number | Date;
+  /** Qui : un nom lisible. */
+  actor: string;
+  /** Quoi : un code — `create`, `delete`, `login`. */
+  action: string;
+  /** Sur quoi : « Projet Atlas », « Compte ovh-prod ». */
+  target?: string | undefined;
+  /** Le type de la cible : `project`, `account`. */
+  targetType?: string | undefined;
+  /** Une phrase de contexte, facultative. */
+  summary?: ReactNode;
+}
+
+/** Un filtre déclaré : une clé de requête et ses choix. */
+export interface ActivityLogFilter {
+  /** La clé envoyée au serveur : `actor`, `action`, `targetType`. */
+  key: string;
+  label: string;
+  options: SelectOption[];
+  /** Cherchable au-delà d'une dizaine de choix. */
+  searchable?: boolean;
+}
+
+export interface ActivityLogProps<T = ActivityEntry> {
+  entries: T[];
+  /**
+   * L'état de la requête : page, taille, recherche, filtres.
+   *
+   * `useDataTableQuery()` le fournit, synchronisé avec l'URL ou le routeur ;
+   * `query.params` part tel quel au serveur. Le journal ne filtre rien
+   * lui-même : un journal se compte en milliers de lignes.
+   */
+  query: TableQuery;
+  totalPages?: number;
+  filters?: ActivityLogFilter[];
+  /** Absente, la recherche n'est pas proposée. */
+  searchPlaceholder?: string;
+
+  /** Par défaut, les colonnes d'une `ActivityEntry`. */
+  columns?: Array<DataTableColumn<T>>;
+  getRowKey?: (row: T, index: number) => Key;
+  /** Le ton de chaque action dans les colonnes par défaut. */
+  actionTones?: Record<string, ComponentTone>;
+  /** Le libellé de chaque action — « Suppression » pour `delete`. */
+  actionLabels?: Record<string, ReactNode>;
+
+  title?: ReactNode;
+  description?: ReactNode;
+  headingLevel?: 1 | 2 | 3;
+
+  loading?: boolean;
+  error?: ReactNode;
+  onRetry?: () => void;
+  empty?: DataTableProps<T>["empty"];
+  className?: string;
+}
+
+/** Les colonnes d'une `ActivityEntry` : quand, qui, quoi, sur quoi. */
+export function activityColumns(
+  options: {
+    actionTones?: Record<string, ComponentTone> | undefined;
+    actionLabels?: Record<string, ReactNode> | undefined;
+  } = {},
+): Array<DataTableColumn<ActivityEntry>> {
+  return [
+    {
+      key: "at",
+      header: "Date",
+      width: "11rem",
+      cell: (entry) => (
+        <time className="sia-activity__date" dateTime={new Date(entry.at).toISOString()}>
+          {formatDateTime(entry.at)}
+        </time>
+      ),
+      card: "meta",
+    },
+    { key: "actor", header: "Acteur", card: "title" },
+    {
+      key: "action",
+      header: "Action",
+      cell: (entry) => (
+        <StatusBadge
+          value={entry.action}
+          {...(options.actionTones ? { tones: options.actionTones } : {})}
+          {...(options.actionLabels ? { labels: options.actionLabels } : {})}
+        />
+      ),
+      card: "meta",
+    },
+    {
+      key: "target",
+      header: "Cible",
+      cell: (entry) =>
+        entry.target || entry.summary ? (
+          <span className="sia-activity__target">
+            {entry.target && <span>{entry.target}</span>}
+            {entry.summary && <small>{entry.summary}</small>}
+          </span>
+        ) : null,
+      card: "meta",
+    },
+  ];
+}
+
+/**
+ * Un journal d'activité, filtrable et paginé par le serveur.
+ *
+ * `AuditMeta` et `Timeline` racontent l'histoire d'un objet ; ce bloc sert
+ * l'autre question — qui a fait quoi, sur tout le système, cette semaine.
+ * Filtres déclarés, recherche temporisée, pagination et taille de page : tout
+ * passe par la requête, rien n'est filtré dans le navigateur.
+ */
+export function ActivityLog<T = ActivityEntry>({
+  entries,
+  query,
+  totalPages,
+  filters = [],
+  searchPlaceholder,
+  columns,
+  getRowKey,
+  actionTones,
+  actionLabels,
+  title,
+  description,
+  headingLevel,
+  loading = false,
+  error,
+  onRetry,
+  empty,
+  className,
+}: ActivityLogProps<T>) {
+  const colonnes = useMemo(
+    () =>
+      columns ??
+      (activityColumns({ actionTones, actionLabels }) as unknown as Array<
+        DataTableColumn<T>
+      >),
+    [actionLabels, actionTones, columns],
+  );
+
+  const actifs =
+    filters.filter((filtre) => query.state.filters[filtre.key]).length +
+    (query.state.search ? 1 : 0);
+
+  const cle =
+    getRowKey ??
+    ((row: T, index: number) => (row as { id?: Key }).id ?? index);
+
+  return (
+    <section className={cn("sia-activity", className)}>
+      {title && (
+        <PageHeader
+          title={title}
+          {...(description ? { description } : {})}
+          {...(headingLevel ? { level: headingLevel } : {})}
+        />
+      )}
+
+      {(filters.length > 0 || searchPlaceholder) && (
+        <FiltersBar
+          {...(searchPlaceholder
+            ? {
+                search: (
+                  <SearchInput
+                    // Remonté à la réinitialisation : le champ reprend la
+                    // recherche en vigueur plutôt que sa saisie d'avant.
+                    key={query.state.search === "" ? "vide" : "saisie"}
+                    defaultValue={query.state.search}
+                    placeholder={searchPlaceholder}
+                    searchDelay={300}
+                    onSearch={query.setSearch}
+                  />
+                ),
+              }
+            : {})}
+          filters={filters.map((filtre) => (
+            <div className="sia-activity__filter" key={filtre.key}>
+              <Select
+                aria-label={filtre.label}
+                placeholder={filtre.label}
+                options={filtre.options}
+                value={query.state.filters[filtre.key] ?? ""}
+                clearable
+                searchable={filtre.searchable ?? filtre.options.length > 10}
+                onValueChange={(valeur) => query.setFilter(filtre.key, valeur)}
+              />
+            </div>
+          ))}
+          activeCount={actifs}
+          onReset={query.reset}
+        />
+      )}
+
+      <DataTable<T>
+        columns={colonnes}
+        data={entries}
+        getRowKey={cle}
+        loading={loading}
+        {...(error ? { error } : {})}
+        {...(onRetry ? { onRetry } : {})}
+        empty={
+          empty ?? {
+            title: actifs > 0 ? "Aucune activité pour ces filtres" : "Aucune activité",
+            ...(actifs > 0
+              ? { description: "Élargissez la période ou retirez un filtre." }
+              : {}),
+          }
+        }
+      />
+
+      {totalPages !== undefined && (
+        <Pagination
+          page={query.state.page}
+          totalPages={totalPages}
+          onPageChange={query.setPage}
+          pageSize={query.state.perPage}
+          onPageSizeChange={query.setPerPage}
+          showTotal
+        />
+      )}
+    </section>
+  );
+}

package/dist/registry/package/components/ActivityLog/styles.css

@@ -0,0 +1,31 @@
+/* Même rythme vertical que la page de liste : en-tête, filtres, tableau,
+   pagination, séparés d'un seul écart. */
+.sia-activity {
+  container: sia-activity / inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+.sia-activity > .sia-page-header { margin-bottom: 0; }
+
+/* Un filtre a une largeur de lecture, pas toute la barre : quatre filtres
+   tiennent côte à côte avant de passer à la ligne. */
+.sia-activity__filter { width: 12rem; max-width: 100%; }
+
+/* Étroit : chaque filtre prend la ligne, comme la recherche au-dessus —
+   des champs de largeurs différentes empilés donnent un bord droit en
+   escalier. */
+@container sia-activity (max-width: 34rem) {
+  .sia-activity .sia-filters-bar__filters { width: 100%; }
+  .sia-activity__filter { width: 100%; }
+}
+
+.sia-activity__date {
+  color: var(--sia-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.sia-activity__target { display: grid; gap: .1rem; min-width: 0; }
+.sia-activity__target small { color: var(--sia-muted); font-size: .78rem; }

package/dist/registry/package/components/Badge/index.tsx

@@ -67,3 +67,61 @@ export function Badge({
     </span>
   );
 }
+
+/**
+ * Le ton d'une valeur, lu dans une table de correspondance.
+ *
+ * Un statut, une action de journal, un environnement : chaque écran tenait
+ * sa propre table et sa propre fonction pour la lire. Celle-ci est la seule.
+ *
+ * ```ts
+ * const TONS = { payee: "success", attente: "warning", annulee: "danger" };
+ * toneOf(TONS, facture.statut); // "success" | … | "neutral"
+ * ```
+ */
+export function toneOf(
+  tones: Readonly<Record<string, ComponentTone>> | undefined,
+  value: unknown,
+  fallback: ComponentTone = "neutral",
+): ComponentTone {
+  if (value === null || value === undefined) return fallback;
+  return tones?.[String(value)] ?? fallback;
+}
+
+export interface StatusBadgeProps extends Omit<BadgeProps, "tone" | "children"> {
+  /** La valeur brute : `"payee"`, `"prod"`, `"delete"`. */
+  value: string | number | null | undefined;
+  /** Le ton de chaque valeur. */
+  tones?: Readonly<Record<string, ComponentTone>>;
+  /** Le libellé de chaque valeur. À défaut, la valeur elle-même. */
+  labels?: Readonly<Record<string, ReactNode>>;
+  /** Le ton d'une valeur absente de `tones`. `neutral` par défaut. */
+  fallbackTone?: ComponentTone;
+  /** Ce qui s'affiche sans valeur. Rien par défaut. */
+  empty?: ReactNode;
+}
+
+/**
+ * Une valeur rendue en pastille, ton et libellé tirés de deux tables.
+ *
+ * Déclarées une fois par domaine — les statuts de facture, les actions du
+ * journal — puis passées partout où la valeur s'affiche : colonne libre,
+ * détail, carte. Une valeur inconnue garde une pastille neutre plutôt que de
+ * disparaître.
+ */
+export function StatusBadge({
+  value,
+  tones,
+  labels,
+  fallbackTone = "neutral",
+  empty = null,
+  ...props
+}: StatusBadgeProps) {
+  if (value === null || value === undefined || value === "") return <>{empty}</>;
+  const brut = String(value);
+  return (
+    <Badge tone={toneOf(tones, brut, fallbackTone)} {...props}>
+      {labels?.[brut] ?? brut}
+    </Badge>
+  );
+}

package/dist/registry/package/components/Calendar/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, type ReactNode } from "react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { cn, toneClass } from "@sia-ui/utils";
 import type { ComponentTone } from "@sia-ui/tokens";
 import { ChevronLeftIcon, ChevronRightIcon } from "../Icons";
@@ -119,10 +119,10 @@ export function Calendar({
     if (mode === undefined) setPanelMode(next);
     onPanelChange?.(monthIso(controlledMonth), next);
   };
-  const isDisabled = (date: string) => Boolean(
+  const isDisabled = useCallback((date: string) => Boolean(
     disabledDate?.(date) ||
     (validRange && (date < validRange[0] || date > validRange[1])),
-  );
+  ), [disabledDate, validRange]);
   const selectDate = (date: string) => {
     if (isDisabled(date)) return;
     if (selectionMode === "range") {
@@ -160,7 +160,7 @@ export function Calendar({
         ...(rangeEdge ? { rangeEdge } : {}),
       };
     });
-  }, [year, monthIndex, firstDayOfWeek, disabledDate, validRange, currentValue, currentRange.start, currentRange.end]);
+  }, [year, monthIndex, firstDayOfWeek, isDisabled, currentValue, currentRange.start, currentRange.end]);
   const weekdays = Array.from({ length: 7 }, (_, index) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2024, 0, 7 + firstDayOfWeek + index)));
   const monthName = new Intl.DateTimeFormat(locale, { month: "long" }).format(controlledMonth);
   const updateFromString = (next: string) => setMonth(parseMonth(next));

package/dist/registry/package/components/CrudPage/dialogs.tsx

@@ -1,7 +1,16 @@
 import { type Key, type ReactNode } from "react";
-import type { FormValidator } from "@sia-ui/headless";
+import {
+  hasFormErrors,
+  type FormSubmitResult,
+  type FormValidator,
+} from "@sia-ui/headless";
 import { Modal } from "../Modal";
-import { Form, type FormEntry, type FormShape } from "../Form";
+import {
+  Form,
+  formFieldNames,
+  type FormEntry,
+  type FormShape,
+} from "../Form";
 import { Descriptions } from "../Descriptions";
 import type { DataTableColumn } from "../DataTable/types";
 import { renduCellule } from "../DataTable/values";
@@ -29,24 +38,12 @@ export interface CrudDialogOptions {
 }
 
 /**
- * Les noms de champs, groupes aplatis.
- *
- * Servent à fabriquer un formulaire vide : sans valeur initiale déclarée, un
- * champ non contrôlé le devient à la première frappe, et React s'en plaint à
- * juste titre.
+ * Un formulaire vide : sans valeur initiale déclarée, un champ non contrôlé
+ * le devient à la première frappe, et React s'en plaint à juste titre.
  */
-function nomsDeChamps(fields: FormEntry[]): string[] {
-  const noms: string[] = [];
-  for (const entree of fields) {
-    if ("group" in entree) noms.push(...entree.fields.map((f) => f.name));
-    else noms.push(entree.name);
-  }
-  return noms;
-}
-
 export function valeursVides(fields: FormEntry[]): FormShape {
   const valeurs: FormShape = {};
-  for (const nom of nomsDeChamps(fields)) valeurs[nom] = "";
+  for (const nom of formFieldNames(fields)) valeurs[nom] = "";
   return valeurs;
 }
 
@@ -60,7 +57,7 @@ export function valeursVides(fields: FormEntry[]): FormShape {
 export function valeursDeLigne<T>(row: T, fields: FormEntry[]): FormShape {
   const source = row as Record<string, unknown>;
   const valeurs: FormShape = {};
-  for (const nom of nomsDeChamps(fields)) {
+  for (const nom of formFieldNames(fields)) {
     const valeur = source[nom];
     valeurs[nom] =
       typeof valeur === "string" ||
@@ -80,11 +77,18 @@ export interface CrudDialogsProps<T> {
   columns: Array<DataTableColumn<T>>;
   fields?: FormEntry[] | undefined;
   validate?: FormValidator<FormShape> | undefined;
+  /**
+   * Les champs et la validation de la modification, quand ils diffèrent de
+   * la création — un mot de passe exigé à la création seulement. À défaut,
+   * `fields` et `validate` servent aux deux.
+   */
+  editFields?: FormEntry[] | undefined;
+  editValidate?: FormValidator<FormShape> | undefined;
   onSubmit?:
     | ((
         values: FormShape,
         context: { mode: "create" | "edit"; row?: T; index?: number },
-      ) => void | Promise<void>)
+      ) => FormSubmitResult<FormShape> | Promise<FormSubmitResult<FormShape>>)
     | undefined;
 
   createDefaults?: FormShape | undefined;
@@ -107,8 +111,10 @@ export function CrudDialogs<T>({
   state,
   onClose,
   columns,
-  fields,
-  validate,
+  fields: champsCreation,
+  validate: validationCreation,
+  editFields,
+  editValidate,
   onSubmit,
   createDefaults,
   toFormValues,
@@ -119,6 +125,10 @@ export function CrudDialogs<T>({
   const creation = state?.mode === "create";
   const modification = state?.mode === "edit";
   const consultation = state?.mode === "view";
+  const fields = modification ? (editFields ?? champsCreation) : champsCreation;
+  const validate = modification
+    ? (editValidate ?? validationCreation)
+    : validationCreation;
 
   /*
     Une clé qui change d'une ouverture à l'autre.
@@ -177,11 +187,14 @@ export function CrudDialogs<T>({
             // conviennent.
             requireDirty={modification}
             onSubmit={async (values) => {
-              await onSubmit?.(values, {
+              const resultat = await onSubmit?.(values, {
                 mode: creation ? "create" : "edit",
                 ...(state?.row !== undefined ? { row: state.row } : {}),
                 ...(state?.index !== undefined ? { index: state.index } : {}),
               });
+              // Refusé par le serveur : la boîte reste ouverte, les erreurs
+              // sous les champs. La fermer perdrait la saisie.
+              if (hasFormErrors(resultat)) return resultat;
               onClose();
             }}
           />

package/dist/registry/package/components/CrudPage/index.tsx

@@ -1,11 +1,15 @@
 import { useMemo, useState, type Key, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import type { FormValidator, PermissionRule } from "@sia-ui/headless";
+import type {
+  FormSubmitResult,
+  FormValidator,
+  PermissionRule,
+} from "@sia-ui/headless";
 import { PageHeader } from "../PageHeader";
 import { Button } from "../Button";
 import { Pagination } from "../Pagination";
 import { DataTable } from "../DataTable";
-import { EyeIcon, PlusIcon, TrashIcon } from "../Icons";
+import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "../Icons";
 import type {
   DataTableColumn,
   DataTableProps,
@@ -65,6 +69,12 @@ interface CrudPageBase<T> {
   title?: ReactNode;
   description?: ReactNode;
   eyebrow?: ReactNode;
+  /**
+   * Le niveau du titre. `1` pour un écran ; `2` quand la liste est une
+   * section d'une fiche — les comptes d'un fournisseur — qui a déjà son
+   * `<h1>`.
+   */
+  headingLevel?: 1 | 2 | 3;
 
   data: T[];
   getRowKey?: (row: T, index: number) => Key;
@@ -98,11 +108,16 @@ interface CrudPageBase<T> {
    */
   fields?: FormEntry[];
 
-  /** Ce que la page fait d'un formulaire envoyé. */
+  /**
+   * Ce que la page fait d'un formulaire envoyé.
+   *
+   * Rendre des erreurs par champ, ou lever une `HttpError`, garde la boîte
+   * ouverte avec les erreurs affichées ; sinon elle se ferme.
+   */
   onSubmit?: (
     values: FormShape,
     context: { mode: "create" | "edit"; row?: T; index?: number },
-  ) => void | Promise<void>;
+  ) => FormSubmitResult<FormShape> | Promise<FormSubmitResult<FormShape>>;
 
   /**
    * La validation, sous la même forme que `Form`.
@@ -164,6 +179,8 @@ interface CrudPageBase<T> {
   searchKeys?: string[];
   searchPlaceholder?: string;
   onSearch?: (query: string) => void;
+  /** Temporise `onSearch` — voir `DataTable`. 300 pour une recherche serveur. */
+  searchDelay?: number;
 
   loading?: boolean;
   error?: ReactNode;
@@ -173,6 +190,11 @@ interface CrudPageBase<T> {
   page?: number;
   totalPages?: number;
   onPageChange?: (page: number) => void;
+  /** Avec `onPageSizeChange`, ajoute le choix du nombre de lignes par page. */
+  pageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
+  /** Les tailles proposées — voir `Pagination`. */
+  pageSizeOptions?: number[];
 
   /**
    * Ce qui n'a pas de raccourci ici passe au tableau tel quel — densité,
@@ -213,21 +235,6 @@ export type CrudPageProps<T> = CrudPageBase<T> &
       }
   );
 
-/** Une icône de crayon. Dessinée ici : le jeu commun n'en a pas. */
-function EditIcon() {
-  return (
-    <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-      <path
-        d="M4 20h4l10-10a2.5 2.5 0 0 0-3.5-3.5L4.5 16.5 4 20Z"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.7"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
 /**
  * Une page de liste, avec ses quatre opérations.
  *
@@ -243,6 +250,7 @@ export function CrudPage<T>({
   title,
   description,
   eyebrow,
+  headingLevel,
   columns: colonnesFournies,
   data,
   getRowKey: cleFournie,
@@ -266,6 +274,7 @@ export function CrudPage<T>({
   searchKeys: clesDeRecherche,
   searchPlaceholder,
   onSearch,
+  searchDelay,
   loading = false,
   error,
   onRetry,
@@ -273,6 +282,9 @@ export function CrudPage<T>({
   page,
   totalPages,
   onPageChange,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions,
   table,
   children,
   className,
@@ -293,8 +305,10 @@ export function CrudPage<T>({
         ? {
             columns: resourceColumns(resource),
             detailColumns: resourceDetailColumns(resource),
-            fields: resourceFormFields(resource),
-            validate: resourceValidator(resource),
+            fields: resourceFormFields(resource, "create"),
+            validate: resourceValidator(resource, "create"),
+            editFields: resourceFormFields(resource, "edit"),
+            editValidate: resourceValidator(resource, "edit"),
             searchKeys: resourceSearchKeys(resource),
             defaults: resourceDefaults(resource),
             getRowKey: resourceRowKey(resource),
@@ -393,7 +407,7 @@ export function CrudPage<T>({
     };
 
     ajouter("view", consulter, { label: "Consulter", icon: <EyeIcon /> });
-    ajouter("edit", modifier, { label: "Modifier", icon: <EditIcon /> });
+    ajouter("edit", modifier, { label: "Modifier", icon: <PencilIcon /> });
     ajouter("delete", onDelete, {
       label: "Supprimer",
       icon: <TrashIcon />,
@@ -416,11 +430,17 @@ export function CrudPage<T>({
       return actionsDeLigne.length > 0 ? actionsDeLigne : undefined;
     }
 
+    // Les ajouts se glissent avant « Supprimer » : la destruction reste la
+    // dernière action, là où on ne la vise pas par mégarde.
+    const suppression = actionsDeLigne.filter((a) => a.key === "delete");
+    const autres = actionsDeLigne.filter((a) => a.key !== "delete");
+
     return (row: T, index: number) => [
-      ...actionsDeLigne,
+      ...autres,
       ...(typeof extraRowActions === "function"
         ? extraRowActions(row, index)
         : extraRowActions),
+      ...suppression,
     ];
   }, [actionsDeLigne, extraRowActions]);
 
@@ -438,8 +458,11 @@ export function CrudPage<T>({
 
   const boutonCreer =
     creer && creation && creationAutorisee ? (
-      <Button onClick={creer} disabled={creation.disabled ?? false}>
-        {creation.icon ?? <PlusIcon />}
+      <Button
+        onClick={creer}
+        disabled={creation.disabled ?? false}
+        leftIcon={creation.icon ?? <PlusIcon />}
+      >
         {creation.label ?? derive?.label?.create ?? "Créer"}
       </Button>
     ) : null;
@@ -459,6 +482,7 @@ export function CrudPage<T>({
           ? { description: description ?? resource?.description }
           : {})}
         {...(eyebrow ? { eyebrow } : {})}
+        {...(headingLevel ? { level: headingLevel } : {})}
         {...(enTeteActions ? { actions: enTeteActions } : {})}
       />
 
@@ -471,6 +495,7 @@ export function CrudPage<T>({
           {...(searchKeys ? { searchKeys } : {})}
           {...(searchPlaceholder ? { searchPlaceholder } : {})}
           {...(onSearch ? { onSearch } : {})}
+          {...(searchDelay !== undefined ? { searchDelay } : {})}
           {...(toutesLesActions ? { rowActions: toutesLesActions } : {})}
           {...(can ? { can } : {})}
           loading={loading}
@@ -485,12 +510,12 @@ export function CrudPage<T>({
                     size="sm"
                     variant="outline"
                     tone="danger"
+                    leftIcon={<TrashIcon />}
                     onClick={async () => {
                       await onBulkDelete(keys, rows);
                       clear();
                     }}
                   >
-                    <TrashIcon />
                     Supprimer
                   </Button>
                 ),
@@ -513,6 +538,10 @@ export function CrudPage<T>({
         columns={derive?.detailColumns ?? columns}
         fields={fields}
         validate={validate}
+        // Les champs fournis à la main servent aux deux modes ; ceux de la
+        // ressource suivent `inForm` et `required` mode par mode.
+        editFields={champsFournis ?? derive?.editFields}
+        editValidate={validationFournie ?? derive?.editValidate}
         onSubmit={onSubmit}
         createDefaults={createDefaults ?? derive?.defaults}
         toFormValues={toFormValues}
@@ -543,6 +572,9 @@ export function CrudPage<T>({
           totalPages={totalPages}
           onPageChange={onPageChange}
           showTotal
+          {...(pageSize !== undefined ? { pageSize } : {})}
+          {...(onPageSizeChange ? { onPageSizeChange } : {})}
+          {...(pageSizeOptions ? { pageSizeOptions } : {})}
         />
       )}
     </section>