@zevra/ui 0.7.0 → 0.9.0

package/react/catalogue.tsx

@@ -22,31 +22,34 @@ import {
   Quote, Rows, RowsItem, Src, SrcRow, StatCard, Tag, UiPreview,
 } from './content.js'
 import {
-  Avatar, Break, Cell, Chip, ChipRow, Cite, CiteRow, FileType, KV, KVRow,
-  List, ListMain, ListName, ListRow, Meta, MetaRow, Row, Table, TableHead,
-  Trunc, Unwrap,
+  Avatar, Break, Cell, Chip, ChipRow, Cite, CiteRow, Code, CodeBlock,
+  FileType, Fold, KV, KVRow, Kbd, List, ListMain, ListName, ListRow, Meta,
+  MetaRow, Row, Table, TableHead, Trunc, Unwrap,
 } from './data.js'
 import {
-  Alert, Badge, Caret, Dot, Empty, Loading, Progress, Status,
+  Alert, Badge, Caret, Dot, Empty, Loading, Progress, Skeleton, Spinner,
+  Status, Tooltip,
 } from './feedback.js'
 import {
-  Checkbox, Drop, Field, Input, Radio, Search, Seg, SegGroup, Select,
-  SelectAnchor, SelectTrigger, Switch, Textarea,
+  Checkbox, Drop, Field, Input, InputAffix, Radio, Range, Search, Seg,
+  SegGroup, Select, SelectAnchor, SelectTrigger, Switch, Textarea,
 } from './forms.js'
 import { ICONES, Icon, IconButton, NOMS_ICONES } from './icon.js'
 import {
-  CTA, Col, Footer, FooterMini, Grid, Grid12, Gutter, Hero, Nav, NavLink,
-  NavLinks, NavLogo, ProofBar, SectionHead, SectionRule, SheetSection, Stat,
-  Stats, Step, Steps,
+  Banner, CTA, Carousel, CarouselItem, Col, Footer, FooterMini, Grid, Grid12,
+  Gutter, Hero, Nav, NavLink, NavLinks, NavLogo, ProofBar, SectionHead,
+  SectionRule, SheetSection, Stat, Stats, Step, Steps,
 } from './layout.js'
 import {
   ChromeButton, CitePanel, Crumbs, Menu, MenuItem, Pager, PagerArrow,
-  PagerRank, PagerStep, Scroll, SideGroup, SideLink, Sidebar, SidebarFoot,
-  SidebarHead, Tabs, Topbar, TopbarTitle,
+  PagerRank, PagerStep, Popover, Scroll, SideGroup, SideLink, Sidebar,
+  SidebarFoot, SidebarHead, Tabs, Topbar, TopbarTitle,
 } from './navigation.js'
 import { Drawer, Modal, Toast, Toasts } from './overlays.js'
 import { SelectMenu } from './select-menu.js'
-import { Band, Fade, Glyph, GridFloor, Halo, PanelNavy, TextOnDark, anim } from './surfaces.js'
+import {
+  Band, Fade, Glyph, GridFloor, Halo, PanelNavy, SocialFrame, TextOnDark, anim,
+} from './surfaces.js'
 import {
   Body, CardTitle, Display, Em, H1, H2, H3, Heading, Kicker, Lead, Link, Mono, Note,
   Rule, Spec, Tagline,
@@ -248,6 +251,66 @@ function DemoDrop() {
   )
 }
 
