@tekkare/romulus 0.1.5 → 0.1.7

package/dist/module.json

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

package/dist/module.mjs

@@ -17,12 +17,23 @@ const module = defineNuxtModule({
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
     nuxt.options.css.push(resolve(runtimeDir, "assets/styles/tokens.css"));
     nuxt.options.css.push(resolve(runtimeDir, "assets/styles/base.css"));
+    nuxt.options.css.push(resolve(runtimeDir, "assets/styles/components.css"));
     nuxt.options.css.push(resolve(runtimeDir, "assets/styles/utilities.css"));
     await addComponentsDir({
       path: resolve(runtimeDir, "components"),
       prefix: options.prefix
     });
     addImportsDir(resolve(runtimeDir, "composables"));
+    addImportsDir(resolve(runtimeDir, "utils"));
+    nuxt.options.app.head.link = nuxt.options.app.head.link || [];
+    const fontsHref = "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Caudex:wght@400;700&display=swap";
+    if (!nuxt.options.app.head.link.some((l) => l.href === fontsHref)) {
+      nuxt.options.app.head.link.push(
+        { rel: "preconnect", href: "https://fonts.googleapis.com" },
+        { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
+        { rel: "stylesheet", href: fontsHref }
+      );
+    }
   }
 });
 

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

@@ -0,0 +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}.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)}

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

