sveltekit-admin 0.8.1 → 0.9.0

package/dist/server/submitted.js

@@ -0,0 +1,54 @@
+/**
+ * Extraction des valeurs réellement soumises par un POST de formulaire admin,
+ * pour les re-rendre après un échec de mutation.
+ *
+ * Ce module ne rend rien : il traduit un `FormData` en la forme minimale dont
+ * les vues ont besoin. Il porte en revanche la décision de sécurité de ce
+ * chemin — ce qui NE doit pas repartir dans le HTML.
+ */
+import { isSensitiveFieldName } from './introspection/parser.js';
+/** Clé de dispatch de `handleMutation`, jamais un champ du modèle. */
+const ACTION_KEY = '_action';
+/** Préfixes posés par `RelationCheckboxes.svelte`, cf. `mutations.ts`. */
+const M2M_VALUE_PREFIX = '__rel__';
+const M2M_SENTINEL_PREFIX = '__rel_present__';
+/**
+ * Un champ jamais rendu par le formulaire (`hidden`) ne doit pas non plus
+ * reparaître par ce chemin, et une valeur sensible ne repart pas du tout :
+ * `isSensitiveFieldName` est le prédicat partagé du dépôt (affichage en liste,
+ * whitelist de recherche/filtres, rédaction d'audit), et un second heuristique
+ * local finirait par diverger du premier. Conséquence assumée, celle de Django
+ * (`PasswordInput(render_value=False)`) : un mot de passe est à retaper après
+ * une erreur.
+ */
+function isEchoable(name, hidden) {
+    return !hidden.has(name) && !isSensitiveFieldName(name);
+}
+export function readSubmittedForm(formData, hidden) {
+    const values = {};
+    const m2m = {};
+    // Deux passes : les valeurs `__rel__` peuvent précéder leur sentinelle dans
+    // le corps (l'ordre est celui du DOM, pas un contrat), donc on ne peut pas
+    // décider de les garder au fil de la première itération.
+    for (const key of formData.keys()) {
+        if (!key.startsWith(M2M_SENTINEL_PREFIX))
+            continue;
+        const field = key.slice(M2M_SENTINEL_PREFIX.length);
+        if (!isEchoable(field, hidden))
+            continue;
+        m2m[field] = formData.getAll(`${M2M_VALUE_PREFIX}${field}`).map(String);
+    }
+    for (const [key, raw] of formData.entries()) {
+        if (key === ACTION_KEY)
+            continue;
+        // Les deux préfixes, testés séparément : `__rel_present__` ne commence pas
+        // par `__rel__` (5e caractère `p` contre `_`), donc un seul test laisserait
+        // le sentinelle passer pour un scalaire.
+        if (key.startsWith(M2M_VALUE_PREFIX) || key.startsWith(M2M_SENTINEL_PREFIX))
+            continue;
+        if (!isEchoable(key, hidden))
+            continue;
+        values[key] = String(raw);
+    }
+    return { values, m2m };
+}

package/dist/server/views/FieldInput.svelte

@@ -1,11 +1,45 @@
 <script lang="ts">
   import type { PrismaField } from '../introspection/parser.js';
-  import { toLabel } from './html.js';
+  import type { SubmittedForm } from '../submitted.js';
+  import { toLabel, fieldErrorAttrs } from './html.js';
 
-  let { field, value, isReadonly }: { field: PrismaField; value: any; isReadonly: boolean } =
-    $props();
+  let {
+    field,
+    value,
+    isReadonly,
+    submitted,
+    errorMessage,
+    enums = new Map<string, string[]>()
+  }: {
+    field: PrismaField;
+    value: any;
+    isReadonly: boolean;
+    /** Voir `Form.svelte` : défini seulement sur un re-rendu après échec. */
+    submitted?: SubmittedForm;
+    /** Défini seulement si c'est ce champ que l'erreur désigne. */
+    errorMessage?: string;
+    /** Valeurs de chaque enum du schéma, indexées par nom de type. */
+    enums?: Map<string, string[]>;
+  } = $props();
+
+  const err = $derived(fieldErrorAttrs(field.name, errorMessage));
 
   const label = $derived(toLabel(field.name));
