// site/App.jsx — root component + hash router + tweaks wiring.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"mode": "dark",
"eggplantDepth": "deep",
"hero": "vellum",
"cardStyle": "tarot",
"accent": "moss",
"grain": true,
"displayScale": 1
}/*EDITMODE-END*/;
// ── parse the location hash into {id, ...params} ────────────────
function parseRoute(hash) {
const path = (hash || '#/').replace(/^#/, '');
const parts = path.split('/').filter(Boolean);
if (parts.length === 0) return { id: 'altar' };
if (parts[0] === 'work' && !parts[1]) return { id: 'workings' };
if (parts[0] === 'work' && parts[1]) return { id: 'working', subId: parts[1] };
if (parts[0] === 'designer') return { id: 'practitioner' };
if (parts[0] === 'philosophy') return { id: 'book' };
if (parts[0] === 'contact') return { id: 'correspondence' };
return { id: 'altar' };
}
function useRoute() {
const [route, setRoute] = React.useState(() => parseRoute(window.location.hash));
React.useEffect(() => {
const onHash = () => {
setRoute(parseRoute(window.location.hash));
window.scrollTo({ top: 0, behavior: 'instant' });
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
return route;
}
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const route = useRoute();
const [mobileMenu, setMobileMenu] = React.useState(false);
// ── Load workings from Sanity ─────────────────────────────────
// KT.workings starts as the static fallback defined in data.js.
// On mount we fetch live data; a successful fetch overwrites the global
// and triggers a re-render via workingsVersion.
const [workingsVersion, setWorkingsVersion] = React.useState(0);
const [sanityLoading, setSanityLoading] = React.useState(true);
React.useEffect(() => {
if (typeof KT.fetchWorkings !== 'function') {
setSanityLoading(false);
return;
}
KT.fetchWorkings()
.then(function(workings) {
if (workings && workings.length > 0) {
KT.workings = workings;
setWorkingsVersion(function(v) { return v + 1; });
}
})
.catch(function(err) {
console.warn('[KT] Sanity fetch failed, using static data.', err);
})
.finally(function() {
setSanityLoading(false);
});
}, []);
// Apply mode + eggplant depth to via attributes / inline vars
React.useEffect(() => {
document.documentElement.setAttribute('data-theme', tweaks.mode === 'light' ? 'light' : 'dark');
const root = document.documentElement;
// eggplant depth — only meaningful in dark mode
if (tweaks.mode === 'dark') {
const map = {
deep: { p: '#1A0A1F', s: '#2A1530', e: '#3D2148' },
mid: { p: '#2A1530', s: '#3B2244', e: '#4D2F58' },
warm: { p: '#3B2244', s: '#4D2F58', e: '#603A6C' },
};
const c = map[tweaks.eggplantDepth] || map.warm;
root.style.setProperty('--bg-page', c.p);
root.style.setProperty('--bg-surface', c.s);
root.style.setProperty('--bg-elevated', c.e);
} else {
root.style.removeProperty('--bg-page');
root.style.removeProperty('--bg-surface');
root.style.removeProperty('--bg-elevated');
}
// accent — both / indigo / moss tweaks the chrome-active
if (tweaks.accent === 'indigo') {
root.style.setProperty('--chrome-active-bg', 'rgba(45,78,166,0.18)');
root.style.setProperty('--chrome-active-fg', 'var(--indigo-300)');
} else if (tweaks.accent === 'moss') {
root.style.setProperty('--chrome-active-bg', 'rgba(150,165,96,0.16)');
root.style.setProperty('--chrome-active-fg', 'var(--moss)');
} else {
// both — default to moss chrome (indigo is reserved for primary action)
root.style.removeProperty('--chrome-active-bg');
root.style.removeProperty('--chrome-active-fg');
}
// display scale
root.style.setProperty('--kt-scale', tweaks.displayScale || 1);
}, [tweaks.mode, tweaks.eggplantDepth, tweaks.accent, tweaks.displayScale]);
// close mobile menu on route change
React.useEffect(() => { setMobileMenu(false); }, [route.id, route.subId]);
// page selection
let page;
if (route.id === 'workings') page = ;
else if (route.id === 'working') page = ;
else if (route.id === 'practitioner') page = ;
else if (route.id === 'book') page = ;
else if (route.id === 'correspondence') page = ;
else page = ;
return (
{tweaks.grain && }
setTweak('mode', tweaks.mode === 'light' ? 'dark' : 'light')}
onMobileMenu={() => setMobileMenu(true)}
/>
{page}
setMobileMenu(false)} route={route} />
setTweak('mode', v)} />
setTweak('eggplantDepth', v)} />
setTweak('grain', v)} />
setTweak('accent', v)} />
setTweak('hero', v)} />
setTweak('cardStyle', v)} />
);
}
window.App = App;
// mount
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();