+function DemoRange() {
+  const [sources, setSources] = useState(12)
+  return (
+    <div style={{ maxWidth: 320 }}>
+      <Field
+        label="SOURCES INTERROGÉES"
+        htmlFor="ex-range"
+        help={`${sources} sources sur 17`}
+      >
+        <Range
+          id="ex-range"
+          min={1}
+          max={17}
+          value={sources}
+          onChange={(e) => setSources(Number(e.currentTarget.value))}
+        />
+      </Field>
+    </div>
+  )
+}
+
+function DemoTabsLine() {
+  const [actif, setActif] = useState<'apercu' | 'sources' | 'journal'>('apercu')
+  return (
+    <Tabs
+      variante="soulignes"
+      actif={actif}
+      onChange={setActif}
+      onglets={[
+        { id: 'apercu', label: 'Aperçu' },
+        { id: 'sources', label: 'Sources', compte: 12 },
+        { id: 'journal', label: 'Journal' },
+      ]}
+    />
+  )
+}
+
+function DemoPopover() {
+  const [ouvert, setOuvert] = useState(false)
+  return (
+    <SelectAnchor>
+      <Button variante="fantome" compact aria-expanded={ouvert} onClick={() => setOuvert(!ouvert)}>
+        Colonnes affichées
+      </Button>
+      {ouvert && (
+        <Popover>
+          <div style={{ display: 'grid', gap: 8 }}>
+            {['Nom', 'Taille', 'Statut'].map((c) => (
+              <label key={c} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                <Checkbox defaultChecked={c !== 'Taille'} />
+                <span className="zv-body zv-body--dense">{c}</span>
+              </label>
+            ))}
+          </div>
+        </Popover>
+      )}
+    </SelectAnchor>
+  )
+}
+
 /* ── Le catalogue ─────────────────────────────────────────────────── */
 
 export const CATALOGUE: GroupeCatalogue[] = [
@@ -368,7 +431,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'commun',
     css: 'components.css',
     resume:
-      "Trois variantes, et UNE SEULE pleine par page : c'est ce qui fait que l'action principale se voit. Un écran à deux boutons pleins n'en a plus aucun.",
+      "Quatre variantes, et UNE SEULE pleine par page — « danger » comprise, la règle compte les aplats, pas les couleurs : c'est ce qui fait que l'action principale se voit. Un écran à deux boutons pleins n'en a plus aucun.",
     exemples: [
       {
         id: 'boutons',
@@ -408,6 +471,24 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'etats',
+        nom: 'États',
+        resume:
+          '« danger » COMPTE comme le bouton plein de la page — la règle compte les aplats, pas les couleurs ; à réserver à la confirmation destructive. « occupe » pose aria-busy et aria-disabled et AVALE le clic sans sortir le bouton du parcours clavier : le LIBELLÉ doit changer avec lui, l’estompement seul ne dit pas ce qu’on attend. Survol et appui sont dans le CSS, rien à câbler.',
+        code: `<Button variante="danger">Supprimer définitivement</Button>
+<Button occupe>Connexion…</Button>
+<Button variante="fantome" disabled>Envoyer</Button>`,
+        rendu: (
+          <ButtonRow>
+            <Button variante="danger">Supprimer définitivement</Button>
+            <Button occupe>Connexion…</Button>
+            <Button variante="fantome" disabled>
+              Envoyer
+            </Button>
+          </ButtonRow>
+        ),
+      },
       {
         id: 'lien-fleche',
         nom: 'Lien fléché',
@@ -560,6 +641,54 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'affixe',
+        nom: 'Champ à affixe',
+        resume:
+          '« 30 », seul dans un champ, ne dit pas s’il s’agit de jours ou d’euros. Le champ intérieur est un <Input nu> : c’est le CADRE qui fait le champ. Les identifiants d’affixe (idAvant/idApres) se citent en aria-describedby sur le champ, sinon l’unité reste muette au lecteur d’écran. À ne pas employer quand l’unité est déjà dans l’intitulé.',
+        code: `<Field label="HONORAIRES" htmlFor="hono">
+  <InputAffix avant="€" apres="HT" idAvant="hono-avant" idApres="hono-apres">
+    <Input nu id="hono" type="number" defaultValue={1200}
+           aria-describedby="hono-avant hono-apres" />
+  </InputAffix>
+</Field>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 16, maxWidth: 320 }}>
+            <Field label="DÉLAI DE RÉPONSE" htmlFor="ex-delai">
+              <InputAffix apres="JOURS" idApres="ex-delai-apres">
+                <Input
+                  nu
+                  id="ex-delai"
+                  type="number"
+                  defaultValue={30}
+                  aria-describedby="ex-delai-apres"
+                />
+              </InputAffix>
+            </Field>
+            <Field label="HONORAIRES" htmlFor="ex-hono">
+              <InputAffix avant="€" apres="HT" idAvant="ex-hono-avant" idApres="ex-hono-apres">
+                <Input
+                  nu
+                  id="ex-hono"
+                  type="number"
+                  defaultValue={1200}
+                  aria-describedby="ex-hono-avant ex-hono-apres"
+                />
+              </InputAffix>
+            </Field>
+          </div>
+        ),
+      },
+      {
+        id: 'curseur',
+        nom: 'Curseur',
+        resume:
+          'Natif habillé : clavier, bornes et annonce viennent du navigateur ; le remplissage suit la valeur en contrôlé. Toujours un intitulé ET la valeur affichée en clair — un curseur seul ne dit ni ce qu’il règle, ni sur combien. Pas de spectre sur la piste : ce n’est pas une barre de progression.',
+        code: `<Field label="SOURCES INTERROGÉES" htmlFor="prof" help={\`\${sources} sources sur 17\`}>
+  <Range id="prof" min={1} max={17} value={sources} onChange={…} />
+</Field>`,
+        rendu: <DemoRange />,
+      },
       {
         id: 'puces',
         nom: 'Puces de filtre',
@@ -589,7 +718,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'applicatif',
     css: 'feedback.css',
     resume:
-      "Rien n'est interactif ici. ⚠️ Ni roue, ni squelette, ni infobulle : le CSS n'en a aucun, parce que le relevé de production n'en contenait aucun. Le travail en cours se dit par « Loading », qui nomme ce qu'on attend.",
+      "Rien n'y crie : le bandeau porte le ton, la pastille l'état, la phrase le travail. La roue, le squelette et l'infobulle — longtemps refusés faute de relevé — sont arbitrés depuis le 25/08/2026 (DECISIONS.md), chacun avec son périmètre écrit ; « Loading », qui nomme ce qu'on attend, reste le motif d'attente par défaut.",
     exemples: [
       {
         id: 'alertes',
@@ -682,6 +811,56 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'roue',
+        nom: 'Roue',
+        resume:
+          'Attente COURTE et LOCALE : un bouton, une cellule, un panneau sans la place d’une phrase. Pour l’attente d’un écran, « Loading » reste le motif — la phrase dit sur quoi et sur combien. Sans label, la roue est décorative et masquée aux lecteurs d’écran.',
+        code: `<Spinner label="Vérification du dépôt…" />
+<Spinner grand />`,
+        rendu: (
+          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+            <Spinner label="Vérification du dépôt…" />
+            <Spinner grand />
+          </div>
+        ),
+      },
+      {
+        id: 'squelette',
+        nom: 'Squelette',
+        resume:
+          'Il ANNONCE une structure connue — la carte, la ligne qui va venir ; pour un contenu de forme inconnue, c’est « Loading ». La géométrie vient de l’appelant : un squelette qui invente ses dimensions ne ressemble jamais au contenu. C’est la zone qui charge qui porte aria-busy, pas chaque os.',
+        code: `<div aria-busy="true">
+  <Skeleton texte largeur="60%" />
+  <Skeleton texte />
+  <Skeleton hauteur={96} />
+</div>`,
+        rendu: (
+          <div aria-busy="true" style={{ display: 'grid', gap: 10, maxWidth: 380 }}>
+            <Skeleton texte largeur="60%" />
+            <Skeleton texte />
+            <Skeleton hauteur={96} />
+          </div>
+        ),
+      },
+      {
+        id: 'infobulle',
+        nom: 'Infobulle',
+        resume:
+          'Un COMPLÉMENT dispensable — un raccourci, une date exacte, une unité : une commande n’a pas le droit d’y cacher son nom, et le tactile ne survole pas. Liage aria-describedby EXPLICITE (id), comme le htmlFor de Field — pas de useId, le rendu serveur reste possible. Apparition retardée de 300 ms, disparition immédiate, Échap la ferme.',
+        code: `<Tooltip id="th-date" contenu="Déposé le 12/08/2026 à 14 h 02">
+  <Button variante="fantome" compact aria-describedby="th-date">12 août</Button>
+</Tooltip>`,
+        rendu: (
+          <div style={{ paddingTop: 44 }}>
+            <Tooltip id="ex-th-date" contenu="Déposé le 12/08/2026 à 14 h 02">
+              <Button variante="fantome" compact aria-describedby="ex-th-date">
+                12 août
+              </Button>
+            </Tooltip>
+          </div>
+        ),
+      },
     ],
   },
 
@@ -1089,6 +1268,45 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'depliant',
+        nom: 'Rangée dépliante',
+        resume:
+          '<details> NATIF : clavier, annonce et état viennent du navigateur, aucun JavaScript. Le pliage APPLICATIF — options avancées, détail d’une ligne de journal ; la FAQ (contenu) reste celui de la vitrine. Plusieurs rangées se posent bord à bord, le filet mitoyen tombe seul.',
+        code: `<Fold titre="Options avancées">…</Fold>
+<Fold titre="Journal d'indexation" ouvert>…</Fold>`,
+        rendu: (
+          <div style={{ maxWidth: 420 }}>
+            <Fold titre="Options avancées">
+              Périmètre, profondeur et sources exclues se règlent par dossier, jamais
+              par requête.
+            </Fold>
+            <Fold titre="Journal d’indexation" ouvert>
+              Reçu, OCR, indexation : chaque étape est datée, et l’échec d’une page
+              n’interrompt pas les suivantes.
+            </Fold>
+          </div>
+        ),
+      },
+      {
+        id: 'code',
+        nom: 'Code et raccourcis',
+        resume:
+          'La chasse fixe RÉELLE (--font-code) : --font-mono est proportionnelle et n’aligne pas du code, tabular-nums n’aligne que les chiffres. Aucune coloration syntaxique — elle imposerait une palette que la charte n’a pas. « ⌘K » fait DEUX touches, donc deux Kbd.',
+        code: `<Body>Lancer <Code>pnpm build</Code>, puis <Kbd>⌘</Kbd> <Kbd>K</Kbd>.</Body>
+<CodeBlock>claude mcp add --transport http zevra-design …</CodeBlock>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12, maxWidth: 520 }}>
+            <Body taille="dense">
+              Lancer <Code>pnpm build</Code>, puis ouvrir la recherche avec <Kbd>⌘</Kbd>{' '}
+              <Kbd>K</Kbd>.
+            </Body>
+            <CodeBlock>
+              {'claude mcp add --transport http zevra-design \\\n  https://mcp.design.zevra.tech/mcp --scope user'}
+            </CodeBlock>
+          </div>
+        ),
+      },
     ],
   },
 
@@ -1160,15 +1378,37 @@ export const CATALOGUE: GroupeCatalogue[] = [
       },
       {
         id: 'onglets',
-        nom: 'Onglets',
+        nom: 'Onglets en puces',
         resume:
-          '⚠️ Il n’existe AUCUNE classe d’onglet dans le CSS : une rangée d’onglets EST une rangée de puces. Ce composant n’ajoute que l’ARIA, pas un style de plus. L’onglet souligné reste à arbitrer avec la DA.',
+          'La rangée de puces, grammaire d’état de Seg — le motif des FILTRES, qui restreignent une collection. Ce composant n’ajoute que l’ARIA. Pour les VUES d’un même objet, prendre la variante soulignée.',
         code: `<Tabs actif={actif} onChange={setActif} onglets={[
   { id: 'apercu', label: 'Aperçu' },
   { id: 'sources', label: 'Sources', compte: 12 },
 ]} />`,
         rendu: <DemoTabs />,
       },
+      {
+        id: 'onglets-soulignes',
+        nom: 'Onglets soulignés',
+        resume:
+          'L’arbitrage longtemps en attente, tranché le 25/08/2026 : trait actif de 2 px — l’épaisseur des filets dessinés du système — en accent, PAS en spectre (un quatrième emploi n’existe pas). Pour les VUES d’un même objet (Aperçu / Sources) ; pour filtrer, les puces.',
+        code: `<Tabs variante="soulignes" actif={actif} onChange={setActif} onglets={[
+  { id: 'apercu', label: 'Aperçu' },
+  { id: 'sources', label: 'Sources', compte: 12 },
+]} />`,
+        rendu: <DemoTabsLine />,
+      },
+      {
+        id: 'popover',
+        nom: 'Popover',
+        resume:
+          'Surface ancrée LIBRE — aide contextuelle, mini-formulaire de filtre — dans la même ancre que le menu (SelectAnchor). Ce n’est PAS une infobulle : le popover s’ouvre au CLIC et peut porter de l’interactif. Fermeture par clic extérieur et Échap : à l’appelant, comme pour le menu.',
+        code: `<SelectAnchor>
+  <Button variante="fantome" compact aria-expanded={ouvert} onClick={…}>Colonnes affichées</Button>
+  {ouvert && <Popover>…</Popover>}
+</SelectAnchor>`,
+        rendu: <DemoPopover />,
+      },
       {
         id: 'pagination',
         nom: 'Pagination',
@@ -1297,7 +1537,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'commun',
     css: 'icons.css',
     resume:
-      "34 icônes TRACÉES, jamais pleines : trait 2, bouts arrondis, grille de 24. Elles héritent de la couleur du texte — c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
+      "55 icônes TRACÉES, jamais pleines : trait 2, bouts arrondis, grille de 24. Elles héritent de la couleur du texte — c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
     exemples: [
       {
         id: 'jeu',
@@ -1660,6 +1900,57 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'bandeau',
+        nom: 'Bandeau d’annonce',
+        resume:
+          'La bande AU-DESSUS de la barre de navigation : annonce de version, information réglementaire. UN SEUL par page, et jamais pour du marketing permanent — un bandeau qui ne part pas devient un bourrelet de chrome. Le lien s’y souligne : sur un fond déjà indigo, la couleur seule ne le distingue plus.',
+        code: `<Banner>
+  La charte 0.8 est en ligne — angles vifs sur tout le système.{' '}
+  <a href="/journal">Ce qui change</a>
+</Banner>`,
+        rendu: (
+          <Banner>
+            La charte 0.8 est en ligne — angles vifs sur tout le système.{' '}
+            <a href="#">Ce qui change</a>
+          </Banner>
+        ),
+      },
+      {
+        id: 'carrousel',
+        nom: 'Carrousel',
+        resume:
+          'Défilement natif scroll-snap, AUCUN JavaScript : pas de flèches, pas de points ; le conteneur prend le focus, et son label est OBLIGATOIRE — une région qui défile sans nom est une énigme au lecteur d’écran. Un carrousel reste un aveu d’espace : la règle de variété lui préfère une grille tant que le contenu tient.',
+        code: `<Carousel label="La suite Zevra">
+  <CarouselItem style={{ width: 260 }}>
+    <Card>…</Card>
+  </CarouselItem>
+  …
+</Carousel>`,
+        rendu: (
+          <div style={{ maxWidth: 560 }}>
+            <Carousel label="La suite Zevra">
+              {(
+                [
+                  ['Mémoire', 'Votre savoir, interrogeable en une phrase.'],
+                  ['Lexform', 'Vos actes, anonymisés à la volée.'],
+                  ['Campus', 'La profession qui se rééquipe se forme.'],
+                  ['MCP juridique', 'Vos sources, branchées sur vos agents.'],
+                ] as const
+              ).map(([nom, phrase]) => (
+                <CarouselItem key={nom} style={{ width: 240 }}>
+                  <Card>
+                    <div style={{ display: 'grid', gap: 8 }}>
+                      <CardTitle>{nom}</CardTitle>
+                      <Body taille="dense">{phrase}</Body>
+                    </div>
+                  </Card>
+                </CarouselItem>
+              ))}
+            </Carousel>
+          </div>
+        ),
+      },
     ],
   },
 
@@ -1774,6 +2065,41 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'format-social',
+        nom: 'Formats sociaux',
+        resume:
+          'Planches d’EXPORT — paysage 1200×630 (OpenGraph, lien LinkedIn), carré 1080 (post), story 1080×1920 — FIGÉES en pixels : on les capture, on ne les publie pas en HTML, et elles ignorent le point de rupture. Un visuel social EST une publication : jamais de faux chiffre ni de fausse citation. Rendue ici à l’échelle 0,35.',
+        code: `<SocialFrame manifeste pied={<><Mono ton="on-dark">ZEVRA</Mono><Mono ton="on-dark">zevra.tech</Mono></>}>
+  <Kicker surSombre><Mono ton="on-dark">Manifeste · Article 1ᵉʳ</Mono></Kicker>
+  <Heading taille="h2" as="p">
+    Émanciper les avocats et les juristes des outils qu'on leur <Em surSombre>impose</Em>.
+  </Heading>
+</SocialFrame>`,
+        rendu: (
+          <div style={{ width: 421, height: 221, overflow: 'hidden' }}>
+            <div style={{ transform: 'scale(0.35)', transformOrigin: 'top left' }}>
+              <SocialFrame
+                manifeste
+                pied={
+                  <>
+                    <Mono ton="on-dark">ZEVRA</Mono>
+                    <Mono ton="on-dark">zevra.tech</Mono>
+                  </>
+                }
+              >
+                <Kicker surSombre>
+                  <Mono ton="on-dark">Manifeste · Article 1ᵉʳ</Mono>
+                </Kicker>
+                <Heading taille="h2" as="p">
+                  Émanciper les avocats et les juristes des outils qu’on leur{' '}
+                  <Em surSombre>impose</Em>.
+                </Heading>
+              </SocialFrame>
+            </div>
+          </div>
+        ),
+      },
     ],
   },
 ]