@flung.dev/connect 0.1.1 → 0.3.0

package/dist/element/flung-connect.js

@@ -1,24 +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 } from './dom.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'];
+        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;
@@ -32,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)
@@ -48,204 +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 === 'platforms')
-                void this.#load();
-            else
                 this.#reset();
+            }
+            else if (name === 'base-url')
+                this.#reset();
+            else if (name === 'platforms')
+                this.#controller?.configure({ platforms: parsePlatformList(next) });
+            else if (name === 'mode')
+                this.#controller?.configure({ mode: next === 'redirect' ? 'redirect' : 'popup' });
+            else
+                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 }));
-            }
+            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();
         }
-        /** 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 ?? '' });
-            }
+        #emit(type, detail) {
+            this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
         }
-        /** 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 });
-            }
+        #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 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 } }));
         }
-        /** 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 });
+        /**
+         * 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));
             }
-            catch (error) {
-                this.#fail(error, (message) => message);
+            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();
+        }
+        /**
+         * 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 ?? ''}` }));
         }
-        #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);
+        /**
+         * 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);
         }
-        #say(text, error = false) {
-            this.#message = { text, error };
-            this.#render();
+        #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)));
         }
-        #emit(type, detail) {
-            this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+        /** Flung's mark and name, linking to its docs, unless the page set `branding="none"`. */
+        #footer(labels) {
+            if (this.getAttribute('branding') === 'none')
+                return null;
+            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);
         }
