@bkazemi/verily 0.8.0 → 0.9.0

package/dist/server/render.d.ts

@@ -1,20 +1,21 @@
 import { type ExternalAccount } from '../core/index.js';
 import { type MarkTone } from '../marks.js';
+import { type Html, type OptionalHtml } from './html.js';
 /**
  * The shell every Verily page shares: the stylesheet, the logotype and the heading. `variant`
  * is a class on the page's `main`, such as `single` for a page with one thing on it.
  * `script` is the path of one script the page runs. `mark` is drawn before the heading.
  */
-export declare const page: (prefix: string, title: string, body: string, variant?: string, script?: string, mark?: string) => string;
+export declare const page: (prefix: string, title: string, body: Html, variant?: string, script?: string, mark?: OptionalHtml) => string;
 /**
  * The V the badge draws for a record, in the tone that says how the record stands.
  * `cropped` fits the box to the strokes, for a V that has to meet the edges around it.
  */
-export declare function verdict(tone: MarkTone, cropped?: boolean): string;
+export declare function verdict(tone: MarkTone, cropped?: boolean): Html;
 /** A card's heading: its text, and the provider's mark before it where there is one. */
 export type Heading = string | {
     text: string;
-    mark: string;
+    mark: Html;
 };
 /** A provider's name with its mark, for a card's heading. */
 export declare function marked(text: string, provider: string, method?: string): Heading;
@@ -25,25 +26,27 @@ export declare function marked(text: string, provider: string, method?: string):
  *
  * Both sides render as the same card, so the pair reads as a pair.
  */
-export declare function card(heading: Heading, name: string, url: string | undefined, reference?: string | string[], ...extra: string[]): string;
+export declare function card(heading: Heading, name: string, url: string | undefined, reference?: string | string[], ...extra: OptionalHtml[]): Html;
 /**
  * The card for an external account: its name, link and id, with the "Joined <date>" text
  * on the name's line when the creation date is known.
  */
-export declare function externalCard(heading: Heading, external: ExternalAccount, ...extra: string[]): string;
-export declare function side(heading: Heading, name: string, url: string | undefined, reference: string | string[] | undefined, since: string | undefined, extra: string[]): string;
+export declare function externalCard(heading: Heading, external: ExternalAccount, ...extra: OptionalHtml[]): Html;
+export declare function side(heading: Heading, name: string, url: string | undefined, reference: string | string[] | undefined, since: string | undefined, extra: OptionalHtml[]): Html;
 /** A day, as the date alone. */
 export declare const day: (time: number) => string;
 /** A day as it is said, such as "Jan 11, 2027". In UTC, as every other time here is. */
 export declare const date: (time: number) => string;
 /** How far off a time is in whole days, such as "in 90 days" or "12 days ago". */
 export declare function distance(time: number, now: number): string;
+/** A time to the minute, in UTC, such as "Oct 16, 2026, 18:28 UTC". */
+export declare const minute: (time: number) => string;
 /** Seconds are the finest thing a record measured in days can mean; milliseconds are noise. */
 export declare const moment: (time: number) => string;
 /**
  * Every time on the page in one list. A date inside a sentence is a date a reader has to
  * find; the times of a record belong together, where they can be compared at a glance.
  */
-export declare function times(rows: [string, number | undefined][]): string;
+export declare function times(rows: [string, number | undefined][]): Html;
 /** A URL as written if it is http(s), and nothing otherwise. */
 export declare function safeUrl(value: string): string | undefined;

package/dist/server/render.js

@@ -1,39 +1,68 @@
 import { externalId, externalIdGroups, externalLink, externalName, externalSince, } from '../core/index.js';
 import { logo } from '../logo.js';
 import { markOf, pathAttributes, tones, verification } from '../marks.js';
