@bkazemi/verily 0.6.0 → 0.8.0

package/dist/browser/connect-dialog.js

@@ -1,5 +1,4 @@
-import { externalId, externalIdGroups, externalLink, externalName } from '../core/index.js';
-import { accountCard, backMark, closeMark, 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 = `
@@ -435,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), externalIdGroups(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  .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 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
@@ -26,6 +26,11 @@ export declare function linkMark(): SVGSVGElement;
  * 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 | 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

package/dist/browser/evidence-dialog.js

@@ -1,4 +1,4 @@
-import { attestationLabel, externalId, externalIdGroups, externalLink, externalName, lastProved, localSide, proofTitle, statusLabel, } from '../core/index.js';
+import { attestationLabel, externalId, externalIdGroups, externalLink, externalName, externalSince, lastProved, localSide, proofTitle, statusLabel, } from '../core/index.js';
 import { markStyles, verificationMark } from './mark.js';
 import { providerMark } from './provider-mark.js';
 import { onSignatureResult, signature, standing } from './signed.js';
@@ -40,9 +40,12 @@ export const styles = `
   .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
   @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
-  .caution { display: inline-block; margin-left: 4px; color: #a15c00; cursor: help; vertical-align: -1.5px; }
-  .caution svg { display: block; width: 12px; height: 12px; }
-  .bad { color: #b3261e; font-weight: 650; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
+  /* The "signed" pill after the verifier's name, one size smaller than the line it sits on. */
+  .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; }
+  .summary a.signed:hover { background: #f2f5f1; }
+  .summary .signed.bad { border-color: #b3261e; color: #b3261e; font-weight: 650; cursor: help; }
+  .caution { display: inline-block; margin-left: 3px; color: #a15c00; vertical-align: -1.5px; }
+  .caution svg { display: block; width: 10px; height: 10px; }
   .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }
   .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }
   .account a, .account strong { font-weight: 650; font-size: 14px; }
@@ -58,7 +61,13 @@ export const styles = `
   .listing.preferred { border-color: #245f43; color: #245f43; }
   /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */
   .account.retired { background: #f6f8f5; }
-  .account.retired > a, .account.retired > strong { color: #6b786f; }
+  .account.retired > a, .account.retired > strong, .account.retired > .named > a, .account.retired > .named > strong { color: #6b786f; }
+  /* The name, then a dot and the account's creation date. The date wraps under a long name. */
+  /* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */
+  .named { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-left: -4px; padding-left: 4px; overflow-x: clip; }
+  .since { position: relative; white-space: nowrap; }
+  /* The dot sits in the gap before the date. */
+  .since::before { content: "·"; position: absolute; left: -7px; transform: translateX(-50%); }
   .account.retired .mark { opacity: .45; }
   .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }
   summary.group { display: flex; align-items: center; gap: 4px; width: fit-content; border-radius: 4px; list-style: none; cursor: pointer; }
@@ -232,13 +241,34 @@ function moment(time) {
  * expires on its own terms, and a second provider on the same subject would differ.
  */
 export function accountCard(heading, name, reference, url, ...extra) {
+    return side(heading, name, reference, url, undefined, extra);
+}
+/**
+ * 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 function namedCard(heading, external, ...extra) {
+    return side(heading, externalName(external), 
+    // A mailbox's address or a domain is its name already, so there is no second identifier.
+    externalIdGroups(external) ?? externalId(external), externalLink(external), 
+    // In UTC, so the day matches the one the verifier's own pages print.
+    externalSince(external, (time) => new Date(time).toLocaleDateString(undefined, { dateStyle: 'medium', timeZone: 'UTC' })), extra);
+}
+function side(heading, name, reference, url, since, extra) {
     const card = node('section', '', 'account');
     const title = node('h3');
     const value = node(url ? 'a' : 'strong', name);
     title.append(...heading);
     if (value instanceof HTMLAnchorElement)
         outward(value, url);
-    card.append(title, value);
+    if (since) {
+        // The name and the date share a line, and the date wraps under a long name.
+        const named = node('div', '', 'named');
+        named.append(value, node('span', since, 'muted since'));
+        card.append(title, named);
+    }
+    else
+        card.append(title, value);
     if (typeof reference === 'string')
         card.append(node('div', reference, 'muted reference'));
     else if (reference) {
@@ -420,38 +450,45 @@ function signatures(evidence) {
         : signature(source)));
 }
 /**
- * Says a record is signed, in a word beside its verifier. The word opens the verifier's
- * own page for the record at what it says of the signature, where the signed record is to be
- * had: nothing is downloaded from the card. The signed record is checked here against the
- * verifier's keys: a tick once it has checked, and a warning in the word's place if it
- * fails, the one thing on a card that is a warning. `warned` is told each time that warning
- * is drawn, on the first check or on a later one, so whatever folds the card away opens.
+ * The "signed" pill shown after the verifier's name. It links to the signature section of
+ * the verifier's evidence page, where the signed record can be downloaded.
+ *
+ * The signature is checked here against the verifier's keys:
+ * - valid: the pill says "signed"
+ * - not yet checked: the pill carries a warning sign
+ * - invalid: a warning replaces the pill
+ *
+ * `warned` is called every time the invalid warning is drawn, so a folded card can open.
  */
 function signedMark(evidence, later, warned) {
     const mark = node('span');
-    const link = outward(node('a', 'signed'), `${evidence.evidenceUrl}#signed`);
+    const link = outward(node('a', 'signed', 'signed'), `${evidence.evidenceUrl}#signed`);
     const see = 'See the signature (opens in a new tab)';
     const settle = (results) => {
         const first = results[0];
         if (results.some((result) => result.state === 'invalid')) {
-            const warning = node('span', 'invalid signature', 'bad');
+            // Not a link: the page it would open is the one this record failed to match.
+            const warning = node('span', 'bad signature', 'signed bad');
             warning.setAttribute('role', 'alert');
             // What it means, for a reader who has never met a signature, kept off the card.
             warning.title = `This record does not match the signature ${evidence.verifierName} put on it, so it may have been altered. Do not rely on it.`;
-            mark.replaceChildren(document.createTextNode(' · '), warning);
+            mark.replaceChildren(warning);
             warned();
             return;
         }
         if (first?.state === 'valid' && results.every((result) => result.state === 'valid')) {
-            link.textContent = 'signed ✓';
-            // Names where the keys came from, which is what the tick answers for.
+            // No tick: a signature that checks out is what a reader expects, and the pill is
+            // marked only when it did not. Setting the word again clears a warning sign left in it.
+            link.textContent = 'signed';
+            // Names where the keys came from, which is what the check answers for.
             link.title = `Signature checked in this browser against the keys ${new URL(evidence.evidenceUrl).host} publishes (key ${first.keyId}). ${see}`;
-            mark.replaceChildren(document.createTextNode(' · '), link);
+            mark.replaceChildren(link);
             return;
         }
-        // No verdict was reached. The record is signed and says so, with a warning beside the
-        // word in place of a tick, and why is said on hover. A check that only ran out of time
-        // or could not read what it needed is made again when the dialog next reads.
+        // No verdict was reached. The record is signed and says so, with a warning sign in the
+        // pill, which is all that tells it from one that checked out, and why is said on hover.
+        // A check that only ran out of time or could not read what it needed is made again when
+        // the dialog next reads.
         const why = results.find((result) => result.state === 'unchecked');
         const reason = why?.state === 'unchecked' && why.why === 'timeout'
             ? 'Signature check timed out, retrying.'
@@ -462,8 +499,9 @@ function signedMark(evidence, later, warned) {
         caution.setAttribute('aria-label', reason);
         caution.append(cautionMark());
         link.textContent = 'signed';
+        link.append(caution);
         link.title = `${reason} ${see}`;
-        mark.replaceChildren(document.createTextNode(' · '), link, caution);
+        mark.replaceChildren(link);
         if (why)
             later(() => void signatures(evidence).then(settle));
     };
@@ -585,12 +623,10 @@ function externalCard(evidence, manage, later = () => { }, fold, warned = () =>
     if (fold)
         bar.append(foldToggle([...methods, dates], fold), ...row);
     const logo = providerMark(evidence.provider, evidence.attestations.external[0].method);
-    const card = accountCard(
+    const card = namedCard(
     // The mark and the name, or just the name. A mark that falls back to writing the name
     // would print it twice here, since this heading writes it either way.
-    logo ? [logo, document.createTextNode(provider)] : [document.createTextNode(provider)], externalName(evidence.external), 
-    // A mailbox's address or a domain is its name already, so there is no second identifier.
-    externalIdGroups(evidence.external) ?? externalId(evidence.external), externalLink(evidence.external), 
+    logo ? [logo, document.createTextNode(provider)] : [document.createTextNode(provider)], evidence.external, 
     // Status first, then how it was shown, then when. The proof explains the state
     // above it, so it cannot sit before that state has been given.
     summary, ...(fold ? [] : methods), 

package/dist/browser/index.js

@@ -649,6 +649,9 @@ function validEvidence(value) {
         ['label', 'reference'].every((k) => typeof value.local[k] === 'string') &&
         ['id', 'handle', 'profileUrl'].every((k) => typeof value.external[k] === 'string') &&
         (value.local.profileUrl === undefined || typeof value.local.profileUrl === 'string') &&
+        (value.external.createdAt === undefined ||
+            (typeof value.external.createdAt === 'number' &&
+                Number.isFinite(value.external.createdAt))) &&
         // A signed record lives beside the record it was made from and nowhere else, since the
         // keys it is checked against are read from where the record lives.
         (value.signedUrl === undefined || value.signedUrl === `${value.evidenceUrl}?format=signed`) &&

package/dist/browser/mark.d.ts

@@ -1,9 +1,5 @@
-/**
- * How sure the mark is: `current` for a verification that holds, `inactive` for one that
- * does not, and `pending` for one nobody has confirmed yet, which claims nothing and is
- * drawn in the surrounding text colour.
- */
-export type MarkTone = 'current' | 'inactive' | 'pending';
+import { type MarkTone } from '../marks.js';
+export type { MarkTone };
 /**
  * The check draws itself in from its left end once the verification holds: when a pill's
  * mark first becomes `current`, and each time the dialog opens on a current one.

package/dist/browser/mark.js

@@ -1,8 +1,4 @@
-const tones = {
-    current: ['#D3444C', '#149766'],
-    inactive: ['#149766', '#D3444C'],
-    pending: ['currentColor', 'currentColor'],
-};
+import { tones, verification } from '../marks.js';
 /**
  * The check draws itself in from its left end once the verification holds: when a pill's
  * mark first becomes `current`, and each time the dialog opens on a current one.
@@ -24,20 +20,18 @@ export function paintMark(svg, tone) {
 export function verificationMark(tone = 'current') {
     const namespace = 'http://www.w3.org/2000/svg';
     const svg = document.createElementNS(namespace, 'svg');
-    svg.setAttribute('viewBox', '-4 -4 264 264');
+    svg.setAttribute('viewBox', verification.viewBox);
     svg.setAttribute('fill', 'none');
     svg.setAttribute('aria-hidden', 'true');
     svg.setAttribute('focusable', 'false');
     for (const layer of [0, 1]) {
         const path = document.createElementNS(namespace, 'path');
-        path.setAttribute('d', 'M40 36 128 220 216 36');
+        path.setAttribute('d', verification.path);
         path.setAttribute('stroke-width', '32');
         path.setAttribute('stroke-linejoin', 'miter');
-        if (layer === 1) {
-            path.setAttribute('pathLength', '176');
-            path.setAttribute('stroke-dasharray', '108 176');
-            path.setAttribute('stroke-dashoffset', '-54');
-        }
+        if (layer === 1)
+            for (const [name, value] of Object.entries(verification.check))
+                path.setAttribute(name, value);
         svg.append(path);
     }
     paintMark(svg, tone);

package/dist/browser/provider-mark.d.ts

@@ -1,6 +1,6 @@
 /**
- * The mark for a provider, or nothing where there is none. Returning nothing rather than
- * the provider's name keeps this to one job: a caller that also writes the name would
- * otherwise print it twice, and only the caller knows where the name belongs.
+ * The mark for a provider as an element, or nothing where there is none. Returning nothing
+ * rather than the provider's name keeps this to one job: a caller that also writes the
+ * name would otherwise print it twice, and only the caller knows where the name belongs.
  */
 export declare function providerMark(provider: string, method?: string): SVGSVGElement | undefined;

package/dist/browser/provider-mark.js

@@ -1,101 +1,26 @@
+import { markOf, pathAttributes } from '../marks.js';
 const namespace = 'http://www.w3.org/2000/svg';
-function mark() {
+/**
+ * The mark for a provider as an element, or nothing where there is none. Returning nothing
+ * rather than the provider's name keeps this to one job: a caller that also writes the
+ * name would otherwise print it twice, and only the caller knows where the name belongs.
+ */
+export function providerMark(provider, method) {
+    const mark = markOf(provider, method);
+    if (!mark)
+        return undefined;
     const svg = document.createElementNS(namespace, 'svg');
-    svg.setAttribute('viewBox', '0 0 16 16');
+    svg.setAttribute('viewBox', mark.viewBox);
     svg.setAttribute('class', 'provider');
     svg.setAttribute('aria-hidden', 'true');
     svg.setAttribute('focusable', 'false');
-    return svg;
-}
-/** GitHub mark from Primer Octicons (MIT); license in docs/licenses/octicons.txt. */
-function github() {
-    const svg = mark();
-    const path = document.createElementNS(namespace, 'path');
-    svg.setAttribute('fill', 'currentColor');
-    path.setAttribute('d', 'M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656');
-    svg.append(path);
-    return svg;
-}
-/**
- * Discord mark from Simple Icons (CC0); notice in docs/licenses/simple-icons.txt. The mark
- * itself is Discord's trademark, used here only to say an account is a Discord account.
- */
-function discord() {
-    const svg = mark();
-    const path = document.createElementNS(namespace, 'path');
-    svg.setAttribute('viewBox', '0 0 24 24');
-    svg.setAttribute('fill', 'currentColor');
-    path.setAttribute('d', 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z');
-    svg.append(path);
-    return svg;
-}
-/** YouTube mark from Simple Icons (CC0); notice in docs/licenses/simple-icons.txt. */
-function youtube() {
-    const svg = mark();
-    const path = document.createElementNS(namespace, 'path');
-    svg.setAttribute('viewBox', '0 0 24 24');
-    svg.setAttribute('fill', 'currentColor');
-    path.setAttribute('d', 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z');
-    svg.append(path);
-    return svg;
-}
-/**
- * A key, drawn here rather than taken from anywhere. It is not the OpenPGP logo: that mark
- * is somebody's to license and this repository does not ship artwork it cannot account for.
- * A key is also the truer picture, since what was proved is control of one, not membership
- * of an organisation.
- */
-function key() {
-    return lines([
-        'M7.4 8.6a3.3 3.3 0 1 0-4.7 4.7 3.3 3.3 0 0 0 4.7-4.7Z',
-        'M7.4 8.6 14 2',
-        'M11.2 4.8l1.6 1.6',
-        'M9.4 6.6l1.6 1.6',
-    ]);
-}
-/** A globe, drawn here like the key, for a page or a domain on the open web. */
-function globe() {
-    return lines([
-        'M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z',
-        'M1.5 8h13',
-        'M8 1.5C6.1 3.3 5.1 5.5 5.1 8s1 4.7 2.9 6.5',
-        'M8 1.5c1.9 1.8 2.9 4 2.9 6.5s-1 4.7-2.9 6.5',
-    ]);
-}
-/** An envelope, drawn here like the key, for a mailbox that read a code sent to it. */
-function envelope() {
-    return lines(['M2 3.5h12v9H2z', 'M2.4 4l5.6 4.6L13.6 4']);
-}
-/** A mark drawn as rounded strokes in the text colour. */
-function lines(paths) {
-    const svg = mark();
-    svg.setAttribute('fill', 'none');
-    for (const d of paths) {
+    svg.setAttribute('fill', mark.stroke ? 'none' : 'currentColor');
+    for (const d of mark.paths) {
         const path = document.createElementNS(namespace, 'path');
         path.setAttribute('d', d);
-        path.setAttribute('stroke', 'currentColor');
-        path.setAttribute('stroke-width', '1.6');
-        path.setAttribute('stroke-linecap', 'round');
-        path.setAttribute('stroke-linejoin', 'round');
+        for (const [name, value] of pathAttributes(mark))
+            path.setAttribute(name, value);
         svg.append(path);
     }
     return svg;
 }
-/**
- * The mark for a provider, or nothing where there is none. Returning nothing rather than
- * the provider's name keeps this to one job: a caller that also writes the name would
- * otherwise print it twice, and only the caller knows where the name belongs.
- */
-export function providerMark(provider, method) {
-    const marks = {
-        github,
-        discord,
-        youtube,
-        openpgp: key,
-        email: envelope,
-    };
-    // A site names its own link-back providers, so those fall back on the method's mark,
-    // which a domain shown by its DNS or by a file shares.
-    return (marks[provider]?.() ??
-        (['backlink', 'dns', 'wellknown'].includes(method ?? '') ? globe() : undefined));
-}

package/dist/core/index.d.ts

@@ -45,6 +45,12 @@ export interface ExternalAccount {
     handle: string;
     /** Where a reader goes to see the subject. For a mailbox, its `mailto:` address. */
     profileUrl: string;
+    /**
+     * When the account was created, in milliseconds, as reported by the provider. It lets a
+     * reader tell an old account from one opened just to be linked. Only sign-in providers
+     * set it. Once a record has it, later proofs by other methods keep it.
+     */
+    createdAt?: number;
 }
 /**
  * How control of one side was shown. A provider is who an account belongs to; a method is
@@ -96,6 +102,13 @@ export interface Attestation {
      * is reconfirmed like any other.
      */
     confirmedAt: number;
+    /** When `recheck()` last tried to read the proof, whether or not the read worked. */
+    readAt?: number;
+    /**
+     * When a recheck first read the proof and found it missing. The proof does not count
+     * while this is set. Cleared by the next read that finds it.
+     */
+    absentAt?: number;
 }
 /** Each side of a link is attested separately, by different parties under different methods. */
 export interface Attestations {
@@ -137,9 +150,44 @@ export interface Connection {
      * last proof: never renewed by another method, never reread, never verified.
      */
     retiredAt?: number;
+    /** The state last delivered to `onChange`. Absent until the first delivery. */
+    reported?: Reported;
+    /**
+     * When the last delivery to `onChange` started, while it has not been confirmed. Set when
+     * a delivery starts and cleared when it succeeds, so a record with it set is delivered
+     * again even if its state matches `reported`.
+     */
+    reportTriedAt?: number;
+    /** The revision given to the last delivery. Each delivery of the record adds one. */
+    reportRevision?: number;
+}
+/** The parts of a record that `onChange` reports a change in. */
+export interface Reported {
+    status: Status;
+    visibility: Visibility;
+    expiresAt: number;
+    mark?: Mark;
+}
+/** One record whose status, visibility, expiry or mark changed, as `onChange` receives it. */
+export interface Change {
+    /** The record as it stands now. */
+    evidence: Evidence;
+    /** The subject the record belongs to, with its private id. */
+    local: LocalAccount;
+    /** What the last confirmed delivery reported. Absent until one is confirmed. */
+    previous?: Reported;
+    /**
+     * Counts the deliveries of this record, starting at 1. A higher revision always carries
+     * a state read later, across processes too. Keep the last one applied for each record
+     * and ignore a change whose revision is not higher: a slow or repeated delivery can
+     * arrive after a newer one.
+     */
+    revision: number;
 }
 export interface Flow {
     id: string;
+    /** Saved DNS setup; grants no authority to finish a flow. */
+    dnsDraftId?: string;
     stateHash: string;
     bindingHash: string;
     verifier?: string;
@@ -155,7 +203,8 @@ export interface Flow {
     reason?: string;
     /**
      * The string an artifact must contain. Public by design: the holder publishes it. It is
-     * unguessable and per-flow, so an artifact made for one flow cannot complete another.
+     * normally unguessable and per-flow. DNS setup can retain the same value across
+     * fresh flows for the same subject and operation while propagation is pending.
      */
     expect?: string;
     /** Whether `expect` was minted for a method that had nothing of the subject's to state. */
@@ -269,7 +318,16 @@ export interface SiteRead {
     /** Whether that read got an answer. One that did not is asked again sooner. */
     answered: boolean;
 }
+/** DNS setup retained across short-lived, authenticated flows for seven days. */
+export interface DnsDraft {
+    id: string;
+    flowId: string;
+    expect: string;
+    artifact?: string;
+    expiresAt: number;
+}
 export interface Records {
+    dnsDrafts: DnsDraft;
     connections: Connection;
     flows: Flow;
     shares: Share;
@@ -349,8 +407,9 @@ export interface ArtifactProvider {
      * Told to the holder verbatim. Must name what they are publishing and where. Returned in
      * pieces so a renderer can set a command as one: a command is copied character for
      * character, and prose that reflows is prose a holder cannot safely copy.
+     * `artifact` is the last submitted or suggested location, when one is known.
      */
-    instructions(expect: string): Instruction[];
+    instructions(expect: string, artifact?: string): Instruction[];
     /**
      * What the holder is asked to hand back, where the method takes something a holder knows
      * by a better name than "an address". `input` says how to ask for it: `text` where it
@@ -451,6 +510,14 @@ export interface CodeProvider {
  */
 export declare class Refused extends Error {
 }
+/**
+ * A proof that was read and is not there: the page, file, gist or DNS answer came back and
+ * the expected value was missing. Thrown by `verify` or `prove`. On a recheck it makes the
+ * proof unconfirmed at once. Any other error means the read itself failed, and the proof
+ * keeps counting until `freshnessMs` runs out.
+ */
+export declare class Absent extends Refused {
+}
 /**
  * A piece of what the holder is told: a paragraph, a paragraph with links in it, or
  * something they run or publish as is.
@@ -525,6 +592,10 @@ export * from './routes.js';
  * telling anyone, so a confirmation is a heartbeat rather than a permanent fact.
  */
 export declare const freshnessMs: number;
+/** Whether a record has reached its deadline, including the exact expiry instant. */
+export declare function expired(record: {
+    expiresAt: number;
+}, now: number): boolean;
 /**
  * `freshness` bounds how stale a published proof may be before it stops counting. A
  * backend that never rechecks must leave it unbounded, since an unread proof going stale
@@ -612,6 +683,11 @@ export declare function externalId(external: ExternalAccount): string | undefine
  * between groups. Nothing for any other subject, whose id is written as it stands.
  */
 export declare function externalIdGroups(external: ExternalAccount): string[] | undefined;
+/**
+ * The text for an account's creation date, such as "Joined 2014-03-02", or undefined if
+ * the date is unknown. `day` formats the date, to the day.
+ */
+export declare function externalSince(external: ExternalAccount, day: (time: number) => string): string | undefined;
 /**
  * Where a subject's name may link, or nothing where it has no page of its own. A mailbox's
  * address is `mailto:`, which opens a message to it and shows a reader nothing.

package/dist/core/index.js

@@ -4,6 +4,14 @@
  */
 export class Refused extends Error {
 }
+/**
+ * A proof that was read and is not there: the page, file, gist or DNS answer came back and
+ * the expected value was missing. Thrown by `verify` or `prove`. On a recheck it makes the
+ * proof unconfirmed at once. Any other error means the read itself failed, and the proof
+ * keeps counting until `freshnessMs` runs out.
+ */
+export class Absent extends Refused {
+}
 /** Only an artifact provider is holder-paced, and only it needs a url handed back. */
 export function isArtifactProvider(provider) {
     return 'verify' in provider;
@@ -28,6 +36,10 @@ export * from './routes.js';
  * telling anyone, so a confirmation is a heartbeat rather than a permanent fact.
  */
 export const freshnessMs = 7 * 86400000;
+/** Whether a record has reached its deadline, including the exact expiry instant. */
+export function expired(record, now) {
+    return record.expiresAt <= now;
+}
 /**
  * `freshness` bounds how stale a published proof may be before it stops counting. A
  * backend that never rechecks must leave it unbounded, since an unread proof going stale
@@ -39,7 +51,7 @@ export function status(connection, now, freshness = freshnessMs) {
     // Frozen at its last proof, so neither its expiry nor its freshness is read again.
     if (connection.retiredAt !== undefined)
         return 'retired';
-    if (now >= connection.expiresAt)
+    if (expired(connection, now))
         return 'expired';
     const main = connection.attestations?.external[0];
     if (main && !fresh(main, now, freshness))
@@ -52,6 +64,9 @@ export function status(connection, now, freshness = freshnessMs) {
  * reverses the moment it reads again.
  */
 export function fresh(attestation, now, freshness = freshnessMs) {
+    // Read and found missing, which is not the same as not having been read lately.
+    if (attestation.absentAt !== undefined)
+        return false;
     return (!attestation.artifactUrl ||
         attestation.hosted === true ||
         freshness === Infinity ||
@@ -75,7 +90,7 @@ export function statusLabel(evidence, now) {
     // Before expiry: a retired record's approval has long run out, and that is not its state.
     if (evidence.status === 'retired')
         return 'Retired';
-    if (evidence.status === 'expired' || evidence.expiresAt <= now)
+    if (evidence.status === 'expired' || expired(evidence, now))
         return 'Expired';
     return evidence.status === 'unconfirmed' ? 'Unconfirmed' : 'Verified';
 }
@@ -188,6 +203,15 @@ export function externalId(external) {
 export function externalIdGroups(external) {
     return external.kind === 'key' ? (external.id.match(/.{1,4}/g) ?? undefined) : undefined;
 }
+/**
+ * The text for an account's creation date, such as "Joined 2014-03-02", or undefined if
+ * the date is unknown. `day` formats the date, to the day.
+ */
+export function externalSince(external, day) {
+    return typeof external.createdAt === 'number' && Number.isFinite(external.createdAt)
+        ? `Joined ${day(external.createdAt)}`
+        : undefined;
+}
 /**
  * Where a subject's name may link, or nothing where it has no page of its own. A mailbox's
  * address is `mailto:`, which opens a message to it and shows a reader nothing.