@tekkare/romulus 0.1.251 → 0.1.253

package/dist/module.json

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

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

@@ -49,6 +49,12 @@ export interface RmProjectGroup {
 export interface RmProjectKind<S = any> {
     /** Valeur de `resourceType` cote API. */
     type: string;
+    /**
+     * La famille sous laquelle la ligne s'affiche, quand deux types designent
+     * les memes documents (un essai range depuis deux apps, sous deux cles) :
+     * une seule puce, un seul filtre. Absent : le type lui-meme.
+     */
+    group?: string;
     index: string;
     label: Record<RmProjectLang, string>;
     /** Rubrique de l'app d'ou vient la famille (Essais, Publications...). */
@@ -82,6 +88,8 @@ export interface RmProjectResource {
     path?: string;
     /** Libelle de la famille. */
     family: string;
+    /** Cle de la famille affichee (cf. RmProjectKind.group) ; `type` reste celui de l'API. */
+    group?: string;
     section?: string;
     icon: string;
     createdAt?: string;

package/dist/runtime/utils/projects.js

@@ -74,8 +74,9 @@ export async function rmProjectHydrate(items, kinds, search) {
   return out;
 }
 export function rmProjectRows(items, documents, kinds, lang = "fr") {
+  const groupOf = (type) => kinds.find((kind) => kind.type === type)?.group ?? type;
   const rank = (type) => {
-    const index = kinds.findIndex((kind) => kind.type === type);
+    const index = kinds.findIndex((kind) => kind.type === groupOf(type));
     return index < 0 ? kinds.length : index;
   };
   return [...items].sort((a, b) => rank(a.resourceType) - rank(b.resourceType)).map((item) => {
@@ -88,6 +89,7 @@ export function rmProjectRows(items, documents, kinds, lang = "fr") {
       subtitle: kind && source ? kind.subtitle?.(source, lang) ?? "" : "",
       path: kind && source ? kind.path?.(source, item.resourceId) ?? "" : "",
       family: kind ? kind.label[lang] : item.resourceType,
+      group: kind?.group ?? item.resourceType,
       section: kind?.section?.[lang],
       icon: kind?.icon ?? "Question",
       createdAt: item.createdAt,
@@ -100,9 +102,10 @@ export function rmProjectRows(items, documents, kinds, lang = "fr") {
 export function rmProjectFamilies(rows) {
   const out = [];
   for (const row of rows) {
-    const found = out.find((family) => family.type === row.type);
+    const key = row.group ?? row.type;
+    const found = out.find((family) => family.type === key);
     if (found) found.count++;
-    else out.push({ type: row.type, label: row.family, icon: row.icon, count: 1 });
+    else out.push({ type: key, label: row.family, icon: row.icon, count: 1 });
   }
   return out;
 }
@@ -110,14 +113,14 @@ export function rmProjectFilterRows(rows, filter, lang = "fr") {
   const words = fold(filter.search).split(/\s+/).filter(Boolean);
   const family = filter.family && filter.family !== "all" ? filter.family : "";
   const order = rmProjectFamilies(rows).map((f) => f.type);
-  const list = rows.filter((row) => !family || row.type === family).filter((row) => !filter.onlyCommented || (row.comments ?? 0) > 0).filter((row) => !words.length || words.every((word) => fold([row.title, row.subtitle, row.family, row.section, row.id].join(" ")).includes(word)));
+  const list = rows.filter((row) => !family || (row.group ?? row.type) === family).filter((row) => !filter.onlyCommented || (row.comments ?? 0) > 0).filter((row) => !words.length || words.every((word) => fold([row.title, row.subtitle, row.family, row.section, row.id].join(" ")).includes(word)));
   const byDate = (a, b) => String(a.createdAt ?? "").localeCompare(String(b.createdAt ?? ""));
   const byTitle = (a, b) => (a.title || a.id).localeCompare(b.title || b.id, lang);
   const sort = filter.sort ?? "date-desc";
   return [...list].sort((a, b) => {
     if (sort === "date-asc") return byDate(a, b);
     if (sort === "title") return byTitle(a, b);
-    if (sort === "family") return order.indexOf(a.type) - order.indexOf(b.type) || byTitle(a, b);
+    if (sort === "family") return order.indexOf(a.group ?? a.type) - order.indexOf(b.group ?? b.type) || byTitle(a, b);
     return byDate(b, a);
   });
 }

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>