@tekkare/romulus 0.1.148 → 0.1.150

package/dist/module.json

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

package/dist/runtime/components/SidebarRight.vue

@@ -192,12 +192,16 @@ onBeforeUnmount(() => {
       <span class="rm-rail__caption">{{ profileLabel }}</span>
     </NuxtLink>
 
+    <!-- La cle de la tuile sort aussi en attribut : une visite guidee designe
+         une commande par selecteur (`[data-tile="Views"]`), et le rail est le
+         seul endroit qui sait quelle tuile porte quelle cle. -->
     <button
       v-for="tile in tiles"
       :key="tile.key"
       class="rm-rail__item"
       :class="{ 'rm-rail__item--active': active === tile.key }"
       type="button"
+      :data-tile="tile.key"
       :title="tileTitle(tile)"
       :aria-pressed="active === tile.key"
       @click="emit('select', tile.key)"

package/dist/runtime/components/Tour.vue

@@ -0,0 +1,413 @@
+<!--
+  RmTour - la visite guidee : le moteur qui montre une partie de l'ecran et
+  explique ce qu'elle fait.
+
+  Une note explique une page, une visite explique un geste. Les deux repondent
+  a des questions differentes : « d'ou vient ce chiffre » se lit dans
+  `RmNotes`, « comment j'enregistre mes filtres » ne se lit nulle part, parce
+  que la reponse tient dans un enchainement de trois commandes posees a trois
+  endroits du cadre. Le texte seul obligerait le lecteur a les retrouver ; la
+  visite les designe.
+
+  Le composant ne connait ni l'app ni ses ecrans. Une etape porte un selecteur
+  CSS, et c'est tout ce qui la relie a la page : le moteur cherche le noeud, le
+  detoure, pose sa bulle a cote et laisse l'appelant decider du reste. Une
+  etape peut donc viser le cadre (une tuile du rail) comme le contenu (une
+  carte), sans que le moteur ait a distinguer les deux.
+
+  L'appelant garde l'index de l'etape (`v-model:step`) : c'est lui qui sait ce
+  qu'il faut ouvrir pour qu'une cible existe — un panneau replie n'a pas de
+  noeud a detourer. Le moteur, lui, attend : tant que le selecteur ne rend
+  rien, la bulle reste centree et reprend sa place des que la cible parait.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import type { RmTourStep } from '../utils/tours'
+
+export type { RmTourStep }
+
+const props = withDefaults(defineProps<{
+  steps: RmTourStep[]
+  open?: boolean
+  /** Nom de la visite, rappele au-dessus du titre de l'etape. */
+  title?: string
+  lang?: 'fr' | 'en'
+}>(), {
+  open: false,
+  title: undefined,
+  lang: 'fr',
+})
+
+/** Index de l'etape affichee. Tenu par l'appelant : cf. l'en-tete. */
+const step = defineModel<number>('step', { default: 0 })
+
+const emit = defineEmits<{
+  /** Visite quittee avant la fin (croix, Echap, « Quitter »). */
+  close: []
+  /** Derniere etape validee. */
+  finish: []
+}>()
+
+const WORDS = {
+  fr: {
+    prev: 'Précédent',
+    next: 'Suivant',
+    finish: 'Terminer',
+    quit: 'Quitter la visite',
+    step: 'Étape',
+    of: 'sur',
+  },
+  en: {
+    prev: 'Back',
+    next: 'Next',
+    finish: 'Done',
+    quit: 'Leave the tour',
+    step: 'Step',
+    of: 'of',
+  },
+} as const
+
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const current = computed<RmTourStep | undefined>(() => props.steps[step.value])
+const isLast = computed(() => step.value >= props.steps.length - 1)
+
+/** Cadre de la cible, en coordonnees de fenetre. Nul tant qu'elle manque. */
+const spot = ref<{ top: number, left: number, width: number, height: number } | null>(null)
+const card = ref<HTMLElement | null>(null)
+const cardSize = ref({ width: 340, height: 220 })
+
+const PAD = 8
+const GAP = 14
+/** Marge minimale entre la bulle et le bord de la fenetre. */
+const EDGE = 16
+
+/**
+ * Le noeud vise. Une etape peut donner plusieurs selecteurs separes par une
+ * virgule : ils sont essayes DANS L'ORDRE ECRIT, du plus precis au repli.
+ * `document.querySelector` avec la meme liste rendrait le premier noeud dans
+ * l'ordre du document, donc souvent le repli — un panneau plutot que la liste
+ * qu'il contient.
+ */
+function findTarget(selector: string): HTMLElement | null {
+  for (const part of selector.split(',')) {
+    const node = document.querySelector(part.trim()) as HTMLElement | null
+    if (node) return node
+  }
+  return null
+}
+
+function measure() {
+  const selector = current.value?.target
+  if (!selector) {
+    spot.value = null
+    return
+  }
+  const node = findTarget(selector)
+  if (!node) {
+    spot.value = null
+    return
+  }
+  const rect = node.getBoundingClientRect()
+  // Un noeud replie (panneau ferme, transition en cours) mesure zero : le
+  // detourer dessinerait un point au coin de l'ecran. On le traite comme
+  // absent, et la mesure suivante le rattrapera quand il se sera deploye.
+  if (rect.width < 2 || rect.height < 2) {
+    spot.value = null
+    return
+  }
+  const pad = current.value?.padding ?? PAD
+  spot.value = {
+    top: rect.top - pad,
+    left: rect.left - pad,
+    width: rect.width + pad * 2,
+    height: rect.height + pad * 2,
+  }
+  const box = card.value?.getBoundingClientRect()
+  if (box) cardSize.value = { width: box.width, height: box.height }
+}
+
+/**
+ * La mesure tourne image par image tant que la visite est ouverte.
+ *
+ * Les cibles bougent sans evenement qu'on puisse ecouter : le panneau du rail
+ * s'ouvre en glissant, la page se refloue derriere lui, une carte se charge et
+ * grandit. Ecouter `scroll` et `resize` laissait le detourage a cote de sa
+ * cible pendant toute la transition. Lire un `getBoundingClientRect` par image
+ * sur un seul noeud coute moins qu'un observateur par cause de mouvement.
+ */
+let frame: number | null = null
+
+function loop() {
+  measure()
+  frame = requestAnimationFrame(loop)
+}
+
+function start() {
+  if (frame === null) frame = requestAnimationFrame(loop)
+}
+
+function stop() {
+  if (frame !== null) cancelAnimationFrame(frame)
+  frame = null
+}
+
+/** La cible est amenee a l'ecran au changement d'etape, jamais apres. */
+function reveal() {
+  const selector = current.value?.target
+  if (!selector) return
+  const node = findTarget(selector)
+  if (!node) return
+  const still = document.body.classList.contains('reduce-motion')
+    || window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  node.scrollIntoView({ block: 'center', inline: 'nearest', behavior: still ? 'auto' : 'smooth' })
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (!props.open) return
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('close')
+    return
+  }
+  if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    next()
+    return
+  }
+  if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    prev()
+  }
+}
+
+function next() {
+  if (isLast.value) {
+    emit('finish')
+    return
+  }
+  step.value = step.value + 1
+}
+
+function prev() {
+  if (step.value > 0) step.value = step.value - 1
+}
+
+watch(() => props.open, (open) => {
+  if (open) {
+    step.value = Math.min(Math.max(step.value, 0), Math.max(props.steps.length - 1, 0))
+    document.addEventListener('keydown', onKeydown)
+    start()
+    nextTick(() => {
+      reveal()
+      measure()
+      card.value?.focus()
+    })
+  }
+  else {
+    document.removeEventListener('keydown', onKeydown)
+    stop()
+    spot.value = null
+  }
+}, { immediate: false })
+
+// Chaque etape amene sa cible a l'ecran et reprend la main au clavier : la
+// bulle est le seul element focalisable de la visite.
+watch(step, () => {
+  if (!props.open) return
+  nextTick(() => {
+    reveal()
+    measure()
+    card.value?.focus()
+  })
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onKeydown)
+  stop()
+})
+
+/**
+ * Position de la bulle : le premier cote qui la contient entierement, en
+ * partant du cote demande. Sans cible, ou si aucun cote ne tient, elle est
+ * centree — et le detourage, lui, reste en place.
+ */
+const cardStyle = computed(() => {
+  const rect = spot.value
+  const { width, height } = cardSize.value
+  const vw = typeof window === 'undefined' ? 1280 : window.innerWidth
+  const vh = typeof window === 'undefined' ? 800 : window.innerHeight
+
+  if (!rect || current.value?.placement === 'center') {
+    return {
+      top: `${Math.max(EDGE, (vh - height) / 2)}px`,
+      left: `${Math.max(EDGE, (vw - width) / 2)}px`,
+    }
+  }
+
+  const clamp = (value: number, max: number) =>
+    Math.min(Math.max(value, EDGE), Math.max(EDGE, max - EDGE))
+
+  const fits = {
+    bottom: vh - (rect.top + rect.height) - GAP >= height,
+    top: rect.top - GAP >= height,
+    right: vw - (rect.left + rect.width) - GAP >= width,
+    left: rect.left - GAP >= width,
+  }
+
+  const order: ('top' | 'bottom' | 'left' | 'right')[] = current.value?.placement
+    && current.value.placement !== 'center'
+    ? [current.value.placement, 'bottom', 'top', 'right', 'left']
+    : ['bottom', 'top', 'right', 'left']
+
+  const side = order.find(item => fits[item])
+
+  if (side === 'bottom' || side === 'top') {
+    const top = side === 'bottom' ? rect.top + rect.height + GAP : rect.top - GAP - height
+    return {
+      top: `${clamp(top, vh - height)}px`,
+      left: `${clamp(rect.left + rect.width / 2 - width / 2, vw - width)}px`,
+    }
+  }
+  if (side === 'right' || side === 'left') {
+    const left = side === 'right' ? rect.left + rect.width + GAP : rect.left - GAP - width
+    return {
+      top: `${clamp(rect.top + rect.height / 2 - height / 2, vh - height)}px`,
+      left: `${clamp(left, vw - width)}px`,
+    }
+  }
+
+  // Aucun cote ne tient (une cible qui occupe l'ecran) : la bulle se pose en
+  // bas a droite plutot que par-dessus le milieu de la cible.
+  return {
+    top: `${Math.max(EDGE, vh - height - EDGE)}px`,
+    left: `${Math.max(EDGE, vw - width - EDGE)}px`,
+  }
+})
+
+const spotStyle = computed(() => {
+  const rect = spot.value
+  if (!rect) return { display: 'none' }
+  return {
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+  }
+})
+
+/**
+ * Les bandes du voile : au-dessus, en dessous, a gauche et a droite de la
+ * cible. Sans cible, une seule bande couvre l'ecran.
+ */
+const veil = computed(() => {
+  const rect = spot.value
+  if (!rect) return [{ top: '0px', left: '0px', right: '0px', bottom: '0px' }]
+  return [
+    { top: '0px', left: '0px', right: '0px', height: `${Math.max(rect.top, 0)}px` },
+    {
+      top: `${rect.top + rect.height}px`,
+      left: '0px',
+      right: '0px',
+      bottom: '0px',
+    },
+    {
+      top: `${rect.top}px`,
+      left: '0px',
+      width: `${Math.max(rect.left, 0)}px`,
+      height: `${rect.height}px`,
+    },
+    {
+      top: `${rect.top}px`,
+      left: `${rect.left + rect.width}px`,
+      right: '0px',
+      height: `${rect.height}px`,
+    },
+  ]
+})
+
+/** `**gras**`, comme dans les notes. Rien d'autre n'est interprete. */
+function rich(text: string) {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open && current" class="rm-tour" role="dialog" aria-modal="true" :aria-label="title">
+      <!-- Le voile est decoupe en quatre bandes autour de la cible, qui reste
+           donc visible et nette dans le trou, sans qu'on ait a deplacer son
+           noeud ni a lui poser un z-index. Une seule bande plein ecran quand
+           l'etape ne vise rien.
+
+           Il laisse passer les clics : la visite explique des gestes, elle ne
+           doit pas empecher de les faire. Quitter passe par « Quitter » ou
+           Echap, pas par un clic dans le vide. -->
+      <div
+        v-for="(part, index) in veil"
+        :key="index"
+        class="rm-tour__veil"
+        :style="part"
+      />
+
+      <!-- Le cadre de la cible, pose par-dessus les bandes : c'est lui qui
+           dit ce dont parle la bulle. -->
+      <div class="rm-tour__spot" :style="spotStyle" />
+
+      <div ref="card" class="rm-tour__card" :style="cardStyle" tabindex="-1">
+        <div class="rm-tour__head">
+          <p v-if="title" class="rm-tour__eyebrow">{{ title }}</p>
+          <button
+            class="rm-tour__close"
+            type="button"
+            :title="T.quit"
+            :aria-label="T.quit"
+            @click="emit('close')"
+          >
+            <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M5 5l10 10M15 5L5 15" />
+            </svg>
+          </button>
+        </div>
+
+        <h2 class="rm-tour__title">{{ current.title }}</h2>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <p class="rm-tour__text" v-html="rich(current.text)" />
+
+        <ul v-if="current.bullets?.length" class="rm-tour__list">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <li v-for="(item, index) in current.bullets" :key="index" v-html="rich(item)" />
+        </ul>
+
+        <div class="rm-tour__foot">
+          <span class="rm-tour__count">{{ T.step }} {{ step + 1 }} {{ T.of }} {{ steps.length }}</span>
+
+          <div class="rm-tour__dots" aria-hidden="true">
+            <span
+              v-for="(item, index) in steps"
+              :key="index"
+              class="rm-tour__dot"
+              :class="{ 'rm-tour__dot--on': index === step, 'rm-tour__dot--done': index < step }"
+            />
+          </div>
+
+          <div class="rm-tour__actions">
+            <button v-if="step > 0" class="rm-tour__btn" type="button" @click="prev">
+              {{ T.prev }}
+            </button>
+            <button class="rm-tour__btn rm-tour__btn--primary" type="button" @click="next">
+              {{ isLast ? T.finish : T.next }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.rm-tour{inset:0;position:fixed;z-index:900}.rm-tour__veil{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background:rgba(15,23,42,.45)}.rm-tour__spot,.rm-tour__veil{pointer-events:none;position:fixed}.rm-tour__spot{border:2px solid var(--color-secondary);border-radius:var(--radius-lg);transition:all var(--duration-fast) var(--ease-out)}.rm-tour__card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);flex-direction:column;max-width:calc(100vw - 32px);outline:none;padding:var(--space-16);position:fixed;width:340px}.rm-tour__card,.rm-tour__head{display:flex;gap:var(--space-8)}.rm-tour__head{align-items:center;justify-content:space-between}.rm-tour__eyebrow{color:var(--color-secondary);font-size:var(--font-10);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase}.rm-tour__close{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:flex;height:24px;justify-content:center;margin-left:auto;padding:0;width:24px}.rm-tour__close:hover{background:var(--bg-surface-3);color:var(--text-primary)}.rm-tour__close svg{height:14px;width:14px}.rm-tour__title{color:var(--text-primary);font-size:var(--font-16);font-weight:var(--weight-semibold);line-height:1.3}.rm-tour__text{color:var(--text-secondary);font-size:var(--font-13);line-height:1.55}.rm-tour__list{color:var(--text-secondary);display:flex;flex-direction:column;font-size:var(--font-12);gap:var(--space-4);line-height:1.5;margin:0;padding-left:var(--space-16)}.rm-tour__foot{align-items:center;border-top:1px solid var(--border-default);display:flex;gap:var(--space-8);margin-top:var(--space-4);padding-top:var(--space-12)}.rm-tour__count{color:var(--text-muted);font-size:var(--font-11);font-variant-numeric:tabular-nums}.rm-tour__dots{display:flex;gap:4px}.rm-tour__dot{background:var(--border-default);border-radius:var(--radius-pill);height:5px;width:5px}.rm-tour__dot--done{background:var(--color-violet-pale)}.rm-tour__dot--on{background:var(--color-secondary);width:14px}.rm-tour__actions{display:flex;gap:var(--space-6);margin-left:auto}.rm-tour__btn{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:var(--font-12);padding:5px var(--space-12)}.rm-tour__btn:hover{background:var(--bg-surface-3)}.rm-tour__btn--primary{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff;font-weight:var(--weight-semibold)}.rm-tour__btn--primary:hover{background:var(--color-secondary);filter:brightness(1.05)}
+</style>

