@zevra/ui 0.8.0 → 0.10.0

package/src/navigation.css

@@ -1,6 +1,8 @@
 /* Zevra UI — navigation : le chrome de l'applicatif
  * Colonne latérale, barre supérieure, tiroir, feuille de source citée, menu
- * déroulant, fil d'Ariane, pagination, mécanique de défilement.
+ * déroulant, fil d'Ariane, pagination, mécanique de défilement — et, depuis
+ * le 25/08/2026 (hors relevé, voir DECISIONS.md) : l'onglet souligné, le
+ * popover et la barre d'onglets mobile.
  *
  * DÉPEND DE :
  *   · tokens.css — neutres (--ink, --ink-2, --muted, --label, --line,
@@ -18,7 +20,9 @@
  * NE REDÉFINIT RIEN de ce que les autres modules possèdent déjà :
  * .zv-navlink et .zv-nav__* (nav de vitrine, layout.css) ne sont pas touchés —
  * l'entrée applicative s'appelle .zv-sidelink ; le déclencheur du menu est
- * .zv-select et l'onglet réemploie .zv-seg, tous deux dans forms.css.
+ * .zv-select et l'onglet en PUCES réemploie .zv-seg, tous deux dans
+ * forms.css. L'onglet souligné, lui, a sa classe ici depuis l'arbitrage du
+ * 25/08/2026.
  *
  * Ce module est un RELEVÉ de l'application Mémoire, en production, pas une
  * proposition de DA : chaque valeur vient de src/components/app-shell.tsx,
@@ -253,6 +257,23 @@
   margin-right: -8px;
 }
 
+/* ─── Barre d'onglets mobile ────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Mémoire navigue au tiroir ;
+ * une application à trois ou quatre sections navigue plus vite par une
+ * barre basse. CINQ entrées au maximum — au-delà, c'est le tiroir.
+ *
+ * N'existe que SOUS le point de rupture : au-dessus, la colonne latérale
+ * est là. Tout le dessin vit donc dans le bloc mobile de fin de fichier ;
+ * ici, seulement l'effacement desktop.
+ *
+ * ⚠️ Elle réserve de la place : le gabarit qui la pose doit donner au
+ * contenu un padding-bottom à sa hauteur, sinon la dernière ligne de la
+ * page se cache dessous. */
+
+.zv-tabbar {
+  display: none;
+}
+
 /* ─── Bouton de chrome (croix bordée) ───────────────────────────────────
  * ⚠️ RENOMMÉ : ce bouton s'appelait .zv-icon-btn, nom que icons.css possède
  * déjà pour tout autre chose (bouton nu de 40px, coins arrondis). Deux
@@ -475,6 +496,31 @@
  * clic extérieur, fermeture à Échap. Le CSS ci-dessus est prêt à les recevoir
  * (aria-selected, :focus-visible) ; le composant doit les écrire. */
 
