@flung.dev/connect 0.1.2 → 0.3.0

package/dist/element/flung-connect.js

@@ -1,25 +1,38 @@
-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 } 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.accountId : null;
+    if (accountId !== null)
+        return tiles.findIndex((tile) => tile.accounts.some((account) => account.account.id === accountId));
+    if (step.kind === 'waiting')
+        return tiles.findIndex((tile) => tile.variant === step.variant);
+    return 0;
+}
+/** 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 +46,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 +74,209 @@ 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 = item.step.kind;
+                if (now === before.kind)
+                    continue;
+                if (now === 'handle')
+                    wanted = `handle-${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: item.step.kind, variant: item.step.kind === 'waiting' ? 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();
         }
-        #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));
+        /**
+         * 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 ?? ''}` }));
+        }
+        /**
+         * 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 === '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();
-        }
-        #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;
         }
     };
 }

package/dist/element/marks.d.ts

@@ -5,8 +5,13 @@ export interface PlatformMark {
     readonly hex: string;
 }
 export declare const PLATFORM_MARKS: Readonly<Record<Platform, PlatformMark>>;
+/** The icons of the choice between a personal profile and a company page, on a 24 by 24 grid (Boxicons, MIT). */
+export declare const CHOICE_MARKS: {
+    readonly personal: 'M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z';
+    readonly pages: 'M19 2H9c-1.103 0-2 .897-2 2v6H5c-1.103 0-2 .897-2 2v9a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4c0-1.103-.897-2-2-2zM5 12h6v8H5v-8zm14 8h-6v-8c0-1.103-.897-2-2-2H9V4h10v16zM11 6h2v2h-2zm4 0h2v2h-2zm0 4.031h2V12h-2zM15 14h2v2h-2zm-8 .001h2v2H7z';
+};
 /** Flung's mark, from https://assets.flung.dev/brand/logo/flung-mark-on-light.svg. */
 export declare const FLUNG_MARK: {
-    readonly viewBox: '0 0 500 500';
-    readonly path: 'M 189.525 16.874 C 190.808 16.873 192.091 16.873 193.413 16.872 C 196.941 16.869 200.467 16.873 203.992 16.878 C 207.81 16.884 211.625 16.881 215.442 16.881 C 222.042 16.88 228.642 16.884 235.242 16.891 C 244.784 16.899 254.326 16.902 263.868 16.904 C 279.352 16.906 294.837 16.913 310.322 16.924 C 325.357 16.933 340.393 16.941 355.428 16.947 C 356.82 16.947 356.82 16.947 358.24 16.947 C 362.896 16.949 367.55 16.95 372.206 16.951 C 410.783 16.963 449.359 16.982 487.935 17.007 C 487.954 19.653 487.967 22.299 487.978 24.945 C 487.986 26.06 487.986 26.06 487.994 27.198 C 488.011 33.049 487.504 38.516 486.278 44.226 C 485.989 45.603 485.989 45.603 485.694 47.009 C 479.753 73.338 467.128 96.459 449.249 116.488 C 448.329 117.521 447.408 118.554 446.46 119.619 C 434.313 132.43 419.889 141.304 403.93 148.543 C 402.995 148.995 402.061 149.447 401.097 149.912 C 387.969 155.816 373.086 157.455 358.886 158.492 C 337.903 160.08 318.12 166.235 302.238 180.598 C 301.228 181.476 301.228 181.476 300.196 182.373 C 290.186 191.634 284.215 203.986 280.409 216.88 C 276.039 231.615 269.265 243.914 255.779 252.324 C 245.106 257.877 235.96 259.309 224.105 259.493 C 207.259 259.997 192.415 263.213 180.305 275.865 C 171.548 286.39 167.399 299.632 168.491 313.239 C 169.76 324.473 175.361 336.705 183.966 344.189 C 197.7 354.156 210.093 357.822 227.074 356.348 C 240.814 353.699 252.153 345.546 260.235 334.242 C 264.938 325.96 267.358 317.705 268.395 308.295 C 270.357 290.773 276.223 278.048 289.803 266.539 C 299.876 258.871 311.257 253.264 324.085 253.285 C 324.795 253.283 325.507 253.282 326.238 253.28 C 328.597 253.276 330.956 253.287 333.315 253.3 C 335.015 253.301 336.714 253.301 338.415 253.3 C 343.014 253.298 347.612 253.311 352.211 253.327 C 357.024 253.34 361.836 253.341 366.649 253.344 C 375.754 253.351 384.859 253.369 393.963 253.391 C 404.333 253.416 414.703 253.429 425.071 253.439 C 446.395 253.463 467.718 253.502 489.041 253.551 C 489.12 263.833 489.178 274.116 489.213 284.399 C 489.231 289.177 489.253 293.955 489.292 298.732 C 489.713 353.119 479.51 398.095 440.406 438.144 C 402.556 475.574 354.507 484.025 303.516 483.908 C 298.647 483.9 293.777 483.908 288.908 483.913 C 280.739 483.918 272.57 483.91 264.401 483.895 C 255.01 483.876 245.619 483.883 236.228 483.901 C 228.105 483.916 219.983 483.918 211.86 483.909 C 207.034 483.904 202.21 483.903 197.384 483.914 C 159.131 483.99 159.131 483.99 143.068 480.146 C 141.987 479.903 140.905 479.66 139.79 479.408 C 137.277 478.822 134.828 478.14 132.36 477.383 C 131.465 477.109 130.569 476.835 129.646 476.552 C 105.884 468.875 84.897 456.337 66.8 439.249 C 65.448 438.112 64.09 436.983 62.724 435.863 C 32.664 410.058 16.633 368.22 12.873 329.721 C 12.432 323.684 12.465 317.647 12.46 311.597 C 12.454 310.143 12.448 308.689 12.443 307.192 C 12.428 303.231 12.422 299.269 12.416 295.309 C 12.413 292.822 12.409 290.335 12.405 287.848 C 12.389 280.032 12.378 272.215 12.374 264.399 C 12.369 255.444 12.35 246.487 12.318 237.531 C 12.294 230.566 12.282 223.6 12.28 216.633 C 12.28 212.495 12.274 208.355 12.254 204.215 C 12.154 182.613 12.574 161.364 18.717 140.46 C 18.991 139.523 19.265 138.584 19.548 137.619 C 27.777 111.087 42.745 89.246 61.273 68.959 C 62.004 68.134 62.735 67.311 63.487 66.463 C 95.594 32.13 143.615 16.748 189.525 16.874 Z';
+    readonly viewBox: '-2 -2 36 36';
+    readonly path: 'M12.942 6.235L21.674 4.058A6.0 6.0 0 0 1 28.947 8.428L29.915 12.309A6.0 6.0 0 0 1 25.545 19.582L16.812 21.76A6.0 6.0 0 0 1 9.539 17.39L8.571 13.508A6.0 6.0 0 0 1 12.942 6.235ZM13.758 19.429L20.55 17.736L14.528 29.131Z M3 12.2H7.4 M2.2 18H5.4';
 };

