@tekkare/romulus 0.1.231 → 0.1.233

package/dist/runtime/components/ProjectPanel.vue

@@ -0,0 +1,193 @@
+<!--
+  RmProjectPanel - le panneau « Projets » du rail.
+
+  Il repond a une question : ou partent mes ajouts ? Le projet actif s'y dit
+  en tete, avec son compte. Chaque carte porte les deux gestes separement,
+  ecrits en toutes lettres : y envoyer ses ajouts, ou ouvrir le projet. Les
+  confondre obligeait a rendre un projet actif pour aller le lire.
+
+  On peut y creer un projet d'un nom : il devient l'actif sans quitter la
+  page (l'app le fait a la reception de `create`). Le bouton de creation peut
+  etre remplace par celui de l'app (slot `new`), qui proposerait une creation
+  assistee. Renommer et supprimer restent sur la page du projet.
+
+  La recherche n'apparait qu'a partir de cinq projets : en dessous, la liste
+  se lit d'un coup d'oeil et le champ coute une rangee pour rien.
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { rmProjectCount, rmProjectGroups, rmProjectSummary, type RmProject } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    projects: RmProject[]
+    activeId?: string | null
+    /** Elements du projet actif. */
+    activeCount?: number
+    loading?: boolean
+    failed?: boolean
+    /** Creation en cours. */
+    creating?: boolean
+    /** Lien « Tous mes projets ». Vide : pas de lien. */
+    allTo?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { activeId: null, activeCount: 0, loading: false, failed: false, creating: false, allTo: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  activate: [projectId: string]
+  open: [projectId: string]
+  pin: [projectId: string]
+  create: [title: string]
+}>()
+
+const WORDS = {
+  fr: {
+    goTo: 'Mes ajouts vont dans', name: 'Nom du projet', placeholder: 'Veille oncologie', required: 'Un nom est requis',
+    create: 'Créer', cancel: 'Annuler', loading: 'Chargement...', failed: 'Les projets ne sont pas accessibles pour le moment.',
+    search: 'Rechercher un projet', new: 'Nouveau projet', created: 'Créé le', active: 'Projet actif',
+    activate: 'Activer ce projet', open: 'Ouvrir', noMatch: 'Aucun projet ne correspond.', none: 'Aucun projet pour le moment.',
+    all: 'Tous mes projets', pin: 'Épingler en haut', unpin: 'Désépingler',
+  },
+  en: {
+    goTo: 'Additions go to', name: 'Project name', placeholder: 'Oncology watch', required: 'A name is required',
+    create: 'Create', cancel: 'Cancel', loading: 'Loading...', failed: 'Projects are unavailable right now.',
+    search: 'Search a project', new: 'New project', created: 'Created the', active: 'Active project',
+    activate: 'Activate this project', open: 'Open', noMatch: 'No project matches.', none: 'No project yet.',
+    all: 'All my projects', pin: 'Pin to the top', unpin: 'Unpin',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const active = computed(() => props.projects.find(p => p.id === props.activeId) ?? null)
+
+const search = ref('')
+const shown = computed(() => {
+  const needle = search.value.trim().toLowerCase()
+  return needle ? props.projects.filter(p => p.title.toLowerCase().includes(needle)) : props.projects
+})
+const groups = computed(() => rmProjectGroups(shown.value, props.lang))
+
+const formOpen = ref(false)
+const draft = ref('')
+const missing = ref(false)
+
+function openForm() {
+  formOpen.value = true
+}
+
+function cancel() {
+  formOpen.value = false
+  draft.value = ''
+  missing.value = false
+}
+
+function submit() {
+  const title = draft.value.trim()
+  if (!title) {
+    missing.value = true
+    return
+  }
+  emit('create', title)
+  cancel()
+}
+
+defineExpose({ openForm })
+</script>
+
+<template>
+  <div class="rm-project-panel">
+    <div v-if="active" class="rm-project-panel__head">
+      <p class="rm-project-panel__label">{{ T.goTo }}</p>
+      <p class="rm-project-panel__active">{{ active.title }}</p>
+      <p class="rm-project-panel__muted">{{ rmProjectCount(activeCount, lang) }}</p>
+    </div>
+
+    <form v-if="formOpen" class="rm-project-panel__create" @submit.prevent="submit">
+      <RmInput v-model="draft" :label="T.name" :placeholder="T.placeholder" :error="missing ? T.required : ''" />
+      <div class="rm-project-panel__actions">
+        <RmButton type="submit" variant="primary" size="sm" :loading="creating">{{ T.create }}</RmButton>
+        <RmButton variant="tertiary" size="sm" @click="cancel">{{ T.cancel }}</RmButton>
+      </div>
+    </form>
+
+    <div class="rm-project-panel__list">
+      <p v-if="loading && !projects.length" class="rm-project-panel__muted">{{ T.loading }}</p>
+      <p v-else-if="failed" class="rm-project-panel__muted">{{ T.failed }}</p>
+      <template v-else>
+        <div class="rm-project-panel__tools">
+          <RmSearchBar
+            v-if="projects.length > 4"
+            v-model="search"
+            class="rm-project-panel__search"
+            :have-advanced="false"
+            :placeholder="T.search"
+          />
+          <span v-if="!formOpen" class="rm-project-panel__new">
+            <slot name="new" :open-form="openForm">
+              <RmButton variant="secondary" size="sm" prefix-icon="Plus" @click="openForm">{{ T.new }}</RmButton>
+            </slot>
+          </span>
+        </div>
+
+        <template v-for="group in groups" :key="group.key">
+          <p class="rm-project-panel__group">
+            <RmIcon v-if="group.key === 'pinned'" name="PushPin" weight="fill" :size="12" />
+            {{ group.label }}
+          </p>
+          <article
+            v-for="project in group.projects"
+            :key="project.id"
+            class="rm-project-panel__card"
+            :class="{ 'is-active': project.id === activeId }"
+          >
+            <div class="rm-project-panel__card-head">
+              <p class="rm-project-panel__card-title">{{ project.title }}</p>
+              <RmButton
+                variant="tertiary"
+                size="sm"
+                icon-only
+                ghost
+                class="rm-project-panel__pin"
+                :class="{ 'is-on': project.pinned }"
+                :aria-pressed="!!project.pinned"
+                :aria-label="project.pinned ? T.unpin : T.pin"
+                :title="project.pinned ? T.unpin : T.pin"
+                @click="emit('pin', project.id)"
+              >
+                <RmIcon name="PushPin" :weight="project.pinned ? 'fill' : 'regular'" :size="14" />
+              </RmButton>
+            </div>
+            <p class="rm-project-panel__meta">{{ rmProjectSummary(project, lang) }}</p>
+            <p v-if="project.createdAt" class="rm-project-panel__meta">
+              {{ T.created }} <RmDate :date="project.createdAt" :lang="lang" />
+            </p>
+            <div class="rm-project-panel__actions">
+              <RmButton
+                :variant="project.id === activeId ? 'primary' : 'tertiary'"
+                size="sm"
+                :disabled="project.id === activeId"
+                @click="emit('activate', project.id)"
+              >
+                {{ project.id === activeId ? T.active : T.activate }}
+              </RmButton>
+              <RmButton variant="tertiary" size="sm" @click="emit('open', project.id)">{{ T.open }}</RmButton>
+            </div>
+          </article>
+        </template>
+
+        <p v-if="search && !shown.length" class="rm-project-panel__muted">{{ T.noMatch }}</p>
+        <p v-if="!projects.length" class="rm-project-panel__muted">{{ T.none }}</p>
+      </template>
+    </div>
+
+    <div v-if="allTo" class="rm-project-panel__footer">
+      <NuxtLink :to="allTo" class="rm-project-panel__link">{{ T.all }}</NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-panel{display:flex;flex-direction:column;gap:16px;width:100%}.rm-project-panel__head{background:color-mix(in srgb,var(--rm-shell-accent) 12%,var(--rm-shell-surface));border:1px solid color-mix(in srgb,var(--rm-shell-accent) 35%,transparent);border-left:4px solid var(--rm-shell-accent);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:2px;padding:var(--space-12)}.rm-project-panel__label{color:var(--rm-shell-text-dark);font-size:var(--font-12);font-weight:var(--weight-semibold);letter-spacing:.02em;margin:0;text-transform:uppercase}.rm-project-panel__active{color:var(--rm-shell-accent);font-size:var(--font-16);font-weight:var(--weight-bold);margin:0}.rm-project-panel__muted{color:var(--rm-shell-text-dark);font-size:var(--font-12);margin:0}.rm-project-panel__create{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:10px;padding:12px}.rm-project-panel__create,.rm-project-panel__list{display:flex;flex-direction:column;gap:8px}.rm-project-panel__tools{align-items:center;display:flex;gap:8px}.rm-project-panel__search{flex:1;min-width:0}.rm-project-panel__search :deep(.search-bar){box-sizing:border-box;display:flex;min-width:0;width:100%}.rm-project-panel__new{display:inline-flex;flex:0 0 auto;margin-left:auto}.rm-project-panel__group{align-items:center;color:var(--rm-shell-text-muted);display:flex;font-size:11px;font-weight:700;gap:6px;letter-spacing:.06em;margin:4px 0 0;text-transform:uppercase}.rm-project-panel__card{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:10px;display:flex;flex-direction:column;gap:6px;padding:12px}.rm-project-panel__card.is-active{background:color-mix(in srgb,var(--rm-shell-accent) 8%,var(--rm-shell-surface));border-color:color-mix(in srgb,var(--rm-shell-accent) 45%,transparent)}.rm-project-panel__card-head{align-items:center;display:flex;gap:8px}.rm-project-panel__card-title{color:var(--rm-shell-text-dark);flex:1;font-size:14px;font-weight:600;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-project-panel__pin{margin-right:-6px}.rm-project-panel__pin.is-on{color:var(--color-primary)}.rm-project-panel__meta{color:var(--rm-shell-text-muted);display:flex;font-size:12px;gap:4px;margin:0}.rm-project-panel__actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.rm-project-panel__footer{border-top:1px solid var(--rm-shell-border);padding-top:12px}.rm-project-panel__link{color:var(--rm-shell-accent);font-size:12px;font-weight:600;text-decoration:none}.rm-project-panel__link:hover{text-decoration:underline}
+</style>

package/dist/runtime/components/ProjectRenameDialog.vue

@@ -0,0 +1,67 @@
+<!--
+  RmProjectRenameDialog - renommer un projet.
+
+  Un champ dans une modale plutot qu'un titre editable sur place : pour que
+  l'enregistrement et l'echec aient ou se dire. Le champ repart du titre
+  courant a chaque ouverture ; Entree enregistre.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    /** Titre actuel du projet. */
+    title: string
+    loading?: boolean
+    error?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { loading: false, error: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'save': [title: string]
+}>()
+
+const WORDS = {
+  fr: { heading: 'Renommer le projet', name: 'Nom du projet', cancel: 'Annuler', save: 'Enregistrer' },
+  en: { heading: 'Rename the project', name: 'Project name', cancel: 'Cancel', save: 'Save' },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const draft = ref('')
+watch(() => props.modelValue, (open) => {
+  if (open) draft.value = props.title
+}, { immediate: true })
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+
+function save() {
+  const title = draft.value.trim()
+  if (!title || props.loading) return
+  emit('save', title)
+}
+</script>
+
+<template>
+  <RmModal v-model="open" size="sm" :label="T.heading">
+    <template #header>
+      <h2 class="rm-project-dialog__title">{{ T.heading }}</h2>
+    </template>
+    <RmInput v-model="draft" :label="T.name" @keyup.enter="save" />
+    <p v-if="error" class="rm-project-dialog__error">{{ error }}</p>
+    <template #footer>
+      <RmButton variant="tertiary" @click="open = false">{{ T.cancel }}</RmButton>
+      <RmButton variant="primary" :loading="loading" :disabled="!draft.trim()" @click="save">{{ T.save }}</RmButton>
+    </template>
+  </RmModal>
+</template>
+
+<style scoped>
+.rm-project-dialog__title{font-size:var(--font-18);font-weight:var(--weight-bold);margin:0}.rm-project-dialog__error{color:var(--color-danger);font-size:var(--font-13);margin:8px 0 0}
+</style>

package/dist/runtime/components/ProjectResources.vue

@@ -0,0 +1,258 @@
+<!--
+  RmProjectResources - l'onglet « Ressources » d'un projet.
+
+  Une ligne par element range, toutes familles confondues : icone de la
+  famille, titre (un vrai lien : Ctrl/Cmd-clic ouvre la fiche dans un onglet,
+  le clic simple rend `open` pour un apercu sur place), sous-titre, d'ou vient
+  l'element et quand il est entre, puis Commenter et Retirer.
+
+  Recherche, puces de famille, filtre « commentees » et tri se font en
+  memoire (cf. rmProjectFilterRows) : un projet tient quelques centaines
+  d'elements, deja relus. L'app donne les lignes (cf. rmProjectRows), avec
+  `path` deja prefixe de la langue.
+
+  Un element dont le document a disparu de l'index reste liste sous son
+  identifiant : mieux vaut le montrer, et laisser le retirer, que le faire
+  disparaitre en silence.
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  rmProjectCount,
+  rmProjectFamilies,
+  rmProjectFilterRows,
+  type RmProjectResource,
+  type RmProjectSort,
+} from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    rows: RmProjectResource[]
+    loading?: boolean
+    failed?: boolean
+    /** `type-id` de la ligne en cours de retrait. */
+    removing?: string
+    /** Texte de l'etat vide : ou trouver le bouton Projet dans cette app. */
+    emptyText?: string
+    /** Id de l'element a la barre de filtres collante. Vide : pas de barre collante. */
+    stickyTo?: string | null
+    lang?: 'fr' | 'en'
+  }>(),
+  { loading: false, failed: false, removing: '', emptyText: '', stickyTo: 'rm_page_header', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  open: [row: RmProjectResource]
+  comment: [row: RmProjectResource]
+  remove: [row: RmProjectResource]
+}>()
+
+const WORDS = {
+  fr: {
+    search: 'Rechercher une ressource', sortBy: 'Trier par', comments: 'Annotations', withComments: 'Contient des commentaires',
+    loading: 'Chargement', failedTitle: 'Projet indisponible', failedText: 'Le service des projets n\'a pas répondu.',
+    emptyTitle: 'Ce projet est vide', emptyText: 'Parcourez les pages et utilisez le bouton Projet d\'une carte pour la ranger ici.',
+    families: 'Filtrer par famille', all: 'Toutes', resources: 'Ressources', noMatch: 'Aucune ressource ne correspond à ces filtres.',
+    comment: 'Commenter', commentsN: (n: number) => `Commentaires (${n})`, remove: 'Retirer du projet',
+    unknown: (id: string) => `Élément inconnu (id ${id})`, source: 'Source', added: 'Ajouté le',
+    filed: (n: number) => `${rmProjectCount(n, 'fr')} ${n > 1 ? 'rangées' : 'rangée'} dans le projet.`,
+    shown: (s: number, n: number) => `${s} ${s > 1 ? 'affichées' : 'affichée'} sur ${rmProjectCount(n, 'fr')}.`,
+    sorts: { 'date-desc': 'Ajout, plus récent d\'abord', 'date-asc': 'Ajout, plus ancien d\'abord', 'title': 'Titre', 'family': 'Famille' },
+  },
+  en: {
+    search: 'Search a resource', sortBy: 'Sort by', comments: 'Comments', withComments: 'With comments',
+    loading: 'Loading', failedTitle: 'Project unavailable', failedText: 'The project service did not answer.',
+    emptyTitle: 'Nothing in this project yet', emptyText: 'Browse the pages and use the Project button on a card to file it here.',
+    families: 'Filter by family', all: 'All', resources: 'Resources', noMatch: 'No resource matches these filters.',
+    comment: 'Comment', commentsN: (n: number) => `Comments (${n})`, remove: 'Remove from the project',
+    unknown: (id: string) => `Unknown item (id ${id})`, source: 'Source', added: 'Added on',
+    filed: (n: number) => `${rmProjectCount(n, 'en')} filed in the project.`,
+    shown: (s: number, n: number) => `${s} shown out of ${rmProjectCount(n, 'en')}.`,
+    sorts: { 'date-desc': 'Newest first', 'date-asc': 'Oldest first', 'title': 'Title', 'family': 'Family' },
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const search = ref('')
+const family = ref('all')
+const onlyCommented = ref(false)
+const sort = ref<RmProjectSort>('date-desc')
+
+/** RmDropdownSelect ne porte que des libelles : on traduit dans les deux sens. */
+const sortLabels = computed(() => Object.values(T.value.sorts))
+const sortLabel = computed({
+  get: () => T.value.sorts[sort.value],
+  set: (label: string) => {
+    const found = (Object.keys(T.value.sorts) as RmProjectSort[]).find(key => T.value.sorts[key] === label)
+    if (found) sort.value = found
+  },
+})
+
+function clearFilters() {
+  search.value = ''
+  family.value = 'all'
+  onlyCommented.value = false
+}
+
+const families = computed(() => rmProjectFamilies(props.rows))
+const shown = computed(() => rmProjectFilterRows(props.rows, {
+  search: search.value,
+  family: family.value,
+  onlyCommented: onlyCommented.value,
+  sort: sort.value,
+}, props.lang))
+
+const context = computed(() => {
+  const total = props.rows.length
+  return shown.value.length === total ? T.value.filed(total) : T.value.shown(shown.value.length, total)
+})
+
+function formatDate(value?: string) {
+  const date = new Date(value ?? '')
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleDateString(props.lang === 'en' ? 'en-GB' : 'fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
+}
+
+function meta(row: RmProjectResource) {
+  return [
+    row.section ? `${T.value.source} : ${row.section}` : '',
+    row.createdAt ? `${T.value.added} ${formatDate(row.createdAt)}` : '',
+  ].filter(Boolean).join(' · ')
+}
+
+function commentLabel(row: RmProjectResource) {
+  return row.comments ? T.value.commentsN(row.comments) : T.value.comment
+}
+
+/** Le clic simple ouvre l'apercu ; les autres gardent le comportement du lien. */
+function onTitle(event: MouseEvent, row: RmProjectResource) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return
+  event.preventDefault()
+  emit('open', row)
+}
+</script>
+
+<template>
+  <div class="rm-project-res">
+    <RmFilterBar
+      :filters-amount="onlyCommented ? 1 : 0"
+      :lang="lang"
+      :sticky-to="stickyTo"
+      @clear-filters="clearFilters"
+    >
+      <template #Search>
+        <div class="rm-project-res__search">
+          <RmSearchBar v-model="search" :have-advanced="false" :placeholder="T.search" />
+        </div>
+      </template>
+      <template #Filters>
+        <RmDropdownSelect
+          v-model="sortLabel"
+          :label="T.sortBy"
+          :options="sortLabels"
+          :search="false"
+          sort-icon
+          close-on-click
+          :lang="lang"
+        />
+        <RmCheckbox v-model="onlyCommented" :field-label="T.comments" :label="T.withComments" />
+      </template>
+    </RmFilterBar>
+
+    <RmLoadingState v-if="loading && !rows.length" spinner :label="T.loading" />
+
+    <RmErrorState v-else-if="failed" icon="CloudWarning" :title="T.failedTitle" :text="T.failedText" action-label="" />
+
+    <RmEmptyState v-else-if="!rows.length" icon="FolderSimplePlus" :title="T.emptyTitle" :text="emptyText || T.emptyText" />
+
+    <template v-else>
+      <div class="rm-project-res__chips" role="group" :aria-label="T.families">
+        <RmPill :label="T.all" :active="family === 'all'" @click="family = 'all'">
+          <span class="rm-project-res__chip-count">{{ rows.length }}</span>
+        </RmPill>
+        <RmPill
+          v-for="chip in families"
+          :key="chip.type"
+          :label="chip.label"
+          :active="family === chip.type"
+          @click="family = chip.type"
+        >
+          <span class="rm-project-res__chip-count">{{ chip.count }}</span>
+        </RmPill>
+      </div>
+
+      <RmCard padding="lg">
+        <div class="rm-project-res__head">
+          <h2 class="rm-project-res__title">{{ T.resources }}</h2>
+          <p class="rm-project-res__context">{{ context }}</p>
+        </div>
+
+        <ol v-if="shown.length" class="rm-project-res__list">
+          <li v-for="row in shown" :key="`${row.type}-${row.id}`" class="rm-project-res__item">
+            <span class="rm-project-res__icon" aria-hidden="true">
+              <RmIcon :name="row.icon" :size="17" />
+            </span>
+
+            <div class="rm-project-res__text">
+              <p class="rm-project-res__item-title">
+                <a v-if="row.path" :href="row.path" @click="onTitle($event, row)">{{ row.title || T.unknown(row.id) }}</a>
+                <span v-else>{{ row.title || T.unknown(row.id) }}</span>
+                <button
+                  v-if="row.comments"
+                  type="button"
+                  class="rm-project-res__comments"
+                  :aria-label="commentLabel(row)"
+                  @click="emit('comment', row)"
+                >
+                  <RmIcon name="ChatCircle" :size="12" />
+                  {{ row.comments }}
+                </button>
+              </p>
+              <p v-if="row.subtitle" class="rm-project-res__sub">{{ row.subtitle }}</p>
+              <p v-if="meta(row)" class="rm-project-res__meta">{{ meta(row) }}</p>
+            </div>
+
+            <RmBadge variant="info" class="rm-project-res__family">{{ row.family }}</RmBadge>
+
+            <!-- Des icones seules : la bulle dit le geste avant le clic. Elle
+                 sort a gauche, la carte couperait une bulle centree. -->
+            <div class="rm-project-res__actions">
+              <RmTooltip :text="commentLabel(row)" dir="left">
+                <RmButton
+                  variant="tertiary"
+                  size="sm"
+                  icon-only
+                  ghost
+                  prefix-icon="ChatCircle"
+                  :aria-label="commentLabel(row)"
+                  @click="emit('comment', row)"
+                />
+              </RmTooltip>
+              <RmTooltip :text="T.remove" dir="left">
+                <RmButton
+                  variant="tertiary"
+                  size="sm"
+                  icon-only
+                  ghost
+                  prefix-icon="Trash"
+                  :loading="removing === `${row.type}-${row.id}`"
+                  :aria-label="T.remove"
+                  @click="emit('remove', row)"
+                />
+              </RmTooltip>
+            </div>
+          </li>
+        </ol>
+
+        <p v-else class="rm-project-res__none">
+          <RmIcon name="FunnelX" :size="16" />
+          {{ T.noMatch }}
+        </p>
+      </RmCard>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-res{display:flex;flex-direction:column;gap:16px}.rm-project-res__search{flex:0 1 360px;min-width:160px}.rm-project-res__chips{display:flex;flex-wrap:wrap;gap:6px}.rm-project-res__chip-count{background:var(--bg-surface-3);border-radius:999px;color:var(--text-secondary);font-size:10px;font-weight:700;padding:1px 6px}.toolbar-pill--active .rm-project-res__chip-count{background:hsla(0,0%,100%,.25);color:var(--color-text-inverse)}.rm-project-res__head{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.rm-project-res__title{color:var(--text-primary);font-size:15px;font-weight:var(--weight-bold);margin:0}.rm-project-res__context{color:var(--text-muted);font-size:12px;margin:0}.rm-project-res__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.rm-project-res__item{align-items:center;border-bottom:1px solid var(--border-soft,var(--border-default));display:flex;gap:12px;padding:10px 0}.rm-project-res__item:last-child{border-bottom:none}.rm-project-res__icon{align-items:center;background:var(--bg-surface-3);border-radius:var(--radius-lg,8px);color:var(--text-secondary);display:flex;flex:none;height:34px;justify-content:center;width:34px}.rm-project-res__text{flex:1;min-width:0}.rm-project-res__item-title{align-items:center;color:var(--text-primary);display:flex;font-size:13px;font-weight:var(--weight-semibold);gap:6px;margin:0}.rm-project-res__item-title a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}.rm-project-res__comments{align-items:center;background:var(--bg-surface-3);border:none;border-radius:999px;color:var(--text-secondary);cursor:pointer;display:inline-flex;font:inherit;font-size:11px;gap:3px;padding:1px 6px}.rm-project-res__sub{color:var(--text-secondary);font-size:12px;margin:2px 0 0}.rm-project-res__meta{color:var(--text-muted);font-size:11px;margin:2px 0 0}.rm-project-res__family{flex:none}.rm-project-res__actions{align-items:center;display:flex;flex:none;gap:2px}.rm-project-res__none{align-items:center;color:var(--text-secondary);display:flex;font-size:13px;gap:6px;margin:8px 0}
+</style>

package/dist/runtime/components/ResultCard.vue

@@ -14,6 +14,8 @@
   internes (export, liens).
 
   Slots :
+    code       — identifiant au-dessus du titre (RmCopyCode : RPPS, NCT...).
+                 Hors de la ligne meta, ou il se perdait parmi les tags.
     title      — identite, une ligne en gras
     subtitle   — complement gris sous le titre
     actions    — a droite du titre (export...). Le clic doit y etre stoppe.
@@ -97,6 +99,7 @@ withDefaults(
   <div class="rm-rcard" :class="{ 'rm-rcard--clickable': clickable, 'rm-rcard--dense': dense }">
     <div class="rm-rcard__head">
       <div class="rm-rcard__identity">
+        <div v-if="$slots.code" class="rm-rcard__code"><slot name="code" /></div>
         <h3 class="rm-rcard__title"><slot name="title" /></h3>
         <div v-if="$slots.subtitle" class="rm-rcard__subtitle"><slot name="subtitle" /></div>
       </div>
@@ -135,5 +138,5 @@ withDefaults(
 </template>
 
 <style scoped>
-.rm-rcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);color:var(--text-primary);display:block;font-family:var(--font-sans);overflow:hidden;transition:border-color var(--duration-fast) linear,box-shadow var(--duration-fast) linear;width:100%}.rm-rcard--clickable{cursor:pointer}.rm-rcard--clickable:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border-default));box-shadow:var(--shadow-md)}.rm-rcard__head{align-items:flex-start;display:flex;gap:var(--space-16);padding:var(--space-20) var(--space-24) 0}.rm-rcard__identity{flex:1 1 auto;min-width:0}.rm-rcard__title{font-size:var(--font-18);font-weight:800;letter-spacing:.01em;margin:0}.rm-rcard__subtitle{color:var(--text-muted);font-size:var(--font-14);margin-top:4px;overflow-wrap:anywhere}.rm-rcard__actions{align-items:center;display:flex;flex:0 0 auto;gap:var(--space-8)}.rm-rcard__body{align-items:stretch;display:flex;gap:var(--space-24);padding:var(--space-16) var(--space-24) var(--space-20)}.rm-rcard__count{align-items:center;border-right:1px solid var(--border-default);display:flex;flex:0 0 128px;flex-direction:column;gap:var(--space-2);justify-content:center;padding-right:var(--space-24);text-align:center}.rm-rcard__count-value{color:var(--color-primary);font-size:var(--font-32);font-weight:var(--weight-bold);line-height:1.1;margin:0}.rm-rcard__count-label{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-semibold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-rcard__count-extra{color:var(--color-primary);font-size:var(--font-13);line-height:1.3;margin:6px 0 0}.rm-rcard__count-extra+.rm-rcard__count-extra{margin-top:2px}.rm-rcard__main{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--space-6);min-width:0}.rm-rcard__meta{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-8)}.rm-rcard__more{color:var(--color-primary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:4px 0 0}.rm-rcard__footer{background:var(--bg-surface-2);border-top:1px solid var(--border-default);font-size:var(--font-13);padding:var(--space-12) var(--space-24)}.rm-rcard :deep(.rm-rcard__label){align-items:center;color:var(--text-secondary);display:inline-flex;font-size:var(--font-12);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;text-transform:uppercase}.rm-rcard :deep(.rm-rcard__ref){background:var(--bg-surface-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:Courier New,monospace;font-size:var(--font-12);padding:var(--space-2) var(--space-8)}.rm-rcard :deep(.rm-rcard__lead){font-size:15px;font-weight:var(--weight-bold);margin:0}.rm-rcard :deep(.rm-rcard__text){font-size:15px;margin:0}.rm-rcard :deep(.rm-rcard__desc){color:var(--text-secondary);font-size:var(--font-14);line-height:1.5;margin:0}.rm-rcard :deep(.rm-rcard__clamp){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.rm-rcard--dense{border-radius:var(--radius-xl)}.rm-rcard--dense .rm-rcard__head{gap:var(--space-12);padding:var(--space-12) var(--space-16) 0}.rm-rcard--dense .rm-rcard__title{font-size:15px}.rm-rcard--dense .rm-rcard__subtitle{font-size:var(--font-13);margin-top:2px}.rm-rcard--dense .rm-rcard__body{gap:var(--space-16);padding:var(--space-8) var(--space-16) var(--space-12)}.rm-rcard--dense .rm-rcard__count{flex-basis:104px;padding-right:var(--space-16)}.rm-rcard--dense .rm-rcard__count-value{font-size:var(--font-24)}.rm-rcard--dense .rm-rcard__count-label{font-size:var(--font-11)}.rm-rcard--dense .rm-rcard__main{gap:var(--space-4)}.rm-rcard--dense .rm-rcard__count-extra,.rm-rcard--dense .rm-rcard__footer,.rm-rcard--dense .rm-rcard__main>:not(.rm-rcard__meta,.rm-rcard__lead){display:none}.rm-rcard--dense :deep(.rm-rcard__lead){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.rm-rcard--dense .rm-rcard__body{align-items:center}.rm-rcard--dense :deep(.rm-rcard__lead),.rm-rcard--dense :deep(.rm-rcard__text){font-size:var(--font-14)}.rm-rcard--dense :deep(.rm-rcard__desc){font-size:var(--font-13)}
+.rm-rcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);color:var(--text-primary);display:block;font-family:var(--font-sans);overflow:hidden;transition:border-color var(--duration-fast) linear,box-shadow var(--duration-fast) linear;width:100%}.rm-rcard--clickable{cursor:pointer}.rm-rcard--clickable:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border-default));box-shadow:var(--shadow-md)}.rm-rcard__head{align-items:flex-start;display:flex;gap:var(--space-16);padding:var(--space-20) var(--space-24) 0}.rm-rcard__identity{flex:1 1 auto;min-width:0}.rm-rcard__code{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-8)}.rm-rcard__title{font-size:var(--font-18);font-weight:800;letter-spacing:.01em;margin:0}.rm-rcard__subtitle{color:var(--text-muted);font-size:var(--font-14);margin-top:4px;overflow-wrap:anywhere}.rm-rcard__actions{align-items:center;display:flex;flex:0 0 auto;gap:var(--space-8)}.rm-rcard__body{align-items:stretch;display:flex;gap:var(--space-24);padding:var(--space-16) var(--space-24) var(--space-20)}.rm-rcard__count{align-items:center;border-right:1px solid var(--border-default);display:flex;flex:0 0 128px;flex-direction:column;gap:var(--space-2);justify-content:center;padding-right:var(--space-24);text-align:center}.rm-rcard__count-value{color:var(--color-primary);font-size:var(--font-32);font-weight:var(--weight-bold);line-height:1.1;margin:0}.rm-rcard__count-label{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-semibold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-rcard__count-extra{color:var(--color-primary);font-size:var(--font-13);line-height:1.3;margin:6px 0 0}.rm-rcard__count-extra+.rm-rcard__count-extra{margin-top:2px}.rm-rcard__main{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--space-6);min-width:0}.rm-rcard__meta{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-8)}.rm-rcard__more{color:var(--color-primary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:4px 0 0}.rm-rcard__footer{background:var(--bg-surface-2);border-top:1px solid var(--border-default);font-size:var(--font-13);padding:var(--space-12) var(--space-24)}.rm-rcard :deep(.rm-rcard__label){align-items:center;color:var(--text-secondary);display:inline-flex;font-size:var(--font-12);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;text-transform:uppercase}.rm-rcard :deep(.rm-rcard__ref){background:var(--bg-surface-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:Courier New,monospace;font-size:var(--font-12);padding:var(--space-2) var(--space-8)}.rm-rcard :deep(.rm-rcard__lead){font-size:15px;font-weight:var(--weight-bold);margin:0}.rm-rcard :deep(.rm-rcard__text){font-size:15px;margin:0}.rm-rcard :deep(.rm-rcard__desc){color:var(--text-secondary);font-size:var(--font-14);line-height:1.5;margin:0}.rm-rcard :deep(.rm-rcard__clamp){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.rm-rcard--dense{border-radius:var(--radius-xl)}.rm-rcard--dense .rm-rcard__head{gap:var(--space-12);padding:var(--space-12) var(--space-16) 0}.rm-rcard--dense .rm-rcard__title{font-size:15px}.rm-rcard--dense .rm-rcard__subtitle{font-size:var(--font-13);margin-top:2px}.rm-rcard--dense .rm-rcard__body{gap:var(--space-16);padding:var(--space-8) var(--space-16) var(--space-12)}.rm-rcard--dense .rm-rcard__count{flex-basis:104px;padding-right:var(--space-16)}.rm-rcard--dense .rm-rcard__count-value{font-size:var(--font-24)}.rm-rcard--dense .rm-rcard__count-label{font-size:var(--font-11)}.rm-rcard--dense .rm-rcard__main{gap:var(--space-4)}.rm-rcard--dense .rm-rcard__count-extra,.rm-rcard--dense .rm-rcard__footer,.rm-rcard--dense .rm-rcard__main>:not(.rm-rcard__meta,.rm-rcard__lead){display:none}.rm-rcard--dense :deep(.rm-rcard__lead){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.rm-rcard--dense .rm-rcard__body{align-items:center}.rm-rcard--dense :deep(.rm-rcard__lead),.rm-rcard--dense :deep(.rm-rcard__text){font-size:var(--font-14)}.rm-rcard--dense :deep(.rm-rcard__desc){font-size:var(--font-13)}
 </style>

package/dist/runtime/components/SourceCard.vue

@@ -19,6 +19,7 @@
   partent jamais dans le navigateur.
 -->
 <script setup lang="ts">
+import { rmCopyText } from '../utils/clipboard'
 import { computed, ref, useId, onUnmounted } from 'vue'
 
 const props = withDefaults(defineProps<{
@@ -193,37 +194,8 @@ const teaserHtml = computed(() => (props.summary ? '' : props.aboutSource || '')
 const copied = ref(false)
 let copyTimer: ReturnType<typeof setTimeout> | undefined
 
-/**
- * Le presse-papiers moderne demande un contexte sur, et refuse dans un iframe
- * sans permission : la selection cachee reste le seul chemin qui marche partout.
- * En cas d'echec des deux, pas de coche : elle mentirait.
- */
-async function writeToClipboard(text: string) {
-  try {
-    await navigator.clipboard.writeText(text)
-    return true
-  }
-  catch {
-    try {
-      const field = document.createElement('textarea')
-      field.value = text
-      field.setAttribute('readonly', '')
-      field.style.position = 'fixed'
-      field.style.opacity = '0'
-      document.body.appendChild(field)
-      field.select()
-      const done = document.execCommand('copy')
-      document.body.removeChild(field)
-      return done
-    }
-    catch {
-      return false
-    }
-  }
-}
-
 async function copyTitle() {
-  if (!(await writeToClipboard(props.title))) return
+  if (!(await rmCopyText(props.title))) return
   copied.value = true
   clearTimeout(copyTimer)
   copyTimer = setTimeout(() => (copied.value = false), 2000)

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

@@ -0,0 +1,8 @@
+/**
+ * Copie un texte dans le presse-papiers. Rend `false` si rien n'a ete copie,
+ * pour qu'un composant n'affiche pas une coche qui mentirait.
+ *
+ * Le presse-papiers moderne demande un contexte sur, et refuse dans un iframe
+ * sans permission : la selection cachee reste le seul chemin qui marche partout.
+ */
+export declare function rmCopyText(text: string): Promise<boolean>;

package/dist/runtime/utils/clipboard.js

@@ -0,0 +1,21 @@
+export async function rmCopyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const field = document.createElement("textarea");
+      field.value = text;
+      field.setAttribute("readonly", "");
+      field.style.position = "fixed";
+      field.style.opacity = "0";
+      document.body.appendChild(field);
+      field.select();
+      const done = document.execCommand("copy");
+      document.body.removeChild(field);
+      return done;
+    } catch {
+      return false;
+    }
+  }
+}