// Nodestone — main App, routing, theme, tweaks.
(function () {
const { useState, useEffect, useMemo } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "dark-pastel",
"themeMode": "auto",
"typeface": "general-sans",
"navStyle": "mega",
"heroVariant": "node",
"density": "regular",
"animation": "on"
}/*EDITMODE-END*/;
// Pastel palette presets (light + dark CSS variable sets)
const PALETTES = {
"dark-pastel": {
label: "Dark · muted",
light: {
"--pastel-1": "#FFE9D6", "--pastel-2": "#E8F0E1", "--pastel-3": "#E6E1F5",
"--pastel-4": "#FFF6CC", "--pastel-5": "#E0EEFF", "--pastel-6": "#FFE4E1",
},
dark: {
"--pastel-1": "#1D2129", "--pastel-2": "#1E2622", "--pastel-3": "#252029",
"--pastel-4": "#2A2716", "--pastel-5": "#1B2429", "--pastel-6": "#2A1F23",
},
},
"warm": {
label: "Warm · peach + sage",
light: {
"--pastel-1": "#FFE9D6", "--pastel-2": "#E8F0E1", "--pastel-3": "#F5E8DD",
"--pastel-4": "#FFF6CC", "--pastel-5": "#F0E6DC", "--pastel-6": "#FFE4E1",
},
dark: {
"--pastel-1": "#2D2418", "--pastel-2": "#1F2618", "--pastel-3": "#2A211A",
"--pastel-4": "#2A2510", "--pastel-5": "#26201A", "--pastel-6": "#2B1F1C",
},
},
"candy": {
label: "Candy · rose + sky",
light: {
"--pastel-1": "#FFE4E1", "--pastel-2": "#E0EEFF", "--pastel-3": "#FFF6CC",
"--pastel-4": "#E6E1F5", "--pastel-5": "#FFE9D6", "--pastel-6": "#E8F0E1",
},
dark: {
"--pastel-1": "#2C1E22", "--pastel-2": "#15212A", "--pastel-3": "#2A2615",
"--pastel-4": "#1F1A2A", "--pastel-5": "#2A2018", "--pastel-6": "#1A2620",
},
},
"earth": {
label: "Earth · stone + clay",
light: {
"--pastel-1": "#E3DCC8", "--pastel-2": "#D8E4D0", "--pastel-3": "#C9D6DE",
"--pastel-4": "#E8DDCB", "--pastel-5": "#D6CFC2", "--pastel-6": "#DBD4C8",
},
dark: {
"--pastel-1": "#22201A", "--pastel-2": "#1A211A", "--pastel-3": "#181E22",
"--pastel-4": "#211C14", "--pastel-5": "#1D1B16", "--pastel-6": "#1F1D17",
},
},
};
function useHashRoute() {
const [route, setRoute] = useState(() => (window.location.hash || "#/").slice(1));
useEffect(() => {
const onHash = () => {
setRoute((window.location.hash || "#/").slice(1));
window.scrollTo({ top: 0, behavior: "instant" });
};
window.addEventListener("hashchange", onHash);
return () => window.removeEventListener("hashchange", onHash);
}, []);
return route;
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const route = useHashRoute();
// resolved theme (auto → matches OS)
const [systemDark, setSystemDark] = useState(() =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
);
useEffect(() => {
const mql = window.matchMedia("(prefers-color-scheme: dark)");
const fn = (e) => setSystemDark(e.matches);
mql.addEventListener?.("change", fn);
return () => mql.removeEventListener?.("change", fn);
}, []);
const resolvedTheme =
t.themeMode === "auto" ? (systemDark ? "dark" : "light") :
t.themeMode === "dark" ? "dark" : "light";
// Apply theme + density + typeface + anim attrs to
useEffect(() => {
const root = document.documentElement;
root.setAttribute("data-theme", resolvedTheme);
root.setAttribute("data-density", t.density);
root.setAttribute("data-typeface", t.typeface);
root.setAttribute("data-anim", t.animation === "off" ? "off" : "on");
}, [resolvedTheme, t.density, t.typeface, t.animation]);
// Apply selected palette to CSS variables
useEffect(() => {
const p = PALETTES[t.palette] || PALETTES["dark-pastel"];
const vars = resolvedTheme === "dark" ? p.dark : p.light;
const root = document.documentElement;
for (const k in vars) root.style.setProperty(k, vars[k]);
}, [t.palette, resolvedTheme]);
// Pick page from route
const page = useMemo(() => {
const r = route || "/";
if (r === "/" || r === "") return ;
if (r === "/services") return ;
if (r.startsWith("/services/")) return ;
if (r === "/about") return ;
if (r === "/workshop") return ;
if (r === "/contact") return ;
return (
);
}, [route, t.heroVariant]);
const toggleTheme = () => {
if (t.themeMode === "auto") setTweak("themeMode", resolvedTheme === "dark" ? "light" : "dark");
else setTweak("themeMode", t.themeMode === "dark" ? "light" : "dark");
};
return (
<>
{/* live-feeling ambient gradient mesh */}