Le Livre

"use client";

import { useEffect, useRef, useState } from "react";

/* ------------------------------------------------------------------
   Attente · une grille de neuf pixels, un mot, et un chronomètre.

   Le sablier, la roue qui tourne, la barre qui n'avance pas : trois
   façons de dire « patientez » et aucune de dire combien de temps. Ce
   composant en dit trois choses, et c'est ce qui le distingue :

     CE QUI TRAVAILLE  : le mot. Pas « Chargement », mais le verbe de
                          ce qui se passe. Un mot qui change pendant
                          l'attente dit qu'on avance ; un mot fixe dit
                          seulement qu'on n'a pas planté.
     QUE ÇA VIT        : la grille. Une onde traverse trois colonnes,
                          et son cycle est PLUS COURT que la traversée :
                          deux fronts sont toujours en vol, donc la
                          grille n'est jamais éteinte.
     DEPUIS QUAND      : le chronomètre. C'est la seule information
                          honnête qu'on puisse donner sans connaître la
                          fin, et c'est celle qu'on cherche des yeux au
                          bout de dix secondes.

   NEUF ÉLÉMENTS, ZÉRO TRAME. Les neuf cellules sont animées par une
   `@keyframes` CSS avec neuf retards différents : le compositeur s'en
   occupe, le fil principal n'est réveillé par rien. Le chronomètre est
   la seule chose qui tourne, dix fois par seconde, pas soixante, parce
   qu'un dixième de seconde ne change pas plus vite que ça.

   LE CHRONOMÈTRE N'EST PAS UN COMPTEUR. Il ne s'incrémente pas de cent
   millisecondes à chaque réveil : il relit l'horloge. Un intervalle en
   retard (onglet en arrière-plan, fil principal occupé, machine
   chargée) ferait dériver un compteur de plusieurs secondes sur une
   longue attente, et un chronomètre qui ment sur une attente longue
   ment exactement quand on le regarde.
------------------------------------------------------------------- */

export type Motif = "chasse" | "points" | "orbite";

export type AttenteProps = {
  /** Le verbe de ce qui travaille. Change-le pendant l'attente. */
  mot?: string;
  motif?: Motif;
  /** Affiche le temps écoulé depuis le montage. */
  chrono?: boolean;
  className?: string;
};

/* La chasse : un front en chevron qui traverse de gauche à droite. Le
   retard d'une cellule est sa colonne, plus son écart à la ligne du
   milieu, ce qui incline le front au lieu de le laisser droit. */
const CHASSE = Array.from({ length: 9 }, (_, i) =>
  ((i % 3) + Math.abs(Math.floor(i / 3) - 1)) * 90
);

/* L'orbite : une comète fait le tour du bord. Le centre ne s'allume
   jamais : il reste à l'état sourd, et c'est ce vide au milieu qui fait
   lire une rotation plutôt qu'un scintillement. */
const TOUR = [0, 1, 2, 5, 8, 7, 6, 3];
const ORBITE = Array.from({ length: 9 }, (_, i) => {
  const k = TOUR.indexOf(i);
  return k === -1 ? null : k * 110;
});

const MOTIFS: Record<Motif, { retards: (number | null)[]; duree: number; rond: boolean }> = {
  chasse: { retards: CHASSE, duree: 650, rond: false },
  points: { retards: CHASSE, duree: 650, rond: true },
  orbite: { retards: ORBITE, duree: 950, rond: false },
};

/** Le temps écoulé, relu sur l'horloge et jamais accumulé. */
function useEcoule(actif: boolean) {
  const depart = useRef(0);
  const [ms, setMs] = useState(0);
  useEffect(() => {
    if (!actif) return;
    depart.current = performance.now();
    setMs(0);
    const t = window.setInterval(
      () => setMs(performance.now() - depart.current),
      100
    );
    return () => window.clearInterval(t);
  }, [actif]);

  const s = ms / 1000;
  if (s < 60) return `${s.toFixed(1)} s`;
  return `${Math.floor(s / 60)} min ${(s % 60).toFixed(0).padStart(2, "0")} s`;
}

function Grille({ retards, duree, rond }: (typeof MOTIFS)[Motif]) {
  return (
    <span className="att__grille" aria-hidden="true" data-rond={rond || undefined}>
      {retards.map((r, i) => (
        <span
          key={i}
          className="att__px"
          data-morte={r === null || undefined}
          style={
            r === null
              ? undefined
              : ({ "--r": `${r}ms`, "--t": `${duree}ms` } as React.CSSProperties)
          }
        />
      ))}
    </span>
  );
}

export default function Attente({
  mot = "Traitement",
  motif = "chasse",
  chrono = true,
  className,
}: AttenteProps) {
  const ecoule = useEcoule(chrono);
  const m = MOTIFS[motif] ?? MOTIFS.chasse;

  return (
    /* `role="status"` et pas `aria-live="assertive"` : une attente
       s'annonce quand le lecteur d'écran a fini sa phrase, elle ne
       l'interrompt pas. Le chronomètre en est retiré : il changerait
       dix fois par seconde, et personne ne veut entendre ça. */
    <div className={className ? `att ${className}` : "att"} role="status">
      <Grille {...m} />
      <span className="att__mot">{mot}</span>
      {chrono && (
        <span className="att__chrono" aria-hidden="true">
          {ecoule}
        </span>
      )}
    </div>
  );
}

/* Attente · src/components/book/kit/Attente.tsx */

.att {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  --att-px: 4px;
  --att-jour: 1.5px;
}

/* ---------- La grille ----------

   Trois colonnes de quatre pixels. Les neuf cellules sont animées par
   une seule `@keyframes`, avec neuf retards : rien n'est piloté en
   JavaScript, et le fil principal n'est réveillé par aucune trame.

   Les cellules mortes de l'orbite gardent leur place et leur teinte la
   plus sourde. Les retirer ferait s'effondrer la grille sur huit
   cellules ; les allumer supprimerait le vide central qui fait lire une
   rotation. */