-import { escape } from './escape.js';
+import { html, raw } from './html.js';
 import { styleVersion } from './style.js';
 /**
  * The shell every Verily page shares: the stylesheet, the logotype and the heading. `variant`
  * is a class on the page's `main`, such as `single` for a page with one thing on it.
  * `script` is the path of one script the page runs. `mark` is drawn before the heading.
  */
-export const page = (prefix, title, body, variant = '', script = '', mark = '') => `<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${escape(title)} · Verily</title><link rel="stylesheet" href="${escape(prefix)}/style.css?v=${styleVersion}"><body><main${variant && ` class="${variant}"`}>${logo}<h1>${mark}${escape(title)}</h1>${body}</main>${script && `<script src="${escape(script)}" defer></script>`}</body></html>`;
+export const page = (prefix, title, body, variant = '', script = '', mark) => html `
+    <!doctype html>
+    <html lang="en">
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width,initial-scale=1">
+      <title>${title} · Verily</title>
+      <link rel="stylesheet" href="${prefix}/style.css?v=${styleVersion}">
+      <body>
+        <main${variant && html ` class="${variant}"`}>
+          ${raw(logo)}
+          <h1>${mark}${title}</h1>
+          ${body}
+        </main>
+        ${script && html `<script src="${script}" defer></script>`}
+      </body>
+    </html>
+  `.markup;
 /**
  * The V the badge draws for a record, in the tone that says how the record stands.
  * `cropped` fits the box to the strokes, for a V that has to meet the edges around it.
  */
 export function verdict(tone, cropped = false) {
     const [first, second] = tones[tone];
-    const stroke = 'stroke-width="32" stroke-linejoin="miter"';
-    const check = Object.entries(verification.check)
-        .map(([name, value]) => ` ${name}="${value}"`)
-        .join('');
-    return `<svg class="verdict ${tone}" viewBox="${cropped ? verification.strokes : verification.viewBox}" fill="none" aria-hidden="true" focusable="false"><path d="${verification.path}" ${stroke} stroke="${first}"/><path d="${verification.path}" ${stroke}${check} stroke="${second}"/></svg>`;
+    const stroke = raw('stroke-width="32" stroke-linejoin="miter"');
+    const check = Object.entries(verification.check).map(([name, value]) => html ` ${raw(name)}="${value}"`);
+    return html `
+    <svg
+      class="verdict ${tone}"
+      viewBox="${cropped ? verification.strokes : verification.viewBox}"
+      fill="none"
+      aria-hidden="true"
+      focusable="false">
+      <path d="${verification.path}" ${stroke} stroke="${first}"/>
+      <path d="${verification.path}" ${stroke}${check} stroke="${second}"/>
+    </svg>
+  `;
 }
 /** A provider's name with its mark, for a card's heading. */
 export function marked(text, provider, method) {
     const mark = markOf(provider, method);
     if (!mark)
         return text;
-    const attributes = pathAttributes(mark)
-        .map(([name, value]) => ` ${name}="${value}"`)
-        .join('');
+    const attributes = pathAttributes(mark).map(([name, value]) => html ` ${raw(name)}="${value}"`);
     return {
         text,
-        mark: `<svg class="provider" viewBox="${mark.viewBox}" fill="${mark.stroke ? 'none' : 'currentColor'}" aria-hidden="true" focusable="false">${mark.paths
-            .map((d) => `<path d="${escape(d)}"${attributes}/>`)
-            .join('')}</svg>`,
+        mark: html `
+      <svg
+        class="provider"
+        viewBox="${mark.viewBox}"
+        fill="${mark.stroke ? 'none' : 'currentColor'}"
+        aria-hidden="true"
+        focusable="false">
+        ${mark.paths.map((d) => html `<path d="${d}"${attributes}/>`)}
+      </svg>
+    `,
     };
 }
 /**
@@ -57,11 +86,23 @@ export function externalCard(heading, external, ...extra) {
 }
 export function side(heading, name, url, reference, since, extra) {
     const profile = url && safeUrl(url);
-    return `<div class="side"><p class="who">${typeof heading === 'string' ? escape(heading) : `${heading.mark}${escape(heading.text)}`}</p><p class="name">${profile ? `<a href="${escape(profile)}" rel="noreferrer">${escape(name)}</a>` : escape(name)}${since ? `<span class="since">${escape(since)}</span>` : ''}</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>`;
+    return html `
+    <div class="side">
+      <p class="who">${typeof heading === 'string' ? heading : [heading.mark, heading.text]}</p>
+      <p class="name">
+        ${profile ? html `<a href="${profile}" rel="noreferrer">${name}</a>` : name}${since && html `<span class="since">${since}</span>`}
+      </p>
+      ${typeof reference === 'string'
+        ? html `<p class="reference">${reference}</p>`
+        : reference &&
+            html `
+              <p class="reference fingerprint">
+                ${reference.map((group) => html `<span>${group}</span>`)}
+              </p>
+            `}
+      ${extra}
+    </div>
+  `;
 }
 /** A day, as the date alone. */
 export const day = (time) => new Date(time).toISOString().slice(0, 10);
