/* global React, window */
/**
* side-rail.jsx, in-page section navigation.
*
* Three modes:
* - "permanent": always-open 220px column (currently unused).
* - "compact": 64px column, expands to 260px on hover (default on both pages).
* - "floating": right-edge dot column with hover-revealed labels.
*
* Quirk: Active section is detected by scroll position, not IntersectionObserver.
* Tall sections (>3.3× viewport) can never reach a 0.25 ratio, so an IO threshold
* would skip them. Instead the active section = the last whose top has crossed
* a fixed line at 30% of the viewport height.
*/
(() => {
const T = window.TOKENS;
const RAIL_BLUE = T.color.blue;
window.SideRail = function SideRail({ dark, mode = "permanent", sections }) {
// useState/useEffect are pulled off React inside the function (not at top level).
// Top-level `const { useState } = React` would collide between classic-script
// JSX bundles since they share global scope.
const { useState, useEffect } = React;
const [active, setActive] = useState(sections[0]?.id || "");
const [expanded, setExpanded] = useState(false);
const v = window.useViewport();
const isMobile = v === "mobile";
// Scroll-based active-section detection. See file header for rationale.
// ALWAYS call useEffect (Rules of Hooks); guard the work inside so it's
// a no-op on mobile where the rail isn't rendered.
useEffect(() => {
if (isMobile) return;
const TRIGGER_RATIO = 0.30;
const updateActive = () => {
const trigger = window.innerHeight * TRIGGER_RATIO;
let current = sections[0]?.id || "";
for (const s of sections) {
const el = document.getElementById(s.id);
if (!el) continue;
if (el.getBoundingClientRect().top - trigger <= 0) current = s.id;
}
setActive(current);
};
updateActive();
window.addEventListener("scroll", updateActive, { passive: true });
window.addEventListener("resize", updateActive);
return () => {
window.removeEventListener("scroll", updateActive);
window.removeEventListener("resize", updateActive);
};
}, [sections, isMobile]);
// Mobile: hide the rail entirely. The page already has the top nav and
// section anchors are reachable via the URL hash; an in-page rail at 64px
// would steal too much horizontal real estate on small screens.
if (isMobile) return null;
const ink = dark ? "#fff" : T.color.ink;
const sub = dark ? "rgba(255,255,255,0.55)" : "rgba(0,0,0,0.45)";
const surface = dark ? "rgba(15,17,20,0.85)" : "rgba(255,255,255,0.85)";
const border = dark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.08)";
const go = (id) => (e) => {
e.preventDefault();
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
};
// PERMANENT, 220px sticky column, full labels.
if (mode === "permanent") {
return (
);
}
// COMPACT, full-height left column, 64px → 260px on hover.
if (mode === "compact") {
const w = expanded ? 260 : 64;
return (
);
}
// FLOATING, right-edge dots, label on hover.
return (
);
};
})();