@bkazemi/verily 0.5.0 → 0.6.0

package/dist/core/index.d.ts

@@ -547,6 +547,29 @@ export declare function lastProved(evidence: Pick<Evidence, 'authenticatedAt' |
  * that has run out since reads as expired whatever status it was issued with.
  */
 export declare function statusLabel(evidence: Pick<Evidence, 'status' | 'expiresAt'>, now: number): string;
+/**
+ * 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.
+ */
+export declare function place(account: Pick<Evidence, 'status' | 'mark'>): number;
+/**
+ * One subject's records as its accounts, in the order they are listed everywhere: the
+ * preferred one, then the rest as first connected, then those unused, then those retired.
+ * Records are not accounts: the same account can stand on several. `held` is every record
+ * of the account, earliest first, and `verified` those of them that stand now. `lead`
+ * speaks for the account: the earliest that stands, or else the latest approved, which
+ * says what became of it. `external` is how the account was shown: the lead's methods,
+ * then any other its standing records add.
+ *
+ * A record from a backend older than `connectedAt` is placed by when it was approved.
+ */
+export declare function accountsOf(records: Evidence[], now: number): {
+    lead: Evidence;
+    held: Evidence[];
+    verified: Evidence[];
+    external: Attestations['external'];
+    connectedAt: number;
+}[];
 /**
  * What to call a link's local side, and what to write as its value. When the site itself is
  * what was linked there is no subject on it to name, so the site is the value rather than a
@@ -584,6 +607,11 @@ export declare function attestationLabel(method: string, names: {
  * already all of it: a mailbox's address and a domain are each their own id.
  */
 export declare function externalId(external: ExternalAccount): string | undefined;
+/**
+ * A key's fingerprint in groups of four, as gpg prints it, so a renderer can break the line
+ * between groups. Nothing for any other subject, whose id is written as it stands.
+ */
+export declare function externalIdGroups(external: ExternalAccount): 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

@@ -79,6 +79,47 @@ export function statusLabel(evidence, now) {
         return 'Expired';
     return evidence.status === 'unconfirmed' ? 'Unconfirmed' : 'Verified';
 }
+/**
+ * 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.
+ */
+export function place(account) {
+    if (account.status === 'retired')
+        return 3;
+    return account.mark === 'preferred' ? 0 : account.mark === 'unused' ? 2 : 1;
+}
+/**
+ * One subject's records as its accounts, in the order they are listed everywhere: the
+ * preferred one, then the rest as first connected, then those unused, then those retired.
+ * Records are not accounts: the same account can stand on several. `held` is every record
+ * of the account, earliest first, and `verified` those of them that stand now. `lead`
+ * speaks for the account: the earliest that stands, or else the latest approved, which
+ * says what became of it. `external` is how the account was shown: the lead's methods,
+ * then any other its standing records add.
+ *
+ * A record from a backend older than `connectedAt` is placed by when it was approved.
+ */
+export function accountsOf(records, now) {
+    const when = (e) => e.connectedAt ?? e.approvedAt;
+    const byAccount = new Map();
+    for (const record of records) {
+        const key = JSON.stringify([record.provider, record.external.id]);
+        byAccount.set(key, [...(byAccount.get(key) ?? []), record]);
+    }
+    return [...byAccount.values()]
+        .map((unsorted) => {
+        const held = [...unsorted].sort((a, b) => when(a) - when(b));
+        const verified = held.filter((e) => e.status === 'verified' && e.expiresAt > now);
+        const lead = verified[0] ?? held.reduce((a, b) => (b.approvedAt > a.approvedAt ? b : a));
+        const external = [...lead.attestations.external];
+        for (const other of verified.slice(1))
+            for (const attestation of other.attestations.external)
+                if (!external.some((shown) => shown.method === attestation.method))
+                    external.push(attestation);
+        return { lead, held, verified, external, connectedAt: when(held[0]) };
+    })
+        .sort((a, b) => place(a.lead) - place(b.lead) || a.connectedAt - b.connectedAt);
+}
 /**
  * What to call a link's local side, and what to write as its value. When the site itself is
  * what was linked there is no subject on it to name, so the site is the value rather than a
@@ -140,6 +181,13 @@ export function attestationLabel(method, names, proof = {}) {
 export function externalId(external) {
     return external.kind === 'mailbox' || external.kind === 'domain' ? undefined : external.id;
 }
+/**
+ * A key's fingerprint in groups of four, as gpg prints it, so a renderer can break the line
+ * between groups. Nothing for any other subject, whose id is written as it stands.
+ */
+export function externalIdGroups(external) {
+    return external.kind === 'key' ? (external.id.match(/.{1,4}/g) ?? undefined) : 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/server/index.js

@@ -1,4 +1,4 @@
-import { attestationLabel, externalId, externalLink, externalName, isArtifactProvider, isCodeProvider, isRedirectProvider, lastProved, localSide, proofTitle, providerMethod, statusLabel, signedBy, } from '../core/index.js';
+import { attestationLabel, externalId, externalIdGroups, externalLink, externalName, isArtifactProvider, isCodeProvider, isRedirectProvider, lastProved, accountsOf, localSide, proofTitle, providerMethod, statusLabel, signedBy, } from '../core/index.js';
 import { artifactAttempts, codeAttempts, VerilyService, Unavailable, } from './service.js';
 import { copyScript, waitScript } from './copy.js';
 import { escape } from './escape.js';
@@ -85,7 +85,11 @@ const redirect = (url, cookie) => new Response(null, {
  */
 function card(heading, name, url, reference, ...extra) {
     const profile = url && safeUrl(url);
-    return `<div class="side"><p class="who">${escape(heading)}</p><p class="name">${profile ? `<a href="${escape(profile)}" rel="noreferrer">${escape(name)}</a>` : escape(name)}</p>${reference ? `<p class="reference">${escape(reference)}</p>` : ''}${extra.join('')}</div>`;
+    return `<div class="side"><p class="who">${escape(heading)}</p><p class="name">${profile ? `<a href="${escape(profile)}" rel="noreferrer">${escape(name)}</a>` : escape(name)}</p>${typeof reference === 'string'
+        ? `<p class="reference">${escape(reference)}</p>`
+        : reference
+            ? `<p class="reference fingerprint">${reference.map((group) => `<span>${escape(group)}</span>`).join('')}</p>`
+            : ''}${extra.join('')}</div>`;
 }
 /**
  * Names how one side was established, inside that side's card. Where the method published
@@ -295,7 +299,7 @@ function evidencePage(e, base, report, keyId, named) {
     card(local.heading, local.value, e.local.profileUrl, undefined, attestationNote(e.attestations.local, names)) +
         card(names.provider, externalName(e.external), externalLink(e.external), 
         // A mailbox's address or a domain is its name already, so there is no second identifier.
-        externalId(e.external), externalNotes(e.attestations, names)) +
+        externalIdGroups(e.external) ?? externalId(e.external), externalNotes(e.attestations, names)) +
         times(e.status === 'retired'
             ? [
                 ['Approved', e.approvedAt],
@@ -329,6 +333,66 @@ function evidencePage(e, base, report, keyId, named) {
     ${e.visibility === 'unlisted' ? `<p class="fine"><a href="${escape(base)}/external-share-revoke/${escape(e.id)}">Revoke only this sharing link using your external account</a></p>` : ''}
     <p class="fine"><a href="${escape(report)}" rel="noreferrer">Report an incorrect record</a></p>`);
 }
+/** Joins a subject's card to its accounts: the link itself, drawn as the dialog draws it. */
+const joiner = '<svg class="joiner" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">' +
+    [
+        'M10.5 7.5 13 5a4.95 4.95 0 0 1 7 7l-2.5 2.5',
+        'M13.5 16.5 11 19a4.95 4.95 0 0 1-7-7l2.5-2.5',
+        'M9 15l6-6',
+    ]
+        .map((d) => `<path d="${d}" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>`)
+        .join('') +
+    '</svg>';
+/**
+ * One account as a badge's dialog draws it: what it is and how it stands, the verifier's
+ * own page for it, how it was shown, how its holder lists it, and its times.
+ */
+function accountCard(e, external, now) {
+    const retired = e.status === 'retired';
+    const record = escape(safeUrl(e.evidenceUrl));
+    return card(e.providerName, externalName(e.external), externalLink(e.external), externalIdGroups(e.external) ?? externalId(e.external), `<p class="how">${escape(statusLabel(e, now))} · via: <a href="${record}">${escape(e.verifierName)}</a>${e.signedUrl ? ` · <a href="${record}#signed">signed</a>` : ''}</p>`, externalNotes({ ...e.attestations, external }, { site: e.siteName, provider: e.providerName }), times(retired
+        ? [
+            ['Approved', e.approvedAt],
+            ['Last verified', lastProved(e)],
+            ['Retired', e.retiredAt],
+        ]
+        : [
+            ['Approved', e.approvedAt],
+            [e.expiresAt > now ? 'Valid until' : 'Expired on', e.expiresAt],
+            ['Last checked', external[0].artifactUrl ? external[0].confirmedAt : undefined],
+        ]), 
+    // The holder's own word on the account, which nothing checked, so it sits apart from
+    // the methods, in the card's corner as the dialog has it.
+    retired || !e.mark
+        ? ''
+        : e.mark === 'preferred'
+            ? '<div class="listing preferred">Preferred</div>'
+            : '<div class="listing">No longer used</div>');
+}
+/**
+ * The public records given, as a page that shows what a badge's dialog does: a card to a
+ * subject, then one to each of its accounts in the badge's own order.
+ */
+function publishedPage(records, base) {
+    const now = Date.now();
+    const subjects = new Map();
+    for (const e of records) {
+        const key = JSON.stringify([e.siteName, e.local.reference]);
+        subjects.set(key, [...(subjects.get(key) ?? []), e]);
+    }
+    return page(base, 'Public connections', records.length
+        ? [...subjects.values()]
+            .map((held) => {
+            const local = localSide(held[0].local, held[0].siteName);
+            return (card(local.heading, local.value, held[0].local.profileUrl) +
+                joiner +
+                `<div class="accounts">${accountsOf(held, now)
+                    .map(({ lead, external }) => accountCard(lead, external, now))
+                    .join('')}</div>`);
+        })
+            .join('')
+        : '<p>No public connections.</p>');
+}
 /**
  * Names a signing key on one line: its last sixteen digits, linked to the key itself with
  * the whole fingerprint on hover, then whether a domain's DNS was read naming it. That is a
@@ -355,7 +419,7 @@ function checkedPage(d, keyId, base, named) {
     const retired = d.version === 2;
     return page(base, retired ? 'Retired connection' : 'Signed record', `<p>${escape(d.verifierName)} signed this record. It shows what stood when it was signed, not what stands now.</p>` +
         card(local.heading, local.value, d.local.profileUrl, undefined, attestationNote(d.attestations.local, names)) +
-        card(names.provider, externalName(d.external), externalLink(d.external), externalId(d.external), externalNotes(d.attestations, names)) +
+        card(names.provider, externalName(d.external), externalLink(d.external), externalIdGroups(d.external) ?? externalId(d.external), externalNotes(d.attestations, names)) +
         times(retired
             ? [
                 ['Signed', d.issuedAt],
@@ -644,6 +708,8 @@ export function createVerily(options) {
                     // With one visibility there is nothing for the holder to change it to.
                     if (kind === 'visibility' && visibilities(user).length < 2)
                         throw new Unavailable();
+                    // Several providers are named by their buttons, not strung together in the heading.
+                    const several = new Set(offered.map((p) => p.name)).size > 1;
                     // One form per method. With one on offer the provider is all there is to name.
                     // A new link started from this page always ends on its approval, as it did when
                     // this form was a GET, so it says so: `/verify` is an address any site can send a
@@ -655,7 +721,9 @@ export function createVerily(options) {
                         ? 'Remove a connection'
                         : kind === 'renew'
                             ? 'Renew this connection'
-                            : `Verify with ${providerNames(offered)}`, `
+                            : several
+                                ? 'Verify an account'
+                                : `Verify with ${providerNames(offered)}`, `
             ${user
                         ? card(subject(user).heading, subject(user).value, user.profileUrl)
                         : '<p>Authenticate with the matching external account to review and remove this link.</p>'}
@@ -744,7 +812,7 @@ export function createVerily(options) {
                                 ? 'Add to connection'
                                 : 'Confirm connection', `
             ${card(subject(flow.local).heading, subject(flow.local).value, flow.local.profileUrl)}
-            ${card(provider.name, externalName(flow.external), externalLink(flow.external), externalId(flow.external))}
+            ${card(provider.name, externalName(flow.external), externalLink(flow.external), externalIdGroups(flow.external) ?? externalId(flow.external))}
             ${joined ? `<p>This account is already linked here. Confirming adds this method to that connection, beneath the one it was first shown by, and it stays ${escape(joined.visibility)}.</p>` : ''}
             ${found ? `<p>${escape(found)}</p>` : ''}
             <p class="fine">${escape(service.siteOf(flow.local))} receives the result. Verified via ${escape(options.verifierName)}.</p>
@@ -782,7 +850,15 @@ export function createVerily(options) {
                 }
                 // Lets a static embed track current connections without hardcoding an id.
                 if (path === '/published') {
-                    const response = json(await service.published());
+                    const site = url.searchParams.get('site');
+                    const reference = url.searchParams.get('reference') ?? undefined;
+                    const subject = site === null ? undefined : { site, reference };
+                    // A page only where one is asked for by name. An embed published before `Accept`
+                    // was sent asks for nothing, and must go on getting the list.
+                    if (url.searchParams.get('format') !== 'json' &&
+                        /\btext\/html\b/i.test(request.headers.get('accept') ?? ''))
+                        return html(publishedPage(await service.listed(subject), prefix));
+                    const response = json(await service.published(subject));
                     response.headers.set('Access-Control-Allow-Origin', '*');
                     return response;
                 }

package/dist/server/openpgp.d.ts

@@ -10,6 +10,10 @@ import { Refused } from '../core/index.js';
 export declare class Malformed extends Refused {
     constructor(what: string, options?: ErrorOptions);
 }
+/** The block is not there at all: a holder who pasted half is told which half is missing. */
+export declare class Missing extends Malformed {
+    constructor(what: string);
+}
 export type Certificate = Key;
 export type Cleartext = CleartextMessage;
 /** The public key in armored text, wherever in the text its block is. */

package/dist/server/openpgp.js

@@ -34,6 +34,13 @@ export class Malformed extends Refused {
         super(`Malformed OpenPGP ${what}`, options);
     }
 }
+/** The block is not there at all: a holder who pasted half is told which half is missing. */
+export class Missing extends Malformed {
+    constructor(what) {
+        super(what);
+        this.message = `No OpenPGP ${what} found`;
+    }
+}
 /**
  * The one armored block of the named kind out of text that may hold others: a holder
  * pastes the signed message and the key together, and the library reads only the first
@@ -43,8 +50,10 @@ function block(text, begin, end, what) {
     if (text.length > maxArmorBytes)
         throw new Malformed(what);
     const start = text.indexOf(`-----BEGIN PGP ${begin}-----`);
+    if (start < 0)
+        throw new Missing(what);
     const stop = text.indexOf(`-----END PGP ${end}-----`, start);
-    if (start < 0 || stop < 0)
+    if (stop < 0)
         throw new Malformed(what);
     return text.slice(start, stop + `-----END PGP ${end}-----`.length);
 }

package/dist/server/service.d.ts

@@ -2,6 +2,14 @@ import { type Attestations, type Connection, type Evidence, type ExternalAccount
 import { type DnsOptions, type Published } from './domain.js';
 export declare const secret: () => string;
 export declare const hash: (value: string) => string;
+/**
+ * A subject as its public records name it: the site it belongs to and its reference there.
+ * A reference means nothing outside its site, so with none this is everyone on the site.
+ */
+export interface Subject {
+    site: string;
+    reference?: string;
+}
 export declare class Unavailable extends Error {
     constructor();
 }
@@ -345,7 +353,13 @@ export declare class VerilyService {
      * hardcoding an id that dies whenever one is revoked and replaced. Unlisted records are
      * never included: they must not appear in any directory listing.
      */
-    published(): Promise<Evidence[]>;
+    published(subject?: Subject): Promise<Evidence[]>;
+    /**
+     * Every public record a badge could show, for the page a person reads: one that has lapsed
+     * or been retired is there to be marked, and one removed is not. `subject` narrows it to
+     * one site or one subject, named by what its records already publish. Earliest connected first.
+     */
+    listed(subject?: Subject): Promise<Evidence[]>;
     /**
      * Every record this instance holds, public and unlisted, for whoever runs it. No route
      * of the library serves this: a deployment that shows it must first know the reader is

package/dist/server/service.js

@@ -1174,11 +1174,23 @@ export class VerilyService {
      * hardcoding an id that dies whenever one is revoked and replaced. Unlisted records are
      * never included: they must not appear in any directory listing.
      */
-    async published() {
+    async published(subject) {
+        return (await this.listed(subject)).filter((e) => e.status === 'verified');
+    }
+    /**
+     * Every public record a badge could show, for the page a person reads: one that has lapsed
+     * or been retired is there to be marked, and one removed is not. `subject` narrows it to
+     * one site or one subject, named by what its records already publish. Earliest connected first.
+     */
+    async listed(subject) {
         return this.transaction(async (tx) => (await tx.list('connections'))
-            .filter((c) => c.visibility === 'public')
+            .filter((c) => c.visibility === 'public' &&
+            (!subject ||
+                (this.siteOf(c.local) === subject.site &&
+                    (subject.reference === undefined || c.local.reference === subject.reference))))
             .map((c) => this.evidence(c))
-            .filter((e) => e.status === 'verified'));
+            .filter((e) => e.status !== 'revoked')
+            .sort((a, b) => a.connectedAt - b.connectedAt));
     }
     /**
      * Every record this instance holds, public and unlisted, for whoever runs it. No route

package/dist/server/style.d.ts

@@ -8,7 +8,7 @@
  * leaves. So the styling does the two things that helps with, a measured column and a
  * legible hierarchy, and nothing that would make a record look like a product.
  */
-export declare const stylesheet = ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n  }\n}\n\n* { box-sizing: border-box; }\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font: 16px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 { margin-bottom: 1.25rem; padding-bottom: 0; border-bottom: none; }\n\nh2 { margin: 2rem 0 .75rem; font-size: 1.125rem; font-weight: 620; letter-spacing: -.01em; }\n\nh3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 620; }\n\np { margin: 0 0 1rem; overflow-wrap: break-word; }\n\na { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }\n\na:hover { text-decoration-thickness: 2px; }\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: .75rem 5.25rem .75rem .875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode { font: .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: .5rem;\n  right: .5rem;\n  padding: .1875rem .5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font: 500 .75rem/1.5 system-ui, sans-serif;\n  user-select: none;\n}\n\n.copy:hover { color: var(--ink); border-color: var(--muted); }\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: .75rem;\n  padding: .875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n.who {\n  margin: 0 0 .125rem;\n  color: var(--muted);\n  font-size: .75rem;\n  font-weight: 550;\n  letter-spacing: .02em;\n}\n\n.name { margin: 0; font-size: 1.0625rem; font-weight: 620; letter-spacing: -.01em; }\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a { text-decoration: none; }\n\n.name a:hover { text-decoration: underline; }\n\n.reference, .how { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }\n\n.name + .how, .reference + .how { margin-top: .5rem; }\n.how.additional { padding-left: .75rem; }\n\n.fine { color: var(--muted); font-size: .8125rem; line-height: 1.55; margin-bottom: .625rem; }\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed { font-size: .875rem; line-height: 1.55; margin-bottom: .875rem; }\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target { margin-inline: -.75rem; padding: .625rem .75rem; border-radius: 8px; background: var(--raised); }\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: .3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: .8125rem;\n}\n\ndt { color: var(--muted); }\n\ndd { margin: 0; font-variant-numeric: tabular-nums; }\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl { margin: .5rem 0 1rem; padding-top: 0; border-top: 0; }\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child { margin-bottom: 0; }\n\nform { margin: 0 0 1.5rem; }\n\nlabel { display: block; margin: 0 0 .75rem; color: var(--muted); font-size: .8125rem; }\n\ninput, textarea {\n  display: block;\n  width: 100%;\n  margin-top: .375rem;\n  padding: .5rem .625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font: .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea { resize: vertical; }\n\ninput:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }\n\nbutton {\n  padding: .5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font: 500 .9375rem/1.4 inherit;\n  cursor: pointer;\n}\n\nbutton + button { margin-left: .5rem; border-color: var(--line); background: none; color: var(--ink); }\n\nfieldset { margin: 0 0 1.25rem; padding: 1rem 1.125rem .25rem; border: 1px solid var(--line); border-radius: 8px; }\n\nlegend { padding: 0 .375rem; color: var(--muted); font-size: .8125rem; }\n\nfieldset label { display: flex; align-items: baseline; gap: .5rem; color: var(--ink); font-size: .9375rem; }\n\nfieldset input { width: auto; margin: 0; }\n\nfieldset p { margin: .25rem 0 .875rem 1.5rem; color: var(--muted); font-size: .8125rem; }\n";
+export declare const stylesheet = ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n  }\n}\n\n* { box-sizing: border-box; }\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font: 16px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 { margin-bottom: 1.25rem; padding-bottom: 0; border-bottom: none; }\n\nh2 { margin: 2rem 0 .75rem; font-size: 1.125rem; font-weight: 620; letter-spacing: -.01em; }\n\nh3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 620; }\n\np { margin: 0 0 1rem; overflow-wrap: break-word; }\n\na { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }\n\na:hover { text-decoration-thickness: 2px; }\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: .75rem 5.25rem .75rem .875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode { font: .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: .5rem;\n  right: .5rem;\n  padding: .1875rem .5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font: 500 .75rem/1.5 system-ui, sans-serif;\n  user-select: none;\n}\n\n.copy:hover { color: var(--ink); border-color: var(--muted); }\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: .75rem;\n  padding: .875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) { max-width: 54rem; }\n\n.accounts {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));\n  gap: .75rem;\n  margin-bottom: .75rem;\n}\n\n.accounts .side { position: relative; display: flex; flex-direction: column; margin-bottom: 0; }\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: .75rem;\n  right: .875rem;\n  padding: .0625rem .5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: .6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred { border-color: var(--accent); color: var(--accent); }\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl { margin-top: auto; }\n.accounts .side p:last-of-type { margin-bottom: .625rem; }\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner { display: block; width: 1.25rem; height: 1.25rem; margin: 0 auto .75rem; color: var(--muted); }\n\n.who {\n  margin: 0 0 .125rem;\n  color: var(--muted);\n  font-size: .75rem;\n  font-weight: 550;\n  letter-spacing: .02em;\n}\n\n.name { margin: 0; font-size: 1.0625rem; font-weight: 620; letter-spacing: -.01em; }\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a { text-decoration: none; }\n\n.name a:hover { text-decoration: underline; }\n\n.reference, .how { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }\n\n.name + .how, .reference + .how { margin-top: .5rem; }\n.fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }\n.fingerprint span { display: inline-block; margin-right: .5ch; }\n.how.additional { padding-left: .75rem; }\n\n.fine { color: var(--muted); font-size: .8125rem; line-height: 1.55; margin-bottom: .625rem; }\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed { font-size: .875rem; line-height: 1.55; margin-bottom: .875rem; }\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target { margin-inline: -.75rem; padding: .625rem .75rem; border-radius: 8px; background: var(--raised); }\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: .3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: .8125rem;\n}\n\ndt { color: var(--muted); }\n\ndd { margin: 0; font-variant-numeric: tabular-nums; }\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl { margin: .5rem 0 1rem; padding-top: 0; border-top: 0; }\n.side dl { margin: .625rem 0 0; padding-top: .625rem; }\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child { margin-bottom: 0; }\n\nform { margin: 0 0 1.5rem; }\n\nlabel { display: block; margin: 0 0 .75rem; color: var(--muted); font-size: .8125rem; }\n\ninput, textarea {\n  display: block;\n  width: 100%;\n  margin-top: .375rem;\n  padding: .5rem .625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font: .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea { resize: vertical; }\n\ninput:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }\n\nbutton {\n  padding: .5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font: 500 .9375rem/1.4 inherit;\n  cursor: pointer;\n}\n\nbutton + button { margin-left: .5rem; border-color: var(--line); background: none; color: var(--ink); }\n\nfieldset { margin: 0 0 1.25rem; padding: 1rem 1.125rem .25rem; border: 1px solid var(--line); border-radius: 8px; }\n\nlegend { padding: 0 .375rem; color: var(--muted); font-size: .8125rem; }\n\nfieldset label { display: flex; align-items: baseline; gap: .5rem; color: var(--ink); font-size: .9375rem; }\n\nfieldset input { width: auto; margin: 0; }\n\nfieldset p { margin: .25rem 0 .875rem 1.5rem; color: var(--muted); font-size: .8125rem; }\n";
 /**
  * A short digest of the sheet above, put in the link's query so a release that changes the
  * styling changes its address. Without that the only safe cache is no cache: a reader who

package/dist/server/style.js

@@ -134,6 +134,43 @@ code { font: .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
   background: var(--raised);
 }
 
+/*
+ * A subject's accounts are peers, so where there is room they sit two across. The page
+ * that lists them is wider for it, and a narrow one keeps them in a single column.
+ */
+main:has(.accounts) { max-width: 54rem; }
+
+.accounts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
+  gap: .75rem;
+  margin-bottom: .75rem;
+}
+
+.accounts .side { position: relative; display: flex; flex-direction: column; margin-bottom: 0; }
+
+/* How the holder lists the account, in the card's corner and out of the lines below. */
+.listing {
+  position: absolute;
+  top: .75rem;
+  right: .875rem;
+  padding: .0625rem .5rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: .6875rem;
+  font-weight: 550;
+}
+
+.listing.preferred { border-color: var(--accent); color: var(--accent); }
+
+/* The times sit at the foot of the card, so they line up along a row of uneven cards. */
+.accounts .side dl { margin-top: auto; }
+.accounts .side p:last-of-type { margin-bottom: .625rem; }
+
+/* Between a subject and its accounts on the page that lists them. */
+.joiner { display: block; width: 1.25rem; height: 1.25rem; margin: 0 auto .75rem; color: var(--muted); }
+
 .who {
   margin: 0 0 .125rem;
   color: var(--muted);
@@ -152,6 +189,8 @@ code { font: .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .reference, .how { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
 
 .name + .how, .reference + .how { margin-top: .5rem; }
+.fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }
+.fingerprint span { display: inline-block; margin-right: .5ch; }
 .how.additional { padding-left: .75rem; }
 
 .fine { color: var(--muted); font-size: .8125rem; line-height: 1.55; margin-bottom: .625rem; }
@@ -178,6 +217,7 @@ dd { margin: 0; font-variant-numeric: tabular-nums; }
 
 /* Inside a card the rule above it is the card's own edge, so the list needs none. */
 section dl { margin: .5rem 0 1rem; padding-top: 0; border-top: 0; }
+.side dl { margin: .625rem 0 0; padding-top: .625rem; }
 
 section {
   margin: 0 0 1.25rem;