@zevra/support-widget 0.2.0

package/README.md

@@ -0,0 +1,80 @@
+# @zevra/support-widget — le bouton « Aide » et son tiroir
+
+Bouton flottant, puis un tiroir à trois onglets : **Signaler**,
+**Mes demandes**, **Bêta**.
+
+> **Ce paquet ne connaît aucune clé et aucune URL de Support.** Il appelle
+> `/api/support/*` sur son propre domaine — les routes que
+> `creerRoutesSupport()` de `@zevra/support` installe côté serveur de l'app.
+> C'est ce relais qui détient `SUPPORT_API_KEY` et qui décide, à partir de la
+> session de l'app, de qui parle.
+
+Le guide d'intégration complet vit dans **`docs/integration.md`** du dépôt et
+sur **https://support.zevra.tech/integration**.
+
+## Pose
+
+```tsx
+'use client'
+import { WidgetSupport, installerTamponErreurs } from '@zevra/support-widget'
+
+// ⚠️ Le tampon d'erreurs se pose LE PLUS TÔT POSSIBLE dans l'app, pas au
+// montage du widget : posé au montage, il manque les erreurs du démarrage,
+// c'est-à-dire celles qu'on signale.
+useEffect(() => installerTamponErreurs(), [])
+
+<WidgetSupport version={process.env.NEXT_PUBLIC_VERSION} />
+```
+
+Props : `base` (défaut `/api/support`), `libelle`, `titre`, `position`
+(`bas-droite` | `bas-gauche` | `haut-droite` | `haut-gauche` | `haut-centre` |
+`bas-centre`), `decalage`, `discret`, `marque`,
+`version`, `betaOfferte`, `captureOfferte`,
+`contexteSupplementaire`, `client`, `onOuvrir`, `onEnvoye`.
+
+Le formulaire ne demande qu'une phrase et une capture facultative : le type et
+le titre sont posés par le triage IA de Support (depuis 0.2.0).
+
+⚠️ `decalage` va avec les positions hautes : le widget ne connaît pas la
+hauteur de votre barre de navigation, et se poserait par-dessus.
+
+## Ce qu'il relève tout seul
+
+URL, user agent, système déduit, taille de la fenêtre, langue, version de
+l'app, et les **20 dernières erreurs de console**. Capture d'écran facultative
+(`html-to-image`, chargé dynamiquement au clic), de la page entière ou d'une
+**zone tracée à la souris** : le widget se masque, la page se voile, Échap
+annule. La géométrie du recadrage vit dans `src/zone.ts`, pure et testée —
+c'est là que se règlent le défilement et le facteur d'échelle de l'image.
+
+⚠️ **Sur l'URL** : les valeurs des paramètres sont retirées, leurs noms
+conservés — `?jeton=abc&page=2` devient `?jeton&page`. Une query string porte
+régulièrement un jeton de lien magique ; copiée dans un ticket, elle est
+recopiée dans la base du support et dans l'accusé de réception. Le fragment
+part entièrement.
+
+## L'habillage
+
+Une feuille à lui, entièrement préfixée `zvs-`, dont **chaque valeur de marque
+lit un token Zevra avec un repli littéral** : `color: var(--ink, #0b1020)`.
+
+Là où `@zevra/ui` est chargé, le widget est dans les couleurs de la maison, y
+compris après un changement de charte. Là où il ne l'est pas, le repli
+s'applique. Aucune classe de l'hôte n'est lue, aucune classe `zvs-` n'existe
+ailleurs : la collision est impossible dans les deux sens. Un `var()` sans
+repli serait un bug invisible chez nous (toutes nos apps ont le paquet) et du
+texte blanc sur blanc ailleurs — c'est `tests/styles.test.ts` qui tient la
+règle.
+
+## Tests
+
+```bash
+npx vitest run --config packages/widget/vitest.config.ts
+```
+
+Ce qui est couvert : le nettoyage d'URL, l'ordre des tests de user agent
+(Android contient « Linux », iPhone contient « Mac OS X »), la mesure absente
+qui n'est pas `0 × 0`, le tampon borné à 20 dans l'ordre, un `Symbol` / un objet
+circulaire / un `BigInt` qui ne doivent jamais faire jeter la console de
+l'hôte, l'idempotence de la pose, chaque token de la feuille qui a son repli,
+et la validation qui rend tous les défauts d'un coup.

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@zevra/support-widget",
+  "version": "0.2.0",
+  "description": "Widget React « Support Zevra » : bouton, tiroir, capture d'une zone.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": "./src/index.tsx"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "html-to-image": "^1.11.13"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}

