// Top nav — minimal, sticky, with backdrop blur.
function Nav() {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 20);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const items = [
{ label: 'How it works', href: '#how' },
{ label: 'Signals', href: '#signals' },
{ label: 'Use cases', href: '#usecases' },
{ label: 'FAQ', href: '#faq' },
];
return (
);
}
// Three-way light/dark/system theme toggle. Persists to localStorage('theme')
// and writes data-theme on . When 'system', listens to the OS color
// scheme and re-resolves on changes. The FOUC bootstrap in index.html sets
// the initial data-theme; this component owns updates after mount.
function ThemeToggle() {
const [mode, setMode] = React.useState(() => {
try {
const v = localStorage.getItem('theme');
if (v === 'light' || v === 'dark' || v === 'system') return v;
} catch (e) {}
return 'system';
});
const applyResolved = React.useCallback((m) => {
const resolved = m === 'system'
? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
: m;
if (resolved === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
} else {
document.documentElement.removeAttribute('data-theme');
}
// Keep the tweaks-panel theme state in sync so that future tweak edits
// (accent, font, etc.) don't snap the theme back via applyTweaks.
if (typeof window.__bpSyncTheme === 'function') {
window.__bpSyncTheme(resolved);
}
}, []);
// Apply on mount + whenever mode changes; persist to localStorage.
React.useEffect(() => {
try { localStorage.setItem('theme', mode); } catch (e) {}
applyResolved(mode);
}, [mode, applyResolved]);
// While in 'system', follow OS preference changes live.
React.useEffect(() => {
if (mode !== 'system') return;
const mql = window.matchMedia('(prefers-color-scheme: dark)');
const onChange = () => applyResolved('system');
mql.addEventListener('change', onChange);
return () => mql.removeEventListener('change', onChange);
}, [mode, applyResolved]);
const options = [
{ value: 'light', label: 'Light theme', icon: },
{ value: 'system', label: 'System theme', icon: },
{ value: 'dark', label: 'Dark theme', icon: },
];
return (
{options.map((o) => {
const active = mode === o.value;
return (
);
})}
);
}
// Inline SVG icons. Stroke uses currentColor so they pick up the button color.
function SunIcon() {
return (
);
}
function MoonIcon() {
return (
);
}
function SystemIcon() {
return (
);
}
window.Nav = Nav;