@bkazemi/verily 0.1.0

package/dist/browser/connect-dialog.js

@@ -0,0 +1,514 @@
+import { externalLink, externalName } from '../core/index.js';
+import { accountCard, linkMark, node, outward, styles } from './evidence-dialog.js';
+import { providerMark } from './provider-mark.js';
+import { verilyLogo } from './logo.js';
+import { version } from '../version.js';
+const connectStyles = `
+  ${styles}
+  .steps > p:first-child { margin-top: 0; }
+  .choices { display: grid; gap: 8px; margin-top: 16px; }
+  /* With a way back beside it, the heading sits by that and not in the middle. */
+  header.backed h2 { margin-right: auto; }
+  .choices .action { display: flex; align-items: center; gap: 8px; }
+  .choices .more { margin-left: auto; color: #6b786f; font-weight: 500; font-size: 12px; }
+  .row.start { justify-content: start; }
+  /* The block scrolls and its frame does not, so the copy button stays in its corner. */
+  .code { position: relative; margin: 10px 0; }
+  pre { margin: 0; padding: 10px 64px 10px 12px; border: 1px solid #e0e6df; border-radius: 8px; background: #f6f8f5; font: 12px/1.5 ui-monospace, monospace; white-space: pre; overflow-x: auto; }
+  .code .action { position: absolute; top: 6px; right: 6px; padding: 3px 8px; font-size: 11px; }
+  label { display: grid; gap: 4px; margin-top: 12px; font-weight: 600; }
+  input[type=url], input[type=email], input[type=tel], input[type=text], textarea { width: 100%; padding: 8px 10px; border: 1px solid #cfd8d2; border-radius: 8px; font: 13px/1.4 system-ui, sans-serif; color: inherit; background: #fff; }
+  textarea { font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; }
+  fieldset { margin: 16px 0 0; padding: 10px 14px; border: 1px solid #e0e6df; border-radius: 10px; }
+  legend { padding: 0 4px; color: #6b786f; font-size: 11px; font-weight: 550; }
+  fieldset label { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-weight: 500; }
+  .error { color: #9b2c33; }
+`;
+/** Puts a copy control on a block the holder must reproduce exactly, as the flow page does. */
+function codeBlock(code) {
+    const block = node('div', '', 'code');
+    const scroller = node('pre');
+    const text = node('code', code);
+    const copy = node('button', 'Copy', 'action');
+    copy.type = 'button';
+    copy.setAttribute('aria-live', 'polite');
+    copy.addEventListener('click', async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            copy.textContent = 'Copied';
+        }
+        catch {
+            // No clipboard: select it, one keystroke from copied, rather than claim it worked.
+            const range = document.createRange();
+            range.selectNodeContents(text);
+            getSelection()?.removeAllRanges();
+            getSelection()?.addRange(range);
+            copy.textContent = 'Selected';
+        }
+        setTimeout(() => (copy.textContent = 'Copy'), 2000);
+    });
+    scroller.append(text);
+    block.append(scroller, copy);
+    return block;
+}
+/** A paragraph with links in it. A link that is not http(s) is written as its text alone. */
+function paragraph(pieces) {
+    const element = node('p');
+    for (const piece of pieces) {
+        if (typeof piece === 'string')
+            element.append(document.createTextNode(piece));
+        else if (httpUrl(piece.href))
+            element.append(outward(node('a', piece.text), piece.href));
+        else
+            element.append(document.createTextNode(piece.text));
+    }
+    return element;
+}
+function httpUrl(value) {
+    try {
+        return ['http:', 'https:'].includes(new URL(value).protocol);
+    }
+    catch {
+        return false;
+    }
+}
+function button(label, primary = false) {
+    const element = node('button', label, primary ? 'action primary' : 'action');
+    element.type = 'button';
+    return element;
+}
+const openDialogs = new WeakMap();
+/**
+ * Walks the holder through connecting an account without leaving the page: pick a method,
+ * prove it, approve it. A sign-in method still needs the provider's own page, so that one
+ * step runs in a small window, and the dialog picks the flow back up once it returns.
+ * Resolves when the dialog closes, with how the last flow ended.
+ */
+export function openConnectDialog(opener, api, 
+/**
+ * Given when this dialog was opened from another, which it stands in place of: the
+ * header then has a way back, and `back` is called once this dialog has closed by it.
+ */
+back, 
+/** The provider to start on, where the holder already said which account they mean. */
+provider) {
+    const existing = openDialogs.get(opener);
+    if (existing?.open) {
+        existing.focus();
+        return Promise.resolve({ outcome: 'cancelled' });
+    }
+    const host = document.createElement('div');
+    const root = host.attachShadow({ mode: 'open' });
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(connectStyles);
+    root.adoptedStyleSheets = [sheet];
+    const dialog = node('dialog');
+    const heading = node('h2', 'Verify an account');
+    const close = node('button', '×');
+    const header = node('header');
+    const stamp = node('footer');
+    const content = node('div', 'Loading…', 'steps');
+    heading.id = 'verily-connect-title';
+    dialog.setAttribute('aria-labelledby', heading.id);
+    close.type = 'button';
+    close.setAttribute('aria-label', 'Close');
+    content.setAttribute('aria-live', 'polite');
+    stamp.append(verilyLogo(), node('span', version));
+    header.append(heading, close);
+    dialog.append(header, content, stamp);
+    root.append(dialog);
+    document.body.append(host);
+    openDialogs.set(opener, dialog);
+    let returning = false;
+    if (back) {
+        const before = node('button', '‹');
+        before.type = 'button';
+        before.setAttribute('aria-label', 'Back');
+        header.className = 'backed';
+        header.replaceChildren(before, heading, close);
+        before.onclick = () => {
+            returning = true;
+            dialog.close();
+        };
+    }
+    let outcome = { outcome: 'cancelled' };
+    let methods;
+    let group = provider;
+    let popup = null;
+    let poll;
+    /** An approval sent and not yet answered: the dialog's result waits for it. */
+    let approving;
+    /**
+     * Which step is on screen. Anything asked for on an earlier step is ignored when it
+     * answers, so an abandoned flow can never draw over the one that replaced it.
+     */
+    let step = 0;
+    /** Leaves the current step, and stops watching a sign-in window. */
+    const leave = () => {
+        step++;
+        clearInterval(poll);
+        poll = undefined;
+    };
+    /** Leaves the current step, and shuts a sign-in window if one is still up. */
+    const settle = () => {
+        leave();
+        popup?.close();
+        popup = null;
+    };
+    /** Whether the step that asked for something is still the one on screen. */
+    const current = (asked) => asked === step && dialog.open;
+    const failure = (message) => {
+        settle();
+        const again = button('Try again', true);
+        again.onclick = () => void choose();
+        content.replaceChildren(node('p', message, 'error'), row(again));
+    };
+    const row = (...buttons) => {
+        const element = node('div', '', 'row');
+        element.append(...buttons);
+        return element;
+    };
+    /**
+     * Runs one request, holding the button that asked for it until it answers, and hands
+     * the answer on only if the holder is still on the step that asked.
+     */
+    const busy = async (control, request, then) => {
+        const asked = step;
+        control.disabled = true;
+        try {
+            const value = await request();
+            if (current(asked))
+                then(value);
+        }
+        catch {
+            if (current(asked))
+                failure('That did not go through. Please try again.');
+        }
+        finally {
+            control.disabled = false;
+        }
+    };
+    const subjectCard = (subject) => accountCard([document.createTextNode(subject.heading)], subject.value, undefined, subject.profileUrl);
+    /**
+     * The methods on offer. A provider shown more than one way is one button for that
+     * provider, which opens onto its own methods; the rest stand on their own. `group` is
+     * remembered, so backing out of a method returns to the list it was picked from.
+     */
+    async function choose() {
+        settle();
+        const asked = step;
+        try {
+            methods ??= await api.methods();
+        }
+        catch {
+            if (!current(asked))
+                return;
+            content.replaceChildren(node('p', 'Sign in to this site to verify an account, then try again.', 'error'));
+            return;
+        }
+        if (!current(asked))
+            return;
+        const all = methods.methods;
+        // A provider asked for that this holder is not offered leaves every option open.
+        if (group !== undefined && !all.some((m) => m.provider === group))
+            group = undefined;
+        const count = (provider) => all.filter((m) => m.provider === provider).length;
+        const list = node('div', '', 'choices');
+        const drawn = new Set();
+        for (const choice of all) {
+            if (group !== undefined && choice.provider !== group)
+                continue;
+            if (group === undefined && count(choice.provider) > 1) {
+                if (drawn.has(choice.provider))
+                    continue;
+                drawn.add(choice.provider);
+                const open = labelled(choice.provider, choice.name);
+                open.append(node('span', `${count(choice.provider)} ways ›`, 'more'));
+                open.setAttribute('aria-label', `${choice.name}: ${count(choice.provider)} ways`);
+                open.onclick = () => {
+                    group = choice.provider;
+                    void choose();
+                };
+                list.append(open);
+                continue;
+            }
+            const control = labelled(choice.provider, choice.action, choice.method);
+            control.onclick = () => {
+                // Opened in the click itself, or a browser would block it; pointed at the
+                // provider once the flow exists.
+                if (choice.method === 'oauth') {
+                    popup = window.open('about:blank', '_blank', 'popup,width=600,height=750');
+                    if (!popup) {
+                        failure('Allow pop-ups for this site to sign in, then try again.');
+                        return;
+                    }
+                }
+                void busy(control, () => api.start(choice.provider, choice.method), show);
+            };
+            list.append(control);
+        }
+        const name = all.find((m) => m.provider === group)?.name;
+        const parts = [
+            subjectCard(methods.local),
+            node('p', name
+                ? `Choose how to show you control your ${name} account.`
+                : 'Choose how to show you control the other account.', 'explanation'),
+            list,
+        ];
+        if (group !== undefined) {
+            const back = button('‹ All options');
+            back.onclick = () => {
+                group = undefined;
+                void choose();
+            };
+            parts.push(Object.assign(row(back), { className: 'row start' }));
+        }
+        content.replaceChildren(...parts);
+        list.querySelector('button')?.focus();
+    }
+    /** A choice button: the provider's mark where it has one, then what the button does. */
+    function labelled(provider, text, method) {
+        const control = button('');
+        const logo = providerMark(provider, method);
+        if (logo)
+            control.append(logo);
+        control.append(node('span', text));
+        return control;
+    }
+    /** Draws whichever step the flow is at. */
+    function show(flow) {
+        if (flow.phase === 'pending' && flow.authorizationUrl) {
+            leave();
+            return signIn(flow);
+        }
+        settle();
+        if (flow.phase === 'pending' && flow.instructions)
+            return publish(flow);
+        if (flow.phase === 'pending' && flow.code)
+            return mailed(flow);
+        if (flow.phase === 'approval')
+            return approve(flow);
+        if (flow.phase === 'complete') {
+            outcome = { outcome: 'complete', connectionId: flow.connectionId };
+            return done();
+        }
+        if (flow.phase === 'cancelled')
+            return void choose();
+        failure(flow.reason ? `Verification failed: ${flow.reason}.` : 'Verification failed.');
+    }
+    /**
+     * Sends the sign-in window to the provider and watches the flow until it comes back.
+     * The flow itself says when it has, so no message from the window is needed or trusted.
+     */
+    function signIn(flow) {
+        if (!popup || popup.closed)
+            return failure('The sign-in window was closed.');
+        if (api.enter)
+            api.enter(popup, flow);
+        else
+            popup.location.href = flow.authorizationUrl;
+        const cancel = button('Cancel');
+        cancel.onclick = () => void choose();
+        content.replaceChildren(node('p', `Continue in the ${flow.provider.name} window that opened.`), row(cancel));
+        const asked = step;
+        poll = setInterval(async () => {
+            const closed = !popup || popup.closed;
+            try {
+                const now = await api.read(flow.id);
+                if (!current(asked))
+                    return;
+                if (!['pending', 'exchanging'].includes(now.phase))
+                    show(now);
+                else if (closed)
+                    void choose();
+            }
+            catch {
+                if (current(asked) && closed)
+                    failure('Verification failed.');
+            }
+        }, 1000);
+    }
+    function publish(flow) {
+        const input = flow.artifact === 'document'
+            ? node('textarea')
+            : Object.assign(node('input'), { type: 'url' });
+        input.name = 'artifact';
+        input.required = true;
+        if (input instanceof HTMLTextAreaElement)
+            input.rows = 10;
+        const label = node('label', flow.field ?? 'Your proof');
+        label.append(input);
+        const check = button('Check my proof', true);
+        const back = button('Back');
+        back.onclick = () => void choose();
+        check.onclick = () => {
+            if (!input.value.trim()) {
+                input.focus();
+                return;
+            }
+            void busy(check, () => api.submit(flow.id, input.value), show);
+        };
+        content.replaceChildren(...flow.instructions.map((part) => typeof part === 'string'
+            ? node('p', part)
+            : Array.isArray(part)
+                ? paragraph(part)
+                : codeBlock(part.code)), label, row(back, check), ...(flow.note ? [node('p', flow.note, 'muted')] : []));
+    }
+    /**
+     * A mailed code, in two steps on the one flow: the holder names an address, then enters
+     * the code that arrived there. Both go back the way a proof does.
+     */
+    function mailed(flow) {
+        const { field, sentTo, wrong, triesLeft } = flow.code;
+        const sent = sentTo !== undefined;
+        const input = Object.assign(node('input'), {
+            type: sent ? 'text' : flow.code.input,
+            name: 'artifact',
+            required: true,
+            autocomplete: sent ? 'one-time-code' : flow.code.input,
+        });
+        if (sent) {
+            input.autocapitalize = 'characters';
+            input.spellcheck = false;
+        }
+        const label = node('label', sent ? 'Your code' : field);
+        label.append(input);
+        const check = button(sent ? 'Check my code' : `Send the ${flow.provider.name.toLowerCase()}`, true);
+        const back = button('Back');
+        back.onclick = () => void choose();
+        const send = () => {
+            // No form is submitted here, so the browser's own check of the field is asked for:
+            // an address it would refuse in a form is refused the same way, in its own words.
+            if (!input.value.trim() || !input.checkValidity()) {
+                input.reportValidity();
+                input.focus();
+                return;
+            }
+            void busy(check, () => api.submit(flow.id, input.value), show);
+        };
+        check.onclick = send;
+        input.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter')
+                send();
+        });
+        const parts = [];
+        if (sent)
+            parts.push(node('p', `A message was sent to ${sentTo}. Press the button in it, or enter its code here.`));
+        if (sent && wrong)
+            parts.push(node('p', `That code did not match. ${triesLeft === 1 ? 'One try is' : `${triesLeft} tries are`} left.`, 'error'));
+        content.replaceChildren(...parts, label, row(back, check), ...(!sent && flow.note ? [node('p', flow.note, 'muted')] : []));
+        input.focus();
+        if (!sent)
+            return;
+        // The button in the message is pressed somewhere else, so only the flow can say it
+        // was. A code half typed is left alone: nothing is redrawn until the step moves on.
+        const asked = step;
+        poll = setInterval(async () => {
+            try {
+                const now = await api.read(flow.id);
+                if (current(asked) && !['pending', 'exchanging'].includes(now.phase))
+                    show(now);
+            }
+            catch {
+                // A read that fails says nothing about the flow, which the next one may.
+            }
+        }, 2000);
+    }
+    function approve(flow) {
+        const logo = providerMark(flow.provider.id, flow.provider.method);
+        const external = accountCard(logo
+            ? [logo, document.createTextNode(flow.provider.name)]
+            : [document.createTextNode(flow.provider.name)], externalName(flow.external), flow.external.kind === 'mailbox' ? undefined : flow.external.id, externalLink(flow.external));
+        const parts = [subjectCard(flow.local), linkMark(), external];
+        const choice = node('fieldset');
+        const visibilityText = {
+            unlisted: 'Unlisted: only people you share a link with can view it',
+            public: 'Public: anyone can view both sides of this link' +
+                (flow.signedNote ? `. ${flow.signedNote}` : ''),
+        };
+        // The backend refuses any other, so the dialog neither offers one nor sends one.
+        const only = flow.visibilities?.length === 1 ? flow.visibilities[0] : undefined;
+        if (flow.joined)
+            parts.push(node('p', `This account is already linked here. Confirming adds this method to that connection, and it stays ${flow.joined.visibility}.`));
+        else if (only)
+            // Nothing to choose, so the one visibility there is gets said, not offered.
+            parts.push(node('p', visibilityText[only]));
+        else {
+            choice.append(node('legend', 'Evidence visibility'));
+            for (const value of ['unlisted', 'public']) {
+                const text = visibilityText[value];
+                const option = node('label');
+                const radio = Object.assign(node('input'), { type: 'radio', name: 'visibility', value });
+                radio.checked = value === 'unlisted';
+                option.append(radio, document.createTextNode(text));
+                choice.append(option);
+            }
+            parts.push(choice);
+        }
+        if (methods)
+            parts.push(node('p', `${methods.siteName} receives the result. Verified via ${methods.verifierName}.`, 'muted'));
+        const confirm = button(flow.joined ? 'Add to connection' : 'Confirm connection', true);
+        const cancel = button('Cancel');
+        /** One decision at a time: a second one sent beside the first could answer for it. */
+        let deciding = false;
+        const decide = async (control, cancelled) => {
+            if (deciding)
+                return;
+            deciding = true;
+            const other = control === confirm ? cancel : confirm;
+            const picked = choice.querySelector('input:checked');
+            const visibility = only ?? (picked?.value === 'public' ? 'public' : 'unlisted');
+            other.disabled = true;
+            // The outcome is taken as soon as the server answers, even if the dialog has closed
+            // in the meantime: a connection recorded after the holder looked away is still one.
+            const request = api.approve(flow.id, visibility, cancelled).then((result) => {
+                if (result.outcome === 'complete')
+                    outcome = result;
+                return result;
+            });
+            approving = request;
+            try {
+                await busy(control, () => request, (result) => (result.outcome === 'complete' ? done() : void choose()));
+            }
+            finally {
+                deciding = false;
+                other.disabled = false;
+            }
+        };
+        confirm.onclick = () => void decide(confirm, false);
+        cancel.onclick = () => void decide(cancel, true);
+        content.replaceChildren(...parts, row(cancel, confirm));
+    }
+    function done() {
+        settle();
+        const finish = button('Done', true);
+        finish.onclick = () => dialog.close();
+        content.replaceChildren(node('p', 'The connection is recorded.', 'state'), row(finish));
+        finish.focus();
+    }
+    close.addEventListener('click', () => dialog.close());
+    dialog.addEventListener('click', (event) => {
+        const bounds = dialog.getBoundingClientRect();
+        if (event.target === dialog &&
+            (event.clientX < bounds.left ||
+                event.clientX > bounds.right ||
+                event.clientY < bounds.top ||
+                event.clientY > bounds.bottom))
+            dialog.close();
+    });
+    const closed = new Promise((resolve) => dialog.addEventListener('close', () => {
+        settle();
+        openDialogs.delete(opener);
+        host.remove();
+        opener.firstElementChild?.shadowRoot?.querySelector('button')?.focus();
+        if (returning)
+            back();
+        // Closed with an approval still out: its answer decides the result.
+        void Promise.resolve(approving)
+            .catch(() => { })
+            .then(() => resolve(outcome));
+    }, { once: true }));
+    dialog.showModal();
+    void choose();
+    return closed;
+}

