);
}
window.StickyBuyBar = StickyBuyBar;
/* ---- scroll helper that accounts for sticky chrome ---- */
function bbrScrollToId(id, extra) {
const el = document.getElementById(id);
if (!el) return;
// Scroll so the section's heading sits just below the fixed bars. We target
// the heading element specifically (the section box top has padding + the
// stacked label above the heading, so aligning the box top overshoots/
// undershoots). Compute an absolute target and use a single scrollTo —
// scrollIntoView + smooth was racing the scroll-spy and overshooting.
const heading = el.querySelector("h2") || el;
const fixedBars = (() => {
const nav = document.querySelector(".topnav");
const toc = document.querySelector(".mtoc");
const navH = nav ? nav.getBoundingClientRect().height : 56;
const tocH = (toc && getComputedStyle(toc).position === "sticky") ? toc.getBoundingClientRect().height : 0;
return navH + tocH + 12; // small breathing gap
})();
const target = heading.getBoundingClientRect().top + window.scrollY - fixedBars;
window.scrollTo({ top: Math.max(0, target), behavior: "smooth" });
}
/* ---- MobileDossierNav, sticky horizontal pill bar (< 1180px) ---- */
function MobileDossierNav({ sections }) {
const [active, setActive] = useXState(sections[0] && sections[0].id);
const [visible, setVisible] = useXState(false);
const railRef = useXRef(null);
useXEffect(() => {
const onScroll = () => setVisible(window.scrollY > 420);
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
useXEffect(() => {
if (!sections.length) return;
const observer = new IntersectionObserver((entries) => {
const hit = entries.filter(e => e.isIntersecting);
if (!hit.length) return;
hit.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
setActive(hit[0].target.id);
}, { rootMargin: "-30% 0px -55% 0px", threshold: 0 });
sections.forEach(s => { const el = document.getElementById(s.id); if (el) observer.observe(el); });
return () => observer.disconnect();
}, [sections]);
// keep the active pill scrolled into the centre of the rail
useXEffect(() => {
const rail = railRef.current;
if (!rail) return;
const el = rail.querySelector(".mdnav-pill.active");
if (el) {
const target = el.offsetLeft - rail.clientWidth / 2 + el.clientWidth / 2;
rail.scrollTo({ left: Math.max(0, target), behavior: "smooth" });
}
}, [active]);
if (!sections.length) return null;
return (
);
}
window.MobileDossierNav = MobileDossierNav;
/* ---- MobileTOC, collapsible contents card under the hero (< 768px) ---- */
function MobileTOC({ sections, minutes }) {
const [open, setOpen] = useXState(false);
const [active, setActive] = useXState(sections[0] && sections[0].id);
const rootRef = useXRef(null);
// Scroll-spy: track which section is currently in view so the collapsed
// bar always shows where you are.
useXEffect(() => {
if (!sections.length) return;
const observer = new IntersectionObserver((entries) => {
const hit = entries.filter(e => e.isIntersecting);
if (!hit.length) return;
hit.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
setActive(hit[0].target.id);
}, { rootMargin: "-25% 0px -60% 0px", threshold: 0 });
sections.forEach(s => { const el = document.getElementById(s.id); if (el) observer.observe(el); });
return () => observer.disconnect();
}, [sections]);
// Close the dropdown on outside tap / Escape.
useXEffect(() => {
if (!open) return;
const onDown = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("pointerdown", onDown);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("pointerdown", onDown); document.removeEventListener("keydown", onKey); };
}, [open]);
// All hooks above this line — only now is it safe to bail out.
if (!sections.length) return null;
const current = sections.find(s => s.id === active) || sections[0];
return (
{sections.length} sections · {minutes} min read
{sections.map(s => (
))}
);
}
window.MobileTOC = MobileTOC;
/* ---- recommendation linking ---- */
function bbrNorm(s) { return (s || "").toLowerCase().replace(/[^a-z0-9]/g, ""); }
function resolveRecAlbum(title, all) {
if (!all) return null;
const namePart = String(title).split(/\s+[, –-]\s+/)[0].replace(/\s*\(\d{4}\)\s*$/, "").trim();
const target = bbrNorm(namePart);
if (!target) return null;
// Exact match first; then a conservative prefix match. The second branch used
// to repeat the exact `=== target` test, so it could never match anything the
// first didn't — the intended fuzzy match was dead. The length guards keep
// short/common titles from mis-resolving.
return all.find(a => bbrNorm(a.title) === target) ||
(target.length >= 6 && all.find(a => { const t = bbrNorm(a.title); return t.length >= 6 && t.startsWith(target); })) || null;
}
function RecLink({ rec, all, onAlbum }) {
const match = resolveRecAlbum(rec.title, all);
const hasEssay = match && window.ESSAYS_FULL && window.ESSAYS_FULL[match.slug];
if (match) {
return (
{ e.preventDefault(); onAlbum(match); }}
>