@bkazemi/verily 0.1.0 → 0.3.0

package/dist/browser/evidence-dialog.js

@@ -1,9 +1,15 @@
-import { attestationLabel, externalLink, externalName, localSide, proofTitle, statusLabel, } from '../core/index.js';
+import { attestationLabel, externalLink, externalName, 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';
-import { verilyLogo } from './logo.js';
+import { projectUrl, verilyLogo } from './logo.js';
 import { version } from '../version.js';
+/** The logotype as a link to the project, as both dialogs carry it in their footer. */
+export function stampLink() {
+    const link = outward(node('a'), projectUrl);
+    link.append(verilyLogo());
+    return link;
+}
 const openDialogs = new WeakMap();
 export const styles = `
   * { box-sizing: border-box; }
@@ -36,6 +42,14 @@ export const styles = `
   .summary a, .method a, .additional a { font: inherit; }
   .reference { margin-top: 2px; }
   .method { margin-top: 8px; }
+  /* In the corner the heading leaves empty, apart from everything that was checked. */
+  .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; }
+  .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 .mark { opacity: .45; }
+  .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }
   .additional { margin-top: 2px; padding-left: 12px; }
   .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }
   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; }
@@ -48,9 +62,10 @@ export const styles = `
   .action:disabled { opacity: .6; cursor: progress; }
   .action.danger:hover { border-color: #b3261e; background: #fdecea; color: #b3261e; }
   .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
-  .account .row { align-items: center; justify-content: start; margin-top: 12px; }
+  .account .row { align-items: center; justify-content: start; flex-wrap: wrap; margin-top: 12px; }
   .account .action { padding: 5px 10px; font-size: 12px; }
-  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin-top: 14px; color: #9aa9a0; font-size: 11px; }
+  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }
+  footer a { display: flex; color: inherit; }
   .logo { display: block; height: 13px; }
   ${markStyles}
 `;
@@ -138,6 +153,8 @@ export function accountCard(heading, name, reference, url, ...extra) {
     card.append(...extra);
     return card;
 }