-        #render() {
-            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.#root.replaceChildren(html('style', {}, STYLES), panel);
-            const key = this.#focus ?? active;
-            this.#focus = null;
-            if (key !== null)
-                this.#root.querySelector(`[data-key="${key}"]`)?.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 connect = button(accounts.length === 0 ? this.#labels.connect : this.#labels.connectAnother, `connect-${platform}`, () => this.#askOrStart(platform), { primary: accounts.length === 0, disabled: busy, label: `${accounts.length === 0 ? this.#labels.connect : this.#labels.connectAnother} ${name}` });
-            const row = html('div', { class: 'row' }, html('span', { class: 'badge', part: 'badge', 'aria-hidden': 'true' }, name.slice(0, 2)), html('span', { class: 'name', part: 'name' }, name), 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));
-        }
-        #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() }) : null;
-            return html('li', { class: 'account', part: 'account', 'data-account': account.id }, html('span', { class: 'who' }, displayName(account)), status === null ? null : html('span', { class: 'status', part: 'status' }, status), status === null ? null : button(this.#labels.reconnect, `reconnect-${account.id}`, () => this.#start(account.platform, account, undefined), { disabled: busy }), button(this.#labels.disconnect, `disconnect-${account.id}`, () => this.#confirm(account), { danger: true, disabled: busy, label: `${this.#labels.disconnect} ${displayName(account)}` }));
-        }
-        #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' }, 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

@@ -0,0 +1,17 @@
+import type { Platform } from '../core/types.js';
+/** A platform's mark on a 24 by 24 grid, and its brand colour as six hex digits. */
+export interface PlatformMark {
+    readonly path: string;
+    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: '-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

@@ -0,0 +1,35 @@
+export const PLATFORM_MARKS = {
+    // Simple Icons x (CC0 1.0)
+    x: { hex: '000000', path: 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z' },
+    // Simple Icons instagram (CC0 1.0)
+    instagram: { hex: 'FF0069', path: 'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077' },
+    // Simple Icons facebook (CC0 1.0)
+    facebook: { hex: '0866FF', path: 'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z' },
+    // Simple Icons threads (CC0 1.0)
+    threads: { hex: '000000', path: 'M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z' },
+    // Boxicons bxl-linkedin (MIT)
+    linkedin: { hex: '0A66C2', path: 'M2.7949999999999995 5.009a2.188 2.188 0 1 0 4.376 0a2.188 2.188 0 1 0 -4.376 0zM9.237 8.855v12.139h3.769v-6.003c0-1.584.298-3.118 2.262-3.118 1.937 0 1.961 1.811 1.961 3.218v5.904H21v-6.657c0-3.27-.704-5.783-4.526-5.783-1.835 0-3.065 1.007-3.568 1.96h-.051v-1.66H9.237zm-6.142 0H6.87v12.139H3.095z' },
+    // Simple Icons tiktok (CC0 1.0)
+    tiktok: { hex: '000000', path: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z' },
+    // Simple Icons youtube (CC0 1.0)
+    youtube: { hex: 'FF0000', path: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' },
+    // Simple Icons pinterest (CC0 1.0)
+    pinterest: { hex: 'BD081C', path: 'M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z' },
+    // Simple Icons bluesky (CC0 1.0)
+    bluesky: { hex: '1185FE', path: 'M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026' },
+    // Simple Icons mastodon (CC0 1.0)
+    mastodon: { hex: '6364FF', path: 'M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z' },
+    // Simple Icons discord (CC0 1.0)
+    discord: { hex: '5865F2', path: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z' },
+    // 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: '-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 = "\n:host {\n  --flung-font: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --flung-text: #18181b;\n  --flung-muted: #52525b;\n  --flung-surface: #ffffff;\n  --flung-raised: #f4f4f5;\n  --flung-border: #d4d4d8;\n  --flung-accent: #18181b;\n  --flung-accent-text: #ffffff;\n  --flung-danger: #b91c1c;\n  --flung-warning: #a16207;\n  --flung-radius: 8px;\n  display: block;\n  font: 15px/1.45 var(--flung-font);\n  color: var(--flung-text);\n}\n:host([hidden]) { display: none; }\n@media (prefers-color-scheme: dark) {\n  :host(:not([theme=\"light\"])) {\n    --flung-text: #f4f4f5;\n    --flung-muted: #a1a1aa;\n    --flung-surface: #18181b;\n    --flung-raised: #27272a;\n    --flung-border: #3f3f46;\n    --flung-accent: #f4f4f5;\n    --flung-accent-text: #18181b;\n    --flung-danger: #f87171;\n    --flung-warning: #facc15;\n  }\n}\n:host([theme=\"dark\"]) {\n  --flung-text: #f4f4f5;\n  --flung-muted: #a1a1aa;\n  --flung-surface: #18181b;\n  --flung-raised: #27272a;\n  --flung-border: #3f3f46;\n  --flung-accent: #f4f4f5;\n  --flung-accent-text: #18181b;\n  --flung-danger: #f87171;\n  --flung-warning: #facc15;\n}\n* { box-sizing: border-box; }\n.panel { background: var(--flung-surface); border: 1px solid var(--flung-border); border-radius: var(--flung-radius); overflow: hidden; }\nul { list-style: none; margin: 0; padding: 0; }\n.platform { padding: 12px 14px; border-top: 1px solid var(--flung-border); }\n.platform:first-child { border-top: 0; }\n.row { display: flex; align-items: center; gap: 10px; min-height: 36px; }\n.badge { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--flung-raised); font-weight: 600; font-size: 13px; }\n.name { flex: 1; min-width: 0; font-weight: 600; }\n.accounts { margin: 6px 0 0 42px; }\n.account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; }\n.who { flex: 1; min-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.status { font-size: 13px; color: var(--flung-warning); }\n.note { margin: 8px 0 0 42px; color: var(--flung-muted); font-size: 14px; }\n.note a { color: inherit; }\n.confirm, .form { margin: 8px 0 0 42px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.confirm p { flex-basis: 100%; margin: 0; }\n.form label { flex-basis: 100%; font-size: 14px; color: var(--flung-muted); }\n.form input { flex: 1; min-width: 10rem; font: inherit; color: inherit; background: var(--flung-surface); border: 1px solid var(--flung-border); border-radius: calc(var(--flung-radius) - 2px); padding: 6px 10px; }\nbutton { font: inherit; font-size: 14px; cursor: pointer; border-radius: calc(var(--flung-radius) - 2px); padding: 6px 12px; border: 1px solid var(--flung-border); background: transparent; color: inherit; }\nbutton.primary { background: var(--flung-accent); border-color: var(--flung-accent); color: var(--flung-accent-text); }\nbutton.danger { color: var(--flung-danger); border-color: currentColor; }\nbutton:disabled { opacity: .55; cursor: default; }\nbutton:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--flung-accent); outline-offset: 2px; }\n.message { margin: 0; padding: 10px 14px; border-top: 1px solid var(--flung-border); color: var(--flung-muted); font-size: 14px; }\n.message:empty { display: none; }\n.message.error { color: var(--flung-danger); }\n@media (prefers-reduced-motion: no-preference) { button { transition: opacity .15s; } }\n";
+export declare const STYLES: string;