✦ {L(RUI.insightsH, locale)}

{ setText(e.target.value); setSaved(false); }} />
      <div className="rs-insight-foot">
        {saved
          ? <span className="rs-insight-saved">{L(RUI.insightSaved, locale)}</span>
          : <button className="btn" disabled={!canSave} style={{ opacity: canSave ? 1 : 0.4 }} onClick={save}>{L(RUI.insightSave, locale)}</button>}
      </div>
      {(activationLocked || saveError) && <div className="acc-lock-note">🔒 {saveError || (locale === "ru" ? "Инсайты откроются после активации." : "Insights unlock after activation.")}</div>}
    </div>
  );
}

window.Research = Research;
// FOUNDATIONS-SHARE+INSIGHT (30.06): expose reader sub-components so Foundations (which
// loads before this file but renders after) can reuse the exact same share / insight /
// media blocks — единая структура на всех страницах.
window.ShareRow = ShareRow;
window.InsightField = InsightField;
window.MediaColumn = MediaColumn;

// ════════════════════════════════════════════════════════════════════
// White Paper course (F2) — special multi-section theme inside Research.
// Index: 52 modules as a numbered list. Reader: 6 sections per module
// (RU intro · EN original · translation · interpretation · 2026 status · question).
// ════════════════════════════════════════════════════════════════════
function WhitePaper({ t, locale, wp, onAtlas, onBack, authReady, authRevision }) {
  const [idx, setIdx] = useState_r(null);   // open module index, or null = list
  const eco = wp.ecosystem || {};

// B2: WhitePaper is a paid section (week 1 = free teaser). Bodies come from the
  // backend, which decides access. The catalog also falls back to the backend list
  // once Directus locks public read on lum_whitepaper (loaded wp.modules empty).
  const wpApi = (typeof window !== "undefined") ? window.LUMINARA_API : null;
  const wpDemo = (typeof window !== "undefined" && window.LUMINARA_DEMO !== false);
  const loadedModules = wp.modules || [];
  const [remoteWeeks, setRemoteWeeks] = useState_r(null);
  const modules = loadedModules.length ? loadedModules : (remoteWeeks || []);

useEffect_r(() => {
    if (loadedModules.length || wpDemo || !wpApi || !wpApi.content) return;
    let alive = true;
    wpApi.content.weeks()
      .then(r => { if (alive && r) setRemoteWeeks((r.weeks || []).map(w => ({ ...w, __meta: true }))); })
      .catch(() => {});
    return () => { alive = false; };
  }, [loadedModules.length]);

// ── module reader ──
  if (idx !== null && modules[idx]) {
    const m = (gate && gate.week) ? gate.week : modules[idx];
    const wpLocked = !!(gate && gate.locked);
    const wpLoading = !!(gate && gate.loading);
    const wpError = !!(gate && gate.error);
    const api = wpApi;
    const demo = wpDemo;
    const Prose = window.SceneProse;
    const prose = (text) => (Prose ? <Prose text={text} /> : <p className="rs-wp-sec-body">{text}</p>);
    // Section card: mono header + body. variant "en" keeps the original verbatim (no
    // markdown, bold mono "стих"); other variants go through SceneProse (markdown).
    const Sec = (key, label, text, variant) => {
      const body = (text || "").trim();
      if (!body) return null;
      return (
        <section className={"rs-wp-sec" + (variant ? " " + variant : "")} key={key}>
          <div className="rs-wp-sec-h">{label}</div>
          {variant === "en"
            ? <p className="rs-wp-sec-body">{body}</p>
            : <div className="rs-wp-sec-body">{prose(body)}</div>}
        </section>
      );
    };

// RICH (weekly, parts[]) vs LEGACY (flat 6-field / inline) — decided by parts[].
    const parts = Array.isArray(m.parts) ? m.parts : [];
    const isRich = parts.length > 0;
    const ctx = L(m.context2026, locale);
    const q = L(m.question, locale);
    const sources = Array.isArray(m.sources) ? m.sources : [];
    const sourceModel = (typeof window !== "undefined" && window.LuminaraSources) || null;
    const hasMediaSources = sourceModel ? sourceModel.usableSources(sources).length > 0 : sources.length > 0;
    const links = Array.isArray(m.atlas_links) ? m.atlas_links : [];
    const moveWeek = (next) => {
      setIdx(Math.max(0, Math.min(modules.length - 1, next)));
      // C2: in-place update, focus only, no outer-document scroll (see foundations moveScene).
      requestAnimationFrame(() => requestAnimationFrame(() => {
        const el = document.querySelector('.rs-subview[data-c="whitepaper"] .rs-subhead');
        if (!el) return;
        if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
        try { const st = window.getComputedStyle(el); if (/(auto|scroll)/.test(st.overflowY)) el.scrollTop = 0; } catch (e) {}
        try { el.focus({ preventScroll: true }); } catch (e) {}
      }));
    };

// Atlas links as real navigation: week → jump to that module; topic → focus atlas.
    const goLink = (lk) => {
      if (!lk) return;
      if (lk.kind === "week") {
        const j = modules.findIndex(x => Number(x.n) === Number(lk.ref));
        if (j >= 0) moveWeek(j);
      } else if (lk.kind === "topic" && typeof onAtlas === "function") {
        onAtlas(lk.ref);
      }
    };

const legacy = (
      <div className="rs-wp-sections">
        {Sec("wpRu", L(RUI.wpRu, locale), L(m.ru, locale))}
        {Sec("wpEn", L(RUI.wpEn, locale), L(m.en, locale), "en")}
        {Sec("wpTr", L(RUI.wpTr, locale), L(m.translation, locale))}
        {Sec("wpIn", L(RUI.wpIn, locale), L(m.interpretation, locale))}
        {Sec("wpStatus", L(RUI.wpStatus, locale), L(m.status2026, locale))}
        {Sec("wpQ", L(RUI.wpQ, locale), q, "q")}
      </div>
    );

const rich = (
      <div className="rs-wp-sections">
        {ctx.trim() ? (
          <section className="rs-wp-sec ctx">
            <div className="rs-wp-sec-h">{L(RUI.wpContext, locale)}</div>
            <div className="rs-wp-sec-body">{prose(ctx)}</div>
          </section>
        ) : null}

{parts.map((p, pi) => {
          const head = L(p.heading, locale);
          return (
            <div className="rs-wp-part" key={"part" + pi}>
              {head.trim() ? <div className="rs-wp-part-h">{head}</div> : null}
              {Sec("en" + pi, L(RUI.wpEn, locale) + (p.section_ref ? " · " + p.section_ref : ""), p.original_en, "en")}
              {Sec("tr" + pi, L(RUI.wpTr, locale), L(p.translation, locale))}
              {Sec("in" + pi, L(RUI.wpIn, locale), L(p.interpretation, locale))}
              {Sec("view" + pi, L(RUI.wpView, locale), L(p.view2026, locale))}
            </div>
          );
        })}

{Sec("wpQ", L(RUI.wpQ, locale), q, "q")}

{links.length ? (
          <section className="rs-wp-sec links">
            <div className="rs-wp-sec-h">{L(RUI.wpLinks, locale)}</div>
            <div className="rs-wp-linklist">
              {links.map((lk, li) => (
                <button className="rs-wp-link" key={li} onClick={() => goLink(lk)}>→ {L(lk.label, locale) || lk.ref}</button>
              ))}
            </div>
          </section>
        ) : null}

{/* CONTENT-INSIGHT-WP: reader can leave their insight at the bottom of each week */}
        <InsightField topic={m.node_id || "whitepaper"} idx={m.n} locale={locale} api={api} demo={demo} />
      </div>
    );

const hasAny = isRich
      ? (ctx.trim() || q.trim() || parts.some(p =>
          (p.original_en || "").trim() || L(p.translation, locale).trim() ||
          L(p.interpretation, locale).trim() || L(p.view2026, locale).trim()) || hasMediaSources)
      : ([m.ru, m.en, m.translation, m.interpretation, m.status2026, m.question].some(v => L(v, locale).trim()) || hasMediaSources);

return (
      <div className="section-pad fade-in research rs-subview" data-c="whitepaper">
        <button className="eco-back" onClick={() => setIdx(null)}><span>←</span> {L(RUI.backCourse, locale)}</button>
        <div className="rs-subhead" data-c="whitepaper">
          <div className="rs-thead-eco">{titleTextR(eco.title, locale) || "White Paper"} · {RESEARCH_ECO.name}</div>
          <div className="rs-subhead-row">
            <span className="rs-sub-n big">{String(m.n).padStart(2, "0")}</span>
            <h2>{L(m.title, locale)}</h2>
          </div>
          {m.section ? <div className="rs-wp-section-ref">{m.section}</div> : null}
        </div>

<ResearchPager t={t} index={idx} total={modules.length}
                       onPrev={idx > 0 ? () => moveWeek(idx - 1) : null}
                       onNext={idx < modules.length - 1 ? () => moveWeek(idx + 1) : null}
                       placement="top" />

{wpLocked ? <Paywall locale={locale} />
          : wpError ? <GateError locale={locale} onRetry={retryGate} />
          : wpLoading ? <p className="rs-text-body rs-text-loading">…</p>
          : (!hasAny ? <div className="uni-empty">{L(RUI.wpEmpty, locale)}</div> : (
            <div className="rs-body-grid">
              {/* The White Paper uses the same media square as Foundations,
                  AI, Trading, TON and every other Research reader. */}
              {hasMediaSources ? (
                <aside className="rs-media">
                  <div className="rs-media-h">{L(RUI.media, locale)}</div>
                  <MediaColumn media={null} locale={locale} topicKey="whitepaper"
                    resetKey={"whitepaper:" + m.n} sources={sources} />
                </aside>
              ) : null}
              <div className="rs-text">{isRich ? rich : legacy}</div>
            </div>
          ))}

<ResearchPager t={t} index={idx} total={modules.length}
                       onPrev={idx > 0 ? () => moveWeek(idx - 1) : null}
                       onNext={idx < modules.length - 1 ? () => moveWeek(idx + 1) : null} />
      </div>
    );
  }

// ── module list ──
  const ready = (m) => {
    if (Array.isArray(m.parts) && m.parts.length &&
        m.parts.some(p => (p.original_en || "").trim() || L(p.interpretation, locale).trim())) return true;
    return [m.ru, m.en, m.translation, m.interpretation, m.status2026, m.question].some(v => L(v, locale).trim());
  };
  return (
    <div className="section-pad fade-in research" data-c="whitepaper">
      <button className="eco-back" onClick={onBack}><span>←</span> {L(RUI.backAll, locale)}</button>
      <div className="rs-thead" data-c="whitepaper">
        <div className="rs-thead-eco">{RESEARCH_ECO.name} · {L(RUI.special, locale)}</div>
        <span className="rs-chip">{L(RUI.course, locale)} · {modules.length} {L(RUI.modules, locale)}</span>
        <h2>{titleTextR(eco.title, locale) || "White Paper"}</h2>
        <p>{L(eco.blurb, locale)}</p>
      </div>
      <div className="rs-section-h">{modules.length} {L(RUI.modules, locale)} · {L(RUI.perWeek, locale)}</div>
      <div className="rs-sublist">
        {modules.map((m, i) => {
          const isMeta = !!m.__meta;
          const clickable = isMeta ? true : ready(m);
          const wkLocked = isMeta && m.locked;
          return (
            <button className={"rs-sub" + (clickable ? "" : " rs-sub-soon")} key={i}
                    data-c="whitepaper" onClick={() => setIdx(i)}>
              <span className="rs-sub-n">{String(m.n).padStart(2, "0")}</span>
              <span className="rs-sub-label">{L(m.title, locale)}</span>
              {wkLocked ? <span className="rs-sub-lock" aria-hidden="true">🔒</span>
                : clickable ? <span className="rs-sub-go">→</span>
                : <span className="rs-media-soon">{L(RUI.soon, locale)}</span>}
            </button>
          );
        })}
      </div>
    </div>
  );
}

