@tekkare/romulus 0.1.230 → 0.1.232

package/dist/runtime/components/ProjectAddButton.vue

@@ -0,0 +1,226 @@
+<!--
+  RmProjectAddButton - le bouton « Projet » d'une carte ou d'un en-tete.
+
+  Il range l'element affiche dans le projet actif, ou l'en retire. Sans projet
+  actif, le premier clic ouvre le choix du projet : choisir est rare, ranger
+  l'est beaucoup moins, donc la question ne se pose qu'une fois (l'app garde
+  le projet actif d'un ecran a l'autre).
+
+  En selection multiple, il n'envoie rien : il coche, et c'est le panneau qui
+  envoie la pile. Le meme bouton porte les deux gestes, parce que c'est le
+  meme geste pour le lecteur.
+
+  Le composant ne connait ni l'API ni le projet actif : l'app lui dit l'etat
+  (`inProject`, `needsProject`, `selecting`...) et recoit des intentions
+  (`toggle`, `choose`, `create`, `unarchive`). `@click.stop` partout : une
+  carte entiere cliquable ouvrirait la fiche au lieu de ranger.
+
+  Une fiche deja retiree de ce projet y est archivee, et l'API refuse de la
+  remettre sans qu'on le demande : l'app passe `archived` a vrai, la question
+  se pose dans une modale centree, qui arrete le geste.
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { rmProjectSummary, type RmProject } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    /** Tous les documents de la carte sont dans le projet actif. */
+    inProject?: boolean
+    /** Aucun projet actif : le clic ouvre le choix. */
+    needsProject?: boolean
+    /** Selection multiple en cours : le clic coche. */
+    selecting?: boolean
+    selected?: boolean
+    /** Icone seule, pour une ligne de tableau ou une carte dense. */
+    compact?: boolean
+    loading?: boolean
+    /** Raison du dernier echec, en bulle. */
+    error?: string
+    /** Projets proposes au choix. */
+    projects?: RmProject[]
+    projectsLoading?: boolean
+    projectsFailed?: boolean
+    creating?: boolean
+    /** La fiche est archivee dans ce projet (v-model:archived). */
+    archived?: boolean
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    inProject: false,
+    needsProject: false,
+    selecting: false,
+    selected: false,
+    compact: false,
+    loading: false,
+    error: '',
+    projects: () => [],
+    projectsLoading: false,
+    projectsFailed: false,
+    creating: false,
+    archived: false,
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  /** Ajouter ou retirer, selon `inProject`. */
+  'toggle': []
+  /** Cocher ou decocher, en selection. */
+  'select': []
+  /** Le choix s'ouvre : l'app charge la liste des projets. */
+  'pick': []
+  /** Projet choisi : il devient l'actif et recoit l'element. */
+  'choose': [projectId: string]
+  /** Nouveau projet nomme : a creer, rendre actif et remplir. */
+  'create': [title: string]
+  'unarchive': []
+  'update:archived': [value: boolean]
+}>()
+
+const WORDS = {
+  fr: {
+    project: 'Projet', inProject: 'Dans le projet', add: 'Ajouter au projet', remove: 'Retirer du projet',
+    select: 'Sélectionner', selected: 'Sélectionné', addSel: 'Ajouter à la sélection', removeSel: 'Retirer de la sélection',
+    choose: 'Choisir un projet', addTo: 'Ajouter à un projet', loading: 'Chargement...',
+    failed: 'Les projets ne sont pas accessibles pour le moment.',
+    none: 'Aucun projet pour le moment. Nommez le premier ci-dessous.',
+    newName: 'Nom du nouveau projet', create: 'Créer',
+    archived: 'Fiche archivée', archivedText: 'Cette fiche a été retirée du projet auparavant. La remettre ?',
+    cancel: 'Annuler', unarchive: 'Désarchiver',
+  },
+  en: {
+    project: 'Project', inProject: 'In project', add: 'Add to project', remove: 'Remove from project',
+    select: 'Select', selected: 'Selected', addSel: 'Add to selection', removeSel: 'Remove from selection',
+    choose: 'Choose a project', addTo: 'Add to a project', loading: 'Loading...',
+    failed: 'Projects are unavailable right now.',
+    none: 'No project yet. Name the first one below.',
+    newName: 'New project name', create: 'Create',
+    archived: 'Archived record', archivedText: 'This record was removed from the project earlier. Bring it back?',
+    cancel: 'Cancel', unarchive: 'Unarchive',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const root = ref<HTMLElement | null>(null)
+const picking = ref(false)
+const draft = ref('')
+
+/** Le bouton se distingue des qu'il dit « c'est deja pris en compte ». */
+const highlighted = computed(() => (props.selecting ? props.selected : props.inProject))
+
+const icon = computed(() => {
+  if (props.selecting) return props.selected ? 'CheckSquare' : 'Square'
+  return props.inProject ? 'FolderSimpleMinus' : 'FolderSimplePlus'
+})
+
+const ariaLabel = computed(() => {
+  if (props.selecting) return props.selected ? T.value.removeSel : T.value.addSel
+  return props.inProject ? T.value.remove : T.value.add
+})
+
+const label = computed(() => {
+  if (props.compact) return ''
+  if (props.selecting) return props.selected ? T.value.selected : T.value.select
+  return props.inProject ? T.value.inProject : T.value.project
+})
+
+const archivedOpen = computed({
+  get: () => props.archived,
+  set: (value: boolean) => emit('update:archived', value),
+})
+
+function onClick() {
+  if (props.loading) return
+  if (props.selecting) return emit('select')
+  if (props.needsProject) {
+    picking.value = true
+    emit('pick')
+    return
+  }
+  emit('toggle')
+}
+
+function choose(id: string) {
+  picking.value = false
+  emit('choose', id)
+}
+
+function create() {
+  const title = draft.value.trim()
+  if (!title || props.creating) return
+  emit('create', title)
+  draft.value = ''
+  picking.value = false
+}
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="rm-project-add"
+    :class="{ 'is-in': highlighted, 'is-compact': compact }"
+    @click.stop
+  >
+    <RmButton
+      :variant="highlighted ? 'secondary' : 'tertiary'"
+      size="md"
+      :prefix-icon="icon"
+      :icon-only="compact"
+      :aria-label="ariaLabel"
+      :aria-pressed="highlighted"
+      :loading="loading"
+      :title="error || ariaLabel"
+      @click="onClick"
+    >
+      {{ label }}
+    </RmButton>
+
+    <RmModal v-model="archivedOpen" size="sm" :label="T.archived">
+      <template #header>
+        <p class="rm-project-add__title">{{ T.archived }}</p>
+      </template>
+      <p class="rm-project-add__text">{{ T.archivedText }}</p>
+      <template #footer>
+        <RmButton variant="tertiary" @click="archivedOpen = false">{{ T.cancel }}</RmButton>
+        <RmButton variant="primary" :loading="loading" @click="emit('unarchive')">{{ T.unarchive }}</RmButton>
+      </template>
+    </RmModal>
+
+    <!-- Un panneau accroche au bouton plutot qu'une modale : designer le
+         projet se fait dans la foulee du clic, ca n'arrete pas la page. -->
+    <RmPopover v-model="picking" :anchor="root" :label="T.choose" width="280px">
+      <p class="rm-project-add__title">{{ T.addTo }}</p>
+      <div class="rm-project-add__list">
+        <p v-if="projectsLoading" class="rm-project-add__muted">{{ T.loading }}</p>
+        <p v-else-if="projectsFailed" class="rm-project-add__muted">{{ T.failed }}</p>
+        <template v-else>
+          <button
+            v-for="project in projects"
+            :key="project.id"
+            type="button"
+            class="rm-project-add__row"
+            @click="choose(project.id)"
+          >
+            <RmIcon name="FolderSimple" :size="16" />
+            <span class="rm-project-add__row-text">
+              <span class="rm-project-add__row-title">{{ project.title }}</span>
+              <!-- Qui, partage ou non, combien : de quoi choisir entre deux
+                   projets du meme nom sans les ouvrir. -->
+              <span class="rm-project-add__row-meta">{{ rmProjectSummary(project, lang) }}</span>
+            </span>
+          </button>
+          <p v-if="!projects.length" class="rm-project-add__muted">{{ T.none }}</p>
+        </template>
+        <form class="rm-project-add__create" @submit.prevent="create">
+          <RmInput v-model="draft" :placeholder="T.newName" />
+          <RmButton type="submit" variant="primary" size="sm" :loading="creating">{{ T.create }}</RmButton>
+        </form>
+      </div>
+    </RmPopover>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-add{display:inline-flex}.rm-project-add :deep(.rm-button){color:var(--color-primary)}.rm-project-add.is-compact :deep(.rm-button){height:32px;width:32px}.rm-project-add :deep(.rm-button svg){height:20px;width:20px}.rm-project-add.is-in :deep(.rm-button){background:color-mix(in srgb,var(--color-success) 12%,transparent);border-color:color-mix(in srgb,var(--color-success) 45%,transparent);color:var(--color-success)}.rm-project-add__title{font-size:var(--font-13);font-weight:var(--weight-semibold);margin:0 0 var(--space-8)}.rm-project-add__text{font-size:var(--font-14);line-height:1.5;margin:0}.rm-project-add__list{display:flex;flex-direction:column;gap:4px}.rm-project-add__muted{color:var(--rm-shell-text-muted);font-size:13px;margin:0}.rm-project-add__row{align-items:center;background:none;border:1px solid transparent;border-radius:8px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:8px;padding:8px 10px;text-align:left}.rm-project-add__row:focus-visible,.rm-project-add__row:hover{background:color-mix(in srgb,var(--color-primary) 6%,transparent);border-color:color-mix(in srgb,var(--color-primary) 30%,transparent)}.rm-project-add__row-text{display:flex;flex-direction:column;min-width:0}.rm-project-add__row-title{font-size:14px;font-weight:500}.rm-project-add__row-meta{color:var(--rm-shell-text-muted);font-size:12px}.rm-project-add__create{align-items:center;border-top:1px solid var(--rm-shell-border);display:flex;gap:8px;margin-top:12px;padding-top:12px}
+</style>

package/dist/runtime/components/ProjectBanner.vue

@@ -0,0 +1,134 @@
+<!--
+  RmProjectBanner - le bandeau du projet actif.
+
+  Choisir un projet change ce que font les boutons de toutes les pages : les
+  ajouts partent la-bas. Un etat pareil ne peut pas vivre dans un panneau
+  qu'on referme : il se dit en haut du contenu, sur chaque ecran, avec de quoi
+  en sortir d'un clic. Le cadre de l'app le pose sous son en-tete, hors de la
+  zone qui defile.
+
+  « Ajouter la page » range tout ce que l'ecran affiche : l'app compte les
+  cartes presentes (`addable`) et fait l'envoi. Une partie de la page peut
+  revenir archivee : l'app passe la liste dans `archived`, le bandeau nomme
+  les fiches et laisse choisir.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { rmProjectCount, type RmProjectArchivedEntry } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    /** Lien vers la page du projet. */
+    to?: string
+    /** Elements du projet que l'app sait afficher. */
+    count?: number
+    /** Elements de la selection en attente. Absent : pas de selection. */
+    selectedCount?: number | null
+    /** Cartes de l'ecran pas encore rangees. Zero : pas de bouton. */
+    addable?: number
+    adding?: boolean
+    /** Fiches de la page refusees parce qu'archivees. */
+    archived?: RmProjectArchivedEntry[]
+    unarchiving?: boolean
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    to: '',
+    count: 0,
+    selectedCount: null,
+    addable: 0,
+    adding: false,
+    archived: () => [],
+    unarchiving: false,
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  'add-page': []
+  'open': []
+  /** Cesser de recevoir les ajouts, pas fermer le projet. */
+  'leave': []
+  'unarchive': []
+  'dismiss-archived': []
+}>()
+
+const WORDS = {
+  fr: {
+    goTo: 'Mes ajouts vont dans', selected: 'sélectionnés', addPage: 'Ajouter la page', open: 'Ouvrir', leave: 'Quitter',
+    leaveLabel: 'Quitter ce projet', archived: 'Fiches archivées', cancel: 'Annuler',
+    archivedText: 'Ces fiches ont été retirées du projet auparavant. Les remettre ?',
+    unarchive: (n: number) => `Désarchiver les ${n}`,
+  },
+  en: {
+    goTo: 'Additions go to', selected: 'selected', addPage: 'Add the page', open: 'Open', leave: 'Leave',
+    leaveLabel: 'Leave this project', archived: 'Archived records', cancel: 'Cancel',
+    archivedText: 'These records were removed from the project earlier. Bring them back?',
+    unarchive: (n: number) => `Unarchive ${n}`,
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const asking = computed({
+  get: () => props.archived.length > 0,
+  set: (value: boolean) => {
+    if (!value) emit('dismiss-archived')
+  },
+})
+</script>
+
+<template>
+  <div class="rm-project-banner" role="status">
+    <span class="rm-project-banner__chip" aria-hidden="true">
+      <RmIcon name="FolderSimple" :size="14" />
+    </span>
+
+    <p class="rm-project-banner__text">
+      <span class="rm-project-banner__label">{{ T.goTo }}</span>
+      <NuxtLink v-if="to" :to="to" class="rm-project-banner__name">{{ title }}</NuxtLink>
+      <span v-else class="rm-project-banner__name">{{ title }}</span>
+    </p>
+
+    <RmTag variant="gray">{{ rmProjectCount(count, lang) }}</RmTag>
+    <RmTag v-if="selectedCount != null" variant="teal">{{ selectedCount }} {{ T.selected }}</RmTag>
+
+    <div class="rm-project-banner__actions">
+      <RmButton
+        v-if="addable"
+        variant="secondary"
+        size="sm"
+        prefix-icon="FolderSimplePlus"
+        :loading="adding"
+        @click="emit('add-page')"
+      >
+        {{ T.addPage }}
+        <RmTag variant="teal">{{ addable }}</RmTag>
+      </RmButton>
+      <RmButton variant="secondary" size="sm" prefix-icon="ArrowRight" @click="emit('open')">{{ T.open }}</RmButton>
+      <RmButton variant="tertiary" size="sm" prefix-icon="X" :aria-label="T.leaveLabel" @click="emit('leave')">
+        {{ T.leave }}
+      </RmButton>
+    </div>
+
+    <RmModal v-model="asking" size="sm" :label="T.archived">
+      <template #header>
+        <p class="rm-project-banner__modal-title">{{ T.archived }}</p>
+      </template>
+      <p class="rm-project-banner__modal-text">{{ T.archivedText }}</p>
+      <ul class="rm-project-banner__modal-list">
+        <li v-for="entry in archived" :key="entry.key">{{ entry.label }}</li>
+      </ul>
+      <template #footer>
+        <RmButton variant="tertiary" @click="asking = false">{{ T.cancel }}</RmButton>
+        <RmButton variant="primary" :loading="unarchiving" @click="emit('unarchive')">
+          {{ T.unarchive(archived.length) }}
+        </RmButton>
+      </template>
+    </RmModal>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-banner{align-items:center;background:color-mix(in srgb,var(--rm-shell-accent) 16%,var(--rm-shell-surface));border:1px solid color-mix(in srgb,var(--rm-shell-accent) 40%,transparent);border-left:4px solid var(--rm-shell-accent);border-radius:0 0 var(--radius-lg) var(--radius-lg);display:flex;gap:var(--space-12);padding:var(--space-12) var(--space-16)}.rm-project-banner__chip{align-items:center;background:var(--rm-shell-accent);border-radius:50%;color:#fff;display:inline-flex;flex:0 0 auto;height:26px;justify-content:center;width:26px}.rm-project-banner__text{align-items:baseline;display:flex;gap:var(--space-4);margin:0;min-width:0}.rm-project-banner__label{color:var(--rm-shell-text-dark);font-size:var(--font-13)}.rm-project-banner__name{color:var(--rm-shell-accent);font-size:var(--font-14);font-weight:var(--weight-bold);overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}a.rm-project-banner__name:hover{text-decoration:underline}.rm-project-banner__actions{display:flex;gap:var(--space-4);margin-left:auto}.rm-project-banner__modal-title{font-size:var(--font-14);font-weight:var(--weight-semibold);margin:0}.rm-project-banner__modal-text{font-size:var(--font-14);line-height:1.5;margin:0 0 var(--space-8)}.rm-project-banner__modal-list{display:flex;flex-direction:column;font-size:var(--font-13);gap:2px;margin:0;max-height:200px;overflow-y:auto;padding-left:var(--space-16)}@media (max-width:720px){.rm-project-banner{flex-wrap:wrap}.rm-project-banner__actions{margin-left:0}}
+</style>

package/dist/runtime/components/ProjectComments.vue

@@ -0,0 +1,110 @@
+<!--
+  RmProjectComments - le fil d'une ressource rangee dans un projet.
+
+  Un projet se partage : ce qu'on a compris d'une fiche vaut pour l'equipe.
+  Le fil vit donc a cote de la fiche dans le projet. Une note du projet qui
+  cite la fiche s'y lit aussi, avec les passages qui la citent : ce qu'on
+  ecrit d'une fiche ailleurs ne doit pas rester invisible depuis elle.
+
+  L'app charge le fil, le trie, et publie : le tiroir rend `send` avec le
+  texte et se vide quand `sending` repasse a faux sans `error`.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { RmProjectCommentEntry } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    /** Titre de la ressource. */
+    title: string
+    entries: RmProjectCommentEntry[]
+    loading?: boolean
+    sending?: boolean
+    error?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { loading: false, sending: false, error: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'send': [text: string]
+  'open-note': [noteId: string]
+}>()
+
+const WORDS = {
+  fr: {
+    none: 'Aucun commentaire pour le moment.', cited: 'Citée dans la note', untitled: 'Sans titre',
+    private: '(privée, visible par vous seulement)', write: 'Écrire un commentaire', post: 'Publier',
+  },
+  en: {
+    none: 'No comment yet.', cited: 'Cited in the note', untitled: 'Untitled',
+    private: '(private, only you see it)', write: 'Write a comment', post: 'Post',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+
+const draft = ref('')
+
+watch(() => props.sending, (now, was) => {
+  if (was && !now && !props.error) draft.value = ''
+})
+
+function send() {
+  const text = draft.value.trim()
+  if (!text || props.sending) return
+  emit('send', text)
+}
+</script>
+
+<template>
+  <RmDrawer v-model="open" size="md" :label="title">
+    <template #header>
+      <p class="rm-project-com__title">{{ title }}</p>
+    </template>
+
+    <div class="rm-project-com">
+      <RmLoadingState v-if="loading" spinner />
+      <p v-else-if="!entries.length" class="rm-project-com__muted">{{ T.none }}</p>
+      <ul v-else class="rm-project-com__list">
+        <li v-for="entry in entries" :key="entry.id">
+          <p class="rm-project-com__meta">
+            <span v-if="entry.author" class="rm-project-com__author">{{ entry.author }}</span>
+            <RmDate v-if="entry.date" :date="entry.date" :lang="lang" />
+          </p>
+          <template v-if="entry.note">
+            <p class="rm-project-com__cited">
+              {{ T.cited }}
+              <button type="button" class="rm-project-com__note" @click="emit('open-note', entry.note.id)">
+                {{ entry.note.icon || '📄' }} {{ entry.note.title || T.untitled }}
+              </button>
+              <span v-if="entry.note.private" class="rm-project-com__private">{{ T.private }}</span>
+            </p>
+            <blockquote v-for="(excerpt, index) in entry.note.excerpts ?? []" :key="index" class="rm-project-com__excerpt">
+              {{ excerpt }}
+            </blockquote>
+          </template>
+          <p v-else class="rm-project-com__text">{{ entry.text }}</p>
+        </li>
+      </ul>
+    </div>
+
+    <template #footer>
+      <form class="rm-project-com__form" @submit.prevent="send">
+        <RmTextarea v-model="draft" :rows="3" :placeholder="T.write" />
+        <RmButton type="submit" variant="primary" size="sm" :loading="sending">{{ T.post }}</RmButton>
+        <p v-if="error" class="rm-project-com__error">{{ error }}</p>
+      </form>
+    </template>
+  </RmDrawer>
+</template>
+
+<style scoped>
+.rm-project-com{display:flex;flex-direction:column;gap:16px}.rm-project-com__title{font-size:15px;font-weight:600;margin:0}.rm-project-com__muted{color:var(--rm-shell-text-muted);font-size:13px;margin:0}.rm-project-com__list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}.rm-project-com__meta{color:var(--rm-shell-text-muted);display:flex;font-size:12px;gap:8px;margin:0 0 2px}.rm-project-com__author{font-weight:600}.rm-project-com__text{font-size:14px;line-height:1.5;margin:0;white-space:pre-wrap}.rm-project-com__cited{font-size:14px;line-height:1.5;margin:0 0 4px}.rm-project-com__note{background:none;border:0;color:var(--rm-shell-accent);cursor:pointer;font:inherit;font-weight:600;padding:0}.rm-project-com__note:hover{text-decoration:underline}.rm-project-com__private{color:var(--rm-shell-text-muted);font-size:12px}.rm-project-com__excerpt{border-left:2px solid var(--rm-shell-border,currentColor);color:var(--rm-shell-text-muted);font-size:13px;line-height:1.5;margin:4px 0 0;padding:2px 0 2px 10px;white-space:pre-wrap}.rm-project-com__form{align-items:flex-start;display:flex;flex-direction:column;gap:8px}.rm-project-com__form>:first-child{align-self:stretch}.rm-project-com__error{color:var(--color-danger);font-size:13px;margin:0}
+</style>

package/dist/runtime/components/ProjectCreateDialog.vue

@@ -0,0 +1,117 @@
+<!--
+  RmProjectCreateDialog - creer un projet : un nom, une description facultative.
+
+  Fermer apres avoir commence a remplir (croix, clic a cote, Echap) ne doit
+  pas perdre ce qui a ete tape : une seconde question « Quitter sans
+  enregistrer ? » se pose par-dessus. Le formulaire se vide quand l'app le
+  ferme apres une creation reussie, ou quand on confirme l'abandon.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    loading?: boolean
+    /** Refus de l'API, affiche sous le formulaire. */
+    error?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { loading: false, error: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'create': [value: { title: string, description: string }]
+}>()
+
+const WORDS = {
+  fr: {
+    heading: 'Nouveau projet', name: 'Nom', placeholder: 'Veille oncologie', description: 'Description (facultative)',
+    required: 'Un nom est requis', cancel: 'Annuler', create: 'Créer',
+    leave: 'Quitter sans enregistrer ?', lost: 'Ce que vous avez saisi sera perdu.', keep: 'Continuer la saisie', quit: 'Quitter',
+  },
+  en: {
+    heading: 'New project', name: 'Name', placeholder: 'Oncology watch', description: 'Description (optional)',
+    required: 'A name is required', cancel: 'Cancel', create: 'Create',
+    leave: 'Leave without saving?', lost: 'What you entered will be lost.', keep: 'Keep editing', quit: 'Leave',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const title = ref('')
+const description = ref('')
+const missing = ref(false)
+const confirming = ref(false)
+
+function reset() {
+  title.value = ''
+  description.value = ''
+  missing.value = false
+}
+
+// Ferme par l'app (creation faite) : le prochain projet repart de zero.
+watch(() => props.modelValue, (open, was) => {
+  if (was && !open && !confirming.value) reset()
+})
+
+function requestClose() {
+  if (title.value.trim() || description.value.trim()) confirming.value = true
+  else emit('update:modelValue', false)
+}
+
+function discard() {
+  confirming.value = false
+  reset()
+  emit('update:modelValue', false)
+}
+
+function submit() {
+  const name = title.value.trim()
+  if (!name) {
+    missing.value = true
+    return
+  }
+  emit('create', { title: name, description: description.value.trim() })
+}
+</script>
+
+<template>
+  <RmModal
+    :model-value="modelValue"
+    size="sm"
+    mode="free"
+    :label="T.heading"
+    @update:model-value="$event ? emit('update:modelValue', true) : requestClose()"
+  >
+    <template #header>
+      <p class="rm-project-dialog__title">{{ T.heading }}</p>
+    </template>
+    <form class="rm-project-dialog__form" @submit.prevent="submit">
+      <RmInput v-model="title" :label="T.name" :placeholder="T.placeholder" :error="missing ? T.required : ''" />
+      <RmInput v-model="description" :label="T.description" />
+      <p v-if="error" class="rm-project-dialog__error">{{ error }}</p>
+      <!-- Entree valide le formulaire. -->
+      <button type="submit" hidden />
+    </form>
+    <template #footer>
+      <RmButton variant="tertiary" @click="requestClose">{{ T.cancel }}</RmButton>
+      <RmButton variant="primary" :loading="loading" @click="submit">{{ T.create }}</RmButton>
+    </template>
+  </RmModal>
+
+  <RmModal v-model="confirming" size="sm" mode="free" :label="T.leave">
+    <template #header>
+      <p class="rm-project-dialog__title">{{ T.leave }}</p>
+    </template>
+    <p class="rm-project-dialog__text">{{ T.lost }}</p>
+    <template #footer>
+      <RmButton variant="tertiary" @click="confirming = false">{{ T.keep }}</RmButton>
+      <RmButton variant="danger" @click="discard">{{ T.quit }}</RmButton>
+    </template>
+  </RmModal>
+</template>
+
+<style scoped>
+.rm-project-dialog__title{font-size:15px;font-weight:600;margin:0}.rm-project-dialog__form{display:flex;flex-direction:column;gap:16px}.rm-project-dialog__text{font-size:var(--font-14);line-height:1.5;margin:0}.rm-project-dialog__error{color:var(--color-danger);font-size:var(--font-13);margin:0}
+</style>

package/dist/runtime/components/ProjectDeleteDialog.vue

@@ -0,0 +1,60 @@
+<!--
+  RmProjectDeleteDialog - supprimer un projet, pour de bon.
+
+  La suppression emporte tout ce que le projet rassemble, pour tous ses
+  membres : la modale le dit, nomme le projet, et attend un second clic.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title: string
+    loading?: boolean
+    error?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { loading: false, error: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'confirm': []
+}>()
+
+const WORDS = {
+  fr: {
+    heading: 'Supprimer le projet', cancel: 'Annuler', confirm: 'Supprimer définitivement',
+    text: (t: string) => `« ${t} » sera supprimé définitivement, avec ses ressources, ses commentaires et ses documents déposés, pour tous ses membres. Cette action est irréversible.`,
+  },
+  en: {
+    heading: 'Delete the project', cancel: 'Cancel', confirm: 'Delete for good',
+    text: (t: string) => `« ${t} » will be deleted for good, with its resources, comments and uploaded documents, for every member. This cannot be undone.`,
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+</script>
+
+<template>
+  <RmModal v-model="open" size="sm" :label="T.heading">
+    <template #header>
+      <h2 class="rm-project-dialog__title">{{ T.heading }}</h2>
+    </template>
+    <p class="rm-project-dialog__text">{{ T.text(title) }}</p>
+    <p v-if="error" class="rm-project-dialog__error">{{ error }}</p>
+    <template #footer>
+      <RmButton variant="tertiary" @click="open = false">{{ T.cancel }}</RmButton>
+      <RmButton variant="danger" prefix-icon="Trash" :loading="loading" @click="emit('confirm')">{{ T.confirm }}</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__text{font-size:var(--font-14);line-height:1.5;margin:0}.rm-project-dialog__error{color:var(--color-danger);font-size:var(--font-13);margin:8px 0 0}
+</style>