@tekkare/romulus 0.1.30 → 0.1.32

package/dist/module.json

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

package/dist/runtime/assets/styles/components.css

@@ -1 +1 @@
-.grid-2{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}.grid-2-1{display:grid;gap:20px;grid-template-columns:2fr 1fr}.pane-title{color:var(--text-primary);font-family:var(--font-serif);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 16px}.pane-sub{color:var(--text-muted);font-size:13px;line-height:1.55;margin:0 0 24px;max-width:78ch}.chart-section{margin-inline:auto;max-width:var(--content-max-w,1440px);padding:0 0 40px;width:100%}.section-label{align-items:center;color:var(--text-secondary);display:flex;font-size:11px;font-weight:700;gap:8px;letter-spacing:.12em;margin:40px 0 18px;text-transform:uppercase}body.text-large .pane-title{font-size:38px}body.text-xl .pane-title{font-size:46px}body.text-large .section-label{font-size:13px}body.text-xl .section-label{font-size:14px}.chart-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}.chart-card:hover{border-color:var(--color-violet-pale);box-shadow:0 6px 16px rgba(107,63,255,.1),0 1px 3px rgba(30,41,59,.04)}.chart-card-head{padding:22px 64px 14px 24px;position:relative}.chart-card-title{color:var(--text-primary);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 5px}.chart-card-context{color:var(--text-muted);font-size:12px;line-height:1.55;margin:0}.chart-card-actions{position:absolute;right:12px;top:12px}.cc-export{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:background .15s,color .15s,border-color .15s;width:28px}.cc-export:hover{color:var(--color-secondary)}.cc-export:hover,.chart-card-actions.open .cc-export{background:var(--bg-hover);border-color:var(--color-violet-pale)}.chart-card-actions.open .cc-export{color:var(--color-primary)}.cc-menu{animation:cc-menu-in .12s cubic-bezier(.2,0,0,1);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);display:none;min-width:200px;padding:6px 0;position:absolute;right:0;top:34px;z-index:var(--z-modal)}.chart-card-actions.open .cc-menu{display:block}.cc-menu-section{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 14px 4px;text-transform:uppercase}.cc-menu-item{align-items:center;background:none;border:0;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:13px;gap:10px;padding:7px 14px;text-align:left;width:100%}.cc-menu-item i{color:var(--text-muted);font-size:14px}.cc-menu-item:hover{background:var(--bg-surface-3);color:var(--text-primary)}.cc-menu-item:hover i{color:var(--text-secondary)}.cc-menu-divider{background:var(--bg-surface-3);height:1px;margin:4px 0}@keyframes cc-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chart-card-body{flex:1;padding:4px 12px 8px}.chart-card-foot{align-items:center;background:var(--bg-surface-2);border-radius:0 0 10px 10px;border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:11px;gap:10px;padding:12px 24px}.chart-card-foot .src{align-items:center;display:flex;gap:4px}.chart-card-foot .src b{color:var(--text-secondary);font-weight:600}.chart-card-foot .dot{background:var(--border-default);border-radius:50%;height:3px;width:3px}.chart-card-foot .updated{color:var(--text-secondary);font-weight:500}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 2px 8px rgba(30,41,59,.06);padding:16px 18px}.kpi-label{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.1em;margin:0 0 6px;text-transform:uppercase}.kpi-value{color:var(--color-primary);font-family:var(--font-serif);font-size:28px;font-weight:700;line-height:1;margin:0}.kpi-value.healthcare{color:var(--color-healthcare)}.kpi-value.discovery{color:var(--color-discovery)}.kpi-value.pharma{color:var(--color-pharma)}.kpi-value.databank{color:var(--color-databank)}.kpi-trend{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:4px;margin-top:6px}.kpi-trend i{font-size:11px}.kpi-trend--up{color:var(--color-success)}.kpi-trend--down{color:var(--color-danger)}.kpi-foot,.kpi-trend--flat{color:var(--text-muted)}.kpi-foot{font-size:11px;margin-top:4px}.badge{border-radius:4px;display:inline-block;font-size:10px;font-weight:600;padding:2px 8px}.badge-active{background:var(--color-success-bg);color:var(--color-success)}.badge-pending{background:var(--color-warning-bg);color:var(--color-warning)}.badge-error{background:var(--color-danger-bg);color:var(--color-danger)}.badge-info{background:var(--bg-hover);color:var(--color-primary)}.badge-grey{background:var(--bg-surface-3);color:var(--text-secondary)}table.tk{border-collapse:collapse;font-size:13px;width:100%}.sr-only,table.tk>caption.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}table.tk caption{caption-side:top;color:var(--text-primary);font-size:var(--font-13);font-weight:var(--weight-bold);padding:0 0 var(--space-8);text-align:left}table.tk th{background:var(--bg-surface-2);border-bottom:1px solid var(--border-default);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 14px;text-align:left;text-transform:uppercase}table.tk tbody th[scope=row]{background:transparent;font-size:var(--font-13);font-weight:var(--weight-bold);letter-spacing:0;text-transform:none}table.tk tbody th[scope=row],table.tk td{border-bottom:1px solid var(--border-soft);color:var(--text-primary)}table.tk td{padding:12px 14px}table.tk tbody tr:nth-child(2n) td,table.tk tbody tr:nth-child(2n) th[scope=row]{background:var(--bg-surface-2)}table.tk tbody tr:hover td,table.tk tbody tr:hover th[scope=row]{background:var(--bg-hover)}table.tk th[aria-sort]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}table.tk th[aria-sort]:hover{color:var(--text-primary)}.tk-wrap{overflow-x:auto}.tk-num{font-variant-numeric:tabular-nums;text-align:right}.nav-group{display:flex;flex-direction:column}.nav-group-header{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:11px;font-weight:700;gap:8px;letter-spacing:.08em;padding:8px 12px;text-align:left;text-transform:uppercase;transition:color var(--duration-fast) var(--ease-out);width:100%}.nav-group-header:hover{color:var(--text-secondary)}.nav-group-header .caret{display:inline-flex;margin-left:auto;transition:transform var(--duration-fast) var(--ease-out)}.nav-group[data-open=true]>.nav-group-header{color:var(--color-primary)}.nav-group[data-open=true]>.nav-group-header .caret{transform:rotate(180deg)}.nav-group-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.cc-export:focus-visible,.cc-menu-item:focus-visible,.chart-card :focus-visible,.nav-group-header:focus-visible,table.tk th[aria-sort]:focus-visible{box-shadow:var(--shadow-focus);outline:2px solid var(--color-secondary);outline-offset:2px}.cc-menu-item,.nav-group-header{min-height:40px}body.text-large .kpi-label{font-size:13px}body.text-large .kpi-value{font-size:34px}body.text-large .kpi-trend{font-size:14px}body.text-large .kpi-foot{font-size:13px}body.text-large .chart-card-title{font-size:17px}body.text-large .chart-card-context{font-size:14px}body.text-large .chart-card-foot{font-size:12px}body.text-large .badge{font-size:12px;padding:3px 9px}body.text-large table.tk{font-size:15px}body.text-large table.tk th{font-size:13px}body.text-xl .kpi-label{font-size:14px}body.text-xl .kpi-value{font-size:40px}body.text-xl .kpi-trend{font-size:16px}body.text-xl .kpi-foot{font-size:14px}body.text-xl .chart-card-title{font-size:20px}body.text-xl .chart-card-context{font-size:16px}body.text-xl .chart-card-foot{font-size:14px}body.text-xl .badge{font-size:14px;padding:3px 10px}body.text-xl table.tk{font-size:16px}body.text-xl table.tk th{font-size:14px}body.high-contrast .cc-export,body.high-contrast .cc-menu,body.high-contrast .chart-card,body.high-contrast .kpi-card{border-width:2px}body.high-contrast .chart-card:hover{border-color:var(--border-default)}body.rm-switching,body.rm-switching *,body.rm-switching :after,body.rm-switching :before,body.theme-switching,body.theme-switching *,body.theme-switching :after,body.theme-switching :before{transition:none!important}body.high-contrast *{box-shadow:none!important}
+.grid-2{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}.grid-2-1{display:grid;gap:20px;grid-template-columns:2fr 1fr}.pane-title{color:var(--text-primary);font-family:var(--font-serif);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 16px}.pane-sub{color:var(--text-muted);font-size:13px;line-height:1.55;margin:0 0 24px;max-width:78ch}.chart-section{margin-inline:auto;max-width:var(--content-max-w,1440px);padding:0 0 40px;width:100%}.section-label{align-items:center;color:var(--text-secondary);display:flex;font-size:11px;font-weight:700;gap:8px;letter-spacing:.12em;margin:40px 0 18px;text-transform:uppercase}body.text-large .pane-title{font-size:38px}body.text-xl .pane-title{font-size:46px}body.text-large .section-label{font-size:13px}body.text-xl .section-label{font-size:14px}.chart-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}.chart-card:hover{border-color:var(--color-violet-pale);box-shadow:0 6px 16px rgba(107,63,255,.1),0 1px 3px rgba(30,41,59,.04)}.chart-card-head{padding:22px 64px 14px 24px;position:relative}.chart-card-title{color:var(--text-primary);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 5px}.chart-card-context{color:var(--text-muted);font-size:12px;line-height:1.55;margin:0}.chart-card-actions{position:absolute;right:12px;top:12px}.cc-export{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:background .15s,color .15s,border-color .15s;width:28px}.cc-export:hover{color:var(--color-secondary)}.cc-export:hover,.chart-card-actions.open .cc-export{background:var(--bg-hover);border-color:var(--color-violet-pale)}.chart-card-actions.open .cc-export{color:var(--color-primary)}.cc-menu{animation:cc-menu-in .12s cubic-bezier(.2,0,0,1);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);display:none;min-width:200px;padding:6px 0;position:absolute;right:0;top:34px;z-index:var(--z-modal)}.chart-card-actions.open .cc-menu{display:block}.cc-menu-section{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 14px 4px;text-transform:uppercase}.cc-menu-item{align-items:center;background:none;border:0;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:13px;gap:10px;padding:7px 14px;text-align:left;width:100%}.cc-menu-item i{color:var(--text-muted);font-size:14px}.cc-menu-item:hover{background:var(--bg-surface-3);color:var(--text-primary)}.cc-menu-item:hover i{color:var(--text-secondary)}.cc-menu-divider{background:var(--bg-surface-3);height:1px;margin:4px 0}@keyframes cc-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chart-card-body{flex:1;padding:4px 12px 8px}.chart-card-body>.rm-empty{box-sizing:border-box;gap:6px;justify-content:center;max-width:none;min-height:240px;padding:36px 24px}.chart-card-foot{align-items:center;background:var(--bg-surface-2);border-radius:0 0 10px 10px;border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:11px;gap:10px;padding:12px 24px}.chart-card-foot .src{align-items:center;display:flex;gap:4px}.chart-card-foot .src b{color:var(--text-secondary);font-weight:600}.chart-card-foot .dot{background:var(--border-default);border-radius:50%;height:3px;width:3px}.chart-card-foot .updated{color:var(--text-secondary);font-weight:500}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 2px 8px rgba(30,41,59,.06);padding:16px 18px}.kpi-label{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.1em;margin:0 0 6px;text-transform:uppercase}.kpi-value{color:var(--color-primary);font-family:var(--font-serif);font-size:28px;font-weight:700;line-height:1;margin:0}.kpi-value.healthcare{color:var(--color-healthcare)}.kpi-value.discovery{color:var(--color-discovery)}.kpi-value.pharma{color:var(--color-pharma)}.kpi-value.databank{color:var(--color-databank)}.kpi-trend{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:4px;margin-top:6px}.kpi-trend i{font-size:11px}.kpi-trend--up{color:var(--color-success)}.kpi-trend--down{color:var(--color-danger)}.kpi-foot,.kpi-trend--flat{color:var(--text-muted)}.kpi-foot{font-size:11px;margin-top:4px}.badge{border-radius:4px;display:inline-block;font-size:10px;font-weight:600;padding:2px 8px}.badge-active{background:var(--color-success-bg);color:var(--color-success)}.badge-pending{background:var(--color-warning-bg);color:var(--color-warning)}.badge-error{background:var(--color-danger-bg);color:var(--color-danger)}.badge-info{background:var(--bg-hover);color:var(--color-primary)}.badge-grey{background:var(--bg-surface-3);color:var(--text-secondary)}table.tk{border-collapse:collapse;font-size:13px;width:100%}.sr-only,table.tk>caption.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}table.tk caption{caption-side:top;color:var(--text-primary);font-size:var(--font-13);font-weight:var(--weight-bold);padding:0 0 var(--space-8);text-align:left}table.tk th{background:var(--bg-surface-2);border-bottom:1px solid var(--border-default);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 14px;text-align:left;text-transform:uppercase}table.tk tbody th[scope=row]{background:transparent;font-size:var(--font-13);font-weight:var(--weight-bold);letter-spacing:0;text-transform:none}table.tk tbody th[scope=row],table.tk td{border-bottom:1px solid var(--border-soft);color:var(--text-primary)}table.tk td{padding:12px 14px}table.tk tbody tr:nth-child(2n) td,table.tk tbody tr:nth-child(2n) th[scope=row]{background:var(--bg-surface-2)}table.tk tbody tr:hover td,table.tk tbody tr:hover th[scope=row]{background:var(--bg-hover)}table.tk th[aria-sort]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}table.tk th[aria-sort]:hover{color:var(--text-primary)}.tk-wrap{overflow-x:auto}.tk-num{font-variant-numeric:tabular-nums;text-align:right}.tk-skeleton{height:14px;width:80%}.tk-empty{color:var(--text-muted);text-align:center}.nav-group{display:flex;flex-direction:column}.nav-group-header{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:11px;font-weight:700;gap:8px;letter-spacing:.08em;padding:8px 12px;text-align:left;text-transform:uppercase;transition:color var(--duration-fast) var(--ease-out);width:100%}.nav-group-header:hover{color:var(--text-secondary)}.nav-group-header .caret{display:inline-flex;margin-left:auto;transition:transform var(--duration-fast) var(--ease-out)}.nav-group[data-open=true]>.nav-group-header{color:var(--color-primary)}.nav-group[data-open=true]>.nav-group-header .caret{transform:rotate(180deg)}.nav-group-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.cc-export:focus-visible,.cc-menu-item:focus-visible,.chart-card :focus-visible,.nav-group-header:focus-visible,table.tk th[aria-sort]:focus-visible{box-shadow:var(--shadow-focus);outline:2px solid var(--color-secondary);outline-offset:2px}.cc-menu-item,.nav-group-header{min-height:40px}body.text-large .kpi-label{font-size:13px}body.text-large .kpi-value{font-size:34px}body.text-large .kpi-trend{font-size:14px}body.text-large .kpi-foot{font-size:13px}body.text-large .chart-card-title{font-size:17px}body.text-large .chart-card-context{font-size:14px}body.text-large .chart-card-foot{font-size:12px}body.text-large .badge{font-size:12px;padding:3px 9px}body.text-large table.tk{font-size:15px}body.text-large table.tk th{font-size:13px}body.text-xl .kpi-label{font-size:14px}body.text-xl .kpi-value{font-size:40px}body.text-xl .kpi-trend{font-size:16px}body.text-xl .kpi-foot{font-size:14px}body.text-xl .chart-card-title{font-size:20px}body.text-xl .chart-card-context{font-size:16px}body.text-xl .chart-card-foot{font-size:14px}body.text-xl .badge{font-size:14px;padding:3px 10px}body.text-xl table.tk{font-size:16px}body.text-xl table.tk th{font-size:14px}body.high-contrast .cc-export,body.high-contrast .cc-menu,body.high-contrast .chart-card,body.high-contrast .kpi-card{border-width:2px}body.high-contrast .chart-card:hover{border-color:var(--border-default)}body.rm-switching,body.rm-switching *,body.rm-switching :after,body.rm-switching :before,body.theme-switching,body.theme-switching *,body.theme-switching :after,body.theme-switching :before{transition:none!important}body.high-contrast *{box-shadow:none!important}.rm-skeleton{animation:rm-skeleton-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--bg-hover) 0,var(--bg-surface-2) 50%,var(--bg-hover) 100%);background-size:200% 100%;border-radius:var(--radius-md)}@keyframes rm-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.rm-skeleton{animation:none;background:var(--bg-hover)}}.rm-state-loading{display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:240px;padding:8px 4px}.rm-spinner{animation:rm-spinner-turn .8s linear infinite;border:3px solid var(--border-default);border-radius:50%;border-top-color:var(--color-secondary);height:32px;width:32px}@keyframes rm-spinner-turn{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.rm-spinner{animation-duration:3s}}.rm-state{color:var(--text-secondary);flex-direction:column;font-family:var(--font-sans);gap:6px;min-height:240px;padding:36px 24px;text-align:center}.rm-state,.rm-state__icon{align-items:center;display:flex;justify-content:center}.rm-state__icon{background:var(--bg-surface-3);border-radius:50%;color:var(--text-muted);height:56px;margin-bottom:6px;width:56px}.rm-state__title{color:var(--text-primary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:0}.rm-state__text{color:var(--text-muted);font-size:var(--font-12);line-height:1.5;margin:0;max-width:280px}.rm-state__action{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-12);font-weight:var(--weight-semibold);gap:6px;margin-top:10px;padding:6px 14px}.rm-state__action:hover{background:var(--bg-surface-3);color:var(--text-primary)}.rm-state--error .rm-state__icon{background:var(--color-danger-bg);color:var(--color-danger)}.rm-state--error .rm-state__action{border-color:var(--color-danger);color:var(--color-danger)}.rm-state--error .rm-state__action:hover{background:var(--color-danger-bg)}