+/** What the holder is told before an account is retired, since it cannot be undone from here. */
+const retiringNote = 'Retiring keeps this record as history. It will no longer read as verified, and who can read it cannot be changed afterwards.';
 /**
  * The links removing an account would remove. The record shown may itself be revoked while
  * older ones of the account are not, and those must stay removable, so this is not read
@@ -147,6 +164,9 @@ const removable = (evidence) => evidence.links ?? (evidence.status === 'revoked'
 /**
  * Under a holder's own account: renewing it, which is showing the same account again, and
  * removing it, which asks once more before it does. A removed link has nothing left to do.
+ *
+ * An account still in use can also be listed another way, or retired, which asks first as
+ * removing does. A retired one is renewed or removed and nothing else.
  */
 function manageRow(evidence, manage) {
     const row = node('div', '', 'row');
@@ -155,12 +175,49 @@ function manageRow(evidence, manage) {
         control.type = 'button';
         return control;
     };
+    const [named] = removable(evidence);
+    const { mark } = manage;
+    // A mark is the account's, set through any one of its links that still stands.
+    const listable = mark !== undefined && named !== undefined && !['revoked', 'retired'].includes(evidence.status);
+    /** A control that lists the account one way, and says so if that did not go through. */
+    const list = (label, as) => {
+        const control = act(label);
+        control.onclick = async () => {
+            for (const other of row.children)
+                other.disabled = true;
+            try {
+                await mark(named, as);
+            }
+            catch {
+                offer('That did not go through.');
+            }
+        };
+        return control;
+    };
     const offer = (note = '') => {
         const renew = act('Renew');
         const remove = act('Remove', true);
-        renew.onclick = () => manage.connect(evidence.provider);
+        // The record the card is drawn from is the one renewed. A retired one comes back by the
+        // method it was first shown by alone, and a removed one cannot be renewed at all, so
+        // the account behind it is connected again.
+        renew.onclick = () => manage.renew && evidence.status !== 'revoked'
+            ? manage.renew(evidence.id, evidence.provider, evidence.status === 'retired' ? evidence.attestations.external[0].method : undefined)
+            : manage.connect(evidence.provider);
         remove.onclick = confirm;
-        row.replaceChildren(renew, remove, ...(note ? [node('span', note, 'muted')] : []));
+        const listing = [];
+        if (listable) {
+            const retire = act('Retire');
+            retire.onclick = retiring;
+            listing.push(...(evidence.mark === 'preferred' ? [] : [list('Mark as preferred', 'preferred')]), ...(evidence.mark === 'unused' ? [] : [list('Mark as unused', 'unused')]), ...(evidence.mark === undefined ? [] : [list('Mark as current', 'current')]), retire);
+        }
+        row.replaceChildren(renew, ...listing, remove, ...(note ? [node('span', note, 'muted')] : []));
+    };
+    const retiring = () => {
+        const cancel = act('Cancel');
+        const sure = list('Retire', 'retired');
+        cancel.onclick = () => offer();
+        row.replaceChildren(node('span', retiringNote, 'muted'), cancel, sure);
+        cancel.focus();
     };
     const confirm = () => {
         const cancel = act('Cancel');
@@ -290,13 +347,22 @@ function externalCard(evidence, manage, later = () => { }) {
     if (evidence.signedUrl)
         attribution.append(signedMark(evidence, later));
     copy.append(node('div', status, 'state'), attribution);
-    summary.append(verificationMark(current ? 'current' : 'inactive'), copy);
+    const retired = evidence.status === 'retired';
+    // A retired account claims nothing now, which is not the same as a claim that failed.
+    summary.append(verificationMark(current ? 'current' : retired ? 'pending' : 'inactive'), copy);
     const dates = node('dl');
     const dateRows = [['Approved', evidence.approvedAt]];
     if (evidence.status === 'revoked') {
         if (evidence.revokedAt !== undefined)
             dateRows.push(['Revoked on', evidence.revokedAt]);
     }
+    else if (retired) {
+        // Two rows, always, so a reader sees any gap between them: an account retired weeks
+        // after it was last proved went unproved for those weeks.
+        dateRows.push(['Last verified', lastProved(evidence)]);
+        if (evidence.retiredAt !== undefined)
+            dateRows.push(['Retired', evidence.retiredAt]);
+    }
     else {
         // A proof that has gone unread has not reached its expiry, so it still reads forward.
         dateRows.push([
@@ -307,7 +373,7 @@ function externalCard(evidence, manage, later = () => { }) {
     // When an artifact was last read belongs with the other times, not inside a sentence.
     // Only artifact methods drift: a sign-in is established once and does not go stale.
     const main = evidence.attestations.external[0];
-    if (main.artifactUrl)
+    if (main.artifactUrl && !retired)
         dateRows.push(['Last checked', main.confirmedAt]);
     for (const [label, time] of dateRows) {
         dates.append(node('dt', label), node('dd', moment(time)));
@@ -322,7 +388,18 @@ function externalCard(evidence, manage, later = () => { }) {
     evidence.external.kind === 'mailbox' ? undefined : evidence.external.id, externalLink(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, ...attestationNote(main, names), ...evidence.attestations.external.slice(1).flatMap((a) => attestationNote(a, names, true)), dates, ...(manage && removable(evidence).length ? [manageRow(evidence, manage)] : []));
+    summary, ...attestationNote(main, names), ...evidence.attestations.external.slice(1).flatMap((a) => attestationNote(a, names, true)), 
+    // How the holder lists the account, in their words and apart from how it was shown:
+    // nothing checked it, so it is never among the methods above it.
+    ...(evidence.status === 'revoked' || retired
+        ? []
+        : evidence.mark === 'preferred'
+            ? [node('div', 'Preferred', 'listing preferred')]
+            : evidence.mark === 'unused'
+                ? [node('div', 'No longer used', 'listing')]
+                : []), dates, ...(manage && removable(evidence).length ? [manageRow(evidence, manage)] : []));
+    const surface = retired ? 'account retired' : 'account';
+    card.className = surface;
     // A signed record is not read, or acted on, before its signature has been checked: until
     // the check comes back the whole card is veiled and out of reach, with a word over it
     // saying why. A record handed over altered is then never read as it was handed over.
@@ -331,12 +408,12 @@ function externalCard(evidence, manage, later = () => { }) {
         const checking = node('div', '', 'checking');
         checking.setAttribute('role', 'status');
         checking.append(node('span', '', 'spinner'), document.createTextNode('Checking signature…'));
-        card.className = 'account veiled';
+        card.className = `${surface} veiled`;
         for (const part of veiled)
             part.inert = true;
         card.append(checking);
         void signatures(evidence).then(() => {
-            card.className = 'account';
+            card.className = surface;
             for (const part of veiled)
                 part.inert = false;
             checking.remove();
@@ -354,8 +431,9 @@ function addRow(manage) {
     return row;
 }
 /**
- * The subject once, then each account linked to it on its own card, in the order they
- * were connected. Every record given is of the one subject, which the caller has checked.
+ * The subject once, then each account linked to it on its own card, in the order given.
+ * Retired accounts sit in a group of their own at the foot, under what says they are.
+ * Every record given is of the one subject, which the caller has checked.
  */
 function render(content, records, manage, later) {
     const [first] = records;
@@ -369,7 +447,15 @@ function render(content, records, manage, later) {
         site: first.siteName,
         provider: first.providerName,
     }));
-    content.replaceChildren(localCard, linkMark(), ...records.map((record) => externalCard(record, manage, later)), ...(manage ? [addRow(manage)] : []), 
+    const retired = records.filter((record) => record.status === 'retired');
+    content.replaceChildren(localCard, linkMark(), ...records
+        .filter((record) => record.status !== 'retired')
+        .map((record) => externalCard(record, manage, later)), ...(manage ? [addRow(manage)] : []), ...(retired.length
+        ? [
+            node('h3', 'Retired accounts', 'group'),
+            ...retired.map((record) => externalCard(record, manage, later)),
+        ]
+        : []), 
     // Nothing below the cards may name a provider. Approval, method and dates belong to
     // the card they came from, and a second provider on this subject gets its own card.
     node('p', 'Verification does not guarantee legal identity, trustworthiness, or permanent ownership.', 'muted explanation'));
@@ -415,12 +501,44 @@ manage) {
     close.type = 'button';
     close.setAttribute('aria-label', 'Close verification details');
     content.setAttribute('aria-live', 'polite');
-    stamp.append(verilyLogo(), node('span', version));
+    stamp.append(stampLink(), node('span', version));
     header.append(heading, close);
     dialog.append(header, content, stamp);
     /** Links removed from this dialog, shown as removed before the page hands over new records. */
     const removed = new Map();
+    /**
+     * How accounts were listed from this dialog, in the order it was asked, shown as asked
+     * before the page hands over new records: each names every link of its account, and
+     * holds how those links read when it was asked. Once any of them reads differently the
+     * backend has spoken, for this change or a later one made elsewhere, and what it says
+     * is shown from then on.
+     */
+    const listed = [];
+    /** What of a record a listing, a retirement or a renewal changes. */
+    const listing = (record) => JSON.stringify([record.status, record.mark, record.retiredAt, record.approvedAt]);
+    /** How each record given reads now, by its id. */
+    const listings = (given) => new Map([given].flat().map((record) => [record.id, listing(record)]));
     let held;
+    /** A record as the listings made here leave it, each applied as the backend applies it. */
+    const relisted = (evidence) => {
+        let record = evidence;
+        for (const { ids, as, at } of listed) {
+            if (['revoked', 'retired'].includes(record.status))
+                break;
+            if (!ids.includes(record.id)) {
+                // One preferred account for a holder: picking another moves the mark.
+                if (as === 'preferred' && record.mark === 'preferred')
+                    record = { ...record, mark: undefined };
+                continue;
+            }
+            record =
+                as === 'retired'
+                    ? // Its signed form is another document now, to be read with the records to come.
+                        { ...record, status: 'retired', retiredAt: at, mark: undefined, signedUrl: undefined }
+                    : { ...record, mark: as === 'current' ? undefined : as };
+        }
+        return record;
+    };
     const actions = manage && {
         // The other dialog opens over this one before this one goes, so the page behind is
         // never uncovered between the two.
@@ -428,6 +546,14 @@ manage) {
             manage.connect(provider);
             dialog.close();
         },
+        ...(manage.renew
+            ? {
+                renew(id, provider, method) {
+                    manage.renew(id, provider, method);
+                    dialog.close();
+                },
+            }
+            : {}),
         async remove(ids) {
             await manage.remove(ids);
             for (const id of ids)
@@ -435,6 +561,23 @@ manage) {
             if (held && dialog.open)
                 draw(held);
         },
+        ...(manage.mark
+            ? {
+                async mark(id, as) {
+                    await manage.mark(id, as);
+                    // Every link of the account the one named belongs to, as the cards group them.
+                    const account = arrange([held ?? []].flat()).find((card) => removable(card).includes(id));
+                    listed.push({
+                        ids: account ? removable(account) : [id],
+                        as,
+                        at: Date.now(),
+                        before: listings(held ?? []),
+                    });
+                    if (held && dialog.open)
+                        draw(held);
+                },
+            }
+            : {}),
     };
     root.append(dialog);
     document.body.append(host);
@@ -447,11 +590,15 @@ manage) {
     /** Redraws only for a record that reads differently from the one already on screen. */
     const draw = (given) => {
         held = given;
+        const now = listings(given);
+        for (const change of [...listed])
+            if (change.ids.some((id) => now.get(id) !== change.before.get(id)))
+                listed.splice(listed.indexOf(change), 1);
         const records = arrange([given]
             .flat()
             .map((e) => removed.has(e.id) && e.status !== 'revoked'
             ? { ...e, status: 'revoked', revokedAt: removed.get(e.id) }
-            : standing(e)));
+            : relisted(standing(e))));
         const key = JSON.stringify(records.map((e) => [e, statusLabel(e, Date.now())]));
         if (key === drawn)
             return;

package/dist/browser/index.d.ts

@@ -1,4 +1,5 @@
 import type { Evidence } from '../core/index.js';
+import { type Listing } from './evidence-dialog.js';
 export type { Evidence } from '../core/index.js';
 export interface Result {
     outcome: 'complete' | 'cancelled' | 'failed';
@@ -29,7 +30,10 @@ export declare function init({ backendUrl, handoffUrl }: {
      * Opens the connect dialog over the current page. Resolves when it closes, with how
      * the last attempt in it ended. Call from a click: a sign-in method opens a window.
      */
-    openConnect(opener?: HTMLElement, back?: () => void, provider?: string): Promise<Result>;
+    openConnect(opener?: HTMLElement, back?: () => void, provider?: string, renew?: {
+        id: string;
+        method?: string;
+    }): Promise<Result>;
     /**
      * Draws the pill that opens the connect dialog. The host receives a `verily-result`
      * event, whose detail is the Result, whenever the dialog closes on a new connection.
@@ -54,6 +58,11 @@ export declare function init({ backendUrl, handoffUrl }: {
         connectionIds: string[];
     } & Arrangement): Promise<void>;
     disconnect(id: string): Promise<unknown>;
+    /**
+     * Says how the holder would have an account listed, or retires it. Names one record
+     * and acts on the account: every record of it the holder has.
+     */
+    mark(id: string, as: Listing): Promise<unknown>;
     issueShare: (id: string) => Promise<unknown>;
     revokeShare: (id: string) => Promise<unknown>;
 };

package/dist/browser/index.js

@@ -119,9 +119,11 @@ function arrange(element, { stacked, peek }) {
 }
 const live = (evidence) => evidence.status === 'verified' && evidence.expiresAt > Date.now();
 /**
- * A subject's accounts, one entry for each, in the order they were connected, earliest
- * first. Records are not accounts: the same account can stand on several, shown a second
- * way, or revoked once and connected again. Those are one account and get one card.
+ * A subject's accounts, one entry for each. The one its holder prefers comes first, then
+ * the rest in the order they were connected, earliest first, then those the holder no
+ * longer uses, and last those retired. Records are not accounts: the same account can
+ * stand on several, shown a second way, or revoked once and connected again. Those are one
+ * account and get one card.
  *
  * Where any of an account's records is verified now, the earliest of those speaks for it,
  * and the ways the others show it are listed beneath as other methods. Its lapsed
@@ -159,14 +161,26 @@ function accounts(records) {
             sources: verified.length ? verified : [base],
         };
     })
-        .sort((a, b) => a.connectedAt - b.connectedAt);
+        .sort((a, b) => place(a) - place(b) || a.connectedAt - b.connectedAt);
 }
 /**
- * One subject's accounts as a single pill: the first connected, then how many more stand
- * behind it. The order is the order they were connected in, which a renewal never changes.
- * Only accounts verified now are counted, and one of those leads when the first connected
- * has lapsed, so the pill never puts a lapsed account forward while a good one sits behind
- * a number. The lapsed ones are all still there in the dialog, each in its place.
+ * Where an account is listed among a subject's others, before the order they were
+ * connected in. This is all there is to preferring an account: there is no separate pin.
+ */
+function place(account) {
+    if (account.status === 'retired')
+        return 3;
+    return account.mark === 'preferred' ? 0 : account.mark === 'unused' ? 2 : 1;
+}
+/**
+ * One subject's accounts as a single pill: the first of them, then how many more stand
+ * behind it. The order is the holder's preferred account, then the order the rest were
+ * connected in, which a renewal never changes, then the ones no longer used.
+ * Only accounts verified now are counted, and one of those leads when the first has
+ * lapsed, so the pill never puts a lapsed account forward while a good one sits behind
+ * a number. The lapsed ones are all still there in the dialog, each in its place. A
+ * preferred account that has lapsed keeps its mark, and leads again once renewed. A
+ * retired account is never counted, and leads only where nothing else is shown.
  *
  * `load` gives the records afresh when the dialog opens and as it stays open.
  */
@@ -317,7 +331,9 @@ export function init({ backendUrl, handoffUrl }) {
                 safeUrl(data.local.profileUrl);
             return data;
         },
-        start: async (provider, method) => flowView(await ask('/sessions', { kind: 'connect', provider, method })),
+        start: async (provider, method, renew) => flowView(await ask('/sessions', renew
+            ? { kind: 'renew', connectionId: renew, provider, method }
+            : { kind: 'connect', provider, method })),
         read: async (id) => flowView(await ask(`/flows/${encodeURIComponent(id)}?format=json`, undefined, id)),
         submit: async (id, artifact) => flowView(await ask(`/flows/${encodeURIComponent(id)}/submit`, { artifact }, id)),
         async approve(id, visibility, cancel) {
@@ -362,12 +378,14 @@ export function init({ backendUrl, handoffUrl }) {
          * Opens the connect dialog over the current page. Resolves when it closes, with how
          * the last attempt in it ended. Call from a click: a sign-in method opens a window.
          */
-        openConnect(opener = document.body, back, provider) {
+        openConnect(opener = document.body, back, provider, 
+        /** A record of the holder's to renew, in place of connecting: see `openConnectDialog`. */
+        renew) {
             if (remote && !handoffUrl)
                 throw new Error('A backend on another origin requires a handoff URL');
             // Each opening is vouched for afresh, for whoever is signed in to this site now.
             session = undefined;
-            return openConnectDialog(opener, flows, back, provider);
+            return openConnectDialog(opener, flows, back, provider, renew);
         },
         /**
          * Draws the pill that opens the connect dialog. The host receives a `verily-result`
@@ -530,6 +548,15 @@ export function init({ backendUrl, handoffUrl }) {
                 session = undefined;
             return ask(`/connections/${encodeURIComponent(id)}/disconnect`, {});
         },
+        /**
+         * Says how the holder would have an account listed, or retires it. Names one record
+         * and acts on the account: every record of it the holder has.
+         */
+        mark(id, as) {
+            if (remote)
+                session = undefined;
+            return ask(`/connections/${encodeURIComponent(id)}/mark`, { as });
+        },
         issueShare: (id) => request(`/connections/${encodeURIComponent(id)}/share`, {}),
         revokeShare: (id) => request(`/connections/${encodeURIComponent(id)}/share-revoke`, {}),
     };
@@ -645,7 +672,12 @@ function validEvidence(value) {
             ['account', 'key', 'page', 'mailbox'].includes(String(value.external.kind))) &&
         (value.revokedAt === undefined ||
             (typeof value.revokedAt === 'number' && Number.isFinite(value.revokedAt))) &&
-        ['verified', 'unconfirmed', 'expired', 'revoked'].includes(String(value.status)) &&
+        ['verified', 'unconfirmed', 'expired', 'retired', 'revoked'].includes(String(value.status)) &&
+        // A retired record stands on its dates, so one that does not say when is not one.
+        (value.status === 'retired'
+            ? typeof value.retiredAt === 'number' && Number.isFinite(value.retiredAt)
+            : value.retiredAt === undefined) &&
+        (value.mark === undefined || ['preferred', 'unused'].includes(String(value.mark))) &&
         ['public', 'unlisted'].includes(String(value.visibility)) &&
         (value.connectedAt === undefined ||
             (typeof value.connectedAt === 'number' && Number.isFinite(value.connectedAt))) &&
@@ -766,6 +798,14 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
                                 changed(result);
                         });
                     },
+                    renew: (id, provider, method) => {
+                        void client
+                            .openConnect(this, () => details(this), provider, { id, method })
+                            .then((result) => {
+                            if (result.outcome === 'complete')
+                                changed(result);
+                        });
+                    },
                     // One at a time, each told as it goes: if a later one fails, the host still
                     // hears of those that went and reads its records again.
                     remove: async (ids) => {
@@ -774,6 +814,10 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
                             changed({ outcome: 'removed', connectionId: id });
                         }
                     },
+                    mark: async (id, as) => {
+                        await client.mark(id, as);
+                        changed({ outcome: 'marked', connectionId: id, as });
+                    },
                 });
             }
             else

package/dist/browser/logo.d.ts

@@ -1,2 +1,4 @@
+/** Where the logotype under a dialog leads: the project, for a reader asking what drew this. */
+export declare const projectUrl = "https://github.com/bkazemi/verily";
 /** The logotype, drawn as nodes: nothing in the badge sets innerHTML. */
 export declare function verilyLogo(): SVGSVGElement;

package/dist/browser/logo.js

@@ -1,4 +1,6 @@
 import { logoPaths, logoViewBox } from '../logo.js';
+/** Where the logotype under a dialog leads: the project, for a reader asking what drew this. */
+export const projectUrl = 'https://github.com/bkazemi/verily';
 /** The logotype, drawn as nodes: nothing in the badge sets innerHTML. */
 export function verilyLogo() {
     const namespace = 'http://www.w3.org/2000/svg';

package/dist/browser/mark.d.ts

@@ -15,5 +15,7 @@ export declare function paintMark(svg: SVGSVGElement, tone: MarkTone): void;
 export declare function verificationMark(tone?: MarkTone): SVGSVGElement;
 /** The clock on an expired record: a face, and hands at three o'clock. */
 export declare const clockMark: () => SVGSVGElement;
+/** The box on a retired record: a lid, what it holds, and a slot to take it down by. */
+export declare const boxMark: () => SVGSVGElement;
 /** The dash on a record that is revoked or cannot be shown. */
 export declare const dashMark: () => SVGSVGElement;

package/dist/browser/mark.js

@@ -73,5 +73,11 @@ export const clockMark = () => statusMark('clock', [
     ['circle', { cx: '8', cy: '8', r: '6.2' }],
     ['path', { d: 'M8 4.6V8h2.6' }],
 ]);
+/** The box on a retired record: a lid, what it holds, and a slot to take it down by. */
+export const boxMark = () => statusMark('box', [
+    ['path', { d: 'M2.6 3.8h10.8v2.6H2.6z' }],
+    ['path', { d: 'M3.7 6.4v5.8h8.6V6.4' }],
+    ['path', { d: 'M6.6 9h2.8' }],
+]);
 /** The dash on a record that is revoked or cannot be shown. */
 export const dashMark = () => statusMark('dash', [['path', { d: 'M4.4 8h7.2' }]]);

package/dist/browser/signed.d.ts

@@ -28,6 +28,10 @@ export declare function signature(evidence: Evidence): Promise<Signature>;
  * it, with only its present state taken from the record as read, so what stands beside the
  * signature mark is what was signed. One whose signed record failed is not shown as verified: the
  * verifier's own signature does not bear it out, so it reads as unconfirmed.
+ *
+ * The holder's mark is taken from the record as read too, each time, and never from the
+ * signed record kept: a mark would otherwise vanish the moment its record checked, and one
+ * changed since would go on being shown as it was.
  */
 export declare function standing<T extends Evidence>(evidence: T): T;
 /**

package/dist/browser/signed.js

@@ -27,9 +27,12 @@ function canonical(value) {
         .map(([key, field]) => `${JSON.stringify(key)}:${canonical(field)}`)
         .join(',')}}`;
 }
-/** What a record claims, apart from whether it stands now: all a signed record can bear out. */
+/**
+ * What a record claims, apart from whether it stands now: all a signed record can bear out.
+ * The holder's mark is no claim of the verifier's and is in no signed record.
+ */
 function claims(record) {
-    const { status: _status, revokedAt: _revokedAt, signedUrl: _signedUrl, links: _links, type: _type, version: _version, issuedAt: _issuedAt, ...rest } = record;
+    const { status: _status, revokedAt: _revokedAt, signedUrl: _signedUrl, mark: _mark, links: _links, type: _type, version: _version, issuedAt: _issuedAt, ...rest } = record;
     return canonical(rest);
 }
 /**
@@ -124,13 +127,20 @@ async function check(evidence) {
             document.provider !== evidence.provider ||
             document.external.id !== evidence.external.id)
             return { state: 'invalid' };
+        // A retired record is signed as a version of its own, and a record that stands as the
+        // other. One served for the other is the record caught between the two, and no verdict.
+        if ((document.version === 2) !== (evidence.status === 'retired'))
+            return { state: 'unchecked', why: 'unreadable' };
         // The record as it was signed. Whether it stands now is no part of a signed record, so
-        // that alone is kept from the record as it was read.
-        const { type: _type, version: _version, issuedAt: _issuedAt, ...said } = document;
+        // that is kept from the record as it was read, and so is the holder's mark, which is in
+        // no signed record: whatever a document says of either is left behind.
+        const { type: _type, version: _version, issuedAt: _issuedAt, status: _status, retiredAt: _retiredAt, mark: _mark, ...said } = document;
         const record = {
             ...said,
             status: evidence.status,
             ...(evidence.revokedAt === undefined ? {} : { revokedAt: evidence.revokedAt }),
+            ...(document.version === 2 ? { retiredAt: document.retiredAt } : {}),
+            ...(evidence.mark === undefined ? {} : { mark: evidence.mark }),
             signedUrl: evidence.signedUrl,
         };
         // Signed, but not something a page may draw: it is shown as read, with no mark.
@@ -178,18 +188,25 @@ export function signature(evidence) {
  * it, with only its present state taken from the record as read, so what stands beside the
  * signature mark is what was signed. One whose signed record failed is not shown as verified: the
  * verifier's own signature does not bear it out, so it reads as unconfirmed.
+ *
+ * The holder's mark is taken from the record as read too, each time, and never from the
+ * signed record kept: a mark would otherwise vanish the moment its record checked, and one
+ * changed since would go on being shown as it was.
  */
 export function standing(evidence) {
     if (evidence.signedUrl === undefined)
         return evidence;
     const key = shown(evidence);
     const signed = signedAs.get(key);
-    if (signed)
+    if (signed) {
+        const { mark: _mark, ...said } = signed;
         return {
-            ...signed,
+            ...said,
             status: evidence.status,
             ...(evidence.revokedAt === undefined ? {} : { revokedAt: evidence.revokedAt }),
+            ...(evidence.mark === undefined ? {} : { mark: evidence.mark }),
         };
+    }
     return evidence.status === 'verified' && failures.has(key)
         ? { ...evidence, status: 'unconfirmed' }
         : evidence;