31:T3558,loginWidget = { // Compact, popover-based login surface. // - signed-out rest: 32px [● sign in ▾] button → click opens popover form // - signed-in rest: 32px [● @handle ▾] chip → click opens identity card // Builder, not a singleton: each call returns a fresh root, so multiple // consumers (atproto-login panel, at-write fallback, etc.) can all show // their own widget. Reactive hooks: currentSession + mutable currentSession, // storage, dpopKeyStore, startOAuth, resolvePds. return () => { const root = document.createElement('div'); root.style.cssText = 'position:relative;display:inline-block;font:14px Inter Tight,system-ui,sans-serif'; const esc = s => String(s).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); const rest = document.createElement('button'); rest.type = 'button'; function paintRest(open) { if (currentSession) { const handle = currentSession.handle || currentSession.did; rest.innerHTML = ` ● @${ esc(handle) } ${ open ? '\u25B4' : '\u25BE' }`; rest.style.cssText = ` display:inline-flex;align-items:center;gap:8px; height:32px;padding:0 10px; background:${ open ? '#eaddc6' : '#f5efe5' }; border:1px solid ${ open ? '#1a1814' : '#d8cdb4' }; font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:#1a1814; cursor:pointer;`; } else { rest.innerHTML = ` ● sign in ${ open ? '\u25B4' : '\u25BE' }`; rest.style.cssText = ` display:inline-flex;align-items:center;gap:8px; height:32px;padding:0 12px; background:${ open ? '#1a1814' : '#f5efe5' }; color:${ open ? '#f5efe5' : '#1a1814' }; border:1px solid ${ open ? '#1a1814' : '#d8cdb4' }; font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px; letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;`; } } paintRest(false); root.append(rest); let pop = null; const closePop = () => { if (pop) { pop.remove(); pop = null; paintRest(false); document.removeEventListener('mousedown', onDocDown, true); } }; const onDocDown = e => { if (pop && !root.contains(e.target)) closePop(); }; function buildSignedInPopover() { const wrap = document.createElement('div'); wrap.style.cssText = ` position:absolute;top:100%;left:0;margin-top:6px;width:280px; background:#f5efe5;border:1px solid #1a1814; box-shadow:0 8px 0 rgba(26,24,20,0.06); font-family:Inter Tight,system-ui,sans-serif;color:#1a1814; z-index:50;`; const handle = currentSession.handle || currentSession.did; const did = currentSession.did || ''; const method = currentSession.authType === 'oauth' ? 'oauth \xB7 pkce' : 'app password'; wrap.innerHTML = `

          ●
          signed in · atproto
          ok
          ×
        

@${ esc(handle) }

${ esc(did) }

method ${ esc(method) }
scope bundle:read · :write · :delete

`; wrap.querySelector('[data-act=x]').addEventListener('click', closePop); wrap.querySelector('[data-act=logout]').addEventListener('click', async () => { const wasOAuth = currentSession?.authType === 'oauth'; const dpopKeyId = currentSession?.dpopKeyId; storage.clear(); mutable currentSession = null; if (wasOAuth && dpopKeyId) { await dpopKeyStore.delete(dpopKeyId).catch(() => { }); } closePop(); }); return wrap; } function buildSignedOutPopover() { const wrap = document.createElement('div'); wrap.style.cssText = ` position:absolute;top:100%;left:0;margin-top:6px;width:340px; background:#f5efe5;border:1px solid #1a1814; box-shadow:0 8px 0 rgba(26,24,20,0.06); font-family:Inter Tight,system-ui,sans-serif;color:#1a1814; z-index:50;`; const labelStyle = 'font-family:\'JetBrains Mono\',ui-monospace,monospace;font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:#7a6f5e;margin-bottom:4px;display:block'; const inputStyle = 'width:100%;padding:8px 10px;border:1px solid #d8cdb4;background:#f5efe5;font:13px \'JetBrains Mono\',ui-monospace,monospace;color:#1a1814;box-sizing:border-box'; wrap.innerHTML = `

          ●
          sign in · atproto
          idle
          ×
        

`; const form = wrap.querySelector('[data-form]'); const statusEl = wrap.querySelector('[data-status]'); const msgEl = wrap.querySelector('[data-msg]'); const oauthBtn = wrap.querySelector('[data-act=oauth]'); const apppwBtn = wrap.querySelector('[data-act=apppw]'); const setStatus = (label, tone) => { statusEl.textContent = label; statusEl.style.color = tone === 'err' ? '#c54f2b' : tone === 'work' ? '#3a342b' : tone === 'ok' ? '#2e7d32' : '#7a6f5e'; }; const showMsg = (text, tone) => { msgEl.style.display = 'block'; msgEl.style.borderLeftColor = tone === 'err' ? '#c54f2b' : '#7a6f5e'; msgEl.textContent = text; }; wrap.querySelector('[data-act=x]').addEventListener('click', closePop); oauthBtn.addEventListener('click', () => { const handle = form.handle.value.trim(); if (!handle) { showMsg('Enter your handle first.', 'err'); form.handle.focus(); return; } const popup = window.open('about:blank', 'atproto-oauth', 'width=480,height=720,popup=1'); if (!popup) { showMsg('Popup blocked. Allow popups and try again.', 'err'); return; } setStatus('redirecting', 'work'); oauthBtn.disabled = true; apppwBtn.disabled = true; (async () => { try { const session = await startOAuth(handle, { popup }); storage.save(session); mutable currentSession = session; } catch (err) { showMsg(`OAuth failed: ${ err.message }`, 'err'); setStatus('rejected', 'err'); oauthBtn.disabled = false; apppwBtn.disabled = false; } })(); }); form.addEventListener('submit', async e => { e.preventDefault(); const handle = form.handle.value.trim(); const password = form.appPassword.value.trim(); if (!password) { showMsg('Enter an app password, or use OAuth instead.', 'err'); return; } setStatus('verifying', 'work'); oauthBtn.disabled = true; apppwBtn.disabled = true; try { const {pds} = await resolvePds(handle); const r = await fetch(`${ pds }/xrpc/com.atproto.server.createSession`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ identifier: handle, password }) }); if (!r.ok) throw new Error(`createSession ${ r.status }: ${ await r.text() }`); const data = await r.json(); const session = { did: data.did, handle: data.handle, pds, accessJwt: data.accessJwt, refreshJwt: data.refreshJwt, authType: 'app-password' }; storage.save(session); form.appPassword.value = ''; mutable currentSession = session; } catch (err) { showMsg(`Login failed: ${ err.message }`, 'err'); setStatus('rejected', 'err'); oauthBtn.disabled = false; apppwBtn.disabled = false; } }); return wrap; } rest.addEventListener('click', () => { if (pop) { closePop(); return; } pop = currentSession ? buildSignedInPopover() : buildSignedOutPopover(); root.append(pop); paintRest(true); setTimeout(() => document.addEventListener('mousedown', onDocDown, true), 0); }); return root; }; }32:T4f1,md`--- ## Requesting additional scopes The default OAuth scope grants \`com.lopecode.bundle\` writes and blob uploads — enough to publish a lopebook, nothing else. Other lexicons (Bluesky posts, standard.site documents, …) are gated behind \`ensureScopes(scopes, opts?)\` so the user grants them only on the gesture that needs them, not at sign-in. \`\`\`js import {ensureScopes} from "@tomlarkworthy/at-login" button.addEventListener("click", async () => { // The popup MUST be opened synchronously in the click handler so the // browser counts it as a user gesture and doesn't block it. const popup = window.open("about:blank", "atproto-oauth", "width=480,height=720,popup=1"); await ensureScopes(["repo:app.bsky.feed.post"], {popup}); // \`currentSession.scopes\` now includes the new scope; proceed with the action. }); \`\`\` - If the requested scopes are already in the session, this resolves to the existing session without opening a popup. - App-password sessions have unrestricted repo access by construction, so this is a no-op for them — call sites can be auth-method-agnostic. - The requested scopes must be declared in the client metadata at \`lopecode.com/oauth/client.json\`; otherwise the OAuth server returns \`invalid_scope\`.`33:T820,{ const BSKY = 'repo:app.bsky.feed.post'; const granted = !!(currentSession && (currentSession.scopes || []).includes(BSKY)); const isAppPw = currentSession?.authType === 'app-password'; const initialMsg = !currentSession ? '\xB7 sign in first (see widget above)' : granted ? '\u2713 Bluesky scope already in this session' : isAppPw ? '\xB7 app-password sessions have unrestricted access \u2014 no-op' : '\xB7 not granted yet \u2014 click to request'; const status = htl.html`

${ initialMsg }

`; const btn = Inputs.button(granted ? '\u2713 have Bluesky scope' : 'Request Bluesky scope'); // Inputs.button wraps a real