@@ -1 +1 @@
-:root{--r-color-primary-50:#f0f4ff;--r-color-primary-100:#dce5fd;--r-color-primary-200:#b9cbfb;--r-color-primary-300:#96b0f9;--r-color-primary-400:#7395f5;--r-color-primary-500:#5a7ef2;--r-color-primary-600:#4164ee;--r-color-primary-700:#3451d4;--r-color-primary-800:#283fb0;--r-color-primary-900:#1c2d8a;--r-color-gray-50:#f9fafb;--r-color-gray-100:#f3f4f6;--r-color-gray-200:#e5e7eb;--r-color-gray-300:#d1d5db;--r-color-gray-400:#9ca3af;--r-color-gray-500:#6b7280;--r-color-gray-600:#4b5563;--r-color-gray-700:#374151;--r-color-gray-800:#1f2937;--r-color-gray-900:#111827;--r-color-gray-950:#030712;--r-color-success-500:#22c55e;--r-color-success-600:#16a34a;--r-color-warning-500:#f59e0b;--r-color-warning-600:#d97706;--r-color-danger-500:#ef4444;--r-color-danger-600:#dc2626;--r-color-white:#fff;--r-color-black:#000;--r-font-family:"Figtree",ui-sans-serif,system-ui,-apple-system,sans-serif;--r-font-mono:"JetBrains Mono",ui-monospace,"Cascadia Code",monospace;--r-text-xs:0.75rem;--r-text-sm:0.875rem;--r-text-base:1rem;--r-text-lg:1.125rem;--r-text-xl:1.25rem;--r-text-2xl:1.5rem;--r-text-3xl:1.875rem;--r-text-4xl:2.25rem;--r-font-weight-normal:400;--r-font-weight-medium:500;--r-font-weight-semibold:600;--r-font-weight-bold:700;--r-leading-tight:1.25;--r-leading-normal:1.5;--r-leading-relaxed:1.75;--r-space-0:0;--r-space-1:0.25rem;--r-space-2:0.5rem;--r-space-3:0.75rem;--r-space-4:1rem;--r-space-5:1.25rem;--r-space-6:1.5rem;--r-space-8:2rem;--r-space-10:2.5rem;--r-space-12:3rem;--r-space-16:4rem;--r-space-20:5rem;--r-radius-none:0;--r-radius-sm:0.25rem;--r-radius-md:0.375rem;--r-radius-lg:0.5rem;--r-radius-xl:0.75rem;--r-radius-2xl:1rem;--r-radius-full:9999px;--r-shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);--r-shadow-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--r-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--r-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--r-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--r-transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--r-transition-base:200ms cubic-bezier(0.4,0,0.2,1);--r-transition-slow:300ms cubic-bezier(0.4,0,0.2,1)}
+:root{--sidebar-w:220px;--sidebar-collapsed-w:56px;--rsidebar-w:280px;--rsidebar-collapsed-w:76px;--topbar-h:56px;--tabs-h:46px;--analysis-header-h:124px;--sourcebar-h:38px;--filterbar-h:56px;--color-primary:#2100ad;--color-primary-hover:#1a0088;--color-secondary:#6b3fff;--color-accent-soft:#b485ff;--color-violet-pale:#d6ccff;--color-healthcare:#4164ee;--color-discovery:#07816f;--color-pharma:#f7520e;--color-databank:#e04380;--color-healthcare-active:#1a65e0;--color-discovery-active:#066b5c;--color-pharma-active:#d9470c;--color-databank-active:#c73a6f;--healthcare-rgb:65,100,238;--discovery-rgb:7,129,111;--pharma-rgb:247,82,14;--databank-rgb:224,67,128;--color-accent-teal:#00d4a8;--color-notification:#e59;--color-text-inverse:#fff;--color-success:#16a34a;--color-success-bg:#dcfce7;--color-warning:#d97706;--color-warning-bg:#fef3c7;--color-danger:#dc2626;--color-danger-bg:#fee2e2;--color-info:#4164ee;--color-info-bg:#dbeafe;--bg-app:#eef1f5;--bg-surface:#fff;--bg-surface-2:#fbfbfd;--bg-surface-3:#f5f5f9;--bg-hover:#eef1fe;--border-default:#dbdef0;--border-soft:#f0f1f7;--text-primary:#1e293b;--text-secondary:#525670;--text-muted:#878ca6;--brand-rgb:33,0,173;--chart-cat-1:#2100ad;--chart-cat-2:#00a38e;--chart-cat-3:#e67e22;--chart-cat-4:#d63384;--chart-cat-5:#4164ee;--chart-cat-6:#16a34a;--space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--space-48:48px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-2xl:12px;--radius-pill:999px;--font-10:10px;--font-11:11px;--font-12:12px;--font-13:13px;--font-14:14px;--font-16:16px;--font-18:18px;--font-22:22px;--font-24:24px;--font-32:32px;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--font-serif:"Caudex",Georgia,serif;--font-sans:"Figtree",system-ui,sans-serif;--font-mono:"SF Mono",Menlo,monospace;--shadow-xs:0 1px 2px rgba(30,41,59,.04);--shadow-sm:0 2px 6px rgba(30,41,59,.06),0 1px 2px rgba(30,41,59,.03);--shadow-md:0 4px 12px rgba(30,41,59,.06),0 1px 3px rgba(30,41,59,.04);--shadow-lg:0 8px 24px rgba(30,41,59,.12);--shadow-focus:0 0 0 3px rgba(107,63,255,.14);--duration-instant:100ms;--duration-fast:150ms;--duration-base:240ms;--duration-slow:400ms;--duration-slowest:600ms;--ease-out:cubic-bezier(.2,0,0,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--ease-spring:cubic-bezier(.5,1.6,.4,1);--z-base:1;--z-sticky:20;--z-header:30;--z-drawer:40;--z-modal:50;--z-toast:60;--z-help:70}body.night{--color-primary:#9b7cff;--color-secondary:#b485ff;--color-accent-soft:#d6ccff;--color-databank:#f472b6;--bg-app:#0e0e14;--bg-surface:#1a1a24;--bg-surface-2:#232330;--bg-surface-3:#2a2a38;--bg-hover:#2d2a42;--border-default:#45455c;--border-soft:#32323f;--text-primary:#f5f6fa;--text-secondary:#cfd3e5;--text-muted:#8a90a8;--brand-rgb:155,124,255;--color-success:#6fe8c5;--color-success-bg:rgba(0,212,168,.18);--color-warning:#fbbf24;--color-warning-bg:rgba(245,158,11,.18);--color-danger:#fca5a5;--color-danger-bg:rgba(239,68,68,.18);--color-info:#7aa0ff;--color-info-bg:rgba(65,100,238,.18);--chart-cat-1:#9b7cff;--chart-cat-2:#6fe8c5;--chart-cat-3:#fbbf24;--chart-cat-4:#f472b6;--chart-cat-5:#7b9ef5;--chart-cat-6:#bef264;background:var(--bg-app);color:var(--text-primary)}body.high-contrast:not(.night){--text-primary:#000;--text-secondary:#1a1a24;--text-muted:#2f2f40;--border-default:#000;--border-soft:#525670;--bg-app:#fff;--bg-surface:#fff;--bg-surface-2:#fff;--bg-surface-3:#f0f1f7;--bg-hover:#ffe56b;--color-primary:#1100a0;--color-primary-hover:#0a0070;--color-secondary:#5028d8;--color-success:#006b2c;--color-warning:#8c4500;--color-danger:#a60000;--color-info:#0040c8}body.night.high-contrast{--text-primary:#fff;--text-secondary:#f5f6fa;--text-muted:#cfd3e5;--border-default:#fff;--border-soft:#b8bcd0;--bg-app:#000;--bg-surface:#000;--bg-surface-2:#000;--bg-surface-3:#000;--bg-hover:#ffe56b;--color-primary:#d6ccff;--color-primary-hover:#fff;--color-secondary:#e5daff;--color-accent-soft:#fff;--color-success:#6fe8c5;--color-warning:#fbbf24;--color-danger:#fca5a5;--color-info:#7aa0ff;--brand-rgb:214,204,255}body.reduce-motion *,body.reduce-motion :after,body.reduce-motion :before{animation:none!important;scroll-behavior:auto!important;transition:none!important}:root{--r-color-primary-50:#f0f4ff;--r-color-primary-100:#dce5fd;--r-color-primary-200:#b9cbfb;--r-color-primary-300:#96b0f9;--r-color-primary-400:#7395f5;--r-color-primary-500:#5a7ef2;--r-color-primary-600:var(--color-healthcare);--r-color-primary-700:#3451d4;--r-color-primary-800:#283fb0;--r-color-primary-900:#1c2d8a;--r-color-gray-50:#f9fafb;--r-color-gray-100:#f3f4f6;--r-color-gray-200:#e5e7eb;--r-color-gray-300:#d1d5db;--r-color-gray-400:#9ca3af;--r-color-gray-500:#6b7280;--r-color-gray-600:#4b5563;--r-color-gray-700:#374151;--r-color-gray-800:#1f2937;--r-color-gray-900:#111827;--r-color-gray-950:#030712;--r-color-success-500:var(--color-success);--r-color-success-600:#16a34a;--r-color-warning-500:#f59e0b;--r-color-warning-600:var(--color-warning);--r-color-danger-500:#ef4444;--r-color-danger-600:var(--color-danger);--r-color-white:#fff;--r-color-black:#000;--r-font-family:var(--font-sans);--r-font-mono:var(--font-mono);--r-text-xs:0.75rem;--r-text-sm:0.875rem;--r-text-base:1rem;--r-text-lg:1.125rem;--r-text-xl:1.25rem;--r-text-2xl:1.5rem;--r-text-3xl:1.875rem;--r-text-4xl:2.25rem;--r-font-weight-normal:var(--weight-normal);--r-font-weight-medium:var(--weight-medium);--r-font-weight-semibold:var(--weight-semibold);--r-font-weight-bold:var(--weight-bold);--r-leading-tight:1.25;--r-leading-normal:1.5;--r-leading-relaxed:1.75;--r-space-0:0;--r-space-1:var(--space-4);--r-space-2:var(--space-8);--r-space-3:var(--space-12);--r-space-4:var(--space-16);--r-space-5:var(--space-20);--r-space-6:var(--space-24);--r-space-8:var(--space-32);--r-space-10:var(--space-40);--r-space-12:var(--space-48);--r-radius-none:0;--r-radius-sm:var(--radius-sm);--r-radius-md:var(--radius-md);--r-radius-lg:var(--radius-lg);--r-radius-xl:0.75rem;--r-radius-2xl:1rem;--r-radius-full:var(--radius-pill);--r-shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);--r-shadow-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--r-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--r-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--r-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--r-transition-fast:var(--duration-fast) var(--ease-in-out);--r-transition-base:200ms var(--ease-in-out);--r-transition-slow:var(--duration-slow) var(--ease-in-out)}

package/dist/runtime/components/Badge.vue

@@ -0,0 +1,15 @@
+<!--
+  RmBadge - label de statut STATIQUE (non cliquable).
+  Style : components.css (.badge). Jamais la couleur seule : le badge porte
+  toujours son texte. Pour un filtre cliquable, ce n'est pas un badge.
+-->
+<script setup lang="ts">
+withDefaults(defineProps<{
+  /** active = favorable/inscrit/valide · pending = en cours/restreint · error = radie/refus · info · grey = neutre */
+  variant?: 'active' | 'pending' | 'error' | 'info' | 'grey'
+}>(), { variant: 'grey' })
+</script>
+
+<template>
+  <span class="badge" :class="`badge-${variant}`"><slot /></span>
+</template>

package/dist/runtime/components/ChartCard.vue

@@ -0,0 +1,129 @@
+<!--
+  RmChartCard - LE seul container de donnees autorise (chart, table, groupe
+  de KPI). Style : components.css (.chart-card*).
+
+  Le foot n'est pas une option decorative : c'est la premiere regle Critical
+  du design system. Toute donnee affichee porte l'organisme source ET la date
+  de notre verification. D'ou `source` et `verified` en props REQUISES : on ne
+  peut pas produire une carte sans dire d'ou vient la donnee ni quand on l'a
+  controlee. La date de la DONNEE (millesime, periode) vit dans le graphe ou
+  le tableau, elle ne se confond jamais avec la date de verification.
+-->
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { rmDate } from '../utils/format'
+
+const props = withDefaults(defineProps<{
+  /** Titre de la carte. */
+  title: string
+  /** Sous-titre : perimetre, methode, aide a la lecture. */
+  context?: string
+  /** Organisme public : "HAS", "OCDE", "ANSM (Repertoire des specialites)". Jamais un outil interne. */
+  source: string
+  /** Date de notre verification. Un Date est formate en francais long ; une chaine deja formatee passe telle quelle. */
+  verified: Date | string | number
+  /** Complement de fin de foot : frequence, millesime. */
+  extra?: string
+  /** Masque le menu d'actions quand la carte n'a rien a exporter. */
+  actions?: boolean
+}>(), {
+  context: undefined,
+  extra: undefined,
+  actions: true,
+})
+
+const emit = defineEmits<{
+  exportPng: []
+  exportCsv: []
+  exportXlsx: []
+  copyLink: []
+  fullscreen: []
+}>()
+
+const menuOpen = ref(false)
+const root = ref<HTMLElement | null>(null)
+
+// Une chaine deja formatee ("17 juin 2026") n'est pas parsable : on la garde
+// telle quelle plutot que d'afficher "Invalid Date".
+const verifiedText = computed(() => {
+  const parsed = new Date(props.verified)
+  return Number.isNaN(parsed.getTime()) ? String(props.verified) : rmDate(parsed)
+})
+
+function onDocumentClick(event: MouseEvent) {
+  if (!menuOpen.value) return
+  if (root.value && !root.value.contains(event.target as Node)) menuOpen.value = false
+}
+function onEscape(event: KeyboardEvent) {
+  if (event.key === 'Escape') menuOpen.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+  document.addEventListener('keydown', onEscape)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+  document.removeEventListener('keydown', onEscape)
+})
+
+function run(action: 'exportPng' | 'exportCsv' | 'exportXlsx' | 'copyLink' | 'fullscreen') {
+  menuOpen.value = false
+  emit(action)
+}
+</script>
+
+<template>
+  <div class="chart-card">
+    <div class="chart-card-head">
+      <p class="chart-card-title">{{ title }}</p>
+      <p v-if="context" class="chart-card-context">{{ context }}</p>
+
+      <div v-if="actions" ref="root" class="chart-card-actions" :class="{ open: menuOpen }">
+        <button
+          class="cc-export"
+          type="button"
+          aria-label="Actions sur cette carte"
+          :aria-expanded="menuOpen"
+          @click.stop="menuOpen = !menuOpen"
+        >
+          <RmIcon name="Gear" :size="14" />
+        </button>
+        <div class="cc-menu" role="menu">
+          <div class="cc-menu-section">Exporter</div>
+          <button class="cc-menu-item" type="button" role="menuitem" @click="run('exportPng')">
+            <RmIcon name="Image" :size="14" /> Image PNG
+          </button>
+          <button class="cc-menu-item" type="button" role="menuitem" @click="run('exportCsv')">
+            <RmIcon name="FileCsv" :size="14" /> Données CSV
+          </button>
+          <button class="cc-menu-item" type="button" role="menuitem" @click="run('exportXlsx')">
+            <RmIcon name="FileXls" :size="14" /> Excel (XLSX)
+          </button>
+          <div class="cc-menu-divider" />
+          <div class="cc-menu-section">Partager</div>
+          <button class="cc-menu-item" type="button" role="menuitem" @click="run('copyLink')">
+            <RmIcon name="Link" :size="14" /> Copier le lien direct
+          </button>
+          <button class="cc-menu-item" type="button" role="menuitem" @click="run('fullscreen')">
+            <RmIcon name="ArrowsOut" :size="14" /> Plein écran
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="chart-card-body">
+      <slot />
+    </div>
+
+    <div class="chart-card-foot">
+      <span class="src">Source : <b>{{ source }}</b></span>
+      <span class="dot" />
+      <span class="updated">Vérifié le {{ verifiedText }}</span>
+      <template v-if="extra">
+        <span class="dot" />
+        <span>{{ extra }}</span>
+      </template>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/DataTable.vue

@@ -0,0 +1,92 @@
+<!--
+  RmDataTable - table `table.tk` du design system. Style : components.css.
+
+  Accessibilite portee par le composant, pas par l'appelant : `caption`
+  obligatoire (masquee visuellement, elle donne son nom accessible a la
+  table), colonnes d'identite en `<th scope="row">`, tri annonce via
+  `aria-sort`.
+
+  Le tri est pilote par le parent (props `sortKey` / `sortDir` + evenement
+  `sort`). Pas d'etat cache dans le composant : c'est exactement le defaut
+  qui empeche de fermer un sous-menu Auriga depuis l'exterieur.
+-->
+<script setup lang="ts">
+export interface RmColumn {
+  /** Cle de la propriete dans la ligne, et nom du slot `#cell-<key>`. */
+  key: string
+  /** En-tete de colonne. */
+  label: string
+  /** Colonne d'identite : rendue en `<th scope="row">`. Une seule par table. */
+  rowHeader?: boolean
+  /** Valeur numerique : alignee a droite, chiffres tabulaires. */
+  numeric?: boolean
+  /** Colonne triable : rend l'en-tete cliquable et annonce `aria-sort`. */
+  sortable?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  /** Nom accessible de la table. Masque visuellement par defaut. */
+  caption: string
+  /** Affiche la caption au-dessus de la table (hors chart-card, qui porte deja le titre). */
+  captionVisible?: boolean
+  columns: RmColumn[]
+  rows: Record<string, unknown>[]
+  sortKey?: string
+  sortDir?: 'asc' | 'desc'
+  /** Message affiche quand il n'y a aucune ligne. Le hors-perimetre se dit, il ne s'estime pas. */
+  emptyText?: string
+}>(), {
+  captionVisible: false,
+  sortKey: undefined,
+  sortDir: undefined,
+  emptyText: 'Aucune donnée disponible pour cette sélection.',
+})
+
+const emit = defineEmits<{ sort: [key: string] }>()
+
+function ariaSort(column: RmColumn) {
+  if (!column.sortable) return undefined
+  if (props.sortKey !== column.key) return 'none'
+  return props.sortDir === 'desc' ? 'descending' : 'ascending'
+}
+</script>
+
+<template>
+  <div class="tk-wrap">
+    <table class="tk">
+      <caption :class="captionVisible ? undefined : 'sr-only'">{{ caption }}</caption>
+      <thead>
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.key"
+            scope="col"
+            :class="column.numeric ? 'tk-num' : undefined"
+            :aria-sort="ariaSort(column)"
+            :tabindex="column.sortable ? 0 : undefined"
+            @click="column.sortable && emit('sort', column.key)"
+            @keydown.enter.prevent="column.sortable && emit('sort', column.key)"
+            @keydown.space.prevent="column.sortable && emit('sort', column.key)"
+          >
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!rows.length">
+          <td :colspan="columns.length">{{ emptyText }}</td>
+        </tr>
+        <tr v-for="(row, index) in rows" :key="index">
+          <template v-for="column in columns" :key="column.key">
+            <th v-if="column.rowHeader" scope="row">
+              <slot :name="`cell-${column.key}`" :value="row[column.key]" :row="row">{{ row[column.key] }}</slot>
+            </th>
+            <td v-else :class="column.numeric ? 'tk-num' : undefined">
+              <slot :name="`cell-${column.key}`" :value="row[column.key]" :row="row">{{ row[column.key] }}</slot>
+            </td>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/dist/runtime/components/Kpi.vue

