@tekkare/romulus 0.1.34 → 0.1.36

package/dist/module.json

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

package/dist/runtime/components/Button.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 export interface RmButtonProps {
   /** Visual style variant */
-  variant?: 'primary-fill' | 'primary-stroke' | 'discovery-fill' | 'discovery-stroke' | 'databank-fill' | 'databank-stroke' | 'pharma-fill' | 'pharma-stroke' | 'secondary' | 'outline' | 'ghost'
+  variant?: 'primary-fill' | 'primary-stroke' | 'discovery-fill' | 'discovery-stroke' | 'databank-fill' | 'databank-stroke' | 'pharma-fill' | 'pharma-stroke' | 'secondary' | 'outline' | 'ghost' | 'danger'
   /** Size of the button */
   size?: 'sm' | 'md' | 'lg'
   /** Whether the button is disabled */
@@ -50,5 +50,5 @@ defineEmits<{
 </template>
 
 <style scoped>
-.rm-button{align-items:center;border:1px solid transparent;border-radius:6px;cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-weight:500;gap:8px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-button:focus-visible{outline:2px solid var(--color-healthcare);outline-offset:2px}.rm-button:disabled{cursor:not-allowed;opacity:.5}.rm-button--sm{font-size:13px;height:32px;padding:6px 16px}.rm-button--md{font-size:14px;height:40px;padding:10px 24px}.rm-button--lg{font-size:15px;height:48px;padding:12px 28px}.rm-button--primary-fill{background:linear-gradient(180deg,rgba(var(--healthcare-rgb),.8) 0,rgba(var(--healthcare-rgb),.9) 100%);border-color:var(--color-healthcare);box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-text-inverse)}.rm-button--primary-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-healthcare) 0,var(--color-healthcare) 100%);box-shadow:0 2px 4px 0 rgba(var(--healthcare-rgb),.6)}.rm-button--primary-fill:active:not(:disabled){background:var(--color-healthcare-active);box-shadow:0 1px 2px 0 rgba(var(--healthcare-rgb),.4)}.rm-button--primary-stroke{box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-healthcare)}.rm-button--primary-stroke,.rm-button--primary-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-healthcare)}.rm-button--primary-stroke:hover:not(:disabled){box-shadow:none}.rm-button--primary-stroke:active:not(:disabled){background:var(--bg-hover);box-shadow:none}.rm-button--discovery-fill{background:linear-gradient(180deg,rgba(var(--discovery-rgb),.8) 0,rgba(var(--discovery-rgb),.9) 100%);border-color:var(--color-discovery);box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-text-inverse)}.rm-button--discovery-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-discovery) 0,var(--color-discovery) 100%);border-color:var(--color-discovery);box-shadow:none}.rm-button--discovery-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-discovery-active) 0,var(--color-discovery-active) 100%);box-shadow:none}.rm-button--discovery-stroke{box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-discovery)}.rm-button--discovery-stroke,.rm-button--discovery-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-discovery)}.rm-button--discovery-stroke:hover:not(:disabled){box-shadow:none}.rm-button--discovery-stroke:active:not(:disabled){background:rgba(var(--discovery-rgb),.05);box-shadow:none}.rm-button--databank-fill{background:linear-gradient(180deg,rgba(var(--databank-rgb),.8) 0,rgba(var(--databank-rgb),.9) 100%);border-color:var(--color-databank);box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-text-inverse)}.rm-button--databank-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-databank) 0,var(--color-databank) 100%);border-color:var(--color-databank);box-shadow:none}.rm-button--databank-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-databank-active) 0,var(--color-databank-active) 100%);box-shadow:none}.rm-button--databank-stroke{box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-databank)}.rm-button--databank-stroke,.rm-button--databank-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-databank)}.rm-button--databank-stroke:hover:not(:disabled){box-shadow:none}.rm-button--databank-stroke:active:not(:disabled){background:rgba(var(--databank-rgb),.05);box-shadow:none}.rm-button--pharma-fill{background:linear-gradient(180deg,var(--color-pharma-soft) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-text-inverse)}.rm-button--pharma-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-pharma) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:none}.rm-button--pharma-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-pharma-active) 0,var(--color-pharma-active) 100%);box-shadow:none}.rm-button--pharma-stroke{box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-pharma)}.rm-button--pharma-stroke,.rm-button--pharma-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-pharma)}.rm-button--pharma-stroke:hover:not(:disabled){box-shadow:none}.rm-button--pharma-stroke:active:not(:disabled){background:rgba(var(--pharma-rgb),.05);box-shadow:none}.rm-button--secondary{background-color:var(--bg-surface-3);color:var(--text-primary)}.rm-button--secondary:active:not(:disabled),.rm-button--secondary:hover:not(:disabled){background-color:var(--border-default)}.rm-button--outline{background-color:transparent;border-color:var(--border-default);color:var(--text-secondary)}.rm-button--outline:hover:not(:disabled){background-color:var(--bg-surface-2);border-color:var(--text-muted)}.rm-button--outline:active:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--ghost{background-color:transparent;color:var(--text-secondary)}.rm-button--ghost:hover:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--ghost:active:not(:disabled){background-color:var(--border-default)}.rm-button--block{width:100%}
+.rm-button{align-items:center;border:1px solid transparent;border-radius:6px;cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-weight:500;gap:8px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-button:focus-visible{outline:2px solid var(--color-healthcare);outline-offset:2px}.rm-button:disabled{cursor:not-allowed;opacity:.5}.rm-button--sm{font-size:13px;height:32px;padding:6px 16px}.rm-button--md{font-size:14px;height:40px;padding:10px 24px}.rm-button--lg{font-size:15px;height:48px;padding:12px 28px}.rm-button--primary-fill{background:linear-gradient(180deg,rgba(var(--healthcare-rgb),.8) 0,rgba(var(--healthcare-rgb),.9) 100%);border-color:var(--color-healthcare);box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-text-inverse)}.rm-button--primary-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-healthcare) 0,var(--color-healthcare) 100%);box-shadow:0 2px 4px 0 rgba(var(--healthcare-rgb),.6)}.rm-button--primary-fill:active:not(:disabled){background:var(--color-healthcare-active);box-shadow:0 1px 2px 0 rgba(var(--healthcare-rgb),.4)}.rm-button--primary-stroke{box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-healthcare)}.rm-button--primary-stroke,.rm-button--primary-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-healthcare)}.rm-button--primary-stroke:hover:not(:disabled){box-shadow:none}.rm-button--primary-stroke:active:not(:disabled){background:var(--bg-hover);box-shadow:none}.rm-button--discovery-fill{background:linear-gradient(180deg,rgba(var(--discovery-rgb),.8) 0,rgba(var(--discovery-rgb),.9) 100%);border-color:var(--color-discovery);box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-text-inverse)}.rm-button--discovery-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-discovery) 0,var(--color-discovery) 100%);border-color:var(--color-discovery);box-shadow:none}.rm-button--discovery-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-discovery-active) 0,var(--color-discovery-active) 100%);box-shadow:none}.rm-button--discovery-stroke{box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-discovery)}.rm-button--discovery-stroke,.rm-button--discovery-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-discovery)}.rm-button--discovery-stroke:hover:not(:disabled){box-shadow:none}.rm-button--discovery-stroke:active:not(:disabled){background:rgba(var(--discovery-rgb),.05);box-shadow:none}.rm-button--databank-fill{background:linear-gradient(180deg,rgba(var(--databank-rgb),.8) 0,rgba(var(--databank-rgb),.9) 100%);border-color:var(--color-databank);box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-text-inverse)}.rm-button--databank-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-databank) 0,var(--color-databank) 100%);border-color:var(--color-databank);box-shadow:none}.rm-button--databank-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-databank-active) 0,var(--color-databank-active) 100%);box-shadow:none}.rm-button--databank-stroke{box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-databank)}.rm-button--databank-stroke,.rm-button--databank-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-databank)}.rm-button--databank-stroke:hover:not(:disabled){box-shadow:none}.rm-button--databank-stroke:active:not(:disabled){background:rgba(var(--databank-rgb),.05);box-shadow:none}.rm-button--pharma-fill{background:linear-gradient(180deg,var(--color-pharma-soft) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-text-inverse)}.rm-button--pharma-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-pharma) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:none}.rm-button--pharma-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-pharma-active) 0,var(--color-pharma-active) 100%);box-shadow:none}.rm-button--pharma-stroke{box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-pharma)}.rm-button--pharma-stroke,.rm-button--pharma-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-pharma)}.rm-button--pharma-stroke:hover:not(:disabled){box-shadow:none}.rm-button--pharma-stroke:active:not(:disabled){background:rgba(var(--pharma-rgb),.05);box-shadow:none}.rm-button--secondary{background-color:var(--bg-surface-3);color:var(--text-primary)}.rm-button--secondary:active:not(:disabled),.rm-button--secondary:hover:not(:disabled){background-color:var(--border-default)}.rm-button--outline{background-color:transparent;border-color:var(--border-default);color:var(--text-secondary)}.rm-button--outline:hover:not(:disabled){background-color:var(--bg-surface-2);border-color:var(--text-muted)}.rm-button--outline:active:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--danger{background-color:var(--bg-surface);border-color:var(--color-danger);color:var(--color-danger)}.rm-button--danger:active:not(:disabled),.rm-button--danger:hover:not(:disabled){background-color:var(--color-danger);color:var(--color-text-inverse)}.rm-button--ghost{background-color:transparent;color:var(--text-secondary)}.rm-button--ghost:hover:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--ghost:active:not(:disabled){background-color:var(--border-default)}.rm-button--block{width:100%}
 </style>

