@flung.dev/connect 0.1.2 → 0.4.0

package/dist/element/events.d.ts

@@ -1,31 +1,21 @@
-import type { Account, ConnectSession } from '../core/types.js';
-/** `flung-load`: the accounts were read, on first show and after every change. */
-export interface LoadDetail {
-    /** The connected accounts the panel shows, newest first. */
-    accounts: Account[];
-}
-/** `flung-connect`: a connect or reconnect finished. `accounts` are the ones stored; Facebook stores one per page. */
-export interface ConnectDetail {
-    /** The connect session, or null when the person came back from a redirect. */
-    session: ConnectSession | null;
-    /** The accounts stored. */
-    accounts: Account[];
-}
-/** `flung-disconnect`: an account was disconnected. */
-export interface DisconnectDetail {
-    /** The account, now `disconnected`. */
-    account: Account;
-}
-/** `flung-error`: a call or a connect failed. `code` is the API's stable code, such as `forbidden` or `access_denied`. */
-export interface ErrorDetail {
-    /** The API's stable code, or the platform's, such as `access_denied`. */
-    code: string;
-    /** What went wrong, for a person. */
-    message: string;
+import type { ConnectState } from '../core/controller.js';
+import type { ConnectDetail, DisconnectDetail, ErrorDetail, LoadDetail } from '../core/events.js';
+export type { ConnectDetail, DisconnectDetail, ErrorDetail, LoadDetail } from '../core/events.js';
+/** `flung-change`: the panel's state changed. Does not bubble; for a page that draws parts of the panel itself. */
+export interface ChangeDetail {
+    /** The new snapshot. */
+    state: ConnectState;
 }
+/** The element's events, for `addEventListener` types. */
 export interface FlungConnectEventMap {
+    /** The accounts were read. */
     'flung-load': CustomEvent<LoadDetail>;
+    /** A connect or reconnect finished. */
     'flung-connect': CustomEvent<ConnectDetail>;
+    /** An account was disconnected. */
     'flung-disconnect': CustomEvent<DisconnectDetail>;
+    /** A call or a connect failed. */
     'flung-error': CustomEvent<ErrorDetail>;
+    /** The state changed. */
+    'flung-change': CustomEvent<ChangeDetail>;
 }

package/dist/element/flung-connect.d.ts

@@ -1,11 +1,31 @@
 import type { TokenSource } from '../core/client.js';
-import type { ConnectLabels } from './copy.js';
+import type { ConnectController, ConnectOptions, ConnectState } from '../core/controller.js';
+import type { ConnectLabels } from '../core/labels.js';
+import type { Platform } from '../core/types.js';
+/** How the platforms are laid out: `list` (the default) one under another, `grid` as cards side by side, `compact` tighter. */
+export type FlungConnectLayout = 'list' | 'grid' | 'compact';
+/**
+ * How a platform with a connect variant (LinkedIn: a personal profile or company pages) is offered: `choose` (the
+ * default) asks which after Connect, inside the panel; `tiles` shows each as its own platform, such as LinkedIn and
+ * LinkedIn Page.
+ */
+export type FlungConnectVariants = 'choose' | 'tiles';
 /** `<flung-connect>` as a page sees it. */
 export interface FlungConnectElement extends HTMLElement {
     /** A connect token, or a function that fetches a fresh one from your server. The `token` attribute sets a string. */
     token: TokenSource | null;
+    /** Every word the panel shows. Setting it fills in the defaults for any left out. */
     get labels(): ConnectLabels;
     set labels(value: Partial<ConnectLabels> | undefined);
+    /** The panel's current state, the same snapshot `flung-change` carries. */
+    readonly state: ConnectState;
+    /** The headless controller behind the panel, for a page that draws parts of it itself; null until the element is on a page. A new token makes a new one. */
+    readonly controller: ConnectController | null;
+    /**
+     * Starts a connect, as the platform's Connect button does. Call it straight from a click: a browser opens a window only
+     * during one. `{ variant: 'pages' }` connects LinkedIn company pages without asking, `{ variant: null }` the profile.
+     */
+    connect(platform: Platform, options?: ConnectOptions): void;
     /** Reads the accounts again, as after a connect. */
     refresh(): Promise<void>;
 }

package/dist/element/flung-connect.js

@@ -1,25 +1,47 @@
-import { ConnectClient, FlungConnectError } from '../core/client.js';
-import { connectInPopup, readRedirectResult, withoutRedirectResult } from '../core/flows.js';
-import { HANDLE_PROMPT, parsePlatformList, PLATFORM_NAMES, tokenPlatforms } from '../core/platforms.js';
-import { DEFAULT_LABELS, format } from './copy.js';
-import { button, displayName, html, mark } from './dom.js';
-import { FLUNG_MARK, PLATFORM_MARKS } from './marks.js';
-import { STYLES } from './styles.js';
-/** How soon a reconnect deadline is worth showing. */
-const SOON_MS = 14 * 86_400_000;
+import { createConnectController, initialConnectState } from '../core/controller.js';
+import { DEFAULT_LABELS, formatLabel as format } from '../core/labels.js';
+import { parsePlatformList } from '../core/platforms.js';
+import { avatar, button, html, mark, qrCode } from './dom.js';
+import { CHOICE_MARKS, FLUNG_MARK, PLATFORM_MARKS } from './marks.js';
+import { BASE_STYLES, STYLES } from './styles.js';
+import { panelTooltip, TOOLTIP_BASE_STYLES, TOOLTIP_STYLES } from './tooltip.js';
+const LAYOUTS = ['list', 'grid', 'compact'];
+/**
+ * Which of a platform's tiles its step shows under: a reconnect or a disconnect under the account's tile, a connect under
+ * the tile of the variant it is for, anything else under the first. -1 when none matches.
+ */
+function stepTile(item, tiles) {
+    const { step } = item;
+    const accountId = step.kind === 'confirm' ? step.account.account.id : step.kind === 'waiting' || step.kind === 'approve' ? step.accountId : null;
+    if (accountId !== null)
+        return tiles.findIndex((tile) => tile.accounts.some((account) => account.account.id === accountId));
+    if (step.kind === 'waiting' || step.kind === 'approve')
+        return tiles.findIndex((tile) => tile.variant === step.variant);
+    return 0;
+}
+/**
+ * A step's kind for moving focus, with an approval split by where it is: making its link, showing it, or ended. Each
+ * change is a new place for focus.
+ */
+function focusKind(step) {
+    if (step.kind !== 'approve')
+        return step.kind;
+    return step.ended !== null ? 'approve-ended' : step.approvalUrl !== null ? 'approve-link' : 'approve';
+}
+/** The key of a tile's Connect button, so focus can come back to it. */
+const connectKey = (platform, variant) => (variant === null ? `connect-${platform}` : `connect-${platform}-${variant}`);
 /** Builds the class on first use, so importing the package on a server, where there is no `HTMLElement`, is safe. */
 export function createFlungConnectClass() {
     return class FlungConnect extends HTMLElement {
-        static observedAttributes = ['token', 'base-url', 'platforms', 'branding'];
+        static observedAttributes = ['token', 'base-url', 'platforms', 'branding', 'mode', 'layout', 'unstyled', 'variants'];
         #root = this.attachShadow({ mode: 'open' });
+        #tooltip = panelTooltip(this.#root);
         #source = null;
-        #client = null;
         #labels = DEFAULT_LABELS;
-        #platforms = [];
-        #accounts = [];
-        #rows = new Map();
-        #message = { text: '', error: false };
-        #focus = null;
+        #controller = null;
+        #unsubscribe = null;
+        /** Each platform's step when the panel was last drawn, and the variant it was for, to move focus when one changes. */
+        #steps = new Map();
         #started = false;
         get token() {
             return this.#source;
@@ -33,10 +55,22 @@ export function createFlungConnectClass() {
         }
         set labels(value) {
             this.#labels = { ...DEFAULT_LABELS, ...value };
-            this.#render();
+            if (this.#controller === null)
+                this.#render();
+            else
+                this.#controller.configure({ labels: this.#labels });
+        }
+        get state() {
+            return this.#controller?.getState() ?? initialConnectState(this.#source !== null);
+        }
+        get controller() {
+            return this.#controller;
+        }
+        connect(platform, options) {
+            this.#controller?.connect(platform, options);
         }
         refresh() {
-            return this.#load();
+            return this.#controller?.refresh() ?? Promise.resolve();
         }
         connectedCallback() {
             if (this.#started)
@@ -49,218 +83,234 @@ export function createFlungConnectClass() {
         attributeChangedCallback(name, previous, next) {
             if (previous === next || !this.#started)
                 return;
-            if (name === 'token')
+            if (name === 'token') {
                 this.#source = next;
-            if (name === 'branding')
-                this.#render();
+                this.#reset();
+            }
+            else if (name === 'base-url')
+                this.#reset();
             else if (name === 'platforms')
-                void this.#load();
+                this.#controller?.configure({ platforms: parsePlatformList(next) });
+            else if (name === 'mode')
+                this.#controller?.configure({ mode: next === 'redirect' ? 'redirect' : 'popup' });
             else
-                this.#reset();
+                this.#render();
         }
+        /** A new token or API: a new controller, which reads everything again and reports a redirect that came back. */
         #reset() {
             if (!this.#started)
                 return;
-            for (const row of this.#rows.values())
-                if (row.kind === 'waiting')
-                    row.abort.abort();
-            this.#rows.clear();
-            this.#client = this.#source === null ? null : new ConnectClient({ token: this.#source, baseUrl: this.getAttribute('base-url') ?? undefined });
-            void this.#load().then(() => this.#readReturn());
-        }
-        async #load() {
-            const client = this.#client;
-            if (client === null)
-                return this.#say(this.#labels.noToken);
-            if (this.#platforms.length === 0)
-                this.#say(this.#labels.loading);
-            try {
-                const [platforms, accounts] = await Promise.all([client.platforms(), client.accounts()]);
-                const asked = parsePlatformList(this.getAttribute('platforms'));
-                const granted = typeof this.#source === 'string' ? tokenPlatforms(this.#source) : null;
-                this.#platforms = platforms.map((info) => info.platform).filter((platform) => platforms.find((info) => info.platform === platform)?.connectable === true && (asked ?? [platform]).includes(platform) && (granted ?? [platform]).includes(platform));
-                this.#accounts = accounts.filter((account) => account.status !== 'disconnected' && this.#platforms.includes(account.platform));
-                if (this.#message.text === this.#labels.loading || this.#message.text === this.#labels.noToken)
-                    this.#message = { text: this.#platforms.length === 0 ? this.#labels.empty : '', error: false };
-                this.#render();
-                this.#emit('flung-load', { accounts: this.#accounts });
-            }
-            catch (error) {
-                this.#fail(error, (message) => format(this.#labels.loadFailed, { message }));
-            }
-        }
-        /** A connect that left the page (`mode="redirect"`) and came back: report it, and take Flung's result off the address. */
-        #readReturn() {
-            if (typeof location === 'undefined')
-                return;
-            const result = readRedirectResult(location.href);
-            if (result === null)
-                return;
-            history.replaceState(history.state, '', withoutRedirectResult(location.href));
-            if (result.status === 'connected') {
-                const accounts = this.#accounts.filter((account) => result.accountIds.includes(account.id));
-                const platform = accounts[0]?.platform;
-                this.#say(format(this.#labels.connected, { platform: platform === undefined ? 'The account' : PLATFORM_NAMES[platform] }));
-                this.#emit('flung-connect', { session: null, accounts });
-            }
-            else {
-                this.#say(result.error?.message ?? '', true);
-                this.#emit('flung-error', { code: result.error?.code ?? 'platform_error', message: result.error?.message ?? '' });
-            }
-        }
-        /** Called straight from a click or a submit: a window can only be opened during one. */
-        #start(platform, account, handle) {
-            const client = this.#client;
-            if (client === null)
-                return;
-            const redirect = this.getAttribute('mode') === 'redirect';
-            const redirectUrl = redirect ? withoutRedirectResult(location.href) : undefined;
-            const begin = () => (account === null ? client.connect(platform, { handle, redirectUrl }) : client.reconnect(account.id, { redirectUrl }));
-            const abort = new AbortController();
-            const row = { kind: 'waiting', abort, blockedUrl: null };
-            this.#rows.set(platform, row);
-            this.#say('');
-            if (redirect) {
-                void begin().then((session) => session.authorizationUrl !== null && location.assign(session.authorizationUrl), (error) => this.#settle(platform, error));
-                return;
-            }
-            void connectInPopup(client, begin, { signal: abort.signal })
-                .then(async (outcome) => {
-                if (outcome.kind === 'finished')
-                    return outcome.session;
-                row.blockedUrl = outcome.session.authorizationUrl;
-                this.#render();
-                return client.waitForSession(outcome.session.id, { signal: abort.signal });
-            })
-                .then((session) => this.#finish(platform, session), (error) => this.#settle(platform, error));
-        }
-        async #finish(platform, session) {
-            this.#rows.set(platform, { kind: 'idle' });
-            const name = PLATFORM_NAMES[platform];
-            if (session.status === 'connected') {
-                await this.#load();
-                this.#say(format(this.#labels.connected, { platform: name }));
-                this.#emit('flung-connect', { session, accounts: this.#accounts.filter((account) => session.accountIds.includes(account.id)) });
-            }
-            else if (session.status === 'expired') {
-                this.#say(format(this.#labels.expired, { platform: name }), true);
-                this.#emit('flung-error', { code: 'expired', message: this.#message.text });
-            }
-            else {
-                const message = session.error?.message ?? '';
-                this.#say(format(this.#labels.failed, { platform: name, message }), true);
-                this.#emit('flung-error', { code: session.error?.code ?? 'platform_error', message });
-            }
-        }
-        /** A connect that stopped early: cancelled by the person, or refused by the API. */
-        #settle(platform, error) {
-            this.#rows.set(platform, { kind: 'idle' });
-            if (error instanceof DOMException && error.name === 'AbortError')
-                return this.#render();
-            this.#fail(error, (message) => format(this.#labels.failed, { platform: PLATFORM_NAMES[platform], message }));
-        }
-        async #disconnect(account) {
-            this.#rows.set(account.platform, { kind: 'idle' });
-            try {
-                const disconnected = await this.#client.disconnect(account.id);
-                await this.#load();
-                this.#say(format(this.#labels.disconnected, { account: displayName(account) }));
-                this.#emit('flung-disconnect', { account: disconnected });
-            }
-            catch (error) {
-                this.#fail(error, (message) => message);
-            }
-        }
-        #fail(error, say) {
-            const detail = error instanceof FlungConnectError ? { code: error.code, message: error.message } : { code: 'unknown', message: String(error) };
-            this.#say(say(detail.message), true);
-            this.#emit('flung-error', detail);
-        }
-        #say(text, error = false) {
-            this.#message = { text, error };
+            this.#unsubscribe?.();
+            this.#controller?.destroy();
+            this.#steps.clear();
+            const controller = createConnectController({
+                token: this.#source,
+                baseUrl: this.getAttribute('base-url') ?? undefined,
+                platforms: parsePlatformList(this.getAttribute('platforms')),
+                mode: this.getAttribute('mode') === 'redirect' ? 'redirect' : 'popup',
+                labels: this.#labels,
+                onLoad: (detail) => this.#emit('flung-load', detail),
+                onConnect: (detail) => this.#emit('flung-connect', detail),
+                onDisconnect: (detail) => this.#emit('flung-disconnect', detail),
+                onError: (detail) => this.#emit('flung-error', detail),
+            });
+            this.#controller = controller;
+            this.#unsubscribe = controller.subscribe(() => this.#render());
             this.#render();
         }
         #emit(type, detail) {
             this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
         }
         #render() {
+            const state = this.state;
+            const labels = state.labels;
+            const layout = LAYOUTS.find((value) => value === this.getAttribute('layout')) ?? 'list';
             const active = this.#root.activeElement instanceof HTMLElement ? (this.#root.activeElement.dataset['key'] ?? null) : null;
-            const list = html('ul', { class: 'list', part: 'list' }, ...this.#platforms.map((platform) => this.#platformRow(platform)));
-            const message = html('p', { class: this.#message.error ? 'message error' : 'message', part: 'message', role: 'status', 'aria-live': 'polite' }, this.#message.text);
-            const panel = html('section', { class: 'panel', part: 'panel', 'aria-label': this.#labels.panel }, list, message, this.#footer());
-            this.#root.replaceChildren(html('style', {}, STYLES), panel);
-            const key = this.#focus ?? active;
-            this.#focus = null;
-            if (key !== null)
-                this.#root.querySelector(`[data-key="${key}"]`)?.focus();
+            const tiles = this.getAttribute('variants') === 'tiles';
+            const list = html('ul', { class: 'list', part: 'list' }, ...state.platforms.flatMap((item) => this.#platformRows(item, labels, tiles)));
+            const empty = state.message.text === '';
+            const message = html('p', { class: state.message.error ? 'message error' : 'message', part: state.message.error ? 'message message-error' : 'message', role: 'status', 'aria-live': 'polite', hidden: empty }, state.message.text);
+            const panel = html('section', { class: 'panel', part: 'panel', 'data-layout': layout, 'aria-label': labels.panel }, list, message, this.#footer(labels));
+            const styles = this.hasAttribute('unstyled') ? BASE_STYLES + TOOLTIP_BASE_STYLES : STYLES + TOOLTIP_BASE_STYLES + TOOLTIP_STYLES;
+            // The element a tooltip points at is about to be replaced, so the tooltip goes with it.
+            this.#tooltip.hide();
+            this.#root.replaceChildren(html('style', {}, styles), panel, this.#tooltip.element);
+            this.#placeFocus(state, active);
+            this.dispatchEvent(new CustomEvent('flung-change', { detail: { state } }));
+        }
+        /**
+         * Keeps focus where the person is: on the field when a question opens, on the first choice when the platform asks
+         * what to connect, on Keep when a disconnect asks to confirm, and back on Connect when a question or a wait closes.
+         * Otherwise on whatever had it before the panel was drawn again.
+         */
+        #placeFocus(state, active) {
+            let wanted = active;
+            const fallback = [];
+            for (const item of state.platforms) {
+                const before = this.#steps.get(item.platform) ?? { kind: 'idle', variant: null };
+                const now = focusKind(item.step);
+                if (now === before.kind)
+                    continue;
+                if (now === 'handle')
+                    wanted = `handle-${item.platform}`;
+                else if (now === 'approve-link')
+                    wanted = `approve-open-${item.platform}`;
+                else if (now === 'approve-ended')
+                    wanted = `approve-retry-${item.platform}`;
+                else if (now === 'choose')
+                    wanted = `choose-${item.platform}-personal`;
+                else if (now === 'confirm')
+                    wanted = `keep-${item.platform}`;
+                // Back to the Connect that started it: a variant's own tile, else the platform's.
+                else if (now === 'idle')
+                    fallback.push(connectKey(item.platform, before.variant), connectKey(item.platform, null));
+            }
+            this.#steps = new Map(state.platforms.map((item) => [item.platform, { kind: focusKind(item.step), variant: item.step.kind === 'waiting' || item.step.kind === 'approve' ? item.step.variant : null }]));
+            const find = (key) => (key === null ? undefined : [...this.#root.querySelectorAll('[data-key]')].find((node) => node.dataset['key'] === key));
+            (find(wanted) ?? (active !== null ? fallback.map(find).find((node) => node !== undefined) : undefined))?.focus();
+        }
+        /**
+         * A platform's rows: one, or with `variants="tiles"` one per way it connects (LinkedIn, then LinkedIn Page), each with
+         * its own accounts. A platform that connects only through a variant is drawn as that variant's tile.
+         */
+        #platformRows(item, labels, tiles) {
+            const slot = `platform-${item.platform}`;
+            if (item.variants.length === 0)
+                return [this.#platformRow(item, { variant: null, accounts: item.accounts }, labels, { chooser: false, extra: true, slot })];
+            if (!tiles) {
+                const variant = item.connectable ? null : (item.variants[0] ?? null);
+                return [this.#platformRow(item, { variant, accounts: item.accounts }, labels, { chooser: item.connectable, extra: true, slot })];
+            }
+            const own = item.connectable ? [{ variant: null, accounts: item.accounts.filter((account) => !account.page) }] : [];
+            const split = [...own, ...item.variants.map((variant) => ({ variant, accounts: item.accounts.filter((account) => account.page) }))];
+            const at = Math.max(0, stepTile(item, split));
+            return split.map((tile, index) => this.#platformRow(item, tile, labels, { chooser: false, extra: index === at, slot: index === 0 ? `platform-${item.platform}` : `platform-${item.platform}-${tile.variant ?? ''}` }));
         }
-        #platformRow(platform) {
-            const name = PLATFORM_NAMES[platform];
-            const state = this.#rows.get(platform) ?? { kind: 'idle' };
-            const busy = state.kind === 'waiting';
-            const accounts = this.#accounts.filter((account) => account.platform === platform);
-            const first = accounts.length === 0;
-            const connect = button(first ? this.#labels.connect : this.#labels.connectAnother, `connect-${platform}`, () => this.#askOrStart(platform), { primary: first, disabled: busy, label: `${first ? this.#labels.connect : this.#labels.connectAnother} ${name}` });
-            const count = first ? this.#labels.notConnected : format(this.#labels.connectedCount, { count: String(accounts.length) });
-            const title = html('span', { class: 'title' }, html('span', { class: 'name', part: 'name' }, name), html('span', { class: first ? 'count' : 'count on' }, count));
-            const row = html('div', { class: 'row' }, html('span', { class: 'badge', part: 'badge', 'aria-hidden': 'true' }, mark(PLATFORM_MARKS[platform].path)), title, connect);
-            const items = accounts.map((account) => this.#accountRow(account, busy));
-            return html('li', { class: 'platform', part: 'platform', 'data-platform': platform }, row, items.length === 0 ? null : html('ul', { class: 'accounts' }, ...items), this.#rowExtra(platform, state));
+        /**
+         * One tile: mark, name, Connect, and its accounts. `chooser` makes Connect ask what to connect; `extra` puts the
+         * platform's question, wait or confirm under it; `slot` names the slot a page's own row goes in.
+         */
+        #platformRow(item, tile, labels, options) {
+            const { chooser } = options;
+            const { platform, busy, step } = item;
+            const { variant } = tile;
+            const name = variant === null ? item.name : format(labels.pagesName, { platform: item.name });
+            const first = tile.accounts.length === 0;
+            const text = first ? labels.connect : labels.connectAnother;
+            const choosing = chooser && step.kind === 'choose';
+            // With a chooser, Connect opens the question and closes it again; a tile connects its own way straight away.
+            const onConnect = () => (choosing ? this.#controller?.cancel(platform) : this.#controller?.connect(platform, chooser ? {} : { variant }));
+            const connect = button(text, connectKey(platform, variant), 'connect', onConnect, {
+                variant: first ? 'primary' : 'secondary',
+                disabled: busy,
+                label: `${text} ${name}`,
+                ...(chooser ? { expanded: choosing, controls: `choose-${platform}` } : {}),
+            });
+            const count = first ? labels.notConnected : format(labels.connectedCount, { count: String(tile.accounts.length) });
+            const title = html('span', { class: 'title', part: 'title' }, html('span', { class: 'name', part: 'name' }, name), html('span', { class: first ? 'count' : 'count on', part: first ? 'count' : 'count count-connected' }, count));
+            const badge = html('span', { class: 'badge', part: 'badge', 'aria-hidden': 'true' }, mark(PLATFORM_MARKS[platform].path));
+            const row = html('div', { class: 'row', part: 'row' }, html('slot', { name: options.slot }, badge, title, connect));
+            const items = tile.accounts.map((account) => this.#accountRow(account, busy, labels));
+            const parts = variant === null ? `platform platform-${platform}` : `platform platform-${platform} platform-${platform}-${variant}`;
+            return html('li', { class: 'platform', part: parts, 'data-platform': platform, 'data-variant': variant ?? undefined }, row, items.length === 0 ? null : html('ul', { class: 'accounts', part: 'accounts' }, ...items), options.extra ? this.#rowExtra(item, labels) : null);
         }
-        #accountRow(account, busy) {
-            const due = account.reconnectBy === null ? null : new Date(account.reconnectBy);
-            const status = account.status === 'needs_reconnect' ? this.#labels.needsReconnect : due !== null && due.getTime() - Date.now() < SOON_MS ? format(this.#labels.reconnectBy, { date: due.toLocaleDateString(undefined, { day: 'numeric', month: 'short' }) }) : null;
-            const reconnect = status === null ? null : button(this.#labels.reconnect, `reconnect-${account.id}`, () => this.#start(account.platform, account, undefined), { warning: true, disabled: busy });
-            const disconnect = button(this.#labels.disconnect, `disconnect-${account.id}`, () => this.#confirm(account), { quiet: true, disabled: busy, label: `${this.#labels.disconnect} ${displayName(account)}` });
-            return html('li', { class: 'account', part: 'account', 'data-account': account.id }, html('span', { class: 'who' }, html('span', { class: 'handle', title: displayName(account) }, displayName(account)), status === null ? null : html('span', { class: 'status', part: 'status' }, status)), html('span', { class: 'actions' }, reconnect, disconnect));
+        #accountRow(item, busy, labels) {
+            const { account } = item;
+            const status = item.reconnect === null ? null : item.reconnect.reason === 'needs_reconnect' ? labels.needsReconnect : format(labels.reconnectBy, { date: new Date(item.reconnect.by).toLocaleDateString(undefined, { day: 'numeric', month: 'short' }) });
+            const reconnect = status === null ? null : button(labels.reconnect, `reconnect-${account.id}`, 'reconnect', () => this.#controller?.reconnect(account.id), { disabled: busy, label: `${labels.reconnect} ${item.name}` });
+            const disconnect = button(labels.disconnect, `disconnect-${account.id}`, 'disconnect', () => this.#controller?.requestDisconnect(account.id), { variant: 'quiet', disabled: busy, label: `${labels.disconnect} ${item.name}` });
+            const names = html('span', { class: 'names', part: 'account-names' }, html('span', { class: 'handle', part: 'account-name', 'data-tooltip': item.displayName, 'data-tooltip-truncated': true }, item.displayName), item.username === null ? null : html('span', { class: 'username', part: 'account-username', 'data-tooltip': `@${item.username}`, 'data-tooltip-truncated': true }, `@${item.username}`));
+            const tag = item.page ? html('span', { class: 'tag', part: 'tag tag-page' }, labels.pageTag) : null;
+            const who = html('span', { class: 'who', part: 'account-details' }, names, tag, status === null ? null : html('span', { class: 'status', part: 'status' }, status));
+            return html('li', { class: 'account', part: 'account', 'data-account': account.id }, html('slot', { name: `account-${account.id}` }, avatar(item), who, html('span', { class: 'actions', part: 'actions' }, reconnect, disconnect)));
         }
         /** Flung's mark and name, linking to its docs, unless the page set `branding="none"`. */
-        #footer() {
+        #footer(labels) {
             if (this.getAttribute('branding') === 'none')
                 return null;
-            const link = html('a', { href: 'https://docs.flung.dev', target: '_blank', rel: 'noopener' }, mark(FLUNG_MARK.path, FLUNG_MARK.viewBox, 'flung'), 'Flung');
-            return html('p', { class: 'footer', part: 'footer' }, this.#labels.securedBy, link);
+            const link = html('a', { href: 'https://docs.flung.dev', target: '_blank', rel: 'noopener', part: 'footer-link' }, mark(FLUNG_MARK.path, { viewBox: FLUNG_MARK.viewBox, className: 'flung', part: 'footer-mark', size: 14 }), 'Flung');
+            return html('p', { class: 'footer', part: 'footer' }, labels.securedBy, link);
         }
-        #rowExtra(platform, state) {
-            const name = PLATFORM_NAMES[platform];
-            if (state.kind === 'handle') {
+        #rowExtra(item, labels) {
+            const { platform, name, step } = item;
+            if (step.kind === 'handle') {
                 const id = `handle-${platform}`;
-                const required = HANDLE_PROMPT[platform]?.required === true;
-                const input = html('input', { id, name: 'handle', 'data-key': id, autocomplete: 'username', spellcheck: 'false', required });
-                const form = html('form', { class: 'form', part: 'form' }, html('label', { for: id }, platform === 'mastodon' ? this.#labels.handleMastodon : this.#labels.handleBluesky), input, html('button', { type: 'submit', class: 'primary', 'data-key': `continue-${platform}` }, this.#labels.continue), button(this.#labels.cancel, `cancel-${platform}`, () => this.#idle(platform)));
+                const input = html('input', { id, name: 'handle', part: 'input', 'data-key': id, autocomplete: 'username', spellcheck: 'false', required: step.required });
+                const submit = html('button', { type: 'submit', class: 'primary', part: 'button button-primary button-continue', 'data-key': `continue-${platform}` }, labels.continue);
+                const form = html('form', { class: 'form', part: 'form' }, html('label', { for: id, part: 'label' }, platform === 'mastodon' ? labels.handleMastodon : labels.handleBluesky), input, submit, button(labels.cancel, `cancel-${platform}`, 'cancel', () => this.#controller?.cancel(platform)));
                 form.addEventListener('submit', (event) => {
                     event.preventDefault();
-                    const handle = input.value.trim();
-                    this.#start(platform, null, handle === '' ? undefined : handle);
+                    this.#controller?.submitHandle(platform, input.value);
                 });
                 return form;
             }
-            if (state.kind === 'waiting') {
-                const link = state.blockedUrl === null ? null : html('a', { href: state.blockedUrl, target: '_blank', rel: 'noopener' }, format(this.#labels.openSignIn, { platform: name }));
-                const text = state.blockedUrl === null ? format(this.#labels.waiting, { platform: name }) : `${format(this.#labels.blocked, { platform: name })} `;
-                return html('p', { class: 'note', part: 'note' }, html('span', { class: 'spinner', 'aria-hidden': 'true' }), html('span', { class: 'note-text' }, text, link), button(this.#labels.cancel, `cancel-${platform}`, () => (state.abort.abort(), this.#idle(platform))));
+            if (step.kind === 'choose')
+                return this.#chooser(item, step.variants, labels);
+            if (step.kind === 'waiting') {
+                const link = step.blockedUrl === null ? null : html('a', { href: step.blockedUrl, target: '_blank', rel: 'noopener', part: 'link' }, format(labels.openSignIn, { platform: name }));
+                const text = step.blockedUrl === null ? format(labels.waiting, { platform: name }) : `${format(labels.blocked, { platform: name })} `;
+                return html('p', { class: 'note', part: 'note' }, html('span', { class: 'spinner', part: 'spinner', 'aria-hidden': 'true' }), html('span', { class: 'note-text', part: 'note-text' }, text, link), button(labels.cancel, `cancel-${platform}`, 'cancel', () => this.#controller?.cancel(platform)));
             }
-            if (state.kind === 'confirm') {
-                return html('div', { class: 'confirm', part: 'confirm' }, html('p', {}, format(this.#labels.confirmDisconnect, { account: displayName(state.account) })), button(this.#labels.disconnect, `confirm-${platform}`, () => void this.#disconnect(state.account), { danger: true }), button(this.#labels.keep, `keep-${platform}`, () => this.#idle(platform)));
+            if (step.kind === 'approve')
+                return this.#approval(item, step, labels);
+            if (step.kind === 'confirm') {
+                return html('div', { class: 'confirm', part: 'confirm' }, html('p', { part: 'confirm-text' }, format(labels.confirmDisconnect, { account: step.account.name })), button(labels.disconnect, `confirm-${platform}`, 'confirm', () => void this.#controller?.confirmDisconnect(platform), { variant: 'danger' }), button(labels.keep, `keep-${platform}`, 'keep', () => this.#controller?.cancel(platform)));
             }
             return null;
         }
-        #askOrStart(platform) {
-            if (HANDLE_PROMPT[platform] === undefined)
-                return this.#start(platform, null, undefined);
-            this.#rows.set(platform, { kind: 'handle' });
-            this.#focus = `handle-${platform}`;
-            this.#render();
-        }
-        #confirm(account) {
-            this.#rows.set(account.platform, { kind: 'confirm', account });
-            this.#focus = `keep-${account.platform}`;
-            this.#render();
+        /**
+         * An approval in the platform's phone app (Farcaster): the line saying so, Open Warpcast, a QR code of the same link
+         * for a computer, and the wait. Ended, why it ended, with Try again and Cancel.
+         */
+        #approval(item, step, labels) {
+            const { platform, name } = item;
+            const cancel = button(labels.cancel, `cancel-${platform}`, 'cancel', () => this.#controller?.cancel(platform));
+            if (step.ended !== null) {
+                const why = step.ended.status === 'expired' ? format(labels.approvalExpired, { platform: name }) : step.ended.message === '' ? format(labels.approvalDeclined, { platform: name }) : format(labels.approvalFailed, { platform: name, message: step.ended.message });
+                const accountId = step.accountId;
+                const retry = button(labels.tryAgain, `approve-retry-${platform}`, 'retry', () => (accountId === null ? this.#controller?.connect(platform) : this.#controller?.reconnect(accountId)), { variant: 'primary' });
+                return html('div', { class: 'approve ended', part: 'approve approve-ended' }, html('p', { class: 'approve-text', part: 'approve-text', role: 'alert' }, why), html('div', { class: 'approve-actions', part: 'approve-actions' }, retry, cancel));
+            }
+            const url = step.approvalUrl;
+            const go = url === null
+                ? null
+                : html('div', { class: 'approve-go', part: 'approve-go' }, html('a', { class: 'approve-open', href: url, target: '_blank', rel: 'noopener', part: 'link link-approval', 'data-key': `approve-open-${platform}` }, labels.openApproval), html('div', { class: 'approve-scan', part: 'approve-scan' }, qrCode(url, format(labels.approvalQr, { platform: name })), html('p', { class: 'approve-hint', part: 'approve-hint' }, labels.scanApproval)));
+            return html('div', { class: 'approve', part: 'approve' }, html('p', { class: 'approve-text', part: 'approve-text' }, format(labels.approve, { platform: name })), go, html('p', { class: 'note', part: 'note', role: 'status' }, html('span', { class: 'spinner', part: 'spinner', 'aria-hidden': 'true' }), html('span', { class: 'note-text', part: 'note-text' }, labels.awaitingApproval), cancel));
         }
-        #idle(platform) {
-            this.#rows.set(platform, { kind: 'idle' });
-            this.#focus = `connect-${platform}`;
-            this.#render();
+        /**
+         * What to connect, when a platform offers its own connect and a variant: a group of two buttons, each with an icon,
+         * a name and a line under it (read as the button's description). Arrow keys move between them, Escape closes the
+         * question, and focus starts on the first.
+         */
+        #chooser(item, variants, labels) {
+            const { platform } = item;
+            const titleId = `choose-title-${platform}`;
+            const option = (variant, key, icon, name, description) => {
+                const nameId = `${key}-name`;
+                const descriptionId = `${key}-description`;
+                const element = html('button', { type: 'button', class: 'option', part: `button button-option button-option-${variant ?? 'personal'}`, 'data-key': key, 'aria-labelledby': nameId, 'aria-describedby': descriptionId }, html('span', { class: 'option-icon', part: 'option-icon', 'aria-hidden': 'true' }, mark(icon, { className: 'option-mark', part: 'option-mark', size: 18 })), html('span', { class: 'option-text', part: 'option-text' }, html('span', { class: 'option-name', part: 'option-name', id: nameId }, name), html('span', { class: 'option-description', part: 'option-description', id: descriptionId }, description)));
+                element.addEventListener('click', () => this.#controller?.connect(platform, { variant }));
+                return element;
+            };
+            const options = [
+                option(null, `choose-${platform}-personal`, CHOICE_MARKS.personal, labels.variantPersonal, labels.variantPersonalDescription),
+                ...variants.map((variant) => option(variant, `choose-${platform}-${variant}`, CHOICE_MARKS[variant], labels.variantPages, labels.variantPagesDescription)),
+            ];
+            const group = html('div', { class: 'choose', part: 'choose', id: `choose-${platform}`, role: 'group', 'aria-labelledby': titleId }, html('p', { class: 'choose-title', part: 'choose-title', id: titleId }, format(labels.chooseVariant, { platform: item.name })), html('div', { class: 'options', part: 'choose-options' }, ...options), button(labels.cancel, `cancel-${platform}`, 'cancel', () => this.#controller?.cancel(platform)));
+            group.addEventListener('keydown', (event) => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    this.#controller?.cancel(platform);
+                    return;
+                }
+                const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+                const at = options.indexOf(event.target);
+                if (step === undefined || at === -1)
+                    return;
+                event.preventDefault();
+                options[(at + step + options.length) % options.length]?.focus();
+            });
+            return group;
         }
     };
 }