package/dist/element/marks.js

@@ -24,5 +24,12 @@ export const PLATFORM_MARKS = {
     // Simple Icons farcaster (CC0 1.0)
     farcaster: { hex: '855DCD', path: 'M18.24.24H5.76C2.5789.24 0 2.8188 0 6v12c0 3.1811 2.5789 5.76 5.76 5.76h12.48c3.1812 0 5.76-2.5789 5.76-5.76V6C24 2.8188 21.4212.24 18.24.24m.8155 17.1662v.504c.2868-.0256.5458.1905.5439.479v.5688h-5.1437v-.5688c-.0019-.2885.2576-.5047.5443-.479v-.504c0-.22.1525-.402.358-.458l-.0095-4.3645c-.1589-1.7366-1.6402-3.0979-3.4435-3.0979-1.8038 0-3.2846 1.3613-3.4435 3.0979l-.0096 4.3578c.2276.0424.5318.2083.5395.4648v.504c.2863-.0256.5457.1905.5438.479v.5688H4.3915v-.5688c-.0019-.2885.2575-.5047.5438-.479v-.504c0-.2529.2011-.4548.4536-.4724v-7.895h-.4905L4.2898 7.008l2.6405-.0005V5.0419h9.9495v1.9656h2.8219l-.6091 2.0314h-.4901v7.8949c.2519.0177.453.2195.453.4724' },
 };
+/** The icons of the choice between a personal profile and a company page, on a 24 by 24 grid (Boxicons, MIT). */
+export const CHOICE_MARKS = {
+    // Boxicons bx-user
+    personal: 'M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z',
+    // Boxicons bx-buildings
+    pages: 'M19 2H9c-1.103 0-2 .897-2 2v6H5c-1.103 0-2 .897-2 2v9a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4c0-1.103-.897-2-2-2zM5 12h6v8H5v-8zm14 8h-6v-8c0-1.103-.897-2-2-2H9V4h10v16zM11 6h2v2h-2zm4 0h2v2h-2zm0 4.031h2V12h-2zM15 14h2v2h-2zm-8 .001h2v2H7z',
+};
 /** Flung's mark, from https://assets.flung.dev/brand/logo/flung-mark-on-light.svg. */
