@sia-ui/react-web 0.4.0 → 0.6.0

package/dist/index.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ReactElement, HTMLAttributes, RefObject, ImgHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, Key, TextareaHTMLAttributes, ForwardRefExoticComponent, RefAttributes, SVGProps, CSSProperties, PropsWithChildren } from 'react';
-import { ComponentTone, ComponentSize } from '@sia-ui/tokens';
+import { ReactNode, Key, RefObject, ReactElement, HTMLAttributes, ImgHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ForwardRefExoticComponent, RefAttributes, SVGProps, CSSProperties, PropsWithChildren } from 'react';
 import * as _sia_ui_headless from '@sia-ui/headless';
-import { PermissionRule, Placement, SliderValue, FormAdapter, FormValidator, TableQueryStorage, TableQueryState, TableQuery, SessionStore, SessionState, ToastPlacement, ToastId, ToastOptions } from '@sia-ui/headless';
+import { PermissionRule, Placement, TableQuery, SliderValue, FormAdapter, FormValidator, FormSubmitResult, TableQueryStorage, TableQueryState, TableParamsMapping, SessionStore, SessionState, ToastPlacement, ToastId, ToastOptions } from '@sia-ui/headless';
 export { SliderValue, ToastId, ToastOptions, ToastPlacement, ToastTone, toast, toastStore } from '@sia-ui/headless';
