@tekkare/romulus 0.1.144 → 0.1.145

package/dist/module.json

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

package/dist/runtime/components/FilterTree.vue

@@ -0,0 +1,477 @@
+<script setup lang="ts">
+/**
+ * RmFilterTree - un filtre sur une taxonomie a plusieurs niveaux.
+ *
+ * Pour les classifications ou un noeud contient ses descendants :
+ * ATC (C -> C10 -> C10AA -> C10AA05), GHM par chapitre, CIM-10, CCAM,
+ * hierarchie geographique. L'utilisateur coche une branche entiere, ou
+ * descend pour affiner.
+ *
+ * A ne pas utiliser pour une liste plate (laboratoires, pays sans
+ * hierarchie) : RmFilterDropdown ou RmFilterComplex s'en chargent, et un
+ * arbre a un seul niveau ajoute des carets qui n'ouvrent rien.
+ *
+ * L'arbre est rendu a plat, avec un retrait par niveau, plutot qu'en
+ * composant recursif : la recherche et le pliage se calculent sur une seule
+ * liste, et une taxonomie de plusieurs milliers de codes ne monte pas autant
+ * d'instances de composant qu'elle a de noeuds.
+ */
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { PhCaretDown, PhCaretRight, PhCheck, PhMagnifyingGlass, PhMinus } from '@phosphor-icons/vue'
+import type { Component } from 'vue'
+import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
+
+export interface RmTreeNode {
+  /** Ce qui part dans la selection. Unique dans tout l'arbre. */
+  value: string
+  label: string
+  /**
+   * Code court, rendu en monospace avant le libelle. C'est par lui que
+   * cherchent ceux qui connaissent la classification, et l'aligner en
+   * chasse fixe rend la profondeur lisible d'un coup d'oeil.
+   */
+  code?: string
+  /**
+   * Nombre d'items que ce noeud couvre dans le jeu de donnees courant. Il dit
+   * si descendre dans la branche vaut la peine ; sans lui, on coche a
+   * l'aveugle.
+   */
+  count?: number
+  children?: RmTreeNode[]
+}
+
+const props = withDefaults(defineProps<{
+  nodes: RmTreeNode[]
+  /** Nom de la dimension, porte par la puce : « ATC », « GHM ». */
+  label?: string
+  icon?: Component
+  /**
+   * Rend le panneau seul, sans puce ni menu deroulant, pour le poser dans un
+   * tiroir ou un panneau du rail.
+   *
+   * Le pied « Appliquer » disparait alors, et le modele suit chaque clic :
+   * c'est la surface d'accueil qui porte la validation (le pied de son
+   * tiroir), et deux boutons « Appliquer » l'un au-dessus de l'autre ne
+   * disent pas lequel declenche quoi.
+   */
+  inline?: boolean
+  /**
+   * Faux quand c'est l'appelant qui cherche, cote serveur : le composant ne
+   * filtre plus l'arbre lui-meme et attend des `nodes` deja reduits. Une
+   * taxonomie tronquee a mille codes se cherche en base, pas en memoire.
+   */
+  filterSearch?: boolean
+  searchPlaceholder?: string
+  lang?: 'fr' | 'en'
+}>(), {
+  label: '',
+  icon: undefined,
+  inline: false,
+  filterSearch: true,
+  searchPlaceholder: '',
+  lang: 'fr',
+})
+
+/**
+ * La selection appliquee. Elle porte tous les noeuds coches, parents compris :
+ * cocher un parent coche ses descendants, donc l'etat a l'ecran et le modele
+ * disent la meme chose, et l'appelant n'a pas a redescendre l'arbre pour
+ * savoir ce qui est couvert.
+ */
+const selected = defineModel<string[]>({ default: () => [] })
+
+/**
+ * La recherche, exposee pour que l'appelant puisse chercher a sa place
+ * (cf. `filterSearch`).
+ */
+const search = defineModel<string>('search', { default: '' })
+
+const emit = defineEmits<{
+  /** La selection vient d'etre validee par le pied du panneau. */
+  apply: [values: string[]]
+}>()
+
+const en = computed(() => props.lang === 'en')
+
+const texts = computed(() => ({
+  search: props.searchPlaceholder || (en.value ? 'Search (code or label)...' : 'Rechercher (code ou libellé)...'),
+  clear: en.value ? 'Deselect all' : 'Tout désélectionner',
+  apply: en.value ? 'Apply' : 'Appliquer',
+  empty: en.value ? 'No match' : 'Aucun résultat',
+}))
+
+// ----------------------------------------------------------------- index
+
+interface Indexed {
+  node: RmTreeNode
+  depth: number
+  parent: string | null
+  /** Les valeurs de toute la branche sous ce noeud, lui exclu. */
+  descendants: string[]
+  /** Texte sur lequel la recherche mord : code et libelle. */
+  haystack: string
+}
+
+/**
+ * L'arbre mis a plat une fois par changement de `nodes`. Tout le reste
+ * (etats, recherche, pliage) se lit dans cette table plutot qu'en reparcourant
+ * l'arbre a chaque acces.
+ */
+const index = computed(() => {
+  const map = new Map<string, Indexed>()
+
+  const walk = (node: RmTreeNode, depth: number, parent: string | null): string[] => {
+    const entry: Indexed = {
+      node,
+      depth,
+      parent,
+      descendants: [],
+      haystack: `${node.code ?? ''} ${node.label}`.toLowerCase(),
+    }
+    map.set(node.value, entry)
+
+    const below: string[] = []
+    node.children?.forEach((child) => {
+      below.push(child.value, ...walk(child, depth + 1, node.value))
+    })
+    entry.descendants = below
+    return below
+  }
+
+  props.nodes.forEach(node => walk(node, 0, null))
+  return map
+})
+
+// ------------------------------------------------------------- brouillon
+
+/**
+ * Selection en cours, non validee.
+ *
+ * Les changements sont couteux a recalculer en aval (une requete par
+ * combinaison de codes) : le panneau garde donc son brouillon et n'ecrit le
+ * modele qu'au clic sur « Appliquer ». Cocher cinq branches ne declenche pas
+ * cinq requetes.
+ */
+const draft = ref(new Set<string>())
+const expanded = ref(new Set<string>())
+
+function resetDraft() {
+  draft.value = new Set(selected.value)
+  // Les branches qui portent la selection s'ouvrent : arriver sur un arbre
+  // replie alors qu'il est filtre ne dit pas sur quoi.
+  const open = new Set<string>()
+  selected.value.forEach((value) => {
+    let parent = index.value.get(value)?.parent ?? null
+    while (parent) {
+      open.add(parent)
+      parent = index.value.get(parent)?.parent ?? null
+    }
+  })
+  expanded.value = open
+}
+
+watch(selected, resetDraft, { immediate: true, deep: true })
+
+/**
+ * Remonte la coherence apres un clic : un parent est coche quand tous ses
+ * enfants le sont, et decoche des qu'il en manque un. Sans cette remontee, un
+ * parent coche pouvait survivre au decochage d'un de ses enfants et la
+ * selection affirmait couvrir une branche entiere qu'elle ne couvrait plus.
+ */
+function settle() {
+  const entries = [...index.value.values()].sort((a, b) => b.depth - a.depth)
+  entries.forEach(({ node }) => {
+    if (!node.children?.length) return
+    const all = node.children.every(child => draft.value.has(child.value))
+    if (all) draft.value.add(node.value)
+    else draft.value.delete(node.value)
+  })
+}
+
+function toggle(value: string) {
+  const entry = index.value.get(value)
+  if (!entry) return
+  const branch = [value, ...entry.descendants]
+  if (draft.value.has(value)) branch.forEach(item => draft.value.delete(item))
+  else branch.forEach(item => draft.value.add(item))
+  settle()
+  // `Set` mute sur place : la nouvelle reference reveille les calculs.
+  draft.value = new Set(draft.value)
+  // Posé dans un tiroir, le composant n'a pas de pied a lui : c'est la
+  // surface d'accueil qui decide quand agir, donc le modele suit le clic.
+  if (props.inline) commit()
+}
+
+function toggleExpand(value: string) {
+  if (expanded.value.has(value)) expanded.value.delete(value)
+  else expanded.value.add(value)
+  expanded.value = new Set(expanded.value)
+}
+
+// ------------------------------------------------------------ recherche
+
+/**
+ * Noeuds que la recherche laisse voir : ceux qui mordent, et tout leur chemin
+ * jusqu'a la racine. Un code trouve trois niveaux plus bas doit rester
+ * situable, sinon la liste rend des feuilles sans dire de quelle branche.
+ *
+ * `null` quand il n'y a pas de recherche : tout est visible, et ne rien
+ * construire evite de parcourir la taxonomie a chaque frappe.
+ */
+const matching = computed<Set<string> | null>(() => {
+  const needle = search.value.trim().toLowerCase()
+  if (!needle || !props.filterSearch) return null
+
+  const keep = new Set<string>()
+  index.value.forEach((entry, value) => {
+    if (!entry.haystack.includes(needle)) return
+    keep.add(value)
+    // La branche sous un noeud trouve reste consultable : chercher « C10 »
+    // doit donner ses sous-classes, pas seulement la ligne C10.
+    entry.descendants.forEach(item => keep.add(item))
+    let parent = entry.parent
+    while (parent) {
+      keep.add(parent)
+      parent = index.value.get(parent)?.parent ?? null
+    }
+  })
+  return keep
+})
+
+// ---------------------------------------------------------------- lignes
+
+const searching = computed(() => search.value.trim().length > 0)
+
+type NodeState = 'off' | 'on' | 'partial'
+
+interface Row {
+  node: RmTreeNode
+  depth: number
+  leaf: boolean
+  open: boolean
+  state: NodeState
+}
+
+function stateOf(node: RmTreeNode): NodeState {
+  if (draft.value.has(node.value)) return 'on'
+  const entry = index.value.get(node.value)
+  if (!entry?.descendants.length) return 'off'
+  return entry.descendants.some(item => draft.value.has(item)) ? 'partial' : 'off'
+}
+
+/**
+ * Les lignes a rendre, dans l'ordre de l'arbre. Une branche repliee ne
+ * descend pas ; une recherche en cours ouvre les branches qu'elle traverse,
+ * sans toucher au pliage choisi a la main (il revient quand la recherche se
+ * vide).
+ */
+const rows = computed<Row[]>(() => {
+  const visible = matching.value
+  const out: Row[] = []
+
+  const walk = (nodes: RmTreeNode[], depth: number) => {
+    nodes.forEach((node) => {
+      if (visible && !visible.has(node.value)) return
+      const leaf = !node.children?.length
+      // Une recherche en cours ouvre les branches qu'elle traverse, qu'elle
+      // soit faite ici ou par l'appelant : un code trouve trois niveaux plus
+      // bas doit se voir sans avoir a deplier sa branche a la main.
+      const open = leaf ? false : searching.value || expanded.value.has(node.value)
+      out.push({ node, depth, leaf, open, state: stateOf(node) })
+      if (open) walk(node.children!, depth + 1)
+    })
+  }
+
+  walk(props.nodes, 0)
+  return out
+})
+
+// ------------------------------------------------------------- puce
+
+/** La selection validee, celle que la puce decrit, pas le brouillon. */
+const applied = computed(() => new Set(selected.value))
+
+/**
+ * Racines de la selection : les noeuds coches dont le parent ne l'est pas.
+ * C'est ce que la selection couvre, dit au niveau le plus haut possible.
+ */
+const roots = computed(() => {
+  const out: RmTreeNode[] = []
+  index.value.forEach((entry, value) => {
+    if (!applied.value.has(value)) return
+    if (entry.parent && applied.value.has(entry.parent)) return
+    out.push(entry.node)
+  })
+  return out
+})
+
+/**
+ * Libelle de la puce : le noeud parent commun quand il y en a un seul, et le
+ * nombre des autres a cote. Enumerer trois sous-classes ne tient pas dans une
+ * puce et se lit moins bien que la classe qui les contient.
+ */
+const pillValue = computed(() => {
+  const first = roots.value[0]
+  if (!first) return ''
+  return [first.code, first.label].filter(Boolean).join(' ')
+})
+
+const isActive = computed(() => roots.value.length > 0)
+
+// -------------------------------------------------------------- panneau
+
+const isOpen = ref(false)
+const wrapRef = ref<HTMLElement>()
+const searchRef = ref<HTMLInputElement>()
+
+function close() {
+  isOpen.value = false
+}
+
+function toggleOpen() {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) rmPanelOpened(close)
+}
+
+// Chaque ouverture repart de la selection appliquee : un brouillon abandonne
+// la fois d'avant reapparaitrait comme s'il etait en vigueur.
+watch(isOpen, async (open) => {
+  if (!open) return
+  search.value = ''
+  resetDraft()
+  await nextTick()
+  searchRef.value?.focus()
+})
+
+function clear() {
+  draft.value = new Set()
+}
+
+/**
+ * Ecrit le brouillon dans le modele, dans l'ordre de l'arbre et non dans
+ * celui des clics : une selection se relit comme la classification, et deux
+ * selections identiques donnent la meme liste.
+ */
+function commit() {
+  const values = [...index.value.keys()].filter(value => draft.value.has(value))
+  selected.value = values
+  emit('apply', values)
+}
+
+function apply() {
+  commit()
+  isOpen.value = false
+}
+
+let unregister: (() => void) | undefined
+onMounted(() => {
+  if (props.inline) return
+  unregister = rmPanelRegister(close, () => isOpen.value)
+  document.addEventListener('click', onClickOutside)
+})
+onUnmounted(() => {
+  unregister?.()
+  document.removeEventListener('click', onClickOutside)
+})
+
+function onClickOutside(event: Event) {
+  if (wrapRef.value && !wrapRef.value.contains(event.target as Node)) isOpen.value = false
+}
+</script>
+
+<template>
+  <div ref="wrapRef" class="rm-ftree-wrap" :class="{ 'rm-ftree-wrap--inline': inline }">
+    <button
+      v-if="!inline"
+      type="button"
+      class="rm-ftree-pill"
+      :class="{ 'rm-ftree-pill--active': isActive }"
+      @click="toggleOpen"
+    >
+      <component :is="icon" v-if="icon" :size="16" class="rm-ftree-pill__icon" />
+      <span class="rm-ftree-pill__label">
+        {{ label }}<template v-if="pillValue"> : <b>{{ pillValue }}</b></template>
+      </span>
+      <span v-if="roots.length > 1" class="rm-ftree-pill__more">+{{ roots.length - 1 }}</span>
+      <PhCaretDown
+        :size="12"
+        class="rm-ftree-pill__caret"
+        :class="{ 'rm-ftree-pill__caret--open': isOpen }"
+      />
+    </button>
+
+    <div v-if="inline || isOpen" class="rm-ftree-panel">
+      <label class="rm-ftree-search">
+        <PhMagnifyingGlass :size="14" />
+        <input
+          ref="searchRef"
+          v-model="search"
+          type="search"
+          :placeholder="texts.search"
+          @click.stop
+        >
+      </label>
+
+      <div class="rm-ftree-list">
+        <p v-if="rows.length === 0" class="rm-ftree-empty">
+          {{ texts.empty }}
+        </p>
+
+        <div
+          v-for="row in rows"
+          :key="row.node.value"
+          class="rm-ftree-row"
+          :class="{ 'rm-ftree-row--on': row.state === 'on' }"
+          :style="{ paddingLeft: `${row.depth * 22}px` }"
+        >
+          <!-- Le caret n'ouvre que : il ne coche pas. Deux gestes distincts
+               sur la meme ligne, sinon descendre dans une branche la
+               selectionne au passage. -->
+          <button
+            v-if="!row.leaf"
+            type="button"
+            class="rm-ftree-caret"
+            :aria-expanded="row.open"
+            :aria-label="row.node.label"
+            @click.stop="toggleExpand(row.node.value)"
+          >
+            <PhCaretDown v-if="row.open" :size="12" />
+            <PhCaretRight v-else :size="12" />
+          </button>
+          <span v-else class="rm-ftree-caret rm-ftree-caret--none" />
+
+          <button type="button" class="rm-ftree-label" @click="toggle(row.node.value)">
+            <span
+              class="rm-ftree-box"
+              :class="{
+                'rm-ftree-box--on': row.state === 'on',
+                'rm-ftree-box--partial': row.state === 'partial',
+              }"
+            >
+              <PhCheck v-if="row.state === 'on'" :size="10" weight="bold" />
+              <PhMinus v-else-if="row.state === 'partial'" :size="10" weight="bold" />
+            </span>
+            <span v-if="row.node.code" class="rm-ftree-code">{{ row.node.code }}</span>
+            <span class="rm-ftree-text">{{ row.node.label }}</span>
+            <span v-if="row.node.count !== undefined" class="rm-ftree-count">{{ row.node.count }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Un pied, parce que rien ne s'applique au clic : voir le brouillon.
+           En mode inline il n'y en a pas, la surface d'accueil porte le sien. -->
+      <div v-if="!inline" class="rm-ftree-foot">
+        <button type="button" class="rm-ftree-clear" @click="clear">
+          {{ texts.clear }}
+        </button>
+        <button type="button" class="rm-ftree-apply" @click="apply">
+          {{ texts.apply }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-ftree-wrap{position:relative}.rm-ftree-wrap--inline{display:flex;flex-direction:column;height:100%;min-height:0}.rm-ftree-pill{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:var(--space-8);height:32px;max-width:320px;padding:0 var(--space-8);transition:border-color var(--duration-fast) var(--ease-in-out);white-space:nowrap}.rm-ftree-pill--active{border-color:var(--color-healthcare);box-shadow:0 0 8px 0 rgba(var(--healthcare-rgb),.1)}.rm-ftree-pill__icon{color:var(--color-secondary);flex-shrink:0}.rm-ftree-pill__label{overflow:hidden;text-overflow:ellipsis}.rm-ftree-pill__label b{color:var(--text-primary);font-weight:var(--weight-semibold)}.rm-ftree-pill__more{align-items:center;background:var(--bg-surface-2);border-radius:100px;color:var(--text-secondary);display:inline-flex;flex-shrink:0;font-size:var(--font-11);font-weight:var(--weight-semibold);height:18px;padding:0 6px}.rm-ftree-pill__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.rm-ftree-pill__caret--open{transform:rotate(180deg)}.rm-ftree-panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;display:flex;flex-direction:column;min-height:0}.rm-ftree-wrap:not(.rm-ftree-wrap--inline) .rm-ftree-panel{box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-width:460px;min-width:380px;position:absolute;top:calc(100% + 4px);z-index:50}.rm-ftree-wrap--inline .rm-ftree-panel{flex:1}.rm-ftree-search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-muted);display:flex;flex-shrink:0;gap:var(--space-6);margin:var(--space-8);padding:var(--space-8)}.rm-ftree-search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);min-width:0;outline:none}.rm-ftree-list{flex:1;max-height:340px;min-height:0;overflow-y:auto;padding:0 var(--space-4) var(--space-4)}.rm-ftree-wrap--inline .rm-ftree-list{max-height:none}.rm-ftree-empty{color:var(--text-muted);font-family:var(--font-sans);font-size:var(--font-14);margin:0;padding:var(--space-10) var(--space-8)}.rm-ftree-row{align-items:center;border-radius:4px;display:flex}.rm-ftree-row--on{background:rgba(var(--healthcare-rgb),.06)}.rm-ftree-caret{align-items:center;background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;width:22px}.rm-ftree-caret:hover{color:var(--text-primary)}.rm-ftree-caret--none{cursor:default}.rm-ftree-label{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;flex:1;font-family:var(--font-sans);font-size:var(--font-14);gap:var(--space-8);min-width:0;padding:var(--space-6) var(--space-8);text-align:left}.rm-ftree-label:hover{background:var(--bg-surface-2)}.rm-ftree-box{align-items:center;border:1.5px solid var(--border-default);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.rm-ftree-box--on,.rm-ftree-box--partial{background:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.rm-ftree-box--partial{background:var(--bg-surface);color:var(--color-healthcare)}.rm-ftree-code{color:var(--color-secondary);flex-shrink:0;font-family:var(--font-mono);font-size:var(--font-12);font-weight:var(--weight-semibold)}.rm-ftree-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-ftree-count{color:var(--text-muted);flex-shrink:0;font-size:var(--font-12);font-variant-numeric:tabular-nums}.rm-ftree-foot{align-items:center;border-top:1px solid var(--border-soft);display:flex;flex-shrink:0;gap:var(--space-8);justify-content:space-between;padding:var(--space-8) var(--space-12)}.rm-ftree-clear{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-13);padding:0;text-decoration:underline}.rm-ftree-clear:hover{color:var(--text-primary)}.rm-ftree-apply{background:var(--color-healthcare);border:none;border-radius:6px;color:var(--color-text-inverse);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-13);font-weight:var(--weight-semibold);height:30px;padding:0 var(--space-16)}.rm-ftree-apply:hover{filter:brightness(1.05)}
+</style>

