discovery-media-player 0.1.0

package/server/shares.js

@@ -0,0 +1,275 @@
+// GED commerciale : liens de partage tracés (un par destinataire) + agrégation des consultations.
+// Tables service-role only (cf. migration v12321) → tout passe par le service role ici.
+const crypto = require("crypto");
+// Tout ce qui vient de l'hôte passe par le contexte injecté — base, email, marque. C'est ce qui
+// permettra à ce fichier de partir dans le dépôt du player sans emporter le studio avec lui.
+// ⚠️ Le contexte est REÇU, pas construit. Ce module ne doit pas savoir d'où il vient : c'est ce
+// qui lui permettra de partir dans le dépôt du player sans emporter le studio avec lui.
+let PLAYER = null;
+function init(ctx) { PLAYER = ctx; }
+
+
+const enc = encodeURIComponent;
+const low = (s) => String(s || "").trim().toLowerCase();
+function newSlug() { return crypto.randomBytes(9).toString("base64url"); } // ~12 chars URL-safe
+
+// Crée un lien de partage (un par destinataire). Dénormalise titre/URL/nom pour résilience (le doc vit dans
+// un snapshot). Renvoie le slug.
+async function createShare({ docId, docTitle, fileUrl, fileName, recipientEmail, recipientName, createdBy, bot, botScript, guided, profileId, allowDownload, isTest, videoLayout, logo, logoDark, brandKey}) {
+  if (!docId || !fileUrl) throw Object.assign(new Error("doc invalide"), { statusCode: 400 });
+  const slug = newSlug();
+  const row = {
+    slug, doc_id: String(docId), doc_title: docTitle || null, file_url: String(fileUrl), file_name: fileName || null,
+    recipient_email: low(recipientEmail) || null, recipient_name: (recipientName || "").trim() || null, created_by: low(createdBy) || null,
+    bot_enabled: !!bot, bot_script: (botScript || "").trim() ? String(botScript).slice(0, 2000) : null, bot_guided: guided !== false,
+    bot_profile_id: (profileId || "").trim() ? String(profileId).slice(0, 40) : null,
+    allow_download: allowDownload !== false, // défaut : autorisé (rétro-compatible)
+    video_layout: ["side-r", "side-l", "split-m"].includes(videoLayout) ? videoLayout : null, // présentateur vidéo « en grand »
+    is_test: !!isTest, // « répétition générale » : lien de test exclu des stats/notifications
+    // Logo de marque (promoteur) du loader — null = logo 3D Discovery global.
+    // Référence de marque (registre) : préférée au logo recopié — un logo rectifié se propage
+    // alors aux liens DÉJÀ ENVOYÉS. Le logo direct reste accepté (flux des propositions).
+    brand_key: (brandKey || "").trim() || null,
+    brand_logo: (logo || "").trim() ? String(logo).trim().slice(0, 500) : null,
+    brand_dark: !!logoDark, // fond sombre du loader (logo clair/blanc)
+  };
+  await PLAYER.db.request("commercial_doc_shares", { method: "POST", headers: { Prefer: "return=minimal" }, body: [row] });
+  return { slug };
+}
+
+// Re-partage depuis la visionneuse publique (forward) : crée un lien ENFANT tracé pour un nouveau
+// destinataire, rattaché au lien parent (parent_slug) → chaîne de diffusion. created_by = celui qui forwarde.
+async function createReshare(parentSlug, { email, name }) {
+  const parent = await getShareBySlug(parentSlug);
+  if (!parent) throw Object.assign(new Error("lien introuvable"), { statusCode: 404 });
+  const slug = newSlug();
+  const row = {
+    slug, doc_id: parent.doc_id, doc_title: parent.doc_title, file_url: parent.file_url, file_name: parent.file_name,
+    recipient_email: low(email) || null, recipient_name: (name || "").trim() || null,
+    created_by: parent.recipient_email || parent.created_by || null, parent_slug: parent.slug,
+  };
+  await PLAYER.db.request("commercial_doc_shares", { method: "POST", headers: { Prefer: "return=minimal" }, body: [row] });
+  return { slug, docTitle: parent.doc_title };
+}
+
+async function getShareBySlug(slug) {
+  const rows = await PLAYER.db.request(`commercial_doc_shares?slug=eq.${enc(String(slug || ""))}&revoked=eq.false&select=*&limit=1`);
+  return Array.isArray(rows) && rows[0] ? rows[0] : null;
+}
+
+// Journalise un événement de consultation (ouverture / page vue / battement). Best-effort.
+async function logView(share, { event, page, maxPage, seconds, sessionId, ua }) {
+  const num = (v) => (Number.isFinite(+v) ? Math.trunc(+v) : null);
+  const row = {
+    slug: share.slug, doc_id: share.doc_id, recipient_email: share.recipient_email,
+    event: String(event || "open").slice(0, 16), page: num(page), max_page: num(maxPage), seconds: num(seconds),
+    session_id: String(sessionId || "").slice(0, 64) || null, ua: String(ua || "").slice(0, 300) || null,
+  };
+  await PLAYER.db.request("commercial_doc_views", { method: "POST", headers: { Prefer: "return=minimal" }, body: [row] });
+}
+
+// Liste des liens d'un document + stats par lien + agrégat global. Agrégation en mémoire (volume modéré).
+/**
+ * Liens d'un document.
+ *
+ * `owner` restreint la liste aux liens créés par cette personne. C'est ce qui permet à un hôte de
+ * distinguer « lister MES liens » (acte commercial ordinaire) de « lister tous les liens » (acte
+ * d'administration) : sans restriction, un commercial verrait à qui d'autre le document a été
+ * envoyé — donc les prospects de ses collègues.
+ */
+async function listSharesForDoc(docId, owner) {
+  const id = enc(String(docId || ""));
+  const filtreOwner = owner ? `&created_by=eq.${enc(low(owner))}` : "";
+  const [shares, views] = await Promise.all([
+    PLAYER.db.request(`commercial_doc_shares?doc_id=eq.${id}&is_test=not.is.true${filtreOwner}&select=*&order=created_at.desc`),
+    PLAYER.db.selectAll(`commercial_doc_views?doc_id=eq.${id}&select=slug,event,page,max_page,seconds,session_id,at&order=at.asc`),
+  ]);
+  const shareList = Array.isArray(shares) ? shares : [];
+  const viewList = Array.isArray(views) ? views : [];
+  const bySlug = {};
+  for (const v of viewList) {
+    const s = (bySlug[v.slug] = bySlug[v.slug] || { opens: 0, maxPage: 0, seconds: 0, sessions: new Set(), lastAt: null });
+    if (v.event === "open") s.opens++;
+    const mp = Math.max(Number(v.page) || 0, Number(v.max_page) || 0);
+    if (mp > s.maxPage) s.maxPage = mp;
+    s.seconds = Math.max(s.seconds, Number(v.seconds) || 0);
+    if (v.session_id) s.sessions.add(v.session_id);
+    s.lastAt = v.at;
+  }
+  const enriched = shareList.map((sh) => {
+    const a = bySlug[sh.slug] || { opens: 0, maxPage: 0, seconds: 0, sessions: new Set(), lastAt: null };
+    return { slug: sh.slug, parent_slug: sh.parent_slug || null, recipient_email: sh.recipient_email, recipient_name: sh.recipient_name, created_by: sh.created_by, created_at: sh.created_at, revoked: sh.revoked, opens: a.opens, sessions: a.sessions.size, maxPage: a.maxPage, seconds: a.seconds, lastAt: a.lastAt };
+  });
+  // Entonnoir de lecture : page max atteinte PAR SESSION → combien de lecteurs ont atteint AU MOINS la page p.
+  const sessMax = {};
+  for (const v of viewList) {
+    const sid = v.session_id || v.slug;
+    const mp = Math.max(Number(v.page) || 0, Number(v.max_page) || 0);
+    if (mp > 0) sessMax[sid] = Math.max(sessMax[sid] || 0, mp);
+  }
+  const reached = Object.values(sessMax);
+  const maxReached = reached.reduce((m, x) => Math.max(m, x), 0);
+  const funnel = [];
+  for (let p = 1; p <= maxReached; p++) funnel.push(reached.filter((x) => x >= p).length);
+
+  const total = {
+    shares: shareList.length,
+    opened: enriched.filter((x) => x.opens > 0).length,
+    opens: enriched.reduce((s, x) => s + x.opens, 0),
+    maxPage: enriched.reduce((m, x) => Math.max(m, x.maxPage), 0),
+    readers: reached.length, // sessions distinctes ayant tourné au moins une page
+  };
+  return { shares: enriched, total, funnel };
+}
+
+// Vue d'ensemble (tous documents) : stats agrégées par doc_id, pour les badges de la grille + le « top ».
+// Sépare bien les OUVERTURES CLIENT (liens tracés = commercial_doc_views) des CONSULTATIONS INTERNES
+// (équipe 3D Discovery = commercial_doc_internal_sessions) → la liste peut afficher « vu par l'équipe »
+// vs « ouvert par le client » sans mélanger la métrique commerciale.
+async function overview() {
+  // Borne glissante généreuse (24 mois) : ces tables d'événements grossissent sans fin ; sans filtre, le
+  // scan intégral se dégrade avec le temps. 24 mois couvre tout l'historique utile pour la vue d'ensemble
+  // (opens / lecteurs / dernière activité) sans changer les chiffres actuels. Filtre servi par l'index sur `at`.
+  const since = new Date(Date.now() - 24 * 30 * 24 * 60 * 60 * 1000).toISOString();
+  const [views, internal] = await Promise.all([
+    // PAGINÉ : au-delà de 1 000 lignes, PostgREST tronquait en silence — et comme le tri
+    // est ascendant, c'est le RÉCENT qui disparaissait. Les consultations des trois dernières
+    // semaines étaient invisibles du tableau de bord (0 ouverture affichée sur des plans lus).
+    PLAYER.db.selectAll(`commercial_doc_views?select=doc_id,event,session_id,page,max_page,at&at=gte.${since}&order=at.asc`),
+    PLAYER.db.selectAll(`commercial_doc_internal_sessions?select=doc_id,user_email,last_at&last_at=gte.${since}&order=last_at.asc`).catch(() => []),
+  ]);
+  const list = Array.isArray(views) ? views : [];
+  const byDoc = {};
+  for (const v of list) {
+    const id = v.doc_id || "";
+    if (!id) continue;
+    const a = (byDoc[id] = byDoc[id] || { opens: 0, readers: new Set(), maxPage: 0, lastAt: null });
+    if (v.event === "open") a.opens++;
+    if (v.session_id) a.readers.add(v.session_id);
+    a.maxPage = Math.max(a.maxPage, Number(v.page) || 0, Number(v.max_page) || 0);
+    a.lastAt = v.at;
+  }
+  const intByDoc = {};
+  for (const s of Array.isArray(internal) ? internal : []) {
+    const id = s.doc_id || "";
+    if (!id) continue;
+    const b = (intByDoc[id] = intByDoc[id] || { opens: 0, users: new Set(), lastAt: null });
+    b.opens++;
+    if (s.user_email) b.users.add(String(s.user_email).toLowerCase());
+    b.lastAt = s.last_at;
+  }
+  const out = {};
+  for (const id of new Set([...Object.keys(byDoc), ...Object.keys(intByDoc)])) {
+    const a = byDoc[id] || { opens: 0, readers: new Set(), maxPage: 0, lastAt: null };
+    const b = intByDoc[id] || { opens: 0, users: new Set(), lastAt: null };
+    out[id] = { opens: a.opens, readers: a.readers.size, maxPage: a.maxPage, lastAt: a.lastAt, internalOpens: b.opens, internalReaders: b.users.size, internalLastAt: b.lastAt };
+  }
+  return out;
+}
+
+// Parse minimal d'un User-Agent → appareil / OS / navigateur (sans dépendance).
+function parseUa(ua) {
+  const s = String(ua || "");
+  let device = /Mobile|iPhone|Android.*Mobile/.test(s) ? "Mobile" : /iPad|Tablet/.test(s) ? "Tablette" : "Ordinateur";
+  let os = /Windows/.test(s) ? "Windows" : /iPhone|iPad|iOS/.test(s) ? "iOS" : /Mac OS X|Macintosh/.test(s) ? "macOS" : /Android/.test(s) ? "Android" : /Linux/.test(s) ? "Linux" : "—";
+  let browser = /Edg\//.test(s) ? "Edge" : /OPR\/|Opera/.test(s) ? "Opera" : /Chrome\//.test(s) ? "Chrome" : /Firefox\//.test(s) ? "Firefox" : /Safari\//.test(s) ? "Safari" : "—";
+  return { device, os, browser };
+}
+
+// Upsert d'une session de consultation (résumé envoyé périodiquement par la visionneuse). Stocke le temps
+// PAR page (cumulatif côté client → on remplace), totaux, appareil. Conserve started_at (insert) via merge.
+async function upsertSession(share, p, { ip, ua }) {
+  const num = (v) => (Number.isFinite(+v) ? Math.trunc(+v) : null);
+  const sessionId = String(p.sessionId || "").slice(0, 64);
+  if (!sessionId) return;
+  const pagesTime = (p.pagesTime && typeof p.pagesTime === "object") ? p.pagesTime : {};
+  const { device, os, browser } = parseUa(ua);
+  const row = {
+    session_id: sessionId, slug: share.slug, doc_id: share.doc_id, recipient_email: share.recipient_email,
+    num_pages: num(p.numPages), max_page: num(p.maxPage), total_seconds: num(p.totalSeconds) || 0, pages_time: pagesTime,
+    ua: String(ua || "").slice(0, 300), ip: String(ip || "").slice(0, 60), device, os, browser, last_at: new Date().toISOString(),
+  };
+  // started_at non touché par l'upsert (default à l'insert ; merge ne l'écrase pas car absent du body).
+  await PLAYER.db.request("commercial_doc_sessions?on_conflict=session_id", { method: "POST", headers: { Prefer: "resolution=merge-duplicates,return=minimal" }, body: [row] });
+}
+
+// Sessions de consultation d'un document (détail riche par session) + nom du destinataire (jointure share).
+async function listSessionsForDoc(docId) {
+  const id = enc(String(docId || ""));
+  const [sessions, shares] = await Promise.all([
+    PLAYER.db.request(`commercial_doc_sessions?doc_id=eq.${id}&select=*&order=last_at.desc&limit=500`),
+    PLAYER.db.request(`commercial_doc_shares?doc_id=eq.${id}&is_test=not.is.true&select=slug,recipient_email,recipient_name`),
+  ]);
+  const nameBySlug = {};
+  for (const sh of (Array.isArray(shares) ? shares : [])) nameBySlug[sh.slug] = sh.recipient_name || null;
+  return (Array.isArray(sessions) ? sessions : []).map((s) => ({ ...s, recipient_name: nameBySlug[s.slug] || null }));
+}
+
+// Envoi AUTO du re-partage via 3D Discovery (Resend). Contenu 100% templé (pas de texte libre → anti-spam),
+// attribué au recommandeur (destinataire du lien parent), reply-to vers lui. Best-effort.
+async function sendReshareEmail({ parent, childSlug, origin, toEmail, toName }) {
+  const e = (s) => String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  const url = `${origin.replace(/\/$/, "")}/doc/${childSlug}`;
+  const forwarder = parent.recipient_name || parent.recipient_email || "Un contact 3D Discovery";
+  const title = parent.doc_title || parent.file_name || "Document";
+  let logoUrl = ""; try { logoUrl = await PLAYER.branding.logo(); } catch { /* sans logo */ }
+  const hello = toName && toName.trim() ? `Bonjour ${e(toName.trim())},` : "Bonjour,";
+  const html = `<div style="font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;max-width:520px;margin:0 auto;color:#1c1c1c">
+    ${logoUrl ? `<div style="text-align:center;padding:8px 0 18px"><img src="${e(logoUrl)}" alt="3D Discovery" style="height:34px"></div>` : `<div style="text-align:center;font-weight:800;font-size:18px;padding:8px 0 18px">3D Discovery</div>`}
+    <p style="font-size:15px">${hello}</p>
+    <p style="font-size:15px"><b>${e(forwarder)}</b> vous recommande ce document&nbsp;:</p>
+    <div style="border:1px solid #e7e3db;border-radius:12px;padding:16px 18px;margin:14px 0">
+      <div style="font-weight:700;font-size:16px;margin-bottom:12px">${e(title)}</div>
+      <a href="${e(url)}" style="display:inline-block;background:#111;color:#fff;text-decoration:none;font-weight:600;padding:11px 18px;border-radius:9px">Ouvrir le document</a>
+    </div>
+    <p style="font-size:13px;color:#777">Vous pouvez répondre directement à cet email pour échanger avec ${e(forwarder)}.</p>
+    <p style="font-size:11px;color:#999;margin-top:22px">Propulsé par 3D Discovery — visualisation 3D &amp; visites immersives.</p>
+  </div>`;
+  return PLAYER.mail.send({ to: toEmail, subject: `${forwarder} vous recommande : ${title}`, html, replyTo: parent.recipient_email || undefined });
+}
+
+async function revokeShare(slug) {
+  await PLAYER.db.request(`commercial_doc_shares?slug=eq.${enc(String(slug || ""))}`, { method: "PATCH", headers: { Prefer: "return=minimal" }, body: { revoked: true } });
+}
+
+// Soft wall : (dé)verrouille l'accès d'un lien /doc — require_auth=true → connexion visiteur exigée.
+async function setShareAuth(slug, requireAuth) {
+  await PLAYER.db.request(`commercial_doc_shares?slug=eq.${enc(String(slug || ""))}`, { method: "PATCH", headers: { Prefer: "return=minimal" }, body: { require_auth: !!requireAuth } });
+  return { ok: true };
+}
+
+// — Consultations INTERNES (équipe), table dédiée → n'affecte PAS les stats prospects. —
+// Upsert d'une session interne (depuis l'aperçu interne de la visionneuse).
+async function upsertInternalSession(p, { ip, ua }) {
+  const num = (v) => (Number.isFinite(+v) ? Math.trunc(+v) : null);
+  const sessionId = String(p.sessionId || "").slice(0, 64);
+  if (!sessionId || !p.docId) return;
+  const { device, os, browser } = parseUa(ua);
+  const row = {
+    session_id: sessionId, doc_id: String(p.docId), user_email: low(p.userEmail) || null, user_name: (p.userName || "").trim() || null,
+    num_pages: num(p.numPages), max_page: num(p.maxPage), total_seconds: num(p.totalSeconds) || 0,
+    pages_time: (p.pagesTime && typeof p.pagesTime === "object") ? p.pagesTime : {},
+    ua: String(ua || "").slice(0, 300), ip: String(ip || "").slice(0, 60), device, os, browser, last_at: new Date().toISOString(),
+  };
+  await PLAYER.db.request("commercial_doc_internal_sessions?on_conflict=session_id", { method: "POST", headers: { Prefer: "resolution=merge-duplicates,return=minimal" }, body: [row] });
+}
+
+// Agrégat interne d'un document : nb de consultations (sessions), lecteurs distincts, détail par membre.
+async function internalStatsForDoc(docId) {
+  const rows = await PLAYER.db.request(`commercial_doc_internal_sessions?doc_id=eq.${enc(String(docId || ""))}&select=user_email,user_name,max_page,total_seconds,last_at&order=last_at.desc&limit=500`);
+  const list = Array.isArray(rows) ? rows : [];
+  const byUser = {};
+  for (const r of list) {
+    const k = low(r.user_email) || (r.user_name || "?");
+    const u = (byUser[k] = byUser[k] || { email: r.user_email || null, name: r.user_name || null, opens: 0, maxPage: 0, seconds: 0, lastAt: null });
+    u.opens++;
+    u.maxPage = Math.max(u.maxPage, Number(r.max_page) || 0);
+    u.seconds += Number(r.total_seconds) || 0;
+    if (!u.lastAt || r.last_at > u.lastAt) u.lastAt = r.last_at;
+    if (!u.name && r.user_name) u.name = r.user_name;
+  }
+  const users = Object.values(byUser).sort((a, b) => (b.lastAt || "").localeCompare(a.lastAt || ""));
+  return { opens: list.length, readers: users.length, lastAt: list[0]?.last_at || null, users };
+}
+
+module.exports = { init, createShare, createReshare, sendReshareEmail, getShareBySlug, logView, upsertSession, listSharesForDoc, listSessionsForDoc, revokeShare, setShareAuth, overview, upsertInternalSession, internalStatsForDoc };