.att__grille {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, var(--att-px));
  gap: var(--att-jour);
}
.att__px {
  width: var(--att-px);
  height: var(--att-px);
  border-radius: 1px;
  background: var(--fg);
  opacity: 0.16;
  animation: att-pixel var(--t, 650ms) ease-in-out var(--r, 0ms) infinite;
}
.att__grille[data-rond] .att__px {
  border-radius: 50%;
}
.att__px[data-morte] {
  opacity: 0.07;
  animation: none;
}
@keyframes att-pixel {
  0%,
  100% {
    opacity: 0.16;
  }
  38% {
    opacity: 1;
  }
}

/* ---------- Le mot ----------

   Le reflet passe DANS la lettre, pas derrière : le dégradé est peint
   sur le texte lui-même. Une bande claire qui traverse un bloc de texte
   se lit comme un balayage de chargement générique ; la même bande dans
   le tracé des lettres se lit comme une matière. */
.att__mot {
  font-size: 0.92em;
  font-weight: 500;
  color: var(--muted-strong);
  background-image: linear-gradient(
    90deg,
    var(--muted-strong) 34%,
    var(--fg) 50%,
    var(--muted-strong) 66%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: att-reflet 1.5s linear infinite;
}
@keyframes att-reflet {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -30% 0;
  }
}

/* Chiffres TABULAIRES, et c'est tout l'intérêt. Sans eux, la largeur du
   nombre change à chaque dixième de seconde, et la ligne entière
   tressaute : un chronomètre qui gigote se lit comme une erreur. */
.att__chrono {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Mouvement réduit : la grille se fige à son état sourd et le reflet
   s'en va. Le chronomètre, lui, continue : c'est de l'information, pas
   du mouvement, et c'est justement celle qu'on est venu chercher. */
@media (prefers-reduced-motion: reduce) {
  .att__px,
  .att__mot {
    animation: none;
  }
  .att__mot {
    -webkit-text-fill-color: var(--muted-strong);
  }
}

/* En contraste forcé, un texte peint par un dégradé disparaît : le
   système impose ses couleurs et le remplissage transparent gagne. */
@media (forced-colors: active) {
  .att__mot {
    background: none;
    -webkit-text-fill-color: CanvasText;
  }
}

"use client";

/* ------------------------------------------------------------------
   Règle de défilement.

   Le navigateur n'a qu'un mot pour dire « où vous en êtes » : un pavé
   gris. Celle-ci le dit autrement : une colonne de graduations d'un
   pixel, et un renflement là où se trouve la lecture. La longueur de
   chaque trait est fonction de sa distance au point de lecture : le
   renflement EST le curseur, sa largeur EST la part visible. Les traits
   posés sur un début de section sortent un peu plus et pèsent un peu
   plus lourd : le découpage du document se lit en même temps que la
   position. Rien n'est décoratif, tout est une mesure.

   Elle mesure la page entière, ou n'importe quelle boîte défilée. C'est
   la seule chose que `scroller` change : passé les cinq fonctions
   d'adaptation en tête d'effet, le composant ne sait plus lequel des
   deux il mesure.

   Quatre règles de fabrication :

   1. Aucune mise en page n'est animée. Chaque trait porte sa longueur
      finale dans le DOM et n'est jamais touché qu'en `scaleX` et en
      `opacity` : les deux seules propriétés que le compositeur sait
      traiter sans repasser par la mise en page.
   2. La boucle s'arrête. Dès que la position lissée a rejoint sa cible
      et que la règle s'est endormie, `requestAnimationFrame` n'est plus
      redemandé : une barre au repos ne doit rien coûter.
   3. Le lissage est exponentiel, pas linéaire (`1 - e^(-dt/τ)`), donc
      identique à 60, 120 ou 144 Hz. Un lissage à pas fixe accélère avec
      la fréquence de l'écran ; celui-ci non.
   4. Une écriture n'est faite que si la valeur a bougé. Les deux tampons
      `sx` / `al` évitent quarante affectations de style par trame pour
      des variations invisibles.

   Elle ne remplace la barre du système que là où le CSS le dit : en mode
   page, au-delà de 1120 px et avec un pointeur fin. En dessous (au
   doigt, sur petit écran, sans JS), la barre native reste en place. On
   ne retire jamais un moyen de défiler sans en poser un autre qui
   marche, et c'est le CSS qui tranche : le composant lit `display` au
   lieu de dupliquer le seuil.

   `aria-hidden` est délibéré. Le défilement au clavier et aux
   technologies d'assistance passe par le document, jamais par ce
   composant : exposer un second widget « scrollbar » n'ajouterait qu'un
   doublon dans l'arbre d'accessibilité.
------------------------------------------------------------------- */

import { useEffect, useRef } from "react";

const PITCH = 7; /* pas entre deux graduations, en px */
const TICKS_MIN = 14;
const TICKS_MAX = 76;

const SCALE_MIN = 0.26; /* longueur au repos, en fraction de la pleine */
const ALPHA_MIN = 0.15;
const ALPHA_MAX = 0.88;

/* Planchers des traits posés sur un début de section. Un plancher, pas
   un état : le renflement du curseur passe par-dessus sans rien
   effacer, et deux repères de même force ne se liraient plus comme une
   hiérarchie. */
const MARK_SCALE = 0.42;
const MARK_ALPHA = 0.3;

const FEATHER = 0.055; /* dégradé de part et d'autre du curseur */
const THUMB_MIN = 0.06; /* le curseur ne disparaît jamais tout à fait */
const THUMB_MAX = 0.24; /* ni n'avale la règle sur un contenu court */

const PROX = 150; /* rayon d'attraction du pointeur, en px */
const LENS = 0.1; /* demi-largeur de la loupe du pointeur */
const LENS_GAIN = 0.58; /* large et basse, là où le curseur est étroit et
                           haut : la loupe éclaire, elle ne prétend pas
                           indiquer une position. */

const IDLE = 1600; /* ms d'immobilité avant le repos */
const FIRST_IDLE = 2900; /* la première fois, le temps de la remarquer */
const BOOT = 640; /* entrée décalée : elle arrive après la page, pas avec */
const TAU_POS = 55; /* constantes de lissage, en ms */
const TAU_LENS = 110;
const SLOP = 3; /* px avant qu'un clic devienne un glissement */
const DEAD = 24; /* en deçà, il n'y a plus rien à mesurer */

const clamp01 = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x);
const ease = (x: number) => x * x * (3 - 2 * x);

