@zevra/ui 0.28.0 → 0.29.0

package/react/glyph-data.ts

@@ -34,3 +34,14 @@ export const NOMS_PRODUITS: Record<GlypheId, string> = {
   'supernovia': "Supernovia",
   'zevra': "Zevra",
 }
+
+/** Ce que chaque produit FAIT, en deux mots — pour le lanceur d'apps. */
+export const ACCROCHES_PRODUITS: Record<GlypheId, string> = {
+  'campus': "Formation",
+  'lexform': "Anonymisation",
+  'mcp': "Connecteur",
+  'memoire': "Recherche IA",
+  'plume': "Éditeur",
+  'supernovia': "Contenu sourcé",
+  'zevra': "La suite",
+}

package/react/glyphes.ts

@@ -14,10 +14,16 @@
 // elle n'existe pas encore (retirée le 24/08, à regénérer), et ces glyphes
 // ne doivent donc pas descendre sous cette taille.
 
-import { GLYPHES, MOT_ZEVRA, NOMS_PRODUITS, type GlypheId } from './glyph-data.js'
+import {
+  ACCROCHES_PRODUITS,
+  GLYPHES,
+  MOT_ZEVRA,
+  NOMS_PRODUITS,
+  type GlypheId,
+} from './glyph-data.js'
 
 export type { GlypheId }
-export { GLYPHES, MOT_ZEVRA, NOMS_PRODUITS }
+export { ACCROCHES_PRODUITS, GLYPHES, MOT_ZEVRA, NOMS_PRODUITS }
 
 /** Les sept identifiants, triés. */
 export const PRODUITS = Object.keys(GLYPHES) as GlypheId[]

package/react/layout.tsx

