@bkazemi/verily 0.5.0 → 0.7.0

package/README.md

@@ -145,7 +145,7 @@ import { init } from '@bkazemi/verily'; // also registers <verily-badge>
 const client = init({ backendUrl: '/api/verily' });
 ```
 
-Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.5.0/dist/verily.js`. The script defines a global `Verily`.
+Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.7.0/dist/verily.js`. The script defines a global `Verily`.
 
 Then place the badge wherever the account appears:
 
@@ -184,6 +184,8 @@ Add `stacked` to name the accounts in the badge itself, one to a row:
 
 It lists up to four verified accounts in the order they were connected, then counts the rest as `+2 more`. It is still one badge that opens the one set of details. It is as tall as its rows, so give it a line of its own. With one verified account it is the ordinary badge. `mountBadges` and `presentConnections` take the same choices as `{ stacked: true }` and `{ peek: false }`.
 
+In the details of several accounts, each account is a short card: its name, its status and who verified it. How it was shown and its dates sit behind a Details toggle on the card, and retired accounts are folded into a group at the foot. Add `details-open` to the badge, or pass `{ detailsOpen: true }`, to start every card open where your readers come for the proof. A reader can still open or shut each one. A single account always shows everything.
+
 The badge refreshes every 30 seconds, and only ever reads public evidence. The client can also start and end connections, and draw a badge into an element of your own:
 
 ```js
