@tekkare/romulus 0.1.250 → 0.1.252

package/dist/module.json

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

package/dist/runtime/components/BarChart.vue

@@ -12,6 +12,7 @@ const props = withDefaults(defineProps<{
   /** Categories de l'axe : annees, libelles d'indicateur. */
   categories: (string | number)[]
   series: RmSeriesInput[]
+  /** Barres couchees, la premiere categorie en haut, comme dans un classement. */
   horizontal?: boolean
   height?: keyof typeof RM_CHART_HEIGHTS | number
   description?: string

package/dist/runtime/components/ChoroplethMap.vue

@@ -133,10 +133,13 @@ const ramp = computed(() => {
   return props.reverseColors ? [...seq].reverse() : seq
 })
 
+// Les noms sont compares en NFC des deux cotes : un meme « ô » s'ecrit en un
+// caractere ou en « o » suivi d'un accent combinant, et la region restait
+// grise quand l'app et le trace ne l'ecrivaient pas pareil.
 const byName = computed(() => {
   const out = new Map<string, number | null>()
   for (const entry of props.data) {
-    out.set(entry.name, entry.value === null || entry.value === undefined ? null : Number(entry.value))
+    out.set(entry.name.normalize('NFC'), entry.value === null || entry.value === undefined ? null : Number(entry.value))
   }
   return out
 })

package/dist/runtime/internal/geo/fr-regions.json

@@ -1,5 +1,5 @@
 {
-  "Auvergne-Rhône-Alpes": {
+  "Auvergne-Rhône-Alpes": {
     "path": "M1594.02 905.625L1592.46 900.11L1587.06 899.714L1587.64 896.318L1581.84 894.741L1581.35 884.209L1579.37 882.144L1581.8 874.258L1578.2 872.067L1572.78 872.447L1561.24 861.188L1562.65 844.212L1575.52 842.67L1581.44 838.84L1582.11 834.563L1586.54 830.972L1585.84 826.218L1582.86 823.834L1584.5 822.596L1575.11 809.523L1570.15 812.68L1568.32 811.301L1571.03 800.142L1560.23 798.149L1560.96 788.003L1567.44 776.23L1557.43 764.763L1561.16 761.018L1562.7 753.713L1547.99 749.472L1530.59 749.102L1502.15 764.039L1498.72 771.46L1501.65 772.752L1500.55 776.782L1503.01 780.764L1508.21 780.042L1506.7 784.792L1499.96 787.756L1488.89 797.902L1480.74 796.045L1479.07 798.637L1474.54 797.134L1470.66 799.636L1474.62 791.488L1471.42 789.171L1473.07 786.084L1488.46 780.797L1486.08 775.552L1493.31 762.945L1482.08 755.362L1461.26 778.642L1445.88 779.241L1444.65 771.796L1437.48 769.503L1437.09 766.346L1432.06 773.857L1428.87 774.088L1426 778.056L1419.05 778.701L1417.26 777.147L1418.29 769.549L1415.13 770.841L1413.77 765.837L1411.6 771.596L1411.5 767.27L1407.06 762.39L1408.75 760.54L1400.44 755.793L1403.08 753.435L1402.09 750.674L1393.71 748.883L1390.12 741.056L1386.49 739.451L1386.36 741.783L1383.03 741.072L1374.64 744.856L1366.9 740.114L1363.32 742.277L1362.39 739.51L1345.1 792.238L1339.33 791.671L1340.34 786.695L1338.64 784.376L1340.43 783.484L1334.4 779.549L1337.72 776.52L1334.44 772.29L1329.9 773.073L1327.87 778.534L1324.16 777.949L1322.55 774.165L1319.37 777.751L1315.68 778.211L1310.85 773.659L1305.19 773.872L1303.29 786.569L1300.55 788.688L1301.67 790.761L1296.88 790.885L1291.91 795.182L1288.57 794.951L1289.06 790.499L1286.02 792.002L1284.09 789.439L1280.94 792.601L1276.11 792.079L1272.91 788.778L1265.07 793.292L1260.82 793.307L1259.04 788.177L1250.26 786.379L1252.29 781.447L1250.34 775.495L1255.99 773.127L1256.23 769.88L1260.6 770.941L1262.44 768.986L1260.32 768.77L1259.4 758.033L1261.91 748.269L1256.92 745.847L1256.62 743.468L1247.99 744.224L1244.78 737.535L1241.2 739.482L1234.44 736.422L1233.84 726.602L1231.39 725.567L1232.28 722.749L1229.69 717.794L1223.35 710.324L1221.91 702.911L1218.05 701.84L1216.67 703.794L1218.92 707.624L1213.65 707.874L1215.06 713.114L1213.44 714.742L1211.82 713.006L1207.12 718.798L1203.97 718.922L1203.51 712.973L1200.1 709.238L1195.68 709.422L1192.24 713.887L1188.67 713.034L1187.31 708.927L1183.96 708.77L1176.56 715.063L1169 707.157L1161.44 703.481L1158.6 696.697L1151.38 695.238L1146.82 697.008L1139.23 704.334L1138.87 707.419L1133.78 706.024L1129.77 708.783L1126.84 704.069L1124.94 704.395L1123.43 708.521L1115.19 712.924L1115.58 717.82L1113.14 715.852L1109.41 717.789L1112.16 720.841L1109.02 725.577L1112.99 727.774L1114.16 734.144L1105.82 739.443L1100.53 737.357L1087.09 739.816L1083.08 746.934L1080.43 746.949L1078.52 754.755L1079.27 760.658L1084.24 762.076L1080.86 766.543L1087.55 771.593L1089.98 768.347L1093.59 775.793L1094.67 773.792L1100.08 776.238L1104.73 790.499L1108.99 795.395L1107.32 806.022L1109.61 811.966L1112.82 813.849L1111.9 820.554L1113.87 823.492L1108.86 825.832L1106.72 829.562L1108.02 832.403L1101.99 836.541L1101.18 839.991L1097.81 839.534L1097.33 839.642L1094.54 844.479L1091.58 843.852L1090.08 845.881L1095.94 855.989L1100.37 857.559L1104.5 863.436L1104.29 873.78L1100.49 873.993L1097.84 880.788L1100.83 886.133L1103.86 887.15L1100.64 907.634L1104.97 911.736L1099.87 915.08L1089.87 908.769L1085.79 908.738L1087.94 912.463L1087 920.13L1082.34 922.414L1079.46 927.446L1077.33 927.007L1074.29 933.442L1069.3 937.546L1070.04 943.624L1073.39 946.021L1067.77 950.303L1067.06 958.587L1063.87 957.94L1059.13 961.929L1063.86 970.727L1060.31 973.688L1059.43 973.462L1055.17 974.559L1056.82 980.776L1059.6 982.861L1057.68 985.368L1058.34 989.9L1066.92 1002.59L1062.44 1016.36L1065.57 1016.49L1066.93 1025.28L1070.78 1028.26L1072.6 1027.28L1071.58 1023.44L1080.09 1020.57L1083.47 1020.27L1086.2 1024.74L1100.23 1023.21L1101.9 1017.5L1108.37 1012.85L1107.28 1007.87L1112.67 1002.08L1113.12 994.033L1127.24 979.692L1131.23 984.076L1131.05 992.53L1134.46 989.74L1140.29 989.756L1143.35 1002.51L1146.78 1001.85L1148.56 1004.79L1145.83 1006.69L1148.34 1009.25L1148.52 1018.87L1153.31 1024.17L1157.1 1013.84L1159.42 1013.53L1158.08 1011.63L1160.17 1000.88L1162.98 995.248L1165.81 995.846L1166.29 991.032H1166.9L1166.27 987.989L1169.27 985.363L1175.7 991.528L1180.43 987.75L1179.07 984.508L1181.86 983.442L1181.03 980.575L1183.71 979.525L1185.72 981.883L1194.82 974.629L1194.88 976.912L1199.53 979.63L1199.71 986.175L1207.12 999.936L1209.2 997.269L1216.06 995.53L1218.03 997.015L1218.56 989.566L1225.01 989.535L1227.2 992.802L1226.36 996.609L1234.55 995.217L1241.6 1006.23L1244.25 1004.44L1244.4 1008.74L1248.65 1009.88L1247.09 1014.2L1249.55 1016.37L1248 1019.12L1251.06 1024.08L1251.59 1031.66L1254.37 1035.39L1256.88 1035.17L1260.68 1049.85L1269.29 1059.79L1266.25 1061.88L1268.11 1066L1265.83 1070.99L1267.06 1072.63L1275.78 1070.01L1277.16 1073.49L1280.96 1072.77L1289.36 1080.64L1292.71 1076.59L1292.62 1073.21L1296.73 1069.76L1303.74 1068.54L1304.12 1076.86L1308.63 1077.92L1310.25 1069.73L1315.81 1068.94L1316.52 1071.18L1320.44 1071.67L1321.48 1075.1L1331.16 1079.81L1331.29 1070.98L1346.01 1073.46L1349.25 1086.19L1355.74 1081.24L1360.26 1081.39L1374.94 1074.29L1376.7 1077.81L1380.12 1078.76L1384.65 1074.01L1386.35 1073.2L1384.8 1085.52L1393.06 1088.61L1395.13 1085.64L1400.35 1089.24L1406.44 1088.17L1409.6 1090.25L1409.41 1096.94L1415 1097.45L1417.09 1102.27L1422.25 1102.8L1426.31 1100.3L1430.72 1096.61L1428.75 1094.65L1429.84 1092.31L1432.73 1091.6L1436.76 1095.08L1435.86 1097.64L1440.91 1098.25L1441.35 1095.72L1437.84 1094.1L1438.06 1091.88L1441.76 1090.87L1441.78 1080.37H1437.57L1436.45 1075.37L1433.39 1074.54L1435.66 1070.48L1426.97 1070.96L1424.15 1067.91L1421.15 1069.86L1414.45 1064.34L1415.82 1061.91L1413.25 1056.86L1415.3 1055.66L1419.4 1057.73L1421.64 1055.08L1418.06 1053.52L1417.36 1045.86L1434 1049.99L1435.55 1045.73L1439.32 1045.4L1432.19 1039.2L1437.62 1029.08L1437.1 1023.13L1446.28 1025.04L1448.44 1021.6L1452.72 1022.89L1457.09 1017.36L1453.73 1014.97L1456.73 1007.02L1462.67 1008.96L1469.96 1006.87L1473.07 1003.71L1469.79 1000.22L1477.06 995.61L1481.2 998.546L1489.46 991.307L1501.56 993.167L1506.26 989.869L1511.03 993.737L1513.11 992.718L1513.38 980.038L1509.59 977.86L1509.71 971.115L1502 971.461L1496.97 968.5L1498.62 961.233L1501.23 960.3L1499.76 955.589L1501.36 952.774L1503.24 951.87L1506.52 954.641L1510.72 952.365L1514.01 955.468L1514.07 960.344L1523.26 963.082L1527.06 962.615L1526.39 956.909L1529.6 954.441L1532.94 955.887L1536.81 952.257L1542.43 954.487L1547.67 949.876L1554.28 950.254L1557.01 947.015L1565.67 951.895L1570.38 950.449L1570.4 945.671L1576 945.461L1581.98 937.844L1590.55 938.358L1596.23 932.427L1593.57 921.625L1599.22 916.603L1600.48 909.188L1594.02 905.625Z",
     "departments": [
       "Ain",

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

@@ -418,15 +418,18 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
         type: string;
     };
     yAxis: {
-        splitLine: {
-            show: boolean;
-        };
+        inverse: boolean;
         axisLabel: {
+            width: number;
+            overflow: string;
             formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
         };
+        splitLine: {
+            show: boolean;
+        };
         axisLine: {
             lineStyle: {
                 color: string;

package/dist/runtime/utils/chart.js

@@ -193,9 +193,22 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
   return {
     ...rmBaseOption(theme, decal),
     tooltip: { ...rmBaseOption(theme, decal).tooltip, ...rmTooltipValue(valueFormatter) },
-    grid: { left: 140, right: 60, top: 16, bottom: 24, containLabel: true },
+    // `containLabel` reserve deja la place des libelles : une marge gauche
+    // fixe s'y ajoutait, et un libelle long ecrasait le trace au point de
+    // faire se chevaucher les graduations de l'axe des valeurs.
+    grid: { left: 8, right: 60, top: 16, bottom: 24, containLabel: true },
     xAxis: { type: "value", ...axisCommon(theme, valueFormatter) },
-    yAxis: { type: "category", data: labels, ...axisCommon(theme), splitLine: { show: false } },
+    yAxis: {
+      type: "category",
+      data: labels,
+      ...axisCommon(theme),
+      // ECharts empile les categories de bas en haut : la premiere valeur se
+      // lisait en bas, a l'inverse d'un classement ou d'un tableau.
+      inverse: true,
+      // Au-dela, le libelle est coupe ; l'infobulle le donne en entier.
+      axisLabel: { ...axisCommon(theme).axisLabel, width: 180, overflow: "truncate" },
+      splitLine: { show: false }
+    },
     series: [{
       type: "bar",
       data: values,

package/layer/app/app.config.ts

@@ -39,6 +39,12 @@ export default defineAppConfig({
      * pointe la route qui nourrit le panneau : une app peut la detourner vers
      * la sienne (ou une autre API) sans toucher au panneau.
      */
+    /**
+     * L'app, pour les vues de ressources (cf. utils/oipResources) : une fiche
+     * dont c'est l'app d'origine s'ouvre sur place, les autres dans leur app.
+     * « france_augmented_science_app », « fr_drugs_app »... Vide : aucune.
+     */
+    resourceApp: "",
     /**
      * Registre des index Elasticsearch (collection Directus ElasticIndices).
      * `preload` : charge les noms au demarrage, pour les apps qui designent

package/layer/app/components/OipPubmedSummary.vue

@@ -0,0 +1,223 @@
+<!--
+  Resume d'une publication PubMed : l'onglet « Summary » de la fiche de France
+  Augmented Science, son app d'origine.
+
+  Une seule vue pour toutes les apps : la page /pubmed/[id]/summary de France
+  Augmented Science la monte, et le tiroir d'un projet la monte dans
+  n'importe quelle app du portail. Elle ne lit ni route ni store : l'id et
+  les termes a surligner lui sont donnes.
+-->
+<template>
+  <div ref="root" class="oip-pm">
+    <RmLoadingState v-if="pending" :lines="3" :chart-height="240" />
+    <RmEmptyState
+      v-else-if="!doc"
+      icon="FileX"
+      :title="en ? 'Record unavailable' : 'Fiche indisponible'"
+      :text="en ? 'The record is no longer in the data.' : 'La fiche n\'est plus dans la donnée.'"
+    />
+    <div v-else class="oip-pm__layout">
+      <div class="oip-pm__nav">
+        <RmChaptersNav
+          class="oip-pm__chapters"
+          :chapters="chapters"
+          :title="en ? 'Chapters' : 'Chapitres'"
+          :offset="chaptersOffset"
+          :style="{ top: `${stickyTop}px` }"
+          @select="scrollToChapter"
+        />
+      </div>
+
+      <div class="oip-pm__content">
+        <section id="introduction" class="oip-pm__card">
+          <div class="oip-pm__head">
+            <RmTag v-if="doc.delete" variant="rose">
+              {{ en ? "Article has been deleted" : "L'article a été supprimé" }}
+            </RmTag>
+            <h2 class="oip-pm__title">Introduction</h2>
+            <OipResourceSource :uuid="PUBMED_SOURCE_UUID" :lang="lang" />
+          </div>
+
+          <OipResourceField :label="en ? 'Full Title' : 'Titre complet'" :text="orNA(doc.title)" :highlight="highlight" :lang="lang" />
+          <OipResourceField
+            :label="en ? 'First Published' : 'Première publication'"
+            :text="doc.article_date ? longDate(doc.article_date) : 'N/A'"
+            :lang="lang"
+          />
+          <OipResourceTags v-for="group in tagGroups" :key="group.label" v-bind="group" :highlight="highlight" :lang="lang" />
+        </section>
+
+        <section v-for="section in sections" :id="anchor(section.label)" :key="section.label" class="oip-pm__card">
+          <h2 class="oip-pm__title">{{ titleCase(section.label) }}</h2>
+          <RmTextHighlight class="oip-pm__body" :queries="highlight" :text="section.text" :lang="lang" />
+        </section>
+
+        <section v-if="hasLinks" id="links" class="oip-pm__card">
+          <h2 class="oip-pm__title">{{ en ? "Links" : "Liens" }}</h2>
+          <div v-if="!doc.delete" class="oip-pm__link">
+            <p class="oip-pm__link-label">
+              <RmIcon name="Link" :size="12" color="var(--text-muted)" />
+              {{ en ? "Pubmed article" : "Article PubMed" }}
+            </p>
+            <a :href="`https://pubmed.ncbi.nlm.nih.gov/${id}/`" target="_blank" rel="noopener">
+              https://pubmed.ncbi.nlm.nih.gov/<b>{{ id }}</b>/
+            </a>
+          </div>
+          <div v-if="doc.doi" class="oip-pm__link">
+            <p class="oip-pm__link-label">
+              <RmIcon name="Link" :size="12" color="var(--text-muted)" />
+              {{ en ? "Complete article" : "Article complet" }}
+            </p>
+            <a :href="`https://www.doi.org/${doc.doi}`" target="_blank" rel="noopener">
+              https://www.doi.org/<b>{{ doc.doi }}</b>
+            </a>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { oipResourceSpec } from "../utils/oipResources";
+import { oipEsGet } from "../composables/useOipResources";
+
+const props = withDefaults(
+  defineProps<{
+    /** `_id` de la publication (son PMID). */
+    id: string;
+    /** Termes de la recherche en cours, surlignes dans la fiche. */
+    highlight?: string[];
+    lang?: "fr" | "en";
+  }>(),
+  { highlight: () => [], lang: "fr" },
+);
+
+/** `source` : l'uuid Directus d'une source citee, pour ouvrir le panneau Sources. */
+const emit = defineEmits<{ source: [uuid: string] }>();
+
+/** La fiche Directus « PubMed » (cf. useSources de France Augmented Science). */
+const PUBMED_SOURCE_UUID = "63805e97-48ac-4c04-afd6-8a15055dec97";
+
+const en = computed(() => props.lang === "en");
+const root = ref<HTMLElement | null>(null);
+const { chaptersOffset, stickyTop, scrollToChapter } = useOipChapterScroll(root);
+
+const spec = oipResourceSpec("PubMed")!;
+const { data: doc, pending } = useAsyncData(
+  () => `oip-pubmed-${props.id}`,
+  async () => (await oipEsGet(spec.cluster, spec.kind.index, props.id))?._source ?? null,
+  { server: false, watch: [() => props.id] },
+);
+
+const orNA = (value: unknown) => (value == null || value === "" ? "N/A" : String(value));
+const unique = (values: unknown[]) => [...new Set(values.filter((v): v is string => typeof v === "string" && v !== ""))];
+const titleCase = (value: string) => (value || "").toLowerCase().replace(/(^|\s)\S/g, (c) => c.toUpperCase());
+const anchor = (label: string) => (label || "").toLowerCase();
+const longDate = (value: string) =>
+  new Date(value).toLocaleDateString(en.value ? "en-US" : "fr-FR", { year: "numeric", month: "long", day: "numeric" });
+
+const tagGroups = computed(() => {
+  const d = doc.value ?? {};
+  const diseases: any[] = d.diseases ?? [];
+  return [
+    { icon: "Article", label: en.value ? "Article type" : "Type d'article", values: unique(d.publication_types ?? []) },
+    { icon: "BookOpen", label: en.value ? "Journal name" : "Nom de la revue", values: [orNA(d.journal)] },
+    { icon: "Molecule", label: en.value ? "Molecules" : "Molécules", values: unique(d.chemical_list ?? []) },
+    { icon: "TextAa", label: en.value ? "Keywords" : "Mots-clés", values: unique(d.keywords ?? []) },
+    { icon: "Tag", label: en.value ? "Mesh Terms" : "Termes MeSH", values: unique(d.mesh_terms ?? []) },
+    {
+      icon: "Bandaids",
+      label: en.value ? "Rare diseases" : "Maladies rares",
+      values: unique((d.rare_diseases ?? []).map((r: any) => r.concat_disease_name_orpha_code)),
+    },
+    {
+      icon: "FaceMask",
+      label: "ICD 10",
+      values: unique(diseases.flatMap((x) => x.icd10?.map((i: any) => i.combined_label) ?? [])),
+    },
+    {
+      icon: "ListMagnifyingGlass",
+      label: en.value ? "Oncology Terms" : "Termes oncologiques",
+      values: unique(diseases.flatMap((x) => x.section?.map((s: any) => s.label) ?? [])),
+    },
+  ];
+});
+
+const sections = computed<{ label: string; text: string; order: number }[]>(() =>
+  [...(doc.value?.sections ?? [])].sort((a, b) => a?.order - b?.order),
+);
+
+const hasLinks = computed(() => !doc.value?.delete || !!doc.value?.doi);
+
+const chapters = computed(() => [
+  { label: "Introduction", value: "introduction" },
+  ...sections.value.map((s) => ({ label: titleCase(s.label), value: anchor(s.label) })),
+  ...(hasLinks.value ? [{ label: en.value ? "Links" : "Liens", value: "links" }] : []),
+]);
+</script>
+
+<style scoped>
+.oip-pm__layout {
+  display: flex;
+  gap: var(--space-16);
+  align-items: flex-start;
+}
+.oip-pm__nav {
+  flex: 0 0 auto;
+  align-self: stretch;
+}
+.oip-pm__chapters {
+  position: sticky;
+}
+.oip-pm__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: grid;
+  gap: var(--space-16);
+}
+.oip-pm__card {
+  display: grid;
+  gap: var(--space-24);
+  padding: var(--space-24);
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-sm);
+}
+.oip-pm__head {
+  display: grid;
+  gap: var(--space-4);
+  justify-items: start;
+}
+.oip-pm__title {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--font-18);
+  font-weight: 800;
+  line-height: normal;
+}
+.oip-pm__body {
+  color: var(--text-primary);
+  font-size: var(--font-14);
+  line-height: 160%;
+}
+.oip-pm__link {
+  display: grid;
+  gap: var(--space-4);
+}
+.oip-pm__link-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--font-12);
+}
+.oip-pm__link a {
+  color: var(--color-primary);
+  font-size: var(--font-14);
+  text-decoration: underline;
+  word-break: break-all;
+}
+</style>

package/layer/app/components/OipResourceDrawer.vue

@@ -0,0 +1,331 @@
+<!--
+  Le detail d'une ressource de projet, ouvert sans quitter la page, dans
+  n'importe quelle app du portail.
+
+  - Un type que le layer sait montrer (cf. OIP_RESOURCE_SPECS) s'affiche avec
+    la fiche de son app d'origine, ses onglets compris : une publication comme
+    dans France Augmented Science, une marque comme dans fr_drugs_app, dans
+    l'une comme dans l'autre.
+  - Les autres passent par la carte generique, decrite dans le registre des
+    types de l'API : un type ajoute la-bas s'affiche ici sans deploiement.
+
+  Sous le titre, un lien mene a la fiche dans son app d'origine. Dans l'app
+  d'origine elle-meme, il navigue sur place ; ailleurs, il ouvre l'autre app
+  dans un onglet.
+
+  Une fiche ouverte depuis la fiche du tiroir (l'auteur d'une publication, la
+  marque d'une contribution...) s'empile dans un tiroir de plus ; celui de
+  dessous reste ou il etait. Un lien vers une page qui n'est pas une fiche
+  quitte le tiroir.
+-->
+<template>
+  <RmDrawer
+    v-for="(entry, index) in entries"
+    :key="`${index}-${entry.type ?? entry.fiche?.view}-${entry.id ?? entry.fiche?.path}`"
+    :model-value="index === 0 ? open : true"
+    :size="index === 0 ? size : `min(${1180 - index * 40}px, calc(100vw - ${96 + index * 24}px))`"
+    :z-index="index === 0 ? undefined : 100 + index * 2"
+    :label="entry.title || entry.id || ''"
+    @update:model-value="(value: boolean) => !value && close(index)"
+  >
+    <!-- Carte generique : l'en-tete du tiroir porte le titre et le lien. -->
+    <template v-if="!isPage(entry)" #header>
+      <div class="oip-rd__head">
+        <p class="oip-rd__title">{{ entry.title || entry.id }}</p>
+        <OipResourceDrawerLink :origin="originOf(entry)" :lang="lang" @leave="close(0)" />
+      </div>
+    </template>
+
+    <div v-if="index > 0 || open" class="oip-rd__body" :class="{ 'oip-rd__body--page': isPage(entry) }">
+      <!-- Une fiche porte son bandeau (titre, lien dessous, onglets) : l'en-tete
+           du tiroir s'efface, sa croix se pose au bout du bandeau. -->
+      <RmButton
+        v-if="isPage(entry)"
+        class="oip-rd__close"
+        variant="tertiary"
+        size="md"
+        icon-only
+        ghost
+        prefix-icon="X"
+        :aria-label="en ? 'Close' : 'Fermer'"
+        @click="close(index)"
+      />
+      <!-- Une fiche visee par un lien, montee par sa vue. -->
+      <div v-if="entry.fiche && !entry.fiche.view.startsWith('resource:')" class="oip-rv oip-rv--whole">
+        <component :is="oipResourceViewComponent(entry.fiche.view)" v-bind="entry.fiche.props" :lang="lang">
+          <template #title-link>
+            <OipResourceDrawerLink :origin="originOf(entry)" :lang="lang" @leave="close(0)" />
+          </template>
+        </component>
+      </div>
+      <OipResourceView
+        v-else-if="entry.type && oipResourceViewSpec(entry.type)"
+        :type="entry.type"
+        :id="entry.id ?? ''"
+        :title="entry.title"
+        :tab="entry.tab"
+        :highlight="index === 0 ? highlight : []"
+        :lang="lang"
+        @source="emit('source', $event)"
+      >
+        <template v-if="isPage(entry)" #title-link>
+          <OipResourceDrawerLink :origin="originOf(entry)" :lang="lang" @leave="close(0)" />
+        </template>
+      </OipResourceView>
+      <OipResourceGenericCard
+        v-else
+        :type="entry.type ?? ''"
+        :id="entry.id ?? ''"
+        :title="entry.title"
+        :source="source"
+        :lang="lang"
+      />
+    </div>
+  </RmDrawer>
+</template>
+
+<script setup lang="ts">
+import {
+  OIP_RESOURCE_APPS,
+  oipFillTemplate,
+  oipResourceAppUrl,
+  oipResourceViewSpec,
+  type OipResourceApp,
+} from "../utils/oipResources";
+import { oipFicheOf, type OipFicheTarget } from "../utils/oipFicheRoutes";
+import { oipHydrate, useOipResourceTypes } from "../composables/useOipResources";
+import { OIP_RESOURCE_NAV, useOipResourceApp } from "../composables/useOipResourceNav";
+import { oipResourceViewComponent } from "../composables/useOipResourceViews";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    /** `resourceType` de l'API. */
+    type: string;
+    /** `resourceId` de l'API : l'`_id` du document. */
+    id: string;
+    title?: string;
+    /** L'app qui ouvre le tiroir. Absente : `oip.resourceApp` de l'app.config. */
+    app?: OipResourceApp | "";
+    /** Le document deja relu par l'app, pour la carte generique. */
+    source?: Record<string, unknown> | null;
+    highlight?: string[];
+    lang?: "fr" | "en";
+    size?: string;
+  }>(),
+  {
+    title: "",
+    app: "",
+    source: null,
+    highlight: () => [],
+    lang: "fr",
+    size: "min(1280px, calc(100vw - 48px))",
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  /** Une source citee dans la fiche : l'app ouvre son panneau Sources. */
+  source: [uuid: string];
+}>();
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit("update:modelValue", value),
+});
+
+const en = computed(() => props.lang === "en");
+const configuredApp = useOipResourceApp();
+const app = computed(() => props.app || configuredApp);
+const localePath = useLocalePath();
+
+/**
+ * Une fiche ouverte : une ressource (`type`, `id`, l'onglet et le document
+ * relu pour son lien) ou une fiche visee par un lien (`fiche`).
+ */
+interface Entry {
+  type?: string;
+  id?: string;
+  tab?: string;
+  title: string;
+  doc?: Record<string, any> | null;
+  fiche?: OipFicheTarget & { app: OipResourceApp; path: string };
+}
+
+/** Les fiches ouvertes au-dessus de celle du projet, de bas en haut. */
+const stacked = ref<Entry[]>([]);
+/** Le document de la ressource du projet : certaines fiches s'adressent par un de ses champs. */
+const rootDoc = ref<Record<string, any> | null>(null);
+const entries = computed<Entry[]>(() => [
+  { type: props.type, id: props.id, title: props.title, doc: rootDoc.value },
+  ...stacked.value,
+]);
+
+watch(
+  () => [props.modelValue, props.type, props.id] as const,
+  async ([isOpen, type, id]) => {
+    rootDoc.value = null;
+    const spec = oipResourceViewSpec(type);
+    if (!isOpen || !spec) return;
+    rootDoc.value = (await oipHydrate(spec.type, [id]).catch(() => ({})))[id] ?? null;
+  },
+  { immediate: true },
+);
+
+/** Fermer un tiroir ferme aussi ceux qui sont au-dessus de lui. */
+function close(index: number) {
+  if (index === 0) open.value = false;
+  stacked.value = stacked.value.slice(0, Math.max(0, index - 1));
+}
+
+watch(open, (isOpen) => {
+  if (!isOpen) stacked.value = [];
+});
+
+/** Empile une ressource, titree par la description de son type des que son document arrive. */
+async function pushResource(type: string, id: string, tab?: string) {
+  const spec = oipResourceViewSpec(type);
+  if (!spec) return;
+  const entry = reactive<Entry>({ type, id, tab, title: "", doc: null });
+  stacked.value = [...stacked.value, entry];
+  const doc = (await oipHydrate(spec.type, [id]).catch(() => ({})))[id];
+  if (doc) {
+    entry.doc = doc;
+    entry.title = spec.kind.title(doc, props.lang);
+  }
+}
+
+const appHref = (target: OipResourceApp, path: string) =>
+  target === app.value ? localePath(path) : oipResourceAppUrl(target, path, props.lang);
+
+// Les liens des fiches du tiroir empilent un tiroir de plus ; un lien vers une
+// page qui n'est pas une fiche quitte le tiroir (sur place dans l'app, dans un
+// onglet ailleurs).
+provide(OIP_RESOURCE_NAV, {
+  href: (type, id, tab) => urlOf(type, id, tab)?.url ?? "",
+  open: (type, id, tab) => pushResource(type, id, tab),
+  appHref,
+  openApp(target, path) {
+    const fiche = oipFicheOf(target, path);
+    if (fiche?.view.startsWith("resource:")) {
+      pushResource(fiche.props.type!, fiche.props.id!, fiche.props.tab || undefined);
+      return;
+    }
+    if (fiche) {
+      stacked.value = [...stacked.value, { title: fiche.title, fiche: { ...fiche, app: target, path } }];
+      return;
+    }
+    const url = appHref(target, path);
+    if (target === app.value) {
+      close(0);
+      navigateTo(url);
+    } else window.open(url, "_blank", "noopener");
+  },
+});
+
+/** L'URL de la fiche : locale dans son app d'origine, absolue ailleurs. */
+function urlOf(type: string, id: string, tab?: string, doc?: Record<string, any> | null) {
+  const spec = oipResourceViewSpec(type);
+  if (!spec) return null;
+  const path = spec.detailPath(id, tab, doc);
+  if (!path) return null;
+  if (spec.app === app.value) return { local: true, url: localePath(path), name: "" };
+  return { local: false, url: oipResourceAppUrl(spec.app, path, props.lang), name: OIP_RESOURCE_APPS[spec.app].name };
+}
+
+/**
+ * Les vues sans bandeau a elles (une carte de resultat) : le tiroir garde son
+ * en-tete, titre et lien.
+ */
+const CARD_VIEWS = new Set(["drugs-national-assembly", "science-phrc"]);
+
+/** Une fiche du layer : elle porte son bandeau, le tiroir efface le sien. */
+function isPage(entry: Entry) {
+  if (entry.fiche) return true;
+  const spec = entry.type ? oipResourceViewSpec(entry.type) : undefined;
+  return !!spec && !CARD_VIEWS.has(spec.view ?? "");
+}
+
+function originOf(entry: Entry) {
+  if (entry.fiche) {
+    const local = entry.fiche.app === app.value;
+    return { local, url: appHref(entry.fiche.app, entry.fiche.path), name: OIP_RESOURCE_APPS[entry.fiche.app].name };
+  }
+  if (entry.type && oipResourceViewSpec(entry.type)) return urlOf(entry.type, entry.id ?? "", entry.tab, entry.doc);
+  return registryUrl.value ? { local: false, url: registryUrl.value, name: registryName.value } : null;
+}
+
+// Un type sans vue : son lien vient du registre de l'API.
+const registryUrl = ref("");
+const registryName = ref("");
+watch(
+  () => [props.modelValue, props.type, props.id] as const,
+  async ([isOpen, type, id]) => {
+    registryUrl.value = "";
+    registryName.value = "";
+    if (!isOpen || oipResourceViewSpec(type)) return;
+    const entry = (await useOipResourceTypes()).find((e) => e.key === type);
+    registryUrl.value = entry?.display?.detailUrl ? oipFillTemplate(entry.display.detailUrl, props.source ?? {}, id) : "";
+    const owner = entry?.ownerApp ?? "";
+    registryName.value = OIP_RESOURCE_APPS[owner as OipResourceApp]?.name ?? owner;
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.oip-rd__head {
+  display: grid;
+  gap: var(--space-4);
+  min-width: 0;
+}
+.oip-rd__title {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--font-18);
+  font-weight: 700;
+  line-height: 1.3;
+}
+.oip-rd__body {
+  padding: var(--space-16) 0;
+}
+.oip-rd__body.oip-rd__body--page {
+  padding: 0 0 var(--space-32);
+}
+.oip-rd__close {
+  position: absolute;
+  top: var(--space-16);
+  right: var(--space-24);
+  z-index: 96;
+}
+/* La place de la croix, au bout de la rangee titre + actions du bandeau. */
+.oip-rd__body--page :deep(.rm-page-header__row) {
+  padding-right: 72px;
+}
+/* La fleche de retour des pages remonterait l'historique de l'ecran dessous. */
+.oip-rd__body--page :deep(.rm-page-header__back) {
+  display: none;
+}
+/* Le contenu d'une fiche d'un seul tenant recoit les gouttieres de la colonne
+   de contenu ; son bandeau reste bord a bord. On vise l'element qui porte le
+   bandeau, a quelque profondeur qu'il soit : une vue de ressource enveloppe
+   souvent sa fiche, et la marge posee sur l'enveloppe decalerait le bandeau. */
+.oip-rd__body--page :deep(.oip-rv--whole :has(> .rm-page-header) > :not(.rm-page-header)) {
+  box-sizing: border-box;
+  padding-inline: var(--space-24);
+}
+.oip-rd__body--page :deep(.oip-rv--whole :has(> .rm-page-header) > .rm-page-header + *) {
+  margin-top: var(--space-24);
+}
+</style>
+
+<style>
+/* Hors portee : l'en-tete et le corps appartiennent au tiroir (teleporte).
+   Sans marge interne, le bandeau colle de la fiche tient le haut du tiroir. */
+.rm-drawer:has(> .rm-drawer__body .oip-rd__body--page) > .rm-drawer__header {
+  display: none;
+}
+.rm-drawer:has(> .rm-drawer__body .oip-rd__body--page) > .rm-drawer__body {
+  padding: 0;
+}
+</style>