// Desktop FIRST-RUN onboarding — a two-pane focused setup. // Left: brand showcase with animated peer constellation. // Right: 3 steps — Welcome → Profile (name + avatar) → Ready. // The profile step writes the same localStorage keys the desktop Settings // identity hero reads (ajna-profile-name / ajna-profile-avatar), so a name // or color chosen here shows up in Settings → You & Ajna immediately. const DFR_AVATARS = [ { grad: 'var(--accent-grad)' }, { grad: 'linear-gradient(135deg,#C4B5FD,#818CF8)' }, { grad: 'linear-gradient(135deg,#FDE68A,#F472B6)' }, { grad: 'linear-gradient(135deg,#6EE7B7,#22D3EE)' }, { grad: 'linear-gradient(135deg,#FCA5A5,#F59E0B)' }, { grad: 'linear-gradient(135deg,#D1D5DB,#6B7280)' }, ]; // ── Animated brand panel (left) ────────────────────────────── function DFRBrandPanel({ step }) { return (
{/* ambient glow */}
{/* brand */}
Ajna
{/* constellation */}
{[88, 64, 40].map((r, i) => (
{[0, 1, 2].map(j => { const ang = (j / 3) * Math.PI * 2 + i; return (
); })}
))} {/* center node */}
A
{/* tagline */}
A browser that owns its identity.
Yours — end-to-end, peer-to-peer.
Ed25519 · X25519 · DID:KEY
); } // ── Step dots ──────────────────────────────────────────────── function DFRDots({ step, total }) { return (
{Array.from({ length: total }).map((_, i) => (
))}
); } // ── Step 1: Welcome ────────────────────────────────────────── function DFRWelcome({ onNext, onSkip }) { return (
Welcome
Let's set up your Ajna
No account, no email, no cloud. Your identity lives on this device and syncs privately to your others. Takes about a minute.
{[ { icon: , t: 'Create your profile', s: 'A name and avatar others see' }, { icon: , t: 'Generate your identity', s: 'A device-bound DID — never leaves you' }, { icon: , t: 'Connect your mesh', s: 'Optional — pair devices any time' }, ].map((r, i) => (
{r.icon}
{r.t}
{r.s}
))}
); } // ── Step 2: Profile ────────────────────────────────────────── function DFRProfile({ onNext, onBack, value, setValue }) { const [name, setName] = React.useState(value.name || ''); const [handle, setHandle] = React.useState(value.handle || ''); const [avatarIdx, setAvatarIdx] = React.useState(value.avatarIdx || 0); const inputRef = React.useRef(null); React.useEffect(() => { setTimeout(() => inputRef.current?.focus(), 100); }, []); const initials = name.trim().split(/\s+/).slice(0, 2).map(s => s[0] || '').join('').toUpperCase() || 'A'; const grad = DFR_AVATARS[avatarIdx].grad; const valid = name.trim().length >= 1; const submit = () => { if (!valid) return; setValue({ name, handle, avatarIdx }); try { localStorage.setItem('ajna-profile-name', name.trim()); localStorage.setItem('ajna-profile-avatar', String(avatarIdx)); } catch {} onNext(); }; return (
Step 2 · Profile
How should you appear?
Pick a name and avatar. You can change these any time in Settings → You & Ajna.
{/* Avatar + picker */}
{initials}
Choose a color
{DFR_AVATARS.map((a, i) => (
{/* Fields */}
setName(e.target.value)} maxLength={40} placeholder="Your name" onKeyDown={(e) => { if (e.key === 'Enter') submit(); }} style={dfrFieldStyle(!!name)}/>
@ setHandle(e.target.value.replace(/^@/, '').replace(/[^a-z0-9-]/gi, '').toLowerCase())} placeholder="yourname" maxLength={80} style={{ ...dfrFieldStyle(!!handle), paddingLeft: 28, fontFamily: 'JetBrains Mono, monospace' }}/>
Others can find you with @your-handle · did:key:z6Mkh…9kTp
); } // ── Step 3: Ready ──────────────────────────────────────────── function DFRReady({ value, onDone }) { const initials = (value.name || 'A').trim().split(/\s+/).slice(0, 2).map(s => s[0] || '').join('').toUpperCase() || 'A'; const grad = DFR_AVATARS[value.avatarIdx || 0].grad; return (
{initials}
You're all set{value.name ? ', ' + value.name.trim().split(/\s+/)[0] : ''}.
Your identity is generated and stored on this device. Sync your other devices any time from Settings.
● Identity created ● Profile saved ○ Mesh — set up later
); } // shared inline styles const dfrPrimaryStyle = { padding: '11px 22px', borderRadius: 10, border: 0, background: 'var(--accent-grad)', color: '#0F1114', fontSize: 13.5, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.01em', cursor: 'pointer', }; const dfrGhostStyle = { padding: '11px 18px', borderRadius: 10, background: 'transparent', border: '1px solid var(--border)', color: 'var(--fg-muted)', fontSize: 13, fontFamily: 'inherit', cursor: 'pointer', }; const dfrLabelStyle = { display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', marginBottom: 6, letterSpacing: '0.02em', }; const dfrFieldStyle = (filled) => ({ width: '100%', boxSizing: 'border-box', padding: '11px 13px', borderRadius: 10, background: 'var(--bg-elev)', border: '1px solid ' + (filled ? 'oklch(from var(--accent-b) l c h / 0.4)' : 'var(--border-soft)'), color: 'var(--fg)', fontSize: 13.5, fontFamily: 'inherit', outline: 0, }); const dfrPillStyle = (c) => ({ fontSize: 11, padding: '5px 10px', borderRadius: 999, background: 'color-mix(in oklch, ' + c + ' 14%, transparent)', color: c, fontFamily: 'JetBrains Mono, monospace', fontWeight: 600, letterSpacing: '0.02em', }); // ── Flow shell ─────────────────────────────────────────────── function DesktopFirstRun({ onComplete }) { const [step, setStep] = React.useState(0); const [value, setValue] = React.useState({}); const total = 3; return (
{/* top bar */}
{/* step body */}
{step === 0 && setStep(1)} onSkip={onComplete}/>} {step === 1 && setStep(2)} onBack={() => setStep(0)} value={value} setValue={setValue}/>} {step === 2 && }
); } Object.assign(window, { DesktopFirstRun });