package/dist/runtime/components/ShareDialog.vue

@@ -7,6 +7,13 @@
   apres. Deplier la case en une liste de noms au moment du partage laisserait
   les arrivants dehors, sans que personne s'en apercoive.
 
+  Une quatrieme portee n'apparait que pour qui administre la plateforme
+  (`canTemplate`) : publier la vue comme modele, offert a des espaces clients
+  choisis. Elle vit ici plutot que dans un ecran a part parce que c'est le
+  meme geste et la meme question — qui voit cette vue — avec un cran de plus :
+  des espaces au lieu des personnes. Une liste d'espaces vide vaut « tous »,
+  pour la meme raison que « tout l'espace » n'est pas deplie en noms.
+
   La liste des noms reste montee quand la portee change : on revient de
   « tout l'espace » a « des personnes » sans avoir reperdu sa selection.
 
@@ -23,7 +30,15 @@ export interface RmShareMember {
   email?: string
 }
 
-export type RmShareScope = 'private' | 'people' | 'workspace'
+/** Un espace de travail a qui un modele peut etre offert. */
+export interface RmShareWorkspace {
+  workspaceId: string
+  name: string
+  /** Formule d'abonnement, rappelee sous le nom. */
+  tier?: string
+}
+
+export type RmShareScope = 'private' | 'people' | 'workspace' | 'template'
 
 const props = withDefaults(
   defineProps<{
@@ -36,6 +51,19 @@ const props = withDefaults(
     visibility?: 'private' | 'workspace'
     /** Ids deja destinataires. */
     sharedWith?: string[]
+    /** Offrir la vue comme modele est possible. Reserve a l'administration. */
+    canTemplate?: boolean
+    /** La vue est deja publiee comme modele. */
+    isTemplate?: boolean
+    /** Espaces deja vises. Vide vaut « tous ». */
+    targetWorkspaces?: string[]
+    /** Espaces proposes. L'appelant les charge quand le dialogue s'ouvre. */
+    workspaces?: RmShareWorkspace[]
+    /**
+     * Ce que la publication ne saura pas traduire, dit en une phrase par
+     * l'appelant : lui seul sait lire les criteres de la vue.
+     */
+    templateNote?: string
     loading?: boolean
     lang?: 'fr' | 'en'
   }>(),
@@ -44,6 +72,11 @@ const props = withDefaults(
     members: () => [],
     visibility: 'private',
     sharedWith: () => [],
+    canTemplate: false,
+    isTemplate: false,
+    targetWorkspaces: () => [],
+    workspaces: () => [],
+    templateNote: '',
     loading: false,
     lang: 'fr',
   },
@@ -51,7 +84,15 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
-  save: [value: { visibility: 'private' | 'workspace'; sharedWith: string[] }]
+  save: [
+    value: {
+      visibility: 'private' | 'workspace'
+      sharedWith: string[]
+      /** Absents quand l'appelant n'a pas le droit de publier. */
+      isTemplate?: boolean
+      targetWorkspaces?: string[]
+    },
+  ]
 }>()
 
 const en = computed(() => props.lang === 'en')
@@ -79,11 +120,26 @@ const T = computed(() => ({
       : `${n} ${n > 1 ? 'personnes' : 'personne'} selectionnee${n > 1 ? 's' : ''}`,
   cancel: en.value ? 'Cancel' : 'Annuler',
   save: en.value ? 'Share' : 'Partager',
+  template: en.value ? 'Tekkare template' : 'Template Tekkare',
+  templateHint: en.value
+    ? 'Offered as a starting point on this page, without being shared.'
+    : 'Offert comme point de depart sur cette page, sans etre partage.',
+  workspaceSearch: en.value ? 'Search for a workspace' : 'Chercher un espace',
+  noWorkspace: en.value ? 'No workspace to offer it to.' : 'Aucun espace a qui l\'offrir.',
+  allWorkspaces: en.value
+    ? 'No workspace picked: every workspace is offered the template.'
+    : 'Aucun espace retenu : le template est offert a tous les espaces.',
+  workspaceCount: (n: number) =>
+    en.value
+      ? `${n} ${n > 1 ? 'workspaces' : 'workspace'} selected`
+      : `${n} espace${n > 1 ? 's' : ''} retenu${n > 1 ? 's' : ''}`,
 }))
 
 const scope = ref<RmShareScope>('private')
 const picked = ref<string[]>([])
 const search = ref('')
+const pickedWorkspaces = ref<string[]>([])
+const workspaceSearch = ref('')
 
 /**
  * L'etat ouvert fait foi : le dialogue se recharge a chaque ouverture, jamais
@@ -94,13 +150,16 @@ watch(
   (open) => {
     if (!open) return
     picked.value = [...props.sharedWith]
-    scope.value =
-      props.visibility === 'workspace'
+    pickedWorkspaces.value = [...props.targetWorkspaces]
+    scope.value = props.isTemplate
+      ? 'template'
+      : props.visibility === 'workspace'
         ? 'workspace'
         : props.sharedWith.length
           ? 'people'
           : 'private'
     search.value = ''
+    workspaceSearch.value = ''
   },
   { immediate: true },
 )
@@ -122,6 +181,19 @@ function toggle(userId: string) {
   picked.value = [...next]
 }
 
+const workspaceMatches = computed(() => {
+  const q = workspaceSearch.value.trim().toLowerCase()
+  if (!q) return props.workspaces
+  return props.workspaces.filter(ws => ws.name.toLowerCase().includes(q))
+})
+
+function toggleWorkspace(workspaceId: string) {
+  const next = new Set(pickedWorkspaces.value)
+  if (next.has(workspaceId)) next.delete(workspaceId)
+  else next.add(workspaceId)
+  pickedWorkspaces.value = [...next]
+}
+
 function close() {
   emit('update:modelValue', false)
 }
@@ -135,6 +207,12 @@ function save() {
   emit('save', {
     visibility: scope.value === 'workspace' ? 'workspace' : 'private',
     sharedWith: scope.value === 'people' ? picked.value : [],
+    // Rien sur le modele quand l'appelant n'a pas le droit d'en publier : la
+    // simple presence des champs serait refusee par l'API.
+    ...(props.canTemplate && {
+      isTemplate: scope.value === 'template',
+      targetWorkspaces: scope.value === 'template' ? pickedWorkspaces.value : [],
+    }),
   })
 }
 
@@ -148,6 +226,16 @@ const scopes = computed<Array<{ key: RmShareScope; icon: string; label: string;
       label: T.value.workspace,
       hint: T.value.workspaceHint,
     },
+    ...(props.canTemplate
+      ? [
+          {
+            key: 'template' as const,
+            icon: 'Sparkle',
+            label: T.value.template,
+            hint: T.value.templateHint,
+          },
+        ]
+      : []),
   ],
 )
 </script>
@@ -218,29 +306,55 @@ const scopes = computed<Array<{ key: RmShareScope; icon: string; label: string;
 
         <ul v-else class="rm-share__list">
           <li v-for="member in matches" :key="member.userId">
-            <label class="rm-share__member">
-              <input
-                type="checkbox"
-                class="rm-share__check"
-                :checked="picked.includes(member.userId)"
-                :aria-label="member.name"
-                @change="toggle(member.userId)"
-              >
-              <RmIcon
-                :name="picked.includes(member.userId) ? 'CheckSquare' : 'Square'"
-                :weight="picked.includes(member.userId) ? 'fill' : 'regular'"
-                :size="18"
-              />
-              <span class="rm-share__member-text">
-                <span class="rm-share__member-name">{{ member.name }}</span>
-                <span v-if="member.email" class="rm-share__member-mail">{{ member.email }}</span>
-              </span>
-            </label>
+            <RmCheckbox
+              :model-value="picked.includes(member.userId)"
+              :label="member.name"
+              :description="member.email"
+              @update:model-value="toggle(member.userId)"
+            />
           </li>
         </ul>
 
         <p v-if="picked.length" class="rm-share__count">{{ T.count(picked.length) }}</p>
       </div>
+
+      <!--
+        Meme forme que la liste des personnes : une recherche, des cases, un
+        compte. Ce qui change est le defaut — aucun espace retenu ne veut pas
+        dire « personne » mais « tous », et c'est dit a l'ecran plutot que
+        laisse deviner.
+      -->
+      <div v-show="scope === 'template'" class="rm-share__people">
+        <p v-if="templateNote" class="rm-share__note">{{ templateNote }}</p>
+
+        <label class="rm-share__search">
+          <RmIcon name="MagnifyingGlass" :size="16" />
+          <input
+            v-model="workspaceSearch"
+            type="search"
+            :placeholder="T.workspaceSearch"
+            :aria-label="T.workspaceSearch"
+          >
+        </label>
+
+        <p v-if="!workspaces.length" class="rm-share__empty">{{ T.noWorkspace }}</p>
+        <p v-else-if="!workspaceMatches.length" class="rm-share__empty">{{ T.noMatch }}</p>
+
+        <ul v-else class="rm-share__list">
+          <li v-for="ws in workspaceMatches" :key="ws.workspaceId">
+            <RmCheckbox
+              :model-value="pickedWorkspaces.includes(ws.workspaceId)"
+              :label="ws.name"
+              :description="ws.tier"
+              @update:model-value="toggleWorkspace(ws.workspaceId)"
+            />
+          </li>
+        </ul>
+
+        <p class="rm-share__count">
+          {{ pickedWorkspaces.length ? T.workspaceCount(pickedWorkspaces.length) : T.allWorkspaces }}
+        </p>
+      </div>
     </div>
 
     <template #footer>
@@ -257,5 +371,5 @@ const scopes = computed<Array<{ key: RmShareScope; icon: string; label: string;
 </template>
 
 <style scoped>
-.rm-share{gap:var(--space-16)}.rm-share,.rm-share__head{display:flex;flex-direction:column}.rm-share__head{gap:var(--space-4)}.rm-share__title{color:var(--color-primary);font-size:var(--font-16);font-weight:var(--weight-bold)}.rm-share__subject{color:var(--color-secondary);font-size:var(--font-13)}.rm-share__scopes{display:flex;flex-direction:column;gap:var(--space-8);list-style:none}.rm-share__scope{align-items:flex-start;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);color:var(--color-primary);cursor:pointer;display:flex;gap:var(--space-10);padding:var(--space-10) var(--space-12);text-align:left;width:100%}.rm-share__scope:hover{background:var(--bg-hover)}.rm-share__check,.rm-share__radio{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);white-space:nowrap}.rm-share__scope:has(.rm-share__radio:focus-visible){outline:2px solid var(--color-secondary);outline-offset:2px}.rm-share__scope.is-on{background:var(--bg-hover);border-color:var(--color-secondary)}.rm-share__scope-text{display:flex;flex:1;flex-direction:column;gap:2px}.rm-share__scope-label{font-size:var(--font-13);font-weight:var(--weight-medium)}.rm-share__scope-hint{font-size:var(--font-12)}.rm-share__scope-hint,.rm-share__scope-mark{color:var(--color-secondary)}.rm-share__people{display:flex;flex-direction:column;gap:var(--space-8)}.rm-share__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-pill);color:var(--color-secondary);display:flex;gap:var(--space-8);padding:var(--space-6) var(--space-10)}.rm-share__search input{background:none;border:none;color:var(--color-primary);flex:1;font-size:var(--font-13);outline:none}.rm-share__list{display:flex;flex-direction:column;gap:2px;list-style:none}.rm-share__member{align-items:center;border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--space-8);padding:var(--space-6) var(--space-8)}.rm-share__member:hover{background:var(--bg-hover)}.rm-share__member:has(.rm-share__check:focus-visible){outline:2px solid var(--color-secondary);outline-offset:2px}.rm-share__member-text{display:flex;flex-direction:column}.rm-share__member-name{color:var(--color-primary);font-size:var(--font-13)}.rm-share__member-mail{color:var(--color-secondary);font-size:var(--font-11)}.rm-share__count,.rm-share__empty{color:var(--color-secondary);font-size:var(--font-12)}.rm-share__foot{display:flex;gap:var(--space-8);justify-content:flex-end}
+.rm-share,.rm-share :where(*){box-sizing:border-box}.rm-share{display:flex;flex-direction:column;gap:var(--space-16)}.rm-share__note{background:var(--bg-surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-12);padding:var(--space-8) var(--space-10)}.rm-share__head{display:flex;flex-direction:column;gap:var(--space-4)}.rm-share__title{color:var(--text-primary);font-size:var(--font-16);font-weight:var(--weight-bold)}.rm-share__subject{color:var(--text-secondary);font-size:var(--font-13)}.rm-share__scopes{display:flex;flex-direction:column;gap:var(--space-8);list-style:none;margin:0;padding:0}.rm-share__scope{align-items:flex-start;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;display:flex;gap:var(--space-10);padding:var(--space-10) var(--space-12);text-align:left;width:100%}.rm-share__scope:hover{background:var(--bg-hover)}.rm-share__radio{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);white-space:nowrap}.rm-share__scope:has(.rm-share__radio:focus-visible){outline:2px solid var(--color-secondary);outline-offset:2px}.rm-share__scope.is-on{background:var(--bg-hover);border-color:var(--color-secondary)}.rm-share__scope-text{display:flex;flex:1;flex-direction:column;gap:2px}.rm-share__scope-label{font-size:var(--font-13);font-weight:var(--weight-medium)}.rm-share__scope-hint{color:var(--text-secondary);font-size:var(--font-12)}.rm-share__scope-mark{color:var(--color-secondary)}.rm-share__people{display:flex;flex-direction:column;gap:var(--space-8)}.rm-share__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-pill);color:var(--text-muted);display:flex;gap:var(--space-8);padding:var(--space-6) var(--space-10)}.rm-share__search input{background:none;border:none;color:var(--text-primary);flex:1;font-size:var(--font-13);outline:none}.rm-share__list{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}.rm-share__count,.rm-share__empty{color:var(--text-secondary);font-size:var(--font-12)}.rm-share__foot{display:flex;gap:var(--space-8);justify-content:flex-end}
 </style>

package/package.json

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