@zevra/ui 0.4.0 → 0.5.0

package/dist/catalogue.js

@@ -0,0 +1,830 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Catalogue — la planche de tous les composants, avec un exemple rendu et le
+// code qui le produit.
+//
+// Il est PUBLIÉ avec le paquet, pas cantonné aux tests, et c'est délibéré :
+//   · la page « Design system » de l'admin le rend tel quel, donc la
+//     documentation ne peut pas dériver des composants — c'est le même code ;
+//   · tests/react.test.js le rend en HTML et vérifie que chaque classe émise
+//     existe dans le CSS. Un composant absent du catalogue n'est pas couvert :
+//     c'est le rappel le plus efficace qu'on ait trouvé pour le tenir complet.
+//
+// « use client » parce que les enrobages ont besoin d'état pour se démontrer.
+// Ce module n'est jamais importé par le barrel : une app qui ne l'importe pas
+// ne l'embarque pas.
+import { useState } from 'react';
+import { Button, ButtonLink, ButtonRow, LinkArrow } from './actions.js';
+import { Card, Check, Divider, Ent, EntText, Faq, FaqItem, Glass, Inset, MiniStat, MiniStatItem, Pill, Price, Quote, 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, } from './data.js';
+import { Alert, Badge, Caret, Dot, Empty, Loading, Progress, Status, } from './feedback.js';
+import { Checkbox, Drop, Field, Input, Radio, 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, } from './layout.js';
+import { ChromeButton, CitePanel, Crumbs, Menu, MenuItem, Pager, PagerArrow, PagerRank, PagerStep, Scroll, SideGroup, SideLink, Sidebar, SidebarFoot, SidebarHead, Tabs, Topbar, TopbarTitle, } from './navigation.js';
+import { Drawer, Modal, Toast, Toasts } from './overlays.js';
+import { Band, Fade, Glyph, GridFloor, Halo, PanelNavy, TextOnDark, anim } from './surfaces.js';
+import { Body, CardTitle, Display, Em, H1, H2, H3, Heading, Kicker, Lead, Link, Mono, Note, Rule, Spec, Tagline, } from './typography.js';
+/* ── Démonstrations qui ont besoin d'état ─────────────────────────── */
+function DemoSwitch() {
+    const [on, setOn] = useState(true);
+    return _jsx(Switch, { on: on, texte: on ? 'ACTIVÉ' : 'DÉSACTIVÉ', onClick: () => setOn(!on) });
+}
+function DemoSeg() {
+    const [actif, setActif] = useState('tous');
+    return (_jsx(SegGroup, { children: [
+            ['tous', 'Tous', 128],
+            ['contrats', 'Contrats', 42],
+            ['jugements', 'Jugements', 9],
+        ].map(([id, label, n]) => (_jsx(Seg, { on: actif === id, compte: n, onClick: () => setActif(id), children: label }, id))) }));
+}
+function DemoTabs() {
+    const [actif, setActif] = useState('apercu');
+    return (_jsx(Tabs, { actif: actif, onChange: setActif, onglets: [
+            { id: 'apercu', label: 'Aperçu' },
+            { id: 'sources', label: 'Sources', compte: 12 },
+        ] }));
+}
+function DemoMenu() {
+    const [ouvert, setOuvert] = useState(false);
+    const [valeur, setValeur] = useState('Toute la base');
+    return (_jsxs(SelectAnchor, { children: [_jsx(SelectTrigger, { label: "P\u00C9RIM\u00C8TRE", value: valeur, onClick: () => setOuvert(!ouvert) }), ouvert && (_jsx(Menu, { children: ['Toute la base', 'Contrats', 'Jugements'].map((v) => (_jsx(MenuItem, { actif: v === valeur, onClick: () => {
+                        setValeur(v);
+                        setOuvert(false);
+                    }, children: v }, v))) }))] }));
+}
+function DemoDrawer() {
+    const [ouvert, setOuvert] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variante: "fantome", compact: true, onClick: () => setOuvert(true), children: "Ouvrir le tiroir" }), _jsx(Drawer, { ouvert: ouvert, onClose: () => setOuvert(false), fermeture: _jsx(ChromeButton, { "aria-label": "Fermer", onClick: () => setOuvert(false), children: "\u00D7" }), children: _jsxs(Sidebar, { children: [_jsx(SidebarHead, { children: _jsx(Mono, { ton: "label", children: "ZEVRA" }) }), _jsxs(SideGroup, { titre: "Espace", children: [_jsx(SideLink, { href: "#", courant: true, num: "01", children: "Biblioth\u00E8que" }), _jsx(SideLink, { href: "#", num: "02", children: "R\u00E9pertoire" })] })] }) })] }));
+}
+function DemoModal() {
+    const [ouvert, setOuvert] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variante: "fantome", compact: true, onClick: () => setOuvert(true), children: "Ouvrir la modale" }), _jsx(Modal, { ouvert: ouvert, onClose: () => setOuvert(false), titre: "Supprimer l'organisation", danger: true, pied: _jsxs(ButtonRow, { children: [_jsx(Button, { variante: "fantome", onClick: () => setOuvert(false), children: "Annuler" }), _jsx(Button, { onClick: () => setOuvert(false), children: "Supprimer" })] }), children: _jsx(Body, { children: "Les 4 812 documents index\u00E9s et leurs annotations seront d\u00E9truits. Cette action est irr\u00E9versible." }) })] }));
+}
+function DemoDrop() {
+    const [survol, setSurvol] = useState(false);
+    return (_jsx(Drop, { survol: survol, titre: "D\u00E9poser des documents", spec: "PDF, DOCX \u00B7 25 Mo par fichier", parcourir: "Parcourir les fichiers", onDragOver: (e) => {
+            e.preventDefault();
+            setSurvol(true);
+        }, onDragLeave: () => setSurvol(false), onDrop: (e) => {
+            e.preventDefault();
+            setSurvol(false);
+        } }));
+}
+/* ── Le catalogue ─────────────────────────────────────────────────── */
+export const CATALOGUE = [
+    {
+        id: 'typographie',
+        nom: 'Typographie',
+        couche: 'commun',
+        css: 'base.css',
+        resume: "Titres, corps, kickers, labels mono. La TAILLE est un choix de mise en page, la BALISE un choix de structure : d'où la prop « as », qui les sépare.",
+        exemples: [
+            {
+                id: 'headings',
+                nom: 'Titres',
+                resume: 'Six paliers. Une page n’a qu’un <h1>, mais peut avoir plusieurs blocs à sa taille — passer « as » plutôt que de casser le plan du document.',
+                code: `<H1>La recherche juridique, sourcée</H1>
+<H2 as="h3">Ce que voit votre équipe</H2>
+<H3>Indexation continue</H3>
+<CardTitle>Bibliothèque</CardTitle>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsx(H1, { children: "La recherche juridique, sourc\u00E9e" }), _jsx(H2, { as: "h3", children: "Ce que voit votre \u00E9quipe" }), _jsx(H3, { children: "Indexation continue" }), _jsx(CardTitle, { children: "Biblioth\u00E8que" })] })),
+            },
+            {
+                id: 'display',
+                nom: 'Display',
+                resume: 'Chiffre ou mot posé pour sa présence, HORS de la hiérarchie des titres — annoncé comme titre de section, il pollue le plan du document.',
+                code: `<Display>4 812</Display>`,
+                rendu: _jsx(Display, { children: "4 812" }),
+            },
+            {
+                id: 'corps',
+                nom: 'Corps et chapô',
+                resume: 'Trois densités de corps, plus le chapô qui suit un titre de section et la note de bas de bloc.',
+                code: `<Lead>Chaque réponse cite ses sources.</Lead>
+<Body>Le moteur relit l’intégralité des pièces déposées…</Body>
+<Body taille="dense">Variante resserrée, pour une carte.</Body>
+<Note>Hébergement souverain, données chiffrées au repos.</Note>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 10 }, children: [_jsx(Lead, { children: "Chaque r\u00E9ponse cite ses sources." }), _jsx(Body, { children: "Le moteur relit l\u2019int\u00E9gralit\u00E9 des pi\u00E8ces d\u00E9pos\u00E9es, y compris les annexes scann\u00E9es, et rattache chaque affirmation au passage qui la fonde." }), _jsx(Body, { taille: "dense", children: "Variante resserr\u00E9e, pour une carte." }), _jsx(Note, { children: "H\u00E9bergement souverain, donn\u00E9es chiffr\u00E9es au repos." })] })),
+            },
+            {
+                id: 'kicker',
+                nom: 'Kicker et filet',
+                resume: 'Le filet de spectre 56×2 devant un sur-titre. PREMIER des trois emplois autorisés du spectre — jamais en fond, jamais en texte.',
+                code: `<Kicker>Méthode</Kicker>
+<Kicker variante="stack">Sécurité</Kicker>
+<Spec petit />`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 14 }, children: [_jsx(Kicker, { children: "M\u00E9thode" }), _jsx(Kicker, { variante: "stack", children: "S\u00E9curit\u00E9" })] })),
+            },
+            {
+                id: 'mono',
+                nom: 'Label mono',
+                resume: 'Capitales espacées, RÉSERVÉES aux libellés. Une date ou un nom de fichier en capitales espacées devient illisible : pour ceux-là c’est « Meta ».',
+                code: `<Mono ton="label">PÉRIMÈTRE</Mono>
+<Mono ton="ink">12 SOURCES</Mono>
+<Mono ton="muted" micro>V2.4.1</Mono>`,
+                rendu: (_jsxs("div", { style: { display: 'flex', gap: 18, alignItems: 'baseline', flexWrap: 'wrap' }, children: [_jsx(Mono, { ton: "label", children: "P\u00C9RIM\u00C8TRE" }), _jsx(Mono, { ton: "ink", children: "12 SOURCES" }), _jsx(Mono, { ton: "muted", micro: true, children: "V2.4.1" })] })),
+            },
+            {
+                id: 'texte-inline',
+                nom: 'Dans le fil du texte',
+                resume: 'Mise en valeur, lien, signature de marque, filet neutre. « Em » a un pendant « surSombre » parce que l’indigo d’accent devient illisible sur la bande manifeste.',
+                code: `<Body>Une réponse <Em>toujours sourcée</Em>, jamais inventée.</Body>
+<Link href="/methode">Voir la méthode</Link>
+<Tagline>L’intelligence documentaire souveraine</Tagline>
+<Rule />`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 10 }, children: [_jsxs(Body, { children: ["Une r\u00E9ponse ", _jsx(Em, { children: "toujours sourc\u00E9e" }), ", jamais invent\u00E9e."] }), _jsx(Link, { href: "#", children: "Voir la m\u00E9thode" }), _jsx(Tagline, { children: "L\u2019intelligence documentaire souveraine" }), _jsx(Rule, {})] })),
+            },
+        ],
+    },
+    {
+        id: 'actions',
+        nom: 'Actions',
+        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.",
+        exemples: [
+            {
+                id: 'boutons',
+                nom: 'Boutons',
+                resume: '« plein » pour l’action principale, « fantôme » pour l’alternative, « encre » sur une surface claire où l’indigo se perdrait.',
+                code: `<ButtonRow>
+  <Button>Demander une démonstration</Button>
+  <Button variante="fantome">En savoir plus</Button>
+  <Button variante="encre">Se connecter</Button>
+</ButtonRow>`,
+                rendu: (_jsxs(ButtonRow, { children: [_jsx(Button, { children: "Demander une d\u00E9monstration" }), _jsx(Button, { variante: "fantome", children: "En savoir plus" }), _jsx(Button, { variante: "encre", children: "Se connecter" })] })),
+            },
+            {
+                id: 'boutons-gabarits',
+                nom: 'Gabarits',
+                resume: '« compact » dans une barre d’outils ou un pied de carte ; « bloc » pour un formulaire mobile, où l’action doit être atteignable au pouce.',
+                code: `<Button compact>Enregistrer</Button>
+<Button bloc>Se connecter</Button>
+<ButtonLink href="/tarifs" variante="fantome">Voir les tarifs</ButtonLink>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 10, maxWidth: 280 }, children: [_jsxs(ButtonRow, { children: [_jsx(Button, { compact: true, children: "Enregistrer" }), _jsx(ButtonLink, { href: "#", variante: "fantome", compact: true, children: "Voir les tarifs" })] }), _jsx(Button, { bloc: true, children: "Se connecter" })] })),
+            },
+            {
+                id: 'lien-fleche',
+                nom: 'Lien fléché',
+                resume: 'La flèche fait partie du composant, pas du contenu : recopiée à la main, elle a produit trois tracés différents.',
+                code: `<LinkArrow href="/methode">Comment ça marche</LinkArrow>`,
+                rendu: _jsx(LinkArrow, { href: "#", children: "Comment \u00E7a marche" }),
+            },
+            {
+                id: 'icon-btn',
+                nom: 'Bouton d’icône',
+                resume: 'Le libellé accessible est OBLIGATOIRE, et s’écrit pour l’ACTION (« Fermer le panneau ») et non pour le dessin (« Croix »).',
+                code: `<IconButton icone="fermer" label="Fermer le panneau" />
+<IconButton icone="telecharger" label="Télécharger le document" />`,
+                rendu: (_jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx(IconButton, { icone: ICONES[0], label: NOMS_ICONES[ICONES[0]] }), _jsx(IconButton, { icone: ICONES[1], label: NOMS_ICONES[ICONES[1]] }), _jsx(IconButton, { icone: ICONES[2], label: NOMS_ICONES[ICONES[2]] })] })),
+            },
+        ],
+    },
+    {
+        id: 'saisie',
+        nom: 'Saisie',
+        couche: 'applicatif',
+        css: 'forms.css',
+        resume: "Le liage intitulé ↔ contrôle est EXPLICITE : même valeur en « htmlFor » sur le champ et en « id » sur le contrôle. Sans useId, ces composants restent rendus au serveur.",
+        exemples: [
+            {
+                id: 'champ',
+                nom: 'Champ',
+                resume: 'L’aide et l’erreur occupent la même place : la seconde efface la première, sinon les deux se chevauchent.',
+                code: `<Field label="ADRESSE E-MAIL" htmlFor="mail" help="Votre adresse professionnelle.">
+  <Input id="mail" type="email" placeholder="prenom.nom@cabinet.fr" />
+</Field>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 16, maxWidth: 380 }, children: [_jsx(Field, { label: "ADRESSE E-MAIL", htmlFor: "ex-mail", help: "Votre adresse professionnelle.", children: _jsx(Input, { id: "ex-mail", type: "email", placeholder: "prenom.nom@cabinet.fr" }) }), _jsx(Field, { label: "IDENTIFIANT D\u2019ORGANISATION", htmlFor: "ex-org", erreur: "Cet identifiant n\u2019existe pas.", children: _jsx(Input, { id: "ex-org", mono: true, erreur: true, defaultValue: "zvr-8841-x", "aria-describedby": "ex-org-err" }) }), _jsx(Field, { label: "MOT DE PASSE", htmlFor: "ex-mdp", action: _jsx(Link, { href: "#", children: "Oubli\u00E9 ?" }), children: _jsx(Input, { id: "ex-mdp", type: "password", defaultValue: "\u00B7\u00B7\u00B7\u00B7\u00B7\u00B7\u00B7\u00B7" }) })] })),
+            },
+            {
+                id: 'select',
+                nom: 'Sélection',
+                resume: '<select> NATIF : la flèche, l’ouverture au clavier et l’annonce viennent du navigateur. C’est le motif de choix par défaut.',
+                code: `<Field label="RÔLE" htmlFor="role">
+  <Select id="role"><option>Administrateur</option>…</Select>
+</Field>`,
+                rendu: (_jsx("div", { style: { maxWidth: 260 }, children: _jsx(Field, { label: "R\u00D4LE", htmlFor: "ex-role", children: _jsxs(Select, { id: "ex-role", defaultValue: "R\u00E9dacteur", children: [_jsx("option", { children: "Administrateur" }), _jsx("option", { children: "R\u00E9dacteur" }), _jsx("option", { children: "Lecture seule" })] }) }) })),
+            },
+            {
+                id: 'textarea',
+                nom: 'Zone de texte',
+                resume: 'Redimensionnable verticalement SEULEMENT : en libre, l’utilisateur l’élargit hors de sa colonne et casse la mise en page.',
+                code: `<Textarea placeholder="Contexte de la demande…" />`,
+                rendu: (_jsx("div", { style: { maxWidth: 380 }, children: _jsx(Textarea, { placeholder: "Contexte de la demande\u2026" }) })),
+            },
+            {
+                id: 'recherche',
+                nom: 'Recherche',
+                resume: 'Cadre + loupe + champ nu. Deux marquages au clavier (l’anneau du champ ET le filet du cadre) : assumé — supprimer l’un rend le champ invisible, l’autre prive la souris de retour.',
+                code: `<Search placeholder="Rechercher un document…" />`,
+                rendu: (_jsx("div", { style: { maxWidth: 380 }, children: _jsx(Search, { placeholder: "Rechercher un document\u2026" }) })),
+            },
+            {
+                id: 'menu-select',
+                nom: 'Déclencheur de menu',
+                resume: 'Menu MAISON, à réserver aux filtres. À poser dans « SelectAnchor » : c’est l’enveloppe qui ancre le menu, pas le déclencheur.',
+                code: `<SelectAnchor>
+  <SelectTrigger label="PÉRIMÈTRE" value="Toute la base" onClick={…} />
+  {ouvert && <Menu><MenuItem actif>Toute la base</MenuItem>…</Menu>}
+</SelectAnchor>`,
+                rendu: _jsx(DemoMenu, {}),
+            },
+            {
+                id: 'bascules',
+                nom: 'Bascules',
+                resume: 'Contrôles natifs (appearance:none seulement) : clavier, focus visible et annonce viennent du navigateur, pas d’un <div> à réoutiller.',
+                code: `<Checkbox defaultChecked /> <Radio name="x" defaultChecked />
+<Switch on={on} texte="ACTIVÉ" onClick={…} />`,
+                rendu: (_jsxs("div", { style: { display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsxs("label", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsx(Checkbox, { defaultChecked: true }), " ", _jsx("span", { className: "zv-body zv-body--dense", children: "Anonymiser" })] }), _jsxs("label", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsx(Radio, { name: "ex-r", defaultChecked: true }), " ", _jsx("span", { className: "zv-body zv-body--dense", children: "Tout" })] }), _jsx(DemoSwitch, {})] })),
+            },
+            {
+                id: 'puces',
+                nom: 'Puces de filtre',
+                resume: 'Le seul mécanisme de filtrage du système. Sélection DOUCE par défaut ; la variante « plein » est bornée à un groupe par page.',
+                code: `<SegGroup>
+  <Seg on compte={128} onClick={…}>Tous</Seg>
+  <Seg compte={42} onClick={…}>Contrats</Seg>
+</SegGroup>`,
+                rendu: _jsx(DemoSeg, {}),
+            },
+            {
+                id: 'depot',
+                nom: 'Zone de dépôt',
+                resume: 'role="button" + tabIndex posés par le composant : sans eux la page d’import est inatteignable au clavier. Remettre value="" après chaque sélection.',
+                code: `<Drop titre="Déposer des documents" spec="PDF, DOCX · 25 Mo"
+      parcourir="Parcourir les fichiers" survol={survol} … />`,
+                rendu: _jsx(DemoDrop, {}),
+            },
+        ],
+    },
+    {
+        id: 'retours',
+        nom: 'Retours',
+        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.",
+        exemples: [
+            {
+                id: 'alertes',
+                nom: 'Bandeaux',
+                resume: 'Le ton est OBLIGATOIRE : sans lui, le bandeau hérite d’un filet en currentColor, soit un trait d’encre autour d’un fond blanc.',
+                code: `<Alert ton="info">Les documents sont indexés en continu.</Alert>
+<Alert ton="err" taille="sm">Identifiants incorrects.</Alert>
+<Alert ton="warn" taille="lg">Le moteur est en charge…</Alert>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 10 }, children: [_jsx(Alert, { ton: "info", children: "Les documents sont index\u00E9s en continu." }), _jsx(Alert, { ton: "ok", taille: "sm", children: "Organisation enregistr\u00E9e." }), _jsx(Alert, { ton: "warn", children: "Trois pi\u00E8ces n\u2019ont pas pu \u00EAtre oc\u00E9ris\u00E9es." }), _jsx(Alert, { ton: "err", taille: "sm", children: "Identifiants incorrects." }), _jsx(Alert, { ton: "dash", children: "Aucune source ne couvre cette p\u00E9riode." })] })),
+            },
+            {
+                id: 'badges',
+                nom: 'Étiquettes',
+                resume: 'Les capitales s’écrivent dans le CONTENU, pas en CSS : transformé par le navigateur, « INDEXÉ » se casse selon la locale.',
+                code: `<Badge ton="ok">INDEXÉ</Badge>
+<Badge ton="warn" gabarit="micro">WARN</Badge>
+<Badge ton="accent" pastille>IA DÉDIÉE</Badge>`,
+                rendu: (_jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }, children: [_jsx(Badge, { children: "ADMIN" }), _jsx(Badge, { ton: "accent", pastille: true, children: "IA D\u00C9DI\u00C9E" }), _jsx(Badge, { ton: "ok", children: "INDEX\u00C9" }), _jsx(Badge, { ton: "warn", gabarit: "micro", children: "WARN" }), _jsx(Badge, { ton: "err", gabarit: "micro", children: "ERROR" }), _jsx(Badge, { ton: "ok", gabarit: "state", children: "OK" })] })),
+            },
+            {
+                id: 'pastilles',
+                nom: 'Pastilles et statut',
+                resume: 'Sans état, la pastille reste GRISE : un statut ajouté côté serveur et pas encore côté interface ne doit pas passer pour un succès. La pastille CARRÉE marque une source, pas un état.',
+                code: `<Status etat="indexe">Indexé · 42 pages</Status>
+<Dot etat="erreur" /> <Dot carree /> <Dot taille="lg" etat="ok" />`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 10 }, children: [_jsx(Status, { etat: "indexe", children: "Index\u00E9 \u00B7 42 pages" }), _jsx(Status, { etat: "indexation", children: "Indexation en cours" }), _jsx(Status, { etat: "erreur", children: "Fichier illisible : page 3 corrompue" }), _jsx(Status, { children: "Statut inconnu" })] })),
+            },
+            {
+                id: 'absence',
+                nom: 'Absence',
+                resume: '⚠️ DEUX objets. Sans titre : la LIGNE d’absence, un filtre trop étroit, l’en-tête du tableau reste visible. Avec titre et « page » : l’ÉCRAN d’absence, la collection est vide. Les confondre affiche un écran de bienvenue à chaque filtre strict.',
+                code: `<Empty>Aucun document ne correspond à ces filtres.</Empty>
+
+<Empty page titre="Aucun document" action={<Button compact>Importer</Button>}>
+  Déposez vos premières pièces pour lancer l’indexation.
+</Empty>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 16 }, children: [_jsx(Empty, { children: "Aucun document ne correspond \u00E0 ces filtres." }), _jsx(Empty, { page: true, titre: "Aucun document", action: _jsx(Button, { compact: true, children: "Importer" }), children: "D\u00E9posez vos premi\u00E8res pi\u00E8ces pour lancer l\u2019indexation." })] })),
+            },
+            {
+                id: 'attente',
+                nom: 'Travail en cours',
+                resume: 'STATIQUE : la pastille ne bat pas. Une roue dit « attendez » ; cette phrase dit sur quoi, sur combien, et qu’il ne se passe rien d’anormal.',
+                code: `<Loading>Recherche dans 4 812 documents anonymisés…</Loading>
+<Progress valeur={0.62} label="Indexation" />
+<span>…réponse en cours<Caret /></span>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsx(Loading, { children: "Recherche dans 4 812 documents anonymis\u00E9s\u2026" }), _jsx(Progress, { valeur: 0.62, label: "Indexation" }), _jsxs("span", { className: "zv-body zv-body--dense", children: ["La clause de non-concurrence est limit\u00E9e \u00E0 vingt-quatre mois", _jsx(Caret, {})] })] })),
+            },
+        ],
+    },
+    {
+        id: 'contenu',
+        nom: 'Contenu',
+        couche: 'commun',
+        css: 'components.css',
+        resume: 'Surfaces, encarts, étiquettes éditoriales et blocs de preuve. ⚠️ Deux règles de charte y sont opposables : jamais de fausse citation, jamais de lorem dans un aperçu produit.',
+        exemples: [
+            {
+                id: 'cartes',
+                nom: 'Cartes',
+                resume: '« Glass » ne fonctionne QUE devant un halo ou une scène : posée sur du papier nu, elle disparaît.',
+                code: `<Card padding="large">…</Card>
+<Card etat="ok">…</Card>
+<Card flottante>…</Card>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))' }, children: [_jsxs(Card, { children: [_jsx(CardTitle, { children: "Biblioth\u00E8que" }), _jsx(Body, { taille: "dense", children: "4 812 pi\u00E8ces index\u00E9es." })] }), _jsx(Card, { etat: "ok", children: _jsx(Body, { taille: "dense", children: "Sauvegarde v\u00E9rifi\u00E9e il y a 2 h." }) }), _jsx(Card, { etat: "err", children: _jsx(Body, { taille: "dense", children: "Trois pi\u00E8ces illisibles." }) })] })),
+            },
+            {
+                id: 'encarts',
+                nom: 'Encarts',
+                resume: 'DEUX objets longtemps confondus : la citation d’interface, et l’extrait de document (« discret » : fond panel, très aéré).',
+                code: `<Inset>La demande est recevable.</Inset>
+<Inset discret>« … le délai de préavis court à compter … »</Inset>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 10 }, children: [_jsx(Inset, { children: _jsx(Body, { taille: "dense", children: "Trois arr\u00EAts post\u00E9rieurs confirment cette lecture." }) }), _jsx(Inset, { discret: true, children: _jsx(Body, { taille: "dense", children: "\u00AB Le d\u00E9lai de pr\u00E9avis court \u00E0 compter de la premi\u00E8re pr\u00E9sentation de la lettre recommand\u00E9e. \u00BB" }) })] })),
+            },
+            {
+                id: 'etiquettes',
+                nom: 'Étiquettes éditoriales',
+                resume: '⚠️ Trois objets qui se ressemblent et ne se remplacent pas : « Pill » (pastille pleine), « Tag » (kicker mono), « Src » (puce de source).',
+                code: `<Pill>Nouveau</Pill>
+<Tag etat="ok">CONFORME</Tag>
+<SrcRow><Src>BOSS</Src><Src>Judilibre</Src><Src attenue>+ 11</Src></SrcRow>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Pill, { children: "Nouveau" }), _jsx(Tag, { children: "M\u00C9THODE" }), _jsx(Tag, { etat: "ok", children: "CONFORME" }), _jsx(Tag, { etat: "err", children: "\u00C9CART" })] }), _jsxs(SrcRow, { children: [_jsx(Src, { children: "BOSS" }), _jsx(Src, { children: "Judilibre" }), _jsx(Src, { children: "KALI" }), _jsx(Src, { attenue: true, children: "+ 11" })] })] })),
+            },
+            {
+                id: 'entites',
+                nom: 'Entités pseudonymisées',
+                resume: 'Le paragraphe hôte respire davantage : sans lui, les jetons se télescopent d’une ligne à l’autre.',
+                code: `<Body><EntText>Le contrat lie <Ent>SOCIÉTÉ_A</Ent> à <Ent>M. B</Ent>…</EntText></Body>`,
+                rendu: (_jsx(Body, { children: _jsxs(EntText, { children: ["Le contrat lie ", _jsx(Ent, { children: "SOCI\u00C9T\u00C9_A" }), " \u00E0 ", _jsx(Ent, { children: "M. B" }), ", domicili\u00E9", ' ', _jsx(Ent, { children: "ADRESSE_1" }), ", pour une dur\u00E9e de trente-six mois."] }) })),
+            },
+            {
+                id: 'preuve',
+                nom: 'Aperçu d’interface',
+                resume: '⚠️ RÈGLE DE CHARTE : toujours de VRAIES données réalistes, jamais de lorem — c’est ce bloc qui porte la crédibilité de la page.',
+                code: `<UiPreview question="Quelle est la durée de préavis ?"
+           sources="12 sources" puces={<SrcRow>…</SrcRow>}>
+  Trois mois pour les cadres…
+</UiPreview>`,
+                rendu: (_jsx(UiPreview, { question: "Quelle dur\u00E9e de pr\u00E9avis s\u2019applique aux cadres ?", sources: "12 sources", puces: _jsxs(SrcRow, { children: [_jsx(Src, { children: "Convention Syntec" }), _jsx(Src, { children: "Cass. soc. 2019" })] }), children: "Trois mois, sauf stipulation plus favorable du contrat de travail. La convention Syntec ne pr\u00E9voit pas de r\u00E9duction en cas de dispense." })),
+            },
+            {
+                id: 'stats-carte',
+                nom: 'Statistiques de carte',
+                resume: 'Paire au pied d’une carte produit, ou carte autonome. ⚠️ Ne pas confondre avec « Stats » (layout), qui est la rangée de chiffres d’une page vitrine : celle-ci vit DANS une carte.',
+                code: `<MiniStat>
+  <MiniStatItem valeur="4 812">documents</MiniStatItem>
+  <MiniStatItem valeur="1,2 s">latence</MiniStatItem>
+</MiniStat>
+
+<StatCard valeur="99,95 %">disponibilité sur 90 jours</StatCard>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsxs(MiniStat, { children: [_jsx(MiniStatItem, { valeur: "4 812", children: "documents" }), _jsx(MiniStatItem, { valeur: "1,2 s", children: "latence m\u00E9diane" })] }), _jsx(StatCard, { valeur: "99,95 %", children: "disponibilit\u00E9 sur 90 jours" })] })),
+            },
+            {
+                id: 'faq',
+                nom: 'FAQ',
+                resume: '⚠️ Cinq questions par page au MAXIMUM. Au-delà, ce n’est plus une FAQ, c’est une documentation mal rangée.',
+                code: `<Faq>
+  <FaqItem question="Où sont hébergées les données ?">En France, chez OVHcloud.</FaqItem>
+</Faq>`,
+                rendu: (_jsxs(Faq, { children: [_jsx(FaqItem, { question: "O\u00F9 sont h\u00E9berg\u00E9es les donn\u00E9es ?", children: "En France, sur une infrastructure OVHcloud d\u00E9di\u00E9e, sans r\u00E9plication hors Union europ\u00E9enne." }), _jsx(FaqItem, { question: "Le mod\u00E8le apprend-il sur nos documents ?", children: "Non. Les pi\u00E8ces d\u00E9pos\u00E9es ne servent qu\u2019\u00E0 r\u00E9pondre \u00E0 vos requ\u00EAtes et ne sont jamais vers\u00E9es \u00E0 un entra\u00EEnement." })] })),
+            },
+            {
+                id: 'prix',
+                nom: 'Tarifs',
+                resume: '« recommande » pose le bandeau indigo. Trois cartes par page au plus : au-delà, la comparaison ne se fait plus d’un coup d’œil.',
+                code: `<Price montant="490 €" unite="HT · par mois" recommande
+       note="Engagement 12 mois">…</Price>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit,minmax(190px,1fr))' }, children: [_jsx(Price, { montant: "190 \u20AC", unite: "HT / mois", note: "Jusqu\u2019\u00E0 3 utilisateurs", children: _jsx(CardTitle, { children: "Cabinet" }) }), _jsx(Price, { montant: "490 \u20AC", unite: "HT / mois", recommande: true, note: "Engagement 12 mois", children: _jsx(CardTitle, { children: "\u00C9tude" }) })] })),
+            },
+            {
+                id: 'filets-check',
+                nom: 'Filets et coche',
+                resume: '⚠️ « Check » n’est PAS un contrôle : c’est une coche décorative en tête de liste d’arguments. Le contrôle, c’est « Checkbox ».',
+                code: `<Divider /> <Divider marque />
+<li><Check /> Réponses sourcées</li>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 10 }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsx(Check, {}), _jsx("span", { className: "zv-body zv-body--dense", children: "Chaque r\u00E9ponse cite ses sources" })] }), _jsx(Divider, {}), _jsx(Divider, { marque: true })] })),
+            },
+            {
+                id: 'citation',
+                nom: 'Citation client',
+                resume: '⚠️ RÈGLE DE CHARTE : jamais de fausse citation. Tant qu’un verbatim n’a pas été recueilli, ce bloc reste EN RÉSERVE — un placeholder crédible finit toujours par partir en production.',
+                code: `<Band><Quote auteur="— Nom, cabinet">Verbatim réel uniquement.</Quote></Band>`,
+                surSombre: true,
+                rendu: (_jsx(Band, { children: _jsx(Quote, { auteur: "\u2014 en attente d\u2019un verbatim recueilli", children: "Ce bloc reste en r\u00E9serve tant qu\u2019aucune citation r\u00E9elle n\u2019a \u00E9t\u00E9 recueillie." }) })),
+            },
+        ],
+    },
+    {
+        id: 'donnees',
+        nom: 'Données',
+        couche: 'applicatif',
+        css: 'data.css',
+        resume: "Le tableau n'est PAS un <table> : c'est une grille CSS, parce qu'une même rangée doit se rendre en colonnes au-dessus du point de rupture et en carte empilée en dessous, sans dupliquer le balisage.",
+        exemples: [
+            {
+                id: 'tableau',
+                nom: 'Tableau',
+                resume: 'Le gabarit de colonnes se pose UNE FOIS sur le cadre ; l’en-tête et les lignes en héritent. Recopié aux deux endroits, on l’oublie à l’un et les intitulés se décalent des valeurs sans que rien ne casse visiblement.',
+                code: `<Table gabarit="minmax(0,2fr) 110px 90px">
+  <TableHead>
+    <Cell>Document</Cell><Cell>État</Cell><Cell registre="num">Pages</Cell>
+  </TableHead>
+  <Row href="/doc/1">
+    <Cell registre="nom"><Trunc>Contrat-cadre.pdf</Trunc></Cell>
+    <Cell label="État"><Status etat="indexe">Indexé</Status></Cell>
+    <Cell registre="num" label="Pages" unite="p.">42</Cell>
+  </Row>
+</Table>`,
+                rendu: (_jsxs(Table, { gabarit: "minmax(0,2fr) 120px 90px", children: [_jsxs(TableHead, { children: [_jsx(Cell, { children: "Document" }), _jsx(Cell, { children: "\u00C9tat" }), _jsx(Cell, { registre: "num", children: "Pages" })] }), [
+                            ['Contrat-cadre-Syntec.pdf', 'indexe', 'Indexé', 42],
+                            ['Assignation-2024-114.docx', 'indexation', 'Indexation', 8],
+                            ['Annexe-3-scannee.pdf', 'erreur', 'Page 3 corrompue', 3],
+                        ].map(([nom, etat, libelle, pages]) => (_jsxs(Row, { children: [_jsx(Cell, { registre: "nom", children: _jsx(Trunc, { children: nom }) }), _jsx(Cell, { label: "\u00C9tat", children: _jsx(Status, { etat: etat, children: libelle }) }), _jsx(Cell, { registre: "num", label: "Pages", unite: "p.", children: pages })] }, nom)))] })),
+            },
+            {
+                id: 'unwrap',
+                nom: 'Dégroupage',
+                resume: 'La primitive structurelle du module : un groupe qui rassemble deux ou trois cellules pour l’empilement mobile, puis s’efface (display: contents) et rend ses enfants DIRECTEMENT à la grille. ⚠️ Il n’exprime QUE ce sens-là.',
+                code: `<Row>
+  <Unwrap><Cell registre="nom">…</Cell><Cell label="Auteur">…</Cell></Unwrap>
+  <Cell registre="num">…</Cell>
+</Row>`,
+                rendu: (_jsx(Table, { gabarit: "minmax(0,2fr) 120px 80px", children: _jsxs(Row, { children: [_jsxs(Unwrap, { children: [_jsx(Cell, { registre: "nom", children: "M\u00E9moire en d\u00E9fense" }), _jsx(Cell, { label: "Auteur", children: _jsx(Meta, { children: "M. Dubois" }) })] }), _jsx(Cell, { registre: "num", label: "Pages", children: "17" })] }) })),
+            },
+            {
+                id: 'liste',
+                nom: 'Liste sans colonnes',
+                resume: 'Même cadre que le tableau, mais rien à aligner : ni en-tête, ni gabarit.',
+                code: `<List>
+  <ListRow>
+    <ListMain><FileType format="pdf" /><ListName>…</ListName></ListMain>
+    <Meta>2,4 Mo</Meta>
+  </ListRow>
+</List>`,
+                rendu: (_jsxs(List, { children: [_jsxs(ListRow, { children: [_jsxs(ListMain, { children: [_jsx(FileType, { format: "pdf" }), _jsx(ListName, { children: "Contrat-cadre-Syntec.pdf" })] }), _jsx(Meta, { children: "2,4 Mo" })] }), _jsxs(ListRow, { upload: true, children: [_jsxs(ListMain, { children: [_jsx(FileType, { format: "docx" }), _jsx(ListName, { children: "Assignation-2024-114.docx" })] }), _jsx(Progress, { valeur: 0.4, label: "Envoi" })] })] })),
+            },
+            {
+                id: 'meta',
+                nom: 'Métadonnées',
+                resume: 'Second registre mono, en BAS DE CASSE : taille, date, latence. Ni capitales ni interlettrage — c’est ce qui le distingue de « Mono », et une date en capitales espacées devient illisible.',
+                code: `<MetaRow><Meta>12 mars 2026</Meta><Meta taille="sm">1,2 s</Meta></MetaRow>`,
+                rendu: (_jsxs(MetaRow, { children: [_jsx(Meta, { taille: "md", children: "12 mars 2026" }), _jsx(Meta, { children: "14:07:22" }), _jsx(Meta, { taille: "sm", children: "1,24 s" }), _jsx(Meta, { discret: true, children: "2,4 Mo" })] })),
+            },
+            {
+                id: 'kv',
+                nom: 'Clé-valeur',
+                resume: '⚠️ La CLÉ est en mono, en accent, et se coupe ; la VALEUR est en texte courant, en gris, et ne se coupe jamais. Inverser les deux change ce que l’œil balaie en premier.',
+                code: `<KV variante="grid">
+  <KVRow cle="ORGANISATION">Cabinet Duflot & Associés</KVRow>
+  <KVRow cle="IDENTIFIANT"><Break>zvr-8841-x-3c9f2a</Break></KVRow>
+</KV>`,
+                rendu: (_jsxs(KV, { variante: "grid", children: [_jsx(KVRow, { cle: "ORGANISATION", children: "Cabinet Duflot & Associ\u00E9s" }), _jsx(KVRow, { cle: "IDENTIFIANT", children: _jsx(Break, { children: "zvr-8841-x-3c9f2a" }) }), _jsx(KVRow, { cle: "FORMULE", children: "\u00C9tude \u00B7 12 postes" })] })),
+            },
+            {
+                id: 'avatar-chip',
+                nom: 'Pastilles et catégories',
+                resume: 'Avatar CARRÉ, jamais rond : le rond est un usage de réseau social. ⚠️ Sa teinte dit la NATURE de l’entité — la changer, c’est changer le sens.',
+                code: `<Avatar ton="accent">MD</Avatar>
+<ChipRow><Chip>Droit social</Chip><Chip variante="outline">2024</Chip></ChipRow>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx(Avatar, { ton: "accent", children: "MD" }), _jsx(Avatar, { ton: "ink", children: "JL" }), _jsx(Avatar, { ton: "soft", children: "AB" }), _jsx(Avatar, { ton: "soft", petit: true, children: "ZV" })] }), _jsxs(ChipRow, { children: [_jsx(Chip, { children: "Droit social" }), _jsx(Chip, { children: "Convention collective" }), _jsx(Chip, { variante: "mono", children: "2024-114" }), _jsx(Chip, { variante: "outline", children: "Archiv\u00E9" })] })] })),
+            },
+            {
+                id: 'citations-src',
+                nom: 'Citations',
+                resume: 'Référence cliquable, dans le fil du texte ou groupée en pied de réponse : elle ouvre la feuille de source.',
+                code: `<CiteRow><Cite>1</Cite><Cite>2</Cite></CiteRow>`,
+                rendu: (_jsxs(CiteRow, { children: [_jsx(Cite, { children: "Convention Syntec, art. 15" }), _jsx(Cite, { children: "Cass. soc., 4 d\u00E9c. 2019" })] })),
+            },
+            {
+                id: 'formats',
+                nom: 'Format de fichier',
+                resume: '⚠️ Ces deux couleurs ne viennent PAS de la charte : ce sont celles que le monde associe à ces formats, et les détourner rendrait les vignettes illisibles au premier coup d’œil. Seul usage autorisé : la pastille de format.',
+                code: `<FileType format="pdf" /> <FileType format="docx" />`,
+                rendu: (_jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx(FileType, { format: "pdf" }), _jsx(FileType, { format: "docx" })] })),
+            },
+        ],
+    },
+    {
+        id: 'navigation',
+        nom: 'Navigation',
+        couche: 'applicatif',
+        css: 'navigation.css',
+        resume: "Rien n'a d'état propre : l'entrée courante, la page courante et l'item sélectionné viennent de l'appelant — c'est ce qui permet à une colonne de navigation Next de rester rendue au serveur.",
+        exemples: [
+            {
+                id: 'sidebar',
+                nom: 'Colonne latérale',
+                resume: 'Une colonne, un filet, rien d’autre. « courant » pose aria-current="page" en plus de la classe : sans lui, l’entrée courante est marquée pour l’œil et muette au lecteur d’écran.',
+                code: `<Sidebar>
+  <SidebarHead>…</SidebarHead>
+  <SideGroup titre="Espace">
+    <SideLink href="/bibliotheque" courant num="01">Bibliothèque</SideLink>
+  </SideGroup>
+  <SidebarFoot>…</SidebarFoot>
+</Sidebar>`,
+                rendu: (_jsxs(Sidebar, { style: { height: 260 }, children: [_jsx(SidebarHead, { children: _jsx(Mono, { ton: "ink", children: "ZEVRA" }) }), _jsxs(SideGroup, { titre: "Espace", children: [_jsx(SideLink, { href: "#", courant: true, num: "01", children: "Biblioth\u00E8que" }), _jsx(SideLink, { href: "#", num: "02", children: "R\u00E9pertoire" }), _jsx(SideLink, { href: "#", num: "03", children: "Import" })] }), _jsx(SidebarFoot, { children: _jsx(Meta, { discret: true, children: "v2.4.1" }) })] })),
+            },
+            {
+                id: 'topbar',
+                nom: 'Barre supérieure',
+                resume: '⚠️ Elle REMPLACE la colonne sous le point de rupture : masquée au-dessus, elle n’apparaît que dans le bloc mobile du CSS. Ne jamais la conditionner en JavaScript — le serveur ne connaît pas la largeur de l’écran.',
+                code: `<Topbar>
+  <TopbarBurger aria-label="Ouvrir la navigation">☰</TopbarBurger>
+  <TopbarLogo><img src="/logo.svg" alt="" /></TopbarLogo>
+  <TopbarTitle>Bibliothèque</TopbarTitle>
+</Topbar>`,
+                rendu: (_jsx(Topbar, { style: { display: 'flex', position: 'static' }, children: _jsx(TopbarTitle, { children: "Biblioth\u00E8que" }) })),
+            },
+            {
+                id: 'crumbs',
+                nom: 'Fil d’Ariane',
+                resume: '⚠️ Le fil ENTIER est cliquable — c’est un seul nœud, pas une liste de liens. Le DERNIER segment est plus sombre : c’est celui qu’on lit, le reste n’est qu’un chemin.',
+                code: `<Crumbs href="/dossiers/2024" segments={['Dossiers', '2024', 'Duflot']} />`,
+                rendu: _jsx(Crumbs, { href: "#", segments: ['Dossiers', '2024', 'Duflot & Associés'] }),
+            },
+            {
+                id: 'onglets',
+                nom: 'Onglets',
+                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.',
+                code: `<Tabs actif={actif} onChange={setActif} onglets={[
+  { id: 'apercu', label: 'Aperçu' },
+  { id: 'sources', label: 'Sources', compte: 12 },
+]} />`,
+                rendu: _jsx(DemoTabs, {}),
+            },
+            {
+                id: 'pagination',
+                nom: 'Pagination',
+                resume: '⚠️ Une flèche désactivée reste ATTEIGNABLE au clavier (aria-disabled, pas disabled) : sinon elle disparaît du parcours sans être annoncée.',
+                code: `<Pager>
+  <PagerArrow aria-label="Page précédente" desactive>‹</PagerArrow>
+  <PagerRank>p. 12 / 31</PagerRank>
+  <PagerArrow aria-label="Page suivante">›</PagerArrow>
+</Pager>
+
+<Pager pied>
+  <Meta>128 documents</Meta>
+  <PagerStep>‹ Précédent · Suivant ›</PagerStep>
+</Pager>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsxs(Pager, { children: [_jsx(PagerArrow, { "aria-label": "Page pr\u00E9c\u00E9dente", desactive: true, children: "\u2039" }), _jsx(PagerRank, { children: "p. 12 / 31" }), _jsx(PagerArrow, { "aria-label": "Page suivante", children: "\u203A" })] }), _jsxs(Pager, { pied: true, children: [_jsx(Meta, { children: "128 documents" }), _jsx(PagerStep, { children: "\u2039 Pr\u00E9c\u00E9dent \u00B7 Suivant \u203A" })] })] })),
+            },
+            {
+                id: 'cite-panel',
+                nom: 'Feuille de source',
+                resume: 'Le panneau qu’ouvre une citation : l’extrait, sa référence, ses actions.',
+                code: `<CitePanel titre="Convention Syntec, art. 15"
+           actions={<ChromeButton aria-label="Fermer">×</ChromeButton>}
+           pied={<Button compact bloc>Ouvrir le document</Button>}>
+  …
+</CitePanel>`,
+                rendu: (_jsx(CitePanel, { titre: "Convention Syntec, art. 15", actions: _jsx(ChromeButton, { "aria-label": "Fermer la feuille", children: "\u00D7" }), pied: _jsx(Button, { compact: true, children: "Ouvrir le document" }), style: { position: 'static', width: 'auto', height: 'auto' }, children: _jsx(Body, { taille: "dense", children: "\u00AB Le d\u00E9lai de pr\u00E9avis est de trois mois pour les salari\u00E9s relevant de la position 3. \u00BB" }) })),
+            },
+            {
+                id: 'defilement',
+                nom: 'Zone défilante',
+                resume: '⚠️ Porte min-height: 0 ET min-width: 0. Sans les deux, un enfant flex refuse de rétrécir sous son contenu : la zone déborde et c’est la PAGE qui part en défilement horizontal. La faute la plus fréquente de ce gabarit.',
+                code: `<Scroll habillee>…</Scroll>`,
+                rendu: (_jsx(Scroll, { habillee: true, style: { height: 90, border: '1px solid var(--line)', padding: 10 }, children: _jsx(Body, { taille: "dense", children: "L\u2019habillage de barre est OPT-IN : sur macOS et iOS, habiller la barre la rend permanente et elle mange une colonne. Par d\u00E9faut, la barre native du syst\u00E8me est conserv\u00E9e." }) })),
+            },
+        ],
+    },
+    {
+        id: 'enrobages',
+        nom: 'Enrobages',
+        couche: 'commun',
+        css: 'overlays.css',
+        resume: "Le seul module marqué « use client ». Tout ce qui vit ici vole le regard à la page : il faut Échap, un piège de focus et un verrou de défilement — rien de cela ne s'écrit en CSS. Le hook « useOverlay » est exporté pour les enrobages maison.",
+        exemples: [
+            {
+                id: 'tiroir',
+                nom: 'Tiroir',
+                resume: '⚠️ Le tiroir n’existe QUE sous le point de rupture : au-dessus, la navigation est une colonne et il n’y a rien à ouvrir. Réduis la fenêtre pour le voir.',
+                code: `<Drawer ouvert={ouvert} onClose={() => setOuvert(false)}
+        fermeture={<ChromeButton aria-label="Fermer" onClick={…}>×</ChromeButton>}>
+  <Sidebar>…</Sidebar>
+</Drawer>`,
+                rendu: _jsx(DemoDrawer, {}),
+            },
+            {
+                id: 'modale',
+                nom: 'Modale',
+                resume: 'Fermée, elle n’est pas rendue du tout : son contenu — un formulaire, le plus souvent — ne doit pas rester dans le DOM à l’état fantôme. « danger » met l’avertissement dans le filet HAUT, pas dans un fond rouge qui rendrait le texte pénible à lire.',
+                code: `<Modal ouvert={ouvert} onClose={…} titre="Supprimer" danger
+       pied={<ButtonRow>…</ButtonRow>}>
+  …
+</Modal>`,
+                rendu: _jsx(DemoModal, {}),
+            },
+            {
+                id: 'toast',
+                nom: 'Notification',
+                resume: '⚠️ Ne remplace PAS « Alert » : une erreur de formulaire se dit à côté du champ, jamais dans un coin qui disparaît. Réserver à ce qui est vrai APRÈS COUP — « copié », « enregistré », « envoyé ».',
+                code: `<Toasts>
+  <Toast ton="ok">Lien copié.</Toast>
+</Toasts>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 8 }, children: [_jsx(Toast, { ton: "ok", children: "Lien copi\u00E9 dans le presse-papiers." }), _jsx(Toast, { children: "Brouillon enregistr\u00E9." }), _jsx(Toast, { ton: "err", children: "L\u2019envoi a \u00E9chou\u00E9. R\u00E9essayez." })] })),
+            },
+        ],
+    },
+    {
+        id: 'icones',
+        nom: 'Icônes',
+        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.",
+        exemples: [
+            {
+                id: 'jeu',
+                nom: 'Le jeu complet',
+                resume: 'Sans « titre », l’icône est DÉCORATIVE et masquée aux lecteurs d’écran — le bon défaut : accolée à un libellé qui la répète, elle crée une annonce double.',
+                code: `<Icon nom="recherche" />
+<Icon nom="document" taille="lg" />
+<Icon nom="alerte" titre="Alerte" />`,
+                rendu: (_jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 14 }, children: ICONES.map((id) => (_jsxs("span", { title: NOMS_ICONES[id], style: { display: 'grid', gap: 4, justifyItems: 'center', width: 64 }, children: [_jsx(Icon, { nom: id, taille: "lg" }), _jsx("span", { className: "zv-meta zv-meta--sm zv-trunc", style: { maxWidth: 64 }, children: id })] }, id))) })),
+            },
+            {
+                id: 'tailles',
+                nom: 'Tailles',
+                resume: 'Le trait s’épaissit optiquement quand l’icône rétrécit : « sm » et « xl » le compensent. Une rangée de tailles mêlées sans cette compensation paraît déséquilibrée.',
+                code: `<Icon nom="document" taille="sm" />  <Icon nom="document" />
+<Icon nom="document" taille="lg" />  <Icon nom="document" taille="xl" />`,
+                rendu: (_jsxs("div", { style: { display: 'flex', gap: 14, alignItems: 'center' }, children: [_jsx(Icon, { nom: ICONES[0], taille: "sm" }), _jsx(Icon, { nom: ICONES[0] }), _jsx(Icon, { nom: ICONES[0], taille: "lg" }), _jsx(Icon, { nom: ICONES[0], taille: "xl" }), _jsx(Icon, { nom: ICONES[0], taille: "lg", discret: true })] })),
+            },
+        ],
+    },
+    {
+        id: 'mise-en-page',
+        nom: 'Mise en page',
+        couche: 'vitrine',
+        css: 'layout.css',
+        resume: "Gouttières, grille 12, sections, frise d'étapes, pieds de page. Une application n'a aucune raison de charger ce module. Les cinq étages d'empilement y sont nommés une fois pour toutes : un z-index écrit à la main finit toujours par passer devant ce qu'il ne fallait pas.",
+        exemples: [
+            {
+                id: 'gouttiere',
+                nom: 'Gouttière',
+                resume: 'La largeur de colonne du système. Toute la vitrine s’aligne dessus : un bloc qui pose sa propre largeur maximale se décale de tous les autres.',
+                code: `<Page>
+  <Gutter>…</Gutter>
+  <Gutter variante="wide">…</Gutter>
+  <Gutter variante="chrome"><Nav>…</Nav></Gutter>
+</Page>`,
+                rendu: (_jsx(Gutter, { style: { border: '1px dashed var(--accent-line)', padding: 12 }, children: _jsx(Body, { taille: "dense", children: "Contenu align\u00E9 sur la colonne du syst\u00E8me." }) })),
+            },
+            {
+                id: 'grille',
+                nom: 'Grilles',
+                resume: '⚠️ Seules les portées 3, 4, 6, 8 et 9 existent : ce sont les découpes employées par la vitrine. En ajouter une revient à ajouter une mise en page — c’est une décision de DA, pas une utilité.',
+                code: `<Grid12>
+  <Col span={8}>…</Col>
+  <Col span={4}>…</Col>
+</Grid12>
+
+<Grid colonnes={3}>…</Grid>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsxs(Grid12, { children: [_jsx(Col, { span: 8, children: _jsx(Card, { children: _jsx(Body, { taille: "dense", children: "span 8" }) }) }), _jsx(Col, { span: 4, children: _jsx(Card, { children: _jsx(Body, { taille: "dense", children: "span 4" }) }) })] }), _jsx(Grid, { colonnes: 3, children: ['Indexer', 'Interroger', 'Vérifier'].map((t) => (_jsx(Card, { children: _jsx(Body, { taille: "dense", children: t }) }, t))) })] })),
+            },
+            {
+                id: 'sections',
+                nom: 'Sections',
+                resume: 'Le bloc « aside » tombe SOUS le titre en dessous du point de rupture — c’est le CSS qui le fait, pas une condition de rendu.',
+                code: `<SectionHead aside={<LinkArrow href="/methode">Tout voir</LinkArrow>}>
+  <Kicker>Méthode</Kicker>
+  <H2>Trois étapes, rien de plus</H2>
+</SectionHead>
+<SectionRule />`,
+                rendu: (_jsxs("div", { children: [_jsxs(SectionHead, { aside: _jsx(LinkArrow, { href: "#", children: "Tout voir" }), children: [_jsx(Kicker, { children: "M\u00E9thode" }), _jsx(Heading, { taille: "h2-sm", children: "Trois \u00E9tapes, rien de plus" })] }), _jsx(SectionRule, {})] })),
+            },
+            {
+                id: 'sheet-section',
+                nom: 'Section de document',
+                resume: 'Un intitulé mono, un filet, du corps — pour un document long.',
+                code: `<SheetSection titre="ENGAGEMENTS">…</SheetSection>`,
+                rendu: (_jsx(SheetSection, { titre: "ENGAGEMENTS", children: _jsx(Body, { taille: "dense", children: "Les donn\u00E9es restent h\u00E9berg\u00E9es en France et ne sont jamais vers\u00E9es \u00E0 un entra\u00EEnement." }) })),
+            },
+            {
+                id: 'nav-vitrine',
+                nom: 'Navigation vitrine',
+                resume: '⚠️ « NavLink » est la navigation de VITRINE ; l’entrée applicative s’appelle « SideLink ». Les deux ne doivent jamais se recouvrir. La rangée disparaît sous le point de rupture, remplacée par le burger.',
+                code: `<Nav>
+  <NavLogo>…</NavLogo>
+  <NavLinks>
+    <NavLink href="/produit">Produit</NavLink>
+    <NavLink href="/connexion" discret>Se connecter</NavLink>
+  </NavLinks>
+  <NavBurger aria-label="Ouvrir le menu">…</NavBurger>
+</Nav>`,
+                rendu: (_jsxs(Nav, { style: { border: '1px solid var(--hairline)', padding: '0 12px' }, children: [_jsx(NavLogo, { children: _jsx(Mono, { ton: "ink", children: "ZEVRA" }) }), _jsxs(NavLinks, { children: [_jsx(NavLink, { href: "#", children: "Produit" }), _jsx(NavLink, { href: "#", children: "M\u00E9thode" }), _jsx(NavLink, { href: "#", discret: true, children: "Se connecter" })] })] })),
+            },
+            {
+                id: 'etapes',
+                nom: 'Frise d’étapes',
+                resume: 'Le point de méthode est le TROISIÈME et dernier emploi autorisé du spectre (avec le filet de kicker et la barre de progression). Jamais en fond, jamais en texte.',
+                code: `<Steps avancement={0.66}>
+  <Step>Indexer</Step>
+  <Step teinte="violet">Interroger</Step>
+  <Step teinte="cyan">Vérifier</Step>
+</Steps>`,
+                rendu: (_jsxs(Steps, { avancement: 0.66, children: [_jsx(Step, { children: _jsx(Body, { taille: "dense", children: "Indexer" }) }), _jsx(Step, { teinte: "violet", children: _jsx(Body, { taille: "dense", children: "Interroger" }) }), _jsx(Step, { teinte: "cyan", children: _jsx(Body, { taille: "dense", children: "V\u00E9rifier" }) })] })),
+            },
+            {
+                id: 'stats-page',
+                nom: 'Ligne de statistiques',
+                resume: 'La rangée de chiffres d’une page vitrine, sous un hero ou dans une bande.',
+                code: `<Stats>
+  <Stat valeur="4 812">documents indexés</Stat>
+  <Stat valeur="1,2 s">latence médiane</Stat>
+</Stats>`,
+                rendu: (_jsxs(Stats, { children: [_jsx(Stat, { valeur: "4 812", children: "documents index\u00E9s" }), _jsx(Stat, { valeur: "1,2 s", children: "latence m\u00E9diane" }), _jsx(Stat, { valeur: "100 %", children: "r\u00E9ponses sourc\u00E9es" })] })),
+            },
+            {
+                id: 'hero-cta',
+                nom: 'Blocs centrés',
+                resume: 'Le hero d’ouverture et le bloc d’appel à l’action de fin de page.',
+                code: `<Hero><Kicker>…</Kicker><H1>…</H1><Lead>…</Lead></Hero>
+<CTA><Heading taille="h2-cta">…</Heading><Button>…</Button></CTA>`,
+                rendu: (_jsxs(CTA, { style: { padding: '24px 0' }, children: [_jsx(Heading2Cta, {}), _jsx(ButtonRow, { children: _jsx(Button, { children: "Demander une d\u00E9monstration" }) })] })),
+            },
+            {
+                id: 'pieds',
+                nom: 'Pieds de page',
+                resume: '⚠️ « ProofBar » ne cite que de VRAIS clients : un nom inventé dans une bande de preuve sociale est un faux, pas un placeholder.',
+                code: `<Footer marque={<><Mono ton="ink">ZEVRA</Mono><Tagline>…</Tagline></>}>
+  …
+</Footer>
+<FooterMini logo={<Mono ton="ink">ZEVRA</Mono>}>© 2026</FooterMini>`,
+                rendu: (_jsx(FooterMini, { logo: _jsx(Mono, { ton: "ink", children: "ZEVRA" }), children: _jsx(Note, { children: "\u00A9 2026 Zevra \u00B7 H\u00E9berg\u00E9 en France" }) })),
+            },
+            {
+                id: 'visibilite',
+                nom: 'Visibilité',
+                resume: '⚠️ Rendu par le CSS, PAS par JavaScript : le serveur ne connaît pas la largeur de l’écran, et conditionner le rendu produit un décalage d’hydratation. Les deux nœuds sont posés, le CSS en masque un.',
+                code: `<OnlyDesktop><NavLinks>…</NavLinks></OnlyDesktop>
+<OnlyMobile><NavBurger aria-label="Menu">…</NavBurger></OnlyMobile>`,
+                rendu: (_jsxs("div", { style: { display: 'flex', gap: 10 }, children: [_jsx("span", { className: "zv-only-desktop", children: _jsx(Badge, { ton: "accent", children: "VISIBLE \u2265 768" }) }), _jsx("span", { className: "zv-only-mobile", children: _jsx(Badge, { ton: "accent", children: "VISIBLE < 768" }) })] })),
+            },
+        ],
+    },
+    {
+        id: 'surfaces',
+        nom: 'Surfaces',
+        couche: 'vitrine',
+        css: 'surfaces.css + motion.css',
+        resume: "Ce qui distingue une page Zevra d'une page blanche bien composée. ⚠️ Tout y est DÉCORATIF : posé en absolu derrière le contenu, sans capter le pointeur, masqué aux lecteurs d'écran — et suppose un parent « position: relative; overflow: hidden ».",
+        exemples: [
+            {
+                id: 'bande',
+                nom: 'Bande manifeste',
+                resume: '⚠️ LA surface sombre du système. Les surfaces sombres se font avec elle et --accent-on-dark, JAMAIS en inversant les neutres : les contrastes ont été réglés dans ce sens-là et pas dans l’autre.',
+                code: `<Band lueur filigrane={<Glyph variante="watermark">…</Glyph>}>
+  <Kicker surSombre>Souveraineté</Kicker>
+  <H2>Vos pièces ne quittent pas la France.</H2>
+</Band>`,
+                surSombre: true,
+                rendu: (_jsxs(Band, { lueur: true, children: [_jsx(Kicker, { surSombre: true, children: "Souverainet\u00E9" }), _jsx(Heading, { taille: "h2-sm", children: "Vos pi\u00E8ces ne quittent pas la France." }), _jsx(Body, { children: "Infrastructure d\u00E9di\u00E9e, chiffrement au repos, aucun transfert hors Union europ\u00E9enne." }), _jsxs("div", { style: { display: 'flex', gap: 8, marginTop: 12 }, children: [_jsx(Tag, { surSombre: true, etat: "ok", children: "CHIFFR\u00C9" }), _jsx(Tag, { surSombre: true, children: "OVHCLOUD \u00B7 GRA" })] })] })),
+            },
+            {
+                id: 'panneau-navy',
+                nom: 'Panneau sombre',
+                resume: 'Plus petit qu’une bande : une carte, un encart. « TextOnDark » repeint un texte isolé — « Band » le fait déjà pour son contenu courant, l’ajouter dedans ne sert à rien.',
+                code: `<PanelNavy><TextOnDark>…</TextOnDark></PanelNavy>`,
+                surSombre: true,
+                rendu: (_jsx(PanelNavy, { children: _jsxs(TextOnDark, { children: [_jsx(Mono, { ton: "on-dark", children: "CHIFFREMENT" }), _jsx(Body, { children: "AES-256 au repos, TLS 1.3 en transit." })] }) })),
+            },
+            {
+                id: 'halo',
+                nom: 'Halo, sol, voile',
+                resume: 'Le violet et le cyan du spectre, très dilués. Ce n’est PAS un emploi du spectre en aplat : c’est une lumière — elle ne compte pas dans les trois emplois autorisés.',
+                code: `<section style={{ position: 'relative', overflow: 'hidden' }}>
+  <Halo place="hero" />
+  <GridFloor />
+  <Fade blanc />
+  …
+</section>`,
+                rendu: (_jsxs("div", { style: {
+                        position: 'relative',
+                        overflow: 'hidden',
+                        height: 150,
+                        display: 'grid',
+                        placeItems: 'center',
+                    }, children: [_jsx(Halo, { place: "core" }), _jsx(GridFloor, { carte: true }), _jsx(Fade, { blanc: true }), _jsx(Mono, { ton: "label", style: { position: 'relative' }, children: "HALO \u00B7 SOL \u00B7 VOILE" })] })),
+            },
+            {
+                id: 'glyphe',
+                nom: 'Glyphe',
+                resume: 'Enveloppe d’un logo produit posé comme motif. Le glyphe lui-même est une image du paquet (@zevra/ui/logos/…), pas un tracé du CSS.',
+                code: `<Glyph variante="deep"><img src="…/logos/memoire-glyph-orig.png" alt="" /></Glyph>`,
+                rendu: (_jsx(Glyph, { children: _jsx(Icon, { nom: ICONES[0], taille: "xl" }) })),
+            },
+            {
+                id: 'mouvement',
+                nom: 'Mouvement',
+                resume: '⚠️ Les neuf animations sont pilotées AU DÉFILEMENT et réservées à la vitrine : le chrome applicatif n’anime rien. « prefers-reduced-motion » les coupe toutes, globalement, depuis base.css.',
+                code: `<div className={anim('rise')}>…</div>
+<div className={anim('pop', 3)}>…</div>
+<div className={anim('converge', 'tr')}>…</div>`,
+                rendu: (_jsx("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap' }, children: ['rise', 'pop', 'filet', 'glyph-in', 'converge', 'breathe', 'drift', 'dot-active', 'progress'].map((nom) => (_jsx("span", { className: anim(nom), children: _jsx(Chip, { variante: "mono", children: nom }) }, nom))) })),
+            },
+        ],
+    },
+];
+function Heading2Cta() {
+    return _jsx(Heading, { taille: "h2-cta", children: "Voir Zevra sur vos propres pi\u00E8ces." });
+}
+/** Tous les exemples à plat — pratique pour une recherche ou un test. */
+export const EXEMPLES = CATALOGUE.flatMap((g) => g.exemples.map((e) => ({ ...e, groupe: g.id })));
+//# sourceMappingURL=catalogue.js.map