@tekkare/romulus 0.1.50 → 0.1.52

package/dist/runtime/components/Modal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { PhX } from '@phosphor-icons/vue'
+import { useRmDialog } from '../composables/useRmDialog'
 
 export interface RmModalProps {
   /** Whether the modal is open */
@@ -9,11 +10,23 @@ export interface RmModalProps {
   size?: 'sm' | 'md' | 'lg' | 'xl'
   /** Mode: fixed (size is fixed) or free (adapts to content) */
   mode?: 'fixed' | 'free'
+  /**
+   * Nom accessible de la modale. A renseigner des que l'en-tete est purement
+   * visuel : sans lui un lecteur d'ecran annonce « dialogue » sans dire lequel.
+   */
+  label?: string
+  /** Id de l'element qui porte le titre visible, quand l'en-tete en a un. */
+  labelledBy?: string
+  /** Libelle du bouton de fermeture, pour les lecteurs d'ecran. */
+  closeLabel?: string
 }
 
 const props = withDefaults(defineProps<RmModalProps>(), {
   size: 'md',
   mode: 'fixed',
+  label: undefined,
+  labelledBy: undefined,
+  closeLabel: 'Fermer',
 })
 
 const emit = defineEmits<{
@@ -24,6 +37,9 @@ function close() {
   emit('update:modelValue', false)
 }
 
+const surface = ref<HTMLElement | null>(null)
+useRmDialog({ open: toRef(props, 'modelValue'), surface, close })
+
 const sizeMap: Record<string, { width: string; height: string }> = {
   sm: { width: '480px', height: '360px' },
   md: { width: '640px', height: '500px' },
@@ -48,12 +64,21 @@ const modalStyle = computed(() => {
         class="rm-modal-overlay"
         @click.self="close"
       >
-        <div class="rm-modal" :style="modalStyle">
+        <div
+          ref="surface"
+          class="rm-modal"
+          :style="modalStyle"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="labelledBy ? undefined : label"
+          :aria-labelledby="labelledBy"
+          tabindex="-1"
+        >
           <div class="rm-modal__header">
             <div class="rm-modal__header-content">
               <slot name="header" />
             </div>
-            <button class="rm-modal__close" @click="close">
+            <button class="rm-modal__close" type="button" :aria-label="closeLabel" @click="close">
               <PhX :size="20" />
             </button>
           </div>
@@ -76,5 +101,5 @@ const modalStyle = computed(() => {
 </template>
 
 <style scoped>
-.rm-modal-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(0,0,0,.4);display:flex;inset:0;justify-content:center;position:fixed;z-index:100}.rm-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:90vh;max-width:95vw}.rm-modal__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;padding:20px 24px 0}.rm-modal__header-content{flex:1;min-width:0}.rm-modal__close{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-400);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--r-transition-fast);width:32px}.rm-modal__close:hover{background:var(--r-color-gray-50);color:var(--r-color-gray-700)}.rm-modal__tabs{padding:0}.rm-modal__body{flex:1;overflow-y:auto;padding:24px}.rm-modal__footer{border-top:1px solid var(--r-color-gray-200);padding:16px 24px}.rm-modal-enter-active,.rm-modal-leave-active{transition:opacity .2s ease}.rm-modal-enter-active .rm-modal,.rm-modal-leave-active .rm-modal{transition:transform .2s ease}.rm-modal-enter-from,.rm-modal-leave-to{opacity:0}.rm-modal-enter-from .rm-modal,.rm-modal-leave-to .rm-modal{transform:scale(.95)}
+.rm-modal-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(0,0,0,.4);display:flex;inset:0;justify-content:center;position:fixed;z-index:100}.rm-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:90vh;max-width:95vw}.rm-modal__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;padding:20px 24px 0}.rm-modal__header-content{flex:1;min-width:0}.rm-modal__close{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-400);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--r-transition-fast);width:32px}.rm-modal__close:hover{background:var(--r-color-gray-50);color:var(--r-color-gray-700)}.rm-modal__tabs{padding:0}.rm-modal__body{flex:1;overflow-y:auto;padding:24px}.rm-modal__footer{border-top:1px solid var(--r-color-gray-200);padding:16px 24px}.rm-modal-enter-active,.rm-modal-leave-active{transition:opacity .2s ease}.rm-modal-enter-active .rm-modal,.rm-modal-leave-active .rm-modal{transition:transform .2s ease}.rm-modal-enter-from,.rm-modal-leave-to{opacity:0}.rm-modal-enter-from .rm-modal,.rm-modal-leave-to .rm-modal{transform:scale(.95)}.rm-modal-leave-active,.rm-modal-leave-to{pointer-events:none}
 </style>