package/dist/runtime/components/AdvancedSearch.vue

@@ -1,129 +1,163 @@
+<!--
+  Constructeur de recherche complexe : une ligne par terme, chacune reliee aux
+  precedentes par ET, OU ou SAUF.
+
+  Le composant ne garde pas d'etat : les lignes vivent chez l'appelant
+  (`v-model`), qui les traduit en requete. Il vit dans le panneau
+  « Recherche avancee » de RmFilterBar (slot #Advanced), a cote des panneaux
+  Filtres et Personnaliser.
+
+  L'operateur se choisit en ajoutant la ligne (« + and », « | or », « − not »)
+  et se change ensuite en cliquant sa pastille, qui tourne and → or → not.
+  La premiere ligne n'a pas d'operateur : il n'y a rien avant elle.
+-->
 <script setup lang="ts">
-import {
-  PhTrash,
-  PhPlus,
-  PhLineVertical,
-  PhMinus,
-} from '@phosphor-icons/vue'
-
-export interface AdvancedSearchRow {
+import { computed, ref, watch } from 'vue'
+
+export type RmSearchOperator = 'and' | 'or' | 'not'
+
+export type RmSearchRow = {
+  /** Identite stable de la ligne, pour la cle de rendu. */
   id: number
-  type: 'and' | 'or' | 'not'
+  type: RmSearchOperator
   value: string
 }
 
-defineProps<{
-  visible: boolean
-}>()
-
-const emit = defineEmits<{
-  close: []
-  saveSearch: []
-  apply: [rows: AdvancedSearchRow[]]
-  clear: []
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: RmSearchRow[]
+    lang?: 'fr' | 'en'
+    /** Placeholder des champs de terme. */
+    placeholder?: string
+  }>(),
+  { lang: 'fr', placeholder: '' },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [rows: RmSearchRow[]] }>()
+
+const LABELS = {
+  fr: { keyword: 'Mot-clé', clear: 'Tout effacer', remove: 'Retirer cette ligne' },
+  en: { keyword: 'Keyword', clear: 'Clear all', remove: 'Remove this row' },
+} as const
+
+const t = computed(() => LABELS[props.lang] ?? LABELS.fr)
+const ORDER: RmSearchOperator[] = ['and', 'or', 'not']
+
+/** Toujours une ligne a remplir, sinon le panneau s'ouvre vide. */
+function normalize(list: RmSearchRow[]): RmSearchRow[] {
+  return list.length > 0 ? list.map((row) => ({ ...row })) : [{ id: 0, type: 'and', value: '' }]
+}
 
-let nextId = 1
+function same(a: RmSearchRow[], b: RmSearchRow[]) {
+  return (
+    a.length === b.length &&
+    a.every((row, i) => row.id === b[i]?.id && row.type === b[i]?.type && row.value === b[i]?.value)
+  )
+}
 
-const rows = ref<AdvancedSearchRow[]>([
-  { id: nextId++, type: 'and', value: '' },
-])
+/**
+ * Les lignes sont editees en local puis publiees.
+ *
+ * Lier les champs directement a `modelValue` faisait un aller-retour par
+ * frappe : le parent republie, le champ se repatche, et une frappe rapide se
+ * perdait dans l'intervalle. Le parent ne renvoie donc l'etat que quand il
+ * change vraiment ailleurs (la barre de recherche, un scope repris).
+ */
+const rows = ref<RmSearchRow[]>(normalize(props.modelValue))
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!same(val, rows.value)) rows.value = normalize(val)
+  },
+  { deep: true },
+)
+
+function nextId() {
+  return rows.value.reduce((max, row) => Math.max(max, row.id), 0) + 1
+}
 