package/dist/runtime/components/Tutorials.vue

@@ -0,0 +1,130 @@
+<!--
+  RmTutorials - le panneau « Tutoriels » du rail : la liste des visites
+  guidees que l'ecran ouvert sait jouer.
+
+  C'est le pendant de `RmNotes` pour les gestes. La note repond a « d'ou vient
+  ce chiffre », le tutoriel a « comment je m'en sers » : il ne se lit pas, il
+  se joue, et c'est `RmTour` qui le joue. Ce panneau ne fait que presenter le
+  catalogue et rendre la main a l'appelant sur « Démarrer ».
+
+  Une visite peut ne pas etre jouable sur l'ecran affiche (elle designe une
+  commande que la page n'a pas). Elle reste alors listee, avec sa raison sous
+  elle : la masquer ferait croire que la fonction n'existe pas, alors que
+  c'est l'ecran qui ne la porte pas.
+
+  Les visites deja terminees gardent leur place et changent de bouton
+  (« Revoir ») : une visite se rejoue, ce n'est pas une case a cocher.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RmTutorial } from '../utils/tours'
+
+export type { RmTutorial }
+
+const props = withDefaults(defineProps<{
+  tutorials: RmTutorial[]
+  /** Identifiants des visites deja terminees par le lecteur. */
+  done?: string[]
+  title?: string
+  /** Phrase d'introduction du panneau. */
+  description?: string
+  /** Pastille d'auteur en haut a droite (« TEKKARE »). */
+  badge?: string
+  lang?: 'fr' | 'en'
+}>(), {
+  done: () => [],
+  title: '',
+  description: undefined,
+  badge: undefined,
+  lang: 'fr',
+})
+
+const emit = defineEmits<{ start: [id: string] }>()
+
+const WORDS = {
+  fr: {
+    start: 'Démarrer',
+    again: 'Revoir',
+    steps: 'étapes',
+    minutes: 'min',
+    done: 'Terminé',
+    empty: 'Aucune visite pour cet écran',
+    emptyText: "Les visites sont rattachées aux fonctions du cadre : ouvrez une page d'analyse pour les retrouver.",
+  },
+  en: {
+    start: 'Start',
+    again: 'Replay',
+    steps: 'steps',
+    minutes: 'min',
+    done: 'Done',
+    empty: 'No tour for this screen',
+    emptyText: 'Tours belong to the frame features: open an analysis page to find them again.',
+  },
+} as const
+
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const isDone = (id: string) => props.done.includes(id)
+</script>
+
+<template>
+  <div class="rm-tuto">
+    <div v-if="title || badge" class="rm-tuto__head">
+      <h2 v-if="title" class="rm-tuto__title">{{ title }}</h2>
+      <span v-if="badge" class="rm-tuto__badge">{{ badge }}</span>
+    </div>
+
+    <p v-if="description" class="rm-tuto__desc">{{ description }}</p>
+
+    <div v-if="tutorials.length" class="rm-tuto__list">
+      <article
+        v-for="item in tutorials"
+        :key="item.id"
+        class="rm-tuto__card"
+        :class="{ 'rm-tuto__card--off': !!item.disabledReason }"
+      >
+        <div class="rm-tuto__row">
+          <span class="rm-tuto__icon">
+            <RmIcon :name="item.icon || 'Compass'" :size="18" />
+          </span>
+
+          <div class="rm-tuto__body">
+            <div class="rm-tuto__line">
+              <h3 class="rm-tuto__name">{{ item.title }}</h3>
+              <span v-if="item.tag" class="rm-tuto__tag">{{ item.tag }}</span>
+              <span v-if="isDone(item.id)" class="rm-tuto__done">
+                <RmIcon name="CheckCircle" :size="13" weight="fill" />
+                {{ T.done }}
+              </span>
+            </div>
+
+            <p class="rm-tuto__summary">{{ item.summary }}</p>
+
+            <p class="rm-tuto__meta">
+              {{ item.steps }} {{ T.steps }}
+              <template v-if="item.minutes"> · {{ item.minutes }} {{ T.minutes }}</template>
+            </p>
+          </div>
+
+          <RmButton
+            variant="secondary"
+            size="sm"
+            prefix-icon="Play"
+            :disabled="!!item.disabledReason"
+            @click="emit('start', item.id)"
+          >
+            {{ isDone(item.id) ? T.again : T.start }}
+          </RmButton>
+        </div>
+
+        <p v-if="item.disabledReason" class="rm-tuto__reason">{{ item.disabledReason }}</p>
+      </article>
+    </div>
+
+    <RmEmptyState v-else :title="T.empty" :text="T.emptyText" />
+  </div>
+</template>
+
+<style scoped>
+.rm-tuto{display:flex;flex-direction:column;gap:var(--space-12);width:100%}.rm-tuto__head{align-items:center;display:flex;gap:var(--space-8);justify-content:space-between}.rm-tuto__title{color:var(--text-primary);font-size:var(--font-16)}.rm-tuto__badge,.rm-tuto__title{font-weight:var(--weight-semibold)}.rm-tuto__badge{background:var(--bg-hover);border-radius:var(--radius-pill);color:var(--color-primary);font-size:var(--font-10);letter-spacing:.06em;padding:2px var(--space-8);text-transform:uppercase}.rm-tuto__desc{color:var(--text-secondary);font-size:var(--font-12);line-height:1.55}.rm-tuto__card,.rm-tuto__list{display:flex;flex-direction:column;gap:var(--space-8)}.rm-tuto__card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-16);transition:border-color var(--duration-fast) var(--ease-out)}.rm-tuto__card:hover{border-color:var(--color-violet-pale)}.rm-tuto__card--off{opacity:.72}.rm-tuto__row{align-items:flex-start;display:flex;gap:var(--space-12)}.rm-tuto__icon{align-items:center;background:var(--bg-hover);border-radius:var(--radius-lg);color:var(--color-secondary);display:flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.rm-tuto__body{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}.rm-tuto__line{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-6)}.rm-tuto__name{color:var(--text-primary);font-size:var(--font-13);font-weight:var(--weight-semibold)}.rm-tuto__tag{background:var(--bg-surface-3);border-radius:var(--radius-pill);color:var(--text-muted);font-size:var(--font-10);padding:1px var(--space-6)}.rm-tuto__done{align-items:center;color:var(--color-success);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-semibold);gap:3px}.rm-tuto__summary{color:var(--text-secondary);font-size:var(--font-12);line-height:1.5}.rm-tuto__meta{color:var(--text-muted);font-size:var(--font-11);font-variant-numeric:tabular-nums}.rm-tuto__reason{color:var(--text-muted);font-size:var(--font-11);line-height:1.5;padding-left:48px}
+</style>

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

