/* global React, ReactDOM, PALETTES, Nav, Footer, HomePage, AboutPage, ServicesPage, ContactPage, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSlider */ const { useState, useEffect } = React; const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{ "palette": "sage", "fontPair": "cormorant-jost", "density": "comfortable", "specInspector": false }/*EDITMODE-END*/; /* Font pairings — also useful to a developer. */ const FONT_PAIRS = { 'cormorant-jost': { serif: "'Cormorant Garamond', Georgia, serif", sans: "'Jost', 'Helvetica Neue', sans-serif", label: 'Cormorant / Jost' }, 'fraunces-inter': { serif: "'Fraunces', Georgia, serif", sans: "'Inter', system-ui, sans-serif", label: 'Fraunces / Inter' }, 'playfair-work': { serif: "'Playfair Display', Georgia, serif", sans: "'Work Sans', system-ui, sans-serif", label: 'Playfair / Work Sans' }, 'libre-helvetica': { serif: "'Libre Caslon Text', Georgia, serif", sans: "'Helvetica Neue', Helvetica, sans-serif", label: 'Libre Caslon / Helvetica' }, }; const DENSITY = { cozy: { gutter: '40px', navH: '72px', baseFs: '15px' }, comfortable: { gutter: '56px', navH: '83px', baseFs: '16px' }, spacious: { gutter: '80px', navH: '96px', baseFs: '17px' }, }; /* ───────────────────────────────────────────────────────── Spec-inspector tooltip (developer aid) ───────────────────────────────────────────────────────── */ function SpecInspector({ on }) { const [tip, setTip] = useState(null); useEffect(() => { if (!on) { setTip(null); return; } document.body.classList.add('spec-on'); const onOver = (e) => { const t = e.target.closest('[data-spec]'); if (!t) { setTip(null); return; } const r = t.getBoundingClientRect(); setTip({ text: t.getAttribute('data-spec'), x: r.left, y: r.bottom + 6 }); }; const onLeave = () => setTip(null); document.addEventListener('mouseover', onOver); document.addEventListener('mouseout', onLeave); return () => { document.body.classList.remove('spec-on'); document.removeEventListener('mouseover', onOver); document.removeEventListener('mouseout', onLeave); }; }, [on]); if (!on || !tip) return null; const left = Math.min(tip.x, window.innerWidth - 320); return

{tip.text}

; } /* ───────────────────────────────────────────────────────── App ───────────────────────────────────────────────────────── */ function App() { const [page, setPage] = useState('home'); const [mobileOpen, setMobileOpen] = useState(false); const [t, setTweak] = useTweaks(TWEAK_DEFAULS); // Apply palette tokens to useEffect(() => { const palette = PALETTES.find((p) => p.id === t.palette) || PALETTES[0]; Object.entries(palette.tokens).forEach(([k, v]) => { document.documentElement.style.setProperty(k, v); }); }, [t.palette]); // Apply font pair useEffect(() => { const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS['cormorant-jost']; document.documentElement.style.setProperty('--serif', fp.serif); document.documentElement.style.setProperty('--sans', fp.sans); }, [t.fontPair]); // Apply density useEffect(() => { const d = DENSITY[t.density] || DENSITY.comfortable; document.documentElement.style.setProperty('--gutter', d.gutter); document.documentElement.style.setProperty('--nav-h', d.navH); document.body.style.fontSize = d.baseFs; }, [t.density]); const go = (p) => { setPage(p); setMobileOpen(false); window.scrollTo({ top: 0, behavior: 'instant' }); }; const Page = { home: HomePage, about: AboutPage, services: ServicesPage, contact: ContactPage }[page]; return ( <>