// components.jsx — UI primitives & sections const PAGE_CONFIG = JSON.parse(document.getElementById('page-config').textContent); const t = (text) => PAGE_CONFIG.translations?.[text] ?? text; const localize = (value) => { if (typeof value === "string") return t(value); if (Array.isArray(value)) return value.map(localize); if (value && typeof value === "object") return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, localize(item)])); return value; }; const useReveal = () => { React.useEffect(() => { const els = document.querySelectorAll(".reveal"); if (!("IntersectionObserver" in window)) { els.forEach((el) => el.classList.add("is-visible")); return; } const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("is-visible"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); }; // ===== Nav ===== function Nav({ theme, onToggleTheme }) { const { userEmail, isAdmin, loginUrl, dashboardUrl, adminUrl, signOutUrl } = PAGE_CONFIG; return (
Nomia MCP
{PAGE_CONFIG.language === "en" ? "FR" : "EN"} {userEmail ? ( <> {t("Mon tableau de bord")} {isAdmin && {t("Administration")}}
) : ( <> {t("Se connecter")} {t("Connecter à mon IA")} )}
); } // ===== Animated terminal (typing demo) ===== function HeroTerminal() { const SEQUENCES = React.useMemo(() => ([ { label: "expert_search", lines: [ { t: "comment", text: "// Claude appelle l'outil expert_search via MCP" }, { t: "prompt", text: "→ tools/call expert_search" }, { t: "json", text: '{ "query": "DN = 32016R0679", "language": "fr" }' }, { t: "wait", ms: 600, text: "… requête EUR-Lex …" }, { t: "ok", text: "✓ 200 OK · 1 résultat" }, { t: "out", text: '{\n "ok": true,\n "data": {\n "query": "DN = 32016R0679",\n "total": 1, "page": 1,\n "results": [{\n "celex": "32016R0679",\n "title": "Règlement (UE) 2016/679 du\n Parlement européen et du Conseil\n du 27 avril 2016 relatif à la\n protection des personnes physiques\n (règlement général sur la\n protection des données)",\n "url": "https://eur-lex.europa.eu/..."\n }]\n },\n "error": null\n}' }, ] }, { label: "get_legal_text", lines: [ { t: "comment", text: "// Récupération de l'article 6 du RGPD" }, { t: "prompt", text: "→ tools/call get_legal_text" }, { t: "json", text: '{ "celex": "32016R0679", "scope": "article", "article": "6" }' }, { t: "wait", ms: 600, text: "… récupération du texte …" }, { t: "ok", text: "✓ 200 OK · article 6" }, { t: "out", text: '{\n "ok": true,\n "data": {\n "celex": "32016R0679",\n "scope": "article",\n "article": {\n "id": "art_6",\n "heading": "Article 6",\n "title": "Licéité du traitement",\n "text": "1. Le traitement n\'est licite\n que si au moins une des\n conditions suivantes est remplie:\n a) la personne concernée a\n consenti au traitement;\n b) le traitement est nécessaire\n à l\'exécution d\'un contrat;\n ..."\n }\n },\n "error": null\n}' }, ] }, { label: "get_document_toc", lines: [ { t: "comment", text: "// Table des matières du DSA (32022R2065)" }, { t: "prompt", text: "→ tools/call get_document_toc" }, { t: "json", text: '{ "celex": "32022R2065", "language": "fr" }' }, { t: "wait", ms: 500, text: "… extraction TOC …" }, { t: "ok", text: "✓ 200 OK · 93 articles · 5 chapitres" }, { t: "out", text: '{\n "ok": true,\n "data": {\n "celex": "32022R2065",\n "toc": [\n { "label": "CHAPITRE I",\n "title": "DISPOSITIONS GÉNÉRALES" },\n { "label": "CHAPITRE II",\n "title": "RESPONSABILITÉ DES FOURNISSEURS" },\n { "label": "CHAPITRE III",\n "title": "OBLIGATIONS DE DILIGENCE" },\n { "label": "CHAPITRE IV",\n "title": "MISE EN ŒUVRE, COOPÉRATION" },\n { "label": "CHAPITRE V",\n "title": "DISPOSITIONS FINALES" }\n ]\n },\n "error": null\n}' }, ] } ]), []); const [tab, setTab] = React.useState(0); const [printed, setPrinted] = React.useState([]); const [typing, setTyping] = React.useState(""); React.useEffect(() => { let cancelled = false; setPrinted([]); setTyping(""); const seq = SEQUENCES[tab].lines.map((line) => ["comment", "wait", "ok"].includes(line.t) ? { ...line, text: t(line.text) } : line); async function run() { for (let i = 0; i < seq.length; i++) { if (cancelled) return; const line = seq[i]; if (line.t === "wait") { setPrinted((p) => [...p, line]); await new Promise((r) => setTimeout(r, line.ms)); continue; } const txt = line.text; for (let c = 0; c <= txt.length; c++) { if (cancelled) return; setTyping(txt.slice(0, c)); await new Promise((r) => setTimeout(r, 6 + Math.random() * 8)); } setPrinted((p) => [...p, line]); setTyping(""); await new Promise((r) => setTimeout(r, line.t === "out" ? 1400 : 240)); } await new Promise((r) => setTimeout(r, 2200)); if (!cancelled) setTab((t) => (t + 1) % SEQUENCES.length); } run(); return () => { cancelled = true; }; }, [tab, SEQUENCES]); const renderLine = (line, key) => { if (line.t === "comment") return {line.text}; if (line.t === "prompt") return {line.text}; if (line.t === "json") return {line.text}; if (line.t === "wait") return {line.text}; if (line.t === "ok") return {line.text}; if (line.t === "out") return {line.text}; return null; }; const live = (() => { const seq = SEQUENCES[tab].lines; const next = seq[printed.length]; if (!next || next.t === "wait") return null; const cls = next.t === "comment" ? "tok-comment" : next.t === "prompt" ? "tok-prompt" : next.t === "json" ? "tok-str" : next.t === "ok" ? "tok-ok" : next.t === "out" ? "tok-key" : ""; return {typing}; })(); return (
claude · mcp · nomia
{SEQUENCES.map((s, i) => ( ))}
{printed.map((l, i) => renderLine(l, i))} {live}
); } // ===== Hero ===== function Hero() { const { domain, loginUrl } = PAGE_CONFIG; return (
{t("Disponible ·")} {domain}