export type RailProps = {
  /** La boîte défilée. Absente : la page entière. */
  scroller?: React.RefObject<HTMLElement | null>;
  /** Sélecteur des débuts de section, relevés dans le contenu défilé.
      Vide : pas de repères, seulement la position. */
  sections?: string;
  className?: string;
};

export default function Rail({
  scroller,
  sections = "section",
  className,
}: RailProps) {
  const rail = useRef<HTMLDivElement>(null);
  const track = useRef<HTMLDivElement>(null);
  const hit = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const host = rail.current;
    const rack = track.current;
    const grip = hit.current;
    if (!host || !rack || !grip) return;

    const root = document.documentElement;
    const calm = window.matchMedia("(prefers-reduced-motion: reduce)");

    /* ---------------- adaptation ----------------
       Cinq fonctions, et la page comme la boîte répondent aux mêmes
       questions. Tout ce qui suit les ignore. */
    const pane = scroller?.current ?? null;
    const body = pane ?? document.scrollingElement ?? root;
    const source: EventTarget = pane ?? window;
    const seen = () => (pane ? pane.clientHeight : window.innerHeight);
    const here = () => (pane ? pane.scrollTop : window.scrollY);
    const jump = (y: number, glide: boolean) => {
      const how: ScrollToOptions = {
        top: y,
        behavior: glide ? "smooth" : "instant",
      };
      if (pane) pane.scrollTo(how);
      else window.scrollTo(how);
    };
    const offset = (el: Element) =>
      el.getBoundingClientRect().top +
      (pane ? pane.scrollTop - pane.getBoundingClientRect().top : window.scrollY);

    let ticks: HTMLSpanElement[] = [];
    let sx = new Float32Array(0);
    let al = new Float32Array(0);
    let mark = new Uint8Array(0); /* 1 = début de section */
    let n = 0;

    let live = false; /* le CSS a-t-il posé la règle ? */
    let top = 0;
    let height = 0;
    let box = { left: 0, right: 0 };
    let max = 0; /* course de défilement */
    let half = THUMB_MIN / 2; /* demi-hauteur du curseur, normalisée */

    let aim = 0; /* centre visé, normalisé sur la règle */
    let pos = 0; /* centre lissé */
    let lens = 0; /* présence du pointeur, 0..1 */
    let lensAim = 0;
    let lensY = 0;

    let placed = false;
    let armed = false; /* bouton enfoncé, pas encore un glissement */
    let drag = false;
    let hold = 0; /* écart curseur → point de saisie, conservé au drag */
    let anchor = 0; /* ordonnée de la saisie, pour mesurer le seuil */
    let frame = 0;
    let stamp = 0;
    let act = 0;
    let awake = false;
    let first = true;

    /* ---------------- géométrie ---------------- */

    /* Les traits font un pixel : une position fractionnaire les rendrait
       gris au lieu de nets. Chaque graduation est arrondie au pixel. */
    const place = () => {
      const span = Math.max(0, height - 1);
      for (let i = 0; i < n; i++) {
        ticks[i].style.top = `${Math.round((i * span) / (n - 1))}px`;
      }
    };

    const build = () => {
      const want = Math.min(
        TICKS_MAX,
        Math.max(TICKS_MIN, Math.round(height / PITCH))
      );
      if (want === n && ticks.length) {
        place();
        return;
      }
      n = want;
      const frag = document.createDocumentFragment();
      ticks = [];
      for (let i = 0; i < n; i++) {
        const el = document.createElement("span");
        el.className = "rle__tick";
        frag.appendChild(el);
        ticks.push(el);
      }
      rack.replaceChildren(frag);
      sx = new Float32Array(n).fill(-1);
      al = new Float32Array(n).fill(-1);
      place();
    };

    /* Les frontières sont relevées, jamais devinées : chaque section est
       ramenée à sa fraction de contenu, puis à la graduation la plus
       proche. Deux sections trop rapprochées tombent sur le même trait,
       et c'est honnête : la règle n'a pas la résolution de les séparer,
       elle n'a pas à faire semblant. */
    const survey = () => {
      mark = new Uint8Array(n);
      const inner = body.scrollHeight;
      if (sections && inner > 0 && n > 1) {
        (pane ?? document).querySelectorAll(sections).forEach((el) => {
          const i = Math.round(clamp01(offset(el) / inner) * (n - 1));
          /* La première graduation est ignorée : le haut du contenu n'est
             pas une frontière, il est le début. */
          if (i > 0) mark[i] = 1;
        });
      }
      for (let i = 0; i < n; i++) {
        if (mark[i]) ticks[i].dataset.mark = "";
        else delete ticks[i].dataset.mark;
      }
      /* Le plancher a bougé sous les tampons : la prochaine trame doit
         réécrire, même si la position n'a pas varié d'un poil. */
      sx.fill(-1);
      al.fill(-1);
    };

    const read = () => {
      const p = max > 0 ? clamp01(here() / max) : 0;
      aim = half + p * (1 - 2 * half);
    };

    const measure = () => {
      live = getComputedStyle(host).display !== "none";
      if (!live) return;

      const r = host.getBoundingClientRect();
      top = r.top;
      height = r.height;
      box = { left: r.left, right: r.right };
      if (height <= 0) return;

      const inner = body.scrollHeight;
      const view = seen();
      max = Math.max(0, inner - view);
      /* Le curseur garde la sémantique de la barre native : sa hauteur est
         la part de contenu visible, bornée pour rester lisible. */
      const ratio = inner > 0 ? clamp01(view / inner) : 1;
      half = Math.min(THUMB_MAX, Math.max(THUMB_MIN, ratio)) / 2;

      host.dataset.scroll = max > DEAD ? "true" : "false";
      /* Le contenu vient de cesser de défiler : une règle qui reste
         allumée devant une boîte qui tient dans l'écran ne mesure plus
         rien. */
      if (max <= DEAD) sleep();
      build();
      survey();
      read();
      if (!placed) {
        pos = aim;
        placed = true;
      }
      paint();
    };

    /* ---------------- rendu ---------------- */

    const paint = () => {
      const reach = half + FEATHER;
      const lit = lens > 0.002;
      for (let i = 0; i < n; i++) {
        const t = i / (n - 1);
        let k = 1 - ease(clamp01(Math.abs(t - pos) / reach));
        if (lit) {
          const h =
            (1 - ease(clamp01(Math.abs(t - lensY) / LENS))) * lens * LENS_GAIN;
          if (h > k) k = h;
        }
        /* Le trait de section part de plus loin : même loi, autre plancher. */
        const s0 = mark[i] ? MARK_SCALE : SCALE_MIN;
        const a0 = mark[i] ? MARK_ALPHA : ALPHA_MIN;
        const s = s0 + (1 - s0) * k;
        const a = a0 + (ALPHA_MAX - a0) * k;
        if (Math.abs(s - sx[i]) > 0.0015) {
          sx[i] = s;
          ticks[i].style.transform = `scaleX(${s.toFixed(4)})`;
        }
        if (Math.abs(a - al[i]) > 0.003) {
          al[i] = a;
          ticks[i].style.opacity = a.toFixed(3);
        }
      }
    };

    const tick = (now: number) => {
      frame = 0;
      const dt = stamp ? Math.min(64, now - stamp) : 16;
      stamp = now;

      /* Sous `prefers-reduced-motion`, la règle colle à la position réelle :
         le lissage est un agrément, pas une information. Pendant un
         glissement aussi : une rampe entre le doigt et la page, même de
         trente millisecondes, se sentirait comme du caoutchouc. */
      const kp = calm.matches || drag ? 1 : 1 - Math.exp(-dt / TAU_POS);
      const kl = calm.matches ? 1 : 1 - Math.exp(-dt / TAU_LENS);
      pos += (aim - pos) * kp;
      lens += (lensAim - lens) * kl;

      paint();

      if (awake && now - act > (first ? FIRST_IDLE : IDLE)) sleep();

      const moving =
        Math.abs(aim - pos) > 0.0004 || Math.abs(lensAim - lens) > 0.002;
      if (moving || drag || awake) frame = requestAnimationFrame(tick);
      else stamp = 0;
    };

    const start = () => {
      if (!frame) {
        stamp = 0;
        frame = requestAnimationFrame(tick);
      }
    };

    /* ---------------- veille ----------------
       Réveil rapide, endormissement lent : une barre de défilement doit
       arriver au moment du geste et repartir sans qu'on la voie partir. */

    const wake = () => {
      if (!live || max <= DEAD) return;
      act = performance.now();
      if (!awake) {
        awake = true;
        host.dataset.awake = "true";
      }
      start();
    };

    const sleep = () => {
      if (!awake) return;
      awake = false;
      first = false;
      host.dataset.awake = "false";
    };

    /* ---------------- saisie ---------------- */

    const at = (y: number) => clamp01((y - top) / height);

    /* Un centre de curseur, normalisé sur la règle, vers une position de
       contenu. La course utile n'est pas la hauteur de la règle mais
       celle moins le curseur : sans ça, le haut et le bas seraient
       inatteignables. */
    const seek = (center: number) => {
      const travel = Math.max(1e-4, 1 - 2 * half);
      return clamp01((center - half) / travel) * max;
    };

    const onDown = (e: PointerEvent) => {
      if (!live || max <= DEAD || e.button !== 0 || height <= 0) return;
      e.preventDefault();
      const t = at(e.clientY);
      /* Saisir le curseur le prend où il est, et le 1:1 commence tout de
         suite : le contenu est déjà là où on le tient. Cliquer ailleurs
         est une intention de lecture, pas une téléportation : on y va en
         glissant, et deux écrans sans transition ne se lisent plus comme
         un même document. */
      const inside = Math.abs(t - pos) <= half;
      anchor = e.clientY;
      hold = inside ? t - pos : 0;
      armed = true;
      drag = inside;
      lensAim = 1;
      root.classList.add("rle-drag");
      try {
        grip.setPointerCapture(e.pointerId);
      } catch {
        /* capture refusée : le suivi passe par les écouteurs de fenêtre */
      }
      jump(seek(t - hold), !inside);
      wake();
    };

    const onDrag = (e: PointerEvent) => {
      if (!armed) return;
      if (!drag) {
        /* Trois pixels : au-dessous, la main qui appuie tremble, elle ne
           glisse pas. Requalifier un tremblement en glissement couperait
           la glissade qu'on vient de lancer. */
        if (Math.abs(e.clientY - anchor) < SLOP) return;
        drag = true;
      }
      e.preventDefault();
      jump(seek(clamp01(at(e.clientY) - hold)), false);
      act = performance.now();
      start();
    };

    const onUp = (e: PointerEvent) => {
      if (!armed) return;
      armed = false;
      drag = false;
      root.classList.remove("rle-drag");
      try {
        grip.releasePointerCapture(e.pointerId);
      } catch {
        /* rien à libérer */
      }
      wake();
    };

    /* ---------------- écoute ---------------- */

    const onScroll = () => {
      if (!live) return;
      read();
      wake();
    };

    const onPointer = (e: PointerEvent) => {
      if (!live) return;
      if (height > 0) {
        const dx =
          e.clientX < box.left
            ? box.left - e.clientX
            : e.clientX > box.right
              ? e.clientX - box.right
              : 0;
        const dy =
          e.clientY < top
            ? top - e.clientY
            : e.clientY > top + height
              ? e.clientY - (top + height)
              : 0;
        lensAim = drag ? 1 : 1 - ease(clamp01(Math.hypot(dx, dy) / PROX));
        lensY = clamp01((e.clientY - top) / height);
      }
      wake();
    };

    /* `pointerout` sans cible liée : le pointeur a quitté la fenêtre. On
       éteint la loupe plutôt que de la laisser allumée sur un bord que
       plus personne ne vise. `pointerleave` ne remonterait pas jusqu'ici. */
    const onLeave = (e: PointerEvent) => {
      if (e.relatedTarget) return;
      lensAim = 0;
      start();
    };
    const onBlur = () => {
      lensAim = 0;
      start();
    };

    const onKey = () => wake();

    let pending = 0;
    const resync = () => {
      cancelAnimationFrame(pending);
      pending = requestAnimationFrame(() => {
        measure();
        if (live) start();
      });
    };

    measure();
    /* Elle se montre une fois au chargement, un peu plus longtemps que
       d'habitude : une barre qu'on n'a jamais vue ne se cherche pas. */
    const boot = window.setTimeout(wake, BOOT);

    const passive = { passive: true } as const;
    source.addEventListener("scroll", onScroll, passive);
    window.addEventListener("pointermove", onPointer, passive);
    window.addEventListener("keydown", onKey, passive);
    document.addEventListener("pointerout", onLeave as EventListener, passive);
    window.addEventListener("blur", onBlur, passive);
    window.addEventListener("resize", resync, passive);
    window.addEventListener("orientationchange", resync, passive);
    grip.addEventListener("pointerdown", onDown);
    window.addEventListener("pointermove", onDrag);
    window.addEventListener("pointerup", onUp);
    window.addEventListener("pointercancel", onUp);

    /* La hauteur du contenu bouge sans que la fenêtre bouge : images qui
       arrivent, police qui remplace la police de secours, panneau qui se
       déplie. Une boîte défilée, elle, ne change pas de taille quand son
       contenu grandit : c'est le contenu qu'il faut observer. */
    const ro = new ResizeObserver(resync);
    ro.observe(body);
    if (pane) for (const kid of Array.from(pane.children)) ro.observe(kid);

    return () => {
      window.clearTimeout(boot);
      cancelAnimationFrame(frame);
      cancelAnimationFrame(pending);
      ro.disconnect();
      source.removeEventListener("scroll", onScroll);
      window.removeEventListener("pointermove", onPointer);
      window.removeEventListener("keydown", onKey);
      document.removeEventListener("pointerout", onLeave as EventListener);
      window.removeEventListener("blur", onBlur);
      window.removeEventListener("resize", resync);
      window.removeEventListener("orientationchange", resync);
      grip.removeEventListener("pointerdown", onDown);
      window.removeEventListener("pointermove", onDrag);
      window.removeEventListener("pointerup", onUp);
      window.removeEventListener("pointercancel", onUp);
      root.classList.remove("rle-drag");
    };
  }, [scroller, sections]);

  return (
    <div
      ref={rail}
      className={className ? `rle ${className}` : "rle"}
      data-page={scroller ? "false" : "true"}
      data-awake="false"
      data-scroll="false"
      aria-hidden="true"
    >
      <div ref={track} className="rle__gauge" />
      <div ref={hit} className="rle__hit" />
    </div>
  );
}

