@sia-ui/cli 0.2.2 → 0.3.1

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

@@ -1,5 +1,236 @@
-.sia-avatar { display:inline-grid; place-items:center; overflow:hidden; border-radius:50%; color:var(--sia-primary-foreground); background:var(--sia-primary); font-weight:750; line-height:1; }
-.sia-avatar img { width:100%; height:100%; object-fit:cover; }
-.sia-avatar--sm { width:2rem; height:2rem; font-size:.72rem; }
-.sia-avatar--md { width:2.75rem; height:2.75rem; font-size:.85rem; }
-.sia-avatar--lg { width:4rem; height:4rem; font-size:1.1rem; }
+/**
+ * L'avatar.
+ *
+ * Tout repose sur une teinte, `--sia-avatar-tint`, posée par une classe et
+ * consommée par les trois variantes. Changer de variante ne redéfinit donc
+ * jamais la couleur : c'est ce qui permet à une teinte dérivée du nom de
+ * survivre à `soft`, `solid` et `outline` sans triplement des règles.
+ */
+
+.sia-avatar {
+  --sia-avatar-tint: var(--sia-primary);
+  --sia-avatar-size: 2.5rem;
+  --sia-avatar-radius: 50%;
+
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: var(--sia-avatar-size);
+  height: var(--sia-avatar-size);
+  border: 0;
+  border-radius: var(--sia-avatar-radius);
+  padding: 0;
+  overflow: hidden;
+  font-family: inherit;
+  font-weight: 600;
+  /* Les initiales ne doivent jamais être sélectionnées par un double-clic
+     destiné à ouvrir une fiche. */
+  user-select: none;
+  line-height: 1;
+}
+
+/* ── Le repli ───────────────────────────────────────────────────────────── */
+
+.sia-avatar__fallback {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  /* La même courbure que le parent. Sans elle, l'ombre interne de la
+     variante `outline` dessine un cadre carré que le masque circulaire
+     rogne : il n'en restait que deux fragments verticaux. */
+  border-radius: inherit;
+  /* Une lettre ne se centre pas d'elle-même : la casse haute laisse un vide
+     sous la ligne de base, et l'initiale paraît trop haute. */
+  padding-top: .04em;
+  font-size: calc(var(--sia-avatar-size) * .38);
+  letter-spacing: .01em;
+}
+
+/* ── L'image ────────────────────────────────────────────────────────────── */
+
+.sia-avatar__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* Elle arrive par-dessus le repli, qui tenait la place : rien ne saute,
+     rien ne clignote. */
+  opacity: 0;
+  animation: sia-avatar-image var(--sia-duration-base) var(--sia-easing-standard) forwards;
+}
+@keyframes sia-avatar-image {
+  from { opacity: 0; transform: scale(1.04); }
+  to { opacity: 1; transform: none; }
+}
+
+/* Pendant l'attente, un souffle très léger sur le repli — assez pour dire
+   « ça arrive », pas assez pour attirer l'œil dans une liste de cinquante. */
+.sia-avatar--loading .sia-avatar__fallback {
+  animation: sia-avatar-attente 1.6s ease-in-out infinite;
+}
+@keyframes sia-avatar-attente {
+  50% { opacity: .55; }
+}
+
+/* ── Les variantes ──────────────────────────────────────────────────────── */
+
+/* `soft` : la teinte à faible saturation, posée en dégradé très court. C'est
+   ce qui donne la matière sans crier — un aplat pur paraît plat, un dégradé
+   marqué paraît daté. */
+.sia-avatar--soft .sia-avatar__fallback {
+  background: linear-gradient(
+    145deg,
+    color-mix(in srgb, var(--sia-avatar-tint) 20%, var(--sia-background)),
+    color-mix(in srgb, var(--sia-avatar-tint) 11%, var(--sia-background))
+  );
+  color: color-mix(in srgb, var(--sia-avatar-tint) 82%, var(--sia-foreground));
+}
+
+.sia-avatar--solid .sia-avatar__fallback {
+  background: linear-gradient(
+    145deg,
+    color-mix(in srgb, var(--sia-avatar-tint) 88%, white),
+    var(--sia-avatar-tint)
+  );
+  color: var(--sia-primary-foreground, #fff);
+}
+
+.sia-avatar--outline .sia-avatar__fallback {
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sia-avatar-tint) 45%, transparent);
+  background: var(--sia-background);
+  color: color-mix(in srgb, var(--sia-avatar-tint) 85%, var(--sia-foreground));
+}
+
+/* Le liseré qui détache du fond — indispensable dans une pile. */
+.sia-avatar--ring {
+  box-shadow:
+    0 0 0 2px var(--sia-background),
+    0 0 0 3px color-mix(in srgb, var(--sia-avatar-tint) 30%, transparent);
+}
+
+/* ── Les teintes ────────────────────────────────────────────────────────── */
+
+.sia-avatar--tint-primary { --sia-avatar-tint: var(--sia-primary); }
+.sia-avatar--tint-secondary { --sia-avatar-tint: var(--sia-secondary); }
+.sia-avatar--tint-info { --sia-avatar-tint: var(--sia-info); }
+.sia-avatar--tint-success { --sia-avatar-tint: var(--sia-success); }
+.sia-avatar--tint-warning { --sia-avatar-tint: var(--sia-warning); }
+.sia-avatar--tint-danger { --sia-avatar-tint: var(--sia-danger); }
+
+/* ── Les formes ─────────────────────────────────────────────────────────── */
+
+.sia-avatar--circle { --sia-avatar-radius: 50%; }
+/* Un rayon proportionnel à la taille : un carré arrondi de 2 rem et un de
+   5 rem n'ont pas la même courbure apparente à rayon fixe. */
+.sia-avatar--rounded { --sia-avatar-radius: calc(var(--sia-avatar-size) * .28); }
+.sia-avatar--square { --sia-avatar-radius: calc(var(--sia-avatar-size) * .08); }
+
+/* ── Les tailles ────────────────────────────────────────────────────────── */
+
+.sia-avatar--xs { --sia-avatar-size: 1.5rem; }
+.sia-avatar--sm { --sia-avatar-size: 2rem; }
+.sia-avatar--md { --sia-avatar-size: 2.5rem; }
+.sia-avatar--lg { --sia-avatar-size: 3.25rem; }
+.sia-avatar--xl { --sia-avatar-size: 4.5rem; }
+
+/* ── Le statut ──────────────────────────────────────────────────────────── */
+
+.sia-avatar__status {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: calc(var(--sia-avatar-size) * .26);
+  height: calc(var(--sia-avatar-size) * .26);
+  /* Un minimum absolu : sous six pixels, la pastille n'est plus lisible,
+     quelle que soit la taille de l'avatar. */
+  min-width: .4rem;
+  min-height: .4rem;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--sia-background);
+}
+
+/* Décalée vers l'intérieur sur un cercle : posée au coin d'une boîte carrée,
+   elle sortirait du disque. */
+.sia-avatar--circle .sia-avatar__status {
+  right: calc(var(--sia-avatar-size) * .03);
+  bottom: calc(var(--sia-avatar-size) * .03);
+}
+
+.sia-avatar__status--online { background: var(--sia-success); }
+.sia-avatar__status--busy { background: var(--sia-danger); }
+.sia-avatar__status--away { background: var(--sia-warning); }
+.sia-avatar__status--offline {
+  background: var(--sia-background);
+  box-shadow: 0 0 0 2px var(--sia-background), inset 0 0 0 2px var(--sia-muted);
+}
+
+/* ── Actionnable ────────────────────────────────────────────────────────── */
+
+.sia-avatar--pressable {
+  cursor: pointer;
+  transition:
+    transform var(--sia-duration-fast) var(--sia-easing-standard),
+    box-shadow var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-avatar--pressable:hover { transform: translateY(-1px); }
+.sia-avatar--pressable:active { transform: translateY(0) scale(.96); }
+.sia-avatar--pressable:focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: 2px;
+}
+
+/* ── Le groupe ──────────────────────────────────────────────────────────── */
+
+.sia-avatar-group {
+  --sia-avatar-overlap: .25;
+  display: inline-flex;
+  align-items: center;
+  /* Une marge négative dont l'amplitude suit la taille : un chevauchement
+     fixe disparaît sur les grands avatars et les écrase sur les petits. */
+  padding-left: calc(var(--sia-avatar-size, 2.5rem) * var(--sia-avatar-overlap));
+}
+
+.sia-avatar-group > .sia-avatar {
+  margin-left: calc(var(--sia-avatar-size) * var(--sia-avatar-overlap) * -1);
+  /* Le liseré de la couleur du fond : sans lui, deux teintes voisines se
+     fondent l'une dans l'autre et la pile devient une tache. Son épaisseur
+     suit la taille — deux pixels disparaissent sur un avatar de 4,5 rem. */
+  box-shadow: 0 0 0 calc(var(--sia-avatar-size) * .055) var(--sia-background);
+  transition: transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+
+/* Chaque avatar recouvre le précédent — l'ordre de peinture naturel, sans
+   `z-index`.
+   
+   L'inverse semblait plus logique, et c'est un piège : en mettant le premier
+   devant, chaque suivant est masqué **à gauche**, c'est-à-dire précisément là
+   où commence la lecture. « AK » devenait « K ». Recouvert à droite, chacun
+   garde au moins sa première initiale, et le compteur final reste entier. */
+
+/* Au survol, la pile s'ouvre pour qu'on puisse viser quelqu'un. */
+.sia-avatar-group--spread:hover > .sia-avatar {
+  margin-left: calc(var(--sia-avatar-size) * var(--sia-avatar-overlap) * -.25);
+}
+.sia-avatar-group--spread > .sia-avatar {
+  transition:
+    margin-left var(--sia-duration-base) var(--sia-easing-spring),
+    transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+.sia-avatar-group > .sia-avatar:hover { transform: translateY(-2px); z-index: 10; }
+
+.sia-avatar--overflow .sia-avatar__fallback {
+  background: var(--sia-surface);
+  color: var(--sia-muted);
+  font-size: calc(var(--sia-avatar-size) * .32);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sia-avatar__image,
+  .sia-avatar--loading .sia-avatar__fallback { animation: none; opacity: 1; }
+  .sia-avatar--pressable:hover,
+  .sia-avatar-group > .sia-avatar:hover { transform: none; }
+}

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

@@ -15,6 +15,13 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   spinnerProps?: Omit<SpinnerProps, "label">;
 }
 
+/**
+ * Une étiquette d'état, courte et dense.
+ *
+ * Elle porte un ton, jamais une action : un badge cliquable se confond avec
+ * un bouton petit, et l'on découvre qu'il ne l'était pas en cliquant. Ce
+ * qui agit est un bouton.
+ */
 export function Badge({
   tone: toneProp,
   variant: variantProp,

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

@@ -26,6 +26,13 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   rightIcon?: ReactNode;
 }
 
+/**
+ * L'action, sous toutes ses formes.
+ *
+ * Le chargement y est un état et non un remplacement : le bouton garde sa
+ * taille et son libellé pendant l'appel. Un bouton qui devient un rond
+ * tournant fait bouger la mise en page, et le clic suivant tombe à côté.
+ */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {

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

@@ -59,6 +59,17 @@ function weekNumber(value: string) {
   return Math.ceil((((target.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
 }
 
+/**
+ * Un mois de dates, sélectionnables une à une ou par plage.
+ *
+ * Trois panneaux — jours, mois, années — plutôt qu'un défilement infini :
+ * choisir une date de naissance demande de remonter trente ans, et trente
+ * ans de défilement ne sont pas une navigation.
+ *
+ * Les dates circulent en chaînes `AAAA-MM-JJ`, jamais en objets `Date` : un
+ * `Date` porte une heure et un fuseau dont une date de facture n'a que
+ * faire, et qui la décalent d'un jour une fois sur deux.
+ */
 export function Calendar({
   value,
   defaultValue,

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

@@ -2,6 +2,14 @@ import { type HTMLAttributes } from "react";
 import { cn } from "@sia-ui/utils";
 import "./styles.css";
 
+/**
+ * Une surface qui regroupe ce qui va ensemble.
+ *
+ * Quatre parties séparées — `Card`, `CardHeader`, `CardBody`, `CardFooter` —
+ * plutôt que des props `title` et `footer` : dès qu'un en-tête doit porter
+ * deux boutons et une pastille, une prop ne suffit plus, et l'on se retrouve
+ * à passer du JSX à travers une chaîne.
+ */
 export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card", className)} {...props} />; }
 export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card__header", className)} {...props} />; }
 export function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card__body", className)} {...props} />; }

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

@@ -38,6 +38,14 @@ export interface CheckboxGroupProps {
   children: ReactNode;
 }
 
+/**
+ * Une case, ou un groupe de cases.
+ *
+ * `CheckboxGroup` gère la liste des valeurs cochées; la case seule gère la
+ * sienne. L'état indéterminé est une troisième valeur, pas un entre-deux
+ * visuel : il dit « certains enfants sont cochés », ce qu'aucun booléen ne
+ * sait exprimer.
+ */
 export function CheckboxGroup({
   value,
   defaultValue = [],

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

@@ -2,5 +2,12 @@ import { forwardRef, useState, type InputHTMLAttributes } from "react";
 import { cn } from "@sia-ui/utils";
 import "./styles.css";
 export interface ColorPickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> { onValueChange?: (value: string) => void; showValue?: boolean; }
+/**
+ * Le choix d'une couleur.
+ *
+ * La valeur hexadécimale est affichée à côté du nuancier : deux bleus
+ * voisins ne se distinguent pas à l'œil sur un écran mal calibré, alors que
+ * leurs codes, si.
+ */
 export const ColorPicker = forwardRef<HTMLInputElement, ColorPickerProps>(({ className, onValueChange, showValue = true, value, defaultValue = "#2563eb", ...props }, ref) => { const [internal, setInternal] = useState(String(defaultValue)); const current = value === undefined ? internal : String(value); return <span className={cn("sia-color-picker", className)}><input {...props} ref={ref} type="color" value={current} onChange={(event) => { if (value === undefined) setInternal(event.target.value); onValueChange?.(event.target.value); }} />{showValue && <code>{current}</code>}</span>; });
 ColorPicker.displayName = "ColorPicker";

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

@@ -4,4 +4,11 @@ import "./styles.css";
 
 export interface CommandItem { id: string; label: string; description?: string; keywords?: string[]; icon?: ReactNode; disabled?: boolean; onSelect: () => void; }
 export interface CommandPaletteProps { open: boolean; onOpenChange: (open: boolean) => void; items: CommandItem[]; placeholder?: string; emptyLabel?: string; className?: string; }
+/**
+ * Tout ce que l'application sait faire, au clavier.
+ *
+ * La recherche porte aussi sur des mots-clés invisibles : quelqu'un qui tape
+ * « facture » doit trouver « Nouvelle vente » sans avoir appris comment
+ * l'action s'appelle ici.
+ */
 export function CommandPalette({ open, onOpenChange, items, placeholder = "Rechercher une commande...", emptyLabel = "Aucune commande", className }: CommandPaletteProps) { const [query, setQuery] = useState(""); const [active, setActive] = useState(0); const inputRef = useRef<HTMLInputElement>(null); const filtered = useMemo(() => { const needle = query.trim().toLowerCase(); return items.filter((item) => !needle || [item.label, item.description, ...(item.keywords ?? [])].filter(Boolean).join(" ").toLowerCase().includes(needle)); }, [items, query]); useEffect(() => { if (!open) return; setQuery(""); setActive(0); requestAnimationFrame(() => inputRef.current?.focus()); }, [open]); if (!open) return null; const select = (item: CommandItem | undefined) => { if (!item || item.disabled) return; item.onSelect(); onOpenChange(false); }; return <div className="sia-command-palette__backdrop" onMouseDown={(event) => event.target === event.currentTarget && onOpenChange(false)}><section className={cn("sia-command-palette", className)} role="dialog" aria-modal="true" aria-label="Palette de commandes"><input ref={inputRef} value={query} placeholder={placeholder} aria-label={placeholder} onChange={(event) => { setQuery(event.target.value); setActive(0); }} onKeyDown={(event) => { if (event.key === "Escape") onOpenChange(false); if (event.key === "ArrowDown") { event.preventDefault(); setActive((value) => Math.min(value + 1, filtered.length - 1)); } if (event.key === "ArrowUp") { event.preventDefault(); setActive((value) => Math.max(value - 1, 0)); } if (event.key === "Enter") select(filtered[active]); }} /><div role="listbox">{filtered.length === 0 ? <p>{emptyLabel}</p> : filtered.map((item, index) => <button type="button" role="option" aria-selected={index === active} key={item.id} disabled={item.disabled} onMouseEnter={() => setActive(index)} onClick={() => select(item)}>{item.icon}<span><strong>{item.label}</strong>{item.description && <small>{item.description}</small>}</span></button>)}</div></section></div>; }

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

@@ -16,6 +16,13 @@ export interface ConfirmDialogProps {
   onConfirm: () => void | Promise<void>;
 }
 
+/**
+ * La question qu'on pose avant de détruire.
+ *
+ * `onConfirm` peut rendre une promesse : le bouton reste occupé tant qu'elle
+ * n'a pas abouti. Sans cela, la boîte se referme sur un appel encore en
+ * vol, et l'on ignore si la suppression a eu lieu.
+ */
 export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, tone = "primary", loading = false, onConfirm }: ConfirmDialogProps) {
     const locale = useSiaLocale();
     const cancelLabel = cancelLabelProp ?? locale.cancel;

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

@@ -2,6 +2,13 @@ import { type HTMLAttributes } from "react";
 import { cn } from "@sia-ui/utils";
 import "./styles.css";
 
+/**
+ * La largeur de lecture, et l'espacement vertical.
+ *
+ * Deux réglages posés une fois pour toutes plutôt qu'une marge inventée
+ * écran par écran : des largeurs décidées page après page finissent par
+ * diverger, et personne ne sait plus laquelle fait foi.
+ */
 export function Container({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("sia-container", className)} {...props} />;
 }

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

@@ -1,3 +1,10 @@
 import { Timer, type TimerProps } from "../Timer";
 export type CountdownProps = Omit<TimerProps, "direction">;
+/**
+ * Un `Timer` qui descend.
+ *
+ * Le compte à rebours est assez fréquent — une session qui expire, un code
+ * à usage unique — pour mériter son nom plutôt qu'une prop à ne pas
+ * oublier.
+ */
 export function Countdown(props: CountdownProps) { return <Timer {...props} direction="down" />; }

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

@@ -0,0 +1,230 @@
+import { type Key, type ReactNode } from "react";
+import type { FormValidator } from "@sia-ui/headless";
+import { Modal } from "../Modal";
+import { Form, type FormEntry, type FormShape } from "../Form";
+import { Descriptions } from "../Descriptions";
+import type { DataTableColumn } from "../DataTable/types";
+import { renduCellule } from "../DataTable/values";
+
+/** Laquelle des trois boîtes est ouverte, et sur quelle ligne. */
+export interface CrudDialogState<T> {
+  mode: "create" | "edit" | "view";
+  row?: T;
+  index?: number;
+}
+
+/** Les titres et la forme des boîtes. Tout est facultatif. */
+export interface CrudDialogOptions {
+  createTitle?: ReactNode;
+  createDescription?: ReactNode;
+  editTitle?: ReactNode;
+  editDescription?: ReactNode;
+  viewTitle?: ReactNode;
+  viewDescription?: ReactNode;
+  submitText?: ReactNode;
+  /** Colonnes du formulaire. Deux, au-delà de quatre ou cinq champs. */
+  columns?: number;
+  /** Colonnes de la vue de détail. */
+  detailColumns?: 1 | 2 | 3;
+}
+
+/**
+ * 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.
+ */
+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] = "";
+  return valeurs;
+}
+
+/**
+ * Ne garder d'une ligne que ce que le formulaire sait montrer.
+ *
+ * Une ligne porte souvent plus que ses champs — un identifiant, des dates de
+ * suivi, un objet imbriqué. Les passer au formulaire les renverrait tels
+ * quels à l'envoi, et `isDirty` les compterait comme modifiés.
+ */
+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)) {
+    const valeur = source[nom];
+    valeurs[nom] =
+      typeof valeur === "string" ||
+      typeof valeur === "number" ||
+      typeof valeur === "boolean" ||
+      Array.isArray(valeur)
+        ? (valeur as FormShape[string])
+        : "";
+  }
+  return valeurs;
+}
+
+export interface CrudDialogsProps<T> {
+  state: CrudDialogState<T> | null;
+  onClose: () => void;
+
+  columns: Array<DataTableColumn<T>>;
+  fields?: FormEntry[] | undefined;
+  validate?: FormValidator<FormShape> | undefined;
+  onSubmit?:
+    | ((
+        values: FormShape,
+        context: { mode: "create" | "edit"; row?: T; index?: number },
+      ) => void | Promise<void>)
+    | undefined;
+
+  createDefaults?: FormShape | undefined;
+  toFormValues?: ((row: T) => FormShape) | undefined;
+  renderDetail?: ((row: T, index: number) => ReactNode) | undefined;
+
+  getRowKey?: ((row: T, index: number) => Key) | undefined;
+  dialog?: CrudDialogOptions | undefined;
+}
+
+/**
+ * Les boîtes du CRUD : créer, modifier, consulter.
+ *
+ * Elles n'inventent rien — `Modal` pour la boîte, `Form` pour la saisie,
+ * `Descriptions` pour la lecture. Ce qu'elles apportent est de savoir
+ * laquelle ouvrir, avec quelles valeurs, et de refermer une fois l'envoi
+ * passé.
+ */
+export function CrudDialogs<T>({
+  state,
+  onClose,
+  columns,
+  fields,
+  validate,
+  onSubmit,
+  createDefaults,
+  toFormValues,
+  renderDetail,
+  getRowKey,
+  dialog,
+}: CrudDialogsProps<T>) {
+  const creation = state?.mode === "create";
+  const modification = state?.mode === "edit";
+  const consultation = state?.mode === "view";
+
+  /*
+    Une clé qui change d'une ouverture à l'autre.
+
+    `useLocalForm` fige ses valeurs initiales à la première passe — c'est ce
+    qui rend `isDirty` fiable. Sans remonter le formulaire, la deuxième
+    modification rouvrirait sur la première ligne.
+  */
+  const cle =
+    state === undefined || state === null
+      ? "vide"
+      : `${state.mode}-${
+          state.row !== undefined && state.index !== undefined && getRowKey
+            ? String(getRowKey(state.row, state.index))
+            : String(state.index ?? "")
+        }`;
+
+  const valeurs =
+    modification && state?.row !== undefined && fields
+      ? (toFormValues?.(state.row) ?? valeursDeLigne(state.row, fields))
+      : (createDefaults ?? (fields ? valeursVides(fields) : {}));
+
+  return (
+    <>
+      {fields && (creation || modification) && (
+        <Modal
+          open
+          onOpenChange={(ouvert) => {
+            if (!ouvert) onClose();
+          }}
+          title={
+            creation
+              ? (dialog?.createTitle ?? "Créer")
+              : (dialog?.editTitle ?? "Modifier")
+          }
+          {...(creation
+            ? dialog?.createDescription
+              ? { description: dialog.createDescription }
+              : {}
+            : dialog?.editDescription
+              ? { description: dialog.editDescription }
+              : {})}
+          className="sia-crud-dialog"
+        >
+          <Form
+            key={cle}
+            fields={fields}
+            defaultValues={valeurs}
+            {...(validate ? { validate } : {})}
+            columns={dialog?.columns ?? 1}
+            submitText={
+              dialog?.submitText ?? (creation ? "Créer" : "Enregistrer")
+            }
+            // Une création part de champs vides : exiger une modification
+            // bloquerait l'envoi d'un formulaire dont tous les défauts
+            // conviennent.
+            requireDirty={modification}
+            onSubmit={async (values) => {
+              await onSubmit?.(values, {
+                mode: creation ? "create" : "edit",
+                ...(state?.row !== undefined ? { row: state.row } : {}),
+                ...(state?.index !== undefined ? { index: state.index } : {}),
+              });
+              onClose();
+            }}
+          />
+        </Modal>
+      )}
+
+      {consultation && state?.row !== undefined && (
+        <Modal
+          open
+          onOpenChange={(ouvert) => {
+            if (!ouvert) onClose();
+          }}
+          title={dialog?.viewTitle ?? "Détail"}
+          {...(dialog?.viewDescription
+            ? { description: dialog.viewDescription }
+            : {})}
+          className="sia-crud-dialog"
+        >
+          {renderDetail?.(state.row, state.index ?? 0) ?? (
+            /*
+              À défaut de rendu à soi, les colonnes du tableau.
+
+              Elles disent déjà quoi montrer et comment : un montant y est
+              formaté, un statut y est une pastille. Redemander la même chose
+              sous une autre forme ferait deux descriptions du même objet.
+            */
+            <Descriptions
+              columns={dialog?.detailColumns ?? 2}
+              items={columns
+                .filter((colonne) => colonne.card !== "hidden")
+                .map((colonne) => ({
+                  key: colonne.key,
+                  label: colonne.header,
+                  value: renduCellule(
+                    state.row as T,
+                    state.index ?? 0,
+                    colonne,
+                  ),
+                }))}
+            />
+          )}
+        </Modal>
+      )}
+    </>
+  );
+}