@flung.dev/connect 0.3.0 → 0.4.0

package/README.md

@@ -158,6 +158,7 @@ Set any of these on the element. Each has a default for light and dark.
 | `--flung-focus-width` | `2px` | Its width. |
 | `--flung-focus-offset` | `2px` | Its gap from the control. |
 | `--flung-grid-min` | `16rem` | The narrowest card in the `grid` layout. |
+| `--flung-qr-size` | `132px` | The QR code of an approval link (Farcaster). |
 | `--flung-tooltip-background` | `--flung-text` | The tooltip that shows an account name cut short. |
 | `--flung-tooltip-text` | `--flung-surface` | Its words. |
 | `--flung-tooltip-radius` | `--flung-radius-inner` | Its corners. |
@@ -196,6 +197,7 @@ Every piece the panel draws has a `part` name for `::part()`. Pieces with a kind
 | `tag`, `tag-page` | The **Page** tag beside a company page. |
 | `form`, `label`, `input` | The Mastodon server or Bluesky handle question. |
 | `note`, `spinner`, `note-text`, `link` | The wait, and the sign-in link when the browser blocked the window. |
+| `approve`, `approve-ended`, `approve-text`, `approve-go`, `link-approval`, `approve-scan`, `qr`, `approve-hint`, `approve-actions`, `button-retry` | An approval in the platform's phone app (Farcaster): the line, Open Warpcast, the QR code, and Try again once it ended. |
 | `confirm`, `confirm-text` | The question before a disconnect. |
 | `message`, `message-error` | The status line under the list. It has `hidden` when empty. |
 | `footer`, `footer-link`, `footer-mark` | "Secured by Flung". |
@@ -298,12 +300,13 @@ panel.subscribe(() => draw(panel.getState()))
 | `configure({ platforms, mode, labels })` | Changes those options while shown. |
 | `destroy()` | Stops every wait and listener. |
 
