feat: [verified] compose Skills Adoption diagrams around their stories

scripts/browser/skills-exports.cjs

@@ -0,0 +1,42 @@
+const {chromium}=require('playwright');
+const fs=require('node:fs');
+const path=require('node:path');
+const assert=require('node:assert/strict');
+(async()=>{
+ const dir=process.argv[2]||'.cache/skills-candidate';
+ 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 spec=JSON.parse(fs.readFileSync(`diagrams/strategy-${topic}${width<=1100?'-mobile':''}.architecture.json`));
+   const page=await browser.newPage({viewport:{width:1200,height:1000}});
+   await page.goto('file://'+path.resolve(`${dir}/${topic}-${width}.svg`));
+   const measured=await page.locator('svg').evaluate(svg=>{
+    const v=svg.viewBox.baseVal;const issues=[];
+    for(const el of svg.querySelectorAll('[data-node-id],path[data-edge-id],g[data-edge-id]')){
+     const b=el.getBBox();if(b.x<v.x-1||b.y<v.y-1||b.x+b.width>v.x+v.width+1||b.y+b.height>v.y+v.height+1)issues.push(el.getAttribute('data-node-id')||el.getAttribute('data-edge-id'));
+    }
+    // Measure the whole rendered label group, including its opaque mask:
+    // text presence alone cannot detect one label hiding another.
+    const labels=[...svg.querySelectorAll('g[data-edge-id]')].filter(el=>el.querySelector('text')).map(el=>({id:el.dataset.edgeId,box:el.getBoundingClientRect()}));
+    const labelOverlaps=[];
+    for(let i=0;i<labels.length;i++)for(let j=i+1;j<labels.length;j++){
+     const a=labels[i],b=labels[j];
+     if(Math.min(a.box.right,b.box.right)>Math.max(a.box.left,b.box.left)&&Math.min(a.box.bottom,b.box.bottom)>Math.max(a.box.top,b.box.top))labelOverlaps.push([a.id,b.id]);
+    }
+    return {labelOverlaps,viewBox:[v.width,v.height],nodes:[...svg.querySelectorAll('[data-node-id]')].map(n=>n.dataset.nodeId),edges:[...svg.querySelectorAll('path[data-edge-id]')].map(n=>n.dataset.edgeId),text:svg.textContent,issues};
+   });
+   assert.deepEqual(measured.viewBox,spec.meta.viewBox);
+   assert.deepEqual(measured.nodes.sort(),spec.components.map(n=>n.id).sort());
+   assert.deepEqual(measured.edges.sort(),spec.connections.map(e=>e.id).sort());
+   assert.deepEqual(measured.issues,[]);
+   assert.deepEqual(measured.labelOverlaps,[],`${topic}-${width}: rendered edge labels overlap`);
+   for(const n of spec.components){assert(measured.text.includes(n.label));assert(measured.text.includes(n.tag));for(const line of n.sublabel.split('\n'))assert(measured.text.includes(line));}
+   for(const e of spec.connections)if(e.label)assert(measured.text.includes(e.label));
+   if(width===1440)await page.screenshot({path:`${dir}/${topic}-standalone-export.png`});
+   results.push({topic,width,nodes:measured.nodes.length,edges:measured.edges.length,complete:true});await page.close();
+  }
+  fs.writeFileSync(`${dir}/export-results.json`,JSON.stringify(results,null,2));
+  console.log(`PASS ${results.length} standalone SVGs: exact graph, text, full-canvas containment and non-overlapping edge labels`);
+ }finally{await browser.close();}
+})().catch(e=>{console.error(e);process.exitCode=1});

scripts/browser/skills-measurement.cjs

@@ -33,7 +33,7 @@ const fs = require('node:fs');
         const nodes = [...svg.querySelectorAll('[data-node-id]')].map(n => n.getBoundingClientRect().toJSON());
         return {nodes, width:innerWidth, height:innerHeight, minLabel:Math.min(...[...svg.querySelectorAll('text[data-node-label]')].map(n => parseFloat(getComputedStyle(n).fontSize)*n.getScreenCTM().a))};
       });
-      assert.equal(geometry.nodes.length, 6);
+      assert.equal(geometry.nodes.length, JSON.parse(fs.readFileSync('diagrams/strategy-measurement.architecture.json')).components.length);
       for (const n of geometry.nodes) assert(n.x >= 0 && n.y >= 0 && n.right <= geometry.width + 1 && n.bottom <= geometry.height + 1);
       assert(geometry.minLabel >= 10, `readable node labels: ${geometry.minLabel}`);
       await frame.locator('#btn-theme').click();
@@ -50,7 +50,7 @@ const fs = require('node:fs');
       assert.equal(await download.failure(), null);
       const path = `${output}/${width}.svg`; await download.saveAs(path);
       const svg = fs.readFileSync(path, 'utf8');
-      assert(svg.includes('Establish baseline') && svg.includes('Ongoing monitoring'));
+      assert(svg.includes('Compare with baseline') && svg.includes('Zero denominator = N/A'));
       const opener = panel.getByRole('button', {name:/^Expand /});
       await opener.click();
       const close = panel.getByRole('button', {name:'Close full-screen diagram', exact:true});

scripts/browser/skills-stories.cjs

@@ -11,7 +11,7 @@ const assert=require('node:assert/strict');
   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 iframe=panel.locator(width>1100?'.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;
@@ -21,14 +21,15 @@ const assert=require('node:assert/strict');
    }}
    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));
+  const source=JSON.parse(fs.readFileSync(`diagrams/strategy-${topic}.architecture.json`));
+  assert.equal(geometry.nodes,source.components.length);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}/`));
+   assert((await expanded.url()).includes(width<=1100?`${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));

scripts/browser/strategy-story.cjs

@@ -19,7 +19,9 @@ const fs=require('node:fs');
     const nodes=[...svg.querySelectorAll('[data-node-id]')].map(n=>{const r=n.getBoundingClientRect();return {id:n.id,x:r.x,y:r.y,right:r.right,bottom:r.bottom};});
     return {width:innerWidth,height:innerHeight,nodes,svg:svg.getBoundingClientRect().toJSON(),minLabel:Math.min(...[...svg.querySelectorAll('text[data-node-label]')].map(n=>parseFloat(getComputedStyle(n).fontSize)*n.getScreenCTM().a))};
    });
-   assert(geometry.nodes.length>=(id==='roadmap'?2:5) && geometry.nodes.length<=(['index','target-operating-model'].includes(id)?18:7),id);
+   const name=await panel.getAttribute('data-diagram');
+   const source=JSON.parse(fs.readFileSync(`diagrams/${name}.${name==='strategy-roadmap'?'workflow':'architecture'}.json`));
+   assert.equal(geometry.nodes.length,(source.components||source.nodes).length,id);
    for(const n of geometry.nodes) assert(n.x>=0 && n.y>=0 && n.right<=geometry.width+1 && n.bottom<=geometry.height+1,`${id} ${width} clipped ${JSON.stringify(n)} / ${geometry.height}`);
    const data=await page.locator('.strategy-content').evaluate(el=>({words:el.innerText.trim().split(/\s+/).length,overflow:document.documentElement.scrollWidth>innerWidth,openDetails:el.querySelectorAll('details[open]').length}));
    assert(data.words<=(id==='measurement'?1100:id==='roadmap'?600:200),id);assert(!data.overflow,id);assert.equal(data.openDetails,0,id);