feat: [verified] widen Skills Adoption diagram stories

scripts/browser/skills-stories.cjs

@@ -0,0 +1,45 @@
+const {chromium}=require('playwright');
+const fs=require('node:fs');
+const assert=require('node:assert/strict');
+(async()=>{
+ const base=process.argv[2]||'http://127.0.0.1:4173';
+ const out=`.cache/skills-${process.argv[3]||'candidate'}`;fs.mkdirSync(out,{recursive:true});
+ const browser=await chromium.launch({executablePath:process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,args:['--no-sandbox']}); const results=[];
+ try {
+ for(const topic of ['governance','quality','adoption','measurement','maintenance']) for(const width of [1440,1024,390,320]) {
+  const page=await browser.newPage({viewport:{width,height:900},colorScheme:'light'});const errors=[];page.on('pageerror',e=>errors.push(e.message));
+  const route=topic==='measurement'?topic:`skills-${topic}`;
+  assert.equal((await page.goto(`${base}/eldorado-v1/documentation/strategy/${route}/`,{waitUntil:'networkidle'})).status(),200);
+  const panel=page.locator('.archify-panel--skills');assert.equal(await panel.count(),1);
+  const iframe=panel.locator(width>700?'.story-desktop':'.story-mobile');await iframe.scrollIntoViewIfNeeded();
+  const frame=await(await iframe.elementHandle()).contentFrame();await frame.locator('svg[role="img"]').waitFor();
+  const geometry=await frame.locator('svg[role="img"]').evaluate(svg=>{
+   const nodes=[...svg.querySelectorAll('g[data-node-id]')];const issues=[];let min=Infinity;
+   for(const n of nodes){const rect=n.querySelector('rect').getBBox();for(const t of n.querySelectorAll('text')){
+    const b=t.getBBox();min=Math.min(min,parseFloat(getComputedStyle(t).fontSize)*t.getScreenCTM().a);
+    if(b.x<rect.x||b.y<rect.y||b.x+b.width>rect.x+rect.width||b.y+b.height>rect.y+rect.height)issues.push(n.id+':'+t.textContent);
+   }}
+   return {nodes:nodes.length,min,issues,width:innerWidth,svgWidth:svg.getBoundingClientRect().width};
+  });
+  assert.equal(geometry.nodes,6);assert.deepEqual(geometry.issues,[]);assert(geometry.min>=10,JSON.stringify(geometry));
+  for(const theme of ['light','dark']){
+   if(await frame.locator('html').getAttribute('data-theme')!==theme)await frame.locator('#btn-theme').click();
+   await page.waitForFunction(t=>document.documentElement.dataset.theme===t,theme);
+   await panel.scrollIntoViewIfNeeded();await page.screenshot({path:`${out}/${topic}-${width}-${theme}-inline.png`});
+   const open=panel.getByRole('button',{name:/^Expand /});await open.click();const close=panel.getByRole('button',{name:'Close full-screen diagram',exact:true});await close.waitFor({state:'visible'});
+   const expanded=await(await panel.locator('dialog iframe').elementHandle()).contentFrame();await expanded.locator('svg[role="img"]').waitFor();
+   assert((await expanded.url()).includes(width<=700?`${topic}-mobile/`:`${topic}/`));
+   await page.screenshot({path:`${out}/${topic}-${width}-${theme}-fullscreen.png`});
+   if(width<=700){await page.setViewportSize({width,height:480});assert(await panel.locator('dialog').evaluate(n=>n.scrollHeight>n.clientHeight));await panel.locator('dialog').evaluate(n=>n.scrollTop=n.scrollHeight);await page.screenshot({path:`${out}/${topic}-${width}-${theme}-short-bottom.png`});await page.setViewportSize({width,height:900});}
+   await close.focus();await page.keyboard.press('Escape');assert(await open.evaluate(n=>n===document.activeElement));
+  }
+  await frame.locator('#btn-preset').click();await frame.locator('[data-preset-value="blueprint"]').click();
+  await frame.locator('#btn-preset').click();await frame.locator('[data-preset-value="classic"]').click();
+  await frame.locator('#btn-export').click();const [download]=await Promise.all([page.waitForEvent('download'),frame.locator('[data-format="svg"]').click()]);assert.equal(await download.failure(),null);
+  await download.saveAs(`${out}/${topic}-${width}.svg`);assert(fs.readFileSync(`${out}/${topic}-${width}.svg`,'utf8').includes('eldorado-skills-typography'));
+  assert(!await page.evaluate(()=>document.documentElement.scrollWidth>innerWidth));assert.deepEqual(errors,[]);
+  results.push({topic,width,geometry,controls:true,export:true,themes:true,fullscreen:true});fs.writeFileSync(`${out}/results.json`,JSON.stringify(results,null,2));await page.close();
+ }
+ console.log(`PASS ${results.length} Skills story contexts: geometry, themes, controls, exports, fullscreen and short-phone scrolling`);
+ }finally{await browser.close();}
+})().catch(e=>{console.error(e);process.exitCode=1});

