/* roastynote — shared app root for inner pages.
Renders the page named by . */
const { useState, useEffect } = React;
const PAGE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"paperTone": "cream",
"darkTone": "ink",
"accent": "ember",
"wordmark": "split",
"displayScale": 1
}/*EDITMODE-END*/;
const PAGE_PAPER = { cream: "#F4EFE6", shell: "#EBE4D6", bone: "#DED6C6" };
const PAGE_DARK = { ink: "#14110D", espresso: "#221913", roast: "#2E1C10" };
const PAGE_ACCENT = { ember: "#952C16", ochre: "#9C7A33", clay: "#B96A45" };
function usePageReveal() {
useEffect(() => {
const check = () => {
const vh = window.innerHeight;
document.querySelectorAll("[data-reveal]:not(.in)").forEach((el) => {
const r = el.getBoundingClientRect();
if (r.top < vh * 0.9 && r.bottom > 0) el.classList.add("in");
});
};
check();
const t1 = setTimeout(check, 80);
const t2 = setTimeout(check, 400);
window.addEventListener("scroll", check, { passive: true });
window.addEventListener("resize", check, { passive: true });
return () => {
clearTimeout(t1); clearTimeout(t2);
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
};
}, []);
}
const PAGE_MAP = {
studio: (lang) => ,
work: (lang) => ,
journal: (lang) => ,
contact: (lang) => ,
portier: (lang) => ,
cultivia:(lang) => ,
"indonesian-beans":(lang) => ,
lattecarte:(lang) => ,
context:(lang) => ,
"salt-light":(lang) => ,
};
function PageApp() {
const [t, setTweak] = useTweaks(PAGE_TWEAK_DEFAULTS);
const [lang, setLangState] = useState(() => {
try { return localStorage.getItem("rn-lang") || "en"; } catch (e) { return "en"; }
});
const setLang = (v) => {
setLangState(v);
try { localStorage.setItem("rn-lang", v); } catch (e) {}
};
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const page = document.body.dataset.page || "studio";
useEffect(() => {
const r = document.documentElement.style;
r.setProperty("--rn-paper", PAGE_PAPER[t.paperTone] || PAGE_PAPER.cream);
r.setProperty("--rn-dark", PAGE_DARK[t.darkTone] || PAGE_DARK.ink);
r.setProperty("--rn-accent", PAGE_ACCENT[t.accent] || PAGE_ACCENT.ember);
r.setProperty("--rn-display-scale", String(t.displayScale ?? 1));
}, [t.paperTone, t.darkTone, t.accent, t.displayScale]);
useEffect(() => {
document.body.setAttribute("data-wordmark", t.wordmark || "split");
}, [t.wordmark]);
useEffect(() => {
document.documentElement.lang = lang === "jp" ? "ja" : "en";
document.body.classList.toggle("jp", lang === "jp");
}, [lang]);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 48);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => {
document.body.style.overflow = menuOpen ? "hidden" : "";
}, [menuOpen]);
usePageReveal();
return (
);
}
function pageKeyOf(map, val) {
return Object.keys(map).find(k => map[k] === val) || Object.keys(map)[0];
}
ReactDOM.createRoot(document.getElementById("root")).render();