@synqauth/react 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 
-import { InputHTMLAttributes, ReactNode } from "react";
-import { AccountComponents, ChallengeMethod, ChallengeProblem, DeniedReason, RedirectReason, SynqError } from "@synqauth/js";
+import { CSSProperties, InputHTMLAttributes, KeyboardEvent, MouseEvent, PointerEvent, ReactNode, RefObject } from "react";
+import { AccountComponents, AvatarInfo, AvatarPerson, ChallengeMethod, ChallengeProblem, DeniedReason, RedirectReason, SignInMethodInfo, SynqError } from "@synqauth/js";
 //#region src/sign-in.d.ts
 /** Where a sign-in is: what the form shows. */
 type SignInStep = 'start' | 'code' | 'verify-email' | 'done';
@@ -94,6 +94,232 @@ interface UseSignIn {
 /** One sign-in on the app's own screens, through the route mount's `sign-in/flow`. */
 export declare function useSignIn(options?: UseSignInOptions): UseSignIn;
 //#endregion
+//#region src/types.d.ts
+/** A call's outcome: its data, or the `SynqError` it failed with (branch on `error.code`). */
+type SynqResult<T> = {
+  readonly data: T;
+  readonly error: null;
+} | {
+  readonly data: null;
+  readonly error: SynqError;
+};
+/** A signed-in person, from the ID token Synq issued at sign-in. */
+interface SynqUser {
+  /** The user's id at the brand (`usr_…`). */
+  readonly sub: string;
+  readonly email?: string;
+  readonly email_verified?: boolean;
+  readonly name?: string;
+  readonly preferred_username?: string;
+  /** The picture they chose: none, and your app shows its own default, from `avatar_seed`. */
+  readonly picture?: string;
+  /**
+   * Where `picture` came from (AERO-2700): `none`, `upload`, `url` or
+   * `linked:<provider>`. Absent from a token issued before Synq said.
+   */
+  readonly picture_source?: string;
+  /**
+   * What to draw their default avatar from (AERO-2704): theirs in every app
+   * of the brand, for as long as the account lasts. Absent from a token
+   * issued before seeds, where `sub` stands in (`useAvatar`).
+   */
+  readonly avatar_seed?: string;
+  /** The brand's own default avatar for them, where it uploaded a set. */
+  readonly default_picture?: string;
+  /** When they signed in, in seconds since the epoch. */
+  readonly auth_time?: number;
+  /** How they signed in: `pwd`, `otp`, `wallet`, `hwk`, `fed`... */
+  readonly amr?: readonly string[];
+  /**
+   * The way in of the sign-in this session came from, when the app turned
+   * its sign-in claims on (`sign_in_claims`, AERO-2691): `google`, `wallet`,
+   * `email`, `password`, `passkey`…
+   */
+  readonly sign_in_method?: string;
+  /** For a wallet sign-in, the address that signed and the wallet app's name, when it said. */
+  readonly sign_in_wallet?: {
+    readonly address: string;
+    readonly app: string | null;
+  };
+  /** Whether that sign-in made the account: true in its first ID token only. */
+  readonly new_user?: boolean;
+  readonly [claim: string]: unknown;
+}
+/** The way this browser last signed in to the app (AERO-2691): never who, never an address. */
+interface LastUsedMethod {
+  /** The method's id: one of `SignInMethods`, or one Synq adds later. */
+  readonly method: SignInMethod | (string & Record<never, never>);
+  /** For a wallet, the wallet app's name as it announced itself (`Phantom`). */
+  readonly walletApp?: string;
+}
+/** A sign-in that just finished (AERO-2691): what `useSignInEvent()` tells the page once. */
+interface SignInEvent {
+  /** This sign-in's own id: two sign-ins the same way can share `at`, never this. */
+  readonly id: string;
+  /** Whether it made the account: their first sign-in. */
+  readonly isNewUser: boolean;
+  /** The way in: one of `SignInMethods`, or one Synq adds later. */
+  readonly method: SignInMethod | (string & Record<never, never>);
+  /** For a wallet sign-in, the address that signed and its wallet app, when it said. */
+  readonly wallet: {
+    readonly address: string;
+    readonly app: string | null;
+  } | null;
+  /** When they signed in, in seconds since the epoch. */
+  readonly at: number;
+}
+/** Who is signed in, as the app's server tells the browser: `await synq.getSession()`, or the route mount's `session`. */
+interface SynqSessionInfo {
+  readonly user: SynqUser | null;
+  /** When the session's main access token expires, in seconds since the epoch. */
+  readonly expiresAt: number | null;
+  /**
+   * The way this browser last signed in to the app, signed in or out, from
+   * the app's sign-in claims (AERO-2691). Absent from a mount that doesn't
+   * keep it.
+   */
+  readonly lastUsed?: LastUsedMethod | null;
+  /** The sign-in that just finished, until the page hears of it (AERO-2691). */
+  readonly event?: SignInEvent | null;
+}
+/**
+ * What the brand keeps for the person (the account API's `metadata`).
+ * Augment it to type what the app reads:
+ *
+ * ```ts
+ * declare module '@synqauth/react' {
+ *   interface UserMetadata {
+ *     plan?: 'free' | 'pro'
+ *   }
+ * }
+ * ```
+ */
+interface UserMetadata {
+  readonly [field: string]: unknown;
+}
+/**
+ * The ways a brand signs people in, as `synq_method` names them: the hosted
+ * page goes straight to one. A brand's own connection joins them the same way:
+ *
+ * ```ts
+ * declare module '@synqauth/react' {
+ *   interface SignInMethods {
+ *     okta: true
+ *   }
+ * }
+ * ```
+ */
+interface SignInMethods {
+  readonly password: true;
+  readonly email: true;
+  readonly passkey: true;
+  readonly wallet: true;
+  readonly google: true;
+  readonly github: true;
+  readonly microsoft: true;
+  readonly apple: true;
+  readonly facebook: true;
+  readonly x: true;
+  readonly discord: true;
+  readonly telegram: true;
+  readonly matrica: true;
+}
+/** One of the brand's sign-in methods. */
+type SignInMethod = Extract<keyof SignInMethods, string>;
+/** How to send the person to sign in. */
+interface SignInOptions {
+  /** Where to come back to: a path on the app, the current page by default. */
+  readonly returnTo?: string;
+  /** Go straight to one sign-in method. */
+  readonly method?: SignInMethod;
+  /** Fills in their email address. */
+  readonly loginHint?: string;
+  /** `create` opens the hosted page on its sign-up screen. */
+  readonly prompt?: 'login' | 'none' | 'consent' | 'select_account' | 'create';
+  /** Ask them to sign in again when their last sign-in is older than this many seconds. */
+  readonly maxAge?: number;
+  /** Offer a new passkey once they've signed in again. */
+  readonly intent?: 'add-passkey';
+}
+/** The person's profile at the brand. */
+type Profile = AccountComponents['schemas']['Profile'];
+/** Changes to it: only the fields given change, and `null` clears one. */
+type ProfileUpdate = AccountComponents['schemas']['ProfileUpdate'];
+/** A Solana wallet the person signs in with. */
+type Wallet = AccountComponents['schemas']['Wallet'];
+/** A way the person signs in: their email address, a wallet, a Google account... */
+type LinkedAccount = AccountComponents['schemas']['Identity'];
+/** One of the person's passkeys: `synced` when it lives in a password manager across their devices. */
+type Passkey = AccountComponents['schemas']['Passkey'];
+/** One of the person's sessions at the brand, on some device. */
+type AccountSession = AccountComponents['schemas']['Session'];
+/** One of the person's API keys for the brand's APIs (AERO-1693): never the key itself. */
+type ApiKey = AccountComponents['schemas']['UserApiKey'];
+/** A key just made: `key` is the key itself, in this answer only. */
+type NewApiKey = AccountComponents['schemas']['NewUserApiKey'];
+/** What making an API key takes: the API's identifier, a name, its scopes, an expiry if any. */
+type ApiKeyInput = AccountComponents['schemas']['UserApiKeyCreate'];
+/** One of the brand's APIs the person may make keys for, with the scopes it defines. */
+type KeyableApi = AccountComponents['schemas']['KeyableApi'];
+/** A way to sign in the person can add (AERO-2080): what `useAuth().link` takes, with its name. */
+type LinkableMethod = AccountComponents['schemas']['LinkableMethod'];
+/** How `signOut` signs the person out. */
+interface SignOutOptions {
+  /**
+   * Stay on the page (AERO-2684): the app's server ends the brand's session
+   * itself and the browser goes nowhere. For an app whose server holds a
+   * secret (`@synqauth/nextjs` does). By default the browser goes to the
+   * brand's sign-out page, which asks first.
+   */
+  readonly stay?: boolean;
+}
+//#endregion
+//#region src/username.d.ts
+/** Where the draft stands: nothing typed, being checked, free, taken, not a username, or theirs already. */
+type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'format' | 'same';
+/** What to say of the draft: its status, or for `format` which rule it breaks. */
+type UsernameCode = 'same' | 'available' | 'taken' |
+/** Fewer than 3 characters. */
+'too_short' |
+/** More than 64. */
+'too_long' |
+/** Something other than a letter, digit, `.`, `_` or `-`. */
+'characters' |
+/** Starting or ending with `.`, `_` or `-`. */
+'edges';
+/** A username the brand takes: 3 to 64 of `a-z 0-9 . _ -`, starting and ending with a letter or digit. */
+export declare const USERNAME_FORMAT: RegExp;
+/** The draft as the brand keeps usernames: no spaces around it, no leading at sign, lowercase. */
+export declare function normalizeUsername(value: string): string;
+/** Which format rule `username` breaks, or null when it is one. */
+export declare function usernameFormatCode(username: string): Extract<UsernameCode, 'too_short' | 'too_long' | 'characters' | 'edges'> | null;
+/** What `useUsernameField()` answers. */
+interface UseUsernameField {
+  /** The username being typed, as the brand would keep it; their own until they type. */
+  readonly draft: string;
+  /** Takes what they typed (or a suggestion they tapped), and checks it again. */
+  readonly setDraft: (value: string) => void;
+  readonly status: UsernameStatus;
+  /** What to say of it, by code: `messages.usernameCodes` has the words. */
+  readonly code: UsernameCode | null;
+  /** That, in the provider's words (`<SynqProvider messages>`), or null when there is nothing to say. */
+  readonly message: string | null;
+  /** When it is taken: up to three free ones like it, from the brand, to offer. */
+  readonly suggestions: readonly string[];
+  /**
+   * Makes the draft their username. `same` answers the profile as it is; a
+   * draft that isn't a username answers `invalid_username`; one taken since
+   * the check answers `username_taken`, and the field shows it with its
+   * suggestions.
+   */
+  readonly save: () => Promise<SynqResult<Profile>>;
+  readonly saving: boolean;
+  /** Why the last check or save failed outright (the network, say). */
+  readonly error: SynqError | null;
+}
+/** A username field for the signed-in person (AERO-2693): live availability, suggestions and saving. */
+export declare function useUsernameField(): UseUsernameField;
+//#endregion
 //#region src/messages.d.ts
 /** Every word the components show, for `<SynqProvider messages>`; any left out stay English. */
 interface SynqMessages {
@@ -111,6 +337,14 @@ interface SynqMessages {
   readonly name: string;
   readonly username: string;
   readonly waysToSignIn: string;
+  /** Choosing their picture (AERO-2700): uploading one. */
+  readonly uploadPicture: string;
+  readonly uploadingPicture: string;
+  /** Using a linked account's picture: "Use my Google picture". */
+  readonly usePictureFrom: (provider: string) => string;
+  /** The same, for one of two or more accounts at a provider: "Use my GitHub picture (@ana)". */
+  readonly usePictureFromAccount: (provider: string, account: string) => string;
+  readonly removePicture: string;
   readonly remove: string;
   /** The label of the button that stops a way signing them in. */
   readonly removeAccount: (provider: string, subject: string) => string;
@@ -193,111 +427,148 @@ interface SynqMessages {
   readonly signInProblems: Readonly<Partial<Record<SignInProblem['code'], string>>>;
   /** Why this person can't sign in here, by `SignInProblem.reason`. */
   readonly signInRefusals: Readonly<Partial<Record<DeniedReason, string>>>;
+  /** The button that adds a wallet: Synq asks them to sign in again, then for the wallet. */
+  readonly connectWallet: string;
+  /**
+   * The mark on a way to sign in they proved is theirs: every wallet (by a
+   * signature) and provider account, and their email address once verified.
+   */
+  readonly verified: string;
+  /** When a wallet or a way to sign in was added. */
+  readonly connectedOn: (date: string) => string;
+  readonly copyAddress: (address: string) => string;
+  readonly removeWallet: (name: string) => string;
+  /** The question before a wallet goes. */
+  readonly removeWalletTitle: string;
+  readonly removeWalletBody: string;
+  /** The question before a way to sign in goes. */
+  readonly removeAccountTitle: string;
+  readonly removeAccountBody: string;
+  /** The heading over the ways they could add. */
+  readonly addWayToSignIn: string;
+  /** Under that heading: adding one asks them to sign in again first. */
+  readonly signInAgainToAdd: string;
+  /** The label of the button that adds a way to sign in. */
+  readonly linkMethod: (provider: string) => string;
+  readonly connect: string;
+  readonly passkeys: string;
+  /** What passkeys are for, under the heading. */
+  readonly passkeysHint: string;
+  readonly noPasskeys: string;
+  readonly addPasskey: string;
+  /** A passkey's name: when it was made. */
+  readonly passkeyMade: (date: string) => string;
+  /** The mark on a passkey that a password manager keeps on all their devices. */
+  readonly synced: string;
+  readonly removePasskey: (name: string) => string;
+  readonly deleteAccount: string;
+  /**
+   * What deleting the account does, beside the button and in the question
+   * before it. It promises no way back: asking signs them out everywhere,
+   * and unless the brand lets a sign-in cancel it, they can't sign in again.
+   */
+  readonly deleteAccountBody: string;
+  /** The word they type to confirm the deletion. */
+  readonly deleteConfirmWord: string;
+  readonly typeToConfirm: (word: string) => string;
+  readonly deletionScheduled: (date: string) => string;
+  readonly keepAccount: string;
+  /** Why a change needs them to sign in again: their last sign-in isn't recent enough. */
+  readonly freshSignInNeeded: string;
+  /** What `useUsernameField()` says of the draft, by its `code` (AERO-2693). */
+  readonly usernameCodes: Readonly<Record<UsernameCode, (username: string) => string>>;
+  /** `<AccountPanel>` (AERO-2696): the trigger's label once signed in, with their first name when known. */
+  readonly yourProfile: (name: string | null) => string;
+  readonly close: string;
+  readonly back: string;
+  /** A way to sign in, on its button: "Continue with Google". */
+  readonly continueWith: (method: string) => string;
+  /** The wallet method with nothing connected. */
+  readonly continueWithWallet: string;
+  /** Under the connected wallet's button: what signing in with it takes. */
+  readonly walletSignInHint: string;
+  readonly useAnotherWallet: string;
+  readonly pickWallet: string;
+  /** Under a wallet in the picker. */
+  readonly walletDetected: string;
+  readonly noWalletHere: string;
+  /** Signing in on the brand's hosted page instead, where only it can. */
+  readonly useSignInPage: string;
+  readonly moreOptions: string;
+  readonly fewerOptions: string;
+  /** The mark on the way this browser last signed in. */
+  readonly lastUsedMethod: string;
+  /** Where a provider's sign-in can't run: another app's built-in browser. */
+  readonly openInBrowser: (method: string) => string;
+  /** A sign-in under way: a wallet's prompt, a popup, a redirect, a passkey. */
+  readonly approveIn: (walletApp: string | null) => string;
+  readonly finishInWindow: (method: string) => string;
+  readonly opening: (method: string) => string;
+  readonly usePasskeyNow: string;
+  readonly signingYouIn: string;
+  /** A sign-in that couldn't reach the app's server or Synq. */
+  readonly signInOffline: string;
+  readonly signInFailed: string;
+  readonly tryAgain: string;
+  readonly securedBy: string;
+  /** A first sign-in's greeting, with their first name when known. */
+  readonly youreIn: (name: string | null) => string;
+  readonly makeItYours: string;
+  /** A returning sign-in's greeting. */
+  readonly goodToSeeYou: (name: string | null) => string;
+  /** How they signed in: "Signed in with Google", "Signed in with 7xKX…3fQ". */
+  readonly signedInWith: (way: string) => string;
+  readonly viewProfile: string;
+  readonly edit: string;
+  readonly changePicture: string;
+  readonly yourPicture: string;
+  /** Beside the large avatar on the picture screen. */
+  readonly pictureHint: string;
+  /** The app's own default, drawn for them. */
+  readonly defaultPicture: string;
+  readonly defaultPictureHint: string;
+  readonly uploadPhoto: string;
+  readonly uploadAnotherPhoto: string;
+  readonly pictureTypes: string;
+  readonly uploadedPicture: string;
+  /** A linked account's picture: "Your Google picture". */
+  readonly pictureFrom: (provider: string) => string;
+  /** The mark on the picture showing now. */
+  readonly showing: string;
+  readonly accountSettings: string;
+  readonly signOutFailed: string;
+  readonly usernamePlaceholder: string;
+  readonly checking: string;
+  /** The connected wallet, when it isn't on their profile. */
+  readonly walletNotOnProfile: (address: string) => string;
+  readonly add: string;
+  readonly connected: string;
+  readonly signedInWithThis: string;
+  readonly addWallet: string;
+  /** Under a wallet in the add picker. */
+  readonly connectAndAdd: string;
+  readonly walletOptions: (name: string) => string;
+  readonly copyAddressShort: string;
+  readonly removeFromProfile: string;
+  readonly removeWalletQuestion: (name: string) => string;
+  readonly keep: string;
+  readonly confirmItsYou: string;
+  readonly onlyWayIn: string;
+  readonly walletInUse: string;
+  readonly moveHere: string;
+  readonly linked: string;
+  readonly link: string;
+  readonly notLinked: string;
+  /** The session ended while the panel was open, and not by its Sign out. */
+  readonly signedOutAgain: string;
+  /** Confirming it's them, they signed in as someone else, who is never let in. */
+  readonly notYourAccount: string;
+  /** A change that wants a recent sign-in, before "Confirm it's you". */
+  readonly confirmToGoOn: string;
 }
 /** The components' English words, which an app's own messages override one by one. */
 export declare const DEFAULT_MESSAGES: SynqMessages;
 //#endregion
-//#region src/types.d.ts
-/** A call's outcome: its data, or the `SynqError` it failed with (branch on `error.code`). */
-type SynqResult<T> = {
-  readonly data: T;
-  readonly error: null;
-} | {
-  readonly data: null;
-  readonly error: SynqError;
-};
-/** A signed-in person, from the ID token Synq issued at sign-in. */
-interface SynqUser {
-  /** The user's id at the brand (`usr_…`). */
-  readonly sub: string;
-  readonly email?: string;
-  readonly email_verified?: boolean;
-  readonly name?: string;
-  readonly preferred_username?: string;
-  readonly picture?: string;
-  /** When they signed in, in seconds since the epoch. */
-  readonly auth_time?: number;
-  /** How they signed in: `pwd`, `otp`, `wallet`, `hwk`, `fed`... */
-  readonly amr?: readonly string[];
-  readonly [claim: string]: unknown;
-}
-/** Who is signed in, as the app's server tells the browser: `await synq.getSession()`, or the route mount's `session`. */
-interface SynqSessionInfo {
-  readonly user: SynqUser | null;
-  /** When the session's main access token expires, in seconds since the epoch. */
-  readonly expiresAt: number | null;
-}
-/**
- * What the brand keeps for the person (the account API's `metadata`).
- * Augment it to type what the app reads:
- *
- * ```ts
- * declare module '@synqauth/react' {
- *   interface UserMetadata {
- *     plan?: 'free' | 'pro'
- *   }
- * }
- * ```
- */
-interface UserMetadata {
-  readonly [field: string]: unknown;
-}
-/**
- * The ways a brand signs people in, as `synq_method` names them: the hosted
- * page goes straight to one. A brand's own connection joins them the same way:
- *
- * ```ts
- * declare module '@synqauth/react' {
- *   interface SignInMethods {
- *     okta: true
- *   }
- * }
- * ```
- */
-interface SignInMethods {
-  readonly password: true;
-  readonly email: true;
-  readonly passkey: true;
-  readonly wallet: true;
-  readonly google: true;
-  readonly microsoft: true;
-  readonly discord: true;
-}
-/** One of the brand's sign-in methods. */
-type SignInMethod = Extract<keyof SignInMethods, string>;
-/** How to send the person to sign in. */
-interface SignInOptions {
-  /** Where to come back to: a path on the app, the current page by default. */
-  readonly returnTo?: string;
-  /** Go straight to one sign-in method. */
-  readonly method?: SignInMethod;
-  /** Fills in their email address. */
-  readonly loginHint?: string;
-  readonly prompt?: 'login' | 'none' | 'consent' | 'select_account';
-  /** Ask them to sign in again when their last sign-in is older than this many seconds. */
-  readonly maxAge?: number;
-  /** Offer a new passkey once they've signed in again. */
-  readonly intent?: 'add-passkey';
-}
-/** The person's profile at the brand. */
-type Profile = AccountComponents['schemas']['Profile'];
-/** Changes to it: only the fields given change, and `null` clears one. */
-type ProfileUpdate = AccountComponents['schemas']['ProfileUpdate'];
-/** A Solana wallet the person signs in with. */
-type Wallet = AccountComponents['schemas']['Wallet'];
-/** A way the person signs in: their email address, a wallet, a Google account... */
-type LinkedAccount = AccountComponents['schemas']['Identity'];
-/** One of the person's sessions at the brand, on some device. */
-type AccountSession = AccountComponents['schemas']['Session'];
-/** One of the person's API keys for the brand's APIs (AERO-1693): never the key itself. */
-type ApiKey = AccountComponents['schemas']['UserApiKey'];
-/** A key just made: `key` is the key itself, in this answer only. */
-type NewApiKey = AccountComponents['schemas']['NewUserApiKey'];
-/** What making an API key takes: the API's identifier, a name, its scopes, an expiry if any. */
-type ApiKeyInput = AccountComponents['schemas']['UserApiKeyCreate'];
-/** One of the brand's APIs the person may make keys for, with the scopes it defines. */
-type KeyableApi = AccountComponents['schemas']['KeyableApi'];
-//#endregion
 //#region src/mount.d.ts
 /** Calls the app's route mount: `request('session')`, `request('account/v1/profile', { method: 'PATCH', ... })`. */
 type SynqMountRequest = (path: string, init?: RequestInit) => Promise<Response>;
@@ -311,10 +582,90 @@ interface SynqClientPlugin<Id extends string = string, Actions = unknown> {
   actions(request: SynqMountRequest): Actions;
 }
 //#endregion
+//#region src/redirect.d.ts
+/** What left the page: a sign-in, a link, or signing the person in again. */
+type RedirectKind = 'sign-in' | 'link' | 'reauthenticate';
+/** The outcome of a sign-in or link that left the page, once the app is back on it. */
+interface RedirectResult {
+  /**
+   * What left the page: `sign-in` (`useAuth().signIn`), `link` (`useLink`,
+   * `useAuth().link`) or `reauthenticate` (`useAuth().reauthenticate`).
+   */
+  readonly kind: RedirectKind;
+  /** The method it went for, if one was named. */
+  readonly method: SignInMethod | null;
+  /** What the app asked to keep (`keep`), as it gave it. */
+  readonly kept: unknown;
+  /** Why it didn't finish, as the app's callback said (`synq_error`), or null. */
+  readonly error: SynqError | null;
+  /** A link's: the ways in the person had before it. */
+  readonly before: readonly string[] | null;
+}
+//#endregion
 //#region src/store.d.ts
 /** `error` when the app couldn't be asked who is signed in, and nothing is known yet: the provider asks again, waiting longer each time. */
 type SessionStatus = 'loading' | 'signed-in' | 'signed-out' | 'error';
 //#endregion
+//#region src/components/styling.d.ts
+/** What every component takes for its look: Synq's classes, or `unstyled`. */
+interface SynqStyleProps {
+  /** The same elements, roles and labels, with none of Synq's classes: the app styles them. */
+  readonly unstyled?: boolean;
+  /** Added to the component's outer element. */
+  readonly className?: string;
+}
+//#endregion
+//#region src/components/Avatar.d.ts
+/**
+ * Where a picture came from, as `sources` names it: `linked` is any linked
+ * account's. A token says `linked:<provider>` only with the
+ * `linked_accounts` scope, and `linked` without it; the profile always does.
+ */
+type AvatarSource = 'upload' | 'url' | 'linked' | `linked:${string}`;
+/**
+ * What shows for someone with no picture to show: Synq's `aura` (the
+ * default) or `monogram`, or the app's own, from the person's seed: an
+ * image's URL, or an element. Nothing (null) goes on to the brand's default.
+ */
+type AvatarFallback = 'aura' | 'monogram' | ((seed: string, user: AvatarPerson) => ReactNode | string);
+/** How an app draws avatars: once for the app (`SynqProvider avatar`), or per component. */
+interface AvatarSettings {
+  /** What shows for someone with no picture to show: `aura` by default. */
+  readonly fallback?: AvatarFallback;
+  /**
+   * The pictures that show, by where they came from: all of them by
+   * default. `['upload']` shows only pictures people uploaded here, and the
+   * app's own art over their linked accounts' pictures.
+   */
+  readonly sources?: readonly AvatarSource[];
+}
+/** What `useAvatar()` answers: what an avatar is drawn from (`avatarOf` in @synqauth/js). */
+type UseAvatar = AvatarInfo;
+/**
+ * What the avatar of `user` is drawn from: the signed-in person by default,
+ * with their profile's picture once the account API was read, so a picture
+ * they just chose shows at once. `user` is anyone as Synq names them: an ID
+ * token's claims, or the management API's user (`id`, `username`).
+ */
+export declare function useAvatar(user?: AvatarPerson | null): UseAvatar | null;
+/** What `Avatar` takes: whose, how large, and how it falls back. */
+interface AvatarProps extends SynqStyleProps, AvatarSettings {
+  /** Whose: the signed-in person by default, or anyone as Synq names them (`useAvatar`). */
+  readonly user?: AvatarPerson | null;
+  /**
+   * Its width and height in pixels: 32 by default. Styled, it sets
+   * `--synq-avatar-size`, which Synq's stylesheet sizes it by; your own CSS
+   * still wins.
+   */
+  readonly size?: number;
+}
+/**
+ * A person's avatar: their picture, or the app's default for them. Drawn
+ * for the eye alone (`alt=""`, `aria-hidden`): their name beside it says
+ * who it is. Nothing while there is nobody.
+ */
+export declare function Avatar({ user, size, fallback, sources, unstyled, className }: AvatarProps): ReactNode;
+//#endregion
 //#region src/provider.d.ts
 /** What `SynqProvider` takes: the server's session, the route mount, the words and the plugins. */
 interface SynqProviderProps {
@@ -339,13 +690,56 @@ interface SynqProviderProps {
   readonly navigate?: (url: string) => void;
   /** The components' words, in the app's language: any left out are English. */
   readonly messages?: Partial<SynqMessages>;
+  /**
+   * How the app draws avatars (AERO-2704), once for every component: its
+   * own default for someone with no picture (`fallback`, from their seed),
+   * and which pictures show (`sources`). A component's `avatar` overrides it.
+   */
+  readonly avatar?: AvatarSettings;
   readonly children?: ReactNode;
 }
 /** Synq for the components under it. Its route mount and `fetch` are read once, when it mounts. */
-export declare function SynqProvider({ initialSession, basePath, plugins, fetch: fetcher, navigate, messages, children }: SynqProviderProps): ReactNode;
+export declare function SynqProvider({ initialSession, basePath, plugins, fetch: fetcher, navigate, messages, avatar, children }: SynqProviderProps): ReactNode;
 /** A browser plugin's actions, typed by the plugin, which must be one of the provider's `plugins`. */
 export declare function usePlugin<Actions>(plugin: SynqClientPlugin<string, Actions>): Actions;
 //#endregion
+//#region src/popup.d.ts
+/** How a provider's sign-in or link opens: `auto` is a popup where one fits, a redirect elsewhere. */
+type SignInDisplay = 'auto' | 'popup' | 'redirect';
+//#endregion
+//#region src/handoff.d.ts
+/** How a sign-in or a link opens, and the app's own state to have back afterwards. */
+interface HandoffOptions {
+  /**
+   * `redirect` leaves the page and comes back to `returnTo`; `popup` opens
+   * one over it, and the page carries on once the person finishes there;
+   * `auto` is a popup where one fits (a fine pointer, from 640px wide, a
+   * real browser), else a redirect. A popup the browser blocks becomes a
+   * redirect by itself.
+   */
+  readonly display?: SignInDisplay;
+  /**
+   * Small state of the app's own (at most 4 KB of JSON), kept in this tab
+   * across a redirect and handed back by `useRedirectResult().kept`, or by
+   * the call's own answer after a popup: the screen the person was on, say.
+   */
+  readonly keep?: unknown;
+}
+/** A sign-in that finished on this page, in a popup. */
+interface SignInDone {
+  /** The method it went straight to, if one was named. */
+  readonly method: SignInMethod | null;
+  /** What the app asked to keep (`keep`), as it gave it. */
+  readonly kept: unknown;
+}
+/** What `useAuth().reauthenticate()` takes: the way to sign in again with, and how it opens. */
+interface ReauthenticateOptions extends HandoffOptions {
+  /** The way to sign in again with (`google`, `x`…): the brand's page shows them all without it. */
+  readonly method?: SignInMethod;
+  /** Where a redirect comes back to: this page by default. */
+  readonly returnTo?: string;
+}
+//#endregion
 //#region src/hooks.d.ts
 /** What `useSession()` answers: who is signed in, and whether the app said yet. */
 interface UseSession {
@@ -363,7 +757,7 @@ interface UseSession {
 }
 /** Who is signed in. It reads the session alone, and asks the account API nothing. */
 export declare function useSession(): UseSession;
-/** What the account hooks (`useWallets`, `useLinkedAccounts`, `useAccountSessions`) answer: the data, the error, and whether it loaded. */
+/** What the account hooks (`useWallets`, `useLinkedAccounts`, `useAccountSessions`, `usePasskeys`) answer: the data, the error, and whether it loaded. */
 interface UseAccountData<T> {
   readonly data: T | null;
   readonly error: SynqError | null;
@@ -382,6 +776,60 @@ export declare function useAccountSessions(): UseAccountData<readonly AccountSes
 export declare function useApiKeys(): UseAccountData<readonly ApiKey[]>;
 /** The brand's APIs that let the person make keys, with the scopes each defines. */
 export declare function useKeyableApis(): UseAccountData<readonly KeyableApi[]>;
+/** The person's passkeys. */
+export declare function usePasskeys(): UseAccountData<readonly Passkey[]>;
+/**
+ * The ways to sign in the person can add, in the brand's order (AERO-2080):
+ * each a `method` for `useAuth().link`, with its name. A passkey is listed
+ * only when offered; link('passkey') uses the hosted add-passkey intent.
+ */
+export declare function useLinkableMethods(): UseAccountData<readonly LinkableMethod[]>;
+/** What `useSignInMethods()` answers: the app's methods, in the brand's order, and whether the brand shows "Last used". */
+interface UseSignInMethods extends UseAccountData<readonly SignInMethodInfo[]> {
+  /** Whether the brand marks the way this browser last signed in: off where people share devices. */
+  readonly showLastUsed: boolean;
+}
+/**
+ * The ways the app's sign-in offers, in the brand's order (AERO-2690), for a
+ * sign-in panel of the app's own: each one's id (what `signIn({ method })`
+ * takes), kind, name and artwork, whether it finishes on the app's own
+ * screens (`in_place`, through `useSignIn()`) and whether it signs in at
+ * another site (`popup`). Read from the route mount's `sign-in/methods`
+ * once for every component, signed in or out; a method the brand turns off
+ * is gone within a minute.
+ */
+export declare function useSignInMethods(): UseSignInMethods;
+/**
+ * The way this browser last signed in to the app, for a "Last used" mark on
+ * it (AERO-2691), or null: the method and, for a wallet, the wallet app's
+ * name, never an address or who it was. The app's server keeps it on the
+ * app's own host from its sign-in claims (`sign_in_claims` on the app), so
+ * it survives signing out and the issuer's cookies. Null where the brand
+ * turned "Last used" off, or no longer offers that method here, once
+ * `useSignInMethods()` says so.
+ */
+export declare function useLastUsedMethod(): LastUsedMethod | null;
+/** What `useSignInEvent()` answers: the sign-in, what the app kept for it, and `consume` to say the page heard of it. */
+type UseSignInEvent = SignInEvent & {
+  /**
+   * What the app asked to keep (`keep`) when it started this sign-in in a
+   * popup or by a redirect (AERO-2692), as it gave it: the screen to come
+   * back to, say. Undefined when it kept nothing.
+   */
+  readonly kept: unknown;
+  /** The page heard of it: it's gone, here and on the app's server, so a reload doesn't tell it again. */
+  readonly consume: () => void;
+};
+/**
+ * The sign-in that just finished, once (AERO-2691): whether it made the
+ * account (`isNewUser`, for a first-profile screen or a welcome), how, with
+ * which wallet, and what the app kept for it (`kept`). It stays until
+ * `consume()`, or five minutes. Needs the app's sign-in claims on
+ * (`sign_in_claims`); null otherwise, and when there is none. Null in the
+ * server's render and the browser's first too: it is told just after, once
+ * the provider has read what a redirect kept for it.
+ */
+export declare function useSignInEvent(): UseSignInEvent | null;
 /** What `useUser()` answers: the person's claims, profile and metadata, and `update` for the profile. */
 interface UseUser {
   readonly isLoaded: boolean;
@@ -396,37 +844,122 @@ interface UseUser {
   readonly error: SynqError | null;
   /** Changes their profile: only the fields given, `null` clearing one. */
   readonly update: (changes: ProfileUpdate) => Promise<SynqResult<Profile>>;
+  /**
+   * Uploads a picture and makes it theirs (AERO-2700): a PNG, JPEG, WebP or
+   * GIF, which Synq keeps as a WebP square. A large one is made smaller in
+   * the browser first, to at most 1024 px, so a phone’s photo fits the 5 MiB
+   * Synq takes. It goes through the app's route mount
+   * (`<base>/account/picture`), whose server sends it on to Synq's storage.
+   * Offer it only where the profile's `picture_choices` is true.
+   */
+  readonly uploadPicture: (picture: Blob) => Promise<SynqResult<Profile>>;
+  /**
+   * Makes a linked account's picture theirs, by its id (`useLinkedAccounts`,
+   * `has_picture`): Synq copies it into the brand's files.
+   */
+  readonly setPictureFrom: (identity: string) => Promise<SynqResult<Profile>>;
+  /** Removes their picture: the app's default shows. */
+  readonly removePicture: () => Promise<SynqResult<Profile>>;
   /** Reads the profile and metadata again. */
   readonly reload: () => Promise<void>;
 }
 /** The signed-in person: their ID token's claims at once, then their profile and metadata. */
 export declare function useUser(): UseUser;
-/** What `useAuth()` answers: `signIn`, `signOut`, `link`, and the account's wallets, ways to sign in and sessions. */
+/** What `useAuth()` answers: `signIn`, `signOut`, `link`, and the account's wallets, ways to sign in, sessions, passkeys and deletion. */
 interface UseAuth {
   readonly isLoaded: boolean;
   readonly isSignedIn: boolean;
   readonly userId: string | null;
-  /** Sends the browser to sign in, coming back to `returnTo` (this page by default). */
-  readonly signIn: (options?: SignInOptions) => void;
+  /**
+   * Signs the person in: by default sends the browser to sign in, coming
+   * back to `returnTo` (this page by default), and answers `null` as the
+   * page leaves. With `display: 'popup'` (or `'auto'`, a popup where one
+   * fits) it opens one over the page, inside the tap, and answers once the
+   * session is the new one's, or the error it ended with (`cancelled` when
+   * the person closed it). A blocked popup becomes a redirect by itself.
+   */
+  readonly signIn: (options?: SignInOptions & HandoffOptions) => Promise<SynqResult<SignInDone | null>>;
   /** Where `signIn` sends the browser: the route mount's `sign-in`. */
   readonly signInUrl: (options?: SignInOptions) => string;
-  /** Ends the session in the app and at the brand, then goes where the brand sends the browser. */
-  readonly signOut: () => Promise<SynqResult<null>>;
+  /**
+   * Ends the session in the app and at the brand, then goes where the brand
+   * sends the browser. With `stay` (AERO-2684), the app's server ends the
+   * brand's session itself and the page stays where it is: show the person
+   * they're signed out. A failure leaves them signed in, to try again.
+   */
+  readonly signOut: (options?: SignOutOptions) => Promise<SynqResult<null>>;
   /**
    * Adds a way to sign in to the person's account: Synq asks them to sign in
-   * again, then for `method`, and the browser comes back to `returnTo` (this
-   * page by default). Answers only when it can't start: the method isn't
-   * offered, or they have as many ways in as one may.
+   * again (unless they signed in within the brand's `link_reauth_window`),
+   * then for `method`, and the browser comes back to `returnTo` (this page
+   * by default), answering `null` as it leaves, or the problem when it can't
+   * start: the method isn't offered, or they have as many ways in as one
+   * may. With `display: 'popup'` or `'auto'` it runs in a popup and answers
+   * the way in that joined; `cancelled` when none did (closed, "Not now",
+   * or one they already had), and `account_switched` when they signed in to
+   * the account that has it instead. `useLink(method)` keeps its state for
+   * a button.
    */
   readonly link: (method: SignInMethod, options?: {
     returnTo?: string;
-  }) => Promise<SynqResult<null>>;
+  } & HandoffOptions) => Promise<SynqResult<LinkedAccount | null>>;
+  /**
+   * Signs the person signed in now in again, for a change that wants a
+   * recent sign-in (`fresh_sign_in_required`), through the brand's page:
+   * with `method` (`google`, `x`…), straight to it. In a popup where one fits
+   * (`display: 'auto'`, the default), answering once the session is the
+   * fresh one, so the change can be tried again at once; else by a
+   * redirect that comes back to `returnTo` (this page), answering `null` as
+   * the page leaves. Call it from a tap's own handler, before anything is
+   * awaited: a popup opened later may be blocked, and it runs as a redirect.
+   * Only the same person counts: anyone else who signs in there is signed
+   * out again at once, at the brand too, the session stays as it was, and
+   * it answers `other_account`. `cancelled` when they closed the popup;
+   * `not_signed_in` with nobody signed in, or once they were signed out
+   * before it finished. With a wallet on the profile,
+   * `useWalletSignIn().reauthenticate()` from `@synqauth/solana/react` does
+   * it with one signature and no page.
+   */
+  readonly reauthenticate: (options?: ReauthenticateOptions) => Promise<SynqResult<SignInDone | null>>;
   readonly wallets: {
     readonly list: () => Promise<SynqResult<readonly Wallet[]>>;
     /** Names a wallet; `null` takes its name away. */
     readonly rename: (id: string, label: string | null) => Promise<SynqResult<Wallet>>;
     /** Makes it their primary wallet, in place of the one that was. */
     readonly setPrimary: (id: string) => Promise<SynqResult<Wallet>>;
+    /** Stops a wallet signing them in; the last way in can't go (`last_sign_in_method`). */
+    readonly remove: (id: string) => Promise<SynqResult<null>>;
+    /**
+     * The issuer and app the page asks for a wallet's sign-in request with
+     * (`POST <issuer>/siws/nonce`), from the route mount's `sign-in/wallet`:
+     * what `@synqauth/solana/react` signs with. Read once, then kept.
+     */
+    readonly requestTarget: () => Promise<SynqResult<WalletRequestTarget>>;
+    /**
+     * Signs in with a wallet's signature over that request (`siws`, as
+     * `@synqauth/solana`'s `encodeSiws` writes it), in place: the route
+     * mount trades it for the session with no page (AERO-2681), and the
+     * session here follows. `reauthenticate` signs the person signed in now
+     * in again, for a route that wants a recent sign-in: Synq signs in only
+     * them, and refuses another account's wallet, or one nobody has, before
+     * anything changes (`other_account`). A signature that didn't
+     * count is `wallet_failed` or `wallet_expired` (ask for another
+     * request); what only the hosted page can do is `redirect_to_web`.
+     */
+    readonly signIn: (siws: string, options?: {
+      reauthenticate?: boolean;
+      returnTo?: string;
+    }) => Promise<SynqResult<WalletSignedIn>>;
+    /**
+     * Adds the wallet that signed `siws` to their account (AERO-2683): one
+     * signature, no hosted page. It needs a recent sign-in
+     * (`fresh_sign_in_required`). A wallet another account has is
+     * `wallet_in_use`: `walletConflict(error)` from `@synqauth/js` says
+     * whether it can move here, and `move` moves it.
+     */
+    readonly add: (siws: string) => Promise<SynqResult<Wallet>>;
+    /** Moves a wallet here with the `move_ticket` of a `wallet_in_use` conflict. */
+    readonly move: (ticket: string) => Promise<SynqResult<Wallet>>;
   };
   /** The ways they sign in. */
   readonly accounts: {
@@ -451,12 +984,91 @@ interface UseAuth {
     /** Revokes a key at once. */
     readonly revoke: (id: string) => Promise<SynqResult<null>>;
   };
+  readonly passkeys: {
+    readonly list: () => Promise<SynqResult<readonly Passkey[]>>;
+    /** Sends the browser to Synq, which asks them to sign in again and then makes a passkey, coming back to `returnTo` (this page by default). */
+    readonly add: (options?: {
+      returnTo?: string;
+    }) => void;
+    /** Removes a passkey; the last way in can't go (`last_sign_in_method`). */
+    readonly remove: (id: string) => Promise<SynqResult<null>>;
+  };
+  /** Deleting the account: after a grace period, which the profile's `deletion_scheduled_for` ends. */
+  readonly deletion: {
+    /** Asks for the account to be deleted. Someone who owns an org can't (`conflict`) until they hand it over. */
+    readonly schedule: () => Promise<SynqResult<Profile>>;
+    /** Takes the request back while the grace period lasts. */
+    readonly cancel: () => Promise<SynqResult<Profile>>;
+  };
   /** Each browser plugin's actions, by its id (`usePlugin` types them). */
   readonly plugins: Readonly<Record<string, unknown>>;
 }
+/** Where the page asks for a wallet's sign-in request: the brand's issuer, as the app's client. */
+interface WalletRequestTarget {
+  readonly issuer: string;
+  readonly clientId: string;
+}
+/** A wallet's sign-in in place: who is signed in now, and where the app meant to go. */
+interface WalletSignedIn {
+  readonly user: SynqUser | null;
+  /** Where the sign-in was to land: the app decides whether to go there. */
+  readonly returnTo: string;
+}
 /** Everything the signed-in person can do. */
 export declare function useAuth(): UseAuth;
 //#endregion
+//#region src/link.d.ts
+/** Where `useLink` is: nothing yet, under way, linked, or failed. */
+type LinkStatus = 'idle' | 'pending' | 'linked' | 'error';
+/** What `useLink(method)` answers. */
+interface UseLink {
+  /**
+   * Adds `method`'s way in: in a popup where one fits (`display: 'auto'`, the
+   * default), else by a redirect that comes back to `returnTo` (this page).
+   * Call it from the tap itself. Answers the way in that joined, `null` as
+   * the page leaves for a redirect, or the error it ended with: `cancelled`
+   * when the person closed the popup, went on without adding it or proved
+   * one they already had, and `account_switched` when they signed in to the
+   * account that has it instead.
+   */
+  readonly link: (options?: {
+    returnTo?: string;
+  } & HandoffOptions) => Promise<SynqResult<LinkedAccount | null>>;
+  /**
+   * `linked` while the person has a way in of this kind, `pending` while one
+   * is being added (a popup open, or a redirect on its way back), `error`
+   * when the last try failed, else `idle`.
+   */
+  readonly status: LinkStatus;
+  /** Their way in of this kind: the one just added, else their newest. */
+  readonly identity: LinkedAccount | null;
+  /**
+   * Why the last try failed; a closed popup is no failure. A redirect's
+   * error shows until the next try, or until one of this kind joins.
+   */
+  readonly problem: SynqError | null;
+  /** Gives up on a popup still open, closing it where the browser lets the page. */
+  readonly cancel: () => void;
+}
+/**
+ * Linking one way in from a button of the app's own (AERO-2695): `link()`
+ * from the tap, and the `status` and `identity` to show. A redirect's return
+ * shows here too: the hook reads the way in that joined, or the error the
+ * app's callback came back with.
+ */
+export declare function useLink(method: SignInMethod): UseLink;
+/** What `useRedirectResult()` answers: the result, and `consume()` to forget it once handled. */
+type UseRedirectResult = (RedirectResult & {
+  readonly consume: () => void;
+}) | null;
+/**
+ * A sign-in or link that left the page for a redirect (AERO-2692), once the
+ * app is back: what it was, the state the app kept for it (`keep`), and the
+ * error the app's callback came back with, if any. Null until there is one,
+ * and after `consume()`. Who is signed in now is `useSession()`'s.
+ */
+export declare function useRedirectResult(): UseRedirectResult;
+//#endregion
 //#region src/components/SignedIn.d.ts
 /** Shows its children only while someone is signed in. It renders no element of its own. */
 export declare function SignedIn({ children }: {
@@ -469,15 +1081,6 @@ export declare function SignedOut({ children }: {
   readonly children?: ReactNode;
 }): ReactNode;
 //#endregion
-//#region src/components/styling.d.ts
-/** What every component takes for its look: Synq's classes, or `unstyled`. */
-interface SynqStyleProps {
-  /** The same elements, roles and labels, with none of Synq's classes: the app styles them. */
-  readonly unstyled?: boolean;
-  /** Added to the component's outer element. */
-  readonly className?: string;
-}
-//#endregion
 //#region src/components/SignInButton.d.ts
 /** What `SignInButton` takes: the sign-in's options, its look and its words. */
 interface SignInButtonProps extends SignInOptions, SynqStyleProps {
@@ -538,33 +1141,49 @@ interface OneTimeCodeInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
 export declare function OneTimeCodeInput({ label, unstyled, className, ...input }: OneTimeCodeInputProps): ReactNode;
 //#endregion
 //#region src/components/UserButton.d.ts
-/** What `UserButton` takes: where its account link goes, and its look. */
+/** What `UserButton` takes: where its account link goes, how it draws the avatar, and its look. */
 interface UserButtonProps extends SynqStyleProps {
   /** The app's page with `<AccountManager>`, linked as "Manage account". */
   readonly accountHref?: string;
+  /** How its avatar falls back and which pictures show: the provider's `avatar` by default. */
+  readonly avatar?: AvatarSettings;
 }
 /**
  * The signed-in person's picture and name, showing a panel to manage their
  * account or sign out: a disclosure (a button that shows and hides it), so
  * its link and button are reached with Tab as anywhere else. Escape or a
- * click elsewhere hides it. Nothing while nobody is signed in.
+ * click elsewhere hides it. Its menu opens under the trigger and stays on
+ * screen: on a narrow window it moves sideways to keep 8px clear of each edge
+ * (AERO-2734). Nothing while nobody is signed in.
  */
-export declare function UserButton({ unstyled, className, accountHref }: UserButtonProps): ReactNode;
+export declare function UserButton({ unstyled, className, accountHref, avatar }: UserButtonProps): ReactNode;
 //#endregion
 //#region src/components/AccountManager.d.ts
-/** One part of `AccountManager`: the profile, the ways to sign in, the sessions, or the API keys. */
-type AccountSection = 'profile' | 'accounts' | 'sessions' | 'apiKeys';
-/** What `AccountManager` takes: which sections it shows, and its look. */
+/** One part of `AccountManager`: the profile, the ways to sign in, the passkeys, the sessions, the API keys, or deleting the account. */
+type AccountSection = 'profile' | 'accounts' | 'passkeys' | 'sessions' | 'apiKeys' | 'deletion';
+/** What `AccountManager` takes: which sections it shows, the ways to sign in it offers to add, and its look. */
 interface AccountManagerProps extends SynqStyleProps {
   /**
-   * The parts it shows, in this order: all four by default. The API keys
+   * The parts it shows, in this order: all six by default. The API keys
    * show only where one of the brand's APIs lets people make keys, or the
    * person has some.
    */
   readonly sections?: readonly AccountSection[];
+  /**
+   * Limits the ways to sign in it offers to add to these. By default it
+   * offers every way the brand turns on for adding, as the account API lists
+   * them (`useLinkableMethods`), and never one the brand doesn't. A way they
+   * already have is left out, except a wallet or a passkey, of which they may
+   * have several. A passkey is offered in the passkeys section when that
+   * shows, else among the ways to add; either button makes one on Synq's
+   * add-passkey page, and only where the brand offers passkeys.
+   */
+  readonly linkMethods?: readonly SignInMethod[];
+  /** How the profile's avatar falls back and which pictures show: the provider's `avatar` by default. */
+  readonly avatar?: AvatarSettings;
 }
 /** Manage the signed-in person's account. Nothing while nobody is signed in. */
-export declare function AccountManager({ unstyled, className, sections }: AccountManagerProps): ReactNode;
+export declare function AccountManager({ unstyled, className, sections, linkMethods, avatar }: AccountManagerProps): ReactNode;
 //#endregion
 //#region src/components/WalletManager.d.ts
 /** What `WalletManager` takes: its look. */
@@ -572,4 +1191,428 @@ type WalletManagerProps = SynqStyleProps;
 /** Manage the signed-in person's wallets. Nothing while nobody is signed in. */
 export declare function WalletManager({ unstyled, className }: WalletManagerProps): ReactNode;
 //#endregion
-export type { AccountManagerProps, AccountSection, AccountSession, ApiKey, ApiKeyInput, KeyableApi, LinkedAccount, NewApiKey, OneTimeCodeInputProps, Profile, ProfileUpdate, SessionStatus, SignInButtonProps, SignInFormProps, SignInHandover, SignInMethod, SignInMethods, SignInOptions, SignInPartProps, SignInProblem, SignInStep, SynqClientPlugin, SynqMessages, SynqMountRequest, SynqProviderProps, SynqResult, SynqSessionInfo, SynqStyleProps, SynqUser, UseAccountData, UseAuth, UseSession, UseSignIn, UseSignInOptions, UseUser, UserButtonProps, UserMetadata, Wallet, WalletManagerProps };
+//#region src/account-panel.d.ts
+/** What the panel shows: the ways to sign in, one under way, a first sign-in's onboarding, or the profile. */
+type AccountPanelView = 'sign-in' | 'progress' | 'onboarding' | 'profile';
+/** How the panel sits: a popover anchored under its trigger from 640px wide, a bottom sheet below. */
+type AccountPanelLayout = 'popover' | 'sheet';
+/** A sign-in the panel started and waits on. */
+interface AccountPanelPending {
+  /** The method: `google`, `wallet`… */
+  readonly method: string;
+  /** Its name, as people know it: `Google`. */
+  readonly name: string;
+  /**
+   * How it runs: in a `popup` over the page, a `redirect` that leaves it, or
+   * `in-place` (a wallet's signature, a passkey's prompt) with no page at all.
+   */
+  readonly display: 'popup' | 'redirect' | 'in-place';
+  /** For a wallet's signature: the wallet app it waits on, when known. */
+  readonly walletApp: string | null;
+}
+/** What `useAccountPanel()` takes. */
+interface UseAccountPanelOptions {
+  /**
+   * The query parameter that mirrors the panel being open
+   * (`?<urlParam>=account`): `panel` by default; null mirrors nothing. With
+   * it, Back closes the panel, a reload opens it again, and a provider's
+   * redirect comes back into it.
+   */
+  readonly urlParam?: string | null;
+  /**
+   * Small state of the app's own to have back after a sign-in that leaves
+   * the page (at most 4 KB of JSON; `useRedirectResult().kept`): a value, or
+   * a function the tap calls for it.
+   */
+  readonly keep?: unknown;
+  /** Called once the person signed out from the panel, which stays on the page: the app's toast. */
+  readonly onSignedOut?: () => void;
+  /**
+   * Whether it moves the dialog as it opens and closes, with Synq's own
+   * motion (WAAPI on `panelProps`' element): no by default, so a dialog of
+   * the app's own moves as the app makes it. `<AccountPanel>` says yes.
+   */
+  readonly animate?: boolean;
+}
+/** The props of the button that opens the panel. */
+interface AccountPanelTriggerProps {
+  readonly ref: RefObject<HTMLButtonElement | null>;
+  readonly type: 'button';
+  readonly 'aria-haspopup': 'dialog';
+  readonly 'aria-expanded': boolean;
+  readonly 'aria-controls': string;
+  readonly onClick: () => void;
+}
+/** The props of the panel itself: a dialog that keeps the focus inside. */
+interface AccountPanelDialogProps {
+  readonly ref: RefObject<HTMLDivElement | null>;
+  readonly id: string;
+  readonly role: 'dialog';
+  readonly 'aria-modal': true;
+  readonly 'aria-labelledby': string;
+  readonly tabIndex: -1;
+  readonly 'data-layout': AccountPanelLayout;
+  readonly 'data-view': AccountPanelView;
+  /** Where a popover sits, as `--synq-panel-top`, `--synq-panel-right` and `--synq-panel-max-height`. */
+  readonly style: CSSProperties;
+  readonly onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+  /**
+   * Marks a press as inside the panel by React's tree, not the page's: a
+   * popover, select or tooltip a card portals into `<body>` is still inside,
+   * and pressing it leaves the panel open.
+   */
+  readonly onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+  /** A link inside closes the panel as it navigates, without going Back first. */
+  readonly onClickCapture: (event: MouseEvent<HTMLElement>) => void;
+}
+/** The props of a sheet's grabber, which a drag down closes. */
+interface AccountPanelGrabberProps {
+  readonly 'aria-hidden': true;
+  readonly onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+  readonly onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+  readonly onPointerUp: () => void;
+  readonly onPointerCancel: () => void;
+}
+/** What `useAccountPanel()` answers. */
+interface UseAccountPanel {
+  readonly open: boolean;
+  /** Opens or closes it; closing gives the focus back to the trigger and calls off a popup under way. */
+  readonly setOpen: (open: boolean) => void;
+  /**
+   * Closes it. With `navigating`, before the page goes elsewhere (a
+   * `router.push` of the app's): it takes `?panel=account` out of the
+   * address in place instead of going Back, so the navigation lands where
+   * it meant to. A link inside the panel does this by itself.
+   */
+  readonly close: (options?: {
+    readonly navigating?: boolean;
+  }) => void;
+  /** Whether to render the panel: open, or still closing. */
+  readonly present: boolean;
+  readonly view: AccountPanelView;
+  readonly layout: AccountPanelLayout;
+  /** The sign-in under way, started from the panel. */
+  readonly pending: AccountPanelPending | null;
+  /**
+   * Why the last sign-in from the panel failed, in the page or by a redirect
+   * that came back: a closed popup, a declined signature or a way back the
+   * person took (`access_denied`) is none.
+   */
+  readonly problem: SynqError | null;
+  /** The method `problem` is for (`google`, `wallet`…), to show it there. */
+  readonly problemMethod: string | null;
+  /**
+   * The session ended while the panel was open, and not by its own Sign
+   * out (it expired, say): the panel is back on the ways in, and says so.
+   */
+  readonly signedOut: boolean;
+  /** Calls off the sign-in under way: closes its popup, and stops waiting on a wallet. */
+  readonly cancel: () => void;
+  /**
+   * Signs in with `method` from a tap: a provider in a popup where one fits
+   * (else a redirect that comes back into the panel), a wallet in place with
+   * the wallet layer's signature (`walletApp` names one), anything else at
+   * the hosted page. Call it from the tap itself, so a popup can open.
+   */
+  readonly signIn: (method: string, options?: {
+    readonly walletApp?: string;
+  }) => Promise<void>;
+  /**
+   * The sign-in the panel is showing: a new account's (`isNewUser`, the
+   * onboarding) or a returning person's (the greeting), until it closes.
+   */
+  readonly event: SignInEvent | null;
+  /** Shows the profile in place of a returning sign-in's greeting. */
+  readonly showProfile: () => void;
+  /** Signs out and stays on the page (`signOut({ stay: true })`), closing the panel and calling `onSignedOut`. */
+  readonly signOut: () => Promise<SynqResult<null>>;
+  /**
+   * Keeps the panel open on a click outside while `busy`, as while a
+   * wallet's prompt in the page waits: a card inside calls it through
+   * `useAccountPanelSection()`.
+   */
+  readonly hold: (busy: boolean) => () => void;
+  /** The id of the panel's title, which labels the dialog. */
+  readonly titleId: string;
+  readonly triggerProps: AccountPanelTriggerProps;
+  readonly panelProps: AccountPanelDialogProps;
+  readonly grabberProps: AccountPanelGrabberProps;
+}
+/**
+ * The account panel's state and behavior, for a panel of the app's own:
+ * spread `triggerProps` on its button and `panelProps` on its dialog.
+ */
+export declare function useAccountPanel(options?: UseAccountPanelOptions): UseAccountPanel;
+//#endregion
+//#region src/components/account-panel-sections.d.ts
+/** What a card of the app's own inside `<AccountPanel>` reads of it: `useAccountPanelSection()`. */
+interface AccountPanelSection {
+  /** The onboarding of a first sign-in, which keeps to the essentials, rather than the profile. */
+  readonly firstRun: boolean;
+  readonly view: AccountPanelView;
+  /**
+   * Closes the panel. With `navigating`, before a `router.push` of the
+   * card's: it goes from the address in place rather than Back, so the
+   * navigation lands where it meant to. A link inside does this by itself.
+   */
+  readonly close: (options?: {
+    readonly navigating?: boolean;
+  }) => void;
+  /**
+   * Keeps the panel open on a click outside while `busy` (a prompt of the
+   * card's in the page): `useEffect(() => hold(busy), [hold, busy])`.
+   */
+  readonly hold: (busy: boolean) => () => void;
+}
+/** The panel a card of the app's own is in: its view, and closing or holding it. */
+export declare function useAccountPanelSection(): AccountPanelSection;
+/** What `AccountPanel.Card` takes. */
+interface AccountPanelCardProps {
+  /** Its heading, which names the card for screen readers too. */
+  readonly title: ReactNode;
+  /** Beside the heading: a count, say. */
+  readonly badge?: ReactNode;
+  readonly children?: ReactNode;
+}
+/** A card of the app's own, drawn as the panel's sections are: a heading, then what the app puts in it. */
+declare function Card({ title, badge, children }: AccountPanelCardProps): ReactNode;
+/** What `AccountPanel.Row` takes. */
+interface AccountPanelRowProps {
+  /**
+   * The provider the row stands for, when it's one: inside
+   * `AccountPanel.Linked`, the profile then lists that provider's linked
+   * account here alone, not again as a read-only row (an app's own
+   * "Event reminders" row for Telegram, say).
+   */
+  readonly provider?: SignInMethod;
+  /** On its tile at the start: an icon, 20px. */
+  readonly icon?: ReactNode;
+  readonly title: ReactNode;
+  /** The line under its title. */
+  readonly line?: ReactNode;
+  /** At its end: a button of the app's (a 44px target). */
+  readonly action?: ReactNode;
+}
+/**
+ * A row of the app's own, drawn as a `LinkRow` is: an `<li>`, for inside
+ * `AccountPanel.Linked` or a `<ul>` of the app's own card.
+ */
+declare function Row({ provider, icon, title, line, action }: AccountPanelRowProps): ReactNode;
+/** What `AccountPanel.Username` takes. */
+interface AccountPanelUsernameProps {
+  /** The card's heading: "Username" by default. */
+  readonly title?: ReactNode;
+  /**
+   * A line under the field while there's nothing to say about the name
+   * typed: what the username is for, in the app's words ("Your name on
+   * Acme Guild. Change it any time."). None by default.
+   */
+  readonly description?: ReactNode;
+}
+/**
+ * The username card of a first sign-in's onboarding: free names checked as
+ * they type, three suggestions for a taken one, saved with Save or Enter.
+ * In the profile, "Edit" beside their name changes it.
+ */
+declare function Username({ title, description }: AccountPanelUsernameProps): ReactNode;
+/** What `AccountPanel.Wallets` takes. */
+interface AccountPanelWalletsProps {
+  /**
+   * More to show under a wallet, from the app's own data (its rank, its
+   * balance): `firstRun` is a first sign-in's onboarding, which keeps to
+   * the essentials.
+   */
+  readonly extra?: (wallet: Wallet, info: {
+    readonly firstRun: boolean;
+  }) => ReactNode;
+  /** The card's heading: "Wallets" by default. */
+  readonly title?: ReactNode;
+}
+/**
+ * The profile's wallets: which one is connected, which signed in, which is
+ * primary; connecting one with no signature, adding one with one, and in
+ * the profile, a menu to make one primary, rename, copy or remove it.
+ * Through the wallet layer (`<SynqWalletProvider>`) where there is one,
+ * else adding one goes through the hosted page.
+ */
+declare function Wallets({ extra, title }: AccountPanelWalletsProps): ReactNode;
+/** What `AccountPanel.Linked` takes. */
+interface AccountPanelLinkedProps {
+  /** The card's heading: "Linked" by default. */
+  readonly title?: ReactNode;
+  /**
+   * Its rows: `AccountPanel.LinkRow`s and the app's own, which render
+   * inside a list, so each is an `<li>` (`AccountPanel.Row` is one). By
+   * default, a LinkRow for each provider the brand offers the app.
+   */
+  readonly children?: ReactNode;
+}
+/**
+ * The accounts linked to the profile: the rows the app puts in it, and in
+ * the profile, each other linked account, read only.
+ */
+declare function Linked({ title, children }: AccountPanelLinkedProps): ReactNode;
+/** What `AccountPanel.LinkRow` takes. */
+interface AccountPanelLinkRowProps {
+  /** The provider to link: `telegram`, `x`, `google`… */
+  readonly provider: SignInMethod;
+  /** The row's title: the provider's name by default. */
+  readonly title?: ReactNode;
+  /** The line under it while it isn't linked: "Not linked" by default. */
+  readonly description?: ReactNode;
+  /** What it says once linked, in place of the handle: an app's own status ("Alerts on"). */
+  readonly linkedLine?: (account: LinkedAccount) => ReactNode;
+}
+/**
+ * One provider to link: "Link", then "Finish in the X window" in a popup on
+ * a laptop (or a redirect on a phone that comes back into the panel), then
+ * their handle. Signing in again is skipped right after a sign-in.
+ */
+declare function LinkRow({ provider, title, description, linkedLine }: AccountPanelLinkRowProps): ReactNode;
+//#endregion
+//#region src/components/AccountPanel.d.ts
+/** What `AccountPanel` takes. */
+interface AccountPanelProps extends SynqStyleProps, Omit<UseAccountPanelOptions, 'animate'> {
+  /**
+   * The ways in that lead the panel, in this order, of those the brand
+   * offers the app: its first four by default. The brand's others go under
+   * "More options", in the brand's order; the one this browser last used is
+   * lifted out of it.
+   */
+  readonly methods?: readonly string[];
+  /** Whether a sign-in plays the avatar's moment, the ring and embers: yes by default. */
+  readonly moment?: boolean;
+  /** How many embers rise in the moment: 6 by default. */
+  readonly sparks?: number;
+  /** A line under the sign-in title, in the app's words. */
+  readonly description?: ReactNode;
+  /** The app's page with `<AccountManager>`, linked as "Account settings" under the profile. */
+  readonly accountHref?: string;
+  /** How avatars fall back (the app's own default, from the person's seed) and which pictures show. */
+  readonly avatar?: AvatarSettings;
+  /**
+   * Where the panel renders: `document.body` by default, so no ancestor's
+   * transform, filter or overflow clips it; null renders it beside its
+   * button. Out of the button's tree, it takes the theme variables set on
+   * `.synq`, which it carries, or on `panelClassName`.
+   */
+  readonly container?: Element | null;
+  /**
+   * Added to the panel's layer, the full-window element that holds the
+   * dialog (and on a phone, its backdrop): where scoped theme variables go.
+   * `className` is the button's wrapper's alone.
+   */
+  readonly panelClassName?: string;
+  /**
+   * What the onboarding and the profile show, in this order: the panel's
+   * sections and the app's own cards between them. Username, Wallets and
+   * Linked by default.
+   */
+  readonly children?: ReactNode;
+}
+/**
+ * The account button and panel: sign in, a first sign-in's onboarding, and
+ * the profile, in one popover or sheet. Its sections are `AccountPanel.*`.
+ */
+export declare function AccountPanel({ methods, moment, sparks, description, accountHref, avatar, container, urlParam, keep, onSignedOut, unstyled, className, panelClassName, children }: AccountPanelProps): ReactNode;
+export declare namespace AccountPanel {
+  var Username: typeof Username;
+  var Wallets: typeof Wallets;
+  var Linked: typeof Linked;
+  var LinkRow: typeof LinkRow;
+  var Card: typeof Card;
+  var Row: typeof Row;
+}
+//#endregion
+//#region src/components/AvatarMoment.d.ts
+/** What `AvatarMoment` takes: the sign-in to mark, how large, and how many embers. */
+interface AvatarMomentProps extends SynqStyleProps, AvatarSettings {
+  /**
+   * The sign-in to mark (`useSignInEvent()`, or the panel's `event`): the
+   * ring and embers play once for its `id`. Null shows the avatar alone.
+   */
+  readonly event: {
+    readonly id: string;
+  } | null;
+  /** Whose avatar: the signed-in person by default. */
+  readonly user?: AvatarPerson | null;
+  /** The avatar's width and height in pixels: 64 by default. */
+  readonly size?: number;
+  /** How many embers rise: 6 by default, 0 for the ring alone. */
+  readonly sparks?: number;
+}
+/**
+ * The person's avatar with the moment of a sign-in: a ring that sweeps
+ * around it once and embers that rise off it, by `--synq-moment-1..3`.
+ * Drawn for the eye alone; the greeting beside it says what happened.
+ */
+export declare function AvatarMoment({ event, user, size, sparks, fallback, sources, unstyled, className }: AvatarMomentProps): ReactNode;
+//#endregion
+//#region src/wallet-layer.d.ts
+/** A wallet app as people see it: its name, and its icon when the browser has it. */
+interface WalletAppInfo {
+  readonly name: string;
+  /** A data URL, as the wallet announced it; null when the browser hasn't it. */
+  readonly icon: string | null;
+}
+/** What a wallet layer lends `<AccountPanel>`: see `WalletLayerProvider`. */
+interface WalletLayer {
+  /** The account the app uses now, and its wallet app; null when none is connected. */
+  readonly connected: {
+    readonly address: string;
+    readonly app: WalletAppInfo | null;
+  } | null;
+  /** The browser's wallets that can sign someone in, for a picker. */
+  readonly wallets: readonly WalletAppInfo[];
+  /**
+   * Signs in with a wallet, in place: the connected one, or the wallet app
+   * called `walletApp`. One signature; the wallet stays connected. A
+   * declined signature is `wallet_rejected`, and what only the hosted page
+   * can do is `redirect_to_web`.
+   */
+  readonly signIn: (walletApp?: string) => Promise<SynqResult<unknown>>;
+  /**
+   * Adds a wallet to the signed-in profile with one signature: the
+   * connected one, or the wallet app called `walletApp`, which connects it.
+   * A wallet on another profile is `wallet_in_use`; `move()` moves it here
+   * where the brand lets it.
+   */
+  readonly add: (walletApp?: string) => Promise<SynqResult<Wallet>>;
+  /** Moves the wallet of the last add's `wallet_in_use` here, where the brand lets it (`canMove`). */
+  readonly move: () => Promise<SynqResult<Wallet>>;
+  /** Whether the last add's conflict carries a ticket that moves the wallet here. */
+  readonly canMove: boolean;
+  /**
+   * Connects one of the profile's wallets, signing nothing: at `address`,
+   * in the wallet app called `walletApp` when the browser has it. Another
+   * account selected in the wallet app is `account_mismatch`.
+   */
+  readonly connect: (address: string, walletApp: string | null) => Promise<SynqResult<unknown>>;
+  /** The address this session signed in with, when the layer knows it. */
+  readonly signedInWith: string | null;
+  /**
+   * Confirms it's them for a change that wants a recent sign-in, with a
+   * wallet on their profile: one signature, in place, no page.
+   */
+  readonly reauthenticate: () => Promise<SynqResult<unknown>>;
+  /**
+   * Asks for the next signature's request now, and keeps it fresh until the
+   * returned function is called, so a tap on a wallet goes straight to the
+   * wallet (AERO-2679). The account panel calls it while it is open. A
+   * layer without it asks after the tap.
+   */
+  readonly prepare?: () => () => void;
+}
+/**
+ * Lends a wallet layer to the components under it. `<SynqWalletProvider>`
+ * from `@synqauth/solana/react` does this itself; a wallet layer of the
+ * app's own (another chain's, say) passes its own `value`.
+ */
+export declare function WalletLayerProvider({ value, children }: {
+  readonly value: WalletLayer | null;
+  readonly children?: ReactNode;
+}): ReactNode;
+/** The wallet layer lent to this component (`WalletLayerProvider`), or null when there is none. */
+export declare function useWalletLayer(): WalletLayer | null;
+//#endregion
+export { type AccountManagerProps, Card as AccountPanelCard, type AccountPanelCardProps, type AccountPanelDialogProps, type AccountPanelGrabberProps, type AccountPanelLayout, LinkRow as AccountPanelLinkRow, type AccountPanelLinkRowProps, Linked as AccountPanelLinked, type AccountPanelLinkedProps, type AccountPanelPending, type AccountPanelProps, Row as AccountPanelRow, type AccountPanelRowProps, type AccountPanelSection, type AccountPanelTriggerProps, Username as AccountPanelUsername, type AccountPanelUsernameProps, type AccountPanelView, Wallets as AccountPanelWallets, type AccountPanelWalletsProps, type AccountSection, type AccountSession, type ApiKey, type ApiKeyInput, type AvatarFallback, type AvatarMomentProps, type AvatarProps, type AvatarSettings, type AvatarSource, type HandoffOptions, type KeyableApi, type LastUsedMethod, type LinkStatus, type LinkableMethod, type LinkedAccount, type NewApiKey, type OneTimeCodeInputProps, type Passkey, type Profile, type ProfileUpdate, type ReauthenticateOptions, type RedirectKind, type RedirectResult, type SessionStatus, type SignInButtonProps, type SignInDisplay, type SignInDone, type SignInEvent, type SignInFormProps, type SignInHandover, type SignInMethod, type SignInMethodInfo, type SignInMethods, type SignInOptions, type SignInPartProps, type SignInProblem, type SignInStep, type SignOutOptions, type SynqClientPlugin, type SynqMessages, type SynqMountRequest, type SynqProviderProps, type SynqResult, type SynqSessionInfo, type SynqStyleProps, type SynqUser, type UseAccountData, type UseAccountPanel, type UseAccountPanelOptions, type UseAuth, type UseAvatar, type UseLink, type UseRedirectResult, type UseSession, type UseSignIn, type UseSignInEvent, type UseSignInMethods, type UseSignInOptions, type UseUser, type UseUsernameField, type UserButtonProps, type UserMetadata, type UsernameCode, type UsernameStatus, type Wallet, type WalletAppInfo, type WalletLayer, type WalletManagerProps, type WalletRequestTarget, type WalletSignedIn };