-let debounceTimer: ReturnType<typeof setTimeout>
+/** La premiere ligne n'est reliee a rien : son operateur est toujours ET. */
+function commit() {
+  emit(
+    'update:modelValue',
+    rows.value.map((row, i) => (i === 0 ? { ...row, type: 'and' } : { ...row })),
+  )
+}
 
-function emitApply() {
-  clearTimeout(debounceTimer)
-  debounceTimer = setTimeout(() => {
-    emit('apply', rows.value.filter(r => r.value.trim() !== ''))
-  }, 500)
+function cycleType(row: RmSearchRow) {
+  row.type = ORDER[(ORDER.indexOf(row.type) + 1) % ORDER.length]
+  commit()
 }
 
-function addRow(type: 'and' | 'or' | 'not') {
-  rows.value.push({ id: nextId++, type, value: '' })
+function addRow(type: RmSearchOperator) {
+  rows.value.push({ id: nextId(), type, value: '' })
+  commit()
 }
 
 function removeRow(id: number) {
-  rows.value = rows.value.filter(r => r.id !== id)
-  if (rows.value.length === 0) {
-    rows.value.push({ id: nextId++, type: 'and', value: '' })
-  }
-  emitApply()
+  rows.value = normalize(rows.value.filter((row) => row.id !== id))
+  commit()
 }
 
 function clearAll() {
-  rows.value = [{ id: nextId++, type: 'and', value: '' }]
-  emit('clear')
-  emitApply()
-}
-
-const typeColors: Record<string, string> = {
-  and: 'var(--color-healthcare)',
-  or: 'var(--color-discovery)',
-  not: 'var(--color-pharma)',
+  rows.value = normalize([])
+  commit()
 }
 </script>
 
 <template>
-  <div v-if="visible" class="advanced-search">
-    <div class="advanced-search__header">
-      <h2 class="advanced-search__title">Advanced search</h2>
-      <RmButton variant="outline" size="sm" @click="$emit('saveSearch')">
-        Save search
-      </RmButton>
-    </div>
-
-    <div class="advanced-search__rows">
-      <div
-        v-for="row in rows"
-        :key="row.id"
-        class="advanced-search__row"
-      >
-        <span
-          class="advanced-search__type"
-          :style="{ color: typeColors[row.type] }"
+  <div class="rm-asearch">
+    <div class="rm-asearch__rows">
+      <div v-for="(row, index) in rows" :key="row.id" class="rm-asearch__row">
+        <button
+          v-if="index > 0"
+          type="button"
+          class="rm-asearch__type"
+          :class="`rm-asearch__type--${row.type}`"
+          @click="cycleType(row)"
         >
-          {{ row.type.charAt(0).toUpperCase() + row.type.slice(1) }}
-        </span>
+          {{ row.type }}
+        </button>
+        <span v-else class="rm-asearch__type rm-asearch__type--first">and</span>
+
         <input
           v-model="row.value"
           type="text"
-          placeholder="Add a keyword"
-          class="advanced-search__input"
-          :class="{
-            'advanced-search__input--and': row.type === 'and',
-            'advanced-search__input--or': row.type === 'or',
-            'advanced-search__input--not': row.type === 'not',
-          }"
-          @input="emitApply"
-          @keydown.enter="emitApply"
+          class="rm-asearch__input"
+          :placeholder="placeholder || t.keyword"
+          @input="commit"
         >
-        <button class="advanced-search__delete" @click="removeRow(row.id)">
-          <PhTrash :size="16" />
+
+        <button
+          type="button"
+          class="rm-asearch__remove"
+          :aria-label="t.remove"
+          @click="removeRow(row.id)"
+        >
+          <RmIcon name="Trash" :size="16" />
         </button>
       </div>
     </div>
 
-    <div class="advanced-search__actions">
-      <button class="advanced-search__add" @click="addRow('and')">
-        <PhPlus :size="12" />
-        and
+    <div class="rm-asearch__actions">
+      <button type="button" class="rm-asearch__add rm-asearch__add--and" @click="addRow('and')">
+        <RmIcon name="Plus" :size="12" /> and
       </button>
-      <button class="advanced-search__add" @click="addRow('or')">
-        <PhLineVertical :size="12" />
-        or
+      <button type="button" class="rm-asearch__add rm-asearch__add--or" @click="addRow('or')">
+        <RmIcon name="LineVertical" :size="12" /> or
       </button>
-      <button class="advanced-search__add" @click="addRow('not')">
-        <PhMinus :size="12" />
-        not
+      <button type="button" class="rm-asearch__add rm-asearch__add--not" @click="addRow('not')">
+        <RmIcon name="Minus" :size="12" /> not
       </button>
-    </div>
 
-    <button class="advanced-search__clear" @click="clearAll">
-      Clear All
-    </button>
+      <button type="button" class="rm-asearch__clear" @click="clearAll">
+        {{ t.clear }}
+      </button>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.advanced-search{background-color:var(--color-text-inverse);border-bottom:1px solid var(--border-default);padding:20px 24px}.advanced-search__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.advanced-search__title{color:var(--text-primary);font-family:var(--font-sans);font-size:16px;font-weight:700;margin:0}.advanced-search__rows{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.advanced-search__row{align-items:center;display:flex;gap:12px}.advanced-search__type{flex-shrink:0;font-weight:600;min-width:32px}.advanced-search__input,.advanced-search__type{font-family:var(--font-sans);font-size:var(--font-14)}.advanced-search__input{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-primary);flex:1;height:36px;outline:none;padding:0 12px;transition:border-color var(--duration-fast) var(--ease-in-out)}.advanced-search__input--and:focus,.advanced-search__input:focus{border-color:var(--color-healthcare)}.advanced-search__input--or:focus{border-color:var(--color-discovery)}.advanced-search__input--not,.advanced-search__input--not:focus{border-color:var(--color-pharma)}.advanced-search__input::-moz-placeholder{color:var(--text-muted)}.advanced-search__input::placeholder{color:var(--text-muted)}.advanced-search__delete{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-muted);cursor:pointer;display:flex;justify-content:center;padding:4px;transition:color var(--duration-fast) var(--ease-in-out)}.advanced-search__delete:hover{color:var(--color-danger)}.advanced-search__actions{display:flex;gap:8px;margin-bottom:16px}.advanced-search__add{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:4px;height:32px;padding:4px 12px;transition:all var(--duration-fast) var(--ease-in-out)}.advanced-search__add:hover{border-color:var(--border-default);box-shadow:0 1px 2px 0 rgba(var(--shadow-rgb),.1)}.advanced-search__clear{background:none;border:1px solid var(--color-danger);border-radius:6px;color:var(--color-danger);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);padding:4px 12px;transition:all var(--duration-fast) var(--ease-in-out)}.advanced-search__clear:hover{background-color:var(--color-danger);color:var(--color-text-inverse)}
+.rm-asearch{font-family:var(--font-sans);gap:12px;width:100%}.rm-asearch,.rm-asearch__rows{display:flex;flex-direction:column}.rm-asearch__rows{gap:8px}.rm-asearch__row{align-items:center;display:flex;gap:8px}.rm-asearch__type{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);cursor:pointer;flex:0 0 auto;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-semibold);height:32px;min-width:56px;padding:0 12px;text-transform:capitalize}.rm-asearch__type--first{align-items:center;color:var(--text-muted);cursor:default;display:inline-flex;justify-content:center}.rm-asearch__type--and{color:var(--color-primary)}.rm-asearch__type--or{color:var(--color-success)}.rm-asearch__type--not{color:var(--color-danger)}.rm-asearch__input{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);box-sizing:border-box;color:var(--text-primary);flex:1 1 auto;font-family:inherit;font-size:var(--font-14);height:32px;min-width:0;padding:0 14px}.rm-asearch__input:focus{border-color:var(--color-primary);outline:none}.rm-asearch__remove{background:none;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;padding:6px}.rm-asearch__remove:hover{background:var(--bg-surface-3);color:var(--color-danger)}.rm-asearch__actions{align-items:center;display:flex;gap:8px}.rm-asearch__add{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);gap:4px;height:28px;padding:0 12px}.rm-asearch__add:hover{background:var(--bg-surface-3)}.rm-asearch__add--and{color:var(--color-primary)}.rm-asearch__add--or{color:var(--color-success)}.rm-asearch__add--not{color:var(--color-danger)}.rm-asearch__clear{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);margin-left:auto;padding:0;text-decoration-line:underline}
 </style>