package/dist/runtime/components/Callout.vue

@@ -0,0 +1,55 @@
+<!--
+  RmCallout - banniere d'alerte posee dans le flux, au-dessus de ce qu'elle
+  concerne.
+
+  Icone, texte, actions. Quatre tons semantiques, plus un neutre. C'est le
+  pendant en ligne de l'etat d'erreur (`RmErrorState`) : celui-la remplace un
+  contenu qui a echoue, celui-ci commente un contenu qui est bien la, « cette
+  vue a des changements non enregistres », « aucune vue par defaut ».
+
+  Le ton ne porte jamais l'information seul : chaque ton a son icone, et le
+  texte dit la meme chose que la couleur. Une bordure coloree sur un fond
+  teinte reste lisible en vision des couleurs alteree, un fond seul non.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** `warning` pour un etat a rattraper, `danger` pour une perte possible. */
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+    /** Icone Phosphor. Par defaut celle du ton. */
+    icon?: string
+    /** Texte, quand il n'y a pas de mise en forme a y mettre. */
+    text?: string
+  }>(),
+  { tone: 'neutral', icon: undefined, text: '' },
+)
+
+/** Chaque ton a son icone : la couleur ne suffit pas a dire la nature. */
+const TONE_ICONS: Record<string, string> = {
+  neutral: 'Info',
+  info: 'Lightbulb',
+  success: 'CheckCircle',
+  warning: 'WarningCircle',
+  danger: 'WarningOctagon',
+}
+
+const iconName = computed(() => props.icon || TONE_ICONS[props.tone] || 'Info')
+</script>
+
+<template>
+  <div class="rm-callout" :class="`rm-callout--${tone}`">
+    <RmIcon class="rm-callout__icon" :name="iconName" :size="20" />
+    <div class="rm-callout__text">
+      <slot>{{ text }}</slot>
+    </div>
+    <div v-if="$slots.actions" class="rm-callout__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-callout{align-items:center;background:var(--bg-surface-2);border:1px solid var(--border-default);border-radius:var(--radius-lg);display:flex;font-family:var(--font-sans);gap:var(--space-12);padding:var(--space-12) var(--space-16)}.rm-callout__icon{color:var(--text-muted);flex-shrink:0}.rm-callout__text{color:var(--text-primary);flex:1;font-size:var(--font-13);line-height:1.45}.rm-callout__text :deep(b){font-weight:var(--weight-bold)}.rm-callout__actions{display:flex;flex-shrink:0;gap:var(--space-6)}.rm-callout--info{background:var(--color-info-bg);border-color:var(--color-info)}.rm-callout--info .rm-callout__icon{color:var(--color-info)}.rm-callout--success{background:var(--color-success-bg);border-color:var(--color-success)}.rm-callout--success .rm-callout__icon{color:var(--color-success)}.rm-callout--warning{background:var(--color-warning-bg);border-color:var(--color-warning)}.rm-callout--warning .rm-callout__icon{color:var(--color-warning)}.rm-callout--danger{background:var(--color-danger-bg);border-color:var(--color-danger)}.rm-callout--danger .rm-callout__icon{color:var(--color-danger)}@media (max-width:480px){.rm-callout{flex-wrap:wrap}.rm-callout__actions{flex-basis:100%;justify-content:flex-end}}
+</style>

