visualproof 0.0.0-stage → 0.1.0

package/dist/web/src/motion.js

@@ -0,0 +1,430 @@
+// Elastic motion, computed along the hierarchy (CanvasSpec.md, "Motion").
+//
+// Every cluster is a frame: its direct children are the bodies it simulates, in its own local
+// coordinates — nodes as small discs, sub-clusters as discs of their drawn radius. Forces:
+//   - the anchor spring pulls each body back to its anchor (elastic return);
+//   - collisions keep siblings apart (resolved positionally, which is stable at any stiffness);
+//   - dependency springs join the two children of the lowest common ancestor of an edge's ends,
+//     the same decomposition a bundled edge follows, with the anchors' distance as rest length:
+//     at rest they do nothing, when a body is moved what it is tied to follows and springs back.
+// Collisions act while something is being dragged: that is when bodies must make way. Once let
+// go, every body returns to its anchor straight through the others, so nothing can get stuck
+// behind a neighbour in a tight packing (anchors never overlap, so the rest is clean).
+// A frame sleeps once nothing in it moves. Moving a cluster body carries its subtree for free,
+// since everything under it is local. During a drag only, a contact pass lets the dragged body
+// push individual nodes of other clusters, so what it touches makes way.
+import { SITE_BODY, SITE_STMT } from "../../shared/graph.js";
+import { LEAF_R } from "./scene.js";
+const K_ANCHOR = 140; // s^-2: comes back in about half a second
+const DAMPING = 2 * 0.62 * Math.sqrt(K_ANCHOR); // slightly under critical: a liquid settle
+const K_DEP = 18;
+const SUBSTEP = 1 / 120;
+const REST = 0.03;
+const ROOT = -1;
+export class Motion {
+    S;
+    vcx;
+    vcy;
+    vnx;
+    vny;
+    /** springs per frame (cluster id, or -1 for the root), between body ids */
+    springs = new Map();
+    awake = new Set();
+    /** the body under the pointer: kept where the pointer puts it */
+    drag = null;
+    /** the dragged body's anchor before the drag, in its frame: what its springs measure their rest
+     *  length from, so that what it is tied to follows it and springs back after */
+    dragFrom = null;
+    /** visible nodes near a world point; the canvas answers from its hit grid */
+    near = () => [];
+    constructor(scene, g) {
+        this.S = scene;
+        this.vcx = new Float32Array(scene.nc);
+        this.vcy = new Float32Array(scene.nc);
+        this.vnx = new Float32Array(scene.n);
+        this.vny = new Float32Array(scene.n);
+        this.buildSprings(g);
+    }
+    /** Body ids: a cluster is its index, a node is nc + its index. */
+    frameOf(body) {
+        const S = this.S;
+        return body < S.nc ? S.parent[body] : S.nodeCluster[body - S.nc];
+    }
+    /** An edge u → v becomes a spring in the frame where the two first meet. */
+    buildSprings(g) {
+        const S = this.S;
+        const count = new Map(); // frame → (pair key → count)
+        const up = (i) => {
+            // (frame, body) pairs from the node up to the root
+            const frames = [];
+            const bodies = [];
+            let body = S.nc + i;
+            let frame = S.nodeCluster[i];
+            for (;;) {
+                frames.push(frame);
+                bodies.push(body);
+                if (frame === ROOT)
+                    break;
+                body = frame;
+                frame = S.parent[frame];
+            }
+            return [frames, bodies];
+        };
+        const memo = new Map();
+        const path = (i) => {
+            let p = memo.get(i);
+            if (!p)
+                memo.set(i, (p = up(i)));
+            return p;
+        };
+        for (let u = 0; u < g.n; u++) {
+            for (let e = g.outStart[u]; e < g.outStart[u + 1]; e++) {
+                if (!(g.outSite[e] & (SITE_STMT | SITE_BODY)))
+                    continue;
+                const v = g.outDst[e];
+                const [fu, bu] = path(u);
+                const [fv, bv] = path(v);
+                // lowest frame on both paths
+                const at = new Map();
+                fu.forEach((f, k) => at.set(f, k));
+                for (let k = 0; k < fv.length; k++) {
+                    const ku = at.get(fv[k]);
+                    if (ku === undefined)
+                        continue;
+                    const a = bu[ku], b = bv[k];
+                    if (a !== b) {
+                        const key = a < b ? a * 4_194_304 + b : b * 4_194_304 + a;
+                        let m = count.get(fv[k]);
+                        if (!m)
+                            count.set(fv[k], (m = new Map()));
+                        m.set(key, (m.get(key) ?? 0) + 1);
+                    }
+                    break;
+                }
+            }
+        }
+        for (const [frame, m] of count) {
+            const deg = new Map();
+            for (const key of m.keys()) {
+                const a = Math.floor(key / 4_194_304), b = key % 4_194_304;
+                deg.set(a, (deg.get(a) ?? 0) + 1);
+                deg.set(b, (deg.get(b) ?? 0) + 1);
+            }
+            const list = [];
+            for (const [key, n] of m) {
+                const a = Math.floor(key / 4_194_304), b = key % 4_194_304;
+                // heavier bundles pull harder; busy bodies are not pulled apart by their many ties
+                list.push({ a, b, k: (K_DEP * Math.log1p(n)) / Math.sqrt(Math.max(deg.get(a), deg.get(b))) });
+            }
+            this.springs.set(frame, list);
+        }
+    }
+    wake(frame) {
+        this.awake.add(frame);
+    }
+    wakeBody(body) {
+        this.awake.add(this.frameOf(body));
+    }
+    get moving() {
+        return this.awake.size > 0;
+    }
+    /** Wake every frame whose bodies are away from their anchors (after folds moved anchors). */
+    wakeDisplaced() {
+        const S = this.S;
+        for (let c = 0; c < S.nc; c++) {
+            if (Math.abs(S.curCX[c] - S.ancCX[c]) > REST || Math.abs(S.curCY[c] - S.ancCY[c]) > REST)
+                this.awake.add(S.parent[c]);
+        }
+        for (let i = 0; i < S.n; i++) {
+            if (Math.abs(S.curNX[i] - S.ancNX[i]) > REST || Math.abs(S.curNY[i] - S.ancNY[i]) > REST)
+                this.awake.add(S.nodeCluster[i]);
+        }
+    }
+    // body accessors
+    px(b) {
+        return b < this.S.nc ? this.S.curCX[b] : this.S.curNX[b - this.S.nc];
+    }
+    py(b) {
+        return b < this.S.nc ? this.S.curCY[b] : this.S.curNY[b - this.S.nc];
+    }
+    setP(b, x, y) {
+        if (b < this.S.nc) {
+            this.S.curCX[b] = x;
+            this.S.curCY[b] = y;
+        }
+        else {
+            this.S.curNX[b - this.S.nc] = x;
+            this.S.curNY[b - this.S.nc] = y;
+        }
+    }
+    ax(b) {
+        return b < this.S.nc ? this.S.ancCX[b] : this.S.ancNX[b - this.S.nc];
+    }
+    ay(b) {
+        return b < this.S.nc ? this.S.ancCY[b] : this.S.ancNY[b - this.S.nc];
+    }
+    radius(b) {
+        return b < this.S.nc ? Math.max(this.S.drawnR[b], LEAF_R) : LEAF_R;
+    }
+    /** Advance the awake frames by dt ms. */
+    step(dtMs) {
+        const S = this.S;
+        let steps = Math.max(1, Math.min(8, Math.round(dtMs / 1000 / SUBSTEP)));
+        while (steps-- > 0) {
+            for (const f of [...this.awake])
+                this.stepFrame(f);
+        }
+        if (this.drag !== null)
+            this.contact();
+        // a frame whose contents now reach beyond its disc pushes on its siblings: wake the parent
+        for (const f of [...this.awake]) {
+            if (f === ROOT)
+                continue;
+            let reach = 0;
+            for (const c of S.kidsC[f])
+                reach = Math.max(reach, Math.hypot(S.curCX[c], S.curCY[c]) + S.drawnR[c]);
+            for (const i of S.kidsN[f])
+                if (S.nodeRep[i] < 0)
+                    reach = Math.max(reach, Math.hypot(S.curNX[i], S.curNY[i]) + LEAF_R);
+            if (reach > S.curR[f] + 2) {
+                S.curR[f] = reach;
+                this.awake.add(S.parent[f]);
+            }
+        }
+    }
+    /** A frame's bodies and springs in local indices, cached until what is shut changes. */
+    frames = new Map();
+    data(f) {
+        const S = this.S;
+        const hit = this.frames.get(f);
+        if (hit && hit.rep === S.repVersion)
+            return hit;
+        const ids = [];
+        const kc = f === ROOT ? S.rootC : S.kidsC[f];
+        const kn = f === ROOT ? S.rootN : S.kidsN[f];
+        for (const c of kc)
+            if (S.rep[c] < 0 || S.rep[c] === c)
+                ids.push(c);
+        const nBig = ids.length;
+        for (const i of kn)
+            if (S.nodeRep[i] < 0)
+                ids.push(S.nc + i);
+        const index = new Map();
+        ids.forEach((b, k) => index.set(b, k));
+        const sa = [], sb = [], sk = [];
+        for (const sp of this.springs.get(f) ?? []) {
+            const a = index.get(sp.a), b = index.get(sp.b);
+            if (a === undefined || b === undefined)
+                continue;
+            sa.push(a);
+            sb.push(b);
+            sk.push(sp.k);
+        }
+        const n = ids.length;
+        const d = {
+            rep: S.repVersion, ids: Int32Array.from(ids), nBig,
+            sa: Int32Array.from(sa), sb: Int32Array.from(sb), sk: Float64Array.from(sk),
+            x: new Float64Array(n), y: new Float64Array(n), vx: new Float64Array(n), vy: new Float64Array(n),
+            ax: new Float64Array(n), ay: new Float64Array(n), r: new Float64Array(n), fx: new Float64Array(n), fy: new Float64Array(n),
+            cell: new Float64Array(n), order: new Int32Array(n),
+        };
+        this.frames.set(f, d);
+        return d;
+    }
+    stepFrame(f) {
+        const S = this.S;
+        // a frame inside a shut cluster is not drawn: everything rests at its anchor
+        if (f !== ROOT && S.rep[f] >= 0) {
+            for (const c of S.kidsC[f])
+                this.rest(c);
+            for (const i of S.kidsN[f])
+                this.rest(S.nc + i);
+            this.awake.delete(f);
+            return;
+        }
+        const D = this.data(f);
+        const n = D.ids.length;
+        const { x, y, vx, vy, ax, ay, r, fx, fy } = D;
+        let drag = -1;
+        for (let k = 0; k < n; k++) {
+            const b = D.ids[k];
+            x[k] = this.px(b);
+            y[k] = this.py(b);
+            vx[k] = this.vx(b);
+            vy[k] = this.vy(b);
+            ax[k] = this.ax(b);
+            ay[k] = this.ay(b);
+            r[k] = this.radius(b);
+            if (b === this.drag)
+                drag = k;
+            fx[k] = K_ANCHOR * (ax[k] - x[k]) - DAMPING * vx[k];
+            fy[k] = K_ANCHOR * (ay[k] - y[k]) - DAMPING * vy[k];
+        }
+        for (let q = 0; q < D.sa.length; q++) {
+            const a = D.sa[q], b = D.sb[q];
+            const dx = x[b] - x[a], dy = y[b] - y[a];
+            const d = Math.hypot(dx, dy) || 1e-6;
+            const from = this.dragFrom;
+            const [pax, pay] = a === drag && from ? from : [ax[a], ay[a]];
+            const [pbx, pby] = b === drag && from ? from : [ax[b], ay[b]];
+            const rest = Math.hypot(pbx - pax, pby - pay);
+            const f0 = (D.sk[q] * (d - rest)) / d;
+            fx[a] += f0 * dx;
+            fy[a] += f0 * dy;
+            fx[b] -= f0 * dx;
+            fy[b] -= f0 * dy;
+        }
+        const dt = SUBSTEP;
+        let energy = 0;
+        for (let k = 0; k < n; k++) {
+            if (k === drag) {
+                vx[k] = vy[k] = 0;
+                continue;
+            }
+            vx[k] += fx[k] * dt;
+            vy[k] += fy[k] * dt;
+            x[k] += vx[k] * dt;
+            y[k] += vy[k] * dt;
+        }
+        if (this.drag !== null)
+            this.collide(D, drag);
+        // asleep when nothing in the frame moves any more; a body held off its anchor by a
+        // neighbour (a pin dropped on it) rests where it is
+        for (let k = 0; k < n; k++)
+            energy = Math.max(energy, Math.hypot(vx[k], vy[k]) * dt);
+        if (drag >= 0)
+            energy = Infinity;
+        const sleep = energy < REST * 0.05;
+        for (let k = 0; k < n; k++) {
+            const b = D.ids[k];
+            if (sleep) {
+                if (Math.hypot(x[k] - ax[k], y[k] - ay[k]) < 0.5) {
+                    x[k] = ax[k];
+                    y[k] = ay[k];
+                }
+                vx[k] = vy[k] = 0;
+            }
+            this.setP(b, x[k], y[k]);
+            this.setV(b, vx[k], vy[k]);
+        }
+        if (sleep)
+            this.awake.delete(f);
+    }
+    /** Push overlapping siblings apart, the lighter one more; the dragged body does not yield.
+     *  Discs are checked against everything; nodes against their grid neighbours, found by
+     *  sorting the bodies by cell. */
+    collide(D, drag) {
+        const { x, y, r, cell, order } = D;
+        const n = D.ids.length;
+        const CELL = 2 * LEAF_R + 2;
+        const W = 1 << 20;
+        const resolve = (a, b) => {
+            const dx = x[b] - x[a], dy = y[b] - y[a];
+            const need = r[a] + r[b] - 0.5;
+            const d2 = dx * dx + dy * dy;
+            if (d2 >= need * need)
+                return;
+            const d = Math.sqrt(d2) || 1e-3;
+            const push = need - d;
+            const wa = a === drag ? 0 : b === drag ? 1 : (r[b] * r[b]) / (r[a] * r[a] + r[b] * r[b]);
+            const ux = d2 ? dx / d : 1, uy = d2 ? dy / d : 0;
+            x[a] -= ux * push * wa;
+            y[a] -= uy * push * wa;
+            x[b] += ux * push * (1 - wa);
+            y[b] += uy * push * (1 - wa);
+        };
+        for (let a = 0; a < D.nBig; a++)
+            for (let b = a + 1; b < n; b++)
+                resolve(a, b);
+        const small = n - D.nBig;
+        if (small < 2)
+            return;
+        for (let k = D.nBig; k < n; k++) {
+            cell[k] = Math.floor(x[k] / CELL) * W + Math.floor(y[k] / CELL);
+            order[k - D.nBig] = k;
+        }
+        const ord = order.subarray(0, small);
+        ord.sort((p, q) => cell[p] - cell[q]);
+        const keys = new Float64Array(small);
+        for (let k = 0; k < small; k++)
+            keys[k] = cell[ord[k]];
+        const find = (key) => {
+            let lo = 0, hi = small;
+            while (lo < hi) {
+                const mid = (lo + hi) >> 1;
+                if (keys[mid] < key)
+                    lo = mid + 1;
+                else
+                    hi = mid;
+            }
+            return lo;
+        };
+        for (let s = 0; s < small; s++) {
+            const a = ord[s];
+            const key = keys[s];
+            // the same cell after this one, then the neighbouring cells "ahead" of it
+            for (let t = s + 1; t < small && keys[t] === key; t++)
+                resolve(a, ord[t]);
+            for (const off of [W, 1, W + 1, W - 1]) {
+                for (let t = find(key + off); t < small && keys[t] === key + off; t++)
+                    resolve(a, ord[t]);
+            }
+        }
+    }
+    /** The dragged body pushes the nodes it touches, whatever cluster they are in. */
+    contact() {
+        const S = this.S;
+        const d = this.drag;
+        const own = this.frameOf(d);
+        const wx = d < S.nc ? S.cwx[d] : S.nwx[d - S.nc];
+        const wy = d < S.nc ? S.cwy[d] : S.nwy[d - S.nc];
+        const rd = this.radius(d) * (d < S.nc ? this.scaleOf(own) : 1);
+        for (const j of this.near(wx, wy, rd + LEAF_R * 2)) {
+            if (S.nc + j === d || S.nodeCluster[j] === own)
+                continue;
+            // inside the dragged cluster: it carries those, it does not push them
+            if (d < S.nc && this.inside(j, d))
+                continue;
+            const dx = S.nwx[j] - wx, dy = S.nwy[j] - wy;
+            const dist = Math.hypot(dx, dy) || 1e-3;
+            const need = rd + LEAF_R + 1;
+            if (dist >= need)
+                continue;
+            const f = S.nodeCluster[j];
+            const s = this.scaleOf(f) || 1;
+            const push = (need - dist) / s;
+            S.curNX[j] += (dx / dist) * push;
+            S.curNY[j] += (dy / dist) * push;
+            this.awake.add(f);
+        }
+    }
+    inside(i, c) {
+        for (let x = this.S.nodeCluster[i]; x >= 0; x = this.S.parent[x])
+            if (x === c)
+                return true;
+        return false;
+    }
+    scaleOf(f) {
+        return f === ROOT ? 1 : this.S.scale[f];
+    }
+    vx(b) {
+        return b < this.S.nc ? this.vcx[b] : this.vnx[b - this.S.nc];
+    }
+    vy(b) {
+        return b < this.S.nc ? this.vcy[b] : this.vny[b - this.S.nc];
+    }
+    setV(b, x, y) {
+        if (b < this.S.nc) {
+            this.vcx[b] = x;
+            this.vcy[b] = y;
+        }
+        else {
+            this.vnx[b - this.S.nc] = x;
+            this.vny[b - this.S.nc] = y;
+        }
+    }
+    rest(b) {
+        this.setP(b, this.ax(b), this.ay(b));
+        this.setV(b, 0, 0);
+    }
+}

