visualproof 0.3.0 → 0.4.1

package/dist/web/bundle/app.js

@@ -2001,11 +2001,11 @@ function shortHash(s2) {
 var SLUG = 32;
 function logFileName(name, agent, person = null) {
   if (person) return `${person}.person.jsonl`;
-  const plain = name.normalize("NFD").replace(new RegExp("\\p{M}+", "gu"), "").normalize("NFC");
+  const plain2 = name.normalize("NFD").replace(new RegExp("\\p{M}+", "gu"), "").normalize("NFC");
   let slug = "";
-  for (const c3 of plain) {
-    const keep = /^[\p{L}\p{N}]$/u.test(c3) && c3.normalize("NFD") === c3 && c3.normalize("NFKC") === c3;
-    const add = keep ? c3 : slug.endsWith("-") ? "" : "-";
+  for (const c3 of plain2) {
+    const keep2 = /^[\p{L}\p{N}]$/u.test(c3) && c3.normalize("NFD") === c3 && c3.normalize("NFKC") === c3;
+    const add = keep2 ? c3 : slug.endsWith("-") ? "" : "-";
     if (slug.length + add.length > SLUG) break;
     slug += add;
   }
@@ -2244,9 +2244,9 @@ function parse(text2) {
   const ts = tokens(text2);
   let k2 = 0;
   let parens = 0, terms = 0, names2 = 0;
-  const nest = (at, read) => {
+  const nest = (at, read2) => {
     if (++parens > MAX_PARENS) throw new QueryError(`the query nests more than ${QUERY_LIMITS.depth} levels deep`, at);
-    const r2 = read();
+    const r2 = read2();
     parens--;
     return r2;
   };
@@ -2484,8 +2484,8 @@ function chainOf(q2) {
 function fromChain(base, conditions) {
   return conditions.reduce((a3, c3) => ({ op: c3.op, a: a3, b: c3.q }), base);
 }
-function within(q2, board) {
-  return board.op === "all" || sameQuery(q2, board) ? q2 : { op: "and", a: q2, b: board };
+function within(q2, board2) {
+  return board2.op === "all" || sameQuery(q2, board2) ? q2 : { op: "and", a: q2, b: board2 };
 }
 function readsReview(q2) {
   if (q2.op === "trusted" || q2.op === "status" || q2.op === "advice" || q2.op === "key") return true;
@@ -3633,8 +3633,8 @@ function noteMarkers(clustersOf, shownAs) {
   return out;
 }
 function noteExcerpt(text2, most = 18) {
-  const plain = text2.replace(/```[\s\S]*?```/g, " ").replace(/[`*_]/g, "").replace(/\s+/g, " ").trim();
-  return plain.length > most ? plain.slice(0, most - 1).trimEnd() + "\u2026" : plain;
+  const plain2 = text2.replace(/```[\s\S]*?```/g, " ").replace(/[`*_]/g, "").replace(/\s+/g, " ").trim();
+  return plain2.length > most ? plain2.slice(0, most - 1).trimEnd() + "\u2026" : plain2;
 }
 function noteNames(text2) {
   const out = /* @__PURE__ */ new Set();
@@ -4755,24 +4755,24 @@ var ViewBook = class {
    *  a view not kept yet is kept by it (ViewSpec decision 6), so that what was added to it or taken
    *  out of it from the canvas's menu outlives the pages that had it open. A rename carried into the
    *  scope (`keep` false: server/views.ts, moveDeclaration) is no one's work and keeps nothing. */
-  setScope(id, scope2, by, keep = true) {
+  setScope(id, scope2, by, keep2 = true) {
     const v2 = this.find(id);
     if (typeof v2 === "string") return v2;
     if (sameQuery(v2.scope, scope2)) return null;
     v2.scope = scope2;
     const change = { id, what: "scope", by };
-    return v2.kept || !keep ? [change] : [change, this.keep(v2, by)];
+    return v2.kept || !keep2 ? [change] : [change, this.keep(v2, by)];
   }
   /** A view's own focus set by `by` (ViewSpec decision 28): a target's name, or null for none, for
    *  everyone on it; each reader's own focus is left as it is. Work on the board, as a scope changed
    *  is: a view not kept yet is kept by it. A rename carried into it (`keep` false) keeps nothing. */
-  setFocus(id, focus, by, keep = true) {
+  setFocus(id, focus, by, keep2 = true) {
     const v2 = this.find(id);
     if (typeof v2 === "string") return v2;
     if (v2.focus === focus) return null;
     v2.focus = focus;
     const change = { id, what: "focus", by };
-    return v2.kept || !keep ? [change] : [change, this.keep(v2, by)];
+    return v2.kept || !keep2 ? [change] : [change, this.keep(v2, by)];
   }
   /** The view target `target` is linked to (ViewSpec decision 29), or undefined: it has none. */
   viewOf(target) {
@@ -5087,7 +5087,7 @@ function highlightLean(src, isRef) {
 function tokenHtml(t2, isRef) {
   const span = (cls, text2) => `<span class="tk-${cls}">${escapeHtml(text2)}</span>`;
   const link = (word, to) => `<span class="tk-ref${/^[A-Z]/.test(word) ? " tk-type" : ""}" data-ref="${escapeHtml(to)}">${escapeHtml(word)}</span>`;
-  const plain = (word) => {
+  const plain2 = (word) => {
     const k2 = wordKind(word);
     return k2 === "ident" ? escapeHtml(word) : span(k2, word);
   };
@@ -5101,9 +5101,9 @@ function tokenHtml(t2, isRef) {
       const word = t2.text;
       const ref = isRef?.(word, t2.at);
       const parts = word.split(".");
-      if (Array.isArray(ref) && ref.length === parts.length) return parts.map((p2, k2) => ref[k2] ? link(p2, ref[k2]) : plain(p2)).join(".");
+      if (Array.isArray(ref) && ref.length === parts.length) return parts.map((p2, k2) => ref[k2] ? link(p2, ref[k2]) : plain2(p2)).join(".");
       if (ref && !Array.isArray(ref)) return link(word, typeof ref === "string" ? ref : word);
-      return plain(word);
+      return plain2(word);
     }
     default:
       return span(t2.kind, t2.text);
@@ -5163,8 +5163,8 @@ function targetRows(targets, views) {
   const linked = new Map(views.flatMap((v2) => (v2.targets ?? []).map((t2) => [t2, v2])));
   return [.../* @__PURE__ */ new Set([...targets, ...linked.keys()])].sort((a3, b2) => a3 < b2 ? -1 : a3 > b2 ? 1 : 0).map((target) => ({ target, view: linked.get(target) ?? null }));
 }
-function targetStep(view, board) {
-  return view === void 0 || view === board ? null : view;
+function targetStep(view, board2) {
+  return view === void 0 || view === board2 ? null : view;
 }
 function sectionHead(id, shut, title, aside = "") {
   return `<button class="sec-h" data-sec="${id}" aria-expanded="${!shut}" title="${shut ? "Show" : "Fold"} ${escapeHtml(title.toLowerCase())}"><span class="sec-chev" aria-hidden="true">${shut ? "\u25B8" : "\u25BE"}</span><span class="sec-t">${escapeHtml(title)}</span>` + (aside ? `<span class="sec-aside muted">${aside}</span>` : "") + `</button>`;
@@ -6133,16 +6133,16 @@ function units(S2, k2, minPx) {
   }
   return out;
 }
-function aggregate(g2, unit, sites, keep) {
+function aggregate(g2, unit, sites, keep2) {
   const counts2 = /* @__PURE__ */ new Map();
   const W2 = 1 << 22;
   for (let u2 = 0; u2 < g2.n; u2++) {
-    if (!keep(u2)) continue;
+    if (!keep2(u2)) continue;
     const a3 = unit[u2];
     for (let e2 = g2.outStart[u2]; e2 < g2.outStart[u2 + 1]; e2++) {
       if (!(g2.outSite[e2] & sites)) continue;
       const v2 = g2.outDst[e2];
-      if (!keep(v2)) continue;
+      if (!keep2(v2)) continue;
       const b2 = unit[v2];
       if (a3 === b2) continue;
       const key = a3 * W2 + b2;
@@ -6218,10 +6218,10 @@ function joinChains(ca, cb) {
     path = [...ca, ...[...cb].reverse()];
   }
   if (path.length > MAX_POINTS) {
-    const keep = [path[0]];
-    for (let k2 = 1; k2 < MAX_POINTS - 1; k2++) keep.push(path[Math.round(k2 * (path.length - 1) / (MAX_POINTS - 1))]);
-    keep.push(path[path.length - 1]);
-    path = keep;
+    const keep2 = [path[0]];
+    for (let k2 = 1; k2 < MAX_POINTS - 1; k2++) keep2.push(path[Math.round(k2 * (path.length - 1) / (MAX_POINTS - 1))]);
+    keep2.push(path[path.length - 1]);
+    path = keep2;
   }
   return path;
 }
@@ -6330,8 +6330,8 @@ var OverviewModel = class {
     const unit = units({ ...this.tree, curR: places.curR }, Math.pow(2, level / 2), 45);
     const sites = SITE_STMT | SITE_BODY;
     const ext = this.toggles.externals;
-    const pairs = aggregate(g2, unit, sites, (i2) => i2 < g2.projectCount || ext);
-    return { pairs, units: Int32Array.from(new Set(unit)) };
+    const pairs2 = aggregate(g2, unit, sites, (i2) => i2 < g2.projectCount || ext);
+    return { pairs: pairs2, units: Int32Array.from(new Set(unit)) };
   }
   /** Choose what step `v` draws for a camera `cam`. About 0.6 per unit on screen (between 250 and
    *  1,500), so that zoomed in each stays an edge one can follow: those with both ends in view
@@ -6615,8 +6615,8 @@ var EdgeQueue = class {
     return true;
   }
   /** Let go of the points `keep` does not want. */
-  evict(keep) {
-    for (const i2 of [...this.points.keys()]) if (!keep(i2)) this.points.delete(i2);
+  evict(keep2) {
+    for (const i2 of [...this.points.keys()]) if (!keep2(i2)) this.points.delete(i2);
   }
   /** A point's looks by edge key. */
   indexOf(p2) {
@@ -8343,12 +8343,12 @@ function shareVisitors(trail, world = () => null) {
 var MAX_EDGES = 400;
 function visitorEdges(g2, v2, toView, visitorOf) {
   const strong = (site) => (site & (SITE_STMT | SITE_BODY)) !== 0;
-  const board = /* @__PURE__ */ new Map();
+  const board2 = /* @__PURE__ */ new Map();
   const visitors = /* @__PURE__ */ new Map();
   const take = (u2, incoming, site) => {
     if (u2 === v2) return;
     const j2 = toView(u2);
-    const m3 = j2 >= 0 ? board : visitors;
+    const m3 = j2 >= 0 ? board2 : visitors;
     const end = j2 >= 0 ? j2 : visitorOf(u2);
     if (end < 0) return;
     const key = `${end}${incoming ? "<" : ">"}`;
@@ -8357,7 +8357,7 @@ function visitorEdges(g2, v2, toView, visitorOf) {
   };
   for (let e2 = g2.outStart[v2]; e2 < g2.outStart[v2 + 1]; e2++) take(g2.outDst[e2], false, g2.outSite[e2]);
   for (let e2 = g2.inStart[v2]; e2 < g2.inStart[v2 + 1]; e2++) take(g2.inSrc[e2], true, g2.inSite[e2]);
-  const all = [...board.values()].sort((a3, b2) => Number(b2[2]) - Number(a3[2]));
+  const all = [...board2.values()].sort((a3, b2) => Number(b2[2]) - Number(a3[2]));
   return { board: all.slice(0, MAX_EDGES), visitors: [...visitors.values()] };
 }
 
@@ -9099,6 +9099,10 @@ var GraphCanvas = class {
    *  fitBoxes) */
   fitExtra = null;
   /** The canvas element: what is laid over it sends it the wheel. */
+  /** Whether the pointer is down on the board (a drag, a pan): no moment to reload in (web/src/reload.ts). */
+  get pressed() {
+    return this.pressing;
+  }
   get element() {
     return this.canvas;
   }
@@ -10045,6 +10049,22 @@ var GraphCanvas = class {
     const k2 = Math.min(4, Math.min(this.w, this.h) * 0.42 / Math.max(S2.drawnR[c3], 20));
     this.moveTo(S2.cwx[c3], S2.cwy[c3], Math.min(ZOOM_MOST, Math.max(k2, minPx / Math.max(S2.drawnR[c3], 1e-6))), true);
   }
+  /** Frame the declarations `set` marks (the board's numbering) in the room the bars and panels
+   *  leave, never nearer than a declaration is pointed at well: the tour's views of what a theorem
+   *  rests on (GuideSpec decision 2). */
+  fitTo(set, animate = true) {
+    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+    for (let i2 = 0; i2 < set.length; i2++) {
+      if (!set[i2]) continue;
+      const [x2, y2] = this.posOf(i2);
+      [x0, y0, x1, y1] = [Math.min(x0, x2), Math.min(y0, y2), Math.max(x1, x2), Math.max(y1, y2)];
+    }
+    if (!isFinite(x0)) return;
+    const vw = this.w - this.insets.left - this.insets.right;
+    const vh = this.h - this.insets.top - this.insets.bottom;
+    const k2 = Math.min(vw / (x1 - x0 + 80), vh / (y1 - y0 + 80)) * 0.9;
+    this.moveTo((x0 + x1) / 2, (y0 + y1) / 2, Math.min(1.6, Math.max(ZOOM_LEAST, k2)), animate);
+  }
   /** Bring world point (x, y) to the middle of the unobstructed area at zoom k. */
   moveTo(px2, py, k2, animate, dur = 520) {
     if (this.anim) cancelAnimationFrame(this.anim);
@@ -12358,9 +12378,11 @@ var Panel = class {
     const queue = this.hooks.queue(i2, keyOnly);
     const inOrder = queue !== null && listOrder !== "kind";
     const orderSwitch = queue === null ? `<span class="muted">\u2014 reached from the statement, proofs skipped</span>` : `<span class="seg mini"><button data-tcb-order="review" class="${inOrder && !keyOnly ? "on" : ""}" title="Bottom-up: what a declaration uses before it">Review order</button><button data-tcb-order="key" class="${keyOnly ? "on" : ""}" title="The key declarations alone, in review order">\u25C6 Key</button><button data-tcb-order="kind" class="${inOrder ? "" : "on"}" title="Grouped by kind, by name">By kind</button></span>`;
-    const part = (key, title, aside, body) => {
+    const part = (key, title, aside, body, tip) => {
       const shut = this.hooks.shut(key);
-      return `<div class="p-sec">${sectionHead(key, shut, title, aside)}${shut ? "" : `<div class="p-sec-body">${body()}</div>`}</div>`;
+      const head = sectionHead(key, shut, title, aside);
+      const info2 = tip ? `<button class="p-info" data-tip-open="${tip.id}" title="${escapeHtml(tip.title)}" aria-label="${escapeHtml(tip.title)}">\u24D8</button>` : "";
+      return `<div class="p-sec ${key}">${info2 ? `<div class="sec-row">${head}${info2}</div>` : head}${shut ? "" : `<div class="p-sec-body">${body()}</div>`}</div>`;
     };
     const flags = (v2.flags ?? []).map((f2) => `<span class="chip ${f2 === "opaque" || f2 === "unsafe" || f2 === "partial" || f2 === "implemented_by" || f2 === "extern" ? "warn" : ""}">${f2}</span>`).join("");
     const line = v2.range ? `:${v2.range[0]}` : "";
@@ -12405,7 +12427,7 @@ var Panel = class {
       () => `<div class="axioms">${axioms.length ? axioms.map((a3) => `<span class="chip ${nonStd.includes(a3) ? "bad" : ""}">${escapeHtml(a3)}</span>`).join("") : `<span class="muted">none</span>`}</div>`
     )}
       ${notationHtml(g2, i2)}
-      ${tcbP ? part(PANEL_SECTIONS.tcb, "Trusted definitions", `${tcbP}${queue === null ? "" : keyOnly ? " \xB7 key declarations" : inOrder ? " \xB7 in review order" : " \xB7 by kind"}`, () => `<div class="sec-tcb p-order">${orderSwitch}</div><div class="tcb-list">${inOrder ? queue : tcbList}</div>`) : ""}
+      ${tcbP ? part(PANEL_SECTIONS.tcb, "Its TCB", `${tcbP}${queue === null ? "" : keyOnly ? " \xB7 key declarations" : inOrder ? " \xB7 in review order" : " \xB7 by kind"}`, () => `<div class="sec-tcb p-order">${orderSwitch}</div><div class="tcb-list">${inOrder ? queue : tcbList}</div>`, { id: "checks", title: "What a TCB is: the film's chapter on the ways to check" }) : ""}
     `;
     this.el.classList.add("open");
     if (!same2) this.el.scrollTop = 0;
@@ -12999,6 +13021,7 @@ function reviewState(raw) {
     error: typeof r2.error === "string" ? r2.error : null
   };
 }
+var graphQuery = (v2, i2, first) => v2 ? `${first}v=${v2}${i2 ? `&i=${encodeURIComponent(i2)}` : ""}` : "";
 function heartbeatRequest(token, beat, headers) {
   if ("private" in beat) return { headers: { "content-type": "application/json" }, body: JSON.stringify({ token, private: true }) };
   return { headers, body: JSON.stringify({ token, view: beat.view, idle: beat.idle }) };
@@ -13118,6 +13141,9 @@ function snapshotSource(info2) {
     exportDoc: async () => "a snapshot cannot typeset documents: export from the server",
     exportJob: async () => "a snapshot cannot typeset documents: export from the server",
     shareInfo: async () => ({ path: null }),
+    updates: async () => null,
+    tipClips: async () => /* @__PURE__ */ new Set(),
+    tourJson: async () => null,
     agentShares: async () => null,
     shareAgent: async () => ({ error: "a snapshot has no server to share with an agent" }),
     agentPrompt: async () => ({ error: "a snapshot has no server" }),
@@ -13173,10 +13199,10 @@ function serverSource() {
     },
     status: () => fetch("/api/status").then((r2) => r2.json()),
     forget: () => cache.clear(),
-    meta: (v2) => fetch(`/api/meta${v2 ? `?v=${v2}` : ""}`).then((r2) => r2.ok ? r2.json() : Promise.reject(new Error(`meta ${r2.status}`))),
+    meta: (v2, i2) => fetch(`/api/meta${graphQuery(v2, i2, "?")}`).then((r2) => r2.ok ? r2.json() : Promise.reject(new Error(`meta ${r2.status}`))),
     git: () => fetch("/api/git").then((r2) => r2.ok ? r2.json() : null).then((b2) => b2?.git ?? null).catch(() => null),
     // packed for the way (shared/edgecodec.ts): a quarter of the bytes
-    edges: (v2) => fetch(`/api/edges?pack=2${v2 ? `&v=${v2}` : ""}`).then((r2) => r2.ok ? r2.arrayBuffer() : Promise.reject(new Error(`edges ${r2.status}`))).then((b2) => isPackedEdges(new Uint8Array(b2)) ? unpackEdges(new Uint8Array(b2)).buffer : b2),
+    edges: (v2, i2) => fetch(`/api/edges?pack=2${graphQuery(v2, i2, "&")}`).then((r2) => r2.ok ? r2.arrayBuffer() : Promise.reject(new Error(`edges ${r2.status}`))).then((b2) => isPackedEdges(new Uint8Array(b2)) ? unpackEdges(new Uint8Array(b2)).buffer : b2),
     review: () => fetch("/api/review").then((r2) => r2.ok ? r2.json() : Promise.reject(new Error(`review ${r2.status}`))).then(reviewState),
     hover: (module, line, character, hash) => fetch(`/api/hover?module=${encodeURIComponent(module)}&line=${line}&character=${character}&hash=${hash}`).then((r2) => r2.json()).catch(() => ({ error: "the server could not be reached" })),
     hoverOpen: (module) => void fetch(`/api/hover/open?module=${encodeURIComponent(module)}`, { method: "POST" }).catch(() => {
@@ -13200,6 +13226,9 @@ function serverSource() {
     revokeReadOnly: (id) => fetch("/api/share/readonly/revoke", { method: "POST", headers: headers(), body: JSON.stringify({ id }) }).then((r2) => r2.json()).catch(() => ({ error: "the server could not be reached" })),
     activity: () => fetch("/api/activity").then((r2) => r2.ok ? r2.json() : { events: [] }).then((b2) => b2.events).catch(() => []),
     shareInfo: () => fetch("/api/share").then((r2) => r2.json()).then((b2) => ({ ...b2, path: typeof b2.path === "string" ? b2.path : null })),
+    updates: () => fetch("/api/updates").then((r2) => r2.ok ? r2.json() : null).then((b2) => b2 && typeof b2.running === "string" ? b2 : null).catch(() => null),
+    tipClips: () => fetch("/tips/index.json").then((r2) => r2.ok ? r2.json() : null).then((b2) => new Set(Array.isArray(b2?.clips) ? b2.clips.filter((c3) => typeof c3 === "string") : [])).catch(() => /* @__PURE__ */ new Set()),
+    tourJson: () => fetch("/tips/tour.json").then((r2) => r2.ok ? r2.json() : null).catch(() => null),
     agentShares: () => fetch("/api/share/agents").then((r2) => r2.ok ? r2.json() : null).catch(() => null),
     shareAgent: (body) => fetch("/api/share/agents", { method: "POST", headers: headers(), body: JSON.stringify(body) }).then((r2) => r2.json()).catch(() => ({ error: "the server could not be reached" })),
     agentPrompt: (id) => fetch("/api/share/agents/prompt", { method: "POST", headers: headers(), body: JSON.stringify({ id }) }).then((r2) => r2.json()).catch(() => ({ error: "the server could not be reached" })),
@@ -14319,7 +14348,7 @@ var Stickies = class {
     this.layoutSeen = L2;
     const nb = this.board();
     const b2 = this.hooks.board();
-    const keep = /* @__PURE__ */ new Set();
+    const keep2 = /* @__PURE__ */ new Set();
     if (nb && b2) {
       const exists = existsIn(b2.full);
       const index = new Map(L2.clusters.map((c3, k2) => [c3.key, k2]));
@@ -14334,8 +14363,8 @@ var Stickies = class {
         ...view.map((n3) => ({ kind: "view", note: n3, spot: viewSpot(n3, nb, (key) => index.get(key) ?? -1), why: null }))
       ];
       for (const { kind, note: n3, spot, why } of all) {
-        if (!spot || keep.has(n3.id)) continue;
-        keep.add(n3.id);
+        if (!spot || keep2.has(n3.id)) continue;
+        keep2.add(n3.id);
         let d2 = this.drawn.get(n3.id);
         const fresh3 = !d2;
         const opened2 = n3.open && (d2 ? !d2.note.open : this.rendered);
@@ -14392,7 +14421,7 @@ var Stickies = class {
       }
     }
     for (const [id, d2] of this.drawn)
-      if (!keep.has(id)) {
+      if (!keep2.has(id)) {
         d2.el.remove();
         this.drawn.delete(id);
       }
@@ -15596,6 +15625,14 @@ var ReviewBox = class {
     const f2 = this.speakingFor?.trim() || null;
     return f2 && f2 !== this.hooks.review().reviewer?.trim() ? f2 : null;
   }
+  /** The drafts not empty, kept across a reload into a new version (web/src/reload.ts). */
+  get keptDrafts() {
+    return [...this.drafts].filter(([, v2]) => v2.trim() !== "");
+  }
+  /** The drafts kept by the reload that made this page (UpdateSpec decision 8). */
+  restoreDrafts(kept) {
+    for (const [k2, v2] of kept) if (!this.drafts.has(k2)) this.drafts.set(k2, v2);
+  }
   /** Keep what is typed into a comment box: the other boxes of the declaration show it too. Whom
    *  one speaks for, typed into any box, is every box's. */
   input(t2, i2) {
@@ -16114,6 +16151,14 @@ var Talk = class {
   /** `#following`: the title bar's state dot and the pill are there */
   frame;
   sized = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => this.atEnd && this.scrollEnd());
+  /** The drafts not empty, kept across a reload into a new version (web/src/reload.ts). */
+  get keptDrafts() {
+    return [...this.drafts].filter(([, v2]) => v2.trim() !== "");
+  }
+  /** The drafts kept by the reload that made this page (UpdateSpec decision 8). */
+  restoreDrafts(kept) {
+    for (const [k2, v2] of kept) if (!this.drafts.has(k2)) this.drafts.set(k2, v2);
+  }
   constructor(box, hooks) {
     this.box = box;
     this.hooks = hooks;
@@ -16689,7 +16734,7 @@ var FOLLOWED = [
     part: "selection",
     what: "the selection, and going somewhere: a row, a name or a result that goes to a declaration or a cluster",
     fields: ["selection"],
-    changes: "#selbar, #ctxmenu, .cm-sub, #results .hit, [data-go], [data-ref], [data-walk], [data-c], [data-module], [data-tm-go], #help [data-help-tour], #linear",
+    changes: "#selbar, #ctxmenu, .cm-sub, #results .hit, [data-go], [data-ref], [data-walk], [data-c], [data-module], [data-tm-go], #help [data-help-tour], #help-menu [data-hm=tour], #welcome [data-wel=tour], #help [data-tip-show], #help [data-tour-show], #intip [data-intip-show], #linear",
     keys: ["ContextMenu", "F10"],
     fieldKeys: [{ in: "#search", key: "Enter" }],
     place: true
@@ -16798,7 +16843,10 @@ var YOURS = [
   { id: "paperTools", what: "zoom, find and the box tool in the reference window", where: "[data-pw-zoom], [data-pw-find], [data-pw-box], .pw-find" },
   { id: "share", what: "Share, and its switch Exactly what I see", where: "#share-btn, #share-pop" },
   { id: "export", what: "Export", where: "#export-btn, #export-modal" },
-  { id: "help", what: "Help: the ? sheet and the tour", where: "#help-btn, #help, #tour", keys: ["?"] },
+  { id: "help", what: "Help: the ? menu and its sheet, its tips and its keys, the tour, a tip in place, What's new, the welcome of a first visit (GuideSpec)", where: "#help-btn, #help-menu, #help, #tour, #intip, #whatsnew, #welcome, [data-tip-open]", keys: ["?"] },
+  // the tour film in the sheet (GuideSpec decision 6, web/src/tourfilm.ts): its keys play it, go
+  // from chapter to chapter, turn its captions on or off, there alone
+  { id: "film", what: "the tour film in the help sheet: playing, its chapters, its captions, its larger sizes", where: "[data-film]", ownKeys: [" ", "ArrowLeft", "ArrowRight", "c"] },
   { id: "library", what: "the Library popover", where: "#library-btn, #library-pop" },
   { id: "board", what: "\u2699 Board: the board's scope, clustering, depth and Re-layout, shared with everyone on it", where: "#board-btn, #board-pop", keys: ["e", "[", "]"] },
   { id: "trusted", what: "Trusted, and trusting without review", where: "#trusted-btn, #trust-list, #trust-pop" },
@@ -16823,11 +16871,11 @@ var YOURS = [
   { id: "meter", what: "the frame meter", keys: ["p"] }
 ];
 var BOOKKEEPING = ["tabs"];
-function followedOf(read) {
-  return Object.assign({}, ...FOLLOWED.map((p2) => read[p2.part]()));
+function followedOf(read2) {
+  return Object.assign({}, ...FOLLOWED.map((p2) => read2[p2.part]()));
 }
-function presenceOf(read, tabs) {
-  return { ...followedOf(read), tabs };
+function presenceOf(read2, tabs) {
+  return { ...followedOf(read2), tabs };
 }
 function applyOwn(v2, apply) {
   for (const p2 of FOLLOWED) {
@@ -16846,6 +16894,7 @@ var REGIONS = [
   ...FOLLOWED.flatMap((p2) => "reads" in p2 ? [{ sel: p2.reads, verdict: "reads" }] : [])
 ];
 var FOLLOWED_KEYS = new Set(FOLLOWED.flatMap((p2) => "keys" in p2 ? [...p2.keys] : []));
+var OWN_KEYS = YOURS.flatMap((y2) => "ownKeys" in y2 ? [{ in: y2.where, keys: y2.ownKeys }] : []);
 var YOURS_KEYS = new Set(YOURS.flatMap((y2) => "keys" in y2 ? [...y2.keys] : []));
 var FIELD_KEYS = FOLLOWED.flatMap((p2) => "fieldKeys" in p2 ? [...p2.fieldKeys] : []);
 var WHOLE = YOURS.flatMap((y2) => "whole" in y2 ? [y2.where] : []).join(", ");
@@ -16877,6 +16926,7 @@ function keyActs(e2, t2, field) {
   const yours = inYours(t2);
   if (field || e2.isComposing) return !yours || !e2.isComposing && FIELD_KEYS.some((k2) => k2.key === e2.key && closest(t2, k2.in) !== null);
   if ((e2.key === "Enter" || e2.key === " ") && closest(t2, PRESSABLE)) return pressActs(t2);
+  if (OWN_KEYS.some((o2) => o2.keys.includes(e2.key) && closest(t2, o2.in) !== null)) return false;
   if ((e2.ctrlKey || e2.metaKey) && e2.key.length === 1) return false;
   if (FOLLOWED_KEYS.has(e2.key)) return true;
   if (yours || YOURS_KEYS.has(e2.key)) return false;
@@ -18346,6 +18396,11 @@ ${tip}">${title(name)}</button>` : `<span class="act-gone" title="${tip}">${titl
           html: `${who(e2.by, e2.agent, e2.person)} undid ${escapeHtml(whose)} layout: ${e2.restored} put back` + (e2.kept.length ? `<div class="act-warn">${e2.kept.length} left where ${e2.kept.length === 1 ? "it is" : "they are"}, moved by someone since: ${e2.kept.slice(0, 8).map((k2) => this.hooks.has(k2) ? decl(k2) : `<span class="act-key">${escapeHtml(k2)}</span>`).join(", ")}${e2.kept.length > 8 ? " \u2026" : ""}</div>` : ""),
           names: e2.kept
         });
+      } else if (e2.kind === "tool") {
+        const v2 = (x2) => `<b>VisualProof ${escapeHtml(x2)}</b>`;
+        const aside = e2.setAside ? `${v2(e2.setAside.version)} was set aside${e2.setAside.why ? `: it ${escapeHtml(e2.setAside.why)}` : ""}. ` : "";
+        const what = e2.from === null || e2.from === e2.to ? `${v2(e2.to)} serves the site` : `Updated from ${escapeHtml(e2.from)} to ${v2(e2.to)}`;
+        out.push({ ...base, by: null, cat: "build", html: `${aside}${what}` });
       }
     }
     return out.sort((a3, b2) => a3.at < b2.at ? 1 : a3.at > b2.at ? -1 : 0);
@@ -18992,9 +19047,1093 @@ var Phone = class {
   }
 };
 
+// src/web/src/tips.ts
+var TOUR = [
+  {
+    id: "target",
+    title: "Mark a target",
+    text: "Search for a theorem, select it, and mark it as a target: the review is about what its statement says.",
+    about: ["#search", "#panel [data-rv-target]", "#targets"],
+    showMe: "ring-target",
+    manual: "review"
+  },
+  {
+    id: "view",
+    title: "A view of what it uses",
+    text: "Rests on \xB7 Uses lights everything it uses. <b>Zoom in</b> opens just that as a view: a board of its own, laid out on its own, shared with everyone.",
+    about: ["#rests-steps [data-mode=deps]", "#selbar [data-zoom]", "#tabs"],
+    showMe: "ring-zoom",
+    manual: "views"
+  },
+  {
+    id: "arrange",
+    title: "Arrange the board",
+    text: "Drag a declaration with <kbd>Ctrl</kbd> held, or let the lock go, to place it for everyone; double-click a circle to fold it, again to open it.",
+    about: ["#canvas", "#lock-btn", "key:l"],
+    showMe: "ring-lock",
+    manual: "what-you-see"
+  },
+  {
+    id: "source",
+    title: "Read the source",
+    text: "<kbd>Space</kbd> opens the source, following the selection. Rest on a name for what Lean says it is; click it to go there.",
+    about: [".sw-win", "key:Space"],
+    showMe: "open-source",
+    manual: "review"
+  },
+  {
+    id: "keys",
+    title: "Key declarations",
+    text: "On the target's view, select the declarations that carry its meaning and mark them key with a click. <b>Keys</b> selects them.",
+    about: ["#panel [data-rv-key]", "#selbar [data-mark-keys]", "#rests-steps [data-mode=keys]"],
+    showMe: "ring-key",
+    // key-in-target: on a view focused on a target T (its review strip shows), the reader approves a
+    // declaration of T's TCB — the second they approved in T's TCB in this page's session — while T
+    // has no key declaration but itself. At #panel [data-rv-key]. Ends: a key marked (k, ◇ Mark as
+    // key, Mark selected as key); Got it.
+    when: "key-in-target",
+    manual: "review"
+  },
+  {
+    id: "checks",
+    title: "Three ways to check",
+    text: "<b>Selection</b>: the statement alone, least effort. <b>Keys</b>: the few that carry the meaning. <b>TCB</b>: all it rests on, most effort, most confidence. The counts say what each costs.",
+    about: ["#lightup [data-mode=plain]", "#rests-steps [data-mode=keys]", "#rests-steps [data-mode=tcb]", "key:2"],
+    showMe: "tcb-three",
+    // tcb-first: the reader's own click selects, under Rests on · TCB, a theorem whose TCB lights
+    // more than itself (not the tour's selection, not one taken by following or by a link opened),
+    // for the first time in this browser. At #rests-steps [data-mode=tcb] on a larger screen, at the
+    // panel's TCB part (#panel .p-tcb) on a phone. Ends: Got it; Show me pressed in it (it runs the
+    // three views); Watch; the reader stepping to another step of Rests on.
+    when: "tcb-first",
+    manual: "how-the-tcb-is-computed"
+  },
+  {
+    id: "review",
+    title: "Comment and approve",
+    text: "Comment or approve each declaration you read: an opinion holds for the version it judged, and the target's progress counts it.",
+    about: ["#panel [data-rv=approve]", "#panel [data-rv=comment]", "#targets"],
+    showMe: "ring-review",
+    manual: "review"
+  },
+  {
+    id: "project",
+    title: "Back to the Project",
+    text: "The Project is the whole codebase; views are slices of it. Every board shows how far the review has come.",
+    about: ["#tabs", "#targets"],
+    manual: "views"
+  },
+  {
+    id: "share",
+    title: "Share",
+    text: "A link for people, a read-only link for readers, and for an AI agent a token with a prompt to paste.",
+    about: ["#share-btn", "#share-pop"],
+    showMe: "ring-share",
+    manual: "together"
+  },
+  {
+    id: "agent",
+    title: "Work with an agent",
+    text: "Ask the agent: it reads the codebase through the API, takes you to the declaration and explains it. It gives advice; approving stays with people.",
+    about: ["#share-pop [data-tab=agent]", "#peers", "#following"],
+    showMe: "share-agent",
+    manual: "together"
+  },
+  {
+    id: "library",
+    title: "Papers and notes",
+    text: "Add a paper to the <b>Library</b> and link it to the declarations it explains; pin notes on the board for everyone.",
+    about: ["#library-btn", ".pw-win", "#stickies"],
+    showMe: "library-pair",
+    manual: "references"
+  },
+  {
+    id: "export",
+    title: "A typeset document",
+    text: "<b>Export</b> draws the view as its outline on one line: drag a section to reorder it, then statements, sources and the review are typeset as a PDF.",
+    about: ["#export-btn", "#export-modal", "#linear"],
+    showMe: "ring-export",
+    // first-export: the Export window opened for the first time in this browser, the linear form
+    // drawn beside it. At #linear. Ends: Got it; Watch; it goes, unanswered, when the window closes.
+    when: "first-export",
+    manual: "exported-documents"
+  },
+  {
+    id: "artwork",
+    title: "Artwork",
+    text: "The board as a poster: frame it, choose what is named, and export a PNG and an SVG.",
+    about: ["#export-modal [data-ex-art]", "#art", "#art-panel"],
+    showMe: "ring-export",
+    manual: "exported-documents"
+  }
+];
+var GROUPS = [
+  { id: "start", title: "Start" },
+  { id: "seeing", title: "Seeing" },
+  { id: "reviewing", title: "Reviewing" },
+  { id: "arranging", title: "Arranging" },
+  { id: "together", title: "Together" },
+  { id: "export", title: "Export" },
+  { id: "history", title: "History" }
+];
+var TIPS = [
+  // ─────────────────────────────────────────────────────────────── start
+  {
+    id: "select-and-modes",
+    group: "start",
+    title: "How a click selects",
+    text: "<b>Mode</b> is how a click selects: just it (<kbd>1</kbd>), what it rests on (<kbd>2</kbd>), or what uses it (<kbd>3</kbd>). Under Selection, Shift-click adds a declaration or takes it off.",
+    who: "all",
+    where: "desktop",
+    since: "0.1.0",
+    about: ["#lightup", "key:1", "key:2", "key:3"],
+    showMe: "ring-modes",
+    // selection-replace: under Selection, the reader clicks a declaration while another one is
+    // selected, three times within 20 s, each click replacing the selection (no Shift). At
+    // #lightup [data-mode=plain]. Ends: a Shift-click that adds to the selection; Got it.
+    when: "selection-replace",
+    manual: "what-you-see"
+  },
+  {
+    id: "phone-fingers",
+    group: "start",
+    title: "Fingers on the board",
+    text: "Drag to move around, pinch to zoom, tap to select. Touch and hold for what can be done with what is under your finger; <b>\u22EF</b> at the top holds the modes.",
+    who: "all",
+    where: "phone",
+    since: "0.2.0",
+    about: ["#canvas", "#more-btn"],
+    clip: "phone-fingers",
+    demo: "A phone's screen (390\xD7844), the Project. One finger drags the board up a little; two fingers pinch it open about the FltRegular circle; a tap on IsRegularPrime: the sheet rises from the bottom to half the screen, on its statement. Finger dots, no pointer.",
+    manual: "on-a-phone"
+  },
+  {
+    id: "updates",
+    group: "start",
+    title: "Kept up to date",
+    text: "A server installed from npm takes VisualProof's fixes by itself, unless told not to, and this page reloads where you were. The help's About says which VisualProof runs.",
+    who: "all",
+    where: "both",
+    since: "0.4.0",
+    about: ["#help"],
+    showMe: "help-about",
+    manual: "updates"
+  },
+  // ─────────────────────────────────────────────────────────────── seeing
+  {
+    id: "rests-on-steps",
+    group: "seeing",
+    title: "Rests on, step by step",
+    text: "Press <kbd>2</kbd> again for the next step: its TCB, the key declarations in it, everything it uses (proofs included), what it uses directly.",
+    who: "all",
+    where: "desktop",
+    since: "0.1.0",
+    about: ["#rests-steps", "key:2"],
+    showMe: "rests-steps",
+    // rests-only-tcb: the reader's fifth pick under Rests on · TCB (counted in this browser), never
+    // having chosen Keys, Uses or Direct. At #rests-steps. Ends: any other step chosen (2 again, or a
+    // click on Keys, Uses or Direct); Got it.
+    when: "rests-only-tcb",
+    manual: "what-you-see"
+  },
+  {
+    id: "used-by",
+    group: "seeing",
+    title: "What uses it",
+    text: "<b>Used by</b> (<kbd>3</kbd>) lights everything that uses a declaration: what a change to it reaches.",
+    who: "all",
+    where: "both",
+    since: "0.1.0",
+    about: ["#lightup [data-mode=apps]", "key:3"],
+    showMe: "used-by",
+    manual: "what-you-see"
+  },
+  {
+    id: "colours-status",
+    group: "seeing",
+    title: "Colour by status",
+    text: "The legend at the bottom left, or <kbd>c</kbd>, colours by what reviewers said: approved, commented, stale, not yet reviewed, trusted. Open it for how many of each.",
+    who: "all",
+    where: "both",
+    since: "0.1.0",
+    about: ["#legend", "key:c"],
+    showMe: "colour-status",
+    manual: "what-you-see"
+  },
+  // ─────────────────────────────────────────────────────────────── reviewing
+  {
+    id: "what-changed",
+    group: "reviewing",
+    title: "What changed",
+    text: "An opinion given on an earlier version says so: <b>What changed</b> shows the lines removed and added since, so a second reading takes only the change.",
+    who: "all",
+    where: "both",
+    since: "0.1.0",
+    about: ["#panel [data-rv-changes]"],
+    showMe: "what-changed",
+    // stale-opinion: the panel shows a declaration with an opinion given on an earlier version (by
+    // anyone), its What changed closed, for the first time in this browser. At the panel's
+    // [data-rv-changes] summary. Ends: What changed opened; Got it.
+    when: "stale-opinion",
+    manual: "review"
+  },
+  {
+    id: "trusted",
+    group: "reviewing",
+    title: "Trusted without review",
+    text: "Mathlib, Lean core and the standard axioms are trusted: not counted, in need of no opinion. <b>Trusted</b>, over the clusters, lists them; a row's shield trusts a part of the project.",
+    who: "full",
+    where: "both",
+    since: "0.1.0",
+    about: ["#trusted-btn", "#trust-list"],
+    showMe: "ring-trusted",
+    manual: "review"
+  },
+  // ─────────────────────────────────────────────────────────────── arranging
+  {
+    id: "drag-to-pin",
+    group: "arranging",
+    title: "Move things",
+    text: "Hold <kbd>Ctrl</kbd> (<kbd>\u2318</kbd> on a Mac) and drag, or let the lock go (<kbd>l</kbd>): what you drop stays there, for everyone on this board. <b>Re-layout</b> drops the pins.",
+    who: "full",
+    where: "desktop",
+    since: "0.1.0",
+    about: ["#lock-btn", "#relayout", "key:l"],
+    showMe: "ring-lock",
+    manual: "what-you-see"
+  },
+  {
+    id: "board-scope",
+    group: "arranging",
+    title: "What a board holds",
+    text: "<b>\u2699 Board</b> sets what is on this board \u2014 chips such as <i>TCB of X</i> or <i>except trusted</i> \u2014 its clustering and its depth, for everyone on it.",
+    who: "full",
+    where: "desktop",
+    since: "0.1.0",
+    about: ["#board-btn", "#board-pop"],
+    showMe: "ring-board",
+    manual: "views"
+  },
+  // ─────────────────────────────────────────────────────────────── together
+  {
+    id: "follow",
+    group: "together",
+    title: "Follow someone",
+    text: "Click someone's initials to see what they see: their view, camera, selection and windows. Anything you change ends it, and so does Esc.",
+    who: "all",
+    where: "both",
+    since: "0.1.0",
+    about: ["#peers", "#following"],
+    showMe: "ring-peers",
+    manual: "together"
+  },
+  {
+    id: "read-only-link",
+    group: "together",
+    title: "Read-only links",
+    text: "Share \u2192 <b>Read-only link</b>: whoever has it reads the project, the review and the history, changes nothing shared, and nobody sees them.",
+    who: "full",
+    where: "both",
+    since: "0.1.0",
+    about: ["#share-btn", "#share-pop [data-tab=readonly]"],
+    showMe: "share-readonly",
+    // share-twice: Share opened for the second time in this page's session, on a server whose Share
+    // has the Read-only link tab (started with --access-key-file), the reader never having opened
+    // that tab in this browser. At #share-pop [data-tab=readonly]. Ends: that tab opened; Got it.
+    // Without that tab on this server, the tip itself is not shown.
+    when: "share-twice",
+    manual: "together"
+  },
+  // ─────────────────────────────────────────────────────────────── export
+  {
+    id: "linear-form",
+    group: "export",
+    title: "The board as an outline",
+    text: "<kbd>o</kbd> draws the board as its document's outline, on one line, the first section at the top: drag along it to reorder what the PDF prints.",
+    who: "full",
+    where: "desktop",
+    since: "0.2.0",
+    about: ["#linear", "key:o"],
+    showMe: "linear",
+    manual: "exported-documents"
+  },
+  // ─────────────────────────────────────────────────────────────── history
+  {
+    id: "time-machine",
+    group: "history",
+    title: "The Time Machine",
+    text: "<kbd>t</kbd> shows this view at a past build: what is gone is a red ghost, what changed since has an amber ring. <kbd>\u2190</kbd> <kbd>\u2192</kbd> step through the builds; Esc leaves.",
+    who: "all",
+    where: "desktop",
+    since: "0.1.0",
+    about: ["#tmbar", "key:t"],
+    showMe: "time-machine",
+    // first-time-machine: the Time Machine opened by the reader (t, the build popover, a link) for
+    // the first time in this browser. At #tmbar, its ruler. Ends: another build reached (← or →);
+    // Got it; Esc puts it away, unanswered.
+    when: "first-time-machine",
+    manual: "review"
+  },
+  {
+    id: "lost-and-found",
+    group: "history",
+    title: "Lost and found",
+    text: "What was said of a declaration the graph no longer has waits in the build status's <b>Lost-and-found</b>: attach it to the new name, or archive it.",
+    who: "full",
+    where: "both",
+    since: "0.1.0",
+    about: ["#build", "#build-pop [data-bp=lost]", "#lostfound"],
+    showMe: "ring-lost",
+    manual: "review"
+  }
+];
+
+// src/web/src/tipstate.ts
+var KEY2 = "visualproof:tips";
+function newer(a3, b2) {
+  const parse2 = (v2) => {
+    const m3 = /^(\d+)\.(\d+)\.(\d+)(?:-(.+))?$/.exec(v2.trim());
+    return m3 ? { n: [+m3[1], +m3[2], +m3[3]], pre: m3[4] ?? null } : null;
+  };
+  const x2 = parse2(a3), y2 = parse2(b2);
+  if (!x2 || !y2) return false;
+  for (let i2 = 0; i2 < 3; i2++) if (x2.n[i2] !== y2.n[i2]) return x2.n[i2] > y2.n[i2];
+  if (x2.pre === y2.pre) return false;
+  if (x2.pre === null) return true;
+  if (y2.pre === null) return false;
+  return x2.pre > y2.pre;
+}
+function read() {
+  let raw;
+  try {
+    raw = localStorage.getItem(KEY2);
+  } catch {
+    return null;
+  }
+  try {
+    const o2 = raw ? JSON.parse(raw) : null;
+    if (!o2 || typeof o2 !== "object") return { shown: {}, counts: {}, done: [] };
+    const ids = (x2) => Array.isArray(x2) ? x2.filter((s2) => typeof s2 === "string") : [];
+    const numbers = (x2) => x2 && typeof x2 === "object" ? Object.fromEntries(Object.entries(x2).filter((e2) => Number.isInteger(e2[1]) && e2[1] > 0)) : {};
+    return { shown: numbers(o2.shown), counts: numbers(o2.counts), done: ids(o2.done), off: o2.off === true || void 0, version: typeof o2.version === "string" ? o2.version : void 0, newSince: typeof o2.newSince === "string" ? o2.newSince : void 0, dot: o2.dot === true || void 0 };
+  } catch {
+    return { shown: {}, counts: {}, done: [] };
+  }
+}
+var TipState = class {
+  d;
+  constructor() {
+    this.d = read() ?? { shown: {}, counts: {}, done: [] };
+    if (typeof addEventListener === "function")
+      addEventListener("storage", (e2) => {
+        if (e2.key === KEY2 || e2.key === null) this.d = read() ?? this.d;
+      });
+  }
+  /** A change made to what is kept as it is now, not to this page's copy of it: pages open at once,
+   *  on one project or on two, never write back each other's older state. */
+  change(f2) {
+    const d2 = read() ?? this.d;
+    const out = f2(d2);
+    this.d = d2;
+    try {
+      localStorage.setItem(KEY2, JSON.stringify(d2));
+    } catch {
+    }
+    return out;
+  }
+  isDone(id) {
+    return this.d.done.includes(id);
+  }
+  done(id) {
+    if (this.isDone(id)) return;
+    this.change((d2) => {
+      if (!d2.done.includes(id)) d2.done.push(id);
+    });
+  }
+  /** A tip shown in place: the second time, it is done, answered or not. */
+  shown(id) {
+    this.change((d2) => {
+      const n3 = (d2.shown[id] ?? 0) + 1;
+      d2.shown[id] = n3;
+      if (n3 >= 2 && !d2.done.includes(id)) d2.done.push(id);
+    });
+  }
+  /** One more of what a rule counts; how many now. */
+  bump(name) {
+    return this.change((d2) => d2.counts[name] = (d2.counts[name] ?? 0) + 1);
+  }
+  get off() {
+    return this.d.off === true;
+  }
+  set off(v2) {
+    this.change((d2) => void (d2.off = v2 || void 0));
+  }
+  /** The dot on the help: shown until the help is opened, the tour taken, or Tips looked at. */
+  get dot() {
+    return this.d.dot === true;
+  }
+  set dot(v2) {
+    if (this.dot === v2 && read()?.dot === (v2 || void 0)) return;
+    this.change((d2) => void (d2.dot = v2 || void 0));
+  }
+  /** The releases New is told against: tips newer than `since` are New; null when none is. */
+  get newSince() {
+    return this.d.newSince ?? null;
+  }
+  /** Tips has been looked at: nothing is New any more. */
+  newLooked() {
+    if (this.d.newSince === void 0 && read()?.newSince === void 0) return;
+    this.change((d2) => void (d2.newSince = void 0));
+  }
+  /** The server runs release `v`: the release this browser saw before it when it is newer (What's
+   *  new is told), else null. Read and written at once, so that it is told once in the browser, not
+   *  once in each page open. A first visit records it and tells nothing. */
+  meet(v2) {
+    return this.change((d2) => {
+      const was = d2.version;
+      if (was === v2) return null;
+      if (was !== void 0 && !newer(v2, was)) return null;
+      d2.version = v2;
+      if (was !== void 0) d2.newSince = d2.newSince !== void 0 && newer(was, d2.newSince) ? d2.newSince : was;
+      return was ?? null;
+    });
+  }
+};
+
+// src/web/src/tipcards.ts
+function tipsFor(ctx, tips = TIPS) {
+  return tips.filter((t2) => !(ctx.readOnly && t2.who === "full") && (t2.where === "both" || t2.where === (ctx.phone ? "phone" : "desktop")) && ctx.applies(t2));
+}
+function plain(html) {
+  return html.replace(/<[^>]*>/g, "").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+function matches(t2, filter) {
+  const words = filter.toLowerCase().split(/\s+/).filter(Boolean);
+  const text2 = `${t2.title} ${plain(t2.text)}`.toLowerCase();
+  return words.every((w2) => text2.includes(w2));
+}
+var reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+function actsHtml(showMe, manual, ctx, attr) {
+  const acts2 = [
+    showMe && ctx.canShow(showMe) ? `<button class="link" ${attr}>Show me</button>` : "",
+    manual ? `<a class="link" href="${ctx.manual}#${manual}" target="_blank" rel="noopener noreferrer">More</a>` : ""
+  ].filter(Boolean);
+  return acts2.length ? `<div class="tip-acts">${acts2.join("")}</div>` : "";
+}
+function rowHtml(t2, ctx, open) {
+  const isNew = ctx.newSince !== null && newer(t2.since, ctx.newSince);
+  const clip = open && ctx.phone && t2.clip && ctx.clips.has(t2.clip) ? `<div class="ref-clip"><video muted loop playsinline preload="auto" poster="/tips/${t2.clip}.light.webp" src="/tips/${t2.clip}.light.mp4"${reducedMotion() ? " controls" : " autoplay"} aria-label="${escapeHtml(t2.title)}: a short clip"></video></div>` : "";
+  return `<div class="ref${open ? " open" : ""}" data-tip="${t2.id}"><button class="ref-head" data-ref-toggle="${t2.id}" aria-expanded="${open}"><span class="ref-title">${escapeHtml(t2.title)}${isNew ? ` <span class="tip-new">New</span>` : ""}</span><span class="ref-line">${escapeHtml(plain(t2.text))}</span></button>` + (open ? `<div class="ref-body"><div class="tip-text">${t2.text}</div>${clip}${actsHtml(t2.showMe, t2.manual, ctx, `data-tip-show="${t2.id}"`)}</div>` : "") + `</div>`;
+}
+function refsHtml(ctx, filter, open) {
+  const mine = tipsFor(ctx).filter((t2) => matches(t2, filter));
+  if (!mine.length) return `<div class="tips-none help-note">No tip says that. The <b>Keys</b> tab lists every key.</div>`;
+  return GROUPS.map((g2) => {
+    const of = mine.filter((t2) => t2.group === g2.id);
+    return of.length ? `<section class="tips-group"><div class="help-h">${g2.title}</div><div class="refs">${of.map((t2) => rowHtml(t2, ctx, t2.id === open)).join("")}</div></section>` : "";
+  }).join("");
+}
+
+// src/web/src/tourfilm.ts
+function tourData(raw, tour) {
+  const o2 = raw;
+  const f2 = o2?.film;
+  if (!f2 || typeof f2.duration !== "number" || !(f2.duration > 0) || !Array.isArray(o2.chapters)) return null;
+  const duration = f2.duration;
+  const byId = /* @__PURE__ */ new Map();
+  for (const c3 of o2.chapters)
+    if (c3 && typeof c3.id === "string" && typeof c3.start === "number" && typeof c3.end === "number" && c3.end > c3.start) byId.set(c3.id, { start: c3.start, end: c3.end });
+  const chapters = [];
+  let at = 0;
+  for (const c3 of tour) {
+    const t2 = byId.get(c3.id);
+    if (!t2 || t2.start < at - 0.05 || t2.end > duration + 0.05) return null;
+    chapters.push({ id: c3.id, ...t2 });
+    at = t2.end;
+  }
+  const captions = (Array.isArray(o2.captions) ? o2.captions : []).filter((c3) => !!c3 && typeof c3.start === "number" && typeof c3.end === "number" && c3.end > c3.start && c3.start >= 0 && c3.end <= duration + 0.05 && typeof c3.text === "string" && !!c3.text.trim() && c3.text.length <= 200).map((c3) => ({ start: c3.start, end: c3.end, text: c3.text.trim() })).sort((a3, b2) => a3.start - b2.start);
+  const w2 = typeof f2.width === "number" && f2.width > 0 ? f2.width : 16;
+  const h2 = typeof f2.height === "number" && f2.height > 0 ? f2.height : 10;
+  return { duration, width: w2, height: h2, chapters, captions };
+}
+function cueAt(captions, t2) {
+  let lo = 0, hi = captions.length - 1, found = null;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    if (captions[mid].start <= t2) {
+      found = captions[mid];
+      lo = mid + 1;
+    } else hi = mid - 1;
+  }
+  return found && t2 < found.end ? found : null;
+}
+function cuesOf(captions, ch) {
+  return captions.filter((c3) => c3.start >= ch.start - 0.01 && c3.start < ch.end);
+}
+var POLL_FIRST_MS = 2e3;
+var POLL_QUICK_FOR_MS = 3e4;
+var POLL_LATER_S = 10;
+var PAGE_CLOCK = { now: () => Date.now(), after: (f2, ms) => setTimeout(f2, ms), cancel: (t2) => clearTimeout(t2) };
+var FilmWaiter = class {
+  ask;
+  told;
+  clock;
+  timer = null;
+  /** when the asking began, for the first quick ones */
+  since = null;
+  running = false;
+  done = false;
+  constructor(ask, told, clock = PAGE_CLOCK) {
+    this.ask = ask;
+    this.told = told;
+    this.clock = clock;
+  }
+  start() {
+    if (this.running || this.done) return;
+    this.running = true;
+    this.since ??= this.clock.now();
+    void this.tick();
+  }
+  stop() {
+    this.running = false;
+    if (this.timer !== null) this.clock.cancel(this.timer);
+    this.timer = null;
+  }
+  async tick() {
+    this.timer = null;
+    let a3;
+    try {
+      a3 = await this.ask();
+    } catch {
+      a3 = { status: 0, retryAfter: null };
+    }
+    if (!this.running) return;
+    if (a3.status === 200 || a3.status === 206 || a3.status === 404) {
+      this.done = true;
+      this.running = false;
+      return this.told(a3.status === 404 ? "absent" : "ready");
+    }
+    this.told("loading");
+    const quick = this.clock.now() - this.since < POLL_QUICK_FOR_MS;
+    this.timer = this.clock.after(() => void this.tick(), quick ? POLL_FIRST_MS : Math.max(POLL_FIRST_MS, (a3.retryAfter ?? POLL_LATER_S) * 1e3));
+  }
+};
+async function askFilm() {
+  const r2 = await fetch(FILM, { headers: { range: "bytes=0-0" }, cache: "no-store" });
+  void r2.body?.cancel().catch(() => {
+  });
+  const after = Number(r2.headers.get("retry-after"));
+  return { status: r2.status, retryAfter: Number.isFinite(after) && after > 0 ? after : null };
+}
+var FILM_KEYS = [" ", "ArrowLeft", "ArrowRight", "c"];
+var FILM = "/tips/tour.mp4";
+var POSTER = "/tips/tour.webp";
+var VTT = "/tips/tour.en.vtt";
+var stillOf = (id) => `/tips/tour-${id}.webp`;
+var CC_KEY = "visualproof:cc";
+function ccOn() {
+  try {
+    return localStorage.getItem(CC_KEY) !== "off";
+  } catch {
+    return true;
+  }
+}
+var TourFilm = class {
+  root;
+  tour;
+  data;
+  opts;
+  /** the chapter open: playing, or shown */
+  at = 0;
+  video = null;
+  /** whether the film is here: not yet known, being fetched by the server, there, or not (404) */
+  film = "unknown";
+  /** whether the reader wants it playing: not after they paused it, nor with reduced motion */
+  wantPlay;
+  waiter = null;
+  cc = ccOn();
+  /** normal, as large as the sheet, the whole screen */
+  size = 0;
+  frame = 0;
+  onFullscreen = () => {
+    if (this.size === 2 && !document.fullscreenElement) this.resize(1);
+  };
+  constructor(root, tour, data, opts) {
+    this.root = root;
+    this.tour = tour;
+    this.data = data;
+    this.opts = opts;
+    this.wantPlay = !opts.still;
+    root.addEventListener("click", (e2) => {
+      const t2 = e2.target;
+      const go = t2.closest("[data-chapter]");
+      if (t2.closest("[data-film-play]")) this.toggle();
+      else if (t2.closest("[data-film-cc]")) this.setCc(!this.cc);
+      else if (t2.closest("[data-film-large]")) this.resize(this.size === 0 ? 1 : this.size === 1 ? 2 : 1);
+      else if (t2.closest("[data-film-list]")) root.querySelector(".film")?.classList.toggle("list-hidden");
+      else if (go && !t2.closest("a, [data-tour-show]")) this.go(this.index(go.dataset.chapter), true);
+    });
+    root.addEventListener("keydown", (e2) => {
+      const t2 = e2.target;
+      const card = t2.closest(".film-card[data-chapter]");
+      if (card && (e2.key === "Enter" || e2.key === " ")) {
+        e2.preventDefault();
+        e2.stopPropagation();
+        return this.go(this.index(card.dataset.chapter), true);
+      }
+      if (!this.data || t2.closest("button, a, input") || !FILM_KEYS.includes(e2.key) || e2.ctrlKey || e2.metaKey || e2.altKey) return;
+      e2.preventDefault();
+      e2.stopPropagation();
+      if (e2.key === " ") this.toggle();
+      else if (e2.key === "c") this.setCc(!this.cc);
+      else this.go(Math.max(0, Math.min(this.tour.length - 1, this.at + (e2.key === "ArrowLeft" ? -1 : 1))), !!this.video && !this.video.paused);
+    });
+    document.addEventListener("fullscreenchange", this.onFullscreen);
+    this.render();
+  }
+  index(id) {
+    return Math.max(0, this.tour.findIndex((c3) => c3.id === id));
+  }
+  /** Whether it is larger than the sheet's own place: Esc steps it back (`back`). */
+  get large() {
+    return this.size > 0;
+  }
+  /** Esc: from the whole screen to the sheet, from the sheet to its place. True where it stepped. */
+  back() {
+    if (this.size === 0) return false;
+    this.resize(this.size - 1);
+    return true;
+  }
+  /** The words of an open card: its text, its captions where the film is not playing them (no film,
+   *  reduced motion), its actions. */
+  body(c3, k2) {
+    const ch = this.data?.chapters[k2];
+    const cues = ch && (this.film === "absent" || this.film === "loading" || this.opts.still) ? cuesOf(this.data.captions, ch) : [];
+    const list2 = cues.length ? `<ol class="film-cues" aria-label="Captions">${cues.map((q2) => `<li>${escapeHtml(q2.text)}</li>`).join("")}</ol>` : "";
+    return `<div class="tip-text">${c3.text}</div>${list2}${this.opts.acts(c3)}`;
+  }
+  render() {
+    const cards = this.tour.map((c3, k2) => {
+      const on = k2 === this.at;
+      return `<li class="film-item${on ? " on" : ""}"><div class="film-card" data-chapter="${c3.id}" role="button" tabindex="0" aria-expanded="${on}"${on ? ` aria-current="step"` : ""}><span class="film-n">${k2 + 1}</span><span class="film-title">${escapeHtml(c3.title)}</span></div><div class="film-body"${on ? "" : " hidden"}>${on ? this.body(c3, k2) : ""}</div></li>`;
+    }).join("");
+    const name = `A review in ${this.tour.length === 13 ? "thirteen" : this.tour.length} scenes`;
+    if (!this.data) {
+      this.root.innerHTML = `<ol class="film-list words" aria-label="${name}">${cards}</ol>`;
+      this.video = null;
+      return;
+    }
+    const d2 = this.data;
+    const segs = d2.chapters.map((t2, k2) => `<button class="film-seg" data-chapter="${t2.id}" style="flex-grow: ${(t2.end - t2.start).toFixed(2)}" aria-label="${k2 + 1}. ${escapeHtml(this.tour[k2].title)}" title="${escapeHtml(this.tour[k2].title)}"><span class="film-track"><span class="film-fill"></span></span></button>`).join("");
+    const fs = typeof document.documentElement.requestFullscreen === "function";
+    this.root.innerHTML = `<div class="film"><div class="film-stage" tabindex="0" aria-label="${name}: Space plays or pauses, the arrows go to the chapter before or after, c turns the captions on or off"><div class="film-frame" style="aspect-ratio: ${d2.width} / ${d2.height}"><video class="film-video" muted playsinline preload="metadata" poster="${POSTER}" aria-label="${name}: the film"><track kind="captions" src="${VTT}" srclang="en" label="English" default></video><img class="film-still" alt="" hidden><div class="film-wait" role="status" hidden>Loading the film\u2026</div><div class="film-cc" aria-hidden="true" hidden></div><div class="film-controls"><button data-film-play aria-label="Play" title="Play">\u25B6</button><span class="film-gap"></span><button data-film-cc aria-pressed="${this.cc}" title="Captions (c)">CC</button><button data-film-large aria-label="Larger" title="Larger">\u2922</button></div></div><div class="film-bar" role="group" aria-label="Chapters">${segs}</div></div><div class="film-side"><button class="film-list-btn" data-film-list title="Show or hide the chapters">Chapters</button><ol class="film-list" aria-label="Chapters">${cards}</ol></div></div>`;
+    if (!fs) this.root.querySelector("[data-film-large]").dataset.noFull = "";
+    const v2 = this.root.querySelector("video");
+    this.video = v2;
+    const hide = () => {
+      for (const tt2 of Array.from(v2.textTracks)) tt2.mode = "hidden";
+    };
+    v2.textTracks.addEventListener?.("addtrack", hide);
+    v2.addEventListener("loadedmetadata", hide);
+    hide();
+    v2.addEventListener("loadedmetadata", () => {
+      if (this.film !== "unknown") return;
+      this.film = "ok";
+      v2.currentTime = this.data.chapters[this.at].start;
+      if (this.wantPlay && !this.opts.still) {
+        this.hideStill();
+        void v2.play().catch(() => {
+        });
+      } else if (this.opts.still) this.showStill(this.at);
+      else this.hideStill();
+      this.show();
+    });
+    v2.addEventListener("error", () => {
+      if (!v2.getAttribute("src")) return;
+      this.film = "absent";
+      this.show();
+    });
+    this.waiter = new FilmWaiter(askFilm, (state) => {
+      if (state === "ready") {
+        this.film = "unknown";
+        v2.src = FILM;
+        v2.load();
+      } else this.film = state;
+      this.show();
+    });
+    v2.addEventListener("play", () => this.sync());
+    v2.addEventListener("pause", () => this.sync());
+    v2.addEventListener("ended", () => this.sync());
+    v2.addEventListener("timeupdate", () => this.follow());
+    v2.addEventListener("seeked", () => this.follow());
+  }
+  /** Begin at a chapter (the first by default): it plays, unless motion is reduced — once the server
+   *  has the film, which is asked for while the sheet shows. */
+  start(id) {
+    this.go(id ? this.index(id) : 0, !this.opts.still);
+    this.waiter?.start();
+  }
+  /** Chapter `k` open, the film at its start: playing if `play`; else (reduced motion, no film)
+   *  the chapter's still, and the play button plays from there. */
+  go(k2, play) {
+    this.open(k2);
+    const v2 = this.video;
+    if (!v2 || !this.data) return;
+    if (play && !this.opts.still) this.wantPlay = true;
+    if (this.film === "ok") v2.currentTime = this.data.chapters[k2].start;
+    if (this.opts.still || this.film !== "ok" || !play) {
+      v2.pause();
+      if (this.opts.still || this.film !== "ok") this.showStill(k2);
+    } else {
+      this.hideStill();
+      void v2.play().catch(() => {
+      });
+    }
+    this.sync();
+  }
+  showStill(k2) {
+    const still = this.root.querySelector(".film-still");
+    if (!still) return;
+    still.src = stillOf(this.tour[k2].id);
+    still.hidden = false;
+  }
+  hideStill() {
+    const still = this.root.querySelector(".film-still");
+    if (still) still.hidden = true;
+  }
+  /** The film found, coming, or not: the open card again (its captions listed or not), its still,
+   *  the quiet word that it is loading. */
+  show() {
+    this.open(this.at, true);
+    if (this.film === "absent" || this.film === "loading" || this.opts.still) this.showStill(this.at);
+    const wait = this.root.querySelector(".film-wait");
+    if (wait) wait.hidden = this.film !== "loading";
+    this.sync();
+  }
+  /** The play button: play or pause; at the end, again from the start; while the film comes, to
+   *  play it when it does; without one here, nothing. */
+  toggle() {
+    const v2 = this.video;
+    if (!v2 || !this.data) return;
+    if (this.film !== "ok") {
+      if (this.film !== "absent" && !this.opts.still) this.wantPlay = !this.wantPlay;
+      return this.sync();
+    }
+    if (v2.ended || v2.currentTime >= this.data.duration - 0.05) {
+      v2.currentTime = 0;
+      this.open(0);
+    }
+    if (v2.paused) {
+      this.wantPlay = true;
+      this.hideStill();
+      void v2.play().catch(() => {
+      });
+    } else {
+      this.wantPlay = false;
+      v2.pause();
+    }
+  }
+  setCc(on) {
+    this.cc = on;
+    try {
+      if (on) localStorage.removeItem(CC_KEY);
+      else localStorage.setItem(CC_KEY, "off");
+    } catch {
+    }
+    this.root.querySelector("[data-film-cc]")?.setAttribute("aria-pressed", String(on));
+    this.follow();
+  }
+  /** Normal, as large as the sheet, or the whole screen (the browser's fullscreen). */
+  resize(size) {
+    const stage = this.root.querySelector(".film-stage");
+    if (size === 2 && (!stage || typeof stage.requestFullscreen !== "function")) size = 1;
+    if (size === 2) void stage.requestFullscreen().catch(() => {
+    });
+    else if (this.size === 2 && document.fullscreenElement) void document.exitFullscreen().catch(() => {
+    });
+    this.size = size;
+    this.opts.sheet.classList.toggle("film-large", size > 0);
+    const b2 = this.root.querySelector("[data-film-large]");
+    if (b2) {
+      const label = size === 0 ? "Larger" : size === 1 ? "The whole screen" : "Back to the sheet";
+      b2.textContent = size === 2 ? "\u2921" : "\u2922";
+      b2.setAttribute("aria-label", label);
+      b2.title = label;
+    }
+    this.root.querySelector(".film-stage")?.focus();
+  }
+  /** The card of chapter `k` open, the others one row each. */
+  open(k2, again = false) {
+    if (k2 === this.at && !again && this.root.querySelector(".film-item.on")) return;
+    this.at = k2;
+    const items = this.root.querySelectorAll(".film-item");
+    items.forEach((li2, j2) => {
+      const on = j2 === k2;
+      li2.classList.toggle("on", on);
+      const card = li2.querySelector(".film-card");
+      card.setAttribute("aria-expanded", String(on));
+      if (on) card.setAttribute("aria-current", "step");
+      else card.removeAttribute("aria-current");
+      const body = li2.querySelector(".film-body");
+      body.hidden = !on;
+      body.innerHTML = on ? this.body(this.tour[j2], j2) : "";
+    });
+    const list2 = this.root.querySelector(".film-list");
+    const li = items[k2];
+    if (list2 && li && list2.scrollHeight > list2.clientHeight) {
+      const top = li.offsetTop - list2.offsetTop, bottom = top + li.offsetHeight;
+      if (top < list2.scrollTop) list2.scrollTop = top;
+      else if (bottom > list2.scrollTop + list2.clientHeight) list2.scrollTop = bottom - list2.clientHeight;
+    }
+  }
+  /** The card that follows the film, the bar filled as far as it played, the caption of now. */
+  follow() {
+    const v2 = this.video;
+    if (!v2 || !this.data) return;
+    const t2 = v2.currentTime;
+    const cs = this.data.chapters;
+    if (this.film === "ok") {
+      let k2 = cs.findIndex((c3) => t2 < c3.end);
+      if (k2 < 0) k2 = cs.length - 1;
+      if (k2 !== this.at) this.open(k2);
+    }
+    this.root.querySelectorAll(".film-fill").forEach((f2, j2) => {
+      const c3 = cs[j2];
+      const at = this.film !== "ok" ? j2 < this.at ? 1 : 0 : t2 >= c3.end ? 1 : t2 <= c3.start ? 0 : (t2 - c3.start) / (c3.end - c3.start);
+      f2.style.transform = `scaleX(${at.toFixed(4)})`;
+    });
+    const box = this.root.querySelector(".film-cc");
+    if (box) {
+      const still = this.root.querySelector(".film-still");
+      const cue = this.cc && this.film === "ok" && (!still || still.hidden) ? cueAt(this.data.captions, t2) : null;
+      if (cue) {
+        if (box.textContent !== cue.text) box.textContent = cue.text;
+        box.hidden = false;
+      } else box.hidden = true;
+    }
+  }
+  /** The play button as the film is, and the bar and captions following it while it plays. */
+  sync() {
+    const v2 = this.video;
+    if (!v2) return;
+    const b2 = this.root.querySelector("[data-film-play]");
+    const end = v2.ended;
+    const playing = this.film === "ok" ? !v2.paused : this.wantPlay && !this.opts.still;
+    b2.textContent = end ? "\u21BB" : playing ? "\u275A\u275A" : "\u25B6";
+    b2.toggleAttribute("disabled", this.film === "absent");
+    const label = this.film === "absent" ? "The film is not on this server" : end ? "Play again from the start" : playing ? "Pause" : "Play";
+    b2.setAttribute("aria-label", label);
+    b2.title = label;
+    cancelAnimationFrame(this.frame);
+    const tick = () => {
+      this.follow();
+      if (this.video && !this.video.paused) this.frame = requestAnimationFrame(tick);
+    };
+    tick();
+  }
+  stop() {
+    cancelAnimationFrame(this.frame);
+    this.waiter?.stop();
+    this.video?.pause();
+    if (this.size) this.resize(0);
+    document.removeEventListener("fullscreenchange", this.onFullscreen);
+  }
+};
+
+// src/web/src/intip.ts
+var RULES = {
+  "selection-replace": { at: "#lightup [data-mode=plain]" },
+  "tcb-first": { at: "#rests-steps [data-mode=tcb]", phone: "#panel .p-tcb" },
+  "rests-only-tcb": { at: "#rests-steps" },
+  "key-in-target": { at: "#panel [data-rv-key]" },
+  "stale-opinion": { at: "#panel [data-rv-changes]" },
+  "share-twice": { at: "#share-pop [data-tab=readonly]" },
+  "first-export": { at: "#linear" },
+  "first-time-machine": { at: "#tmbar" }
+};
+function inPlaceOf(rule) {
+  const t2 = TIPS.find((x2) => x2.when === rule);
+  if (t2) return { key: t2.id, title: t2.title, text: t2.text, showMe: t2.showMe, tip: t2 };
+  const c3 = TOUR.find((x2) => x2.when === rule);
+  return c3 ? { key: `tour-${c3.id}`, title: c3.title, text: c3.text, showMe: c3.showMe, chapter: c3.id } : null;
+}
+var STAYS_MS = 15e3;
+var SETTLE_MS = 600;
+var InTips = class {
+  el;
+  /** the rule shown in this page's session, if one was */
+  used = null;
+  /** no tip in place in this session: the tour ran */
+  quiet = false;
+  anchor = null;
+  follow = null;
+  stay = null;
+  state;
+  hooks;
+  constructor(state, hooks) {
+    this.state = state;
+    this.hooks = hooks;
+    this.el = document.getElementById("intip");
+    this.el.addEventListener("click", (e2) => {
+      const t2 = e2.target;
+      const shown = this.entry();
+      if (!shown) return;
+      if (t2.closest("[data-intip-ok]")) this.end(true);
+      else if (t2.closest("[data-intip-show]")) {
+        this.end(true);
+        this.hooks.showMe(shown);
+      } else if (t2.closest("[data-intip-watch]") && shown.chapter) {
+        this.end(true);
+        this.hooks.watch(shown.chapter);
+      }
+    });
+    window.addEventListener("keydown", (e2) => {
+      if (e2.key === "Escape" && !this.el.hidden) this.end(false);
+    });
+    document.addEventListener("pointerdown", (e2) => {
+      if (!this.el.hidden && !this.el.contains(e2.target)) this.end(false);
+    });
+    window.addEventListener("resize", () => this.place());
+  }
+  /** The tour ran in this session: nothing more is shown in place in it. */
+  hush() {
+    this.quiet = true;
+    this.end(false);
+  }
+  entry() {
+    return this.used ? inPlaceOf(this.used) : null;
+  }
+  /** Whether a rule's tip would show now, were its moment to come: what the page asks before it
+   *  counts anything for it. */
+  open(rule) {
+    if (this.used !== null || this.quiet || this.state.off || this.hooks.blocked()) return false;
+    const e2 = inPlaceOf(rule);
+    return !!e2 && !!RULES[rule] && !this.state.isDone(e2.key) && (!e2.tip || this.hooks.fits(e2.tip));
+  }
+  /** One more of what a rule counts, kept across visits (the picks under one step): how many now;
+   *  nothing is counted once the rule's tip is done. */
+  count(name, rule) {
+    const e2 = inPlaceOf(rule);
+    return !e2 || this.state.isDone(e2.key) ? 0 : this.state.bump(name);
+  }
+  /** The page says a rule's moment came: its tip shows once what triggered it has settled, unless
+   *  one did in this session, the reader had it already, turned tips off, or the page is busy. */
+  offer(rule) {
+    if (!this.open(rule)) return;
+    this.used = rule;
+    setTimeout(() => {
+      const tip = this.entry();
+      const r2 = RULES[rule];
+      const sel = isPhone() && r2.phone || r2.at;
+      const at = document.querySelector(sel);
+      if (!tip || this.hooks.blocked() || !at || at.hidden || !at.getBoundingClientRect().width) {
+        this.used = null;
+        return;
+      }
+      this.anchor = sel;
+      this.state.shown(tip.key);
+      const watch = tip.chapter && this.hooks.canWatch() ? `<button class="rv-btn" data-intip-watch>Watch</button>` : "";
+      this.el.innerHTML = `<div class="intip-title">${escapeHtml(tip.title)}</div><div class="intip-text">${tip.text}</div><div class="intip-acts">${watch}${tip.showMe ? `<button class="rv-btn" data-intip-show>Show me</button>` : ""}<button class="rv-btn primary" data-intip-ok>Got it</button></div>`;
+      this.el.hidden = false;
+      this.place();
+      this.follow = setInterval(() => this.place(), 400);
+      this.stay = setTimeout(() => this.end(false), STAYS_MS);
+    }, SETTLE_MS);
+  }
+  /** The reader did what a rule's tip teaches: it is done, shown or not. */
+  did(rule) {
+    const tip = inPlaceOf(rule);
+    if (!tip || this.state.isDone(tip.key)) return;
+    this.state.done(tip.key);
+    if (this.used === rule && !this.el.hidden) this.end(false);
+  }
+  end(done) {
+    if (this.follow) clearInterval(this.follow);
+    if (this.stay) clearTimeout(this.stay);
+    this.follow = this.stay = null;
+    const tip = this.entry();
+    if (done && tip) this.state.done(tip.key);
+    this.el.hidden = true;
+  }
+  /** Beside its control: below it where there is room, else above, within the screen. */
+  place() {
+    if (this.el.hidden || !this.anchor) return;
+    const at = document.querySelector(this.anchor);
+    if (!at || !at.getBoundingClientRect().width) return this.end(false);
+    const r2 = at.getBoundingClientRect();
+    const w2 = this.el.offsetWidth, h2 = this.el.offsetHeight, gap = 10;
+    const below = innerHeight - r2.bottom >= h2 + gap + 8;
+    const x2 = Math.max(8, Math.min(r2.left + r2.width / 2 - w2 / 2, innerWidth - w2 - 8));
+    const y2 = below ? r2.bottom + gap : Math.max(8, r2.top - h2 - gap);
+    this.el.style.transform = `translate(${Math.round(x2)}px, ${Math.round(y2)}px)`;
+    this.el.classList.toggle("above", !below);
+    this.el.style.setProperty("--arrow-x", `${Math.round(Math.max(14, Math.min(r2.left + r2.width / 2 - x2, w2 - 14)))}px`);
+  }
+};
+
+// src/web/src/popover.ts
+var Popover = class {
+  btn;
+  el;
+  /** puts the panel where it goes, once it is shown (it has a size then) */
+  place;
+  /** what a press may land on without closing it: another window it opened (a question, the
+   *  name), as selectors */
+  keep;
+  /** told when it opens (to draw what it holds) or closes */
+  changed;
+  constructor(btn, el, opts = {}) {
+    this.btn = btn;
+    this.el = el;
+    this.place = opts.place ?? null;
+    this.keep = opts.keep ?? "";
+    this.changed = opts.changed ?? (() => {
+    });
+    btn.addEventListener("click", () => this.toggle());
+    document.addEventListener("pointerdown", (e2) => {
+      const t2 = e2.target;
+      if (this.el.hidden || !t2 || this.el.contains(t2) || this.btn.contains(t2) || this.keep && t2.closest?.(this.keep)) return;
+      this.toggle(false);
+    });
+    window.addEventListener("resize", () => {
+      if (!this.el.hidden) this.place?.();
+    });
+  }
+  get open() {
+    return !this.el.hidden;
+  }
+  toggle(open = this.el.hidden) {
+    if (open === !this.el.hidden) return;
+    this.el.hidden = !open;
+    this.btn.classList.toggle("on", open);
+    this.btn.setAttribute("aria-expanded", String(open));
+    this.changed(open);
+    if (open) this.place?.();
+  }
+};
+function besideSide(btn, el) {
+  const side2 = document.querySelector("#side")?.getBoundingClientRect();
+  const at = btn.getBoundingClientRect();
+  const left = side2 && side2.width ? side2.right + 8 : at.left;
+  const top = Math.max(66, Math.min(at.top - 6, innerHeight - el.offsetHeight - 12, innerHeight - 240));
+  el.style.left = `${Math.round(Math.max(12, Math.min(left, innerWidth - el.offsetWidth - 12)))}px`;
+  el.style.top = `${Math.round(top)}px`;
+  el.style.maxHeight = `${Math.round(innerHeight - top - 12)}px`;
+}
+
 // src/web/src/guide.ts
 var $2 = (sel) => document.querySelector(sel);
+function welcomeOf(o2) {
+  if (o2.guided || o2.welcomed) return "none";
+  return o2.deepLink || o2.following || o2.snapshot ? "dot" : "card";
+}
+function filmChapterOf(id) {
+  return id && TOUR.some((c3) => c3.id === id) ? id : null;
+}
+var WELCOME_IDLE_MS = 2e3;
+var GUIDE_SHOWS = ["tcb-three", "help-about"];
 var REPO = "https://github.com/LucianoXu/VisualProof";
+var MANUAL = `${REPO}/blob/main/docs/MANUAL.md`;
 function around(...sels) {
   let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
   for (const s2 of sels) {
@@ -19009,6 +20148,15 @@ function around(...sels) {
   }
   return isFinite(x0) ? new DOMRect(x0, y0, x1 - x0, y1 - y0) : null;
 }
+function board() {
+  const side2 = $2("#side")?.getBoundingClientRect();
+  const panel = $2("#panel.open")?.getBoundingClientRect();
+  const left = side2 && side2.width && !isPhone() ? side2.right + 8 : 12;
+  const right = panel && panel.width && !isPhone() ? panel.left - 8 : innerWidth - 12;
+  const top = isPhone() ? 104 : 108;
+  const bottom = isPhone() && panel && panel.height ? panel.top - 8 : innerHeight - 48;
+  return new DOMRect(left, top, Math.max(40, right - left), Math.max(40, bottom - top));
+}
 var TOUCH = [
   [
     "The board",
@@ -19096,7 +20244,7 @@ var KEYS = [
       { k: ["c"], what: "colour by kind or by status, for you" },
       { k: ["b"], what: "build status" },
       { k: ["p"], what: "frame meter" },
-      { k: ["?"], what: "this sheet" }
+      { k: ["?"], what: "this sheet: the tips, and the keys" }
     ]
   ],
   [
@@ -19124,11 +20272,43 @@ var Guide = class {
   hooks;
   steps = [];
   k = 0;
+  /** the view of a step with views */
+  v = 0;
+  /** the tour as a whole, or one step for a tip's Show me (GuideSpec decision 7) */
+  kind = "tour";
+  /** where the reader was when the tour began: theirs again when it ends (GuideSpec decision 3) */
+  placeBefore = null;
   el;
   spot;
   shades;
   card;
   help;
+  news;
+  /** the help menu, under ? (GuideSpec decision 8) */
+  menu;
+  menuPop;
+  /** the welcome card of a first visit (decision 1) */
+  welcomeEl;
+  welcomeOff = null;
+  tips = new TipState();
+  inPlace;
+  /** the tour film in the sheet, while it shows */
+  film = null;
+  /** what the recording says of the film; null: none here (a snapshot), the cards their words;
+   *  undefined: not known yet */
+  tourData = void 0;
+  /** the reference tip open, one at a time */
+  openRef = null;
+  /** the chapter the film starts at in this showing of the sheet (an ⓘ, Watch); null: the first */
+  startAt = null;
+  tab = "tips";
+  filter = "";
+  clipsHad = null;
+  /** the release tips newer than which are New while the sheet shows (decision 11); undefined until
+   *  Tips is looked at in this showing of the sheet */
+  newShown = void 0;
+  /** the release the server runs, as its event stream said (UpdateSpec); null until it says */
+  running = null;
   constructor(store, hooks) {
     this.store = store;
     this.hooks = hooks;
@@ -19137,11 +20317,76 @@ var Guide = class {
     this.shades = [...this.el.querySelectorAll(".tour-shade")];
     this.card = this.el.querySelector(".tour-card");
     this.help = $2("#help");
+    this.news = $2("#whatsnew");
+    this.welcomeEl = $2("#welcome");
+    this.menu = $2("#help-menu");
+    this.menuPop = new Popover($2("#help-btn"), this.menu, {
+      changed: (open) => {
+        if (!open) return;
+        this.renderMenu();
+        this.setDot(false);
+        this.menu.querySelector("[role=menuitem]")?.focus();
+      }
+    });
+    this.menu.addEventListener("click", (e2) => {
+      const t2 = e2.target.closest("[data-hm]");
+      if (!t2) return;
+      const what = t2.dataset.hm;
+      if (what !== "repo" && what !== "notes") e2.preventDefault();
+      this.closeMenu(false);
+      if (what === "tips") this.openHelp("tips");
+      else if (what === "keys") this.openHelp("keys");
+      else if (what === "tour") this.start();
+    });
+    this.menu.addEventListener("keydown", (e2) => {
+      const items = [...this.menu.querySelectorAll("[role=menuitem]")];
+      const k2 = items.indexOf(document.activeElement);
+      const to = (j2) => items[(j2 + items.length) % items.length]?.focus();
+      if (e2.key === "ArrowDown") to(k2 + 1);
+      else if (e2.key === "ArrowUp") to(k2 < 0 ? -1 : k2 - 1);
+      else if (e2.key === "Home") to(0);
+      else if (e2.key === "End") to(-1);
+      else if (e2.key === "Escape") this.closeMenu(true);
+      else if (e2.key === "Tab") return this.closeMenu(false);
+      else return;
+      e2.preventDefault();
+      e2.stopPropagation();
+    });
+    this.welcomeEl.addEventListener("click", (e2) => {
+      const t2 = e2.target.closest("[data-wel]");
+      if (!t2) return;
+      const what = t2.dataset.wel;
+      if (what === "later") return this.foldWelcome();
+      this.hideWelcome();
+      if (what === "tour") this.start();
+      else this.openHelp("tips");
+    });
+    this.renderDot();
+    this.inPlace = new InTips(this.tips, {
+      blocked: () => !this.el.hidden || !this.help.hidden || this.hooks.snapshot() || this.hooks.following() || this.hooks.busy(),
+      fits: (t2) => tipsFor(this.context(/* @__PURE__ */ new Set())).includes(t2),
+      showMe: (e2) => this.showTip(e2),
+      canWatch: () => !!this.tourData,
+      watch: (chapter) => this.openHelp("tips", { chapter })
+    });
+    if (!this.hooks.snapshot())
+      void Promise.all([this.hooks.clips(), this.hooks.tour()]).then(([clips, raw]) => {
+        this.clipsHad = clips;
+        this.tourData = tourData(raw, TOUR);
+        if (!this.help.hidden && this.tab === "tips") this.renderFilm();
+      });
+    else this.tourData = null;
     this.card.addEventListener("click", (e2) => {
       const t2 = e2.target;
-      if (t2.closest("[data-tour-next]")) this.go(this.k + 1);
-      else if (t2.closest("[data-tour-back]")) this.go(this.k - 1);
+      const seg = t2.closest("[data-tour-view]");
+      if (seg) this.view(Number(seg.dataset.tourView));
+      else if (t2.closest("[data-tour-next]")) this.next();
+      else if (t2.closest("[data-tour-back]")) this.back();
       else if (t2.closest("[data-tour-skip]")) this.stop();
+      else if (t2.closest("[data-tour-tips]")) {
+        this.stop();
+        this.openHelp("tips");
+      }
     });
     window.addEventListener(
       "keydown",
@@ -19149,8 +20394,8 @@ var Guide = class {
         if (this.el.hidden) return;
         e2.stopImmediatePropagation();
         if (e2.key === "Escape") this.stop();
-        else if (e2.key === "ArrowRight" || e2.key === "Enter") this.go(this.k + 1);
-        else if (e2.key === "ArrowLeft") this.go(this.k - 1);
+        else if (e2.key === "ArrowRight" || e2.key === "Enter") this.next();
+        else if (e2.key === "ArrowLeft") this.back();
         e2.preventDefault();
       },
       true
@@ -19160,13 +20405,32 @@ var Guide = class {
     });
     this.help.addEventListener("click", (e2) => {
       const t2 = e2.target;
-      if (t2 === this.help || t2.closest("[data-help-close]")) this.closeHelp();
-      else if (t2.closest("[data-help-tour]")) {
+      const tab = t2.closest("[data-help-tab]");
+      const show = t2.closest("[data-tip-show]");
+      const tourShow = t2.closest("[data-tour-show]");
+      const row = t2.closest("[data-ref-toggle]");
+      if (row) this.toggleRef(row.dataset.refToggle);
+      else if (tourShow) {
+        const c3 = TOUR.find((x2) => x2.id === tourShow.dataset.tourShow);
+        this.closeHelp();
+        if (c3) this.showTip({ key: `tour-${c3.id}`, title: c3.title, text: c3.text, showMe: c3.showMe });
+      } else if (t2 === this.help || t2.closest("[data-help-close]")) this.closeHelp();
+      else if (tab) this.showTab(tab.dataset.helpTab === "keys" ? "keys" : "tips");
+      else if (show) {
+        const tip = TIPS.find((x2) => x2.id === show.dataset.tipShow);
+        this.closeHelp();
+        if (tip) this.showTip({ key: tip.id, title: tip.title, text: tip.text, showMe: tip.showMe });
+      } else if (t2.closest("[data-help-tour]")) {
         this.closeHelp();
         this.start();
       }
     });
     this.help.addEventListener("keydown", (e2) => {
+      if (e2.key === "Escape" && this.film?.back()) {
+        e2.preventDefault();
+        e2.stopPropagation();
+        return;
+      }
       if (e2.key === "Escape" || e2.key === "?" && !typing(e2.target)) {
         e2.stopPropagation();
         const field = this.help.querySelector("[data-help-editor]");
@@ -19175,7 +20439,12 @@ var Guide = class {
       }
     });
     this.help.addEventListener("change", (e2) => {
-      const field = e2.target.closest("[data-help-editor]");
+      const el = e2.target;
+      if (el.closest("[data-tips-off]")) {
+        this.tips.off = !el.checked;
+        return;
+      }
+      const field = el.closest("[data-help-editor]");
       if (!field) return;
       const why = this.hooks.setEditor(field.value);
       const err = this.help.querySelector("[data-help-editor-err]");
@@ -19184,82 +20453,325 @@ var Guide = class {
       if (!why) this.help.querySelector("[data-help-editor-now]").innerHTML = this.editorNow();
     });
     this.help.addEventListener("input", (e2) => {
-      if (e2.target.closest("[data-help-editor]")) this.help.querySelector("[data-help-editor-err]").hidden = true;
+      const el = e2.target;
+      if (el.closest("[data-help-editor]")) this.help.querySelector("[data-help-editor-err]").hidden = true;
+      else if (el.closest("[data-tips-filter]")) {
+        this.filter = el.value;
+        this.renderRefs();
+      }
     });
+    document.addEventListener(
+      "click",
+      (e2) => {
+        const i2 = e2.target.closest("[data-tip-open]");
+        if (!i2) return;
+        e2.preventDefault();
+        e2.stopPropagation();
+        const id = i2.dataset.tipOpen;
+        this.openHelp("tips", TOUR.some((c3) => c3.id === id) ? { chapter: id } : { tip: id });
+      },
+      true
+    );
+    this.news.addEventListener("click", (e2) => {
+      const t2 = e2.target;
+      this.news.hidden = true;
+      if (!t2.closest("[data-news-close]")) this.openHelp("tips");
+    });
+  }
+  /** A first visit (GuideSpec decision 1): the welcome card once the page has stayed still for a
+   *  moment, or only the dot on the help where the reader came to work (`deepLink`: an address
+   *  naming a place). Nothing here starts the tour. */
+  welcome(deepLink) {
+    const w2 = welcomeOf({ guided: !!this.store.data.guided, welcomed: !!this.store.data.welcomed, deepLink, following: this.hooks.following(), snapshot: this.hooks.snapshot() });
+    if (w2 === "dot") return this.setDot(true);
+    if (w2 === "none") return;
+    let timer = 0;
+    const busy = (e2) => {
+      if (e2 instanceof KeyboardEvent && ["Shift", "Control", "Alt", "Meta"].includes(e2.key)) return;
+      stop();
+      this.setDot(true);
+    };
+    const stop = () => {
+      clearTimeout(timer);
+      window.removeEventListener("pointerdown", busy, true);
+      window.removeEventListener("keydown", busy, true);
+    };
+    window.addEventListener("pointerdown", busy, true);
+    window.addEventListener("keydown", busy, true);
+    timer = window.setTimeout(() => {
+      stop();
+      if (!this.el.hidden || !this.help.hidden || this.hooks.following()) return this.setDot(true);
+      this.showWelcome();
+    }, WELCOME_IDLE_MS);
+  }
+  /** The welcome card: no backdrop, never the keyboard's; it folds into the dot when the reader
+   *  starts working, or is put off (Not now, Esc). Shown once per browser and project. */
+  showWelcome() {
+    this.store.data.welcomed = true;
+    this.store.save();
+    const project = escapeHtml(this.hooks.project());
+    this.welcomeEl.innerHTML = `<div class="wel-title">New here?</div><div class="wel-text">A map of ${project}'s declarations, and what each theorem rests on.</div><div class="wel-acts"><button class="rv-btn primary" data-wel="tour" title="About a minute">Take the tour</button><button class="rv-btn" data-wel="film" title="Tips: the film of a whole review">Watch a review</button><span class="tour-gap"></span><button class="rv-btn" data-wel="later">Not now</button></div>`;
+    const side2 = $2("#side")?.getBoundingClientRect();
+    this.welcomeEl.style.left = isPhone() || !side2?.width ? "" : `${Math.round(side2.right + 16)}px`;
+    this.welcomeEl.hidden = false;
+    const away = (e2) => {
+      if (this.welcomeEl.contains(e2.target)) return;
+      if (e2 instanceof KeyboardEvent && ["Shift", "Control", "Alt", "Meta"].includes(e2.key)) return;
+      this.foldWelcome();
+    };
+    window.addEventListener("pointerdown", away, true);
+    window.addEventListener("keydown", away, true);
+    this.welcomeOff = () => {
+      window.removeEventListener("pointerdown", away, true);
+      window.removeEventListener("keydown", away, true);
+      this.welcomeOff = null;
+    };
   }
-  /** The first visit: the tour, once. */
-  firstVisit() {
-    if (this.store.data.guided) return;
-    this.start();
+  hideWelcome() {
+    this.welcomeOff?.();
+    this.welcomeEl.hidden = true;
+    this.welcomeEl.classList.remove("folding");
+    this.welcomeEl.style.transform = "";
+  }
+  /** The card folds into the dot on the help: not now, and not "never". */
+  foldWelcome() {
+    if (this.welcomeEl.hidden) return;
+    this.welcomeOff?.();
+    this.setDot(true);
+    const to = (isPhone() ? $2("#more-btn") : $2("#help-btn"))?.getBoundingClientRect();
+    if (reducedMotion() || !to?.width) return this.hideWelcome();
+    const r2 = this.welcomeEl.getBoundingClientRect();
+    this.welcomeEl.classList.add("folding");
+    this.welcomeEl.style.transform = `translate(${Math.round(to.right - r2.right)}px, ${Math.round(to.top - r2.top)}px) scale(0.06)`;
+    setTimeout(() => this.hideWelcome(), 380);
+  }
+  /** The dot on the help (and on ⋯, which holds it on a phone). */
+  setDot(on) {
+    this.tips.dot = on;
+    this.renderDot();
+  }
+  renderDot() {
+    const on = this.tips.dot;
+    $2("#help-btn")?.classList.toggle("has-dot", on);
+    $2("#more-btn")?.classList.toggle("has-dot", on);
+  }
+  // ---------------------------------------------------------------- the menu
+  /** The help menu (GuideSpec decision 8): opened, or closed, by ? — the focus on its first item. */
+  toggleMenu() {
+    if (this.menuPop.open) this.closeMenu(true);
+    else this.menuPop.toggle(true);
+  }
+  closeMenu(focusButton) {
+    if (!this.menuPop.open) return;
+    this.menuPop.toggle(false);
+    if (focusButton && !isPhone()) $2("#help-btn")?.focus();
+  }
+  /** Tips, Keys, the tour; then what the project is and which VisualProof the server runs, said in
+   *  the menu itself. */
+  renderMenu() {
+    const keys = isPhone() ? "Gestures" : "Keys";
+    this.menu.innerHTML = `<button class="hm-item" role="menuitem" data-hm="tips"><span class="hm-t">Tips</span><span class="hm-d">The film of a review, and a tip for the rest</span></button><button class="hm-item" role="menuitem" data-hm="keys"><span class="hm-t">${keys}</span></button><button class="hm-item" role="menuitem" data-hm="tour"><span class="hm-t">Take the tour</span></button><div class="hm-sep" role="separator"></div><div class="hm-item" role="menuitem" aria-disabled="true" tabindex="-1"><span class="hm-h">About ${escapeHtml(this.hooks.project())}</span><span class="hm-d">${escapeHtml(this.hooks.about())}</span></div><div data-hm-tool>${this.menuTool(null)}</div>`;
+    void this.hooks.updates().then((u2) => {
+      const el = this.menu.querySelector("[data-hm-tool]");
+      if (u2 && el && this.menuPop.open) el.innerHTML = this.menuTool(u2);
+    });
+  }
+  /** About VisualProof in the menu: which one runs — a press opens its repository —, and to those
+   *  let in fully a newer release, the server's word as text, its notes a link only at an https
+   *  address (GuideSpec decision 13). */
+  menuTool(u2) {
+    const running = u2?.running ?? this.running;
+    let html = `<a class="hm-item" role="menuitem" data-hm="repo" href="${REPO}" target="_blank" rel="noopener noreferrer"><span class="hm-h">About VisualProof</span><span class="hm-d">${running ? `VisualProof ${escapeHtml(running)}${u2?.installed && u2.installed !== running ? ` (installed: ${escapeHtml(u2.installed)})` : ""}. ` : ""}Open source: ${REPO.replace("https://", "")}</span></a>`;
+    const n3 = u2?.newer;
+    if (n3 && u2?.mode !== "off") {
+      html += `<div class="hm-item" role="menuitem" aria-disabled="true" tabindex="-1"><span class="hm-d">${escapeHtml(n3.version)} is out: ${n3.taken ? "this server takes it by itself, at a quiet moment." : n3.command ? `<code>${escapeHtml(n3.command)}</code> on the server takes it.` : "the server's owner takes it."}</span></div>`;
+      if (/^https:\/\/[^\s"'<>]+$/.test(n3.notes)) html += `<a class="hm-item hm-link" role="menuitem" data-hm="notes" href="${escapeHtml(n3.notes)}" target="_blank" rel="noopener noreferrer">What is new in ${escapeHtml(n3.version)}</a>`;
+    }
+    return html;
   }
-  get showing() {
-    return !this.el.hidden || !this.help.hidden;
+  /** What the tips are shown against now. */
+  context(clips) {
+    const snapshot = this.hooks.snapshot();
+    return {
+      readOnly: this.hooks.readOnly(),
+      phone: isPhone(),
+      clips,
+      newSince: this.newShown ?? null,
+      manual: MANUAL,
+      applies: (t2) => this.hooks.applies(t2),
+      canShow: (a3) => !snapshot && !this.hooks.following() && this.hooks.canShow(a3)
+    };
+  }
+  // ---------------------------------------------------------------- the tour
+  /** The TCB step (GuideSpec decision 2): its theorem alone, its TCB, its key declarations, each
+   *  with the counts of what it lights, the camera framing what is lit. */
+  restsOnStep(phone) {
+    const i2 = this.hooks.example();
+    if (i2 === null) return null;
+    const ro = this.hooks.readOnly();
+    let r2 = this.hooks.restsOn(i2);
+    const ring = (step2) => () => (phone ? around("#panel") : around(step2)) ?? board();
+    const lit = (step2) => () => {
+      const b2 = board();
+      const m3 = phone ? null : around(step2);
+      if (!m3) return b2;
+      const l2 = Math.min(b2.left, m3.left), t2 = Math.min(b2.top, m3.top);
+      return new DOMRect(l2, t2, Math.max(b2.right, m3.right) - l2, Math.max(b2.bottom, m3.bottom) - t2);
+    };
+    const views = [
+      {
+        label: "Statement",
+        before: () => {
+          this.hooks.setTool("plain");
+          this.hooks.select(i2);
+          r2 = this.hooks.restsOn(i2);
+        },
+        text: () => `This is <b>${escapeHtml(r2.name)}</b>. Lean checked its proof; whether it says what you mean is in the words of its statement, and they are defined elsewhere.`,
+        at: () => (phone ? around("#panel") : around("#panel .p-head", "#panel .p-name", "#panel .sig")) ?? board()
+      },
+      {
+        label: "TCB",
+        before: () => {
+          this.hooks.setTool("tcb");
+          this.hooks.frameLit();
+        },
+        // the numbers add up to the selection bar's: the theorem, what is to be read, what is assumed
+        text: () => {
+          const lit2 = r2.read + r2.assumed;
+          const assumed = r2.assumed ? `${r2.assumed} trusted, as Mathlib is, and assumed` : "";
+          const proofs = r2.proofs ? ` What its proofs alone use, ${r2.proofs} more, is not lit: the proofs are Lean's to check.` : "";
+          if (!lit2) return `Its <b>TCB</b> is itself alone: its statement rests on nothing but Lean.${proofs}`;
+          if (!r2.read) return `Its <b>TCB</b> lights ${lit2} besides it, all ${r2.assumed === 1 ? "of it " : ""}trusted, as Mathlib is, and assumed: nothing of the project's to read.${proofs}`;
+          return `Its <b>TCB</b> lights ${lit2} besides it: ${r2.read} to read \u2014 definitions, axioms, the project's notation \u2014${assumed ? ` and ${assumed}` : ""}. To trust it, read ${r2.read === 1 ? "that one" : `those ${r2.read}`}.${proofs}`;
+        },
+        at: lit("#rests-steps [data-mode=tcb]")
+      },
+      {
+        label: "Keys",
+        // no key declaration: the TCB stays lit, and the card says how keys are marked
+        before: () => {
+          this.hooks.setTool(r2.keys ? "keys" : "tcb");
+          this.hooks.frameLit();
+        },
+        text: () => r2.keys ? r2.keys === 1 ? `Of those ${r2.read + r2.assumed}, the one the review marked <b>key</b>: what carries its meaning. Read it first.` : `Of those ${r2.read + r2.assumed}, the ${r2.keys} the review marked <b>key</b>: the few that carry its meaning. Read them first.` : ro || this.hooks.snapshot() ? "None is marked <b>key</b> yet: the review marks the few of a target's TCB that carry its meaning." : phone ? "None is marked <b>key</b> yet. On a target's view, its panel's \u25C7 Mark as key marks the few that carry its meaning." : "None is marked <b>key</b> yet. On a view focused on a target, <kbd>k</kbd> marks the few of its TCB that carry its meaning.",
+        at: () => r2.keys ? lit("#rests-steps [data-mode=keys]")() : ring("#rests-steps [data-mode=keys]")()
+      }
+    ];
+    return { title: "What it rests on", text: "", views };
   }
   start() {
+    this.hideWelcome();
+    this.setDot(false);
+    this.kind = "tour";
+    this.placeBefore = this.hooks.place();
+    this.inPlace.hush();
     const project = escapeHtml(this.hooks.project());
-    const live = () => !this.hooks.snapshot();
+    const snapshot = this.hooks.snapshot();
+    const live = () => !snapshot;
+    const ro = this.hooks.readOnly();
+    const reader = ro && !snapshot;
+    const phone = isPhone();
+    const rests = this.restsOnStep(phone);
     const all = [
-      {
-        title: "Welcome",
-        text: `${project}'s declarations as a map, and what each theorem rests on. A quick tour.`
-      },
+      { title: "Welcome", text: `${project}'s declarations as a map, and what each theorem rests on. A quick tour.` },
       {
         title: "The map",
-        text: `Dots are declarations, circles namespaces. Scroll to zoom, drag to pan, double-click a circle to fold it. To move things, drag with <b>${dragKeyName()}</b> held, or let the lock go (<b>l</b>).`,
-        at: () => {
-          const side2 = $2("#side")?.getBoundingClientRect();
-          const left = side2 && side2.width ? side2.right + 8 : 12;
-          return new DOMRect(left, 108, innerWidth - left - 12, innerHeight - 108 - 48);
-        }
+        text: phone ? "Dots are declarations, circles namespaces. Drag to move around, pinch to zoom, tap to select; touch and hold for what can be done with what is under your finger." : ro ? `Dots are declarations, circles namespaces. Scroll to zoom, drag to pan, double-click a circle to fold it${reader ? ", for you alone" : ""}.` : `Dots are declarations, circles namespaces. Scroll to zoom, drag to pan, double-click a circle to fold it. To move things, drag with <b>${dragKeyName()}</b> held, or let the lock go (<b>l</b>).`,
+        at: board
       },
       {
         title: "Select",
-        text: "Click a declaration, or a circle for all of its declarations. <b>Mode</b> is how a click selects: just it, what it <b>rests on</b> (everything it uses, its TCB, the key declarations in it, or what it uses directly: <b>2</b> again for the next), or what uses it. Rest the pointer on a mode to read it. What you selected is listed above the panel.",
-        before: () => {
-          const i2 = this.hooks.example();
-          if (i2 !== null) this.hooks.select(i2);
-        },
-        at: () => around("#lightup")
+        text: phone ? "Tap a declaration, or a circle for all of its declarations. How a tap selects is the mode, in <b>\u22EF</b> at the top: just it, what it rests on, or what uses it." : "Click a declaration, or a circle for all of its declarations. <b>Mode</b> is how a click selects: just it (<kbd>1</kbd>), what it <b>rests on</b> (<kbd>2</kbd>), or what uses it (<kbd>3</kbd>). Rest the pointer on a mode to read it.",
+        at: () => around(phone ? "#more-btn" : "#lightup")
       },
+      ...rests ? [rests] : [],
       {
         title: "The board",
-        text: "The left panel: the targets under review, and this board's clusters. A board is shared with everyone on it: <b>\u2699 Board</b> holds what is on it (its scope, as chips), the clustering, the depth. Tabs are the views you have open; <b>Views</b> makes and lists them. Your camera and what you select are yours alone.",
-        at: () => around("#side", "#tabs", ".views-wrap")
+        text: phone ? "<b>\u2630</b> opens the targets under review and this board's namespaces or folders." : ro ? "The left panel: the targets under review, and this board's clusters; <b>\u2699 Board</b> shows what is on it. Tabs are the views you have open; <b>Views</b> lists them. Whatever you select, fold or open is yours alone." : "The left panel: the targets under review, and this board's clusters. A board is shared with everyone on it: <b>\u2699 Board</b> holds what is on it (its scope, as chips), the clustering, the depth. Tabs are the views you have open; <b>Views</b> makes and lists them. Your camera and what you select are yours alone.",
+        at: () => phone ? around("#side-btn") : around("#side", "#tabs", ".views-wrap")
       },
       {
         title: "The panel",
-        text: "All about what you clicked last; <b>Source</b> (Space) opens the code, and the parts with a \u25B8 open on a click. Above it, what is selected: <b>Zoom in</b> opens a view of it.",
-        at: () => around("#selbar", "#panel"),
+        text: phone ? "The sheet is what you tapped last: a tap on its handle gives it the whole screen or half of it, \u2715 closes it. <b>Source</b> shows its code." : ro ? "All about what you clicked last; <b>Source</b> (<kbd>Space</kbd>) opens the code, and the parts with a \u25B8 open on a click." : "All about what you clicked last; <b>Source</b> (<kbd>Space</kbd>) opens the code, and the parts with a \u25B8 open on a click. Above it, what is selected: <b>Zoom in</b> opens a view of it.",
+        at: () => phone ? around("#panel") : around("#selbar", "#panel"),
         when: () => !!$2("#panel.open")
       },
       {
         title: "Review",
-        text: live() ? "<b>Approve</b> or <b>Comment</b> on what you have read. <b>Mark as target</b> to track a theorem's review." : "Opinions as they were when this snapshot was taken.",
+        text: snapshot ? "Opinions as they were when this snapshot was taken." : ro ? "The review as it stands, live: who approved, who commented, on which version. A read-only page records nothing." : phone ? "<b>Approve</b> or <b>Comment</b> on what you have read, under your name (\u22EF: your name)." : "<b>Approve</b> or <b>Comment</b> on what you have read. <b>Mark as target</b> a theorem to follow its review.",
         at: () => around("#panel .rv"),
         when: () => !!$2("#panel.open .rv")
       },
       {
         title: "Together",
-        text: "Who else is here: click one to follow. <b>Activity</b> lists what happened.",
-        at: () => around("#activity-btn", "#peers", "#who"),
+        text: phone ? `Who else is here: tap one's initials to follow${reader ? "; nobody sees you" : ""}. <b>\u22EF</b> holds Activity.` : reader ? "Who else is here: click one to follow; nobody sees you. <b>Activity</b> lists what happened." : "Who else is here: click one to follow. <b>Activity</b> lists what happened.",
+        at: () => phone ? around("#peers", "#more-btn") : reader ? around("#activity-btn", "#peers") : around("#activity-btn", "#peers", "#who"),
         only: live
       },
       {
         title: "Colours",
-        text: "By kind, or by <b>status</b>: what reviewers said, what is trusted, what failed to build. The legend at the bottom left switches them (or <b>c</b>) and says what each colour means.",
+        text: phone ? "By kind, or by <b>status</b>: what reviewers said, what is trusted, what failed to build. <b>Kind \u25BE</b> at the bottom left switches them and says what each colour means." : "By kind, or by <b>status</b>: what reviewers said, what is trusted, what failed to build. The legend at the bottom left switches them (or <kbd>c</kbd>) and says what each colour means.",
         at: () => around("#legend")
       },
       {
         title: "Getting around",
-        text: "Back, forward and links work as in a browser. <b>/</b> searches names, statements and docstrings; <b>?</b> lists every key.",
-        at: () => around(".brand .nav", ".search-wrap", "#help-btn")
+        // the last step points at the tips (GuideSpec decision 1)
+        text: phone ? "\u2039 goes back; <b>Search</b> finds names, statements and docstrings. There is more under <b>\u22EF</b> \u2192 Help \u2192 <b>Tips</b>: the film of a whole review, and a tip for the rest." : "Back, forward and links work as in a browser; <kbd>/</kbd> searches names, statements and docstrings. There is more under <b>?</b> \u2192 <b>Tips</b>: the film of a whole review, and a tip for the rest.",
+        at: () => phone ? around(".brand .nav", ".search-wrap", "#more-btn") : around(".brand .nav", ".search-wrap", "#help-btn")
       }
     ];
     this.steps = all.filter((s2) => !s2.only || s2.only());
     this.k = 0;
+    this.v = 0;
     this.el.hidden = false;
     this.go(0);
   }
+  /** A tip's Show me (GuideSpec decision 7): its control ringed, its words beside it, after what
+   *  its action does on the reader's own page. */
+  showTip(tip) {
+    if (!tip.showMe || !this.hooks.canShow(tip.showMe)) return;
+    if (tip.showMe === GUIDE_SHOWS[1]) {
+      this.closeHelp();
+      this.menuPop.toggle(true);
+      this.menu.querySelector("[data-hm=repo]")?.focus();
+      return;
+    }
+    let step2;
+    if (tip.showMe === GUIDE_SHOWS[0]) {
+      step2 = this.restsOnStep(isPhone());
+      if (step2) step2.title = tip.title;
+    } else {
+      const ring = this.hooks.show(tip.showMe);
+      step2 = ring === null ? null : { title: tip.title, text: tip.text, at: () => around(...ring.split(/\s*,\s*/)) };
+    }
+    if (!step2) return;
+    this.tips.done(tip.key);
+    this.kind = "show";
+    this.placeBefore = null;
+    this.steps = [step2];
+    this.k = 0;
+    this.v = 0;
+    this.el.hidden = false;
+    this.go(0);
+  }
+  next() {
+    const s2 = this.steps[this.k];
+    if (s2?.views && this.v < s2.views.length - 1) this.view(this.v + 1);
+    else this.go(this.k + 1);
+  }
+  back() {
+    const s2 = this.steps[this.k];
+    if (s2?.views && this.v > 0) this.view(this.v - 1);
+    else this.go(this.k - 1, -1);
+  }
+  /** A view of the step shown: what it does done, its words, its place. */
+  view(v2) {
+    const s2 = this.steps[this.k];
+    if (!s2?.views?.[v2]) return;
+    this.v = v2;
+    s2.views[v2].before();
+    this.render();
+  }
   go(k2, dir = k2 >= this.k ? 1 : -1) {
     if (k2 < 0) return;
     if (k2 >= this.steps.length) return this.stop();
@@ -19267,8 +20779,21 @@ var Guide = class {
     s2.before?.();
     if (s2.when && !s2.when()) return this.go(k2 + dir, dir);
     this.k = k2;
-    const last2 = k2 === this.steps.length - 1;
-    this.card.innerHTML = `<div class="tour-step">${k2 + 1} of ${this.steps.length}</div><div class="tour-title">${s2.title}</div><div class="tour-text">${s2.text}</div><div class="tour-actions"><button class="rv-btn" data-tour-skip>${last2 ? "Close" : "Skip"}</button><span class="tour-gap"></span>` + (k2 > 0 ? `<button class="rv-btn" data-tour-back>Back</button>` : "") + `<button class="rv-btn primary" data-tour-next>${k2 === 0 ? "Show me" : last2 ? "Done" : "Next"}</button></div>`;
+    this.v = s2.views ? dir > 0 ? 0 : s2.views.length - 1 : 0;
+    s2.views?.[this.v].before();
+    this.render();
+  }
+  render() {
+    const s2 = this.steps[this.k];
+    const k2 = this.k;
+    const show = this.kind === "show";
+    const lastView = !s2.views || this.v === s2.views.length - 1;
+    const last2 = k2 === this.steps.length - 1 && lastView;
+    const text2 = s2.views ? s2.views[this.v].text() : s2.text;
+    const seg = s2.views ? `<div class="seg mini tour-seg" role="group" aria-label="${escapeHtml(s2.title)}">${s2.views.map((v2, j2) => `<button data-tour-view="${j2}" class="${j2 === this.v ? "on" : ""}" aria-pressed="${j2 === this.v}">${v2.label}</button>`).join("")}</div>` : "";
+    const next = k2 === 0 && this.v === 0 && !show ? "Show me" : last2 ? "Done" : "Next";
+    this.card.innerHTML = (show ? "" : `<div class="tour-step">${k2 + 1} of ${this.steps.length}</div>`) + `<div class="tour-title">${s2.title}</div>${seg}<div class="tour-text">${text2}</div><div class="tour-actions">${show || last2 ? "" : `<button class="rv-btn" data-tour-skip>Skip</button>`}<span class="tour-gap"></span>` + (k2 > 0 || this.v > 0 ? `<button class="rv-btn" data-tour-back>Back</button>` : "") + // the last step points on to the tips: the film from its start (GuideSpec decision 1)
+    (last2 && !show ? `<button class="rv-btn" data-tour-tips>Open Tips</button>` : "") + `<button class="rv-btn primary" data-tour-next>${next}</button></div>`;
     this.place();
     setTimeout(() => this.place(), 360);
     this.card.querySelector("[data-tour-next]")?.focus();
@@ -19277,7 +20802,7 @@ var Guide = class {
   place() {
     const s2 = this.steps[this.k];
     if (!s2) return;
-    const r2 = s2.at?.() ?? null;
+    const r2 = (s2.views ? s2.views[this.v].at : s2.at)?.() ?? null;
     const pad = 6;
     const card = this.card;
     const w2 = card.offsetWidth, h2 = card.offsetHeight;
@@ -19301,7 +20826,7 @@ var Guide = class {
     else if (room2.above >= h2 + gap + pad) [x2, y2] = [r2.left, r2.top - h2 - gap - pad];
     else if (room2.left >= w2 + gap + pad) [x2, y2] = [r2.left - w2 - gap - pad, r2.top];
     else if (room2.right >= w2 + gap + pad) [x2, y2] = [r2.right + gap + pad, r2.top];
-    else [x2, y2] = [r2.left + 24, r2.top + 24];
+    else [x2, y2] = [r2.left + 24, r2.bottom - h2 - 24];
     x2 = Math.max(12, Math.min(x2, innerWidth - w2 - 12));
     y2 = Math.max(12, Math.min(y2, innerHeight - h2 - 12));
     card.style.transform = `translate(${Math.round(x2)}px, ${Math.round(y2)}px)`;
@@ -19309,9 +20834,26 @@ var Guide = class {
   stop() {
     if (this.el.hidden) return;
     this.el.hidden = true;
-    this.store.data.guided = true;
-    this.store.save();
-    this.hooks.ended();
+    if (this.kind === "tour") {
+      this.store.data.guided = true;
+      this.store.save();
+      this.hooks.back(this.placeBefore);
+      this.hooks.ended();
+      this.setDot(true);
+    } else this.hooks.record();
+    this.placeBefore = null;
+  }
+  // ---------------------------------------------------------------- What's new
+  /** The server's event stream said which release it runs (UpdateSpec): What's new is said once when
+   *  it is newer than the one this browser saw last (GuideSpec decision 11). */
+  serverIs(version) {
+    this.running = version;
+    if (this.hooks.snapshot()) return;
+    const was = this.tips.meet(version);
+    if (was === null) return;
+    this.news.innerHTML = `<button class="news-open">What's new in ${escapeHtml(version)}</button><button class="icon" data-news-close title="Close" aria-label="Close">\u2715</button>`;
+    this.news.hidden = false;
+    setTimeout(() => this.news.hidden = true, 15e3);
   }
   // ---------------------------------------------------------------- the sheet
   /** What the editor link is now, in a sentence. */
@@ -19322,20 +20864,101 @@ var Guide = class {
     if (server) return `The server's. Yours, if you set one here, is kept in this browser and goes first.`;
     return `None is set, so there is no link. VS Code on the server's machine: ${code("vscode://file/{path}:{line}:{col}")}; over SSH: ${code("vscode://vscode-remote/ssh-remote+HOST{path}:{line}")}.`;
   }
-  openHelp() {
+  /** Which VisualProof the server runs, and what it says of a newer one (GuideSpec decision 13). */
+  aboutTool(u2) {
+    const running = u2?.running ?? this.running;
+    const repo = `<a class="help-repo" href="${REPO}" target="_blank" rel="noopener noreferrer">${REPO.replace("https://", "")}</a>`;
+    let html = running ? `VisualProof ${escapeHtml(running)}${u2?.installed && u2.installed !== running ? ` (installed: ${escapeHtml(u2.installed)})` : ""}. ` : "";
+    html += `Open source: its documentation, its code and its issues are at ${repo}.`;
+    const n3 = u2?.newer;
+    if (n3 && u2?.mode !== "off") {
+      const notes = /^https:\/\/[^\s"'<>]+$/.test(n3.notes) ? `<a href="${escapeHtml(n3.notes)}" target="_blank" rel="noopener noreferrer">what is new in it</a>` : "its notes on GitHub";
+      html += `<div class="help-update">${escapeHtml(n3.version)} is out (${notes}): ${n3.taken ? "this server takes it by itself, at a quiet moment." : n3.command ? `<code>${escapeHtml(n3.command)}</code> on the server takes it.` : "the server's owner takes it."}</div>`;
+    }
+    return html;
+  }
+  /** The sheet, on a tab; on Tips, the film from its first chapter, or from `at.chapter`, or a
+   *  reference tip open (`at.tip`). */
+  openHelp(tab = this.tab, at = {}) {
+    const tipId = at.tip;
     const { server, mine } = this.hooks.editor();
     const phone = isPhone();
-    const title = phone ? "Gestures" : "Keys and gestures";
-    this.help.innerHTML = `<div class="modal-box glass help-box${phone ? " help-touch" : ""}" role="dialog" aria-label="${title}" tabindex="-1"><div class="help-head"><div class="modal-title">${title}</div><button class="icon" data-help-close title="Close (Esc)">\u2715</button></div><div class="help-grid">${(phone ? TOUCH : KEYS).map(
+    const keysTab = phone ? "Gestures" : "Keys";
+    this.tab = tab;
+    if (tipId) this.filter = "";
+    this.help.innerHTML = `<div class="modal-box glass help-box${phone ? " help-touch" : ""}" role="dialog" aria-label="Help" tabindex="-1"><div class="help-head"><div class="seg help-tabs" role="tablist" aria-label="Help"><button role="tab" data-help-tab="tips">Tips</button><button role="tab" data-help-tab="keys">${keysTab}</button></div><button class="icon" data-help-close title="Close (Esc)">\u2715</button></div><div class="help-pane" data-help-pane="tips" role="tabpanel"><div class="film-h">A review in thirteen scenes</div><div data-film></div><div class="refs-head"><div class="help-h">More tips</div><input class="help-input tips-filter" data-tips-filter type="search" placeholder="Find a tip" value="${escapeHtml(this.filter)}" spellcheck="false" autocomplete="off" aria-label="Find a tip"></div><div class="tips-list" data-tips-list></div>` + (this.hooks.snapshot() ? "" : `<label class="help-note tips-off"><input type="checkbox" data-tips-off${this.tips.off ? "" : " checked"}> Show a tip beside a control when it helps, now and then</label>`) + `</div><div class="help-pane" data-help-pane="keys" role="tabpanel" hidden><div class="help-grid">${(phone ? TOUCH : KEYS).map(
       ([group, rows]) => `<div class="help-group"><div class="help-h">${group}</div>${rows.map(
         (r2) => `<div class="help-row"><span class="help-k">${(r2.k ?? []).map((x2) => `<kbd>${escapeHtml(x2)}</kbd>`).join(" ")}${r2.k && r2.g ? " " : ""}${r2.g ? `<span class="help-g">${escapeHtml(r2.g)}</span>` : ""}</span><span>${escapeHtml(r2.what)}</span></div>`
       ).join("")}</div>`
-    ).join("")}</div>` + (phone ? "" : `<div class="help-editor"><div class="help-h">Open in editor</div><div class="help-note">A link from the panel and the source window to the declaration in your editor. <code>{path}</code> is the file on the server, <code>{rel}</code> the file in the project, <code>{line}</code> and <code>{col}</code> where it starts.</div><input class="help-input" data-help-editor value="${escapeHtml(mine ?? "")}" placeholder="${escapeHtml(server ?? "vscode://file/{path}:{line}:{col}")}" spellcheck="false" autocomplete="off" aria-label="Open in editor: URL template"><div class="modal-err" data-help-editor-err hidden></div><div class="help-note" data-help-editor-now>${this.editorNow()}</div></div>`) + `<div class="help-about"><div class="help-h">About ${escapeHtml(this.hooks.project())}</div><div class="help-note">${escapeHtml(this.hooks.about())}</div></div><div class="help-about"><div class="help-h">About VisualProof</div><div class="help-note">Open source: its documentation, its code and its issues are at <a class="help-repo" href="${REPO}" target="_blank" rel="noopener noreferrer">${REPO.replace("https://", "")}</a>.</div></div><div class="modal-actions"><button class="rv-btn" data-help-tour>Take the tour again</button><button class="rv-btn primary" data-help-close>Close</button></div></div>`;
+    ).join("")}</div>` + (phone ? "" : `<div class="help-editor"><div class="help-h">Open in editor</div><div class="help-note">A link from the panel and the source window to the declaration in your editor. <code>{path}</code> is the file on the server, <code>{rel}</code> the file in the project, <code>{line}</code> and <code>{col}</code> where it starts.</div><input class="help-input" data-help-editor value="${escapeHtml(mine ?? "")}" placeholder="${escapeHtml(server ?? "vscode://file/{path}:{line}:{col}")}" spellcheck="false" autocomplete="off" aria-label="Open in editor: URL template"><div class="modal-err" data-help-editor-err hidden></div><div class="help-note" data-help-editor-now>${this.editorNow()}</div></div>`) + `</div><div class="modal-actions"><button class="rv-btn" data-help-tour>Take the tour again</button><button class="rv-btn primary" data-help-close>Close</button></div></div>`;
     this.help.hidden = false;
-    this.help.querySelector(".help-box")?.focus();
+    if (tab === "tips") this.setDot(false);
+    this.closeMenu(false);
+    this.hideWelcome();
+    const box = this.help.querySelector(".help-box");
+    if (tipId) this.openRef = tipId;
+    this.startAt = filmChapterOf(at.chapter);
+    this.showTab(tab);
+    box.focus();
+    if (tipId) {
+      const row = this.help.querySelector(`[data-tip="${CSS.escape(tipId)}"]`);
+      if (row) {
+        row.scrollIntoView({ block: "center" });
+        row.classList.add("flash");
+      }
+    }
+  }
+  showTab(tab) {
+    this.tab = tab;
+    for (const b2 of this.help.querySelectorAll("[data-help-tab]")) {
+      const on = b2.dataset.helpTab === tab;
+      b2.classList.toggle("on", on);
+      b2.setAttribute("aria-selected", String(on));
+    }
+    for (const p2 of this.help.querySelectorAll("[data-help-pane]")) p2.hidden = p2.dataset.helpPane !== tab;
+    if (tab === "tips" && this.newShown === void 0) {
+      this.newShown = this.tips.newSince;
+      this.tips.newLooked();
+    }
+    if (tab === "tips") {
+      this.renderFilm();
+      this.renderRefs();
+    } else this.film?.stop();
+    this.hooks.shown(tab === "tips", tab === "tips" ? this.startAt : null);
+  }
+  /** The film and its cards (GuideSpec decision 6): from the chapter asked for, else the first;
+   *  without the film, the cards are their words. Shown again when the film is found. */
+  renderFilm() {
+    const el = this.help.querySelector("[data-film]");
+    if (!el) return;
+    this.film?.stop();
+    const ctx = this.context(this.clipsHad ?? /* @__PURE__ */ new Set());
+    this.film = new TourFilm(el, TOUR, this.tourData ?? null, {
+      still: reducedMotion(),
+      acts: (c3) => actsHtml(c3.showMe, c3.manual, ctx, `data-tour-show="${c3.id}"`),
+      sheet: this.help.querySelector(".help-box")
+    });
+    this.film.start(this.startAt ?? void 0);
+  }
+  /** The reference tips as the filter has them, one open; New marked until Tips has been looked at. */
+  renderRefs() {
+    const list2 = this.help.querySelector("[data-tips-list]");
+    if (!list2) return;
+    list2.innerHTML = refsHtml(this.context(this.clipsHad ?? /* @__PURE__ */ new Set()), this.filter, this.openRef);
+  }
+  /** A reference tip opened, the one open before closed; or closed. */
+  toggleRef(id) {
+    this.openRef = this.openRef === id ? null : id;
+    this.renderRefs();
+    this.help.querySelector(`[data-ref-toggle="${CSS.escape(id)}"]`)?.focus();
   }
   closeHelp() {
     if (this.help.contains(document.activeElement)) document.activeElement.blur();
+    if (!this.help.hidden) this.hooks.shown(false, null);
+    this.film?.stop();
+    this.film = null;
+    this.startAt = null;
+    this.newShown = void 0;
     this.help.hidden = true;
   }
   toggleHelp() {
@@ -19385,11 +21008,11 @@ var Legend = class {
 };
 
 // src/web/src/theme.ts
-var KEY2 = "visualproof:theme";
+var KEY3 = "visualproof:theme";
 var dark = matchMedia("(prefers-color-scheme: dark)");
 function themeChoice() {
   try {
-    const v2 = localStorage.getItem(KEY2);
+    const v2 = localStorage.getItem(KEY3);
     if (v2 === "dark" || v2 === "system") return v2;
   } catch {
   }
@@ -19401,8 +21024,8 @@ function applyTheme(choice = themeChoice()) {
 }
 function setTheme(choice) {
   try {
-    if (choice === "light") localStorage.removeItem(KEY2);
-    else localStorage.setItem(KEY2, choice);
+    if (choice === "light") localStorage.removeItem(KEY3);
+    else localStorage.setItem(KEY3, choice);
   } catch {
   }
   applyTheme(choice);
@@ -19430,56 +21053,6 @@ function themeChoices(el) {
   });
 }
 
-// src/web/src/popover.ts
-var Popover = class {
-  btn;
-  el;
-  /** puts the panel where it goes, once it is shown (it has a size then) */
-  place;
-  /** what a press may land on without closing it: another window it opened (a question, the
-   *  name), as selectors */
-  keep;
-  /** told when it opens (to draw what it holds) or closes */
-  changed;
-  constructor(btn, el, opts = {}) {
-    this.btn = btn;
-    this.el = el;
-    this.place = opts.place ?? null;
-    this.keep = opts.keep ?? "";
-    this.changed = opts.changed ?? (() => {
-    });
-    btn.addEventListener("click", () => this.toggle());
-    document.addEventListener("pointerdown", (e2) => {
-      const t2 = e2.target;
-      if (this.el.hidden || !t2 || this.el.contains(t2) || this.btn.contains(t2) || this.keep && t2.closest?.(this.keep)) return;
-      this.toggle(false);
-    });
-    window.addEventListener("resize", () => {
-      if (!this.el.hidden) this.place?.();
-    });
-  }
-  get open() {
-    return !this.el.hidden;
-  }
-  toggle(open = this.el.hidden) {
-    if (open === !this.el.hidden) return;
-    this.el.hidden = !open;
-    this.btn.classList.toggle("on", open);
-    this.btn.setAttribute("aria-expanded", String(open));
-    this.changed(open);
-    if (open) this.place?.();
-  }
-};
-function besideSide(btn, el) {
-  const side2 = document.querySelector("#side")?.getBoundingClientRect();
-  const at = btn.getBoundingClientRect();
-  const left = side2 && side2.width ? side2.right + 8 : at.left;
-  const top = Math.max(66, Math.min(at.top - 6, innerHeight - el.offsetHeight - 12, innerHeight - 240));
-  el.style.left = `${Math.round(Math.max(12, Math.min(left, innerWidth - el.offsetWidth - 12)))}px`;
-  el.style.top = `${Math.round(top)}px`;
-  el.style.maxHeight = `${Math.round(innerHeight - top - 12)}px`;
-}
-
 // src/web/src/reviewqueue.ts
 function chainName(g2, i2) {
   return g2.nodes[i2].name.split(".").slice(-2).join(".");
@@ -20021,7 +21594,7 @@ var SelectionBar = class {
       const words = pickWords(p2);
       return `<span class="sb-chip t-${p2.tool}${k2 === panel ? " on" : ""}" title="${esc2(printQuery(p2.q))}"><button class="sb-go" data-show="${k2}"${p2.root ? ` title="Show ${esc2(words)}"` : " disabled"}>${esc2(words)}</button><button class="sb-x" data-rm="${k2}" title="Take it out" aria-label="Take ${esc2(words)} out">\xD7</button></span>`;
     }).join("");
-    this.el.innerHTML = `<span class="sb-chips">${chips}</span><span class="sb-meta"><span class="sb-n" title="Declarations lit on this board">${lit.toLocaleString()} lit</span><button class="sb-btn" data-zoom${zoom ? ` title="Open a view of what is selected, laid out on its own, in a tab"` : ` disabled title="${why}"`}>Zoom in</button>` + (key ? `<button class="sb-btn sb-key" data-mark-keys${key.fresh ? ` title="${esc2(`Mark the ${key.fresh} declaration${key.fresh === 1 ? "" : "s"} you clicked as key for ${key.target}`)}"` : ` disabled title="${esc2(key.already ? `What you clicked is key for ${key.target} already` : `Nothing you clicked is in ${key.target}'s review besides the target`)}"`}>\u25C6 Mark selected as key${key.fresh > 1 ? ` (${key.fresh})` : ""}</button>` : "") + `<button class="sb-btn" data-clear title="Select nothing (Esc)">Clear</button></span>`;
+    this.el.innerHTML = `<span class="sb-chips">${chips}</span><span class="sb-meta"><span class="sb-n" title="Declarations lit on this board">${lit.toLocaleString()} lit</span>` + (this.hooks.canOpenViews() ? `<button class="sb-btn" data-zoom${zoom ? ` title="Open a view of what is selected, laid out on its own, in a tab"` : ` disabled title="${why}"`}>Zoom in</button>` : "") + (key ? `<button class="sb-btn sb-key" data-mark-keys${key.fresh ? ` title="${esc2(`Mark the ${key.fresh} declaration${key.fresh === 1 ? "" : "s"} you clicked as key for ${key.target}`)}"` : ` disabled title="${esc2(key.already ? `What you clicked is key for ${key.target} already` : `Nothing you clicked is in ${key.target}'s review besides the target`)}"`}>\u25C6 Mark selected as key${key.fresh > 1 ? ` (${key.fresh})` : ""}</button>` : "") + `<button class="sb-btn" data-clear title="Select nothing (Esc)">Clear</button></span>`;
   }
 };
 
@@ -20878,9 +22451,9 @@ var SourceWindow = class {
       // a pinned window the page placed keeps under the page's bars as the page is resized
       top: () => this.hooks.top()
     });
-    const keep = (e2) => e2.target.closest?.("[data-sw-quote]") && e2.preventDefault();
-    el.addEventListener("pointerdown", keep);
-    el.addEventListener("mousedown", keep);
+    const keep2 = (e2) => e2.target.closest?.("[data-sw-quote]") && e2.preventDefault();
+    el.addEventListener("pointerdown", keep2);
+    el.addEventListener("mousedown", keep2);
     document.addEventListener("selectionchange", this.onSelection);
     el.addEventListener("click", (e2) => {
       const t2 = e2.target;
@@ -21375,7 +22948,7 @@ var SourceWindow = class {
     this.still = !!past;
     this.era = then ? "then" : "now";
     const scroll = this.el.querySelector(".sw-scroll");
-    const keep = !fresh3 && scroll ? scroll.scrollTop : null;
+    const keep2 = !fresh3 && scroll ? scroll.scrollTop : null;
     const typed = document.activeElement;
     const hadFocus = (typed instanceof HTMLTextAreaElement || typed instanceof HTMLInputElement) && this.el.contains(typed) && typed.matches("[data-rv-comment], [data-rv-for]") ? { sel: typed.matches("[data-rv-for]") ? "[data-rv-for]" : "[data-rv-comment]", from: typed.selectionStart, to: typed.selectionEnd } : null;
     const short6 = escapeHtml(v2.display ?? parts[parts.length - 1]);
@@ -21398,7 +22971,7 @@ var SourceWindow = class {
     if (fresh3) this.awaitCode(turn, () => frame2(escapeHtml(v2.module), "", `<div class="sw-none">Reading the source\u2026</div>`, void 0, false));
     const settle2 = () => {
       const scrolled = this.el.querySelector(".sw-scroll");
-      if (scrolled && keep !== null) scrolled.scrollTop = keep;
+      if (scrolled && keep2 !== null) scrolled.scrollTop = keep2;
       if (hadFocus) {
         const box = this.el.querySelector(hadFocus.sel);
         box?.focus();
@@ -21504,9 +23077,9 @@ var SourceWindow = class {
     const long = ctx.length > LONG;
     let hidden = 0;
     const rows = ctx.map((l2, k2) => {
-      const keep = !long || k2 < FIRST || l2.kind === "namespace" || l2.kind === "section" || l2.kind === "mutual" || used.has(k2) || / in$/.test(l2.text);
-      if (!keep) hidden++;
-      const cls = `sw-ctx-l${used.has(k2) ? " used" : ""}${keep ? "" : " fold"}`;
+      const keep2 = !long || k2 < FIRST || l2.kind === "namespace" || l2.kind === "section" || l2.kind === "mutual" || used.has(k2) || / in$/.test(l2.text);
+      if (!keep2) hidden++;
+      const cls = `sw-ctx-l${used.has(k2) ? " used" : ""}${keep2 ? "" : " fold"}`;
       const tip = !used.has(k2) ? "" : exact ? ` title="Lean included this variable in the declaration"` : ` title="A name it binds occurs in this declaration: Lean may include it"`;
       return `<div class="${cls}"${tip}>${highlightLines(l2.text, (w2) => resolve(w2))}</div>`;
     });
@@ -21624,6 +23197,132 @@ function offsetIn(root, node, off) {
   return r2.toString().length;
 }
 
+// src/web/src/reload.ts
+var PAGE_VERSION = true ? "0.4.1" : null;
+var KEY4 = "visualproof:reload";
+var FOR_KEY2 = "visualproof:reloaded-for";
+var FRESH_MS = 10 * 6e4;
+var session = () => {
+  try {
+    return globalThis.sessionStorage ?? null;
+  } catch {
+    return null;
+  }
+};
+function keep(k2, storage = session()) {
+  try {
+    storage?.setItem(KEY4, JSON.stringify(k2));
+  } catch {
+  }
+}
+var pairs = (x2, ok) => Array.isArray(x2) ? x2.filter((p2) => Array.isArray(p2) && p2.length === 2 && typeof p2[0] === "string" && ok(p2[1])) : [];
+var isString = (v2) => typeof v2 === "string";
+var isBool = (v2) => typeof v2 === "boolean";
+var win = (v2) => v2 && typeof v2 === "object" && typeof v2.name === "string" ? { name: v2.name, collapsed: v2.collapsed === true } : null;
+function takeKept(root, now = Date.now(), storage = session()) {
+  let raw = null;
+  try {
+    raw = storage?.getItem(KEY4) ?? null;
+    storage?.removeItem(KEY4);
+  } catch {
+    return null;
+  }
+  if (!raw) return null;
+  try {
+    const k2 = JSON.parse(raw);
+    if (k2.root !== root || typeof k2.at !== "number" || now - k2.at > FRESH_MS || now < k2.at) return null;
+    const pinned = Array.isArray(k2.sources?.pinned) ? k2.sources.pinned.map(win).filter((w2) => w2 !== null) : [];
+    return { root, at: k2.at, sources: { following: win(k2.sources?.following), pinned }, review: pairs(k2.review, isString), talk: pairs(k2.talk, isString), notes: pairs(k2.notes, isBool) };
+  } catch {
+    return null;
+  }
+}
+var RETRY_MS = 1e3;
+var SPREAD_MS = 5e3;
+var NAME_PREFIX = "visualproof-reloaded-for:";
+var Reloader = class {
+  /** the version the server runs, where it is another than this page's; null: none waits */
+  wanted = null;
+  hooks;
+  timer = null;
+  page;
+  spread;
+  constructor(hooks, page = PAGE_VERSION, spread = SPREAD_MS) {
+    this.hooks = hooks;
+    this.page = page;
+    this.spread = spread;
+  }
+  /** The server said which it is, as a stream opened: of another version, the page reloads into
+   *  it as soon as nothing is cut short; of this page's (a step back meanwhile), nothing waits. */
+  hello(server) {
+    if (!server || !this.page) return;
+    if (server.version === this.page) {
+      if (this.wanted !== null) {
+        this.wanted = null;
+        this.stopWaiting();
+        this.hooks.offer(null);
+      }
+      return;
+    }
+    const fresh3 = this.wanted !== server.version;
+    this.wanted = server.version;
+    this.stopWaiting();
+    if (fresh3 && this.spread > 0) this.timer = setTimeout(() => this.attempt(), Math.random() * this.spread);
+    else this.attempt();
+  }
+  /** Reload now, keeping what this page holds: the reader asked (the pill), or nothing waits. */
+  go() {
+    this.stopWaiting();
+    const storage = this.storage();
+    keep(this.hooks.kept(), storage);
+    if (this.wanted !== null) this.reloadedFor(this.wanted);
+    this.hooks.reload();
+  }
+  storage() {
+    return this.hooks.storage === void 0 ? session() : this.hooks.storage;
+  }
+  /** Keep the version this tab reloads for: in its sessionStorage, else, where that is refused, in
+   *  its name (window.name), which a reload keeps too — so that a page that cannot keep it never
+   *  reloads, and reloads, for ever. */
+  reloadedFor(v2) {
+    try {
+      const st2 = this.storage();
+      if (!st2) throw new Error("no storage");
+      st2.setItem(FOR_KEY2, v2);
+      return;
+    } catch {
+    }
+    try {
+      globalThis.name = `${NAME_PREFIX}${v2}`;
+    } catch {
+    }
+  }
+  lastReloadedFor() {
+    try {
+      const st2 = this.storage();
+      if (!st2) throw new Error("no storage");
+      const v2 = st2.getItem(FOR_KEY2);
+      if (v2 !== null) return v2;
+    } catch {
+    }
+    const name = globalThis.name;
+    return typeof name === "string" && name.startsWith(NAME_PREFIX) ? name.slice(NAME_PREFIX.length) : null;
+  }
+  attempt() {
+    if (this.wanted === null) return;
+    const done = this.lastReloadedFor();
+    if (done === this.wanted) return;
+    if (this.hooks.busy() === null) return this.go();
+    this.hooks.offer(this.wanted);
+    this.stopWaiting();
+    this.timer = setTimeout(() => this.attempt(), RETRY_MS);
+  }
+  stopWaiting() {
+    if (this.timer !== null) clearTimeout(this.timer);
+    this.timer = null;
+  }
+};
+
 // src/web/src/paperdock.ts
 function pairingStep(o2) {
   if (!o2.found?.links.length) return { none: "unlinked", said: o2.open };
@@ -43235,8 +44934,8 @@ var PdfView = class extends View {
   dragText(e2, pageEl) {
     this.clearDrag();
     this.hooks.picked(null, null);
-    const win = this.scroller.closest(".pw-win");
-    if (win && document.activeElement !== win) win.focus({ preventScroll: true });
+    const win2 = this.scroller.closest(".pw-win");
+    if (win2 && document.activeElement !== win2) win2.focus({ preventScroll: true });
     const n3 = Number(pageEl.dataset.n);
     const r0 = pageEl.getBoundingClientRect();
     const fx = (e2.clientX - r0.left) / r0.width, fy = (e2.clientY - r0.top) / r0.height;
@@ -44381,9 +46080,9 @@ var Papers = class {
    *  pairing puts it (web/src/paperdock.ts, `pairKeeps`): so that the pairing never shows the two
    *  overlapping (the owner's decision of 2026-10-11), but where the page is too narrow for both. */
   keepApart(w2) {
-    const keep = pairKeeps(w2.byHand ? w2.rect() : null, this.win.byHand ? this.win.rect() : null, pairArea(viewport2(), pairTop()));
-    if (this.win.byHand && !keep.paper) this.win.unmove();
-    if (!w2.byHand || keep.source) return;
+    const keep2 = pairKeeps(w2.byHand ? w2.rect() : null, this.win.byHand ? this.win.rect() : null, pairArea(viewport2(), pairTop()));
+    if (this.win.byHand && !keep2.paper) this.win.unmove();
+    if (!w2.byHand || keep2.source) return;
     if (w2.pinned) this.placePinned(w2);
     else w2.pairAt(null);
   }
@@ -46094,9 +47793,9 @@ var LinearForm = class {
   setText(text2) {
     const c3 = this.ctx;
     c3.font = `12px ${FONT2}`;
-    const plain = text2.replace(/\*\*|`/g, "").replace(/(^|\s)\*(\S[^*]*)\*/g, "$1$2");
+    const plain2 = text2.replace(/\*\*|`/g, "").replace(/(^|\s)\*(\S[^*]*)\*/g, "$1$2");
     const out = [];
-    for (const para of plain.split("\n")) {
+    for (const para of plain2.split("\n")) {
       let line = "";
       for (const word of para.split(/\s+/).filter(Boolean)) {
         const next = line ? `${line} ${word}` : word;
@@ -46199,10 +47898,10 @@ var LinearForm = class {
       this.t = this.target > this.t ? Math.min(this.target, this.t + step2) : Math.max(this.target, this.t - step2);
       this.request();
     }
-    const board = 1 - ease2(this.t);
+    const board2 = 1 - ease2(this.t);
     for (const id of ["canvas", "labels", "cards", "stickies"]) {
       const e2 = document.getElementById(id);
-      if (e2) e2.style.opacity = board >= 0.999 ? "" : String(board);
+      if (e2) e2.style.opacity = board2 >= 0.999 ? "" : String(board2);
     }
     if (this.t === 0 && this.target === 0) {
       this.el.hidden = true;
@@ -46397,7 +48096,7 @@ var LinearForm = class {
     for (const r2 of this.rows) if (r2.kind === "decl" && r2.k >= 0) rowOf.set(r2.k, r2);
     for (const [i2, r2] of this.under) rowOf.set(i2, r2);
     const sites = SITE_STMT | SITE_BODY;
-    const pairs = /* @__PURE__ */ new Map();
+    const pairs2 = /* @__PURE__ */ new Map();
     for (const [u2, ru] of rowOf) {
       for (let e2 = g2.outStart[u2]; e2 < g2.outStart[u2 + 1]; e2++) {
         const t2 = g2.outDst[e2];
@@ -46406,13 +48105,13 @@ var LinearForm = class {
         if (!rt2 || rt2 === ru) continue;
         const lit = this.hooks.edgeLit(u2, t2, g2.outSite[e2]);
         const key = `${ru.y0}:${rt2.y0}`;
-        const was = pairs.get(key);
+        const was = pairs2.get(key);
         if (was) was.lit ||= lit;
-        else pairs.set(key, { a: ru, b: rt2, lit });
+        else pairs2.set(key, { a: ru, b: rt2, lit });
       }
     }
     const links = this.hooks.keyLinks();
-    const out = [...pairs.values()];
+    const out = [...pairs2.values()];
     if (links) {
       const seen = /* @__PURE__ */ new Set();
       for (let j2 = 0; j2 + 1 < links.length; j2 += 2) {
@@ -46427,12 +48126,12 @@ var LinearForm = class {
   /** The arcs on the left of the line, orange at the end that uses and blue at the end used, as on
    *  the board; the lit drawn bolder, a key link dashed. Past ARCS_MOST, only the lit. */
   arcs(c3, pos, alpha, css) {
-    const pairs = this.arcPairs();
-    const few = pairs.length <= ARCS_MOST;
+    const pairs2 = this.arcPairs();
+    const few = pairs2.length <= ARCS_MOST;
     const { h: h2 } = this.canvas.screen;
     const from = css("--edge-from") || "rgba(240,110,20,0.85)";
     const to = css("--edge-to") || "rgba(59,91,219,0.85)";
-    for (const { a: a3, b: b2, lit, key } of pairs) {
+    for (const { a: a3, b: b2, lit, key } of pairs2) {
       if (!few && !lit) continue;
       const [xa, ya] = pos(a3), [xb, yb] = pos(b2);
       if (ya < -20 && yb < -20 || ya > h2 + 20 && yb > h2 + 20) continue;
@@ -47101,8 +48800,8 @@ var FOOT_PRE = "Generated by ";
 var footFonts = (px2, font) => [`500 ${px2}px ${font}`, `700 ${px2 * 1.1}px ${font}`];
 var FOOT_GAP = 1.6;
 function footMost(measure2, w2, h2, source, font) {
-  const [plain, mark] = footFonts(100, font);
-  const across2 = (measure2(FOOT_PRE, plain) + measure2("VisualProof", mark) + (source ? measure2(source, plain) : 0)) / 100;
+  const [plain2, mark] = footFonts(100, font);
+  const across2 = (measure2(FOOT_PRE, plain2) + measure2("VisualProof", mark) + (source ? measure2(source, plain2) : 0)) / 100;
   return w2 / (across2 + (source ? FOOT_GAP : 0) + 2) / h2 * 100;
 }
 function drawFoot(ctx, rect, source, colours, font, size) {
@@ -47112,17 +48811,17 @@ function drawFoot(ctx, rect, source, colours, font, size) {
   };
   ctx.save();
   const px2 = Math.min(size, footMost(measure2, rect.w, rect.h, source, font)) / 100 * rect.h;
-  const [plain, mark] = footFonts(px2, font);
-  const pw = measure2(FOOT_PRE, plain), bw = measure2("VisualProof", mark);
+  const [plain2, mark] = footFonts(px2, font);
+  const pw = measure2(FOOT_PRE, plain2), bw = measure2("VisualProof", mark);
   const y2 = rect.y + rect.h - px2, x2 = rect.x + px2, right = rect.x + rect.w - px2;
   const grad = ctx.createLinearGradient(x2 + pw, 0, x2 + pw + bw, 0);
   BRAND.forEach((c3, k2) => grad.addColorStop(k2 / (BRAND.length - 1), c3));
   writeNames(
     ctx,
     [
-      { text: FOOT_PRE, x: x2, y: y2, font: plain, align: "left", fill: colours.text },
+      { text: FOOT_PRE, x: x2, y: y2, font: plain2, align: "left", fill: colours.text },
       { text: "VisualProof", x: x2 + pw, y: y2, font: mark, align: "left", fill: grad },
-      ...source ? [{ text: source, x: right, y: y2, font: plain, align: "right", fill: colours.text }] : []
+      ...source ? [{ text: source, x: right, y: y2, font: plain2, align: "right", fill: colours.text }] : []
     ],
     colours.halo
   );
@@ -47798,14 +49497,14 @@ var ArtFrame = class {
   frame() {
     if (!this.isOpen || this.s?.labels !== "chosen") return;
     clearTimeout(this.rowsWait);
-    const read = () => {
+    const read2 = () => {
       const was = this.rows, wrote = this.wrote;
       this.readRows();
       const now = this.canvas.writtenNames();
       if (was.length !== this.rows.length || was.some((r2, j2) => r2.id !== this.rows[j2].id) || wrote.size !== now.size || [...now].some((id) => !wrote.has(id))) this.renderRows();
     };
-    if (performance.now() - this.rowsAt > 1e3) read();
-    else this.rowsWait = window.setTimeout(read, 300);
+    if (performance.now() - this.rowsAt > 1e3) read2();
+    else this.rowsWait = window.setTimeout(read2, 300);
   }
   /** What the panel lists changed elsewhere (the review's targets): it is drawn again. */
   refresh() {
@@ -47956,11 +49655,11 @@ var ArtFrame = class {
   }
   /** The frame in the middle of the room the panel leaves, of the size's shape. `keep`: the frame
    *  there keeps what it showed — the same middle, as much of the board. */
-  place(keep) {
+  place(keep2) {
     const s2 = this.s;
     const { x: x2, y: y2, w: w2, h: h2 } = frameRect({ w: innerWidth, h: innerHeight }, s2);
     const was = this.rect;
-    if (keep && was.w > 0) {
+    if (keep2 && was.w > 0) {
       const C2 = this.canvas;
       const [cx, cy] = C2.toWorld(was.x + was.w / 2, was.y + was.h / 2);
       const k2 = C2.cam.k * Math.sqrt(w2 * h2 / (was.w * was.h));
@@ -48440,6 +50139,17 @@ function encodeState(s2) {
   }
   return p2.toString();
 }
+function tipsIn(hash) {
+  const text2 = hash.startsWith("#") ? hash.slice(1) : hash;
+  if (!text2) return void 0;
+  const p2 = new URLSearchParams(text2);
+  if (!p2.has("tips")) return void 0;
+  const c3 = p2.get("tips").trim();
+  return /^[a-z0-9]+(-[a-z0-9]+)*$/.test(c3) ? c3 : null;
+}
+function tipsPart(open, chapter) {
+  return open ? `&tips${chapter ? `=${encodeURIComponent(chapter)}` : ""}` : "";
+}
 function decodeState(hash) {
   const text2 = hash.startsWith("#") ? hash.slice(1) : hash;
   if (!text2) return null;
@@ -49155,12 +50865,12 @@ var LayoutQueue = class {
   /** What is wanted changed: what nobody wants is dropped, and a layout running is stopped where
    *  nobody wants it and a wanted one waits with no worker free; then the next ones start. */
   prune() {
-    const keep = [];
+    const keep2 = [];
     for (const j2 of this.waiting) {
-      if (this.want(j2.snapshot) > 0) keep.push(j2);
+      if (this.want(j2.snapshot) > 0) keep2.push(j2);
       else this.drop(j2);
     }
-    this.waiting = keep;
+    this.waiting = keep2;
     for (const s2 of this.slots) {
       if (this.waiting.length <= this.slots.filter((x2) => !x2.job).length) break;
       const j2 = s2.job;
@@ -50184,7 +51894,7 @@ async function waitReady(data) {
   const log = $4("#loader-log");
   for (; ; ) {
     const st2 = await data.status();
-    log.textContent = st2.log.slice(-8).join("\n");
+    log.textContent = (st2.log ?? []).slice(-8).join("\n");
     if (st2.state === "ready") return { graph: st2.graph ?? null, editor: st2.editor ?? null };
     if (st2.state === "error") {
       $4("#loader-title").textContent = "Could not read the project";
@@ -50208,14 +51918,23 @@ async function boot() {
   const ready = await waitReady(data);
   let graphInfo = ready.graph;
   const reviewing = data.review().catch(() => ({ epoch: "", rev: 0, data: emptyReview(), problems: [], error: "The review could not be loaded." }));
-  const [meta0, edges0] = await Promise.all([data.meta(graphInfo?.version), data.edges(graphInfo?.version)]);
+  const [meta0, edges0] = await Promise.all([data.meta(graphInfo?.version, graphInfo?.instance), data.edges(graphInfo?.version, graphInfo?.instance)]);
   let meta = meta0;
   let present = new Graph(meta, new Int32Array(edges0));
   let g2 = present;
   const store = new Store(meta.project.root);
   const S2 = store.data;
+  const kept = data.snapshot ? null : takeKept(meta.project.root);
   const reader = data.snapshot ? null : (await data.identity()).readOnly?.by ?? null;
   const editor = new Editor(store, ready.editor);
+  let offerTip = (_rule) => {
+  };
+  let didTip = (_rule) => {
+  };
+  let countTip = (_name, _rule) => 0;
+  let heardRelease = null;
+  let hearRelease = (v2) => void (heardRelease = v2);
+  let readOnlyLinks = false;
   document.title = `${meta.project.name} \u2014 VisualProof`;
   $4("#project").textContent = meta.project.name;
   if (data.snapshot) {
@@ -50240,6 +51959,8 @@ async function boot() {
   let updating = false;
   let extractError = null;
   let offline = false;
+  let updatingTo = null;
+  let reloadOffered = null;
   let showLevel = () => {
   };
   let setEdges = (_edges) => {
@@ -50361,6 +52082,7 @@ async function boot() {
     pastShown() ? Promise.resolve(PAST_REVIEW2) : data.postReview(op).then(
       (c3) => {
         if (c3) takeChange(c3);
+        tipsOnReview(op);
         return null;
       },
       (e2) => {
@@ -50450,6 +52172,7 @@ async function boot() {
     go: (i2) => go(i2),
     openSource: (name, from, to, quoted, root) => openSourceAt(name, from, to, quoted, root)
   });
+  if (kept) reviewBox.restoreDrafts(kept.review);
   const declNow = (i2) => nav.board?.past?.past.nowName.get(g2.nodes[i2].name) ?? g2.nodes[i2].name;
   const clickedDecls = () => picks.flatMap((p2) => {
     const j2 = p2.root && "decl" in p2.root ? g2.byName.get(p2.root.decl) : void 0;
@@ -50561,8 +52284,8 @@ async function boot() {
     if (!past || g2 !== past.graph) return null;
     const s2 = past.snapshot;
     const m3 = past.marks[i2] ?? 0;
-    const kept = g2.isExt(i2) || !g2.nodes[i2].range ? null : past.kept.get(g2.nodes[i2].module);
-    const then = g2.isExt(i2) || !g2.nodes[i2].range ? "its statement and doc then." : kept ? "its statement, doc and source then (Space)." : "its statement and doc then; its source then is not kept.";
+    const kept2 = g2.isExt(i2) || !g2.nodes[i2].range ? null : past.kept.get(g2.nodes[i2].module);
+    const then = g2.isExt(i2) || !g2.nodes[i2].range ? "its statement and doc then." : kept2 ? "its statement, doc and source then (Space)." : "its statement and doc then; its source then is not kept.";
     const now = past.nowName.get(g2.nodes[i2].name);
     const what = m3 & PAST_GHOST ? "Gone now: no rename since carried it." : [m3 & PAST_RENAMED ? `Renamed since: now <code>${escapeHtml(now ?? "")}</code>.` : "", m3 & PAST_CHANGED ? "Changed since: another version now." : ""].filter(Boolean).join(" ");
     return `<div class="banner tm-then"><b>As built ${escapeHtml(buildWhen(s2.at))}</b>${s2.commit ? ` \xB7 <code>${escapeHtml(s2.commit.hash.slice(0, 7))}</code>` : ""}: ${then}${what ? `<div class="tm-then-m">${what}</div>` : ""}</div>`;
@@ -50577,7 +52300,7 @@ async function boot() {
     preview: (i2) => canvas.preview(i2 === null || toView(i2) < 0 ? null : toView(i2)),
     previewCluster: (c3) => canvas.previewCluster(c3),
     zoom: (c3) => void zoomCluster(c3),
-    canZoom: (c3) => clusterScope(c3) !== null,
+    canZoom: (c3) => !reader && clusterScope(c3) !== null,
     hide: (c3) => hideLevel(canvas.layout.clusters[c3].key),
     trust: (c3) => trust.state(canvas.layout.clusters[c3], cm()),
     trustClicked: (c3, anchor) => trust.clicked(canvas.layout.clusters[c3], cm(), anchor),
@@ -50593,6 +52316,7 @@ async function boot() {
     links: (key, mode) => papers.clusterHtml(key, mode)
   });
   const selBar = new SelectionBar($4("#selbar"), {
+    canOpenViews: () => !reader,
     show: (k2) => {
       const to = shownOf(picks[k2]);
       if (!to) return;
@@ -50694,6 +52418,7 @@ async function boot() {
     sources.redrawReviews();
     const k2 = i2 === null ? -1 : visitorOf(i2);
     canvas.setLead(i2 !== null && toView(i2) >= 0 ? { kind: "node", i: toView(i2) } : k2 >= 0 ? { kind: "visitor", k: k2 } : null, leadEnd);
+    if ($4("#panel details[data-rv-changes]:not([open])")) offerTip("stale-opinion");
     if (i2 !== null && editedNow(i2) === null && !pastShown())
       void edited(i2).then((e2) => {
         if ((e2 || reviewBox.needsSource(i2)) && selected() === i2 && !pastShown()) {
@@ -50703,6 +52428,8 @@ async function boot() {
       });
   };
   const linked = decodeState(location.hash);
+  const filmLink = tipsIn(location.hash);
+  let filmPart = "";
   let first = linked ? linked.view ?? PROJECT : S2.active ?? PROJECT;
   if (linked?.scope) {
     const v2 = await views.open(linked.scope, { version: linked.version ?? null });
@@ -50774,7 +52501,7 @@ async function boot() {
     menu: (t2, x2, y2, world) => openMenu(t2, x2, y2, world),
     frozenDrag: () => say(frozenWhy())
   });
-  const ownOpen = /* @__PURE__ */ new Map();
+  const ownOpen = new Map(reader && kept ? kept.notes : []);
   const asOpenHere = (ns) => ownOpen.size ? ns.map((n3) => ownOpen.has(n3.id) && ownOpen.get(n3.id) !== n3.open ? { ...n3, open: ownOpen.get(n3.id) } : n3) : ns;
   const stickies = new Stickies($4("#stickies"), canvas, {
     notes: () => ({ project: asOpenHere(projectNotes.list), view: asOpenHere(nav.board?.rec.notes ?? []) }),
@@ -51181,6 +52908,7 @@ async function boot() {
     },
     replied: () => chatWin.replied()
   });
+  if (kept) talk.restoreDrafts(kept.talk);
   const describePlace = (v2) => {
     const name = (m3) => TOOLS.includes(m3) ? toolName(m3) : m3;
     const parts2 = [];
@@ -51321,10 +53049,10 @@ async function boot() {
     if (line) say(line);
   };
   const openRecipe = async (link) => {
-    const read = readRecipe(decodeRecipe(link.text));
-    if ("error" in read) return say(`This link's artwork could not be read: ${read.error}`);
+    const read2 = readRecipe(decodeRecipe(link.text));
+    if ("error" in read2) return say(`This link's artwork could not be read: ${read2.error}`);
     const L2 = canvas.layout;
-    const { look, problems, left } = resolveRecipe(read.recipe, {
+    const { look, problems, left } = resolveRecipe(read2.recipe, {
       clusters: L2.clusters,
       clusterOf: (name) => {
         const i2 = g2.byName.get(name);
@@ -51686,11 +53414,11 @@ async function boot() {
   };
   const takeChange = (c3) => {
     if (c3.epoch === review.epoch && c3.rev <= review.rev) return;
-    const read = (e2) => {
+    const read2 = (e2) => {
       const o2 = e2;
       return readEvent(e2, o2.agent === true, validPersonId(o2.person) ? o2.person : null);
     };
-    const events = c3.epoch === review.epoch && c3.base === review.rev && c3.events ? c3.events.map(read).filter((e2) => e2 !== null) : null;
+    const events = c3.epoch === review.epoch && c3.base === review.rev && c3.events ? c3.events.map(read2).filter((e2) => e2 !== null) : null;
     if (!events || events.some((e2) => typeof e2 === "string")) {
       void data.review().then(takeWhole, () => {
       });
@@ -51799,12 +53527,39 @@ async function boot() {
       say(`${pickWords(p2)} is inside ${pickWords(r2.covered)}, which is selected: nothing changed.`);
       return false;
     }
+    const before = picks.length;
     picks = r2.picks;
     shown = r2.shown;
     apply();
     commit();
+    tipsOnClick(p2, shift, before);
     return true;
   };
+  let replaced = [];
+  const tipsOnClick = (p2, shift, before) => {
+    const decl = p2.root && "decl" in p2.root ? p2.root.decl : null;
+    if (S2.mode === "plain") {
+      if (shift) return didTip("selection-replace");
+      if (!decl || !before) return;
+      const now = Date.now();
+      replaced = [...replaced.filter((t2) => now - t2 < 2e4), now];
+      if (replaced.length >= 3) offerTip("selection-replace");
+    } else if (S2.mode === "tcb" && decl) {
+      const i2 = g2.byName.get(decl);
+      const q2 = selectionQuery(picks);
+      if (i2 !== void 0 && g2.nodes[i2].kind === "theorem" && q2 && litOn(q2).count > 1) offerTip("tcb-first");
+      if (countTip("tcb-picks", "rests-only-tcb") >= 5) offerTip("rests-only-tcb");
+    }
+  };
+  let approvedInFocus = 0;
+  const tipsOnReview = (op) => {
+    if (op.op === "key" && op.on) return didTip("key-in-target");
+    if (op.op !== "opinion" || op.verdict !== "approve") return;
+    const r2 = reviewRoot();
+    const i2 = g2.byName.get(op.name);
+    if (r2 === null || i2 === void 0 || !flow.inReview(r2, i2) || keyMarks(review.data, g2.nodes[r2].name).length) return;
+    if (++approvedInFocus >= 2) offerTip("key-in-target");
+  };
   const useTool = (m3) => {
     S2.mode = m3;
     if (restsOn(m3)) S2.restsOn = m3;
@@ -51821,6 +53576,13 @@ async function boot() {
     apply();
     commit();
   };
+  const readerMode = (m3) => {
+    if (m3 === "keys" || m3 === "deps" || m3 === "refs") {
+      didTip("tcb-first");
+      didTip("rests-only-tcb");
+    }
+    setMode(m3);
+  };
   const clear = () => {
     picks = [];
     shown = null;
@@ -51951,6 +53713,7 @@ async function boot() {
       return false;
     }
     if (!await tm.open({ snapshot: at.snapshot })) return false;
+    offerTip("first-time-machine");
     if (!at.name || goName(at.name)) return true;
     say(`${at.name} is not in the graph of that build.`);
     return true;
@@ -52115,7 +53878,7 @@ async function boot() {
   };
   const writeAddress = (push) => {
     if (!push && nav.busy) return;
-    const hash = "#" + encodeState(current2());
+    const hash = "#" + encodeState(current2()) + filmPart;
     try {
       if (push && hash !== location.hash) {
         history.replaceState({ ...entry(), cam: { ...canvas.cam } }, "");
@@ -52200,9 +53963,14 @@ async function boot() {
     let cls = "ok";
     let text2 = "Built";
     const c3 = build?.counts;
-    if (offline) {
+    if (offline && updatingTo) {
+      cls = "building";
+      text2 = `Updating to ${updatingTo}\u2026`;
+    } else if (offline) {
       cls = "off";
       text2 = "Offline";
+    } else if (reloadOffered) {
+      text2 = "Updated \u2014 reload";
     } else if (build?.active) {
       cls = "building";
       const p2 = build.progress;
@@ -52281,10 +54049,60 @@ async function boot() {
     else timeMachine(snap2 !== void 0 ? { snapshot: Number(snap2) } : void 0);
   });
   let reconnected = false;
+  const reloader = new Reloader({
+    busy: () => {
+      const a3 = document.activeElement;
+      if ((a3 instanceof HTMLTextAreaElement || a3 instanceof HTMLInputElement && (a3.type === "text" || a3.type === "search")) && a3.value.trim()) return "text being typed";
+      if (a3 instanceof HTMLElement && a3.isContentEditable) return "text being typed";
+      if (stickies.editing) return "a note being written";
+      if (canvas.pressed) return "a drag";
+      if (exportModal.isOpen) return "the export window";
+      if (artLook) return "the artwork mode";
+      if (linear.shown) return "the linear form";
+      return null;
+    },
+    kept: () => ({
+      root: meta.project.root,
+      at: Date.now(),
+      sources: {
+        following: sources.following ? { name: sources.following.name, collapsed: sources.following.collapsed } : null,
+        pinned: sources.pinned.map((p2) => ({ name: p2.name, collapsed: p2.collapsed }))
+      },
+      review: reviewBox.keptDrafts,
+      talk: talk.keptDrafts,
+      notes: reader ? [...ownOpen] : []
+    }),
+    offer: (v2) => {
+      reloadOffered = v2;
+      renderBuild();
+    },
+    reload: () => location.reload()
+  });
+  pill.addEventListener(
+    "click",
+    (e2) => {
+      if (!reloadOffered) return;
+      e2.stopImmediatePropagation();
+      reloader.go();
+    },
+    true
+  );
   const listen = () => {
     if (data.snapshot) return;
     const es = new EventSource(`/api/events?session=${people.session}`);
-    es.addEventListener("hello", (e2) => people.connected(JSON.parse(e2.data)));
+    es.addEventListener("hello", (e2) => {
+      const hello = JSON.parse(e2.data);
+      people.connected(hello);
+      updatingTo = null;
+      reloader.hello(hello.server);
+      const release = hello.server?.version;
+      if (release && (!PAGE_VERSION || release === PAGE_VERSION)) hearRelease(release);
+      renderBuild();
+    });
+    es.addEventListener("update", (e2) => {
+      updatingTo = JSON.parse(e2.data).to ?? null;
+      renderBuild();
+    });
     es.addEventListener("presence", (e2) => people.setPeers(JSON.parse(e2.data)));
     es.addEventListener("private", (e2) => people.setPrivateCount(JSON.parse(e2.data).count));
     es.addEventListener("people", (e2) => {
@@ -52360,9 +54178,9 @@ async function boot() {
     es.addEventListener("graph", async (e2) => {
       const info2 = JSON.parse(e2.data);
       extractError = null;
-      if (graphInfo && info2.version === graphInfo.version) return;
+      if (graphInfo && info2.version === graphInfo.version && info2.instance === graphInfo.instance) return;
       try {
-        const [next, edges] = await Promise.all([data.meta(info2.version), data.edges(info2.version)]);
+        const [next, edges] = await Promise.all([data.meta(info2.version, info2.instance), data.edges(info2.version, info2.instance)]);
         graphInfo = info2;
         await install(next, edges);
       } catch {
@@ -52371,10 +54189,10 @@ async function boot() {
     });
   };
   for (const b2 of document.querySelectorAll("#lightup [data-mode]")) {
-    b2.addEventListener("click", () => setMode(b2.dataset.mode));
+    b2.addEventListener("click", () => readerMode(b2.dataset.mode));
   }
   $4("#rests-btn").addEventListener("click", () => {
-    if (!restsOn(S2.mode)) setMode(enterStep(S2.restsOn));
+    if (!restsOn(S2.mode)) readerMode(enterStep(S2.restsOn));
   });
   for (const b2 of document.querySelectorAll("#board-pop [data-cluster]")) {
     b2.addEventListener("click", () => void sync.setClustering(b2.dataset.cluster));
@@ -52695,10 +54513,10 @@ async function boot() {
     if (frozen()) return say(frozenWhy());
     const why = await named2();
     if (why) return say(why.replace("A view is made", "A note is written"));
-    const board = nav.board.id;
-    const label = kind === "project" ? fixedScope(nav.board.rec) ? "A note of the project, on the Project and every view whose scope gives it" : "A note of the project, on this view, the Project and every view whose scope gives it" : `A note of \u201C${views.title(board)}\u201D alone`;
+    const board2 = nav.board.id;
+    const label = kind === "project" ? fixedScope(nav.board.rec) ? "A note of the project, on the Project and every view whose scope gives it" : "A note of the project, on this view, the Project and every view whose scope gives it" : `A note of \u201C${views.title(board2)}\u201D alone`;
     stickies.edit(at, "", label, (text2) => {
-      if (text2 === null || nav.board.id !== board) return;
+      if (text2 === null || nav.board.id !== board2) return;
       const to = stickies.placeFor(kind, world);
       if (!to) return;
       const who = { open: true, by: people.name, at: (/* @__PURE__ */ new Date()).toISOString() };
@@ -52712,9 +54530,9 @@ async function boot() {
     if (frozen()) return say(frozenWhy());
     const why = await named2();
     if (why) return say(why.replace("A view is made", "A note is edited"));
-    const board = nav.board.id;
+    const board2 = nav.board.id;
     stickies.edit(stickies.screenOf(id) ?? at ?? { x: innerWidth / 2 - 150, y: innerHeight / 3 }, n3.note.text, "Edit the note", (text2) => {
-      if (text2 === null || text2 === n3.note.text || nav.board.id !== board || !noteOf(id)) return;
+      if (text2 === null || text2 === n3.note.text || nav.board.id !== board2 || !noteOf(id)) return;
       const edit = { id, text: text2, by: people.name, at: (/* @__PURE__ */ new Date()).toISOString() };
       if (n3.kind === "project") void projectOps([{ op: "pnote-edit", ...edit }]);
       else noteOps([{ op: "note-edit", ...edit }]);
@@ -52875,14 +54693,14 @@ async function boot() {
     const no = noteRefused();
     if (no) return say(no);
     if (!await people.ensure()) return say("A file is added to the library under your name: give one first.");
-    const board = nav.board.id;
+    const board2 = nav.board.id;
     const spots = stickies.placesFor(canvas.toWorld(at.x, at.y), files2.length);
     if (!spots) return say("This board is not drawn yet.");
     const made3 = await notesOfFiles(files2, spots, {
       upload: (f2) => uploadFile(f2, papers.headers()),
       take: (c3) => takeChange(c3),
       write: (note) => projectOps([{ op: "pnote", note }], true),
-      still: () => nav.board.id === board,
+      still: () => nav.board.id === board2,
       say: (text2) => say(text2),
       by: people.name,
       lost: () => people.lost()
@@ -53044,10 +54862,10 @@ ${n3.note.text.slice(0, 200)}`)) return;
   const input = $4("#search");
   const searchBox = new SearchBox(input, $4("#results"), g2, { go: (i2) => go(i2) });
   window.addEventListener("keydown", (e2) => {
-    const win = sources.at(e2.target);
+    const win2 = sources.at(e2.target);
     if (typing(e2.target) || typing(document.activeElement)) {
       if (e2.key === "Escape" && e2.target !== input && !$4("#modal").contains(e2.target)) {
-        if (win) win.el.focus();
+        if (win2) win2.el.focus();
         else e2.target.blur();
       }
       return;
@@ -53065,26 +54883,26 @@ ${n3.note.text.slice(0, 200)}`)) return;
     }
     if (artLook && !ART_KEYS.has(e2.key)) return;
     if ((e2.ctrlKey || e2.metaKey) && e2.key.length === 1) return;
-    const route = routeKey(e2.key, win !== null, !!e2.target?.closest?.("button, a[href], summary, select"));
+    const route = routeKey(e2.key, win2 !== null, !!e2.target?.closest?.("button, a[href], summary, select"));
     if (route === "press") return;
-    if (win && route === "close") {
+    if (win2 && route === "close") {
       e2.preventDefault();
-      sources.close(win);
+      sources.close(win2);
       return;
     }
-    if (win && route === "own") {
+    if (win2 && route === "own") {
       if (e2.ctrlKey || e2.metaKey || e2.altKey || e2.repeat) return;
       e2.preventDefault();
-      if (e2.key === "k") toggleKey(win.decl);
-      else reviewBox.give(e2.key === "a" ? "approve" : "comment", win.decl, win.el);
+      if (e2.key === "k") toggleKey(win2.decl);
+      else reviewBox.give(e2.key === "a" ? "approve" : "comment", win2.decl, win2.el);
       return;
     }
     if (e2.key === "/") {
       e2.preventDefault();
       searchBox.focus();
-    } else if (e2.key === "1") setMode("plain");
-    else if (e2.key === "2") setMode(keyTwo(S2.mode, S2.restsOn));
-    else if (e2.key === "3") setMode("apps");
+    } else if (e2.key === "1") readerMode("plain");
+    else if (e2.key === "2") readerMode(keyTwo(S2.mode, S2.restsOn));
+    else if (e2.key === "3") readerMode("apps");
     else if (e2.key === " ") {
       e2.preventDefault();
       const p2 = sources.following;
@@ -53134,6 +54952,7 @@ ${n3.note.text.slice(0, 200)}`)) return;
     } else if (tm.active && !e2.altKey && (e2.key === "ArrowLeft" || e2.key === "ArrowRight")) {
       e2.preventDefault();
       tm.step(e2.key === "ArrowLeft" ? -1 : 1);
+      didTip("first-time-machine");
     } else if (tm.active && (e2.key === "Home" || e2.key === "End")) {
       e2.preventDefault();
       tm.end(e2.key === "End");
@@ -53144,15 +54963,16 @@ ${n3.note.text.slice(0, 200)}`)) return;
       if (i2 !== null && pastShown()) say(PAST_REVIEW2);
       else if (i2 !== null) reviewBox.give(e2.key === "a" ? "approve" : "comment", i2, f2 && !f2.collapsed ? f2.el : $4("#panel"));
     } else if (e2.key === "k" && !e2.ctrlKey && !e2.metaKey && !e2.altKey && !e2.repeat) toggleKey();
-    else if (e2.key === "?") guide.toggleHelp();
+    else if (e2.key === "?") guide.toggleMenu();
   });
-  window.visualproof = { canvas, graph: () => g2, present: () => present, board: () => nav.board, views, tm, timeMachine: (at) => openTimeMachine(at) };
+  window.visualproof = { canvas, linear, graph: () => g2, present: () => present, board: () => nav.board, views, tm, timeMachine: (at) => openTimeMachine(at) };
   window.addEventListener("resize", syncInsets);
   const firstPlace = linked ? { mode: linked.mode, picks: linked.picks, shown: linked.shown, cam: null } : null;
   if (!await nav.select(first, firstPlace)) await nav.show(PROJECT, firstPlace);
   listen();
   const snap = snapshotIn(location.hash);
   if (snap) await openSnapshot(snap);
+  const deepLink = filmLink !== void 0 || !!snap || !!recipeIn(location.hash) || !!linked && (!!linked.picks || !!linked.shown || linked.view !== null && linked.view !== PROJECT || !!linked.scope);
   const recipe = recipeIn(location.hash);
   if (recipe) void openRecipe(recipe);
   if (!data.snapshot) void tm.load().then(() => renderTabs());
@@ -53164,31 +54984,219 @@ ${n3.note.text.slice(0, 200)}`)) return;
   people.renderMe();
   reviewChanged();
   renderBuild();
+  if (kept && (kept.sources.following || kept.sources.pinned.length)) {
+    const on = (w2) => {
+      const decl = present.byName.get(w2.name);
+      return decl === void 0 ? null : { decl, collapsed: w2.collapsed };
+    };
+    const f2 = kept.sources.following && on(kept.sources.following);
+    sources.mirror({ following: f2, pinned: kept.sources.pinned.map(on).filter((w2) => w2 !== null) });
+    sources.release();
+  }
   $4("#loader").classList.add("gone");
+  const tourSelect = (i2) => {
+    if (selected() === i2) return reveal(i2);
+    if (toView(i2) < 0) visitOn(i2, selected());
+    const p2 = pickDecl(g2.nodes[i2].name);
+    picks = [p2];
+    shown = shownOf(p2);
+    apply();
+    reveal(i2);
+  };
+  const tourTool = (m3) => {
+    if (m3 === S2.mode) return;
+    S2.mode = m3;
+    if (restsOn(m3)) S2.restsOn = m3;
+    syncTool();
+    const r2 = retool(picks, shown, m3, (root) => keysFor(root));
+    if (r2.picks === picks) return;
+    picks = r2.picks;
+    shown = r2.shown;
+    apply();
+  };
+  const tourPlace = () => ({ mode: S2.mode, restsOn: S2.restsOn, picks, shown, visitors, cam: { ...canvas.cam } });
+  const tourBack = (p2) => {
+    S2.mode = p2.mode;
+    S2.restsOn = p2.restsOn;
+    store.save();
+    syncTool();
+    picks = p2.picks;
+    shown = p2.shown;
+    visitors = p2.visitors;
+    apply();
+    if (reducedMotion()) canvas.jumpTo(p2.cam);
+    else canvas.glideTo(p2.cam, 450);
+    writeAddress(false);
+  };
+  const keysLit = (name) => {
+    const q2 = selectionQuery([declPick("keys", name, keysFor({ decl: name }))]);
+    return q2 ? Math.max(0, litOn(q2).count - 1) : 0;
+  };
+  const findExample = () => {
+    if (selected() !== null) return selected();
+    const targets = Object.keys(review.data.targets).map((n3) => g2.byName.get(n3)).filter((i2) => i2 !== void 0);
+    const keyed = targets.find((i2) => keysLit(g2.nodes[i2].name) > 0);
+    if (keyed !== void 0) return keyed;
+    if (targets.length) return targets[0];
+    let fallback = null;
+    let tries = 0;
+    for (let i2 = 0; i2 < g2.projectCount && tries < 400; i2++) {
+      if (g2.nodes[i2].kind !== "theorem") continue;
+      tries++;
+      let n3 = 0, u2 = 0;
+      const tcb = g2.reach([i2], SITE_STMT | SITE_BODY, "out");
+      for (let j2 = 0; j2 < g2.projectCount; j2++) n3 += tcb[j2];
+      if (n3 < 6 || n3 > 300) continue;
+      const uses = g2.reach([i2], SITE_STMT | SITE_BODY | SITE_PROOF | SITE_GRAMMAR, "out");
+      for (let j2 = 0; j2 < g2.projectCount; j2++) u2 += uses[j2];
+      if (u2 > n3) return i2;
+      fallback ??= i2;
+    }
+    return fallback;
+  };
+  let exampleOf = null;
+  const tourExample = () => {
+    const key = [g2, nav.board, review.epoch, review.rev, selected()];
+    if (exampleOf && exampleOf.key.every((x2, k2) => x2 === key[k2])) return exampleOf.i;
+    const i2 = findExample();
+    exampleOf = { key, i: i2 };
+    return i2;
+  };
+  const restsOnOf = (i2) => {
+    const name = g2.nodes[i2].name;
+    const G2 = vg();
+    const d2 = boardReview();
+    const lit = (tool) => {
+      const q2 = selectionQuery([declPick(tool, name, keysFor({ decl: name }))]);
+      return q2 ? litOn(q2).set : null;
+    };
+    const tcb = lit("tcb"), uses = lit("deps"), keys = lit("keys");
+    const self2 = toView(i2);
+    let read2 = 0, assumed = 0, proofs = 0, k2 = 0;
+    for (let j2 = 0; j2 < G2.n; j2++) {
+      if (j2 === self2) continue;
+      if (keys?.[j2]) k2++;
+      if (!tcb?.[j2]) {
+        if (uses?.[j2]) proofs++;
+        continue;
+      }
+      if (trusted(d2, G2.nodes[j2].name, G2.nodes[j2].module, G2.isExt(j2))) assumed++;
+      else read2++;
+    }
+    return { name: g2.nodes[i2].display ?? name.split(".").pop(), read: read2, assumed, proofs, keys: k2, target: isTarget(name) };
+  };
+  const showMe = (action) => {
+    const i2 = tourExample();
+    const phone = isPhone();
+    const pick = (m3) => {
+      if (i2 === null) return false;
+      if (m3) tourTool(m3);
+      tourSelect(i2);
+      return true;
+    };
+    switch (action) {
+      case "ring-modes":
+        return phone ? "#more-btn" : "#lightup";
+      case "rests-steps":
+        return pick("tcb") ? phone ? "#more-btn" : "#rests-steps" : null;
+      case "used-by": {
+        if (i2 === null) return null;
+        const tcb = g2.reach([i2], SITE_STMT | SITE_BODY, "out");
+        let d2 = i2;
+        for (let j2 = 0; j2 < g2.projectCount; j2++) if (tcb[j2] && j2 !== i2 && g2.nodes[j2].kind === "def") {
+          d2 = j2;
+          break;
+        }
+        tourTool("apps");
+        tourSelect(d2);
+        return phone ? "#more-btn" : "#lightup [data-mode=apps]";
+      }
+      case "open-source":
+        if (!pick(null)) return null;
+        if (!sources.following) sources.toggle(selected());
+        return ".sw-win";
+      case "colour-status":
+        if (ownScheme() !== "status") chooseScheme("status");
+        $4("#legend [data-lg-open]")?.click();
+        return "#legend";
+      case "ring-review":
+        return pick(null) ? "#panel .rv" : null;
+      case "ring-target":
+        return pick(null) ? phone ? "#panel [data-rv-target]" : "#panel [data-rv-target], #targets" : null;
+      case "ring-key":
+        return reviewRoot() !== null && pick(null) ? "#panel [data-rv-key]" : phone ? "#side-btn" : "#targets";
+      case "what-changed": {
+        const d2 = $4("#panel details[data-rv-changes]");
+        if (!d2) return null;
+        d2.open = true;
+        return "#panel [data-rv-changes]";
+      }
+      case "ring-trusted":
+        return phone ? "#side-btn" : "#trusted-btn";
+      case "library-pair":
+        return phone ? "#more-btn" : "#library-btn";
+      case "ring-lock":
+        if (!eyesPop.open) eyesPop.toggle(true);
+        return "#lock-btn";
+      case "ring-zoom":
+        return pick("tcb") ? "#selbar [data-zoom]" : null;
+      case "ring-board":
+        return phone ? "#side-btn" : "#board-btn";
+      case "ring-peers":
+        return "#peers";
+      // Share, the library and Export are in ⋯ on a phone
+      case "ring-share":
+      case "share-readonly":
+      case "share-agent":
+        return phone ? "#more-btn" : "#share-btn";
+      case "linear":
+        if (!linear.asked) linear.toggle();
+        return "#linear";
+      case "ring-export":
+        return phone ? "#more-btn" : "#export-btn";
+      case "time-machine":
+        if (!tm.active) void openTimeMachine();
+        return "#tmbar";
+      case "ring-lost":
+        if ($4("#build-pop").hidden) $4("#build").click();
+        return "#build-pop [data-bp=lost]";
+    }
+    return null;
+  };
+  const canShowMe = (action) => {
+    if (["rests-steps", "used-by", "open-source", "ring-review", "ring-target", "ring-zoom", "tcb-three"].includes(action)) return tourExample() !== null;
+    if (isPhone() && (action === "ring-lock" || action === "linear")) return false;
+    if (action === "ring-peers") return !$4("#peers").hidden;
+    if (action === "what-changed") return !!$4("#panel details[data-rv-changes]");
+    if (action === "share-readonly") return readOnlyLinks;
+    if (action === "share-agent" || action === "ring-lock") return !reader;
+    if (action === "time-machine" || action === "ring-lost") return !data.snapshot;
+    return true;
+  };
   const guide = new Guide(store, {
     project: () => meta.project.name,
     about,
     snapshot: () => !!data.snapshot,
-    example: () => {
-      if (selected() !== null) return selected();
-      for (const name of Object.keys(review.data.targets)) {
-        const i2 = g2.byName.get(name);
-        if (i2 !== void 0) return i2;
-      }
-      let tries = 0;
-      for (let i2 = 0; i2 < g2.projectCount && tries < 400; i2++) {
-        if (g2.nodes[i2].kind !== "theorem") continue;
-        tries++;
-        let n3 = 0;
-        const seen = g2.reach([i2], SITE_STMT | SITE_BODY, "out");
-        for (let j2 = 0; j2 < g2.projectCount; j2++) n3 += seen[j2];
-        if (n3 >= 6 && n3 <= 300) return i2;
-      }
-      return null;
-    },
-    select: (i2) => {
-      if (selected() !== i2) go(i2);
+    readOnly: () => !!data.snapshot || !!reader,
+    following: () => people.followedName !== null,
+    busy: () => !!artLook,
+    example: tourExample,
+    select: tourSelect,
+    setTool: tourTool,
+    place: tourPlace,
+    back: (p2) => tourBack(p2),
+    // Show me's moves, one step in the history
+    record: commit,
+    restsOn: restsOnOf,
+    frameLit: () => {
+      const q2 = selectionQuery(picks);
+      const lit = q2 && litOn(q2);
+      if (lit?.count) canvas.fitTo(lit.set, !reducedMotion());
     },
+    show: showMe,
+    canShow: canShowMe,
+    // the read-only link's tip on a server that makes them (web/src/share.ts)
+    applies: (t2) => t2.id !== "read-only-link" || readOnlyLinks,
     ended: () => {
     },
     editor: () => ({ server: editor.server, mine: editor.mine }),
@@ -53199,13 +55207,49 @@ ${n3.note.text.slice(0, 200)}`)) return;
         showSelected();
       }
       return why;
-    }
+    },
+    updates: () => data.snapshot ? Promise.resolve(null) : data.updates(),
+    clips: () => data.snapshot ? Promise.resolve(/* @__PURE__ */ new Set()) : data.tipClips(),
+    // the film in the address while it shows (`tips`), and not once the sheet closes
+    shown: (open, chapter) => {
+      const part = tipsPart(open, chapter);
+      if (part === filmPart) return;
+      filmPart = part;
+      writeAddress(false);
+    },
+    tour: () => data.snapshot ? Promise.resolve(null) : data.tourJson()
+  });
+  offerTip = (rule) => guide.inPlace.offer(rule);
+  didTip = (rule) => guide.inPlace.did(rule);
+  countTip = (name, rule) => guide.inPlace.count(name, rule);
+  hearRelease = (v2) => guide.serverIs(v2);
+  if (heardRelease) guide.serverIs(heardRelease);
+  if (!data.snapshot && !reader) void data.shareInfo().then((i2) => readOnlyLinks = !!i2.readOnlyLinks, () => {
   });
-  $4("#help-btn").addEventListener("click", () => guide.toggleHelp());
+  let shareOpened = 0;
+  $4("#share-btn").addEventListener(
+    "click",
+    () => setTimeout(() => {
+      if (!$4("#share-pop").hidden && ++shareOpened >= 2 && readOnlyLinks) offerTip("share-twice");
+    }, 300)
+  );
+  $4("#export-btn").addEventListener("click", () => setTimeout(() => exportModal.isOpen && offerTip("first-export"), 300));
+  document.addEventListener(
+    "click",
+    (e2) => {
+      const t2 = e2.target;
+      if (t2.closest("#share-pop [data-tab=readonly]")) didTip("share-twice");
+      else if (t2.closest("#panel [data-rv-changes] > summary")) didTip("stale-opinion");
+    },
+    true
+  );
   void data.activity().then((events) => activity.load(events));
   void people.init().then(() => {
     people.start();
-    setTimeout(() => guide.firstVisit(), 400);
+    setTimeout(() => {
+      guide.welcome(deepLink);
+      if (filmLink !== void 0) guide.openHelp("tips", filmLink ? { chapter: filmLink } : {});
+    }, 400);
     activity.changed();
     let last2 = "";
     setInterval(() => {