package/dist/runtime/components/ChartCard.vue

@@ -26,10 +26,26 @@ const props = withDefaults(defineProps<{
   extra?: string
   /** Masque le menu d'actions quand la carte n'a rien a exporter. */
   actions?: boolean
+  /**
+   * Etat de la donnee. Les trois variantes se posent dans le CORPS ; la tete
+   * et le pied restent stables, pour que le titre et la source restent sous
+   * les yeux pendant que la donnee charge, manque ou echoue.
+   */
+  state?: 'ready' | 'loading' | 'empty' | 'error'
+  /**
+   * Libelle du bouton du corps en erreur, qui emet `retry`. Vide : aucun
+   * bouton. Un bouton que la page n'ecoute pas ne repare rien, il ment.
+   */
+  retryLabel?: string
+  /** Libelle du bouton du corps vide, qui emet `emptyAction`. Vide : aucun bouton. */
+  emptyActionLabel?: string
 }>(), {
   context: undefined,
   extra: undefined,
   actions: true,
+  state: 'ready',
+  retryLabel: '',
+  emptyActionLabel: '',
 })
 
 const emit = defineEmits<{
@@ -39,6 +55,10 @@ const emit = defineEmits<{
   exportXlsx: []
   copyLink: []
   fullscreen: []
+  /** L'utilisateur relance la donnee depuis le corps en erreur. */
+  retry: []
+  /** L'utilisateur veut sortir du corps vide (elargir ses filtres). */
+  emptyAction: []
 }>()
 
 const menuOpen = ref(false)
@@ -116,8 +136,32 @@ function run(action: 'exportPng' | 'exportSvg' | 'exportCsv' | 'exportXlsx' | 'c
       </div>
     </div>
 
+    <!-- Un corps vide n'est jamais laisse blanc : chaque etat a son rendu par
+         defaut, qu'un slot dedie peut remplacer quand la page a mieux a dire. -->
     <div class="chart-card-body">
-      <slot />
+      <slot v-if="state === 'ready'" />
+      <slot v-else-if="state === 'loading'" name="loading">
+        <RmLoadingState />
+      </slot>
+      <!-- Pas de cadre pointille ici : dans un corps de carte, la carte porte
+           deja son propre cadre. Le pointille est reserve aux vues entieres. -->
+      <slot v-else-if="state === 'empty'" name="empty">
+        <RmEmptyState
+          icon="MagnifyingGlassMinus"
+          title="Aucun résultat"
+          text="Aucune ligne ne correspond aux filtres en cours. Élargissez votre période ou retirez une dimension."
+          :action-label="emptyActionLabel"
+          action-icon="Broom"
+          @action="emit('emptyAction')"
+        />
+      </slot>
+      <slot v-else name="error">
+        <RmErrorState
+          text="La donnée de cette carte n'a pas pu être chargée."
+          :action-label="retryLabel"
+          @action="emit('retry')"
+        />
+      </slot>
     </div>
 
     <div class="chart-card-foot">

package/dist/runtime/components/DataTable.vue

@@ -35,11 +35,17 @@ const props = withDefaults(defineProps<{
   sortDir?: 'asc' | 'desc'
   /** Message affiche quand il n'y a aucune ligne. Le hors-perimetre se dit, il ne s'estime pas. */
   emptyText?: string
+  /** Squelette de lignes pendant le chargement, plutot qu'un tableau vide. */
+  loading?: boolean
+  /** Nombre de lignes du squelette : la table garde sa hauteur a l'arrivee de la donnee. */
+  loadingRows?: number
 }>(), {
   captionVisible: false,
   sortKey: undefined,
   sortDir: undefined,
   emptyText: 'Aucune donnée disponible pour cette sélection.',
+  loading: false,
+  loadingRows: 5,
 })
 
 const emit = defineEmits<{ sort: [key: string] }>()
@@ -72,9 +78,18 @@ function ariaSort(column: RmColumn) {
           </th>
         </tr>
       </thead>
-      <tbody>
+      <tbody v-if="loading">
+        <!-- Une table vide pendant le chargement se lit comme une absence de
+             donnee : le squelette dit que la donnee arrive. -->
+        <tr v-for="index in loadingRows" :key="index">
+          <td v-for="column in columns" :key="column.key">
+            <div class="rm-skeleton tk-skeleton" />
+          </td>
+        </tr>
+      </tbody>
+      <tbody v-else>
         <tr v-if="!rows.length">
-          <td :colspan="columns.length">{{ emptyText }}</td>
+          <td :colspan="columns.length" class="tk-empty">{{ emptyText }}</td>
         </tr>
         <tr v-for="(row, index) in rows" :key="index">
           <template v-for="column in columns" :key="column.key">

package/dist/runtime/components/EmptyState.vue

@@ -1,8 +1,20 @@
 <!--
-  Etat vide d'une liste : une icone dans un disque, un titre, une phrase.
+  Etat vide d'une liste ou d'une vue : une icone dans un disque, un titre, une
+  phrase, et l'action a faire.
 
   Remplace `arg-errors` d'Auriga. Les textes viennent de la page : le
   hors-perimetre se dit, il ne s'estime pas.
+
+  Le systeme de design demande trois choses de plus qu'un simple message.
+  D'abord une action, sauf s'il n'y a vraiment rien a faire : un ecran vide
+  sans issue laisse l'utilisateur devant une impasse. Ensuite un ton sans
+  catastrophisme, « Aucun résultat » plutot que « Erreur ». Enfin un titre qui
+  dit ce qui manque et une phrase qui dit pourquoi ET quoi faire.
+
+  `tone` colore le disque selon la nature du vide : violet quand il reste
+  quelque chose a creer, rouge quand un droit bloque, neutre quand une
+  recherche ne ramene rien. `framed` pose le cadre pointille des etats
+  transitoires.
 -->
 <script setup lang="ts">
 withDefaults(
@@ -10,23 +22,49 @@ withDefaults(
     icon?: string
     title: string
     text?: string
+    /** Couleur du disque : `neutral` recherche vide, `primary` a creer, `danger` bloquant. */
+    tone?: 'neutral' | 'primary' | 'danger'
+    /** Libelle de l'action. Vide pour n'en poser aucune. */
+    actionLabel?: string
+    /** Icone de l'action. */
+    actionIcon?: string
+    /** Cadre pointille, pour signaler un etat transitoire. */
+    framed?: boolean
   }>(),
-  { icon: 'MagnifyingGlass', text: '' },
+  {
+    icon: 'MagnifyingGlass',
+    text: '',
+    tone: 'neutral',
+    actionLabel: '',
+    actionIcon: '',
+    framed: false,
+  },
 )
+
+const emit = defineEmits<{ action: [] }>()
 </script>
 
 <template>
-  <div class="rm-empty">
+  <div class="rm-empty" :class="[`rm-empty--${tone}`, { 'rm-empty--framed': framed }]">
     <div class="rm-empty__icon">
-      <RmIcon :name="icon" :size="44" />
+      <RmIcon :name="icon" :size="28" />
     </div>
     <div class="rm-empty__text">
       <p class="rm-empty__title">{{ title }}</p>
       <p v-if="text" class="rm-empty__descr">{{ text }}</p>
     </div>
+    <button
+      v-if="actionLabel"
+      type="button"
+      class="rm-empty__action"
+      @click="emit('action')"
+    >
+      <RmIcon v-if="actionIcon" :name="actionIcon" :size="14" />
+      {{ actionLabel }}
+    </button>
   </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}
+.rm-empty{align-items:center;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:24px;max-width:409px}.rm-empty--framed{background:var(--bg-surface-2);border:1px dashed var(--border-default);border-radius:12px;box-sizing:border-box;max-width:none;padding:32px 16px;width:100%}.rm-empty__icon{align-items:center;background:var(--bg-surface-3);border-radius:50%;color:var(--text-muted);display:flex;flex:0 0 auto;height:56px;justify-content:center;width:56px}.rm-empty--primary .rm-empty__icon{background:var(--bg-hover);color:var(--color-secondary)}.rm-empty--danger .rm-empty__icon{background:var(--color-danger-bg);color:var(--color-danger)}.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}.rm-empty__action{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-semibold);gap:6px;padding:7px 14px}.rm-empty__action:hover{background:var(--bg-surface-3);color:var(--text-primary)}
 </style>