package/src/__tests__/bridge.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi } from "vitest";
+import {
+  toWire,
+  parsePlayerMessage,
+  parseHostMessage,
+  sendToHost,
+  sendToPlayer,
+  onPlayerMessage,
+  type PlayerMessage,
+} from "../bridge";
+
+describe("bridge — format sur le fil", () => {
+  it("préfixe le type et ne transporte le slug que s'il existe", () => {
+    expect(toWire({ type: "close" })).toEqual({ type: "3dd-doc-close" });
+    expect(toWire({ type: "present-invite", slug: "aZ9_-xyz" })).toEqual({
+      type: "3dd-doc-present-invite",
+      slug: "aZ9_-xyz",
+    });
+  });
+
+  // Le fil doit rester compatible avec les onglets déjà ouverts : renommer ces chaînes est un
+  // changement de contrat, pas un détail cosmétique.
+  it("conserve les noms historiques attendus par l'app déployée", () => {
+    const wire = (["close", "share", "present-left", "embed-ready"] as const).map(
+      (type) => toWire({ type } as PlayerMessage).type,
+    );
+    expect(wire).toEqual([
+      "3dd-doc-close",
+      "3dd-doc-share",
+      "3dd-doc-present-left",
+      "3dd-doc-embed-ready",
+    ]);
+  });
+
+  it("fait l'aller-retour sans perte", () => {
+    const msg: PlayerMessage = { type: "present-switch", slug: "abc123" };
+    expect(parsePlayerMessage(toWire(msg))).toEqual(msg);
+  });
+});
+
+describe("bridge — lecture défensive", () => {
+  it("ignore ce qui n'est pas un message du player", () => {
+    for (const junk of [null, undefined, 0, "close", [], {}, { type: 42 }, { type: "close" }]) {
+      expect(parsePlayerMessage(junk)).toBeNull();
+    }
+  });
+
+  it("ignore un type inconnu, même correctement préfixé", () => {
+    expect(parsePlayerMessage({ type: "3dd-doc-drop-database" })).toBeNull();
+  });
+
+  // Le slug traverse la frontière puis sert de clé d'API : on le borne ici, une fois.
+  it("rejette un slug absent, vide, trop long ou hors charset", () => {
+    const bad = ["", "a".repeat(65), "abc/../def", "abc def", "<script>", "abc?x=1"];
+    for (const slug of bad) {
+      expect(parsePlayerMessage({ type: "3dd-doc-present-invite", slug })).toBeNull();
+    }
+    expect(parsePlayerMessage({ type: "3dd-doc-present-invite" })).toBeNull();
+    expect(parsePlayerMessage({ type: "3dd-doc-present-invite", slug: 12 })).toBeNull();
+  });
+
+  it("accepte le format réel des slugs (base64url, 12 caractères)", () => {
+    expect(parsePlayerMessage({ type: "3dd-doc-present-invite", slug: "Ab3-_xYz9012" })).toEqual({
+      type: "present-invite",
+      slug: "Ab3-_xYz9012",
+    });
+  });
+
+  it("ne confond pas les deux sens de circulation", () => {
+    expect(parseHostMessage({ type: "3dd-doc-close" })).toBeNull();
+    expect(parsePlayerMessage({ type: "3dd-doc-handover-done" })).toBeNull();
+    expect(parseHostMessage({ type: "3dd-doc-handover-done" })).toEqual({ type: "handover-done" });
+  });
+});
+
+describe("bridge — runtime", () => {
+  it("poste au parent et n'explose pas si le parent est injoignable", () => {
+    const postMessage = vi.fn();
+    sendToHost({ type: "close" }, { postMessage } as unknown as Window);
+    expect(postMessage).toHaveBeenCalledWith({ type: "3dd-doc-close" }, "*");
+
+    const dead = { get contentWindow(): never { throw new Error("détruite"); } };
+    expect(() => sendToPlayer(dead as unknown as HTMLIFrameElement, { type: "handover-done" })).not.toThrow();
+  });
+
+  it("s'abonne, filtre le bruit, et se désabonne", () => {
+    const listeners: Array<(e: MessageEvent) => void> = [];
+    const win = {
+      addEventListener: (_: string, h: (e: MessageEvent) => void) => listeners.push(h),
+      removeEventListener: (_: string, h: (e: MessageEvent) => void) => {
+        const i = listeners.indexOf(h);
+        if (i >= 0) listeners.splice(i, 1);
+      },
+    } as unknown as Window;
+
+    const seen: PlayerMessage[] = [];
+    const off = onPlayerMessage((m) => seen.push(m), win);
+    const fire = (data: unknown) => listeners.forEach((h) => h({ data } as MessageEvent));
+
+    fire({ type: "3dd-doc-share" });
+    fire({ type: "un-autre-widget", payload: "bruit" });
+    expect(seen).toEqual([{ type: "share" }]);
+
+    off();
+    fire({ type: "3dd-doc-close" });
+    expect(seen).toHaveLength(1);
+  });
+});

