@bongos/core 1.17.0

package/modules/hall-ui/public/atlas.js

@@ -0,0 +1,336 @@
+// atlas.js — the Repo Atlas renderer (ADR 0094, idea #457; restyled task 1737).
+// Reads the server-generated /builders/atlas.json (produced by
+// scripts/gds/gen-atlas.js on every deploy) and draws an isometric,
+// hover-connective, click-for-detail map of the repository. Two views: the
+// .md/context layer and the module truth.
+//
+// Vanilla, no framework (the hall convention). The SEMANTIC node/edge palette
+// (TOKENS/EDGE_STYLE) is fixed — never instance-pack-driven, so a pack can't
+// scramble the color-coded meaning (ADR 0094). Non-semantic scene values
+// (label ink/halo, ambient wash, hub glow, badge fills) come from the page's
+// scoped --ab-* CSS vars, which carry dark-theme variants; the renderer
+// re-reads them and re-renders when the shell flips html[data-theme].
+(function () {
+  'use strict';
+  var SVGNS = 'http://www.w3.org/2000/svg';
+  var UX = 44, UY = 23, UZ = 17;            // gentle 2:1 isometric — readable, not steep
+
+  var TOKENS = {
+    sun: '#6366f1', sky: '#0ea5e9', coral: '#f43f5e', paper: '#b3a284',
+    good: '#10b981', core: '#f59e0b', db: '#ef4444', ghost: '#94a3b8', danger: '#dc2626',
+  };
+  var EDGE_STYLE = {
+    drill: { c: TOKENS.sky, w: 2.2, dash: 0 }, gov: { c: TOKENS.sun, w: 2, dash: 0 },
+    live: { c: TOKENS.coral, w: 2.4, dash: 0 }, drift: { c: TOKENS.danger, w: 2, dash: '5 5' },
+    clean: { c: TOKENS.good, w: 2.4, dash: 0 }, violation: { c: TOKENS.danger, w: 3, dash: '5 5' },
+    monolith: { c: TOKENS.db, w: 3, dash: 0 }, ghost: { c: TOKENS.ghost, w: 1.8, dash: '5 5' },
+    seam: { c: TOKENS.sun, w: 2, dash: 0 },
+  };
+
+  // Theme-dependent, NON-semantic scene values — resolved from the .atlas-page
+  // scoped vars at render time (they flip with html[data-theme]).
+  var THEME = {};
+  function readTheme() {
+    var host = document.querySelector('.atlas-page');
+    var cs = host ? getComputedStyle(host) : null;
+    var v = function (name, fallback) {
+      var val = cs ? cs.getPropertyValue(name).trim() : '';
+      return val || fallback;
+    };
+    THEME = {
+      ambient: v('--ab-ambient', 'rgba(255,255,255,.5)'),
+      glow: v('--ab-glow', '#c7cdf7'),
+      badge: {
+        good: [v('--ab-b-good-bg', '#dcfce7'), v('--ab-b-good-fg', '#166534')],
+        warn: [v('--ab-b-warn-bg', '#fef3c7'), v('--ab-b-warn-fg', '#92400e')],
+        danger: [v('--ab-b-danger-bg', '#fee2e2'), v('--ab-b-danger-fg', '#991b1b')],
+        info: [v('--ab-b-info-bg', '#e0f2fe'), v('--ab-b-info-fg', '#075985')],
+      },
+      halo: v('--ab-label-halo', '#ffffff'),
+    };
+  }
+
+  var svg = document.getElementById('svg');
+  var scene = document.getElementById('scene');
+  var legendEl = document.getElementById('legend');
+  var captionEl = document.getElementById('caption');
+  var footEl = document.getElementById('foot');
+  var emptyEl = document.getElementById('empty');
+  var popup = document.getElementById('popup');
+  var popupBody = document.getElementById('popupBody');
+
+  var DATA = null, view = 'context', selected = null, nodeEls = {}, edgeEls = [], adj = {};
+
+  // ---- helpers ----
+  function el(t, a, p) { var e = document.createElementNS(SVGNS, t); for (var k in a) e.setAttribute(k, a[k]); if (p) p.appendChild(e); return e; }
+  function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
+  function r1(n) { return Math.round(n * 10) / 10; }
+  function proj(x, y, z) { return { x: (x - y) * UX, y: (x + y) * UY - z * UZ }; }
+  function shade(hex, f) { var n = parseInt(hex.slice(1), 16); return 'rgb(' + Math.round(((n >> 16) & 255) * f) + ',' + Math.round(((n >> 8) & 255) * f) + ',' + Math.round((n & 255) * f) + ')'; }
+  function ptsOf(a) { return a.map(function (p) { return r1(p.x) + ',' + r1(p.y); }).join(' '); }
+  function cx(n) { return n.gx + n.w / 2; }
+  function cy(n) { return n.gy + n.d / 2; }
+
+  function nodeFill(n) {
+    if (view === 'context') return { hub: TOKENS.sun, nested: TOKENS.sky, docs: TOKENS.paper, db: TOKENS.coral, generated: TOKENS.sky }[n.kind] || TOKENS.sky;
+    if (n.kind === 'core') return TOKENS.core;
+    if (n.kind === 'db') return TOKENS.db;
+    if (n.kind === 'ghost') return TOKENS.ghost;
+    if (n.kind === 'module') return n.health === 'violation' ? TOKENS.danger : TOKENS.good;
+    return TOKENS.good;
+  }
+
+  // size (footprint w/d + height h, optional fixed/glow) from the generated facts
+  function sizeFor(n) {
+    if (view === 'modules') {
+      if (n.kind === 'core') return { w: 3.6, d: 3.6, h: 3.2, fixed: true };
+      if (n.kind === 'db') return { w: 1.3, d: 1.3, h: 2.0 };
+      if (n.kind === 'module') { var loc = n.loc || 0; var f = clamp(1.05 + loc / 4200, 1.2, 2.05); return { w: f, d: f, h: clamp(0.42 + loc / 3600, 0.42, 1.7) }; }
+      return { w: 1.2, d: 1.2, h: 0.7 }; // ghost
+    }
+    if (n.kind === 'hub') return { w: 2.5, d: 2.5, h: 1.3, fixed: true, glow: true };
+    if (n.kind === 'nested') return { w: 1.25, d: 1.25, h: 0.72 };
+    if (n.kind === 'docs') { var c = parseInt(n.metric, 10) || 10; var ff = clamp(1.2 + c / 130, 1.2, 2.0); return { w: ff, d: ff, h: clamp(0.5 + c / 150, 0.5, 1.3) }; }
+    if (n.kind === 'db') return { w: 1.6, d: 1.6, h: 1.0 };
+    return { w: 1.3, d: 1.3, h: 0.62 }; // generated
+  }
+
+  function ringFor(n) {
+    if (view === 'modules') return { core: 0, db: 3.2, module: 6.0, ghost: 10.2 }[n.kind] != null ? { core: 0, db: 3.2, module: 6.0, ghost: 10.2 }[n.kind] : 8;
+    return { hub: 0, nested: 5.4, db: 5.4, generated: 8.7, docs: 8.7 }[n.kind] != null ? { hub: 0, nested: 5.4, db: 5.4, generated: 8.7, docs: 8.7 }[n.kind] : 7;
+  }
+
+  // assign each node a footprint + a seed position (ring by group), then relax so
+  // none overlap. The relaxation is the live auto-layout (no hand-placed coords).
+  function layout(nodes) {
+    nodes.forEach(function (n) { var s = sizeFor(n); n.w = s.w; n.d = s.d; n.h = s.h; n.fixed = !!s.fixed; n.glow = !!s.glow; n.r = ringFor(n); });
+    // group by ring radius; place evenly around the circle
+    var byRing = {};
+    nodes.forEach(function (n) { (byRing[n.r] = byRing[n.r] || []).push(n); });
+    Object.keys(byRing).forEach(function (rk) {
+      var R = parseFloat(rk), members = byRing[rk];
+      if (R === 0) { members.forEach(function (n) { n.gx = -n.w / 2; n.gy = -n.d / 2; }); return; }
+      var phase = R * 0.7;
+      members.forEach(function (n, i) {
+        var th = phase + i * (2 * Math.PI / members.length);
+        n.gx = R * Math.cos(th) - n.w / 2;
+        n.gy = R * Math.sin(th) - n.d / 2;
+      });
+    });
+    relax(nodes);
+  }
+
+  function relax(nodes) {
+    var PAD = 0.8;
+    for (var it = 0; it < 140; it++) {
+      var moved = false;
+      for (var i = 0; i < nodes.length; i++) for (var j = i + 1; j < nodes.length; j++) {
+        var a = nodes[i], b = nodes[j];
+        var ax1 = a.gx - PAD / 2, ax2 = a.gx + a.w + PAD / 2, ay1 = a.gy - PAD / 2, ay2 = a.gy + a.d + PAD / 2;
+        var bx1 = b.gx - PAD / 2, bx2 = b.gx + b.w + PAD / 2, by1 = b.gy - PAD / 2, by2 = b.gy + b.d + PAD / 2;
+        var ox = Math.min(ax2, bx2) - Math.max(ax1, bx1), oy = Math.min(ay2, by2) - Math.max(ay1, by1);
+        if (ox > 0.001 && oy > 0.001) {
+          moved = true;
+          if (ox < oy) {
+            var sx = (cx(a) <= cx(b)) ? -1 : 1, mx = ox / 2;
+            if (!a.fixed && !b.fixed) { a.gx += sx * mx; b.gx -= sx * mx; }
+            else if (a.fixed) { b.gx -= sx * ox; } else { a.gx += sx * ox; }
+          } else {
+            var sy = (cy(a) <= cy(b)) ? -1 : 1, my = oy / 2;
+            if (!a.fixed && !b.fixed) { a.gy += sy * my; b.gy -= sy * my; }
+            else if (a.fixed) { b.gy -= sy * oy; } else { a.gy += sy * oy; }
+          }
+        }
+      }
+      if (!moved) break;
+    }
+  }
+
+  function corners(n) {
+    var z1 = n.h, x0 = n.gx, x1 = n.gx + n.w, y0 = n.gy, y1 = n.gy + n.d;
+    return {
+      T0: proj(x0, y0, z1), T1: proj(x1, y0, z1), T2: proj(x1, y1, z1), T3: proj(x0, y1, z1),
+      B1: proj(x1, y0, 0), B2: proj(x1, y1, 0), B3: proj(x0, y1, 0),
+    };
+  }
+  function topCenter(n) { return proj(cx(n), cy(n), n.h); }
+
+  function render() {
+    while (svg.firstChild) svg.removeChild(svg.firstChild);
+    nodeEls = {}; edgeEls = []; adj = {}; closePopup();
+    readTheme();
+    var d = DATA.views[view];
+    var nodes = d.nodes, edges = d.edges;
+    layout(nodes);
+
+    var defs = el('defs', {}, svg);
+    var f = el('filter', { id: 'abglow', x: '-40%', y: '-40%', width: '180%', height: '180%' }, defs);
+    el('feGaussianBlur', { stdDeviation: '2.4', result: 'b' }, f);
+    var mg = el('feMerge', {}, f); el('feMergeNode', { in: 'b' }, mg); el('feMergeNode', { in: 'SourceGraphic' }, mg);
+    var rg = el('radialGradient', { id: 'absun' }, defs);
+    el('stop', { offset: '0%', 'stop-color': THEME.glow, 'stop-opacity': '0.9' }, rg);
+    el('stop', { offset: '100%', 'stop-color': THEME.glow, 'stop-opacity': '0' }, rg);
+
+    // bounds → viewBox
+    var minx = 1e9, miny = 1e9, maxx = -1e9, maxy = -1e9;
+    nodes.forEach(function (n) {
+      var c = corners(n);
+      ['T0', 'T1', 'T2', 'T3', 'B1', 'B2', 'B3'].forEach(function (k) {
+        var p = c[k]; if (p.x < minx) minx = p.x; if (p.x > maxx) maxx = p.x; if (p.y < miny) miny = p.y; if (p.y > maxy) maxy = p.y;
+      });
+    });
+    var pad = 78, vbw = (maxx - minx) + pad * 2, vbh = (maxy - miny) + pad * 2;
+    svg.setAttribute('viewBox', (minx - pad) + ' ' + (miny - pad) + ' ' + vbw + ' ' + vbh);
+    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    svg.style.maxHeight = Math.min(560, vbh) + 'px';
+
+    var amb = el('g', {}, svg);
+    [[minx + 60, miny + 36, 120, 24], [maxx - 80, miny + 64, 150, 28], [minx + vbw * 0.5, maxy - 26, 165, 28]].forEach(function (q) {
+      el('ellipse', { cx: q[0], cy: q[1], rx: q[2], ry: q[3], fill: THEME.ambient }, amb);
+    });
+    nodes.forEach(function (n) { if (n.glow) { var t = topCenter(n); el('circle', { cx: t.x, cy: t.y + 6, r: 118, fill: 'url(#absun)', 'class': 'ab-sun-glow' }, svg); } });
+
+    nodes.forEach(function (n) { adj[n.id] = []; });
+    edges.forEach(function (e) { if (adj[e.a]) adj[e.a].push(e); if (adj[e.b]) adj[e.b].push(e); });
+
+    var byId = {}; nodes.forEach(function (n) { byId[n.id] = n; });
+    var sorted = nodes.slice().sort(function (a, b) { return (cx(a) + cy(a)) - (cx(b) + cy(b)); });
+    var nodeLayer = el('g', {}, svg);
+    sorted.forEach(function (n) { nodeLayer.appendChild(buildNode(n)); });
+
+    var edgeLayer = el('g', {}, svg);
+    edges.forEach(function (e) {
+      var na = byId[e.a], nb = byId[e.b]; if (!na || !nb) return;
+      var A = topCenter(na), B = topCenter(nb);
+      var st = EDGE_STYLE[e.kind] || EDGE_STYLE.clean;
+      var mid = { x: (A.x + B.x) / 2, y: (A.y + B.y) / 2 - Math.hypot(B.x - A.x, B.y - A.y) * 0.16 - 14 };
+      var path = el('path', { d: 'M' + r1(A.x) + ',' + r1(A.y) + ' Q' + r1(mid.x) + ',' + r1(mid.y) + ' ' + r1(B.x) + ',' + r1(B.y), stroke: st.c, 'stroke-width': st.w, 'stroke-linecap': 'round', fill: 'none', 'class': 'ab-edge' }, edgeLayer);
+      if (st.dash) path.setAttribute('stroke-dasharray', st.dash);
+      edgeEls.push({ el: path, a: e.a, b: e.b });
+    });
+
+    drawLegend(d);
+    captionEl.innerHTML = d.blurb + '<span class="sub">' + (d.sub || '') + '</span>';
+  }
+
+  function buildNode(n) {
+    var c = corners(n), fill = nodeFill(n), g = el('g', {}, null); g.setAttribute('class', 'ab-node'); nodeEls[n.id] = g;
+    if (n.kind === 'ghost') {
+      el('polygon', { points: ptsOf([c.T0, c.T1, c.T2, c.T3]), fill: '#ffffff', 'fill-opacity': '0.16', stroke: shade(fill, 0.8), 'stroke-width': '1.6', 'stroke-dasharray': '4 4' }, g);
+      el('polygon', { points: ptsOf([c.T1, c.T2, c.B2, c.B1]), fill: 'none', stroke: shade(fill, 0.8), 'stroke-width': '1.4', 'stroke-dasharray': '4 4' }, g);
+      el('polygon', { points: ptsOf([c.T2, c.T3, c.B3, c.B2]), fill: 'none', stroke: shade(fill, 0.8), 'stroke-width': '1.4', 'stroke-dasharray': '4 4' }, g);
+    } else {
+      el('polygon', { points: ptsOf([c.T1, c.T2, c.B2, c.B1]), fill: shade(fill, 0.64) }, g);
+      el('polygon', { points: ptsOf([c.T2, c.T3, c.B3, c.B2]), fill: shade(fill, 0.8) }, g);
+      el('polygon', { points: ptsOf([c.T0, c.T1, c.T2, c.T3]), fill: fill, stroke: shade(fill, 0.5), 'stroke-width': '1' }, g);
+    }
+    var t = topCenter(n);
+    var big = (n.kind === 'hub' || n.kind === 'core');
+    // Label ink/halo come from the .ab-node text CSS rules (theme-aware vars).
+    var lab = el('text', { x: r1(t.x), y: r1(t.y - (big ? 5 : 2)), 'text-anchor': 'middle', 'font-size': big ? 15 : 12.5, 'font-weight': '650' }, g);
+    lab.textContent = n.label;
+    if (n.sub) { var s = el('text', { x: r1(t.x), y: r1(t.y + 11), 'text-anchor': 'middle', 'font-size': 10, 'font-weight': '500', 'class': 'ab-sub' }, g); s.textContent = n.sub; }
+    if (n.badge) {
+      var bw = n.badge.t.length * 6.0 + 16, bx = r1(t.x - bw / 2), by = r1(t.y - (big ? 34 : 28));
+      var bc = THEME.badge[n.badge.k] || ['#eee', '#333'];
+      el('rect', { x: bx, y: by, rx: 8, ry: 8, width: r1(bw), height: 18, fill: bc[0], stroke: THEME.halo, 'stroke-width': '1.5' }, g);
+      var bt = el('text', { x: r1(t.x), y: by + 13, 'text-anchor': 'middle', 'font-size': 10, 'font-weight': '700', 'class': 'ab-badge-text' }, g);
+      bt.style.fill = bc[1]; // inline style: the .ab-node text fill rule must not win here
+      bt.textContent = n.badge.t;
+    }
+    g.addEventListener('mouseenter', function () { if (!selected) lightNode(n.id); });
+    g.addEventListener('mouseleave', function () { if (!selected) clearLight(); });
+    g.addEventListener('click', function (ev) { ev.stopPropagation(); openPopup(n, g); });
+    return g;
+  }
+
+  function lightNode(id) {
+    svg.classList.add('focus');
+    var nb = {}; nb[id] = 1;
+    edgeEls.forEach(function (e) { var hit = (e.a === id || e.b === id); e.el.classList.toggle('lit', hit); if (hit) { nb[e.a] = 1; nb[e.b] = 1; } });
+    for (var k in nodeEls) nodeEls[k].classList.toggle('lit', !!nb[k]);
+  }
+  function clearLight() {
+    svg.classList.remove('focus');
+    edgeEls.forEach(function (e) { e.el.classList.remove('lit'); });
+    for (var k in nodeEls) nodeEls[k].classList.remove('lit');
+  }
+
+  function detailHTML(n) {
+    var d = DATA.views[view];
+    var b = n.badge ? '<span class="ab-badge ab-b-' + n.badge.k + '">' + n.badge.t + '</span>' : '';
+    var html = '<div class="ab-ptitle">' + esc(n.label) + ' ' + b + '</div>';
+    html += '<div class="ab-ppath">' + esc(n.path || '') + '</div>';
+    if (n.metric) html += '<div class="ab-chips"><span class="ab-chip2">' + esc(n.metric) + '</span></div>';
+    html += '<p class="ab-pdesc">' + esc(n.desc || '') + '</p>';
+    if (n.provenance) {
+      var provLabel = n.provenance === 'core' ? 'Core-loaded (Cloud Bongos)' : 'Built by this project';
+      html += '<div class="ab-chips"><span class="ab-chip2">' + esc(provLabel) + '</span>' +
+        (n.author ? '<span class="ab-chip2">by ' + esc(n.author) + '</span>' : '') +
+        (n.origin ? '<span class="ab-chip2">from ' + esc(n.origin) + '</span>' : '') +
+        '</div>';
+    }
+    if (n.provides && n.provides.length) html += '<div class="ab-prow">Provides (seams)</div><div class="ab-chips">' + n.provides.map(function (p) { return '<span class="ab-chip2">' + esc(p) + '</span>'; }).join('') + '</div>';
+    var conns = (adj[n.id] || []).map(function (e) { var o = e.a === n.id ? e.b : e.a; var on = d.nodes.filter(function (x) { return x.id === o; })[0]; return on ? on.label : o; });
+    if (conns.length) html += '<div class="ab-prow">Connects to</div><div class="ab-chips">' + conns.map(function (cc) { return '<span class="ab-chip2">↔ ' + esc(cc) + '</span>'; }).join('') + '</div>';
+    return html;
+  }
+  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+
+  function openPopup(n, g) {
+    selected = n.id; lightNode(n.id);
+    popupBody.innerHTML = detailHTML(n);
+    popup.classList.add('show');
+    var gr = g.getBoundingClientRect(), sr = scene.getBoundingClientRect();
+    var pw = popup.offsetWidth, ph = popup.offsetHeight;
+    var centerX = gr.left - sr.left + gr.width / 2;
+    var above = gr.top - sr.top - ph - 12;
+    var left = Math.max(8, Math.min(centerX - pw / 2, sr.width - pw - 8));
+    var top = above > 8 ? above : (gr.bottom - sr.top + 12);
+    top = Math.max(8, Math.min(top, sr.height - ph - 8));
+    popup.style.left = left + 'px'; popup.style.top = top + 'px';
+  }
+  function closePopup() { popup.classList.remove('show'); if (selected) { selected = null; clearLight(); } }
+
+  function drawLegend(d) {
+    legendEl.innerHTML = (d.legend || []).map(function (i) {
+      if (i.ln) return '<span class="lg"><span class="ln" style="border-color:' + (TOKENS[i.ln] || i.ln) + (i.dash ? ';border-top-style:dashed' : '') + '"></span>' + esc(i.t) + '</span>';
+      var col = TOKENS[i.sw] || i.sw;
+      return '<span class="lg"><span class="sw" style="' + (i.dash ? 'border:1.5px dashed ' + col + ';background:transparent;opacity:.6' : 'background:' + col) + '"></span>' + esc(i.t) + '</span>';
+    }).join('');
+  }
+
+  function setView(v) {
+    view = v; selected = null;
+    var btns = document.querySelectorAll('.ab-modes button');
+    for (var i = 0; i < btns.length; i++) btns[i].classList.toggle('active', btns[i].getAttribute('data-view') === v);
+    render();
+  }
+
+  function wire() {
+    var btns = document.querySelectorAll('.ab-modes button');
+    for (var i = 0; i < btns.length; i++) btns[i].addEventListener('click', function () { setView(this.getAttribute('data-view')); });
+    document.getElementById('popupClose').addEventListener('click', function (ev) { ev.stopPropagation(); closePopup(); });
+    svg.addEventListener('click', function () { closePopup(); });
+    window.addEventListener('resize', function () { if (selected && nodeEls[selected]) { var n = DATA.views[view].nodes.filter(function (x) { return x.id === selected; })[0]; if (n) openPopup(n, nodeEls[selected]); } });
+  }
+
+  function showEmpty() {
+    emptyEl.classList.add('show'); svg.style.display = 'none';
+    captionEl.textContent = 'The map has not been generated on this deploy yet.';
+    footEl.textContent = '';
+  }
+
+  // Re-render when the shell flips the theme — the scene's non-semantic values
+  // (labels, ambient, glow, badges) are baked into SVG attributes at draw time.
+  new MutationObserver(function () { if (DATA) render(); })
+    .observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
+  fetch('/builders/atlas.json', { cache: 'no-store' })
+    .then(function (res) { if (!res.ok) throw new Error('no data'); return res.json(); })
+    .then(function (data) {
+      DATA = data; wire(); setView('context');
+      if (data.generatedAt) { try { footEl.textContent = 'Generated from the code on the last deploy · ' + new Date(data.generatedAt).toLocaleString(); } catch (e) { footEl.textContent = 'Generated from the code on the last deploy.'; } }
+    })
+    .catch(function () { showEmpty(); });
+})();