window.WhitePaper = WhitePaper;

// ════════════════════════════════════════════════════════════════════
// «Моя вселенная» (My Universe) — B2
// A personal concept-map: nodes = themes the user has read; edges connect
// themes that SHARE a concept (a scene tag that appears in both). This is the
// "soul-bound is in both TON and ETH → linked into one map" idea: the same
// concept surfacing across blockchains stitches the user's themes together.
// Data: lesson_progress (read state) + EXTERNAL[topic].scenes[].tags.
// Rendering: self-contained SVG (no three.js dependency), radial layout.
// ════════════════════════════════════════════════════════════════════

const UUI = {
  title:    { en: "My Universe", ru: "Моя вселенная", uk: "Мій всесвіт", kk: "Менің әлемім", uz: "Mening olamim", es: "Mi universo", fr: "Mon univers", hy: "Իմ տիեզերքը" },
  sub:      { en: "Themes you've explored, linked by shared concepts.", ru: "Изученные темы, связанные общими концепциями.", uk: "Вивчені теми, поєднані спільними концепціями.", kk: "Ортақ тұжырымдамалармен байланысқан зерттелген тақырыптар.", uz: "Umumiy tushunchalar bilan bog'langan o'rganilgan mavzular.", es: "Los temas que has explorado, conectados por conceptos en común.", fr: "Les thèmes que tu as explorés, reliés par des concepts communs.", hy: "Թեմաները, որ ուսումնասիրել ես՝ կապված ընդհանուր հասկացություններով։" },
  empty:    { en: "Start reading — explored themes appear here and link up automatically.", ru: "Начните читать — изученные темы появятся здесь и свяжутся автоматически.", uk: "Почніть читати — вивчені теми з'являться тут і з'єднаються автоматично.", kk: "Оқуды бастаңыз — зерттелген тақырыптар осында пайда болып, автоматты түрде байланысады.", uz: "O'qishni boshlang — o'rganilgan mavzular shu yerda paydo bo'lib, avtomatik bog'lanadi.", es: "Empieza a leer: los temas explorados aparecen aquí y se conectan automáticamente.", fr: "Commence à lire — les thèmes explorés apparaissent ici et se relient automatiquement.", hy: "Սկսիր կարդալ՝ ուսումնասիրած թեմաները հայտնվում են այստեղ և ինքնաշխատ կապվում։" },
  themesN:  { en: "themes", ru: "тем", uk: "тем", kk: "тақырып", uz: "mavzu", es: "temas", fr: "thèmes", hy: "թեմա" },
  linksN:   { en: "links", ru: "связей", uk: "зв'язків", kk: "байланыс", uz: "bog'lanish", es: "enlaces", fr: "liens", hy: "կապ" },
  conceptsN:{ en: "concepts", ru: "концепций", uk: "концепцій", kk: "тұжырымдама", uz: "tushuncha", es: "conceptos", fr: "concepts", hy: "հասկացություն" },
  open:     { en: "Open My Universe", ru: "Открыть мою вселенную", uk: "Відкрити мій всесвіт", kk: "Менің әлемімді ашу", uz: "Mening olamimni ochish", es: "Abrir Mi universo", fr: "Ouvrir Mon univers", hy: "Բացել Իմ տիեզերքը" },
  back:     { en: "Back to account", ru: "Назад в кабинет", uk: "Назад до кабінету", kk: "Кабинетке қайту", uz: "Kabinetga qaytish", es: "Volver a la cuenta", fr: "Retour au compte", hy: "Վերադառնալ հաշվին" },
  shared:   { en: "Shared concepts", ru: "Общие концепции", uk: "Спільні концепції", kk: "Ортақ тұжырымдамалар", uz: "Umumiy tushunchalar", es: "Conceptos en común", fr: "Concepts communs", hy: "Ընդհանուր հասկացություններ" },
};