@@ -80,6 +121,16 @@ export function distance(time, now) {
     const count = `${Math.abs(days)} day${Math.abs(days) === 1 ? '' : 's'}`;
     return days > 0 ? `in ${count}` : `${count} ago`;
 }
+/** A time to the minute, in UTC, such as "Oct 16, 2026, 18:28 UTC". */
+export const minute = (time) => `${new Date(time).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hourCycle: 'h23',
+    timeZone: 'UTC',
+})} UTC`;
 /** Seconds are the finest thing a record measured in days can mean; milliseconds are noise. */
 export const moment = (time) => new Date(time).toISOString().replace(/\.\d{3}Z$/, 'Z');
 /**
@@ -87,10 +138,9 @@ export const moment = (time) => new Date(time).toISOString().replace(/\.\d{3}Z$/
  * find; the times of a record belong together, where they can be compared at a glance.
  */
 export function times(rows) {
-    return `<dl>${rows
+    return html `<dl>${rows
         .filter(([, time]) => time !== undefined)
-        .map(([label, time]) => `<dt>${escape(label)}</dt><dd>${escape(moment(time))}</dd>`)
-        .join('')}</dl>`;
+        .map(([label, time]) => html `<dt>${label}</dt><dd>${moment(time)}</dd>`)}</dl>`;
 }
 /** A URL as written if it is http(s), and nothing otherwise. */
 export function safeUrl(value) {

package/dist/server/service.d.ts

@@ -24,7 +24,8 @@ export interface ServiceOptions {
     baseUrl: string;
     siteName: string;
     verifierName: string;
-    profileOrigins: string[];
+    /** A function is asked on every check, for a list that changes while the server runs. */
+    profileOrigins: string[] | (() => string[]);
     validityMs?: number;
     flowTtlMs?: number;
     shareTtlMs?: number;
@@ -144,6 +145,7 @@ export declare class VerilyService {
     /** A proof is only as fresh as the schedule that reads it, so both live together. */
     private get freshness();
     validateLocal(local: LocalAccount): LocalAccount;
+    private profileOrigins;
     /** The site a subject belongs to: its own name where it has one, else this instance's. */
     siteOf(local: Pick<LocalAccount, 'siteName'>): string;
     /**

package/dist/server/service.js

@@ -190,11 +190,15 @@ export class VerilyService {
             if (!['https:', 'http:'].includes(url.protocol) ||
                 url.username ||
                 url.password ||
-                !this.options.profileOrigins.includes(url.origin))
+                !this.profileOrigins().includes(url.origin))
                 throw new Error('Unregistered profile origin');
         }
         return structuredClone(local);
     }
+    profileOrigins() {
+        const origins = this.options.profileOrigins;
+        return typeof origins === 'function' ? origins() : origins;
+    }
     /** The site a subject belongs to: its own name where it has one, else this instance's. */
     siteOf(local) {
         return local.siteName ?? this.options.siteName;

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  --warn: #a4442b;\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    --warn: #e59a82;\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\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) { display: flex; min-height: 100vh; min-height: 100dvh; }\nmain.single { width: 100%; max-width: 24rem; margin: auto; padding-bottom: 3rem; }\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/* A provider's mark before its name, at the height of the letters. */\n.who .provider { display: inline-block; width: .875rem; height: .875rem; margin-right: .375rem; vertical-align: -.125rem; }\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 system-ui, -apple-system, 'Segoe UI', sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: .5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: .9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button { margin-left: .5rem; border-color: var(--line); background: none; color: var(--ink); }\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary { border-color: var(--line); background: none; color: var(--ink); }\n\n/* A page's action and its alternative, side by side. */\n.choice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }\n.choice form { margin: 0; }\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger { border-color: var(--warn); background: var(--warn); }\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection { position: relative; margin-bottom: 1rem; }\n\n.state {\n  position: absolute;\n  top: .75rem;\n  right: .875rem;\n  display: flex;\n  align-items: center;\n  gap: .375rem;\n  height: 1.625rem;\n  padding: 0 .75rem 0 .5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: .8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict { flex-shrink: 0; width: 1rem; height: 1rem; }\n.verdict.pending { opacity: .45; }\n.how .verdict { width: .875rem; height: .875rem; margin-right: .3125rem; vertical-align: -.125rem; }\nh1 .verdict { width: 1.25rem; height: 1.25rem; margin-right: .5rem; vertical-align: -.0625rem; }\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict { width: auto; height: 100%; }\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing { padding: .3125rem .5rem; text-box: trim-both cap alphabetic; }\n  .state > span { text-box: trim-both cap alphabetic; }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .875rem; }\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence { margin: .375rem 0 0; font-size: .8125rem; }\n\n.connection dl { margin-bottom: .75rem; }\n.connection .side > :last-child { margin-bottom: 0; }\n.connection pre { margin: .75rem 0; background: var(--surface); }\n.connection .actions { margin-top: .875rem; }\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions { display: flex; flex-wrap: wrap; gap: .5rem; }\n.actions form { display: contents; }\n\n.actions button, .actions a.button {\n  margin: 0;\n  padding: .3125rem .75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: .8125rem;\n}\n\n.actions button:hover, .actions a.button:hover { border-color: var(--muted); }\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }\n.ending form { margin: 0; }\n\n.ending button.danger {\n  padding: .3125rem .75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: .8125rem;\n}\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  --warn: #a4442b;\n  --caution: #b07a12;\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    --warn: #e59a82;\n    --caution: #d9a843;\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\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) { display: flex; min-height: 100vh; min-height: 100dvh; }\nmain.single { width: 100%; max-width: 24rem; margin: auto; padding-bottom: 3rem; }\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/* A provider's mark before its name, at the height of the letters. */\n.who .provider { display: inline-block; width: .875rem; height: .875rem; margin-right: .375rem; vertical-align: -.125rem; }\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\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl { padding-top: 0; border-top: 0; }\n.side dl { margin: .625rem 0 0; padding-top: .625rem; }\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }\nfooter > :last-child { margin-bottom: 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\n/* What holds a control that cannot be undone. */\nsection.danger, section.caution { margin-top: 2rem; }\nsection.danger { border-color: var(--warn); }\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution { border-color: var(--caution); }\nsection > h2:first-child { margin-top: 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 system-ui, -apple-system, 'Segoe UI', sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: .5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: .9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button { margin-left: .5rem; border-color: var(--line); background: none; color: var(--ink); }\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary { border-color: var(--line); background: none; color: var(--ink); }\n\n/* A page's action and its alternative, side by side. */\n.choice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }\n.choice form { margin: 0; }\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices { display: grid; gap: .5rem; margin-bottom: 1.5rem; }\n.choices form { margin: 0; }\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover { border-color: var(--muted); }\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider { width: 1rem; height: 1rem; margin-right: .5rem; vertical-align: -.1875rem; }\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger { border-color: var(--warn); background: var(--warn); }\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection { position: relative; margin-bottom: 1rem; }\n\n.state {\n  position: absolute;\n  top: .75rem;\n  right: .875rem;\n  display: flex;\n  align-items: center;\n  gap: .375rem;\n  height: 1.625rem;\n  padding: 0 .75rem 0 .5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: .8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict { flex-shrink: 0; width: 1rem; height: 1rem; }\n.verdict.pending { opacity: .45; }\n.how .verdict { width: .875rem; height: .875rem; margin-right: .3125rem; vertical-align: -.125rem; }\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) { display: flex; align-items: center; gap: .75rem; }\nh1 .verdict { width: auto; height: 2.25rem; }\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict { width: auto; height: 100%; }\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing { padding: .3125rem .5rem; text-box: trim-both cap alphabetic; }\n  .state > span { text-box: trim-both cap alphabetic; }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .875rem; }\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence { margin: .375rem 0 0; font-size: .8125rem; }\n\n.connection dl { margin-bottom: .75rem; }\n.connection .side > :last-child { margin-bottom: 0; }\n.connection pre { margin: .75rem 0; background: var(--surface); }\n.connection .actions { margin-top: .875rem; }\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions { display: flex; flex-wrap: wrap; gap: .5rem; }\n.actions form { display: contents; }\n\n.actions button, .actions a.button {\n  margin: 0;\n  padding: .3125rem .75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: .8125rem;\n}\n\n.actions button:hover, .actions a.button:hover { border-color: var(--muted); }\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }\n.ending form { margin: 0; }\n\n.ending button.danger {\n  padding: .3125rem .75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: .8125rem;\n}\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

@@ -16,6 +16,7 @@ export const stylesheet = `:root {
   --raised: #f7f9f7;
   --accent: #245f43;
   --warn: #a4442b;
+  --caution: #b07a12;
   color-scheme: light dark;
   accent-color: var(--accent);
 }
@@ -29,6 +30,7 @@ export const stylesheet = `:root {
     --raised: #1d2220;
     --accent: #7fc4a2;
     --warn: #e59a82;
+    --caution: #d9a843;
   }
 }
 
@@ -238,8 +240,15 @@ 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; }
+
+/* Right under the heading, the heading's own rule is the one above it. */
+h1 + dl { padding-top: 0; border-top: 0; }
 .side dl { margin: .625rem 0 0; padding-top: .625rem; }
 
+/* The links under a record, ruled off from the record and its disclaimer. */
+footer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
+footer > :last-child { margin-bottom: 0; }
+
 section {
   margin: 0 0 1.25rem;
   padding: 1.25rem 1.375rem;
@@ -249,6 +258,14 @@ section {
 
 section > :last-child { margin-bottom: 0; }
 
+/* What holds a control that cannot be undone. */
+section.danger, section.caution { margin-top: 2rem; }
+section.danger { border-color: var(--warn); }
+
+/* What holds a control that breaks something for a while, but can be recovered from. */
+section.caution { border-color: var(--caution); }
+section > h2:first-child { margin-top: 0; }
+
 form { margin: 0 0 1.5rem; }
 
 label { display: block; margin: 0 0 .75rem; color: var(--muted); font-size: .8125rem; }
@@ -303,6 +320,23 @@ a.button.secondary { border-color: var(--line); background: none; color: var(--i
 .choice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
 .choice form { margin: 0; }
 
+/* Ways to verify: one full-width button per method, none filled over the others. */
+.choices { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
+.choices form { margin: 0; }
+
+.choices button {
+  width: 100%;
+  text-align: left;
+  border-color: var(--line);
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.choices button:hover { border-color: var(--muted); }
+
+/* A provider's mark before a button's label, at the height of the letters. */
+button .provider { width: 1rem; height: 1rem; margin-right: .5rem; vertical-align: -.1875rem; }
+
 /* A control that ends something. Filled where it is the page's one action. */
 button.danger { border-color: var(--warn); background: var(--warn); }
 
@@ -336,7 +370,9 @@ button.danger { border-color: var(--warn); background: var(--warn); }
 .verdict { flex-shrink: 0; width: 1rem; height: 1rem; }
 .verdict.pending { opacity: .45; }
 .how .verdict { width: .875rem; height: .875rem; margin-right: .3125rem; vertical-align: -.125rem; }
-h1 .verdict { width: 1.25rem; height: 1.25rem; margin-right: .5rem; vertical-align: -.0625rem; }
+/* Cropped to its strokes and taller than the heading's letters, centred beside them. */
+h1:has(.verdict) { display: flex; align-items: center; gap: .75rem; }
+h1 .verdict { width: auto; height: 2.25rem; }
 
 /*
  * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms

package/dist/site/index.d.ts

@@ -16,6 +16,12 @@ export interface SiteClientOptions {
     site: string;
     /** The key the instance holds for this site. Never sent to a browser. */
     key: string;
+    /**
+     * The key this one replaced, while the instance still accepts it. A user who began
+     * before the switch returns with a result signed with it, which `result()` then accepts
+     * too. Nothing is signed with it. Remove it once the instance stops accepting it.
+     */
+    previousKey?: string;
     /**
      * Set this and the site's user ids never leave it: every id this client is given is this
      * site's own, and the instance is sent a stand-in made with `pseudonym()`. A subject

package/dist/site/index.js

@@ -50,6 +50,10 @@ export function createSiteClient(options) {
         throw new Error('Invalid site id');
     if (!/^[A-Za-z0-9_-]{43,}$/.test(options.key))
         throw new Error('key must be the base64url key the instance holds for this site');
+    if (options.previousKey !== undefined && !/^[A-Za-z0-9_-]{43,}$/.test(options.previousKey))
+        throw new Error('previousKey must be the base64url key this site had before');
+    /** The keys a result may be signed with: the site's key, then the one it replaced. */
+    const resultKeys = [options.key, ...(options.previousKey ? [options.previousKey] : [])];
     const request = options.fetch ?? fetch;
     const idSecret = options.idSecret;
     /** The id the instance knows a user by: the site's own, or its stand-in. */
@@ -183,7 +187,10 @@ export function createSiteClient(options) {
                 return undefined;
             try {
                 const bytes = decode(payload);
-                if (!(await crypto.subtle.verify('HMAC', await hmacKey(options.key), decode(mac), bytes)))
+                let verified = false;
+                for (const key of resultKeys)
+                    verified ||= await crypto.subtle.verify('HMAC', await hmacKey(key), decode(mac), bytes);
+                if (!verified)
                     return undefined;
                 const result = JSON.parse(new TextDecoder().decode(bytes));
                 return result.site === options.site &&

package/dist/verily.js

@@ -10520,7 +10520,7 @@ ${claims(evidence)}`;
   }
 
   // src/version.ts
-  var version = "v0.8.0";
+  var version = "v0.9.0";
 
   // src/browser/evidence-dialog.ts
   function stampLink() {

package/dist/version.d.ts

@@ -7,4 +7,4 @@
  * output stays what tsc emitted and nothing has to be substituted into it. A version bump
  * changes this line with package.json.
  */
-export declare const version = "v0.8.0";
+export declare const version = "v0.9.0";

package/dist/version.js

@@ -7,4 +7,4 @@
  * output stays what tsc emitted and nothing has to be substituted into it. A version bump
  * changes this line with package.json.
  */
-export const version = 'v0.8.0';
+export const version = 'v0.9.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bkazemi/verily",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Self-hosted account-to-account verification for Node.js",
   "type": "module",
   "license": "MIT",