@@ -0,0 +1,45 @@
+/**
+ * Types des visites guidees et de leur catalogue.
+ *
+ * Ils vivent ici plutot que dans les composants parce que le paquet n'expose
+ * que `utils/*` : une app qui ecrit ses tutoriels doit pouvoir les typer sans
+ * importer un `.vue`. Meme raison que pour `utils/alerts.ts`.
+ */
+/** Une etape de visite : ce qu'on montre, et ce qu'on en dit. */
+export interface RmTourStep {
+    /** Titre de l'etape, lu en tete de la bulle. */
+    title: string;
+    /** Texte de l'etape. `**gras**` est reconnu, rien d'autre. */
+    text: string;
+    /** Points de detail, sous le texte. */
+    bullets?: string[];
+    /**
+     * Selecteur CSS de la cible. Sans lui, l'etape est centree et rien n'est
+     * detoure : c'est la forme des etapes d'introduction et de conclusion.
+     */
+    target?: string;
+    /** Cote ou poser la bulle. Par defaut, le premier cote qui a la place. */
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    /** Marge entre le cadre de la cible et son detourage, en pixels. */
+    padding?: number;
+}
+/** Une visite, telle que le panneau « Tutoriels » la presente. */
+export interface RmTutorial {
+    id: string;
+    title: string;
+    /** Ce que la visite apprend, en une phrase. */
+    summary: string;
+    /** Icone Phosphor, nom PascalCase (cf. RmIcon). */
+    icon?: string;
+    /** Nombre d'etapes, annonce avant de partir. */
+    steps: number;
+    /** Duree estimee, en minutes. */
+    minutes?: number;
+    /** Rubrique, en pastille : « Vues », « Alertes »... */
+    tag?: string;
+    /**
+     * Raison pour laquelle la visite ne peut pas partir d'ici. Presente, elle
+     * desactive le bouton et s'ecrit sous la carte.
+     */
+    disabledReason?: string;
+}

package/package.json

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