// Scene list for a topic: loaded data, else backend-sourced paid scenes (B2). Shared
// by buildUniverse (below), which lives outside Research and can't see its state.
function sceneListFor(id) {
  const D = window.LUMINARA_DATA || {};
  const ex = D.EXTERNAL || {};
  if (ex[id] && ex[id].scenes && ex[id].scenes.length) return ex[id].scenes;
  const rem = window.LUMINARA_REMOTE_SCENES || {};
  return rem[id] || [];
}

// Build the personal map from studied themes plus their direct canonical neighbours.
// Neighbour metadata is already public; lesson access remains enforced by the reader.
function buildUniverse(readSet, progressData) {
  const D = window.LUMINARA_DATA || {};
  const ecosystems = D.ECOSYSTEMS || [];
  const readTopics = new Set();
  readSet.forEach(key => { const tid = key.split(":")[0]; if (sceneListFor(tid).length) readTopics.add(tid); });
  Object.keys((progressData && progressData.byTopic) || {}).forEach((tid) => {
    if (sceneListFor(tid).length) readTopics.add(tid);
  });

// edges: two themes linked if they share >=1 concept (tag)
  const edges = [];
  const conceptSet = new Set();
  for (let i = 0; i < nodes.length; i++) {
    for (let j = i + 1; j < nodes.length; j++) {
      const shared = [...nodes[i].tags].filter(tg => nodes[j].tags.has(tg));
      if (shared.length) {
        edges.push({ a: nodes[i].id, b: nodes[j].id, shared, weight: shared.length });
        shared.forEach(c => conceptSet.add(c));
      }
    }
  }
  // Preserve canonical atlas links even when the two topics have no shared tag.
  const edgeKeys = new Set(edges.map(e => [e.a, e.b].sort().join("|")));
  (D.EDGES || []).forEach((edge) => {
    const a = Array.isArray(edge) ? edge[0] : edge && (edge.a || edge.from);
    const b = Array.isArray(edge) ? edge[1] : edge && (edge.b || edge.to);
    if (!included.has(a) || !included.has(b)) return;
    const key = [a, b].sort().join("|");
    if (!edgeKeys.has(key)) { edgeKeys.add(key); edges.push({ a, b, shared: [], weight: 1, canonical: true }); }
  });
  return { nodes, edges, concepts: [...conceptSet] };
}

