fix(site): make cluster headers clickable with pill feedback instead of link-style underline; name the hovered box in the tooltip

site/map.css

@@ -275,9 +275,19 @@
   stroke-width: 2.2;
 }
 
-.box.header.target:hover .header-text,
-.box.header.lit .header-text {
-  text-decoration: underline;
+.header-bg {
+  fill: transparent;
+  stroke: transparent;
+  stroke-width: 2;
+  transition: fill 0.15s;
+}
+
+.box.header.target:hover .header-bg {
+  fill: color-mix(in srgb, var(--accent) 16%, transparent);
+}
+
+.box.header.lit .header-bg {
+  fill: color-mix(in srgb, var(--accent) 9%, transparent);
 }
 
 .group-tag.target:hover .tag-bg {
@@ -290,21 +300,17 @@
   stroke-width: 3;
 }
 
-.box.header.selected .header-text {
-  fill: var(--accent);
+.box.header.selected .header-bg {
+  stroke: var(--text);
 }
 
 .box.target:focus-visible .box-bg,
+.box.header.target:focus-visible .header-bg,
 .group-tag.target:focus-visible .tag-bg {
   stroke: var(--accent);
   stroke-width: 3.5;
 }
 
-.box.header.target:focus-visible .header-text {
-  fill: var(--accent);
-  text-decoration: underline;
-}
-
 .layer-boxes .box {
   transition: opacity 0.2s;
 }

site/mapview.js

@@ -229,9 +229,10 @@ export function createMapView({ root, plan, data, build, onSelect }) {
     const g = svg('g', { class: `box ${item.kind === 'header' ? 'header' : box.importance}`, 'data-box': box.id }, layers.boxes);
     rectOf.set(box, item);
     if (item.kind === 'header') {
+      const bg = svg('rect', { class: 'header-bg', rx: 6, x: item.x - 6, y: item.y - 1, height: 24 }, g);
       const t = svg('text', { x: item.x, y: item.y + 16, class: 'box-text header-text' }, g);
       t.textContent = item.text;
-      boxEls.set(box, { g, text: t, width: item.w, header: true });
+      boxEls.set(box, { g, text: t, bg, x: item.x, width: item.w, header: true });
     } else {
       rect(item, { rx: 5, class: 'box-bg' }, g);
       const lines = item.h >= 36 ? splitInTwo(item.text) : [item.text];
@@ -291,11 +292,11 @@ export function createMapView({ root, plan, data, build, onSelect }) {
     }
     const importance = (box && box.importance) || topic.importance;
     tip.replaceChildren(...[
-      h('strong', {}, topic.title),
+      h('strong', {}, box ? box.text : topic.title),
       topic.areas.length ? h('div', { class: 'tip-areas' }, areaDots(topic.areas), areaLabel(topic.areas)) : null,
       h('div', { class: 'tip-meta' }, [importance ? IMPORTANCE[importance] : null, plural(topic.total, 'resource'),
         box && box.related.length ? `${box.related.length} related` : null].filter(Boolean).join(' · ')),
-      h('div', { class: 'tip-hint' }, 'Click this topic to open its details'),
+      h('div', { class: 'tip-hint' }, box && box.text !== topic.title ? `Click to open “${topic.title}”` : 'Click this topic to open its details'),
     ].filter(Boolean));
     tip.hidden = false;
     moveTip(e);
@@ -599,6 +600,7 @@ export function createMapView({ root, plan, data, build, onSelect }) {
           span.setAttribute('lengthAdjust', 'spacingAndGlyphs');
         }
       }
+      if (el.bg) el.bg.setAttribute('width', (el.text.getComputedTextLength() + 12).toFixed(1));
     }
   }