create-pmos 0.197.0 → 0.198.0

package/workspace/public/pm/c3-report-deck.js

@@ -0,0 +1,558 @@
+/* pm/c3-report-deck.js — a DESIGNED report cycle in the document sheet's Read tab: the deck or the interactive document, Present, speaker notes,
+ * notes on the slide, Print / PDF and the "Differs from the design" notice (initiative report-design-studio; planning/prd/report-design-studio-prd.md
+ * sections 3 and 4; mockup 42-reportdeck.js, hashes #deck, #deck-pin, #deck-speaker, #deck-present, #deck-audience, #deck-cycles).
+ *
+ *   createDeck({ ws, path, setup, name, cycle, output, copy, onStudio, onBrief }) -> { node(api), tools(api), present(kind), state }
+ *        c3-report-setup.js makes one per open document and gives node/tools to openDocSheet's report option. node(api) is null until the cycle
+ *        is read, and stays null for a cycle with no design: the sheet then draws its ordinary format view.
+ *   RD                         the routes of the API contract (report-design-contract.md), through pmGet/pmPost
+ *   splitRender(html)          a sanitized render as { style, slides, secs, body, format }   (DOMParser; nothing of it runs)
+ *   frameDoc(style, inner)     the srcdoc of one sandboxed frame: the slide tokens, the frame affordances, the render's own <style>
+ *   slideCard(R, slide, o)     a 1280 x 720 slide in <iframe sandbox="allow-same-origin" srcdoc> (no allow-scripts), scaled to its width
+ *   wireFrame(doc, h)          the data attributes of a render, wired from this page: data-src, data-value, data-more, data-initiative, data-from
+ *   printDeckHtml(R, o)        the print page: the render's slides one per page, nothing else (no speaker note, no pin)
+ *   diffOutlines(a, b)         what changed between two outlines, in words (pure; Node-testable)
+ * The render is HTML the server sanitized. It shows only in frames with no script permission; every interaction is wired from here. Nothing is
+ * sent: Present, Print and Download stay on this device. Writes (cycle decisions, notes, pins) go through pmPost, which the server takes only
+ * from a press on the page. */
+import { el } from './dom.js';
+import { icon, pbtn, btn, chip, sect, put, lk } from './c3-ini-ui.js';
+import { pmGet, pmPost } from './http.js';
+import { toast } from './c3-toast.js';
+import { ensureC3Css } from './pm-work-view.js';
+
+export const W = 1280;
+export const H = 720;
+const q = (o) => Object.entries(o).filter(([, v]) => v != null && v !== '').map(([k, v]) => k + '=' + encodeURIComponent(v)).join('&');
+const esc = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const pad2 = (n) => String(n).padStart(2, '0');
+const WD = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/** 'Wed 7 Oct' for '2026-10-07', 'Sep 2026' for '2026-09', anything else as it is. */
+export function slotWord(slot) {
+  const s = String(slot || '');
+  let m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+  if (m) { const d = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3])); return WD[d.getUTCDay()] + ' ' + (+m[3]) + ' ' + MON[+m[2] - 1]; }
+  m = /^(\d{4})-(\d{2})$/.exec(s); if (m) return MON[+m[2] - 1] + ' ' + m[1];
+  return s;
+}
+
+/** Link c3-report-deck.css once (the deck, the studio and the brief share it). */
+export function ensureDeckCss() {
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-report-deck]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-report-deck.css', import.meta.url).href; l.setAttribute('data-c3-report-deck', '');
+  document.head.appendChild(l);
+}
+
+/* ── the routes (report-design-contract.md) ── */
+async function textOf(url) {
+  const r = await fetch(url);
+  if (!r.ok) { let m = ''; try { m = (await r.json()).error; } catch { /* not JSON */ } throw new Error(m || 'the workspace did not answer'); }
+  return r.text();
+}
+const post = (p, body) => Promise.resolve(pmPost('/api/' + p, body)).catch((e) => ({ ok: false, error: String((e && e.message) || e) }));
+export const RD = {
+  design: (ws, id) => Promise.resolve(pmGet('/api/report-design?' + q({ ws, id }))).catch(() => null),
+  version: (ws, id, n) => textOf('/api/report-design/version?' + q({ ws, id, n })),
+  describe: (b) => post('report-design/describe', b),
+  sample: (b) => post('report-design/sample', b),
+  turn: (b) => post('report-design/turn', b),
+  accept: (b) => post('report-design/accept', b),
+  revert: (b) => post('report-design/revert', b),
+  cycle: (ws, path) => Promise.resolve(pmGet('/api/report-design/cycle?' + q({ ws, path }))).catch(() => null),
+  cycleHtml: (ws, path) => textOf('/api/report-design/cycle-html?' + q({ ws, path })),
+  decide: (b) => post('report-design/cycle-decision', b),
+  notes: (ws, path) => Promise.resolve(pmGet('/api/report-notes?' + q({ ws, path }))).catch(() => null),
+  speaker: (b) => post('report-notes/speaker', b),
+  pin: (b) => post('report-notes/pin', b),
+};
+export const failed = (r, what) => toast({ text: what + ': ' + ((r && (r.error || r.reason)) || 'the workspace did not answer') + '.', tone: 'error', timeout: 6000 });
+
+/* ── a render: parsed, never run ── */
+/** The render as parts. A second line of defence after the server's sanitizer: scripts, frames and on* attributes are dropped here too. */
+export function splitRender(html) {
+  const d = new DOMParser().parseFromString(String(html || ''), 'text/html');
+  d.querySelectorAll('script,iframe,object,embed,link,meta,base').forEach((n) => n.remove());
+  d.querySelectorAll('*').forEach((n) => { for (const a of [...n.attributes]) if (/^on/i.test(a.name) || /^\s*javascript:/i.test(a.value)) n.removeAttribute(a.name); });
+  const style = [...d.querySelectorAll('style')].map((s) => s.textContent).join('\n');
+  d.querySelectorAll('style').forEach((s) => s.remove());
+  const slides = [...d.querySelectorAll('section.pmos-slide')].map((s, i) => ({ id: s.getAttribute('data-slide-id') || 'slide-' + (i + 1), kind: s.getAttribute('data-kind') || '', title: s.getAttribute('data-title') || 'Slide ' + (i + 1), section: s.getAttribute('data-section') || '', html: s.outerHTML, n: i + 1 }));
+  const secs = [...d.querySelectorAll('section.pmos-sec')].map((s, i) => ({ id: s.getAttribute('data-sec-id') || 'sec-' + (i + 1), kind: s.getAttribute('data-kind') || '', title: s.getAttribute('data-title') || 'Section ' + (i + 1), section: s.getAttribute('data-section') || s.getAttribute('data-title') || '', n: i + 1 }));
+  return { style, slides, secs, body: d.body.innerHTML, format: slides.length ? 'deck' : 'doc' };
+}
+const TOKENS = () => new URL('./tokens.css', import.meta.url).href;
+const FRAME_CSS = () => new URL('./c3-report-frame.css', import.meta.url).href;
+/** The srcdoc of one frame. The render's own <style> comes last, so its rules win over the frame affordances. */
+export function frameDoc(style, inner, cls) {
+  return '<!doctype html><html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="' + esc(TOKENS()) + '"><link rel="stylesheet" href="' + esc(FRAME_CSS()) + '">'
+    + '<style>' + String(style || '').replace(/<\/style/gi, '<\\/style') + '</style></head><body class="pmos-frame' + (cls ? ' ' + cls : '') + '">' + String(inner || '') + '</body></html>';
+}
+/** A frame: sandboxed, no scripts. onLoad(doc) runs each time it loads (moving it in the page loads it again). */
+export function frame(style, inner, { title, cls, onLoad, focusable } = {}) {
+  const f = el('iframe', { class: 'rd-if', sandbox: 'allow-same-origin', srcdoc: frameDoc(style, inner, cls), title: title || 'Slide', 'data-rd-frame': '', ...(focusable ? {} : { tabindex: '-1' }) });
+  if (onLoad) f.addEventListener('load', () => { try { if (f.contentDocument) onLoad(f.contentDocument, f); } catch { /* the frame went away */ } });
+  return f;
+}
+const RO = typeof ResizeObserver === 'function' ? new ResizeObserver((es) => { for (const e of es) { const w = e.contentRect.width; if (w) e.target.style.setProperty('--rp-scale', String(Math.round((w / W) * 10000) / 10000)); } }) : null;
+/** Scale a card's 1280 x 720 frame to the card's width (as slideCards does in report-slides.js). */
+export function fitCard(card) {
+  if (RO) RO.observe(card);
+  requestAnimationFrame(() => { const w = card.getBoundingClientRect().width; if (w) card.style.setProperty('--rp-scale', String(Math.round((w / W) * 10000) / 10000)); });
+  return card;
+}
+/** One slide as a card. o = { cls, attrs, wire(doc), over: [nodes on top], focusable }. */
+export function slideCard(R, slide, o = {}) {
+  const f = frame(R.style, slide.html, { title: 'Slide ' + slide.n + ': ' + slide.title, cls: 'pmos-one', onLoad: o.wire, focusable: o.focusable });
+  return fitCard(el('div', { class: 'rd-card' + (o.cls ? ' ' + o.cls : ''), 'data-rd-card': slide.id, ...(o.attrs || {}) }, f, ...(o.over || [])));
+}
+
+/* ── the data attributes, wired from the page ── */
+const toggleMore = (m) => { if (m.tagName === 'DETAILS') m.open = !m.open; else if (m.hasAttribute('data-open')) m.removeAttribute('data-open'); else m.setAttribute('data-open', ''); };
+/** data-from: a "was <value>" note after each changed value while `on`. */
+export function showChanges(doc, on) {
+  doc.querySelectorAll('[data-from]').forEach((n) => {
+    n.classList.toggle('pmos-chg', !!on);
+    const nx = n.nextElementSibling; const has = nx && nx.classList.contains('pmos-was');
+    if (on && !has) { const w = doc.createElement('small'); w.className = 'pmos-was'; w.textContent = 'was ' + n.getAttribute('data-from'); n.after(w); }
+    if (!on && has) nx.remove();
+  });
+}
+/**
+ * h = { place(e, doc) -> true when the click placed a marker, src(ref, node), initiative(id), value(text, node) / leave(), key(e), chg }.
+ * Every interactive part gets a role and the keyboard; links never navigate.
+ */
+export function wireFrame(doc, h) {
+  const win = doc.defaultView; if (!win) return;
+  doc.querySelectorAll('[data-src],[data-initiative],[data-more]').forEach((n) => { if (n.tagName !== 'DETAILS' && n.tagName !== 'SUMMARY') { if (!n.hasAttribute('tabindex')) n.setAttribute('tabindex', '0'); if (!n.hasAttribute('role')) n.setAttribute('role', 'button'); } });
+  doc.querySelectorAll('[data-value]').forEach((n) => { if (!n.hasAttribute('tabindex')) n.setAttribute('tabindex', '0'); });
+  const act = (e) => {
+    const t = e.target && e.target.nodeType === 1 ? e.target : e.target && e.target.parentElement; if (!t) return;
+    if (h.place && h.place(e, doc)) { e.preventDefault(); return; }
+    if (t.closest('a')) e.preventDefault();
+    const s = t.closest('[data-src]'); if (s) { e.preventDefault(); if (h.src) h.src(s.getAttribute('data-src'), s); return; }
+    const i = t.closest('[data-initiative]'); if (i) { e.preventDefault(); if (h.initiative) h.initiative(i.getAttribute('data-initiative'), i); return; }
+    const m = t.closest('[data-more]'); if (m && !t.closest('summary')) { e.preventDefault(); toggleMore(m); if (h.more) h.more(m); }
+    else if (m && m.tagName === 'DETAILS' && h.more) setTimeout(() => h.more(m), 0);
+  };
+  doc.defaultView.addEventListener('click', act);
+  win.addEventListener('keydown', (e) => {
+    const t = e.target && e.target.closest ? e.target : null;
+    if (t && (e.key === 'Enter' || e.key === ' ') && t.closest('[data-src],[data-initiative],[data-more]') && t.tagName !== 'SUMMARY') { act({ target: t, preventDefault: () => e.preventDefault(), clientX: 0, clientY: 0 }); e.preventDefault(); return; }
+    if (h.key) h.key(e);
+  });
+  const hov = (e) => { const v = e.target && e.target.closest && e.target.closest('[data-value]'); if (v) { if (h.value) h.value(v.getAttribute('data-value'), v); } else if (h.leave) h.leave(); };
+  win.addEventListener('mouseover', hov); win.addEventListener('focusin', hov);
+  doc.documentElement.addEventListener('mouseleave', () => { if (h.leave) h.leave(); });
+  if (h.touch) { win.addEventListener('touchstart', h.touch.start, { passive: true }); win.addEventListener('touchend', h.touch.end, { passive: true }); }
+  showChanges(doc, !!h.chg);
+}
+
+/* ── pure ── */
+/** What changed from outline a to outline b: [text]. Outlines are [{ id, kind, title }]. */
+export function diffOutlines(a, b) {
+  const A = a || []; const B = b || []; const out = [];
+  const ia = new Map(A.map((s, i) => [s.id, i]));
+  for (const [i, s] of B.entries()) {
+    if (!ia.has(s.id)) { out.push('Added: ' + s.title + ' (slide ' + (i + 1) + ')'); continue; }
+    const p = A[ia.get(s.id)];
+    if (p.kind !== s.kind) out.push(s.title + ': ' + (p.kind || 'plain') + ' became ' + (s.kind || 'plain'));
+    if (p.title !== s.title) out.push('Renamed: ' + p.title + ' is now ' + s.title);
+  }
+  for (const s of A) if (!B.some((x) => x.id === s.id)) out.push('Removed: ' + s.title);
+  const common = B.filter((s) => ia.has(s.id)).map((s) => s.id); const was = A.filter((s) => common.includes(s.id)).map((s) => s.id);
+  common.forEach((id, k) => { if (was[k] !== id) { const s = B.find((x) => x.id === id); const from = A.findIndex((x) => x.id === id) + 1; const to = B.findIndex((x) => x.id === id) + 1; if (from !== to && !out.some((t) => t.startsWith('Moved: ' + s.title))) out.push('Moved: ' + s.title + ' to slide ' + to + ', was slide ' + from); } });
+  return out;
+}
+/** The print page: every slide of the render on its own 1280 x 720 page, in order. Nothing else: no speaker note, no pin, no page chrome. */
+export function printDeckHtml(R, o = {}) {
+  const title = esc(o.title || 'Report');
+  if (R.format !== 'deck') return frameDoc(R.style, R.body, 'pmos-print pmos-print-doc').replace('<head>', '<head><title>' + title + '</title>');
+  return frameDoc(R.style, R.slides.map((s) => s.html).join(''), 'pmos-print pmos-print-deck').replace('<head>', '<head><title>' + title + '</title>');
+}
+/** Open the print page in a window and print it. False when the browser blocked the window. */
+export function printDeck(R, o) {
+  const w = typeof window !== 'undefined' && window.open ? window.open('', '_blank') : null;
+  if (!w) return false;
+  w.document.open(); w.document.write(printDeckHtml(R, o)); w.document.close();
+  w.focus(); setTimeout(() => { try { w.print(); } catch { /* the PM prints from the window */ } }, 300);
+  return true;
+}
+
+/* open an initiative: the Initiatives page, on the initiative (c3-initiatives.js reads pmos:ini-go) */
+export function openInitiative(id) {
+  try { window.dispatchEvent(new CustomEvent('pmos:go-tab', { detail: { tab: 'init' } })); window.dispatchEvent(new CustomEvent('pmos:ini-go', { detail: { id } })); } catch { /* no events */ }
+}
+const SRC_WORD = { jira: 'Jira', initiative: 'PMOS initiative', ini: 'PMOS initiative', commit: 'Commit', doc: 'Document', metric: 'Metric', release: 'Release', dashboard: 'Dashboard', confluence: 'Confluence', section: 'Section of the document' };
+export function srcParts(ref) { const s = String(ref || ''); const k = s.indexOf(':'); const kind = k > 0 ? s.slice(0, k) : 'source'; return { kind, id: k > 0 ? s.slice(k + 1) : s, word: SRC_WORD[kind.toLowerCase()] || kind.charAt(0).toUpperCase() + kind.slice(1) }; }
+
+/* ── the deck in the Read tab ── */
+const CAPS = [['eye', 'Hover a value for its detail'], ['org', 'Click a number or status for its source'], ['plus', 'Expand the details'], ['init', 'Live link to each initiative'], ['notes', 'Notes on the slide'], ['mic', 'Presenter view with your notes']];
+const KIND_WORD = (k) => (k ? String(k).replace(/[-_]/g, ' ').replace(/^./, (c) => c.toUpperCase()) : 'Slide');
+const hintOf = (k) => (/headline|metric|kpi/.test(k) ? 'Hover a value for its detail. Click a number to see its source.' : /list|table/.test(k) ? 'Click a status to see where it comes from, or an initiative to open it.'
+  : /init/.test(k) ? 'Click the status for its source, or the live link for the initiative today. A long column folds into "more".' : /roadmap/.test(k) ? 'Hover a bar for its stage and dates.'
+    : /release|ship/.test(k) ? 'Click a release type to see its commit or ticket.' : /risk|need/.test(k) ? 'Hover a risk for its impact.' : 'The words come from the document. Change them in the Edit tab; the deck redraws.');
+
+export function createDeck(o) {
+  ensureDeckCss();
+  const { ws, path } = o;
+  const S = { loaded: false, cyc: null, R: null, prev: null, prevR: null, notes: { speaker: {}, suggestions: {}, pins: [] }, cur: 0, mode: 'deck', pins: true, open: null, src: null, placing: false, draft: null, chg: false, err: '', timer: null, api: null, spkT: {} };
+  const root = el('div', { class: 'rd-dk', 'data-rd-deck': path });
+  const redraw = () => { if (S.api && S.api.redraw) S.api.redraw(); };
+
+  async function load() {
+    const c = await RD.cycle(ws, path);
+    if (!c || c.ok === false) { S.loaded = true; S.cyc = null; S.err = (c && c.error) || ''; redraw(); return; }
+    S.cyc = c;
+    if (c.designed) {
+      try { S.R = splitRender(await RD.cycleHtml(ws, path)); } catch (e) { S.err = (e && e.message) || 'the render could not be read'; S.R = null; }
+      const n = await RD.notes(ws, path); if (n && n.ok !== false) S.notes = { speaker: n.speaker || {}, suggestions: n.suggestions || {}, pins: n.pins || [] };
+      if (c.previous && c.previous.path) {
+        const pc = await RD.cycle(ws, c.previous.path);
+        if (pc && pc.ok !== false && pc.designed) { S.prev = { ...pc, ...c.previous }; try { S.prevR = splitRender(await RD.cycleHtml(ws, c.previous.path)); } catch { S.prevR = null; } }
+      }
+    }
+    S.loaded = true; S.cur = Math.min(S.cur, Math.max(0, count() - 1));
+    if (c.rendering) poll();
+    redraw();
+  }
+  function poll() { clearTimeout(S.timer); S.timer = setTimeout(async () => { if (!root.isConnected && !OV) return; await load(); }, 2000); }
+  const count = () => (S.R ? (S.R.format === 'deck' ? S.R.slides.length : S.R.secs.length) : 0);
+  const slides = () => (S.R ? S.R.slides : []);
+  const isDeck = () => !!S.R && S.R.format === 'deck';
+  const prevWord = () => (S.cyc && S.cyc.previous ? slotWord(S.cyc.previous.slot) : 'the last cycle');
+  const live = () => S.notes.pins.filter((p) => p.state !== 'dismissed');
+  const pinsOf = (id) => live().filter((p) => p.slide === id);
+  const numOf = (p) => live().indexOf(p) + 1;
+  const curSlide = () => slides()[S.cur] || null;
+
+  /* ── interactions inside a frame ── */
+  const hands = (card, slide, extra) => ({
+    chg: S.chg,
+    src: (ref, n) => { S.src = { ref, label: (n.textContent || '').trim().slice(0, 60), detail: n.getAttribute('data-value') || '' }; S.open = null; paint(); const c = root.querySelector('[data-rd-src]'); if (c) c.scrollIntoView({ block: 'nearest' }); },
+    initiative: (id) => { S.src = { ref: 'initiative:' + id, label: id, detail: '', ini: id }; S.open = null; paint(); },
+    value: (text, n) => tipAt(card, n, text),
+    leave: () => tipOff(card),
+    place: (e, doc) => {
+      if (!S.placing || !slide) return false;
+      const box = slide.box ? slide.box(e, doc) : { x: e.clientX / W * 100, y: e.clientY / H * 100, id: slide.id };
+      if (!box) return false;
+      S.draft = { slide: box.id, x: Math.round(box.x), y: Math.round(box.y) }; S.placing = false; paint();
+      const i = root.querySelector('[data-rd-pindraft]'); if (i) i.focus();
+      return true;
+    },
+    ...(extra || {}),
+  });
+  function tipAt(card, n, text) {
+    const t = card && card.querySelector('.rd-tip'); if (!t) return;
+    const k = Number(getComputedStyle(card).getPropertyValue('--rp-scale')) || 1; const r = n.getBoundingClientRect();
+    t.textContent = text; t.hidden = false;
+    t.style.setProperty('--rp-x', Math.round((r.left + r.width / 2) * k) + 'px'); t.style.setProperty('--rp-y', Math.round(r.top * k) + 'px');
+  }
+  const tipOff = (card) => { const t = card && card.querySelector('.rd-tip'); if (t) t.hidden = true; };
+
+  /* ── parts ── */
+  function bar() {
+    const c = S.cyc; const v = c.design_version;
+    return el('div', { class: 'rd-dk-bar' },
+      el('div', { class: 'chips2 rd-wrap' }, lk({ 'data-rd-act': 'brief', title: 'The design of this report', onclick: () => o.onBrief && o.onBrief() }, icon('spark', 'sm'), 'Design D' + v),
+        chip(icon('doc', 'sm'), count() + (isDeck() ? (count() === 1 ? ' slide' : ' slides') : (count() === 1 ? ' section' : ' sections'))),
+        matchChip(),
+        isDeck() && S.prevR ? el('div', { class: 'seg', role: 'group', 'aria-label': 'Deck view' },
+          btn({ 'data-rd-act': 'mode', 'data-v': 'deck', 'aria-pressed': String(S.mode === 'deck'), onclick: () => { S.mode = 'deck'; paint(); } }, 'Deck'),
+          btn({ 'data-rd-act': 'mode', 'data-v': 'cmp', 'aria-pressed': String(S.mode === 'cmp'), onclick: () => { S.mode = 'cmp'; paint(); } }, 'Side by side with ' + prevWord())) : null),
+      el('div', { class: 'chips2 rd-wrap' },
+        isDeck() ? pbtn('primary', 'Present', 'play', { 'data-rd-act': 'present', onclick: () => present('pres') }) : null,
+        isDeck() ? pbtn('outline', 'Audience view', 'eye', { 'data-rd-act': 'audience', onclick: () => present('aud') }) : null,
+        pbtn('outline', 'Refine the design', 'spark', { 'data-rd-act': 'studio', onclick: () => o.onStudio && o.onStudio() }),
+        pbtn('ghost', 'Print / PDF', 'pdf', { 'data-rd-act': 'print', onclick: () => doPrint() }),
+        isDeck() ? pbtn('ghost', 'Download .pptx', 'drop', { 'data-rd-act': 'pptx', onclick: () => S.api && S.api.download && S.api.download('pptx') }) : null));
+  }
+  function matchChip() {
+    const c = S.cyc;
+    if (c.rendering) return el('span', { class: 'chip2', 'data-rd-match': 'rendering' }, icon('clock', 'sm'), 'Drawing to match the design');
+    if (c.matches) return el('span', { class: 'chip2 ds-good', 'data-rd-match': 'yes' }, icon('check', 'sm'), 'Matches the design');
+    const open = openDiffs();
+    return open.length ? el('span', { class: 'chip2 ds-warn', 'data-rd-match': 'no' }, icon('alert', 'sm'), open.length + (open.length === 1 ? ' difference' : ' differences') + ' from the design')
+      : el('span', { class: 'chip2 ds-good', 'data-rd-match': 'kept' }, icon('check', 'sm'), 'Kept for this cycle');
+  }
+  const openDiffs = () => (S.cyc.differences || []).filter((d) => !(S.cyc.decisions || []).some((x) => x.diff === d.id));
+  function caps() {
+    return el('div', { class: 'rd-dk-caps', 'aria-label': 'What this ' + (isDeck() ? 'deck' : 'document') + ' can do', 'data-rd-caps': '' }, el('span', { class: 'dim mono' }, isDeck() ? 'MORE THAN SLIDES' : 'MORE THAN A PAGE'),
+      CAPS.filter(([ic]) => isDeck() || ic !== 'mic').map(([ic, t]) => chip(icon(ic, 'sm'), isDeck() ? t : t.replace('the slide', 'the document'))),
+      S.cyc.previous ? lk({ 'data-rd-act': 'chg', 'aria-pressed': String(S.chg), class: S.chg ? 'rd-on' : '', onclick: () => { S.chg = !S.chg; paint(); } }, icon('undo', 'sm'), (S.chg ? 'Hide' : 'Show') + ' what changed since ' + prevWord()) : null);
+  }
+  function rbar() {
+    const tg = (id, label, on, set) => el('label', { class: 'ds-tg' }, el('input', { type: 'checkbox', checked: on, 'data-rd-ck': id, onChange: (e) => set(e.target.checked) }), label);
+    return el('div', { class: 'ds-rbar' }, el('span', { class: 'ds-acts' }, tg('pins', 'Show notes on the ' + (isDeck() ? 'slide' : 'document'), S.pins, (v) => { S.pins = v; paint(); }), tg('src', 'Markdown source', false, (v) => { if (v && S.api && S.api.setSrc) S.api.setSrc(true); })),
+      el('span', { class: 'dim mono rd-small' }, 'Present, print and download stay on this device. Nothing is sent.'));
+  }
+  function copyNotice() {
+    if (o.output !== 'google-slides') return null;
+    return el('div', { class: 'fold', 'data-rd-copynote': '' }, icon('info', 'sm'), ' The deck now lives in PMOS. The Google Slides copy of this report is optional. ', lk({ onclick: () => S.api && S.api.toggleCopies && S.api.toggleCopies() }, 'Copies in other tools'));
+  }
+  function diffBox() {
+    const c = S.cyc; if (c.rendering) return el('div', { class: 'fold a', role: 'status', 'data-rd-rendering': '' }, icon('clock', 'sm'), ' PMOS is drawing this cycle again to match the design. You can leave this page.');
+    const D = c.differences || []; if (!D.length) return null;
+    const open = openDiffs();
+    const kept = D.filter((d) => (c.decisions || []).some((x) => x.diff === d.id && x.choice === 'keep'));
+    if (!open.length) return kept.length ? el('div', { class: 'fold', 'data-rd-kept': '' }, icon('check', 'sm'), ' Kept for this cycle: ' + kept.map((d) => d.what).join(' ') + ' The design stays as it is.') : null;
+    const frozen = o.state && o.state() === 'issued';
+    return el('section', { class: 'ds-stale rd-dk-diff', 'aria-label': 'Differs from the design', 'data-rd-diff': '' }, el('div', { class: 't' }, icon('alert', 'sm'), 'Differs from the design'),
+      open.map((d) => el('div', { class: 'rd-stack', 'data-rd-diffrow': d.id }, el('p', null, d.what),
+        frozen ? el('p', { class: 'dim' }, 'This cycle is issued, so it stays as it was drawn.') : el('div', { class: 'ds-acts' },
+          btn({ class: 'ds-btn', 'data-rd-decide': 'keep', onclick: () => decide(d, 'keep') }, 'Keep for this cycle'),
+          btn({ class: 'ds-btn ag', 'data-rd-decide': 'adopt', onclick: () => decide(d, 'adopt') }, icon('spark', 'sm'), 'Make it part of the design'),
+          btn({ class: 'ds-btn', 'data-rd-decide': 'match', onclick: () => decide(d, 'match') }, 'Match the design'),
+          d.slide && slides().some((s) => s.id === d.slide) ? lk({ 'data-rd-act': 'showslide', onclick: () => { S.mode = 'deck'; go(slides().findIndex((s) => s.id === d.slide)); } }, 'Show the slide') : null))));
+  }
+  async function decide(d, choice) {
+    const r = await RD.decide({ ws, path, diff: d.id, choice });
+    if (!r || !r.ok) { failed(r, 'It was not recorded'); return; }
+    toast(choice === 'keep' ? 'Kept for this cycle. The design stays as it is. It is in the Edit log.' : choice === 'adopt' ? 'Added to the design as a new version. Every next cycle follows it.' : 'PMOS draws this cycle again to match the design. It is in the Edit log.');
+    await load();
+  }
+  function thumbs(cur, horiz, onPick) {
+    return el('nav', { class: 'rd-dk-strip' + (horiz ? ' h' : ''), 'aria-label': 'Slides', 'data-rd-strip': '' }, slides().map((s, i) => {
+      const np = pinsOf(s.id).length;
+      return btn({ class: 'rd-dk-th', 'aria-current': String(cur === i), 'aria-label': 'Slide ' + s.n + ': ' + s.title, 'data-rd-go': String(i), onclick: () => onPick(i) },
+        el('div', { inert: '' }, slideCard(S.R, s, { cls: 'rd-thumb' })), el('span', { class: 'rd-dk-thn' }, String(s.n)),
+        np && !onPick.studio ? el('span', { class: 'rd-dk-thp', title: np + ' notes on the slide' }, icon('notes', 'sm'), String(np)) : null);
+    }));
+  }
+  function go(i) { if (i < 0 || i >= count()) return; S.cur = i; S.src = null; S.open = null; S.draft = null; S.placing = false; paint(); }
+  function pinLayer(id) {
+    if (!S.pins) return [];
+    const L = pinsOf(id).map((p) => { const b = btn({ class: 'rd-pindot ' + (p.by === 'pmos' ? 'a' : 'h') + (p.state === 'open' && p.by === 'pmos' ? ' prop' : '') + (S.open === p.id ? ' on' : ''), 'data-rd-pin': p.id, 'aria-label': 'Note ' + numOf(p) + ': ' + p.text, onclick: () => { S.open = S.open === p.id ? null : p.id; S.src = null; paint(); } }, String(numOf(p)));
+      b.style.setProperty('--rp-x', p.x + '%'); b.style.setProperty('--rp-y', p.y + '%'); return b; });
+    if (S.draft && S.draft.slide === id) { const d = el('span', { class: 'rd-pindot h on', 'aria-hidden': 'true' }, String(live().length + 1)); d.style.setProperty('--rp-x', S.draft.x + '%'); d.style.setProperty('--rp-y', S.draft.y + '%'); L.push(d); }
+    return L;
+  }
+  function cap(s) {
+    const frozen = o.state && o.state() === 'issued';
+    return [el('div', { class: 'rd-dk-cap' }, el('span', { class: 'chips2 rd-wrap' }, el('b', { 'data-rd-cap': '' }, 'Slide ' + s.n + ' of ' + count()), chip(icon('img', 'sm'), KIND_WORD(s.kind)), chip(icon('doc', 'sm'), s.title)),
+      el('span', { class: 'chips2' }, s.section && !frozen ? pbtn('ghost', 'Edit the words', 'edit', { 'data-rd-act': 'editwords', onclick: () => S.api && S.api.editAt && S.api.editAt(s.section) }) : null,
+        btn({ class: 'ib sm', 'aria-label': 'Previous slide', 'data-rd-act': 'prev', disabled: S.cur === 0, onclick: () => go(S.cur - 1) }, icon('prev', 'sm')),
+        btn({ class: 'ib sm', 'aria-label': 'Next slide', 'data-rd-act': 'next', disabled: S.cur >= count() - 1, onclick: () => go(S.cur + 1) }, icon('next', 'sm')))),
+    el('div', { class: 'dim rd-small' }, hintOf(s.kind))];
+  }
+  function speaker(s) {
+    const n = S.notes.speaker[s.id]; const sug = !n && S.notes.suggestions[s.id] ? S.notes.suggestions[s.id] : null;
+    const from = sug ? slotWord(sug.from_slot) : '';
+    const ta = el('textarea', { class: 'rd-spk', 'data-rd-spk': s.id, 'aria-label': 'Speaker notes for slide ' + s.n, placeholder: sug ? 'Keep the note from ' + from + ', or write a new one.' : 'What you want to say on this slide. Only you see it, in the presenter view.',
+      onInput: (e) => { clearTimeout(S.spkT[s.id]); const v = e.target.value; S.spkT[s.id] = setTimeout(() => saveSpk(s.id, v), 700); }, onBlur: (e) => { clearTimeout(S.spkT[s.id]); if ((S.notes.speaker[s.id] || { text: '' }).text !== e.target.value) saveSpk(s.id, e.target.value); } });
+    ta.value = n ? n.text : '';
+    return sect({ ic: 'mic', title: 'Speaker notes', right: el('span', { class: 'tag' }, 'Private'), attrs: { 'data-rd-spksec': s.id } },
+      sug ? el('div', { class: 'rd-carry', 'data-rd-carry': s.id }, el('span', { class: 'dim mono rd-small' }, 'FROM ' + from.toUpperCase() + ', SAME SLIDE'), el('p', null, sug.text),
+        el('span', { class: 'ds-acts' }, btn({ class: 'ds-btn', 'data-rd-act': 'keep', onclick: () => keepSpk(s.id) }, icon('check', 'sm'), 'Keep'), btn({ class: 'ds-btn', 'data-rd-act': 'clear', onclick: () => clearSpk(s.id) }, icon('x', 'sm'), 'Clear'))) : null,
+      ta, el('div', { class: 'dim rd-small' }, icon('lock', 'sm'), ' Only you see speaker notes. They are not on the slide, the PDF or the .pptx.'));
+  }
+  async function saveSpk(id, text) {
+    const r = await RD.speaker({ ws, path, slide: id, text });
+    if (!r || !r.ok) { failed(r, 'The speaker note was not saved'); return; }
+    S.notes.speaker[id] = { text, at: new Date().toISOString() };
+    const sv = root.querySelector('[data-rd-spksaved]'); if (sv) sv.textContent = 'Saved';
+  }
+  async function keepSpk(id) {
+    const r = await RD.speaker({ ws, path, slide: id, keep: true }); if (!r || !r.ok) { failed(r, 'The note was not kept'); return; }
+    S.notes.speaker[id] = { text: S.notes.suggestions[id].text, at: new Date().toISOString() }; paint(); toast('Kept the speaker note. Change it if you like.');
+  }
+  async function clearSpk(id) {
+    const r = await RD.speaker({ ws, path, slide: id, text: '' }); if (!r || !r.ok) { failed(r, 'The note was not cleared'); return; }
+    S.notes.speaker[id] = { text: '', at: new Date().toISOString() }; paint();
+  }
+  function srcCard() {
+    if (!S.src) return null;
+    const p = srcParts(S.src.ref); const ini = S.src.ini || (/^(ini|initiative)$/i.test(p.kind) ? p.id : null);
+    return el('section', { class: 'ds-sync', 'aria-label': 'Source', 'data-rd-src': S.src.ref }, el('div', { class: 'hd' }, el('b', null, icon(ini ? 'init' : 'org', 'sm'), ' Where "' + (S.src.label || p.id) + '" comes from'),
+      btn({ class: 'ib sm', 'aria-label': 'Close', onclick: () => { S.src = null; paint(); } }, icon('x', 'sm'))),
+    el('ul', null, el('li', null, el('div', { class: 'l1' }, icon(ini ? 'init' : 'org', 'sm'), el('b', null, p.word + ': ' + p.id)),
+      el('p', null, S.src.detail || (ini ? 'The slide shows the figures of this cycle. The initiative in PMOS shows them as they are today.' : 'The render names this source. PMOS read it when it drafted this cycle.')),
+      ini ? el('div', { class: 'ds-acts' }, btn({ class: 'ds-btn', 'data-rd-act': 'openini', onclick: () => openInitiative(ini) }, icon('out', 'sm'), 'Open the initiative')) : null)));
+  }
+  function notesSect(s) {
+    const id = s.id; const ps = pinsOf(id); const frozen = o.state && o.state() === 'issued';
+    const row = (p) => el('li', { class: 'rd-note' + (S.open === p.id ? ' on' : ''), 'data-rd-pinrow': p.id },
+      btn({ class: 'rd-pindot ' + (p.by === 'pmos' ? 'a' : 'h') + (p.state === 'open' && p.by === 'pmos' ? ' prop' : ''), 'aria-label': 'Note ' + numOf(p), onclick: () => { S.open = S.open === p.id ? null : p.id; paint(); } }, String(numOf(p))),
+      el('div', { class: 'ds-le' }, el('div', { class: 'l1' }, el('b', null, p.by === 'pmos' ? 'PMOS' : 'You'), el('span', { class: 'when' }, dayAt(p.at))),
+        p.by === 'pmos' && p.state === 'open' ? el('div', { class: 'who' }, el('span', { class: 'ds-ag' }, 'Proposed by PMOS')) : null,
+        S.open === p.id ? [S.editPin === p.id ? el('div', { class: 'ds-whyadd' }, el('input', { type: 'text', 'data-rd-pinedit': p.id, value: p.text, 'aria-label': 'Edit the note' }),
+          btn({ class: 'ds-btn pri', onclick: () => { const i = root.querySelector('[data-rd-pinedit]'); pinOp('edit', p, i && i.value.trim()); } }, 'Save'), btn({ class: 'ds-btn', onclick: () => { S.editPin = null; paint(); } }, 'Cancel'))
+          : el('p', { class: 'why' }, p.text),
+        el('div', { class: 'ds-acts' }, p.by === 'pmos' && p.state === 'open' ? [btn({ class: 'ds-btn pri', 'data-rd-pinact': 'keep', onclick: () => pinOp('keep', p) }, icon('check', 'sm'), 'Keep the note'), btn({ class: 'ds-btn', 'data-rd-pinact': 'dismiss', onclick: () => pinOp('dismiss', p) }, icon('x', 'sm'), 'Dismiss')]
+          : [btn({ class: 'ds-btn', 'data-rd-pinact': 'edit', onclick: () => { S.editPin = p.id; paint(); } }, icon('edit', 'sm'), 'Change the note'), btn({ class: 'ds-btn', 'data-rd-pinact': 'remove', onclick: () => pinOp('remove', p) }, icon('trash', 'sm'), 'Remove')],
+        (p.section || s.section) && !frozen ? btn({ class: 'ds-btn ag', 'data-rd-pinact': 'editthis', onclick: () => S.api && S.api.editAt && S.api.editAt(p.section || s.section) }, icon('edit', 'sm'), 'Edit this') : null)] : el('p', { class: 'why rd-clip' }, p.text)));
+    const draft = S.draft && S.draft.slide === id ? el('div', { class: 'ds-whyadd' }, el('input', { type: 'text', 'data-rd-pindraft': '', placeholder: 'Your note. Readers of the report see it.', 'aria-label': 'Note on the slide', onKeyDown: (e) => { if (e.key === 'Enter') savePin(); } }),
+      btn({ class: 'ds-btn pri', 'data-rd-act': 'pinsave', onclick: () => savePin() }, 'Pin it'), btn({ class: 'ds-btn', 'data-rd-act': 'pincancel', onclick: () => { S.draft = null; paint(); } }, 'Cancel')) : null;
+    const add = S.placing ? el('div', { class: 'fold a', role: 'status', 'data-rd-placing': '' }, icon('notes', 'sm'), ' Click the spot on the ' + (isDeck() ? 'slide' : 'document') + ' where the note goes. ', lk({ onclick: () => { S.placing = false; paint(); } }, 'Cancel'))
+      : el('div', { class: 'ds-acts' }, btn({ class: 'ds-btn', 'data-rd-act': 'place', onclick: () => { S.placing = true; S.draft = null; S.pins = true; paint(); } }, icon('plus', 'sm'), 'Add a note on the ' + (isDeck() ? 'slide' : 'document')));
+    return sect({ ic: 'notes', title: 'Notes on the ' + (isDeck() ? 'slide' : 'document'), count: ps.length, right: el('span', { class: 'tag acc' }, 'Readers see them'), attrs: { 'data-rd-notes': id } },
+      ps.length ? el('ul', { class: 'ds-log rd-notes' }, ps.map(row)) : el('div', { class: 'fold' }, icon('info', 'sm'), 'No notes here.'), draft || add,
+      el('div', { class: 'dim rd-small' }, 'Readers see these notes. They do not change the words: to change the words, use Edit this. Each note is in the Edit log.'));
+  }
+  async function savePin() {
+    const i = root.querySelector('[data-rd-pindraft]'); const text = i && i.value.trim(); if (!text) { if (i) i.focus(); return; }
+    const d = S.draft; const r = await RD.pin({ ws, path, op: 'add', slide: d.slide, x: d.x, y: d.y, text });
+    if (!r || !r.ok) { failed(r, 'The note was not pinned'); return; }
+    S.draft = null; await reloadNotes(); const p = (r.pin && r.pin.id) || (live().slice(-1)[0] || {}).id; S.open = p || null; paint();
+    toast('Pinned. Readers see it. It is in the Edit log.');
+  }
+  async function pinOp(op, p, text) {
+    if (op === 'edit' && !text) return;
+    const r = await RD.pin({ ws, path, op, id: p.id, slide: p.slide, x: p.x, y: p.y, text: op === 'edit' ? text : p.text });
+    if (!r || !r.ok) { failed(r, 'The note was not changed'); return; }
+    S.editPin = null; if (op === 'remove' || op === 'dismiss') S.open = null;
+    await reloadNotes(); paint();
+    toast(op === 'keep' ? 'Kept. Readers see the note.' : op === 'dismiss' ? 'Dismissed. It stays in the Edit log.' : op === 'remove' ? 'Removed. It stays in the Edit log.' : 'Changed. It is in the Edit log.');
+  }
+  async function reloadNotes() { const n = await RD.notes(ws, path); if (n && n.ok !== false) S.notes = { speaker: n.speaker || {}, suggestions: n.suggestions || {}, pins: n.pins || [] }; if (S.api && S.api.logChanged) S.api.logChanged(); }
+
+  /* ── the views ── */
+  function deckMain() {
+    const s = curSlide(); if (!s) return el('div', { class: 'fold w' }, icon('alert', 'sm'), 'The render has no slide.');
+    const big = slideCard(S.R, s, { cls: 'rd-big' + (S.placing ? ' placing' : ''), attrs: { 'data-rd-big': s.id }, focusable: true, over: [...pinLayer(s.id), el('span', { class: 'rd-tip', hidden: true, role: 'tooltip' })],
+      wire: (doc) => wireFrame(doc, hands(big, s, { key: stageKey })) });
+    return el('div', { class: 'rd-dk-main' }, thumbs(S.cur, false, go), el('div', { class: 'rd-dk-stage' }, ...cap(s), big,
+      el('div', { class: 'rd-dk-under' }, speaker(s), el('div', { class: 'rd-dk-ncol' }, srcCard(), notesSect(s)))));
+  }
+  function stageKey(e) { if (e.key === 'ArrowRight' || e.key === 'PageDown') { e.preventDefault(); go(S.cur + 1); } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(S.cur - 1); } }
+  function cmpMain() {
+    const s = curSlide(); if (!s) return null;
+    const ps = S.prevR ? S.prevR.slides.find((x) => x.id === s.id) : null;
+    const was = []; const tmp = new DOMParser().parseFromString(s.html, 'text/html');
+    tmp.querySelectorAll('[data-from]').forEach((n) => was.push((n.textContent || '').trim() + ', was ' + n.getAttribute('data-from')));
+    const diff = ps ? (was.length ? was : ['The same words and numbers as ' + prevWord() + '.']) : ['This slide is new this cycle. ' + (openDiffs().length ? 'It is what differs from the design.' : '')];
+    /* each column says how its cycle stands against the design (#deck-cycles) */
+    const prevChip = () => { const pc = S.prev || {}; const n = (pc.differences || []).filter((d) => !(pc.decisions || []).some((x) => x.diff === d.id)).length;
+      return pc.matches || !n ? el('span', { class: 'chip2 ds-good' }, icon('check', 'sm'), pc.matches ? 'Matches the design' : 'Kept for that cycle') : el('span', { class: 'chip2 ds-warn' }, icon('alert', 'sm'), n + (n === 1 ? ' difference' : ' differences') + ' from the design'); };
+    const col = (label, state, R, sl, chip) => el('div', { class: 'rd-cmpc' }, el('div', { class: 'chips2 rd-cmph' }, el('b', null, label), el('span', { class: 'tag ' + (state === 'issued' ? 'ok' : 'acc') }, state === 'issued' ? 'Issued' : 'Draft'), chip),
+      sl ? slideCard(R, sl, { wire: (doc) => showChanges(doc, R === S.R && S.chg) }) : el('div', { class: 'fold rd-none' }, icon('info', 'sm'), ' ' + label + ' has no slide "' + s.title + '".'));
+    return [el('div', { class: 'rd-dk-cap' }, el('span', { class: 'chips2 rd-wrap' }, el('b', null, 'Slide ' + s.n + ' of ' + count() + ': ' + s.title), el('span', { class: 'tag ok' }, 'Same design, D' + S.cyc.design_version)),
+      el('span', { class: 'chips2' }, btn({ class: 'ib sm', 'aria-label': 'Previous slide', disabled: S.cur === 0, onclick: () => go(S.cur - 1) }, icon('prev', 'sm')), btn({ class: 'ib sm', 'aria-label': 'Next slide', disabled: S.cur >= count() - 1, onclick: () => go(S.cur + 1) }, icon('next', 'sm')))),
+    el('div', { class: 'rd-cmpg', 'data-rd-cmp': '' }, col(prevWord(), S.prev && S.prev.state ? S.prev.state : 'issued', S.prevR, ps, prevChip()), col(slotWord(o.slot) || 'This cycle', o.state ? o.state() : 'draft', S.R, s, matchChip())),
+    sect({ ic: 'cols', title: 'What differs on this slide', count: diff.length }, el('ul', { class: 'chgl' }, diff.map((t) => el('li', null, icon('edit', 'sm'), el('span', null, t), el('span')))),
+      el('div', { class: 'dim rd-small' }, 'Both cycles were drafted to match the saved design. Only the numbers and the words change, unless PMOS tells you something differs.')),
+    thumbs(S.cur, true, go)];
+  }
+  function docMain() {
+    const R = S.R; const card = el('div', { class: 'rd-docf' + (S.placing ? ' placing' : ''), 'data-rd-big': 'doc' });
+    const layer = el('div', { class: 'rd-doclayer' }); const tip = el('span', { class: 'rd-tip', hidden: true, role: 'tooltip' });
+    const box = (e, doc) => { const sec = e.target.closest && e.target.closest('section.pmos-sec'); if (!sec) return null; const r = sec.getBoundingClientRect(); return { id: sec.getAttribute('data-sec-id'), x: (e.clientX - r.left) / r.width * 100, y: (e.clientY - r.top) / r.height * 100 }; };
+    const f = frame(R.style, R.body, { title: 'The document', cls: 'pmos-doc', focusable: true, onLoad: (doc, fr) => {
+      const fit = () => { fr.style.setProperty('--rp-h', Math.max(200, doc.documentElement.scrollHeight) + 'px'); placeDocPins(doc, layer); };
+      fit(); setTimeout(fit, 120);
+      wireFrame(doc, { ...hands(card, { id: 'doc', box }), value: (t, n) => { tip.textContent = t; tip.hidden = false; const r = n.getBoundingClientRect(); tip.style.setProperty('--rp-x', Math.round(r.left + r.width / 2) + 'px'); tip.style.setProperty('--rp-y', Math.round(r.top) + 'px'); }, leave: () => { tip.hidden = true; }, more: () => fit() });
+    } });
+    card.append(f, layer, tip);
+    const all = live(); const secOf = (id) => R.secs.find((x) => x.id === id) || { id, title: id, section: '' };
+    const sec = S.open ? secOf((all.find((p) => p.id === S.open) || {}).slide) : (S.draft ? secOf(S.draft.slide) : { id: '__all', title: 'the document', section: '' });
+    return el('div', { class: 'rd-dk-stage' }, card, el('div', { class: 'rd-dk-under' }, el('div', { class: 'rd-dk-ncol' }, srcCard()), el('div', { class: 'rd-dk-ncol' }, notesSect({ ...sec, id: sec.id }))));
+  }
+  function placeDocPins(doc, layer) {
+    const L = [];
+    if (S.pins) {
+      for (const p of live()) {
+        const sec = doc.querySelector('section.pmos-sec[data-sec-id="' + String(p.slide).replace(/"/g, '') + '"]'); if (!sec) continue;
+        const r = sec.getBoundingClientRect(); const b = btn({ class: 'rd-pindot ' + (p.by === 'pmos' ? 'a' : 'h') + (p.state === 'open' && p.by === 'pmos' ? ' prop' : '') + (S.open === p.id ? ' on' : ''), 'data-rd-pin': p.id, 'aria-label': 'Note ' + numOf(p) + ': ' + p.text, onclick: () => { S.open = S.open === p.id ? null : p.id; paint(); } }, String(numOf(p)));
+        b.style.setProperty('--rp-x', Math.round(r.left + r.width * p.x / 100) + 'px'); b.style.setProperty('--rp-y', Math.round(r.top + r.height * p.y / 100) + 'px'); L.push(b);
+      }
+      if (S.draft) { const sec = doc.querySelector('section.pmos-sec[data-sec-id="' + String(S.draft.slide).replace(/"/g, '') + '"]'); if (sec) { const r = sec.getBoundingClientRect(); const d = el('span', { class: 'rd-pindot h on', 'aria-hidden': 'true' }, String(live().length + 1)); d.style.setProperty('--rp-x', Math.round(r.left + r.width * S.draft.x / 100) + 'px'); d.style.setProperty('--rp-y', Math.round(r.top + r.height * S.draft.y / 100) + 'px'); L.push(d); } }
+    }
+    put(layer, ...L);
+  }
+  /* pins in a document are keyed by section: a pin's section box is the box its x and y are read in */
+  function paint() {
+    if (!S.loaded || !S.cyc || !S.cyc.designed) { put(root); return; }
+    if (!S.R) { put(root, el('div', { class: 'fold w', role: 'alert' }, icon('alert', 'sm'), ' The render of this cycle could not be read: ' + (S.err || 'no answer') + '.')); return; }
+    const y = scroller() ? scroller().scrollTop : 0;
+    put(root, bar(), caps(), rbar(), copyNotice(), diffBox(), isDeck() ? (S.mode === 'cmp' && S.prevR ? cmpMain() : deckMain()) : docMain());
+    const sc = scroller(); if (sc) sc.scrollTop = y;
+    root.querySelectorAll('.rd-dk-th[aria-current="true"]').forEach((th) => { const st = th.parentNode; if (st.scrollHeight > st.clientHeight + 4) st.scrollTop = Math.max(0, th.offsetTop - st.offsetTop - 8); if (st.scrollWidth > st.clientWidth + 4) st.scrollLeft = Math.max(0, th.offsetLeft - st.offsetLeft - 8); });
+  }
+  const scroller = () => root.closest('.sb');
+  const dayAt = (iso) => { const m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/.exec(String(iso || '')); return m ? slotWord(m[1] + '-' + m[2] + '-' + m[3]) + ', ' + m[4] + ':' + m[5] : String(iso || ''); };
+
+  function doPrint() {
+    if (!S.R) return;
+    const ok = printDeck(S.R, { title: (o.name || 'Report') + (o.cycle ? ' ' + o.cycle : '') });
+    toast(ok ? 'The print view is open: one ' + (isDeck() ? 'slide' : 'document') + ' per page, without your speaker notes or the notes on the slide. Choose Save as PDF. Nothing is uploaded.' : 'The browser blocked the print window. Allow pop-ups for this page, then press Print again.');
+  }
+
+  /* ── Present: the presenter view and the audience view, on the .rp-deck stage ── */
+  let OV = null;
+  function closeOV() {
+    if (!OV) return; clearInterval(OV.timer); window.removeEventListener('keydown', OV.key, true); window.removeEventListener('resize', OV.fit);
+    OV.host.remove(); const i = OV.i; OV = null; S.cur = i; paint(); const b = root.querySelector('[data-rd-act="present"]'); if (b) b.focus();
+  }
+  function present(kind, start) {
+    if (!isDeck()) return;
+    if (OV) { OV.kind = kind; paintOV(); return; }
+    ensureC3Css();
+    const el0 = el('div', { class: 'rp-deck rd-ov ' + (kind === 'pres' ? 'rd-pres' : 'rd-aud'), open: '', role: 'dialog', 'aria-modal': 'true', 'aria-roledescription': 'carousel', tabindex: '-1', 'data-rd-ov': '' });
+    const host = el('div', { class: 'c3 c3e c3pop rd-ovhost', 'data-shell': 'present' }, el0);
+    OV = { kind, i: Math.max(0, Math.min(count() - 1, start == null ? S.cur : start)), el: el0, host, t0: Date.now(), timer: null, x0: null, y0: null };
+    OV.key = (e) => ovKey(e);
+    OV.fit = () => fitOV();
+    document.body.appendChild(host);
+    window.addEventListener('keydown', OV.key, true); window.addEventListener('resize', OV.fit);
+    el0.addEventListener('touchstart', touchStart, { passive: true }); el0.addEventListener('touchend', touchEnd, { passive: true });
+    OV.timer = setInterval(() => { const t = OV && OV.el.querySelector('[data-rd-timer]'); if (t) t.textContent = clock(); }, 1000);
+    paintOV(); el0.focus();
+  }
+  const touchStart = (e) => { const t = e.changedTouches[0]; if (OV) { OV.x0 = t.clientX; OV.y0 = t.clientY; } };
+  const touchEnd = (e) => { if (!OV || OV.x0 == null) return; const t = e.changedTouches[0]; const dx = t.clientX - OV.x0; const dy = t.clientY - OV.y0; OV.x0 = null; if (Math.abs(dx) > 40 && Math.abs(dx) > 1.5 * Math.abs(dy)) ovGo(OV.i + (dx < 0 ? 1 : -1)); };
+  function ovKey(e) {
+    if (!OV) return; const k = e.key;
+    if (k === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); closeOV(); return; }
+    const onBtn = e.target && e.target.closest && e.target.closest('button');
+    if (k === 'ArrowRight' || k === 'PageDown' || (k === ' ' && !onBtn)) { e.preventDefault(); e.stopImmediatePropagation(); ovGo(OV.i + 1); }
+    else if (k === 'ArrowLeft' || k === 'PageUp') { e.preventDefault(); e.stopImmediatePropagation(); ovGo(OV.i - 1); }
+    else if (k === 'Home') { e.preventDefault(); e.stopImmediatePropagation(); ovGo(0); }
+    else if (k === 'End') { e.preventDefault(); e.stopImmediatePropagation(); ovGo(count() - 1); }
+  }
+  function ovGo(j) { if (!OV) return; const n = Math.max(0, Math.min(count() - 1, j)); if (n === OV.i) return; OV.i = n; paintOV(); }
+  const clock = () => { const s = Math.floor((Date.now() - OV.t0) / 1000); return pad2(Math.floor(s / 60)) + ':' + pad2(s % 60); };
+  function fitOV() {
+    if (!OV) return;
+    if (OV.kind === 'aud') { const st = OV.el.querySelector('.rp-deck__stage'); if (!st) return; const r = st.getBoundingClientRect(); OV.el.style.setProperty('--rp-scale', String(Math.max(0.05, Math.min(r.width / W, r.height / H)).toFixed(4))); }
+  }
+  function ovBar(label) {
+    const N = count();
+    return el('div', { class: 'rp-deck__bar', role: 'toolbar', 'aria-label': label }, el('p', { class: 'rp-deck__label' }, label),
+      btn({ class: 'ib', 'aria-label': 'Previous slide', 'data-rd-ovact': 'prev', disabled: OV.i === 0, onclick: () => ovGo(OV.i - 1) }, icon('prev')),
+      el('p', { class: 'rp-deck__count', 'data-rd-count': '' }, (OV.i + 1) + ' / ' + N),
+      btn({ class: 'ib', 'aria-label': 'Next slide', 'data-rd-ovact': 'next', disabled: OV.i === N - 1, onclick: () => ovGo(OV.i + 1) }, icon('next')),
+      OV.kind === 'pres' ? pbtn('ghost', 'Audience view', 'eye', { 'data-rd-ovact': 'aud', onclick: () => { OV.kind = 'aud'; paintOV(); } }) : pbtn('ghost', 'Presenter view', 'mic', { 'data-rd-ovact': 'pres', onclick: () => { OV.kind = 'pres'; paintOV(); } }),
+      btn({ class: 'ib', 'aria-label': 'Close the slides (Escape)', 'data-rd-ovact': 'close', onclick: () => closeOV() }, icon('x')));
+  }
+  function paintOV() {
+    const s = slides()[OV.i]; const name = (o.name || 'Report') + (o.cycle ? ' · ' + o.cycle : '');
+    const fwd = (doc) => wireFrame(doc, { key: ovKey, touch: { start: touchStart, end: touchEnd }, src: (ref, n) => { const p = srcParts(ref); toast((n.textContent || '').trim() + ': ' + p.word + ' ' + p.id); }, initiative: (id) => toast('Initiative ' + id + '. Open it from the deck after the session.') });
+    OV.el.className = 'rp-deck rd-ov ' + (OV.kind === 'pres' ? 'rd-pres' : 'rd-aud');
+    OV.el.setAttribute('aria-label', OV.kind === 'pres' ? 'Presenter view' : 'Slides, full screen');
+    if (OV.kind === 'aud') {
+      const fr = frame(S.R.style, s.html, { title: 'Slide ' + s.n + ': ' + s.title, cls: 'pmos-one', onLoad: fwd });
+      put(OV.el, el('div', { class: 'rp-deck__stage' }, el('div', { class: 'rp-deck__frame rd-ovframe', 'aria-live': 'polite', 'data-rd-ovslide': s.id }, fr)), ovBar(name + '. Arrows, Space or a swipe move; Escape closes.'));
+    } else {
+      const nx = slides()[OV.i + 1]; const n = S.notes.speaker[s.id]; const sug = !n && S.notes.suggestions[s.id];
+      put(OV.el, el('div', { class: 'rd-pg' },
+        el('div', { class: 'rd-pmain' }, el('div', { class: 'rd-pp rd-plab' }, el('span', { class: 'chips2' }, el('span', { class: 'tag acc' }, 'Now'), el('b', null, 'Slide ' + s.n + ' of ' + count() + ': ' + s.title)), el('span', { class: 'dim mono rd-small' }, 'The audience sees only this slide')),
+          slideCard(S.R, s, { attrs: { 'data-rd-ovslide': s.id }, wire: fwd }),
+          el('div', { class: 'rd-pp', 'data-rd-ovnote': '' }, el('div', { class: 'rd-ph' }, icon('mic', 'sm'), 'Speaker notes ', el('span', { class: 'tag' }, 'Private')),
+            n && n.text ? el('p', { class: 'rd-pnote' }, n.text) : sug ? el('p', { class: 'rd-pnote dim' }, 'From ' + slotWord(sug.from_slot) + ', not kept yet: ' + sug.text) : el('p', { class: 'dim rd-m0' }, 'No speaker note for this slide.'))),
+        el('div', { class: 'rd-pside' }, el('div', { class: 'rd-pp rd-ptime' }, el('div', null, el('div', { class: 'rd-ph' }, icon('clock', 'sm'), 'Time'), el('b', { class: 'rd-timer', 'data-rd-timer': '' }, clock())), el('div', null, el('div', { class: 'rd-ph' }, 'Slide'), el('b', { class: 'rd-timer', 'data-rd-pn': '' }, s.n + ' / ' + count()))),
+          el('div', { class: 'rd-pp' }, el('div', { class: 'rd-ph' }, icon('next', 'sm'), 'Next'), nx ? [slideCard(S.R, nx, { attrs: { 'data-rd-ovnext': nx.id } }), el('div', { class: 'dim rd-small' }, nx.n + '. ' + nx.title)] : el('p', { class: 'dim rd-m0' }, 'This is the last slide.')),
+          el('div', { class: 'rd-pp' }, el('div', { class: 'rd-ph' }, icon('menu', 'sm'), 'Jump to'), el('ol', { class: 'rd-jump' }, slides().map((x, j) => el('li', null, btn({ 'data-rd-jump': String(j), 'aria-current': String(j === OV.i), onclick: () => ovGo(j) }, el('span', { class: 'mono' }, pad2(x.n)), x.title, S.notes.speaker[x.id] && S.notes.speaker[x.id].text ? icon('mic', 'sm') : null))))))),
+      ovBar('Presenter view · ' + name + '. Only you see this screen. Nothing is sent.'));
+    }
+    requestAnimationFrame(fitOV);
+    if (!OV.el.contains(document.activeElement)) OV.el.focus();
+  }
+
+  load();
+  return {
+    state: S,
+    node(api) { S.api = api; if (!S.loaded || !S.cyc || !S.cyc.designed) return null; paint(); return root; },
+    tools() { return S.loaded && S.cyc && S.cyc.designed && isDeck() ? [btn({ class: 'ib sm', 'aria-label': 'Present', title: 'Present', 'data-rd-act': 'present-top', onclick: () => present('pres') }, icon('play', 'sm'))] : []; },
+    present, reload: load, close: closeOV,
+  };
+}

package/workspace/public/pm/c3-report-frame.css

@@ -0,0 +1,20 @@
+/* pm/c3-report-frame.css — inside the sandboxed frame of a report render (initiative report-design-studio; c3-report-deck.js frameDoc).
+   The render brings its own <style> (linked after this sheet, so its rules win). This sheet only sets the page box and the affordances the
+   parent page wires: a source chip, a value with a detail, a part that expands, a live initiative link, and what changed since the last cycle.
+   Colours are the slide tokens of tokens.css (linked first). */
+html, body { margin: 0; padding: 0; background: var(--slide-bg); color: var(--slide-fg); font-family: var(--sans); }
+body.pmos-one { width: 1280px; height: 720px; overflow: hidden; }
+body.pmos-one > .pmos-slide { width: 1280px; height: 720px; box-sizing: border-box; overflow: hidden; }
+body.pmos-doc { overflow: hidden; }
+[data-src], [data-initiative], [data-more] { cursor: pointer; }
+[data-src] { text-decoration: underline dotted; text-underline-offset: 3px; }
+[data-value] { cursor: help; }
+[data-src]:focus-visible, [data-initiative]:focus-visible, [data-more]:focus-visible, [data-value]:focus-visible { outline: 2px solid color-mix(in oklab, var(--slide-primary) 60%, var(--slide-fg)); outline-offset: 2px; }
+[data-more] .pmos-more { display: none; }
+[data-more][data-open] .pmos-more { display: revert; }
+.pmos-chg { background: color-mix(in oklab, var(--slide-note-warning) 22%, transparent); }
+.pmos-was { margin-left: 6px; font-weight: 400; color: var(--slide-muted); white-space: nowrap; }
+/* print: one slide per 1280 x 720 page, nothing else */
+@page deck { size: 1280px 720px; margin: 0; }
+body.pmos-print-deck > .pmos-slide { page: deck; break-after: page; width: 1280px; height: 720px; overflow: hidden; box-sizing: border-box; }
+body.pmos-print-deck > .pmos-slide:last-child { break-after: auto; }