@bkazemi/verily 0.5.0 → 0.7.0

package/dist/server/service.js

@@ -1,5 +1,6 @@
 import { createHash, randomBytes } from 'node:crypto';
-import { fresh, freshnessMs, isArtifactProvider, isCodeProvider, isRedirectProvider, providerMethod, Refused, status, verifySigned, } from '../core/index.js';
+import { isDeepStrictEqual } from 'node:util';
+import { Absent, expired, fresh, freshnessMs, isArtifactProvider, isCodeProvider, isRedirectProvider, providerMethod, Refused, status, verifySigned, } from '../core/index.js';
 import { domainOf, keyRecord, namedKeys, namedVerifiers, published, } from './domain.js';
 import { signer } from './signing.js';
 export const secret = () => randomBytes(32).toString('base64url');
@@ -312,6 +313,37 @@ export class VerilyService {
                 if (suggested)
                     flow.suggested = suggested;
             }
+            // A draft carries only public setup, never a session or a successful proof.
+            // Scope it to the exact subject and operation. Starting again
+            // authenticates the holder as usual and mints a fresh binding and deadline.
+            // Context belongs to the current visit: hosted sessions and return transactions
+            // change when the holder signs in again and must never be restored from a draft.
+            if (artifact?.method === 'dns' && local && ['connect', 'renew'].includes(kind)) {
+                const id = hash(JSON.stringify([
+                    local.id,
+                    this.siteOf(local),
+                    local.reference,
+                    local.profileUrl,
+                    provider.id,
+                    kind,
+                    connectionId,
+                ]));
+                const saved = await tx.get('dnsDrafts', id);
+                const draft = saved && saved.expiresAt > this.now() ? saved : undefined;
+                flow.dnsDraftId = id;
+                if (draft) {
+                    flow.expect = draft.expect;
+                    if (draft.artifact)
+                        flow.suggested = draft.artifact;
+                }
+                await tx.put('dnsDrafts', id, {
+                    id,
+                    flowId: flow.id,
+                    expect: flow.expect,
+                    ...(draft?.artifact ? { artifact: draft.artifact } : {}),
+                    expiresAt: draft?.expiresAt ?? this.now() + 7 * 86400000,
+                });
+            }
             await tx.put('flows', flow.id, flow);
             return provider;
         });