package/dist/runtime/components/ErrorState.vue

@@ -0,0 +1,69 @@
+<!--
+  RmErrorState - corps de carte ou de vue dont la donnee a echoue. Style :
+  components.css (.rm-state, .rm-state--error).
+
+  Le systeme de design impose trois pieces d'information, dans cet ordre : ce
+  qui a echoue (`title`), pourquoi (`text`), et quoi faire (`actionLabel` avec
+  l'evenement `action`). Une erreur sans issue est une impasse, d'ou l'action
+  posee par defaut.
+
+  Le ton reste factuel : « Connecteur indisponible », pas « ERREUR FATALE ».
+  Les textes viennent donc de l'appelant, qui seul sait ce qui a echoue.
+
+  Pour une erreur serveur, `code` ajoute l'identifiant que le support
+  demandera. L'etat ne se signale jamais par le rouge seul : couleur, icone
+  et texte disent la meme chose, pour rester lisible en vision des couleurs
+  alteree.
+-->
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** Ce qui a echoue. */
+    title?: string
+    /** Pourquoi, et depuis quand. */
+    text?: string
+    /** Icone du disque : `CloudWarning` reseau, `LockKey` droits, `WarningOctagon` sinon. */
+    icon?: string
+    /** Libelle de l'action de recuperation. Vide pour aucune action. */
+    actionLabel?: string
+    /** Icone de l'action. */
+    actionIcon?: string
+    /** Identifiant a citer au support, pour une erreur serveur. */
+    code?: string
+  }>(),
+  {
+    title: 'Donnée indisponible',
+    text: '',
+    icon: 'WarningOctagon',
+    actionLabel: 'Réessayer',
+    actionIcon: 'ArrowClockwise',
+    code: '',
+  },
+)
+
+const emit = defineEmits<{ action: [] }>()
+</script>
+
+<template>
+  <div class="rm-state rm-state--error" role="alert">
+    <div class="rm-state__icon">
+      <RmIcon :name="icon" :size="26" />
+    </div>
+    <p class="rm-state__title">{{ title }}</p>
+    <p v-if="text" class="rm-state__text">{{ text }}</p>
+    <p v-if="code" class="rm-state__code">Code : {{ code }}</p>
+    <button
+      v-if="actionLabel"
+      type="button"
+      class="rm-state__action"
+      @click="emit('action')"
+    >
+      <RmIcon v-if="actionIcon" :name="actionIcon" :size="14" />
+      {{ actionLabel }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rm-state__code{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--font-11);margin:2px 0 0}
+</style>

