@tekkare/romulus 0.1.242 → 0.1.243

package/dist/module.json

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

package/layer/app/components/AppUpdateToast.vue

@@ -0,0 +1,157 @@
+<!-- "A new version is available" prompt.
+     Nuxt's own check-outdated-build plugin polls /_nuxt/builds/latest.json and
+     fires `app:manifest:update` when the deployed build id stops matching the
+     one this tab booted with. Nuxt then hard-reloads on the next route change —
+     silently, and possibly mid-task. This toast surfaces that instead, so the
+     user reloads when it suits them; the built-in reload stays as the fallback. -->
+<template>
+  <Transition name="update-toast">
+    <div v-if="visible" class="update-toast" role="status" aria-live="polite">
+      <span class="update-toast-mark" aria-hidden="true">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+          <path d="M21 3v6h-6" />
+        </svg>
+      </span>
+      <div class="update-toast-body">
+        <p class="update-toast-title">
+          {{ locale === "en" ? "A new version is available" : "Une nouvelle version est disponible" }}
+        </p>
+        <p class="update-toast-text">
+          {{ locale === "en" ? "Reload to get the latest updates." : "Rechargez la page pour profiter des dernières mises à jour." }}
+        </p>
+        <div class="update-toast-actions">
+          <button type="button" class="update-toast-reload" @click="reload">
+            {{ locale === "en" ? "Reload" : "Recharger" }}
+          </button>
+          <button type="button" class="update-toast-later" @click="visible = false">
+            {{ locale === "en" ? "Later" : "Plus tard" }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+const nuxtApp = useNuxtApp();
+// Textes bilingues par ternaire, comme les autres panneaux du cadre.
+const { locale } = useI18n();
+
+const visible = ref(false);
+
+// Only ever fires client-side, so the server render and the hydrating render
+// both agree on `false`.
+const unhook = nuxtApp.hook('app:manifest:update', () => {
+  visible.value = true;
+});
+onUnmounted(() => unhook());
+
+// force: true — reloadNuxtApp otherwise no-ops when the same path was already
+// reloaded in the last 10s (its sessionStorage guard), which would leave the
+// button dead. The path carries the query so filters survive the reload, and
+// persistState stays false: the point is to boot the new build clean.
+const reload = () =>
+  reloadNuxtApp({
+    path: window.location.pathname + window.location.search,
+    persistState: false,
+    force: true,
+  });
+</script>
+
+<style scoped>
+.update-toast {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 70;
+  display: flex;
+  gap: 11px;
+  max-width: 340px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  border: 1px solid #dbdef0;
+  background: var(--bg-surface);
+  box-shadow: 0 10px 30px rgba(30, 41, 59, 0.13);
+}
+
+.update-toast-body {
+  min-width: 0;
+}
+
+.update-toast-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: #1e293b;
+}
+
+.update-toast-text {
+  margin-top: 2px;
+  font-size: 12px;
+  color: #878ca6;
+}
+
+.update-toast-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.update-toast-mark {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 9999px;
+  color: var(--primary, #2017ad);
+  background: color-mix(in srgb, var(--primary, #2017ad) 9%, transparent);
+}
+
+.update-toast-reload,
+.update-toast-later {
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 7px;
+  padding: 6px 12px;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.update-toast-reload {
+  color: #ffffff;
+  background: var(--primary, #2017ad);
+}
+
+.update-toast-reload:hover {
+  filter: brightness(0.9);
+}
+
+.update-toast-later {
+  color: #878ca6;
+}
+
+.update-toast-later:hover {
+  color: #475569;
+  background: var(--bg-surface-3);
+}
+
+.update-toast-enter-active,
+.update-toast-leave-active {
+  transition: opacity 0.22s ease, transform 0.22s ease;
+}
+
+.update-toast-enter-from,
+.update-toast-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .update-toast-enter-active,
+  .update-toast-leave-active {
+    transition: none;
+  }
+}
+</style>

package/layer/app/components/OipShell.vue

@@ -29,6 +29,7 @@ import {
 import OipPanelDocuments from "./panels/OipPanelDocuments.vue";
 import OipPanelMetadata from "./panels/OipPanelMetadata.vue";
 import OipPanelNotes from "./panels/OipPanelNotes.vue";
+import OipPanelProjects from "./panels/OipPanelProjects.vue";
 import OipPanelSources from "./panels/OipPanelSources.vue";
 import OipPanelSourceTables from "./panels/OipPanelSourceTables.vue";
 import OipPanelTopics from "./panels/OipPanelTopics.vue";
@@ -42,6 +43,7 @@ const LAYER_PANELS: Partial<Record<OipRailTileKey, Component>> = {
   Documents: OipPanelDocuments,
   Metadata: OipPanelMetadata,
   Notes: OipPanelNotes,
+  Projects: OipPanelProjects,
   Sources: OipPanelSources,
   SourcesTables: OipPanelSourceTables,
   Topics: OipPanelTopics,

package/layer/app/components/auth/SplitLayout.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="auth-split">
+    <!-- Left brand panel (generic OIP Healthcare — reusable across apps) -->
+    <aside class="brand-panel">
+      <div class="blob b1"></div>
+      <div class="blob b2"></div>
+      <div class="blob b3"></div>
+
+      <div class="brand-logo">
+        <img src="https://rcd-media.com/skills/Tekkare_Baseline_White.svg" alt="Tekkare" />
+      </div>
+
+      <div class="brand-copy">
+        <span class="brand-eyebrow">OIP Healthcare<sup>®</sup></span>
+        <h1 v-if="fr">Des données de santé, <em>enfin exploitables</em>.</h1>
+        <h1 v-else>Health data, <em>finally usable</em>.</h1>
+        <p>{{ fr ? "Une vue à 360 degrés des systèmes de santé dans le monde, construite entièrement sur des données ouvertes officielles." : "A 360 degree view of health systems worldwide, built entirely on official open data." }}</p>
+        <div class="brand-points">
+          <div class="brand-point"><i class="ph ph-database"></i> {{ fr ? "Données ouvertes officielles, normalisées et prêtes à l'emploi" : "Official open data, normalized and ready to use" }}</div>
+          <div class="brand-point"><i class="ph ph-squares-four"></i> {{ fr ? "Des applications spécialisées dans chaque domaine de la santé" : "Specialized apps across every health domain" }}</div>
+          <div class="brand-point"><i class="ph ph-shield-check"></i> {{ fr ? "Uniquement des données ouvertes, conformes au RGPD par conception" : "Open data only, GDPR compliant by design" }}</div>
+        </div>
+      </div>
+
+      <div class="brand-foot">
+        <strong>TEKKARE®</strong><br />
+        Inspired by Healthcare
+      </div>
+    </aside>
+
+    <!-- Right form panel — host app drops its content here -->
+    <main class="form-panel">
+      <div class="form-panel-inner">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { locale } = useI18n();
+const fr = computed(() => locale.value === "fr");
+</script>
+
+<style scoped>
+.auth-split {
+  --tkr-primary: var(--primary);
+  --tkr-secondary: #b485ff;
+  --tkr-darkest: #1e293b;
+  --tkr-dark: #525670;
+  --tkr-medium: #878ca6;
+  --tkr-light: #dbdef0;
+  --tkr-lightest: #f5f5f9;
+  --tkr-bg: #f9f9fa;
+  --tkr-grad: linear-gradient(135deg, #4dccf7 0%, #a06bf5 50%, #ff5cf0 100%);
+  --tkr-grad-btn: linear-gradient(135deg, var(--primary), var(--primary-hover));
+  --tkr-error: #e53535;
+
+  display: grid;
+  grid-template-columns: 1.05fr 1fr;
+  min-height: 100vh;
+  color: var(--tkr-darkest);
+  font-family: "Figtree", "Avenir", Arial, sans-serif;
+}
+
+/* ── Brand panel ── */
+.brand-panel {
+  position: relative;
+  background: #16115c;
+  color: #fff;
+  padding: 56px 64px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.brand-panel .blob {
+  position: absolute;
+  z-index: 0;
+  border-radius: 50%;
+  filter: blur(66px);
+  will-change: transform;
+}
+
+.brand-panel .blob.b1 {
+  width: 420px;
+  height: 420px;
+  background: #4dccf7;
+  top: -120px;
+  right: -80px;
+  opacity: 0.46;
+  animation: brandDrift 30s ease-in-out infinite;
+}
+
+.brand-panel .blob.b2 {
+  width: 360px;
+  height: 360px;
+  background: #a06bf5;
+  bottom: -100px;
+  left: -60px;
+  opacity: 0.45;
+  animation: brandDrift 34s ease-in-out infinite;
+  animation-delay: -11s;
+}
+
+.brand-panel .blob.b3 {
+  width: 300px;
+  height: 300px;
+  background: #ff5cf0;
+  top: 38%;
+  right: 18%;
+  opacity: 0.3;
+  animation: brandDrift 38s ease-in-out infinite;
+  animation-delay: -22s;
+}
+
+@keyframes brandDrift {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(-26px, 32px);
+  }
+}
+
+.brand-panel > *:not(.blob) {
+  position: relative;
+  z-index: 1;
+}
+
+.brand-logo img {
+  height: 34px;
+}
+
+.brand-copy {
+  max-width: 440px;
+}
+
+.brand-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  margin-bottom: 26px;
+  backdrop-filter: blur(4px);
+}
+
+.brand-eyebrow sup {
+  font-size: 0.7em;
+  vertical-align: super;
+  line-height: 0;
+  margin-left: 1px;
+}
+
+.brand-copy h1 {
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 1.16;
+  margin: 0 0 18px;
+}
+
+.brand-copy h1 em {
+  font-family: "Caudex", Georgia, serif;
+  font-weight: 700;
+  font-style: normal;
+  background: var(--tkr-grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.brand-copy p {
+  font-size: 15px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0;
+}
+
+.brand-points {
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+  margin-top: 32px;
+}
+
+.brand-point {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.brand-point i {
+  font-size: 18px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.brand-foot {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1.6;
+}
+
+/* ── Form panel (host content via slot) ── */
+.form-panel {
+  display: flex;
+  padding: 48px 32px;
+  background: var(--tkr-bg);
+  overflow-y: auto;
+}
+
+.form-panel-inner {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.brand-panel *:focus-visible {
+  outline: 2px solid var(--tkr-secondary);
+  outline-offset: 2px;
+}
+
+/* ── Responsive ── */
+@media (max-width: 880px) {
+  .auth-split {
+    grid-template-columns: 1fr;
+  }
+
+  .brand-panel {
+    display: none;
+  }
+
+  .form-panel {
+    padding: 40px 24px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .brand-panel .blob {
+    animation: none;
+  }
+}
+</style>

package/layer/app/components/layout/firstVisitVideo.vue

@@ -0,0 +1,165 @@
+<template>
+  <aside v-if="visible && video?.src" class="first-visit-video" aria-label="Tutoriel vidéo">
+    <div class="first-visit-video__head">
+      <div class="first-visit-video__heading">
+        <RmIcon name="PlayCircle" :size="18" />
+        <strong>{{ lang === "en" ? "Getting started" : "Bien démarrer" }}</strong>
+      </div>
+      <button
+        type="button"
+        class="first-visit-video__close"
+        :aria-label="lang === 'en' ? 'Close' : 'Fermer'"
+        @click="dismiss"
+      >
+        <RmIcon name="X" :size="16" />
+      </button>
+    </div>
+
+    <video
+      class="first-visit-video__player"
+      :src="video.src"
+      autoplay
+      controls
+      muted
+      playsinline
+      preload="metadata"
+    ></video>
+
+    <div class="first-visit-video__footer">
+      <span>{{ video.title }}</span>
+      <button type="button" class="first-visit-video__dismiss" @click="dismiss">
+        {{ lang === "en" ? "Got it" : "J’ai compris" }}
+      </button>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+interface TutorialVideo {
+  id: number;
+  title: string;
+  description: string;
+  src: string;
+}
+
+const props = defineProps<{
+  video: TutorialVideo | null;
+  lang: "fr" | "en";
+}>();
+
+const STORAGE_KEY = "oip-first-visit-video-seen";
+const visible = ref(false);
+
+function hasSeenVideo() {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function dismiss() {
+  visible.value = false;
+  try {
+    localStorage.setItem(STORAGE_KEY, "1");
+  } catch {
+    // Le navigateur peut refuser le stockage, la fenêtre reste fermée pour la session.
+  }
+}
+
+watch(
+  () => props.video?.src,
+  (src) => {
+    if (src && !hasSeenVideo()) visible.value = true;
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.first-visit-video {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 1100;
+  width: min(460px, calc(100vw - 32px));
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl);
+  background: var(--bg-surface);
+  box-shadow: 0 18px 48px rgb(15 23 42 / 24%);
+}
+
+.first-visit-video__head,
+.first-visit-video__footer {
+  align-items: center;
+  display: flex;
+  gap: var(--space-8);
+  justify-content: space-between;
+  padding: var(--space-12) var(--space-16);
+}
+
+.first-visit-video__head {
+  color: var(--color-secondary);
+}
+
+.first-visit-video__heading {
+  align-items: center;
+  display: flex;
+  gap: var(--space-8);
+}
+
+.first-visit-video__close {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-4);
+}
+
+.first-visit-video__close:hover {
+  color: var(--text-primary);
+}
+
+.first-visit-video__player {
+  background: var(--bg-surface-3);
+  display: block;
+  max-height: 290px;
+  width: 100%;
+}
+
+.first-visit-video__footer {
+  color: var(--text-secondary);
+  font-size: var(--font-12);
+}
+
+.first-visit-video__footer > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.first-visit-video__dismiss {
+  background: transparent;
+  border: 0;
+  color: var(--color-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  font: inherit;
+  font-weight: var(--weight-semibold);
+}
+
+.first-visit-video__dismiss:hover {
+  color: var(--color-primary);
+}
+
+@media (max-width: 600px) {
+  .first-visit-video {
+    bottom: 16px;
+    right: 16px;
+  }
+}
+</style>

package/layer/app/components/panels/OipPanelProjects.vue

@@ -0,0 +1,94 @@
+<!--
+  Panneau « Projets » du rail, servi par le layer OIP (tuile Projects) :
+  RmProjectPanel.
+
+  Ou partent mes ajouts : le projet actif s'y designe, et un projet cree ici
+  devient l'actif sans quitter la page. Renommer et supprimer restent sur la
+  page du projet.
+
+  Les projets vivent dans la Virtual Lab API, que chaque app interroge avec
+  son propre client : l'app passe la liste et les gestes par
+  `panelProps.Projects` (cf. les props ci-dessous), et son bouton de creation
+  assistee par `newButton` (un composant qui emet `free` pour ouvrir le
+  formulaire simple).
+-->
+<template>
+  <RmProjectPanel
+    :projects="projects"
+    :active-id="activeId"
+    :active-count="activeCount"
+    :loading="loading"
+    :failed="failed"
+    :creating="creating"
+    :all-to="allTo"
+    :lang="locale === 'en' ? 'en' : 'fr'"
+    @activate="emit('activate', $event)"
+    @open="emit('open', $event)"
+    @pin="emit('pin', $event)"
+    @create="onCreate"
+  >
+    <template v-if="newButton" #new="{ openForm }">
+      <component :is="newButton" size="sm" @free="openForm" />
+    </template>
+  </RmProjectPanel>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue";
+import type { RmProject } from "@tekkare/romulus/utils/projects";
+
+const props = withDefaults(
+  defineProps<{
+    appKey?: string;
+    superAdmin?: boolean;
+    projects?: RmProject[];
+    activeId?: string | null;
+    /** Elements du projet actif. */
+    activeCount?: number;
+    loading?: boolean;
+    failed?: boolean;
+    /** Lien « Tous mes projets ». Vide : pas de lien. */
+    allTo?: string;
+    /**
+     * Cree un projet a partir d'un nom ; le panneau attend la fin pour
+     * rendre la main. L'app decide si le projet cree devient l'actif.
+     */
+    create?: (title: string) => Promise<unknown>;
+    /** Bouton de creation de l'app (assistant), qui emet `free`. */
+    newButton?: Component | null;
+  }>(),
+  {
+    projects: () => [],
+    activeId: null,
+    activeCount: 0,
+    loading: false,
+    failed: false,
+    allTo: "",
+    create: undefined,
+    newButton: null,
+  },
+);
+
+const emit = defineEmits<{
+  activate: [projectId: string];
+  open: [projectId: string];
+  pin: [projectId: string];
+  /** Au montage : l'app restaure le projet actif et charge la liste. */
+  mounted: [];
+}>();
+
+const { locale } = useI18n();
+const creating = ref(false);
+
+async function onCreate(title: string) {
+  if (!props.create) return;
+  creating.value = true;
+  try {
+    await props.create(title);
+  } finally {
+    creating.value = false;
+  }
+}
+
+onMounted(() => emit("mounted"));
+</script>

package/layer/app/composables/useViewEditing.ts

@@ -0,0 +1,11 @@
+/**
+ * Mode modification du panneau « Mes vues », demande depuis la pastille de vue.
+ *
+ * `null` : le panneau montre ses listes. `{ id }` : il montre le formulaire de
+ * la vue `id` ; `{ id: null }` en fait une creation (vue temporaire, ou recue
+ * d'un collegue et donc en lecture seule). La pastille et le panneau ne se
+ * connaissent pas, l'etat passe par ici.
+ */
+export function useViewEditing() {
+  return useState<{ id: string | null } | null>("oip-view-editing", () => null);
+}