package/src/capture.ts

@@ -0,0 +1,260 @@
+// ============================================================================
+// La capture d'écran, facultative de bout en bout.
+// ============================================================================
+//
+// ⚠️ `html-to-image` est chargé en IMPORT DYNAMIQUE, au moment du clic.
+//
+// Deux raisons mesurables. D'abord le poids : la bibliothèque fait plusieurs
+// dizaines de kilo-octets, et elle serait dans le bundle initial de CHAQUE
+// page d'une app qui pose le widget — pour une fonction que la plupart des
+// signalements n'emploient pas. Ensuite la robustesse : la capture échoue
+// légitimement (une image d'une autre origine « salit » le canevas, une police
+// distante refuse le CORS, la page est trop grande). Un import statique ferait
+// de cet échec une panne de chargement du widget entier.
+//
+// Résultat : sans la bibliothèque, ou si la capture échoue, le formulaire
+// reste utilisable et le dit. La capture est un CONFORT, jamais un passage
+// obligé.
+
+import { zoneDansImage, type Rectangle } from './zone'
+
+/** Au-delà, la capture pèse plus que tout le reste de la demande. */
+export const TAILLE_MAX_CAPTURE_OCTETS = 3_000_000
+
+export const TYPE_MIME_CAPTURE = 'image/png'
+
+export interface CaptureFaite {
+  /** Le PNG, prêt à être déposé par PUT présigné. */
+  binaire: Blob
+  /** La même image en data-URL, pour la vignette de relecture. */
+  apercu: string
+  octets: number
+}
+
+export type ResultatCapture =
+  | { faite: true; capture: CaptureFaite }
+  | { faite: false; motif: string }
+
+export interface OptionsCapture {
+  /**
+   * Le tracé à garder, en coordonnées de FENÊTRE (voir `zone.ts`). Absent :
+   * on garde l'élément entier, comme avant.
+   */
+  zone?: Rectangle | null
+}
+
+/**
+ * Capture un élément (par défaut le corps de la page), éventuellement recadré.
+ *
+ * Ne jette JAMAIS : rend `{ faite: false, motif }`, parce qu'une capture ratée
+ * ne doit pas faire perdre un formulaire à moitié rempli.
+ *
+ * ⚠️ LE RECADRAGE SE FAIT APRÈS, PAS PENDANT. On rend l'élément entier, puis
+ * on découpe l'image. Demander à la bibliothèque de ne rendre que la zone
+ * supposerait de lui passer un ÉLÉMENT, or une zone tracée à la main tombe
+ * régulièrement à cheval sur deux blocs — c'est même le cas courant quand on
+ * entoure « le bouton et le message d'erreur à côté ». Le coût est une image
+ * intermédiaire, jamais envoyée.
+ */
+export async function capturerEcran(
+  element: HTMLElement | null | undefined,
+  options: OptionsCapture = {},
+): Promise<ResultatCapture> {
+  if (!element) return { faite: false, motif: "Rien à capturer sur cette page." }
+
+  let versPng: (noeud: HTMLElement, options?: Record<string, unknown>) => Promise<string>
+  try {
+    const bibliotheque = await import('html-to-image')
+    versPng = bibliotheque.toPng
+  } catch {
+    return {
+      faite: false,
+      motif: "La capture d'écran n'est pas disponible dans cette application.",
+    }
+  }
+
+  try {
+    const dataUrl = await versPng(element, {
+      // Une capture n'a pas besoin d'être nette au pixel : elle sert à voir
+      // l'état de l'écran. `pixelRatio: 1` divise le poids par quatre sur un
+      // écran Retina, où la capture brute dépasse allègrement les 3 Mo.
+      pixelRatio: 1,
+      // Le widget lui-même n'a rien à faire sur la capture : il masque
+      // précisément la partie de l'écran qu'on veut montrer.
+      filter: (noeud: unknown) => {
+        const element_ = noeud as { classList?: { contains(c: string): boolean } }
+        return !element_?.classList?.contains?.('zvs-racine')
+      },
+    })
+    const image = options.zone
+      ? await recadrer(dataUrl, element, options.zone)
+      : dataUrl
+    if (image === null) {
+      return {
+        faite: false,
+        motif: 'La zone choisie est en dehors de la capture. Retracez-la sur la page.',
+      }
+    }
+
+    const octets = decoderDataUrl(image)
+    if (octets === null) {
+      return {
+        faite: false,
+        motif: "La capture d'écran n'a rien produit de lisible sur cette page.",
+      }
+    }
+    const binaire = new Blob([octets], { type: TYPE_MIME_CAPTURE })
+    if (binaire.size > TAILLE_MAX_CAPTURE_OCTETS) {
+      return {
+        faite: false,
+        motif: 'La capture est trop lourde pour être jointe. Décrivez plutôt ce que vous voyez.',
+      }
+    }
+    return { faite: true, capture: { binaire, apercu: image, octets: binaire.size } }
+  } catch {
+    // Cas le plus fréquent : une image d'une autre origine a « sali » le
+    // canevas et le navigateur refuse de l'exporter. Rien à corriger côté
+    // utilisateur, et surtout rien qui justifie de perdre sa saisie.
+    return {
+      faite: false,
+      motif: "La capture d'écran a échoué sur cette page. Le reste de votre signalement part quand même.",
+    }
+  }
+}
+
+/**
+ * Découpe une image déjà rendue au rectangle demandé. IMPUR (canevas).
+ *
+ * Rend `null` quand il n'y a rien à découper : image illisible, zone hors de
+ * l'élément, canevas refusé. L'appelant en fait une phrase, jamais une image
+ * vide.
+ *
+ * ⚠️ AUCUN RISQUE DE CANEVAS SALI ICI. La source est la data-URL que la
+ * capture vient de produire, donc de même origine par construction :
+ * `toDataURL` ne peut pas être refusé pour cause d'origine croisée. C'est la
+ * capture elle-même qui échoue quand la page porte une image d'ailleurs, et
+ * elle le dit déjà.
+ */
+async function recadrer(
+  dataUrl: string,
+  element: HTMLElement,
+  zone: Rectangle,
+): Promise<string | null> {
+  const image = await chargerImage(dataUrl)
+  if (image === null) return null
+
+  const cadre = element.getBoundingClientRect()
+  const decoupe = zoneDansImage({
+    zone,
+    // Le cadre est relevé MAINTENANT, pas au moment du tracé : entre les deux,
+    // rien n'a défilé (le voile bloque), mais un relevé figé se désynchroniserait
+    // le jour où on rendrait le voile défilable.
+    cadre: { x: cadre.left, y: cadre.top },
+    imageLargeur: image.naturalWidth || image.width,
+    imageHauteur: image.naturalHeight || image.height,
+    elementLargeur: element.offsetWidth || cadre.width,
+    elementHauteur: element.offsetHeight || cadre.height,
+  })
+  if (decoupe === null) return null
+
+  try {
+    const canevas = document.createElement('canvas')
+    canevas.width = decoupe.largeur
+    canevas.height = decoupe.hauteur
+    const pinceau = canevas.getContext('2d')
+    if (pinceau === null) return null
+    pinceau.drawImage(
+      image,
+      decoupe.x,
+      decoupe.y,
+      decoupe.largeur,
+      decoupe.hauteur,
+      0,
+      0,
+      decoupe.largeur,
+      decoupe.hauteur,
+    )
+    return canevas.toDataURL(TYPE_MIME_CAPTURE)
+  } catch {
+    return null
+  }
+}
+
+/** Charge une data-URL en image. Rend `null` au lieu de jeter ou d'attendre. */
+function chargerImage(dataUrl: string): Promise<HTMLImageElement | null> {
+  return new Promise((resoudre) => {
+    try {
+      const image = new Image()
+      image.onload = () => resoudre(image)
+      image.onerror = () => resoudre(null)
+      image.src = dataUrl
+    } catch {
+      resoudre(null)
+    }
+  })
+}
+
+/**
+ * Décode une data-URL base64 en octets. PUR, total : rend `null` plutôt que
+ * de jeter.
+ *
+ * ⚠️ POURQUOI PAS `await fetch(dataUrl)`, qui tient en une ligne : une
+ * politique de sécurité de contenu un peu sérieuse écrit `connect-src 'self'`,
+ * et `data:` n'y est presque jamais listé. `fetch()` sur une data-URL est
+ * alors BLOQUÉ par le navigateur — la capture échoue, le widget affiche « la
+ * capture a échoué sur cette page », et on cherche du côté de html-to-image un
+ * problème qui vient de l'en-tête CSP de l'app hôte. Le décodage manuel ne
+ * traverse aucune politique réseau.
+ *
+ * Le type de retour nomme son tampon (`Uint8Array<ArrayBuffer>`) : un
+ * `Uint8Array` tout court porte `ArrayBufferLike`, qui inclut
+ * `SharedArrayBuffer`, et `new Blob([…])` le refuse — l'erreur ne parle alors
+ * que de variance, jamais du fait qu'un tampon partagé n'est pas transférable.
+ *
+ * `atob` ne connaît que le base64 : une data-URL en texte brut
+ * (`data:image/svg+xml,<svg…>`) est refusée ici, ce qui est correct — la seule
+ * qu'on décode est celle que `toPng` produit, toujours en base64.
+ */
+export function decoderDataUrl(dataUrl: string): Uint8Array<ArrayBuffer> | null {
+  if (typeof dataUrl !== 'string') return null
+  const virgule = dataUrl.indexOf(',')
+  if (!dataUrl.startsWith('data:') || virgule < 0) return null
+  if (!/;base64$/i.test(dataUrl.slice(0, virgule))) return null
+  const charge = dataUrl.slice(virgule + 1)
+  if (charge === '') return null
+  try {
+    const binaire = atob(charge)
+    const octets = new Uint8Array(binaire.length)
+    for (let i = 0; i < binaire.length; i += 1) octets[i] = binaire.charCodeAt(i)
+    return octets
+  } catch {
+    // base64 tronqué ou invalide : `atob` jette. Une capture illisible ne doit
+    // pas faire perdre un formulaire à moitié rempli.
+    return null
+  }
+}
+
+/**
+ * Dépose un binaire sur l'URL présignée rendue par le relais.
+ *
+ * ⚠️ Le `Content-Type` doit être EXACTEMENT celui qui a été annoncé au moment
+ * de demander l'URL : il est signé avec elle. Un octet d'écart et S3 répond
+ * 403 — sans quoi une app pourrait annoncer `image/png` et déposer un
+ * exécutable.
+ */
+export async function deposerBinaire(
+  urlPut: string,
+  binaire: Blob,
+  typeMime: string,
+): Promise<boolean> {
+  try {
+    const reponse = await fetch(urlPut, {
+      method: 'PUT',
+      body: binaire,
+      headers: { 'Content-Type': typeMime },
+    })
+    return reponse.ok
+  } catch {
+    return false
+  }
+}