package/dist/runtime/components/ResultCard.vue

@@ -30,6 +30,8 @@
     .rm-rcard__desc   description 14px, gris
 -->
 <script setup lang="ts">
+import type { RmExportSheet } from '../utils/export'
+
 withDefaults(
   defineProps<{
     /** Le chiffre du compteur. Sans valeur, la colonne de gauche est omise. */
@@ -42,8 +44,38 @@ withDefaults(
     moreLabel?: string
     /** Curseur main et surbrillance au survol : la carte est un lien. */
     clickable?: boolean
+    /**
+     * Menu d'actions en haut a droite (exporter, partager). Les items visuels
+     * (PNG, SVG, plein ecran) n'y sont pas : une carte de resultat ne dessine
+     * rien, elle decrit une ligne.
+     */
+    actions?: boolean
+    /**
+     * Lien copie par « Copier le lien direct ». Pour une carte de resultat,
+     * c'est l'adresse de la FICHE, pas celle de la liste : on partage un
+     * produit, pas une recherche. A defaut, l'URL courante.
+     */
+    link?: string
+    /** Langue du menu d'actions. Le contenu projete garde la sienne. */
+    lang?: 'fr' | 'en'
+    /**
+     * Onglets d'export fournis par la page, quand elle a mieux que le rendu de
+     * la carte (les cinq avis derriere le compteur). A defaut, les champs lus
+     * dans la carte.
+     */
+    sheets?: RmExportSheet[]
   }>(),
-  { count: null, countLabel: '', countExtra: '', moreLabel: '', clickable: false },
+  {
+    count: null,
+    countLabel: '',
+    countExtra: '',
+    moreLabel: '',
+    clickable: false,
+    actions: true,
+    link: undefined,
+    lang: 'fr',
+    sheets: undefined,
+  },
 )
 </script>
 
@@ -54,7 +86,16 @@ withDefaults(
         <h3 class="rm-rcard__title"><slot name="title" /></h3>
         <div v-if="$slots.subtitle" class="rm-rcard__subtitle"><slot name="subtitle" /></div>
       </div>
-      <div v-if="$slots.actions" class="rm-rcard__actions"><slot name="actions" /></div>
+      <div v-if="actions || $slots.actions" class="rm-rcard__actions">
+        <slot name="actions" />
+        <RmCardActions
+          v-if="actions"
+          :lang="lang"
+          :link="link"
+          :sheets="sheets"
+          :visual="false"
+        />
+      </div>
     </div>
 
     <div class="rm-rcard__body">
@@ -76,5 +117,5 @@ withDefaults(
 </template>
 
 <style scoped>
-.rm-rcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);color:var(--text-primary);display:block;font-family:var(--font-sans);overflow:hidden;transition:border-color var(--duration-fast) linear,box-shadow var(--duration-fast) linear;width:100%}.rm-rcard--clickable{cursor:pointer}.rm-rcard--clickable:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border-default));box-shadow:var(--shadow-md)}.rm-rcard__head{align-items:flex-start;display:flex;gap:16px;padding:20px 24px 0}.rm-rcard__identity{flex:1 1 auto;min-width:0}.rm-rcard__title{font-size:var(--font-18);font-weight:800;letter-spacing:.01em;margin:0}.rm-rcard__subtitle{color:var(--text-muted);font-size:var(--font-14);margin-top:4px;overflow-wrap:anywhere}.rm-rcard__actions{flex:0 0 auto}.rm-rcard__body{align-items:stretch;display:flex;gap:24px;padding:16px 24px 20px}.rm-rcard__count{align-items:center;border-right:1px solid var(--border-default);display:flex;flex:0 0 128px;flex-direction:column;gap:2px;justify-content:center;padding-right:24px;text-align:center}.rm-rcard__count-value{color:var(--color-primary);font-size:var(--font-32);font-weight:var(--weight-bold);line-height:1.1;margin:0}.rm-rcard__count-label{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-semibold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-rcard__count-extra{color:var(--color-primary);font-size:var(--font-13);line-height:1.3;margin:6px 0 0}.rm-rcard__main{display:flex;flex:1 1 auto;flex-direction:column;gap:6px;min-width:0}.rm-rcard__meta{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.rm-rcard__more{color:var(--color-primary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:4px 0 0}.rm-rcard__footer{background:var(--bg-surface-2);border-top:1px solid var(--border-default);font-size:var(--font-13);padding:12px 24px}.rm-rcard :deep(.rm-rcard__label){align-items:center;color:var(--text-secondary);display:inline-flex;font-size:var(--font-12);font-weight:var(--weight-bold);gap:4px;letter-spacing:.06em;text-transform:uppercase}.rm-rcard :deep(.rm-rcard__ref){background:var(--bg-surface-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:Courier New,monospace;font-size:var(--font-12);padding:2px 8px}.rm-rcard :deep(.rm-rcard__lead){font-size:15px;font-weight:var(--weight-bold);margin:0}.rm-rcard :deep(.rm-rcard__text){font-size:15px;margin:0}.rm-rcard :deep(.rm-rcard__desc){color:var(--text-secondary);font-size:var(--font-14);line-height:1.5;margin:0}.rm-rcard :deep(.rm-rcard__clamp){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.rm-rcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);color:var(--text-primary);display:block;font-family:var(--font-sans);overflow:hidden;transition:border-color var(--duration-fast) linear,box-shadow var(--duration-fast) linear;width:100%}.rm-rcard--clickable{cursor:pointer}.rm-rcard--clickable:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border-default));box-shadow:var(--shadow-md)}.rm-rcard__head{align-items:flex-start;display:flex;gap:16px;padding:20px 24px 0}.rm-rcard__identity{flex:1 1 auto;min-width:0}.rm-rcard__title{font-size:var(--font-18);font-weight:800;letter-spacing:.01em;margin:0}.rm-rcard__subtitle{color:var(--text-muted);font-size:var(--font-14);margin-top:4px;overflow-wrap:anywhere}.rm-rcard__actions{align-items:center;display:flex;flex:0 0 auto;gap:8px}.rm-rcard__body{align-items:stretch;display:flex;gap:24px;padding:16px 24px 20px}.rm-rcard__count{align-items:center;border-right:1px solid var(--border-default);display:flex;flex:0 0 128px;flex-direction:column;gap:2px;justify-content:center;padding-right:24px;text-align:center}.rm-rcard__count-value{color:var(--color-primary);font-size:var(--font-32);font-weight:var(--weight-bold);line-height:1.1;margin:0}.rm-rcard__count-label{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-semibold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-rcard__count-extra{color:var(--color-primary);font-size:var(--font-13);line-height:1.3;margin:6px 0 0}.rm-rcard__main{display:flex;flex:1 1 auto;flex-direction:column;gap:6px;min-width:0}.rm-rcard__meta{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.rm-rcard__more{color:var(--color-primary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:4px 0 0}.rm-rcard__footer{background:var(--bg-surface-2);border-top:1px solid var(--border-default);font-size:var(--font-13);padding:12px 24px}.rm-rcard :deep(.rm-rcard__label){align-items:center;color:var(--text-secondary);display:inline-flex;font-size:var(--font-12);font-weight:var(--weight-bold);gap:4px;letter-spacing:.06em;text-transform:uppercase}.rm-rcard :deep(.rm-rcard__ref){background:var(--bg-surface-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:Courier New,monospace;font-size:var(--font-12);padding:2px 8px}.rm-rcard :deep(.rm-rcard__lead){font-size:15px;font-weight:var(--weight-bold);margin:0}.rm-rcard :deep(.rm-rcard__text){font-size:15px;margin:0}.rm-rcard :deep(.rm-rcard__desc){color:var(--text-secondary);font-size:var(--font-14);line-height:1.5;margin:0}.rm-rcard :deep(.rm-rcard__clamp){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 </style>

package/dist/runtime/components/SidebarLeft.vue

@@ -8,7 +8,8 @@
   avec une boite d'icone de 22px.
 
   Un ecart assume avec oip7 : le libelle de section est un bouton, et les
-  groupes forment un accordeon exclusif. La barre du portail liste dix entrees,
+  groupes forment un accordeon exclusif — barre depliee seulement, puisque
+  replie il n'y a plus de libelle a plier. La barre du portail liste dix entrees,
   celle d'une app metier en liste vingt et plus ; toutes deployees, la
   navigation devient un long defilement. Le style du libelle, lui, ne change
   pas. Un groupe sans `label` reste toujours ouvert, comme le premier groupe
@@ -121,7 +122,21 @@ watch(() => sectionOf(props.activePath), (key) => {
 })
 
 const isCollapsible = (s: RmNavSection) => !!s.label && s.collapsible !== false
-const isOpen = (s: RmNavSection) => !isCollapsible(s) || openSection.value === s.key
+
+/**
+ * Groupe deploye.
+ *
+ * Repliee, la barre n'a plus de libelle a plier : il cede la place au filet
+ * (cf. .rm-sb__rule dans le gabarit). L'accordeon continuait pourtant de
+ * fermer les autres groupes, dont les entrees quittaient le DOM : le rail ne
+ * montrait que le groupe de la page courante, quelques filets nus en dessous,
+ * et aucun moyen d'atteindre le reste de la navigation ni de le deplier. Tous
+ * les groupes sont donc ouverts en mode replie — ce que l'accordeon evite est
+ * un long defilement de groupes libelles, or une entree repliee ne fait
+ * qu'une pastille de 26px.
+ */
+const isOpen = (s: RmNavSection) =>
+  !isCollapsible(s) || props.collapsed || openSection.value === s.key
 const isActive = (item: RmNavItem) => item.active ?? (!!item.to && item.to === props.activePath)
 </script>
 
@@ -165,7 +180,10 @@ const isActive = (item: RmNavItem) => item.active ?? (!!item.to && item.to === p
       <div v-for="section in sections" :key="section.key" class="rm-sb__group">
         <template v-if="section.label">
           <!-- Replie, le libelle cede la place au filet d'oip7 : trois lettres
-               capitales dans un rail de 64px seraient illisibles. -->
+               capitales dans un rail de 64px seraient illisibles. Le groupe
+               reste ouvert (cf. isOpen) : sans libelle il n'y a rien a plier,
+               et le fermer rendait ses pages inatteignables. Chaque entree
+               porte son `title`, le survol donne le nom. -->
           <div v-if="collapsed" class="rm-sb__rule" aria-hidden="true" />
           <button
             v-else-if="isCollapsible(section)"

package/dist/runtime/components/TableCard.vue

@@ -8,15 +8,41 @@
   Slots : #header (titre, source, compte), default (le tableau et sa
   pagination).
 -->
+<script setup lang="ts">
+import type { RmExportSheet } from '../utils/export'
+
+withDefaults(
+  defineProps<{
+    /**
+     * Menu d'actions en haut a droite (exporter, partager). Les items visuels
+     * ne s'affichent que si la carte porte un graphe : un tableau seul n'a ni
+     * PNG ni plein ecran a offrir.
+     */
+    actions?: boolean
+    /** Lien copie par « Copier le lien direct ». A defaut, l'URL courante. */
+    link?: string
+    /** Langue du menu d'actions. Le contenu projete garde la sienne. */
+    lang?: 'fr' | 'en'
+    /**
+     * Onglets d'export fournis par la page, quand elle a mieux que le rendu :
+     * la donnee complete plutot que la page affichee du tableau.
+     */
+    sheets?: RmExportSheet[]
+  }>(),
+  { actions: true, link: undefined, lang: 'fr', sheets: undefined },
+)
+</script>
+
 <template>
   <section class="rm-table-card">
-    <div v-if="$slots.header" class="rm-table-card__header">
+    <div v-if="$slots.header || actions" class="rm-table-card__header">
       <slot name="header" />
+      <RmCardActions v-if="actions" :lang="lang" :link="link" :sheets="sheets" />
     </div>
     <slot />
   </section>
 </template>
 
 <style scoped>
-.rm-table-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xs);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);overflow:hidden;padding:0;width:100%}.rm-table-card__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;padding:24px}.rm-table-card__header :deep(.rm-table-card__title){font-size:var(--font-18);font-weight:800;margin:0}.rm-table-card__header :deep(.rm-table-card__caption){color:var(--text-secondary);font-size:var(--font-12);margin:0;white-space:nowrap}.rm-table-card :deep(.rm-table-wrapper){background:transparent;border:none;border-radius:0}.rm-table-card__header+:deep(.rm-table-wrapper){border-top:1px solid var(--border-default)}.rm-table-card>:deep(:not(.rm-table-wrapper):not(.rm-table-card__header)){padding:16px 24px}
+.rm-table-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xs);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);overflow:hidden;padding:0;width:100%}.rm-table-card__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;padding:24px}.rm-table-card__header>:deep(.rm-card-actions){margin-left:auto}.rm-table-card__header :deep(.rm-table-card__title){font-size:var(--font-18);font-weight:800;margin:0}.rm-table-card__header :deep(.rm-table-card__caption){color:var(--text-secondary);font-size:var(--font-12);margin:0;white-space:nowrap}.rm-table-card :deep(.rm-table-wrapper){background:transparent;border:none;border-radius:0}.rm-table-card__header+:deep(.rm-table-wrapper){border-top:1px solid var(--border-default)}.rm-table-card>:deep(:not(.rm-table-wrapper):not(.rm-table-card__header)){padding:16px 24px}
 </style>