/* Règle de défilement · src/components/book/kit/Rail.tsx */

/* Mode boîte : posée dans le conteneur défilé, qui doit donc porter
   `position: relative`. Le composant n'écrit que du `scaleX` et de
   l'`opacity` : tout le reste est ici, en dur. */
.rle {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  right: 8px;
  margin-block: auto;
  width: 26px;
  height: clamp(7rem, 64%, 30rem);
  color: var(--fg, #1c1c1c);
  pointer-events: none;
}

/* Mode page : fixée au bord de la fenêtre. Elle n'existe qu'au-delà de
   1120 px, avec un pointeur fin et de la hauteur, et c'est exactement là
   qu'on peut effacer la barre du système. En dessous, au doigt ou sans
   JS, le système garde la main : on ne retire jamais un moyen de défiler
   sans en poser un autre qui marche. */
.rle[data-page="true"] {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  height: clamp(14rem, 42vh, 30rem);
  display: none;
}
@media (min-width: 70rem) and (min-height: 34rem) and (hover: hover) and
  (pointer: fine) {
  .rle[data-page="true"] {
    display: block;
  }
}

/* Réveil rapide, endormissement lent : une barre de défilement doit
   arriver au moment du geste et repartir sans qu'on la voie partir. */
.rle__gauge {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 620ms cubic-bezier(0.33, 0, 0.15, 1);
}
.rle[data-awake="true"] .rle__gauge {
  opacity: 1;
  transition-duration: 190ms;
}

/* Longueur pleine posée dans le DOM, jamais animée : seul `scaleX` bouge,
   depuis le bord droit. Les valeurs ci-dessous sont l'état au repos,
   celles que le composant reprend à la première trame. */
.rle__tick {
  position: absolute;
  right: 0;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.15;
  transform: scaleX(0.26);
  transform-origin: 100% 50%;
}

/* Une graduation posée sur un début de section part de plus loin et pèse
   un peu plus lourd : la règle donne le découpage du contenu en même
   temps que la position. Le plancher seul change : le renflement du
   curseur passe par-dessus, identique partout. */
.rle__tick[data-mark] {
  opacity: 0.3;
  transform: scaleX(0.42);
}

/* Zone de saisie plus large que le dessin : viser six pixels de large à
   la souris est un test d'adresse, pas une interface. */
.rle__hit {
  position: absolute;
  inset: -12px -16px;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.rle[data-scroll="false"] .rle__hit {
  pointer-events: none;
}
html.rle-drag,
html.rle-drag * {
  cursor: grabbing !important;
  user-select: none !important;
}

/* Optionnel, à poser sur le conteneur défilé : il n'y a pas deux barres à
   lire. Le composant ne le fait pas de lui-même : masquer la barre du
   système est une décision de page, jamais de composant. */
.rle-mute {
  scrollbar-width: none;
}
.rle-mute::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* La règle continue de suivre la position : c'est une mesure, pas un
   ornement. Mais sans fondu au réveil. */
@media (prefers-reduced-motion: reduce) {
  .rle__gauge,
  .rle[data-awake="true"] .rle__gauge {
    transition-duration: 0.01ms;
  }
}

@media (forced-colors: active) {
  .rle__tick {
    background: CanvasText;
  }
}

@media print {
  .rle {
    display: none !important;
  }
}

"use client";

import { useEffect, useRef, useState } from "react";

/* ------------------------------------------------------------------
   Sphère · des images posées sur une sphère qu'on fait tourner.

   La référence est écrite en Three.js : une scène, une caméra, des
   plans texturés, un lancer de rayon pour savoir ce qu'on survole. Six
   cents kilo-octets pour vingt vignettes. Celle-ci est en CSS, et la
   raison n'est pas l'économie : c'est que la moitié du travail
   disparaît.

   DES IMAGES, PAS DES TEXTURES. Ce sont de vrais `<img>` : le
   navigateur les charge en différé, les décode hors du fil principal,
   les sert au bon format, et le survol comme le clic sont des
   événements ordinaires. Le lancer de rayon de la version WebGL
   n'existe plus : c'est le test de collision du navigateur, qui est
   plus juste que le nôtre et qui ne coûte rien.

   LE PANNEAU EST L'ASTUCE. Une image posée sur une sphère qui tourne
   présenterait sa tranche dès le quart de tour. Il faut donc la
   contre-tourner, exactement, à chaque trame. Écrire seize
   transformations par trame serait tenable ; en écrire UNE l'est
   davantage : la contre-rotation est une propriété personnalisée posée
   sur le monde, et elle est HÉRITÉE par les seize vignettes. Un seul
   accès au style par trame, quelle que soit la population.

   TROIS NIVEAUX, ET CHACUN SON MÉTIER. La place ne bouge jamais, la
   vignette se contre-tourne sans transition (sous peine de traîner
   d'une trame derrière le monde), et le cadre porte le survol, avec
   transition. Empiler les trois sur le même nœud, c'est faire
   transitionner la contre-rotation, et la sphère devient molle.

   LE FONDU AU LOIN n'est pas une coquetterie : sans lui, une sphère
   creuse se lit comme un nuage plat. La profondeur de chaque place est
   calculée à la main (un produit scalaire, vingt fois par trame) et
   passée en variable, que la feuille traduit en opacité.
------------------------------------------------------------------- */

export type Vignette = {
  src: string;
  /** La pleine résolution, chargée seulement à l'ouverture. */
  grand?: string;
  /** Vide pour une image décorative : le bouton prend alors son rang. */
  alt: string;
};

export type SphereProps = {
  images: Vignette[];
  /** Vitesse de la rotation au repos, en degrés par seconde. */
  derive?: number;
  /** Part de la boîte qu'occupe une image mise en avant. */
  avant?: number;
  className?: string;
  /**
   * Le reste passe par les propriétés personnalisées : `--sph-r` le
   * rayon, `--sph-w` la largeur d'une vignette, `--sph-fuite` la
   * distance du point de fuite.
   */
  style?: React.CSSProperties;
};

/* La spirale de Fibonacci, et pas vingt tirages au sort. Le hasard fait
   des grappes : sur seize points, il en colle trois dans un coin et
   laisse un trou en face, et la sphère se lit comme un tas. La spirale
   dorée répartit sans jamais aligner. */
function spirale(n: number) {
  const or = Math.PI * (3 - Math.sqrt(5));
  return Array.from({ length: n }, (_, i) => {
    const y = n === 1 ? 0 : 1 - (i / (n - 1)) * 2;
    const r = Math.sqrt(Math.max(0, 1 - y * y));
    const t = or * i;
    /* Le rayon respire d'un sixième. Sur une coque parfaite, les seize
       images sont à la même distance : elles se lisent comme un anneau
       vu de face, pas comme un volume. Un peu d'épaisseur, et l'œil
       trouve enfin des images DEVANT d'autres. Déterministe, pas
       tirée au sort : le serveur et le client doivent tomber d'accord. */
    const e = 1 + 0.17 * Math.sin(i * 2.3999632);
    return { x: Math.cos(t) * r * e, y: y * e, z: Math.sin(t) * r * e };
  });
}

const rad = Math.PI / 180;

export default function Sphere({
  images,
  derive = 5,
  avant = 0.72,
  className,
  style,
}: SphereProps) {
  const boite = useRef<HTMLDivElement>(null);
  /* La boucle est montée une fois : elle appelle la fermeture par
     référence, faute de quoi Échap fermerait avec la version du premier
     rendu, et sauterait le voyage de retour. */
  const fermerRef = useRef<() => void>(() => {});
  const monde = useRef<HTMLDivElement>(null);
  const vue = useRef<HTMLDivElement>(null);
  const [ouverte, setOuverte] = useState<number | null>(null);
  /* La fermeture est un ÉTAT, pas un démontage. L'image doit refaire le
     chemin inverse avant de disparaître : tant qu'elle vole, elle est
     encore là. */
  const [ferme, setFerme] = useState(false);
  const ouverteRef = useRef<number | null>(null);
  ouverteRef.current = ouverte;
  const minuteurF = useRef(0);
  useEffect(() => () => window.clearTimeout(minuteurF.current), []);

  const points = spirale(images.length);

  useEffect(() => {
    const el = boite.current;
    const mo = monde.current;
    if (!el || !mo) return;

    const calme = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const places = [...mo.children] as HTMLElement[];

    let rx = -12;
    let ry = 0;
    let vx = 0;
    let vy = 0;
    let tire = false;
    let dernierX = 0;
    let dernierY = 0;
    let dx = 0;
    let dy = 0;
    let chemin = 0;
    let raf = 0;
    let tourne = false;
    let clavier = false;
    let approche = false;
    let avantT = 0;

    const peindre = () => {
      mo.style.transform = `rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)`;
      /* La contre-rotation, écrite UNE fois et héritée par tout le
         monde. L'ordre est l'inverse exact de celui du monde. */
      mo.style.setProperty(
        "--sph-inv",
        `rotateY(${(-ry).toFixed(2)}deg) rotateX(${(-rx).toFixed(2)}deg)`
      );

      /* La profondeur, à la main. Le z d'un point après `rotateX(a)
         rotateY(b)` : un produit scalaire, pas une matrice. */
      const sa = Math.sin(rx * rad);
      const ca = Math.cos(rx * rad);
      const sb = Math.sin(ry * rad);
      const cb = Math.cos(ry * rad);
      for (let i = 0; i < places.length; i++) {
        const p = points[i];
        if (!p) continue;
        const z = sa * p.y + ca * (p.z * cb - p.x * sb);
        places[i].style.setProperty("--d", ((z + 1) / 2).toFixed(3));
      }
    };

    const trame = (t: number) => {
      if (!tourne) return;
      const dt = avantT ? Math.min(0.05, (t - avantT) / 1000) : 1 / 60;
      avantT = t;

      if (!tire) {
        if (vx || vy) {
          ry += vy;
          rx -= vx;
          const k = Math.pow(0.94, dt * 60);
          vx *= k;
          vy *= k;
          if (Math.abs(vx) < 0.004) vx = 0;
          if (Math.abs(vy) < 0.004) vy = 0;
        }
        /* Le repos n'est pas l'immobilité : une sphère arrêtée ne dit
           pas qu'elle tourne. Elle ne dérive que lorsque personne ne la
           tient, qu'aucune image n'est ouverte, que le clavier n'est pas
           dedans (une cible qu'on vient d'atteindre à la tabulation n'a
           pas le droit de s'en aller toute seule), et que la main n'est
           pas au-dessus. Une sphère qui continue de tourner sous le
           curseur DÉROBE ce qu'on vise : on approche d'une image, elle
           glisse, on clique à côté. Elle se pose à l'approche. */
        if (ouverteRef.current === null && !clavier && !approche)
          ry += derive * dt;
      }
      rx = Math.max(-72, Math.min(72, rx));
      peindre();
      raf = requestAnimationFrame(trame);
    };

    const partir = () => {
      if (tourne || calme) return;
      tourne = true;
      avantT = 0;
      raf = requestAnimationFrame(trame);
    };
    const arreter = () => {
      tourne = false;
      if (raf) cancelAnimationFrame(raf);
      raf = 0;
    };

    /* ---------- La main ---------- */
    let capture = 0;
    const surAppui = (e: PointerEvent) => {
      if (e.button !== 0 && e.pointerType === "mouse") return;
      tire = true;
      vx = vy = dx = dy = chemin = 0;
      capture = 0;
      dernierX = e.clientX;
      dernierY = e.clientY;
      el.dataset.tire = "true";
    };
    const surMouvement = (e: PointerEvent) => {
      if (!tire) return;
      dx = e.clientX - dernierX;
      dy = e.clientY - dernierY;
      dernierX = e.clientX;
      dernierY = e.clientY;
      chemin += Math.hypot(dx, dy);
      /* La capture du pointeur n'est demandée QU'UNE FOIS LE GLISSEMENT
         AVÉRÉ, et c'est la correction la moins évidente de la planche.
         Capturer dès l'appui règle le vrai problème (poursuivre le
         geste quand la main sort de la boîte) et en crée un pire : tant
         que la capture est en place, le navigateur redirige aussi le
         `click` vers l'élément capturant. Le clic n'atteint donc JAMAIS
         la vignette, et aucune image ne s'ouvre. Trois pixels de retard,
         et les deux gestes cohabitent. */
      if (!capture && chemin > 3) {
        capture = e.pointerId;
        el.setPointerCapture?.(e.pointerId);
      }
      ry += dx * 0.28;
      rx -= dy * 0.28;
      rx = Math.max(-72, Math.min(72, rx));
      if (calme) peindre();
    };
    const surRelache = () => {
      if (!tire) return;
      tire = false;
      if (capture) {
        el.releasePointerCapture?.(capture);
        capture = 0;
      }
      delete el.dataset.tire;
      /* L'élan reprend le DERNIER déplacement, pas une moyenne : c'est
         ce qui donne l'impression d'avoir lâché quelque chose plutôt
         que d'avoir relâché un ressort. */
      vy = dx * 0.22;
      vx = -dy * 0.22;
    };
    /* La main s'approche, la sphère se pose. Souris seulement : sur un
       écran tactile il n'y a pas de survol, et l'appui suffit déjà à
       l'arrêter. */
    const surEntree2 = (e: PointerEvent) => {
      if (e.pointerType === "mouse") approche = true;
    };
    const surSortie2 = () => {
      approche = false;
    };
    el.addEventListener("pointerenter", surEntree2);
    el.addEventListener("pointerleave", surSortie2);
    el.addEventListener("pointerdown", surAppui);
    el.addEventListener("pointermove", surMouvement);
    el.addEventListener("pointerup", surRelache);
    el.addEventListener("pointercancel", surRelache);

    /* ---------- Le clic, distingué du glissement ----------

       Ce n'est pas la distance entre l'appui et le relâchement qui
       compte, c'est le chemin PARCOURU pendant qu'on tenait la sphère :
       un aller-retour revient à son point de départ, et il a pourtant
       fait tourner le monde d'un demi-tour. On accumule donc, et on
       annule le clic au-delà de six pixels.

       Le compteur part de zéro et n'est incrémenté que sous la main. Si
       l'appui n'est jamais arrivé (un pointeur exotique, un événement
       synthétique), il vaut zéro et le clic passe. C'est le bon sens de
       la panne : un garde-fou qui doute laisse passer, il ne bloque pas. */
    const surFin = (e: MouseEvent) => {
      if (chemin > 6) {
        e.preventDefault();
        e.stopPropagation();
      }
    };
    el.addEventListener("click", surFin, true);

    const surTouche = (e: KeyboardEvent) => {
      if (e.key === "Escape" && ouverteRef.current !== null) fermerRef.current();
    };
    window.addEventListener("keydown", surTouche);

    /* Le clavier entre, la sphère s'arrête. Sans ça, on tabule jusqu'à
       une vignette et elle part en tournant : l'anneau de focus s'en va
       avec elle, et l'on ne sait plus où l'on est. */
    const surEntree = () => { clavier = true; };
    const surSortie = () => { clavier = false; };
    el.addEventListener("focusin", surEntree);
    el.addEventListener("focusout", surSortie);

    let visible = false;
    let cachee = false;
    const accorder = () => (visible && !cachee ? partir() : arreter());
    const io = new IntersectionObserver(
      (es) => { visible = es[0]?.isIntersecting ?? false; accorder(); },
      { threshold: 0.1 }
    );
    io.observe(el);
    const surVisibilite = () => { cachee = document.hidden; accorder(); };
    document.addEventListener("visibilitychange", surVisibilite);

    peindre();
    accorder();

    return () => {
      arreter();
      io.disconnect();
      document.removeEventListener("visibilitychange", surVisibilite);
      window.removeEventListener("keydown", surTouche);
      el.removeEventListener("focusin", surEntree);
      el.removeEventListener("focusout", surSortie);
      el.removeEventListener("pointerenter", surEntree2);
      el.removeEventListener("pointerleave", surSortie2);
      el.removeEventListener("pointerdown", surAppui);
      el.removeEventListener("pointermove", surMouvement);
      el.removeEventListener("pointerup", surRelache);
      el.removeEventListener("pointercancel", surRelache);
      el.removeEventListener("click", surFin, true);
    };
  }, [derive, images.length]);

  /* ---------- L'ouverture, en FLIP ----------

     L'image ne réapparaît pas au centre : elle y VA. On relève la place
     qu'occupe la vignette à l'écran, on laisse le navigateur poser la
     grande image à sa place finale, puis on lui applique l'écart entre
     les deux et on le retire dans une transition. Deux mesures et une
     soustraction remplacent une interpolation de position dans une
     scène 3D, et le trajet est exact, parce qu'il part d'une mesure et
     non d'un modèle. */
  /** L'écart entre deux rectangles, en transformation. */
  const ecart = (de: DOMRect, a: DOMRect) =>
    `translate(${de.left - a.left}px, ${de.top - a.top}px) scale(${
      de.width / a.width
    })`;

  const ouvrir = (i: number, source: HTMLElement) => {
    const de = source.getBoundingClientRect();
    window.clearTimeout(minuteurF.current);
    setFerme(false);
    setOuverte(i);
    requestAnimationFrame(() => {
      const cible = vue.current?.querySelector("img");
      if (!cible) return;
      const a = cible.getBoundingClientRect();
      if (!a.width || !de.width) return;
      cible.style.transition = "none";
      cible.style.transformOrigin = "top left";
      cible.style.transform = ecart(de, a);
      void cible.offsetWidth;
      cible.style.transition = "";
      cible.style.transform = "";
    });
  };

  /* Le retour, et c'est la moitié qui manquait. Une image qui arrive en
     volant et repart en disparaissant laisse le geste inachevé : on ne
     sait plus d'où elle venait, donc où l'on en était. Elle refait le
     chemin, à l'envers, vers la vignette qu'elle a quittée, laquelle
     n'a pas bougé, puisque la sphère s'arrête tant qu'une image est
     ouverte. */
  const fermer = () => {
    const i = ouverteRef.current;
    const cible = vue.current?.querySelector("img");
    const source = boite.current?.querySelectorAll<HTMLElement>(".sph__place")[
      i ?? -1
    ];
    if (i === null || !cible || !source) {
      setOuverte(null);
      return;
    }
    const calme = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    setFerme(true);
    if (calme) {
      setOuverte(null);
      setFerme(false);
      return;
    }
    const a = cible.getBoundingClientRect();
    const de = source.getBoundingClientRect();
    if (a.width && de.width) {
      cible.style.transformOrigin = "top left";
      cible.style.transform = ecart(de, a);
    }
    /* On attend la fin du voyage pour démonter, et pas une milliseconde
       de plus : un `transitionend` serait plus juste, mais il ne se
       déclenche pas si la transformation n'a rien à interpoler (une
       vignette exactement à la taille de la grande image, un moteur qui
       coupe court), et la carte resterait alors avec son voile pour
       toujours. Un minuteur ne rate jamais. */
    minuteurF.current = window.setTimeout(() => {
      setOuverte(null);
      setFerme(false);
    }, 460);
  };

  fermerRef.current = fermer;
  const dessus = ouverte !== null ? images[ouverte] : null;

  return (
    <div
      ref={boite}
      className={className ? `sph ${className}` : "sph"}
      data-vue={dessus ? "true" : undefined}
      style={style}
    >
      <div className="sph__monde" ref={monde}>
        {images.map((im, i) => {
          const p = points[i];
          return (
            <div
              key={im.src}
              className="sph__pos"
              style={
                {
                  "--x": p.x.toFixed(4),
                  "--y": p.y.toFixed(4),
                  "--z": p.z.toFixed(4),
                  "--d": ((p.z + 1) / 2).toFixed(3),
                } as React.CSSProperties
              }
            >
              <button
                type="button"
                className="sph__place"
                onClick={(e) => ouvrir(i, e.currentTarget)}
                tabIndex={dessus ? -1 : 0}
                /* Le NOM est sur le bouton, pas sur l'image. Une image
                   décorative garde un `alt` vide : la décrire deux fois
                   ferait annoncer « image, bouton, image ». Sans texte
                   fourni, le rang sert de nom : il dit au moins où l'on
                   est dans la série. */
                aria-label={
                  im.alt || `Agrandir l'image ${i + 1} sur ${images.length}`
                }
              >
                <span className="sph__cadre">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={im.src} alt={im.alt} loading="lazy" draggable={false} />
                </span>
              </button>
            </div>
          );
        })}
      </div>

      {dessus && (
        <div className="sph__vue" ref={vue} data-ferme={ferme || undefined}>
          {/* Le voile. Il ne se contente pas d'assombrir la sphère : il
              la RECOUVRE. Une sphère seulement atténuée derrière une
              photographie reste une bouillie d'images, et l'œil continue
              d'y chercher des formes au lieu de regarder celle qu'on
              vient d'ouvrir. */}
          <button
            type="button"
            className="sph__voile"
            onClick={fermer}
            tabIndex={-1}
            aria-hidden="true"
          />
          <button
            type="button"
            className="sph__fermer"
            onClick={fermer}
            autoFocus
          >
            <span className="sr">Fermer l&apos;image</span>
            <span aria-hidden="true">Fermer</span>
          </button>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={dessus.grand ?? dessus.src}
            alt={dessus.alt}
            draggable={false}
            style={{ "--sph-avant": avant } as React.CSSProperties}
          />
        </div>
      )}
    </div>
  );
}