visualproof 0.3.0 → 0.4.0

package/dist/web/index.html

@@ -77,7 +77,12 @@
         <button id="who" class="who" hidden></button>
         <div id="who-menu" class="glass" role="menu" aria-label="Your name and visibility" hidden></div>
       </div>
-      <button id="help-btn" class="help-btn" title="Keys and gestures, and the tour (?)" aria-label="Help">?</button>
+      <!-- help: a menu of the tips, the keys, the tour, and what the project and VisualProof are
+           (GuideSpec decision 8, web/src/guide.ts) -->
+      <div class="help-wrap">
+        <button id="help-btn" class="help-btn" title="Help: tips, keys, the tour (?)" aria-label="Help" aria-haspopup="menu" aria-expanded="false">?</button>
+        <div id="help-menu" class="glass" role="menu" aria-label="Help" hidden></div>
+      </div>
       <!-- on a phone the bar's buttons are in one menu (web/src/phone.ts) -->
       <div class="more-wrap">
         <button id="more-btn" class="act-btn act-icon" aria-label="More" aria-haspopup="menu" aria-expanded="false" title="Share, the library, export, activity, your name, help"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="3.5" cy="8" r="1.3"/><circle cx="8" cy="8" r="1.3"/><circle cx="12.5" cy="8" r="1.3"/></svg><span id="more-badge" class="act-badge" hidden></span></button>
@@ -229,6 +234,13 @@
     <div class="tour-spot"></div><div class="tour-card glass" role="dialog" aria-live="polite"></div>
   </div>
   <div id="help" hidden></div>
+  <!-- a tip in place, beside the control it is about (GuideSpec decision 9, web/src/intip.ts); What's
+       new, said once when the server runs a newer release than this browser saw (decision 11) -->
+  <div id="intip" class="glass" role="dialog" aria-live="polite" hidden></div>
+  <div id="whatsnew" class="glass" role="status" hidden></div>
+  <!-- a first visit: the tour and the film offered, never imposed; no backdrop, never the keyboard's
+       (GuideSpec decision 1) -->
+  <div id="welcome" class="glass" role="region" aria-label="Welcome" aria-live="polite" hidden></div>
   <div id="modal" hidden>
     <form id="who-form" class="modal-box glass" autocomplete="off">
       <div class="modal-title" id="who-title">Who is reviewing?</div>

package/dist/web/src/canvas.js

@@ -405,6 +405,10 @@ export class GraphCanvas {
      *  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;
     }
