@bkazemi/verily 0.5.0 → 0.6.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.6.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
@@ -299,7 +301,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.6.0/dist/verily.js" defer></script>
 <verily-badge
   backend-url="https://your-backend.example"
   connection-id="CONNECTION_ID"

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,5 @@
-import { externalId, externalLink, externalName } from '../core/index.js';
-import { accountCard, linkMark, node, outward, stampLink, styles } from './evidence-dialog.js';
+import { externalId, externalIdGroups, externalLink, externalName } from '../core/index.js';
+import { accountCard, backMark, closeMark, linkMark, node, outward, stampLink, styles, } from './evidence-dialog.js';
 import { providerMark } from './provider-mark.js';
 import { version } from '../version.js';
 const connectStyles = `
@@ -14,13 +14,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 +112,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 +120,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 +130,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 = () => {
@@ -433,7 +437,7 @@ renew) {
         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), externalId(flow.external), externalLink(flow.external));
+            : [document.createTextNode(flow.provider.name)], externalName(flow.external), externalIdGroups(flow.external) ?? externalId(flow.external), externalLink(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';
 /** 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  .caution { display: inline-block; margin-left: 4px; color: #a15c00; cursor: help; vertical-align: -1.5px; }\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  /* 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 { color: #6b786f; }\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,7 @@ 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;
 /**
  * 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 +83,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;