/* App.jsx — assembles the manifesto, tracks the live article counter on scroll, handles jump-to-article, and the closing "ratify" interaction. */ function RatifySection() { const [stamped, setStamped] = React.useState(false); return (
ARTICLE XII · OMITTED FOR CONVENIENCE

Do you solemnly affirm
the Unprinciples?

By ratifying, you agree to uphold each principle fully —{" "} unless doing so becomes effortful, awkward, slightly inconvenient, or noticed by no one.†

{!stamped ? ( ) : (
APPROVED — CONDITIONALLY

Thank you. Your conditional agreement has been filed, noted, and will be honored whenever convenient. You may now observe the work from a safe distance.

)}

† This affirmation is non-binding, retroactively editable, and may be disavowed the moment it stops serving you.

); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "mode": "Exposé", "accent": "#C2511E", "marginNotes": true, "grain": true }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [current, setCurrent] = React.useState(0); const total = window.UNPRINCIPLES.length; // apply tweak-driven globals to / :root React.useEffect(() => { document.body.classList.toggle("mode-expose", t.mode === "Expos\u00e9"); document.body.classList.toggle("hide-notes", !t.marginNotes); document.documentElement.style.setProperty("--ember", t.accent); }, [t.mode, t.accent, t.marginNotes]); // live article counter + reveal-on-scroll, via a reliable scroll listener // (IntersectionObserver is throttled/unreliable in some preview frames). React.useEffect(() => { const articles = Array.from(document.querySelectorAll(".article")); let ticking = false; const update = () => { ticking = false; const mid = window.scrollY + window.innerHeight / 2; const revealLine = window.scrollY + window.innerHeight * 0.88; let active = 0; articles.forEach((el) => { const top = el.offsetTop; const bottom = top + el.offsetHeight; if (top < revealLine) el.classList.add("is-in"); if (mid >= top && mid < bottom) { const n = parseInt(el.id.replace("article-", ""), 10); if (!isNaN(n)) active = n; } }); setCurrent(active); }; const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(update); } }; window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); update(); // safety net: never leave content hidden if something stalls const t = setTimeout(() => articles.forEach((el) => el.classList.add("is-in")), 1500); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); clearTimeout(t); }; }, []); const jump = (n) => { const el = document.getElementById("article-" + n); if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" }); }; const begin = () => jump(1); return ( {t.grain && }
THE ELEVEN ARTICLES, IN FULL

Each principle is reproduced exactly as believed, then exactly as practiced.

{window.UNPRINCIPLES.map((p, i) =>
)}
setTweak("mode", v)} /> setTweak("accent", v)} /> setTweak("marginNotes", v)} /> setTweak("grain", v)} /> ); } ReactDOM.createRoot(document.getElementById("root")).render();