@tekkare/romulus 0.1.27 → 0.1.28

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.26",
+  "version": "0.1.27",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/ActionBar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 export interface RmActionBarProps {
   /** Width of the action panel in px */
   panelWidth?: number

package/dist/runtime/components/AiChat.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 export interface AiChatMessage {
   id: string
   role: 'user' | 'assistant'

package/dist/runtime/components/Date.vue

@@ -0,0 +1,38 @@
+<!--
+  Date en toutes lettres, dans la langue demandee : « 22 Août, 2026 » en
+  francais, « August 22, 2026 » en anglais.
+
+  Remplace `arg-date` d'Auriga a l'identique (mois capitalise, virgule avant
+  l'annee). Une valeur invalide rend « - » plutot que « Invalid Date ».
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    date: string | number | Date | null | undefined
+    lang?: 'fr' | 'en'
+    /** Mois abrege (« Août » → « Aoû. », « August » → « Aug. »). */
+    compact?: boolean
+  }>(),
+  { lang: 'fr', compact: false },
+)
+
+const text = computed(() => {
+  if (props.date === null || props.date === undefined || props.date === '') return '-'
+  const d = new Date(props.date)
+  if (Number.isNaN(d.getTime())) return '-'
+
+  const locale = props.lang === 'en' ? 'en-US' : 'fr-FR'
+  const raw = d.toLocaleString(locale, { month: props.compact ? 'short' : 'long' })
+  const month = raw.charAt(0).toUpperCase() + raw.slice(1)
+
+  return props.lang === 'en'
+    ? `${month} ${d.getDate()}, ${d.getFullYear()}`
+    : `${d.getDate()} ${month}, ${d.getFullYear()}`
+})
+</script>
+
+<template>
+  <span class="rm-date">{{ text }}</span>
+</template>

package/dist/runtime/components/Drawer.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 export interface RmDrawerProps {
   /** Whether the drawer is open */
   modelValue: boolean

package/dist/runtime/components/EmptyState.vue

@@ -0,0 +1,32 @@
+<!--
+  Etat vide d'une liste : une icone dans un disque, un titre, une phrase.
+
+  Remplace `arg-errors` d'Auriga. Les textes viennent de la page : le
+  hors-perimetre se dit, il ne s'estime pas.
+-->
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    icon?: string
+    title: string
+    text?: string
+  }>(),
+  { icon: 'MagnifyingGlass', text: '' },
+)
+</script>
+
+<template>
+  <div class="rm-empty">
+    <div class="rm-empty__icon">
+      <RmIcon :name="icon" :size="44" />
+    </div>
+    <div class="rm-empty__text">
+      <p class="rm-empty__title">{{ title }}</p>
+      <p v-if="text" class="rm-empty__descr">{{ text }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-empty{color:var(--text-primary);flex-direction:column;font-family:var(--font-sans);gap:24px;max-width:409px}.rm-empty,.rm-empty__icon{align-items:center;display:flex}.rm-empty__icon{background:var(--border-default);border-radius:50px;color:var(--text-secondary);justify-content:center;padding:10px}.rm-empty__text{align-items:center;align-self:stretch;display:flex;flex-direction:column;gap:8px;text-align:center}.rm-empty__title{font-size:var(--font-16);font-weight:var(--weight-bold);line-height:normal;margin:0}.rm-empty__descr{color:var(--text-secondary);font-size:var(--font-14);line-height:160%;margin:0}
+</style>

package/dist/runtime/components/FilterBar.vue

@@ -0,0 +1,153 @@
+<!--
+  Barre de filtres d'une page de liste.
+
+  Au repos, une barre fine collee sous le bandeau de page (RmPageHeader) : le
+  selecteur de vue si la page en publie un (useRmFilterBarView), une puce
+  « Filtres » et la recherche, rien d'autre. La puce ouvre en accordeon le
+  panneau qui contient tous les filtres ; c'est la que vivent « Sauvegarder un
+  scope » et « Tout effacer ». Le nombre de filtres actifs reste visible sur la
+  puce.
+
+  Slots : #CardTitle (libelle de la puce si `customTitle`), #Search, #Filters.
+  Le contenu projete vient encore, dans les apps, des champs Auriga
+  (arg-advanced-search-bar) : les regles `:deep` en bas les remettent a la
+  hauteur et au rayon de la rangee. Elles tomberont avec ces champs.
+-->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRmFilterBarView } from '../composables/useRmFilterBarView'
+
+const props = withDefaults(
+  defineProps<{
+    /** Nombre de filtres poses a la main, affiche sur la puce. */
+    filtersAmount?: number
+    /** Le libelle de la puce vient du slot #CardTitle. */
+    customTitle?: boolean
+    haveSaveScope?: boolean
+    haveClear?: boolean
+    clearMsg?: string | null
+    saveScopeMsg?: string | null
+    lang?: 'fr' | 'en'
+    /**
+     * Id de l'element sous lequel la barre se colle quand la page defile
+     * (le bandeau de page). Sa hauteur est suivie par ResizeObserver.
+     */
+    stickyTo?: string | null
+  }>(),
+  {
+    filtersAmount: 0,
+    customTitle: false,
+    haveSaveScope: false,
+    haveClear: true,
+    clearMsg: null,
+    saveScopeMsg: null,
+    lang: 'fr',
+    stickyTo: 'rm_page_header',
+  },
+)
+
+const emit = defineEmits<{ clearFilters: []; saveScope: [] }>()
+
+const LABELS = {
+  fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Tout effacer' },
+  en: { title: 'Filters', save: 'Save a scope', clear: 'Clear all' },
+} as const
+
+const t = computed(() => LABELS[props.lang] ?? LABELS.fr)
+
+const open = ref(false)
+
+/** Onglets de vue publies par la page. */
+const { view } = useRmFilterBarView()
+
+/**
+ * La barre reste dans le flux (pas de Teleport : un noeud etranger dans un
+ * arbre Vue partait en « Cannot read properties of null » a chaque
+ * remplacement du bandeau) et se colle sous le bandeau, dont elle suit la
+ * hauteur.
+ */
+const stickyTop = ref(0)
+let headerSize: ResizeObserver | null = null
+
+function watchHeader() {
+  if (!props.stickyTo) return
+  const header = document.getElementById(props.stickyTo)
+  if (!header) return
+
+  headerSize?.disconnect()
+  headerSize = new ResizeObserver(() => {
+    stickyTop.value = header.offsetHeight
+  })
+  headerSize.observe(header)
+  stickyTop.value = header.offsetHeight
+}
+
+onMounted(() => watchHeader())
+
+onBeforeUnmount(() => {
+  headerSize?.disconnect()
+  headerSize = null
+})
+</script>
+
+<template>
+  <div
+    id="rm_filter_bar"
+    class="rm-fbar"
+    :class="open ? 'rm-fbar--open' : 'rm-fbar--closed'"
+    :style="{ top: `${stickyTop}px` }"
+  >
+    <div class="rm-fbar__row">
+      <div v-if="view" class="rm-fbar__view">
+        <RmViewSelect
+          :tabs="view.tabs"
+          :active-tab="view.activeTab"
+          :switch-tab="view.switchTab"
+          :lang="lang"
+        />
+      </div>
+
+      <button type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="open = !open">
+        <RmIcon name="Funnel" :size="16" />
+        <span v-if="customTitle"><slot name="CardTitle" /></span>
+        <span v-else>{{ t.title }}</span>
+        <span v-if="filtersAmount" class="rm-fbar__badge">{{ filtersAmount }}</span>
+      </button>
+
+      <div class="rm-fbar__search">
+        <slot name="Search" />
+      </div>
+    </div>
+
+    <div v-show="open" class="rm-fbar__panel">
+      <!-- Le panneau se presente comme une section : son titre, et les
+           commandes juste a cote, pres des filtres qu'elles vident. -->
+      <div class="rm-fbar__panel-head">
+        <p class="rm-fbar__panel-title">{{ t.title }}</p>
+        <button
+          v-if="haveSaveScope"
+          type="button"
+          class="rm-fbar__action rm-fbar__action--save"
+          @click="emit('saveScope')"
+        >
+          {{ saveScopeMsg || t.save }}
+        </button>
+        <button
+          v-if="haveClear"
+          type="button"
+          class="rm-fbar__action rm-fbar__action--clear"
+          @click="emit('clearFilters')"
+        >
+          {{ clearMsg || t.clear }}
+        </button>
+      </div>
+      <div class="rm-fbar__filters">
+        <slot name="Filters" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row{border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__filters{display:contents}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
+</style>

package/dist/runtime/components/FilterComplex.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import {
   PhCaretDown,
   PhMagnifyingGlass,

package/dist/runtime/components/FilterDropdown.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { PhCaretDown, PhCheck } from '@phosphor-icons/vue'
 import type { Component } from 'vue'
 

package/dist/runtime/components/HybridTable.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 /**
  * HybridTable — a table with inline horizontal bars behind values.
  * Each row shows a label, a value, and a bar proportional to the max value.

package/dist/runtime/components/KpiBar.vue

@@ -0,0 +1,50 @@
+<!--
+  Rangee de KPI en tete d'une page de liste : une carte, N tuiles cote a cote,
+  chacune avec son icone dans un carre clair, sa valeur et sa legende.
+
+  Remplace `arg-home-kpis` d'Auriga a l'identique. RmKpi (tuile seule, en
+  Caudex, avec tendance) reste la tuile des tableaux de bord d'analyse ; ici
+  c'est la barre de volumetrie d'une liste.
+-->
+<script setup lang="ts">
+import { rmNumber } from '../utils/format'
+
+export type RmKpiBarItem = {
+  /** Icone Phosphor. */
+  icon: string
+  /** Un nombre est formate en francais ; une chaine passe telle quelle. */
+  value: number | string | null | undefined
+  legend: string
+  /** Precision sous la legende. */
+  subtitle?: string
+}
+
+defineProps<{ kpis: RmKpiBarItem[] }>()
+
+function display(value: RmKpiBarItem['value']) {
+  if (value === null || value === undefined) return '-'
+  return typeof value === 'number' ? rmNumber(value) : value
+}
+</script>
+
+<template>
+  <div class="rm-kpibar">
+    <slot />
+    <div class="rm-kpibar__items">
+      <div v-for="(kpi, index) in kpis" :key="index" class="rm-kpibar__item">
+        <div class="rm-kpibar__icon">
+          <RmIcon :name="kpi.icon" :size="32" />
+        </div>
+        <div class="rm-kpibar__text">
+          <p class="rm-kpibar__value">{{ display(kpi.value) }}</p>
+          <p class="rm-kpibar__legend">{{ kpi.legend }}</p>
+          <p v-if="kpi.subtitle" class="rm-kpibar__subtitle">{{ kpi.subtitle }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-kpibar{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xs);color:var(--text-primary);flex-direction:column;font-family:var(--font-sans);padding:16px}.rm-kpibar,.rm-kpibar__items{align-self:stretch;display:flex;gap:16px}.rm-kpibar__items{align-items:center}.rm-kpibar__item{align-items:center;display:flex;flex:1 0 0;gap:16px;min-width:0}.rm-kpibar__icon{align-items:center;background:var(--bg-surface-3);border-radius:var(--radius-lg);color:var(--text-secondary);display:flex;flex:0 0 auto;justify-content:center;padding:8px}.rm-kpibar__text{align-items:flex-start;display:flex;flex-direction:column;gap:4px;min-width:0}.rm-kpibar__value{color:var(--color-primary);font-size:var(--font-22);font-weight:var(--weight-bold);line-height:normal;margin:0}.rm-kpibar__legend{color:var(--text-secondary);font-size:var(--font-12);line-height:normal;margin:0}.rm-kpibar__subtitle{color:var(--text-muted);font-size:var(--font-11);line-height:1.3;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+</style>

package/dist/runtime/components/Modal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { PhX } from '@phosphor-icons/vue'
 
 export interface RmModalProps {

package/dist/runtime/components/PageHeader.vue

@@ -0,0 +1,50 @@
+<!--
+  Bandeau de page : le titre, un eventuel retour, et les actions de la page.
+
+  Remplace `arg-header` d'Auriga dans le cadre OIP 7. Il reste dans le flux et
+  se colle en haut de la colonne de contenu quand elle defile ; la barre de
+  filtres (RmFilterBar) se cale sous lui en suivant son id `rm_page_header`.
+
+  Slots : #title (a la place de la prop), #actions (a droite du titre).
+-->
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+withDefaults(
+  defineProps<{
+    title?: string | null
+    /** Fleche de retour a gauche du titre. */
+    haveReturn?: boolean
+    /** Destination du retour ; sans valeur, l'historique. */
+    backTo?: string | null
+  }>(),
+  { title: null, haveReturn: false, backTo: null },
+)
+
+const router = useRouter()
+</script>
+
+<template>
+  <header id="rm_page_header" class="rm-page-header">
+    <div class="rm-page-header__row">
+      <template v-if="haveReturn">
+        <NuxtLink v-if="backTo" :to="backTo" class="rm-page-header__back" aria-label="Retour">
+          <RmIcon name="CaretLeft" :size="20" />
+        </NuxtLink>
+        <button v-else type="button" class="rm-page-header__back" aria-label="Retour" @click="router.back()">
+          <RmIcon name="CaretLeft" :size="20" />
+        </button>
+      </template>
+
+      <h1 v-if="title" class="rm-page-header__title">{{ title }}</h1>
+      <div v-else class="rm-page-header__title"><slot name="title" /></div>
+
+      <div v-if="$slots.actions" class="rm-page-header__actions"><slot name="actions" /></div>
+    </div>
+    <slot />
+  </header>
+</template>
+
+<style scoped>
+.rm-page-header{backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:12px;padding:16px 32px 12px;position:sticky;top:0;width:100%;z-index:95}.rm-page-header__row{align-items:center;align-self:stretch;display:flex;gap:16px}.rm-page-header__back{background:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-page-header__title{flex-grow:2;font-size:23px;font-weight:900;line-height:normal;margin:0;min-width:0}.rm-page-header__title :deep(h1),.rm-page-header__title :deep(h2),.rm-page-header__title :deep(p){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-page-header__actions{align-items:center;display:flex;flex:0 0 auto;gap:16px}
+</style>

package/dist/runtime/components/ResultCard.vue

@@ -0,0 +1,80 @@
+<!--
+  Carte de resultat d'une liste (avis HAS, indication LES, MITM, PNDS...).
+
+  Une carte repond a trois questions dans cet ordre : de quoi s'agit-il
+  (titre, sous-titre), combien (le compteur a gauche), et que dit le dernier
+  etat (la zone de droite). Le detail vit dans la fiche : la carte entiere
+  mene a la fiche, il n'y a pas de bouton « Voir le detail », seulement le
+  rappel `moreLabel`.
+
+  La racine est un <div>, pas un <a> : Chrome ne peint pas le masque
+  `paint(squircle)` des anciens tags Auriga dans un lien, et un <a> autour
+  d'une colonne flex la rendait inline. La page pose son propre @click
+  (les attributs tombent sur la racine) et laisse la main aux actions
+  internes (export, liens).
+
+  Slots :
+    title      — identite, une ligne en gras
+    subtitle   — complement gris sous le titre
+    actions    — a droite du titre (export...). Le clic doit y etre stoppe.
+    meta       — rangee au-dessus du corps : libelle date, reference, tags
+    default    — le corps (libelle, motif...)
+    footer     — pied pleine largeur, en retrait (provenance)
+
+  Classes utilitaires pour le contenu projete :
+    .rm-rcard__label  libelle en capitales (« DERNIER AVIS · 4 OCT. 2023 »)
+    .rm-rcard__ref    reference en monospace (« CT-20265 »)
+    .rm-rcard__lead   texte principal en gras
+    .rm-rcard__clamp  borne a trois lignes
+    .rm-rcard__text   texte courant 15px
+    .rm-rcard__desc   description 14px, gris
+-->
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** Le chiffre du compteur. Sans valeur, la colonne de gauche est omise. */
+    count?: number | string | null
+    /** Libelle sous le chiffre (« avis », « produits »). */
+    countLabel?: string
+    /** Precision sous le libelle (« dont 2 acces precoce »). */
+    countExtra?: string
+    /** Rappel en bas de la zone de droite (« Voir les 5 avis »). Une fleche est ajoutee. */
+    moreLabel?: string
+    /** Curseur main et surbrillance au survol : la carte est un lien. */
+    clickable?: boolean
+  }>(),
+  { count: null, countLabel: '', countExtra: '', moreLabel: '', clickable: false },
+)
+</script>
+
+<template>
+  <div class="rm-rcard" :class="{ 'rm-rcard--clickable': clickable }">
+    <div class="rm-rcard__head">
+      <div class="rm-rcard__identity">
+        <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>
+
+    <div class="rm-rcard__body">
+      <div v-if="count !== null && count !== undefined" class="rm-rcard__count">
+        <p class="rm-rcard__count-value">{{ count }}</p>
+        <p v-if="countLabel" class="rm-rcard__count-label">{{ countLabel }}</p>
+        <p v-if="countExtra" class="rm-rcard__count-extra">{{ countExtra }}</p>
+      </div>
+
+      <div class="rm-rcard__main">
+        <div v-if="$slots.meta" class="rm-rcard__meta"><slot name="meta" /></div>
+        <slot />
+        <p v-if="moreLabel" class="rm-rcard__more">{{ moreLabel }} →</p>
+      </div>
+    </div>
+
+    <div v-if="$slots.footer" class="rm-rcard__footer"><slot name="footer" /></div>
+  </div>
+</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}
+</style>

package/dist/runtime/components/ResultsLine.vue

@@ -0,0 +1,38 @@
+<!--
+  Ligne de volumetrie sous les KPI : « 🔗 3 746 MARQUES · 33 AVIS ————— ».
+
+  Le compte vivait en petit gris, aligne a droite au-dessus des cartes, ou il
+  se confondait avec les libelles de filtre. Ici il ferme le bloc d'en-tete :
+  meme violet que les KPI, capitales, et un filet qui s'efface vers la droite
+  pour separer l'en-tete des resultats sans poser un trait plein.
+-->
+<script setup lang="ts">
+import { rmNumber } from '../utils/format'
+
+withDefaults(
+  defineProps<{
+    /** Une entree par volume a annoncer : { count, label }. */
+    items: { count: number; label: string }[]
+    /** Icone Phosphor posee en tete de ligne. */
+    icon?: string
+  }>(),
+  { icon: 'Pill' },
+)
+</script>
+
+<template>
+  <div class="rm-rline">
+    <RmIcon :name="icon" :size="14" />
+    <p class="rm-rline__text">
+      <template v-for="(item, index) in items" :key="item.label">
+        <span v-if="index > 0" class="rm-rline__sep">·</span>
+        {{ rmNumber(item.count) }} {{ item.label }}
+      </template>
+    </p>
+    <span class="rm-rline__rule" />
+  </div>
+</template>
+
+<style scoped>
+.rm-rline{align-items:center;display:flex;gap:8px;width:100%;--rm-rline-air:20px;color:var(--color-primary);font-family:var(--font-sans);margin-bottom:calc(var(--rm-rline-air) - 16px);margin-top:var(--rm-rline-air)}.rm-rline__text{flex:0 0 auto;font-size:var(--font-12);font-weight:var(--weight-bold);letter-spacing:.06em;margin:0;text-transform:uppercase;white-space:nowrap}.rm-rline__sep{opacity:.6;padding:0 2px}.rm-rline__rule{background:linear-gradient(to right,color-mix(in srgb,var(--color-primary) 35%,transparent),transparent);flex:1 1 auto;height:1px}
+</style>

package/dist/runtime/components/SearchBar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
 import { PhMagnifyingGlass, PhX } from '@phosphor-icons/vue'
 
 export interface SearchSuggestion {

package/dist/runtime/components/SimpleBar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 /**
  * SimpleBar — lightweight horizontal bar chart without ApexCharts.
  * Pure CSS, no dependencies. Great for small inline visualizations.

package/dist/runtime/components/SourceLine.vue

@@ -0,0 +1,28 @@
+<!--
+  Ligne de provenance : « Source : HAS - ... - Mise a jour : 3 septembre 2026 ».
+
+  Un bouton discret : cliquer ouvre le tiroir Sources de l'app (emit `click`).
+  Par defaut en gris, la provenance se lit apres le contenu ; `tone="primary"`
+  la remet en couleur de marque quand elle est seule sur sa ligne (en-tete de
+  tableau) et n'a rien a concurrencer.
+-->
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tone?: 'muted' | 'primary'
+  }>(),
+  { tone: 'muted' },
+)
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+</script>
+
+<template>
+  <button type="button" class="rm-source" :class="`rm-source--${tone}`" @click="emit('click', $event)">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.rm-source{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-wrap:wrap;font-family:var(--font-sans);font-size:var(--font-12);font-weight:var(--weight-normal);gap:4px;line-height:14px;padding:0;text-align:left;transition:color var(--duration-fast) linear}.rm-source--muted{color:var(--text-muted)}.rm-source--muted:hover{color:var(--text-primary)}.rm-source--primary{color:var(--color-primary)}.rm-source--primary:hover{color:var(--color-primary-hover)}
+</style>

package/dist/runtime/components/Table.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { PhCaretUp, PhCaretDown } from '@phosphor-icons/vue'
 
 export interface RmTableColumn {

package/dist/runtime/components/TableCard.vue

@@ -0,0 +1,22 @@
+<!--
+  Carte qui porte un tableau de resultats : un en-tete (titre, provenance,
+  compte) et le tableau dessous.
+
+  Remplace `arg-chart-table-card :have-chart="false"` d'Auriga. Le tableau
+  lui-meme est un RmTable projete dans le slot par defaut.
+
+  Slots : #header (titre, source, compte), default (le tableau et sa
+  pagination).
+-->
+<template>
+  <section class="rm-table-card">
+    <div v-if="$slots.header" class="rm-table-card__header">
+      <slot name="header" />
+    </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);gap:24px;padding:24px;width:100%}.rm-table-card__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between}.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}
+</style>

package/dist/runtime/components/Tabs.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, nextTick, onMounted, watch } from 'vue'
 export interface RmTabsProps {
   /** Tab labels */
   tabs: string[]

package/dist/runtime/components/Tag.vue

@@ -0,0 +1,60 @@
+<!--
+  Etiquette courte : statut, categorie, valeur de filtre.
+
+  Remplace `arg-tags` d'Auriga, palette identique (memes teintes a 10 % et
+  memes couleurs de texte) pour que les pages migrees gardent leur rendu.
+  Sans `mask-image: paint(squircle)` : ce masque n'etait pas peint par Chrome
+  a l'interieur d'un lien, les etiquettes disparaissaient.
+-->
+<script setup lang="ts">
+export type RmTagVariant =
+  | 'default'
+  | 'transparent'
+  | 'gray'
+  | 'rose'
+  | 'pink'
+  | 'fushia'
+  | 'purple'
+  | 'violet'
+  | 'indigo'
+  | 'blue'
+  | 'sky'
+  | 'cyan'
+  | 'teal'
+  | 'emerald'
+  | 'green'
+  | 'lime'
+  | 'yellow'
+  | 'amber'
+  | 'orange'
+
+withDefaults(
+  defineProps<{
+    variant?: RmTagVariant
+    /** Affiche une croix qui emet `close`. */
+    closable?: boolean
+  }>(),
+  { variant: 'default', closable: false },
+)
+
+const emit = defineEmits<{ close: [] }>()
+</script>
+
+<template>
+  <span class="rm-tag" :class="`rm-tag--${variant}`">
+    <slot />
+    <button
+      v-if="closable"
+      type="button"
+      class="rm-tag__close"
+      aria-label="Retirer"
+      @click.stop="emit('close')"
+    >
+      <RmIcon name="X" :size="12" />
+    </button>
+  </span>
+</template>
+
+<style scoped>
+.rm-tag{align-items:center;background:var(--bg-surface-3);border-radius:var(--radius-sm);color:var(--text-secondary);display:inline-flex;font-family:var(--font-sans);font-size:var(--font-12);font-weight:var(--weight-medium);gap:8px;line-height:normal;max-width:100%;padding:4px 8px;width:-moz-fit-content;width:fit-content}.rm-tag__close{background:none;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-tag--transparent{background:transparent;border:1px solid var(--border-default)}.rm-tag--gray{background:rgba(143,145,172,.1);color:var(--text-primary)}.rm-tag--rose{background:rgba(244,63,94,.1);color:#9f1239}.rm-tag--pink{background:rgba(236,72,153,.1);color:#9d174d}.rm-tag--fushia{background:rgba(217,70,239,.1);color:#86198f}.rm-tag--purple{background:rgba(168,85,247,.1);color:#6b21a8}.rm-tag--violet{background:rgba(139,92,246,.1);color:#5b21b6}.rm-tag--indigo{background:rgba(99,102,241,.1);color:#3730a3}.rm-tag--blue{background:rgba(59,130,246,.1);color:#1e40af}.rm-tag--sky{background:rgba(14,165,233,.1);color:#075985}.rm-tag--cyan{background:rgba(6,182,212,.1);color:#155e75}.rm-tag--teal{background:rgba(20,184,166,.1);color:#115e59}.rm-tag--emerald{background:rgba(16,185,129,.1);color:#065f46}.rm-tag--green{background:rgba(34,197,94,.1);color:#166534}.rm-tag--lime{background:rgba(132,204,22,.1);color:#3f6212}.rm-tag--yellow{background:rgba(234,179,8,.1);color:#854d0e}.rm-tag--amber{background:rgba(245,158,11,.1);color:#92400e}.rm-tag--orange{background:rgba(249,115,22,.1);color:#9a3412}
+</style>

package/dist/runtime/components/ToolbarFilter.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { PhCaretDown, PhCheck } from '@phosphor-icons/vue'
 import type { Component } from 'vue'
 

package/dist/runtime/components/ViewSelect.vue

@@ -0,0 +1,81 @@
+<!--
+  Selecteur de vue (Cartes / Tableau) de la barre de filtres.
+
+  Une seule pastille, du meme dessin que « Filtres », qui ouvre la liste des
+  vues. Le menu se referme sur un clic ailleurs ou sur Echap, comme les listes
+  deroulantes des filtres.
+-->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+type ViewTab = { label: string; icon?: string }
+
+const props = withDefaults(
+  defineProps<{
+    tabs: ViewTab[]
+    activeTab: number
+    switchTab: (index: number) => void
+    lang?: 'fr' | 'en'
+  }>(),
+  { lang: 'fr' },
+)
+
+const label = computed(() => (props.lang === 'en' ? 'View' : 'Affichage'))
+const current = computed(() => props.tabs[props.activeTab] ?? props.tabs[0])
+
+const open = ref(false)
+const root = ref<HTMLElement | null>(null)
+
+function select(index: number) {
+  props.switchTab(index)
+  open.value = false
+}
+
+function onDocumentClick(event: MouseEvent) {
+  if (!open.value) return
+  if (root.value && !root.value.contains(event.target as Node)) open.value = false
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') open.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+  document.addEventListener('keydown', onKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+  document.removeEventListener('keydown', onKeydown)
+})
+</script>
+
+<template>
+  <div ref="root" class="rm-vsel">
+    <button type="button" class="rm-vsel__pill" :class="{ 'is-open': open }" @click="open = !open">
+      <RmIcon name="Stack" :size="16" />
+      <span class="rm-vsel__label">{{ label }} :</span>
+      <span class="rm-vsel__value">{{ current?.label }}</span>
+      <RmIcon class="rm-vsel__caret" name="CaretDown" :size="14" />
+    </button>
+
+    <div v-if="open" class="rm-vsel__menu">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="tab.label"
+        type="button"
+        class="rm-vsel__option"
+        :class="{ 'is-active': index === activeTab }"
+        @click="select(index)"
+      >
+        <RmIcon v-if="tab.icon" :name="tab.icon" :size="16" />
+        <span>{{ tab.label }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-vsel{position:relative}.rm-vsel,.rm-vsel__pill{align-items:center;display:flex}.rm-vsel__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-vsel__pill:hover{background:var(--bg-surface-3)}.rm-vsel__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vsel__label{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vsel__caret{transition:transform var(--duration-fast)}.rm-vsel__pill.is-open .rm-vsel__caret{transform:rotate(180deg)}.rm-vsel__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:2px;left:0;min-width:180px;padding:6px;position:absolute;top:calc(100% + 6px);z-index:120}.rm-vsel__option{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:8px;padding:8px 10px;text-align:left}.rm-vsel__option:hover{background:var(--bg-surface-3)}.rm-vsel__option.is-active{color:var(--color-primary);font-weight:var(--weight-semibold)}
+</style>

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

@@ -0,0 +1,43 @@
+/**
+ * Selecteur de vue (Cartes / Table) de la barre de filtres.
+ *
+ * La page publie ses onglets ici, la barre (RmFilterBar) les rend. Pas de
+ * Teleport vers un noeud de la barre : elle est elle-meme projetee, et un
+ * Teleport dans un Teleport, entre deux composants montes et demontes a des
+ * instants differents, patchait des noeuds sans instance au retour arriere du
+ * navigateur (« Cannot read properties of null (reading 'emitsOptions') »).
+ */
+export type RmFilterBarView = {
+    tabs: {
+        label: string;
+        icon?: string;
+    }[];
+    activeTab: number;
+    switchTab: (index: number) => void;
+};
+/**
+ * Chaque page tient son propre handle. `clear` ne retire que la vue que CE
+ * handle a posee : au changement de page, `NuxtPage` (dans un Suspense) garde
+ * l'ancienne page montee jusqu'a ce que la nouvelle soit prete, donc le
+ * `onBeforeUnmount` de l'ancienne tombe apres le `set` de la nouvelle. Un
+ * `clear` aveugle effacait alors la vue fraichement publiee.
+ */
+export declare function useRmFilterBarView(): {
+    view: import("vue").Ref<{
+        tabs: {
+            label: string;
+            icon?: string | undefined;
+        }[];
+        activeTab: number;
+        switchTab: (index: number) => void;
+    } | null, RmFilterBarView | {
+        tabs: {
+            label: string;
+            icon?: string | undefined;
+        }[];
+        activeTab: number;
+        switchTab: (index: number) => void;
+    } | null>;
+    set: (next: RmFilterBarView) => void;
+    clear: () => void;
+};

package/dist/runtime/composables/useRmFilterBarView.js

@@ -0,0 +1,16 @@
+import { ref } from "vue";
+const view = ref(null);
+export function useRmFilterBarView() {
+  let mine = null;
+  return {
+    view,
+    set: (next) => {
+      mine = next;
+      view.value = next;
+    },
+    clear: () => {
+      if (view.value === mine) view.value = null;
+      mine = null;
+    }
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",