+/* ─── Popover ───────────────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Le menu impose ses items ;
+ * il n'existait aucune surface ancrée LIBRE — aide contextuelle,
+ * mini-formulaire de filtre. Même ancre que le menu (.zv-select-anchor,
+ * forms.css), même surface (filet --line, ombre --shadow-menu), padding de
+ * panneau au lieu d'items. Fermeture par clic extérieur et Échap : au
+ * composant, comme pour le menu.
+ * ⚠️ Ce n'est PAS une infobulle : le popover s'ouvre au CLIC et peut porter
+ * de l'interactif ; l'infobulle (feedback.css) se montre au survol et n'en
+ * porte jamais. */
+
+.zv-popover {
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  z-index: 60;
+  min-width: 230px;
+  max-width: 320px;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--white);
+  box-shadow: var(--shadow-menu);
+  padding: 14px 16px;
+}
+
 /* ─── Fil d'Ariane ──────────────────────────────────────────────────────*/
 
 .zv-crumbs {
@@ -577,17 +623,91 @@
 
 /* ─── Onglets ───────────────────────────────────────────────────────────
  * ⚠️ AUCUNE MATIÈRE PREMIÈRE : pas un seul jeu d'onglets dans les écrans
- * relevés. Ce module ne livre donc RIEN ici.
+ * relevés. La rangée de PUCES se construit toujours avec .zv-seg-group et
+ * .zv-seg (forms.css), qui portent déjà la grammaire d'un état actif —
+ * c'est le motif des FILTRES, qui restreignent une collection.
  *
- * Une rangée d'onglets se construit avec .zv-seg-group et .zv-seg
- * (forms.css), qui portent déjà la grammaire d'un état actif. Ce module a
- * d'abord défini une .zv-tabs — display flex, wrap, gouttière 6px — qui
- * était la copie exacte de .zv-seg-group : deux noms pour le MÊME nœud du
- * DOM, et c'est l'ordre de chargement qui aurait tranché. Elle est retirée.
- *
- * Un onglet SOULIGNÉ, lui, reste à faire : il suppose d'arbitrer la couleur
- * et l'épaisseur du trait actif, ce qu'aucune source ne donne.
- */
+ * L'onglet SOULIGNÉ, longtemps « à faire », est ARBITRÉ le 25/08/2026
+ * (DECISIONS.md) : trait actif de 2 px — l'épaisseur des filets dessinés du
+ * système (filet de spectre, rail d'étapes) — en --accent, la couleur de
+ * l'action, comme l'entrée de nav courante. PAS le spectre : un quatrième
+ * emploi n'existe pas. C'est le motif des VUES d'un même objet (Aperçu /
+ * Sources) ; pour filtrer, prendre les puces. */
+
+.zv-tabs-line {
+  display: flex;
+  gap: 22px;
+  /* La rangée ne s'enroule pas — des onglets sur deux lignes ne se lisent
+   * plus comme des onglets : elle déborde dans son propre cadre, jamais
+   * dans la page. */
+  overflow-x: auto;
+  /* La ligne de la rangée est une ombre INTERNE, pas une bordure : les
+   * onglets (étirés à la hauteur de la rangée) peignent leur trait
+   * par-dessus. Le montage classique — bordure de rangée + marge basse de
+   * -1px sur l'onglet — fait déborder l'onglet d'un pixel dans un conteneur
+   * en overflow, et cet unique pixel suffit à faire naître un ascenseur
+   * vertical. */
+  box-shadow: inset 0 -1px 0 var(--line);
+}
+
+/* L'onglet se pose SUR la ligne : étiré à la hauteur de la rangée (le
+ * défaut flex), son trait de 2 px partage son bord bas avec elle. Inactif,
+ * le trait est transparent et laisse voir la ligne ; actif, il la couvre. */
+.zv-tabs-line__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  flex: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  padding: 0 2px 9px;
+  font-family: var(--font-text);
+  font-size: var(--app);
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--ink-2);
+  cursor: pointer;
+  transition:
+    color 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-tabs-line__tab:hover {
+  color: var(--ink);
+}
+
+/* Le contour de base.css serait rogné par l'overflow de la rangée : il
+ * rentre, comme dans la colonne latérale. */
+.zv-tabs-line__tab:focus-visible {
+  outline-offset: -2px;
+}
+
+/* La grammaire d'état de .zv-seg : 500 → 600, la graisse distingue l'actif
+ * avant la couleur. Le sélecteur suit l'attribut autant que la classe pour
+ * que le balisage tablist correct ne coûte rien. */
+.zv-tabs-line__tab--on,
+.zv-tabs-line__tab[aria-selected='true'] {
+  border-bottom-color: var(--accent);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+/* Au survol de l'onglet actif, le trait reste : la vue où l'on se trouve ne
+ * s'éteint pas sous le pointeur — même règle que l'entrée de nav courante. */
+.zv-tabs-line__tab--on:hover,
+.zv-tabs-line__tab[aria-selected='true']:hover {
+  color: var(--accent);
+}
+
+/* Le compte de l'onglet — mêmes mesures que celui de la puce (.zv-seg__count,
+ * forms.css) mais SANS sa marge : ici c'est la gouttière de l'onglet qui
+ * espace, et réemployer la classe de la puce doublait l'écart (6 + 7 px). */
+.zv-tabs-line__count {
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  color: var(--label);
+}
 
 /* ─── Défilement ────────────────────────────────────────────────────────
  * La mécanique, elle, est relevée et livrée : `min-height: 0` ET
@@ -686,6 +806,81 @@
     max-width: calc(100vw - 40px);
   }
 
+  /* Même garde-fou pour le popover, qui partage l'ancre du menu. */
+  .zv-popover {
+    max-width: calc(100vw - 40px);
+  }
+
+  /* L'onglet souligné devient une cible tactile ; le trait descend avec le
+   * padding, la géométrie ne change pas. */
+  .zv-tabs-line__tab {
+    min-height: var(--tap);
+    padding-bottom: 12px;
+  }
+
+  /* ─── Barre d'onglets mobile — le dessin ──────────────────────────────
+   * z-index 50 : le SOMMET des couches de page (l'étage de .zv-layer-top,
+   * layout.css), et SOUS tous les recouvrements applicatifs (60 et plus) —
+   * le voile doit voiler la barre, le tiroir passer devant. C'est du chrome
+   * permanent, pas un enrobage : il ne monte pas dans leur échelle. */
+  .zv-tabbar {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 50;
+    display: flex;
+    border-top: 1px solid var(--line);
+    background: var(--panel);
+    /* L'encoche basse d'iOS : sans cette réserve, la rangée tombe sous la
+     * barre système du téléphone. Mot-clé d'environnement, pas une mesure
+     * inventée. */
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .zv-tabbar__item {
+    flex: 1 1 0%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    min-height: calc(var(--tap) + 8px);
+    padding: 6px 4px;
+    border: 0;
+    background: none;
+    font-family: var(--font-mono);
+    font-size: var(--mono-sm);
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  /* Même contre-ordre que .zv-sidelink : sans lui, l'entrée vire au bleu
+   * souligné dans une page qui applique le style de lien éditorial. */
+  .zv-tabbar__item:hover {
+    color: var(--muted);
+    text-decoration: none;
+  }
+
+  .zv-tabbar__item:focus-visible {
+    outline-offset: -2px;
+  }
+
+  /* aria-current="page" est le marquage attendu ; la classe existe pour que
+   * l'état se pose aussi sans routeur. */
+  .zv-tabbar__item--on,
+  .zv-tabbar__item[aria-current='page'] {
+    color: var(--accent);
+  }
+
+  .zv-tabbar__item--on:hover,
+  .zv-tabbar__item[aria-current='page']:hover {
+    color: var(--accent);
+  }
+
   .zv-menu__item {
     display: flex;
     align-items: center;

package/src/surfaces.css

@@ -1,12 +1,14 @@
-/* Zevra UI — surfaces : halos, sols quadrillés, voiles, bandeau manifeste
- * Dépend de tokens.css. Indépendant des autres modules.
+/* Zevra UI — surfaces : halos, sols quadrillés, voiles, bandeau manifeste —
+ * et, depuis le 25/08/2026 (hors relevé, voir DECISIONS.md), les formats
+ * sociaux. Dépend de tokens.css. Indépendant des autres modules.
  *
  * C'est ce qui distingue une page Zevra d'une page blanche bien composée.
- * Toutes ces surfaces sont DÉCORATIVES : elles se posent en absolu derrière
- * le contenu, ne captent jamais le pointeur, et n'ont pas à être lues par un
- * lecteur d'écran (les poser en aria-hidden).
- *
- * Elles supposent toutes un parent `position: relative; overflow: hidden`.
+ * Les surfaces décoratives (halo, sol, voile, filigrane, lueur) se posent
+ * en absolu derrière le contenu, ne captent jamais le pointeur, et n'ont
+ * pas à être lues par un lecteur d'écran (les poser en aria-hidden) ; elles
+ * supposent un parent `position: relative; overflow: hidden`.
+ * ⚠️ Les formats sociaux, eux, sont du CONTENU — une planche d'export qui
+ * porte un texte : jamais d'aria-hidden sur eux.
  */
 
 /* ─── Halo ambiant ──────────────────────────────────────────────────────
@@ -202,6 +204,73 @@
   pointer-events: none;
 }
 
+/* ─── Formats sociaux ───────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Trois planches d'EXPORT aux
+ * dimensions des réseaux — paysage 1200×630 (OpenGraph, lien LinkedIn),
+ * carré 1080×1080 (post), story 1080×1920. FIGÉES en pixels, hors du point
+ * de rupture : ce sont des planches qu'on CAPTURE, pas des pages qu'on
+ * publie en HTML — la seule dérogation du paquet à l'interdit des largeurs
+ * fixes, et elle est là pour ça.
+ *
+ * Elles composent les pièces existantes — bande par --manifeste, halo, sol,
+ * kicker, display — et portent un pied wordmark + adresse. La règle
+ * « jamais de faux contenu » s'y applique au premier chef : un visuel
+ * social EST une publication. */
+
+.zv-social {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 40px;
+  flex: none;
+  width: 1200px;
+  height: 630px;
+  /* La gouttière standard de la page (layout.css), reprise telle quelle. */
+  padding: 72px;
+  background: var(--paper);
+  color: var(--ink);
+}
+
+.zv-social--carre {
+  width: 1080px;
+  height: 1080px;
+}
+
+.zv-social--story {
+  width: 1080px;
+  height: 1920px;
+  padding: 96px 72px;
+}
+
+/* La planche sombre : le manifeste en fond, les règles du fond sombre
+ * s'appliquent (--accent-on-dark pour les labels, jamais les neutres
+ * inversés). */
+.zv-social--manifeste {
+  background: var(--manifeste);
+  color: var(--white);
+}
+
+/* Contenu et pied passent AU-DESSUS des surfaces décoratives (halo, sol),
+ * comme dans une page. */
+.zv-social__contenu {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.zv-social__pied {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+
 /* ─── Mouvement ────────────────────────────────────────────────────────
  * Les animations vivent dans motion.css, qui porte les neuf mouvements
  * autorisés par la passation. Les surfaces d'ici en sont les cibles

package/src/tokens.css

@@ -65,6 +65,12 @@
   --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;   /* titres 200-400, wordmarks 600 */
   --font-text: "Public Sans", "Helvetica Neue", Arial, sans-serif; /* 400/600 */
   --font-mono: "Space Grotesk", "Menlo", monospace;                /* labels caps, 0.18-0.2em */
+  /* Chasse fixe RÉELLE, pour le code seulement. --font-mono (Space Grotesk)
+   * est proportionnelle : elle porte le REGISTRE des labels, pas
+   * l'alignement — du code exige la chasse fixe entière, que tabular-nums
+   * ne donne qu'aux chiffres. Pile système, aucune fonte chargée.
+   * HORS RELEVÉ (25/08/2026), voir DECISIONS.md « Bloc de code ». */
+  --font-code: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
 
   /* Échelle display (letter-spacing -0.02em, graisse 300 + chute en 400 --accent-deep) */
   --h1: 76px;

package/tokens/index.js

@@ -72,6 +72,8 @@ export const polices = {
   display: '"Outfit", "Helvetica Neue", Arial, sans-serif',
   texte: '"Public Sans", "Helvetica Neue", Arial, sans-serif',
   mono: '"Space Grotesk", "Menlo", monospace',
+  // Chasse fixe réelle, pour le code seulement — voir tokens.css.
+  code: 'ui-monospace, "SF Mono", "Menlo", "Consolas", monospace',
 }
 
 export const tailles = {