@zevra/ui 0.37.0 → 0.38.1

package/dist/css-inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW,gyzRAAgyzR,CAAA;AAEn0zR;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,y3BAAy3B,CAAA"}
+{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW,wl1RAAwl1R,CAAA;AAE3n1R;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,y3BAAy3B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.37.0",
+  "version": "0.38.1",
   "description": "Design system Zevra « Encre & Papier » : tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,

package/react/catalogue.tsx

@@ -19,7 +19,7 @@ import { Button, ButtonLink, ButtonRow, LinkArrow } from './actions.js'
 import {
   Callout, Card, Check, Divider, Ent, EntText, Faq, FaqItem, Flow, FlowStep,
   LegalPage,
-  Glass, IndexItem, IndexList, Inset, Media, MediaCoin, MediaVoile, MiniStat,
+  Glass, IndexItem, IndexList, Inset, Media, MediaCoin, MediaImg, MediaVoile, MiniStat,
   MiniStatItem, PageErreur, Pill, Price,
   Quote, Rows, RowsItem, Src, SrcRow, StatCard, Tag, UiPreview,
 } from './content.js'
@@ -53,7 +53,7 @@ import {
 import {
   ChromeButton, CitePanel, Crumbs, Menu, MenuItem, Pager, PagerArrow,
   PagerRank, PagerStep, Popover, Scroll, SideGroup, SideLink, Sidebar,
-  SidebarFoot, SidebarHead, Tabs, Topbar, TopbarTitle,
+  SidebarFoot, SidebarHead, Tabs, Topbar, TopbarBurger, TopbarLogo, TopbarTitle,
 } from './navigation.js'
 import { Drawer, Modal, Toast, Toasts } from './overlays.js'
 import { SelectMenu } from './select-menu.js'
@@ -1647,11 +1647,19 @@ export const CATALOGUE: GroupeCatalogue[] = [
           '⚠️ 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>
+  <TopbarLogo><img src={GLYPHES.zevra} alt="" /></TopbarLogo>
   <TopbarTitle>Bibliothèque</TopbarTitle>
 </Topbar>`,
+        // ⚠️ Le burger et le logo sont MONTÉS, pas seulement cités dans le
+        // code : un composant absent du rendu n'a aucune carte dans le kit
+        // Claude Design, et l'agent qui code avec le paquet n'en voit jamais
+        // le visuel. Relevé par la synchro du 02/09.
         rendu: (
           <Topbar style={{ display: 'flex', position: 'static' }}>
+            <TopbarBurger aria-label="Ouvrir la navigation">☰</TopbarBurger>
+            <TopbarLogo>
+              <img src={GLYPHES.zevra} alt="" style={{ width: 22, height: 22 }} />
+            </TopbarLogo>
             <TopbarTitle>Bibliothèque</TopbarTitle>
           </Topbar>
         ),
@@ -2397,13 +2405,20 @@ export const CATALOGUE: GroupeCatalogue[] = [
 <Media ratio="1-1" contient>
   <MediaImg src={logo} alt="Zevra" />
 </Media>`,
+        // ⚠️ MediaImg est MONTÉ, pas seulement cité : sans lui le cadre est
+        // vide et le composant n'a aucune carte dans le kit Claude Design.
+        // Le glyphe du paquet sert d'image : il est inliné en data-URI, donc
+        // il se résout partout, y compris dans un canvas hors du dépôt.
         rendu: (
           <div style={{ display: 'grid', gap: 12, gridTemplateColumns: '2fr 1fr', maxWidth: 460 }}>
             <Media ratio="16-9">
+              <MediaImg src={GLYPHES.memoire} alt="" />
               <MediaVoile />
               <MediaCoin>12:04</MediaCoin>
             </Media>
-            <Media ratio="1-1" contient />
+            <Media ratio="1-1" contient>
+              <MediaImg src={GLYPHES.zevra} alt="Zevra" />
+            </Media>
           </div>
         ),
       },