create-pmos 0.241.0 → 0.243.0

package/workspace/public/pm/c3-focus.js

@@ -28,6 +28,8 @@ import { ensureComponentsCss, button } from './primitives.js';
 import { icon, sect, pbtn, lk, ib, put } from './c3-ini-ui.js';
 import { openSheet, closeSheet } from './c3-sheet.js';
 import { toast } from './c3-toast.js';
+import * as Shots from './notes-shots.js';
+import { openAddMaterial, openItem, presentItem, audienceItem, pmosUrl } from './c3-material.js';   // the PM's own material (initiative meeting-material-replay)
 
 const POLL_MS = 3000;
 const LAST_MINUTES = 5;                 // the last minutes of the meeting: the captured items show under the stage
@@ -43,8 +45,12 @@ export function clockText(sec) {
   return (neg ? '-' : '') + (h ? h + ':' + pad(m) : String(m)) + ':' + pad(x);
 }
 /** What a link is, and how the page shows it: every link is a card; a Google Slides or Docs link also has a /preview address that the page loads only when the PM presses Show the preview here (no-network: the page reaches nothing by itself). Pure. */
+const PMOS_APP = { 'pmos-deck': 'PMOS deck', 'pmos-doc': 'PMOS document', report: 'PMOS report' };
 export function classify(url) {
   const raw = String(url || '').trim();
+  // an item PMOS itself holds (a deck, a document, a report cycle): pmos:<kind>:<workspace>:<path>. It opens in PMOS, not in a tab.
+  const pm = /^pmos:(pmos-deck|pmos-doc|report):([^:]*):(.+)$/.exec(raw);
+  if (pm) return { kind: 'pmos', pk: pm[1], app: PMOS_APP[pm[1]], url: raw, host: 'PMOS', ref: pm[3] };
   // A link pasted without its scheme (docs.google.com/…) is a web link.
   let u; try { u = new URL(/^[a-z][a-z0-9+.-]*:/i.test(raw) ? raw : 'https://' + raw); } catch { return { kind: 'link', app: 'Link', url: String(url), host: '' }; }
   const m = /^\/(presentation|document)\/d\/([A-Za-z0-9_-]+)/.exec(u.pathname);
@@ -60,7 +66,7 @@ export function classify(url) {
 let F = null;   // the open page: { id, date, root, r (regions), sig, data, offset, ui, timers, sheet, ... }
 
 function ensureCss() {
-  ensureC3Css(); ensureComponentsCss();
+  ensureC3Css(); ensureComponentsCss(); Shots.ensureListenCss();
   if (document.querySelector('link[data-c3-focus]')) return;
   const l = document.createElement('link');
   l.rel = 'stylesheet'; l.href = new URL('./c3-focus.css', import.meta.url).href; l.setAttribute('data-c3-focus', '');
@@ -211,7 +217,24 @@ function region(name, sig, build) {
   return true;
 }
 const phaseOf = () => { const n = nowMs(); const s = startMs(); const e = endMs(); return Number.isFinite(s) && n < s ? 'before' : Number.isFinite(e) && n >= e ? 'after' : 'during'; };
-const linksOf = (d) => ((d && d.event && d.event.links) || []).map((l) => ({ label: l.label, ...classify(l.url) }));
+/** The meeting's material: the links of the invite and the brief, then the PM's own (d.material, with topic and present). A PMOS deck is presented in PMOS. */
+function linksOf(d) {
+  const mine = ((d && d.material) || []).map((m) => {
+    const c = classify(['pmos-deck', 'pmos-doc', 'report'].includes(m.kind) ? pmosUrl(m) : m.url);
+    return { label: m.title || c.url, ...c, mat: m, topic: m.topic || null, you: m.present === true, ...(c.kind === 'pmos' ? { present: m.kind === 'pmos-deck' } : {}) };
+  });
+  const own = new Set(mine.map((l) => l.url));
+  const given = ((d && d.event && d.event.links) || []).map((l) => ({ label: l.label, ...classify(l.url) })).filter((l) => !own.has(l.url));
+  return [...given, ...mine].map((l, i) => ({ ...l, i }));
+}
+const normTopic = (t) => String(t || '').toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim();
+/** The material tied to the topic the room is on (by its text or its id), or null. */
+const forTopic = (links, cur) => (cur ? links.find((l) => l.topic && (normTopic(l.topic) === normTopic(cur.text) || normTopic(l.topic) === normTopic(cur.id))) || null : null);
+/** The item on the stage: the one you pressed, else the material for the topic the room is on, else the first. */
+function stagePick(d) {
+  const links = linksOf(d);
+  return (F.ui.stagePin ? links[F.ui.stage] : forTopic(links, currentOf(d))) || links[F.ui.stage] || links.find((l) => l.preview) || links[0] || null;
+}
 const topicNo = (d, id) => d.topics.findIndex((t) => t.id === id) + 1;
 const currentOf = (d) => d.topics.find((t) => t.id === d.current) || null;
 const openRunOf = (d) => (d.runs || []).filter((x) => x.to_min == null).pop() || null;
@@ -332,7 +355,7 @@ function stopBuild() {
   return [el('div', { class: 'fc-stopsheet', 'data-fc': 'stop-sheet' },
     el('p', { class: 'fc-p' }, d && d.talk ? 'PMOS keeps the notes and shows you what it caught.'
       : left > 0 ? left + ' min of the meeting is left. If you stop now, the notes use what was recorded so far.' : 'PMOS keeps the notes and writes them up from the recording.'),
-    el('div', { class: 'iacts' }, pbtn('primary', 'Stop recording', 'stop', { 'data-fc': 'stop-ok' }), pbtn('ghost', 'Keep recording', null, { 'data-fc': 'stop-keep' })))];
+    el('div', { class: 'iacts' }, pbtn('primary', 'Stop recording', 'stop', { 'data-fc': 'stop-ok' }), d && d.note && !isDemo() && !(F && F.phone) ? pbtn('outline', 'Stop and open the replay', 'play', { 'data-fc': 'stop-replay' }) : null, pbtn('ghost', 'Keep recording', null, { 'data-fc': 'stop-keep' })))];
 }
 function materialBuild() { return stageBody(F.data, phaseOf()); }
 
@@ -419,9 +442,17 @@ function trackEl(d) {
   return el('div', { class: 'fc-track', role: 'img', 'aria-label': 'What the room talked about, in order. Numbers match the topic list.' }, el('div', { class: 'fc-runs' }, ...track), el('span', { class: 'fc-nowm', 'data-fc': 'nowm' }));
 }
 
+/* Pause shots: the chip beside REC stops the pictures and keeps the sound (notes-shots.js; the same switch is on the recording chip) */
+const shotsSig = () => (Shots.active() ? Shots.chipText() : '');
+function shotsChip() {
+  const off = Shots.paused();
+  return lk({ class: 'lsn-chip' + (off ? ' off' : ''), 'data-fc': 'shots', 'aria-pressed': String(off), title: Shots.chipTitle(),
+    onclick: () => { const now = Shots.setPaused(!Shots.paused()); toast(now ? 'Shots paused. The sound is still recorded.' : 'Shots back on.'); draw(); } }, icon(off ? 'play' : 'eye', 'sm'), Shots.chipText());
+}
+
 function drawTop(d, ph) {
   const e = d.event; const rec = recState(d); const ini = (d.brief && d.brief.initiative) || null; const lt = leftText(d, ph);
-  const sig = [e.title, e.at, e.end, e.attendees, ini, e.initiative, ph, rec, lt.txt, d.topics.map((t) => t.id), d.runs, F.status === 'ok' && F.stale ? 1 : 0];
+  const sig = [e.title, e.at, e.end, e.attendees, ini, e.initiative, ph, rec, shotsSig(), lt.txt, d.topics.map((t) => t.id), d.runs, F.status === 'ok' && F.stale ? 1 : 0];
   region('top', sig, () => {
     const s = startMs(); const f = endMs();
     const people = (e.attendees || []);
@@ -440,6 +471,7 @@ function drawTop(d, ph) {
       el('div', { class: 'fc-clock', role: 'timer', 'aria-live': 'off' }, ...clock, el('div', { class: 'fc-end' }, el('span', { class: 'tag' + (lt.warn ? ' fc-warn' : ''), 'data-fc': 'proj', hidden: !lt.txt }, lt.txt))),
       el('div', { class: 'fc-acts' },
         recLabel ? el('span', { class: 'dim mono fc-recd', 'data-fc': 'rec', 'data-rec': rec, title: rec === 'recording' ? 'Recording this meeting' : '' }, rec === 'recording' ? el('span', { class: 'fc-dot' }) : null, recLabel) : null,
+        rec === 'recording' && Shots.active() ? shotsChip() : null,
         rec === 'recording' || rec === 'paused' ? pbtn('outline', 'End meeting', 'stop', { 'data-fc': 'end', title: 'Stops the recording and saves the note' })
           : rec !== 'ended' && ph !== 'after' ? pbtn('primary', 'Start recording', 'play', { 'data-fc': 'start', title: 'Records this meeting in a note' }) : null),
       trackEl(d),
@@ -484,8 +516,13 @@ function linkRow(l) {
     el('div', { class: 'nb' }, el('span', { class: 'tt' }, l.label), el('div', { class: 'chips' }, el('span', { class: 'chip2' }, icon('out', 'sm'), l.app))),
     el('div', { class: 'acts' }, openBtn(l), l.present ? presentBtn(l) : null));
 }
-const openBtn = (l) => pbtn('outline', l.kind === 'link' ? 'Open' : 'Open in ' + l.app, null, { 'data-fc': 'open-link', 'data-url': l.url, title: 'Opens it in a new tab' });
-const presentBtn = (l) => pbtn('ghost', 'Present in ' + l.app, 'play', { 'data-fc': 'present', 'data-url': l.present, title: 'Opens the deck in present mode in a new tab. Share that tab in the call.' });
+const openBtn = (l) => (l.kind === 'pmos' ? pbtn('outline', 'Open', null, { 'data-fc': 'pm-open', 'data-i': String(l.i), title: 'Opens it in PMOS' })
+  : pbtn('outline', l.kind === 'link' ? 'Open' : 'Open in ' + l.app, null, { 'data-fc': 'open-link', 'data-url': l.url, title: 'Opens it in a new tab' }));
+const presentBtn = (l) => (l.kind === 'pmos'
+  ? [pbtn('ghost', 'Audience view', 'eye', { 'data-fc': 'pm-audience', 'data-i': String(l.i), title: 'Opens the slides only, full screen, with no notes. Share the screen in the call.' }),
+    pbtn('primary', 'Present', 'play', { 'data-fc': 'pm-present', 'data-i': String(l.i), title: 'Opens the presenter view in PMOS with your speaker notes. Press Audience view before you share the screen.' })]
+  : pbtn('ghost', 'Present in ' + l.app, 'play', { 'data-fc': 'present', 'data-url': l.present, title: 'Opens the deck in present mode in a new tab. Share that tab in the call.' }));
+const addMaterialBtn = () => pbtn('outline', 'Add material', 'plus', { 'data-fc': 'mat-add', title: 'Link a PMOS document, a report or deck, or a web page to this meeting' });
 
 function beforeList(d, links) {
   const b = d.brief || {};
@@ -502,28 +539,28 @@ function beforeList(d, links) {
 function drawStage(d, ph) {
   const links = linksOf(d);
   const cur = currentOf(d);
-  const sig = [ph, links, F.ui.stage, F.ui.preview, cur && cur.text, d.brief && [d.brief.prep, d.brief.matters, d.brief.last]];
+  const sig = [ph, links, F.ui.stage, F.ui.stagePin, F.ui.preview, cur && cur.text, d.brief && [d.brief.prep, d.brief.matters, d.brief.last]];
   region('stage', sig, () => stageBody(d, ph));
 }
 /** The stage: the material the meeting links, as a card, or the loaded preview; before the start, what is prepared. The phone shows it in a sheet. */
 function stageBody(d, ph) {
   const links = linksOf(d);
   const cur = currentOf(d);
-  const embeddable = links.filter((l) => l.preview);
-  const pick = links[F.ui.stage] || embeddable[0] || links[0] || null;
+  const pick = stagePick(d);
   if (ph === 'before') {
     const rows = beforeList(d, links);
     return [sect({ ic: 'doc', title: 'Before it starts', attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': 'before' } },
-      rows.length ? el('ul', { class: 'list', role: 'list' }, ...rows) : el('div', { class: 'fold' }, icon('moon', 'sm'), 'Nothing is prepared for this meeting yet. Nothing is linked in the invite.'))];
+      rows.length ? el('ul', { class: 'list', role: 'list' }, ...rows) : [el('div', { class: 'fold' }, icon('moon', 'sm'), 'Nothing is prepared for this meeting yet. Nothing is linked in the invite.'), el('div', { class: 'iacts' }, addMaterialBtn())])];
   }
-  if (!pick) return [sect({ ic: 'doc', title: 'Material', attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': 'none' } }, el('div', { class: 'fold' }, icon('moon', 'sm'), 'No material is linked to this meeting.'))];
+  if (!pick) return [sect({ ic: 'doc', title: 'Material', attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': 'none' } }, el('div', { class: 'fold' }, icon('moon', 'sm'), 'No material is linked to this meeting.'), el('div', { class: 'iacts' }, addMaterialBtn()))];
   const right = links.length > 1 ? el('div', { class: 'seg', role: 'group', 'aria-label': 'Material', 'data-fc': 'material' },
     ...links.map((l, i) => button({ variant: 'ghost', label: [icon(l.preview ? 'doc' : 'out', 'sm'), l.app], attrs: { 'aria-pressed': String(l === pick), 'data-fc': 'material-pick', 'data-i': String(i), title: l.label } }))) : null;
   const body = pick.preview && F.ui.preview === pick.url
     ? [el('div', { class: 'fc-frame', 'data-fc': 'preview-wrap' }, el('iframe', { src: pick.preview, title: 'Preview of ' + pick.label + ' in ' + pick.app, loading: 'lazy', referrerpolicy: 'no-referrer', allow: 'fullscreen',
       sandbox: 'allow-scripts allow-same-origin allow-popups allow-forms', 'data-fc': 'preview', 'data-app': pick.kind })),
     el('div', { class: 'fc-strip' }, el('span', { class: 'dim mono fc-src' }, icon('lock', 'sm'), 'Shown by ' + pick.app + ' itself. PMOS shows nothing to the room.'), el('span', { class: 'fc-grow' }), openBtn(pick), pick.present ? presentBtn(pick) : null)]
-    : [el('div', { class: 'fc-card', 'data-fc': 'link-card' }, el('span', { class: 'ki' }, icon(pick.preview ? 'doc' : 'out')), el('div', { class: 'nb' }, el('b', null, pick.label), el('span', { class: 'dim mono' }, pick.app + (pick.host && pick.host !== pick.app ? ' · ' + pick.host : ''))), openBtn(pick), pick.present ? presentBtn(pick) : null),
+    : [el('div', { class: 'fc-card', 'data-fc': 'link-card', 'data-fc-kind': pick.kind }, el('span', { class: 'ki' }, icon(pick.kind === 'pmos' ? (pick.pk === 'pmos-doc' ? 'doc' : 'report') : pick.preview ? 'doc' : 'out')),
+      el('div', { class: 'nb' }, el('b', null, pick.label), el('span', { class: 'dim mono' }, pick.app + (pick.host && pick.host !== pick.app ? ' · ' + pick.host : '') + (pick.topic ? ' · for ' + pick.topic : '') + (pick.you ? ' · you present it' : ''))), openBtn(pick), pick.present ? presentBtn(pick) : null),
       pick.preview ? el('div', { class: 'fc-strip' }, el('span', { class: 'dim mono fc-src' }, icon('lock', 'sm'), 'PMOS loads nothing from ' + pick.app + ' until you ask.'), el('span', { class: 'fc-grow' }),
         button({ variant: 'outline', label: [icon('eye', 'sm'), 'Show the preview here'], attrs: { 'data-fc': 'preview-on', title: 'Load the ' + pick.app + ' preview into this page' } })) : null];
   return [sect({ ic: 'doc', title: cur ? 'Material · ' + cur.text : 'Material', right, attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': pick.preview && F.ui.preview === pick.url ? pick.kind : 'card' } }, ...body)];
@@ -719,6 +756,7 @@ async function ask(question) {
 function tick() {
   if (!F || !F.data) return;
   const d = F.data; const n = nowMs(); const s = startMs(); const f = endMs();
+  if (F.shotsSeen !== shotsSig()) { const first = F.shotsSeen === undefined; F.shotsSeen = shotsSig(); if (!first) { draw(); return; } }   // Pause shots was pressed elsewhere
   if (phaseOf() !== F.sig.phase) { F.sig.phase = phaseOf(); if (F.sig.phaseSet) { draw(); return; } F.sig.phaseSet = true; }
   const set = (k, v) => { for (const x of document.querySelectorAll('[data-fc="' + k + '"]')) if (x.textContent !== v) x.textContent = v; };
   const ph = phaseOf();
@@ -858,6 +896,22 @@ async function endMeeting() {
 
 /* ── presses ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 
+/** Add material, and Open, Present and Audience view of the PM's PMOS material. True when the press was one of these. */
+function materialPress(k, t) {
+  const d = F && F.data; if (!d) return false;
+  if (k === 'mat-add') {
+    const e = d.event || {};
+    openAddMaterial({ event: { id: e.id, title: e.title, at: e.at, series: e.series, initiative: e.initiative, links: e.links }, date: d.date, brief: d.brief });
+    return true;
+  }
+  if (k !== 'pm-open' && k !== 'pm-present' && k !== 'pm-audience') return false;
+  const l = linksOf(d)[Number(t.dataset.i)];
+  if (l && l.mat) (k === 'pm-present' ? presentItem : k === 'pm-audience' ? audienceItem : openItem)(l.mat);
+  return true;
+}
+// the material was added or removed on the Calendar card or in the sheet: read the meeting again, so it shows at once
+window.addEventListener('c3-material-changed', () => { if (F && !F.noteId) load(); });
+
 function onClick(ev) {
   const t = ev.target.closest('[data-fc]'); if (!t || !F || !F.root.contains(t)) return;
   const k = t.dataset.fc; const d = F.data;
@@ -866,6 +920,7 @@ function onClick(ev) {
   if (k === 'pop-open') { openFull(); return; }
   if (k === 'choice') { const c = (F.choices || [])[Number(t.dataset.i)]; if (c) chooseMeeting(c, String(c.at || '').slice(0, 10)); return; }
   if (!d) return;
+  if (materialPress(k, t)) return;
   if (k === 'topics') { showSheet('topics', 'Topics', 'todo', topicsBuild); return; }
   if (k === 'captured') { showSheet('captured', 'Captured so far', 'check', capturedBuild); return; }
   if (k === 'note' && F.phone) { openNoteSheet(); return; }
@@ -873,8 +928,8 @@ function onClick(ev) {
   if (k === 'stop') { showSheet('stop', d.talk ? 'Stop recording?' : 'Stop recording ' + d.event.title + '?', 'stop', stopBuild); return; }
   if (k === 'note') { const id = d.note && d.note.id; closeFocus(); if (id) window.dispatchEvent(new CustomEvent('c3-open-note', { detail: { id } })); return; }
   if (k === 'chip') { openChip(F.chips[Number(t.dataset.i)]); return; }
-  if (k === 'preview-on') { const ls = linksOf(d); const pk = ls[F.ui.stage] || ls.find((l) => l.preview) || ls[0]; F.ui.preview = pk && pk.url; drawStage(d, phaseOf()); return; }
-  if (k === 'material-pick') { F.ui.stage = Number(t.dataset.i) || 0; drawStage(d, phaseOf()); return; }
+  if (k === 'preview-on') { const pk = stagePick(d); F.ui.preview = pk && pk.url; drawStage(d, phaseOf()); return; }
+  if (k === 'material-pick') { F.ui.stage = Number(t.dataset.i) || 0; F.ui.stagePin = true; drawStage(d, phaseOf()); return; }
   if (k === 'open-link' || k === 'present') { openUrl(t.dataset.url); return; }
   if (k === 'start') { startRecording(); return; }
   if (k === 'end') { endMeeting(); return; }
@@ -896,6 +951,7 @@ document.addEventListener('click', (ev) => {
   if (!F || !F.sheetOpen || !F.sheet) return;
   const t = ev.target.closest && ev.target.closest('[data-shell="sheet"] [data-fc]'); if (!t) return;
   const k = t.dataset.fc;
+  if (materialPress(k, t)) return;
   if (k === 'picker') { F.ui.picker = !F.ui.picker; F.ui.newTopic = false; refreshSheet(); return; }
   if (k === 'new-topic') { F.ui.newTopic = true; refreshSheet(); return; }
   if (k === 'pick') { const text = t.dataset.text; postTopic('set', text).then((ok) => { if (ok) { closeSheet(); toast('Now on: ' + text + '.'); } }); return; }
@@ -907,10 +963,21 @@ document.addEventListener('click', (ev) => {
   }
   if (k === 'add-topic') { F.ui.addTopic = !F.ui.addTopic; refreshSheet(); return; }
   if (k === 'open-link' || k === 'present') { openUrl(t.dataset.url); return; }
-  if (k === 'preview-on') { const ls = linksOf(F.data); const pk = ls[F.ui.stage] || ls.find((l) => l.preview) || ls[0]; F.ui.preview = pk && pk.url; refreshSheet(true); return; }
-  if (k === 'material-pick') { F.ui.stage = Number(t.dataset.i) || 0; refreshSheet(true); return; }
+  if (k === 'preview-on') { const pk = stagePick(F.data); F.ui.preview = pk && pk.url; refreshSheet(true); return; }
+  if (k === 'material-pick') { F.ui.stage = Number(t.dataset.i) || 0; F.ui.stagePin = true; refreshSheet(true); return; }
   if (k === 'note-tab') { F.ui.noteTab = t.dataset.tab === 'said' ? 'said' : 'note'; refreshSheet(true); return; }
   if (k === 'stop-keep') { closeSheet(); return; }
   if (k === 'pull') { const id = t.dataset.id; F.ui.pulled.push(id); (F.pulledAt ||= {})[id] = nowMs(); F.ui.ni = null; closeSheet(); drawConversation(F.data); return; }
   if (k === 'stop-ok') { closeSheet(); endMeeting().then(() => { if (F && F.phone) closeFocus(); }); return; }
+  if (k === 'stop-replay') { endAndReplay(); return; }   // End and open the replay
 });
+
+/** Stop the recording, leave Focus and open the meeting replay on the note (c3-replay.js). */
+async function endAndReplay() {
+  const f = F; const note = f && f.data && f.data.note && f.data.note.id; if (!f || !note) return;
+  closeSheet();
+  await endMeeting();
+  if (F !== f) return;
+  closeFocus();
+  import('./c3-replay.js').then((m) => m.openReplay({ note })).catch(() => toast('The replay could not load.'));
+}

package/workspace/public/pm/c3-listen.css

@@ -0,0 +1,10 @@
+/* c3-listen.css — the Listen sheet, the set-aside review and the Pause-shots chip (initiative meeting-material-replay, part 3).
+ * Loaded by listen-sheet.js (ensureListenCss) and by the Focus page. Every rule is under .lsn- or .fc-shots so it changes nothing else. */
+.c3 .lsn { display: grid; gap: var(--sp-3); }
+.c3 .lsn-warn, .c3 .tag.lsn-warn { color: var(--warning); }
+.c3 .lsn-help { margin: 0; }
+.c3 .lsn-aside { align-items: center; }
+.c3 .lsn-thumb { width: 148px; height: 84px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--border); background: var(--muted); }
+.c3 .lsn-chip { font-size: 12px; }
+.c3 .lsn-chip.off { color: var(--warning); }
+@media (max-width: 640px) { .c3 .lsn-thumb { width: 96px; height: 60px; } }

package/workspace/public/pm/c3-material.css

@@ -0,0 +1,22 @@
+/* pm/c3-material.css — meeting material (initiative meeting-material-replay, part 1): the Material part of the Calendar's meeting card, the Add material sheet
+ * and the PMOS deck on the Focus stage. Tokens only. Classes are .mm- under .c3; the sheet and the card are drawn with the console3 classes they already use. */
+.c3 .mm h4 .bdg { margin-left: 4px; }
+.c3 .mm-row { align-items: center; }
+.c3 .mm-row .cal3-ct { display: grid; gap: 2px; min-width: 0; }
+.c3 .mm-meta { font-size: var(--fs-1); }
+.c3 .mm-row .ib.sm { width: 24px; height: 24px; }
+.c3 .mm .mm-foot { align-items: center; margin-top: 6px; }
+.c3 .mm-sheet { display: grid; gap: var(--sp-3); }
+.c3 .mm-in { width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); color: var(--foreground); font: inherit; font-size: var(--fs-3); }
+.c3 .mm-in:focus-visible { outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground)); outline-offset: 1px; }
+.c3 .mm-opt.on { background: color-mix(in srgb, var(--acc) 7%, transparent); border-radius: 8px; }
+.c3 .mm-why, .c3 .mm-sel { color: var(--acc); }
+.c3 .mm-opt .nb { min-width: 0; }
+.c3 .mm-opt .chips { flex-wrap: wrap; min-width: 0; }
+.c3 .mm-opt .tag { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
+.c3 .mm-set { border-color: color-mix(in srgb, var(--acc) 40%, var(--border)); }
+.c3 .mm-f { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 0; }
+.c3 .mm-f .mk-lbl { padding: 0; }
+.c3 .mm-wrap { flex-wrap: wrap; height: auto; }
+@media (max-width: 640px) { .c3 .mm-f { grid-template-columns: minmax(0, 1fr); } }
+@media (pointer: coarse) { .c3 .mm-in { min-height: 44px; } }

package/workspace/public/pm/c3-material.js

@@ -0,0 +1,321 @@
+/* pm/c3-material.js — the material of a meeting (initiative meeting-material-replay, part 1; the mockup the PM approved on 2026-10-14, hashes #material, #material-add, #focus-material).
+ *
+ *   materialSection({ event, date, ws, level, brief, back }) → Node    the Material part of the meeting card: each linked item with its kind, topic and source,
+ *                                                                       Present or Open, remove, and Add material
+ *   openAddMaterial({ event, date, ws, level, brief, back })           the Add material sheet: Suggested from the meeting's level, Find in PMOS, Or paste a link; For,
+ *                                                                       Topic and You (Present it / Only read it)
+ *   openItem(item) · presentItem(item) · audienceItem(item)            Open in PMOS or in a new tab; Present (a PMOS deck in the presenter view, Google Slides in present
+ *                                                                       mode); the audience view of a PMOS deck
+ *   classifyLink(url) · KIND · pmosUrl(item)
+ *   window.C3Material = { open(event, opts), section, openItem, presentItem, audienceItem }   for any page that wants to add or show material
+ *
+ * It reads and writes GET and POST /api/meeting-material (lib/routes-meeting-material.js). PMOS keeps the link on its own record of the meeting; the calendar invite is not
+ * changed. A change fires `c3-material-changed` on window, so the card and Focus read again. Nothing is sent anywhere. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { ensureC3Css } from './pm-work-view.js';
+import { ensureComponentsCss } from './primitives.js';
+import { icon, pbtn, sect, put, lk, ib, list, empty } from './c3-ini-ui.js';
+import { openSheet, closeSheet } from './c3-sheet.js';
+import { toast } from './c3-toast.js';
+import { openAudienceWindow } from './c3-audience-link.js';
+
+/** What each kind of item is called, and which icon it takes. `deck`: PMOS presents it itself. `present`: it can be presented at all. */
+export const KIND = {
+  'pmos-deck': { tag: 'PMOS deck', ic: 'report', deck: true, present: true },
+  'pmos-doc': { tag: 'PMOS document', ic: 'doc' },
+  report: { tag: 'PMOS report', ic: 'report' },
+  slides: { tag: 'Google Slides', ic: 'out', present: true },
+  gdoc: { tag: 'Google Docs', ic: 'out' },
+  conf: { tag: 'Confluence', ic: 'out' },
+  link: { tag: 'Link', ic: 'out' },
+};
+const BY = { invite: 'from the invite', brief: 'found by today’s brief', you: 'added by you' };
+const isPmos = (k) => k === 'pmos-deck' || k === 'pmos-doc' || k === 'report';
+
+function ensureCss() {
+  ensureC3Css(); ensureComponentsCss();
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-material]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-material.css', import.meta.url).href; l.setAttribute('data-c3-material', '');
+  document.head.appendChild(l);
+}
+const wsParam = () => { try { return new URLSearchParams(location.search).get('ws') || ''; } catch { return ''; } };
+const pad = (n) => String(n).padStart(2, '0');
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const dateText = (iso) => { const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso || '')); return m ? (+m[3]) + ' ' + MON[+m[2] - 1] : ''; };
+const timeText = (iso) => { const d = new Date(iso); return Number.isFinite(d.getTime()) ? pad(d.getHours()) + ':' + pad(d.getMinutes()) : ''; };
+
+/** What an address is, as the server decides it (lib/meeting-material.js classifyUrl). null for anything that is not an https address. */
+export function classifyLink(raw) {
+  const s = String(raw || '').trim();
+  if (!s || /\s/.test(s)) return null;
+  let u; try { u = new URL(/^[a-z][a-z0-9+.-]*:/i.test(s) ? s : 'https://' + s); } catch { return null; }
+  if (u.protocol !== 'https:' || !u.hostname.includes('.')) return null;
+  if (u.hostname === 'docs.google.com' && /^\/presentation\/d\//.test(u.pathname)) return { kind: 'slides', url: u.href, title: 'Google Slides deck', meta: 'read through your Google Drive connection' };
+  if (u.hostname === 'docs.google.com' && /^\/document\/d\//.test(u.pathname)) return { kind: 'gdoc', url: u.href, title: 'Google Docs page', meta: 'read through your Google Drive connection' };
+  if (/\.atlassian\.net$/.test(u.hostname) && u.pathname.startsWith('/wiki')) return { kind: 'conf', url: u.href, title: 'Confluence page', meta: 'read through your Atlassian connection' };
+  return { kind: 'link', url: u.href, title: u.hostname, meta: 'opens in a new tab · PMOS does not read it' };
+}
+/** The pseudo address Focus gives a PMOS item, so its link list can hold it beside web links (c3-focus.js classify). */
+export const pmosUrl = (item) => 'pmos:' + item.kind + ':' + (item.ws || '') + ':' + item.ref;
+
+/* ── what is stored ───────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const evParams = (event, extra) => {
+  const e = event || {};
+  const p = new URLSearchParams({ title: String(e.title || e.id || '') });
+  if (e.id) p.set('event', String(e.id));
+  if (e.series) p.set('series', String(e.series));
+  const date = (extra && extra.date) || String(e.at || e.start || '').slice(0, 10);
+  if (date) p.set('date', date);
+  const ws = (extra && extra.ws) || wsParam(); if (ws) p.set('ws', ws);
+  if (extra && extra.topics) p.set('topics', '1');
+  return p;
+};
+const evKey = (e) => (e && (e.id || e.title)) + '|' + ((e && e.series) || '');
+const CACHE = new Map();   // event key → { items, at }
+const FRESH_MS = 4000;
+
+async function readItems(event, extra) {
+  const r = await pmGet('/api/meeting-material?' + evParams(event, extra).toString()).catch(() => null);
+  if (r && r.ok && Array.isArray(r.items)) { CACHE.set(evKey(event), { items: r.items, at: Date.now() }); return r; }
+  return null;
+}
+const changed = (event) => { try { window.dispatchEvent(new CustomEvent('c3-material-changed', { detail: { key: evKey(event) } })); } catch { /* no window */ } };
+
+async function save(event, body) {
+  const e = event || {};
+  const r = await pmPost('/api/meeting-material', { event: { id: e.id || undefined, title: e.title || e.id, series: e.series || undefined }, ...body }).catch((err) => ({ ok: false, error: String((err && err.message) || err) }));
+  if (!r || !r.ok) { toast({ text: 'The material was not saved: ' + ((r && (r.error || r.reason)) || 'no answer') + '.', tone: 'error', timeout: 6000 }); return null; }
+  CACHE.set(evKey(event), { items: r.items || [], at: Date.now() });
+  changed(event);
+  return r;
+}
+
+/* ── open and present ─────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function openWeb(url) { try { window.open(url, '_blank', 'noopener,noreferrer'); } catch { /* a blocked pop-up */ } }
+const slidesPresentUrl = (url) => { const m = /^(https:\/\/docs\.google\.com\/presentation\/d\/[A-Za-z0-9_-]+)/.exec(String(url || '')); return m ? m[1] + '/present' : url; };
+
+async function openDocument(item) {
+  try {
+    const { openDocSheet } = await import('./c3-doc-sheet.js');
+    const ws = item.ws || wsParam();
+    openDocSheet({ ws, doc: { path: item.ref, name: item.title || item.ref, ty: 'Document', v: '', st: 'current', ini: '', iniName: '' },
+      library: () => Promise.resolve(pmGet('/api/docs/library' + (ws ? '?ws=' + encodeURIComponent(ws) : ''))).catch(() => ({ ok: true, files: [], edges: [], kinds: [], categories: [], initiatives: {} })) });
+  } catch { toast('The document sheet could not open. The file is ' + item.ref + '.'); }
+}
+async function openReport(item) {
+  try {
+    const store = await import('./c3-report-store.js');
+    const setup = await import('./c3-report-setup.js');
+    await store.loadReports(item.ws || wsParam(), true);
+    const d = store.RS.docs.find((x) => x.path === item.ref);
+    if (d) { setup.openReportDoc(d); return; }
+  } catch { /* fall back to the plain document */ }
+  openDocument(item);
+}
+/** Open an item: a PMOS item in PMOS (the document sheet), a link in a new tab. */
+export function openItem(item) {
+  if (!item) return;
+  if (item.kind === 'pmos-doc') return openDocument(item);
+  if (isPmos(item.kind)) return openReport(item);
+  if (item.url) openWeb(item.url);
+}
+
+/** The presenter view (or the audience view) of a PMOS deck: the report deck's own (c3-report-deck.js), with your speaker notes. */
+async function showDeck(item, mode) {
+  let deck = null;
+  try {
+    const { createDeck } = await import('./c3-report-deck.js');
+    deck = createDeck({ ws: item.ws || wsParam(), path: item.ref, name: item.title || 'Deck', cycle: '' });
+    const t0 = Date.now();
+    while (!deck.state.loaded && Date.now() - t0 < 10000) await new Promise((r) => setTimeout(r, 60));
+  } catch { deck = null; }
+  const S = deck && deck.state;
+  if (!S || !S.loaded || !S.cyc || !S.cyc.designed || !S.R || S.R.format !== 'deck') {
+    toast('This report has no designed deck yet, so it opens as a document.');
+    return openItem(item);
+  }
+  deck.present(mode);
+}
+export function presentItem(item) {
+  if (!item) return;
+  if (item.kind === 'slides') return openWeb(slidesPresentUrl(item.url));
+  if (item.kind === 'pmos-deck') return showDeck(item, 'pres');
+  return openItem(item);
+}
+/** Audience view: a PMOS deck opens in a window of its own, slides only (initiative meeting-material-replay-gaps). The window opens at once, on the press, because a browser
+ *  blocks a window that opens after a wait. When it is blocked a notice says so and offers the full-screen view in this window. */
+export function audienceItem(item) {
+  if (item && item.kind === 'pmos-deck') {
+    if (openAudienceWindow({ ws: item.ws || wsParam(), path: item.ref, name: item.title || 'Deck' })) return;
+    toast({ text: 'The audience window was blocked. Allow pop-ups for this page, or use the full-screen view here.', actionLabel: 'Full-screen view here', timeout: 10000, onAction: () => showDeck(item, 'aud') });
+    return;
+  }
+  return openItem(item);
+}
+
+/* ── the Material part of the meeting card ────────────────────────────────────────────────────────────────────────── */
+
+/** The links the invite and today's brief already carry, as read-only rows. */
+function givenRows(event, brief) {
+  const seen = new Set(); const rows = [];
+  const add = (label, url, from) => {
+    const c = classifyLink(url); if (!c || seen.has(c.url)) return;
+    seen.add(c.url); rows.push({ id: from + ':' + c.url, kind: c.kind, url: c.url, title: label || c.title, topic: null, present: false, scope: null, from });
+  };
+  for (const l of (event && Array.isArray(event.links) ? event.links : [])) add(l && l.label, l && l.url, 'invite');
+  for (const l of (brief && Array.isArray(brief.links) ? brief.links : [])) add(l && l.label, l && l.url, 'brief');
+  for (const r of (brief && Array.isArray(brief.refs) ? brief.refs : [])) if (r && r.link) add(r.label, r.link, 'brief');
+  return rows;
+}
+
+function rowOf(item, o) {
+  const k = KIND[item.kind] || KIND.link;
+  const canPresent = !!item.present && k.present;
+  const where = item.scope === 'series' ? 'every meeting in the series' : item.scope === 'meeting' ? 'this meeting' : '';
+  const meta = [item.topic ? 'for ' + item.topic : null, BY[item.from] || BY.you, where || null, canPresent ? 'you present it' : null].filter(Boolean).join(' · ');
+  const act = canPresent
+    ? lk({ 'data-mm-act': 'present', title: item.kind === 'slides' ? 'Opens it in Google Slides in present mode. Share that tab in the call.' : 'Opens the presenter view in PMOS. Press Audience view before you share the screen.', onclick: () => presentItem(item) }, icon('play', 'sm'), 'Present')
+    : lk({ 'data-mm-act': 'open', title: isPmos(item.kind) ? 'Opens it in PMOS' : 'Opens it in a new tab', onclick: () => openItem(item) }, icon('out', 'sm'), 'Open');
+  const rm = item.from === 'you' ? ib('Remove ' + item.title, 'x', { 'data-mm-act': 'remove', title: 'Remove from this meeting. The document itself is not changed.',
+    onclick: async () => {
+      const r = await save(o.event, { op: 'remove', scope: item.scope, item: isPmos(item.kind) ? { kind: item.kind, ref: item.ref, ws: item.ws || undefined } : { url: item.url } });
+      if (r) toast('Removed from the meeting. The document itself is not changed.');
+    } }) : null;
+  return el('li', { class: 'cal3-ci mm-row', 'data-mm-item': item.kind, 'data-mm-from': item.from, ...(item.topic ? { 'data-mm-topic': item.topic } : {}) },
+    el('span', { class: 'tag' }, k.tag), el('span', { class: 'cal3-ct' }, item.title, el('span', { class: 'dim mm-meta' }, meta)), act, rm);
+}
+
+function sectionBody(o, items) {
+  const rows = [...givenRows(o.event, o.brief), ...(items || [])];
+  return [
+    el('h4', null, icon('doc', 'sm'), 'Material ', el('span', { class: 'bdg g', 'data-mm': 'count' }, String(rows.length))),
+    rows.length ? el('ul', { class: 'cal3-cl', role: 'list' }, ...rows.map((r) => rowOf(r, o))) : el('div', { class: 'fold', 'data-mm': 'none' }, icon('info', 'sm'), items ? 'Nothing is linked to this meeting yet.' : 'Reading the material of this meeting.'),
+    el('div', { class: 'chips2 mm-foot' }, pbtn('outline', 'Add material', 'plus', { 'data-mm': 'add', onclick: () => openAddMaterial(o) }), el('span', { class: 'dim cal3-note' }, 'Shows in Focus, by topic. Your calendar invite is not changed.')),
+  ];
+}
+
+/** The Material part of the meeting card (before the meeting). It draws what it holds at once and reads again when it is older than a few seconds. */
+export function materialSection(o) {
+  ensureCss();
+  const box = el('div', { class: 'cal3-ctx mm', 'data-mm': 'section', 'data-cal3-ctx': 'material' });
+  const key = evKey(o.event);
+  const draw = () => { const c = CACHE.get(key); put(box, ...sectionBody(o, c ? c.items : null)); };
+  draw();
+  const heard = () => { if (!box.isConnected) return; draw(); };
+  const onChanged = (ev) => { if (!box.isConnected) { window.removeEventListener('c3-material-changed', onChanged); return; } if (!ev.detail || ev.detail.key === key) draw(); };
+  window.addEventListener('c3-material-changed', onChanged);
+  const c = CACHE.get(key);
+  if (!c || Date.now() - c.at > FRESH_MS) readItems(o.event, { date: o.date, ws: o.ws }).then((r) => { if (r) heard(); });
+  return box;
+}
+
+/* ── the Add material sheet ───────────────────────────────────────────────────────────────────────────────────────── */
+
+const levelIni = (o) => {
+  const lv = o.level; const b = o.brief; const e = o.event || {};
+  if (lv && lv.kind === 'initiative' && lv.id) return lv.id;
+  if (lv && lv.kind) return '';
+  return (b && b.initiative && b.initiative.id) || (typeof e.initiative === 'string' ? e.initiative : '') || '';
+};
+
+function pickRow(it, on, onPick) {
+  const k = KIND[it.kind] || KIND.link;
+  return el('li', { class: 'nrow mm-opt' + (on ? ' on' : ''), 'data-mm-opt': it.kind },
+    el('span', { class: 'ki' }, icon(k.ic)),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, it.title),
+      el('div', { class: 'chips' }, el('span', { class: 'chip2' }, icon(k.ic, 'sm'), k.tag), it.meta ? el('span', { class: 'tag' }, it.meta) : null,
+        it.why ? el('span', { class: 'tag mm-why' }, icon('spark', 'sm'), it.why) : null)),
+    el('div', { class: 'acts' }, on ? el('span', { class: 'tag mm-sel' }, icon('check', 'sm'), 'Picked') : pbtn('ghost', 'Pick', null, { 'data-mm-pick': '', onclick: () => onPick(it) })));
+}
+
+/** Add material: Suggested from the meeting's level, Find in PMOS, Or paste a link; then For, Topic and You. */
+export function openAddMaterial(o) {
+  ensureCss();
+  const event = o.event || {};
+  const S = { pick: null, scope: 'meeting', topic: null, present: true, q: '', link: '', sug: null, found: [], topics: [], busy: false, token: 0 };
+  const root = el('div', { class: 'mm-sheet', 'data-mm': 'sheet' });
+  const sugBox = el('div', { 'data-mm': 'suggested' });
+  const foundBox = el('div', { 'data-mm': 'found' });
+  const pasteBox = el('div', { 'data-mm': 'pasted' });
+  const optsBox = el('div', { 'data-mm': 'options' });
+  const findIn = el('input', { class: 'mm-in', type: 'search', 'data-mm': 'find', placeholder: 'A document, report or deck', 'aria-label': 'Find a document, report or deck in PMOS', autocomplete: 'off' });
+  const linkIn = el('input', { class: 'mm-in', type: 'url', 'data-mm': 'link', placeholder: 'Google Slides, Google Docs, Confluence or any web page', 'aria-label': 'Paste a link', autocomplete: 'off' });
+  let timer = null;
+
+  const pasted = () => { const c = classifyLink(S.link); return c ? { kind: c.kind, url: c.url, title: c.title, meta: c.meta, present: c.kind === 'slides' } : null; };
+  const same = (a, b) => !!a && !!b && a.kind === b.kind && (a.ref || a.url) === (b.ref || b.url);
+  const choose = (it) => { S.pick = it; S.present = !!(KIND[it.kind] && KIND[it.kind].present) && it.present !== false; paint(); };
+
+  function paint() {
+    put(sugBox, S.sug == null ? el('div', { class: 'fold' }, icon('info', 'sm'), 'Looking in PMOS.') : S.sug.length ? list(S.sug.map((it) => pickRow(it, same(it, S.pick), choose)), { role: 'list' }) : empty('Nothing to suggest yet. Search below, or paste a link.'));
+    put(foundBox, S.q.length >= 2 ? (S.found.length ? list(S.found.map((it) => pickRow(it, same(it, S.pick), choose)), { role: 'list' }) : el('div', { class: 'fold' }, icon('info', 'sm'), S.busy ? 'Searching.' : 'Nothing in PMOS matches that.')) : null);
+    const p = pasted();
+    put(pasteBox, p ? list([pickRow(p, same(p, S.pick), choose)], { role: 'list' }) : el('p', { class: 'dim cal3-note' }, S.link ? 'Paste an https address.' : 'Google Slides gets Present. A web page opens in a new tab and PMOS does not read it.'));
+    put(optsBox, S.pick ? settings() : null);
+  }
+  const seg = (label, rows, cur, key) => el('div', { class: 'seg mm-wrap', role: 'group', 'aria-label': label }, ...rows.map(([v, l]) => pbtn('ghost', l, null, { 'aria-pressed': String(cur === v), [key]: String(v), onclick: () => { S[key === 'data-mm-scope' ? 'scope' : key === 'data-mm-topic' ? 'topic' : 'present'] = v; paint(); } })));
+  function settings() {
+    const pick = S.pick; const k = KIND[pick.kind] || KIND.link;
+    const canPresent = !!k.present;
+    const topicName = S.topic;
+    const where = event.series ? 'Every meeting in the series' : 'Every meeting with this title';
+    const note = canPresent
+      ? (pick.kind === 'slides' ? 'Present opens it in Google Slides in present mode. You share that tab in the call. ' : 'Present opens the presenter view in PMOS with your speaker notes. The presenter view and the audience view are one switch: press Audience view, then share the screen in the call. ')
+      : '';
+    const focusNote = topicName ? 'Focus brings it up when the room gets to ' + topicName + '.' : 'Focus keeps it under Material for the whole meeting.';
+    return sect({ ic: 'settings', title: 'How it shows', attrs: { class: 'mm-set', 'data-mm': 'settings' } },
+      el('div', { class: 'mm-f' }, el('span', { class: 'mk-lbl dim mono' }, 'For'),
+        seg('For', [['meeting', 'This meeting · ' + [dateText(String(event.at || event.start || o.date || '')), timeText(event.at || event.start)].filter(Boolean).join(' ')], ['series', where]], S.scope, 'data-mm-scope')),
+      S.topics.length ? el('div', { class: 'mm-f' }, el('span', { class: 'mk-lbl dim mono' }, 'Topic'),
+        el('div', { class: 'seg mm-wrap', role: 'group', 'aria-label': 'Topic' },
+          ...S.topics.map((t, i) => pbtn('ghost', (i + 1) + '. ' + t.text, null, { 'aria-pressed': String(S.topic === t.text), 'data-mm-topic': t.id, onclick: () => { S.topic = t.text; paint(); } })),
+          pbtn('ghost', 'Whole meeting', null, { 'aria-pressed': String(S.topic == null), 'data-mm-topic': 'none', onclick: () => { S.topic = null; paint(); } }))) : null,
+      canPresent ? el('div', { class: 'mm-f' }, el('span', { class: 'mk-lbl dim mono' }, 'You'), seg('Do you present it', [[true, 'Present it'], [false, 'Only read it']], S.present, 'data-mm-pres')) : null,
+      el('p', { class: 'dim cal3-note' }, note + focusNote),
+      el('div', { class: 'iacts' }, pbtn('primary', 'Add to the meeting', 'plus', { 'data-mm': 'do', onclick: add }), pbtn('ghost', 'Cancel', null, { 'data-mm': 'cancel', onclick: () => { S.pick = null; paint(); } })));
+  }
+  async function add() {
+    const pick = S.pick; if (!pick) return;
+    const item = isPmos(pick.kind) ? { kind: pick.kind, ref: pick.ref, title: pick.title, ws: pick.ws || undefined } : { url: pick.url, title: pick.title };
+    const r = await save(event, { op: 'add', scope: S.scope, item, topic: S.topic || undefined, present: S.present && !!(KIND[pick.kind] || {}).present });
+    if (!r) return;
+    closeSheet();
+    toast('Added to ' + (S.scope === 'series' ? 'every meeting in the series' : 'this meeting') + '. Focus shows it' + (S.topic ? ' at ' + S.topic : '') + '.');
+  }
+
+  findIn.addEventListener('input', () => {
+    S.q = findIn.value.trim(); S.busy = S.q.length >= 2; S.found = []; paint();
+    clearTimeout(timer);
+    if (!S.busy) return;
+    const my = ++S.token;
+    timer = setTimeout(async () => {
+      const p = new URLSearchParams({ q: S.q }); const ws = o.ws || wsParam(); if (ws) p.set('ws', ws);
+      const r = await pmGet('/api/meeting-material/suggest?' + p.toString()).catch(() => null);
+      if (my !== S.token) return;
+      S.busy = false; S.found = r && r.ok && Array.isArray(r.found) ? r.found : []; paint();
+    }, 220);
+  });
+  linkIn.addEventListener('input', () => { S.link = linkIn.value.trim(); const p = pasted(); if (p) S.pick = p; else if (S.pick && !S.pick.ref && S.pick.url) S.pick = null; paint(); });
+
+  put(root,
+    el('p', { class: 'dim cal3-note' }, (event.title || 'This meeting') + (event.at || event.start ? ' · ' + dateText(event.at || event.start) + ' ' + timeText(event.at || event.start) : '') + '. PMOS keeps the link on its record of this meeting. The invite in your calendar is not changed.'),
+    sect({ ic: 'spark', title: 'Suggested for this meeting', attrs: { 'data-mm': 'suggest-sect' } }, sugBox),
+    sect({ ic: 'search', title: 'Find in PMOS' }, findIn, foundBox),
+    sect({ ic: 'out', title: 'Or paste a link' }, linkIn, pasteBox),
+    optsBox);
+  paint();
+  openSheet({ title: 'Add material', icon: 'doc', wide: true, body: [el('div', { class: 'c3x' }, root)], onClose: () => { clearTimeout(timer); if (typeof o.back === 'function') { try { o.back(); } catch { /* the page is gone */ } } } });
+
+  const ini = levelIni(o);
+  const p = new URLSearchParams(); const ws = o.ws || wsParam(); if (ws) p.set('ws', ws); if (ini) p.set('initiative', ini);
+  pmGet('/api/meeting-material/suggest?' + p.toString()).then((r) => { S.sug = r && r.ok && Array.isArray(r.suggested) ? r.suggested : []; paint(); }).catch(() => { S.sug = []; paint(); });
+  readItems(event, { date: o.date, ws: o.ws, topics: true }).then((r) => { S.topics = r && Array.isArray(r.topics) ? r.topics : []; paint(); });
+}
+
+if (typeof window !== 'undefined') {
+  window.C3Material = { open: (event, opts) => openAddMaterial({ event, ...(opts || {}) }), section: materialSection, openItem, presentItem, audienceItem, KIND };
+}