function colorFor(id) {
  const map = { ton: "--c-ton", ton_new_internet: "--c-ton", ton_vs_eth: "--c-compare",
    wallet: "--c-wallet", miniapps: "--c-miniapps", payments: "--c-payments",
    communities: "--c-community", social_graph: "--c-telegram", gamefi: "--c-game",
    tokens: "--c-token", ethereum: "--c-eth", bitcoin: "--c-btc", rwa: "--c-rwa" };
  return `var(${map[id] || "--accent"})`;
}

// SVG radial graph. Nodes on a circle; edges drawn between them; hovering/clicking
// an edge reveals the shared concept(s).
function UniverseGraph({ data, locale, compact }) {
  const { nodes, edges } = data;
  const [sel, setSel] = useState_r(null); // selected edge index
  const W = compact ? 320 : 720, H = compact ? 260 : 520;
  const cx = W / 2, cy = H / 2;
  const R = Math.min(W, H) / 2 - (compact ? 46 : 90);
  const pos = {};
  nodes.forEach((n, i) => {
    const a = (i / Math.max(1, nodes.length)) * Math.PI * 2 - Math.PI / 2;
    pos[n.id] = { x: cx + Math.cos(a) * R, y: cy + Math.sin(a) * R };
  });
  const L2 = (o) => (o ? (o[locale] || o.en) : "");
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="uni-svg" style={{ width: "100%", height: "auto" }}>
      {/* edges */}
      {edges.map((e, i) => {
        const A = pos[e.a], B = pos[e.b];
        if (!A || !B) return null;
        const on = sel === i;
        return (
          <g key={i}>
            <line x1={A.x} y1={A.y} x2={B.x} y2={B.y}
                  stroke={on ? "var(--accent)" : "var(--line)"}
                  strokeWidth={on ? 2 : Math.min(3, 0.6 + e.weight * 0.5)}
                  strokeOpacity={on ? 1 : 0.5}
                  style={{ cursor: "pointer" }}
                  onClick={() => setSel(on ? null : i)} />
            {on && !compact && (
              <text x={(A.x + B.x) / 2} y={(A.y + B.y) / 2 - 6}
                    fill="var(--accent)" fontSize="11" textAnchor="middle"
                    fontFamily="var(--font-mono, monospace)">
                {e.shared.slice(0, 3).join(" · ")}
              </text>
            )}
          </g>
        );
      })}
      {/* nodes */}
      {nodes.map(n => {
        const P = pos[n.id];
        const r = compact ? 7 : 11;
        return (
          <g key={n.id}>
            <circle cx={P.x} cy={P.y} r={r} fill={colorFor(n.id)}
                    stroke="var(--bg)" strokeWidth="2" />
            <text x={P.x} y={P.y + r + (compact ? 11 : 14)} fill="var(--text-dim)"
                  fontSize={compact ? 9 : 11} textAnchor="middle">
              {(typeof n.title === "string" ? n.title : L2(n.title)).split(" · ")[0]}
            </text>
          </g>
        );
      })}
      {nodes.length === 0 && (
        <text x={cx} y={cy} fill="var(--text-muted)" fontSize="12" textAnchor="middle">∅</text>
      )}
    </svg>
  );
}

