@zevra/ui 0.42.0 → 0.43.0

package/react/use-persisted-state.ts

@@ -0,0 +1,105 @@
+'use client'
+
+// Un état React qui survit au rechargement, dans `localStorage`.
+//
+// ⚠️ LA LECTURE A LIEU APRÈS LE MONTAGE, et c'est tout l'objet du hook. Lue
+// pendant le rendu, la valeur différerait entre le serveur (qui n'a pas de
+// `localStorage`) et le navigateur : React signale alors une erreur
+// d'hydratation et Next jette le rendu serveur. Le premier rendu montre donc
+// `initial`, puis la valeur enregistrée.
+//
+// ⚠️ TOUT ACCÈS EST SOUS try/catch : navigation privée, quota plein, stockage
+// bloqué par l'utilisateur ou une politique d'entreprise, JSON abîmé à la
+// main. Dans chacun de ces cas l'état fonctionne, il ne persiste simplement
+// pas. Un tableau qui plante parce que Safari refuse d'écrire est pire qu'un
+// tableau qui oublie sa vue.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
+
+/**
+ * Comme `useState`, mais enregistré sous `key`.
+ *
+ * `reconcilier` reçoit la valeur LUE (non typée : elle vient d'une version
+ * précédente du code, ou d'ailleurs) et la valeur initiale ; il rend la
+ * valeur à employer, ou `undefined` pour s'en tenir à l'initiale. C'est là
+ * qu'une vue enregistrée s'adapte à des colonnes qui ont changé.
+ *
+ * Rend `[valeur, setValeur, reinitialiser]` : `reinitialiser` vide la clé et
+ * revient à `initial`.
+ */
+export function usePersistedState<S>(
+  key: string,
+  initial: S,
+  reconcilier?: (lu: unknown, initial: S) => S | undefined,
+): [S, Dispatch<SetStateAction<S>>, () => void] {
+  const [etat, setEtat] = useState<S>(initial)
+  const [lu, setLu] = useState(false)
+
+  // Les dernières valeurs, sans en faire des dépendances : `initial` est
+  // souvent un littéral recréé à chaque rendu, et relire le stockage à
+  // chaque rendu effacerait les changements en cours.
+  const initialRef = useRef(initial)
+  initialRef.current = initial
+  const reconcilierRef = useRef(reconcilier)
+  reconcilierRef.current = reconcilier
+
+  // Ce que le stockage contient DÉJÀ, sérialisé. On n'écrit que ce qui en
+  // diffère : sans cette garde, la lecture elle-même provoquerait une
+  // écriture, et « Réinitialiser » réécrirait aussitôt la vue par défaut
+  // dans la clé qu'il vient de vider.
+  const enregistre = useRef<string | null>(null)
+
+  useEffect(() => {
+    let valeur: S | undefined
+    try {
+      const brut = window.localStorage.getItem(key)
+      if (brut != null) {
+        const parse: unknown = JSON.parse(brut)
+        valeur = reconcilierRef.current
+          ? reconcilierRef.current(parse, initialRef.current)
+          : (parse as S)
+      }
+    } catch {
+      valeur = undefined
+    }
+    const retenue = valeur === undefined ? initialRef.current : valeur
+    enregistre.current = serialiser(retenue)
+    setEtat(retenue)
+    setLu(true)
+  }, [key])
+
+  useEffect(() => {
+    // Avant la lecture, l'état est `initial` : l'écrire écraserait la vue
+    // enregistrée par la vue par défaut, au premier rendu de chaque page.
+    if (!lu) return
+    const texte = serialiser(etat)
+    if (texte === null || texte === enregistre.current) return
+    try {
+      window.localStorage.setItem(key, texte)
+      enregistre.current = texte
+    } catch {
+      // Stockage refusé : l'état vit en mémoire, c'est tout.
+    }
+  }, [key, etat, lu])
+
+  const reinitialiser = useCallback(() => {
+    try {
+      window.localStorage.removeItem(key)
+    } catch {
+      // Rien à vider qu'on puisse atteindre : on revient quand même au défaut.
+    }
+    enregistre.current = serialiser(initialRef.current)
+    setEtat(initialRef.current)
+  }, [key])
+
+  return [etat, setEtat, reinitialiser]
+}
+
+function serialiser(valeur: unknown): string | null {
+  try {
+    return JSON.stringify(valeur)
+  } catch {
+    return null
+  }
+}

package/src/data.css

@@ -980,3 +980,384 @@
     padding: 12px;
   }
 }
