create-pmos 0.529.0 → 0.531.0

package/workspace/lib/report-engine.js

@@ -456,6 +456,10 @@ function textsOf(report) {
   if (isObj(report.answer)) { add('answer', report.answer.text); (report.answer.supports || []).forEach((s, i) => add(`answer.supports[${i}]`, s)); }
   (report.sections || []).forEach((s, i) => {
     add(`sections[${i}].title`, s.title);
+    add(`sections[${i}].eyebrow`, s.eyebrow); add(`sections[${i}].sub`, s.sub);
+    // a section bound to a library layout (lib/report-slides.js): every text in its data and its insight is the writer's, so it is checked too
+    if (s.layout) { try { require('./report-slides.js').textsOfLayout(s.layout, s.data).forEach((t) => add(`sections[${i}].data`, t)); } catch { /* shapeError names it */ } }
+    textsOfInsight(s.insight).forEach((t) => add(`sections[${i}].insight`, t));
     (s.blocks || []).forEach((b, j) => {
       const w = `sections[${i}].blocks[${j}]`;
       add(w, b.text); (b.items || []).forEach((x) => add(w, x));
@@ -475,11 +479,20 @@ function shapeError(report) {
   if (report.answer.supports != null && (!Array.isArray(report.answer.supports) || report.answer.supports.length > 5 || report.answer.supports.some((s) => !isStr(s)))) return 'answer.supports is a list of at most 5 sentences';
   if (!Array.isArray(report.sections) || report.sections.length > LIMITS.sections) return `sections is a list of at most ${LIMITS.sections} (any titles, any order: the writer chooses)`;
   const seen = new Set();
-  for (const [i, s] of report.sections.entries()) {
+  for (let [i, s] of report.sections.entries()) {
     if (!isObj(s) || !isStr(s.title) || !s.title.trim() || /[\r\n]/.test(s.title)) return `sections[${i}] has a one-line title`;
     const id = str(s.id) || slugOf(s.title);
     if (seen.has(id)) return `two sections share the id ${id}`;
     seen.add(id);
+    if (s.layout != null) {
+      const RS = require('./report-slides.js');
+      if (!RS.LAYOUTS.includes(s.layout) || s.layout === 'blocks') return `sections[${i}].layout is one of ${RS.LAYOUTS.filter((x) => x !== 'blocks').join(', ')} (or leave it out and write blocks)`;
+      const e = RS.layoutError(s.layout, s.data);
+      if (e) return `sections[${i}] (${s.layout}): ${e}`;
+      if (s.blocks == null) s = { ...s, blocks: [] };
+    }
+    if (s.insight != null && (!isObj(s.insight) || (s.insight.points != null && (!Array.isArray(s.insight.points) || s.insight.points.length > 4 || s.insight.points.some((x) => !isObj(x) || !isStr(x.text)))))) return `sections[${i}].insight is { head, text, points: [{ tone, text }] (at most 4), note }`;
+    for (const k of ['eyebrow', 'sub']) if (s[k] != null && (!isStr(s[k]) || /[\r\n]/.test(s[k]) || s[k].length > LIMITS.title)) return `sections[${i}].${k} is one line`;
     if (!Array.isArray(s.blocks) || s.blocks.length > LIMITS.blocks) return `sections[${i}].blocks is a list of at most ${LIMITS.blocks}`;
     for (const [j, b] of s.blocks.entries()) {
       if (!isObj(b) || !BLOCK_KINDS.includes(b.kind)) return `sections[${i}].blocks[${j}].kind is one of ${BLOCK_KINDS.join(', ')}`;
@@ -613,7 +626,17 @@ function renderMarkdown(report, { brief = null, readings = null, now = Date.now(
   }
   for (const s of report.sections) {
     lines.push(`## ${r(s.title)}`, '');
-    for (const b of s.blocks) lines.push(blockMd(b, null, byId, brief), '');
+    if (s.layout && !(s.blocks || []).length) {
+      // a section bound to a library layout and no blocks: the document holds the layout's lines and its insight, sourced like a block
+      const RS = require('./report-slides.js');
+      const texts = RS.textsOfLayout(s.layout, s.data).concat(textsOfInsight(s.insight));
+      const ls = RS.linesOf(s.layout, RS.mapLayout(s.layout, s.data, r));
+      if (ls.length) lines.push(ls.map((l) => `- ${l}`).join('\n'), '');
+      if (isObj(s.insight) && (s.insight.head || s.insight.text)) lines.push(`**${r(str(s.insight.head)) || 'Insight'}.** ${r(str(s.insight.text))}`.trim(), '');
+      const src = sourceLine(texts.flatMap(tokensIn), byId, brief);
+      if (src) lines.push(`*${src}*`, '');
+    }
+    for (const b of s.blocks || []) lines.push(blockMd(b, null, byId, brief), '');
   }
   for (const p of beyondParts(report)) {
     lines.push(`## ${p.label}`, '');
@@ -644,50 +667,77 @@ function periodOf(brief, R) {
   const ats = R.map((x) => x.at).sort();
   return 'Data of ' + span(ats[0], ats[ats.length - 1]);
 }
-/** The deck of an engine report: the same model, drawn as slides (lib/report-pyramid.js deckHtml and lib/report-export.js pptx draw it). */
+/** The deck of an engine report: the same model, drawn as slides in the report library's frame (B2, lib/report-slides.js; batch 27 item 14).
+ *  Each slide keeps its kind (title, answer, section, beyond, ask, sources) and names its layout: the title is the overview with the sections as its
+ *  agenda, the answer lists its supports with the ask in the insight column, a section is drawn by the layout it names (else its blocks), the parts
+ *  beyond the question are a numbered list, the ask is the decisions layout and the sources close the deck. lib/report-pyramid.js deckHtml and
+ *  lib/report-export.js pptx draw it. */
 function deckOf(report, { brief = null, readings = null, look = null } = {}) {
+  const RS = require('./report-slides.js');
   const R = Array.isArray(readings && readings.readings) ? readings.readings : [];
   const byId = new Map(R.map((r) => [r.id, r]));
   const r = (t) => String(resolve(t, byId));
   const srcOf = (ids) => sourceLine(ids, byId, brief).replace(/\.$/, '');
   const slides = [];
+  const deckName = (brief && brief.title) || '';
   const titleText = clip(r(report.title), 160);
-  slides.push({ kind: 'title', tag: [brief && brief.title, brief && brief.readers ? `for ${brief.readers}` : ''].filter(Boolean).join(' · ') || 'Report', title: titleText, size: titleText.length > 60 ? 48 : 64,
-    sub: brief ? periodOf(brief, R) : '', source: srcOf(tokensIn(report.title)) });
-  const supports = (report.answer.supports || []).map((s) => { const t = r(s); const m = /^([^:]{3,80}):\s+(.+)$/.exec(t); return m ? { head: m[1], text: m[2] } : { head: t, text: '' }; });
-  const ask = report.ask ? { question: r(report.ask.text), who: report.ask.who ? r(report.ask.who) : (brief && brief.readers) || '', by: report.ask.by ? full(report.ask.by) : null, options: (report.ask.options || []).map(r), more: '' } : null;
-  slides.push({ kind: 'answer', tag: 'The answer', title: clip(r(report.answer.text), 200), lead: '', supports, ask,
+  const firstLine = (s) => { const ins = isObj(s.insight) ? str(s.insight.head) || str(s.insight.text) : ''; const p = (s.blocks || []).find((b) => b && b.kind === 'p'); return ins || str(s.sub) || (p ? str(p.text) : ''); };
+  const agenda = report.sections.slice(0, 4).map((s) => ({ head: clip(r(s.title), 80), text: clip(r(firstLine(s)), 110) }));
+  slides.push({ kind: 'title', layout: agenda.length ? 'overview' : 'statement', eyebrow: [brief && brief.title, brief && brief.readers ? `for ${brief.readers}` : ''].filter(Boolean).join(' · ') || 'Report',
+    title: titleText, sub: brief ? periodOf(brief, R) : '', data: agenda.length ? { lead: clip(r(report.answer.text), 200), cols: agenda } : { text: r(report.answer.text) }, source: srcOf(tokensIn(report.title).concat(tokensIn(report.answer.text))) });
+  const supports = (report.answer.supports || []).map((s) => { const t = r(s); const m = /^([^:]{3,80}):\s+(.+)$/.exec(t); return m ? { title: m[1], text: m[2].charAt(0).toUpperCase() + m[2].slice(1) } : { title: t, text: '' }; });
+  const ask = report.ask ? { question: r(report.ask.text), who: report.ask.who ? r(report.ask.who) : (brief && brief.readers) || '', by: report.ask.by || null, options: (report.ask.options || []).map(r) } : null;
+  const askInsight = ask ? { head: 'Your call', text: ask.question, points: [], note: [ask.who ? `For ${ask.who}` : '', ask.by ? `by ${full(ask.by)}` : ''].filter(Boolean).join(' · ') } : null;
+  slides.push({ kind: 'answer', layout: supports.length ? 'agenda' : 'statement', eyebrow: 'The answer', title: clip(r(report.answer.text), 200), sub: '',
+    data: supports.length ? { rows: supports.slice(0, 5) } : { text: r(report.answer.text) }, insight: askInsight,
     source: srcOf(tokensIn(report.answer.text).concat(...(report.answer.supports || []).map(tokensIn))) });
   for (const s of report.sections) {
+    if (s.layout && !RS.layoutError(s.layout, s.data)) {
+      // the writer bound this section to a library layout: its texts are resolved here, its insight goes in the side column
+      const data = RS.mapLayout(s.layout, s.data, r);
+      const ins = isObj(s.insight) ? { head: r(str(s.insight.head)), text: r(str(s.insight.text)), points: (Array.isArray(s.insight.points) ? s.insight.points : []).map((x) => ({ tone: x.tone, text: r(str(x.text)) })), note: r(str(s.insight.note)) } : null;
+      const ids = RS.textsOfLayout(s.layout, s.data).concat(textsOfInsight(s.insight)).flatMap(tokensIn);
+      slides.push({ kind: 'section', layout: s.layout, eyebrow: s.eyebrow ? r(s.eyebrow) : '', title: clip(r(s.title), 160), sub: s.sub ? r(s.sub) : '', data, insight: ins, source: srcOf(ids) });
+      continue;
+    }
     // a section goes on as many slides as its blocks need: a long table is cut at 8 rows, and a block that would run under the footer starts a new slide
     const chunks = [[]]; let used = 0;
     const put = (b) => { const h = blockHeight(b); if (chunks[chunks.length - 1].length && used + h > SLIDE_ROOM) { chunks.push([]); used = 0; } chunks[chunks.length - 1].push(b); used += h; };
-    for (const b of s.blocks) {
+    for (const b of s.blocks || []) {
       if (b.kind === 'table' && b.rows.length > 8) for (let i = 0; i < b.rows.length; i += 8) put({ ...b, rows: b.rows.slice(i, i + 8) });
       else put(b);
     }
     const real = chunks.filter((c) => c.length);
     real.forEach((blocks, i) => {
       const ids = blocks.flatMap((b) => textsOf({ title: '', answer: { text: '' }, sections: [{ title: '', blocks: [b] }] }).flatMap((t) => tokensIn(t.text)));
-      slides.push({ kind: 'section', title: clip(r(s.title), 160) + (i ? ' (continued)' : ''), blocks: blocks.map((b) => drawBlock(b, r, byId)), source: srcOf(ids) });
+      slides.push({ kind: 'section', layout: 'blocks', eyebrow: '', title: clip(r(s.title), 160) + (i ? ' (continued)' : ''), sub: '', data: { blocks: blocks.map((b) => drawBlock(b, r, byId)) }, blocks: blocks.map((b) => drawBlock(b, r, byId)), source: srcOf(ids) });
     });
   }
   const parts = beyondParts(report);
   for (let i = 0; i < parts.length; i += 4) {
     const chunk = parts.slice(i, i + 4);
     // the title is a finding, as on every slide: the first part's own sentence
-    slides.push({ kind: 'beyond', tag: 'Beyond the question', title: clip(r(chunk[0].texts[0]), 160), items: chunk.map((p) => ({ head: p.label, text: clip(p.texts.map(r).join(' '), 260) })),
+    slides.push({ kind: 'beyond', layout: 'agenda', eyebrow: 'Beyond the question', title: clip(r(chunk[0].texts[0]), 160), sub: '',
+      data: { rows: chunk.map((p) => ({ title: p.label, text: clip(p.texts.map(r).join(' '), 260) })) }, items: chunk.map((p) => ({ head: p.label, text: clip(p.texts.map(r).join(' '), 260) })),
       source: srcOf(chunk.flatMap((p) => p.texts.flatMap(tokensIn))) });
   }
-  if (ask && (ask.options.length || ask.who)) slides.push({ kind: 'ask', tag: 'Needs your call', title: clip(ask.by ? `Decide by ${ask.by}: ${ask.question.replace(/\?$/, '')}` : ask.question, 200), ask, source: 'Source: the readings above' });
+  if (ask && (ask.options.length || ask.who)) {
+    const rows = ask.options.length ? ask.options.slice(0, 3).map((o, i) => ({ question: `Option ${'ABC'[i]}: ${o}`, who: ask.who, by: ask.by || undefined })) : [{ question: ask.question, who: ask.who, by: ask.by || undefined }];
+    slides.push({ kind: 'ask', layout: 'decisions', eyebrow: 'Needs your call', title: clip(ask.by ? `Decide by ${full(ask.by)}: ${ask.question.replace(/\?$/, '')}` : ask.question, 200), sub: ask.options.length ? ask.question : '',
+      data: { rows }, source: 'Source: the readings above' });
+  }
   const names = new Map(((brief && brief.sources) || []).map((x) => [x.id, x.name]));
   const used = new Set(textsOf(report).flatMap((t) => tokensIn(t.text)));
-  const reached = [...new Set(R.filter((x) => used.has(x.id)).map((x) => x.source))].map((s) => `${names.get(s) || s}, read ${[...new Set(R.filter((x) => x.source === s && used.has(x.id)).map((x) => x.at))].sort().map(full).join(', ')}`);
-  const nr = (Array.isArray(readings && readings.gaps) ? readings.gaps : []).map((g) => ({ source: names.get(g.source) || g.source, why: g.reason }));
-  slides.push({ kind: 'sources', title: `Every number comes from ${reached.length === 1 ? 'one source' : `${reached.length} sources`}${nr.length ? `; ${nr.length === 1 ? 'one source was' : `${nr.length} sources were`} not reached` : ''}`, reached, notReached: nr, source: 'Source: the readings of this report' });
+  const srcIds = [...new Set(R.filter((x) => used.has(x.id)).map((x) => x.source))];
+  const lastAt = (s) => R.filter((x) => x.source === s && used.has(x.id)).map((x) => x.at).filter((a) => /^\d{4}-\d{2}-\d{2}$/.test(str(a))).sort().pop();
+  const read = srcIds.map((s) => ({ name: names.get(s) || s, ...(lastAt(s) ? { at: lastAt(s) } : {}) }));
+  const nr = (Array.isArray(readings && readings.gaps) ? readings.gaps : []).map((g) => ({ name: names.get(g.source) || g.source, why: str(g.reason) }));
+  slides.push({ kind: 'sources', layout: 'sources', eyebrow: 'Sources', title: `${read.length ? `Every number comes from ${read.length === 1 ? 'one source' : `${read.length} sources`}` : 'No reading is used on these slides'}${nr.length ? `; ${nr.length === 1 ? 'one source was' : `${nr.length} sources were`} not reached` : ''}`, sub: '',
+    data: { read: read.slice(0, 6), missing: nr.slice(0, 6) }, reached: read.map((x) => x.name + (x.at ? ', read ' + full(x.at) : '')), notReached: nr.map((x) => ({ source: x.name, why: x.why })), source: 'Source: the readings of this report' });
   slides.forEach((s, i) => { s.n = i + 1; });
-  return { slides, look: look || null, name: r(report.title), engine: true };
+  return { slides, look: look || null, name: r(report.title), deck: deckName, today: (brief && brief.slot) || null, engine: true, frame: 'b2' };
 }
+function textsOfInsight(ins) { return isObj(ins) ? [ins.head, ins.text, ins.note].concat((Array.isArray(ins.points) ? ins.points : []).map((x) => x && x.text)).filter(isStr) : []; }
 /** The room under a slide's title, and what a block takes of it (1280 x 720 frames, lib/report-pyramid.js css). */
 const SLIDE_ROOM = 440;
 function blockHeight(b) {
@@ -748,7 +798,7 @@ function write(root, id, slot, report, { now = Date.now() } = {}) {
   const pre = checkReport(report, { brief, readings });
   const hardFail = pre.filter((c) => c.hard && !c.pass);
   if (hardFail.length) return refuse(422, hardFail.map((c) => `${c.id}: ${c.reason}`).join(' · '), { checks: pre });
-  const clean = { ...report, sections: report.sections.map((s) => ({ ...s, id: str(s.id) || slugOf(s.title) })), carried: brief.carried_asks || [], v: 1, at: new Date(now).toISOString() };
+  const clean = { ...report, sections: report.sections.map((s) => ({ ...s, blocks: Array.isArray(s.blocks) ? s.blocks : [], id: str(s.id) || slugOf(s.title) })), carried: brief.carried_asks || [], v: 1, at: new Date(now).toISOString() };
   const md = renderMarkdown(clean, { brief, readings, now });
   const checks = checkReport(clean, { brief, readings, markdown: md });
   writeJson(P.report.abs, clean);

package/workspace/lib/report-export.js

@@ -220,14 +220,15 @@ function pyramidSlideXml(s, L) {
   const E = (v) => Math.round(v * PX);
   const fill = (c) => (c ? `<a:solidFill><a:srgbClr val="${hex(c)}"/></a:solidFill>` : '<a:noFill/>');
   const ln = (c, w, dash) => (c ? `<a:ln w="${Math.round((w || 1) * PX)}">${fill(c)}${dash ? '<a:prstDash val="dash"/>' : ''}</a:ln>` : '<a:ln><a:noFill/></a:ln>');
-  const shape = (x, y, w, h, o = {}) => { id++; out.push(`<p:sp><p:nvSpPr><p:cNvPr id="${id}" name="${o.name || 'Shape ' + id}"/><p:cNvSpPr/><p:nvPr/></p:nvSpPr><p:spPr><a:xfrm${o.flip ? ' flipV="1"' : ''}><a:off x="${E(x)}" y="${E(y)}"/><a:ext cx="${E(Math.max(w, 0.5))}" cy="${E(Math.max(h, 0.5))}"/></a:xfrm><a:prstGeom prst="${o.geom || 'rect'}"><a:avLst/></a:prstGeom>${fill(o.fill)}${ln(o.line, o.lw, o.dash)}</p:spPr></p:sp>`); };
-  const run = (t, o) => `<a:r><a:rPr lang="en-GB" sz="${Math.round((o.size || 18) * 75)}"${o.bold ? ' b="1"' : ''} dirty="0">${fill(o.color || L.ink)}<a:latin typeface="${xml(L.font)}"/></a:rPr><a:t>${xml(t)}</a:t></a:r>`;
+  const shape = (x, y, w, h, o = {}) => { id++; out.push(`<p:sp><p:nvSpPr><p:cNvPr id="${id}" name="${o.name || 'Shape ' + id}"/><p:cNvSpPr/><p:nvPr/></p:nvSpPr><p:spPr><a:xfrm${o.flip ? ' flipV="1"' : ''}><a:off x="${E(x)}" y="${E(y)}"/><a:ext cx="${E(Math.max(w, 0.5))}" cy="${E(Math.max(h, 0.5))}"/></a:xfrm><a:prstGeom prst="${o.geom || 'rect'}">${o.adj != null ? `<a:avLst><a:gd name="adj" fmla="val ${o.adj}"/></a:avLst>` : '<a:avLst/>'}</a:prstGeom>${fill(o.fill)}${ln(o.line, o.lw, o.dash)}</p:spPr></p:sp>`); };
+  const run = (t, o) => `<a:r><a:rPr lang="en-GB" sz="${Math.round((o.size || 18) * 75)}"${o.bold ? ' b="1"' : ''} dirty="0">${fill(o.color || (L && L.ink) || "#2A2E35")}<a:latin typeface="${xml(o.font || (L && L.font) || "Calibri")}" pitchFamily="34" charset="0"/><a:cs typeface="${xml(o.font || (L && L.font) || "Calibri")}" pitchFamily="34" charset="0"/></a:rPr><a:t>${xml(t)}</a:t></a:r>`;
   /** a text box; paras = [string | [[text, opts], …]] */
   const text = (x, y, w, h, paras, o = {}) => {
     id++;
     const ps = (Array.isArray(paras) ? paras : [paras]).map((p) => `<a:p><a:pPr algn="${o.align || 'l'}"/>${(Array.isArray(p) ? p : [[p, {}]]).map(([t, ro]) => run(t, { ...o, ...ro })).join('')}</a:p>`).join('');
     out.push(`<p:sp><p:nvSpPr><p:cNvPr id="${id}" name="${o.name || 'Text ' + id}"/><p:cNvSpPr txBox="1"/><p:nvPr/></p:nvSpPr><p:spPr><a:xfrm><a:off x="${E(x)}" y="${E(y)}"/><a:ext cx="${E(w)}" cy="${E(h)}"/></a:xfrm><a:prstGeom prst="rect"><a:avLst/></a:prstGeom><a:noFill/></p:spPr><p:txBody><a:bodyPr wrap="square" lIns="0" tIns="0" rIns="0" bIns="0" anchor="${o.anchor || 't'}"><a:normAutofit/></a:bodyPr><a:lstStyle/>${ps}</p:txBody></p:sp>`);
   };
+  if (s.layout) { b2Parts(s, { shape, text }); return out; }
   const navy = s.kind === 'title';
   if (navy) shape(0, 0, 1280, 720, { fill: L.accent, name: 'Background' });
   // the footer: the source of every number on the slide, and the page number
@@ -377,6 +378,157 @@ function pyramidSlideXml(s, L) {
   return out;
 }
 
+/** A slide in the report library's frame (B2, lib/report-slides.js): the panel, the eyebrow, the heading, the subheading, the layout's lines and the
+ *  insight column, and the footer. The PowerPoint file is the first state of the slide: no control, nothing ticked. */
+function b2Parts(s, { shape, text }) {
+  const RS = require('./report-slides.js');
+  const C = { ink: '#2A2E35', ink2: '#4A4F58', ink3: '#646A74', hair: '#E3E4E6', blue: '#2F5FB3', ground: '#F2F4F7', well: '#F4F3F0', track: '#ECEAE6', bluebg: '#EEF5FC' };
+  // the tones as the slides draw them: a dot or a bar fill, and a pill's ground and ink
+  const DOTC = { ok: '#5E9C6A', watch: '#D4A13A', late: '#D9773F', bad: '#D0473E', info: '#4894EA', none: '#B9BDC4' };
+  const PILLC = { ok: ['#EDF5EF', '#3E6E49'], watch: ['#FBF4E4', '#8A5A00'], late: ['#FBF0EA', '#A4461A'], bad: ['#FBEDEC', '#A8322A'], info: ['#EEF5FC', '#2F5FB3'], none: ['#F4F3F0', '#4A4F58'] };
+  const SPANC = { ok: ['#EDF5EF', '#3E6E49'], watch: ['#FBF4E4', '#8A5A00'], late: ['#FBF4E4', '#8A5A00'], bad: ['#FBEDEC', '#A8322A'], info: ['#E6E8EC', '#4A4F58'], none: ['#D9DCE1', '#4A4F58'] };
+  const tn = (t) => (RS.TONES.includes(t) ? t : 'none');
+  const o = (x) => ({ font: 'Plus Jakarta Sans', ...x });
+  const round = (r, w, h) => Math.round((r / Math.min(w, h)) * 100000);
+  shape(0, 0, 1280, 720, { fill: C.ground, name: 'Ground' });
+  shape(10, 10, 1260, 700, { fill: '#FFFFFF', geom: 'roundRect', adj: round(28, 1260, 700), name: 'Panel' });
+  let y = 32;
+  if (s.eyebrow) { text(38, y, 1000, 20, s.eyebrow, o({ size: 13, bold: true, color: C.ink3 })); y += 22; }
+  text(38, y, 1000, 64, s.title || '', o({ size: 26, bold: true, color: C.ink, name: 'Title' })); y += s.title && s.title.length > 70 ? 66 : 36;
+  if (s.sub) { text(38, y, 900, 22, s.sub, o({ size: 15, color: C.ink3 })); y += 26; }
+  y += 10; shape(38, y, 1204, 1, { fill: C.hair, name: 'Hairline' }); y += 16;
+  const ins = s.insight && (s.insight.head || s.insight.text) ? s.insight : null;
+  const W = ins ? 830 : 1204; const X = 38; const BOT = 640;
+  const d = s.data || {};
+  const dot = (x, yy, t) => shape(x, yy, 9, 9, { geom: 'ellipse', fill: DOTC[tn(t)] });
+  const pill = (x, yy, t, label, w) => { const [bg, ink] = PILLC[tn(t)]; const ww = w || Math.min(160, 18 + label.length * 7); shape(x, yy, ww, 22, { geom: 'roundRect', adj: 50000, fill: bg }); text(x, yy + 3, ww, 16, label, o({ size: 11, bold: true, color: ink, align: 'ctr' })); return ww; };
+  const bar = (x, yy, w, share, target, t, h = 6) => { shape(x, yy, w, h, { geom: 'roundRect', adj: 50000, fill: C.track }); if (share != null) shape(x, yy, Math.max(1, w * Math.max(0, Math.min(1, share))), h, { geom: 'roundRect', adj: 50000, fill: t ? DOTC[tn(t)] : '#8C929B' }); if (target != null) shape(x + w * target - 1, yy - 3, 2, h + 6, { fill: C.ink }); };
+  const rule = (yy, x = X, w = W) => shape(x, yy, w, 1, { fill: C.hair });
+  const band = (yy, h = 30) => shape(X, yy, W, h, { geom: 'roundRect', adj: round(10, W, h), fill: C.well });
+  const rowsAt = (n, h) => Array.from({ length: n }, (_, i) => y + i * h);
+  const plain = () => { const lines = RS.linesOf(s.layout, d); lines.slice(0, Math.floor((BOT - y) / 40)).forEach((l, i) => { const yy = y + i * 40; if (i) rule(yy - 4); text(X, yy + 6, W, 28, l, o({ size: 15, color: C.ink })); }); };
+  const L = s.layout;
+  if (L === 'tiles') {
+    const n = d.tiles.length; const cw = W / n;
+    d.tiles.forEach((t, i) => { const x = X + i * cw + (i ? 22 : 0); const w = cw - (i ? 44 : 22); if (i) shape(X + i * cw, y, 1, 150, { fill: C.hair });
+      text(x, y, w, 20, t.label, o({ size: 13, color: C.ink2 })); text(x, y + 22, w, 36, t.value, o({ size: 26, bold: true, color: C.ink }));
+      if (t.note) text(x, y + 62, w, 20, t.note, o({ size: 13, color: C.blue })); if (t.share != null) bar(x, y + 92, w, t.share, t.target, t.tone); });
+  } else if (L === 'ledger' || L === 'minutes' || L === 'ranked') {
+    const rows = d.rows; const h = 58;
+    const max = L === 'minutes' ? Math.max(1, ...rows.map((r) => r.value || 0)) : 1;
+    rowsAt(rows.length, h).forEach((yy, i) => { const r = rows[i]; rule(yy);
+      if (L === 'ledger') { dot(X, yy + 24, r.tone); text(X + 16, yy + 18, 200, 22, r.name, o({ size: 15, bold: true, color: C.ink })); text(X + 228, yy + 16, 76, 26, r.value, o({ size: 18, bold: true, color: C.ink }));
+        const bw = W - 228 - 94 - 150; if (r.share != null) bar(X + 322, yy + 22, bw, r.share, r.target, r.tone); if (r.target_text) text(X + 322, yy + 32, bw, 18, r.target_text, o({ size: 12, color: C.ink3 })); if (r.verdict) pill(X + W - 130, yy + 18, r.tone, r.verdict, 130); }
+      else if (L === 'minutes') { text(X, yy + 10, 250, 22, r.name, o({ size: 15, bold: true, color: C.ink })); if (r.note) text(X, yy + 32, 250, 18, r.note, o({ size: 12, color: C.ink3 })); bar(X + 270, yy + 24, W - 380, (r.value || 0) / max, null, 'info', 10); text(X + W - 100, yy + 16, 100, 24, r.text || `${r.value} ${d.unit || ''}`.trim(), o({ size: 18, bold: true, color: C.ink, align: 'r' })); }
+      else { shape(X, yy + 13, 32, 32, { geom: 'ellipse', fill: C.well }); text(X, yy + 20, 32, 18, String(i + 1), o({ size: 13, bold: true, color: C.ink2, align: 'ctr' })); text(X + 44, yy + 18, W - 470, 22, r.name, o({ size: 15, bold: true, color: C.ink }));
+        if (r.a != null) { text(X + W - 410, yy + 8, 190, 16, d.a || 'Impact', o({ size: 12, color: C.ink3 })); bar(X + W - 410, yy + 30, 190, r.a, null, 'info'); }
+        if (r.b != null) { text(X + W - 190, yy + 8, 190, 16, d.b || 'Effort', o({ size: 12, color: C.ink3 })); bar(X + W - 190, yy + 30, 190, r.b, null, null); } } });
+  } else if (L === 'timeline') {
+    const today = RS.timelineToday(d, { today: null });
+    const w = RS.timelineView(d, today); const nm = 200; const tw = W - nm; const n = w.cols.length;
+    band(y, 30); text(X + 12, y + 7, nm - 12, 18, 'Initiative', o({ size: 13, color: C.ink3 }));
+    w.cols.forEach((c, i) => text(X + nm + (i * tw) / n + 8, y + 7, tw / n - 8, 18, c, o({ size: 13, color: C.ink3 })));
+    const h = 46; const y0 = y + 34; const tx = ((Date.parse(today + 'T00:00:00Z') - w.a) / (w.b + 86400000 - w.a)) * tw;
+    d.rows.forEach((r, i) => { const yy = y0 + i * h; if (yy + h > BOT) return; if (i) rule(yy);
+      text(X, yy + 14, nm - 14, 20, r.name, o({ size: 13, bold: true, color: C.ink }));
+      const g = RS.timelinePlace(r, w, today); const [bg, ink] = SPANC[tn(r.tone)];
+      if (g.out) { const lw = Math.min(tw, 30 + g.label.length * 6.5); const x = g.out === 'before' ? X + nm : X + nm + tw - lw; shape(x, yy + 13, lw, 20, { geom: 'roundRect', adj: round(9, lw, 20), fill: bg }); text(x + 8, yy + 15, lw - 16, 16, g.label, o({ size: 11, bold: true, color: ink })); }
+      else { const x = X + nm + (g.left / 100) * tw; const bw = (g.width / 100) * tw; shape(x, yy + 10, bw, 26, { geom: 'roundRect', adj: round(9, bw, 26), fill: bg });
+        if (g.inside) text(x + 8, yy + 15, bw - 16, 16, g.label, o({ size: 11, bold: true, color: ink }));
+        else { const right = g.left + g.width > 70; const lw = 30 + g.label.length * 6.5; text(right ? x - lw - 6 : x + bw + 6, yy + 15, lw, 16, g.label, o({ size: 11, bold: true, color: C.ink2, align: right ? 'r' : 'l' })); } } });
+    if (tx >= 0 && tx <= tw) shape(X + nm + tx, y0, 2, Math.min(d.rows.length * h, BOT - y0), { fill: '#4894EA', name: 'Today' });
+  } else if (L === 'risks') {
+    const cols = [0.35, 0.44]; band(y, 30);
+    text(X + 12, y + 7, W * cols[0], 18, 'Item and owner', o({ size: 13, color: C.ink3 })); text(X + W * cols[0] + 14, y + 7, W * cols[1], 18, 'Next step', o({ size: 13, color: C.ink3 })); text(X + W * (cols[0] + cols[1]) + 14, y + 7, 120, 18, 'Level', o({ size: 13, color: C.ink3 }));
+    d.rows.forEach((r, i) => { const yy = y + 36 + i * 62; if (i) rule(yy); dot(X, yy + 16, r.tone); text(X + 16, yy + 10, W * cols[0] - 16, 22, r.name, o({ size: 15, bold: true, color: C.ink }));
+      const sm = [r.owner, r.why].filter(Boolean).join(' · '); if (sm) text(X + 16, yy + 32, W * cols[0] - 16, 18, sm, o({ size: 12, color: C.ink3 }));
+      text(X + W * cols[0] + 14, yy + 12, W * cols[1] - 14, 40, r.move || '', o({ size: 15, color: C.ink })); if (r.level) pill(X + W * (cols[0] + cols[1]) + 14, yy + 12, r.tone, r.level); });
+  } else if (L === 'actions') {
+    d.rows.forEach((r, i) => { const yy = y + i * 54; rule(yy); shape(X, yy + 13, 28, 28, { geom: 'roundRect', adj: round(9, 28, 28), line: '#5E9C6A', lw: 2, name: 'Tick box' });
+      text(X + 42, yy + 16, W - 42 - 180, 24, r.text, o({ size: 18, bold: true, color: C.ink }));
+      if (r.who) { shape(X + W - 160, yy + 9, 36, 36, { geom: 'ellipse', fill: C.bluebg }); text(X + W - 160, yy + 19, 36, 16, r.who.split(/\s+/).slice(0, 2).map((x) => x[0].toUpperCase()).join(''), o({ size: 12, bold: true, color: C.blue, align: 'ctr' })); }
+      if (r.due) text(X + W - 116, yy + 18, 116, 18, RS.dmy(r.due), o({ size: 13, color: C.ink3, align: 'r' })); });
+    const yy = y + d.rows.length * 54 + 10; shape(X, yy, W, 40, { geom: 'roundRect', adj: round(12, W, 40), fill: C.bluebg }); text(X + 14, yy + 11, W - 28, 20, `✦ ${d.rows.length} left, the earliest is due first`, o({ size: 15, color: C.ink2 }));
+  } else if (L === 'decisions') {
+    d.rows.forEach((r, i) => { const yy = y + i * 86; shape(X, yy, W, 72, { geom: 'roundRect', adj: round(12, W, 72), fill: C.bluebg });
+      text(X + 18, yy + 14, 20, 22, '✦', o({ size: 15, bold: true, color: C.blue })); text(X + 40, yy + 12, W - 300, 26, r.question, o({ size: 18, bold: true, color: C.ink }));
+      if (r.pick) text(X + 40, yy + 40, W - 300, 20, (i ? '' : '✦ ') + r.pick, o({ size: 15, color: C.ink3 }));
+      const wb = [r.who, r.by ? 'by ' + RS.dmy(r.by) : ''].filter(Boolean).join(' · '); if (wb) text(X + W - 250, yy + 26, 232, 18, wb, o({ size: 12, color: C.ink3, align: 'r' })); });
+  } else if (L === 'sources') {
+    const read = d.read || []; const miss = d.missing || []; const half = read.length && miss.length ? (W - 37) / 2 : W;
+    const side = (x, label, items, f) => { text(x, y, half, 18, label, o({ size: 13, bold: true, color: C.ink3 })); items.forEach((it, i) => { const yy = y + 26 + i * 50; rule(yy, x, half); f(it, x, yy); }); };
+    if (read.length) side(X, 'Read', read, (r, x, yy) => { text(x, yy + 14, half - 220, 20, r.name, o({ size: 15, bold: true, color: C.ink })); if (r.at) text(x + half - 210, yy + 16, 120, 18, RS.dmy(r.at), o({ size: 13, color: C.ink3, align: 'r' })); pill(x + half - 70, yy + 13, 'ok', 'Read', 70); });
+    if (miss.length) { const x = read.length ? X + half + 37 : X; if (read.length) shape(X + half + 18, y, 1, 26 + miss.length * 50, { fill: C.hair }); side(x, 'Not known yet', miss, (m, xx, yy) => { text(xx, yy + 8, half - 110, 20, m.name, o({ size: 15, bold: true, color: C.ink })); if (m.why) text(xx, yy + 28, half - 110, 18, m.why, o({ size: 12, color: C.ink3 })); pill(xx + half - 96, yy + 13, 'none', 'no source', 96); }); }
+  } else if (L === 'heatmap') {
+    const n = d.cols.length; const nw = 150; const tw = has(d.total) ? 110 : 0; const cw = (W - nw - tw) / n; const h = Math.min(64, (BOT - y - 30) / d.rows.length);
+    d.cols.forEach((c, i) => text(X + nw + i * cw, y, cw, 18, c, o({ size: 13, bold: true, color: C.ink3, align: 'ctr' }))); if (tw) text(X + W - tw, y, tw, 18, d.total, o({ size: 13, bold: true, color: C.ink3, align: 'r' }));
+    d.rows.forEach((r, k) => { const yy = y + 28 + k * h; text(X, yy + h / 2 - 12, nw - 10, 24, r.name, o({ size: 18, bold: true, color: C.ink }));
+      for (let i = 0; i < n; i++) { const c = (r.cells || [])[i]; const [bg, ink] = c ? PILLC[tn(c.tone)] : [C.well, C.ink3]; shape(X + nw + i * cw + 5, yy + 5, cw - 10, h - 10, { geom: 'roundRect', adj: round(14, cw - 10, h - 10), fill: bg }); text(X + nw + i * cw + 5, yy + h / 2 - 10, cw - 10, 20, c ? c.text : '—', o({ size: 15, bold: !!c, color: ink, align: 'ctr' })); }
+      if (tw) text(X + W - tw, yy + h / 2 - 12, tw, 24, r.total || '', o({ size: 18, bold: true, color: C.ink, align: 'r' })); });
+  } else if (L === 'schedule') {
+    const n = d.cols.length; const nm = 200; const tw = W - nm; band(y, 30); text(X + 12, y + 7, nm - 12, 18, 'Work', o({ size: 13, color: C.ink3 }));
+    d.cols.forEach((c, i) => text(X + nm + (i * tw) / n + 8, y + 7, tw / n - 8, 18, c, o({ size: 13, color: C.ink3 })));
+    d.rows.forEach((r, i) => { const yy = y + 34 + i * 46; if (i) rule(yy); text(X, yy + 14, nm - 14, 20, r.name, o({ size: 13, bold: true, color: C.ink })); const [bg, ink] = SPANC[tn(r.tone)]; const x = X + nm + (r.from * tw) / n; const bw = ((r.to - r.from + 1) * tw) / n;
+      shape(x, yy + 10, bw, 26, { geom: 'roundRect', adj: round(9, bw, 26), fill: bg }); if (r.text) text(x + 8, yy + 15, bw - 16, 16, r.text, o({ size: 11, bold: true, color: ink })); });
+  } else if (L === 'donut' || L === 'lists' || L === 'compare') {
+    if (L === 'donut') d.parts.forEach((p, i) => { const yy = y + i * 54; if (i) rule(yy); shape(X, yy + 20, 14, 14, { geom: 'ellipse', fill: RS.RING[tn(p.tone)] }); text(X + 26, yy + 12, 56, 30, String(p.n), o({ size: 26, bold: true, color: C.ink })); text(X + 90, yy + 10, W - 90, 22, p.label, o({ size: 15, bold: true, color: C.ink })); if (p.names) text(X + 90, yy + 30, W - 90, 18, p.names, o({ size: 12, color: C.ink3 })); });
+    else { const half = (W - 37) / 2; [d.left, d.right].forEach((c, k) => { const x = X + k * (half + 37); if (k) shape(X + half + 18, y, 1, BOT - y - 10, { fill: C.hair }); text(x, y, half, 18, c.label || '', o({ size: 13, bold: true, color: C.ink3 }));
+      c.items.forEach((it, i) => { const yy = y + 26 + i * 58; rule(yy, x, half);
+        if (L === 'lists') { dot(x, yy + 22, c.tone || (k ? 'bad' : 'ok')); text(x + 18, yy + 14, half - 18, 24, it.text, o({ size: 18, bold: true, color: C.ink })); if (it.detail) text(x + 18, yy + 38, half - 18, 18, it.detail, o({ size: 12, color: C.ink3 })); }
+        else { text(x, yy + 8, 120, 30, it.value, o({ size: 26, bold: true, color: C.ink })); text(x + 130, yy + 14, half - 130, 22, it.name || '', o({ size: 15, bold: true, color: C.ink })); if (it.share != null) bar(x, yy + 46, half, it.share, it.target, it.tone); } }); }); }
+  } else if (L === 'agenda' || L === 'next') {
+    let x0 = X; let ww = W;
+    if (L === 'next' && d.date) { const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(d.date); const lt = RS.longDate(d.date).split(' '); text(X, y, 240, 18, `${lt[2]} · ${lt[0]}`, o({ size: 13, bold: true, color: C.ink3 })); text(X, y + 22, 240, 36, String(+m[3]), o({ size: 26, bold: true, color: C.ink })); if (d.time) text(X, y + 62, 240, 24, d.time, o({ size: 18, bold: true, color: C.blue })); shape(X + 260, y, 1, BOT - y - 10, { fill: C.hair }); x0 = X + 288; ww = W - 288; text(x0, y, ww, 18, 'Draft agenda', o({ size: 13, bold: true, color: C.ink3 })); }
+    const rows = L === 'agenda' ? d.rows : d.items; const y1 = L === 'next' ? y + 26 : y; const h = L === 'agenda' ? Math.min(66, (BOT - y1) / rows.length) : 50;
+    rows.forEach((r, i) => { const yy = y1 + i * h; rule(yy, x0, ww);
+      if (L === 'agenda') { text(x0, yy + h / 2 - 16, 44, 32, String(i + 1), o({ size: 26, bold: true, color: '#B9CDEB' })); text(x0 + 66, yy + (r.text ? h / 2 - 22 : h / 2 - 12), ww - 66, 24, r.title, o({ size: 18, bold: true, color: C.ink })); if (r.text) text(x0 + 66, yy + h / 2 + 2, ww - 66, 20, r.text, o({ size: 15, color: C.ink2 })); }
+      else { if (r.length) text(x0, yy + 16, 70, 18, r.length, o({ size: 13, color: C.ink3 })); text(x0 + 80, yy + 13, ww - 80, 24, r.text, o({ size: 18, bold: true, color: C.ink })); } });
+  } else if (L === 'overview' || L === 'people' || L === 'quotes' || L === 'statement' || L === 'focus') {
+    let yy = y;
+    if (L === 'overview' && d.lead) { shape(X, yy, W, 60, { geom: 'roundRect', adj: round(16, W, 60), fill: C.well }); shape(X + 12, yy + 8, 44, 44, { geom: 'ellipse', fill: '#4C8FE0' }); text(X + 68, yy + 18, W - 80, 24, d.lead, o({ size: 15, color: C.ink2 })); yy += 82; }
+    if (L === 'statement') { text(X, yy, Math.min(W, 900), 150, d.text, o({ size: 26, bold: true, color: C.ink })); yy = BOT - 110; }
+    if (L === 'focus' && d.gate) { shape(X, yy, W, 92, { geom: 'roundRect', adj: round(12, W, 92), fill: C.bluebg }); text(X + 22, yy + 20, 24, 30, '✦', o({ size: 18, bold: true, color: C.blue })); text(X + 48, yy + 16, W - 70, 32, d.gate.title, o({ size: 26, bold: true, color: C.ink })); if (d.gate.text) text(X + 48, yy + 54, W - 70, 22, d.gate.text, o({ size: 15, color: C.ink3 })); yy += 116; }
+    const items = L === 'overview' ? d.cols : L === 'people' ? d.people : L === 'quotes' ? d.quotes : L === 'statement' ? (d.figures || []) : d.steps;
+    const n = Math.max(1, items.length); const cw = (W + (L === 'focus' ? 18 : 0)) / n;
+    const SH = ['#9FB8E0', '#6F92DC', '#2B55C9', '#1E449B'];
+    items.forEach((it, i) => { const x = X + i * cw + (L === 'focus' ? 0 : i ? 24 : 0); const w = cw - (L === 'focus' ? 18 : i ? 48 : 24);
+      if (L !== 'focus' && i) shape(X + i * cw, yy, 1, L === 'statement' ? 90 : 200, { fill: C.hair });
+      if (L === 'overview') { text(x, yy, 60, 50, String(i + 1), o({ size: 44, bold: true, color: '#B9CDEB' })); text(x, yy + 62, w, 26, it.head, o({ size: 18, bold: true, color: C.ink })); if (it.text) text(x, yy + 92, w, 80, it.text, o({ size: 15, color: C.ink2 })); }
+      else if (L === 'people') { shape(x, yy, 84, 84, { geom: 'ellipse', fill: C.bluebg }); text(x, yy + 30, 84, 24, it.initials || it.name.split(/\s+/).slice(0, 2).map((z) => z[0].toUpperCase()).join(''), o({ size: 18, bold: true, color: C.blue, align: 'ctr' })); text(x, yy + 96, w, 26, it.name, o({ size: 18, bold: true, color: C.ink })); if (it.role) pill(x, yy + 126, 'info', it.role); if (it.owns) text(x, yy + 158, w, 60, it.owns, o({ size: 15, color: C.ink2 })); }
+      else if (L === 'quotes') { text(x, yy, 40, 40, '“', o({ size: 44, bold: true, color: '#B9CDEB' })); text(x, yy + 44, w, 150, it.text, o({ size: 18, color: C.ink })); const wa = [it.who, it.at].filter(Boolean).join(' · '); if (wa) pill(x, yy + 200, 'none', wa); }
+      else if (L === 'statement') { text(x, yy, w, 36, it.value, o({ size: 26, bold: true, color: RS.FILL[tn(it.tone)] === RS.FILL.none ? C.ink : RS.FILL[tn(it.tone)] })); text(x, yy + 40, w, 22, it.label, o({ size: 15, bold: true, color: C.ink })); if (it.source) text(x, yy + 64, w, 18, it.source, o({ size: 12, color: C.ink3 })); }
+      else { shape(x, yy, w, 3, { fill: SH[i + (4 - items.length)] || SH[3] }); text(x, yy + 14, w, 18, it.label, o({ size: 13, bold: true, color: C.ink3 })); text(x, yy + 36, w, 26, it.title, o({ size: 18, bold: true, color: C.ink })); if (it.text) text(x, yy + 66, w, 60, it.text, o({ size: 15, color: C.ink2 })); } });
+    if (L === 'quotes' && d.agreed) { const ay = yy + 250; shape(X, ay, W, 44, { geom: 'roundRect', adj: round(12, W, 44), fill: C.bluebg }); text(X + 14, ay + 12, W - 28, 20, [[['✦ ', o({ color: C.blue, bold: true })], ['Agreed: ', o({ bold: true, color: C.ink })], [d.agreed, o({ color: C.ink2 })]]], o({ size: 15 })); }
+  } else if (L === 'bubbles') {
+    const px = X + 30; const pw = W - 70; const ph = BOT - y - 50; const py = y + 22;
+    text(X, y, 300, 18, `${d.y || 'Outcome'} ↑`, o({ size: 13, bold: true, color: C.ink3 })); shape(px, py, 1, ph, { fill: C.hair }); shape(px, py + ph, pw, 1, { fill: C.hair }); text(X + W - 300, py + ph + 8, 300, 18, `${d.x || 'More spend'} →`, o({ size: 13, bold: true, color: C.ink3, align: 'r' }));
+    d.points.forEach((p) => { const sz = 48 + 60 * (p.size == null ? 0.4 : p.size); const cx = px + pw * p.x; const cy = py + ph * (1 - p.y); shape(cx - sz / 2, cy - sz / 2, sz, sz, { geom: 'ellipse', fill: RS.FILL[tn(p.tone)] }); text(cx - sz / 2, cy - 9, sz, 18, p.label, o({ size: 12, bold: true, color: '#FFFFFF', align: 'ctr' })); });
+  } else if (L === 'network') {
+    const ids = d.nodes.map((n) => n.id); const depth = new Map(ids.map((z) => [z, 0]));
+    for (let k = 0; k < ids.length; k++) for (const [a, b] of d.edges) if (depth.get(b) < depth.get(a) + 1) depth.set(b, Math.min(depth.get(a) + 1, ids.length));
+    const cols = Math.max(...depth.values()) + 1; const byCol = Array.from({ length: cols }, () => []); for (const n of d.nodes) byCol[depth.get(n.id)].push(n);
+    const nw = 176; const nh = 56; const H = BOT - y - 10; const gx = cols > 1 ? (W - nw) / (cols - 1) : 0; const pos = new Map();
+    byCol.forEach((list, c) => list.forEach((n, i) => pos.set(n.id, { x: X + c * gx, y: y + ((i + 1) * H) / (list.length + 1) - nh / 2 })));
+    for (const [a, b] of d.edges) { const p = pos.get(a); const q = pos.get(b); const x1 = p.x + nw; const y1 = p.y + nh / 2; const x2 = q.x; const y2 = q.y + nh / 2; shape(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), Math.abs(y2 - y1), { geom: 'line', line: '#9FB8E0', lw: 2, flip: y2 < y1 }); }
+    d.nodes.forEach((n) => { const p = pos.get(n.id); const t = tn(n.tone); const [bg, ink] = t === 'bad' ? PILLC.bad : t === 'watch' || t === 'late' ? PILLC.watch : ['#FFFFFF', C.ink]; shape(p.x, p.y, nw, nh, { geom: 'roundRect', adj: round(14, nw, nh), fill: bg, line: bg === '#FFFFFF' ? '#DCDDE0' : null });
+      text(p.x + 8, p.y + 18, nw - 16, 20, n.label, o({ size: 15, bold: true, color: ink, align: 'ctr' })); });
+  } else plain();
+  if (ins) {
+    shape(902, y, 1, BOT - y, { fill: C.hair, name: 'Insight rule' });
+    const paras = [[['✦ Insight', o({ size: 13, bold: true, color: C.blue })]]];
+    if (ins.head) paras.push([[ins.head, o({ size: 18, bold: true, color: C.ink })]]);
+    if (ins.text) paras.push([[ins.text, o({ size: 15, color: C.ink2 })]]);
+    (ins.points || []).forEach((p) => paras.push([['●  ', o({ size: 11, color: DOTC[tn(p.tone)] })], [p.text, o({ size: 15, color: C.ink2 })]]));
+    if (ins.note) paras.push([[ins.note, o({ size: 13, color: C.ink3 })]]);
+    text(927, y, 315, BOT - y, paras, o({ size: 15 }));
+  }
+  shape(38, 664, 1204, 1, { fill: C.hair, name: 'Footer rule' });
+  text(38, 676, 800, 20, s.source || '', o({ size: 13, color: C.ink3, name: 'Source' }));
+  if (s.deck) text(850, 676, 240, 20, s.deck, o({ size: 13, bold: true, color: C.ink2, align: 'r', name: 'Deck' }));
+  text(1100, 676, 142, 20, `${s.n || ''}${s.total ? ' / ' + s.total : ''}`, o({ size: 13, bold: true, color: C.ink, align: 'r', name: 'Page number' }));
+}
+const has = (v) => v != null && String(v).trim() !== '';
+
 function pptx(report, deck) {
   const slides = [];   // { title, lines, kind }
   slides.push({ kind: 'title', title: report.title, lines: report.subtitle ? [report.subtitle] : [] });
@@ -396,7 +548,7 @@ function pptx(report, deck) {
   };
   const look = deck ? deck.look : null;
   const font = look ? xml(look.font) : 'Calibri';
-  if (deck) { slides.length = 0; for (const p of deck.slides) slides.push({ kind: p.kind, xml: pyramidSlideXml(p, look) }); }
+  if (deck) { slides.length = 0; for (const p of deck.slides) slides.push({ kind: p.kind, xml: pyramidSlideXml(deck.frame === 'b2' ? { ...p, deck: deck.deck || '', total: deck.slides.length } : p, look) }); }
   const shapesSlide = (parts) => `${DECL}<p:sld xmlns:a="${NS_A}" xmlns:r="${NS_R}" xmlns:p="${NS_P}"><p:cSld><p:spTree><p:nvGrpSpPr><p:cNvPr id="1" name=""/><p:cNvGrpSpPr/><p:nvPr/></p:nvGrpSpPr><p:grpSpPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="0" cy="0"/><a:chOff x="0" y="0"/><a:chExt cx="0" cy="0"/></a:xfrm></p:grpSpPr>${parts.join('')}</p:spTree></p:cSld><p:clrMapOvr><a:masterClrMapping/></p:clrMapOvr></p:sld>`;
   const layoutXml = `${DECL}<p:sldLayout xmlns:a="${NS_A}" xmlns:r="${NS_R}" xmlns:p="${NS_P}" type="obj" preserve="1"><p:cSld name="Title and Content"><p:spTree><p:nvGrpSpPr><p:cNvPr id="1" name=""/><p:cNvGrpSpPr/><p:nvPr/></p:nvGrpSpPr><p:grpSpPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="0" cy="0"/><a:chOff x="0" y="0"/><a:chExt cx="0" cy="0"/></a:xfrm></p:grpSpPr>`
     + sp(2, 'Title 1', 'title', 609600, 365760, 10972800, 914400, '<a:p><a:endParaRPr lang="en-GB"/></a:p>')

package/workspace/lib/report-library.js

@@ -0,0 +1,76 @@
+'use strict';
+/* report-library.js — the report library's sample deck: each of the 23 slide layouts (lib/report-slides.js) filled with the placeholder words of
+ * the agreed canvas (https://claude.ai/artifact/D1ssyUsrbTtxysSuibSjmV, boards L02–L23). It is what `pmos report library` writes, so the
+ * look can be checked against the boards in a browser, and what the tests draw.
+ *
+ *   sampleDeck({ today }) → { name, today, slides }   (pure; today = YYYY-MM-DD, default 2026-11-04, the canvas's day)
+ *   libraryHtml(o)        → the sample deck as one page (lib/report-slides.js deckHtml)
+ *
+ * Placeholder words only: nothing here is a reading, so it never goes into a report.
+ */
+const RS = require('./report-slides.js');
+
+const INSIGHT = (head) => ({ head, text: 'One or two sentences that say what the main part means.',
+  points: [{ tone: 'ok', text: 'Good news first' }, { tone: 'watch', text: 'Something to watch' }, { tone: 'bad', text: 'Something that needs a decision' }],
+  note: 'Source line or caveat for the insight.' });
+
+function sampleDeck({ today = '2026-11-04' } = {}) {
+  const S = (layout, eyebrow, title, sub, data, insight) => ({ layout, eyebrow: `${eyebrow} · Slide layout`, title, sub, data, insight: insight ? INSIGHT(insight) : null, source: 'Layout library · placeholder data' });
+  const slides = [
+    S('overview', 'Overview', 'Pick the layout that fits the message, then fill it', 'Every layout sits in the same frame and uses PMOS components. Change the words, keep the shape.',
+      { lead: 'One frame, 23 bodies. Each layout answers one kind of question.', cols: [{ head: 'Say it', text: 'Overview, statement, focus, agenda' }, { head: 'Show it', text: 'Tiles, ledger, donut, heatmap, bubbles, timeline' }, { head: 'Decide it', text: 'Compare, lists, risks, ranked, decisions, actions' }] }),
+    S('tiles', 'Tiles', 'Three numbers that matter, each against its target', 'Use for a scorecard of up to four measures.',
+      { tiles: [{ label: 'Measure one', value: '82%', note: 'Short note on how it moved', share: 0.82, target: 1, tone: 'ok' }, { label: 'Measure two', value: '4.1%', note: 'Short note on how it moved', share: 0.6, target: 1, tone: 'info' }, { label: 'Measure three', value: '240', note: 'Short note on how it moved', share: 0.9, target: 0.7, tone: 'bad' }] }, 'What the tiles say'),
+    S('ledger', 'Ledger', 'Goals, nearest the line first', 'Use for four to six goals with value, progress bar, target mark and verdict.',
+      { label: 'Goals', rows: [{ name: 'Goal one', value: '93%', share: 0.93, target: 0.95, target_text: 'Target 95%', verdict: 'On the line', tone: 'ok' }, { name: 'Goal two', value: '4.1%', share: 0.68, target: 0.8, target_text: 'Target under 3%', verdict: 'Closing', tone: 'ok' }, { name: 'Goal three', value: '+3.1%', share: 0.78, target: 1, target_text: 'Target +4%', verdict: 'One week short', tone: 'watch' }, { name: 'Goal four', value: '240', share: 0.9, target: 0.7, target_text: 'Goal under 200', verdict: 'Above', tone: 'bad' }] }, 'Which goal needs attention'),
+    S('timeline', 'Timeline', 'Dates on one line, with the risky ones marked', 'Interactive: switch the span, filter to at-risk. Use for a plan or a portfolio.',
+      { today, rows: [{ name: 'Item one', start: '2026-11-02', end: '2026-12-04', tag: 'Design', tone: 'none' }, { name: 'Item two', start: '2026-11-20', end: '2027-01-22', tag: 'Build', tone: 'ok' }, { name: 'Item three', start: '2026-12-07', end: '2027-02-05', tag: 'Build', tone: 'watch' }, { name: 'Item four', start: '2027-01-25', end: '2027-02-12', tag: 'Pilot', tone: 'none' }] }, 'What the dates say'),
+    S('compare', 'Compare', 'What went well, next to what did not', 'Two columns of tiles. Use for before and after, shipped and slipped, now and needed.',
+      { left: { label: 'Shipped', items: [{ value: '–32%', name: 'metric one', note: 'Short explanation', share: 0.68, target: 0.8, tone: 'ok' }, { value: '11', name: 'metric two', note: 'Short explanation', share: 0.8, target: 1, tone: 'ok' }] },
+        right: { label: 'Slipped', items: [{ value: '+17%', name: 'metric three', note: 'Short explanation', share: 0.9, target: 0.7, tone: 'bad' }, { value: '3 weeks', name: 'metric four', note: 'Short explanation', share: 0.45, target: 1, tone: 'watch' }] } }, 'Why the split matters'),
+    S('lists', 'Two lists', 'What is in, what is out', 'Two columns of short items. Use for scope, open and parked, reached and not reached.',
+      { left: { label: 'Left list', tone: 'ok', items: [{ text: 'Item one', detail: 'Detail' }, { text: 'Item two' }, { text: 'Item three' }] }, right: { label: 'Right list', tone: 'bad', items: [{ text: 'Item four', detail: 'Detail' }, { text: 'Item five' }, { text: 'Item six' }] } }, 'The rule between the lists'),
+    S('risks', 'Risk table', 'Risks with owner, first move and level', 'Use for four to five risks. Level sets the pill colour.',
+      { rows: [{ name: 'Risk one', owner: 'Owner', why: 'why it matters', move: 'First move', level: 'Possible', tone: 'watch' }, { name: 'Risk two', owner: 'Owner', why: 'why it matters', move: 'First move', level: 'Likely', tone: 'bad' }, { name: 'Risk three', owner: 'Owner', why: 'why it matters', move: 'First move', level: 'Low', tone: 'ok' }] }, 'Which risk is real'),
+    S('ranked', 'Ranked list', 'Options ranked by impact and effort', 'Two numeric columns with a bar. Use for bets and prioritisation.',
+      { a: 'Impact', b: 'Effort, weeks', rows: [{ name: 'Option one', a: 0.8, b: 0.3 }, { name: 'Option two', a: 0.6, b: 0.2 }, { name: 'Option three', a: 0.4, b: 0.6 }] }, 'Why the order'),
+    S('decisions', 'Decisions', 'Three decisions we want from the room', 'Each row holds a ✦ proposal, an owner and a date. Use at the end of any deck.',
+      { rows: [{ question: 'Decision one as a question?', pick: 'My pick and one line of reason.', who: 'Owner', by: today }, { question: 'Decision two as a question?', pick: 'Cost and consequence in one line.', who: 'Owner', by: '2026-11-06' }, { question: 'Decision three as a question?', pick: 'Cost and consequence in one line.', who: 'Owner', by: '2026-11-20' }] }, 'How the decisions connect'),
+    S('quotes', 'Quotes', 'What people said, with who and when', 'Three quotes plus an agreed line. Use for meeting recaps and customer voice.',
+      { quotes: [{ text: "Quote that explains the decision in the speaker's own words.", who: 'Name', at: '00:04:12' }, { text: "Quote that explains the decision in the speaker's own words.", who: 'Name', at: '00:11:40' }, { text: "Quote that explains the decision in the speaker's own words.", who: 'Name', at: '00:18:05' }], agreed: 'one line that sums up what the room decided.' }, 'What the quotes add'),
+    S('actions', 'Actions', 'Action items that can be ticked off', 'Interactive: tick to close. Use for recaps and weekly notes.',
+      { rows: [{ text: 'Action one', who: 'Owner', due: '2026-11-05' }, { text: 'Action two', who: 'Owner', due: '2026-11-06' }, { text: 'Action three', who: 'Owner', due: '2026-11-10' }, { text: 'Action four', who: 'Owner', due: '2026-11-13' }] }, 'Which are due first'),
+    S('agenda', 'Agenda', 'Three things in order', 'Numbered rows with a title and one line. Use for plans, agendas and next steps.',
+      { rows: [{ title: 'First thing', text: 'One line of detail' }, { title: 'Second thing', text: 'One line of detail' }, { title: 'Third thing', text: 'One line of detail' }] }, 'Why this order'),
+    S('heatmap', 'Heatmap', 'Programs by product, hot cells in red', 'Grid with a side total. Use for portfolio health.',
+      { cols: ['Col 1', 'Col 2', 'Col 3', 'Col 4'], total: 'Spend', rows: [
+        { name: 'Row A', total: '$180k', cells: [{ text: 'Healthy', tone: 'ok' }, { text: 'Healthy', tone: 'ok' }, { text: 'At risk', tone: 'watch' }, { text: 'Healthy', tone: 'ok' }] },
+        { name: 'Row B', total: '$420k', cells: [{ text: 'Healthy', tone: 'ok' }, { text: 'Late', tone: 'bad' }, { text: 'At risk', tone: 'watch' }, { text: 'Healthy', tone: 'ok' }] },
+        { name: 'Row C', total: '$90k', cells: [{ text: 'At risk', tone: 'watch' }, { text: 'At risk', tone: 'watch' }] }] }, 'Where the heat is'),
+    S('network', 'Network', 'What waits on what', 'Nodes and arrows. Use for dependencies and flows.',
+      { nodes: [{ id: 'a', label: 'Node A', tone: 'bad' }, { id: 'b', label: 'Node B' }, { id: 'c', label: 'Node C', tone: 'watch' }, { id: 'd', label: 'Node D' }], edges: [['a', 'b'], ['a', 'c'], ['b', 'd'], ['c', 'd']] }, 'Where to unblock'),
+    S('schedule', 'Schedule', 'Who did what on which day', 'Week grid with bars. Use for weekly reviews and rosters.',
+      { cols: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], rows: [{ name: 'Work one', from: 0, to: 1, text: 'Done', tone: 'ok' }, { name: 'Work two', from: 1, to: 3, text: 'In progress', tone: 'info' }, { name: 'Work three', from: 2, to: 4, text: 'Blocked', tone: 'watch' }, { name: 'Work four', from: 0, to: 4, text: 'Waiting', tone: 'none' }] }, 'How the week went'),
+    S('donut', 'Donut', 'Share of the whole, with a headline', 'Ring with a centre number and a legend. Use for health and mix.',
+      { center: '7 of 11', center_note: 'healthy', parts: [{ label: 'Healthy', n: 7, names: 'Names', tone: 'ok' }, { label: 'At risk', n: 2, names: 'Names', tone: 'watch' }, { label: 'Late', n: 2, names: 'Names', tone: 'bad' }] }, 'The red part'),
+    S('bubbles', 'Bubbles', 'Spend against outcome', 'Scatter with size. Use to spot what costs a lot and returns little.',
+      { x: 'More spend', y: 'Outcome', points: [{ label: 'A', x: 0.7, y: 0.62, size: 0.53, tone: 'info' }, { label: 'B', x: 0.4, y: 0.84, size: 0.27, tone: 'ok' }, { label: 'C', x: 0.6, y: 0.4, size: 0.33, tone: 'watch' }, { label: 'D', x: 0.85, y: 0.14, size: 0.87, tone: 'bad' }] }, 'The outlier'),
+    S('people', 'People', 'Who owns what', 'Avatar rows with role and remit. Use for kick-offs and handovers.',
+      { people: [{ name: 'Name One', initials: 'AB', role: 'Role', owns: 'What they own' }, { name: 'Name Two', initials: 'CD', role: 'Role', owns: 'What they own' }, { name: 'Name Three', initials: 'EF', role: 'Role', owns: 'What they own' }] }, 'Who decides'),
+    S('statement', 'Statement', 'One sentence that carries the slide', 'Big sentence and three supporting numbers. Use for the why.',
+      { text: 'One sentence of 25 words or fewer that carries the argument of this slide.', figures: [{ value: '–1.4 s', label: 'what it measures', source: 'source', tone: 'ok' }, { value: '3×', label: 'what it measures', source: 'source', tone: 'info' }, { value: '11 days', label: 'what it measures', source: 'source', tone: 'watch' }] }, 'The case in one number'),
+    S('sources', 'Sources', 'What was read, and what could not be', 'Reached on the left, not reached on the right. Close every report with it.',
+      { read: [{ name: 'Source one', at: '2026-11-02' }, { name: 'Source two', at: today }], missing: [{ name: 'Missing source', why: 'Not connected' }] }, 'What the gap costs'),
+    S('minutes', 'Minutes', 'Where the time went', 'Ranked bars with a unit. Use for meeting topics and effort.',
+      { unit: 'min', rows: [{ name: 'Topic one', note: 'Short note', value: 14 }, { name: 'Topic two', note: 'Short note', value: 9 }, { name: 'Topic three', note: 'Short note', value: 6 }] }, 'Time and risk'),
+    S('focus', 'Focus', 'A four-step path with a gate', 'Callout plus four steps. Use for the first thirty days.',
+      { gate: { title: 'Gate · date', text: 'What must be true at the gate.' }, steps: [{ label: 'Week 1', title: 'Step title', text: 'What happens.' }, { label: 'Week 2', title: 'Step title', text: 'What happens.' }, { label: 'Week 3', title: 'Step title', text: 'What happens.' }, { label: 'Week 4', title: 'Step title', text: 'What happens.' }] }, 'Why the gate is real'),
+    S('next', 'Next', 'Next meeting, date and agenda', 'Date block plus timed items.',
+      { date: '2026-11-10', time: '10:00', items: [{ length: '5 min', text: 'Item' }, { length: '15 min', text: 'Item' }, { length: '10 min', text: 'Item' }] }, 'How the agenda is built'),
+  ];
+  slides.forEach((s, i) => { s.n = i + 1; });
+  return { name: 'Slide layouts', today, slides };
+}
+const libraryHtml = (o) => RS.deckHtml(sampleDeck(o));
+
+module.exports = { sampleDeck, libraryHtml };

package/workspace/lib/report-pyramid.js

@@ -490,6 +490,8 @@ function sectionBlockHtml(b, L) {
 /** The deck as one HTML string (the viewer's frames and the PDF print). */
 function deckHtml(deck) {
   if (!deck) return '';
+  // the report engine's deck is drawn in the report library's frame (B2, lib/report-slides.js; batch 27 item 14)
+  if (deck.frame === 'b2') return require('./report-slides.js').deckHtml(deck);
   const L = { ...STANDARD, ...(deck.look || {}) };
   return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${esc(deck.name)}</title><style>${css(L)}</style></head><body>${deck.slides.map((s) => slideHtml(s, L)).join('')}</body></html>`;
 }