+import { ComponentTone, ComponentSize } from '@sia-ui/tokens';
 import { Rule } from '@sia-ui/utils/validation';
 
 interface AccordionItem {
@@ -54,6 +54,330 @@ interface CollapseProps {
 /** Une section seule. Le même rendu, pour le cas le plus courant. */
 declare function Collapse({ title, children, description, meta, icon, open, defaultOpen, onOpenChange, variant, disabled, className, }: CollapseProps): react_jsx_runtime.JSX.Element;
 
+/** Liste dense, ou grille de cartes. */
+type DataTableView = "table" | "cards";
+/**
+ * Le rôle d'une colonne dans la carte.
+ *
+ * `title` sert d'en-tête — la première colonne le prend si rien n'est
+ * déclaré. `meta` s'affiche en paire libellé / valeur. `hidden` reste au
+ * tableau seul : une carte qui recopie douze colonnes n'est plus une carte.
+ */
+type ColumnCardRole = "title" | "meta" | "hidden";
+interface DataTableColumn<T> {
+    key: string;
+    header: ReactNode;
+    /**
+     * Où lire la valeur : une clé de l'objet, ou une fonction pour les valeurs
+     * calculées. Sert au rendu par défaut, à la carte et à la recherche locale.
+     */
+    accessor?: keyof T | ((row: T) => unknown);
+    /** Rendu personnalisé. Prioritaire sur `accessor`. */
+    cell?: (row: T, index: number) => ReactNode;
+    align?: "start" | "center" | "end";
+    /**
+     * Largeur suggérée — `120px`, `20%`.
+     *
+     * En `layout="auto"` (défaut) le navigateur n'y voit qu'une indication.
+     * Pour qu'elle soit tenue, passer en `layout="fixed"`.
+     */
+    width?: string;
+    minWidth?: string;
+    /** Coupe au lieu d'élargir. Indispensable en `layout="fixed"`. */
+    truncate?: boolean;
+    /** Retire la colonne du tableau sans toucher à la carte. */
+    hidden?: boolean;
+    /** Rend l'en-tête cliquable. Le tri lui-même reste au serveur. */
+    sortable?: boolean;
+    /** Le champ envoyé au serveur, si différent de `key`. */
+    sortKey?: string;
+    /** Place de la colonne dans la carte. */
+    card?: ColumnCardRole;
+    headerClassName?: string;
+    cellClassName?: string;
+}
+interface RowAction<T> {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    tone?: ComponentTone;
+    /** Masque l'action pour cette ligne — un solde nul, un envoi déjà annulé. */
+    hidden?: (row: T, index: number) => boolean;
+    disabled?: (row: T, index: number) => boolean;
+    /** Même grammaire de droits que la navigation. */
+    permission?: PermissionRule;
+    /** Demande confirmation. Obligatoire pour tout ce qui détruit. */
+    confirm?: {
+        title: ReactNode;
+        description?: ReactNode;
+        confirmLabel?: string;
+        cancelLabel?: string;
+        destructive?: boolean;
+    };
+    onSelect: (row: T, index: number) => void | Promise<void>;
+}
+interface DataTableProps<T> {
+    columns: Array<DataTableColumn<T>>;
+    data: T[];
+    /** La clé d'une ligne. Sans elle, l'index — à éviter si les lignes bougent. */
+    getRowKey?: (row: T, index: number) => Key;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Zone libre : filtres, sélecteur de période. */
+    toolbar?: ReactNode;
+    /** Actions globales, à droite. */
+    actions?: ReactNode;
+    /**
+     * Les clés sur lesquelles porte la recherche.
+     *
+     * Absente, aucun champ n'est affiché : un tableau sans champ déclaré n'a
+     * rien à chercher. Le filtrage est local, sur les lignes déjà chargées.
+     */
+    searchKeys?: string[];
+    searchPlaceholder?: string;
+    /** Recherche déléguée. Fournie, le tableau cesse de filtrer lui-même. */
+    onSearch?: (query: string) => void;
+    /**
+     * Millisecondes d'inactivité avant d'appeler `onSearch`.
+     *
+     * `0` — le défaut — l'appelle à chaque frappe, ce qui convient à un
+     * filtrage local. Pour une recherche serveur, 300 évite une requête par
+     * lettre ; Entrée et l'effacement déclenchent sans attendre.
+     */
+    searchDelay?: number;
+    layout?: "auto" | "fixed";
+    /** Hauteur du corps. Sans elle, `stickyHeader` n'a rien où se coller. */
+    maxHeight?: string;
+    stickyHeader?: boolean;
+    density?: "compact" | "default" | "comfortable";
+    /** Un fond alterné, une ligne sur deux. */
+    striped?: boolean;
+    bordered?: boolean;
+    rowActions?: Array<RowAction<T>> | ((row: T, index: number) => Array<RowAction<T>>);
+    /** Au-delà, les actions passent dans un menu. */
+    inlineActionsLimit?: number;
+    actionsHeader?: ReactNode;
+    /** `icon` garde la colonne étroite sur un tableau déjà large. */
+    actionsDisplay?: "icon" | "label";
+    /** Évalue les règles de permission des actions. */
+    can?: (rule: PermissionRule) => boolean;
+    view?: DataTableView;
+    defaultView?: DataTableView;
+    onViewChange?: (view: DataTableView) => void;
+    showViewToggle?: boolean;
+    /**
+     * Bascule en cartes sous le point de rupture. Actif par défaut : un
+     * tableau à sept colonnes est illisible sur un téléphone.
+     */
+    responsive?: boolean;
+    cardsBreakpoint?: number;
+    /** Rendu complet d'une carte. Sans lui, elle est déduite des colonnes. */
+    renderCard?: (row: T, index: number) => ReactNode;
+    loading?: boolean;
+    /** Lignes fantômes pendant le premier chargement. */
+    skeletonRows?: number;
+    error?: ReactNode;
+    onRetry?: () => void;
+    empty?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        action?: ReactNode;
+    };
+    /**
+     * Ajoute une colonne de cases à cocher.
+     *
+     * Sur une liste paginée côté serveur, la case d'en-tête ne porte que sur la
+     * page affichée : le composant ne connaît pas les lignes qu'il n'a pas
+     * reçues, et prétendre « tout sélectionner » serait un mensonge.
+     */
+    selectable?: boolean;
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    onSelectionChange?: (keys: Key[], rows: T[]) => void;
+    isRowSelectable?: (row: T, index: number) => boolean;
+    /** Barre affichée dès qu'une ligne est cochée. */
+    selectionActions?: (context: {
+        keys: Key[];
+        rows: T[];
+        clear: () => void;
+    }) => ReactNode;
+    sort?: {
+        field: string;
+        direction: "asc" | "desc";
+    } | null;
+    onSortChange?: (field: string) => void;
+    onRowClick?: (row: T, index: number) => void;
+    rowClassName?: (row: T, index: number) => string | undefined;
+    caption?: string;
+    className?: string;
+}
+
+/**
+ * Les douze placements du moteur de géométrie.
+ *
+ * Ce composant n'en exposait que quatre — haut et bas — parce qu'il calculait
+ * lui-même sa position, en vertical seulement. Le calcul vit dans
+ * `@sia-ui/headless`, sait basculer et recadrer dans les deux axes, et sert
+ * déjà le natif : le refaire ici privait tous les flottants des côtés.
+ */
+type OverlayPlacement = Placement;
+interface OverlayProps {
+    open: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+    placement?: OverlayPlacement;
+    offset?: number;
+    matchAnchorWidth?: boolean;
+    viewportPadding?: number;
+    className?: string;
+    id?: string;
+    role?: string;
+}
+/**
+ * Ce qui flotte à côté d'un élément.
+ *
+ * Le socle des menus, des listes déroulantes et des infobulles. Il place le
+ * panneau parmi douze positions, le retourne quand le bord de la fenêtre
+ * approche, et le ramène dans la vue plutôt que de le laisser déborder.
+ *
+ * Le calcul vit dans `@sia-ui/headless` : il ne dépend d'aucun rendu, et
+ * sert donc aussi à ce qui n'est pas le DOM.
+ */
+declare function Overlay({ open, anchorRef, onOpenChange, children, placement, offset, matchAnchorWidth, viewportPadding, className, ...props }: OverlayProps): react.ReactPortal | null;
+
+interface SelectOption {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    keywords?: string[];
+}
+interface SelectProps {
+    id?: string;
+    name?: string;
+    options?: SelectOption[];
+    /** Compatibility path. Prefer the options prop. */
+    children?: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string, option?: SelectOption) => void;
+    placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    fetcher?: (query: string, signal?: AbortSignal) => Promise<SelectOption[]>;
+    debounce?: number;
+    loadingText?: ReactNode;
+    emptyText?: ReactNode;
+    errorText?: ReactNode;
+    clearable?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    placement?: OverlayPlacement;
+    /**
+     * Ce que montre le déclencheur. Par défaut, le libellé de l'option.
+     *
+     * La liste garde ses libellés complets — « 🇨🇲 Cameroun (+237) » — pendant
+     * que le champ fermé n'affiche que ce qui tient : « 🇨🇲 +237 ».
+     */
+    renderValue?: (option: SelectOption | undefined) => ReactNode;
+    /**
+     * `embedded` retire bordure, fond et largeur pleine du déclencheur : le
+     * `Select` se loge alors dans un autre contrôle — l'indicatif d'un
+     * `PhoneInput`, la taille de page d'une `Pagination`.
+     */
+    variant?: "default" | "embedded";
+    className?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    "aria-labelledby"?: string;
+    "aria-invalid"?: boolean;
+    "aria-required"?: boolean;
+}
+/**
+ * Un choix parmi une liste.
+ *
+ * Le champ n'est pas un `<select>` natif : celui-ci ne sait ni chercher, ni
+ * afficher une description sous chaque option, ni charger ses choix à la
+ * demande. Le comportement clavier du natif, lui, est reproduit — flèches,
+ * première lettre, échappement.
+ *
+ * `fetcher` sert les listes qu'on ne peut pas descendre en entier : la
+ * requête part après la frappe et s'annule si l'on continue à taper.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+/** Une entrée de journal, dans sa forme la plus courante. */
+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. */
+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;
+}
+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. */
+declare function activityColumns(options?: {
+    actionTones?: Record<string, ComponentTone> | undefined;
+    actionLabels?: Record<string, ReactNode> | undefined;
+}): Array<DataTableColumn<ActivityEntry>>;
+/**
+ * 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.
+ */
+declare function ActivityLog<T = ActivityEntry>({ entries, query, totalPages, filters, searchPlaceholder, columns, getRowKey, actionTones, actionLabels, title, description, headingLevel, loading, error, onRetry, empty, className, }: ActivityLogProps<T>): react_jsx_runtime.JSX.Element;
+
 interface AlertProps {
     tone?: ComponentTone;
     title?: ReactNode;
@@ -415,129 +739,46 @@ interface AsyncStateProps {
  */
 declare function AsyncState({ loading, error, empty, emptyTitle, emptyDescription, onRetry, children }: AsyncStateProps): react_jsx_runtime.JSX.Element;
 
-interface AuditEvent {
-    label: ReactNode;
-    at: Date | string | number;
-    by?: ReactNode;
-    detail?: ReactNode;
-}
-interface AuditMetaProps {
-    events: AuditEvent[];
-    locale?: string;
-    title?: ReactNode;
-    emptyLabel?: ReactNode;
-    className?: string;
-}
-/**
- * Qui a fait quoi, et quand.
- *
- * Une liste d'événements plutôt qu'un dernier état : savoir qu'une facture
- * a été validée n'apprend rien si l'on ignore qu'elle avait été rejetée la
- * veille. Les dates sont relatives — « il y a deux jours » se compare sans
- * calcul mental.
- */
-declare function AuditMeta({ events, locale, title, emptyLabel, className }: AuditMetaProps): react_jsx_runtime.JSX.Element;
-
-interface AuthLayoutProps {
-    title: ReactNode;
-    description?: ReactNode;
-    logo?: ReactNode;
-    aside?: ReactNode;
-    children: ReactNode;
-    footer?: ReactNode;
-    className?: string;
-}
-/**
- * La page qui précède l'application : connexion, inscription, mot de passe
- * oublié.
- *
- * Elle n'a ni navigation ni coquille, et c'est délibéré : tout ce qui mène
- * ailleurs est hors de portée de quelqu'un qui n'est pas encore entré.
- */
-declare function AuthLayout({ title, description, logo, aside, children, footer, className, }: AuthLayoutProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Les douze placements du moteur de géométrie.
- *
- * Ce composant n'en exposait que quatre — haut et bas — parce qu'il calculait
- * lui-même sa position, en vertical seulement. Le calcul vit dans
- * `@sia-ui/headless`, sait basculer et recadrer dans les deux axes, et sert
- * déjà le natif : le refaire ici privait tous les flottants des côtés.
- */
-type OverlayPlacement = Placement;
-interface OverlayProps {
-    open: boolean;
-    anchorRef: RefObject<HTMLElement | null>;
-    onOpenChange: (open: boolean) => void;
-    children: ReactNode;
-    placement?: OverlayPlacement;
-    offset?: number;
-    matchAnchorWidth?: boolean;
-    viewportPadding?: number;
-    className?: string;
-    id?: string;
-    role?: string;
-}
-/**
- * Ce qui flotte à côté d'un élément.
- *
- * Le socle des menus, des listes déroulantes et des infobulles. Il place le
- * panneau parmi douze positions, le retourne quand le bord de la fenêtre
- * approche, et le ramène dans la vue plutôt que de le laisser déborder.
- *
- * Le calcul vit dans `@sia-ui/headless` : il ne dépend d'aucun rendu, et
- * sert donc aussi à ce qui n'est pas le DOM.
- */
-declare function Overlay({ open, anchorRef, onOpenChange, children, placement, offset, matchAnchorWidth, viewportPadding, className, ...props }: OverlayProps): react.ReactPortal | null;
-
-interface SelectOption {
-    value: string;
-    label: ReactNode;
-    description?: ReactNode;
-    disabled?: boolean;
-    keywords?: string[];
-}
-interface SelectProps {
-    id?: string;
-    name?: string;
-    options?: SelectOption[];
-    /** Compatibility path. Prefer the options prop. */
-    children?: ReactNode;
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string, option?: SelectOption) => void;
-    placeholder?: string;
-    searchable?: boolean;
-    searchPlaceholder?: string;
-    fetcher?: (query: string, signal?: AbortSignal) => Promise<SelectOption[]>;
-    debounce?: number;
-    loadingText?: ReactNode;
-    emptyText?: ReactNode;
-    errorText?: ReactNode;
-    clearable?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    required?: boolean;
-    placement?: OverlayPlacement;
+interface AuditEvent {
+    label: ReactNode;
+    at: Date | string | number;
+    by?: ReactNode;
+    detail?: ReactNode;
+}
+interface AuditMetaProps {
+    events: AuditEvent[];
+    locale?: string;
+    title?: ReactNode;
+    emptyLabel?: ReactNode;
     className?: string;
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-    "aria-labelledby"?: string;
-    "aria-invalid"?: boolean;
-    "aria-required"?: boolean;
 }
 /**
- * Un choix parmi une liste.
+ * Qui a fait quoi, et quand.
  *
- * Le champ n'est pas un `<select>` natif : celui-ci ne sait ni chercher, ni
- * afficher une description sous chaque option, ni charger ses choix à la
- * demande. Le comportement clavier du natif, lui, est reproduit — flèches,
- * première lettre, échappement.
+ * Une liste d'événements plutôt qu'un dernier état : savoir qu'une facture
+ * a été validée n'apprend rien si l'on ignore qu'elle avait été rejetée la
+ * veille. Les dates sont relatives — « il y a deux jours » se compare sans
+ * calcul mental.
+ */
+declare function AuditMeta({ events, locale, title, emptyLabel, className }: AuditMetaProps): react_jsx_runtime.JSX.Element;
+
+interface AuthLayoutProps {
+    title: ReactNode;
+    description?: ReactNode;
+    logo?: ReactNode;
+    aside?: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+}
+/**
+ * La page qui précède l'application : connexion, inscription, mot de passe
+ * oublié.
  *
- * `fetcher` sert les listes qu'on ne peut pas descendre en entier : la
- * requête part après la frappe et s'annule si l'on continue à taper.
+ * Elle n'a ni navigation ni coquille, et c'est délibéré : tout ce qui mène
+ * ailleurs est hors de portée de quelqu'un qui n'est pas encore entré.
  */
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+declare function AuthLayout({ title, description, logo, aside, children, footer, className, }: AuthLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface AutocompleteProps {
     id?: string;
@@ -675,6 +916,39 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * qui agit est un bouton.
  */
 declare function Badge({ tone: toneProp, variant: variantProp, left, right, loading, loadingLabel: loadingLabelProp, spinnerProps, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+/**
+ * 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"
+ * ```
+ */
+declare function toneOf(tones: Readonly<Record<string, ComponentTone>> | undefined, value: unknown, fallback?: ComponentTone): ComponentTone;
+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.
+ */
+declare function StatusBadge({ value, tones, labels, fallbackTone, empty, ...props }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
 
 interface BreadcrumbItem {
     key?: string;
@@ -1025,156 +1299,6 @@ type CountdownProps = Omit<TimerProps, "direction">;
  */
 declare function Countdown(props: CountdownProps): react_jsx_runtime.JSX.Element;
 
-/** Liste dense, ou grille de cartes. */
-type DataTableView = "table" | "cards";
-/**
- * Le rôle d'une colonne dans la carte.
- *
- * `title` sert d'en-tête — la première colonne le prend si rien n'est
- * déclaré. `meta` s'affiche en paire libellé / valeur. `hidden` reste au
- * tableau seul : une carte qui recopie douze colonnes n'est plus une carte.
- */
-type ColumnCardRole = "title" | "meta" | "hidden";
-interface DataTableColumn<T> {
-    key: string;
-    header: ReactNode;
-    /**
-     * Où lire la valeur : une clé de l'objet, ou une fonction pour les valeurs
-     * calculées. Sert au rendu par défaut, à la carte et à la recherche locale.
-     */
-    accessor?: keyof T | ((row: T) => unknown);
-    /** Rendu personnalisé. Prioritaire sur `accessor`. */
-    cell?: (row: T, index: number) => ReactNode;
-    align?: "start" | "center" | "end";
-    /**
-     * Largeur suggérée — `120px`, `20%`.
-     *
-     * En `layout="auto"` (défaut) le navigateur n'y voit qu'une indication.
-     * Pour qu'elle soit tenue, passer en `layout="fixed"`.
-     */
-    width?: string;
-    minWidth?: string;
-    /** Coupe au lieu d'élargir. Indispensable en `layout="fixed"`. */
-    truncate?: boolean;
-    /** Retire la colonne du tableau sans toucher à la carte. */
-    hidden?: boolean;
-    /** Rend l'en-tête cliquable. Le tri lui-même reste au serveur. */
-    sortable?: boolean;
-    /** Le champ envoyé au serveur, si différent de `key`. */
-    sortKey?: string;
-    /** Place de la colonne dans la carte. */
-    card?: ColumnCardRole;
-    headerClassName?: string;
-    cellClassName?: string;
-}
-interface RowAction<T> {
-    key: string;
-    label: ReactNode;
-    icon?: ReactNode;
-    tone?: ComponentTone;
-    /** Masque l'action pour cette ligne — un solde nul, un envoi déjà annulé. */
-    hidden?: (row: T, index: number) => boolean;
-    disabled?: (row: T, index: number) => boolean;
-    /** Même grammaire de droits que la navigation. */
-    permission?: PermissionRule;
-    /** Demande confirmation. Obligatoire pour tout ce qui détruit. */
-    confirm?: {
-        title: ReactNode;
-        description?: ReactNode;
-        confirmLabel?: string;
-        cancelLabel?: string;
-        destructive?: boolean;
-    };
-    onSelect: (row: T, index: number) => void | Promise<void>;
-}
-interface DataTableProps<T> {
-    columns: Array<DataTableColumn<T>>;
-    data: T[];
-    /** La clé d'une ligne. Sans elle, l'index — à éviter si les lignes bougent. */
-    getRowKey?: (row: T, index: number) => Key;
-    title?: ReactNode;
-    description?: ReactNode;
-    /** Zone libre : filtres, sélecteur de période. */
-    toolbar?: ReactNode;
-    /** Actions globales, à droite. */
-    actions?: ReactNode;
-    /**
-     * Les clés sur lesquelles porte la recherche.
-     *
-     * Absente, aucun champ n'est affiché : un tableau sans champ déclaré n'a
-     * rien à chercher. Le filtrage est local, sur les lignes déjà chargées.
-     */
-    searchKeys?: string[];
-    searchPlaceholder?: string;
-    /** Recherche déléguée. Fournie, le tableau cesse de filtrer lui-même. */
-    onSearch?: (query: string) => void;
-    layout?: "auto" | "fixed";
-    /** Hauteur du corps. Sans elle, `stickyHeader` n'a rien où se coller. */
-    maxHeight?: string;
-    stickyHeader?: boolean;
-    density?: "compact" | "default" | "comfortable";
-    /** Un fond alterné, une ligne sur deux. */
-    striped?: boolean;
-    bordered?: boolean;
-    rowActions?: Array<RowAction<T>> | ((row: T, index: number) => Array<RowAction<T>>);
-    /** Au-delà, les actions passent dans un menu. */
-    inlineActionsLimit?: number;
-    actionsHeader?: ReactNode;
-    /** `icon` garde la colonne étroite sur un tableau déjà large. */
-    actionsDisplay?: "icon" | "label";
-    /** Évalue les règles de permission des actions. */
-    can?: (rule: PermissionRule) => boolean;
-    view?: DataTableView;
-    defaultView?: DataTableView;
-    onViewChange?: (view: DataTableView) => void;
-    showViewToggle?: boolean;
-    /**
-     * Bascule en cartes sous le point de rupture. Actif par défaut : un
-     * tableau à sept colonnes est illisible sur un téléphone.
-     */
-    responsive?: boolean;
-    cardsBreakpoint?: number;
-    /** Rendu complet d'une carte. Sans lui, elle est déduite des colonnes. */
-    renderCard?: (row: T, index: number) => ReactNode;
-    loading?: boolean;
-    /** Lignes fantômes pendant le premier chargement. */
-    skeletonRows?: number;
-    error?: ReactNode;
-    onRetry?: () => void;
-    empty?: {
-        title?: ReactNode;
-        description?: ReactNode;
-        action?: ReactNode;
-    };
-    /**
-     * Ajoute une colonne de cases à cocher.
-     *
-     * Sur une liste paginée côté serveur, la case d'en-tête ne porte que sur la
-     * page affichée : le composant ne connaît pas les lignes qu'il n'a pas
-     * reçues, et prétendre « tout sélectionner » serait un mensonge.
-     */
-    selectable?: boolean;
-    selectedKeys?: Key[];
-    defaultSelectedKeys?: Key[];
-    onSelectionChange?: (keys: Key[], rows: T[]) => void;
-    isRowSelectable?: (row: T, index: number) => boolean;
-    /** Barre affichée dès qu'une ligne est cochée. */
-    selectionActions?: (context: {
-        keys: Key[];
-        rows: T[];
-        clear: () => void;
-    }) => ReactNode;
-    sort?: {
-        field: string;
-        direction: "asc" | "desc";
-    } | null;
-    onSortChange?: (field: string) => void;
-    onRowClick?: (row: T, index: number) => void;
-    rowClassName?: (row: T, index: number) => string | undefined;
-    caption?: string;
-    className?: string;
-}
-
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     invalid?: boolean;
     left?: ReactNode;
@@ -1719,6 +1843,8 @@ interface FormFieldGroup {
     fields: FormFieldConfig[];
 }
 type FormEntry = FormFieldConfig | FormFieldGroup;
+/** Les noms de champs, groupes aplatis. */
+declare function formFieldNames(fields: FormEntry[]): string[];
 /**
  * Les valeurs qu'un formulaire déclaratif peut porter.
  *
@@ -1740,7 +1866,14 @@ interface FormProps<TValues extends FormShape = FormShape> {
     defaultValues?: TValues;
     /** La validation. Un schéma Zod s'y branche en cinq lignes. */
     validate?: FormValidator<TValues>;
-    onSubmit?: (values: TValues) => void | Promise<void>;
+    /**
+     * L'envoi.
+     *
+     * Rendre des erreurs par champ les pose sous les champs. Lever une erreur
+     * l'affiche dans une alerte en tête des boutons — et une `HttpError` de
+     * `@sia-ui/api` voit en plus ses erreurs de champ posées à leur place.
+     */
+    onSubmit?: (values: TValues) => FormSubmitResult<TValues> | Promise<FormSubmitResult<TValues>>;
     columns?: number;
     submitText?: ReactNode;
     clearText?: ReactNode;
@@ -1801,6 +1934,8 @@ declare function Form<TValues extends FormShape = FormShape>({ fields, form: ada
  * même client finissent toujours par diverger, et c'est le formulaire qui
  * oublie le champ que le tableau affiche.
  */
+/** Le formulaire ouvert : une création, ou la modification d'une ligne. */
+type ResourceFormMode = "create" | "edit";
 interface ResourceField<T = unknown> {
     /** Le contrôle de saisie et le rendu par défaut. `text` sans précision. */
     type?: FieldType;
@@ -1809,7 +1944,13 @@ interface ResourceField<T = unknown> {
     description?: ReactNode;
     helpText?: ReactNode;
     placeholder?: string;
-    required?: boolean;
+    /**
+     * Obligatoire toujours, ou dans un seul mode.
+     *
+     * `"create"` sert au mot de passe initial : exigé à la création, facultatif
+     * ensuite — le laisser vide en modification veut dire « inchangé ».
+     */
+    required?: boolean | ResourceFormMode;
     /** Les règles en plus de `required`. Celles du type sont ajoutées seules. */
     rules?: Array<Rule<never>>;
     /** Les choix d'un `select`, `radio` ou `multiselect`. */
@@ -1826,8 +1967,11 @@ interface ResourceField<T = unknown> {
     readOnly?: boolean;
     /** Par défaut, tout sauf les types trop longs pour une cellule. */
     inTable?: boolean;
-    /** Par défaut, tout sauf `readOnly`. */
-    inForm?: boolean;
+    /**
+     * Par défaut, tout sauf `readOnly` et les valeurs calculées. `"create"` ou
+     * `"edit"` limitent le champ à l'un des deux formulaires.
+     */
+    inForm?: boolean | ResourceFormMode;
     /** Par défaut, tout. */
     inDetail?: boolean;
     /** Par défaut, les types textuels. */
@@ -1854,6 +1998,15 @@ interface ResourceField<T = unknown> {
     tones?: Record<string, ComponentTone>;
     /** Le rendu en tableau et en détail. Écrase celui déduit du type. */
     render?: (row: T, index: number) => ReactNode;
+    /**
+     * Une valeur calculée plutôt que lue sur la ligne.
+     *
+     * La colonne peut alors porter une clé qui n'est pas une propriété de `T`
+     * — un nom complet, un solde — sans élargir le type de la ligne. Le rendu
+     * par défaut, la carte et la recherche locale passent par elle. Une valeur
+     * calculée ne se saisit pas : elle sort du formulaire, sauf `inForm`.
+     */
+    value?: (row: T) => unknown;
 }
 interface ResourceDefinition<T> {
     /** L'identifiant technique — sert aux droits et aux clés de cache. */
@@ -1928,17 +2081,17 @@ declare function resourceColumns<T>(resource: ResourceDefinition<T>): Array<Data
  */
 declare function resourceDetailColumns<T>(resource: ResourceDefinition<T>): Array<DataTableColumn<T>>;
 /** Les champs du formulaire, groupés si la déclaration les groupe. */
-declare function resourceFormFields<T>(resource: ResourceDefinition<T>): FormEntry[];
+declare function resourceFormFields<T>(resource: ResourceDefinition<T>, mode?: ResourceFormMode): FormEntry[];
 /**
  * La validation, dérivée des types et des `required`.
  *
  * Un champ `email` valide une adresse sans qu'on le demande : le type le dit
  * déjà. Les règles déclarées s'y ajoutent, elles ne les remplacent pas.
  */
-declare function resourceValidator<T>(resource: ResourceDefinition<T>): FormValidator<FormShape> | undefined;
+declare function resourceValidator<T>(resource: ResourceDefinition<T>, mode?: ResourceFormMode): FormValidator<FormShape> | undefined;
 /** Les clés que la recherche locale parcourt. */
 declare function resourceSearchKeys<T>(resource: ResourceDefinition<T>): string[];
-/** Les valeurs de départ d'une création. */
+/** Les valeurs de départ d'une création : les champs du mode `create`. */
 declare function resourceDefaults<T>(resource: ResourceDefinition<T>): FormShape;
 /** Comment lire la clé d'une ligne. */
 declare function resourceRowKey<T>(resource: ResourceDefinition<T>): (row: T, index: number) => Key;
@@ -1982,11 +2135,18 @@ 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>) | undefined;
+    }) => FormSubmitResult<FormShape> | Promise<FormSubmitResult<FormShape>>) | undefined;
     createDefaults?: FormShape | undefined;
     toFormValues?: ((row: T) => FormShape) | undefined;
     renderDetail?: ((row: T, index: number) => ReactNode) | undefined;
@@ -2001,7 +2161,7 @@ interface CrudDialogsProps<T> {
  * laquelle ouvrir, avec quelles valeurs, et de refermer une fois l'envoi
  * passé.
  */
-declare function CrudDialogs<T>({ state, onClose, columns, fields, validate, onSubmit, createDefaults, toFormValues, renderDetail, getRowKey, dialog, }: CrudDialogsProps<T>): react_jsx_runtime.JSX.Element;
+declare function CrudDialogs<T>({ state, onClose, columns, fields: champsCreation, validate: validationCreation, editFields, editValidate, onSubmit, createDefaults, toFormValues, renderDetail, getRowKey, dialog, }: CrudDialogsProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * La personnalisation d'une action standard.
@@ -2030,6 +2190,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;
     /**
@@ -2055,12 +2221,17 @@ interface CrudPageBase<T> {
      * propre à cette page, aucune bibliothèque imposée.
      */
     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`.
      *
@@ -2110,6 +2281,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;
     onRetry?: () => void;
@@ -2117,6 +2290,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é,
      * mode cartes, tri, colonnes figées.
@@ -2158,7 +2336,7 @@ type CrudPageProps<T> = CrudPageBase<T> & ({
  *
  * Ici, fournir le gestionnaire suffit. Ne pas le fournir retire l'action.
  */
-declare function CrudPage<T>({ resource, title, description, eyebrow, columns: colonnesFournies, data, getRowKey: cleFournie, onCreate, onView, onEdit, onDelete, fields: champsFournis, onSubmit, validate: validationFournie, createDefaults, toFormValues, detail, dialog, operations, extraRowActions, onBulkDelete, can, headerActions, toolbar, searchKeys: clesDeRecherche, searchPlaceholder, onSearch, loading, error, onRetry, empty, page, totalPages, onPageChange, table, children, className, }: CrudPageProps<T>): react_jsx_runtime.JSX.Element;
+declare function CrudPage<T>({ resource, title, description, eyebrow, headingLevel, columns: colonnesFournies, data, getRowKey: cleFournie, onCreate, onView, onEdit, onDelete, fields: champsFournis, onSubmit, validate: validationFournie, createDefaults, toFormValues, detail, dialog, operations, extraRowActions, onBulkDelete, can, headerActions, toolbar, searchKeys: clesDeRecherche, searchPlaceholder, onSearch, searchDelay, loading, error, onRetry, empty, page, totalPages, onPageChange, pageSize, onPageSizeChange, pageSizeOptions, table, children, className, }: CrudPageProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * L'état du tableau dans la barre d'adresse.
@@ -2176,6 +2354,17 @@ interface UseDataTableQueryOptions {
     history?: "replace" | "push";
     /** Préfixe des clés, pour deux tableaux sur la même page. */
     prefix?: string;
+    /**
+     * Un autre endroit où ranger l'état — le plus souvent le routeur.
+     *
+     * La barre d'adresse écrite directement passe sous le nez d'un routeur qui
+     * tient ses propres paramètres (TanStack Router, React Router) : il ne voit
+     * pas le changement, et le réécrit au prochain rendu. Fourni, ce stockage
+     * remplace celui de l'URL, et `syncUrl` / `history` sont ignorés.
+     */
+    storage?: TableQueryStorage;
+    /** Les noms des paramètres serveur — `limit`, `sort` + `order`… */
+    serverParams?: TableParamsMapping;
 }
 /**
  * Tri, filtres et pagination d'un tableau, synchronisés avec l'URL.
@@ -2196,7 +2385,7 @@ declare function useDataTableQuery(options?: UseDataTableQueryOptions): TableQue
  * elle filtre les lignes déjà chargées — ce qui suffit tant que tout tient
  * sur une page.
  */
-declare function DataTable<T>({ columns, data, getRowKey, title, description, toolbar, actions, searchKeys, searchPlaceholder, onSearch, layout, maxHeight, stickyHeader, density, striped, bordered, rowActions, inlineActionsLimit, actionsHeader, actionsDisplay, can, view: viewProp, defaultView, onViewChange, showViewToggle, responsive, cardsBreakpoint, renderCard, loading, skeletonRows, error, onRetry, empty, selectable, selectedKeys: selectedProp, defaultSelectedKeys, onSelectionChange, isRowSelectable, selectionActions, sort, onSortChange, onRowClick, rowClassName, caption, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T>({ columns, data, getRowKey, title, description, toolbar, actions, searchKeys, searchPlaceholder, onSearch, searchDelay, layout, maxHeight, stickyHeader, density, striped, bordered, rowActions, inlineActionsLimit, actionsHeader, actionsDisplay, can, view: viewProp, defaultView, onViewChange, showViewToggle, responsive, cardsBreakpoint, renderCard, loading, skeletonRows, error, onRetry, empty, selectable, selectedKeys: selectedProp, defaultSelectedKeys, onSelectionChange, isRowSelectable, selectionActions, sort, onSortChange, onRowClick, rowClassName, caption, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 type DateRangeValue = CalendarRangeValue;
 interface DateRangePickerProps extends Pick<CalendarProps, "locale" | "firstDayOfWeek" | "disabledDate" | "cellRender" | "showWeek"> {
@@ -2581,6 +2770,16 @@ declare function InfoIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function SettingsIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function EyeIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function EyeOffIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function HomeIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function FolderIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function ServerIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function UserIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function UsersIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function ActivityIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function KeyIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function LockIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function LogOutIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function PencilIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 
 interface InputNumberProps extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "right"> {
     value?: number | null;
@@ -2685,6 +2884,14 @@ interface PageHeaderProps {
     description?: ReactNode;
     eyebrow?: ReactNode;
     actions?: ReactNode;
+    /**
+     * Le niveau du titre. `1` — le défaut — pour l'en-tête d'un écran.
+     *
+     * `2` ou `3` pour une section dans un écran qui a déjà son `<h1>` : la
+     * liste des environnements dans la fiche d'un projet. Le titre y est plus
+     * petit et l'espace sous l'en-tête plus court.
+     */
+    level?: 1 | 2 | 3;
     className?: string;
 }
 /**
@@ -2692,9 +2899,10 @@ interface PageHeaderProps {
  *
  * Un seul `<h1>` par page, rendu ici : la hiérarchie des titres est ce qui
  * permet de parcourir un écran au lecteur d'écran, et deux `<h1>` la
- * cassent sans que rien ne se voie.
+ * cassent sans que rien ne se voie. Une section imbriquée passe donc
+ * `level={2}`.
  */
-declare function PageHeader({ title, description, eyebrow, actions, className }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function PageHeader({ title, description, eyebrow, actions, level, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     page: number;
@@ -2714,16 +2922,46 @@ interface PaginationProps {
     showTotal?: boolean;
     /** Masque les libellés et ne garde que les flèches. */
     compact?: boolean;
+    /** Le nombre de lignes par page en vigueur. */
+    pageSize?: number;
+    /**
+     * Fourni avec `pageSize`, ajoute le choix du nombre de lignes par page.
+     *
+     * Seul le nouveau nombre est remonté : revenir en page 1 est l'affaire de
+     * qui tient l'état — `setPerPage` de `useTableQuery` le fait déjà.
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Les tailles proposées. Par défaut `10, 20, 50, 100`. Une taille en
+     * vigueur absente de la liste y est ajoutée, pour que le champ ne paraisse
+     * jamais vide.
+     */
+    pageSizeOptions?: number[];
+    /** Le libellé du choix. Par défaut `locale.perPage` — « Par page ». */
+    pageSizeLabel?: string;
+    /**
+     * Remplace entièrement le contrôle — des boutons segmentés, un champ libre.
+     * Le choix des tailles et leur tri sont déjà faits.
+     */
+    renderPageSize?: (context: PageSizeContext) => ReactNode;
     ariaLabel?: string;
     className?: string;
 }
+/** Ce que reçoit `renderPageSize`. */
+interface PageSizeContext {
+    pageSize: number;
+    options: number[];
+    onChange: (pageSize: number) => void;
+    label: string;
+}
+declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
 /**
  * La navigation entre les pages.
  *
  * Le calcul des numéros et des ellipses vient de `@sia-ui/headless` :
  * `usePagination` et ce composant appliquent la même règle, écrite une fois.
  */
-declare function Pagination({ page, totalPages, onPageChange, siblingCount, previousLabel: previousLabelProp, nextLabel: nextLabelProp, jumpTo, showTotal, compact, ariaLabel, className, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+declare function Pagination({ page, totalPages, onPageChange, siblingCount, previousLabel: previousLabelProp, nextLabel: nextLabelProp, jumpTo, showTotal, compact, pageSize, onPageSizeChange, pageSizeOptions, pageSizeLabel, renderPageSize, ariaLabel, className, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
 
 interface PasswordStrength {
     /** De 0 à 4. */
@@ -3016,6 +3254,49 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
  */
 declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
 
+/** Une paire nom / valeur. La valeur n'est jamais relue du serveur. */
+interface SecretEntry {
+    key: string;
+    value: string;
+}
+interface SecretFieldsProps {
+    value?: SecretEntry[];
+    defaultValue?: SecretEntry[];
+    onValueChange?: (entries: SecretEntry[]) => void;
+    /**
+     * Les noms déjà enregistrés côté serveur.
+     *
+     * Affichés, mais leur valeur reste vide : un secret ne revient jamais au
+     * navigateur. Une valeur laissée vide sur l'un d'eux veut dire « inchangé » ;
+     * en saisir une, c'est le remplacer — une rotation.
+     */
+    storedKeys?: string[];
+    /** Des noms proposés d'un clic : `DATABASE_URL`, `API_KEY`… */
+    templates?: string[];
+    /** La forme d'un nom valide. Par défaut, aucune contrainte. */
+    keyPattern?: RegExp;
+    keyPatternMessage?: string;
+    keyLabel?: string;
+    valueLabel?: string;
+    addLabel?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+/** Les valeurs effacées, les noms gardés — ce qu'on affiche après l'envoi. */
+declare function clearSecretValues(entries: SecretEntry[]): SecretEntry[];
+/**
+ * Des secrets en écriture seule : les noms se lisent, les valeurs jamais.
+ *
+ * Chaque ligne est un nom et une valeur masquée. Les noms déjà enregistrés
+ * s'affichent sans leur valeur — le serveur ne la renvoie pas, et ne doit pas
+ * la renvoyer. Les champs refusent l'autocomplétion du navigateur, qui
+ * proposerait sinon le mot de passe du compte à la place d'une clé d'API.
+ *
+ * Après l'envoi, `clearSecretValues` vide les valeurs : un secret ne reste pas
+ * affiché dans un formulaire ouvert.
+ */
+declare function SecretFields({ value, defaultValue, onValueChange, storedKeys, templates, keyPattern, keyPatternMessage, keyLabel, valueLabel, addLabel, disabled, className, }: SecretFieldsProps): react_jsx_runtime.JSX.Element;
+
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     width?: CSSProperties["width"];
     height?: CSSProperties["height"];
@@ -3426,4 +3707,4 @@ interface YearPickerProps {
  */
 declare function YearPicker({ value, defaultValue, min, max, onValueChange, className }: YearPickerProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, AppShellBrand, type AppShellBrandProps, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, AppShellRailItem, type AppShellRailItemProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KpiGrid, type KpiGridProps, Label, type LabelProps, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, SettingsIcon, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, type ActivityEntry, ActivityIcon, ActivityLog, type ActivityLogFilter, type ActivityLogProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, AppShellBrand, type AppShellBrandProps, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, AppShellRailItem, type AppShellRailItemProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, FolderIcon, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HomeIcon, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KeyIcon, KpiGrid, type KpiGridProps, Label, type LabelProps, LockIcon, LogOutIcon, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, type PageSizeContext, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PencilIcon, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, type ResourceFormMode, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, type SecretEntry, SecretFields, type SecretFieldsProps, Select, type SelectOption, type SelectProps, ServerIcon, SettingsIcon, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, StatusBadge, type StatusBadgeProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, UserIcon, UsersIcon, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, activityColumns, clearSecretValues, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formFieldNames, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, toneOf, useDataTableQuery, useToast };