// app.jsx — Sauvrn AI / v5 // ───────────────────────────────────────────────────────────────────────────── // Reset of the v4 dispatch direction. Keeps the visual rigor — dark cool field, // mono-heavy type system, heavy Bricolage display moments, coral as signal, // strong horizontal rules — but strips the broadcast/dispatch vocabulary that // read as cosplay. No "TRANSMISSION", no "ARTICLES OF OPERATION", no live // clock, no scanlines. Just a serious, restrained dark page. const { useState, useEffect, useRef } = React; // ─── Tweakable defaults ────────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "mode": "dark", "accentHue": "vermillion", "messageFont": "grotesque", "wordmarkFont": "grotesque", "showPrinciples": true, "formStatePreview": "live", "headlineCopy": "default", "overlayOpacity": 0.9, "overlayColor": "cream" }/*EDITMODE-END*/; // Overlay color presets for the AI layer. // Each pairs a 'dark' value (used on the dark surface) with a 'light' value // (used on the light surface). 'cream' is brand-cohesive default; the others // are exploratory complementaries. const OVERLAYS = { teal: { dark: '#4BB5A7', light: '#1B7A72', label: 'Teal' }, cream: { dark: '#E8E4D6', light: '#0F1117', label: 'Cream' }, navy: { dark: '#7894C2', light: '#1A2A45', label: 'Navy' }, forest: { dark: '#62AE82', light: '#1D3F2F', label: 'Forest' }, plum: { dark: '#C16985', light: '#4A1F2E', label: 'Plum' }, white: { dark: '#FFFFFF', light: '#000000', label: 'White' }, }; // ─── Surfaces ──────────────────────────────────────────────────────────────── const MODES = { dark: { bg: '#0A0B10', surface: '#101218', fg: '#E8E4D6', muted: '#7A7C86', line: 'rgba(232,228,214,0.12)', lineStrong:'rgba(232,228,214,0.28)', isDark: true, }, light: { bg: '#E5E6E1', surface: '#EDEEE9', fg: '#0F1117', muted: '#5C5F66', line: 'rgba(15,17,23,0.13)', lineStrong:'rgba(15,17,23,0.30)', isDark: false, }, }; // ─── Signal hues ───────────────────────────────────────────────────────────── const ACCENTS = { vermillion: { light: '#D9483A', dark: '#E55A4B' }, rust: { light: '#C44132', dark: '#D2503E' }, signal: { light: '#E14431', dark: '#EE5440' }, }; // ─── Fonts ─────────────────────────────────────────────────────────────────── // Per-font tuning for the wordmark — different faces need different // letter-spacing and weights to read at the same density. const WM_TUNING = { inter: { weight: 800, letterSpacing: '-0.04em' }, onest: { weight: 800, letterSpacing: '-0.04em' }, grotesque: { weight: 700, letterSpacing: '-0.015em' }, boldonse: { weight: 400, letterSpacing: '-0.02em' }, }; const FONTS = { inter: '"Inter", "Helvetica Neue", system-ui, sans-serif', grotesque: '"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif', onest: '"Onest", ui-sans-serif, system-ui, sans-serif', boldonse: '"Boldonse", "Arial Black", sans-serif', serif: '"Newsreader", Georgia, serif', mono: '"JetBrains Mono", ui-monospace, monospace', }; const HEADLINES = { default: 'A calmer way to work across browser tools.', shorter: 'A calmer way to work in the browser.', product: 'Stay oriented across every tab you open.', }; // ─── App ───────────────────────────────────────────────────────────────────── function App() { // Tweaks panel was a dev affordance; deleted before launch. The defaults // ARE the locked-in design, so we just freeze them here. setTweak is kept // as a no-op so child components that still accept the prop don't crash. const t = TWEAK_DEFAULTS; const setTweak = () => {}; const mode = MODES[t.mode] || MODES.dark; const accentSet = ACCENTS[t.accentHue] || ACCENTS.vermillion; const accent = mode.isDark ? accentSet.dark : accentSet.light; const messageFont = FONTS[t.messageFont] || FONTS.inter; const wordmarkFont = FONTS[t.wordmarkFont] || FONTS.inter; const rootStyle = { '--bg': mode.bg, '--surface': mode.surface, '--fg': mode.fg, '--accent': accent, '--secondary': mode.isDark ? (OVERLAYS[t.overlayColor]?.dark || '#4BB5A7') : (OVERLAYS[t.overlayColor]?.light || '#1B7A72'), '--muted': mode.muted, '--line': mode.line, '--line-strong': mode.lineStrong, '--font-message': messageFont, '--font-wordmark': wordmarkFont, '--font-mono': FONTS.mono, background: mode.bg, color: mode.fg, minHeight: '100vh', fontFamily: FONTS.mono, }; return (
); } // ─── Page ──────────────────────────────────────────────────────────────────── function Page({ t, setTweak, mode }) { const headline = HEADLINES[t.headlineCopy] || HEADLINES.default; return (
{/* Minimal top bar — abstract mark placeholder (left) + stealth tag (right) */}
{/* Wordmark — the showpiece, full column width */}
{/* Headline + sub */}

{headline}

Most modern work happens across dozens of tabs, documents, and apps. Sauvrn is building privacy-first tools to help people stay oriented and reduce context switching.

{/* Form */}
{/* Principles */} {t.showPrinciples && (
)} {/* Footer */}
); } // ─── Styles ────────────────────────────────────────────────────────────────── function PageStyles() { return ( ); } // ─── Principles ────────────────────────────────────────────────────────────── function Principles() { const items = [ 'Organization without disruption.', 'Privacy by default.', 'Practical AI, grounded in your own work.', ]; return ( <>

Principles

{items.map((text, i) => (
{String(i + 1).padStart(2, '0')}

{text}

))} ); } // ─── Signup Form ───────────────────────────────────────────────────────────── const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; function SignupForm({ previewState = 'live' }) { const [email, setEmail] = useState(''); const [state, setState] = useState('idle'); const honeyRef = useRef(null); useEffect(() => { if (previewState && previewState !== 'live') { setState(previewState); if (previewState === 'success') setEmail('cam@sauvrn.ai'); else if (previewState === 'invalid') setEmail('not-an-email'); else if (previewState === 'error') setEmail('cam@sauvrn.ai'); else if (previewState === 'loading') setEmail('cam@sauvrn.ai'); } else { setState('idle'); } }, [previewState]); const onSubmit = async (e) => { e.preventDefault(); if (previewState !== 'live') return; if (honeyRef.current?.value) return; if (!EMAIL_RE.test(email)) { setState('invalid'); return; } setState('loading'); try { const res = await fetch('/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, website: honeyRef.current?.value || '' }), }); const data = await res.json(); setState(data.ok ? 'success' : 'error'); } catch { setState('error'); } }; if (state === 'success') { return (
Subscribed
Thanks. We'll be in touch when there's something to share.
); } return (
{ setEmail(e.target.value); if (state === 'invalid' || state === 'error') setState('idle'); }} disabled={state === 'loading'} aria-invalid={state === 'invalid' ? 'true' : 'false'} />
{state === 'invalid' && 'Please enter a valid email address.'} {state === 'error' && 'Something went wrong. Please try again.'}
); } // ─── Mount ─────────────────────────────────────────────────────────────────── const root = ReactDOM.createRoot(document.getElementById('root')); root.render();