@@ -0,0 +1,63 @@
+<!--
+  RmKpi - tuile KPI (chiffre + label + tendance). Style : components.css.
+  La valeur est toujours en serif (Caudex) : une valeur KPI en Figtree est
+  un bug. Pas de bloc de texte ici, seulement un chiffre et ses libelles.
+  La tendance porte un signe explicite ET une fleche, jamais la couleur seule.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Libelle court, rendu en majuscules par le design system. */
+  label: string
+  /** Valeur deja formatee (voir utils/format : rmNumber, rmBig, rmPrice). */
+  value: string | number
+  /** Unite affichee apres la valeur : €, %, patients... */
+  unit?: string
+  /** Variation en points de pourcentage, deja signee. Affiche fleche + couleur semantique. */
+  trend?: number
+  /** Libelle de la periode comparee : "vs 2023". Obligatoire des qu'il y a une tendance. */
+  trendLabel?: string
+  /** Note de bas de tuile : precision de perimetre ou de methode. */
+  note?: string
+  /** Couleur produit. `brand` = violet de marque, le defaut en contexte generique. */
+  accent?: 'brand' | 'healthcare' | 'discovery' | 'pharma' | 'databank'
+}>(), {
+  unit: undefined,
+  trend: undefined,
+  trendLabel: undefined,
+  note: undefined,
+  accent: 'brand',
+})
+
+const direction = computed(() => {
+  if (props.trend === undefined) return null
+  if (props.trend > 0) return 'up'
+  if (props.trend < 0) return 'down'
+  return 'flat'
+})
+
+const arrow = computed(() => ({ up: 'ArrowUp', down: 'ArrowDown', flat: 'ArrowRight' }[direction.value!]))
+
+// Signe explicite + virgule decimale + espace avant le %, cf. utils/format.
+const trendText = computed(() =>
+  props.trend === undefined
+    ? ''
+    : (props.trend > 0 ? '+' : '') + props.trend.toFixed(1).replace('.', ',') + ' %',
+)
+</script>
+
+<template>
+  <div class="kpi-card">
+    <p class="kpi-label">{{ label }}</p>
+    <p class="kpi-value" :class="accent === 'brand' ? undefined : accent">
+      {{ value }}<span v-if="unit" class="unit">&#160;{{ unit }}</span>
+    </p>
+    <p v-if="direction" class="kpi-trend" :class="`kpi-trend--${direction}`">
+      <RmIcon :name="arrow" :size="11" weight="bold" />
+      <span>{{ trendText }}</span>
+      <span v-if="trendLabel">{{ trendLabel }}</span>
+    </p>
+    <p v-if="note" class="kpi-foot">{{ note }}</p>
+  </div>
+</template>