@@ -1439,6 +1443,24 @@ export class GraphCanvas {
         const k = Math.min(4, (Math.min(this.w, this.h) * 0.42) / Math.max(S.drawnR[c], 20));
         this.moveTo(S.cwx[c], S.cwy[c], Math.min(ZOOM_MOST, Math.max(k, minPx / Math.max(S.drawnR[c], 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 i = 0; i < set.length; i++) {
+            if (!set[i])
+                continue;
+            const [x, y] = this.posOf(i);
+            [x0, y0, x1, y1] = [Math.min(x0, x), Math.min(y0, y), Math.max(x1, x), Math.max(y1, y)];
+        }
+        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 k = 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, k)), animate);
+    }
     /** Bring world point (x, y) to the middle of the unobstructed area at zoom k. */
     moveTo(px, py, k, animate, dur = 520) {
         if (this.anim)

package/dist/web/style.css

@@ -607,7 +607,7 @@ button.o-trust:hover { color: var(--accent); background: var(--code-bg); }
 #windows > * { pointer-events: auto; }
 /* a popover lies above the windows: it was opened last, and goes on a press anywhere else. Those
    inside a bar raise the bar with them while they are open */
-#bar:has(#share-pop:not([hidden]), #results:not([hidden]), #who-menu:not([hidden])), #viewbar:has(#views-menu:not([hidden]), #focus-menu:not([hidden])), #zoom:has(#eyes-pop:not([hidden])) { z-index: 36; }
+#bar:has(#share-pop:not([hidden]), #results:not([hidden]), #who-menu:not([hidden]), #help-menu:not([hidden])), #viewbar:has(#views-menu:not([hidden]), #focus-menu:not([hidden])), #zoom:has(#eyes-pop:not([hidden])) { z-index: 36; }
 /* a source window (web/src/sourcewin.ts): floating, not modal; as large as its code needs until the
    reader moves or resizes it (floatwin.ts sets its place, and its bounds while it is fitted to its
    code), scrolling down beyond that */
@@ -1961,6 +1961,9 @@ a.link:hover { text-decoration: underline; }
 .tour-text { font-size: 13px; line-height: 1.5; color: var(--text); }
 .tour-actions { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
 .tour-gap { flex: 1; }
+/* the TCB step's three views of one theorem (GuideSpec decision 2) */
+.tour-seg { display: inline-flex; margin: 0 0 8px; }
+@media (prefers-reduced-motion: reduce) { .tour-shade, .tour-spot, .tour-card { transition: none; } }
 #help { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.22); }
 .help-box { width: min(660px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; outline: none; }
 .help-head { display: flex; justify-content: space-between; align-items: center; }
@@ -1989,6 +1992,183 @@ kbd {
   color: var(--text-2); font: 600 14px var(--font); cursor: pointer;
 }
 .help-btn:hover { border-color: var(--accent); color: var(--accent); }
+/* the help menu (GuideSpec decision 8): the tips, the keys, the tour; then what the project and
+   VisualProof are, said in it */
+.help-wrap { position: relative; display: flex; }
+#help-menu {
+  position: absolute; top: 38px; right: 0; width: min(340px, calc(100vw - 24px)); padding: 6px; border-radius: 14px; z-index: 40;
+  display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface-solid) 96%, transparent);
+  box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
+}
+#help-menu[hidden] { display: none; }
+.hm-item {
+  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px;
+  background: transparent; color: var(--text); font: 13px var(--font); text-align: left; text-decoration: none; cursor: pointer;
+}
+.hm-item:hover, .hm-item:focus-visible { background: var(--code-bg); outline: none; }
+.hm-item[aria-disabled="true"] { cursor: default; }
+.hm-item[aria-disabled="true"]:hover { background: none; }
+.hm-t { font-weight: 500; }
+.hm-h { font-size: 11.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
+.hm-d { font-size: 12px; line-height: 1.4; color: var(--text-2); }
+.hm-d code { font: 11px var(--mono); background: var(--code-bg); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
+.hm-sep { height: 1px; margin: 5px 4px; background: var(--line); }
+.hm-link { color: var(--accent); }
+/* the tour has pointed at the tips: a dot on the help until the menu is first opened */
+.help-btn.has-dot, #more-btn.has-dot { position: relative; }
+.help-btn.has-dot::after, #more-btn.has-dot::after {
+  content: ""; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%;
+  background: var(--accent); box-shadow: 0 0 0 2px var(--surface-solid);
+}
+
+/* the sheet's tabs: the tips first, then the keys (GuideSpec decision 8) */
+.help-tabs { display: inline-flex; }
+.help-tabs button { padding: 4px 14px; font-size: 13px; }
+.help-pane { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
+.help-pane[hidden] { display: none; }
+/* the Tips tab (GuideSpec decisions 5–8): the tour film with its chapters, then the tips it does not
+   show, one row each. On a larger screen the sheet is as wide as the film needs, within the window */
+@media (min-width: 641px) {
+  .help-box:has([data-help-pane="tips"]:not([hidden])) { width: min(1340px, calc(100vw - 48px)); }
+}
+.help-pane [hidden] { display: none !important; }
+.tips-filter { font-family: var(--font); }
+.tips-list { display: flex; flex-direction: column; gap: 14px; }
+.tips-group { display: flex; flex-direction: column; gap: 6px; }
+/* a part of the panel with the ⓘ of its tip beside its heading (GuideSpec decision 15) */
+.sec-row { display: flex; align-items: center; gap: 4px; }
+.sec-row > .sec-h { flex: 1; min-width: 0; }
+.p-info { flex: none; width: 22px; height: 22px; border: none; border-radius: 50%; background: none; color: var(--text-3); font-size: 14px; cursor: pointer; }
+.p-info:hover { color: var(--accent); background: var(--code-bg); }
+@keyframes tip-flash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); } to { box-shadow: 0 0 0 3px transparent; } }
+/* the film: the player, its chapters beside it (under it, where the sheet is narrow) */
+.film-h { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }
+.film { display: grid; grid-template-columns: minmax(0, 960px) minmax(240px, 320px); gap: 16px; align-items: start; }
+@media (max-width: 1100px) { .film { grid-template-columns: minmax(0, 1fr); } }
+/* the film is light: in the dark theme, a thin frame of the theme's own, so that it does not glare */
+.film-stage { outline: none; border-radius: 12px; }
+.film-stage:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
+.film-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #f5f5f7; border: 1px solid var(--line); box-shadow: var(--shadow); }
+:root[data-theme="dark"] .film-frame { border: 6px solid #2c2c2e; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
+:root[data-theme="dark"] .film-video, :root[data-theme="dark"] .film-still { filter: brightness(0.92); }
+.film-video, .film-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
+/* the controls over the film: play, captions, larger — light, as the film is */
+.film-controls { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
+.film-controls button {
+  pointer-events: auto; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 18px; border: 1px solid rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.86); color: #1d1d1f; font: 600 13px var(--font); box-shadow: var(--shadow); cursor: pointer;
+  backdrop-filter: blur(10px);
+}
+.film-controls button:hover { color: var(--accent); }
+.film-controls [data-film-cc][aria-pressed="false"] { color: #a1a1a6; text-decoration: line-through; }
+.film-gap { flex: 1; }
+/* a caption: over the film at the bottom, in the page's own type, a soft pill readable on the light film */
+.film-video::cue { color: transparent; background: transparent; }
+.film-cc {
+  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); max-width: min(78%, 760px); padding: 6px 14px;
+  border-radius: 14px; background: rgba(255, 255, 255, 0.84); color: #1d1d1f; font: 500 14px/1.4 var(--font); text-align: center;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); backdrop-filter: blur(10px); pointer-events: none;
+}
+/* the film while the server fetches it: said quietly, over the poster */
+.film-wait {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 14px; border-radius: 14px;
+  background: rgba(255, 255, 255, 0.84); color: #6e6e73; font: 500 13px/1.4 var(--font); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px); pointer-events: none;
+}
+.film-controls button[disabled] { opacity: 0.45; cursor: default; }
+/* a chapter's captions where the film does not play them: listed under its words */
+.film-cues { margin: 2px 0 0; padding-left: 16px; color: var(--text-2); font-size: 12px; line-height: 1.45; display: flex; flex-direction: column; gap: 2px; }
+.film-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.film-list-btn { display: none; align-self: flex-start; }
+/* large: the film fills the sheet, its chapters beside it (folded away at a press); then the screen */
+.help-box.film-large { width: calc(100vw - 48px); height: calc(100vh - 48px); max-height: none; }
+.help-box.film-large [data-help-pane="tips"] > :not([data-film]) { display: none; }
+.help-box.film-large .film { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: start; }
+.help-box.film-large .film.list-hidden { grid-template-columns: minmax(0, 1fr); }
+.help-box.film-large .film.list-hidden .film-list { display: none; }
+.help-box.film-large .film-list-btn { display: inline-flex; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-solid); color: var(--text-2); font: 12.5px var(--font); cursor: pointer; }
+.help-box.film-large .film-frame, .help-box.film-large .film-bar { width: min(100%, calc((100vh - 230px) * 1.6)); margin-left: auto; margin-right: auto; }
+.help-box.film-large .film-cc { font-size: 19.5px; bottom: 70px; padding: 8px 18px; border-radius: 18px; }
+@media (max-width: 1100px) { .help-box.film-large .film { grid-template-columns: minmax(0, 1fr); } }
+.film-stage:fullscreen { background: #000; display: flex; flex-direction: column; justify-content: center; padding: 24px; }
+.film-stage:fullscreen .film-frame { width: min(100%, calc((100vh - 80px) * 1.6)); margin: 0 auto; border: none; }
+.film-stage:fullscreen .film-cc { font-size: 24px; bottom: 80px; }
+.film-stage:fullscreen .film-bar { width: min(100%, calc((100vh - 80px) * 1.6)); margin: 8px auto 0; }
+.film-stage:fullscreen .film-track { background: rgba(255, 255, 255, 0.22); }
+/* under the player, a segment per chapter: the one playing fills */
+.film-bar { display: flex; gap: 3px; margin-top: 6px; }
+.film-seg { flex-basis: 0; flex-shrink: 1; padding: 5px 0; border: none; background: none; cursor: pointer; min-width: 4px; }
+.film-track { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
+.film-seg:hover .film-track { background: color-mix(in srgb, var(--accent) 22%, var(--line)); }
+.film-fill { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
+/* the chapters: one row each, the one playing open */
+.film-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.film-item { border: 1px solid transparent; border-radius: 12px; }
+.film-item.on { border-color: var(--line); background: var(--surface-solid); box-shadow: var(--shadow); }
+.film-card { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 11px; cursor: pointer; outline: none; }
+.film-card:hover { background: var(--code-bg); }
+.film-item.on .film-card:hover { background: none; }
+.film-card:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
+.film-n { flex: none; width: 1.4em; text-align: right; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
+.film-item.on .film-n { color: var(--accent); font-weight: 600; }
+.film-title { font-weight: 600; font-size: 13px; }
+.film-body { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 11px calc(1.4em + 20px); }
+/* the tips the film does not show: a row each, its title and its first line; one open */
+.refs-head { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
+.refs-head .help-h { margin: 0; }
+.refs-head .tips-filter { flex: 1; max-width: 320px; margin-left: auto; }
+.refs { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-solid); }
+.ref + .ref { border-top: 1px solid var(--line); }
+.ref.flash { animation: tip-flash 1.6s ease-out; }
+@media (prefers-reduced-motion: reduce) { .ref.flash { animation: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); } }
+.ref-head { display: flex; gap: 12px; align-items: baseline; width: 100%; padding: 9px 12px; border: none; background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
+.ref-head:hover { background: var(--code-bg); }
+.ref-title { flex: none; font-weight: 600; font-size: 13px; }
+.ref-line { flex: 1; min-width: 0; color: var(--text-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ref.open .ref-line { display: none; }
+.ref-body { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
+.ref-clip video { display: block; width: 100%; max-height: 70vh; border-radius: 10px; background: #f5f5f7; object-fit: contain; }
+.tip-title { font-weight: 650; font-size: 13.5px; letter-spacing: -0.01em; }
+.tip-text { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
+.tip-text b { color: var(--text); font-weight: 600; }
+.tip-acts { display: flex; gap: 12px; margin-top: 2px; font-size: 12.5px; }
+.tip-acts a { color: var(--accent); text-decoration: none; }
+.tip-new { font-size: 10.5px; font-weight: 600; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 0 6px; vertical-align: 1px; }
+.tips-off { display: flex; align-items: center; gap: 6px; }
+.help-update { margin-top: 6px; color: var(--text); }
+.help-about.flash { animation: tip-flash 1.6s ease-out; border-radius: 8px; }
+/* a tip in place, beside its control, its arrow pointing at it (GuideSpec decision 9) */
+#intip {
+  position: fixed; left: 0; top: 0; z-index: 44; width: min(280px, calc(100vw - 16px)); padding: 11px 13px 10px;
+  border-radius: 12px; background: var(--surface-solid); box-shadow: var(--shadow-lg);
+}
+#intip::before {
+  content: ""; position: absolute; left: calc(var(--arrow-x, 50%) - 6px); top: -6px; width: 12px; height: 12px;
+  background: var(--surface-solid); transform: rotate(45deg); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
+}
+#intip.above::before { top: auto; bottom: -6px; border: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.intip-title { font-weight: 650; font-size: 13.5px; margin-bottom: 4px; }
+.intip-text { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
+.intip-text b { color: var(--text); font-weight: 600; }
+.intip-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
+/* the welcome of a first visit (GuideSpec decision 1): beside the side panel, over the legend; it
+   folds into the dot on ? */
+#welcome {
+  position: fixed; left: 300px; bottom: 64px; z-index: 44; width: min(360px, calc(100vw - 24px)); padding: 14px 16px 12px;
+  border-radius: 14px; background: var(--surface-solid); box-shadow: var(--shadow-lg);
+  transform-origin: top right; transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.36s;
+}
+#welcome.folding { opacity: 0; }
+@media (prefers-reduced-motion: reduce) { #welcome { transition: none; } }
+.wel-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 4px; }
+.wel-text { font-size: 13px; line-height: 1.45; color: var(--text-2); }
+.wel-acts { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
+/* What's new, once: at the bottom, in the middle, quiet (GuideSpec decision 11) */
+#whatsnew {
+  position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 44; display: flex; align-items: center; gap: 4px;
+  padding: 4px 6px 4px 14px; border-radius: 999px; background: var(--surface-solid); box-shadow: var(--shadow);
+}
+.news-open { border: none; background: none; color: var(--accent); font: 600 13px var(--font); cursor: pointer; padding: 4px 0; }
 
 /* the zoom buttons: the bottom right of the canvas, beside the panel when it is open */
 #zoom {
@@ -2441,6 +2621,8 @@ span.tm-row { color: var(--text-2); cursor: default; }
   #more-badge { position: absolute; top: -5px; right: -5px; }
   #more-pop { position: fixed; top: 58px; right: 8px; width: min(260px, calc(100vw - 16px)); z-index: 46; border-radius: 14px; padding: 6px; display: flex; flex-direction: column; background: var(--surface-solid); box-shadow: 0 0 0 0.5px var(--line), var(--shadow-lg); }
   #more-pop[hidden] { display: none; }
+  /* the help menu, from ⋯ → Help: at the top right, as ⋯'s own */
+  #help-menu { position: fixed; top: 58px; right: 8px; z-index: 46; background: var(--surface-solid); }
   .more-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 15px var(--font); text-align: left; }
   .more-item:active { background: var(--code-bg); }
   .more-item svg { flex: none; width: 18px; height: 18px; color: var(--text-2); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@@ -2486,6 +2668,12 @@ span.tm-row { color: var(--text-2); cursor: default; }
   #eyes-pop kbd { display: none; }
   .help-touch .help-row { grid-template-columns: 116px minmax(0, 1fr); font-size: 14px; padding: 5px 0; }
   .help-touch .help-g { color: var(--text); font-weight: 600; }
+  .film { grid-template-columns: minmax(0, 1fr); }
+  .refs-head .tips-filter { max-width: none; }
+  #whatsnew { bottom: calc(64px + env(safe-area-inset-bottom)); }
+  /* over the bottom of the screen, where the sheet comes up */
+  #welcome { left: 8px; right: 8px; width: auto; bottom: calc(64px + env(safe-area-inset-bottom)); }
+  .wel-acts { flex-wrap: wrap; }
   #zoom #zoom-in, #zoom #zoom-out { display: none; }
   #foot { left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); }
   /* under the view bar, the review strip, then the selection bar (--strip-h: main.ts) */

package/docs/agent-api/export.md

@@ -148,8 +148,8 @@ Every field is optional; left out, as a new artwork has it.
   names; `from` `none` (default) or `board`.
 - `targets`: `all` (default), `none`, `faded`, or a list of targets marked alone. `keys`, `notes`:
   default true. `edges`: `all` (under a selection, the rest faint), `selection`, `none`.
-- `selection`: `{name, mode}` (`mode` as `POST view`'s; default `tcb`), lit while `lit` (default
-  true). `view`: a view's id; left out, the Project.
+- `selection`: `{name, mode}` (`mode` as `POST view`'s, or `refs`, what it uses directly; default
+  `tcb`), lit while `lit` (default true). `view`: a view's id; left out, the Project.
 
 Answer: `{ok, link, length, size, names: {clusters, decls, ruled}, targets, selection, left, note}`;
 `left`: names or targets beyond what an artwork carries, left out. Saving both files, the page says

package/docs/agent-api/history.md

@@ -33,7 +33,8 @@ name (a private reader's; their opinions, targets, key marks and trust keep thei
   `note` its id, `text` then, `shown` whether the view shows it by it), `note` (`what` created,
   edited or deleted; `view`, `title` for a view's own note, "" for a project note; `note` its id;
   `text` after, or before a deletion; `carried` `{mode, from, to}` where a build carried a project
-  note to the cluster its declarations moved to, an edit by VisualProof).
+  note to the cluster its declarations moved to, an edit by VisualProof), `tool` (the VisualProof
+  version serving the site changed: `from`, `to`; `setAside`, a version that failed).
 
 ## History
 
@@ -51,7 +52,7 @@ on a saved graph (`--graph`): 404. MCP: `history` (`snapshots`, `diff`, `moves`,
   "current": 2, "diskBytes": 415893 }
 ```
 
-Oldest first. `at`: when the build finished (newest `.olean`); `approx`: only an extraction made
+Oldest first. `tool`: the VisualProof version that read it. `at`: when the build finished (newest `.olean`); `approx`: only an extraction made
 before the history dates it. `commit`: checked out when read (`dirty`: `.lean` files differed;
 `guessed`: imported, the last commit before it). `missing`: modules not read (unknown at that
 build, not gone). `bytes`: `new` written to keep it, `all` its files. `renames`: found against the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visualproof",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "See a Lean codebase's declaration graph and the TCB of its theorems.",
   "license": "Apache-2.0",
@@ -21,9 +21,11 @@
     "prepack": "npm run build",
     "serve": "node src/server/main.ts serve",
     "showcase": "node scripts/showcase.mjs",
+    "tips:record": "node scripts/tips-record.mjs",
     "typecheck": "tsc --noEmit -p .",
     "test": "node --test --import ./test/setup.ts \"test/*.test.ts\"",
     "test:toolchains": "node scripts/test-toolchains.mjs",
+    "test:updates": "node scripts/test-updates.mjs",
     "golden:update": "VP_GOLDEN_UPDATE=1 node --test --import ./test/setup.ts test/compat.test.ts"
   },
   "engines": {