{t("La législation")} {t("européenne")},
{t("intégrée à votre IA.")}

{t("Nomia MCP branche Claude — et tout client compatible Model Context Protocol — directement sur la base de données juridiques EUR-Lex. Recherche experte, articles, considérants, table des matières : sans copier-coller, sans hallucination de référence.")}

); } // ===== Tools ===== function ToolsSection() { const [active, setActive] = React.useState(0); const tool = localize(window.TOOLS[active]); const formatJson = (v) => typeof v === "string" ? v : JSON.stringify(v, null, 2); return (
{t("01 — Outils")}

{t("Six outils pour retrouver le droit à la source.")}

{t("Chaque outil renvoie un payload stable")} {"{ ok, data, error }"}. {t("Tous sont")} read-only {t("— annotés")} readOnlyHint: true, destructiveHint: false. {t("Claude ne peut rien modifier sur EUR-Lex.")}

{localize(window.TOOLS).map((t, i) => ( ))}

{tool.name}()

read-only {"JSON · { ok, data, error }"}

{tool.description}

{t("Paramètres")}
{tool.args.map((a) => (
{a.name} · {a.type} {a.desc}
))}
{tool.name} — {t("exemple")}
{t("// requête")} {tool.sample.input} {"\n"} {t("// réponse")} {formatJson(tool.sample.output)}
); } // ===== How it works ===== function HowItWorks() { const guideRef = React.useRef(null); React.useEffect(() => { let mounted = true; let dispose; import("/static/installation-guide.js").then(({ activateInstallationGuide }) => { if (mounted) dispose = activateInstallationGuide(guideRef.current?.querySelector("[data-installation-guide]")); }).catch(() => { // The rendered instructions and documentation links remain available. }); return () => { mounted = false; dispose?.(); }; }, []); return (
{t("02 — Mise en route")}

{t("Connectez votre assistant, sans clé API.")}

{t("Choisissez votre outil et sa version pour afficher la marche à suivre. L’autorisation se fait avec votre compte Google ; Nomia consulte les sources en lecture seule.")}

); } // ===== Use cases ===== function UseCases() { return (
{t("03 — Cas d'usage")}

{t("Pour les juristes qui veulent du texte exact, pas un résumé approximatif.")}

{t("Nomia MCP s'adresse aux avocats, fiscalistes, juristes d'entreprise et chercheurs qui travaillent sur le droit européen au quotidien — et qui ne peuvent pas se permettre une référence inventée.")}

{localize(window.USE_CASES).map((c, i) => (
{c.tag}

{c.title}

{c.body}

{c.prompt}
))}
); } // ===== Footer ===== function Footer() { return ( ); } Object.assign(window, { Nav, Hero, ToolsSection, HowItWorks, UseCases, Footer, useReveal, HeroTerminal });