// ════════════════════════════════════════════════════════════════
// Augmented Engineering — SVG Diagram component
// ════════════════════════════════════════════════════════════════
function AoDiagram({ active, onPick, theme }) {
const W = 960, H = 700;
const isLight = theme === 'light';
// Alpha hex suffixes — higher in light mode for readability
const aLabel = isLight ? 'ff' : 'cc'; // zone title
const aSub = isLight ? 'cc' : '66'; // zone sub-label
const aItems = isLight ? 'ee' : '88'; // zone item lines
const aStroke = isLight ? 'cc' : '77'; // circle stroke inactive
// Rect zone text alphas
const rTitle = isLight ? 1.00 : 0.85;
const rSub = isLight ? 0.90 : 0.70;
const rItems = isLight ? 0.85 : 0.42;
const rFine = isLight ? 0.78 : 0.38;
const rBullet = isLight ? 0.82 : 0.48;
// Context-space hex alphas
const csTitle = isLight ? 0.95 : 0.75;
const csText = isLight ? 1.00 : 0.88;
const isActive = (id) => active === id;
// Pointed-top hexagon: r=75, cx=320, cy=345
// VIBING : cx=135, cy=242, r=115 — upper-left
// SPECING : cx=505, cy=242, r=110 — upper-right (same cy as VIBING ✓)
// HARNESSING: cx=320, cy=550, r=108 — bottom-centre (cx = HCX ✓)
// All circle edges are ≥ 8 px clear of the hexagon edge; circles don't overlap each other.
const HCX = 320, HCY = 345, HR = 75;
const hexPts = Array.from({ length: 6 }, (_, i) => {
const a = (-90 + i * 60) * Math.PI / 180;
return (HCX + HR * Math.cos(a)).toFixed(1) + ',' + (HCY + HR * Math.sin(a)).toFixed(1);
}).join(' ');
const hexFiles = [
'ubiquitous_language.md',
'scenarios.md',
'gherkin.md',
'vision.md',
'ddd_rules.md',
'skill_*.md',
'bounded_contexts.md',
];
function CircleZone({ id, cx, cy, r, color, label, sub, items }) {
const on = isActive(id);
const dimItems = color + aItems;
return (
onPick(id)} style={{ cursor: 'pointer' }}>
{label}
{sub && (
{sub}
)}
{items.map((item, i) => (
{item}
))}
);
}
return (
);
}
Object.assign(window, { AoDiagram });