scripts/build-diagrams.mjs

@@ -1,6 +1,7 @@
 import {readdirSync, readFileSync, writeFileSync, mkdirSync, copyFileSync, renameSync, rmSync} from 'node:fs';
 import {join} from 'node:path';
 import {execFileSync} from 'node:child_process';
+import {skillsViewer, isSkillsStory} from './skills-viewer.mjs';
 import {roadmapViewer} from './roadmap-viewer.mjs';
 import {targetRouting} from './target-routing.mjs';
 import {createHash} from 'node:crypto';
@@ -27,11 +28,12 @@ for (const file of readdirSync('diagrams').sort()) {
   if (spec.diagram_type !== type || spec.meta.output !== output) throw new Error(`Diagram type/output mismatch: ${file}`);
   const run = args => execFileSync(process.execPath,[cli,...args],{stdio:'inherit',env:{...process.env,ARCHIFY_UPDATE_CHECK_DISABLED:'1'}});
   const roadmap = /^strategy-roadmap(?:-(?:adoption|loop))?(?:-mobile)?$/.test(name);
-  if (roadmap) {
+  const skills = isSkillsStory(name);
+  if (roadmap || skills) {
     // Native renderer validates schema and compiles layout. Check readability
     // after multiline typography, not upstream's single-line preview.
-    execFileSync(process.execPath, ['vendor/archify/renderers/workflow/render-workflow.mjs', input, output], {stdio:'inherit', env:{...process.env, ARCHIFY_UPDATE_CHECK_DISABLED:'1'}});
-    writeFileSync(output, roadmapViewer(readFileSync(output, 'utf8'), spec));
+    execFileSync(process.execPath, [`vendor/archify/renderers/${type}/render-${type}.mjs`, input, output], {stdio:'inherit', env:{...process.env, ARCHIFY_UPDATE_CHECK_DISABLED:'1'}});
+    writeFileSync(output, (skills ? skillsViewer : roadmapViewer)(readFileSync(output, 'utf8'), spec));
     run(['check',output,'--json']);
   } else {
     run(['validate',type,input,'--quality','showcase','--json']);
@@ -61,13 +63,13 @@ for (const file of readdirSync('diagrams').sort()) {
   }
   writeFileSync(output, viewer.replace('</head>', `<style id="eldorado-inline-controls">${inlineStyles}</style><style id="eldorado-cycle-labels">${storyStyles}</style></head>`)
     .replace('</body>', `<script>${themeBridge}</script></body>`));
-  if (roadmap) {
+  if (roadmap || skills) {
     // This is a portal receipt, not upstream deliver provenance: formatting
     // happens between the native schema/layout compiler and artifact checker.
     const hash = path => createHash('sha256').update(readFileSync(path)).digest('hex');
     const checked = JSON.parse(execFileSync(process.execPath, [cli,'check',output,'--json'], {encoding:'utf8', env:{...process.env, ARCHIFY_UPDATE_CHECK_DISABLED:'1'}}));
-    if (!checked.ok || checked.composition?.status !== 'pass') throw new Error('Roadmap final artifact failed');
-    writeFileSync(`.cache/archify/${name}.portal.json`, JSON.stringify({source:input, sourceSha256:hash(input), adapterSha256:hash('scripts/roadmap-viewer.mjs'), artifactSha256:hash(output), checker:checked}, null, 2));
+    if (!checked.ok || checked.composition?.status !== 'pass') throw new Error('Story final artifact failed');
+    writeFileSync(`.cache/archify/${name}.portal.json`, JSON.stringify({source:input, sourceSha256:hash(input), adapterSha256:hash(skills ? 'scripts/skills-viewer.mjs' : 'scripts/roadmap-viewer.mjs'), artifactSha256:hash(output), checker:checked}, null, 2));
   } else {
     renameSync(`static/diagrams/${name}/index.delivery.json`, `.cache/archify/${name}.delivery.json`);
     if (name === 'strategy-target') {

scripts/skills-stories.test.mjs

@@ -0,0 +1,48 @@
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {readFileSync, mkdtempSync, rmSync} from 'node:fs';
+import {tmpdir} from 'node:os';
+import {join} from 'node:path';
+import {execFileSync} from 'node:child_process';
+import {skillsViewer,isSkillsStory} from './skills-viewer.mjs';
+const read = p => readFileSync(p,'utf8');
+const topics = ['governance','quality','adoption','measurement','maintenance'];
+test('all six Skills Adoption pages account for exactly five diagrams and ten sources',()=>{
+ let count=0;
+ for(const route of ['stage-01-skills-adoption',...topics.map(t=>t==='measurement'?t:`skills-${t}`)]){
+  const diagrams=[...read(`docs/strategy/${route}.mdx`).matchAll(/<ArchifyDiagram name="([^"]+)"/g)];
+  assert.equal(diagrams.length,route.startsWith('stage-')?0:1);
+  for(const [,name] of diagrams){assert(isSkillsStory(name));for(const suffix of ['','-mobile'])JSON.parse(read(`diagrams/${name}${suffix}.architecture.json`));count++;}
+ }
+ assert.equal(count,5);assert(!isSkillsStory('strategy-target'));assert(!isSkillsStory('strategy-roadmap'));
+});
+for(const topic of topics) test(`${topic}: rich native source, wide desktop, mobile parity and checked adapter`,()=>{
+ const name=`strategy-${topic}`;const desktop=JSON.parse(read(`diagrams/${name}.architecture.json`));
+ const mobile=JSON.parse(read(`diagrams/${name}-mobile.architecture.json`));
+ const semantic = d=>d.components.map(({pos,size,...n})=>n);
+ assert.deepEqual(semantic(desktop),semantic(mobile));
+ assert.equal(new Set(desktop.components.map(n=>n.pos[0])).size,3);
+ assert.equal(new Set(mobile.components.map(n=>n.pos[0])).size,1);
+ for(const n of desktop.components){assert(n.tag);assert(n.sublabel.split('\n').length>=4);}
+ const dir=mkdtempSync(join(tmpdir(),'skills-viewer-'));
+ try{
+  const path=join(dir,'native.html');
+  execFileSync(process.execPath,['vendor/archify/renderers/architecture/render-architecture.mjs',`diagrams/${name}.architecture.json`,path]);
+  const native=read(path);const html=skillsViewer(native,desktop);
+  assert.equal((html.match(/<g\b[^>]*data-node-id=/g)||[]).length,6);
+  assert.equal((html.match(/<text data-node-label=/g)||[]).length,0); // Adapter uses explicit position before semantic attributes.
+  assert.equal((html.match(/data-node-label=""/g)||[]).length,6);
+  assert(html.includes('eldorado-skills-typography'));
+  assert.throws(()=>skillsViewer(native.replace('data-node-id="'+desktop.components[0].id+'"','data-node-id="missing"'),desktop));
+  const bad=structuredClone(desktop);bad.components[0].sublabel='not a full story';assert.throws(()=>skillsViewer(native,bad));
+ }finally{rmSync(dir,{recursive:true,force:true});}
+});
+test('domain contracts retain human authority, honest measures and Delivery-first rollout',()=>{
+ const text=t=>read(`diagrams/strategy-${t}.architecture.json`);
+ assert(text('governance').includes('Author is not sole approver'));
+ assert(text('quality').includes('Critical effect blocks'));
+ assert(text('adoption').includes('Delivery first')&&text('adoption').includes('Later order undecided'));
+ assert(text('adoption').includes('No quotas or rankings'));
+ for(const marker of ['Tracker:','Invoices + review minutes','linked defect records','Anonymous 1–5 survey','Missing buckets = partial','Zero denominator = N/A'])assert(text('measurement').includes(marker),marker);
+ assert(text('maintenance').includes('No automatic reinstatement'));
+});

scripts/skills-viewer.mjs

@@ -0,0 +1,35 @@
+// Keep native geometry, metadata, routing and exports; enrich only typography.
+export const isSkillsStory = name => /^strategy-(governance|quality|adoption|measurement|maintenance)(-mobile)?$/.test(name);
+const escape = text => text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;');
+export function skillsViewer(html, spec) {
+  if (spec.diagram_type !== 'architecture' || spec.components.length !== 6) throw new Error('Skills story contract drift');
+  for (const node of spec.components) {
+    const pattern = new RegExp(`<g\\b[^>]*data-node-id="${node.id}"[^>]*>[\\s\\S]*?<text data-node-label=[\\s\\S]*?</g>`);
+    const match = html.match(pattern);
+    if (!match) throw new Error(`Missing Skills node: ${node.id}`);
+    const original = match[0];
+    const rectangles = [...original.matchAll(/<rect\b[^>]*class="c-[^"]+"[^>]*\/>/g)];
+    if (rectangles.length !== 2) throw new Error('Skills shape contract drift');
+    const [x,y] = node.pos;
+    const lines = node.sublabel.split('\n');
+    if ((lines.length < 4 || lines.length > 5) || lines.some(line => line.length > 29) || node.label.length > 25) throw new Error(`Skills copy exceeds capacity: ${node.id}`);
+    const text = (value, top, size, attrs) => `<text x="${x+28}" y="${y+top}" font-size="${size}" ${attrs}>${escape(value)}</text>`;
+    const content = text(node.tag, 52, 36, 'class="t-muted" data-detail="context"')
+      + text(node.label, 118, 42, 'class="t-primary" data-node-label="" font-weight="700"')
+      + lines.map((line,i) => text(line, 190+i*46, 36, 'class="t-primary" data-detail="context"')).join('');
+    const prefix = original.slice(0,rectangles[1].index+rectangles[1][0].length).replaceAll('rx="6"','rx="0"');
+    html = html.replace(original,prefix+content+'</g>');
+  }
+  const roots = [...html.matchAll(/<svg\b[^>]*role="img"[^>]*>/g)];
+  if (roots.length !== 1) throw new Error('Skills SVG contract drift');
+  const width = Math.max(...spec.components.map(n=>n.pos[0]+n.size[0]))+40;
+  const height = Math.max(...spec.components.map(n=>n.pos[1]+n.size[1]))+40;
+  const root = roots[0][0].replace(/viewBox="[^"]*"/,`viewBox="0 0 ${width} ${height}"`);
+  // Embedded in SVG so downloaded files retain typography without the viewer.
+  html = html.replace(roots[0][0],root+`<style id="eldorado-skills-typography">
+    [data-node-id] text {font-family:Arial,sans-serif;}
+    .c-grid {opacity:0;}
+    [data-node-id] > rect:not(.c-mask) {stroke-width:3;}
+  </style>`);
+  return html;
+}

scripts/strategy-story.test.mjs

@@ -38,7 +38,7 @@ test('mobile story diagrams preserve the same nodes and directed relationships',
     assert(desktop.components.length >= 5 && desktop.components.length <= (name === 'strategy-target' ? 18 : 7), name);
     const semantic = d => ({nodes:d.components.map(({pos,size,...n})=>n),edges:d.connections.map(({fromSide,toSide,route,via,labelAt,...e})=>e)});
     assert.deepEqual(semantic(desktop), semantic(mobile), name);
-    assert(desktop.connections.every(e => (e.label || e.id.startsWith('govern-')) && e.from !== e.to), name);
+    assert(desktop.connections.every(e => (e.label || e.id.startsWith('govern-') || /^strategy-(governance|quality|adoption|maintenance)$/.test(name)) && e.from !== e.to), name);
     assert.equal(desktop.meta.legend.mode, 'hidden');
   }
 });