// Full-page My Universe (reached from the account card)
// PERSONAL-ATLAS (#75): this is the home Atlas with learner status laid over it,
// not a separately generated concept graph. Canonical coordinates, radii and edges
// keep both surfaces recognisably the same and prevent a dense label "ball".
function universeTo3D(data) {
  const D = (typeof window !== "undefined" && window.LUMINARA_DATA) || {};
  const atlasNodes = Array.isArray(D.NODES) ? D.NODES : [];
  const progressById = new Map(((data && Array.isArray(data.nodes)) ? data.nodes : [])
    .filter(nd => nd && nd.id)
    .map(nd => [nd.id, nd]));
  const nodes = atlasNodes.map((atlas) => {
    const progress = progressById.get(atlas.id);
    const active = progress && progress.status !== "not_started";
    return {
      ...atlas,
      // Untouched nodes keep the clean home-Atlas label rather than gaining a
      // noisy "0%" or an uncurated course/chapter name.
      status: progress ? progress.status : "not_started",
      progressPct: active ? progress.progressPct : undefined,
      quizPct: active ? progress.quizPct : undefined,
      quizAvailable: active ? progress.quizAvailable : false,
    };
  });
  const nodeIds = new Set(nodes.map(n => n.id));
  const edges = (Array.isArray(D.EDGES) ? D.EDGES : []).map((edge) => {
    const a = Array.isArray(edge) ? edge[0] : edge && (edge.a || edge.from);
    const b = Array.isArray(edge) ? edge[1] : edge && (edge.b || edge.to);
    return (nodeIds.has(a) && nodeIds.has(b)) ? [a, b] : null;
  }).filter(Boolean);
  return { nodes, edges };
}