package/src/__tests__/chat.test.ts

@@ -0,0 +1,138 @@
+// @vitest-environment jsdom
+//
+// Harnais DOM. Le rendu des messages produit une CHAÎNE : on peut donc l'inspecter à l'œil nu.
+// Mais la seule question qui compte n'est pas « que contient la chaîne », c'est « qu'en fait le
+// navigateur ». Un `&lt;script&gt;` dans le texte est inoffensif ; un `<script>` créé dans l'arbre
+// ne l'est pas. On insère donc pour de vrai et on interroge le DOM obtenu.
+import { describe, it, expect, beforeEach } from "vitest";
+import { renderMessage, renderReactions, renderAttachment, renderActions, messageClassName, type ChatMessageFull } from "../chat";
+
+const ME = { email: "moi@b.fr", name: "Moi" };
+const AUTRE = { author_email: "autre@b.fr", author_name: "Léa" };
+
+/** Insère le fragment comme le fait la visionneuse, et rend l'élément réel. */
+function mount(html: string): HTMLElement {
+  const host = document.createElement("div");
+  host.innerHTML = html;
+  document.body.appendChild(host);
+  return host;
+}
+
+beforeEach(() => { document.body.innerHTML = ""; });
+
+describe("chat — ce que le navigateur fabrique vraiment", () => {
+  it("un corps hostile ne crée aucun élément exécutable", () => {
+    const msg: ChatMessageFull = { ...AUTRE, body: '<img src=x onerror="alert(1)"><script>alert(2)</script>' };
+    const el = mount(renderMessage(msg, { me: ME }));
+
+    expect(el.querySelectorAll("script")).toHaveLength(0);
+    expect(el.querySelectorAll("img[onerror]")).toHaveLength(0);
+    expect(el.querySelector("[onerror]")).toBeNull();
+    // Le texte, lui, doit rester lisible — on neutralise, on ne supprime pas.
+    expect(el.textContent).toContain("onerror");
+  });
+
+  it("un NOM d'auteur hostile ne s'échappe pas de son élément", () => {
+    const el = mount(renderMessage({ author_name: '</b><script>alert(1)</script><b>' } as ChatMessageFull, { me: ME }));
+    expect(el.querySelectorAll("script")).toHaveLength(0);
+    expect(el.querySelector(".who b")?.textContent).toContain("<script>");
+  });
+
+  it("une CITATION hostile est neutralisée elle aussi", () => {
+    const el = mount(renderMessage(
+      { ...AUTRE, reply_to: 1, reply_name: '<img src=x onerror=1>', reply_text: '"><script>alert(1)</script>' } as ChatMessageFull,
+      { me: ME },
+    ));
+    expect(el.querySelectorAll("script, img[onerror]")).toHaveLength(0);
+  });
+
+  it("une PIÈCE JOINTE hostile ne peut ni casser l'attribut ni injecter un attribut", () => {
+    const el = mount(renderAttachment({ kind: "image", url: 'x" onerror="alert(1)' }));
+    const img = el.querySelector("img");
+    expect(img?.getAttribute("onerror")).toBeNull();
+    expect(img?.getAttribute("src")).toBe('x" onerror="alert(1)');
+
+    const pdf = mount(renderAttachment({ kind: "pdf", url: "https://ok.fr/a.pdf", name: '<script>x</script>' }));
+    expect(pdf.querySelectorAll("script")).toHaveLength(0);
+    expect(pdf.querySelector(".cm-pdflabel")?.textContent).toBe("<script>x</script>");
+  });
+
+  it("un EMOJI de réaction hostile est neutralisé", () => {
+    const el = mount(renderReactions({ reactions: { '"><script>alert(1)</script>': ["a@b.fr"] } } as ChatMessageFull, ME));
+    expect(el.querySelectorAll("script")).toHaveLength(0);
+    expect(el.querySelector(".re-chip")).not.toBeNull();
+  });
+
+  it("les liens sortants ne fuitent pas le référent et ne prennent pas la main sur l'onglet", () => {
+    const el = mount(renderMessage({ ...AUTRE, body: "voir https://exemple.fr/a" }, { me: ME }));
+    const link = el.querySelector("a.cm-link") as HTMLAnchorElement;
+    expect(link.getAttribute("href")).toBe("https://exemple.fr/a");
+    expect(link.getAttribute("rel")).toBe("noreferrer");
+    expect(link.getAttribute("target")).toBe("_blank");
+  });
+
+  it("un lien à schéma dangereux n'est jamais fabriqué", () => {
+    for (const hostile of ["javascript:alert(1)", "data:text/html,<b>x</b>"]) {
+      const el = mount(renderMessage({ ...AUTRE, body: hostile }, { me: ME }));
+      expect(el.querySelectorAll("a.cm-link"), hostile).toHaveLength(0);
+    }
+  });
+});
+
+describe("chat — contenu et droits", () => {
+  it("affiche l'auteur, son texte, sa mention de modification", () => {
+    const el = mount(renderMessage({ ...AUTRE, body: "bonjour", edited: true }, { me: ME }));
+    expect(el.querySelector(".who b")?.textContent).toBe("Léa");
+    expect(el.querySelector(".txt")?.textContent).toContain("bonjour");
+    expect(el.querySelector(".cm-ed")?.textContent).toContain("modifié");
+  });
+
+  it("le badge présentateur n'apparaît que s'il vient du serveur", () => {
+    expect(mount(renderMessage({ ...AUTRE, is_presenter: true }, { me: ME })).querySelector(".tag")).not.toBeNull();
+    expect(mount(renderMessage({ ...AUTRE }, { me: ME })).querySelector(".tag")).toBeNull();
+  });
+
+  // Un message supprimé est supprimé, pas masqué : rien de son contenu ne doit rester dans l'arbre.
+  it("un message supprimé ne laisse filtrer ni corps, ni citation, ni pièce jointe", () => {
+    const el = mount(renderMessage(
+      { ...AUTRE, deleted: true, body: "secret", reply_text: "secret aussi", attachment: { kind: "image", url: "https://x/y.png" } } as ChatMessageFull,
+      { me: ME },
+    ));
+    expect(el.textContent).toBe("Message supprimé");
+    expect(el.querySelector("img")).toBeNull();
+    expect(el.innerHTML).not.toContain("secret");
+  });
+
+  it("« Modifier » n'existe que sur mes messages", () => {
+    const mien = mount(renderActions({ author_email: "moi@b.fr" } as ChatMessageFull, { me: ME }));
+    const autre = mount(renderActions(AUTRE as ChatMessageFull, { me: ME }));
+    expect(mien.querySelector(".cm-edit")).not.toBeNull();
+    expect(autre.querySelector(".cm-edit")).toBeNull();
+  });
+
+  it("« Supprimer » existe sur les miens, et sur tous pour le présentateur", () => {
+    const q = (html: string) => mount(html).querySelector(".cm-del-btn");
+    expect(q(renderActions(AUTRE as ChatMessageFull, { me: ME }))).toBeNull();
+    expect(q(renderActions({ author_email: "moi@b.fr" } as ChatMessageFull, { me: ME }))).not.toBeNull();
+    expect(q(renderActions(AUTRE as ChatMessageFull, { me: { ...ME, role: "presenter" } }))).not.toBeNull();
+  });
+
+  it("marque mes réactions comme miennes", () => {
+    const el = mount(renderReactions({ reactions: { "👍": ["moi@b.fr", "x@y.fr"], "🎉": ["x@y.fr"] } } as ChatMessageFull, ME));
+    const chips = [...el.querySelectorAll(".re-chip")];
+    expect(chips).toHaveLength(2);
+    expect(chips[0].classList.contains("on")).toBe(true);
+    expect(chips[0].textContent).toBe("👍 2");
+    expect(chips[1].classList.contains("on")).toBe(false);
+  });
+
+  it("ignore une réaction sans réacteur", () => {
+    expect(renderReactions({ reactions: { "👍": [] } } as ChatMessageFull, ME)).toBe("");
+    expect(renderReactions(null, ME)).toBe("");
+  });
+
+  it("dérive les classes d'état du conteneur", () => {
+    expect(messageClassName({ author_email: "moi@b.fr" } as ChatMessageFull, ME, false)).toBe("cm me");
+    expect(messageClassName({ ...AUTRE, deleted: true } as ChatMessageFull, ME, true)).toBe("cm isdel mentioned");
+  });
+});