@bkazemi/verily 0.5.0 → 0.6.0

package/dist/verily.js

@@ -9574,10 +9574,12 @@ var Verily = (() => {
   var browser_exports = {};
   __export(browser_exports, {
     Refused: () => Refused,
+    accountsOf: () => accountsOf,
     attestationLabel: () => attestationLabel,
     dialogPath: () => dialogPath,
     dialogRoute: () => dialogRoute,
     externalId: () => externalId,
+    externalIdGroups: () => externalIdGroups,
     externalLink: () => externalLink,
     externalName: () => externalName,
     fresh: () => fresh,
@@ -9588,6 +9590,7 @@ var Verily = (() => {
     isRedirectProvider: () => isRedirectProvider,
     lastProved: () => lastProved,
     localSide: () => localSide,
+    place: () => place,
     presentConnections: () => presentConnections,
     proofTitle: () => proofTitle,
     providerMethod: () => providerMethod,
@@ -9747,6 +9750,29 @@ var Verily = (() => {
     if (evidence.status === "expired" || evidence.expiresAt <= now) return "Expired";
     return evidence.status === "unconfirmed" ? "Unconfirmed" : "Verified";
   }
+  function place(account) {
+    if (account.status === "retired") return 3;
+    return account.mark === "preferred" ? 0 : account.mark === "unused" ? 2 : 1;
+  }
+  function accountsOf(records, now) {
+    const when = (e2) => e2.connectedAt ?? e2.approvedAt;
+    const byAccount = /* @__PURE__ */ new Map();
+    for (const record2 of records) {
+      const key2 = JSON.stringify([record2.provider, record2.external.id]);
+      byAccount.set(key2, [...byAccount.get(key2) ?? [], record2]);
+    }
+    return [...byAccount.values()].map((unsorted) => {
+      const held = [...unsorted].sort((a2, b2) => when(a2) - when(b2));
+      const verified = held.filter((e2) => e2.status === "verified" && e2.expiresAt > now);
+      const lead = verified[0] ?? held.reduce((a2, b2) => b2.approvedAt > a2.approvedAt ? b2 : a2);
+      const external = [...lead.attestations.external];
+      for (const other of verified.slice(1))
+        for (const attestation of other.attestations.external)
+          if (!external.some((shown3) => shown3.method === attestation.method))
+            external.push(attestation);
+      return { lead, held, verified, external, connectedAt: when(held[0]) };
+    }).sort((a2, b2) => place(a2.lead) - place(b2.lead) || a2.connectedAt - b2.connectedAt);
+  }
   function localSide(local, fallback) {
     const siteName = local.siteName ?? fallback;
     if (local.kind === "site") return { heading: "Website", value: siteName };
@@ -9776,6 +9802,9 @@ var Verily = (() => {
   function externalId(external) {
     return external.kind === "mailbox" || external.kind === "domain" ? void 0 : external.id;
   }
+  function externalIdGroups(external) {
+    return external.kind === "key" ? external.id.match(/.{1,4}/g) ?? void 0 : void 0;
+  }
   function externalLink(external) {
     return external.kind === "mailbox" ? void 0 : external.profileUrl;
   }
@@ -10067,11 +10096,12 @@ var Verily = (() => {
   function badgeShown(element) {
     return intact(element) && shown.has(element);
   }
-  function renderKey(evidence, current, label, more, linked, rows, peek) {
+  function renderKey(evidence, current, label, more, linked, rows, peek, href) {
     return JSON.stringify([
       more,
       linked,
       peek,
+      href,
       rows.map((row) => [row.provider, row.providerName, externalName(row.external)]),
       evidence.provider,
       evidence.providerName,
@@ -10122,14 +10152,15 @@ var Verily = (() => {
     more = 0,
     linked = true,
     rows = [],
-    peek = false
+    peek = false,
+    href = evidence.evidenceUrl
   } = {}) {
     const provider = evidence.providerName;
     const current = evidence.status === "verified" && evidence.expiresAt > Date.now();
     const retired = evidence.status === "retired";
     const state = current ? "verified" : retired ? "retired" : evidence.status === "revoked" ? "revoked" : "expired";
     const label = statusLabel(evidence, Date.now());
-    const key2 = renderKey(evidence, current, label, more, linked, rows, peek);
+    const key2 = renderKey(evidence, current, label, more, linked, rows, peek, href);
     if (intact(element) && shown.get(element) === key2) return null;
     const handle = externalName(evidence.external);
     const { pill: badge, mark: mark2 } = frame(element, state, !linked);
@@ -10138,7 +10169,7 @@ var Verily = (() => {
     const others = `${named}${unnamed ? ` and ${unnamed} more` : ""}`;
     paintMark(mark2, current ? "current" : retired ? "pending" : "inactive");
     if (linked) {
-      badge.href = evidence.evidenceUrl;
+      badge.href = href;
       badge.rel = "noreferrer";
     } else badge.type = "button";
     badge.setAttribute(
@@ -10213,7 +10244,7 @@ var Verily = (() => {
       } catch {
         return;
       }
-      place(panel, pill, listed, unnamed);
+      place2(panel, pill, listed, unnamed);
       globalThis.addEventListener?.("scroll", hide, true);
     };
     panel.setAttribute("popover", "manual");
@@ -10235,7 +10266,7 @@ var Verily = (() => {
       if (event.key === "Escape") hide();
     };
   }
-  function place(panel, pill, listed, unnamed) {
+  function place2(panel, pill, listed, unnamed) {
     const gap = 6;
     const edge = 8;
     const at2 = pill.getBoundingClientRect();
@@ -10485,7 +10516,7 @@ ${claims(evidence)}`;
   }
 
   // src/version.ts
-  var version = "v0.5.0";
+  var version = "v0.6.0";
 
   // src/browser/evidence-dialog.ts
   function stampLink() {
@@ -10502,8 +10533,16 @@ ${claims(evidence)}`;
   h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }
   button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }
   button:hover { background: #f2f5f1; }
+  .icon { display: grid; place-items: center; padding: 0; }
+  .icon svg { width: 16px; height: 16px; }
+  .title { display: flex; align-items: center; gap: 6px; min-width: 0; }
+  .all { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #52645a; }
+  .all:hover { background: #f2f5f1; }
+  .all svg { width: 16px; height: 16px; }
   a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }
-  a:focus-visible, button:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }
+  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }
+  /* An element given its own display would otherwise go on showing while hidden. */
+  [hidden] { display: none !important; }
   .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
   .mark { width: 36px; height: 36px; flex-shrink: 0; }
   .provider { width: 14px; height: 14px; }
@@ -10515,7 +10554,7 @@ ${claims(evidence)}`;
   .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
   @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
-  .caution { display: inline-block; margin-left: 4px; color: #a15c00; cursor: help; vertical-align: middle; }
+  .caution { display: inline-block; margin-left: 4px; color: #a15c00; cursor: help; vertical-align: -1.5px; }
   .caution svg { display: block; width: 12px; height: 12px; }
   .bad { color: #b3261e; font-weight: 650; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
   .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }
@@ -10524,6 +10563,9 @@ ${claims(evidence)}`;
   /* The account's own name carries that weight; a link inside a line of prose does not. */
   .summary a, .method a, .additional a { font: inherit; }
   .reference { margin-top: 2px; }
+  /* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */
+  .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }
+  .fingerprint span { display: inline-block; margin-right: .5ch; }
   .method { margin-top: 8px; }
   /* In the corner the heading leaves empty, apart from everything that was checked. */
   .listing { position: absolute; top: 12px; right: 14px; padding: 1px 8px; border: 1px solid #e0e6df; border-radius: 999px; color: #6b786f; font-size: 11px; font-weight: 550; }
@@ -10533,6 +10575,15 @@ ${claims(evidence)}`;
   .account.retired > a, .account.retired > strong { color: #6b786f; }
   .account.retired .mark { opacity: .45; }
   .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }
+  summary.group { display: flex; align-items: center; gap: 4px; width: fit-content; border-radius: 4px; list-style: none; cursor: pointer; }
+  summary::-webkit-details-marker { display: none; }
+  .fold { display: flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 2px 8px 2px 4px; margin-left: -4px; border: 0; background: none; font: 550 12px/1.6 system-ui, sans-serif; }
+  .fold svg, summary svg { width: 12px; height: 12px; }
+  .fold[aria-expanded="true"] svg, details[open] > summary svg { transform: rotate(90deg); }
+  @media (prefers-reduced-motion: no-preference) { .fold svg, summary svg { transition: transform .15s; } }
+  /* The fold and what the holder may do share a line, until a question needs the whole of it. */
+  .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+  .account .bar .row { margin: 0 0 0 auto; }
   .additional { margin-top: 2px; padding-left: 12px; }
   .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }
   dl { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e5e9e3; display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 11px; }
@@ -10547,6 +10598,14 @@ ${claims(evidence)}`;
   .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
   .account .row { align-items: center; justify-content: start; flex-wrap: wrap; margin-top: 12px; }
   .account .action { padding: 5px 10px; font-size: 12px; }
+  .account .action.dots { display: grid; place-items: center; align-self: stretch; width: 30px; padding: 0; }
+  .dots svg { width: 16px; height: 16px; }
+  /* Placed under its button each time it opens, above the dialog and clipped by none of it. */
+  .menu { position: fixed; inset: auto; margin: 0; min-width: 170px; padding: 6px; border: 1px solid #dce2de; border-radius: 10px; background: #fff; color: #23312b; box-shadow: 0 12px 40px #10201930; }
+  .menu:popover-open { display: grid; }
+  .account .menu .action { border: 0; border-radius: 6px; padding: 6px 10px; font-weight: 550; }
+  .menu .danger { color: #b3261e; }
+  .menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #e5e9e3; }
   footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }
   footer a { display: flex; color: inherit; }
   .logo { display: block; height: 13px; }
@@ -10564,6 +10623,58 @@ ${claims(evidence)}`;
     anchor.target = "_blank";
     return anchor;
   }
+  function subjectUrl(e2) {
+    const url = new URL(e2.evidenceUrl);
+    const path = url.pathname.replace(/\/connections\/[^/]+$/, "/published");
+    if (path === url.pathname) return e2.evidenceUrl;
+    url.pathname = path;
+    url.search = `site=${encodeURIComponent(e2.siteName)}&reference=${encodeURIComponent(e2.local.reference)}`;
+    return url.href;
+  }
+  function awayMark() {
+    const namespace2 = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(namespace2, "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    for (const d2 of [
+      "M14 5h5v5",
+      "M19 5l-8 8",
+      "M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4"
+    ]) {
+      const path = document.createElementNS(namespace2, "path");
+      path.setAttribute("d", d2);
+      path.setAttribute("stroke", "currentColor");
+      path.setAttribute("stroke-width", "2");
+      path.setAttribute("stroke-linecap", "round");
+      path.setAttribute("stroke-linejoin", "round");
+      svg.append(path);
+    }
+    return svg;
+  }
+  function strokes(box, width, paths) {
+    const namespace2 = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(namespace2, "svg");
+    svg.setAttribute("viewBox", `0 0 ${box} ${box}`);
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    for (const d2 of paths) {
+      const path = document.createElementNS(namespace2, "path");
+      path.setAttribute("d", d2);
+      path.setAttribute("stroke", "currentColor");
+      path.setAttribute("stroke-width", String(width));
+      path.setAttribute("stroke-linecap", "round");
+      path.setAttribute("stroke-linejoin", "round");
+      svg.append(path);
+    }
+    return svg;
+  }
+  var foldMark = () => strokes(16, 1.8, ["M6 3.5 10.5 8 6 12.5"]);
+  var moreMark = () => strokes(16, 2.4, ["M3 8h.01", "M8 8h.01", "M13 8h.01"]);
+  var closeMark = () => strokes(16, 1.8, ["M4 4l8 8", "M12 4l-8 8"]);
+  var backMark = () => strokes(16, 1.8, ["M10 3.5 5.5 8 10 12.5"]);
   function linkMark() {
     const namespace2 = "http://www.w3.org/2000/svg";
     const svg = document.createElementNS(namespace2, "svg");
@@ -10609,12 +10720,63 @@ ${claims(evidence)}`;
     title.append(...heading);
     if (value instanceof HTMLAnchorElement) outward(value, url);
     card.append(title, value);
-    if (reference) card.append(node("div", reference, "muted reference"));
+    if (typeof reference === "string") card.append(node("div", reference, "muted reference"));
+    else if (reference) {
+      const groups = node("div", "", "muted reference fingerprint");
+      groups.append(...reference.map((group) => node("span", group)));
+      card.append(groups);
+    }
     card.append(...extra);
     return card;
   }
   var retiringNote = "Retiring keeps this record as history. It will no longer read as verified, and who can read it cannot be changed afterwards.";
   var removable = (evidence) => evidence.links ?? (evidence.status === "revoked" ? [] : [evidence.id]);
+  function actionsMenu(more, choices) {
+    const menu = node("div", "", "menu");
+    if (typeof menu.showPopover !== "function") return void 0;
+    const label = "More actions";
+    more.className = "action dots";
+    more.title = label;
+    more.setAttribute("aria-label", label);
+    more.setAttribute("aria-haspopup", "menu");
+    more.append(moreMark());
+    more.popoverTargetElement = menu;
+    menu.setAttribute("popover", "auto");
+    menu.setAttribute("role", "menu");
+    for (const choice of choices) choice.setAttribute("role", "menuitem");
+    menu.append(...choices.slice(0, -1), node("hr"), choices.at(-1));
+    const shut = () => {
+      try {
+        if (menu.matches(":popover-open")) menu.hidePopover();
+      } catch {
+      }
+    };
+    const gap = 4;
+    const edge = 8;
+    menu.addEventListener("beforetoggle", (event) => {
+      if (event.newState !== "open") return;
+      const at2 = more.getBoundingClientRect();
+      menu.style.top = `${at2.bottom + gap}px`;
+      menu.style.right = `${document.documentElement.clientWidth - at2.right}px`;
+    });
+    menu.addEventListener("toggle", (event) => {
+      if (event.newState !== "open") return;
+      const { height, bottom } = menu.getBoundingClientRect();
+      if (bottom > innerHeight - edge)
+        menu.style.top = `${Math.max(edge, more.getBoundingClientRect().top - gap - height)}px`;
+      menu.closest("dialog")?.addEventListener("scroll", shut, { once: true });
+      choices[0].focus();
+    });
+    menu.addEventListener("click", shut);
+    menu.addEventListener("keydown", (event) => {
+      const step = { ArrowDown: 1, ArrowUp: -1 }[event.key];
+      if (!step) return;
+      event.preventDefault();
+      const at2 = choices.indexOf(event.target);
+      choices[(at2 + step + choices.length) % choices.length].focus();
+    });
+    return menu;
+  }
   function manageRow(evidence, manage) {
     const row = node("div", "", "row");
     const act = (label, danger = false) => {
@@ -10657,7 +10819,11 @@ ${claims(evidence)}`;
           retire
         );
       }
-      row.replaceChildren(renew, ...listing, remove, ...note ? [node("span", note, "muted")] : []);
+      const said = note ? [node("span", note, "muted")] : [];
+      const more = act("");
+      const menu = listing.length ? actionsMenu(more, [...listing, remove]) : void 0;
+      if (menu) row.replaceChildren(renew, more, menu, ...said);
+      else row.replaceChildren(renew, ...listing, remove, ...said);
     };
     const retiring = () => {
       const cancel = act("Cancel");
@@ -10700,7 +10866,7 @@ ${claims(evidence)}`;
       )
     );
   }
-  function signedMark(evidence, later) {
+  function signedMark(evidence, later, warned) {
     const mark2 = node("span");
     const link = outward(node("a", "signed"), `${evidence.evidenceUrl}#signed`);
     const see = "See the signature (opens in a new tab)";
@@ -10711,6 +10877,7 @@ ${claims(evidence)}`;
         warning.setAttribute("role", "alert");
         warning.title = `This record does not match the signature ${evidence.verifierName} put on it, so it may have been altered. Do not rely on it.`;
         mark2.replaceChildren(document.createTextNode(" \xB7 "), warning);
+        warned();
         return;
       }
       if (first?.state === "valid" && results.every((result) => result.state === "valid")) {
@@ -10752,7 +10919,25 @@ ${claims(evidence)}`;
     }
     return svg;
   }
+  function foldToggle(folded, fold) {
+    const toggle = node("button", "", "fold");
+    let shown3 = fold.open;
+    const set = (open) => {
+      shown3 = open;
+      for (const part of folded) part.hidden = !open;
+      toggle.setAttribute("aria-expanded", String(open));
+    };
+    toggle.type = "button";
+    toggle.append(foldMark(), document.createTextNode("Details"));
+    set(fold.open);
+    toggle.onclick = () => {
+      set(!shown3);
+      fold.toggle(shown3);
+    };
+    return toggle;
+  }
   function externalCard(evidence, manage, later = () => {
+  }, fold, warned = () => {
   }) {
     const current = evidence.status === "verified" && evidence.expiresAt > Date.now();
     const status2 = statusLabel(evidence, Date.now());
@@ -10765,7 +10950,7 @@ ${claims(evidence)}`;
       verifier.title = `View this record at ${evidence.verifierName} (opens in a new tab)`;
       attribution.append(verifier);
     } else attribution.append(document.createTextNode(evidence.verifierName));
-    if (evidence.signedUrl) attribution.append(signedMark(evidence, later));
+    if (evidence.signedUrl) attribution.append(signedMark(evidence, later, warned));
     copy.append(node("div", status2, "state"), attribution);
     const retired = evidence.status === "retired";
     summary.append(verificationMark(current ? "current" : retired ? "pending" : "inactive"), copy);
@@ -10788,6 +10973,13 @@ ${claims(evidence)}`;
       dates.append(node("dt", label), node("dd", moment(time)));
     }
     const names2 = { site: evidence.siteName, provider };
+    const row = manage && removable(evidence).length ? [manageRow(evidence, manage)] : [];
+    const bar = node("div", "", "bar");
+    const methods = [
+      ...attestationNote(main, names2),
+      ...evidence.attestations.external.slice(1).flatMap((a2) => attestationNote(a2, names2, true))
+    ];
+    if (fold) bar.append(foldToggle([...methods, dates], fold), ...row);
     const logo2 = providerMark(evidence.provider, evidence.attestations.external[0].method);
     const card = accountCard(
       // The mark and the name, or just the name. A mark that falls back to writing the name
@@ -10795,16 +10987,14 @@ ${claims(evidence)}`;
       logo2 ? [logo2, document.createTextNode(provider)] : [document.createTextNode(provider)],
       externalName(evidence.external),
       // A mailbox's address or a domain is its name already, so there is no second identifier.
-      externalId(evidence.external),
+      externalIdGroups(evidence.external) ?? externalId(evidence.external),
       externalLink(evidence.external),
       // Status first, then how it was shown, then when. The proof explains the state
       // above it, so it cannot sit before that state has been given.
       summary,
-      ...attestationNote(main, names2),
-      ...evidence.attestations.external.slice(1).flatMap((a2) => attestationNote(a2, names2, true)),
+      ...fold ? [] : methods,
       ...evidence.status === "revoked" || retired ? [] : evidence.mark === "preferred" ? [node("div", "Preferred", "listing preferred")] : evidence.mark === "unused" ? [node("div", "No longer used", "listing")] : [],
-      dates,
-      ...manage && removable(evidence).length ? [manageRow(evidence, manage)] : []
+      ...fold ? [bar, ...methods, dates] : [dates, ...row]
     );
     const surface = retired ? "account retired" : "account";
     card.className = surface;
@@ -10832,7 +11022,7 @@ ${claims(evidence)}`;
     row.append(add);
     return row;
   }
-  function render(content, records, manage, later) {
+  function render(content, records, manage, later, folds = { open: false, cards: /* @__PURE__ */ new Set() }) {
     const [first] = records;
     const local = localSide(first.local, first.siteName);
     const localCard = accountCard(
@@ -10849,15 +11039,40 @@ ${claims(evidence)}`;
       })
     );
     const retired = records.filter((record2) => record2.status === "retired");
+    const listed = records.filter((record2) => record2.status !== "retired");
+    const cards = (among, warned) => among.map((record2) => {
+      const key2 = `${record2.provider}
+${record2.external.id}`;
+      return externalCard(
+        record2,
+        manage,
+        later,
+        among.length > 1 ? {
+          open: folds.cards.has(key2) !== folds.open,
+          toggle: (open) => void (open === folds.open ? folds.cards.delete(key2) : folds.cards.add(key2))
+        } : void 0,
+        warned
+      );
+    });
+    const history = node("details", "", "history");
+    const count = node("summary", "", "group");
+    count.append(foldMark(), document.createTextNode(`Retired accounts (${retired.length})`));
+    history.append(
+      count,
+      ...cards(retired, () => {
+        history.open = true;
+      })
+    );
+    history.open = folds.retired ?? !listed.length;
+    count.addEventListener("click", () => {
+      folds.retired = !history.open;
+    });
     content.replaceChildren(
       localCard,
       linkMark(),
-      ...records.filter((record2) => record2.status !== "retired").map((record2) => externalCard(record2, manage, later)),
+      ...cards(listed),
       ...manage ? [addRow(manage)] : [],
-      ...retired.length ? [
-        node("h3", "Retired accounts", "group"),
-        ...retired.map((record2) => externalCard(record2, manage, later))
-      ] : [],
+      ...retired.length ? [history] : [],
       // Nothing below the cards may name a provider. Approval, method and dates belong to
       // the card they came from, and a second provider on this subject gets its own card.
       node(
@@ -10867,7 +11082,7 @@ ${claims(evidence)}`;
       )
     );
   }
-  function openEvidenceDialog(opener, load2, opened, arrange2 = (records) => records, manage) {
+  function openEvidenceDialog(opener, load2, opened, arrange2 = (records) => records, manage, detailsOpen = false) {
     const existing = openDialogs.get(opener);
     if (existing?.open) {
       existing.focus();
@@ -10880,7 +11095,9 @@ ${claims(evidence)}`;
     root.adoptedStyleSheets = [sheet2];
     const dialog = node("dialog");
     const heading = node("h2", "Verification details");
-    const close = node("button", "\xD7");
+    const close = node("button", "", "icon");
+    const all = node("a", "", "all");
+    const title = node("div", "", "title");
     const header = node("header");
     const stamp = node("footer");
     const content = node("div", "Checking verification\u2026");
@@ -10890,13 +11107,18 @@ ${claims(evidence)}`;
     close.setAttribute("aria-label", "Close verification details");
     content.setAttribute("aria-live", "polite");
     stamp.append(stampLink(), node("span", version));
-    header.append(heading, close);
+    all.append(awayMark());
+    close.append(closeMark());
+    close.autofocus = true;
+    title.append(heading);
+    header.append(title, close);
     dialog.append(header, content, stamp);
     const removed = /* @__PURE__ */ new Map();
     const listed = [];
     const listing = (record2) => JSON.stringify([record2.status, record2.mark, record2.retiredAt, record2.approvedAt]);
     const listings = (given) => new Map([given].flat().map((record2) => [record2.id, listing(record2)]));
     let held;
+    const folds = { open: detailsOpen, cards: /* @__PURE__ */ new Set() };
     const relisted = (evidence) => {
       let record2 = evidence;
       for (const { ids, as: as2, at: at2 } of listed) {
@@ -10965,11 +11187,19 @@ ${claims(evidence)}`;
           (e2) => removed.has(e2.id) && e2.status !== "revoked" ? { ...e2, status: "revoked", revokedAt: removed.get(e2.id) } : relisted(standing(e2))
         )
       );
+      const listable = records.filter((e2) => e2.visibility === "public" && e2.status !== "revoked");
+      title.replaceChildren(heading, ...listable.length > 1 ? [all] : []);
+      if (listable.length > 1) {
+        const label = `View all on ${listable[0].verifierName} (opens in a new tab)`;
+        outward(all, subjectUrl(listable[0]));
+        all.title = label;
+        all.setAttribute("aria-label", label);
+      }
       const key2 = JSON.stringify(records.map((e2) => [e2, statusLabel(e2, Date.now())]));
       if (key2 === drawn) return;
       drawn = key2;
       retries.clear();
-      render(content, records, actions, (retry) => retries.add(retry));
+      render(content, records, actions, (retry) => retries.add(retry), folds);
     };
     const watch = (given) => {
       clearTimeout(expiryTimer);
@@ -11048,13 +11278,15 @@ ${claims(evidence)}`;
   /* The block scrolls and its frame does not, so the copy button stays in its corner. */
   .code { position: relative; margin: 10px 0; }
   pre { margin: 0; padding: 10px 64px 10px 12px; border: 1px solid #e0e6df; border-radius: 8px; background: #f6f8f5; font: 12px/1.5 ui-monospace, monospace; white-space: pre; overflow-x: auto; }
-  .code .action { position: absolute; top: 6px; right: 6px; padding: 3px 8px; font-size: 11px; }
+  .code .action { position: absolute; top: 9px; right: 9px; padding: 3px 8px; font-size: 11px; }
   label { display: grid; gap: 4px; margin-top: 12px; font-weight: 600; }
   input[type=url], input[type=email], input[type=tel], input[type=text], textarea { width: 100%; padding: 8px 10px; border: 1px solid #cfd8d2; border-radius: 8px; font: 13px/1.4 system-ui, sans-serif; color: inherit; background: #fff; }
   textarea { font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; }
   fieldset { margin: 16px 0 0; padding: 10px 14px; border: 1px solid #e0e6df; border-radius: 10px; }
   legend { padding: 0 4px; color: #6b786f; font-size: 11px; font-weight: 550; }
   fieldset label { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-weight: 500; }
+  /* A radio has no baseline to speak of, so it is set in the middle of the label's first line. */
+  fieldset input { flex-shrink: 0; align-self: flex-start; width: 13px; height: 13px; font: inherit; margin-top: 4px; margin-top: calc((1lh - 13px) / 2); margin-bottom: 0; }
   .error { color: #9b2c33; }
 `;
   function codeBlock(code) {
@@ -11116,7 +11348,7 @@ ${claims(evidence)}`;
     root.adoptedStyleSheets = [sheet2];
     const dialog = node("dialog");
     const heading = node("h2", "Verify an account");
-    const close = node("button", "\xD7");
+    const close = node("button", "", "icon");
     const header = node("header");
     const stamp = node("footer");
     const content = node("div", "Loading\u2026", "steps");
@@ -11124,6 +11356,7 @@ ${claims(evidence)}`;
     dialog.setAttribute("aria-labelledby", heading.id);
     close.type = "button";
     close.setAttribute("aria-label", "Close");
+    close.append(closeMark());
     content.setAttribute("aria-live", "polite");
     stamp.append(stampLink(), node("span", version));
     header.append(heading, close);
@@ -11133,9 +11366,10 @@ ${claims(evidence)}`;
     openDialogs2.set(opener, dialog);
     let returning = false;
     if (back) {
-      const before = node("button", "\u2039");
+      const before = node("button", "", "icon");
       before.type = "button";
       before.setAttribute("aria-label", "Back");
+      before.append(backMark());
       header.className = "backed";
       header.replaceChildren(before, heading, close);
       before.onclick = () => {
@@ -11410,7 +11644,7 @@ ${claims(evidence)}`;
       const external = accountCard(
         logo2 ? [logo2, document.createTextNode(flow.provider.name)] : [document.createTextNode(flow.provider.name)],
         externalName(flow.external),
-        externalId(flow.external),
+        externalIdGroups(flow.external) ?? externalId(flow.external),
         externalLink(flow.external)
       );
       const parts = [subjectCard(flow.local), linkMark(), external];
@@ -11561,15 +11795,19 @@ ${claims(evidence)}`;
         },
         latestGroup.get(element),
         accounts,
-        managers.get(element)
+        managers.get(element),
+        openHosts.has(element)
       );
     }
   }
   var stackedHosts = /* @__PURE__ */ new WeakSet();
   var quietHosts = /* @__PURE__ */ new WeakSet();
+  var openHosts = /* @__PURE__ */ new WeakSet();
   var stackedAccounts = 4;
   var peekedAccounts = 8;
-  function arrange(element, { stacked, peek }) {
+  function arrange(element, { stacked, peek, detailsOpen }) {
+    if (detailsOpen) openHosts.add(element);
+    else openHosts.delete(element);
     if (stacked) stackedHosts.add(element);
     else stackedHosts.delete(element);
     if (peek === false) quietHosts.add(element);
@@ -11577,34 +11815,14 @@ ${claims(evidence)}`;
   }
   var live = (evidence) => evidence.status === "verified" && evidence.expiresAt > Date.now();
   function accounts(records) {
-    const when = (e2) => e2.connectedAt ?? e2.approvedAt;
-    const byAccount = /* @__PURE__ */ new Map();
-    for (const record2 of records) {
-      const key2 = JSON.stringify([record2.provider, record2.external.id]);
-      byAccount.set(key2, [...byAccount.get(key2) ?? [], record2]);
-    }
-    return [...byAccount.values()].map((held) => {
-      const sorted = [...held].sort((a2, b2) => when(a2) - when(b2));
-      const verified = sorted.filter(live);
-      const base = verified[0] ?? sorted.reduce((a2, b2) => b2.approvedAt > a2.approvedAt ? b2 : a2);
-      const external = [...base.attestations.external];
-      for (const other of verified.slice(1))
-        for (const attestation of other.attestations.external)
-          if (!external.some((shown3) => shown3.method === attestation.method))
-            external.push(attestation);
-      return {
-        ...base,
-        connectedAt: when(sorted[0]),
-        attestations: { ...base.attestations, external },
-        links: sorted.filter((e2) => e2.status !== "revoked").map((e2) => e2.id),
-        // Every record the card speaks for, so its signature mark answers for all of them.
-        sources: verified.length ? verified : [base]
-      };
-    }).sort((a2, b2) => place2(a2) - place2(b2) || a2.connectedAt - b2.connectedAt);
-  }
-  function place2(account) {
-    if (account.status === "retired") return 3;
-    return account.mark === "preferred" ? 0 : account.mark === "unused" ? 2 : 1;
+    return accountsOf(records, Date.now()).map(({ lead, held, verified, external, connectedAt }) => ({
+      ...lead,
+      connectedAt,
+      attestations: { ...lead.attestations, external },
+      links: held.filter((e2) => e2.status !== "revoked").map((e2) => e2.id),
+      // Every record the card speaks for, so its signature mark answers for all of them.
+      sources: verified.length ? verified : [lead]
+    }));
   }
   function presentGroup(element, records, load2) {
     const ordered = accounts(records.map(standing));
@@ -11617,6 +11835,8 @@ ${claims(evidence)}`;
     const badge = renderBadge(element, lead, {
       more: Math.max(verified.length - 1, 0),
       linked: lead.visibility === "public",
+      // A modified click follows the link, and must reach what a plain one shows: every account.
+      ...ordered.length > 1 ? { href: subjectUrl(lead) } : {},
       rows: stacked ? verified.slice(1, stackedAccounts) : peek ? verified.slice(1, peekedAccounts) : [],
       peek
     });
@@ -12017,7 +12237,8 @@ ${claims(evidence)}`;
           "handoff-url",
           "connect",
           "stacked",
-          "peek"
+          "peek",
+          "details-open"
         ];
         handed;
         /**
@@ -12071,7 +12292,8 @@ ${claims(evidence)}`;
           const handoffUrl = this.getAttribute("handoff-url");
           const arrangement = {
             stacked: this.getAttribute("stacked") !== null,
-            peek: this.getAttribute("peek") !== "off"
+            peek: this.getAttribute("peek") !== "off",
+            detailsOpen: this.getAttribute("details-open") !== null
           };
           if (backendUrl && (handoffUrl !== null || this.getAttribute("connect") !== null)) {
             const client = init({ backendUrl, handoffUrl: handoffUrl ?? void 0 });