package/dist/runtime/components/NavGroup.vue

@@ -0,0 +1,37 @@
+<!--
+  RmNavGroup - section de navigation repliable. Style : components.css.
+
+  L'etat d'ouverture est pilote par le PARENT (`v-model:open`). C'est le
+  point qui manquait a `argSubMenu` d'Auriga : son `openMenu` vivait a
+  l'interieur du composant, donc impossible de refermer une section depuis
+  l'exterieur, donc pas d'accordeon exclusif. Ici le parent garde une seule
+  cle ouverte et la sidebar reste courte meme avec beaucoup de sections.
+-->
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  label: string
+  /** Icone Phosphor sans le prefixe "Ph". */
+  icon?: string
+  open?: boolean
+}>(), { icon: undefined, open: false })
+
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+</script>
+
+<template>
+  <div class="nav-group" :data-open="String(props.open)">
+    <button
+      class="nav-group-header"
+      type="button"
+      :aria-expanded="props.open"
+      @click="emit('update:open', !props.open)"
+    >
+      <RmIcon v-if="icon" :name="icon" :size="14" />
+      <span>{{ label }}</span>
+      <span class="caret"><RmIcon name="CaretDown" :size="12" weight="bold" /></span>
+    </button>
+    <div v-show="props.open" class="nav-group-items">
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/utils/format.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Formatage OIP - locale francaise. Regles reprises du skill
+ * `tekkare-dashboard-design` (`utils/oip-format.ts`), qui fait foi.
+ *
+ * Regle dates : le mois est TOUJOURS en toutes lettres. Ce n'est pas une
+ * regle esthetique mais une regle de securite de lecture : `05/09/2025` se
+ * lit « 5 septembre » en France et « 9 mai » au format US. Interdits
+ * partout, y compris dans une cellule de tableau : tout en chiffres, ISO,
+ * mois abrege anglais.
+ *
+ * Regle nombres : virgule decimale, espace avant le %, separateur de
+ * milliers insecable via `toLocaleString('fr-FR')`.
+ */
+/** "17 juin 2026" - prose, foot « Verifie le », tableaux, partout. */
+export declare const rmDate: (d: Date | string | number) => string;
+/** "juin 2026" - quand le jour est inconnu. */
+export declare const rmMonth: (d: Date | string | number) => string;
+/** "1 234" - separateur de milliers francais. */
+export declare const rmNumber: (n: number) => string;
+/** "2 043 €" */
+export declare const rmPrice: (n: number) => string;
+/** "9,2 Md€" · "43 M€" · "12 k" - grands nombres abreges. */
+export declare const rmBig: (n: number) => string;
+/** "+18,2 %" / "-3,1 %" - signe explicite, virgule, espace avant le %. */
+export declare const rmPct: (n: number, digits?: number) => string;
+/** "8,7" - decimale francaise sans unite (ratios : HR, OR, taux). */
+export declare const rmDecimal: (n: number, digits?: number) => string;

package/dist/runtime/utils/format.js

@@ -0,0 +1,7 @@
+export const rmDate = (d) => new Date(d).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" });
+export const rmMonth = (d) => new Date(d).toLocaleDateString("fr-FR", { month: "long", year: "numeric" });
+export const rmNumber = (n) => n.toLocaleString("fr-FR");
+export const rmPrice = (n) => n.toLocaleString("fr-FR") + " \u20AC";
+export const rmBig = (n) => n >= 1e9 ? (n / 1e9).toFixed(1).replace(".", ",") + " Md\u20AC" : n >= 1e6 ? (n / 1e6).toFixed(0) + " M\u20AC" : n >= 1e3 ? (n / 1e3).toFixed(0) + " k" : String(n);
+export const rmPct = (n, digits = 1) => (n > 0 ? "+" : "") + n.toFixed(digits).replace(".", ",") + " %";
+export const rmDecimal = (n, digits = 1) => n.toFixed(digits).replace(".", ",");

package/package.json

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