@@ -328,7 +360,7 @@ export class VerilyService {
                 flowId: flow.id,
                 binding,
                 expect: flow.expect,
-                instructions: artifact.instructions(flow.expect),
+                instructions: artifact.instructions(flow.expect, flow.suggested),
             }
             : isRedirectProvider(provider)
                 ? {
@@ -435,6 +467,13 @@ export class VerilyService {
             const provider = this.providerOf(flow);
             if (flow.phase !== 'pending' || !flow.expect || !isArtifactProvider(provider))
                 throw new Unavailable();
+            if (flow.dnsDraftId) {
+                const draft = await tx.get('dnsDrafts', flow.dnsDraftId);
+                if (draft?.flowId === flow.id) {
+                    draft.artifact = artifact;
+                    await tx.put('dnsDrafts', draft.id, draft);
+                }
+            }
             flow.phase = 'exchanging';
             await tx.put('flows', id, flow);
             return { provider, expect: flow.expect };
@@ -589,7 +628,7 @@ export class VerilyService {
     async linked(tx, id, token) {
         const flow = await tx.get('flows', id);
         if (!flow ||
-            flow.expiresAt <= this.now() ||
+            expired(flow, this.now()) ||
             flow.phase !== 'pending' ||
             flow.sent?.linkHash !== hash(token))
             throw new Unavailable();
@@ -635,7 +674,7 @@ export class VerilyService {
     }
     async bound(tx, id, binding) {
         const flow = await tx.get('flows', id);
-        if (!flow || flow.bindingHash !== hash(binding) || flow.expiresAt <= this.now())
+        if (!flow || flow.bindingHash !== hash(binding) || expired(flow, this.now()))
             throw new Unavailable();
         return flow;
     }
@@ -685,7 +724,11 @@ export class VerilyService {
             !external.handle ||
             typeof external.profileUrl !== 'string' ||
             // A mailbox has no page to point at, so its own address stands in for one.
-            new URL(external.profileUrl).protocol !== (external.kind === 'mailbox' ? 'mailto:' : 'https:'))
+            new URL(external.profileUrl).protocol !==
+                (external.kind === 'mailbox' ? 'mailto:' : 'https:') ||
+            // Reject a creation date in the future, allowing five minutes of clock skew.
+            (external.createdAt !== undefined &&
+                !(Number.isFinite(external.createdAt) && external.createdAt <= this.now() + 300000)))
             throw new Unavailable();
         // The flow as it stands once this account is accepted for it, or a refusal. Asked
         // twice, because what it is checked against can change while proofs are being read.
@@ -948,6 +991,11 @@ export class VerilyService {
      */
     async ended(tx, flow, phase, connection) {
         connection ??= flow.connectionId ? await tx.get('connections', flow.connectionId) : undefined;
+        if (flow.dnsDraftId && phase !== 'failed') {
+            const draft = await tx.get('dnsDrafts', flow.dnsDraftId);
+            if (draft?.flowId === flow.id)
+                await tx.delete('dnsDrafts', draft.id);
+        }
         flow.phase = phase;
         flow.result = {
             kind: flow.kind,
@@ -957,9 +1005,120 @@ export class VerilyService {
         };
     }
     /** Every read of a connection goes through here, so a record in an older shape is upgraded. */
-    transaction(work) {
+    async transaction(work) {
+        const written = new Set();
+        const result = await this.options.storage.transaction((tx) => work(upgraded(tx, written)));
+        // Report the records this transaction wrote, once it has committed. A failure here is
+        // left for the next announce() and never fails the request that made the change.
+        if (written.size && this.options.onChange)
+            await this.announce([...written]).catch(() => 0);
+        return result;
+    }
+    /** The parts of a record that `onChange` reports, as they are at `now`. */
+    reportable(connection, now) {
+        return {
+            status: status(connection, now, this.freshness),
+            visibility: connection.visibility,
+            expiresAt: connection.expiresAt,
+            ...(connection.mark ? { mark: connection.mark } : {}),
+        };
+    }
+    /**
+     * Delivers every record whose state differs from the one last reported to `onChange`,
+     * up to `budget` records. `ids` limits it to those records. Returns how many were
+     * delivered. Does nothing without `onChange`.
+     *
+     * Records whose last delivery failed are tried after the others, oldest attempt first,
+     * so a record that keeps failing does not hold up the rest.
+     */
+    async announce(ids, budget = 50) {
+        if (!this.options.onChange || budget <= 0)
+            return 0;
+        const now = this.now();
+        const due = await this.unreported(async (tx) => {
+            const records = ids
+                ? await Promise.all(ids.map((id) => tx.get('connections', id)))
+                : await tx.list('connections');
+            return records
+                .filter((connection) => connection !== undefined)
+                .filter((c) => this.unsettled(c, now))
+                .sort((x, y) => (x.reportTriedAt ?? 0) - (y.reportTriedAt ?? 0))
+                .slice(0, budget)
+                .map((connection) => connection.id);
+        });
+        let delivered = 0;
+        for (const id of due)
+            delivered += await this.deliver(id);
+        return delivered;
+    }
+    /** A storage transaction whose writes are not themselves announced. */
+    unreported(work) {
         return this.options.storage.transaction((tx) => work(upgraded(tx)));
     }
+    /** The last delivery started. Each delivery waits for the one before it. */
+    delivering = Promise.resolve();
+    /**
+     * Whether a record still has something to deliver: its state differs from the one last
+     * reported, or its last delivery started and was never confirmed. An unconfirmed
+     * delivery may have reached the receiver, so it is sent again even if the state has
+     * since gone back to the one reported.
+     */
+    unsettled(connection, now) {
+        return (connection.reportTriedAt !== undefined ||
+            !isDeepStrictEqual(connection.reported, this.reportable(connection, now)));
+    }
+    /**
+     * Delivers one record to `onChange` if it has something to deliver. Returns 1 if the
+     * delivery was confirmed.
+     *
+     * Each delivery reads the record and takes the next revision in one storage
+     * transaction, so a higher revision always carries a later state, whichever process or
+     * callback finishes first. Within this process deliveries also run one at a time.
+     */
+    deliver(id) {
+        const run = this.delivering.then(async () => {
+            const now = this.now();
+            // Start the delivery: read the state, take a revision, and mark it unconfirmed.
+            const attempt = await this.unreported(async (tx) => {
+                const connection = await tx.get('connections', id);
+                if (!connection || !this.unsettled(connection, now))
+                    return undefined;
+                const revision = (connection.reportRevision ?? 0) + 1;
+                await tx.put('connections', id, {
+                    ...connection,
+                    reportRevision: revision,
+                    reportTriedAt: now,
+                });
+                return { connection, revision, state: this.reportable(connection, now) };
+            });
+            if (!attempt)
+                return 0;
+            const { connection, revision, state } = attempt;
+            try {
+                await this.deadline(Promise.resolve(this.options.onChange({
+                    evidence: this.evidence(connection),
+                    local: connection.local,
+                    ...(connection.reported ? { previous: connection.reported } : {}),
+                    revision,
+                })));
+            }
+            catch {
+                // Left unconfirmed, so the next announce() delivers the record again.
+                return 0;
+            }
+            // Confirm it, unless a later delivery of the record has started since.
+            await this.unreported(async (tx) => {
+                const current = await tx.get('connections', id);
+                if (!current || current.reportRevision !== revision)
+                    return;
+                const { reportTriedAt: _tried, ...rest } = current;
+                await tx.put('connections', id, { ...rest, reported: state });
+            });
+            return 1;
+        });
+        this.delivering = run.catch(() => 0);
+        return run;
+    }
     /**
      * The methods a reader is shown. An additional method whose proof has gone unread no
      * longer shows anything, so it is left out until it reads again; the main one is
@@ -1061,6 +1220,9 @@ export class VerilyService {
         const [main, ...rest] = connection.attestations?.external ?? [
             { by: 'provider', method: 'oauth', confirmedAt: connection.authenticatedAt },
         ];
+        // Keep a creation date the record already has when this method did not report one.
+        const createdAt = flow.external.createdAt ?? connection.external.createdAt;
+        const created = createdAt === undefined ? {} : { createdAt };
         connection.local = flow.local;
         connection.approvedAt = this.now();
         connection.expiresAt = this.now() + (this.options.validityMs ?? 30 * 86400000);
@@ -1070,10 +1232,11 @@ export class VerilyService {
             // The account is taken as this method just named it. A recheck asks the same method
             // about the new proof and compares ids exactly, and an address read with different
             // case names the same profile under a different id.
-            connection.external = flow.external;
+            connection.external = { ...flow.external, ...created };
             connection.attestations = { local: this.declared(flow), external: [attestation, ...rest] };
         }
         else {
+            connection.external = { ...connection.external, ...created };
             // A proof that named the subject's old address proves nothing about its new one,
             // and rereading it would go on confirming a link to where the subject used to be.
             const others = rest.filter((a) => this.names(connection, a, flow.local));
@@ -1174,11 +1337,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
@@ -1316,7 +1491,7 @@ export class VerilyService {
     async shared(token) {
         return this.transaction(async (tx) => {
             const share = (await tx.list('shares')).find((s) => s.tokenHash === hash(token));
-            if (!share || share.revokedAt !== undefined || share.expiresAt <= this.now())
+            if (!share || share.revokedAt !== undefined || expired(share, this.now()))
                 throw new Unavailable();
             const connection = await tx.get('connections', share.connectionId);
             if (!connection || connection.visibility !== 'unlisted' || connection.revokedAt !== undefined)
@@ -1357,6 +1532,11 @@ export class VerilyService {
             return 0;
         const interval = this.options.recheckMs ?? 86400000;
         const now = this.now();
+        const spent = new Map();
+        // When a proof was last read, or last tried. One whose last read did not confirm it,
+        // because the read failed or the proof was missing, is tried again four times as soon.
+        const tried = (a) => a.readAt ?? a.confirmedAt;
+        const wait = (a) => tried(a) > a.confirmedAt ? Math.ceil(interval / 4) : interval;
         const due = await this.transaction(async (tx) => (await tx.list('connections'))
             .filter((c) => c.revokedAt === undefined &&
             c.retiredAt === undefined &&
@@ -1368,15 +1548,23 @@ export class VerilyService {
             attestation,
             provider: this.rereads(connection, attestation),
         }))
-            .filter((item) => item.provider !== undefined && item.attestation.confirmedAt + interval <= now))
-            .sort((a, b) => a.attestation.confirmedAt - b.attestation.confirmedAt)
-            .slice(0, budget));
+            .filter((item) => item.provider !== undefined &&
+            tried(item.attestation) + wait(item.attestation) <= now))
+            .sort((a, b) => tried(a.attestation) - tried(b.attestation))
+            // The budget is per provider, so one provider's backlog does not delay the others.
+            .filter((item) => {
+            const used = spent.get(item.provider.id) ?? 0;
+            spent.set(item.provider.id, used + 1);
+            return used < budget;
+        }));
         let confirmed = 0;
         // Serially and outside any transaction: storage here serializes writes, so holding one
         // open across a fetch would stall every other request behind the slowest provider.
         for (const item of due)
             confirmed += await this.reread(item);
         await this.restate(budget);
+        // Report records that expired or went unconfirmed since the last run.
+        await this.announce();
         return confirmed;
     }
     /**
@@ -1463,6 +1651,9 @@ export class VerilyService {
         const main = attestation === connection.attestations.external[0];
         let withdrawn = false;
         let dnssec = false;
+        // 'absent': the read worked and the proof was not there. 'unread': the read failed.
+        let missed;
+        const started = this.now();
         try {
             if (provider.artifact === 'document')
                 withdrawn = await this.deadline(provider.withdrawn(connection.external, connection.proof));
@@ -1475,11 +1666,11 @@ export class VerilyService {
                 if (main
                     ? external.id !== connection.external.id
                     : !sameAccount(connection.external, external))
-                    return 0;
+                    missed = 'absent';
             }
         }
-        catch {
-            return 0;
+        catch (error) {
+            missed = error instanceof Absent ? 'absent' : 'unread';
         }
         return this.transaction(async (tx) => {
             const current = await tx.get('connections', connection.id);
@@ -1494,6 +1685,14 @@ export class VerilyService {
             const held = main ? first : rest.find((a) => a.method === method);
             if (held?.method !== method || held.artifactUrl !== artifactUrl)
                 return 0;
+            // Drop this answer if something newer than this read has been written since the
+            // read was picked: a renewal that replaced or confirmed the proof, or another
+            // recheck's read that started at or after this one, whatever that read found.
+            const replaced = held.expect !== expect ||
+                (held.confirmedAt !== attestation.confirmedAt && held.confirmedAt >= started);
+            const reread = held.readAt !== undefined && held.readAt !== attestation.readAt && held.readAt >= started;
+            if (replaced || reread)
+                return 0;
             // The holder said this identity is no longer theirs, which is a choice, not decay.
             if (withdrawn) {
                 current.revokedAt = this.now();
@@ -1503,7 +1702,18 @@ export class VerilyService {
                 await this.audit(tx, connection.id, 'revoke', 'external');
                 return 0;
             }
-            held.confirmedAt = this.now();
+            // Times are the moment the read started, so answers can be put in order.
+            held.readAt = started;
+            if (missed) {
+                // A failed read leaves the proof counting until freshnessMs runs out. A proof
+                // that was read and is missing stops counting now.
+                if (missed === 'absent')
+                    held.absentAt ??= started;
+                await tx.put('connections', connection.id, current);
+                return 0;
+            }
+            held.confirmedAt = started;
+            delete held.absentAt;
             // A zone can start or stop being signed, so the flag is as the last read found it.
             if (dnssec)
                 held.dnssec = true;
@@ -1534,10 +1744,13 @@ export class VerilyService {
         await this.transaction(async (tx) => {
             const now = this.now();
             for (const flow of await tx.list('flows'))
-                if (flow.expiresAt <= now)
+                if (expired(flow, now))
                     await tx.delete('flows', flow.id);
+            for (const draft of await tx.list('dnsDrafts'))
+                if (expired(draft, now))
+                    await tx.delete('dnsDrafts', draft.id);
             for (const limit of await tx.list('limits'))
-                if (limit.expiresAt <= now)
+                if (expired(limit, now))
                     await tx.delete('limits', limit.id);
             const audit = await tx.list('audit');
             // The sites that still have a record here, whose place in the recheck order is kept.
@@ -1640,10 +1853,15 @@ function sameAccount(a, b) {
  * Wraps a transaction so records read through it are in the current shape. They are
  * rewritten in that shape the next time they are put.
  */
-function upgraded(tx) {
+function upgraded(tx, written) {
     return {
         get: async (kind, id) => upgrade(kind, await tx.get(kind, id)),
-        put: (kind, id, value) => tx.put(kind, id, value),
+        put: (kind, id, value) => {
+            // Collects the ids of the connections written, for transaction() to report.
+            if (kind === 'connections')
+                written?.add(id);
+            return tx.put(kind, id, value);
+        },
         delete: (kind, id) => tx.delete(kind, id),
         list: async (kind) => (await tx.list(kind)).map((value) => upgrade(kind, value)),
     };

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/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; margin: 0 0 0 -4px; padding-left: 4px; overflow-x: clip; font-size: 1.0625rem; font-weight: 620; letter-spacing: -.01em; }\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since { position: relative; color: var(--muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }\n\n/* The dot sits in the gap before the date. */\n.name .since::before { content: \"\u00B7\"; position: absolute; left: -.5rem; transform: translateX(-50%); }\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/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark { display: inline-block; margin-left: .3125rem; padding: 0 .375rem; border: 1px solid var(--line); border-radius: 999px; font-size: .625rem; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: .0625rem; }\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);
@@ -142,7 +179,14 @@ code { font: .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
   letter-spacing: .02em;
 }
 
-.name { margin: 0; font-size: 1.0625rem; font-weight: 620; letter-spacing: -.01em; }
+/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */
+.name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; margin: 0 0 0 -4px; padding-left: 4px; overflow-x: clip; font-size: 1.0625rem; font-weight: 620; letter-spacing: -.01em; }
+
+/* The account's creation date, after the name and a dot. It wraps under a long name. */
+.name .since { position: relative; color: var(--muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
+
+/* The dot sits in the gap before the date. */
+.name .since::before { content: "·"; position: absolute; left: -.5rem; transform: translateX(-50%); }
 
 /* The name is the card's subject before it is a link, so the rule is drawn on hover. */
 .name a { text-decoration: none; }
@@ -152,7 +196,11 @@ 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; }
+/* The "signed" pill after the verifier's name, one size smaller than the line it sits on. */
+.how .signed-mark { display: inline-block; margin-left: .3125rem; padding: 0 .375rem; border: 1px solid var(--line); border-radius: 999px; font-size: .625rem; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: .0625rem; }
 
 .fine { color: var(--muted); font-size: .8125rem; line-height: 1.55; margin-bottom: .625rem; }
 
@@ -178,6 +226,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;

package/dist/server/youtube.js

@@ -78,10 +78,15 @@ export function youtubeProvider(options) {
                     : undefined;
                 if (!handle)
                     throw new Error('Invalid provider identity');
+                // The channel's creation date, not the Google account's. Optional: a missing or
+                // unparseable date is left off and the sign-in still succeeds.
+                const publishedAt = channel.snippet.publishedAt;
+                const createdAt = typeof publishedAt === 'string' ? Date.parse(publishedAt) : NaN;
                 return {
                     id: channel.id,
                     handle,
                     profileUrl: `https://www.youtube.com/channel/${channel.id}`,
+                    ...(Number.isFinite(createdAt) ? { createdAt } : {}),
                 };
             }
             finally {