package/src/client-relais.ts

@@ -0,0 +1,130 @@
+// ============================================================================
+// Le seul interlocuteur du widget : les routes `/api/support/*` de l'app hôte.
+// ============================================================================
+//
+// ⚠️ AUCUNE CLÉ, AUCUNE URL DE SUPPORT, AUCUN EN-TÊTE D'AUTHENTIFICATION dans
+// ce fichier — ni ailleurs dans ce paquet. Le widget parle à SON PROPRE
+// domaine, en `same-origin`, et c'est le relais (`creerRoutesSupport()` de
+// `@zevra/support`) qui détient `SUPPORT_API_KEY` et qui décide de qui parle.
+//
+// Ce n'est pas une précaution de style : la clé authentifie l'app entière, et
+// tout ce qui traverse ce fichier est lisible dans l'onglet Réseau du premier
+// visiteur venu.
+
+import type { DemandeLue, ErreurDuRelais, ProgrammeActif, ResumeDemande } from './types'
+
+export const BASE_PAR_DEFAUT = '/api/support'
+
+export class ErreurRelais extends Error {
+  readonly code: string
+  readonly statut: number
+  readonly champs?: Record<string, string>
+
+  constructor(donnees: ErreurDuRelais & { statut: number }) {
+    super(donnees.message)
+    this.name = 'ErreurRelais'
+    this.code = donnees.code
+    this.statut = donnees.statut
+    this.champs = donnees.champs
+  }
+}
+
+export interface ClientRelais {
+  creer(corps: unknown): Promise<{ id: string; reference: string }>
+  lister(): Promise<{ demandes: ResumeDemande[] }>
+  lire(id: string): Promise<DemandeLue>
+  repondre(id: string, corps: string, pieces?: readonly string[]): Promise<void>
+  deposerPiece(fichier: DescripteurPiece): Promise<{ id: string; url_put: string }>
+  programmeActif(): Promise<ProgrammeActif>
+}
+
+export interface DescripteurPiece {
+  nom: string
+  type_mime: string
+  octets: number
+}
+
+export function creerClientRelais(
+  base: string = BASE_PAR_DEFAUT,
+  appelFetch: typeof fetch = globalThis.fetch,
+): ClientRelais {
+  const racine = base.replace(/\/+$/, '')
+
+  async function appeler<T>(chemin: string, init: RequestInit = {}): Promise<T> {
+    let reponse: Response
+    try {
+      reponse = await appelFetch(`${racine}${chemin}`, {
+        ...init,
+        // ⚠️ `same-origin` : le widget appelle SON app. `include` enverrait les
+        // cookies à une origine tierce le jour où quelqu'un passerait une base
+        // absolue — exactement ce que ce paquet ne doit pas permettre.
+        credentials: 'same-origin',
+        headers: {
+          Accept: 'application/json',
+          ...(init.body ? { 'Content-Type': 'application/json' } : {}),
+          ...(init.headers as Record<string, string> | undefined),
+        },
+      })
+    } catch {
+      // Hors ligne, ou l'app est tombée. Le message parle à la personne, pas
+      // au journal : elle n'a rien à corriger, elle doit savoir que rien n'est
+      // parti — sans quoi elle enverra trois fois le même signalement.
+      throw new ErreurRelais({
+        code: 'reseau',
+        message: "Impossible de joindre l'application. Votre message n'a pas été envoyé.",
+        statut: 0,
+      })
+    }
+
+    const donnees = await lireJson(reponse)
+    if (!reponse.ok) {
+      const enveloppe = (donnees as { erreur?: ErreurDuRelais } | null)?.erreur
+      throw new ErreurRelais({
+        code: enveloppe?.code ?? 'interne',
+        message: enveloppe?.message ?? "Le support n'a pas pu traiter cette demande.",
+        champs: enveloppe?.champs,
+        statut: reponse.status,
+      })
+    }
+    return donnees as T
+  }
+
+  return {
+    creer: (corps) =>
+      appeler('/demandes', { method: 'POST', body: JSON.stringify(corps) }),
+    lister: () => appeler('/demandes'),
+    lire: (id) => appeler(`/demandes/${encodeURIComponent(id)}`),
+    repondre: async (id, corps, pieces) => {
+      await appeler(`/demandes/${encodeURIComponent(id)}/messages`, {
+        method: 'POST',
+        body: JSON.stringify({ corps, pieces }),
+      })
+    },
+    deposerPiece: (fichier) =>
+      appeler('/pieces', { method: 'POST', body: JSON.stringify(fichier) }),
+    programmeActif: () => appeler('/programmes/actif'),
+  }
+}
+
+/**
+ * Lit le corps sans jamais jeter.
+ *
+ * Une route d'app hôte mal branchée rend du HTML (la page 404 de Next). Laisser
+ * `response.json()` jeter remplacerait « 404 » par une erreur de syntaxe JSON,
+ * et on chercherait un bug de sérialisation qui n'existe pas — alors que le
+ * vrai problème est un fichier de route jamais créé.
+ */
+async function lireJson(reponse: Response): Promise<unknown> {
+  let texte: string
+  try {
+    texte = await reponse.text()
+  } catch {
+    return null
+  }
+  if (texte.trim() === '') return null
+  try {
+    return JSON.parse(texte)
+  } catch {
+    return null
+  }
+}