package/dist/runtime/components/KpiBar.vue

@@ -7,6 +7,7 @@
   c'est la barre de volumetrie d'une liste.
 -->
 <script setup lang="ts">
+import { computed } from 'vue'
 import { rmNumber } from '../utils/format'
 
 export type RmKpiBarItem = {
@@ -19,7 +20,24 @@ export type RmKpiBarItem = {
   subtitle?: string
 }
 
-defineProps<{ kpis: RmKpiBarItem[] }>()
+const props = withDefaults(
+  defineProps<{
+    /** Les tuiles. Vide pendant un chargement, ou la barre pose son squelette. */
+    kpis?: RmKpiBarItem[]
+    /**
+     * Pose le squelette a la place des valeurs. La barre garde sa carte, ses
+     * tuiles et sa hauteur : la structure de la page est bonne des le premier
+     * rendu, au lieu de se former quand la donnee arrive.
+     */
+    loading?: boolean
+    /** Nombre de tuiles simulees pendant le chargement. */
+    tiles?: number
+  }>(),
+  { kpis: () => [], loading: false, tiles: 0 },
+)
+
+/** Autant de tuiles que la barre en portera, sinon quatre. */
+const skeletonTiles = computed(() => props.tiles || props.kpis.length || 4)
 
 function display(value: RmKpiBarItem['value']) {
   if (value === null || value === undefined) return '-'
@@ -28,19 +46,30 @@ function display(value: RmKpiBarItem['value']) {
 </script>
 
 <template>
-  <div class="rm-kpibar">
+  <div class="rm-kpibar" :aria-busy="loading || undefined">
     <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" />
+      <template v-if="loading">
+        <div v-for="index in skeletonTiles" :key="`skeleton-${index}`" class="rm-kpibar__item">
+          <RmSkeleton :width="48" :height="48" radius="var(--radius-lg)" />
+          <div class="rm-kpibar__text">
+            <RmSkeleton :width="64" :height="22" />
+            <RmSkeleton :width="88" :height="12" />
+          </div>
         </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>
+      </template>
+      <template v-else>
+        <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>
+      </template>
     </div>
   </div>
 </template>

package/dist/runtime/components/ResultsLine.vue

@@ -12,18 +12,21 @@ import { rmNumber } from '../utils/format'
 withDefaults(
   defineProps<{
     /** Une entree par volume a annoncer : { count, label }. */
-    items: { count: number; label: string }[]
+    items?: { count: number; label: string }[]
     /** Icone Phosphor posee en tete de ligne. */
     icon?: string
+    /** Squelette a la place des comptes, pour garder la ligne pendant l'attente. */
+    loading?: boolean
   }>(),
-  { icon: 'Pill' },
+  { items: () => [], icon: 'Pill', loading: false },
 )
 </script>
 
 <template>
-  <div class="rm-rline">
+  <div class="rm-rline" :aria-busy="loading || undefined">
     <RmIcon :name="icon" :size="14" />
-    <p class="rm-rline__text">
+    <RmSkeleton v-if="loading" :width="180" :height="12" />
+    <p v-else 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 }}

package/dist/runtime/components/SavedViewCard.vue

@@ -0,0 +1,295 @@
+<!--
+  RmSavedViewCard - une vue sauvegardee : un jeu de filtres, de tri et
+  d'affichage qu'on a mis de cote pour le rejouer.
+
+  La carte entiere active la vue, comme un element de liste : le bouton
+  « Activer » n'est qu'un point d'entree visible, pas le seul. Les commandes
+  internes (favori, menu, confirmation) arretent la propagation, sinon un clic
+  sur le menu activerait la vue au passage.
+
+  Le titre se renomme sur place. Un champ pose la ou vit le titre coute un
+  aller-retour de moins qu'une fenetre modale pour changer trois mots, et
+  garde la carte sous les yeux pendant l'edition.
+
+  La suppression demande confirmation dans la carte, sur une barre posee en
+  bas. Une `confirm()` du navigateur sort du cadre de l'app et ne dit pas
+  quelle vue est visee ; la barre, elle, nomme la vue et reste a cote d'elle.
+-->
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+
+export interface RmSavedViewPill {
+  /** Cle du critere (« Aire », « SMR »). */
+  k: string
+  /** Valeur retenue, deja mise en forme par l'appelant. */
+  v: string
+}
+
+export interface RmSavedViewConfigRow {
+  /** Icone Phosphor de la ligne. */
+  icon?: string
+  /** Intitule, en capitales dans la carte (« Display », « Tri », « Filtres »). */
+  key: string
+  /** Valeur simple. Ignoree si `pills` est fourni. */
+  value?: string
+  /** Valeurs en pastilles, pour une liste de criteres. */
+  pills?: RmSavedViewPill[]
+}
+
+export interface RmSavedViewMeta {
+  icon?: string
+  label: string
+}
+
+export interface RmSavedView {
+  id: string
+  title: string
+  description?: string
+  /** La vue est celle qui est appliquee a l'ecran. */
+  active?: boolean
+  /** La vue s'applique a l'ouverture de la page. */
+  isDefault?: boolean
+  starred?: boolean
+  config?: RmSavedViewConfigRow[]
+  /** Pied de carte : auteur, date, compteurs. */
+  meta?: RmSavedViewMeta[]
+  /** Horodatage, pour le filtre « Recentes » de `RmSavedViews`. */
+  updatedAt?: string | number
+}
+
+export interface RmSavedViewMenuItem {
+  key: string
+  label: string
+  icon?: string
+  /** Rouge dans le menu : action destructrice. */
+  danger?: boolean
+  /** Demande confirmation dans la carte avant d'emettre l'action. */
+  confirm?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    view: RmSavedView
+    /** Entrees du menu. Vide : pas de menu. */
+    menu?: RmSavedViewMenuItem[]
+    /** Le titre se renomme sur place. */
+    renamable?: boolean
+    /** L'etoile de favori est posee devant le titre. */
+    starrable?: boolean
+    lang?: 'fr' | 'en'
+  }>(),
+  { menu: () => [], renamable: false, starrable: false, lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  activate: [id: string]
+  star: [id: string]
+  rename: [id: string, title: string]
+  action: [key: string, id: string]
+}>()
+
+const en = computed(() => props.lang === 'en')
+
+const T = computed(() => ({
+  activate: en.value ? 'Activate' : 'Activer',
+  active: en.value ? 'Active' : 'Active',
+  star: en.value ? 'Add to favorites' : 'Ajouter aux favoris',
+  starred: en.value ? 'Favorite' : 'Favori',
+  more: en.value ? 'More actions' : "Plus d'actions",
+  isDefault: en.value
+    ? 'Default view, applied on opening'
+    : "Vue par défaut, s'active à l'ouverture",
+  cancel: en.value ? 'Cancel' : 'Annuler',
+  confirmPrefix: en.value ? 'Permanently delete' : 'Supprimer définitivement',
+}))
+
+const menuOpen = ref(false)
+/** Entree du menu en attente de confirmation, ou null. */
+const pending = ref<RmSavedViewMenuItem | null>(null)
+
+const renaming = ref(false)
+const draft = ref('')
+const input = ref<HTMLInputElement | null>(null)
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value
+  if (menuOpen.value) pending.value = null
+}
+
+function pick(item: RmSavedViewMenuItem) {
+  menuOpen.value = false
+  if (item.confirm) {
+    pending.value = item
+    return
+  }
+  if (item.key === 'rename' && props.renamable) {
+    startRename()
+    return
+  }
+  emit('action', item.key, props.view.id)
+}
+
+function confirmPending() {
+  const item = pending.value
+  pending.value = null
+  if (item) emit('action', item.key, props.view.id)
+}
+
+async function startRename() {
+  draft.value = props.view.title
+  renaming.value = true
+  await nextTick()
+  input.value?.focus()
+  input.value?.select()
+}
+
+function commitRename() {
+  if (!renaming.value) return
+  renaming.value = false
+  const next = draft.value.trim()
+  if (next && next !== props.view.title) emit('rename', props.view.id, next)
+}
+
+/** Le clic sur la carte active la vue ; la vue active, elle, est inerte. */
+function onCardClick() {
+  if (props.view.active || renaming.value || pending.value) return
+  emit('activate', props.view.id)
+}
+</script>
+
+<template>
+  <div
+    class="rm-view"
+    :class="{ 'rm-view--active': view.active, 'rm-view--default': view.isDefault }"
+    @click="onCardClick"
+  >
+    <div v-if="view.isDefault" class="rm-view__strip">
+      <RmIcon name="PushPin" :size="14" weight="fill" />
+      {{ T.isDefault }}
+    </div>
+
+    <div class="rm-view__head">
+      <button
+        v-if="starrable"
+        type="button"
+        class="rm-view__star"
+        :class="{ 'rm-view__star--on': view.starred }"
+        :title="view.starred ? T.starred : T.star"
+        :aria-label="view.starred ? T.starred : T.star"
+        :aria-pressed="!!view.starred"
+        @click.stop="emit('star', view.id)"
+      >
+        <RmIcon name="Star" :size="16" :weight="view.starred ? 'fill' : 'regular'" />
+      </button>
+
+      <input
+        v-if="renaming"
+        ref="input"
+        v-model="draft"
+        class="rm-view__title-edit"
+        type="text"
+        @click.stop
+        @keydown.enter.prevent="commitRename"
+        @keydown.esc.prevent="renaming = false"
+        @blur="commitRename"
+      >
+      <span v-else class="rm-view__title" @dblclick.stop="renamable && startRename()">
+        {{ view.title }}
+      </span>
+
+      <div class="rm-view__actions" @click.stop>
+        <span v-if="view.active" class="rm-view__badge">
+          <RmIcon name="CheckCircle" :size="12" weight="fill" />
+          {{ T.active }}
+        </span>
+        <RmButton
+          v-else
+          variant="primary-fill"
+          size="sm"
+          @click="emit('activate', view.id)"
+        >
+          {{ T.activate }}
+        </RmButton>
+
+        <div v-if="menu.length" class="rm-view__menu-wrap">
+          <button
+            type="button"
+            class="rm-view__more"
+            :title="T.more"
+            :aria-label="T.more"
+            :aria-expanded="menuOpen"
+            @click="toggleMenu"
+          >
+            <RmIcon name="List" :size="18" />
+          </button>
+          <!-- Le menu se referme au clic dehors : la couche transparente evite
+               d'ecouter le document entier, et empeche au passage un clic
+               d'atteindre la carte (qui activerait la vue). -->
+          <template v-if="menuOpen">
+            <div class="rm-view__menu-shade" @click.stop="menuOpen = false" />
+            <div class="rm-view__menu" role="menu">
+              <button
+                v-for="item in menu"
+                :key="item.key"
+                type="button"
+                class="rm-view__menu-item"
+                :class="{ 'rm-view__menu-item--danger': item.danger }"
+                role="menuitem"
+                @click.stop="pick(item)"
+              >
+                <RmIcon v-if="item.icon" :name="item.icon" :size="16" />
+                {{ item.label }}
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <p v-if="view.description" class="rm-view__desc">{{ view.description }}</p>
+
+    <div v-if="view.config?.length" class="rm-view__config">
+      <div v-for="(row, index) in view.config" :key="index" class="rm-view__row">
+        <span class="rm-view__row-key">
+          <RmIcon v-if="row.icon" :name="row.icon" :size="13" />
+          {{ row.key }}
+        </span>
+        <span class="rm-view__row-val">
+          <template v-if="row.pills?.length">
+            <span v-for="(pill, pillIndex) in row.pills" :key="pillIndex" class="rm-view__pill">
+              <span class="rm-view__pill-k">{{ pill.k }}</span>
+              <span class="rm-view__pill-v">{{ pill.v }}</span>
+            </span>
+          </template>
+          <template v-else>{{ row.value }}</template>
+        </span>
+      </div>
+    </div>
+
+    <div v-if="view.meta?.length" class="rm-view__foot">
+      <span v-for="(item, index) in view.meta" :key="index">
+        <RmIcon v-if="item.icon" :name="item.icon" :size="12" />
+        {{ item.label }}
+      </span>
+    </div>
+
+    <div v-if="pending" class="rm-view__confirm" @click.stop>
+      <span>
+        <RmIcon name="WarningCircle" :size="16" />
+        {{ T.confirmPrefix }} « {{ view.title }} » ?
+      </span>
+      <div class="rm-view__confirm-actions">
+        <RmButton variant="secondary" size="sm" @click="pending = null">
+          {{ T.cancel }}
+        </RmButton>
+        <RmButton variant="danger" size="sm" prefix-icon="Trash" @click="confirmPending">
+          {{ pending.label }}
+        </RmButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-view{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);padding:14px 18px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.rm-view:not(.rm-view--active):hover{background:var(--bg-hover);border-color:var(--color-accent-soft)}.rm-view--active{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.08);cursor:default}.rm-view__strip{background:var(--bg-hover);border-bottom:1px solid var(--border-soft);border-radius:7px 7px 0 0;color:var(--color-secondary);font-size:var(--font-11);font-weight:var(--weight-bold);gap:var(--space-8);letter-spacing:.06em;margin:-14px -18px var(--space-12);padding:var(--space-8) var(--space-16);text-transform:uppercase}.rm-view__head,.rm-view__strip{align-items:center;display:flex}.rm-view__head{gap:10px}.rm-view__star{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;padding:0;width:28px}.rm-view__star:hover{background:var(--bg-hover)}.rm-view__star--on,.rm-view__star:hover{color:var(--color-warning)}.rm-view__title,.rm-view__title-edit{flex:1;font-size:var(--font-16);font-weight:var(--weight-bold);min-width:0}.rm-view__title-edit{background:var(--bg-surface);border:1px solid var(--color-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;outline:none;padding:2px var(--space-8)}.rm-view__title-edit:focus{box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}.rm-view__actions{align-items:center;display:flex;gap:var(--space-8)}.rm-view__badge{align-items:center;background:var(--color-success-bg);border-radius:var(--radius-pill);color:var(--color-success);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:3px var(--space-8);text-transform:uppercase}.rm-view__menu-wrap{position:relative}.rm-view__more{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;height:28px;justify-content:center;padding:0;width:28px}.rm-view__more:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-view__menu-shade{inset:0;position:fixed;z-index:60}.rm-view__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;min-width:200px;padding:var(--space-4);position:absolute;right:0;top:calc(100% + 6px);z-index:61}.rm-view__menu-item{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:var(--space-8);padding:var(--space-8) var(--space-12);text-align:left;width:100%}.rm-view__menu-item:hover{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__menu-item--danger{color:var(--color-danger)}.rm-view__menu-item--danger:hover{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__desc{color:var(--text-secondary);font-size:var(--font-13);margin:var(--space-8) 0 var(--space-12)}.rm-view__config{background:var(--bg-surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-6);margin:10px 0 var(--space-12);padding:10px 14px}.rm-view__row{align-items:flex-start;display:flex;font-size:var(--font-12);gap:14px}.rm-view__row-key{color:var(--text-muted);display:inline-flex;flex-shrink:0;font-size:var(--font-10);font-weight:var(--weight-semibold);letter-spacing:.04em;min-width:96px;padding-top:4px;text-transform:uppercase}.rm-view__row-key,.rm-view__row-val{align-items:center;gap:var(--space-6)}.rm-view__row-val{color:var(--text-primary);display:flex;flex-wrap:wrap;padding:2px 0}.rm-view__pill{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);display:inline-flex;font-size:var(--font-12);gap:var(--space-4);padding:5px 10px}.rm-view__pill-k{color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-view__pill-v{color:var(--text-primary);font-weight:var(--weight-medium)}.rm-view__foot{border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-16);padding-top:10px}.rm-view__foot span{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-view__confirm{align-items:center;background:var(--color-danger-bg);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);display:flex;font-size:var(--font-13);gap:var(--space-12);margin-top:var(--space-12);padding:var(--space-8) var(--space-12)}.rm-view__confirm>span{align-items:center;display:inline-flex;flex:1;gap:var(--space-8)}.rm-view__confirm-actions{display:flex;flex-shrink:0;gap:var(--space-8)}@media (max-width:480px){.rm-view__row{flex-direction:column;gap:var(--space-4)}.rm-view__confirm{flex-wrap:wrap}}
+</style>

package/dist/runtime/components/SavedViews.vue

@@ -0,0 +1,282 @@
+<!--
+  RmSavedViews - le panneau des vues sauvegardees.
+
+  Une vue capture les filtres, le tri et le mode d'affichage d'une analyse.
+  Ce panneau les liste, en active une, et sauvegarde la configuration courante.
+  Il ne connait pas la nature des criteres : l'appelant lui donne des vues
+  deja mises en forme (cf. `RmSavedView`), lui rend les actions.
+
+  L'ordre des elements suit la lecture : ce qu'on peut faire tout de suite
+  (sauvegarder), a qui appartiennent les vues (onglets), comment retrouver la
+  bonne (recherche puis filtres), ce qui demande une decision (la banniere de
+  changements non enregistres), et enfin la liste.
+
+  Recherche et filtres travaillent sur `views` sans rien demander a
+  l'appelant : filtrer une liste deja en memoire n'a pas besoin d'un
+  aller-retour, et une recherche qui remonte au serveur clignote.
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { RmSavedView, RmSavedViewMenuItem } from './SavedViewCard.vue'
+
+export interface RmSavedViewsTab {
+  key: string
+  label: string
+  icon?: string
+  count?: number
+}
+
+const props = withDefaults(
+  defineProps<{
+    views: RmSavedView[]
+    /** Titre du panneau. Vide quand le cadre le porte deja (rail, tiroir). */
+    title?: string
+    /** Phrase d'introduction, ce qu'une vue capture. */
+    description?: string
+    /** Libelle du bouton de sauvegarde. Vide : pas de bouton. */
+    saveLabel?: string
+    /** Rien a sauvegarder (aucun filtre pose, par exemple). */
+    saveDisabled?: boolean
+    /** Onglets de portee. Masques s'il y en a moins de deux. */
+    tabs?: RmSavedViewsTab[]
+    /** Onglet courant (v-model). */
+    tab?: string
+    /** Menu d'une carte, passe tel quel a `RmSavedViewCard`. */
+    menu?: RmSavedViewMenuItem[]
+    renamable?: boolean
+    starrable?: boolean
+    /** Chargement : la liste pose son squelette. */
+    loading?: boolean
+    /** Nom de la vue active dont la configuration a change a l'ecran. */
+    dirtyTitle?: string
+    /** Textes de l'etat vide. */
+    emptyTitle?: string
+    emptyText?: string
+    emptyActionLabel?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    title: '',
+    description: '',
+    saveLabel: '',
+    saveDisabled: false,
+    tabs: () => [],
+    tab: '',
+    menu: () => [],
+    renamable: false,
+    starrable: false,
+    loading: false,
+    dirtyTitle: '',
+    emptyTitle: '',
+    emptyText: '',
+    emptyActionLabel: '',
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  'update:tab': [key: string]
+  'save-current': []
+  activate: [id: string]
+  star: [id: string]
+  rename: [id: string, title: string]
+  action: [key: string, id: string]
+  /** Banniere : abandonner les changements, les sauvegarder, en faire une vue. */
+  discard: []
+  save: []
+  'save-as': []
+}>()
+
+const en = computed(() => props.lang === 'en')
+
+const T = computed(() => ({
+  search: en.value ? 'Search a view by name or author...' : 'Rechercher une vue par nom ou auteur...',
+  all: en.value ? 'All' : 'Toutes',
+  starred: en.value ? 'Favorites' : 'Favoris',
+  recent: en.value ? 'Recent' : 'Récentes',
+  isDefault: en.value ? 'Default' : 'Par défaut',
+  dirty: en.value ? 'has unsaved changes.' : 'a des changements non enregistrés.',
+  discard: en.value ? 'Discard' : 'Annuler',
+  saveAs: en.value ? 'Save as new' : 'Sauver comme nouvelle',
+  save: en.value ? 'Save' : 'Sauver',
+  noMatch: en.value ? 'No view matches your search' : 'Aucune vue ne correspond à votre recherche',
+  noMatchText: en.value
+    ? 'Change the name you are looking for, or clear the active filter.'
+    : 'Modifiez le nom recherché, ou retirez le filtre actif.',
+  emptyTitle: en.value ? 'No saved view' : 'Aucune vue sauvegardée',
+  emptyText: en.value
+    ? 'Capture your filters, sort and display in a reusable view. You can then find it instantly or set it as default.'
+    : "Capturez vos filtres, votre tri et votre affichage dans une vue réutilisable. Vous pourrez ensuite la retrouver instantanément, ou la définir par défaut.",
+  defaultTip: en.value
+    ? 'Mark a view as default from its menu, it will apply when you open this page.'
+    : "Astuce : marquez une vue par défaut depuis son menu, elle s'activera à l'ouverture de cette page.",
+}))
+
+const search = ref('')
+
+type Chip = 'all' | 'starred' | 'recent' | 'default'
+const chip = ref<Chip>('all')
+
+/** « Recentes » : modifiees dans les trente derniers jours. */
+const RECENT_DAYS = 30
+
+function isRecent(view: RmSavedView) {
+  if (!view.updatedAt) return false
+  const time = new Date(view.updatedAt).getTime()
+  if (Number.isNaN(time)) return false
+  return Date.now() - time <= RECENT_DAYS * 24 * 3600 * 1000
+}
+
+const chips = computed(() => [
+  { key: 'all' as Chip, label: T.value.all, icon: 'List', count: props.views.length },
+  { key: 'starred' as Chip, label: T.value.starred, icon: 'Star' },
+  { key: 'recent' as Chip, label: T.value.recent, icon: 'Clock' },
+  { key: 'default' as Chip, label: T.value.isDefault, icon: 'PushPin' },
+])
+
+const shown = computed(() => {
+  const needle = search.value.trim().toLowerCase()
+  return props.views.filter((view) => {
+    if (chip.value === 'starred' && !view.starred) return false
+    if (chip.value === 'default' && !view.isDefault) return false
+    if (chip.value === 'recent' && !isRecent(view)) return false
+    if (!needle) return true
+    const hay = `${view.title} ${view.description ?? ''} ${view.meta?.map((m) => m.label).join(' ') ?? ''}`
+    return hay.toLowerCase().includes(needle)
+  })
+})
+
+/** Liste vide faute de vue, ou vide faute de correspondance : deux messages. */
+const filtered = computed(() => props.views.length > 0 && shown.value.length === 0)
+
+/** L'astuce ne sort que s'il y a des vues et qu'aucune ne s'applique seule. */
+const showDefaultTip = computed(
+  () => props.views.length > 0 && !props.views.some((view) => view.isDefault),
+)
+
+const visibleTabs = computed(() => (props.tabs.length > 1 ? props.tabs : []))
+</script>
+
+<template>
+  <div class="rm-views">
+    <div v-if="title || saveLabel" class="rm-views__head">
+      <h2 v-if="title" class="rm-views__title">{{ title }}</h2>
+      <RmButton
+        v-if="saveLabel"
+        variant="primary-fill"
+        size="sm"
+        prefix-icon="BookmarkSimple"
+        :disabled="saveDisabled"
+        :block="!title"
+        @click="emit('save-current')"
+      >
+        {{ saveLabel }}
+      </RmButton>
+    </div>
+
+    <p v-if="description" class="rm-views__desc">{{ description }}</p>
+
+    <div v-if="visibleTabs.length" class="rm-views__tabs" role="tablist">
+      <button
+        v-for="item in visibleTabs"
+        :key="item.key"
+        type="button"
+        class="rm-views__tab"
+        :class="{ 'rm-views__tab--active': item.key === tab }"
+        role="tab"
+        :aria-selected="item.key === tab"
+        @click="emit('update:tab', item.key)"
+      >
+        <RmIcon v-if="item.icon" :name="item.icon" :size="16" />
+        {{ item.label }}
+        <span v-if="item.count !== undefined" class="rm-views__tab-count">{{ item.count }}</span>
+      </button>
+    </div>
+
+    <template v-if="views.length > 1">
+      <label class="rm-views__search">
+        <RmIcon name="MagnifyingGlass" :size="14" />
+        <input v-model="search" type="text" :placeholder="T.search">
+      </label>
+
+      <div class="rm-views__chips" role="group">
+        <button
+          v-for="item in chips"
+          :key="item.key"
+          type="button"
+          class="rm-views__chip"
+          :class="{ 'rm-views__chip--on': chip === item.key }"
+          :aria-pressed="chip === item.key"
+          @click="chip = item.key"
+        >
+          <RmIcon :name="item.icon" :size="12" :weight="chip === item.key ? 'fill' : 'regular'" />
+          {{ item.label }}
+          <span v-if="item.count !== undefined" class="rm-views__chip-count">{{ item.count }}</span>
+        </button>
+      </div>
+    </template>
+
+    <RmCallout v-if="dirtyTitle" tone="warning" class="rm-views__banner">
+      <b>« {{ dirtyTitle }} »</b> {{ T.dirty }}
+      <template #actions>
+        <RmButton variant="secondary" size="sm" @click="emit('discard')">
+          {{ T.discard }}
+        </RmButton>
+        <RmButton variant="secondary" size="sm" @click="emit('save-as')">
+          {{ T.saveAs }}
+        </RmButton>
+        <RmButton variant="primary-fill" size="sm" @click="emit('save')">
+          {{ T.save }}
+        </RmButton>
+      </template>
+    </RmCallout>
+
+    <slot name="before-list" />
+
+    <div v-if="loading" class="rm-views__list">
+      <RmSkeleton v-for="index in 3" :key="index" width="100%" :height="132" radius="var(--radius-lg)" />
+    </div>
+
+    <RmEmptyState
+      v-else-if="!views.length"
+      framed
+      tone="primary"
+      icon="BookmarkSimple"
+      :title="emptyTitle || T.emptyTitle"
+      :text="emptyText || T.emptyText"
+      :action-label="emptyActionLabel"
+      action-icon="BookmarkSimple"
+      @action="emit('save-current')"
+    />
+
+    <RmEmptyState
+      v-else-if="filtered"
+      framed
+      icon="MagnifyingGlass"
+      :title="T.noMatch"
+      :text="T.noMatchText"
+    />
+
+    <div v-else class="rm-views__list">
+      <RmSavedViewCard
+        v-for="view in shown"
+        :key="view.id"
+        :view="view"
+        :menu="menu"
+        :renamable="renamable"
+        :starrable="starrable"
+        :lang="lang"
+        @activate="emit('activate', $event)"
+        @star="emit('star', $event)"
+        @rename="(id, value) => emit('rename', id, value)"
+        @action="(key, id) => emit('action', key, id)"
+      />
+
+      <RmCallout v-if="showDefaultTip" tone="info" :text="T.defaultTip" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-views{flex-direction:column;font-family:var(--font-sans)}.rm-views,.rm-views__head{display:flex;gap:var(--space-12)}.rm-views__head{align-items:center;justify-content:space-between}.rm-views__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-22);font-weight:var(--weight-bold);margin:0}.rm-views__desc{color:var(--text-secondary);font-size:var(--font-13);line-height:1.5;margin:0}.rm-views__tabs{align-items:stretch;border-bottom:1px solid var(--border-default);display:flex}.rm-views__tab{align-items:center;background:none;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-semibold);gap:var(--space-6);padding:var(--space-12) var(--space-16);transition:color var(--duration-fast) var(--ease-out)}.rm-views__tab:hover{color:var(--text-primary)}.rm-views__tab--active{background:linear-gradient(180deg,transparent 30%,rgba(var(--brand-rgb),.06) 100%);border-bottom-color:var(--color-primary);border-radius:6px 6px 0 0;color:var(--color-primary);font-weight:var(--weight-bold)}.rm-views__tab-count{background:var(--bg-surface-3);border-radius:var(--radius-pill);color:var(--text-muted);font-size:var(--font-11);font-variant-numeric:tabular-nums;font-weight:var(--weight-bold);min-width:18px;padding:0 var(--space-6);text-align:center}.rm-views__tab--active .rm-views__tab-count{background:var(--bg-hover);color:var(--color-secondary)}.rm-views__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-views__search:focus-within{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1)}.rm-views__search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:inherit;font-size:var(--font-13);min-width:0;outline:none}.rm-views__search input::-moz-placeholder{color:var(--text-muted)}.rm-views__search input::placeholder{color:var(--text-muted)}.rm-views__chips{display:flex;flex-wrap:wrap;gap:var(--space-6)}.rm-views__chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-12);gap:var(--space-4);padding:5px 10px}.rm-views__chip:hover{background:var(--bg-surface-3)}.rm-views__chip--on{background:var(--bg-hover);border-color:var(--color-violet-pale);color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-views__chip-count{font-variant-numeric:tabular-nums;opacity:.8}.rm-views__list{display:flex;flex-direction:column;gap:var(--space-12)}
+</style>

package/package.json

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