/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect,
THESIS_LINES, MEMO_SECTIONS, ContentsRail, Masthead, CategorySection, WhyNowSection, MoatSection,
TractionSection, BuyersSection, ComparablesSection, TokenSection, BackersSection,
ContactSection, DisclaimerSection, Footer */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "dark",
"density": "regular",
"thesis": "Integrity wedge"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [active, setActive] = React.useState("category");
React.useEffect(() => {
document.documentElement.classList.add("js-enabled");
}, []);
// Apply palette + density to so CSS vars switch.
React.useEffect(() => {
const root = document.documentElement;
if (t.palette === "kraft") root.setAttribute("data-palette", "kraft");
else root.removeAttribute("data-palette");
if (t.density === "regular") root.removeAttribute("data-density");
else root.setAttribute("data-density", t.density);
}, [t.palette, t.density]);
// Scroll-spy: highlight the contents-rail entry for the section in view.
React.useEffect(() => {
const ids = MEMO_SECTIONS.map((s) => s.id);
const els = ids.map((id) => document.getElementById(id)).filter(Boolean);
if (!els.length) return;
const obs = new IntersectionObserver(
(entries) => {
const visible = entries.filter((e) => e.isIntersecting);
if (visible.length) {
visible.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
setActive(visible[0].target.id);
}
},
{ rootMargin: "-40% 0px -55% 0px", threshold: 0 }
);
els.forEach((el) => obs.observe(el));
return () => obs.disconnect();
}, []);
const thesis = THESIS_LINES[t.thesis] || THESIS_LINES["Integrity wedge"];
return (
<>
setTweak("palette", v)} />
setTweak("density", v)} />
setTweak("thesis", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();