package/src/composants/briques.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+// ============================================================================
+// Les quelques primitives du widget. Aucune dépendance, aucune classe de l'hôte.
+// ============================================================================
+//
+// ⚠️ Ce ne sont PAS des composants de design system, et elles n'ont pas
+// vocation à le devenir : elles n'existent que parce que le widget doit se
+// rendre dans une app qui n'a peut-être pas `@zevra/ui`. Tout ce qui se rend
+// dans NOS écrans (la console, le portail, la page d'intégration) s'habille
+// avec le paquet, pas avec ceci.
+//
+// Elles ne portent que des classes `zvs-` : voir `styles.ts` pour le
+// raisonnement complet sur la cohabitation avec l'app hôte.
+
+import type { ReactNode } from 'react'
+
+import type { StatutDemande } from '../types'
+import { LIBELLES_STATUT } from '../types'
+
+export function Champ({
+  label,
+  htmlFor,
+  erreur,
+  aide,
+  children,
+}: {
+  label: string
+  htmlFor: string
+  erreur?: string
+  aide?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <div className="zvs-champ">
+      <label className="zvs-label" htmlFor={htmlFor}>
+        {label}
+      </label>
+      {children}
+      {/* L'aide DISPARAÎT pendant l'erreur : les deux au même endroit se
+          chevauchent, et c'est l'erreur qui doit se lire. */}
+      {erreur ? (
+        <p className="zvs-erreur" id={`${htmlFor}-err`}>
+          {erreur}
+        </p>
+      ) : aide ? (
+        <p className="zvs-aide">{aide}</p>
+      ) : null}
+    </div>
+  )
+}
+
+export function Bouton({
+  variante = 'plein',
+  occupe,
+  onClick,
+  children,
+  ...reste
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variante?: 'plein' | 'fantome'
+  occupe?: boolean
+}) {
+  return (
+    <button
+      // ⚠️ `onClick` est SORTI de `reste` et posé APRÈS l'étalement. Laissé
+      // dedans, il réapparaîtrait par l'étalement et écraserait la garde
+      // `occupe` juste en dessous : un deuxième clic pendant l'envoi partirait,
+      // et la personne créerait deux demandes pour un seul problème. Même
+      // raison pour `type` : un bouton sans type, dans un formulaire, vaut
+      // « submit » et recharge la page.
+      {...reste}
+      type="button"
+      className={`zvs-bouton${variante === 'fantome' ? ' zvs-bouton--fantome' : ''}`}
+      // ⚠️ `aria-disabled` et non `disabled` : un bouton désactivé sort du
+      // parcours clavier au moment précis où l'attente s'annonce, et le
+      // lecteur d'écran perd le focus sans rien dire. La garde du clic est
+      // donc à notre charge — c'est la ligne suivante.
+      aria-disabled={occupe ? true : undefined}
+      aria-busy={occupe ? true : undefined}
+      onClick={occupe ? undefined : onClick}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function Alerte({
+  ton = 'info',
+  children,
+}: {
+  ton?: 'info' | 'ok' | 'err'
+  children: ReactNode
+}) {
+  return (
+    <div
+      className={`zvs-alerte${ton === 'err' ? ' zvs-alerte--err' : ton === 'ok' ? ' zvs-alerte--ok' : ''}`}
+      role={ton === 'err' ? 'alert' : undefined}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * La pastille de statut.
+ *
+ * ⚠️ Le tableau est EXHAUSTIF sur le vocabulaire fermé, et un statut inconnu
+ * (une valeur ajoutée côté Support plus tard) reste NEUTRE, avec son libellé
+ * brut. Le replier d'office sur « résolue » annoncerait à quelqu'un que son
+ * problème est réglé alors que personne ne l'a dit.
+ */
+export function Pastille({ statut }: { statut: StatutDemande | string }) {
+  const modificateur =
+    statut === 'resolue' || statut === 'fermee'
+      ? ' zvs-pastille--resolue'
+      : statut === 'en_attente_requerant'
+        ? ' zvs-pastille--attente'
+        : statut === 'ouverte' || statut === 'nouvelle'
+          ? ' zvs-pastille--ouverte'
+          : ''
+  const libelle = LIBELLES_STATUT[statut as StatutDemande] ?? statut
+  return <span className={`zvs-pastille${modificateur}`}>{libelle}</span>
+}
+
+/** Un horodatage court, en Europe/Paris, sans dépendance de formatage. */
+export function Horodatage({ valeur }: { valeur: string | null | undefined }) {
+  if (!valeur) return <span className="zvs-meta">—</span>
+  const date = new Date(valeur)
+  if (Number.isNaN(date.getTime())) return <span className="zvs-meta">—</span>
+  return (
+    <time className="zvs-meta" dateTime={valeur}>
+      {date.toLocaleDateString('fr-FR', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZone: 'Europe/Paris',
+      })}
+    </time>
+  )
+}
+
+export function Vide({ children }: { children: ReactNode }) {
+  return <p className="zvs-vide">{children}</p>
+}