@zevra/ui 0.41.0 → 0.43.0

package/DECISIONS.md

@@ -1877,3 +1877,117 @@ autre fichier n'a bougé d'un octet.
   `build-logo-index.mjs`.
 
 Il hérite du manque des autres : pas de version monochrome, pas de lockup.
+
+## La grille de données : `DataGrid` (24/10/2026, 0.43.0)
+
+Demande : un tableau de travail « qui reprend les fonctions d'AG Grid »,
+pour Sunday d'abord, réutilisable par toutes les apps. Il entre au paquet
+plutôt que dans Sunday : une grille écrite dans une app est une grille que
+la suivante réécrit, et les deux divergent.
+
+**Ce n'est pas un second tableau.** `DataGrid` est une COMPOSITION :
+TanStack Table calcule, `DataTable` rend (mêmes `.zv-table`, `.zv-row`,
+`.zv-cell`), et l'outillage vient des composants existants (`Search`,
+`Button`, `IconButton`, `Menu`, `Checkbox`, `Input`, `Pager`, `Empty`,
+`Icon`). `DataTable` gagne trois ouvertures rétrocompatibles : un rendu de
+cellule d'en-tête substituable, une rangée sous l'en-tête, et un mode
+« grille » activé par `enableColumnResizing` (largeurs en pixels,
+colonnes épinglées). Sans ce réglage, il rend exactement ce qu'il rendait.
+
+Sous-chemin dédié, `@zevra/ui/react/grille`, pour la même raison que
+`react/table` : TanStack et dnd-kit sont des dépendances OPTIONNELLES, et
+le barrel ne doit pas casser une landing qui n'a aucun tableau.
+
+### Ce qu'elle fait
+
+Tri (Maj+clic : multi-colonnes), recherche globale, filtre par colonne
+TYPÉ (voir plus bas), réordonnancement
+des colonnes par glisser-déposer (dnd-kit, poignée au clavier : Espace,
+flèches, Espace), redimensionnement (`columnResizeMode: "onChange"`,
+poignée au clavier : flèches, Maj+flèches, Entrée pour rendre la largeur
+d'origine), visibilité et épinglage (gauche, droite) depuis un menu
+« Colonnes », sélection de lignes à cases, pagination, export CSV des
+lignes filtrées, et une vue PERSISTÉE par tableau (ordre, visibilité,
+largeurs, épinglage, tri, taille de page) dans `localStorage`, sous
+`table:<id>:v1`, que « Réinitialiser la vue » efface.
+
+### Ce qu'elle ne fait pas, et pourquoi
+
+Groupement et agrégation, tableau croisé, édition en cellule, données
+arborescentes, sélection de plages, modèle de lignes côté serveur,
+virtualisation. TanStack les calcule presque tous, mais chacun demande un
+dessin que la charte n'a pas (une ligne de groupe, une cellule en
+édition) : les ajouter sans planche serait inventer. Ils entreront un par
+un, sur besoin réel. La virtualisation, elle, attend un tableau qui en ait
+besoin : sous quelques milliers de lignes, la pagination suffit.
+
+### Ce qui est HORS RELEVÉ (aucune planche ne le dessine)
+
+- **La ligne sélectionnée**, sur `--accent-soft`. data.css disait « ni état
+  sélectionné » : c'était vrai d'une liste à lire, pas d'une grille où l'on
+  coche pour agir. `--accent-soft` est le fond que le paquet donne déjà à
+  l'entrée de menu choisie : aucun troisième gris n'entre.
+- **Les colonnes épinglées** : `position: sticky`, fond opaque repris du
+  contexte (blanc, survol, sélection), filet `--line` côté contenu.
+- **La poignée de déplacement** (icône `menu`, faute d'un glyphe de
+  préhension au jeu) et **la poignée de largeur** (filet `--line`, accent
+  au survol et au focus).
+- **La case indéterminée** (« une partie des lignes est cochée »), qui
+  n'avait pas de dessin : un trait horizontal sur l'aplat accent, même
+  facture que la coche.
+- **La barre d'outils et la rangée de filtres** : gouttières de 10 et
+  12 px, reprises du tableau et de la pagination, rien de nouveau.
+
+### Les choix techniques
+
+- **La vue se lit APRÈS le montage.** Lue pendant le rendu, elle
+  différerait entre le serveur (qui n'a pas de `localStorage`) et le
+  navigateur : erreur d'hydratation dans Next. Le premier rendu montre
+  donc la vue par défaut, puis la vue enregistrée.
+- **Une vue enregistrée survit à l'évolution des colonnes.** Au
+  chargement, un identifiant qui n'existe plus est ignoré, une colonne
+  nouvelle s'ajoute en fin d'ordre. Sans cela, ajouter une colonne au
+  code la ferait disparaître chez tous ceux qui avaient déplacé une
+  colonne avant.
+- **Le redimensionnement est écrit ici**, pas confié au gestionnaire de
+  TanStack : celui-ci part de `getSize()`, qui vaut 150 px pour une
+  colonne souple quelle que soit sa largeur à l'écran. Le premier geste
+  faisait sauter la colonne. On mesure la largeur réelle au premier appui.
+- **Une colonne a une largeur PLANCHER** (`size`, 150 px par défaut) et
+  s'étire en proportion tant qu'on ne l'a pas réglée ; réglée ou épinglée,
+  elle devient fixe. Le tableau défile dans son cadre quand la somme des
+  planchers dépasse la largeur : jamais une colonne écrasée à zéro.
+- **Le menu des colonnes est HORS du cadre.** `.zv-table` défile
+  (`overflow-x: auto`, qui force aussi `overflow-y`) : un menu ouvert
+  depuis un en-tête y serait rogné. Il vit dans la barre d'outils.
+- **Sous 768 px, la grille redevient des cartes**, comme tout tableau du
+  paquet : l'épinglage et les poignées n'y ont pas de sens et s'effacent.
+
+Le nom suit le paquet (`Button`, pas `ZvButton`) : une app qui tient à
+son alias l'importe sous `DataGrid as ZvDataTable`.
+
+### Les filtres ont la forme de leurs données (24/10/2026, demande Sunday)
+
+Un champ texte partout obligeait à écrire `>10` ou une date à la main.
+Chaque colonne reçoit désormais le contrôle de sa famille, DÉDUITE des
+données brutes (`typeDeFiltre`), ou imposée par `meta.filtre` :
+
+- **Choix** : une liste native quand les valeurs distinctes sont peu
+  nombreuses (20 au plus) ET se répètent. Les options sont celles que les
+  autres filtres laissent passer (modèle facetté).
+- **Nombre** : une plage min / max. Le champ n'est pas `type="number"`,
+  qui accepte « e » et refuse la virgule selon la langue du système : il
+  est en `inputMode="decimal"`, et les lettres ne s'y écrivent pas.
+- **Date** : une plage du / au sur le calendrier natif, cinq raccourcis
+  (aujourd'hui, 7 et 30 jours, ce mois-ci, cette année), et « au » ne peut
+  pas précéder « du ». Une date n'est appliquée que COMPLÈTE : pendant
+  qu'on tape l'année, le champ vaut « 0002 », puis « 0020 », et le tableau
+  se vidait puis se remplissait à chaque chiffre.
+- **Texte** : le reste, sans casse.
+
+Une plage ne tient pas dans une cellule de 90 px : la rangée de filtres en
+montre le RÉSUMÉ (« ≥ 10 », « 01/03/2026 → 24/10/2026 »), qui ouvre un
+popover. Ce popover est rendu HORS du tableau (portail) : le cadre défile,
+il l'aurait rogné. Il reprend `.zv-popover`, `Field`, `Input`, `MenuItem`
+pour les raccourcis, sans valeur nouvelle hormis sa largeur (340 px, deux
+champs de date côte à côte).

package/dist/catalogue.js

@@ -894,7 +894,7 @@ export const CATALOGUE = [
         nom: 'Icônes',
         couche: 'commun',
         css: 'icons.css',
-        resume: "55 icônes TRACÉES, jamais pleines : trait 2, grille de 24, BOUTS FRANCS et jonctions vives, le trait carré de la charte, points d'encre carrés compris. Elles héritent de la couleur du texte : c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
+        resume: "73 icônes TRACÉES, jamais pleines : trait 2, grille de 24, BOUTS FRANCS et jonctions vives, le trait carré de la charte, points d'encre carrés compris. Elles héritent de la couleur du texte : c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
         exemples: [
             {
                 id: 'jeu',

package/dist/css-inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-inline.d.ts","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAGA;;;iEAGiE;AACjE,eAAO,MAAM,WAAW,EAAE,MAAyzhS,CAAA;AAEn1hS;;;yBAGyB;AACzB,eAAO,MAAM,WAAW,EAAE,MAAk4B,CAAA"}
+{"version":3,"file":"css-inline.d.ts","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAGA;;;iEAGiE;AACjE,eAAO,MAAM,WAAW,EAAE,MAAos4S,CAAA;AAE9t4S;;;yBAGyB;AACzB,eAAO,MAAM,WAAW,EAAE,MAAk4B,CAAA"}