@flung.dev/connect 0.1.2 → 0.4.0

package/dist/core/platforms.d.ts

@@ -1,4 +1,4 @@
-import type { Platform } from './types.js';
+import type { Account, ConnectVariant, Platform } from './types.js';
 export declare const PLATFORM_NAMES: Readonly<Record<Platform, string>>;
 /** What a connect asks the person for first: Mastodon needs their instance; Bluesky takes a handle when they have one. */
 export declare const HANDLE_PROMPT: Readonly<Partial<Record<Platform, {
@@ -12,3 +12,9 @@ export declare function parsePlatformList(value: string | null | undefined): Pla
  * API checks the signature and refuses the rest. Null when the token names none or cannot be read.
  */
 export declare function tokenPlatforms(token: string): Platform[] | null;
+export declare function isConnectVariant(value: unknown): value is ConnectVariant;
+/**
+ * Whether an account is a company page rather than a person: a LinkedIn account that posts as an organisation
+ * (`urn:li:organization:<id>`), as the `pages` variant connects them.
+ */
+export declare function isPageAccount(account: Pick<Account, 'platform' | 'platformUserId'>): boolean;

package/dist/core/platforms.js

@@ -1,4 +1,4 @@
-import { PLATFORMS } from './types.js';
+import { CONNECT_VARIANTS, PLATFORMS } from './types.js';
 export const PLATFORM_NAMES = {
     x: 'X',
     instagram: 'Instagram',
@@ -47,3 +47,13 @@ export function tokenPlatforms(token) {
         return null;
     }
 }
+export function isConnectVariant(value) {
+    return typeof value === 'string' && CONNECT_VARIANTS.includes(value);
+}
+/**
+ * Whether an account is a company page rather than a person: a LinkedIn account that posts as an organisation
+ * (`urn:li:organization:<id>`), as the `pages` variant connects them.
+ */
+export function isPageAccount(account) {
+    return account.platform === 'linkedin' && account.platformUserId.startsWith('urn:li:organization:');
+}

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

@@ -4,21 +4,49 @@
  */
 export declare const PLATFORMS: readonly ['x', 'instagram', 'facebook', 'threads', 'linkedin', 'tiktok', 'youtube', 'pinterest', 'bluesky', 'mastodon', 'discord', 'farcaster'];
 export type Platform = (typeof PLATFORMS)[number];
+/**
+ * Another way to connect a platform, on an app of its own: LinkedIn's `pages` connects the company pages the person
+ * administers, one account per page, instead of their own profile.
+ */
+export type ConnectVariant = 'pages';
+export declare const CONNECT_VARIANTS: readonly ConnectVariant[];
 export interface PlatformInfo {
     platform: Platform;
     /** Whether this Flung has the platform's app credentials, so accounts can be connected. */
     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 {
+    /** Flung's id for the account. */
     id: string;
+    /** The platform it is on. */
     platform: Platform;
+    /** The platform's own id for the user. */
     platformUserId: string;
+    /** The handle on the platform, without the `@`, when it has one. */
     username: string | null;
+    /** The name the person shows on the platform. Optional: an API older than the field leaves it out. */
+    displayName?: string | null;
+    /** The person's profile picture on the platform, an `https` address. Optional: an API older than the field leaves it out. */
+    avatarUrl?: string | null;
+    /** The Flung profile it belongs to, or null for the whole workspace. */
     profileId: string | null;
+    /** `active`, `needs_reconnect` or `disconnected`. */
     status: AccountStatus;
     /** When the person must reconnect by, for platforms whose connections cannot be renewed forever. */
     reconnectBy: string | null;
+    /** When it was first connected. */
     createdAt: string;
 }
 export type ConnectSessionStatus = 'pending' | 'connected' | 'failed' | 'expired';

package/dist/core/types.js

@@ -3,3 +3,4 @@
  * the API's own (`spec/openapi.json`): `PlatformInfo`, `Account` and `ConnectSession`, trimmed to what is used.
  */
 export const PLATFORMS = ['x', 'instagram', 'facebook', 'threads', 'linkedin', 'tiktok', 'youtube', 'pinterest', 'bluesky', 'mastodon', 'discord', 'farcaster'];
+export const CONNECT_VARIANTS = ['pages'];

package/dist/element/copy.d.ts

@@ -1,39 +1,3 @@
-/**
- * Every word the panel shows, in English. Pass `labels` to put it in another language; `{platform}`, `{account}`,
- * `{message}`, `{date}` and `{count}` are filled in where a label has them.
- */
-export interface ConnectLabels {
-    /** The panel's name for a screen reader. */
-    panel: string;
-    connect: string;
-    connectAnother: string;
-    reconnect: string;
-    disconnect: string;
-    confirmDisconnect: string;
-    keep: string;
-    cancel: string;
-    continue: string;
-    handleBluesky: string;
-    handleMastodon: string;
-    waiting: string;
-    blocked: string;
-    openSignIn: string;
-    connected: string;
-    failed: string;
-    expired: string;
-    disconnected: string;
-    needsReconnect: string;
-    reconnectBy: string;
-    /** Under a platform's name once it has accounts. */
-    connectedCount: string;
-    /** Under a platform's name before it has any. */
-    notConnected: string;
-    /** Before Flung's name in the panel's footer, which `branding="none"` hides. */
-    securedBy: string;
-    loading: string;
-    loadFailed: string;
-    empty: string;
-    noToken: string;
-}
-export declare const DEFAULT_LABELS: ConnectLabels;
-export declare function format(template: string, values: Readonly<Record<string, string>>): string;
+/** The panel's words live in core, so the headless controller words its status line the same way as the element. */
+export { DEFAULT_LABELS, formatLabel as format } from '../core/labels.js';
+export type { ConnectLabels } from '../core/labels.js';

package/dist/element/copy.js

@@ -1,32 +1,2 @@
-export const DEFAULT_LABELS = {
-    panel: 'Connected accounts',
-    connect: 'Connect',
-    connectAnother: 'Add another',
-    reconnect: 'Reconnect',
-    disconnect: 'Disconnect',
-    confirmDisconnect: 'Disconnect {account}? Posts to it will stop.',
-    keep: 'Keep it',
-    cancel: 'Cancel',
-    continue: 'Continue',
-    handleBluesky: 'Your Bluesky handle, such as alice.bsky.social (optional)',
-    handleMastodon: 'Your Mastodon server, such as mastodon.social',
-    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',
-    connected: '{platform} is connected.',
-    failed: '{platform} was not connected: {message}',
-    expired: 'Signing in to {platform} took too long. Try again.',
-    disconnected: '{account} is disconnected.',
-    needsReconnect: 'Needs reconnecting',
-    reconnectBy: 'Reconnect by {date}',
-    connectedCount: '{count} connected',
-    notConnected: 'Not connected',
-    securedBy: 'Secured by',
-    loading: 'Loading accounts…',
-    loadFailed: 'Could not load accounts: {message}',
-    empty: 'There is nothing to connect here.',
-    noToken: 'This panel has no connect token yet.',
-};
-export function format(template, values) {
-    return template.replace(/\{(\w+)\}/g, (whole, name) => values[name] ?? whole);
-}
+/** The panel's words live in core, so the headless controller words its status line the same way as the element. */
+export { DEFAULT_LABELS, formatLabel as format } from '../core/labels.js';

package/dist/element/dom.d.ts

@@ -3,21 +3,42 @@
  * supplies (an account name, an error message) can become markup. Attributes go through `setAttribute`, text through
  * `textContent`.
  */
+import type { AccountItem } from '../core/controller.js';
 import type { Account } from '../core/types.js';
 type Attributes = Readonly<Record<string, string | number | boolean | undefined>>;
 /** An HTML element of the element's own. `true` sets an empty attribute; `false` and `undefined` set none. */
 export declare function html<K extends keyof HTMLElementTagNameMap>(tag: K, attributes?: Attributes, ...children: (Node | string | null)[]): HTMLElementTagNameMap[K];
-/** How an account is named in the panel: its username, or its platform id when it has none. */
+/** How an account is named in the panel's messages: its username, or its platform id when it has none. */
 export declare function displayName(account: Account): string;
-/** A button that calls `onClick`, with a `data-key` so focus can be put back on it after the panel is drawn again. */
-export declare function button(text: string, key: string, onClick: () => void, options?: {
-    primary?: boolean;
-    danger?: boolean;
-    warning?: boolean;
-    quiet?: boolean;
+/** A button's look: `primary` for the first Connect, `secondary` for the rest, `quiet` for Disconnect, `danger` to confirm one. */
+export type ButtonVariant = 'primary' | 'secondary' | 'quiet' | 'danger';
+/**
+ * A button that calls `onClick`, with a `data-key` so focus can be put back on it after the panel is drawn again. Its
+ * `part` is `button`, `button-<variant>` and `button-<role>`, so a page can style every button, a kind, or one of them.
+ */
+export declare function button(text: string, key: string, role: string, onClick: () => void, options?: {
+    variant?: ButtonVariant;
     disabled?: boolean;
     label?: string;
+    expanded?: boolean;
+    controls?: string;
 }): HTMLButtonElement;
 /** An icon drawn from one path, for the platform marks and Flung's own. Hidden from screen readers: the name beside it says what it is. */
-export declare function mark(path: string, viewBox?: string, className?: string): SVGSVGElement;
+export declare function mark(path: string, options?: {
+    viewBox?: string;
+    className?: string;
+    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
+ * `https` address (the controller drops anything else).
+ */
+export declare function avatar(item: AccountItem): HTMLElement;
 export {};

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);
@@ -16,22 +17,40 @@ export function html(tag, attributes = {}, ...children) {
             element.append(child);
     return element;
 }
-/** How an account is named in the panel: its username, or its platform id when it has none. */
+/** How an account is named in the panel's messages: its username, or its platform id when it has none. */
 export function displayName(account) {
     return account.username ?? account.platformUserId;
 }
-/** A button that calls `onClick`, with a `data-key` so focus can be put back on it after the panel is drawn again. */
-export function button(text, key, onClick, options = {}) {
-    const className = [options.primary === true && 'primary', options.danger === true && 'danger', options.warning === true && 'warning', options.quiet === true && 'quiet'].filter(Boolean).join(' ') || undefined;
-    const element = html('button', { type: 'button', class: className, 'data-key': key, disabled: options.disabled === true, 'aria-label': options.label }, text);
+/**
+ * A button that calls `onClick`, with a `data-key` so focus can be put back on it after the panel is drawn again. Its
+ * `part` is `button`, `button-<variant>` and `button-<role>`, so a page can style every button, a kind, or one of them.
+ */
+export function button(text, key, role, onClick, options = {}) {
+    const variant = options.variant ?? 'secondary';
+    const element = html('button', {
+        type: 'button',
+        class: variant,
+        part: `button button-${variant} button-${role}`,
+        'data-key': key,
+        disabled: options.disabled === true,
+        'aria-label': options.label,
+        // A button that opens a question inside the panel says whether it is open, and which question.
+        'aria-expanded': options.expanded === undefined ? undefined : String(options.expanded),
+        'aria-controls': options.controls,
+    }, text);
     element.addEventListener('click', onClick);
     return element;
 }
 /** An icon drawn from one path, for the platform marks and Flung's own. Hidden from screen readers: the name beside it says what it is. */
-export function mark(path, viewBox = '0 0 24 24', className = 'mark') {
+export function mark(path, options = {}) {
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('viewBox', viewBox);
-    svg.setAttribute('class', className);
+    svg.setAttribute('viewBox', options.viewBox ?? '0 0 24 24');
+    svg.setAttribute('class', options.className ?? 'mark');
+    svg.setAttribute('part', options.part ?? 'mark');
+    // Presentation attributes: any stylesheet overrides them, and an unstyled panel still draws a sensible size.
+    svg.setAttribute('width', String(options.size ?? 20));
+    svg.setAttribute('height', String(options.size ?? 20));
+    svg.setAttribute('fill', 'currentColor');
     svg.setAttribute('aria-hidden', 'true');
     svg.setAttribute('focusable', 'false');
     const shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -39,3 +58,53 @@ export function mark(path, viewBox = '0 0 24 24', className = 'mark') {
     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
+ * `https` address (the controller drops anything else).
+ */
+export function avatar(item) {
+    const initial = html('span', { class: 'avatar initial', part: 'avatar avatar-initial', 'aria-hidden': 'true' }, item.initial);
+    if (item.avatarUrl === null)
+        return initial;
+    const image = html('img', { class: 'avatar', part: 'avatar avatar-image', alt: '', referrerpolicy: 'no-referrer', loading: 'lazy', decoding: 'async', width: 32, height: 32 });
+    image.addEventListener('error', () => image.replaceWith(initial), { once: true });
+    image.src = item.avatarUrl;
+    return image;
+}