// Compact card for the account page
function MyUniverseCard({ locale, onOpen }) {
  const api = (typeof window !== "undefined") ? window.LUMINARA_API : null;
  const demo = (typeof window !== "undefined" && window.LUMINARA_DEMO !== false);
  const { readSet, progressData } = useReadState(api, demo);
  const readKey = [...readSet].sort().join(",");
  const progressKey = JSON.stringify(progressData && progressData.byTopic || {});
  const data = React.useMemo(() => buildUniverse(readSet, progressData), [readKey, progressKey]);
  const g3d = React.useMemo(() => universeTo3D(data), [readKey, progressKey]);
  const Atlas3D = (typeof window !== "undefined") ? window.Atlas : null;
  return (
    <div className="acc-card acc-wide">
      <div className="acc-h acc-h-row">
        <span>✦ {L(UUI.title, locale)}</span>
        <button className="acc-missions-all" onClick={onOpen}>{L(UUI.open, locale)} →</button>
      </div>
      <div className="acc-sub" style={{ marginBottom: 12 }}>{L(UUI.sub, locale)}</div>
      {data.nodes.length === 0 ? (
        <div className="uni-empty">{L(UUI.empty, locale)}</div>
      ) : Atlas3D ? (
        <>
          {/* #75: this is deliberately the same full-size canonical Atlas as the
              home surface.  The former SVG fallback was a personal tag graph
              (42 topics / 497 links), which compressed into an unreadable ball. */}
          <div className="uni-stage-3d uni-stage-3d-card" style={{ position: "relative" }}>
            <Atlas3D locale={locale} nodes={g3d.nodes} edges={g3d.edges} chrome={false} cameraScale={0.62}
                     completed={new Set(g3d.nodes.filter(n => n.status === "completed").map(n => n.id))} onComplete={() => {}}
                     selected={null} onSelect={() => {}}
                     progressPct={data.nodes.reduce((s,n)=>s+n.total,0) ? Math.round(data.nodes.reduce((s,n)=>s+n.readCount,0) / data.nodes.reduce((s,n)=>s+n.total,0) * 100) : 0} />
          </div>
        </>
      ) : (
        <div className="uni-empty">{L(UUI.empty, locale)}</div>
      )}
    </div>
  );
}

window.MyUniverse = MyUniverse;
window.MyUniverseCard = MyUniverseCard;

{loading ? L(RUI.loadingTopic, locale) : L(RUI.unavailableTopic, locale)}

Base

{displayTitle}

{wp.ecosystem ? titleTextR(wp.ecosystem.title, locale) : "White Paper"}

{L(RUI.title, locale)}

{titleRes.value}