-export const FLUNG_MARK = { viewBox: '0 0 500 500', path: 'M 189.525 16.874 C 190.808 16.873 192.091 16.873 193.413 16.872 C 196.941 16.869 200.467 16.873 203.992 16.878 C 207.81 16.884 211.625 16.881 215.442 16.881 C 222.042 16.88 228.642 16.884 235.242 16.891 C 244.784 16.899 254.326 16.902 263.868 16.904 C 279.352 16.906 294.837 16.913 310.322 16.924 C 325.357 16.933 340.393 16.941 355.428 16.947 C 356.82 16.947 356.82 16.947 358.24 16.947 C 362.896 16.949 367.55 16.95 372.206 16.951 C 410.783 16.963 449.359 16.982 487.935 17.007 C 487.954 19.653 487.967 22.299 487.978 24.945 C 487.986 26.06 487.986 26.06 487.994 27.198 C 488.011 33.049 487.504 38.516 486.278 44.226 C 485.989 45.603 485.989 45.603 485.694 47.009 C 479.753 73.338 467.128 96.459 449.249 116.488 C 448.329 117.521 447.408 118.554 446.46 119.619 C 434.313 132.43 419.889 141.304 403.93 148.543 C 402.995 148.995 402.061 149.447 401.097 149.912 C 387.969 155.816 373.086 157.455 358.886 158.492 C 337.903 160.08 318.12 166.235 302.238 180.598 C 301.228 181.476 301.228 181.476 300.196 182.373 C 290.186 191.634 284.215 203.986 280.409 216.88 C 276.039 231.615 269.265 243.914 255.779 252.324 C 245.106 257.877 235.96 259.309 224.105 259.493 C 207.259 259.997 192.415 263.213 180.305 275.865 C 171.548 286.39 167.399 299.632 168.491 313.239 C 169.76 324.473 175.361 336.705 183.966 344.189 C 197.7 354.156 210.093 357.822 227.074 356.348 C 240.814 353.699 252.153 345.546 260.235 334.242 C 264.938 325.96 267.358 317.705 268.395 308.295 C 270.357 290.773 276.223 278.048 289.803 266.539 C 299.876 258.871 311.257 253.264 324.085 253.285 C 324.795 253.283 325.507 253.282 326.238 253.28 C 328.597 253.276 330.956 253.287 333.315 253.3 C 335.015 253.301 336.714 253.301 338.415 253.3 C 343.014 253.298 347.612 253.311 352.211 253.327 C 357.024 253.34 361.836 253.341 366.649 253.344 C 375.754 253.351 384.859 253.369 393.963 253.391 C 404.333 253.416 414.703 253.429 425.071 253.439 C 446.395 253.463 467.718 253.502 489.041 253.551 C 489.12 263.833 489.178 274.116 489.213 284.399 C 489.231 289.177 489.253 293.955 489.292 298.732 C 489.713 353.119 479.51 398.095 440.406 438.144 C 402.556 475.574 354.507 484.025 303.516 483.908 C 298.647 483.9 293.777 483.908 288.908 483.913 C 280.739 483.918 272.57 483.91 264.401 483.895 C 255.01 483.876 245.619 483.883 236.228 483.901 C 228.105 483.916 219.983 483.918 211.86 483.909 C 207.034 483.904 202.21 483.903 197.384 483.914 C 159.131 483.99 159.131 483.99 143.068 480.146 C 141.987 479.903 140.905 479.66 139.79 479.408 C 137.277 478.822 134.828 478.14 132.36 477.383 C 131.465 477.109 130.569 476.835 129.646 476.552 C 105.884 468.875 84.897 456.337 66.8 439.249 C 65.448 438.112 64.09 436.983 62.724 435.863 C 32.664 410.058 16.633 368.22 12.873 329.721 C 12.432 323.684 12.465 317.647 12.46 311.597 C 12.454 310.143 12.448 308.689 12.443 307.192 C 12.428 303.231 12.422 299.269 12.416 295.309 C 12.413 292.822 12.409 290.335 12.405 287.848 C 12.389 280.032 12.378 272.215 12.374 264.399 C 12.369 255.444 12.35 246.487 12.318 237.531 C 12.294 230.566 12.282 223.6 12.28 216.633 C 12.28 212.495 12.274 208.355 12.254 204.215 C 12.154 182.613 12.574 161.364 18.717 140.46 C 18.991 139.523 19.265 138.584 19.548 137.619 C 27.777 111.087 42.745 89.246 61.273 68.959 C 62.004 68.134 62.735 67.311 63.487 66.463 C 95.594 32.13 143.615 16.748 189.525 16.874 Z' };
+export const FLUNG_MARK = { viewBox: '-2 -2 36 36', path: 'M12.942 6.235L21.674 4.058A6.0 6.0 0 0 1 28.947 8.428L29.915 12.309A6.0 6.0 0 0 1 25.545 19.582L16.812 21.76A6.0 6.0 0 0 1 9.539 17.39L8.571 13.508A6.0 6.0 0 0 1 12.942 6.235ZM13.758 19.429L20.55 17.736L14.528 29.131Z M3 12.2H7.4 M2.2 18H5.4' };

package/dist/element/styles.d.ts

@@ -1,6 +1,8 @@
+/** What `unstyled` keeps: the element is a block, and `hidden` hides it. Everything else is the page's, through `::part()`. */
+export declare const BASE_STYLES = "\n:host { display: block; }\n:host([hidden]) { display: none; }\n[hidden] { display: none !important; }\n";
 /**
- * The panel's look, inside its shadow root. Every colour, the font and the corner radius are `--flung-*` properties a
- * page can set on the element; each part has a `part` name for `::part()`. Follows the page's light or dark scheme
- * unless `theme` says which.
+ * The panel's look, inside its shadow root. Colours, type, spacing, sizes, radii, borders, shadows and the focus ring
+ * are `--flung-*` properties a page can set on the element; each piece has a `part` name for `::part()`. Follows the
+ * page's light or dark scheme unless `theme` says which. `layout` picks `list`, `grid` or `compact`.
  */
 export declare const STYLES: string;