@heycys/gallery 0.1.1 → 0.2.0

package/browser/shared/page-address.mjs

@@ -1,4 +1,4 @@
-import { pageLink, pageOfLink } from "./page-links.mjs";
+import { earlierLink, pageLink, pageOfLink } from "./page-links.mjs";
 
 // A document's address, as a link, a paste or the address bar may write it (docs/workbench.md, "A
 // document's addresses"), read in one place: { slug, block }, block null for the page itself. Pure: the
@@ -19,7 +19,8 @@ import { pageLink, pageOfLink } from "./page-links.mjs";
 // which has the list. pageAddress reads no port, as a link outlives a server; but this computer runs
 // other programs too, and other workspaces, whose folder of one name has one page id, so an address
 // on another port (elsewhere) is a document's only if the list holds it, by its folder name or its
-// link of now (addressOn).
+// link of now (addressOn), or for a folder named doc- and eight characters, the link it had before
+// those eight were its id (shared/page-links.mjs earlierId).
 
 const SLUG = "[a-z0-9]+(?:-[a-z0-9]+)*"; // shared/workspace.mjs slugPattern, which needs Node
 const FILE = "(?:doc|report)\\.html";
@@ -96,7 +97,9 @@ export function workbenchHash(text) {
 export function addressOn(text, links, origin = "http://127.0.0.1") {
   const place = pageAddress(text, links);
   const name = place && elsewhere(text, origin) ? workbenchHash(text)?.split("/")[0] : undefined;
-  return name === undefined || links.has(name) || links.get(place.slug) === name ? place : null;
+  if (name === undefined || links.has(name)) return place;
+  const link = links.get(place.slug);
+  return link === name || earlierLink(place.slug, link) === name ? place : null;
 }
 
 /** Whether `text` is an address of a document of this workspace, as far as can be told with no list. */

package/browser/shared/page-cards.mjs

@@ -0,0 +1,308 @@
+import { createHash } from "node:crypto";
+import { parse } from "parse5";
+import { cellsOf } from "./card-size.mjs";
+import { escapeAttribute } from "./escape.mjs";
+import { attr, elementsOf, hasClass, walk } from "./html-tree.mjs";
+import { ATTRIBUTE } from "./components/installed.mjs";
+
+// The cards of a custom page's page.html as the server reads and writes them (the spec
+// notes/plans/custom-blocks-spec-2026-11-07.md §5, §8; docs/render.md "A custom page"): its boards
+// (div.gallery-board, data-board-id), each card a direct child of one (.gallery-card, data-card-id,
+// data-x, data-y, data-w, data-h) around one instance of a custom block. What the page service
+// (src/editor/page-service.mjs), gallery page add and the page as it is served (src/server/routes.mjs)
+// read of a page, and the text they write: every change is a splice of the file's own text (an
+// attribute's value, a card put in or taken out), every other byte staying, as a document's commits
+// write. A card's id is what everything goes by: one that has none (or one that is no id, or one a
+// card before it took) is given the lowest c<n> no card holds, in the file's order, the same ids
+// however often it is read, so that the page shows a card by the id its first write gives it. A card's
+// base (what a write to it is held to, the spec §8) is a hash of its markup, its frame's attributes and
+// its instance, once those ids are in. Node's (parse5), the server's and the command line's.
+
+/** What a card's id and a board's may be (the spec §5). */
+export const CARD_ID_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+/**
+ * The attributes the author of a custom page writes on its boards and cards (the spec §5): the page's
+ * own, which no document's component describes (tests/unit/components.mjs takes them as known names).
+ */
+export const PAGE_ATTRIBUTES = Object.freeze(["data-board-id", "data-card-id", "data-x", "data-y", "data-w", "data-h"]);
+
+const BOARD_CLASS = "gallery-board";
+const CARD_CLASS = "gallery-card";
+const isInstanceNode = (node) => (node.tagName === "div" || node.tagName === "section") && attr(node, ATTRIBUTE) !== undefined;
+
+/** A hash of `text` as the page service names a version of a card by: 16 hex digits, line endings as \n. */
+export const hashOf = (text) => createHash("sha256").update(text.replace(/\r\n?/g, "\n")).digest("hex").slice(0, 16);
+
+const parsed = (text) => parse(text.replace(/^/, " "), { sourceCodeLocationInfo: true });
+
+/**
+ * What page.html `text` holds: { boards: [{ id, node, cards }], cards } where each card is { id (as
+ * written: null where it has none), node, board (its board's id, or null), x, y, w, h (the cells the
+ * board draws it at: card-size.mjs cellsOf), instance (the instance it holds, or null), block (its
+ * block's id, or null), start, end (its place in the text), closed (written with its own end tag) }.
+ * A card is a board's child; a board is any element of the class, its cards in the file's order.
+ */
+export function readPage(text) {
+  const boards = [];
+  walk(parsed(text), (node) => {
+    if (!hasClass(node, BOARD_CLASS)) return;
+    const cards = elementsOf(node).filter((child) => hasClass(child, CARD_CLASS) && child.sourceCodeLocation).map((child) => {
+      let instance = elementsOf(child).find(isInstanceNode) ?? null;
+      if (!instance) walk(child, (inner) => { instance ??= isInstanceNode(inner) ? inner : null; });
+      const place = child.sourceCodeLocation;
+      const dataset = { x: attr(child, "data-x"), y: attr(child, "data-y"), w: attr(child, "data-w"), h: attr(child, "data-h") };
+      return {
+        id: attr(child, "data-card-id") ?? null, node: child, board: attr(node, "data-board-id") ?? null, ...cellsOf({ dataset }),
+        instance, block: instance ? attr(instance, ATTRIBUTE) : null, start: place.startOffset, end: place.endOffset, closed: Boolean(place.endTag),
+      };
+    });
+    boards.push({ id: attr(node, "data-board-id") ?? null, node, cards });
+  }, { inTemplates: false });
+  return { boards, cards: boards.flatMap((board) => board.cards) };
+}
+
+/** The ids the cards of a page go by, in the file's order: each its own where it is an id no card before it took, else the lowest c<n> none holds. */
+export function cardIds(cards) {
+  const held = new Set(cards.map(({ id }) => id).filter((id) => typeof id === "string" && CARD_ID_PATTERN.test(id)));
+  const taken = new Set();
+  let next = 1;
+  return cards.map(({ id }) => {
+    if (typeof id === "string" && CARD_ID_PATTERN.test(id) && !taken.has(id)) {
+      taken.add(id);
+      return id;
+    }
+    while (held.has(`c${next}`) || taken.has(`c${next}`)) next++;
+    const made = `c${next}`;
+    taken.add(made);
+    return made;
+  });
+}
+
+/** The lowest c<n> none of `ids` is. */
+export function freeCardId(ids) {
+  const held = new Set(ids);
+  let n = 1;
+  while (held.has(`c${n}`)) n++;
+  return `c${n}`;
+}
+
+// The splices that set an element's attributes (`values`: name -> value, null to take one off),
+// [{ start, end, text }]: an attribute there gets its value written anew, in double quotes; one not
+// there goes in after its class (or its tag's name), in the order given.
+function attributeSplices(text, node, values) {
+  const { startTag } = node.sourceCodeLocation;
+  const places = startTag.attrs ?? {};
+  const splices = [];
+  const fresh = [];
+  for (const [name, value] of Object.entries(values)) {
+    const place = places[name];
+    if (place) {
+      splices.push({ start: place.startOffset, end: place.endOffset, text: value === null ? "" : `${name}="${escapeAttribute(String(value))}"` });
+      if (value === null && text[place.startOffset - 1] === " ") splices.at(-1).start -= 1;
+    } else if (value !== null) fresh.push(` ${name}="${escapeAttribute(String(value))}"`);
+  }
+  if (fresh.length) {
+    const at = places.class?.endOffset ?? startTag.startOffset + 1 + node.tagName.length;
+    splices.push({ start: at, end: at, text: fresh.join("") });
+  }
+  return splices;
+}
+
+/** `text` with `splices` ([{ start, end, text }], none overlapping) made, from the last on. */
+export function spliced(text, splices) {
+  return [...splices].sort((a, b) => b.start - a.start || b.end - a.end).reduce((out, { start, end, text: put }) => out.slice(0, start) + put + out.slice(end), text);
+}
+
+/**
+ * Page.html `text` with every card given an id (cardIds): { text, filled: the ids given, by the
+ * cards' order }. The same text when each has its own.
+ */
+export function withCardIds(text) {
+  const { cards } = readPage(text);
+  const ids = cardIds(cards);
+  const splices = cards.flatMap((card, index) => (card.id === ids[index] ? [] : attributeSplices(text, card.node, { "data-card-id": ids[index] })));
+  return { text: splices.length ? spliced(text, splices) : text, filled: cards.flatMap((card, index) => (card.id === ids[index] ? [] : [ids[index]])) };
+}
+
+/** A card's base: the hash of its markup as `text` writes it (its frame's attributes and its instance). */
+export const baseOf = (text, card) => hashOf(text.slice(card.start, card.end));
+
+/**
+ * The cards of page.html `text` as the page service answers with them, once every card has its id
+ * (withCardIds; `text` already so when it was written): [{ id, board, x, y, w, h, base, block }].
+ */
+export function cardsOf(text) {
+  const own = withCardIds(text).text;
+  return readPage(own).cards.map((card) => ({ id: card.id, board: card.board, x: card.x, y: card.y, w: card.w, h: card.h, base: baseOf(own, card), block: card.block }));
+}
+
+// A card's place as page.html writes it: its board, then its data-x, -y, -w and -h as written.
+const placeWritten = (card) => [card.board, ...["x", "y", "w", "h"].map((axis) => attr(card.node, `data-${axis}`))].join(",");
+
+/**
+ * A card's markup in `text` without its place (the data-x, -y, -w and -h of its start tag): what tells
+ * a change of its own (its frame's other attributes, its instance) from a move.
+ */
+export function unplacedOf(text, card) {
+  const end = card.node.sourceCodeLocation.startTag.endOffset;
+  return text.slice(card.start, end).replace(/\s+data-[xywh]="[^"]*"/g, "") + text.slice(end, card.end);
+}
+
+/**
+ * The cards page.html `after` changed of `before`, each by the id the page service gives it
+ * (withCardIds): { <id>: kinds }, a kind "added", "removed", "cells" (another board, or its data-x, -y,
+ * -w or -h as written: placeWritten) or "content" (its markup but its place: unplacedOf); a card that
+ * did not change is none of it. What the page service tells of each write (its writes.jsonl).
+ */
+export function cardsChanged(before, after) {
+  const [was, now] = [withCardIds(before).text, withCardIds(after).text];
+  const [a, b] = [readPage(was).cards, readPage(now).cards];
+  const changed = {};
+  for (const card of a) if (!b.some((one) => one.id === card.id)) changed[card.id] = ["removed"];
+  for (const card of b) {
+    const old = a.find((one) => one.id === card.id);
+    if (!old) {
+      changed[card.id] = ["added"];
+      continue;
+    }
+    const kinds = [...(placeWritten(old) !== placeWritten(card) ? ["cells"] : []), ...(unplacedOf(was, old) !== unplacedOf(now, card) ? ["content"] : [])];
+    if (kinds.length) changed[card.id] = kinds;
+  }
+  return changed;
+}
+
+/** `text` (every card with its id) with each card `cells` names (id -> { x, y, w, h }) at those cells: its data-x, -y, -w and -h written. */
+export function withCells(text, cells) {
+  const { cards } = readPage(text);
+  const splices = cards.flatMap((card) => {
+    const to = cells.get(card.id);
+    if (!to) return [];
+    const values = {};
+    for (const axis of ["x", "y", "w", "h"]) if (to[axis] !== undefined && attr(card.node, `data-${axis}`) !== String(to[axis])) values[`data-${axis}`] = to[axis];
+    return Object.keys(values).length ? attributeSplices(text, card.node, values) : [];
+  });
+  return splices.length ? spliced(text, splices) : text;
+}
+
+// Where a card's markup stands with what goes with it: its whole line, its line break with it (the
+// file's last line to the end of the text), when only blanks stand before and after it there; else the
+// markup alone, whatever shares its line with it staying where it is, its indent too (a page written on
+// one line: the cards after it and the closing tags).
+function lineOf(text, start, end) {
+  const before = text.lastIndexOf("\n", start - 1) + 1;
+  const after = text.indexOf("\n", end);
+  const rest = after === -1 ? text.slice(end) : text.slice(end, after);
+  if (!/^[ \t]*$/.test(text.slice(before, start)) || !/^[ \t\r]*$/.test(rest)) return { from: start, to: end };
+  return { from: before, to: after === -1 ? text.length : after + 1 };
+}
+
+/** `text` with card `id` taken out, and the card as it was written: { text, html }, or null when no card has that id. */
+export function withoutCard(text, id) {
+  const card = readPage(text).cards.find((one) => one.id === id);
+  if (!card) return null;
+  const { from, to } = lineOf(text, card.start, card.end);
+  return { text: text.slice(0, from) + text.slice(to), html: text.slice(card.start, card.end) };
+}
+
+// The blanks a line of `text` starts with, at `offset`.
+const indentAt = (text, offset) => /^[ \t]*/.exec(text.slice(text.lastIndexOf("\n", offset - 1) + 1))[0];
+
+/** `markup` with each line after its first taken `by` further in. */
+const indented = (markup, by) => markup.replace(/\r?\n/g, (eol) => `${eol}${by}`);
+
+/**
+ * The markup of a new card: `<section class="gallery-card" data-card-id data-x data-y data-w data-h>`
+ * around `instance` (one instance's markup, as a block's template is), at `indent` (its first line's
+ * blanks, which the text it goes in gives), the instance two spaces further in.
+ */
+export function cardMarkup({ id, x, y, w, h }, instance, indent = "", eol = "\n") {
+  const open = `<section class="${CARD_CLASS}" data-card-id="${escapeAttribute(id)}" data-x="${x}" data-y="${y}" data-w="${w}" data-h="${h}">`;
+  return `${open}${eol}${indent}  ${indented(instance.trim().replace(/\r?\n/g, eol), `${indent}  `)}${eol}${indent}</section>`;
+}
+
+/**
+ * `text` with the card `markup` (cardMarkup's, or a card as withoutCard gave it) put last in board
+ * `board` (its data-board-id), on a line of its own, as far in as its cards are (two spaces further in
+ * than the board where it has none): { text, start } (where the card starts), or null when no board
+ * has that id. `markup` that starts at an indent of its own is put back at the board's.
+ */
+export function withCard(text, board, markup) {
+  const found = readPage(text).boards.find((one) => one.id === board);
+  if (!found) return null;
+  const { node } = found;
+  const place = node.sourceCodeLocation;
+  const eol = text.includes("\r\n") ? "\r\n" : "\n";
+  const last = found.cards.at(-1);
+  const indent = last ? indentAt(text, last.start) : `${indentAt(text, place.startOffset)}  `;
+  // The indent the card's markup stood at (its end tag's line, what withoutCard leaves of it), each of its
+  // lines moved from there to this board's: none where the two are one, so that a card put back where it
+  // was is its old text again, byte for byte.
+  const from = markup.match(/\n([ \t]*)<\/[a-z]+>\s*$/)?.[1] ?? "";
+  const body = markup.trim().replace(/\r?\n/g, "\n").split("\n").map((line, index) => (index === 0 || from === indent ? line : line.startsWith(from) ? `${indent}${line.slice(from.length)}` : line)).join(eol);
+  if (place.endTag) {
+    const close = place.endTag.startOffset;
+    const lineStart = text.lastIndexOf("\n", close - 1) + 1;
+    const onOwnLine = /^[ \t]*$/.test(text.slice(lineStart, close));
+    const at = onOwnLine ? lineStart : close;
+    const put = `${onOwnLine ? "" : eol}${indent}${body}${eol}`;
+    return { text: text.slice(0, at) + put + text.slice(at), start: at + put.indexOf(body) };
+  }
+  const at = place.endOffset;
+  const put = `${eol}${indent}${body}`;
+  return { text: text.slice(0, at) + put + text.slice(at), start: at + put.indexOf(body) };
+}
+
+/**
+ * Page.html `text` as it is served (src/server/routes.mjs): every card with its id (withCardIds), and
+ * on each card what the page's board reads of it and no file holds (all data-ge-*, which nothing writes
+ * back): `data-ge-base`, its base; and by what `blockOf(id)` says of its block ({ fit, bare, runs }, or
+ * null for one there is none of), `data-ge-fit="content"`, `data-ge-bare`, and `data-ge-state`
+ * (`document`: a block whose places lack page; `disabled`: turned off; `missing`: none there) with its
+ * instance put in a <template> (`data-ge-held`) where the block does not run on the page, so that no
+ * script starts it and the board shows a note instead.
+ */
+export function servedPage(text, { blockOf = () => null } = {}) {
+  const own = withCardIds(text).text;
+  const splices = [];
+  for (const card of readPage(own).cards) {
+    const block = card.block ? blockOf(card.block) : null;
+    const values = { "data-ge-base": baseOf(own, card) };
+    if (block?.fit === "content") values["data-ge-fit"] = "content";
+    if (block?.bare) values["data-ge-bare"] = "";
+    const state = card.block === null ? null : block?.state ?? "missing";
+    if (state && state !== "page") values["data-ge-state"] = state;
+    splices.push(...attributeSplices(own, card.node, values));
+    if (card.instance && block && state !== "page" && state !== "missing") {
+      const { startOffset, endOffset } = card.instance.sourceCodeLocation;
+      splices.push({ start: startOffset, end: startOffset, text: "<template data-ge-held>" }, { start: endOffset, end: endOffset, text: "</template>" });
+    }
+  }
+  return spliced(own, splices);
+}
+
+// A card's markup read on a board of its own: { text, card, from, to } (where the markup is in the text).
+function alone(markup) {
+  const before = `<!doctype html><html><head></head><body><div class="${BOARD_CLASS}">`;
+  const text = `${before}${markup}</div></body></html>`;
+  const [board] = readPage(text).boards;
+  return { text, board, from: before.length, to: before.length + markup.length };
+}
+
+/** Whether `markup` reads as one card and nothing else (a comment aside), closed by its own end tag, holding one instance of a block: its card, or null. */
+export function oneCard(markup) {
+  const { board } = alone(markup);
+  if (!board || board.cards.length !== 1) return null;
+  const strays = elementsOf(board.node).length !== 1 || board.node.childNodes.some((node) => node.nodeName === "#text" && node.value.trim());
+  const [card] = board.cards;
+  return strays || !card.closed || !card.instance || card.instance.parentNode !== card.node ? null : card;
+}
+
+/** A card's `markup` (oneCard's) with its id and cells set: { id, x, y, w, h }. */
+export function cardWith(markup, { id, x, y, w, h }) {
+  const { text, board, from, to } = alone(markup);
+  const values = { "data-card-id": id, "data-x": x, "data-y": y, "data-w": w, "data-h": h };
+  const splices = attributeSplices(text, board.cards[0].node, values);
+  const grown = splices.reduce((sum, { start, end, text: put }) => sum + put.length - (end - start), 0);
+  return spliced(text, splices).slice(from, to + grown);
+}

package/browser/shared/page-links.mjs

@@ -5,8 +5,14 @@
 // one title need nothing to tell them apart.
 //
 // A page id has the look of a block id (shared/ids.mjs) and is worked out from the folder name, the
-// document's identity, which a title never changes. So nothing is kept anywhere: no file, no list to
-// keep in step, and a page alone in a tab or with no list read yet can always say its own address.
+// document's identity, which a title never changes: a hash of the name, but for a name of the shape
+// doc-<eight> (DOC_SLUG), which has those eight as its id. The workbench names a new document so
+// (shared/workspace.mjs newDocSlug: doc- and a random id no name of the workspace has), so that the
+// folder and the address read alike (doc-tacti90g, #反馈文档-tacti90g); every name made before has the
+// id it had, but for one of that very shape (an Agent's slug may be doc-overview), which keeps the
+// address it had besides: its hash opens it too (earlierId, pageOfLink). So nothing is kept anywhere:
+// no file, no list to keep in step, and a page alone in a tab or with no list read yet can always say
+// its own address.
 // The folder name opens its document too, for what was written by it. A document in the trash has its
 // id, and has its address back when it is restored; one restored under another folder name goes by
 // that name's id, as the links of files to it change too.
@@ -19,11 +25,17 @@
 const NOT_WORDS = /(?:[^\p{L}\p{M}\p{N}_]\p{M}*)+/gu;
 
 /**
- * A document's page id: eight letters and digits, a letter first, from a 53-bit hash of its folder
- * name (cyrb53).
+ * A folder name that is a page id's own: "doc-" and the eight characters of an id, a lowercase letter
+ * first and lowercase letters or digits after it. Its group is the id (pageId).
+ */
+export const DOC_SLUG = /^doc-([a-z][a-z0-9]{7})$/;
+
+/**
+ * The id a name has from a 53-bit hash of it (cyrb53): eight letters and digits, a letter first. Every
+ * name had it before the folders of the shape DOC_SLUG had their own (pageId, earlierId).
  * @param {string} slug
  */
-export function pageId(slug) {
+function hashId(slug) {
   let one = 0xdeadbeef;
   let two = 0x41c6ce57;
   for (let at = 0; at < slug.length; at++) {
@@ -36,6 +48,40 @@ export function pageId(slug) {
   return String.fromCharCode(97 + hash % 26) + Math.floor(hash / 26).toString(36).padStart(7, "0").slice(-7);
 }
 
+/**
+ * A document's page id: eight letters and digits, a letter first. A folder named doc-<eight> (DOC_SLUG)
+ * has those eight; any other name, a hash of it. So only a name of that one shape reads otherwise than
+ * it did, and it keeps the address it had besides (earlierId).
+ * @param {string} slug
+ */
+export const pageId = (slug) => DOC_SLUG.exec(slug)?.[1] ?? hashId(slug);
+
+/**
+ * The id a name of the shape DOC_SLUG went by before its own eight were its id, its hash, or null for
+ * any other name, whose id has not changed. An Agent's slug may have that shape (doc-overview was
+ * #Overview-f3md3kg4 before), and an address written down then opens it still (pageOfLink, earlierLink).
+ * @param {string} slug
+ */
+export const earlierId = (slug) => (DOC_SLUG.test(slug) ? hashId(slug) : null);
+
+const ID_FIRST = "abcdefghijklmnopqrstuvwxyz";
+const ID_REST = `${ID_FIRST}0123456789`;
+
+/**
+ * A new page id, one `taken` (a Set of ids) does not hold: eight characters of the shape DOC_SLUG has,
+ * each picked by `random` (a function giving a number from 0 up to 1, Math.random's way: the tests give
+ * their own), another picked while it is held.
+ * @param {Set<string>} taken
+ * @param {() => number} [random]
+ */
+export function newPageId(taken, random = Math.random) {
+  for (;;) {
+    let id = ID_FIRST[Math.min(25, Math.floor(random() * 26))];
+    for (let at = 1; at < 8; at++) id += ID_REST[Math.min(35, Math.floor(random() * 36))];
+    if (!taken.has(id)) return id;
+  }
+}
+
 /**
  * A document's link, what stands after # in its address: its title's words and its page id, the id
  * alone for a title that leaves no words or one not known here.
@@ -46,6 +92,20 @@ export function pageLink({ slug, title }) {
   return words ? `${words}-${pageId(slug)}` : pageId(slug);
 }
 
+/**
+ * The link a document had before its own eight were its id, if it has an earlier id (earlierId): its
+ * `link` of now with the id at its end swapped for that one, its words as they are; else null. Only
+ * an address on another server is held to be a document's by its words (addressOn), and one written
+ * for such a document before reads so.
+ * @param {string} slug
+ * @param {string | undefined} link the link the document has now (pageLink)
+ */
+export function earlierLink(slug, link) {
+  const was = earlierId(slug);
+  const now = pageId(slug);
+  return was !== null && link?.endsWith(now) ? link.slice(0, link.length - now.length) + was : null;
+}
+
 /**
  * Each document's link: a Map of slug to link, which is also the list of documents an address is read
  * against (pageOfLink).
@@ -56,7 +116,9 @@ export const pageLinks = (pages) => new Map(pages.map((page) => [page.slug, page
 
 /**
  * The document `value` names of those in `links`: by its folder name, else by the page id after the
- * last dash of a link, or that id alone, whatever words stand before it. Its slug, or null.
+ * last dash of a link, or that id alone, whatever words stand before it; else, for a folder of the
+ * shape DOC_SLUG, by the id it went by before (earlierId), which never takes a document that has the
+ * id for its own. Its slug, or null.
  * @param {Map<string, string>} links
  * @param {string} value
  */
@@ -64,6 +126,7 @@ export function pageOfLink(links, value) {
   if (links.has(value)) return value;
   const id = value.slice(value.lastIndexOf("-") + 1);
   for (const slug of links.keys()) if (pageId(slug) === id) return slug;
+  for (const slug of links.keys()) if (earlierId(slug) === id) return slug;
   return null;
 }