-`ConnectState` has `hasToken`, `loading`, `loaded`, `platforms` (each with `name`, `accounts`, `step`, `busy`, `handlePrompt`, `connectable` and `variants`), `accounts`, `notice` (the last thing that happened, as data), `message` (that notice, or the loading, empty or no-token line, in the labels' words) and `labels`. Each account item has `displayName`, `username` (the handle when it differs), `avatarUrl` (only ever `https`), `initial`, `page` (a LinkedIn company page) and `reconnect`. A step is `idle`, `handle` (with `required`), `choose` (with `variants`), `waiting` (with `blockedUrl` and `variant`) or `confirm` (with `account`).
+`ConnectState` has `hasToken`, `loading`, `loaded`, `platforms` (each with `name`, `accounts`, `step`, `busy`, `handlePrompt`, `connectable`, `variants` and `connectFlow`), `accounts`, `notice` (the last thing that happened, as data), `message` (that notice, or the loading, empty or no-token line, in the labels' words) and `labels`. Each account item has `displayName`, `username` (the handle when it differs), `avatarUrl` (only ever `https`), `initial`, `page` (a LinkedIn company page) and `reconnect`. A step is `idle`, `handle` (with `required`), `choose` (with `variants`), `waiting` (with `blockedUrl` and `variant`), `approve` (with `approvalUrl`, `accountId` and `ended`) or `confirm` (with `account`). `encodeQr(text)` gives the modules of a QR code for an `approve` step's link.
 
 ## Behaviour worth knowing
 
 - **Popups.** Browsers open a window only straight from a click, so the panel opens it first and fills it in once Flung answers. When a browser blocks it anyway, the panel shows a link to the consent page instead.
 - **Waiting.** The panel waits on the connect session, not the window: some platforms' sign-in pages cut the link back to the page that opened them. Sessions last ten minutes. **Cancel** stops waiting.
+- **Farcaster** is approved in Warpcast, its phone app, not on a sign-in page (`connectFlow: 'approval'` in `GET /v1/platforms`). The panel opens no window and does not redirect: it shows **Open Warpcast** and a QR code of the same link for a computer (hidden on a narrow screen, where the button opens the app), and reads the session after two seconds, then half as long again each time, up to every ten. Approved, it reads as connected, like any connect; expired or declined, it says why, with **Try again** for a new link. `--flung-qr-size` sets the code's size; it stays dark on light in a dark theme, as cameras need.
 - **Mastodon and Bluesky** ask first: the person's Mastodon server (required), or their Bluesky handle (optional; without it they sign in through bsky.social).
 - **LinkedIn** asks whether to connect a personal profile or a company page when your Flung offers pages. A reconnect of a page goes through the pages app by itself.
 - **Reconnect** appears beside an account that needs it, or whose platform only lets Flung renew it for a limited time and that time ends within two weeks.

package/dist/core/client.d.ts

@@ -45,9 +45,13 @@ export declare class ConnectClient {
     disconnect(accountId: string): Promise<Account>;
     /** A connect session's state: pending, connected, failed or expired. */
     session(id: string): Promise<ConnectSession>;
-    /** Resolves once the session is no longer `pending`. Rejects with an `AbortError` when `signal` aborts. */
+    /**
+     * Resolves once the session is no longer `pending`. Rejects with an `AbortError` when `signal` aborts. It reads the
+     * session every `intervalMs` (two seconds); with `maxIntervalMs` it waits half as long again after each read, up to that.
+     */
     waitForSession(id: string, options?: {
         signal?: AbortSignal | undefined;
         intervalMs?: number | undefined;
+        maxIntervalMs?: number | undefined;
     }): Promise<ConnectSession>;
 }

package/dist/core/client.js

@@ -57,14 +57,20 @@ export class ConnectClient {
     async session(id) {
         return this.#call('GET', `/v1/connect-sessions/${encodeURIComponent(id)}`);
     }
-    /** Resolves once the session is no longer `pending`. Rejects with an `AbortError` when `signal` aborts. */
+    /**
+     * Resolves once the session is no longer `pending`. Rejects with an `AbortError` when `signal` aborts. It reads the
+     * session every `intervalMs` (two seconds); with `maxIntervalMs` it waits half as long again after each read, up to that.
+     */
     async waitForSession(id, options = {}) {
+        let wait = options.intervalMs ?? POLL_MS;
         for (;;) {
             options.signal?.throwIfAborted();
             const session = await this.session(id);
             if (session.status !== 'pending')
                 return session;
-            await delay(options.intervalMs ?? POLL_MS, options.signal);
+            await delay(wait, options.signal);
+            if (options.maxIntervalMs !== undefined)
+                wait = Math.min(options.maxIntervalMs, Math.round(wait * 1.5));
         }
     }
     async #call(method, path, body) {

package/dist/core/controller.d.ts

@@ -1,7 +1,7 @@
 import type { TokenSource } from './client.js';
 import type { ConnectDetail, DisconnectDetail, ErrorDetail, LoadDetail } from './events.js';
 import type { ConnectLabels } from './labels.js';
-import type { Account, ConnectSession, ConnectVariant, Platform } from './types.js';
+import type { Account, ConnectFlow, ConnectSession, ConnectVariant, Platform } from './types.js';
 /** What one connected account looks like to a panel: the API's account and what to show for it. */
 export interface AccountItem {
     /** The account as the API returned it. */
@@ -55,6 +55,22 @@ export type PlatformStep =
     readonly accountId: string | null;
     readonly variant: ConnectVariant | null;
 }
+/**
+ * An approval connect (Farcaster, `connectFlow: 'approval'`): no window and no redirect. Show `approvalUrl` as a link
+ * and a QR code (`encodeQr`) while the panel reads the session; it is null while the link is being made. `ended` says
+ * why it stopped, `expired` or `failed` with the platform's `message`: offer Try again (`connect`, or `reconnect` with
+ * `accountId`) and Cancel. A connected approval goes back to `idle` with a `connected` notice, as other connects do.
+ */
+ | {
+    readonly kind: 'approve';
+    readonly approvalUrl: string | null;
+    readonly accountId: string | null;
+    readonly variant: ConnectVariant | null;
+    readonly ended: {
+        readonly status: 'expired' | 'failed';
+        readonly message: string;
+    } | null;
+}
 /** Asking whether to disconnect `account`: call `confirmDisconnect` or `cancel`. */
  | {
     readonly kind: 'confirm';
@@ -83,6 +99,8 @@ export interface PlatformItem {
     readonly connectable: boolean;
     /** The other ways it can connect here, such as LinkedIn's `pages`; empty for most platforms. */
     readonly variants: readonly ConnectVariant[];
+    /** How its connect ends: `consent` through a sign-in window or redirect, `approval` in the platform's phone app (Farcaster). */
+    readonly connectFlow: ConnectFlow;
 }
 /** The last thing that happened, as data. `message` in the state words it. */
 export type ConnectNotice = 

package/dist/core/controller.js

@@ -4,6 +4,8 @@ import { DEFAULT_LABELS, formatLabel } from './labels.js';
 import { HANDLE_PROMPT, isConnectVariant, isPageAccount, PLATFORM_NAMES, tokenPlatforms } from './platforms.js';
 /** How soon a reconnect deadline is worth showing. */
 const SOON_MS = 14 * 86_400_000;
+/** How an approval connect reads its session: after two seconds, then half as long again each time, up to every ten. */
+const APPROVAL_POLL = { intervalMs: 2_000, maxIntervalMs: 10_000 };
 const IDLE = Object.freeze({ kind: 'idle' });
 const NO_VARIANTS = Object.freeze([]);
 /**
@@ -86,7 +88,7 @@ class Controller {
             return;
         this.#destroyed = true;
         for (const step of this.#steps.values())
-            if (step.kind === 'waiting')
+            if (step.kind === 'waiting' || step.kind === 'approve')
                 step.abort.abort();
         this.#listeners.clear();
     }
@@ -148,7 +150,7 @@ class Controller {
         const step = this.#steps.get(platform);
         if (step === undefined || step.kind === 'idle')
             return;
-        if (step.kind === 'waiting')
+        if (step.kind === 'waiting' || step.kind === 'approve')
             step.abort.abort();
         this.#set(platform, { kind: 'idle' });
     };
@@ -156,9 +158,9 @@ class Controller {
         if (this.#notice !== null)
             this.#tell(null);
     };
-    /** A connect may start: there is a token, and the platform is not already waiting on one. */
+    /** A connect may start: there is a token, and the platform is not already waiting on one. An approval that ended may start again. */
     #ready(platform) {
-        return !this.#destroyed && this.#client !== null && this.#steps.get(platform)?.kind !== 'waiting';
+        return !this.#destroyed && this.#client !== null && !waitingStep(this.#steps.get(platform));
     }
     async #load() {
         const client = this.#client;
@@ -175,10 +177,10 @@ class Controller {
             const asked = this.#asked;
             const granted = typeof this.#options.token === 'string' ? tokenPlatforms(this.#options.token) : null;
             const offered = platforms
-                .map((info) => ({ platform: info.platform, connectable: info.connectable, variants: (info.variants ?? []).filter(isConnectVariant) }))
+                .map((info) => ({ platform: info.platform, connectable: info.connectable, variants: (info.variants ?? []).filter(isConnectVariant), connectFlow: info.connectFlow === 'approval' ? 'approval' : 'consent' }))
                 .filter((info) => (info.connectable || info.variants.length > 0) && (asked ?? [info.platform]).includes(info.platform) && (granted ?? [info.platform]).includes(info.platform));
             this.#platforms = offered.map((info) => info.platform);
-            this.#offers = new Map(offered.map((info) => [info.platform, Object.freeze({ connectable: info.connectable, variants: Object.freeze(info.variants) })]));
+            this.#offers = new Map(offered.map((info) => [info.platform, Object.freeze({ connectable: info.connectable, variants: Object.freeze(info.variants), connectFlow: info.connectFlow })]));
             this.#accounts = accounts.filter((account) => account.status !== 'disconnected' && this.#platforms.includes(account.platform));
             this.#loading = false;
             this.#loaded = true;
@@ -218,6 +220,8 @@ class Controller {
         const redirect = this.#mode === 'redirect' && typeof location !== 'undefined';
         const redirectUrl = redirect ? withoutRedirectResult(location.href) : undefined;
         const begin = () => (account === null ? client.connect(platform, { handle, redirectUrl, variant: variant ?? undefined }) : client.reconnect(account.id, { redirectUrl }));
+        if (this.#offers.get(platform)?.connectFlow === 'approval')
+            return this.#approve(platform, account, begin);
         const abort = new AbortController();
         const step = { kind: 'waiting', abort, blockedUrl: null, accountId: account?.id ?? null, variant };
         this.#notice = null;
@@ -240,6 +244,35 @@ class Controller {
         })
             .then((session) => this.#finish(platform, session), (error) => this.#settle(platform, step, error));
     }
+    /**
+     * An approval connect: no window and no redirect. The link to the platform's app is shown in the step while the session
+     * is read, backing off; an approval that expires or fails stays in the step, saying why, until Try again or Cancel.
+     */
+    #approve(platform, account, begin) {
+        const client = this.#client;
+        const step = { kind: 'approve', abort: new AbortController(), approvalUrl: null, accountId: account?.id ?? null, variant: null, ended: null };
+        this.#notice = null;
+        this.#set(platform, step);
+        void begin()
+            .then((session) => {
+            if (this.#steps.get(platform) !== step)
+                return null;
+            step.approvalUrl = safeUrl(session.authorizationUrl, ['https:']);
+            this.#emit();
+            return client.waitForSession(session.id, { signal: step.abort.signal, ...APPROVAL_POLL });
+        })
+            .then(async (session) => {
+            if (session === null || this.#destroyed || this.#steps.get(platform) !== step)
+                return;
+            if (session.status === 'connected')
+                return this.#finish(platform, session);
+            const message = session.error?.message ?? '';
+            step.ended = { status: session.status === 'expired' ? 'expired' : 'failed', message };
+            step.approvalUrl = null;
+            this.#emit();
+            this.#options.onError?.({ code: session.status === 'expired' ? 'expired' : (session.error?.code ?? 'platform_error'), message });
+        }, (error) => this.#settle(platform, step, error));
+    }
     async #finish(platform, session) {
         if (this.#destroyed)
             return;
@@ -270,7 +303,7 @@ class Controller {
         if (this.#steps.get(platform) === step)
             this.#set(platform, { kind: 'idle' });
         // By name and by the signal, not `instanceof DOMException`: the reason may come from another realm's DOMException.
-        const aborted = (step.kind === 'waiting' && step.abort.signal.aborted) || (typeof error === 'object' && error !== null && error.name === 'AbortError');
+        const aborted = ((step.kind === 'waiting' || step.kind === 'approve') && step.abort.signal.aborted) || (typeof error === 'object' && error !== null && error.name === 'AbortError');
         if (aborted)
             return;
         this.#fail(error, 'connect', platform);
@@ -309,10 +342,11 @@ class Controller {
                 name: PLATFORM_NAMES[platform],
                 accounts: Object.freeze(this.#accounts.filter((account) => account.platform === platform).map((account) => items.get(account.id))),
                 step,
-                busy: step.kind === 'waiting',
+                busy: step.kind === 'waiting' || (step.kind === 'approve' && step.ended === null),
                 handlePrompt: prompt === undefined ? null : Object.freeze({ required: prompt.required }),
                 connectable: offer?.connectable ?? true,
                 variants: offer?.variants ?? NO_VARIANTS,
+                connectFlow: offer?.connectFlow ?? 'consent',
             });
         });
         return Object.freeze({
@@ -336,8 +370,14 @@ function publicStep(step, items, now) {
         return Object.freeze({ kind: 'choose', variants: step.variants });
     if (step.kind === 'waiting')
         return Object.freeze({ kind: 'waiting', blockedUrl: step.blockedUrl, accountId: step.accountId, variant: step.variant });
+    if (step.kind === 'approve')
+        return Object.freeze({ kind: 'approve', approvalUrl: step.approvalUrl, accountId: step.accountId, variant: step.variant, ended: step.ended === null ? null : Object.freeze({ ...step.ended }) });
     return Object.freeze({ kind: 'confirm', account: items.get(step.account.id) ?? accountItem(step.account, now) });
 }
+/** Whether a step holds the platform: a sign-in window open, or an approval still awaited. */
+function waitingStep(step) {
+    return step?.kind === 'waiting' || (step?.kind === 'approve' && step.ended === null);
+}
 /** What to show for an account. */
 function accountItem(account, now) {
     const name = account.username ?? account.platformUserId;

package/dist/core/index.d.ts

@@ -13,4 +13,6 @@ export { DEFAULT_LABELS, formatLabel } from './labels.js';
 export type { ConnectLabels } from './labels.js';
 export { HANDLE_PROMPT, isConnectVariant, isPageAccount, isPlatform, parsePlatformList, PLATFORM_NAMES, tokenPlatforms } from './platforms.js';
 export { CONNECT_VARIANTS, PLATFORMS } from './types.js';
-export type { Account, AccountStatus, ConnectSession, ConnectSessionStatus, ConnectVariant, Platform, PlatformInfo } from './types.js';
+export type { Account, AccountStatus, ConnectFlow, ConnectSession, ConnectSessionStatus, ConnectVariant, Platform, PlatformInfo } from './types.js';
+export { encodeQr } from './qr.js';
+export type { QrMatrix } from './qr.js';

package/dist/core/index.js

@@ -8,3 +8,4 @@ export { connectInPopup, readRedirectResult, withoutRedirectResult } from './flo
 export { DEFAULT_LABELS, formatLabel } from './labels.js';
 export { HANDLE_PROMPT, isConnectVariant, isPageAccount, isPlatform, parsePlatformList, PLATFORM_NAMES, tokenPlatforms } from './platforms.js';
 export { CONNECT_VARIANTS, PLATFORMS } from './types.js';
+export { encodeQr } from './qr.js';

package/dist/core/labels.d.ts

@@ -31,6 +31,24 @@ export interface ConnectLabels {
     blocked: string;
     /** The link to the consent page when the window was blocked. `{platform}`. */
     openSignIn: string;
+    /** Above the approval link and QR code, for a platform approved in its phone app (Farcaster). `{platform}`. */
+    approve: string;
+    /** The link that opens the platform's app to approve. `{platform}`. */
+    openApproval: string;
+    /** Beside the QR code, for a person on a computer. */
+    scanApproval: string;
+    /** The QR code's name for a screen reader. `{platform}`. */
+    approvalQr: string;
+    /** While the approval is awaited. */
+    awaitingApproval: string;
+    /** Starts a new approval after one expired or failed. */
+    tryAgain: string;
+    /** After an approval link ran out of time. `{platform}`. */
+    approvalExpired: string;
+    /** After an approval was declined or failed. `{platform}` and `{message}`. */
+    approvalFailed: string;
+    /** After an approval was declined, when the platform said nothing more. `{platform}`. */
+    approvalDeclined: string;
     /** After a connect. `{platform}`. */
     connected: string;
     /** After a connect that failed. `{platform}` and `{message}`. */

package/dist/core/labels.js

@@ -14,6 +14,15 @@ export const DEFAULT_LABELS = {
     waiting: 'Finish signing in to {platform} in the window that opened.',
     blocked: 'Your browser did not open the {platform} window.',
     openSignIn: 'Open {platform} sign-in',
+    approve: 'Approve Flung in Warpcast, the {platform} app.',
+    openApproval: 'Open Warpcast',
+    scanApproval: 'On a computer, scan this with your phone’s camera instead.',
+    approvalQr: 'QR code that opens Warpcast to approve {platform}',
+    awaitingApproval: 'Waiting for approval',
+    tryAgain: 'Try again',
+    approvalExpired: 'The {platform} approval link ran out before it was approved.',
+    approvalFailed: '{platform} was not approved: {message}',
+    approvalDeclined: '{platform} was not approved. Try again for a new link.',
     connected: '{platform} is connected.',
     failed: '{platform} was not connected: {message}',
     expired: 'Signing in to {platform} took too long. Try again.',

package/dist/core/qr.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A QR code of a short text, such as the link that opens Warpcast to approve Flung: byte mode, error correction level M,
+ * the smallest version that holds it, and the mask with the lowest penalty. Written here so the package keeps no runtime
+ * dependency. It follows Project Nayuki's QR Code generator (MIT, https://www.nayuki.io/page/qr-code-generator-library)
+ * step for step, so its output is that library's, module for module.
+ */
+/** The code as rows of modules, `true` for dark, with no quiet zone: draw one of at least four light modules around it. */
+export interface QrMatrix {
+    readonly size: number;
+    readonly modules: readonly (readonly boolean[])[];
+}
+/** Encodes `text` as UTF-8. Throws a `RangeError` when it is too long for a QR code (about 2,300 bytes at level M). */
+export declare function encodeQr(text: string): QrMatrix;

package/dist/core/qr.js

@@ -0,0 +1,319 @@
+/**
+ * A QR code of a short text, such as the link that opens Warpcast to approve Flung: byte mode, error correction level M,
+ * the smallest version that holds it, and the mask with the lowest penalty. Written here so the package keeps no runtime
+ * dependency. It follows Project Nayuki's QR Code generator (MIT, https://www.nayuki.io/page/qr-code-generator-library)
+ * step for step, so its output is that library's, module for module.
+ */
+/** Error correction codewords per block at level M, by version (index 0 unused). */
+const ECC_PER_BLOCK = [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28];
+/** Error correction blocks at level M, by version (index 0 unused). */
+const BLOCKS = [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49];
+/** Level M's two format bits. */
+const FORMAT_BITS_M = 0;
+const PENALTY_N1 = 3;
+const PENALTY_N2 = 3;
+const PENALTY_N3 = 40;
+const PENALTY_N4 = 10;
+/** Encodes `text` as UTF-8. Throws a `RangeError` when it is too long for a QR code (about 2,300 bytes at level M). */
+export function encodeQr(text) {
+    const bytes = new TextEncoder().encode(text);
+    let version = 1;
+    for (;; version += 1) {
+        if (version > 40)
+            throw new RangeError('The text is too long for a QR code.');
+        if (4 + countBits(version) + bytes.length * 8 <= dataCodewords(version) * 8)
+            break;
+    }
+    const bits = [];
+    const append = (value, length) => {
+        for (let i = length - 1; i >= 0; i -= 1)
+            bits.push((value >>> i) & 1);
+    };
+    append(0x4, 4);
+    append(bytes.length, countBits(version));
+    for (const byte of bytes)
+        append(byte, 8);
+    const capacity = dataCodewords(version) * 8;
+    append(0, Math.min(4, capacity - bits.length));
+    append(0, (8 - (bits.length % 8)) % 8);
+    for (let pad = 0xec; bits.length < capacity; pad ^= 0xec ^ 0x11)
+        append(pad, 8);
+    const data = new Array(bits.length / 8).fill(0);
+    bits.forEach((bit, i) => {
+        data[i >>> 3] = data[i >>> 3] | (bit << (7 - (i & 7)));
+    });
+    return new Grid(version).draw(interleave(version, data));
+}
+const countBits = (version) => (version <= 9 ? 8 : 16);
+function rawDataModules(version) {
+    let result = (16 * version + 128) * version + 64;
+    if (version >= 2) {
+        const align = Math.floor(version / 7) + 2;
+        result -= (25 * align - 10) * align - 55;
+        if (version >= 7)
+            result -= 36;
+    }
+    return result;
+}
+const dataCodewords = (version) => Math.floor(rawDataModules(version) / 8) - ECC_PER_BLOCK[version] * BLOCKS[version];
+/** Splits the data into blocks, adds each block's Reed-Solomon codewords, and interleaves them. */
+function interleave(version, data) {
+    const blocks = BLOCKS[version];
+    const eccLength = ECC_PER_BLOCK[version];
+    const raw = Math.floor(rawDataModules(version) / 8);
+    const shortBlocks = blocks - (raw % blocks);
+    const shortLength = Math.floor(raw / blocks);
+    const divisor = rsDivisor(eccLength);
+    const split = [];
+    for (let i = 0, k = 0; i < blocks; i += 1) {
+        const block = data.slice(k, k + shortLength - eccLength + (i < shortBlocks ? 0 : 1));
+        k += block.length;
+        const ecc = rsRemainder(block, divisor);
+        if (i < shortBlocks)
+            block.push(0);
+        split.push(block.concat(ecc));
+    }
+    const result = [];
+    for (let i = 0; i < split[0].length; i += 1) {
+        split.forEach((block, j) => {
+            if (i !== shortLength - eccLength || j >= shortBlocks)
+                result.push(block[i]);
+        });
+    }
+    return result;
+}
+function rsMultiply(x, y) {
+    let z = 0;
+    for (let i = 7; i >= 0; i -= 1) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((y >>> i) & 1) * x;
+    }
+    return z;
+}
+function rsDivisor(degree) {
+    const result = new Array(degree - 1).fill(0).concat([1]);
+    let root = 1;
+    for (let i = 0; i < degree; i += 1) {
+        for (let j = 0; j < result.length; j += 1) {
+            result[j] = rsMultiply(result[j], root);
+            if (j + 1 < result.length)
+                result[j] = result[j] ^ result[j + 1];
+        }
+        root = rsMultiply(root, 0x02);
+    }
+    return result;
+}
+function rsRemainder(data, divisor) {
+    const result = divisor.map(() => 0);
+    for (const byte of data) {
+        const factor = byte ^ result.shift();
+        result.push(0);
+        divisor.forEach((coefficient, i) => {
+            result[i] = result[i] ^ rsMultiply(coefficient, factor);
+        });
+    }
+    return result;
+}
+const bit = (value, i) => ((value >>> i) & 1) !== 0;
+class Grid {
+    #size;
+    #version;
+    #modules;
+    #fixed;
+    constructor(version) {
+        this.#version = version;
+        this.#size = version * 4 + 17;
+        this.#modules = Array.from({ length: this.#size }, () => new Array(this.#size).fill(false));
+        this.#fixed = Array.from({ length: this.#size }, () => new Array(this.#size).fill(false));
+    }
+    draw(codewords) {
+        this.#functionPatterns();
+        this.#codewords(codewords);
+        let best = 0;
+        let lowest = Infinity;
+        for (let mask = 0; mask < 8; mask += 1) {
+            this.#mask(mask);
+            this.#format(mask);
+            const penalty = this.#penalty();
+            if (penalty < lowest) {
+                best = mask;
+                lowest = penalty;
+            }
+            this.#mask(mask);
+        }
+        this.#mask(best);
+        this.#format(best);
+        return { size: this.#size, modules: this.#modules.map((row) => [...row]) };
+    }
+    #set(x, y, dark) {
+        ;
+        this.#modules[y][x] = dark;
+        this.#fixed[y][x] = true;
+    }
+    #functionPatterns() {
+        const size = this.#size;
+        for (let i = 0; i < size; i += 1) {
+            this.#set(6, i, i % 2 === 0);
+            this.#set(i, 6, i % 2 === 0);
+        }
+        this.#finder(3, 3);
+        this.#finder(size - 4, 3);
+        this.#finder(3, size - 4);
+        const positions = this.#alignmentPositions();
+        const last = positions.length - 1;
+        positions.forEach((x, i) => {
+            positions.forEach((y, j) => {
+                if (!((i === 0 && j === 0) || (i === 0 && j === last) || (i === last && j === 0)))
+                    this.#alignment(x, y);
+            });
+        });
+        this.#format(0);
+        this.#versionInfo();
+    }
+    #finder(x, y) {
+        for (let dy = -4; dy <= 4; dy += 1) {
+            for (let dx = -4; dx <= 4; dx += 1) {
+                const distance = Math.max(Math.abs(dx), Math.abs(dy));
+                const xx = x + dx;
+                const yy = y + dy;
+                if (xx >= 0 && xx < this.#size && yy >= 0 && yy < this.#size)
+                    this.#set(xx, yy, distance !== 2 && distance !== 4);
+            }
+        }
+    }
+    #alignment(x, y) {
+        for (let dy = -2; dy <= 2; dy += 1)
+            for (let dx = -2; dx <= 2; dx += 1)
+                this.#set(x + dx, y + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+    }
+    #alignmentPositions() {
+        if (this.#version === 1)
+            return [];
+        const count = Math.floor(this.#version / 7) + 2;
+        const step = Math.floor((this.#version * 8 + count * 3 + 5) / (count * 4 - 4)) * 2;
+        const result = [6];
+        for (let position = this.#size - 7; result.length < count; position -= step)
+            result.splice(1, 0, position);
+        return result;
+    }
+    #format(mask) {
+        const data = (FORMAT_BITS_M << 3) | mask;
+        let remainder = data;
+        for (let i = 0; i < 10; i += 1)
+            remainder = (remainder << 1) ^ ((remainder >>> 9) * 0x537);
+        const bits = ((data << 10) | remainder) ^ 0x5412;
+        const size = this.#size;
+        for (let i = 0; i <= 5; i += 1)
+            this.#set(8, i, bit(bits, i));
+        this.#set(8, 7, bit(bits, 6));
+        this.#set(8, 8, bit(bits, 7));
+        this.#set(7, 8, bit(bits, 8));
+        for (let i = 9; i < 15; i += 1)
+            this.#set(14 - i, 8, bit(bits, i));
+        for (let i = 0; i < 8; i += 1)
+            this.#set(size - 1 - i, 8, bit(bits, i));
+        for (let i = 8; i < 15; i += 1)
+            this.#set(8, size - 15 + i, bit(bits, i));
+        this.#set(8, size - 8, true);
+    }
+    #versionInfo() {
+        if (this.#version < 7)
+            return;
+        let remainder = this.#version;
+        for (let i = 0; i < 12; i += 1)
+            remainder = (remainder << 1) ^ ((remainder >>> 11) * 0x1f25);
+        const bits = (this.#version << 12) | remainder;
+        for (let i = 0; i < 18; i += 1) {
+            const a = this.#size - 11 + (i % 3);
+            const b = Math.floor(i / 3);
+            this.#set(a, b, bit(bits, i));
+            this.#set(b, a, bit(bits, i));
+        }
+    }
+    #codewords(data) {
+        const size = this.#size;
+        let i = 0;
+        for (let right = size - 1; right >= 1; right -= 2) {
+            if (right === 6)
+                right = 5;
+            for (let vertical = 0; vertical < size; vertical += 1) {
+                for (let j = 0; j < 2; j += 1) {
+                    const x = right - j;
+                    const upward = ((right + 1) & 2) === 0;
+                    const y = upward ? size - 1 - vertical : vertical;
+                    if (!this.#fixed[y][x] && i < data.length * 8) {
+                        ;
+                        this.#modules[y][x] = bit(data[i >>> 3], 7 - (i & 7));
+                        i += 1;
+                    }
+                }
+            }
+        }
+    }
+    /** Flips the data modules under `mask`; applying it twice undoes it. */
+    #mask(mask) {
+        for (let y = 0; y < this.#size; y += 1) {
+            for (let x = 0; x < this.#size; x += 1) {
+                const flip = [(x + y) % 2 === 0, y % 2 === 0, x % 3 === 0, (x + y) % 3 === 0, (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0, ((x * y) % 2) + ((x * y) % 3) === 0, (((x * y) % 2) + ((x * y) % 3)) % 2 === 0, (((x + y) % 2) + ((x * y) % 3)) % 2 === 0][mask];
+                const row = this.#modules[y];
+                if (flip === true && !this.#fixed[y][x])
+                    row[x] = !row[x];
+            }
+        }
+    }
+    #penalty() {
+        const size = this.#size;
+        const at = (x, y) => this.#modules[y][x];
+        let result = 0;
+        for (const across of [true, false]) {
+            for (let a = 0; a < size; a += 1) {
+                let color = false;
+                let run = 0;
+                const history = [0, 0, 0, 0, 0, 0, 0];
+                for (let b = 0; b < size; b += 1) {
+                    const dark = across ? at(b, a) : at(a, b);
+                    if (dark === color) {
+                        run += 1;
+                        if (run === 5)
+                            result += PENALTY_N1;
+                        else if (run > 5)
+                            result += 1;
+                    }
+                    else {
+                        this.#history(run, history);
+                        if (!color)
+                            result += this.#finderLike(history) * PENALTY_N3;
+                        color = dark;
+                        run = 1;
+                    }
+                }
+                if (color) {
+                    this.#history(run, history);
+                    run = 0;
+                }
+                this.#history(run + size, history);
+                result += this.#finderLike(history) * PENALTY_N3;
+            }
+        }
+        for (let y = 0; y < size - 1; y += 1) {
+            for (let x = 0; x < size - 1; x += 1) {
+                const color = at(x, y);
+                if (color === at(x + 1, y) && color === at(x, y + 1) && color === at(x + 1, y + 1))
+                    result += PENALTY_N2;
+            }
+        }
+        const dark = this.#modules.reduce((sum, row) => sum + row.filter(Boolean).length, 0);
+        const total = size * size;
+        result += (Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1) * PENALTY_N4;
+        return result;
+    }
+    #history(run, history) {
+        history.pop();
+        history.unshift(history[0] === 0 ? run + this.#size : run);
+    }
+    #finderLike(history) {
+        const [h0, n, h2, h3, h4, h5, h6] = history;
+        const core = n > 0 && h2 === n && h3 === n * 3 && h4 === n && h5 === n;
+        return (core && h0 >= n * 4 && h6 >= n ? 1 : 0) + (core && h6 >= n * 4 && h0 >= n ? 1 : 0);
+    }
+}

package/dist/core/types.d.ts

@@ -16,7 +16,15 @@ export interface PlatformInfo {
     connectable: boolean;
     /** The connect variants set up here, such as LinkedIn's `pages`. Optional: an API older than the field leaves it out. */
     variants?: string[] | undefined;
+    /**
+     * How a connect ends: `consent`, a sign-in page that comes back; `approval` (Farcaster), a link that opens the
+     * platform's phone app to approve, after which the session finishes when read. Optional: an API older than the field
+     * leaves it out, which reads as `consent`.
+     */
+    connectFlow?: ConnectFlow | undefined;
 }
+/** How a platform's connect ends: a sign-in page that sends the person back, or an approval in the platform's phone app. */
+export type ConnectFlow = 'consent' | 'approval';
 export type AccountStatus = 'active' | 'needs_reconnect' | 'disconnected';
 /** A connected social account, as `GET /v1/accounts` returns it. */
 export interface Account {

package/dist/element/dom.d.ts

@@ -30,6 +30,11 @@ export declare function mark(path: string, options?: {
     part?: string;
     size?: number;
 }): SVGSVGElement;
+/**
+ * A QR code of `text` as one SVG path of dark modules on a light square, named `label` for a screen reader. It stays dark
+ * on light in a dark theme too, as cameras need; `--flung-qr-size` sets its size.
+ */
+export declare function qrCode(text: string, label: string): SVGSVGElement;
 /**
  * An account's picture: an `<img>` that sends no referrer, loads lazily and has an empty `alt` (the name is beside it),
  * or a circle with the account's initial when there is no picture or it does not load. `avatarUrl` is only ever an

package/dist/element/dom.js

@@ -3,6 +3,7 @@
  * supplies (an account name, an error message) can become markup. Attributes go through `setAttribute`, text through
  * `textContent`.
  */
+import { encodeQr } from '../core/qr.js';
 /** An HTML element of the element's own. `true` sets an empty attribute; `false` and `undefined` set none. */
 export function html(tag, attributes = {}, ...children) {
     const element = document.createElement(tag);
@@ -57,6 +58,42 @@ export function mark(path, options = {}) {
     svg.append(shape);
     return svg;
 }
+/** The light modules kept around a QR code so a camera finds its edges (the standard asks for four; three reads well on a screen). */
+const QR_QUIET = 3;
+/**
+ * A QR code of `text` as one SVG path of dark modules on a light square, named `label` for a screen reader. It stays dark
+ * on light in a dark theme too, as cameras need; `--flung-qr-size` sets its size.
+ */
+export function qrCode(text, label) {
+    const code = encodeQr(text);
+    const size = code.size + QR_QUIET * 2;
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', `0 0 ${size} ${size}`);
+    svg.setAttribute('class', 'qr');
+    svg.setAttribute('part', 'qr');
+    svg.setAttribute('role', 'img');
+    svg.setAttribute('aria-label', label);
+    svg.setAttribute('shape-rendering', 'crispEdges');
+    // Presentation attributes, as `mark` sets: an unstyled panel still draws a code a camera reads.
+    svg.setAttribute('width', '132');
+    svg.setAttribute('height', '132');
+    const ground = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    ground.setAttribute('width', String(size));
+    ground.setAttribute('height', String(size));
+    ground.setAttribute('fill', '#ffffff');
+    const modules = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const runs = [];
+    code.modules.forEach((row, y) => {
+        row.forEach((dark, x) => {
+            if (dark)
+                runs.push(`M${x + QR_QUIET} ${y + QR_QUIET}h1v1h-1z`);
+        });
+    });
+    modules.setAttribute('d', runs.join(''));
+    modules.setAttribute('fill', '#000000');
+    svg.append(ground, modules);
+    return svg;
+}
 /**
  * An account's picture: an `<img>` that sends no referrer, loads lazily and has an empty `alt` (the name is beside it),
  * or a circle with the account's initial when there is no picture or it does not load. `avatarUrl` is only ever an

package/dist/element/flung-connect.js

@@ -1,7 +1,7 @@
 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 { avatar, button, html, mark, qrCode } from './dom.js';
 import { CHOICE_MARKS, FLUNG_MARK, PLATFORM_MARKS } from './marks.js';
 import { BASE_STYLES, STYLES } from './styles.js';
 import { panelTooltip, TOOLTIP_BASE_STYLES, TOOLTIP_STYLES } from './tooltip.js';
@@ -12,13 +12,22 @@ const LAYOUTS = ['list', 'grid', 'compact'];
  */
 function stepTile(item, tiles) {
     const { step } = item;
-    const accountId = step.kind === 'confirm' ? step.account.account.id : step.kind === 'waiting' ? step.accountId : null;
+    const accountId = step.kind === 'confirm' ? step.account.account.id : step.kind === 'waiting' || step.kind === 'approve' ? step.accountId : null;
     if (accountId !== null)
         return tiles.findIndex((tile) => tile.accounts.some((account) => account.account.id === accountId));
-    if (step.kind === 'waiting')
+    if (step.kind === 'waiting' || step.kind === 'approve')
         return tiles.findIndex((tile) => tile.variant === step.variant);
     return 0;
 }
+/**
+ * A step's kind for moving focus, with an approval split by where it is: making its link, showing it, or ended. Each
+ * change is a new place for focus.
+ */
+function focusKind(step) {
+    if (step.kind !== 'approve')
+        return step.kind;
+    return step.ended !== null ? 'approve-ended' : step.approvalUrl !== null ? 'approve-link' : 'approve';
+}
 /** The key of a tile's Connect button, so focus can come back to it. */
 const connectKey = (platform, variant) => (variant === null ? `connect-${platform}` : `connect-${platform}-${variant}`);
 /** Builds the class on first use, so importing the package on a server, where there is no `HTMLElement`, is safe. */
@@ -139,11 +148,15 @@ export function createFlungConnectClass() {
             const fallback = [];
             for (const item of state.platforms) {
                 const before = this.#steps.get(item.platform) ?? { kind: 'idle', variant: null };
-                const now = item.step.kind;
+                const now = focusKind(item.step);
                 if (now === before.kind)
                     continue;
                 if (now === 'handle')
                     wanted = `handle-${item.platform}`;
+                else if (now === 'approve-link')
+                    wanted = `approve-open-${item.platform}`;
+                else if (now === 'approve-ended')
+                    wanted = `approve-retry-${item.platform}`;
                 else if (now === 'choose')
                     wanted = `choose-${item.platform}-personal`;
                 else if (now === 'confirm')
@@ -152,7 +165,7 @@ export function createFlungConnectClass() {
                 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 }]));
+            this.#steps = new Map(state.platforms.map((item) => [item.platform, { kind: focusKind(item.step), variant: item.step.kind === 'waiting' || item.step.kind === 'approve' ? item.step.variant : null }]));
             const find = (key) => (key === null ? undefined : [...this.#root.querySelectorAll('[data-key]')].find((node) => node.dataset['key'] === key));
             (find(wanted) ?? (active !== null ? fallback.map(find).find((node) => node !== undefined) : undefined))?.focus();
         }
@@ -238,11 +251,32 @@ export function createFlungConnectClass() {
                 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 (step.kind === 'approve')
+                return this.#approval(item, step, labels);
             if (step.kind === 'confirm') {
                 return html('div', { class: 'confirm', part: 'confirm' }, html('p', { part: 'confirm-text' }, format(labels.confirmDisconnect, { account: step.account.name })), button(labels.disconnect, `confirm-${platform}`, 'confirm', () => void this.#controller?.confirmDisconnect(platform), { variant: 'danger' }), button(labels.keep, `keep-${platform}`, 'keep', () => this.#controller?.cancel(platform)));
             }
             return null;
         }
+        /**
+         * An approval in the platform's phone app (Farcaster): the line saying so, Open Warpcast, a QR code of the same link
+         * for a computer, and the wait. Ended, why it ended, with Try again and Cancel.
+         */
+        #approval(item, step, labels) {
+            const { platform, name } = item;
+            const cancel = button(labels.cancel, `cancel-${platform}`, 'cancel', () => this.#controller?.cancel(platform));
+            if (step.ended !== null) {
+                const why = step.ended.status === 'expired' ? format(labels.approvalExpired, { platform: name }) : step.ended.message === '' ? format(labels.approvalDeclined, { platform: name }) : format(labels.approvalFailed, { platform: name, message: step.ended.message });
+                const accountId = step.accountId;
+                const retry = button(labels.tryAgain, `approve-retry-${platform}`, 'retry', () => (accountId === null ? this.#controller?.connect(platform) : this.#controller?.reconnect(accountId)), { variant: 'primary' });
+                return html('div', { class: 'approve ended', part: 'approve approve-ended' }, html('p', { class: 'approve-text', part: 'approve-text', role: 'alert' }, why), html('div', { class: 'approve-actions', part: 'approve-actions' }, retry, cancel));
+            }
+            const url = step.approvalUrl;
+            const go = url === null
+                ? null
+                : html('div', { class: 'approve-go', part: 'approve-go' }, html('a', { class: 'approve-open', href: url, target: '_blank', rel: 'noopener', part: 'link link-approval', 'data-key': `approve-open-${platform}` }, labels.openApproval), html('div', { class: 'approve-scan', part: 'approve-scan' }, qrCode(url, format(labels.approvalQr, { platform: name })), html('p', { class: 'approve-hint', part: 'approve-hint' }, labels.scanApproval)));
+            return html('div', { class: 'approve', part: 'approve' }, html('p', { class: 'approve-text', part: 'approve-text' }, format(labels.approve, { platform: name })), go, html('p', { class: 'note', part: 'note', role: 'status' }, html('span', { class: 'spinner', part: 'spinner', 'aria-hidden': 'true' }), html('span', { class: 'note-text', part: 'note-text' }, labels.awaitingApproval), cancel));
+        }
         /**
          * 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

package/dist/element/styles.js

@@ -84,6 +84,7 @@ export const STYLES = `
   --flung-focus-width: 2px;
   --flung-focus-offset: 2px;
   --flung-grid-min: 16rem;
+  --flung-qr-size: 132px;
   display: block;
   font: var(--flung-font-size)/var(--flung-line-height) var(--flung-font);
   color: var(--flung-text);
@@ -167,6 +168,21 @@ button.option:hover:not(:disabled) { background: var(--flung-surface); border-co
 .option-text { min-width: 0; display: flex; flex-direction: column; }
 .option-name { font-weight: var(--flung-font-weight-strong); line-height: 1.3; }
 .option-description { font-size: var(--flung-font-size-small); font-weight: normal; color: var(--flung-muted); line-height: 1.3; }
+.approve { margin: 10px 0 0 calc(var(--flung-badge-size) + var(--flung-gap)); padding: var(--flung-gap); border-radius: var(--flung-radius-inner); background: var(--flung-raised); display: flex; flex-direction: column; gap: 10px; }
+.approve-text { margin: 0; font-size: calc(var(--flung-font-size) - 1px); }
+.approve.ended .approve-text { color: var(--flung-danger); }
+.approve-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.approve-go { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
+.approve-open {
+  display: inline-flex; align-items: center; height: var(--flung-button-height); padding: var(--flung-button-padding); border-radius: var(--flung-button-radius);
+  font-size: calc(var(--flung-font-size) - 1px); font-weight: var(--flung-font-weight-medium); text-decoration: none; white-space: nowrap;
+  background: var(--flung-accent); color: var(--flung-accent-text); border: var(--flung-border-width) solid var(--flung-accent);
+}
+.approve-open:hover { background: color-mix(in srgb, var(--flung-accent) 88%, var(--flung-surface)); }
+.approve-scan { display: flex; align-items: center; gap: var(--flung-gap); }
+.qr { flex: none; width: var(--flung-qr-size); height: var(--flung-qr-size); display: block; border-radius: var(--flung-radius-inner); border: var(--flung-border-width) solid var(--flung-border); }
+.approve-hint { margin: 0; font-size: var(--flung-font-size-small); color: var(--flung-muted); max-width: 16rem; }
+.approve .note { margin: 0; }
 .form label { flex-basis: 100%; font-size: var(--flung-font-size-small); color: var(--flung-muted); }
 .form input { flex: 1 1 12rem; min-width: 0; height: var(--flung-button-height); font: inherit; font-size: calc(var(--flung-font-size) - 1px); color: inherit; background: var(--flung-surface); border: var(--flung-border-width) solid var(--flung-border); border-radius: var(--flung-button-radius); padding: 0 10px; }
 button {
@@ -196,7 +212,7 @@ button:focus-visible, input:focus-visible, a:focus-visible { outline: var(--flun
 .footer .flung { width: 14px; height: 14px; fill: currentColor; display: block; }
 .panel[data-layout="grid"] .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--flung-grid-min)), 1fr)); gap: var(--flung-gap); padding: var(--flung-padding); }
 .panel[data-layout="grid"] .platform, .panel[data-layout="grid"] .platform:first-child { border: var(--flung-border-width) solid var(--flung-border); border-radius: var(--flung-radius-inner); box-shadow: var(--flung-card-shadow); padding: var(--flung-gap); }
-.panel[data-layout="grid"] .accounts, .panel[data-layout="grid"] .note, .panel[data-layout="grid"] .confirm, .panel[data-layout="grid"] .form, .panel[data-layout="grid"] .choose { margin-left: 0; }
+.panel[data-layout="grid"] .accounts, .panel[data-layout="grid"] .note, .panel[data-layout="grid"] .confirm, .panel[data-layout="grid"] .form, .panel[data-layout="grid"] .choose, .panel[data-layout="grid"] .approve { margin-left: 0; }
 .panel[data-layout="grid"] .accounts { border-left: 0; border-top: var(--flung-border-width) solid var(--flung-border); margin-top: var(--flung-gap); padding-top: 4px; }
 .panel[data-layout="grid"] .account { padding-left: 0; }
 .panel[data-layout="compact"] .count { display: none; }
@@ -204,7 +220,8 @@ button:focus-visible, input:focus-visible, a:focus-visible { outline: var(--flun
 .panel[data-layout="compact"] .account { padding-top: 3px; padding-bottom: 3px; }
 @media (max-width: 420px) {
   .platform { padding: var(--flung-gap); }
-  .accounts, .note, .confirm, .form, .choose { margin-left: 0; }
+  .accounts, .note, .confirm, .form, .choose, .approve { margin-left: 0; }
+  .approve-scan { display: none; }
   .accounts { border-left: 0; border-top: var(--flung-border-width) solid var(--flung-border); margin-top: 10px; }
   .account { padding-left: 0; }
   .row button { padding: 0 12px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flung.dev/connect",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Let people connect and disconnect their social accounts from your page: a <flung-connect> web component and a React component for Flung, with no runtime dependencies.",
   "license": "MIT",
   "type": "module",