+
+  /**
+   * `submitted` défini signifie « ce formulaire vient d'être posté et refusé ».
+   * On teste sa présence, pas celle de la clé : une checkbox décochée et un
+   * champ sensible non ré-émis n'envoient rien, et retomber sur la valeur en
+   * base rallumerait à l'écran un booléen que l'utilisateur vient d'éteindre.
+   *
+   * Un champ readonly est exclu : la ligne en base fait foi puisqu'il n'est pas
+   * éditable. Un navigateur soumet bien un `readonly` (contrairement à un
+   * `disabled`), mais rien ne l'y oblige — un POST forgé ou un client partiel
+   * viderait alors l'ID et les horodatages à l'écran, sans que ce soit une
+   * donnée que l'utilisateur ait saisie.
+   */
+  const hasSubmission = $derived(submitted !== undefined && !isReadonly);
+  const submittedValue = $derived(submitted?.values[field.name]);
   const required = $derived(field.isRequired && !field.hasDefault && !isReadonly);
 
   const lower = $derived(field.name.toLowerCase());
@@ -29,35 +63,107 @@
   });
 
   const inputValue = $derived.by(() => {
+    // Rendue telle qu'elle a été tapée : la re-normaliser (un `datetime-local`
+    // incomplet, un nombre en cours de frappe) transformerait la valeur refusée
+    // en une autre, et l'utilisateur ne reconnaîtrait plus ce qu'il a saisi.
+    if (hasSubmission) return submittedValue ?? '';
     if (field.type === 'DateTime' && value) {
       return new Date(value).toISOString().slice(0, 16);
     }
     return value ?? '';
   });
 