@@ -619,11 +619,22 @@ export function NavActions({ className, ...reste }: Div & { className?: string }
  *  un état se dit en prop, il ne se peint pas depuis l'app. */
 export function Lanceur({
   label = 'Applications Zevra',
+  titre = 'Applications',
   ouvert,
   className,
   children,
   ...reste
-}: Div & { label?: string; ouvert?: boolean; className?: string; children?: ReactNode }) {
+}: Div & {
+  label?: string
+  /** L'intitulé du panneau, avec le filet de spectre. Le passer à `null`
+   *  pour un panneau nu — mais c'est ce filet qui fait qu'un lanceur
+   *  ressemble à Zevra plutôt qu'à n'importe quel autre. */
+  titre?: ReactNode
+  ouvert?: boolean
+  className?: string
+  /** Des `LanceurApp`, éventuellement précédés de `LanceurGroupe`. */
+  children?: ReactNode
+}) {
   return (
     <span className={cx('zv-lanceur', ouvert && 'zv-lanceur--ouvert', className)} {...reste}>
       <button
@@ -637,17 +648,41 @@ export function Lanceur({
       </button>
       <span className="zv-lanceur__panneau">
         <span className="zv-menu">
-          <span className="zv-lanceur__apps">{children}</span>
+          {titre && (
+            <span className="zv-lanceur__tete">
+              <span className="zv-spec" aria-hidden="true" />
+              <span className="zv-mono zv-mono--label">{titre}</span>
+            </span>
+          )}
+          {children}
         </span>
       </span>
     </span>
   )
 }
 
+/** Un intertitre de famille dans le panneau (« Suite Zevra »). Facultatif :
+ *  avec une seule famille il n'apporte rien, et le panneau s'ouvre plus vite
+ *  sans lui. */
+export function LanceurGroupe({ className, ...reste }: Span & { className?: string }) {
+  return <span className={cx('zv-lanceur__groupe', className)} {...reste} />
+}
+
+/** La grille de tuiles. Elle enveloppe les `LanceurApp` d'une même famille —
+ *  c'est ce qui permet à un panneau d'en porter plusieurs. */
+export function LanceurApps({ className, ...reste }: Span & { className?: string }) {
+  return <span className={cx('zv-lanceur__apps', className)} {...reste} />
+}
+
 export interface LanceurAppProps
   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
   nom: string
-  /** Le glyphe du produit — une image du paquet (`@zevra/ui/logos/…`). Sans
+  /** Ce que le produit FAIT, en deux mots (« Recherche IA »,
+   *  « Anonymisation »). C'est elle qui rend la liste lisible à quelqu'un
+   *  qui ne connaît pas encore la suite : un nom de marque seul ne dit rien
+   *  à un client qui découvre. */
+  accroche?: string
+  /** Le glyphe du produit — `GLYPHES.memoire` de `@zevra/ui/glyphes`. Sans
    *  lui, la tuile porte l'initiale : une image qui ne charge pas ne doit
    *  pas laisser un trou. */
   glyphe?: string
@@ -657,21 +692,31 @@ export interface LanceurAppProps
   className?: string
 }
 
-export function LanceurApp({ nom, glyphe, courant, className, ...reste }: LanceurAppProps) {
+export function LanceurApp({
+  nom,
+  accroche,
+  glyphe,
+  courant,
+  className,
+  ...reste
+}: LanceurAppProps) {
   return (
     <a
       aria-current={courant ? 'page' : undefined}
       className={cx('zv-lanceur__app', className)}
       {...reste}
     >
-      {glyphe ? (
-        <img src={glyphe} alt="" className="zv-lanceur__glyphe" />
-      ) : (
-        <span className="zv-avatar zv-avatar--soft" aria-hidden="true">
-          {nom.slice(0, 1).toUpperCase()}
-        </span>
-      )}
+      <span className="zv-lanceur__cadre">
+        {glyphe ? (
+          <img src={glyphe} alt="" className="zv-lanceur__glyphe" />
+        ) : (
+          <span className="zv-mono zv-mono--label" aria-hidden="true">
+            {nom.slice(0, 1).toUpperCase()}
+          </span>
+        )}
+      </span>
       <span className="zv-lanceur__nom">{nom}</span>
+      {accroche && <span className="zv-lanceur__accroche">{accroche}</span>}
     </a>
   )
 }

package/src/navigation.css

@@ -1148,23 +1148,66 @@ a.zv-menu__item:hover {
   flex-direction: column;
 }
 
-/* ─── La grille d'applications ──────────────────────────────────────────
- * Trois par rangée : au-delà, les noms se coupent ; en deçà, le panneau
- * s'allonge en colonne et cesse de se lire d'un coup d'œil. */
+/* ─── Le panneau d'applications ─────────────────────────────────────────
+ * QUATRE par rangée : sept produits tiennent alors en deux rangées pleines
+ * (4 + 3), là où trois colonnes en laissaient une seule et bancale sur la
+ * dernière ligne.
+ *
+ * ⚠️ PAS DE CHAMP DE RECHERCHE. Sept produits se lisent d'un coup d'œil ;
+ * une recherche y ajouterait un contrôle à servir, un état à tenir et un
+ * clavier à ouvrir sur téléphone, pour trouver ce qui est déjà visible. Le
+ * jour où la suite dépasse la douzaine, c'est une autre conversation. */
+
+.zv-lanceur__tete {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 14px 10px;
+}
+
+/* Le filet de spectre, PREMIER de ses trois emplois autorisés : c'est la
+ * signature de la marque, et c'est elle qui fait qu'un panneau d'apps
+ * ressemble à Zevra plutôt qu'à n'importe quel lanceur. */
+.zv-lanceur__tete .zv-spec {
+  flex: none;
+}
+
+/* Un intertitre par famille (« Suite Zevra », « Vos espaces »). Facultatif :
+ * avec une seule famille, il n'apporte rien et le panneau s'ouvre plus vite
+ * sans lui. */
+.zv-lanceur__groupe {
+  display: block;
+  padding: 6px 14px 4px;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+.zv-lanceur__groupe + .zv-lanceur__apps {
+  padding-top: 0;
+}
 
 .zv-lanceur__apps {
   display: grid;
-  grid-template-columns: repeat(3, 92px);
-  gap: 4px;
-  padding: 6px;
+  grid-template-columns: repeat(4, 104px);
+  /* 6px et pas 2 : « MCP Juridique » remplit sa colonne, et à 2px son nom
+   * venait toucher celui de la tuile voisine. */
+  gap: 6px;
+  padding: 6px 8px 10px;
 }
 
 .zv-lanceur__app {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 14px 6px;
+  /* 4px, et le nom reprend 4px de marge : le nom et son accroche forment un
+   * bloc SERRÉ, détaché du cadre. À gap uniforme, les trois lignes flottaient
+   * à égale distance et le nom ne se rattachait plus à rien. */
+  gap: 4px;
+  padding: 12px 6px;
   text-align: center;
   text-decoration: none;
   color: var(--ink-2);
@@ -1191,8 +1234,34 @@ a.zv-menu__item:hover {
   color: var(--accent);
 }
 
-/* Le glyphe du produit. 28px : la taille de .zv-icon--xl, pour qu'une tuile
- * à image et une tuile à icône tracée se posent sur la même ligne. */
+/* Le glyphe vit dans un CADRE, et pas nu sur le fond : c'est lui qui donne
+ * à la tuile son assise et qui permet au survol de répondre autrement que
+ * par un aplat. Angle vif, comme tout le reste. */
+.zv-lanceur__cadre {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border: 1px solid var(--line);
+  background: var(--white);
+  transition:
+    border-color 140ms var(--zv-easing, cubic-bezier(0.2, 0.7, 0.2, 1)),
+    background-color 140ms var(--zv-easing, cubic-bezier(0.2, 0.7, 0.2, 1));
+}
+
+.zv-lanceur__app:hover .zv-lanceur__cadre {
+  border-color: var(--accent-line);
+  background: var(--white);
+}
+
+.zv-lanceur__app--on .zv-lanceur__cadre,
+.zv-lanceur__app[aria-current='page'] .zv-lanceur__cadre {
+  border-color: var(--accent-line);
+}
+
+/* 28px : la taille de .zv-icon--xl, pour qu'une tuile à image et une tuile à
+ * icône tracée se posent sur la même ligne. */
 .zv-lanceur__glyphe {
   display: block;
   width: 28px;
@@ -1201,14 +1270,35 @@ a.zv-menu__item:hover {
 }
 
 .zv-lanceur__nom {
+  margin-top: 4px;
   font-size: var(--app-sm);
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1.3;
+  color: var(--ink);
   /* Un nom de produit trop long ne doit pas élargir la colonne : il se coupe
    * plutôt que de déformer la grille. */
   overflow-wrap: anywhere;
 }
 
+/* L'accroche : ce que le produit FAIT, en deux mots. C'est elle qui rend la
+ * liste lisible à quelqu'un qui ne connaît pas encore la suite — un nom de
+ * marque seul ne dit rien à un client qui découvre. */
+.zv-lanceur__accroche {
+  font-size: var(--mono);
+  line-height: 1.3;
+  color: var(--muted);
+  /* PAS de `overflow-wrap: anywhere` ici, contrairement au nom : un nom de
+   * marque qu'on coupe reste reconnaissable, une accroche coupée en plein
+   * mot ne se lit plus. Si elle ne tient pas, c'est la colonne qui est trop
+   * étroite — et c'est la colonne qu'on corrige. */
+  text-wrap: balance;
+}
+
+.zv-lanceur__app--on .zv-lanceur__nom,
+.zv-lanceur__app[aria-current='page'] .zv-lanceur__nom {
+  color: var(--accent);
+}
+
 /* ─── L'en-tête du panneau de compte ────────────────────────────────────
  * Qui l'on est, avant ce qu'on peut faire. Non connecté, il porte l'invite
  * de connexion : la zone de compte existe TOUJOURS, connecté ou non — une
@@ -1264,7 +1354,21 @@ a.zv-menu__item:hover {
     max-width: calc(100vw - 32px);
   }
 
+  /* DEUX colonnes, et pas trois. Sur un iPhone SE (320px), trois colonnes
+   * donnent 63px par tuile : « Anonymisation » s'y coupait en plein mot et
+   * « Connecteur » perdait son r sur la ligne suivante. À deux, chaque tuile
+   * dispose d'une centaine de pixels — assez pour son accroche, qui est
+   * précisément ce dont un client a besoin sur le petit écran où il connaît
+   * le moins la suite. Sept produits font alors quatre rangées, et le
+   * panneau défile. */
   .zv-lanceur__apps {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  /* Quatre rangées dépassent la hauteur d'un téléphone : le panneau se
+   * plafonne et défile, plutôt que de sortir sous le pli sans le dire. */
+  .zv-lanceur__panneau .zv-menu {
+    max-height: calc(100vh - 96px);
+    overflow-y: auto;
   }
 }