@@ -229,6 +231,8 @@ import {
 
 All methods except the sign-ins and the mailed code let the user publish the proof in their own time and come back. A proof that does not check out can be put right and handed back on the same step, up to five times, so a mistyped address never means publishing or signing again. Gists, link-backs, DNS records and files can be taken down later, so Verily re-reads them on a schedule. A PGP signature is kept by Verily and published at `<baseUrl>/connections/<id>/proof`.
 
+**How old an account is.** A link shows who controls an account, not how long it has existed. Signing in with GitHub, Discord or YouTube also reads when the account was made: GitHub's `created_at`, the time inside a Discord id, and a YouTube channel's `publishedAt`. It is kept on the record as `external.createdAt`, in milliseconds, shown as "Joined" beside the account's name on evidence and in the badge's dialog, and covered by a signed record. The other methods read an address or a proof and learn no date, so a record first shown by one of them has none until its holder also signs in. A provider of your own sets it by returning `createdAt` from `authenticate()`.
+
 **Several at once.** List more than one, and `/verify` offers each method as its own button:
 
 ```ts
@@ -299,7 +303,7 @@ A static site only needs the script and the badge markup; the backend runs somew
 4. Add the script and the badge to your site:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.5.0/dist/verily.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.7.0/dist/verily.js" defer></script>
 <verily-badge
   backend-url="https://your-backend.example"
   connection-id="CONNECTION_ID"
@@ -391,7 +395,7 @@ To show them, hand the records to the badge. It draws them as given and fetches
 
 From script, set the property instead: `badge.connections = records`. Send a page only the records its reader may see: whatever is in the page, the reader has. Several records become one badge, as under [Show the badge](#show-the-badge), and an unlisted one opens its details without linking anywhere.
 
-Each record has the provider, the external account's handle and profile address, the visibility and the expiry. Unlisted records are included, and only your site can read them, so you can show a link to your own users without making it public. `connections()` takes any number of ids, so read a whole page of users in one call. Pass `cacheMs` to the client to reuse an answer for that long, and `{ fresh: true }` to a call that must not.
+Each record has the provider, the external account's handle and profile address, the visibility and the expiry. Unlisted records are included, and only your site can read them, so you can show a link to your own users without making it public. `connections()` takes any number of ids, so read a whole page of users in one call. Every call reads the instance, so a removed or expired link stops showing on the next page load. Passing `cacheMs` to the client reuses an answer for that long, and a connection revoked in that time still shows as verified until it runs out, so leave it unset or keep it to a few seconds. `{ fresh: true }` makes one call read anyway.
 
 If you would rather your user ids never left your site, give the client a secret:
 
@@ -443,7 +447,7 @@ With a key set:
 - **`GET <baseUrl>/connections/<id>?format=signed`** returns the signed file for a public record that is currently verified: the record as JSON under an OpenPGP cleartext signature. It is signed when asked for, so it says the record stood at that moment. An unlisted, revoked or expired record has no signed form. A public retired record has one, signed as `version: 2` with `status: "retired"` and `retiredAt`, so a reader that knows only version 1 refuses it and never takes it for a record that stood.
 - **`GET <baseUrl>/keys.asc`** is the public key as `gpg --import` reads it. **`GET <baseUrl>/keys`** lists the same keys as JSON, each with its fingerprint. The Cloudflare Worker also serves that list at `/.well-known/verily-keys.json`.
 - **`<baseUrl>/check`** is a page where a saved file can be pasted and read back.
-- The evidence page says the record is signed and links to the signed record. The badge's dialog checks the signature in the browser with OpenPGP.js, which it starts only when a record is signed, marks the record `signed ✓`, and links to that page. A record whose signature fails is shown as unconfirmed.
+- The evidence page says the record is signed and links to the signed record. The badge's dialog checks the signature in the browser with OpenPGP.js, which it starts only when a record is signed, marks the record with a `signed` pill after its verifier, and links to that page. A record whose signature fails is shown as unconfirmed, with `bad signature` in the pill's place.
 - The approval step tells the holder that a saved signed record outlives removal.
 
 To check a file yourself:
@@ -507,6 +511,8 @@ The Cloudflare Worker sets `dns: true`.
 
 ## Operations
 
+DNS setup is saved for seven days from its first attempt. If propagation takes longer than a flow’s ten minutes, sign in and choose DNS again to restore the same TXT value and the last domain entered (or restart the same renewal). Each return creates a fresh flow and reads the proof again; the saved setup grants no verification on its own. Only the most recent domain entered is remembered for that operation. Keep the TXT record after verification for ongoing checks. A proof covers the exact domain entered; verify parent domains and subdomains separately.
+
 Verification lasts 30 days, flows 10 minutes, and sharing links 7 days. Change them with `validityMs`, `flowTtlMs` and `shareTtlMs`. Evidence is never cached.
 
 Run the upkeep on a schedule, for example hourly:
@@ -525,8 +531,21 @@ setInterval(
 );
 ```
 
-- **`prune()`** deletes expired flows, and deletes expired or revoked records after 90 days. A retired record is kept until it is removed.
-- **`recheck()`** re-reads gists, link-backs, DNS records and files that are due, up to 5 per run (its `budget` argument). Each proof is re-read every 24 hours (`recheckMs`) and stays current for 7 days after its last successful read (`freshnessMs`); after that it shows as unconfirmed until a read succeeds. A failed read changes nothing. For PGP, it asks the keyserver whether the key has been revoked, and revokes the connection if so.
+- **`prune()`** deletes expired flows and DNS drafts, and deletes expired or revoked records after 90 days. A retired record is kept until it is removed.
+- **`recheck()`** re-reads gists, link-backs, DNS records and files that are due, up to 5 per provider per run (its `budget` argument). Each proof is re-read every 24 hours (`recheckMs`). A read that finds the proof gone, such as a deleted gist, a page without the link or a DNS answer without the record, makes the connection unconfirmed at once. A read that fails, such as a timeout or a server error, changes nothing, and the proof stays current for 7 days after its last successful read (`freshnessMs`). Either way the proof is read again after a quarter of `recheckMs`, and the connection is verified again as soon as a read finds the proof. A provider of your own says a proof is gone by throwing `Absent` from `verify`; any other error is a failed read. For PGP, it asks the keyserver whether the key has been revoked, and revokes the connection if so.
+
+- **`onChange`** is an option, not a call. Set it to hear when a record's status, visibility, expiry or mark changes, so your site can update its own copy without polling:
+
+  ```ts
+  createVerily({
+    // ...
+    onChange: async ({ evidence, local, revision }) => {
+      await db.saveConnectionIfNewer(local.id, evidence, revision);
+    },
+  });
+  ```
+
+  `evidence` is the record as it stands now, `local` is your subject with its private id, `previous` is the status, visibility, expiry and mark last confirmed as delivered, and `revision` counts the deliveries of that record. Keep the `revision` you last applied for each record and ignore a change that is not higher: a call that timed out is not cancelled and can finish after a newer one. A change made by a request is delivered before that request returns, and the call is awaited, so keep it quick. A record that expires or goes unconfirmed changes with time alone, so those are delivered by `recheck()`, or by `service.announce()` if you do not recheck. Delivery is at least once: a call that throws is made again on the next run, after the records that have not failed, and turning the option on reports every existing record once, 50 per run. A record removed by `prune()` is not reported.
 
 **If you never call `recheck()`, set `freshnessMs: Infinity`.** Otherwise connections proved by gist, link-back or PGP lapse after a week.
 

package/dist/browser/badge.d.ts

@@ -15,17 +15,20 @@ export declare function renderBadgeMessage(element: HTMLElement, message: string
  * `more` is how many other accounts of the same subject stand behind the one shown, said
  * as a count beside it. `linked` is whether the record has a page of its own a reader can
  * open: an unlisted one has none, so its pill is a button and never a link to nowhere.
+ * `href` is that page, where it is not the record's own: a pill standing for several
+ * accounts links to all of them.
  *
  * `rows` are those of the other accounts to name, in order. Stacked, each has a row of
  * its own in the pill, which is then as tall as its rows. Otherwise the pill stays short
  * and, with `peek`, names them in a panel that opens beside it while a pointer rests on it
  * or the keyboard is on it. Either way the accounts past the rows are a count.
  */
-export declare function renderBadge(element: HTMLElement, evidence: Evidence, { more, linked, rows, peek, }?: {
+export declare function renderBadge(element: HTMLElement, evidence: Evidence, { more, linked, rows, peek, href, }?: {
     more?: number;
     linked?: boolean;
     rows?: Evidence[];
     peek?: boolean;
+    href?: string;
 }): HTMLElement | null;
 /**
  * Shuts a host's panel and lets go of what it was listening for. For a host leaving the

package/dist/browser/badge.js

@@ -155,11 +155,12 @@ export function badgeShown(element) {
     return intact(element) && shown.has(element);
 }
 /** Everything the pill draws: equal keys mean an identical pill. */
-function renderKey(evidence, current, label, more, linked, rows, peek) {
+function renderKey(evidence, current, label, more, linked, rows, peek, href) {
     return JSON.stringify([
         more,
         linked,
         peek,
+        href,
         rows.map((row) => [row.provider, row.providerName, externalName(row.external)]),
         evidence.provider,
         evidence.providerName,
@@ -220,13 +221,15 @@ export function renderBadgeMessage(element, message) {
  * `more` is how many other accounts of the same subject stand behind the one shown, said
  * as a count beside it. `linked` is whether the record has a page of its own a reader can
  * open: an unlisted one has none, so its pill is a button and never a link to nowhere.
+ * `href` is that page, where it is not the record's own: a pill standing for several
+ * accounts links to all of them.
  *
  * `rows` are those of the other accounts to name, in order. Stacked, each has a row of
  * its own in the pill, which is then as tall as its rows. Otherwise the pill stays short
  * and, with `peek`, names them in a panel that opens beside it while a pointer rests on it
  * or the keyboard is on it. Either way the accounts past the rows are a count.
  */
-export function renderBadge(element, evidence, { more = 0, linked = true, rows = [], peek = false, } = {}) {
+export function renderBadge(element, evidence, { more = 0, linked = true, rows = [], peek = false, href = evidence.evidenceUrl, } = {}) {
     const provider = evidence.providerName;
     const current = evidence.status === 'verified' && evidence.expiresAt > Date.now();
     const retired = evidence.status === 'retired';
@@ -238,7 +241,7 @@ export function renderBadge(element, evidence, { more = 0, linked = true, rows =
                 ? 'revoked'
                 : 'expired';
     const label = statusLabel(evidence, Date.now());
-    const key = renderKey(evidence, current, label, more, linked, rows, peek);
+    const key = renderKey(evidence, current, label, more, linked, rows, peek, href);
     if (intact(element) && shown.get(element) === key)
         return null;
     const handle = externalName(evidence.external);
@@ -250,7 +253,7 @@ export function renderBadge(element, evidence, { more = 0, linked = true, rows =
     // is: in the page's text colour, and not as a verification that failed.
     paintMark(mark, current ? 'current' : retired ? 'pending' : 'inactive');
     if (linked) {
-        badge.href = evidence.evidenceUrl;
+        badge.href = href;
         badge.rel = 'noreferrer';
     }
     else

package/dist/browser/connect-dialog.js

@@ -1,5 +1,4 @@
-import { externalId, externalLink, externalName } from '../core/index.js';
-import { accountCard, linkMark, node, outward, stampLink, styles } from './evidence-dialog.js';
+import { accountCard, backMark, closeMark, linkMark, node, namedCard, outward, stampLink, styles, } from './evidence-dialog.js';
 import { providerMark } from './provider-mark.js';
 import { version } from '../version.js';
 const connectStyles = `
@@ -14,13 +13,15 @@ const connectStyles = `
   /* 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; }
+  .code .action { position: absolute; top: 9px; right: 9px; 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; }
+  /* A radio has no baseline to speak of, so it is set in the middle of the label's first line. */
+  fieldset input { flex-shrink: 0; align-self: flex-start; width: 13px; height: 13px; font: inherit; margin-top: 4px; margin-top: calc((1lh - 13px) / 2); margin-bottom: 0; }
   .error { color: #9b2c33; }
 `;
 /** Puts a copy control on a block the holder must reproduce exactly, as the flow page does. */
@@ -110,7 +111,7 @@ renew) {
     root.adoptedStyleSheets = [sheet];
     const dialog = node('dialog');
     const heading = node('h2', 'Verify an account');
-    const close = node('button', '×');
+    const close = node('button', '', 'icon');
     const header = node('header');
     const stamp = node('footer');
     const content = node('div', 'Loading…', 'steps');
@@ -118,6 +119,7 @@ renew) {
     dialog.setAttribute('aria-labelledby', heading.id);
     close.type = 'button';
     close.setAttribute('aria-label', 'Close');
+    close.append(closeMark());
     content.setAttribute('aria-live', 'polite');
     stamp.append(stampLink(), node('span', version));
     header.append(heading, close);
@@ -127,9 +129,10 @@ renew) {
     openDialogs.set(opener, dialog);
     let returning = false;
     if (back) {
-        const before = node('button', '‹');
+        const before = node('button', '', 'icon');
         before.type = 'button';
         before.setAttribute('aria-label', 'Back');
+        before.append(backMark());
         header.className = 'backed';
         header.replaceChildren(before, heading, close);
         before.onclick = () => {
@@ -431,9 +434,9 @@ renew) {
     }
     function approve(flow) {
         const logo = providerMark(flow.provider.id, flow.provider.method);
-        const external = accountCard(logo
+        const external = namedCard(logo
             ? [logo, document.createTextNode(flow.provider.name)]
-            : [document.createTextNode(flow.provider.name)], externalName(flow.external), externalId(flow.external), externalLink(flow.external));
+            : [document.createTextNode(flow.provider.name)], flow.external);
         const parts = [subjectCard(flow.local), linkMark(), external];
         const choice = node('fieldset');
         const visibilityText = {

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

@@ -1,7 +1,7 @@
-import { type Evidence } from '../core/index.js';
+import { type Evidence, type ExternalAccount } from '../core/index.js';
 /** The logotype as a link to the project, as both dialogs carry it in their footer. */
 export declare function stampLink(): HTMLAnchorElement;
-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  /* In the corner the heading leaves empty, apart from everything that was checked. */\n  .listing { position: absolute; top: 12px; right: 14px; padding: 1px 8px; border: 1px solid #e0e6df; border-radius: 999px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .listing.preferred { border-color: #245f43; color: #245f43; }\n  /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */\n  .account.retired { background: #f6f8f5; }\n  .account.retired > a, .account.retired > strong { color: #6b786f; }\n  .account.retired .mark { opacity: .45; }\n  .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }\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; flex-wrap: wrap; 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: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }\n  footer a { display: flex; color: inherit; }\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 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  .icon { display: grid; place-items: center; padding: 0; }\n  .icon svg { width: 16px; height: 16px; }\n  .title { display: flex; align-items: center; gap: 6px; min-width: 0; }\n  .all { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #52645a; }\n  .all:hover { background: #f2f5f1; }\n  .all svg { width: 16px; height: 16px; }\n  a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }\n  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }\n  /* An element given its own display would otherwise go on showing while hidden. */\n  [hidden] { display: none !important; }\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  /* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n  .summary .signed { display: inline-block; margin-left: 5px; padding: 0 6px; border: 1px solid #cfdcd3; border-radius: 999px; font-size: 10px; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: 1px; }\n  .summary a.signed:hover { background: #f2f5f1; }\n  .summary .signed.bad { border-color: #b3261e; color: #b3261e; font-weight: 650; cursor: help; }\n  .caution { display: inline-block; margin-left: 3px; color: #a15c00; vertical-align: -1.5px; }\n  .caution svg { display: block; width: 10px; height: 10px; }\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  /* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */\n  .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }\n  .fingerprint span { display: inline-block; margin-right: .5ch; }\n  .method { margin-top: 8px; }\n  /* In the corner the heading leaves empty, apart from everything that was checked. */\n  .listing { position: absolute; top: 12px; right: 14px; padding: 1px 8px; border: 1px solid #e0e6df; border-radius: 999px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .listing.preferred { border-color: #245f43; color: #245f43; }\n  /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */\n  .account.retired { background: #f6f8f5; }\n  .account.retired > a, .account.retired > strong, .account.retired > .named > a, .account.retired > .named > strong { color: #6b786f; }\n  /* The name, then a dot and the account's creation date. The date wraps under a long name. */\n  /* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */\n  .named { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-left: -4px; padding-left: 4px; overflow-x: clip; }\n  .since { position: relative; white-space: nowrap; }\n  /* The dot sits in the gap before the date. */\n  .since::before { content: \"\u00B7\"; position: absolute; left: -7px; transform: translateX(-50%); }\n  .account.retired .mark { opacity: .45; }\n  .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }\n  summary.group { display: flex; align-items: center; gap: 4px; width: fit-content; border-radius: 4px; list-style: none; cursor: pointer; }\n  summary::-webkit-details-marker { display: none; }\n  .fold { display: flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 2px 8px 2px 4px; margin-left: -4px; border: 0; background: none; font: 550 12px/1.6 system-ui, sans-serif; }\n  .fold svg, summary svg { width: 12px; height: 12px; }\n  .fold[aria-expanded=\"true\"] svg, details[open] > summary svg { transform: rotate(90deg); }\n  @media (prefers-reduced-motion: no-preference) { .fold svg, summary svg { transition: transform .15s; } }\n  /* The fold and what the holder may do share a line, until a question needs the whole of it. */\n  .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }\n  .account .bar .row { margin: 0 0 0 auto; }\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; flex-wrap: wrap; margin-top: 12px; }\n  .account .action { padding: 5px 10px; font-size: 12px; }\n  .account .action.dots { display: grid; place-items: center; align-self: stretch; width: 30px; padding: 0; }\n  .dots svg { width: 16px; height: 16px; }\n  /* Placed under its button each time it opens, above the dialog and clipped by none of it. */\n  .menu { position: fixed; inset: auto; margin: 0; min-width: 170px; padding: 6px; border: 1px solid #dce2de; border-radius: 10px; background: #fff; color: #23312b; box-shadow: 0 12px 40px #10201930; }\n  .menu:popover-open { display: grid; }\n  .account .menu .action { border: 0; border-radius: 6px; padding: 6px 10px; font-weight: 550; }\n  .menu .danger { color: #b3261e; }\n  .menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #e5e9e3; }\n  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }\n  footer a { display: flex; color: inherit; }\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
@@ -9,6 +9,15 @@ export declare function node<K extends keyof HTMLElementTagNameMap>(tag: K, text
  * take the reader off the page the pill was on. `noreferrer` keeps the opener unreachable.
  */
 export declare function outward(anchor: HTMLAnchorElement, url: string): HTMLAnchorElement;
+/**
+ * Where the verifier lists every public record of a record's subject. A record whose
+ * address is not the usual one is left linking to itself.
+ */
+export declare function subjectUrl(e: Evidence): string;
+/** A cross drawn in a square, so it sits in the middle of its button in any font. */
+export declare const closeMark: () => SVGSVGElement;
+/** Points back the way the reader came, drawn for the same reason the cross is. */
+export declare const backMark: () => SVGSVGElement;
 /** Joins the two cards: the link itself, drawn rather than described. */
 export declare function linkMark(): SVGSVGElement;
 /**
@@ -16,7 +25,12 @@ export declare function linkMark(): SVGSVGElement;
  * `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;
+export declare function accountCard(heading: Node[], name: string, reference: string | string[] | undefined, url?: string, ...extra: HTMLElement[]): HTMLElement;
+/**
+ * The card for an external account: its name, link and id, with the "Joined <date>" text
+ * on the name's line when the creation date is known.
+ */
+export declare function namedCard(heading: Node[], external: ExternalAccount, ...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
@@ -74,4 +88,9 @@ 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;
+manage?: Manage, 
+/**
+ * Whether the cards of several accounts start with their details open. They start shut
+ * unless the page asked otherwise, and a reader may turn each either way from there.
+ */
+detailsOpen?: boolean): void;