const { useState: useCS, useEffect: useCE, useRef: useCR } = React;
/* ---------- Reveal: intersection-based fade/slide (light page) ---------- */
function Reveal({ children, delay = 0, as: As = 'div', className = '', ...rest }) {
const ref = useCR(null);
useCE(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12 });
io.observe(el);
return () => io.disconnect();
}, []);
return (
{children}
);
}
/* ---------- Word-by-word title reveal ---------- */
function WordReveal({ children, className = '', as: As = 'h2', delay = 0 }) {
const ref = useCR(null);
const [shown, setShown] = useCS(false);
useCE(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) { setShown(true); io.unobserve(e.target); }
});
}, { threshold: 0.18 });
io.observe(el);
return () => io.disconnect();
}, []);
let wordIdx = 0;
const renderNode = (node) => {
if (typeof node === 'string') {
return node.split(/(\s+)/).map((part) => {
if (/^\s+$/.test(part)) return part;
if (part === '') return null;
const idx = wordIdx++;
return (
{part}
);
});
}
if (React.isValidElement(node)) {
return React.cloneElement(node, { key: `el-${wordIdx}` }, React.Children.map(node.props.children, renderNode));
}
if (Array.isArray(node)) return node.map(renderNode);
return node;
};
return (
{React.Children.map(children, renderNode)}
);
}
/* ---------- ChapterHead: mono index + animated title + lede ---------- */
function ChapterHead({ chapter, label, title, lede, ledeRight = true }) {
return (
{chapter}
—
{label}
{title}
{lede && (
{lede}
)}
);
}
/* ---------- Counter: count-up on enter (time-based, never counts down) ---------- */
function Counter({ to, suffix = '', decimals = 0, duration = 1400, sep = '' }) {
const [val, setVal] = useCS(0);
const ref = useCR(null);
const started = useCR(false);
useCE(() => {
if (!ref.current) return;
if (document.body.classList.contains('no-motion')) { setVal(to); started.current = true; return; }
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting && !started.current) {
started.current = true;
const start = performance.now();
const tick = (now) => {
const t = Math.min((now - start) / duration, 1);
const eased = 1 - Math.pow(1 - t, 3);
setVal(to * eased);
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.4 });
io.observe(ref.current);
return () => io.disconnect();
}, [to, duration]);
const display = decimals
? val.toFixed(decimals)
: (sep ? String(Math.round(val)).replace(/\B(?=(\d{3})+(?!\d))/g, sep) : Math.round(val));
return {display}{suffix};
}
/* ---------- Scroll progress bar (top) — thin, navy, no glow ---------- */
function ScrollProgress() {
const [p, setP] = useCS(0);
useCE(() => {
let raf = 0;
const onScroll = () => {
if (raf) return;
raf = requestAnimationFrame(() => {
raf = 0;
const doc = document.documentElement;
const max = doc.scrollHeight - doc.clientHeight;
setP(max > 0 ? window.scrollY / max : 0);
});
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
}, []);
return (
);
}
/* no-op kept for back-compat */
function SectionWorld() { return null; }
Object.assign(window, { Reveal, WordReveal, ChapterHead, Counter, ScrollProgress, SectionWorld });