@fasl-work/caos-app-shell 0.11.2 → 0.12.0

package/gate/areas.mjs

@@ -80,13 +80,10 @@ const A = (en, es, requires, extra = {}) => ({ what: { en, es }, requires, ...ex
 export const PAGES = {
   '/introduction': {
     name: 'Introduction',
-    // two top-level topics: the executive view first (the default), then the technical view
+    // two top-level topics: the executive view first (the default), then the technical view. The executive view has no
+    // areas: it is the shell's ExecutiveView, checked by executiveFailures below (0.12.0, problem-context-first.md).
     views: ['executive', 'technical'],
     areas: {
-      initiative: A('the initiative an executive owns, named by role and industry, and the quantified reason to act now', 'la iniciativa que un ejecutivo tiene a su cargo, nombrada por rol e industria, y la razón cuantificada para actuar ahora', { dense: 1, stats: 1 }, { view: 'executive' }),
-      outcomes: A('the transformation story: the vision first, then each capability tied to a business outcome with a quantified proof point', 'la historia de transformación: primero la visión, luego cada capacidad atada a un resultado de negocio con una prueba cuantificada', { dense: 1, rows: 3, rowsNoStat: 0 }, { view: 'executive' }),
-      positioning: A('the value story: four value points, each tied back to the problem of that executive', 'la historia de valor: cuatro puntos de valor, cada uno atado al problema de ese ejecutivo', { items: 4, thinItems: 0 }, { view: 'executive' }),
-      credibility: A('delivery and credibility: the business questions that executive would ask, each answered plainly with the honest limits', 'entrega y credibilidad: las preguntas de negocio que haría ese ejecutivo, cada una respondida con claridad y con los límites honestos', { qa: 3, honest: 1 }, { view: 'executive' }),
       problem: A('the industrial or scientific problem, with the concrete equipment, setting and who it serves', 'el problema industrial o científico, con el equipo concreto, el contexto y a quién sirve', { dense: 2 }, { view: 'technical' }),
       principles: A('the physics or the domain principles the product rests on', 'la física o los principios del dominio en que se apoya el producto', { dense: 2 }, { view: 'technical' }),
       math: A('the governing mathematics', 'la matemática que gobierna', { equations: 1, glossary: 10 }, { view: 'technical' }),
@@ -168,6 +165,131 @@ export const waivable = (route) => [
 ];
 /** The executive view of the Introduction is the decision maker's page: none of its areas, and not the view, can be waived. */
 export const NOT_WAIVABLE_NOTE = 'the executive view of the Introduction cannot be waived';
+/** What a waiver may not name: the executive view and the four areas it replaced (0.12.0). */
+export const EXECUTIVE_FLOORS = ['executive', 'executive-view', 'initiative', 'outcomes', 'positioning', 'credibility'];
+
+// ------------------------------------------------------------------------------------------------ the executive view
+// The executive view of the Introduction is the shell's ExecutiveView fed by the product's content/executive.json
+// (conventions/problem-context-first.md). Its structure is `src/content/executive.schema.json`; its writing limits are
+// here AND in `src/content/executive.ts` (test/executive.test.ts keeps the two equal): the gate measures the rendered
+// page, the component validates the data.
+export const EXEC_SCHEMA_VERSION = '1.0.0';
+export const EXEC_LIMITS = {
+  maxWords: 30,
+  maxAnswerSentences: 2,
+  equation: /\$|\\\(|\\\[|\\[a-zA-Z]+/,
+  citations: [/\(\s*Source/i, /\[\d+\]/, /\(\s*ECB/, /\(\w[^()]*\d{4}\)/],
+  minLabelPx: 9,
+};
+/** The four sections of the view: title and rubric question (Felipe's rubric, verbatim). */
+export const EXEC_SECTIONS = [
+  { title: { en: 'Industry & Exec Tailoring', es: 'Industria y foco ejecutivo' }, question: { en: 'Built for a C-suite exec?', es: '¿Pensado para un ejecutivo de primer nivel?' } },
+  { title: { en: 'AI Transformation Story', es: 'Historia de transformación con IA' }, question: { en: 'Outcomes, not a feature tour', es: 'Resultados, no un recorrido de funciones' } },
+  { title: { en: '4Cs Positioning', es: 'Posicionamiento 4C' }, question: { en: 'Value story, not features dump', es: 'Historia de valor, no lista de funciones' } },
+  { title: { en: 'Delivery & Credibility', es: 'Entrega y credibilidad' }, question: { en: 'Trust them in front of a CxO?', es: '¿Confiaría en ellos frente a un ejecutivo?' } },
+];
+/** The illustrations in the order of the page and the section each sits in. */
+export const EXEC_ILLUSTRATIONS = [
+  { name: 'initiative', section: 1 },
+  { name: 'problem', section: 1 },
+  { name: 'solution', section: 2 },
+];
+export const EXEC_PENDING = { en: "Pending: the 4 C's are defined by the product owner", es: 'Pendiente: las 4 C las define el responsable del producto' };
+
+/** How many sentences a field of the view may hold: one for the single-sentence fields, two for an answer, no limit otherwise. */
+export const execSentenceLimit = (path) =>
+  /^(initiative|vision)$|^outcomes\[\d+\]\.proof\.statement$|^four_cs\[\d+\]\.exec_problem$|^illustrations\.\w+\.caption$/.test(path)
+    ? 1
+    : /^dialogue\[\d+\]\.answer$/.test(path)
+      ? EXEC_LIMITS.maxAnswerSentences
+      : undefined;
+
+const sentencesOf = (text) =>
+  text
+    .split(/(?<=[.?!])\s+/)
+    .map((x) => x.trim())
+    .filter(Boolean);
+const wordsIn = (text) => text.split(/\s+/).filter((w) => /[\p{L}\p{N}]/u.test(w)).length;
+
+/**
+ * The problems of the executive view in one language, from what the page showed (`G.docPage().executive` of
+ * gate/inpage.mjs). Pure. `facts` is null or {count: 0} when the page renders no ExecutiveView.
+ * @returns {string[]} one text per problem
+ */
+export function executiveFailures(facts, lang) {
+  const L = lang.toUpperCase();
+  const out = [];
+  const bad = (m) => out.push(`Introduction, executive view (${L}): ${m}`);
+  if (!facts || facts.count === 0) {
+    bad("no ExecutiveView ([data-executive-view]); the executive view is the shell's ExecutiveView fed by content/executive.json (docs/06_executive-view.md)");
+    return out;
+  }
+  if (facts.count > 1) bad(`${facts.count} ExecutiveView elements; exactly 1 is required`);
+  if (facts.schema !== EXEC_SCHEMA_VERSION) bad(`the view declares schema "${facts.schema ?? 'none'}", expected "${EXEC_SCHEMA_VERSION}"`);
+  if (facts.valid !== 'true') {
+    bad(`the data file is not valid in the page: ${String(facts.errors || 'no reason given').slice(0, 400)}`);
+    return out;
+  }
+  if (facts.docSections > 0) bad(`${facts.docSections} DocSection(s) placed in the executive view (${facts.docSectionTitles.join(', ')}); the view has exactly its four sections and takes none`);
+  if (facts.strangers.length > 0) bad(`${facts.strangers.length} block(s) beside the ExecutiveView (${facts.strangers.slice(0, 3).map((x) => `"${x}"`).join(', ')}); the view is the whole of the executive view`);
+  if (!facts.inOpenView) bad('the ExecutiveView is not in the open executive view');
+  // the four sections, in order, with their titles and questions
+  if (facts.sections.length !== 4) bad(`${facts.sections.length} section(s), exactly 4 are required`);
+  EXEC_SECTIONS.forEach((def, i) => {
+    const got = facts.sections[i];
+    if (!got) return;
+    if (got.n !== i + 1) bad(`section ${i + 1} is out of order (it declares ${got.n})`);
+    if (got.title !== def.title[lang]) bad(`section ${i + 1} is titled "${got.title}", expected "${def.title[lang]}"`);
+    if (got.question !== def.question[lang]) bad(`section ${i + 1} asks "${got.question}", expected "${def.question[lang]}"`);
+  });
+  const s3 = facts.sections[2];
+  if (s3) {
+    if (s3.pending === 1 && s3.rows === 0) {
+      if (s3.pendingText !== EXEC_PENDING[lang]) bad(`section 3 declares the pending state "${s3.pendingText}", expected "${EXEC_PENDING[lang]}"`);
+      if (s3.pendingState !== 'unavailable') bad('section 3 is pending without data-state="unavailable"');
+    } else if (s3.rows !== 4) bad(`section 3 holds ${s3.rows} row(s) of the 4 C's, exactly 4 are required (or the pending state)`);
+  }
+  // the writing limits, on the text a reader sees
+  const unreadable = [];
+  for (const f of facts.fields) {
+    if (!f.readable) {
+      unreadable.push(f.path);
+      continue;
+    }
+    const sentences = sentencesOf(f.text);
+    for (const s of sentences) {
+      const n = wordsIn(s);
+      if (n > EXEC_LIMITS.maxWords) bad(`field "${f.path}": a sentence of ${n} words; the limit is ${EXEC_LIMITS.maxWords}`);
+    }
+    const max = execSentenceLimit(f.path);
+    if (max !== undefined && sentences.length > max) bad(`field "${f.path}": ${sentences.length} sentences; the limit is ${max}`);
+    if (EXEC_LIMITS.equation.test(f.text)) bad(`field "${f.path}": holds an equation or a TeX marker`);
+    if (EXEC_LIMITS.citations.some((re) => re.test(f.text))) bad(`field "${f.path}": holds an inline citation (sources are numbered notes)`);
+  }
+  if (unreadable.length > 0) bad(`${unreadable.length} field(s) are in the page and a reader cannot read them: ${unreadable.slice(0, 4).join(', ')}`);
+  if (facts.notes !== facts.figures) bad(`${facts.notes} numbered source note(s) for ${facts.figures} figure(s)`);
+  // the three illustrations, in their places
+  const names = facts.illustrations.map((x) => x.name);
+  if (names.join() !== EXEC_ILLUSTRATIONS.map((x) => x.name).join()) bad(`the illustrations are [${names.join(', ')}], expected [initiative, problem, solution] in that order`);
+  for (const ill of facts.illustrations) {
+    const want = EXEC_ILLUSTRATIONS.find((x) => x.name === ill.name);
+    const name = `illustration "${ill.name}"`;
+    if (want && ill.section !== want.section) bad(`${name} sits in section ${ill.section}, it belongs in section ${want.section}`);
+    if (ill.state === 'error') {
+      bad(`${name}: the file "${ill.file}" did not load (${ill.why})`);
+      continue;
+    }
+    if (!ill.svg) bad(`${name} is not an inline SVG`);
+    if (ill.img > 0) bad(`${name} is drawn through an img tag; it must be inline so it reads the theme`);
+    if (ill.chart > 0) bad(`${name} declares a chart (data-chart); the executive illustrations are drawings, not charts`);
+    if (ill.literal.length > 0) bad(`${name} uses literal colour(s) ${ill.literal.slice(0, 4).join(', ')}; colour only with var(--...) theme tokens, none or currentColor`);
+    if (ill.outside.length > 0) bad(`${name}: label(s) outside the viewBox: ${ill.outside.slice(0, 3).map((x) => `"${x}"`).join(', ')}`);
+    if (ill.labels === 0) bad(`${name} carries no label in this language`);
+    if (ill.small.length > 0) bad(`${name}: label(s) smaller than ${EXEC_LIMITS.minLabelPx}px as rendered: ${ill.small.slice(0, 3).join(', ')}`);
+    if (!ill.caption) bad(`${name} has no caption under it`);
+  }
+  return [...new Set(out)];
+}
 
 /** Parses `data-floor-waiver` ("floor: reason; floor: reason") into entries. */
 export function parseWaivers(attr) {
@@ -232,7 +354,7 @@ export function docFloorFailures({ route, lang, states, expectedTopics }) {
   const waivers = entries.map((w) => ({ ...w, valid: ok.has(w.floor) && reasonOk(w.reason) }));
   for (const w of entries) {
     if (!ok.has(w.floor)) {
-      const exec = P.areas[w.floor]?.view === 'executive';
+      const exec = route === '/introduction' && EXECUTIVE_FLOORS.includes(w.floor);
       bad('', `${NAME} (${L}): the waiver for "${w.floor}" is refused: ${exec ? NOT_WAIVABLE_NOTE : `it names no floor of this page (${[...ok].join(', ')})`}`);
     } else if (!reasonOk(w.reason)) {
       const s = reasonStats(w.reason);
@@ -246,6 +368,7 @@ export function docFloorFailures({ route, lang, states, expectedTopics }) {
   const sections = new Map();
   const figures = new Set();
   const equations = new Set();
+  const execMessages = new Set();
   for (const st of states) {
     for (const t of st.topics) topics.set(t.key, t.label);
     const ordinal = new Map();
@@ -259,11 +382,16 @@ export function docFloorFailures({ route, lang, states, expectedTopics }) {
       for (const f of st.figures) figures.add(`${st.topics.map((t) => t.key).join('|')}::${f}`);
       for (const e of st.equations) equations.add(`${st.topics.map((t) => t.key).join('|')}::${e}`);
     }
+    if (route === '/introduction' && st.view !== 'executive' && st.executive && st.executive.count > 0) {
+      bad('', `${NAME} (${L}): the ExecutiveView sits in the "${st.view ?? 'none'}" view; it belongs to the executive view`);
+    }
     if (route === '/introduction' && st.view === 'executive') {
+      for (const m of executiveFailures(st.executive, lang)) execMessages.add(m);
       if (st.viewEquations > 0) bad(st.topics[0]?.label ?? '', `${NAME}, executive view (${L}): ${st.viewEquations} equation(s); the executive view holds no equation`);
       if (st.viewGlossaries > 0) bad(st.topics[0]?.label ?? '', `${NAME}, executive view (${L}): ${st.viewGlossaries} symbol glossary(ies); the executive view holds none`);
     }
   }
+  for (const m of execMessages) bad('', m);
   const seen = [...sections.values()].map(mergeSections);
   const tname = (label) => (label ? `topic "${label}"` : 'the page');
 

package/gate/inpage.mjs

@@ -7,6 +7,8 @@
 export function installLib() {
   const G = (window.__caosGate = window.__caosGate || {});
   G.raf = 0;
+  // The smallest rendered size of an illustration label (EXEC_LIMITS.minLabelPx of gate/areas.mjs; test/executive.test.ts keeps them equal).
+  const EXEC_MIN_LABEL_PX = 9;
   G.counting = false;
   const nativeRaf = window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : null;
   if (nativeRaf) {
@@ -611,8 +613,91 @@ export function installLib() {
         qa: [...sec.querySelectorAll('[data-qa]')].filter((q) => mine(q) && nonEmpty(q, '[data-question]') && nonEmpty(q, '[data-answer]')).length,
       };
     });
-    const inView = (sel) => (outerPanel ? [...outerPanel.querySelectorAll(sel)] : [...page.querySelectorAll(sel)]).filter(seen);
     const selected = outerTabs.find((t) => t.getAttribute('aria-selected') === 'true');
+    // The executive view (shell 0.12.0): what the ExecutiveView shows, for executiveFailures of gate/areas.mjs.
+    const execRoots = [...page.querySelectorAll('[data-executive-view]')].filter(visible);
+    const executive = (() => {
+      if (!execRoots.length) return { count: 0 };
+      const root = execRoots[0];
+      const isTok = (v) => {
+        const x = String(v || '').trim().toLowerCase();
+        return !x || ['none', 'currentcolor', 'transparent', 'inherit', 'initial', 'unset', 'context-fill', 'context-stroke'].includes(x) || x.startsWith('var(--') || x.startsWith('url(');
+      };
+      const COLOR_PROPS = ['fill', 'stroke', 'stop-color', 'flood-color', 'lighting-color', 'color'];
+      const literalsOf = (svg) => {
+        const out = new Set();
+        const scan = (css) => {
+          for (const m of css.matchAll(/(?:^|[;{\s])(fill|stroke|stop-color|flood-color|lighting-color|color)\s*:\s*([^;}]+)/gi)) if (!isTok(m[2])) out.add(`${m[1].toLowerCase()}: ${m[2].trim()}`);
+        };
+        for (const el of [svg, ...svg.querySelectorAll('*')]) {
+          for (const p of COLOR_PROPS) if (el.hasAttribute(p) && !isTok(el.getAttribute(p))) out.add(`${p}: ${el.getAttribute(p).trim()}`);
+          if (el.hasAttribute('style')) scan(el.getAttribute('style'));
+          if (el.localName === 'style') scan(el.textContent || '');
+        }
+        return [...out];
+      };
+      const illustrations = [...root.querySelectorAll('[data-exec-illustration]')].map((fig) => {
+        const svg = fig.querySelector('svg');
+        const sec = fig.closest('[data-exec-section]');
+        const cap = fig.querySelector('figcaption');
+        const info = { name: fig.getAttribute('data-exec-illustration'), section: sec ? Number(sec.getAttribute('data-exec-section')) : 0, file: fig.getAttribute('data-exec-file'), state: fig.getAttribute('data-state'), why: textOf(fig.querySelector('.caos-exec-fig-error') || fig).slice(0, 80), svg: Boolean(svg), img: fig.querySelectorAll('img').length, chart: fig.querySelectorAll('[data-chart], [data-plot]').length, caption: Boolean(cap && textOf(cap)), literal: [], outside: [], small: [], labels: 0 };
+        if (!svg) return info;
+        info.literal = literalsOf(svg);
+        const vb = svg.viewBox && svg.viewBox.baseVal;
+        const w = svg.getBoundingClientRect().width;
+        const scale = vb && vb.width ? w / vb.width : 1;
+        for (const t of svg.querySelectorAll('text')) {
+          const label = (t.textContent || '').trim();
+          if (!label || !visible(t)) continue;
+          info.labels += 1;
+          if (vb && vb.width) {
+            const b = t.getBBox();
+            if (b.x < vb.x - 1 || b.y < vb.y - 1 || b.x + b.width > vb.x + vb.width + 1 || b.y + b.height > vb.y + vb.height + 1) info.outside.push(label.slice(0, 40));
+          }
+          const px = parseFloat(getComputedStyle(t).fontSize) * scale;
+          if (px < EXEC_MIN_LABEL_PX) info.small.push(`"${label.slice(0, 30)}" at ${px.toFixed(1)}px`);
+        }
+        return info;
+      });
+      const sections = [...root.querySelectorAll('[data-exec-section]')].map((sec) => {
+        const pending = sec.querySelector('[data-exec-pending]');
+        return {
+          n: Number(sec.getAttribute('data-exec-section')),
+          title: textOf(sec.querySelector('h2') || sec),
+          question: textOf(sec.querySelector('[data-exec-question]') || sec),
+          pending: pending && seen(pending) ? 1 : 0,
+          pendingText: pending ? textOf(pending) : '',
+          pendingState: pending ? pending.getAttribute('data-state') : null,
+          rows: [...sec.querySelectorAll('[data-exec-c]')].filter(seen).length,
+        };
+      });
+      const panelOpen = outerPanel ? outerPanel.contains(root) : true;
+      const execOpen = selected && (selected.getAttribute('data-tab') || tabLabel(selected)) === 'executive';
+      const area = execOpen && outerPanel ? outerPanel : null;
+      const docSections = area ? [...area.querySelectorAll('[data-doc-section]')].filter((e) => visible(e) && !root.contains(e)) : [];
+      // anything of the open executive view that is neither the ExecutiveView nor the references block of the panel
+      const strangers = area
+        ? [...area.querySelectorAll('p, ul, ol, table, figure, h1, h2, h3, h4, pre, canvas, .callout, .equation, .caos-qa')]
+            .filter((e) => visible(e) && !root.contains(e) && !e.closest('[data-doc-references], [data-doc-section]'))
+            .map((e) => textOf(e).slice(0, 50) || e.tagName.toLowerCase())
+        : [];
+      return {
+        count: execRoots.length,
+        schema: root.getAttribute('data-executive-schema'),
+        valid: root.getAttribute('data-executive-valid'),
+        errors: root.getAttribute('data-executive-errors') || '',
+        inOpenView: panelOpen,
+        docSections: docSections.length,
+        docSectionTitles: docSections.map((e) => textOf(e.querySelector('h2') || e).slice(0, 40)),
+        strangers,
+        sections,
+        fields: [...root.querySelectorAll('[data-exec-field]')].map((e) => ({ path: e.getAttribute('data-exec-field'), text: textOf(e), readable: seen(e) })),
+        notes: root.querySelectorAll('[data-exec-notes] > li').length,
+        figures: root.querySelectorAll('.caos-exec-cite').length,
+        illustrations,
+      };
+    })();
+    const inView = (sel) => (outerPanel ? [...outerPanel.querySelectorAll(sel)] : [...page.querySelectorAll(sel)]).filter(seen);
     return {
       ledeWords: lede && visible(lede) ? wordsOf(lede).words : 0,
       waiver: page.getAttribute('data-floor-waiver'),
@@ -623,6 +708,7 @@ export function installLib() {
       viewEquations: [...page.querySelectorAll('.equation')].filter(seen).length,
       viewGlossaries: [...page.querySelectorAll('[data-glossary]')].filter(seen).length,
       sections,
+      executive,
       figures: inView('figure').map(captioned).filter(Boolean),
       equations: inView('.equation').map(equationCaption).filter(Boolean),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Shared web-app shell, workbench primitives, content primitives, design system and measured gate for the CAOS / Faena public apps (ADR-0016, ADR-0017, ADR-0071).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",
@@ -31,6 +31,7 @@
     "./styles.css": "./styles.css",
     "./chart.css": "./chart.css",
     "./reserved-classes.json": "./reserved-classes.json",
+    "./executive.schema.json": "./src/content/executive.schema.json",
     "./serve": "./gate/serve.mjs",
     "./gate": "./gate/run.mjs",
     "./package.json": "./package.json"
@@ -41,7 +42,8 @@
     "chart.css",
     "bin",
     "gate",
-    "reserved-classes.json"
+    "reserved-classes.json",
+    "src/content/executive.schema.json"
   ],
   "scripts": {
     "build": "tsup",

package/reserved-classes.json

@@ -38,6 +38,30 @@
     "caos-doc-reference-list",
     "caos-doc-references",
     "caos-doc-section",
+    "caos-exec",
+    "caos-exec-art",
+    "caos-exec-art-wait",
+    "caos-exec-cite",
+    "caos-exec-cs",
+    "caos-exec-error",
+    "caos-exec-facts",
+    "caos-exec-fig",
+    "caos-exec-fig-error",
+    "caos-exec-initiative",
+    "caos-exec-label",
+    "caos-exec-notes",
+    "caos-exec-notes-title",
+    "caos-exec-notes-wrap",
+    "caos-exec-outcome",
+    "caos-exec-outcomes",
+    "caos-exec-pending",
+    "caos-exec-proof",
+    "caos-exec-question",
+    "caos-exec-section",
+    "caos-exec-sep",
+    "caos-exec-value",
+    "caos-exec-vision",
+    "caos-exec-whynow",
     "caos-field",
     "caos-focus-actions",
     "caos-focus-hud",
@@ -280,6 +304,30 @@
     "caos-doc-reference-list",
     "caos-doc-references",
     "caos-doc-section",
+    "caos-exec",
+    "caos-exec-art",
+    "caos-exec-art-wait",
+    "caos-exec-cite",
+    "caos-exec-cs",
+    "caos-exec-error",
+    "caos-exec-facts",
+    "caos-exec-fig",
+    "caos-exec-fig-error",
+    "caos-exec-initiative",
+    "caos-exec-label",
+    "caos-exec-notes",
+    "caos-exec-notes-title",
+    "caos-exec-notes-wrap",
+    "caos-exec-outcome",
+    "caos-exec-outcomes",
+    "caos-exec-pending",
+    "caos-exec-proof",
+    "caos-exec-question",
+    "caos-exec-section",
+    "caos-exec-sep",
+    "caos-exec-value",
+    "caos-exec-vision",
+    "caos-exec-whynow",
     "caos-field",
     "caos-focus-actions",
     "caos-focus-hud",

package/src/content/executive.schema.json

@@ -0,0 +1,141 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://github.com/fsantibanezleal/CAOS_APP_SHELL/blob/main/src/content/executive.schema.json",
+  "title": "CAOS executive view data, version 1.0.0",
+  "description": "The one data file a CAOS product fills for the executive view of its Introduction (content/executive.json). Every text is { en, es }; nothing outside these fields is allowed. The writing limits (30 words per sentence, an answer of at most 2 sentences, one sentence for initiative, vision, statement, exec_problem and caption, no equation, no inline citation), the four_cs rule (absent until FOUR_CS names the 4 C's) and the sources-by-field rule are checked by validateExecutive in executive.ts, on top of this structure.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["executive", "organisation", "initiative", "why_now", "vision", "outcomes", "dialogue", "illustrations", "sources"],
+  "properties": {
+    "executive": { "$ref": "#/$defs/text", "description": "One C-suite role, never a list." },
+    "organisation": { "$ref": "#/$defs/text", "description": "One industry and one context, never several regions." },
+    "initiative": { "$ref": "#/$defs/text", "description": "One sentence: what that executive owns and must achieve." },
+    "why_now": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["figure", "deadline"],
+      "properties": {
+        "figure": { "$ref": "#/$defs/figure" },
+        "deadline": { "$ref": "#/$defs/text", "description": "One date or deadline, for example 'by 1 December 2026'." }
+      }
+    },
+    "vision": { "$ref": "#/$defs/text", "description": "One sentence: what changes for the executive's business. Comes first in section 2." },
+    "outcomes": {
+      "type": "array",
+      "minItems": 3,
+      "maxItems": 5,
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["capability", "outcome", "proof"],
+        "properties": {
+          "capability": { "$ref": "#/$defs/text", "description": "What the product does, in plain words." },
+          "outcome": { "$ref": "#/$defs/text", "description": "The business result, non-technical." },
+          "proof": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["value", "unit", "statement"],
+            "properties": {
+              "value": { "$ref": "#/$defs/text" },
+              "unit": { "$ref": "#/$defs/text" },
+              "statement": { "$ref": "#/$defs/text", "description": "A one-line statement of the proof point." }
+            }
+          }
+        }
+      }
+    },
+    "four_cs": {
+      "type": "array",
+      "minItems": 4,
+      "maxItems": 4,
+      "description": "Exactly 4 rows in the owner's order. Absent while FOUR_CS is empty; required, with c equal to the name, once it holds 4 names.",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["c", "exec_problem"],
+        "properties": {
+          "c": { "$ref": "#/$defs/text" },
+          "exec_problem": { "$ref": "#/$defs/text", "description": "One sentence tying the C to this executive's problem." }
+        }
+      }
+    },
+    "dialogue": {
+      "type": "array",
+      "minItems": 3,
+      "maxItems": 5,
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["question", "answer"],
+        "properties": {
+          "question": { "$ref": "#/$defs/text", "description": "A business question that executive asks." },
+          "answer": { "$ref": "#/$defs/text", "description": "At most 2 sentences." }
+        }
+      }
+    },
+    "illustrations": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["initiative", "problem", "solution"],
+      "properties": {
+        "initiative": { "$ref": "#/$defs/illustration" },
+        "problem": { "$ref": "#/$defs/illustration" },
+        "solution": { "$ref": "#/$defs/illustration" }
+      }
+    },
+    "sources": {
+      "type": "array",
+      "minItems": 1,
+      "description": "The source of every figure (why_now.figure and each outcomes[i].proof), by field path; shown as numbered notes, never inline.",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["field", "source"],
+        "properties": {
+          "field": { "type": "string", "minLength": 1 },
+          "source": { "$ref": "#/$defs/text" }
+        }
+      }
+    }
+  },
+  "$defs": {
+    "text": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["en", "es"],
+      "properties": {
+        "en": { "type": "string", "minLength": 1 },
+        "es": { "type": "string", "minLength": 1 }
+      }
+    },
+    "figure": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["value", "unit"],
+      "properties": {
+        "value": { "$ref": "#/$defs/text" },
+        "unit": { "$ref": "#/$defs/text" }
+      }
+    },
+    "illustration": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["file", "caption"],
+      "properties": {
+        "file": {
+          "description": "The inline SVG: one path, or one path per language.",
+          "anyOf": [
+            { "type": "string", "minLength": 1 },
+            {
+              "type": "object",
+              "additionalProperties": false,
+              "required": ["en", "es"],
+              "properties": { "en": { "type": "string", "minLength": 1 }, "es": { "type": "string", "minLength": 1 } }
+            }
+          ]
+        },
+        "caption": { "$ref": "#/$defs/text", "description": "One sentence saying what the reader should take from the illustration." }
+      }
+    }
+  }
+}

package/styles.css

@@ -715,3 +715,36 @@ svg.lucide { flex: none; }
 [data-arch-lang="es"] .l-es { display: inline; }
 .caos-architecture-diagram > svg { display: block; width: 100%; height: auto; max-width: none; }
 .caos-arch-toggle { margin: 0 0 8px; font-size: 12px; padding: 5px 10px; color: var(--color-fg); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
+
+/* The executive view (shell 0.12.0, conventions/problem-context-first.md): four sections in order, three inline illustrations,
+   numbered source notes. The product fills content/executive.json; it never styles this view. Illustrations are inline SVG
+   coloured with the theme tokens; a drawing carrying both languages shows the labels of the displayed one. */
+.caos-exec { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
+.caos-exec-section { min-width: 0; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
+.caos-exec-section:first-child { border-top: 0; padding-top: 0; }
+.caos-exec-section > h2 { margin-block: 0 0.15rem; }
+.caos-exec-question { margin: 0 0 1rem; font-size: var(--text-sm); color: var(--color-fg-faint); font-style: italic; }
+.caos-exec-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
+.caos-exec-facts dt, .caos-exec-label { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-faint); font-weight: 650; }
+.caos-exec-facts dd { margin: 0.1rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
+.caos-exec-initiative, .caos-exec-vision { font-size: var(--text-lg); line-height: 1.45; margin: 0 0 1rem; }
+.caos-exec-whynow { margin: 1rem 0; overflow-wrap: anywhere; }
+.caos-exec-whynow .caos-exec-label { display: block; margin-bottom: 0.15rem; }
+.caos-exec-value { font-size: var(--text-xl); font-variant-numeric: tabular-nums; color: var(--color-accent); }
+.caos-exec-sep { color: var(--color-fg-faint); }
+.caos-exec-cite { margin-left: 0.15rem; font-size: var(--text-xs); }
+.caos-exec-fig { margin: 1.25rem 0; }
+.caos-exec-art { width: 100%; max-width: 640px; margin-inline: auto; }
+.caos-exec-art > svg { display: block; width: 100%; height: auto; }
+.caos-exec-art-wait { aspect-ratio: 8 / 5; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
+.caos-exec-fig svg text { font-family: var(--font-sans); }
+.caos-exec-fig[data-lang="en"] [data-lang="es"], .caos-exec-fig[data-lang="es"] [data-lang="en"] { display: none; }
+.caos-exec-fig-error { margin: 0 auto; max-width: 640px; padding: 1rem; border: 1px solid var(--color-bad); border-radius: var(--radius-md); color: var(--color-fg); overflow-wrap: anywhere; }
+.caos-exec-outcomes, .caos-exec-cs { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
+.caos-exec-outcome, .caos-exec-cs > li { min-width: 0; padding: 0.8rem 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 0.6rem; overflow-wrap: anywhere; }
+.caos-exec-proof { margin-top: auto; }
+.caos-exec-pending { margin: 0; padding: 0.8rem 1rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-fg-subtle); }
+.caos-exec-notes-wrap { border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
+.caos-exec-notes-title { margin: 0 0 0.35rem; font-size: var(--text-sm); color: var(--color-fg-faint); }
+.caos-exec-notes { margin: 0; padding-left: 1.4rem; font-size: var(--text-sm); color: var(--color-fg-subtle); }
+.caos-exec-error { padding: 1rem 1.25rem; border: 1px solid var(--color-bad); border-radius: var(--radius-md); }