sveltekit-admin 0.6.0 → 0.9.0

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,35 +1,77 @@
 <script lang="ts">
   import type { AdminHandlerConfig } from '../handler.js';
-  import type { ViewModel } from './types.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';
   import RelatedBlock from './RelatedBlock.svelte';
+  import { escapeHtml } from './html.js';
 
   let {
     mode,
     model,
     basePath,
     config,
-    item
+    item,
+    recordActions = [],
+    submitted,
+    mutationError
   }: {
     mode: 'create' | 'edit';
     model: ViewModel;
     basePath: string;
     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 &&
@@ -41,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)
         )
   );
@@ -62,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
@@ -77,6 +134,24 @@
       : []
   );
 
+  // Built as a single string (rather than {#if}/{#each}) so an empty/create-mode
+  // render stays a single @html call: Svelte 5's SSR wraps every {#if}/{#each} node
+  // in its own hydration-boundary comment regardless of the branch/array taken, so
+  // nesting recordActions in its own control-flow blocks would add bytes to every
+  // edit-form render even when recordActions is []. `label` and `href` are both
+  // escaped manually since this goes through @html instead of Svelte's
+  // auto-escaped text/attributes.
+  const recordActionsHtml = $derived(
+    mode === 'edit' && recordActions.length > 0
+      ? `<div class="ska-record-actions">${recordActions
+          .map(
+            (action) =>
+              `<a href="${escapeHtml(action.href)}" class="ska-btn ska-btn--secondary ska-btn--sm">${escapeHtml(action.label)}</a>`
+          )
+          .join('')}</div>`
+      : ''
+  );
+
   const inverseEdges = $derived(
     model.relationGraph
       ? [...model.relationGraph.edges.values()].filter(
@@ -92,11 +167,21 @@
   <p class="ska-subtitle">ID: {item[model.primaryKey]}</p>
 {/if}
 
+<!-- eslint-disable-next-line svelte/no-at-html-tags -- recordActionsHtml escapes both action.label and action.href via escapeHtml -->
+{@html recordActionsHtml}
+
 <div class="ska-card">
   <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
@@ -104,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,11 +1,29 @@
 import type { AdminHandlerConfig } from '../handler.js';
-import type { ViewModel } from './types.js';
+import type { RecordAction, ViewModel } from './types.js';
+import type { SubmittedForm } from '../submitted.js';
 type $$ComponentProps = {
     mode: 'create' | 'edit';
     model: ViewModel;
     basePath: string;
     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

@@ -6,12 +6,16 @@
     content,
     config,
     modelList,
-    currentModel
+    currentModel,
+    extraStyles = '',
+    extraScripts = ''
   }: {
     content: string;
     config: AdminHandlerConfig;
     modelList: Array<{ name: string; label: string }>;
     currentModel?: string;
+    extraStyles?: string;
+    extraScripts?: string;
   } = $props();
 
   const branding = $derived(config.branding ?? {});
@@ -21,6 +25,25 @@
   // No button at all if `logout` isn't configured — an admin that never
   // opted into this option looks exactly as it did before it existed.
   const showLogout = $derived(Boolean(config.logout));
+
+  // extraStyles is concatenated into the SAME @html expression as the theme <style>
+  // below, rather than a sibling {#if}/{@html} block: Svelte 5's SSR unconditionally
+  // wraps every {#if}/{#each}/{@html} node in its own hydration-boundary comment, even
+  // for a false/empty branch (see svelte/internal/server's `html()` helper) — a sibling
+  // block would add bytes to every render regardless of extraStyles being set.
+  // Concatenating keeps this ONE @html call, byte-identical to the pre-plugin-slots
+  // template when extraStyles is ''. extraScripts (bottom of <body>) has no such
+  // pre-existing @html call to fold into, so it stays its own @html — the smallest
+  // achievable footprint, though it still adds a fixed hydration-boundary comment
+  // pair even when empty (see task-6-report.md fix-round-1 notes).
+  //
+  // Built as a $derived here (rather than a nested template literal inline in the
+  // markup below) so tooling that tag-sniffs {@html} expressions for literal
+  // <style>/<script> text doesn't misparse the nested backticks.
+  const headStyleHtml = $derived(
+    `<style>${styles(primaryColor)}</style>${extraStyles ? `<style>${extraStyles}</style>` : ''}`
+  );
+  const bodyScriptHtml = $derived(extraScripts ? '<script>' + extraScripts + '</scr' + 'ipt>' : '');
 </script>
 
 <!doctype html>
@@ -31,14 +54,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{title}</title>
   <!-- eslint-disable-next-line svelte/no-at-html-tags -- CSS injected as raw text; a literal <style> block can't take a dynamic value; primaryColor is developer-supplied config, not request/database data, and this raw interpolation is unchanged from the original layout.ts implementation, not a new injection point introduced by this migration -->
-  {@html `<style>${styles(primaryColor)}</style>`}
+  {@html headStyleHtml}
 </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}>
@@ -69,10 +95,12 @@
         </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>
   </div>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -- plugin JS is developer-supplied, same trust as branding.primaryColor -->
+  {@html bodyScriptHtml}
 </body>
 </html>

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

@@ -7,6 +7,8 @@ type $$ComponentProps = {
         label: string;
     }>;
     currentModel?: string;
+    extraStyles?: string;
+    extraScripts?: string;
 };
 declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
 type Layout = ReturnType<typeof Layout>;