package/dist/web/src/past.js

@@ -0,0 +1,224 @@
+// The Time Machine's model (HistorySpec decisions 16–19), without the page: the ruler — a tick per
+// build at equal intervals, which ticks are long, how wide it is drawn and where it scrolls — and
+// which build a drag or a step lands on, which build the reader is going to and which the board shows
+// meanwhile (`Seek`), and how a board of a past graph is laid out and marked. The past graph a
+// snapshot makes — that build's declarations alone, each marked against the graph on show — is
+// shared/pastgraph.ts's, which the server makes too to print a view of a past build. web/src/timemachine.ts draws it and fetches what it reads; the tests read it here.
+import { memoryOf } from "../../shared/layout.js";
+import { PAST_CHANGED, PAST_GHOST, PAST_RENAMED } from "../../shared/pastgraph.js";
+// the past graph and its marks are shared with the server, which prints a view of a past build from
+// the same graph (shared/pastgraph.ts)
+export { PAST_CHANGED, PAST_GHOST, PAST_RENAMED, pastGraph, reviewThen } from "../../shared/pastgraph.js";
+/** a day in the reader's time, to compare two builds' */
+const dayOf = (t) => new Date(t).toDateString();
+export function timeline(snaps) {
+    const sorted = [...snaps].sort((a, b) => (a.at < b.at ? -1 : a.at > b.at ? 1 : a.id - b.id));
+    const ticks = sorted.map((s, k) => {
+        const at = Date.parse(s.at);
+        const before = k > 0 ? sorted[k - 1] : null;
+        const day = !before || dayOf(at) !== dayOf(Date.parse(before.at));
+        const major = !before || (s.commit || before.commit ? s.commit?.hash !== before.commit?.hash : day);
+        return { id: s.id, at, approx: !!s.approx, major, day };
+    });
+    return { ticks };
+}
+/** The ruler's measures, in pixels: the inset at either end; the closest two ticks are drawn, which
+ *  keeps every tick one a pointer can land on and its hollow head clear of the next; the farthest,
+ *  so that a few builds do not stretch across the bar; the narrowest the ruler is, so that it stays
+ *  something to grab. */
+export const RULER = { pad: 7, minStep: 8, maxStep: 22, minWidth: 90 };
+/** The ruler of `n` builds in `room` pixels. Few builds are drawn at most `maxStep` apart, the ruler
+ *  only as wide as they need (and `minWidth` at least, the ticks spread across it); where `n` builds
+ *  do not fit `minStep` apart, the ruler takes the whole room and its strip scrolls. */
+export function ruler(n, room) {
+    const { pad, minStep, maxStep, minWidth } = RULER;
+    if (n <= 1) {
+        const w = Math.min(room, minWidth);
+        return { n, step: 0, width: w, strip: w };
+    }
+    let step = Math.max(minStep, Math.min(maxStep, (room - 2 * pad) / (n - 1)));
+    let width = Math.min(room, (n - 1) * step + 2 * pad);
+    if (width < minWidth && room > width) {
+        width = Math.min(room, minWidth);
+        step = (width - 2 * pad) / (n - 1);
+    }
+    return { n, step, width, strip: Math.max(width, (n - 1) * step + 2 * pad) };
+}
+/** Where the `i`th tick is on the strip; a lone one stands in the middle. */
+export function tickX(r, i) {
+    return r.n <= 1 ? r.width / 2 : RULER.pad + i * r.step;
+}
+/** How far the strip scrolls at most. */
+export const maxScroll = (r) => Math.max(0, r.strip - r.width);
+/** The scroll that shows the `i`th tick with a margin of two steps (a quarter of the window at most)
+ *  on either side, moving as little as it can from `scroll`. */
+export function keepInView(r, scroll, i) {
+    const x = tickX(r, i);
+    const margin = Math.min(2 * r.step, r.width / 4);
+    let s = Math.min(Math.max(0, scroll), maxScroll(r));
+    if (x - margin < s)
+        s = x - margin;
+    else if (x + margin > s + r.width)
+        s = x + margin - r.width;
+    return Math.min(Math.max(0, s), maxScroll(r));
+}
+/** The tick nearest to a place on the strip (pixels from its left): where a drag lands. */
+export function nearestTick(t, r, x) {
+    const n = t.ticks.length;
+    if (!n)
+        return null;
+    const i = n === 1 ? 0 : Math.round((x - RULER.pad) / r.step);
+    return t.ticks[Math.min(n - 1, Math.max(0, i))].id;
+}
+/** The snapshot one step from `id` (← −1, → +1), in build order; null past either end. */
+export function step(t, id, dir) {
+    const k = t.ticks.findIndex((x) => x.id === id);
+    if (k < 0)
+        return t.ticks.length ? t.ticks[dir < 0 ? 0 : t.ticks.length - 1].id : null;
+    return t.ticks[k + dir]?.id ?? null;
+}
+// ------------------------------------------------------------------------------------- browsing
+/** how many builds beyond the one aimed at, in the way the reader goes, are laid out ahead */
+export const AHEAD = 2;
+/** Where the reader is going on the timeline, and what the board shows meanwhile (the owner's
+ *  decision of 2026-10-09: a drag loads the builds it crosses, not only the one it is let go on).
+ *  The reader aims at a build — the one under the pointer as it drags, a step, the build a followed
+ *  reader is at — and the board shows it once it is ready, keeping the build it shows until then.
+ *  The latest aim wins: a build the reader has left is never shown, though its load finishes after a
+ *  later one's, and what is in flight for it is stopped unless it is of use ahead — the builds
+ *  beside the one aimed at are fetched, and the two beyond it in the way the reader goes laid out,
+ *  so that a slow drag finds the next ones ready. */
+export class Seek {
+    /** the builds, oldest first (the timeline's ticks) */
+    order = [];
+    /** the build aimed at: the bar shows it, presence carries it */
+    target = null;
+    /** the build the board shows */
+    shown = null;
+    /** which way the reader last went: −1 back, +1 on */
+    dir = -1;
+    /** whether the reader browses (the Time Machine is open): only then is anything wanted ahead */
+    browsing = false;
+    /** Start at the build the board shows (the Time Machine opened), or stop (left: null, or the build
+     *  the view is kept at): nothing aimed at but it. */
+    reset(at, browsing) {
+        this.target = this.shown = at;
+        this.browsing = browsing;
+    }
+    /** Aim at a build. */
+    aim(id) {
+        const a = this.target === null ? -1 : this.order.indexOf(this.target);
+        const b = this.order.indexOf(id);
+        if (a >= 0 && b >= 0 && a !== b)
+            this.dir = b < a ? -1 : 1;
+        this.target = id;
+    }
+    /** A build's graph and layout are ready: true where the board is to show it now — it is the build
+     *  aimed at, and not on show (the board shows it from now on); false for one the reader has left,
+     *  which is dropped, and for the one on show. */
+    ready(id) {
+        if (id !== this.target || id === this.shown)
+            return false;
+        this.shown = id;
+        return true;
+    }
+    /** The board does not show the build aimed at yet. */
+    get waiting() {
+        return this.target !== null && this.target !== this.shown;
+    }
+    /** The build beside the one aimed at, `dir` away; null past either end, or while not browsing. */
+    beside(dir) {
+        if (!this.browsing || this.target === null)
+            return null;
+        const k = this.order.indexOf(this.target);
+        return k < 0 ? null : this.order[k + dir] ?? null;
+    }
+    /** The builds beyond the one aimed at, in the way the reader goes, nearest first: laid out ahead. */
+    get beyond() {
+        const out = [];
+        if (!this.browsing || this.target === null)
+            return out;
+        const k = this.order.indexOf(this.target);
+        for (let d = 1; k >= 0 && d <= AHEAD; d++) {
+            const id = this.order[k + d * this.dir];
+            if (id === undefined)
+                break;
+            out.push(id);
+        }
+        return out;
+    }
+    /** How much what is fetched for a build is wanted: 2 the build aimed at, or the one shown; 1 a
+     *  build beside the one aimed at or beyond it, fetched ahead; 0 none — what is in flight for it is
+     *  stopped. */
+    fetchWant(id) {
+        if (id === this.target || id === this.shown)
+            return 2;
+        return id === this.beside(-1) || id === this.beside(1) || this.beyond.includes(id) ? 1 : 0;
+    }
+    /** How much a build's layout is wanted, the more the sooner: 3 the build aimed at, or the one
+     *  shown; then the builds beyond it, the nearest first; 0 none — dropped before it starts, stopped
+     *  where it runs. */
+    layoutWant(id) {
+        if (id === this.target || id === this.shown)
+            return AHEAD + 1;
+        const k = this.beyond.indexOf(id);
+        return k < 0 ? 0 : AHEAD - k;
+    }
+}
+/** The latest build's snapshot: the graph on show. */
+export function latestOf(snaps) {
+    let best = null;
+    for (const s of snaps)
+        if (!best || s.at > best.at || (s.at === best.at && s.id > best.id))
+            best = s;
+    return best;
+}
+// ------------------------------------------------------------------------------------ the graph
+/** The memory a past board is laid out from where it has none of its own (shared/layout.ts,
+ *  stabilize): the layout of the board of now, so that what both have stays where it is; a
+ *  declaration renamed since is remembered under its name then. */
+export function pastMemory(layout, nodes, nowName) {
+    return renamedMemory(memoryOf(layout, nodes), nowName);
+}
+/** A memory of the board of now read for a past build: a declaration renamed since remembered under
+ *  its name then too. `mem` is left as it is (the page keeps it for every build): a copy where a
+ *  rename adds a name, else `mem` itself. */
+export function renamedMemory(mem, nowName) {
+    let out = null;
+    for (const [then, now] of nowName) {
+        if (!mem.nodes[now] || mem.nodes[then])
+            continue;
+        out ??= { nodes: { ...mem.nodes }, clusters: mem.clusters };
+        out.nodes[then] = mem.nodes[now];
+    }
+    return out ?? mem;
+}
+/** The key of a past board's layout as the Time Machine keeps it: the snapshot, what the board holds,
+ *  the clustering, the levels it hides and the memory it is laid out from. */
+export function pastLayoutKey(snapshot, set, mode, hidden, memory) {
+    return [snapshot, set, mode, [...hidden].sort().join("\u0001"), memory].join("\u0000");
+}
+/** A declaration's marks in words, for its card, the tooltip and the panel. */
+export function markWords(marks, now) {
+    const out = [];
+    if (marks & PAST_GHOST)
+        out.push("gone now");
+    if (marks & PAST_RENAMED)
+        out.push(now ? `now ${now}` : "renamed since");
+    if (marks & PAST_CHANGED)
+        out.push("changed since");
+    return out;
+}
+/** The marks of the declarations of a board (`toFull`: board → past graph), in the board's
+ *  numbering, and the names now of those renamed. */
+export function boardMarks(p, n, toFull) {
+    const marks = new Uint8Array(n);
+    const now = new Map();
+    for (let j = 0; j < n; j++) {
+        const i = toFull(j);
+        marks[j] = p.marks[i];
+        if (p.marks[i] & PAST_RENAMED)
+            now.set(j, p.nowName.get(p.graph.nodes[i].name));
+    }
+    return { marks, now };
+}