-  const jsonValue = $derived(value ? JSON.stringify(value, null, 2) : '');
+  /**
+   * Valeur retenue par le `<select>` d'un enum : même arbitrage que
+   * `inputValue` (ce qui vient d'être soumis prime sur la ligne en base),
+   * ramené à une chaîne pour se comparer aux valeurs déclarées de l'enum.
+   */
+  const enumValue = $derived(String(inputValue));
+
+  const jsonValue = $derived.by(() => {
+    if (hasSubmission) return submittedValue ?? '';
+    return value ? JSON.stringify(value, null, 2) : '';
+  });
+
+  // Absence = décochée : c'est ce que le navigateur envoie, et `formDataToPrisma`
+  // l'interprète déjà comme `false` côté écriture.
+  const isChecked = $derived(
+    hasSubmission ? submittedValue !== undefined : !!value
+  );
 </script>
 
 {#if field.type === 'Boolean'}
   <div class="ska-field">
     <label class="ska-checkbox-wrap">
-      <input type="checkbox" name={field.name} class="ska-checkbox" checked={!!value} disabled={isReadonly} />
+      <input
+        type="checkbox"
+        name={field.name}
+        class="ska-checkbox"
+        checked={isChecked}
+        disabled={isReadonly}
+        aria-invalid={err.ariaInvalid}
+        aria-describedby={err.describedBy}
+      />
       <span class="ska-label">{label}</span>
     </label>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- fieldErrorAttrs échappe l'id et le message -->
+    {@html err.html}
   </div>
 {:else if field.type === 'Json'}
   <div class="ska-field">
     <label class="ska-label" for={field.name}>{label}{required ? ' *' : ''}</label>
-    <textarea id={field.name} name={field.name} class="ska-input" rows="4" readonly={isReadonly} required={required}>{jsonValue}</textarea>
+    <textarea id={field.name} name={field.name} class="ska-input" rows="4" readonly={isReadonly} required={required} aria-invalid={err.ariaInvalid} aria-describedby={err.describedBy}>{jsonValue}</textarea>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- fieldErrorAttrs échappe l'id et le message -->
+    {@html err.html}
   </div>
 {:else if isLongText}
   <div class="ska-field">
     <label class="ska-label" for={field.name}>{label}{required ? ' *' : ''}</label>
-    <textarea id={field.name} name={field.name} class="ska-input" rows="4" readonly={isReadonly} required={required}>{inputValue}</textarea>
+    <textarea id={field.name} name={field.name} class="ska-input" rows="4" readonly={isReadonly} required={required} aria-invalid={err.ariaInvalid} aria-describedby={err.describedBy}>{inputValue}</textarea>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- fieldErrorAttrs échappe l'id et le message -->
+    {@html err.html}
+  </div>
+{:else if field.isEnum && enums.has(field.type)}
+  <!--
+    Calqué sur `RelationSelect.svelte` (même structure, même « — aucun — »), à
+    deux écarts près, tous deux volontaires :
+
+    1. Un placeholder désactivé quand la colonne est non nullable et n'a pas
+       encore de valeur. Sans lui le navigateur présélectionne la première
+       valeur de l'enum, et une création écrit un choix que l'utilisateur n'a
+       jamais fait. `RelationSelect` a le même défaut pour une FK obligatoire —
+       il n'est pas corrigé ici, ce serait un autre comportement dans une autre
+       PR.
+    2. `disabled` et non `readonly` : un `<select>` n'a pas de `readonly`. Le
+       champ sort donc du POST, `formDataToPrisma` ignore la clé absente et la
+       colonne n'est pas réécrite — exactement ce que « lecture seule » veut
+       dire, et plus sûr que les branches texte qui, elles, réémettent la valeur.
+
+    L'option vide se décide sur `field.isRequired` (la colonne accepte-t-elle
+    NULL) et non sur `required` (l'attribut du widget, faux dès qu'il y a un
+    `@default`) : une colonne non nullable à défaut n'accepte toujours pas
+    « aucun ».
+  -->
+  <div class="ska-field">
+    <label class="ska-label" for={field.name}>{label}{required ? ' *' : ''}</label>
+    <select id={field.name} name={field.name} class="ska-input" disabled={isReadonly} required={required} aria-invalid={err.ariaInvalid} aria-describedby={err.describedBy}>
+      {#if !field.isRequired}
+        <option value="">— aucun —</option>
+      {:else if !enumValue}
+        <option value="" disabled selected>Select…</option>
+      {/if}
+      {#each enums.get(field.type)! as v (v)}
+        <option value={v} selected={v === enumValue}>{v}</option>
+      {/each}
+    </select>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- fieldErrorAttrs échappe l'id et le message -->
+    {@html err.html}
   </div>
 {:else}
   <div class="ska-field">
     <label class="ska-label" for={field.name}>{label}{required ? ' *' : ''}</label>
-    <input id={field.name} type={inputType} name={field.name} value={inputValue} class="ska-input" readonly={isReadonly} required={required} />
+    <input id={field.name} type={inputType} name={field.name} value={inputValue} class="ska-input" readonly={isReadonly} required={required} aria-invalid={err.ariaInvalid} aria-describedby={err.describedBy} />
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- fieldErrorAttrs échappe l'id et le message -->
+    {@html err.html}
   </div>
 {/if}

package/dist/server/views/FieldInput.svelte.d.ts

@@ -1,8 +1,15 @@
 import type { PrismaField } from '../introspection/parser.js';
+import type { SubmittedForm } from '../submitted.js';
 type $$ComponentProps = {
     field: PrismaField;
     value: any;
     isReadonly: boolean;
+    /** Voir `Form.svelte` : défini seulement sur un re-rendu après échec. */
+    submitted?: SubmittedForm;
+    /** Défini seulement si c'est ce champ que l'erreur désigne. */
+    errorMessage?: string;
+    /** Valeurs de chaque enum du schéma, indexées par nom de type. */
+    enums?: Map<string, string[]>;
 };
 declare const FieldInput: import("svelte").Component<$$ComponentProps, {}, "">;
 type FieldInput = ReturnType<typeof FieldInput>;

package/dist/server/views/Form.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { AdminHandlerConfig } from '../handler.js';
   import type { RecordAction, ViewModel } from './types.js';
+  import type { SubmittedForm } from '../submitted.js';
+  import { isSensitiveStringField } from '../introspection/parser.js';
   import FieldInput from './FieldInput.svelte';
   import RelationSelect from './RelationSelect.svelte';
   import RelationCheckboxes from './RelationCheckboxes.svelte';
@@ -13,7 +15,9 @@
     basePath,
     config,
     item,
-    recordActions = []
+    recordActions = [],
+    submitted,
+    mutationError
   }: {
     mode: 'create' | 'edit';
     model: ViewModel;
@@ -21,18 +25,53 @@
     config: AdminHandlerConfig;
     item?: any;
     recordActions?: RecordAction[];
+    /**
+     * Ce que le POST venait de soumettre, quand la mutation a échoué. Défini
+     * uniquement sur un re-rendu d'erreur : `undefined` veut dire « affichage
+     * normal », et c'est cette distinction — pas le contenu — qui permet à un
+     * booléen décoché de rester décoché.
+     */
+    submitted?: SubmittedForm;
+    /**
+     * L'échec qui a provoqué ce re-rendu. `field` est absent quand la cause ne
+     * désigne pas un champ (conflit d'unicité, message générique) : le message
+     * ne vit alors que dans la bannière de page, posée par `handler.ts`.
+     */
+    mutationError?: { message: string; field?: string };
   } = $props();
 
+  /**
+   * Le message n'est rendu qu'au widget que l'erreur nomme. Un champ absent du
+   * formulaire (masqué, ou un scalaire sans widget propre) ne fait rien
+   * apparaître : la bannière reste le canal de repli.
+   */
+  const errorFor = (...names: Array<string | undefined>) =>
+    mutationError?.field !== undefined && names.includes(mutationError.field)
+      ? mutationError.message
+      : undefined;
+
   const modelConfig = $derived(config.models?.[model.name] || {});
   const hidden = $derived(modelConfig.hidden || []);
   const readonly = $derived(modelConfig.readonly || []);
   const listPath = $derived(`${basePath}/${model.name.toLowerCase()}`);
 
+  /**
+   * `Bytes` n'a pas de widget : rendue dans la branche texte générique, la
+   * colonne renvoyait au pilote une chaîne là où il attend un `Uint8Array`,
+   * donc aucune écriture n'a jamais pu aboutir. L'exclure rend un modèle à
+   * colonne `Bytes` obligatoire incréable depuis l'admin — c'est déjà le cas
+   * en pratique, à ceci près que l'échec arrive maintenant avant le formulaire
+   * plutôt qu'après le POST. La liste l'écarte déjà pareillement
+   * (`List.svelte`), c'est la même décision au même endroit du schéma.
+   */
+  const isEditableType = (f: { type: string }) => f.type !== 'Bytes';
+
   const formFields = $derived(
     mode === 'create'
       ? model.fields.filter(
           (f) =>
             !hidden.includes(f.name) &&
+            isEditableType(f) &&
             !f.isId &&
             !f.isCreatedAt &&
             !f.isUpdatedAt &&
@@ -44,7 +83,15 @@
       : model.fields.filter(
           (f) =>
             !hidden.includes(f.name) &&
+            isEditableType(f) &&
             !f.relation &&
+            // Exclu à l'édition seulement : il existe ici une valeur stockée,
+            // donc quelque chose à exposer dans le HTML et à écraser au
+            // prochain enregistrement. Le formulaire de création le garde — il
+            // n'y a rien à fuiter avant que la ligne existe, et le retirer
+            // rendrait un modèle à colonne obligatoire incréable depuis
+            // l'admin. `mutations.ts` refuse le vide de ce côté-là.
+            !isSensitiveStringField(f) &&
             !model.relationGraph?.scalarToRelation.has(f.name)
         )
   );
@@ -65,7 +112,14 @@
       : []
   );
 
-  const currentValueOf = (scalarName: string) => (item ? item[scalarName] : null);
+  /**
+   * Sur un re-rendu d'erreur, le scalaire soumis fait foi ; sinon la ligne en
+   * base. Le `??` ne suffirait pas : une relation optionnelle qu'on vient de
+   * vider arrive comme `''`, ce qui doit rester `''` et non retomber sur
+   * l'ancienne cible.
+   */
+  const currentValueOf = (scalarName: string) =>
+    submitted ? (submitted.values[scalarName] ?? '') : item ? item[scalarName] : null;
 
   const relationCheckboxGroups = $derived(
     model.relationGraph
@@ -120,7 +174,14 @@
   <form method="POST" class="ska-form">
     <input type="hidden" name="_action" value={mode === 'create' ? 'create' : 'update'} />
     {#each formFields as f (f.name)}
-      <FieldInput field={f} value={item ? item[f.name] : null} isReadonly={isFieldReadonly(f)} />
+      <FieldInput
+        field={f}
+        value={item ? item[f.name] : null}
+        isReadonly={isFieldReadonly(f)}
+        {submitted}
+        errorMessage={errorFor(f.name)}
+        enums={model.enums}
+      />
     {/each}
     {#each relationSelects as edge (edge.field)}
       <RelationSelect
@@ -128,10 +189,16 @@
         meta={model.relationOptions!.get(`${edge.model}.${edge.field}`)!}
         currentValue={currentValueOf(edge.scalarFields[0])}
         {config}
+        errorMessage={errorFor(edge.field, edge.scalarFields[0])}
       />
     {/each}
     {#each relationCheckboxGroups as edge (edge.field)}
-      <RelationCheckboxes {edge} meta={model.relationOptions!.get(`${edge.model}.${edge.field}`)!} />
+      <RelationCheckboxes
+        {edge}
+        meta={model.relationOptions!.get(`${edge.model}.${edge.field}`)!}
+        submittedIds={submitted?.m2m[edge.field]}
+        errorMessage={errorFor(edge.field)}
+      />
     {/each}
     <div class="ska-form__actions">
       <button type="submit" class="ska-btn ska-btn--primary">{mode === 'create' ? 'Create' : 'Save Changes'}</button>

package/dist/server/views/Form.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { AdminHandlerConfig } from '../handler.js';
 import type { RecordAction, ViewModel } from './types.js';
+import type { SubmittedForm } from '../submitted.js';
 type $$ComponentProps = {
     mode: 'create' | 'edit';
     model: ViewModel;
@@ -7,6 +8,22 @@ type $$ComponentProps = {
     config: AdminHandlerConfig;
     item?: any;
     recordActions?: RecordAction[];
+    /**
+     * Ce que le POST venait de soumettre, quand la mutation a échoué. Défini
+     * uniquement sur un re-rendu d'erreur : `undefined` veut dire « affichage
+     * normal », et c'est cette distinction — pas le contenu — qui permet à un
+     * booléen décoché de rester décoché.
+     */
+    submitted?: SubmittedForm;
+    /**
+     * L'échec qui a provoqué ce re-rendu. `field` est absent quand la cause ne
+     * désigne pas un champ (conflit d'unicité, message générique) : le message
+     * ne vit alors que dans la bannière de page, posée par `handler.ts`.
+     */
+    mutationError?: {
+        message: string;
+        field?: string;
+    };
 };
 declare const Form: import("svelte").Component<$$ComponentProps, {}, "">;
 type Form = ReturnType<typeof Form>;

package/dist/server/views/Layout.svelte

@@ -58,10 +58,13 @@
 </head>
 <!-- eslint-disable-next-line svelte/no-raw-special-elements -- server-only full-document template, never mounted client-side -->
 <body>
+  <!-- Premier élément focusable de la page : sans lui, atteindre le contenu au
+       clavier demande de retraverser toute la nav latérale à chaque page. -->
+  <a href="#ska-content" class="ska-skip">Skip to content</a>
   <div class="ska-layout">
     <aside class="ska-sidebar">
       <a href={basePath} class="ska-logo">{title}</a>
-      <nav>
+      <nav aria-label="Main">
         <ul class="ska-nav">
           <li class="ska-nav__item">
             <a href={basePath} class="ska-nav__link" class:ska-nav__link--active={!currentModel}>
@@ -92,7 +95,7 @@
         </form>
       {/if}
     </aside>
-    <main class="ska-main">
+    <main class="ska-main" id="ska-content" tabindex="-1">
       <!-- eslint-disable-next-line svelte/no-at-html-tags -- content is pre-rendered HTML from sibling view components / the handler's own escaped error string -->
       {@html content}
     </main>

package/dist/server/views/List.svelte

@@ -3,9 +3,11 @@
   import type { ViewModel, ListRecordAction, FkFilterMeta } from './types.js';
   import type { ListQuery } from '../query/listQuery.js';
   import type { ResolvedFilterField } from '../query/filterDetection.js';
+  import type { SortState } from '../query/sortQuery.js';
   import { DATETIME_PRESETS } from '../query/filterDetection.js';
-  import { getDisplayFields } from '../introspection/parser.js';
+  import { resolveListColumns } from '../query/listColumns.js';
   import { buildListUrl, hiddenParams } from '../query/urls.js';
+  import { paginationWindow } from './pagination.js';
   import { escapeHtml, toLabel, formatValue } from './html.js';
   import ListFilters from './ListFilters.svelte';
 
@@ -19,6 +21,8 @@
     currentUrl,
     listFilters,
     fkFilterMeta,
+    sort,
+    pageSizes = [],
     recordActions = []
   }: {
     model: ViewModel;
@@ -34,6 +38,10 @@
     listFilters?: ResolvedFilterField[];
     /** Métadonnées async (options scopées + label actif) pour les filtres FK configurés. */
     fkFilterMeta?: Map<string, FkFilterMeta>;
+    /** Tri actif + drapeau « colonne refusée ». Absent = en-têtes non cliquables. */
+    sort?: SortState;
+    /** Tailles de page proposées. Vide/absent = pas de sélecteur. */
+    pageSizes?: number[];
     recordActions?: ListRecordAction[];
   } = $props();
 
@@ -41,24 +49,48 @@
   const hidden = $derived(modelConfig.hidden || []);
   const listFields = $derived(modelConfig.listFields);
 
-  const displayFields = $derived.by(() => {
-    const explicit = new Set(listFields ?? []);
-    const safeNames = new Set(getDisplayFields(model).map((f) => f.name));
+  // Résolu par `resolveListColumns` et non ici : le handler applique la MÊME
+  // fonction pour décider quels champs un `?sort=` a le droit de désigner.
+  const displayFields = $derived(resolveListColumns(model.fields, { hidden, listFields }));
 
-    let fields = model.fields.filter(
-      (f) =>
-        (explicit.has(f.name) || safeNames.has(f.name)) &&
-        !hidden.includes(f.name) &&
-        !f.relation &&
-        !['Json', 'Bytes'].includes(f.type)
-    );
-
-    if (listFields?.length) {
-      fields = fields.filter((f) => listFields.includes(f.name));
-    }
+  /**
+   * En-têtes cliquables seulement quand l'URL courante est connue : sans elle
+   * on ne sait pas construire un lien qui préserve recherche et filtres, et un
+   * en-tête qui les effacerait silencieusement serait pire que pas de tri.
+   * Même convention que la pagination.
+   */
+  const sortable = $derived(Boolean(currentUrl));
 
-    return fields.slice(0, 6);
+  /**
+   * Compte rendu d'une suppression en masse, posé par la redirection après
+   * écriture. Validé comme n'importe quelle entrée d'URL : seul un entier
+   * positif est rendu, tout le reste est ignoré plutôt qu'affiché.
+   */
+  const deletedCount = $derived.by(() => {
+    const raw = currentUrl?.searchParams.get('deleted');
+    if (raw === null || raw === undefined) return null;
+    const parsed = Number(raw);
+    return Number.isSafeInteger(parsed) && parsed >= 0 ? parsed : null;
   });
+  const activeSort = $derived(sort?.active ?? null);
+
+  /**
+   * Cliquer une colonne déjà triée inverse la direction ; cliquer une autre
+   * colonne repart en ascendant. `buildListUrl` retire `page` de lui-même :
+   * changer de tri ne garde aucun sens sur la page 3, ce ne sont plus les
+   * mêmes lignes.
+   */
+  const sortHref = (field: string) => {
+    const dir = activeSort?.field === field && activeSort.dir === 'asc' ? 'desc' : null;
+    return buildListUrl(currentUrl!, { sort: field, dir });
+  };
+
+  const ariaSortFor = (field: string) =>
+    activeSort?.field !== field ? 'none' : activeSort.dir === 'asc' ? 'ascending' : 'descending';
+
+  /** Indicateur visuel, doublé par `aria-sort` côté lecteur d'écran. */
+  const sortMarkFor = (field: string) =>
+    activeSort?.field !== field ? '' : activeSort.dir === 'asc' ? ' ↑' : ' ↓';
 
   const listPath = $derived(`${basePath}/${model.name.toLowerCase()}`);
   const totalPages = $derived(Math.ceil(pagination.total / pagination.perPage));
@@ -75,6 +107,14 @@
     if (!currentUrl) return (n: number) => `?page=${n}`;
     return (n: number) => buildListUrl(currentUrl, { page: String(n) });
   });
+  const pageWindow = $derived(paginationWindow(pagination.page, totalPages));
+  // Rendu en liens plutôt qu'en `<select>` : la page n'est jamais hydratée, un
+  // select aurait donc besoin soit d'un bouton « appliquer », soit d'un
+  // `onchange` inline. Quatre liens font le même travail sans script.
+  // `buildListUrl` retire `page` : changer de taille ne garde aucun sens sur la
+  // page 3, ce ne sont plus les mêmes lignes.
+  const sizeHref = (size: number) => buildListUrl(currentUrl!, { perPage: String(size) });
+  const showSizes = $derived(pageSizes.length > 0 && Boolean(currentUrl));
   const clearHref = $derived(currentUrl ? currentUrl.pathname : listPath);
   const searchHiddenParams = $derived(currentUrl ? hiddenParams(currentUrl, ['q']) : []);
 
@@ -204,11 +244,22 @@
   </form>
 {/if}
 
-{#if ignoredMessages.length > 0}
-  <div class="ska-alert ska-alert--error">
+{#if deletedCount !== null}
+  <div class="ska-alert ska-alert--success" role="status">
+    <p>{deletedCount} {deletedCount === 1 ? 'record' : 'records'} deleted</p>
+  </div>
+{/if}
+
+{#if ignoredMessages.length > 0 || sort?.ignored}
+  <div class="ska-alert ska-alert--error" role="alert">
     {#each ignoredMessages as m (m.key)}
       <p>{m.text}</p>
     {/each}
+    {#if sort?.ignored}
+      <!-- Même neutralité que pour un filtre refusé : ne jamais dire si la
+           colonne existe, seulement qu'on ne trie pas dessus. -->
+      <p>Ignored sort: this column cannot be sorted</p>
+    {/if}
   </div>
 {/if}
 
@@ -218,25 +269,48 @@
   </p>
 {/if}
 
+{#if sortable}
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -- chaîne littérale, sans donnée interpolée ; Svelte 5 refuse un onsubmit littéral comme attribut d'événement -->
+  {@html `<form id="ska-bulk" method="POST" action="${listPath}" class="ska-bulk" onsubmit="return confirm('Delete the selected records?')"><input type="hidden" name="_action" value="bulk-delete"><button type="submit" class="ska-btn ska-btn--danger ska-btn--sm">Delete selected</button></form>`}
+{/if}
+
 <div class="ska-card">
   <div class="ska-table-wrap">
     <table class="ska-table">
       <thead>
         <tr>
-          {#each displayFields as f (f.name)}<th>{toLabel(f.name)}</th>{/each}
-          <th>Actions</th>
+          {#if sortable}
+            <th class="ska-table__select" scope="col">
+              <!-- eslint-disable-next-line svelte/no-at-html-tags -- chaîne littérale ; le « tout cocher » est le seul endroit de l'admin qui demande du script, et le reste fonctionne sans lui -->
+              {@html `<input type="checkbox" class="ska-checkbox" aria-label="Select all on this page" onclick="for (const box of this.closest('table').querySelectorAll('input[name=ids]')) box.checked = this.checked">`}
+            </th>
+          {/if}
+          {#each displayFields as f (f.name)}{#if sortable}<th scope="col" aria-sort={ariaSortFor(f.name)}><a href={sortHref(f.name)} class="ska-th-sort">{toLabel(f.name)}<span aria-hidden="true">{sortMarkFor(f.name)}</span></a></th>{:else}<th scope="col">{toLabel(f.name)}</th>{/if}{/each}
+          <th scope="col">Actions</th>
         </tr>
       </thead>
       <tbody>
         {#if items.length === 0}
           <tr>
-            <td colspan={displayFields.length + 1} style="text-align: center; color: #64748b; padding: 2rem;">
+            <td colspan={displayFields.length + (sortable ? 2 : 1)} style="text-align: center; color: #64748b; padding: 2rem;">
               {hasActiveCriteria ? 'No results for these criteria' : 'No records found'}
             </td>
           </tr>
         {:else}
           {#each items as item (item[model.primaryKey])}
             <tr>
+              {#if sortable}
+                <td class="ska-table__select">
+                  <input
+                    type="checkbox"
+                    class="ska-checkbox"
+                    name="ids"
+                    value={item[model.primaryKey]}
+                    form="ska-bulk"
+                    aria-label="Select record {item[model.primaryKey]}"
+                  />
+                </td>
+              {/if}
               <!-- eslint-disable-next-line svelte/no-at-html-tags -- formatValue already escapes string values itself and returns a literal <span> only for null/undefined -->
               {#each displayFields as f (f.name)}<td>{@html formatValue(item[f.name], f.type)}</td>{/each}
               <td class="ska-table__actions">
@@ -258,8 +332,39 @@
       <span class="ska-pagination__info">
         Showing {(pagination.page - 1) * pagination.perPage + 1} to {Math.min(pagination.page * pagination.perPage, pagination.total)} of {pagination.total}
       </span>
-      {#if pagination.page > 1}<a href={pageHref(pagination.page - 1)} class="ska-btn ska-btn--secondary ska-btn--sm">Previous</a>{/if}
-      {#if pagination.page < totalPages}<a href={pageHref(pagination.page + 1)} class="ska-btn ska-btn--secondary ska-btn--sm">Next</a>{/if}
+      <nav class="ska-pagination__pages" aria-label="Pagination">
+        {#if pagination.page > 1}
+          <a href={pageHref(1)} class="ska-btn ska-btn--secondary ska-btn--sm" aria-label="First page">«</a>
+          <a href={pageHref(pagination.page - 1)} class="ska-btn ska-btn--secondary ska-btn--sm">Previous</a>
+        {/if}
+        {#each pageWindow as entry, i (i)}
+          {#if entry === 'gap'}
+            <span class="ska-pagination__gap" aria-hidden="true">…</span>
+          {:else if entry === pagination.page}
+            <!-- Page courante : repère, pas lien. Un lien vers l'endroit où on
+                 est déjà est un piège au clavier autant qu'un bruit inutile. -->
+            <span class="ska-btn ska-btn--sm ska-pagination__current" aria-current="page">{entry}</span>
+          {:else}
+            <a href={pageHref(entry)} class="ska-btn ska-btn--secondary ska-btn--sm">{entry}</a>
+          {/if}
+        {/each}
+        {#if pagination.page < totalPages}
+          <a href={pageHref(pagination.page + 1)} class="ska-btn ska-btn--secondary ska-btn--sm">Next</a>
+          <a href={pageHref(totalPages)} class="ska-btn ska-btn--secondary ska-btn--sm" aria-label="Last page">»</a>
+        {/if}
+      </nav>
+      {#if showSizes}
+        <div class="ska-pagination__sizes">
+          <span class="ska-pagination__info">Rows</span>
+          {#each pageSizes as size (size)}
+            {#if size === pagination.perPage}
+              <span class="ska-btn ska-btn--sm ska-pagination__current" aria-current="true">{size}</span>
+            {:else}
+              <a href={sizeHref(size)} class="ska-btn ska-btn--secondary ska-btn--sm">{size}</a>
+            {/if}
+          {/each}
+        </div>
+      {/if}
     </div>
   {/if}
 </div>