Un filtre par rayon

export function rayons(livres) {
  return [...new Set(livres.map((l) => l.rayon))].sort((a, b) => a.localeCompare(b, "fr"));
}

export function filtrerRayon(livres, rayon) {
  return rayon ? livres.filter((l) => l.rayon === rayon) : livres;
}

Testées sur cinq livres : quatre rayons, de « Informatique » à « Physique » ; deux livres en « Littérature » ; tous pour un rayon vide. Dans vue, on enchaîne les trois étapes :

return trier(filtrer(filtrerRayon(livres, rayon), q), tri);

De son côté, lireEtat lit le paramètre rayon et l'ignore s'il ne figure pas dans rayons(livres) ; activerCatalogue remplit le <select> (une option par rayon, créée avec new Option(texte, valeur)), l'écoute (change) et ajoute rayon à l'état écrit dans l'adresse. Construire les options à partir des données, et non dans le HTML, évite qu'un nouveau rayon du serveur soit oublié.