@tekkare/romulus 0.1.242 → 0.1.244

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.241",
+  "version": "0.1.243",
   "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/alertBrandSync.vue

@@ -0,0 +1,143 @@
+<!--
+  Demande posee quand une vue surveillee par une alerte de marque change de
+  produits.
+
+  Le composant ne rend rien tant que `useAlertBrandSync` n'a rien a demander :
+  il est monte dans les layouts a cote de la snack bar, parce que la question
+  nait de deux endroits (le panneau « Mes vues » et la pastille de vue de la
+  barre de filtres) et qu'il n'y a pas de raison d'en avoir deux copies.
+-->
+<script setup lang="ts">
+const { locale } = useI18n();
+const sync = useAlertBrandSync();
+
+const fr = computed(() => locale.value !== "en");
+
+/**
+ * Les marques ajoutees et retirees, plutot que les deux listes entieres.
+ *
+ * C'est la difference qui decide, et une vue de trente produits rendait la
+ * question illisible des qu'on montrait les listes cote a cote.
+ */
+const added = computed(() => {
+  const current = new Set(sync.pending.value?.current ?? []);
+  return (sync.pending.value?.brands ?? []).filter((brand) => !current.has(brand));
+});
+
+const removed = computed(() => {
+  const next = new Set(sync.pending.value?.brands ?? []);
+  return (sync.pending.value?.current ?? []).filter((brand) => !next.has(brand));
+});
+
+/** Au-dela, la liste ne s'enumere plus : elle se compte. */
+const NAMES = 5;
+
+function summarize(list: string[]): string {
+  if (list.length <= NAMES) return list.join(", ");
+  const rest = list.length - NAMES;
+  return `${list.slice(0, NAMES).join(", ")} ${fr.value ? `et ${rest} autre${rest > 1 ? "s" : ""}` : `and ${rest} more`}`;
+}
+
+const title = computed(() =>
+  fr.value ? "Mettre l’alerte à jour ?" : "Update the alert?",
+);
+</script>
+
+<template>
+  <RmModal
+    :model-value="!!sync.pending.value"
+    mode="free"
+    size="sm"
+    :label="title"
+    @update:model-value="sync.dismiss()"
+  >
+    <template #header>{{ title }}</template>
+
+    <div v-if="sync.pending.value" class="abs_body">
+      <p class="abs_lead">
+        {{
+          fr
+            ? `Cette vue est surveillée par « ${sync.pending.value.alert.title} », qui suit encore les produits d’avant.`
+            : `This view is watched by “${sync.pending.value.alert.title}”, still following the previous products.`
+        }}
+      </p>
+
+      <ul class="abs_changes">
+        <li v-if="added.length">
+          <strong>{{ fr ? "Ajoutées" : "Added" }}</strong> : {{ summarize(added) }}
+        </li>
+        <li v-if="removed.length">
+          <strong>{{ fr ? "Retirées" : "Removed" }}</strong> : {{ summarize(removed) }}
+        </li>
+      </ul>
+
+      <!-- Dit d'avance ce que « Mettre à jour » coûte : l'alerte repart d'une
+           référence neuve, donc elle ne rapportera rien de ce qui a bougé
+           entre-temps. Le découvrir après coup passerait pour une panne. -->
+      <p class="abs_note">
+        {{
+          fr
+            ? "L’alerte repart d’une nouvelle référence : elle ne signalera que ce qui bouge à partir de maintenant."
+            : "The alert starts from a fresh baseline: it will only report what moves from now on."
+        }}
+      </p>
+
+      <div class="abs_actions">
+        <RmButton variant="ghost" size="sm" @click="sync.dismiss()">
+          {{ fr ? "Laisser telle quelle" : "Leave it as is" }}
+        </RmButton>
+        <RmButton
+          variant="primary"
+          size="sm"
+          :disabled="sync.syncing.value"
+          @click="sync.confirm()"
+        >
+          {{ fr ? "Mettre à jour" : "Update" }}
+        </RmButton>
+      </div>
+    </div>
+  </RmModal>
+</template>
+
+<style scoped>
+.abs_body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.abs_lead {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.abs_changes {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--bg-surface-3);
+  list-style: none;
+}
+
+.abs_changes li {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.abs_note {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.abs_actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+</style>