sveltekit-admin 0.6.0 → 0.9.0

package/dist/server/views/List.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import type { AdminHandlerConfig } from '../handler.js';
-  import type { ViewModel } from './types.js';
+  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 type { FkFilterMeta } from './types.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,7 +20,10 @@
     query,
     currentUrl,
     listFilters,
-    fkFilterMeta
+    fkFilterMeta,
+    sort,
+    pageSizes = [],
+    recordActions = []
   }: {
     model: ViewModel;
     items: any[];
@@ -34,30 +38,59 @@
     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();
 
   const modelConfig = $derived(config.models?.[model.name] || {});
   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));
@@ -74,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']) : []);
 
@@ -126,6 +167,28 @@
    * pour un champ sensible que pour un champ inconnu (§0.a, §5.4) — ne
    * jamais dire "champ interdit", ça confirmerait son existence.
    */
+  // A per-row function (rather than {#each} in the markup) so an empty recordActions
+  // keeps this to the smallest possible footprint: Svelte 5's SSR wraps every
+  // {#each}/{@html} node in its own hydration-boundary comment regardless of the
+  // array's length/content (verified empirically — even {@html ''} still emits
+  // `<!--hash--><!---->`), so there is no template-level construct that renders zero
+  // bytes for an empty array here. Folding this into the pre-existing delete-form
+  // {@html} call (right below) was considered and rejected: recordActions must render
+  // *before* Edit (see list.test.ts "rend le lien avant Edit"), but the delete form's
+  // pre-existing {@html} — and thus its hydration marker — sits *after* Edit, so
+  // reusing it would either reorder Edit/recordActions or move the marker in front of
+  // Edit for every row, not just when recordActions is non-empty. Neither is
+  // byte-identical to the pre-recordActions baseline (see task-6-report.md fix-round-1
+  // notes). `action.label` and `hrefFor`'s return value are both escaped manually
+  // since this goes through @html instead of Svelte's auto-escaped text/attributes.
+  const recordActionsHtml = (id: string | number) =>
+    recordActions
+      .map(
+        (action) =>
+          `<a href="${escapeHtml(action.hrefFor(id))}" class="ska-btn ska-btn--secondary ska-btn--sm">${escapeHtml(action.label)}</a>`
+      )
+      .join('');
+
   const ignoredMessages = $derived.by(() => {
     return (query?.ignored ?? []).map((entry) => {
       // `param` est soit `f.<field>` / `f.<field>__<op>` (nouveau format),
@@ -181,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}
 
@@ -195,28 +269,53 @@
   </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">
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -- recordActionsHtml escapes both action.label and hrefFor's return value via escapeHtml -->
+                {@html recordActionsHtml(item[model.primaryKey])}
                 <a href="{listPath}/{item[model.primaryKey]}" class="ska-btn ska-btn--secondary ska-btn--sm">Edit</a>
                 <!-- eslint-disable-next-line svelte/no-at-html-tags -- Svelte 5 rejects a literal onsubmit string as an event attribute; the PK is escaped manually here since it can't go through Svelte's native attribute escaping; the whole form (not just onsubmit) is rendered as raw HTML because there's no native-Svelte way to attach a plain inline onsubmit="..." string attribute at all in Svelte 5 templates, so the whole element had to be raw text to preserve the exact prior confirm-dialog behavior in a page that's never hydrated by a Svelte runtime -->
                 {@html `<form method="POST" action="${listPath}/${escapeHtml(String(item[model.primaryKey]))}" style="display:inline" onsubmit="return confirm('Delete this item?')"><input type="hidden" name="_action" value="delete"><button type="submit" class="ska-btn ska-btn--danger ska-btn--sm">Delete</button></form>`}
@@ -233,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>

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

@@ -1,8 +1,8 @@
 import type { AdminHandlerConfig } from '../handler.js';
-import type { ViewModel } from './types.js';
+import type { ViewModel, ListRecordAction, FkFilterMeta } from './types.js';
 import type { ListQuery } from '../query/listQuery.js';
 import type { ResolvedFilterField } from '../query/filterDetection.js';
-import type { FkFilterMeta } from './types.js';
+import type { SortState } from '../query/sortQuery.js';
 type $$ComponentProps = {
     model: ViewModel;
     items: any[];
@@ -21,6 +21,11 @@ type $$ComponentProps = {
     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[];
 };
 declare const List: import("svelte").Component<$$ComponentProps, {}, "">;
 type List = ReturnType<typeof List>;

package/dist/server/views/RelationCheckboxes.svelte

@@ -1,19 +1,33 @@
 <script lang="ts">
   import type { RelationEdge } from '../introspection/relations.js';
   import type { RelationMeta } from './types.js';
-  import { toLabel } from './html.js';
+  import { toLabel, fieldErrorAttrs } from './html.js';
 
   let {
     edge,
-    meta
+    meta,
+    submittedIds,
+    errorMessage
   }: {
     edge: RelationEdge;
     meta: RelationMeta;
+    /**
+     * IDs cochés au dernier POST, quand la mutation a échoué. Un tableau vide
+     * dit « tout décoché » et doit gagner sur `meta.selectedIds` ; `undefined`
+     * dit « pas un re-rendu d'erreur ». C'est la même distinction que le
+     * sentinelle `__rel_present__` côté écriture.
+     */
+    submittedIds?: string[];
+    /** Défini seulement si c'est cette relation que l'erreur désigne. */
+    errorMessage?: string;
   } = $props();
 
   const label = $derived(toLabel(edge.field));
   const inputName = $derived(`__rel__${edge.field}`);
-  const selected = $derived(new Set((meta.selectedIds ?? []).map(String)));
+  const selected = $derived(
+    new Set((submittedIds ?? meta.selectedIds ?? []).map(String))
+  );
+  const err = $derived(fieldErrorAttrs(inputName, errorMessage));
 </script>
 
 <!--
@@ -29,13 +43,18 @@
   <div class="ska-field">
     <label class="ska-label" for={inputName}>{label} (IDs séparés par des virgules)</label>
     <input type="hidden" name="__rel_present__{edge.field}" value="1" />
-    <input id={inputName} type="text" name={inputName} value={[...selected].join(',')} class="ska-input" />
+    <input id={inputName} type="text" name={inputName} value={[...selected].join(',')} class="ska-input" 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>
 {:else}
   <div class="ska-field">
     <label class="ska-label" for={inputName}>{label}</label>
     <input type="hidden" name="__rel_present__{edge.field}" value="1" />
-    <fieldset id={inputName} class="ska-checkbox-group">
+    <!-- Pas d'`aria-invalid` ici : l'attribut n'est pas permis sur le rôle
+         `group` implicite d'un `<fieldset>`. Le rattachement du message se fait
+         par `aria-describedby` seul, qui l'est. -->
+    <fieldset id={inputName} class="ska-checkbox-group" aria-describedby={err.describedBy}>
       {#each meta.options as opt (opt.id)}
         <label class="ska-checkbox-wrap">
           <input
@@ -49,5 +68,7 @@
         </label>
       {/each}
     </fieldset>
+    <!-- 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/RelationCheckboxes.svelte.d.ts

@@ -3,6 +3,15 @@ import type { RelationMeta } from './types.js';
 type $$ComponentProps = {
     edge: RelationEdge;
     meta: RelationMeta;
+    /**
+     * IDs cochés au dernier POST, quand la mutation a échoué. Un tableau vide
+     * dit « tout décoché » et doit gagner sur `meta.selectedIds` ; `undefined`
+     * dit « pas un re-rendu d'erreur ». C'est la même distinction que le
+     * sentinelle `__rel_present__` côté écriture.
+     */
+    submittedIds?: string[];
+    /** Défini seulement si c'est cette relation que l'erreur désigne. */
+    errorMessage?: string;
 };
 declare const RelationCheckboxes: import("svelte").Component<$$ComponentProps, {}, "">;
 type RelationCheckboxes = ReturnType<typeof RelationCheckboxes>;

package/dist/server/views/RelationSelect.svelte

@@ -2,18 +2,21 @@
   import type { AdminHandlerConfig } from '../handler.js';
   import type { RelationEdge } from '../introspection/relations.js';
   import type { RelationMeta } from './types.js';
-  import { toLabel } from './html.js';
+  import { toLabel, fieldErrorAttrs } from './html.js';
 
   let {
     edge,
     meta,
     currentValue,
-    config
+    config,
+    errorMessage
   }: {
     edge: RelationEdge;
     meta: RelationMeta;
     currentValue: unknown;
     config: AdminHandlerConfig;
+    /** Défini seulement si c'est cette relation que l'erreur désigne. */
+    errorMessage?: string;
   } = $props();
 
   const relConfig = $derived(config.models?.[edge.model]?.relations?.[edge.field]);
@@ -23,6 +26,8 @@
   // Toujours défini pour une arête to-one-owning : c'est ce qui la distingue
   // des autres kinds dans le graphe (voir buildRelationGraph).
   const scalarName = $derived(edge.scalarFields[0]);
+  // Rattaché au scalaire : c'est lui qui porte l'`id` et le `name` du widget.
+  const err = $derived(fieldErrorAttrs(scalarName, errorMessage));
 </script>
 
 {#if meta.tooMany}
@@ -36,12 +41,16 @@
       value={currentValue ?? ''}
       class="ska-input"
       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>
 {:else}
   <div class="ska-field">
     <label class="ska-label" for={scalarName}>{label}{required ? ' *' : ''}</label>
-    <select id={scalarName} name={scalarName} class="ska-input" required={required}>
+    <select id={scalarName} name={scalarName} class="ska-input" required={required} aria-invalid={err.ariaInvalid} aria-describedby={err.describedBy}>
       {#if !required}
         <option value="">{nullLabel}</option>
       {/if}
@@ -49,5 +58,7 @@
         <option value={opt.id} selected={String(opt.id) === String(currentValue ?? '')}>{opt.label}</option>
       {/each}
     </select>
+    <!-- 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/RelationSelect.svelte.d.ts

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     meta: RelationMeta;
     currentValue: unknown;
     config: AdminHandlerConfig;
+    /** Défini seulement si c'est cette relation que l'erreur désigne. */
+    errorMessage?: string;
 };
 declare const RelationSelect: import("svelte").Component<$$ComponentProps, {}, "">;
 type RelationSelect = ReturnType<typeof RelationSelect>;

package/dist/server/views/html.d.ts

@@ -3,3 +3,22 @@ export declare function escapeHtml(str: string): string;
 export declare function toLabel(name: string): string;
 export declare function adjustColor(hex: string, percent: number): string;
 export declare function formatValue(value: any, type: string): string;
+/**
+ * Markup du message d'erreur d'un champ, et les attributs qui l'y rattachent.
+ *
+ * Rendu comme une chaîne passée à `{@html}` plutôt qu'en `{#if}` : la SSR de
+ * Svelte 5 pose de toute façon un commentaire de frontière autour des deux, et
+ * les deux coûtent la même chose sur un formulaire sans erreur (mesuré : 18
+ * octets par champ pour `{@html}`, 19 pour `{#if}`). Le `{@html}` est retenu
+ * pour la cohérence avec `recordActionsHtml` dans `Form.svelte`, qui documente
+ * déjà ce compromis, et parce qu'il garde l'échappement explicite ici plutôt
+ * que réparti dans quatre branches de gabarit.
+ *
+ * `inputId` doit être l'`id` du champ décrit : c'est lui qui fabrique la cible
+ * d'`aria-describedby`.
+ */
+export declare function fieldErrorAttrs(inputId: string, message: string | undefined): {
+    ariaInvalid: 'true' | undefined;
+    describedBy: string | undefined;
+    html: string;
+};

package/dist/server/views/html.js

@@ -39,3 +39,28 @@ export function formatValue(value, type) {
     }
     return escapeHtml(str);
 }
+/**
+ * Markup du message d'erreur d'un champ, et les attributs qui l'y rattachent.
+ *
+ * Rendu comme une chaîne passée à `{@html}` plutôt qu'en `{#if}` : la SSR de
+ * Svelte 5 pose de toute façon un commentaire de frontière autour des deux, et
+ * les deux coûtent la même chose sur un formulaire sans erreur (mesuré : 18
+ * octets par champ pour `{@html}`, 19 pour `{#if}`). Le `{@html}` est retenu
+ * pour la cohérence avec `recordActionsHtml` dans `Form.svelte`, qui documente
+ * déjà ce compromis, et parce qu'il garde l'échappement explicite ici plutôt
+ * que réparti dans quatre branches de gabarit.
+ *
+ * `inputId` doit être l'`id` du champ décrit : c'est lui qui fabrique la cible
+ * d'`aria-describedby`.
+ */
+export function fieldErrorAttrs(inputId, message) {
+    if (message === undefined) {
+        return { ariaInvalid: undefined, describedBy: undefined, html: '' };
+    }
+    const errorId = `${inputId}-error`;
+    return {
+        ariaInvalid: 'true',
+        describedBy: errorId,
+        html: `<p class="ska-field__error" id="${escapeHtml(errorId)}">${escapeHtml(message)}</p>`
+    };
+}

package/dist/server/views/pagination.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Fenêtre de numéros de page : « 1 … 8 9 [10] 11 12 … 20 ».
+ *
+ * Pure, et volontairement hors du composant : les cas limites (premiers et
+ * derniers écrans, trous d'une seule page) se testent sur des nombres plutôt
+ * qu'en fouillant du HTML.
+ */
+export type PageEntry = number | 'gap';
+export declare function paginationWindow(page: number, totalPages: number): PageEntry[];

package/dist/server/views/pagination.js

@@ -0,0 +1,31 @@
+/**
+ * Fenêtre de numéros de page : « 1 … 8 9 [10] 11 12 … 20 ».
+ *
+ * Pure, et volontairement hors du composant : les cas limites (premiers et
+ * derniers écrans, trous d'une seule page) se testent sur des nombres plutôt
+ * qu'en fouillant du HTML.
+ */
+/** Nombre de pages affichées de part et d'autre de la page courante. */
+const SPAN = 2;
+export function paginationWindow(page, totalPages) {
+    if (totalPages <= 1)
+        return [];
+    const first = 1;
+    const last = totalPages;
+    const from = Math.max(first, page - SPAN);
+    const to = Math.min(last, page + SPAN);
+    const entries = [];
+    for (let n = from; n <= to; n++)
+        entries.push(n);
+    // Un trou qui ne cacherait qu'une seule page ne gagne aucune place et coûte
+    // un clic : on montre la page à la place. D'où la comparaison à 1 et non 0.
+    if (from - first > 1)
+        entries.unshift(first, 'gap');
+    else if (from > first)
+        entries.unshift(first);
+    if (last - to > 1)
+        entries.push('gap', last);
+    else if (to < last)
+        entries.push(last);
+    return entries;
+}