package/dist/browser/evidence-dialog.d.ts

@@ -0,0 +1,59 @@
+import { type Evidence } from '../core/index.js';
+export declare const styles = "\n  * { box-sizing: border-box; }\n  dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 24px; border: 1px solid #dce2de; border-radius: 16px; background: #fff; color: #23312b; box-shadow: 0 24px 90px #10201935; font: 13px/1.6 system-ui, sans-serif; }\n  dialog::backdrop { background: #15271f66; }\n  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n  h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }\n  button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }\n  button:hover { background: #f2f5f1; }\n  a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }\n  a:focus-visible, button:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }\n  .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }\n  .mark { width: 36px; height: 36px; flex-shrink: 0; }\n  .provider { width: 14px; height: 14px; }\n  .state { font-size: 14px; font-weight: 650; line-height: 1.4; }\n  .muted { color: #6b786f; font-size: 12px; }\n  .account { position: relative; }\n  .veiled > :not(.checking) { filter: blur(4px); opacity: .55; user-select: none; }\n  .checking { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #23312b; font-size: 13px; font-weight: 600; }\n  .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }\n  .caution { display: inline-block; margin-left: 4px; color: #a15c00; cursor: help; vertical-align: middle; }\n  .caution svg { display: block; width: 12px; height: 12px; }\n  .bad { color: #b3261e; font-weight: 650; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }\n  .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }\n  .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .account a, .account strong { font-weight: 650; font-size: 14px; }\n  /* The account's own name carries that weight; a link inside a line of prose does not. */\n  .summary a, .method a, .additional a { font: inherit; }\n  .reference { margin-top: 2px; }\n  .method { margin-top: 8px; }\n  .additional { margin-top: 2px; padding-left: 12px; }\n  .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }\n  dl { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e5e9e3; display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 11px; }\n  dt { color: #6b786f; }\n  dd { margin: 0; text-align: right; overflow-wrap: anywhere; }\n  .explanation { margin-top: 16px; }\n  .action { width: auto; height: auto; padding: 9px 14px; font: 600 13px/1.3 system-ui, sans-serif; color: #23312b; text-align: left; }\n  .action.primary { border-color: #245f43; background: #245f43; color: #fff; }\n  .action.primary:hover { background: #1d4f37; }\n  .action:disabled { opacity: .6; cursor: progress; }\n  .action.danger:hover { border-color: #b3261e; background: #fdecea; color: #b3261e; }\n  .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }\n  .account .row { align-items: center; justify-content: start; margin-top: 12px; }\n  .account .action { padding: 5px 10px; font-size: 12px; }\n  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin-top: 14px; color: #9aa9a0; font-size: 11px; }\n  .logo { display: block; height: 13px; }\n  \n  @media (prefers-reduced-motion: no-preference) {\n    .mark.current path:last-child { animation: verily-draw .8s cubic-bezier(.65, 0, .35, 1) .1s backwards; }\n  }\n  @keyframes verily-draw { from { stroke-dasharray: 0 176; } to { stroke-dasharray: 108 176; } }\n\n";
+export declare function node<K extends keyof HTMLElementTagNameMap>(tag: K, text?: string, className?: string): HTMLElementTagNameMap[K];
+/**
+ * Points an anchor out of the dialog. Every link here opens in a new tab: the dialog is
+ * read against what it links to, and following one in place would close the dialog and
+ * take the reader off the page the pill was on. `noreferrer` keeps the opener unreachable.
+ */
+export declare function outward(anchor: HTMLAnchorElement, url: string): HTMLAnchorElement;
+/** Joins the two cards: the link itself, drawn rather than described. */
+export declare function linkMark(): SVGSVGElement;
+/**
+ * Both sides of a link render as the same card, so a reader can see it is a pair.
+ * `extra` carries evidence belonging to that side alone: a provider authenticates and
+ * expires on its own terms, and a second provider on the same subject would differ.
+ */
+export declare function accountCard(heading: Node[], name: string, reference: string | undefined, url?: string, ...extra: HTMLElement[]): HTMLElement;
+/**
+ * A record as a card shows it. Where the card speaks for several records of one account,
+ * `links` names every one not yet revoked, whether or not it is shown, so removing the
+ * account removes them all and none is left to take the card up again.
+ */
+export type Account = Evidence & {
+    links?: string[];
+    /**
+     * The records as they were read, where a card is drawn from more than one: what it says
+     * is put together from all of them, and each has a signed record of its own.
+     */
+    sources?: Evidence[];
+};
+/**
+ * What the holder of the accounts shown may do from the dialog, where the page that drew
+ * the badge said its reader is that holder.
+ */
+export interface Manage {
+    /** Opens what connects an account, in this dialog's place. Given a provider, starts on it. */
+    connect(provider?: string): void;
+    /** Removes the links named. Rejects if any could not be removed. */
+    remove(ids: string[]): Promise<void>;
+}
+/**
+ * Fetch fresh, permitted evidence; native dialog supplies focus containment and Escape
+ * dismissal. `opened` is the record the opener already holds: the dialog is drawn from it
+ * before it is shown, so it appears at the size it will keep rather than growing into its
+ * own contents, and the check that follows either leaves it alone or replaces it.
+ */
+export declare function openEvidenceDialog(opener: HTMLElement, load: () => Promise<Evidence | Evidence[]>, opened?: Evidence | Evidence[], 
+/**
+ * Turns the records held into the cards drawn, each time they are drawn. The dialog
+ * keeps the records as they were read and arranges them afresh at every deadline: which
+ * record speaks for an account depends on which are still good, and that changes with
+ * the clock, not only with what is read.
+ */
+arrange?: (records: Evidence[]) => Account[], 
+/**
+ * Given where whoever is looking holds these accounts: each then has its renewal and
+ * removal under it, and the dialog offers to connect another.
+ */
+manage?: Manage): void;