); }); /* ========================================================================= Hash router ========================================================================= */ function useRoute() { // History-API router over clean paths (/jewelry, /woodwork/about, /admin). // The server rewrites every path to index.html (vercel.json), and // index.html's boot script normalizes `/`, /ww, and legacy #/ routes. const readPath = () => { const p = window.location.pathname || '/'; return p.length > 1 ? (p.replace(/\/+$/, '') || '/') : p; }; const [route, setRoute] = useState(readPath); useEffect(() => { // share.jsx has its own popstate listener for the meta tags. const onPop = () => setRoute(readPath()); window.addEventListener('popstate', onPop); return () => window.removeEventListener('popstate', onPop); }, []); const navigate = (path) => { if (path === window.location.pathname) return; window.history.pushState({}, '', path); setRoute(path); // pushState fires no event — nudge the share-meta updater by hand. if (window.SMY_updateShareMeta) window.SMY_updateShareMeta(); }; return [route, navigate]; } /* ========================================================================= Top nav ========================================================================= */ function TopNav({ route, navigate }) { const { mode, setMode } = useMode(); // Hide the Contact link when the admin has emptied the whole inquiry // section — otherwise it points at an anchor that no longer exists. const contactVisible = smyInquiryVisible(useContent().content.about); const [hidden, setHidden] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const lastY = useRef(0); useEffect(() => { const onScroll = () => { const y = window.scrollY; if (y < 80) { setHidden(false); lastY.current = y; return; } if (y > lastY.current + 6) setHidden(true); else if (y < lastY.current - 6) setHidden(false); lastY.current = y; }; window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // Close the mobile menu whenever the route changes (link tap, brand tap, etc.) useEffect(() => { setMenuOpen(false); }, [route]); // Lock body scroll while the panel is open so the page underneath doesn't drift. useEffect(() => { const prev = document.documentElement.style.overflow; document.documentElement.style.overflow = menuOpen ? 'hidden' : prev; return () => { document.documentElement.style.overflow = prev; }; }, [menuOpen]); // Close on Escape; close on viewport growing past mobile breakpoint. useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); }; const onResize = () => { if (window.innerWidth > 720) setMenuOpen(false); }; window.addEventListener('keydown', onKey); window.addEventListener('resize', onResize); return () => { window.removeEventListener('keydown', onKey); window.removeEventListener('resize', onResize); }; }, []); const modePrefix = (m) => m === 'woodwork' ? '/woodwork' : '/jewelry'; const onToggle = (target, e) => { if (target === mode) return; const rect = e.currentTarget.getBoundingClientRect(); setMode(target, rect); // Update URL: keep "section" but swap mode prefix const sub = currentSection(route); const prefix = modePrefix(target); if (sub === 'about') navigate(prefix + '/about'); else navigate(prefix); }; const goContact = (e) => { e.preventDefault(); navigate(modePrefix(mode) + '/about'); setTimeout(() => { const el = document.getElementById('contact'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 80); }; const section = currentSection(route); return (

{ e.preventDefault(); navigate('/jewelry'); }}>

Mode

); } function currentSection(route) { if (/^\/admin(\/|$)/.test(route)) return 'admin'; if (route.endsWith('/about')) return 'about'; // Home + any mode root is the gallery return 'gallery'; } /* ========================================================================= Footer ========================================================================= */ function Footer({ navigate }) { const { mode } = useMode(); const F = useContent().content.footer; const wwHref = '/woodwork'; const aboutHref = (mode === 'woodwork' ? '/woodwork' : '/jewelry') + '/about'; const go = (href) => (e) => { e.preventDefault(); navigate(href); }; // Emptied fields drop their row; a column with no heading and no rows // drops entirely. Links get an href; plain lines don't. const columns = [ { heading: F.workHeading, rows: [ { label: F.workJewelry, href: '/jewelry' }, { label: F.workWoodwork, href: wwHref }, { label: F.workStudio, href: aboutHref }, ], }, { heading: F.practiceHeading, rows: [ { label: F.practiceAbout, href: aboutHref }, { label: F.practiceProcess, href: aboutHref }, { label: F.practiceCommission, href: aboutHref }, ], }, { heading: F.studioHeading, rows: [ // Only link mailto: when the text actually is a bare email address. { label: F.email, mailto: /^\S+@\S+\.\S+$/.test(String(F.email || '').trim()) }, { label: F.location }, { label: F.hours }, ], }, ] .map(col => ({ ...col, rows: col.rows.filter(r => smyHas(r.label)) })) .filter(col => smyHas(col.heading) || col.rows.length > 0); return ( ); } /* ========================================================================= Tile (placeholder photography) — solid tonal blocks per brief ========================================================================= */ function Tile({ kind = 'portrait', label, tone = 0, corners = false, image, alt, fit = 'cover', children, className = '', style = {} }) { if (image) { return (

{children}

); } const t = (tone % 6) / 6; const css = { ...style, '--tile-bg': `color-mix(in oklab, var(--photo-ground) ${100 - Math.round(t * 18)}%, var(--fg) ${Math.round(t * 18)}%)`, background: `color-mix(in oklab, var(--photo-ground) ${100 - Math.round(t * 18)}%, var(--fg) ${Math.round(t * 18)}%)`, }; return (

{label && {label}} {children}

); } /* ========================================================================= Decorative emblem with cross-fade ========================================================================= */ function Emblem({ size = 240, style = {} }) { const { mode } = useMode(); return (

); } /* ========================================================================= Reveal-on-scroll ========================================================================= */ function Reveal({ children, as: Tag = 'div', delay = 0, className = '', ...rest }) { const ref = useRef(null); const [vis, setVis] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setTimeout(() => setVis(true), delay); obs.disconnect(); } }, { threshold: 0.12 }); obs.observe(el); return () => obs.disconnect(); }, [delay]); return ( {children} ); } /* ========================================================================= Export ========================================================================= */ Object.assign(window, { ModeProvider, useMode, useRoute, currentSection, TopNav, Footer, Tile, Emblem, Reveal, });