package/dist/runtime/components/FilterBar.vue

@@ -49,24 +49,29 @@ const props = withDefaults(
 const emit = defineEmits<{ clearFilters: []; saveScope: [] }>()
 
 const LABELS = {
-  fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Tout effacer', customize: 'Personnaliser' },
-  en: { title: 'Filters', save: 'Save a scope', clear: 'Clear all', customize: 'Customize' },
+  fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Tout effacer', customize: 'Personnaliser', advanced: 'Recherche avancée' },
+  en: { title: 'Filters', save: 'Save a scope', clear: 'Clear all', customize: 'Customize', advanced: 'Advanced search' },
 } as const
 
 const t = computed(() => LABELS[props.lang] ?? LABELS.fr)
 
 /**
- * Deux panneaux possibles sous la barre : les filtres, et la personnalisation
- * (slot #Customize, la puce n'apparait que si la page le fournit). Un seul
- * ouvert a la fois.
+ * Trois panneaux possibles sous la barre : les filtres, la recherche avancee
+ * (slot #Advanced) et la personnalisation (slot #Customize). Les deux derniers
+ * n'ont de puce que si la page fournit le slot. Un seul panneau ouvert a la
+ * fois : ils occupent la meme place et se liraient l'un par-dessus l'autre.
  */
-const panel = ref<'filters' | 'customize' | null>(null)
+type RmFilterBarPanel = 'filters' | 'advanced' | 'customize'
+
+const panel = ref<RmFilterBarPanel | null>(null)
 const open = computed(() => panel.value === 'filters')
+const advancedOpen = computed(() => panel.value === 'advanced')
 const customizeOpen = computed(() => panel.value === 'customize')
 const slots = useSlots()
+const hasAdvanced = computed(() => !!slots.Advanced)
 const hasCustomize = computed(() => !!slots.Customize)
 
-function toggle(which: 'filters' | 'customize') {
+function toggle(which: RmFilterBarPanel) {
   panel.value = panel.value === which ? null : which
 }
 
@@ -131,6 +136,19 @@ onBeforeUnmount(() => {
         <slot name="Search" />
       </div>
 
+      <!-- La recherche avancee s'ouvre par un lien pose au bout du champ : elle
+           prolonge la recherche, elle n'est pas un troisieme reglage a cote de
+           « Filtres » et « Personnaliser ». -->
+      <button
+        v-if="hasAdvanced"
+        type="button"
+        class="rm-fbar__advanced"
+        :class="{ 'is-active': advancedOpen }"
+        @click="toggle('advanced')"
+      >
+        {{ t.advanced }}
+      </button>
+
       <button
         v-if="hasCustomize"
         type="button"
@@ -170,6 +188,13 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
+    <div v-if="hasAdvanced" v-show="advancedOpen" class="rm-fbar__panel rm-fbar__panel--wide">
+      <div class="rm-fbar__panel-head">
+        <p class="rm-fbar__panel-title">{{ t.advanced }}</p>
+      </div>
+      <slot name="Advanced" />
+    </div>
+
     <div v-if="hasCustomize" v-show="customizeOpen" class="rm-fbar__panel">
       <div class="rm-fbar__panel-head">
         <p class="rm-fbar__panel-title">{{ t.customize }}</p>
@@ -182,5 +207,5 @@ onBeforeUnmount(() => {
 </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(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.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__customize{grid-column:1/-1}.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)}
+.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__advanced{align-items:center;background:none;border:none;color:var(--color-primary);cursor:pointer;display:inline-flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0;text-decoration-line:underline;white-space:nowrap}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.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(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.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__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.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/LoadingState.vue

@@ -0,0 +1,81 @@
+<!--
+  RmLoadingState - corps de carte en chargement. Style : components.css
+  (.rm-state-loading).
+
+  Le systeme de design tranche : squelette plutot que rotative des qu'on
+  connait la forme du contenu, et jamais de blanc pendant une attente. Ce
+  composant porte la forme la plus courante d'un corps de carte, un titre,
+  une plage de graphe, deux lignes de legende. `chart` a false donne une
+  simple pile de lignes, pour une liste ou un tableau.
+
+  Une rotative reste possible via `spinner`, pour une action ponctuelle dont
+  on ignore la structure du resultat.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Pose la plage pleine du graphe entre les lignes. */
+    chart?: boolean
+    /** Nombre de lignes de texte simulees. */
+    lines?: number
+    /** Hauteur de la plage de graphe. */
+    chartHeight?: string | number
+    /** Rotative plutot que squelette, avec ce libelle. */
+    spinner?: boolean
+    /** Texte sous la rotative. */
+    label?: string
+    /** Hauteur minimale du bloc, pour epouser la carte qu'il remplit. */
+    minHeight?: string | number
+  }>(),
+  {
+    chart: true,
+    lines: 2,
+    chartHeight: 120,
+    spinner: false,
+    label: '',
+    minHeight: undefined,
+  },
+)
+
+/** Largeurs decroissantes : une pile de lignes egales ne ressemble a rien. */
+const WIDTHS = ['90%', '70%', '80%', '60%', '75%']
+
+const size = (value: string | number | undefined) =>
+  value === undefined ? undefined : typeof value === 'number' ? `${value}px` : value
+
+const style = computed(() => ({ minHeight: size(props.minHeight) }))
+</script>
+
+<template>
+  <div
+    class="rm-state-loading"
+    :style="style"
+    role="status"
+    aria-busy="true"
+    :aria-label="label || 'Chargement en cours'"
+  >
+    <template v-if="spinner">
+      <div class="rm-loading__center">
+        <div class="rm-spinner" />
+        <p v-if="label" class="rm-loading__label">{{ label }}</p>
+      </div>
+    </template>
+
+    <template v-else>
+      <RmSkeleton width="50%" :height="14" />
+      <RmSkeleton v-if="chart" width="100%" :height="chartHeight" radius="8px" />
+      <RmSkeleton
+        v-for="index in lines"
+        :key="index"
+        :width="WIDTHS[(index - 1) % WIDTHS.length]"
+        :height="10"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.rm-loading__center{align-items:center;display:flex;flex:1;flex-direction:column;gap:12px;justify-content:center}.rm-loading__label{color:var(--text-muted);font-family:var(--font-sans);font-size:var(--font-12);margin:0}
+</style>

package/dist/runtime/components/Skeleton.vue

@@ -0,0 +1,32 @@
+<!--
+  RmSkeleton - un bloc de squelette anime, pose a la place du contenu qui
+  charge. Style : components.css (.rm-skeleton).
+
+  Il n'a aucune forme propre : c'est l'appelant qui donne la largeur et la
+  hauteur du contenu remplace. Un squelette qui ne ressemble pas au contenu
+  final fait sauter la mise en page a l'arrivee de la donnee, ce que le
+  squelette est justement la pour eviter.
+-->
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** Largeur CSS. Un nombre est lu en pixels. */
+    width?: string | number
+    /** Hauteur CSS. Un nombre est lu en pixels. */
+    height?: string | number
+    /** Rayon CSS, pour un disque (`50%`) ou une pastille. */
+    radius?: string
+  }>(),
+  { width: '100%', height: 12, radius: undefined },
+)
+
+const size = (value: string | number) => (typeof value === 'number' ? `${value}px` : value)
+</script>
+
+<template>
+  <div
+    class="rm-skeleton"
+    aria-hidden="true"
+    :style="{ width: size(width), height: size(height), borderRadius: radius }"
+  />
+</template>

package/dist/runtime/components/Table.vue

@@ -117,7 +117,7 @@ const sortedRows = computed(() => {
       <tbody v-if="loading">
         <tr v-for="i in 5" :key="i">
           <td v-for="col in columns" :key="col.key" class="rm-table__td">
-            <div class="rm-table__skeleton" />
+            <div class="rm-skeleton rm-table__skeleton" />
           </td>
         </tr>
       </tbody>
@@ -158,5 +158,5 @@ const sortedRows = computed(() => {
 </template>
 
 <style scoped>
-.rm-table-wrapper{background:#fff;border:1px solid #dbdef0;border-radius:8px;flex:1;overflow:auto}.rm-table{border-collapse:collapse;font-family:var(--r-font-family);font-size:var(--r-text-sm);width:100%}.rm-table__head{background:var(--r-color-gray-50)}.rm-table__head--sticky{position:sticky;top:0;z-index:2}.rm-table__th{border-bottom:1px solid #dbdef0;color:var(--r-color-gray-500);font-size:12px;font-weight:600;letter-spacing:.3px;padding:10px 16px;text-align:left;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-table__th--center{text-align:center}.rm-table__th--right{text-align:right}.rm-table__th--sortable{cursor:pointer}.rm-table__th--sortable:hover{color:var(--r-color-gray-700)}.rm-table__th-content{align-items:center;display:inline-flex;gap:4px}.rm-table__sort{color:var(--r-color-gray-300);display:inline-flex;flex-direction:column;gap:-2px}.rm-table__sort--active{color:#4164ee}.rm-table__td{border-bottom:1px solid var(--r-color-gray-100);color:var(--r-color-gray-700);padding:10px 16px;vertical-align:top}.rm-table__td--center{text-align:center}.rm-table__td--right{text-align:right}.rm-table__row:last-child .rm-table__td{border-bottom:none}.rm-table__row--striped{background-color:var(--r-color-gray-50)}.rm-table__row--hoverable:hover{background-color:rgba(65,100,238,.06);cursor:pointer}.rm-table__empty{color:var(--r-color-gray-400);font-style:italic;padding:32px 16px;text-align:center}.rm-table__skeleton{animation:rm-table-shimmer 1.5s infinite;background:linear-gradient(90deg,#eee 25%,#e0e0e0 50%,#eee 75%);background-size:200% 100%;border-radius:4px;height:14px;width:80%}@keyframes rm-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}
+.rm-table-wrapper{background:#fff;border:1px solid #dbdef0;border-radius:8px;flex:1;overflow:auto}.rm-table{border-collapse:collapse;font-family:var(--r-font-family);font-size:var(--r-text-sm);width:100%}.rm-table__head{background:var(--r-color-gray-50)}.rm-table__head--sticky{position:sticky;top:0;z-index:2}.rm-table__th{border-bottom:1px solid #dbdef0;color:var(--r-color-gray-500);font-size:12px;font-weight:600;letter-spacing:.3px;padding:10px 16px;text-align:left;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-table__th--center{text-align:center}.rm-table__th--right{text-align:right}.rm-table__th--sortable{cursor:pointer}.rm-table__th--sortable:hover{color:var(--r-color-gray-700)}.rm-table__th-content{align-items:center;display:inline-flex;gap:4px}.rm-table__sort{color:var(--r-color-gray-300);display:inline-flex;flex-direction:column;gap:-2px}.rm-table__sort--active{color:#4164ee}.rm-table__td{border-bottom:1px solid var(--r-color-gray-100);color:var(--r-color-gray-700);padding:10px 16px;vertical-align:top}.rm-table__td--center{text-align:center}.rm-table__td--right{text-align:right}.rm-table__row:last-child .rm-table__td{border-bottom:none}.rm-table__row--striped{background-color:var(--r-color-gray-50)}.rm-table__row--hoverable:hover{background-color:rgba(65,100,238,.06);cursor:pointer}.rm-table__empty{color:var(--text-muted);padding:32px 16px;text-align:center}.rm-table__skeleton{height:14px;width:80%}
 </style>

package/package.json

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