@weaveprotocol/core 0.2.1 → 0.2.3

package/dist/elements/weave-auth.js

@@ -18,14 +18,14 @@
  *
  * It draws into its own light DOM, not a shadow root, on purpose: password
  * managers find and fill forms in the page far more reliably than forms inside
- * a shadow root, and the account password living in a password manager is the
- * point of the whole design. Its styles are scoped to the element instead.
+ * a shadow root, and the everyday password living in a password manager is
+ * much of the point. Its styles are scoped to the element instead.
  *
  * It fills whatever box it is put in — a page, a modal, a panel — and draws
  * nothing once signed in; the host decides what happens then.
  */
-import { createWeaveAuth } from '../session/auth.js';
-import { accountCredentialName, deviceCredentialName, offerToSave } from '../session/credentials.js';
+import { createWeaveAuth, MIN_PASSWORD_LENGTH } from '../session/auth.js';
+import { accountCredentialName, offerToSave, recoveryKit } from '../session/credentials.js';
 import { adoptStyles, h, svg } from './dom.js';
 import { AUTH_CSS } from './auth-styles.js';
 const Base = (globalThis.HTMLElement ?? class {
@@ -92,6 +92,15 @@ function option(title, text, onclick, disabled, recommended = false) {
 function link(text, onclick, disabled = false) {
     return h('button', { type: 'button', class: 'wa-link', onclick, disabled }, text);
 }
+/** Hands the page a text file to save. */
+function download({ filename, text }) {
+    const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));
+    const anchor = h('a', { href: url, download: filename, style: 'display:none' });
+    globalThis.document.body.append(anchor);
+    anchor.click();
+    anchor.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
 function describePairing(stage) {
     switch (stage.kind) {
         case 'waiting':
@@ -112,10 +121,14 @@ export class WeaveAuthElement extends Base {
     #announced = undefined;
     // What only this element cares about: which fold is open, what is typed.
     #drafts = new Map();
-    #showCode = false;
     #filledAs = '';
     #copied = false;
+    #stored = false;
+    #choosingPassword = false;
+    #showPairHelp = false;
+    #mismatch = false;
     #lastSelected = null;
+    #lastStage = null;
     /** The flow this element draws. Set it to share one with the rest of the page; otherwise one is made from the attributes. */
     get auth() {
         this.#auth ??= createWeaveAuth({
@@ -160,8 +173,9 @@ export class WeaveAuthElement extends Base {
     }
     #changed(state) {
         // A new account row, or a new screen, starts with empty fields.
-        if (state.selectedId !== this.#lastSelected) {
+        if (state.selectedId !== this.#lastSelected || state.stage !== this.#lastStage) {
             this.#lastSelected = state.selectedId;
+            this.#lastStage = state.stage;
             this.#reset();
         }
         this.#render(state);
@@ -173,8 +187,15 @@ export class WeaveAuthElement extends Base {
     }
     #reset() {
         this.#drafts.clear();
-        this.#showCode = false;
         this.#filledAs = '';
+        this.#copied = false;
+        this.#stored = false;
+        this.#choosingPassword = false;
+        this.#showPairHelp = false;
+        this.#mismatch = false;
+    }
+    #redraw() {
+        this.#render(this.auth.getState());
     }
     /** Redraws, keeping focus and what was typed. */
     #render(state) {
@@ -197,46 +218,72 @@ export class WeaveAuthElement extends Base {
         });
     }
     #screen(state) {
-        if (state.stage === 'ready')
-            return [];
-        if (state.stage === 'starting')
-            return [h('div', { class: 'wa-card' }, h('p', { class: 'wa-hint' }, 'Looking for your accounts…'))];
-        if (state.stage === 'pair')
-            return [this.#pair(state)];
-        if (state.stage === 'create')
-            return [state.freshCode ? this.#saveCode(state, state.freshCode) : this.#create(state)];
-        if (state.stage === 'where')
-            return [this.#where(state)];
-        if (state.stage === 'welcome')
-            return [this.#welcome(state)];
-        return [this.#signIn(state)];
-    }
-    // ─── Where should your data live ───────────────────────────────────
-    #where(state) {
-        const auth = this.auth;
-        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Where should your data live?'), h('p', { class: 'wa-subtitle' }, 'You can change this later.'), h('div', { class: 'wa-options' }, option('Choose a pod', 'A folder on your computer that holds your Weave data. Every app you open it in sees the same account and the same spaces.', () => void auth.choosePod(), state.busy, true), option('Continue in this browser', "Nothing to set up. Your data syncs with your other devices, but other apps on other addresses can't open it.", () => void auth.useBrowser(), state.busy)), h('p', { class: 'wa-small', style: 'margin-top:16px' }, 'Your browser will ask to see the folder, then to save into it.', info('Why a pod', 'Your data becomes yours the way any other file is: copy it, back it up, or put the folder in iCloud or Dropbox and your devices stay in step with no server involved. It is also the only storage a second app on a different address can read.')), errorBox(state.error));
+        switch (state.stage) {
+            case 'ready':
+                return [];
+            case 'starting':
+                return [h('div', { class: 'wa-card' }, h('p', { class: 'wa-hint' }, 'Looking for your accounts…'))];
+            case 'pair':
+                return [this.#pair(state)];
+            case 'create':
+                return [this.#create(state)];
+            case 'recovery':
+                return [this.#recovery(state)];
+            case 'unlock':
+                return [this.#unlock(state)];
+            case 'pod':
+                return [this.#pod(state)];
+            case 'welcome':
+                return [this.#welcome(state)];
+            case 'existing':
+                return [this.#existing(state)];
+            case 'restore':
+                return [this.#restore(state)];
+            case 'signIn':
+                return [this.#signIn(state)];
+        }
     }
-    #placeLine(state) {
+    /** Where accounts are read from, shown only when it is a pod — a new person should not have to think about it. */
+    #podLine(state) {
         const place = state.place;
-        if (!place)
+        if (place?.kind !== 'folder')
             return null;
-        return h('p', { class: 'wa-small', style: 'margin-top:24px' }, place.kind === 'folder' ? `Pod: ${place.directory?.name ?? 'your folder'}` : 'Stored in this browser', state.folderAvailable ? [' · ', link('Change', () => this.auth.changeStorage(), state.busy)] : null);
+        return h('p', { class: 'wa-small', style: 'margin-top:24px' }, `Pod: ${place.directory?.name ?? 'your folder'} · `, link('Use this browser instead', () => void this.auth.useBrowser(), state.busy));
     }
     // ─── New here, or not ──────────────────────────────────────────────
     #welcome(state) {
         const auth = this.auth;
-        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Do you have a Weave account?'), h('p', { class: 'wa-subtitle' }, 'One account works in every Weave app.'), h('div', { class: 'wa-options' }, option('Create a new account', "We'll make you a strong password to save in your password manager.", () => auth.startCreating(), state.busy), option('I already have one', 'Sign in with the account password you saved when you made it.', () => auth.showSignIn(), state.busy)), errorBox(state.error), this.#placeLine(state));
+        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Welcome to Weave'), h('p', { class: 'wa-subtitle' }, 'One account for every Weave app. Your data stays with you, not on a server.'), h('div', { class: 'wa-options' }, option('Create an account', "Takes a minute. You'll get a recovery code to keep safe, then sign in with a passkey or a password.", () => auth.startCreating(), state.busy), option('I already have one', 'Open your pod, use your recovery code, or add this device from another.', () => auth.showExisting(), state.busy)), errorBox(state.error), this.#podLine(state));
+    }
+    /**
+     * "I already have an account", from a place that does not list it. Where the
+     * data lives comes up here and only here: someone with a pod has something to
+     * point at, and someone without one has other ways in.
+     */
+    #existing(state) {
+        const auth = this.auth;
+        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Find your account'), h('p', { class: 'wa-subtitle' }, 'Any of these gets you in.'), h('div', { class: 'wa-options' }, state.folderAvailable
+            ? option('Open your pod', 'The folder your Weave data lives in. Its accounts are listed next, ready to unlock with your passkey or password.', () => void auth.choosePod(), state.busy)
+            : null, option('Add this device from another', 'From a device where you are signed in. Nothing to type — your spaces come across too.', () => {
+            this.#showPairHelp = !this.#showPairHelp;
+            this.#redraw();
+        }, state.busy), this.#showPairHelp
+            ? h('ol', { class: 'wa-steps' }, h('li', null, 'On the signed-in device, open your account page.'), h('li', null, 'Choose ', h('strong', null, 'Add your phone'), ' and show the pairing code.'), h('li', null, "Scan it with this device's camera and open the link."))
+            : null, option('Use your recovery code', 'The 26-character code you kept when you made the account. Works on any device.', () => auth.showRestore(), state.busy)), errorBox(state.error), h('div', { class: 'wa-links' }, link('Back', () => (state.accounts.length > 0 ? auth.showSignIn() : auth.showWelcome()), state.busy), link('Create a new account instead', () => auth.startCreating(), state.busy)), this.#podLine(state));
     }
     // ─── Choosing an account, and getting in ───────────────────────────
     /**
-     * The account-password form.
+     * The recovery-code form.
      *
-     * The username field is off-screen, but deliberately not `display: none` —
-     * a field taken out of the layout is not counted as a username, while one
-     * merely moved out of view is filled normally. And writable: a manager fills
-     * the whole credential at once, so a read-only username keeps showing the
-     * account that was clicked while the password quietly belongs to another.
-     * Letting it be overwritten is what makes the mismatch detectable.
+     * Kept a password form with an off-screen username, because before
+     * passwords existed the recovery code *was* this site's login and many
+     * people's password managers hold it that way. The username field is
+     * off-screen, but deliberately not `display: none` — a field taken out of the
+     * layout is not counted as a username, while one merely moved out of view is
+     * filled normally. And writable: a manager fills the whole credential at
+     * once, so a read-only username keeps showing the account that was clicked
+     * while the code quietly belongs to another. Letting it be overwritten is
+     * what makes the mismatch detectable.
      */
     #codeForm(state, selected) {
         const username = h('input', {
@@ -248,32 +295,67 @@ export class WeaveAuthElement extends Base {
             tabindex: '-1',
             'aria-hidden': 'true',
         });
-        const password = this.#input('code', {
+        const code = this.#input('code', {
             type: 'password',
             name: 'password',
-            placeholder: 'Your account password',
+            placeholder: 'XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XX',
             autocomplete: 'current-password',
             spellcheck: 'false',
-            'aria-label': 'Account password',
+            autofocus: true,
+            'aria-label': 'Recovery code',
             disabled: state.busy,
         });
         // Autofill sets the DOM value directly; read what it filled as well.
-        password.addEventListener('input', () => {
+        code.addEventListener('input', () => {
             const filled = username.value.trim();
             if (filled !== this.#filledAs) {
                 this.#filledAs = filled;
-                this.#render(this.auth.getState());
+                this.#redraw();
             }
         });
+        const wrong = selected !== null && this.#filledAs !== '' && this.#filledAs !== accountCredentialName(selected.name);
+        return [
+            h('form', {
+                class: 'wa-form',
+                onsubmit: (event) => {
+                    event.preventDefault();
+                    const value = code.value.trim();
+                    if (value)
+                        void this.auth.signInWithCode(value);
+                },
+            }, username, code, h('button', { type: 'submit', class: 'wa-button', disabled: state.busy }, state.busy ? 'Opening…' : 'Continue')),
+            wrong
+                ? h('p', { class: 'wa-error', style: 'margin-top:10px' }, 'Your password manager filled ', h('strong', null, this.#filledAs), ', not ', h('strong', null, selected.name), '. Pick the entry named ', h('strong', null, selected.name), ', or open that account instead.')
+                : null,
+        ].filter((node) => node !== null);
+    }
+    /** The everyday password, filed under the account's name so a manager fills the right one. */
+    #passwordForm(state, account) {
+        const password = this.#input('password', {
+            type: 'password',
+            name: 'password',
+            placeholder: 'Password',
+            autocomplete: 'current-password',
+            'aria-label': 'Password',
+            disabled: state.busy,
+        });
         return h('form', {
             class: 'wa-form',
             onsubmit: (event) => {
                 event.preventDefault();
-                const code = password.value.trim();
-                if (code)
-                    void this.auth.signInWithCode(code);
+                if (password.value)
+                    void this.auth.signInWithPassword(password.value);
             },
-        }, username, password, h('button', { type: 'submit', class: 'wa-button', disabled: state.busy }, state.busy ? 'Signing in…' : 'Sign in'));
+        }, h('input', {
+            type: 'text',
+            name: 'username',
+            autocomplete: 'username',
+            value: accountCredentialName(account.name),
+            readonly: true,
+            class: 'wa-offscreen',
+            tabindex: '-1',
+            'aria-hidden': 'true',
+        }), password, h('button', { type: 'submit', class: 'wa-button', disabled: state.busy }, state.busy ? 'Signing in…' : 'Sign in'));
     }
     #signIn(state) {
         const auth = this.auth;
@@ -284,58 +366,21 @@ export class WeaveAuthElement extends Base {
             const body = [];
             if (isSelected && entry) {
                 const hasShortcut = entry.shortcuts.length > 0;
-                const needsCode = this.#showCode || (!hasShortcut && !entry.hasPassword);
                 // An account with wraps, none of them usable here, has been used on
                 // another site — a passkey works on one web address only.
                 const seenElsewhere = entry.vault.wraps.length > 0;
-                if (hasShortcut && !this.#showCode) {
-                    body.push(h('button', { type: 'button', class: 'wa-button', 'data-key': 'passkey', disabled: state.busy, onclick: () => void auth.signInWithPasskey() }, state.busy ? 'Waiting…' : 'Unlock with passkey'));
+                if (hasShortcut) {
+                    body.push(h('button', { type: 'button', class: 'wa-button', 'data-key': 'passkey', disabled: state.busy, onclick: () => void auth.signInWithPasskey() }, state.busy ? 'Waiting…' : 'Sign in with passkey'));
                 }
-                if (entry.hasPassword && !this.#showCode) {
-                    const devicePassword = this.#input('device-password', {
-                        type: 'password',
-                        name: 'password',
-                        placeholder: 'Password on this device',
-                        autocomplete: 'current-password',
-                        'aria-label': 'Device password',
-                        disabled: state.busy,
-                    });
-                    body.push(h('form', {
-                        class: 'wa-form',
-                        style: hasShortcut ? 'margin-top:10px' : '',
-                        onsubmit: (event) => {
-                            event.preventDefault();
-                            if (devicePassword.value)
-                                void auth.signInWithPassword(devicePassword.value);
-                        },
-                    }, h('input', {
-                        type: 'text',
-                        name: 'username',
-                        autocomplete: 'username',
-                        value: deviceCredentialName(account.name),
-                        readonly: true,
-                        class: 'wa-offscreen',
-                        tabindex: '-1',
-                        'aria-hidden': 'true',
-                    }), devicePassword, h('button', { type: 'submit', class: 'wa-button', disabled: state.busy }, 'Unlock')));
-                }
-                if (needsCode) {
-                    if (!hasShortcut && !entry.hasPassword) {
-                        body.push(h('p', { class: 'wa-small', style: 'margin:0 0 10px' }, seenElsewhere ? 'New to this app.' : 'No passkey set up here yet.', info('Why it is asking for the password', seenElsewhere
-                            ? 'This account’s passkeys belong to the apps that made them — a passkey works on one web address only. Sign in once with your account password and this app can add its own.'
-                            : 'Once you are in, you can add a passkey so this app stops asking.')));
-                    }
-                    body.push(this.#codeForm(state, selected));
+                if (entry.hasPassword)
+                    body.push(this.#passwordForm(state, account));
+                if (hasShortcut || entry.hasPassword) {
+                    body.push(h('div', { class: 'wa-links' }, link('Use my recovery code', () => auth.showRestore(), state.busy)));
                 }
                 else {
-                    body.push(h('div', { class: 'wa-links' }, link('Use my account password instead', () => {
-                        this.#showCode = true;
-                        this.#filledAs = '';
-                        this.#render(auth.getState());
-                    }, state.busy)));
-                }
-                if (this.#showCode && this.#filledAs !== '' && this.#filledAs !== accountCredentialName(account.name)) {
-                    body.push(h('p', { class: 'wa-error', style: 'margin-top:10px' }, 'Your password manager filled ', h('strong', null, this.#filledAs), ', not ', h('strong', null, account.name), '. Pick the entry named ', h('strong', null, account.name), ', or open that account instead.'));
+                    body.push(h('p', { class: 'wa-small', style: 'margin:0 0 10px' }, 'No passkey or password here yet. Use your recovery code once, then choose one.', info('Why it is asking for the recovery code', seenElsewhere
+                        ? 'This account’s passkeys belong to the sites that made them — a passkey works on one web address only. The recovery code opens it anywhere.'
+                        : 'The recovery code opens the account anywhere, with nothing stored. Next you set up a passkey or password so it stops asking.')), ...this.#codeForm(state, selected));
                 }
             }
             return h('div', { class: 'wa-account' }, h('button', {
@@ -347,17 +392,20 @@ export class WeaveAuthElement extends Base {
                 onclick: () => (isSelected ? undefined : void auth.select(account.id)),
             }, avatar(account.did), h('span', { style: 'flex:1;min-width:0' }, h('span', { class: 'wa-account-name' }, account.name), h('span', { class: 'wa-account-did' }, `${account.did.slice(0, 18)}…${account.did.slice(-4)}`))), body.length > 0 ? h('div', { class: 'wa-account-body' }, ...body) : null);
         });
-        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, accounts.length > 0 ? 'Welcome back' : 'Sign in'), h('p', { class: 'wa-subtitle' }, accounts.length > 0 ? 'Choose your account.' : 'Paste the account password you saved when you made it.'), ...rows, accounts.length === 0
-            ? [
-                h('p', { class: 'wa-hint' }, place?.kind === 'folder' ? 'This pod has no accounts yet.' : 'No accounts in this browser yet.', info('Why this works with nothing stored', 'The password is your key written out, not a hint to look something up with — so it opens the account in an app that has never seen you. If your account is in a pod, opening the pod below brings it back without the password.')),
-                this.#codeForm(state, null),
-            ]
-            : null, errorBox(state.error), h('div', { class: 'wa-links' }, link('Create a new account', () => auth.startCreating(), state.busy)), place
+        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Welcome back'), h('p', { class: 'wa-subtitle' }, accounts.length > 0 ? 'Choose your account.' : 'There are no accounts here yet.'), ...rows, errorBox(state.error), h('div', { class: 'wa-links' }, link('Another account', () => auth.showExisting(), state.busy), link('Create a new account', () => auth.startCreating(), state.busy)), place
             ? h('p', { class: 'wa-small', style: 'margin-top:16px' }, place.kind === 'folder' ? `Pod: ${place.directory?.name ?? 'your folder'}` : 'Accounts kept in this browser')
             : null, state.folderAvailable
             ? h('div', { class: 'wa-links' }, link(place?.kind === 'folder' ? 'Open a different pod' : 'Open a pod', () => void auth.choosePod(), state.busy), place?.kind === 'folder' ? link('Use this browser instead', () => void auth.useBrowser(), state.busy) : null)
             : null);
     }
+    /** The recovery code, typed in: on a new device, or when no everyday way in is to hand. */
+    #restore(state) {
+        const auth = this.auth;
+        const selected = state.accounts.find((account) => account.id === state.selectedId) ?? null;
+        // From the account list it restores that account; from "I already have one", any.
+        const forSelected = selected !== null && state.accounts.length > 0 && state.entry !== null;
+        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Use your recovery code'), h('p', { class: 'wa-subtitle' }, forSelected ? `For ${selected.name}. ` : '', 'The 26-character code you kept when you made the account.'), ...this.#codeForm(state, forSelected ? selected : null), errorBox(state.error), h('div', { class: 'wa-links' }, link('Back', () => (state.accounts.length > 0 ? auth.showSignIn() : auth.showExisting()), state.busy)), h('p', { class: 'wa-small', style: 'margin-top:16px' }, "Lost it? If you're signed in on another device, add this one from there instead."));
+    }
     // ─── Making an account ─────────────────────────────────────────────
     #create(state) {
         const auth = this.auth;
@@ -368,40 +416,124 @@ export class WeaveAuthElement extends Base {
             autofocus: true,
             disabled: state.busy,
         });
-        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Create your account'), h('p', { class: 'wa-subtitle' }, 'Your data stays with you, not on a server.'), h('form', {
+        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Create your account'), h('p', { class: 'wa-subtitle' }, 'What should apps call you? You can change it later.'), h('form', {
             class: 'wa-form',
             onsubmit: (event) => {
                 event.preventDefault();
                 if (name.value.trim())
                     void auth.createAccount(name.value.trim());
             },
-        }, name, h('button', { type: 'submit', class: 'wa-button', disabled: state.busy }, state.busy ? 'Creating…' : 'Create account')), h('div', { class: 'wa-links' }, link('I already have an account', () => auth.showSignIn(), state.busy)), h('p', { class: 'wa-small' }, "We'll generate a strong password and show it once.", info('What happens next', 'Save it in your password manager. It opens your account in any Weave app, even one that has never seen you — and nobody can reissue it.')), errorBox(state.error));
+        }, name, h('button', { type: 'submit', class: 'wa-button', disabled: state.busy }, state.busy ? 'Creating…' : 'Continue')), h('p', { class: 'wa-small' }, "Next: a recovery code to keep safe, then a passkey or password for signing in."), errorBox(state.error), h('div', { class: 'wa-links' }, link('I already have an account', () => auth.showExisting(), state.busy)), this.#podLine(state));
     }
     /**
-     * The new account's password, shown once.
+     * The recovery code, to keep.
      *
-     * Framed as a password because that is what it is for: your password
-     * manager saves it here and fills it in on the next app. A real form with
-     * both fields is what makes a manager offer to save.
+     * Deliberately not a password form: saved as this site's login, a manager
+     * would later offer it in the everyday password field — and replace it with
+     * that password when one is set, losing the only copy. So it is copied or
+     * downloaded, and kept as a note or on paper.
      */
-    #saveCode(state, code) {
+    #recovery(state) {
         const auth = this.auth;
-        const filedAs = accountCredentialName(state.session?.account.name ?? 'My account');
-        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Save your password'), h('p', { class: 'wa-hint' }, 'Save this to your password manager now — it will fill itself in from then on.', info('About this password', 'It is generated rather than chosen, and it ', h('em', null, 'is'), ' your key rather than a backup of it. That is what lets it work on an app that has never seen you, with nothing stored anywhere. It is shown once and nobody can reissue it.')), h('form', {
-            class: 'wa-form',
-            onsubmit: (event) => {
-                event.preventDefault();
-                void offerToSave(filedAs, code, filedAs).then(() => auth.codeSaved());
+        const code = state.freshCode ?? '';
+        const account = state.session?.account;
+        const restored = state.setup === 'restored';
+        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, restored ? 'Keep your recovery code safe' : 'Your recovery code'), h('p', { class: 'wa-hint' }, restored
+            ? 'You just used it. From now on a passkey or password signs you in here — keep this code for new devices and emergencies.'
+            : 'This code is your account. With it you can restore your account on any device, even if you lose everything else.', info('Why it matters', 'Nobody can reissue it: there is no server that knows your account. Anyone who has it can open your account, so keep it private. ', 'Save it as a secure note in your password manager, or print it and put it away — not as a login for this site, where a new password could replace it.')), h('code', { class: 'wa-code wa-code-large' }, code), h('div', { class: 'wa-row' }, h('button', {
+            type: 'button',
+            class: 'wa-secondary',
+            onclick: () => {
+                void globalThis.navigator.clipboard
+                    ?.writeText(code)
+                    .then(() => {
+                    this.#copied = true;
+                    this.#redraw();
+                })
+                    .catch(() => { });
             },
-        }, h('input', { type: 'text', name: 'username', autocomplete: 'username', value: filedAs, readonly: true, 'aria-label': 'Account name' }), h('input', { type: 'password', name: 'password', autocomplete: 'new-password', value: code, readonly: true, 'aria-label': 'Account password' }), h('button', { type: 'submit', class: 'wa-button' }, "I've saved it — continue")), h('code', { class: 'wa-code' }, code), h('div', { class: 'wa-links' }, link(this.#copied ? 'Copied' : 'Copy', () => {
-            void globalThis.navigator.clipboard
-                ?.writeText(code)
-                .then(() => {
-                this.#copied = true;
-                this.#render(auth.getState());
-            })
-                .catch(() => { });
-        })), h('p', { class: 'wa-small' }, 'It is the only way into this account from an app that has never seen it. Nobody can reissue it, and it is stored nowhere but where you put it. On this device you can add a passkey afterwards, so you will rarely need it again.'));
+        }, this.#copied ? 'Copied' : 'Copy'), h('button', {
+            type: 'button',
+            class: 'wa-secondary',
+            onclick: () => download(recoveryKit({ code, name: account?.name ?? 'My account', did: state.session?.did ?? '' })),
+        }, 'Download')), h('label', { class: 'wa-check' }, h('input', {
+            type: 'checkbox',
+            checked: this.#stored,
+            onchange: (event) => {
+                this.#stored = event.target.checked;
+                this.#redraw();
+            },
+        }), h('span', null, "I've stored my recovery code somewhere safe.")), h('button', { type: 'button', class: 'wa-button', disabled: !this.#stored, onclick: () => auth.codeSaved() }, 'Continue'));
+    }
+    /**
+     * How this account is opened every day. Not skippable: without one, every
+     * visit asks for the recovery code, and it ends up being used as a password
+     * after all.
+     */
+    #unlock(state) {
+        const auth = this.auth;
+        const account = state.session?.account;
+        const passkeys = typeof globalThis.PublicKeyCredential !== 'undefined';
+        const choosing = this.#choosingPassword || !passkeys;
+        const form = () => {
+            const password = this.#input('new-password', {
+                type: 'password',
+                name: 'password',
+                placeholder: 'Password',
+                autocomplete: 'new-password',
+                autofocus: true,
+                minlength: String(MIN_PASSWORD_LENGTH),
+                'aria-label': 'Password',
+                disabled: state.busy,
+            });
+            const confirm = this.#input('confirm-password', {
+                type: 'password',
+                name: 'confirm-password',
+                placeholder: 'The same again',
+                autocomplete: 'new-password',
+                'aria-label': 'Confirm password',
+                disabled: state.busy,
+            });
+            return h('form', {
+                class: 'wa-form',
+                style: passkeys ? 'margin-top:12px' : '',
+                onsubmit: (event) => {
+                    event.preventDefault();
+                    this.#mismatch = password.value !== confirm.value;
+                    if (this.#mismatch) {
+                        this.#redraw();
+                        return;
+                    }
+                    const chosen = password.value;
+                    const filedAs = accountCredentialName(account?.name ?? 'My account');
+                    void auth.setPassword(chosen).then((ok) => (ok ? offerToSave(filedAs, chosen, filedAs) : false));
+                },
+            }, 
+            // A visible username is what makes a manager file the password under the account's name.
+            h('input', {
+                type: 'text',
+                name: 'username',
+                autocomplete: 'username',
+                value: accountCredentialName(account?.name ?? 'My account'),
+                readonly: true,
+                'aria-label': 'Account',
+            }), password, confirm, this.#mismatch ? h('p', { class: 'wa-error' }, 'Those two do not match.') : null, h('button', { type: 'submit', class: 'wa-button', disabled: state.busy }, state.busy ? 'Saving…' : 'Use this password'), h('p', { class: 'wa-small', style: 'margin-top:0' }, `At least ${MIN_PASSWORD_LENGTH} characters. Let your password manager make one.`));
+        };
+        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'How do you want to sign in?'), h('p', { class: 'wa-subtitle' }, 'This is what you will use every day.', info('Where it works', 'A passkey signs you in on this site, in this browser. A password works wherever your account is kept — this browser, or your pod in any app pointed at it. On a new device, add it from this one or use your recovery code.')), h('div', { class: 'wa-options' }, passkeys
+            ? option('Passkey', 'Touch ID, Windows Hello, or your password manager. Nothing to type.', () => void auth.addPasskey(), state.busy, true)
+            : null, passkeys && !choosing
+            ? option('Password', 'Saved in your password manager, like any other login.', () => {
+                this.#choosingPassword = true;
+                this.#redraw();
+            }, state.busy)
+            : null), choosing ? form() : null, state.setup === 'paired' && state.pairingStage
+            ? h('p', { class: state.pairingStage.kind === 'failed' ? 'wa-error' : 'wa-small', style: 'margin-top:16px' }, describePairing(state.pairingStage))
+            : null, errorBox(state.error));
+    }
+    /** Offered once, at the end of making an account in a browser that can open a folder. */
+    #pod(state) {
+        const auth = this.auth;
+        return h('div', { class: 'wa-card' }, wordmark(), h('h1', { class: 'wa-title' }, 'Keep your data in a folder?'), h('p', { class: 'wa-hint' }, 'A pod is a folder on your computer that holds your account and spaces. Back it up, or put it in iCloud or Dropbox. Any Weave app you point at it opens the same account.'), h('div', { class: 'wa-options' }, option('Choose a folder', 'Your browser will ask to see it, then to save into it.', () => void auth.choosePod(), state.busy)), errorBox(state.error), h('div', { class: 'wa-links' }, link('Not now — keep it in this browser', () => auth.finishSetup(), state.busy)), h('p', { class: 'wa-small' }, 'You can move it to a pod any time from your account page.'));
     }
     // ─── Arriving from a phone-pairing QR code ─────────────────────────
     /**