package/dist/runtime/components/ViewPill.vue

@@ -139,7 +139,7 @@ onBeforeUnmount(() => {
       :aria-expanded="open"
       @click="open = !open"
     >
-      <RmIcon name="BookmarkSimple" weight="fill" :size="16" class="rm-vpill__icon" />
+      <RmIcon name="BookmarkSimple" :size="16" class="rm-vpill__icon" />
       <span class="rm-vpill__key">{{ t.key }}</span>
       <span class="rm-vpill__value">{{ label }}</span>
       <span v-if="dirty" class="rm-vpill__dot" :title="t.unsaved" aria-hidden="true" />
@@ -194,5 +194,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:var(--color-secondary);flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;flex-shrink:0;height:8px;width:8px}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:6px;position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:8px;padding:8px 12px}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:8px 12px 4px 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:8px;padding:8px 12px;text-align:left;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
+.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:currentColor;flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;flex-shrink:0;height:8px;width:8px}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:6px;position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:8px;padding:8px 12px}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:8px 12px 4px 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:8px;padding:8px 12px;text-align:left;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
 </style>

package/dist/runtime/composables/useChartTheme.d.ts

@@ -1,6 +1,6 @@
 export declare function useChartTheme(): {
     night: import("vue").Ref<boolean, boolean>;
-    cvd: import("vue").Ref<boolean, boolean>;
+    cvdSafe: import("vue").Ref<boolean, boolean>;
     theme: import("vue").ComputedRef<import("../utils/chart").RmChartTheme>;
     palette: import("vue").ComputedRef<import("../utils/chart").RmPalette>;
     decal: import("vue").ComputedRef<boolean>;

package/dist/runtime/composables/useChartTheme.js

@@ -1,15 +1,16 @@
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { rmChartTheme, rmPalette } from "../utils/chart.js";
-const CVD_CLASSES = ["cvd-deutera", "cvd-protan", "cvd-trita", "cvd-mono"];
 export function useChartTheme() {
   const night = ref(false);
-  const cvd = ref(false);
+  const cvdSafe = ref(false);
+  const decalOn = ref(false);
   let observer = null;
   function read() {
     if (typeof document === "undefined") return;
     const list = document.body.classList;
     night.value = list.contains("night");
-    cvd.value = CVD_CLASSES.some((c) => list.contains(c));
+    cvdSafe.value = list.contains("pal-cvd-safe");
+    decalOn.value = list.contains("chart-decal");
   }
   onMounted(() => {
     read();
@@ -21,7 +22,7 @@ export function useChartTheme() {
     observer = null;
   });
   const theme = computed(() => rmChartTheme(night.value));
-  const palette = computed(() => rmPalette(cvd.value ? "cvdSafe" : "default", night.value));
-  const decal = computed(() => cvd.value);
-  return { night, cvd, theme, palette, decal };
+  const palette = computed(() => rmPalette(cvdSafe.value ? "cvdSafe" : "default", night.value));
+  const decal = computed(() => decalOn.value || cvdSafe.value);
+  return { night, cvdSafe, theme, palette, decal };
 }

package/dist/runtime/composables/useRmCardActions.d.ts

@@ -0,0 +1,32 @@
+/**
+ * useRmCardActions - ce que fait le menu en haut a droite d'une carte.
+ *
+ * Le menu est le meme sur toutes les cartes du portail, donc son travail vit
+ * dans le paquet : deux apps ne peuvent pas sortir le PNG d'un graphique avec
+ * deux en-tetes differents, ni nommer leurs fichiers autrement. Les fichiers
+ * sont produits par les generateurs du panneau d'export (`useRmExport`), pas
+ * par une seconde chaine parallele : la carte n'est qu'un perimetre plus
+ * etroit que la page.
+ *
+ * La donnee, elle, est relue dans le DOM de la carte (`rmCardSheets`) faute
+ * d'une declaration de la page : c'est ce qui rend le menu utilisable sur les
+ * cartes deja ecrites, sans les rouvrir une par une.
+ */
+import type { RmExportSheet } from '../utils/export.js';
+/** Les actions qu'une carte propose. `link` copie, il ne telecharge pas. */
+export type RmCardAction = 'png' | 'svg' | 'csv' | 'xlsx' | 'link';
+export interface RmCardActionContext {
+    /** La carte visee. */
+    card: Element;
+    lang?: 'fr' | 'en';
+    /** Nom du fichier et de l'onglet. A defaut, le titre lu dans la carte. */
+    name?: string;
+    /** Lien copie par « Copier le lien direct ». A defaut, l'URL courante. */
+    link?: string;
+    /** Onglets fournis par la page, quand elle a mieux que le rendu a l'ecran. */
+    sheets?: RmExportSheet[];
+}
+export declare function useRmCardActions(): {
+    runCardAction: (action: RmCardAction, context: RmCardActionContext) => Promise<import("./useRmExport").RmExportResult>;
+    toggleCardFullscreen: (card: Element) => Promise<void>;
+};

package/dist/runtime/composables/useRmCardActions.js

@@ -0,0 +1,53 @@
+import { rmCardCharts, rmCardSheets, rmCardTitle } from "../utils/cardData.js";
+import { useRmExport } from "./useRmExport.js";
+const FILE_NAME_MAX = 60;
+function fileNameOf(label) {
+  const flat = label.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  if (!flat) return "export";
+  if (flat.length <= FILE_NAME_MAX) return flat;
+  const cut = flat.slice(0, FILE_NAME_MAX);
+  return cut.slice(0, cut.lastIndexOf("-") + 1 || FILE_NAME_MAX).replace(/-+$/, "");
+}
+function configOf(format, fileName) {
+  return {
+    format,
+    range: "all",
+    sections: ["table", "charts", "kpi", "sources"],
+    columns: [],
+    options: ["logo", "sources"],
+    fileName,
+    layout: "table",
+    schedule: "once",
+    frequency: "",
+    email: false
+  };
+}
+function absolute(link) {
+  if (!link) return void 0;
+  if (typeof window === "undefined") return link;
+  return new URL(link, window.location.href).href;
+}
+export function useRmCardActions() {
+  const { run } = useRmExport();
+  async function runCardAction(action, context) {
+    const { card, lang = "fr" } = context;
+    const title = context.name || rmCardTitle(card) || "Export";
+    const format = action === "link" ? "link" : action;
+    const sheets = action === "png" || action === "svg" ? [] : context.sheets?.length ? context.sheets : await rmCardSheets(card, title, lang);
+    return run(configOf(format, fileNameOf(title)), {
+      title,
+      sheets,
+      charts: rmCardCharts(card).map((el) => ({ title, el })),
+      permalink: absolute(context.link)
+    }, lang);
+  }
+  async function toggleCardFullscreen(card) {
+    if (typeof document === "undefined") return;
+    if (document.fullscreenElement) {
+      await document.exitFullscreen();
+      return;
+    }
+    await card.requestFullscreen?.();
+  }
+  return { runCardAction, toggleCardFullscreen };
+}

package/dist/runtime/composables/useRmDialog.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Comportement clavier commun aux surfaces bloquantes (modale, tiroir).
+ *
+ * La checklist d'accessibilite du design system demande trois choses d'une
+ * surface qui recouvre la page, et aucune ne s'obtient en CSS :
+ *
+ * 1. `Escape` la ferme. Sans ca, un utilisateur au clavier qui ouvre une
+ *    modale par erreur doit retrouver la croix a la souris.
+ * 2. Le focus entre dedans a l'ouverture et n'en sort plus au `Tab`. Sinon le
+ *    focus continue de parcourir la page derriere, invisible sous le voile :
+ *    l'utilisateur tabule dans le vide.
+ * 3. Le focus revient a l'element qui a ouvert la surface a la fermeture,
+ *    pour ne pas renvoyer au debut du document.
+ *
+ * `aria-modal="true"` dit aux lecteurs d'ecran d'ignorer le reste de la page ;
+ * il ne deplace pas le focus clavier, d'ou le piege ci-dessous.
+ */
+import { type Ref } from 'vue';
+export interface RmDialogOptions {
+    /** Surface ouverte. */
+    open: Ref<boolean>;
+    /** Racine de la surface, portee par un `ref` de template. */
+    surface: Ref<HTMLElement | null>;
+    /** Appele par `Escape`. */
+    close: () => void;
+}
+export declare function useRmDialog({ open, surface, close }: RmDialogOptions): void;

package/dist/runtime/composables/useRmDialog.js

@@ -0,0 +1,64 @@
+import { nextTick, onBeforeUnmount, watch } from "vue";
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function focusables(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement);
+}
+export function useRmDialog({ open, surface, close }) {
+  let opener = null;
+  function onKeydown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      close();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const root = surface.value;
+    if (!root) return;
+    const items = focusables(root);
+    if (!items.length) {
+      event.preventDefault();
+      root.focus();
+      return;
+    }
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey && (active === first || active === root)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+  function bind() {
+    document.addEventListener("keydown", onKeydown, true);
+  }
+  function unbind() {
+    document.removeEventListener("keydown", onKeydown, true);
+  }
+  watch(open, async (isOpen) => {
+    if (typeof document === "undefined") return;
+    if (isOpen) {
+      opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      bind();
+      await nextTick();
+      const root = surface.value;
+      if (!root) return;
+      const items = focusables(root);
+      (items[0] ?? root).focus();
+      return;
+    }
+    unbind();
+    if (opener?.isConnected) opener.focus();
+    opener = null;
+  });
+  onBeforeUnmount(unbind);
+}

package/dist/runtime/composables/useRmExport.js

@@ -87,8 +87,22 @@ async function raster(markup, width, height, scale = 2) {
   context.drawImage(image, 0, 0, canvas.width, canvas.height);
   return canvas;
 }
+const PRINTABLE_SUBSTITUTES = [
+  [/€/g, "EUR"],
+  [/[’‘]/g, "'"],
+  [/[“”]/g, '"'],
+  [/[–—]/g, "-"],
+  [/…/g, "..."],
+  [/≥/g, ">="],
+  [/≤/g, "<="],
+  [/[  ]/g, " "]
+];
 function printable(text) {
-  return text.replace(/[^\u0000-\u00ff]/g, "").replace(/\s{2,}/g, " ").trim();
+  const substituted = PRINTABLE_SUBSTITUTES.reduce(
+    (out, [pattern, replacement]) => out.replace(pattern, replacement),
+    text
+  );
+  return substituted.replace(/[^\u0000-\u00ff]/g, "").replace(/\s{2,}/g, " ").trim();
 }
 function cardsOf(payload, config, lang) {
   if (payload.cards?.length) return payload.cards.slice(0, payload.cardLimit ?? 100);
@@ -355,17 +369,16 @@ export function useRmExport() {
       doc.setTextColor(...ink);
       doc.setFont("helvetica", "bold");
       doc.setFontSize(10);
-      doc.text(lang === "en" ? "Active filters" : "Filtres actifs", margin, y);
+      doc.text(lang === "en" ? "Reading this view" : "Lecture de la vue", margin, y);
       y += 5;
       doc.setFont("helvetica", "normal");
       doc.setFontSize(9);
       doc.setTextColor(...grey);
-      payload.filters.forEach((filter) => {
-        const lines = doc.splitTextToSize(printable(`${filter.label} : ${filter.value}`), inner);
-        doc.text(lines, margin, y);
-        y += lines.length * 4.5;
-      });
-      y += 4;
+      const applied = payload.filters.map((filter) => `${filter.label} = ${filter.value}`).join(" ; ");
+      const legend = lang === "en" ? `This report reproduces the page as it was displayed, with the following filters: ${applied}.` : `Ce rapport reprend la page telle qu'elle \xE9tait affich\xE9e, avec les filtres suivants : ${applied}.`;
+      const lines = doc.splitTextToSize(printable(legend), inner);
+      doc.text(lines, margin, y);
+      y += lines.length * 4.5 + 4;
     }
     const charts = config.sections.includes("charts") ? payload.charts ?? [] : [];
     for (const chart of charts) {
@@ -468,13 +481,13 @@ export function useRmExport() {
       }
     }
     if (config.sections.includes("table")) {
-      const MAX_COLUMNS = 8;
+      const MAX_COLUMNS = landscape ? 16 : 10;
       payload.sheets.forEach((sheet) => {
         const all = columnsOf(sheet, config.columns);
         const columns = all.slice(0, MAX_COLUMNS);
         const rows = rowsOf(sheet, payload.limit);
         if (!config.sections.includes("cards")) rowCount += rows.length;
-        doc.addPage("a4", "landscape");
+        doc.addPage();
         const wide = doc.internal.pageSize.getWidth() - margin * 2;
         doc.setTextColor(...ink);
         doc.setFont("helvetica", "bold");
@@ -496,7 +509,15 @@ export function useRmExport() {
           startY: margin + 10,
           head: [columns.map((column) => printable(column.column))],
           body: rows.map((row) => columns.map((column) => printable(cellText(column.value(row), lang)))),
-          styles: { fontSize: 6.5, cellPadding: 1.4, overflow: "linebreak", textColor: ink, minCellWidth: wide / columns.length / 2 },
+          // Passe huit colonnes, la police et les marges se resserrent : c'est
+          // ce qui fait tenir un suivi mensuel complet sans casser les mots.
+          styles: {
+            fontSize: columns.length > 8 ? 5.5 : 6.5,
+            cellPadding: columns.length > 8 ? 1 : 1.4,
+            overflow: "linebreak",
+            textColor: ink,
+            minCellWidth: wide / columns.length / 2
+          },
           headStyles: { fillColor: violet, textColor: [255, 255, 255], fontStyle: "bold", valign: "middle" },
           alternateRowStyles: { fillColor: [250, 250, 253] },
           margin: { left: margin, right: margin, top: margin, bottom: margin },

package/dist/runtime/composables/useTheme.d.ts

@@ -1,4 +1,5 @@
-export type RmCvdMode = 'none' | 'deutera' | 'protan' | 'trita' | 'mono';
+export type RmCvdMode = 'none' | 'deutera' | 'protan' | 'tritan' | 'mono';
+export type RmChartPalette = 'default' | 'cvdSafe';
 export type RmTextScale = 'normal' | 'large' | 'xl';
 export declare function useRomulusTheme(): {
     night: Readonly<import("vue").Ref<boolean, boolean>>;
@@ -7,11 +8,15 @@ export declare function useRomulusTheme(): {
     compact: Readonly<import("vue").Ref<boolean, boolean>>;
     cvd: Readonly<import("vue").Ref<RmCvdMode, RmCvdMode>>;
     textScale: Readonly<import("vue").Ref<RmTextScale, RmTextScale>>;
+    chartPalette: Readonly<import("vue").Ref<RmChartPalette, RmChartPalette>>;
+    chartDecal: Readonly<import("vue").Ref<boolean, boolean>>;
     setNight: (value: boolean) => void;
     setHighContrast: (value: boolean) => void;
     setReduceMotion: (value: boolean) => void;
     setCompact: (value: boolean) => void;
     setCvd: (mode: RmCvdMode) => void;
     setTextScale: (scale: RmTextScale) => void;
+    setChartPalette: (palette: RmChartPalette) => void;
+    setChartDecal: (value: boolean) => void;
     reset: () => void;
 };