+
+/* ─── Grille de données (DataGrid) ─────────────────────────────────────
+ * ⚠️ HORS RELEVÉ, tout ce bloc (24/10/2026) : aucune planche ne dessine un
+ * tableau qu'on réordonne, élargit, épingle ou coche. L'arbitrage et ses
+ * raisons sont dans DECISIONS.md, « La grille de données ». Aucune valeur
+ * nouvelle n'entre : les gouttières sont celles du tableau (14 et 10 px),
+ * les fonds ceux du paquet (blanc, --panel au survol, --accent-soft pour
+ * le choisi), les filets --line et --hairline.
+ *
+ * La grille est un MODE de .zv-table, pas un autre composant : mêmes
+ * lignes, mêmes cellules, même passage en cartes sous 768 px. */
+
+.zv-grille {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+/* Recherche à gauche, actions à droite ; elles passent à la ligne plutôt
+ * que de pousser le cadre sur un écran étroit. */
+.zv-grille__outils {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.zv-grille__outils > .zv-search {
+  flex: 1 1 240px;
+  max-width: 360px;
+}
+
+.zv-grille__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Les gouttières de la rangée deviennent des PARAMÈTRES : les colonnes
+ * épinglées en ont besoin pour calculer leur décalage, et la largeur
+ * minimale des rangées pour additionner ses pistes. Mêmes valeurs que
+ * .zv-row et .zv-table__head (dérivées, pas relevées : redites ici). */
+.zv-table--grille {
+  --zv-grille-pad: 14px;
+  --zv-grille-gap: 10px;
+  /* Un seul ascenseur pour l'en-tête et les lignes : le cadre. */
+  position: relative;
+}
+
+/* Une rangée de grille est au moins aussi large que la somme de ses
+ * pistes PLANCHERS : sans cela, des colonnes réglées en pixels déborderaient
+ * de la rangée, et le filet comme le fond de survol s'arrêteraient au bord
+ * du cadre pendant que les cellules continuent. --zv-cols-somme et
+ * --zv-cols-n sont posés par le composant (largeurs choisies par
+ * l'utilisateur, pas des valeurs de charte). */
+.zv-table--grille > .zv-table__head,
+.zv-table--grille > .zv-row {
+  min-width: calc(
+    var(--zv-cols-somme, 0px) + 2 * var(--zv-grille-pad) +
+      (var(--zv-cols-n, 1) - 1) * var(--zv-grille-gap)
+  );
+  padding-inline: var(--zv-grille-pad);
+  column-gap: var(--zv-grille-gap);
+}
+
+/* Rangée de FILTRES, sous les intitulés : même fond, mais ni capitales ni
+ * interlettrage, ce sont des champs. Le filet de l'en-tête passe sous elle. */
+.zv-table__head--filtres {
+  padding-block: 6px;
+  font-family: var(--font-text);
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.zv-table__head:has(+ .zv-table__head--filtres) {
+  border-bottom-color: var(--hairline);
+}
+
+/* Le champ de filtre : le .zv-input du paquet, resserré à la hauteur d'une
+ * rangée d'en-tête. Une seule classe suffit à l'emporter : data.css est
+ * chargé après forms.css (index.css). */
+.zv-table__filtre {
+  padding: 5px 8px;
+  font-size: var(--app-sm);
+}
+
+/* ─── En-tête de colonne de grille ──────────────────────────────────── */
+
+.zv-colhead {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  /* La poignée de largeur déborde dans la gouttière : sans cela elle
+   * serait rognée par l'overflow de .zv-cell. */
+  overflow: visible;
+}
+
+/* L'intitulé tronque, pas la cellule : la poignée et la marque de tri
+ * doivent rester visibles sur une colonne étroite. */
+.zv-colhead .zv-sort {
+  min-width: 0;
+}
+
+.zv-colhead__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Poignée de déplacement. Un <button> : c'est elle qui porte le clavier
+ * (Espace pour saisir, flèches, Espace pour poser). `touch-action: none` :
+ * sans lui, le doigt fait défiler le cadre au lieu de saisir la colonne. */
+.zv-colhead__grip {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  margin: -2px 0 -2px -4px;
+  padding: 2px;
+  border: 0;
+  background: none;
+  color: var(--label);
+  cursor: grab;
+  touch-action: none;
+}
+
+.zv-colhead__grip:hover {
+  color: var(--accent);
+}
+
+.zv-colhead__grip:focus-visible {
+  outline-offset: -2px;
+}
+
+/* Tout l'en-tête se saisit : la main ouverte le dit au survol. Le bouton
+ * de tri garde son pointeur, puisqu'un clic simple trie toujours. */
+.zv-colhead--deplacable {
+  cursor: grab;
+  touch-action: none;
+}
+
+/* La colonne qu'on déplace : le fond de l'entrée choisie, et elle passe
+ * au-dessus de ses voisines qu'elle traverse. */
+.zv-colhead--drag {
+  z-index: 3;
+  background: var(--accent-soft);
+  cursor: grabbing;
+}
+
+/* Poignée de largeur : une bande de saisie de la largeur de la gouttière,
+ * centrée sur la frontière, et un filet qui ne se montre qu'à l'approche. */
+.zv-colhead__resize {
+  position: absolute;
+  top: -9px;
+  bottom: -9px;
+  right: calc(-1 * var(--zv-grille-gap, 10px) / 2 - 4px);
+  z-index: 2;
+  width: 8px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.zv-colhead__resize::after {
+  content: '';
+  position: absolute;
+  top: 9px;
+  bottom: 9px;
+  left: 3px;
+  width: 2px;
+  background: var(--line);
+  opacity: 0;
+}
+
+.zv-colhead:hover .zv-colhead__resize::after {
+  opacity: 1;
+}
+
+.zv-colhead__resize:hover::after,
+.zv-colhead__resize:focus-visible::after,
+.zv-colhead__resize--actif::after {
+  background: var(--accent);
+  opacity: 1;
+}
+
+.zv-colhead__resize:focus-visible {
+  outline: none;
+}
+
+/* Pendant le geste, le curseur ne doit pas changer en traversant les
+ * cellules voisines. */
+.zv-colhead__resize--actif {
+  cursor: col-resize;
+}
+
+/* ─── Colonnes épinglées ────────────────────────────────────────────────
+ * Collées au bord du cadre pendant que le reste défile. Le fond est OPAQUE
+ * et suit le contexte (blanc, survol, choisi) par une variable : une cellule
+ * transparente laisserait passer les valeurs qui glissent dessous. L'ombre
+ * pleine, sans flou, bouche la gouttière : c'est une géométrie, pas une
+ * ombre de charte. */
+.zv-cell--pin {
+  --zv-pin-fond: var(--white);
+  position: sticky;
+  z-index: 1;
+  background: var(--zv-pin-fond);
+  box-shadow: calc(-1 * var(--zv-grille-gap, 10px)) 0 0 0 var(--zv-pin-fond);
+}
+
+.zv-cell--pin-droite {
+  box-shadow: var(--zv-grille-gap, 10px) 0 0 0 var(--zv-pin-fond);
+}
+
+/* La frontière entre ce qui reste et ce qui défile : un filet --line,
+ * côté contenu. */
+.zv-cell--pin-bord {
+  box-shadow:
+    calc(-1 * var(--zv-grille-gap, 10px)) 0 0 0 var(--zv-pin-fond),
+    calc(var(--zv-grille-gap, 10px) / 2) 0 0 0 var(--zv-pin-fond),
+    calc(var(--zv-grille-gap, 10px) / 2 + 1px) 0 0 0 var(--line);
+}
+
+.zv-cell--pin-droite.zv-cell--pin-bord {
+  box-shadow:
+    var(--zv-grille-gap, 10px) 0 0 0 var(--zv-pin-fond),
+    calc(-1 * var(--zv-grille-gap, 10px) / 2) 0 0 0 var(--zv-pin-fond),
+    calc(-1 * var(--zv-grille-gap, 10px) / 2 - 1px) 0 0 0 var(--line);
+}
+
+.zv-table__head .zv-cell--pin,
+.zv-row:hover .zv-cell--pin {
+  --zv-pin-fond: var(--panel);
+}
+
+/* ─── Ligne choisie ─────────────────────────────────────────────────────
+ * Le fond de l'entrée de menu choisie. Il tient au survol : sinon, la
+ * ligne qu'on vient de cocher perdrait sa marque sous le pointeur. */
+.zv-row--selected,
+.zv-row--selected:hover {
+  background: var(--accent-soft);
+}
+
+.zv-row--selected .zv-cell--pin,
+.zv-row--selected:hover .zv-cell--pin {
+  --zv-pin-fond: var(--accent-soft);
+}
+
+/* La case de sélection : centrée dans sa piste, sans troncature. */
+.zv-cell--case {
+  display: flex;
+  align-items: center;
+  overflow: visible;
+}
+
+/* Un nombre s'aligne à droite : son intitulé aussi. */
+.zv-colhead.zv-cell--num {
+  justify-content: flex-end;
+}
+
+/* Le menu des colonnes s'ouvre depuis la DROITE de la barre : ancré à
+ * gauche comme le menu de sélection, il sortirait de l'écran. Il défile
+ * au-delà d'une douzaine de colonnes plutôt que de couvrir la page. */
+.zv-grille__menu {
+  left: auto;
+  right: 0;
+  max-height: min(420px, 70vh);
+  overflow-y: auto;
+}
+
+.zv-grille__menu-ligne {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* L'entrée de menu porte ici une case et un intitulé : elle redevient une
+ * rangée, et la case ne s'écrase pas. */
+.zv-grille__menu-case {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+/* L'épingle : un bouton d'icône à la hauteur d'une entrée de menu, pas à
+ * celle d'une cible de barre (--tap). */
+.zv-grille__epingle {
+  flex: none;
+  width: 30px;
+  height: 30px;
+}
+
+.zv-grille__epingle[aria-pressed='true'] {
+  color: var(--accent);
+}
+
+/* La taille de page : le <select> du paquet, à sa largeur de contenu. */
+.zv-grille__taille {
+  width: auto;
+  padding-block: 5px;
+  font-size: var(--app-sm);
+}
+
+/* Le résumé d'une plage (nombres, dates) dans la rangée de filtres : un
+ * déclencheur à l'apparence du champ, resserré comme lui. */
+.zv-table__filtre.zv-input--trigger {
+  gap: 4px;
+  min-width: 0;
+  width: 100%;
+}
+
+/* L'enveloppe du popover de plage, rendue HORS du tableau (portail) : le
+ * cadre défile, il rognerait le panneau. Placée en coordonnées d'écran par
+ * le composant ; le panneau, .zv-popover, s'y pose comme sous son ancre. */
+.zv-grille__flottant {
+  position: fixed;
+  z-index: 60;
+}
+
+/* Raccourcis, bornes, effacement : un petit formulaire. Le popover du
+ * paquet borne sa largeur à 320 px, trop juste pour deux champs de date
+ * côte à côte : la grille la reprend (même spécificité, data.css est chargé
+ * après navigation.css). */
+.zv-grille__plage {
+  display: grid;
+  gap: 14px;
+  width: 340px;
+  max-width: calc(100vw - 16px);
+}
+
+/* Les raccourcis de période : des entrées de menu (le survol et l'état
+ * choisi du paquet), sur deux colonnes. Le filet les sépare des bornes. */
+.zv-grille__periodes {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2px;
+  margin: -6px -8px 0;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.zv-grille__bornes {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+/* Un champ date natif a une largeur intrinsèque : sans min-width, il
+ * pousse sa colonne hors du popover. */
+.zv-grille__bornes .zv-input {
+  min-width: 0;
+  padding-inline: 8px;
+}
+
+/* Le pied : compte à gauche, taille de page et sens à droite. */
+.zv-grille__pied {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+@media (max-width: 767px) {
+  /* En cartes, l'épinglage, les poignées et la largeur minimale n'ont plus
+   * de sens : la carte prend la largeur de l'écran. */
+  .zv-table--grille > .zv-row {
+    min-width: 0;
+  }
+
+  .zv-cell--pin {
+    position: static;
+    box-shadow: none;
+    background: none;
+  }
+
+  .zv-table__head--filtres {
+    display: none;
+  }
+}

package/src/forms.css

@@ -514,6 +514,20 @@
   background-size: 12px 12px;
 }
 
+/* Case INDÉTERMINÉE (« une partie des lignes est cochée »), en tête d'une
+ * colonne de sélection. ⚠️ HORS RELEVÉ (24/10/2026, grille de données) :
+ * aucune planche ne la dessine. Même facture que la coche : aplat accent,
+ * trait blanc carré de 1,5. L'état vient de la propriété DOM
+ * `indeterminate`, que seul le script pose : il n'a pas d'attribut HTML. */
+.zv-check-box:indeterminate {
+  border-color: var(--accent);
+  background-color: var(--accent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='square'%3E%3Cline x1='3' y1='6' x2='9' y2='6'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+}
+
 /* Le point du radio est creusé dans l'aplat par un anneau blanc interne :
  * un pseudo-élément sur un <input> n'est pas fiable d'un moteur à l'autre.
  * Ce box-shadow est une géométrie, pas une ombre de charte : d'où l'absence